/* css/style.css */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: black;
    color: white;
}

.container {
    background-color: black;
    color: white; /* Pour assurer que le texte soit visible */
}

.table {
    width: 95%;
    margin: auto;
    background-color: #f7f7f7; /* Gris très clair pour le fond des tableaux */
}

.table tr:nth-child(even) {
    background-color: #ebebeb; /* Légèrement plus foncé pour une cellule sur deux */
}

.table th, .table td {
    text-align: center;
    vertical-align: middle; /* Centrer verticalement le contenu des cellules */
    font-size: 2.2em; /* Ajustez cette valeur selon vos besoins */
    color: black; /* Couleur du texte en noir */
}

.table thead th {
    vertical-align: middle; /* Centrer verticalement le contenu des en-têtes */
    border-bottom: 2px solid #dee2e6;
    font-weight: bold; /* Titres des colonnes en gras */
}

.missed-call td {
    background-color: #800000; /* Bordeaux */
    color: white; /* Assurez-vous que cette déclaration a une spécificité suffisante */
    vertical-align: middle; /* Centrer verticalement le contenu des cellules avec appel manqué */
}


/* Augmenter la taille du champ de saisie et du bouton */
#callDate {
    font-size: 1.5em; /* Ajustez cette valeur selon vos préférences */
    padding: 1em; /* Ajoutez un peu de rembourrage pour une meilleure manipulation */
    font-weight: bold;
    
}

/* Styliser le bouton spécifique */
.button-date {
    background-color: #004080; /* Bleu foncé */
    color: white; /* Texte en blanc */
    border: none; /* Supprimer la bordure par défaut */
    border-radius: 20px; /* Angles arrondis */
    cursor: pointer; /* Style de curseur pour indiquer qu'il s'agit d'un bouton cliquable */
    font-size: 1.5em; /* Ajustez la taille du texte */
    padding: 1em; /* Ajoutez un peu de rembourrage pour une meilleure manipulation */
    font-weight: bold; /* Rendre le texte en gras */
    margin-left: 20px;
}

/* Ajouter un effet au survol pour le bouton spécifique */
.button-date:hover {
    background-color: #003366; /* Un bleu légèrement plus foncé au survol */
}

.button-rappeler {
    /* styles pour le bouton Rappeler */
    background-color: #004080; /* Bleu foncé */
    color: white;
    border: none;
    border-radius: 20px;
    padding: 0.2em;
    cursor: pointer;
    font-size: 1em;
    margin: 10px;
}

.button-rappeler:hover {
    background-color: #003366; /* Couleur un peu plus foncée au survol */
}

.button-pelissanne {
    /* styles pour le bouton Rappeler */
    background-color: #004080; /* Bleu foncé */
    color: white;
    border: none;
    border-radius: 20px;
    padding: 0.2em;
    cursor: pointer;
    font-size: 1em;
    margin: 10px;
}

.button-pelissanne:hover {
    background-color: #003366; /* Couleur un peu plus foncée au survol */
}

.button-rappeler:hover {
    background-color: #003366; /* Couleur un peu plus foncée au survol */
}

.button {
    /* styles pour le bouton Rappeler */
    background-color: #004080; /* Bleu foncé */
    color: white;
    border: none;
    border-radius: 20px;
    padding: 0.2em;
    cursor: pointer;
    font-size: 1em;
    margin: 10px;
}

.button:hover {
    background-color: #003366; /* Couleur un peu plus foncée au survol */
}

/* Modifier la couleur des liens dans les cellules du tableau */
.table td a {
    color: black; /* Définir la couleur du lien en noir */
    text-decoration: none; /* Supprimer le soulignement par défaut des liens */
}

/* Changer la couleur des liens au survol */
.table td a:hover {
    color: #555; /* Couleur de survol - ajustez selon vos préférences */
    text-decoration: underline; /* Ajouter un soulignement au survol pour une meilleure visibilité */
}

/* Modifier la couleur des liens dans les cellules avec fond bordeaux */
.missed-call td a {
    color: white; /* Définir la couleur du lien en blanc */
}

/* Changer la couleur des liens au survol dans les cellules avec fond bordeaux */
.missed-call td a:hover {
    color: #ccc; /* Couleur de survol pour un contraste adéquat - ajustez selon vos préférences */
    text-decoration: underline; /* Ajouter un soulignement au survol */
}




/* Styles pour le contenu de la fenêtre modale */
/* Styles pour le contenu de la fenêtre modale */
/* Styles pour le contenu de la fenêtre modale */

/* Styles pour le contenu de la fenêtre modale */
.modal-content {
    background-color: white; /* Fond blanc pour la fenêtre modale */
    color: black; /* Texte en noir */
}

/* Si vous souhaitez également changer la couleur de fond de l'arrière-plan de la modale */
.modal-backdrop {
    background-color: rgba(255, 255, 255, 0.5); /* Fond semi-transparent blanc */
}

/* Styles pour les titres et le texte à l'intérieur de la fenêtre modale */
.modal-title,
.modal-body {
    color: black; /* Texte en noir */
}



/* Styles pour les liens au survol à l'intérieur de la fenêtre modale */
.modal-body a:hover {
    color: white; /* Couleur bleu un peu plus foncé au survol */
    text-decoration: underline; /* Souligner les liens au survol */
}

/* Styles pour les boutons à l'intérieur de la fenêtre modale */
.modal-footer .btn {
    background-color: #004080; /* Bleu foncé pour les boutons */
    color: white; /* Texte en blanc */
}

/* Styles pour les boutons au survol à l'intérieur de la fenêtre modale */
.modal-footer .btn:hover {
    background-color: #003366; /* Bleu un peu plus foncé au survol */
}

.button-download {
    display: block; /* Rend le lien comme un bloc pour permettre le centrage */
    text-align: center; /* Centre le texte dans le bouton */
    background-color: #004080; /* Couleur de fond du bouton */
    color: white; /* Couleur du texte */
    font-weight: bold; /* Rend le texte gras */
    padding: 10px 20px; /* Ajoute du padding autour du texte */
    margin: 10px auto; /* Centrage horizontal et espace autour du bouton */
    border-radius: 5px; /* Angles arrondis pour le bouton */
    text-decoration: none; /* Supprime le soulignement par défaut des liens */
     font-size: 3rem;
}

.button-download:hover {
    background-color: #003366; /* Changement de couleur au survol */
}

.modal-body p {
    font-size: 2em; /* s'adapte en fonction de la taille de police du parent */
}



/* Styles pour les petits écrans */
@media (max-width: 768px) {
    .modal-dialog {
        width: 90%;
        max-width: none;
    }
}

@media (min-width: 1200px) {
    .modal-xl {
        max-width: 90%; /* ou une autre largeur selon vos besoins */
    }
}

@media (min-width: 1200px) {
    .modal-dialog {
        max-width: 90%; /* ou une autre largeur selon vos besoins */
    }
}

@media (min-width: 200px) and (max-width: 5000px) {
    .modal-dialog {
        width: 90%; /* Définit la largeur de la modale à 90% pour les écrans de taille moyenne */
        max-width: none; /* Annule toute limite maximale de largeur éventuellement définie */
    }
}

@media (max-width: 600px) {
    .modal-body p {
        font-size: 1rem; /* plus petite taille de police pour les écrans étroits */
    }
}

@media (min-width: 601px) and (max-width: 1200px) {
    .modal-body p {
        font-size: 1,4rem; /* taille de police moyenne pour les tablettes et petits écrans */
    }
}

@media (min-width: 1201px) {
    .modal-body p {
        font-size: 1.8rem; /* plus grande taille de police pour les écrans larges */
    }
}