/* css/style.css */
/* doc-project | standard/style.css | Définit l’apparence globale de l’interface, des tableaux, boutons et modales, et complète l’intégration de l’authentification locale avec état masqué tant que l’accès n’est pas autorisé, hors styles dédiés de la modale SMS externalisés. | Expose: aucun | Dépend de: standard/css/auth-gate.css, standard/css/sms-confirm-modal.css | Impacte: UI, lisibilité des tableaux, comportement visuel des boutons/modales, masquage sécurisé de l’interface avant auth | Tables: aucune */
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 */
}

#standard-app[hidden] {
    display: none !important;
}

.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 */
    }
}