/*
    Si on veut un style spécifique au theme clair on déclarera notre règle css de cette manière :
        body:not(.dark-mode) regle_css {
            ...
        }

    Si on veut un style spécifique au theme sombre on déclarera notre règle css de cette manière :
        .dark-mode regle_css {
            ...
        }
*/

/*
* -------------
* Partie commun
* -------------
*/

    @font-face {
        font-family: copperplate;
        src: url('../fonts/Copperplate.ttf');
    }

    .copperplate {
        font-family: copperplate;
    }

    .logo_client {
        width: 200px;
    }

    .logo_site {
        width: 50px;
    }

    /* Agrandi la card du formulaire de connexion quand on est pas en mode mobile */
    @media (min-width:577px) {
        .login-box {
            width: 560px;
        }
    }

    /* Définition de class pour changer le curseur */
    .curseur_pointeur, .afficher_mot_de_passe {
        cursor: pointer;
    }
    .curseur_saisir {
        cursor: grab;
    }

    /* Change le curseur quand on passe la souris par dessus un élément que l'on a rendu draggable avec jquery ui */
    .ui-draggable-handle {
        cursor: move;
    }

    /* Supprime la taille en dur du dropdown des colonnes visible, sinon le texte va sortir du dropdown. */
    div.dt-button-collection {
        width: unset;
    }

    /* Couleur de fond pour l'affichage des variables lors d'une erreur ajax. */
    .debug {
        background-color: #f4fdff;
    }

    /* Rajout de class pour définir la largeur, reprend le même nom que les class de bootstrap. */
    .w-10 {
        width: 10%;
    }
    .w-90 {
        width: 90%;
    }

    /* Défini la taille de l'infobox en dure, permet d'avoir toutes les infobox qui font la même taille si une possède un texte plus grand que les autres. */
    .info_box_statistiques {
        /* Enlève 1rem au 100% qui correspond au margin-bottom de adminlte, sinon en mode mobile les infobox vont se toucher. */
        height: calc(100% - 1rem);
    }

    /* Écrase les styles d'adminlte dans les infobox pour les statistiques, sinon le texte va être coupé car il est trop long. */
    .info_box_statistiques .info-box-text {
        text-overflow: unset !important;
        white-space: unset !important;
    }

    /* Surcharge la class des titres des fancytrees, empêche au texte de sortir du fancytree. */
    .fancytree-title {
        white-space: break-spaces;
        /* Le titre ne possède pas de taille fixe mais va à la place prendre 100% de la div, on vient donc
        prendre en compte les 2 icones à sa gauche et l'icone à droite qui ont une taille fix (16px)*3 +
        (3px)*3 de marge. */
        width: calc(100% - 57px);
    }

    /* Hauteur maximum de la composition du logement quand on saisie l'état des lieux d'entrée/sortie. */
    #fancytree_composition_logement {
        max-height: 65vh;
    }

    /* Hauteur fixe dans la vue pour visualiser les logs */
    .fancytree_container, .log_container {
        height: 65vh;
    }

    /* Ajoute une taille fixe au résultat de la recherche, sinon si il y a trop de résultat cela va sortir de l'écran. */
    .dropdown-recherche {
        width: auto !important;
        max-height: 80vh !important;
        overflow-y: scroll;
    }

    /* fond de la modal de chargement. */
    #modal_chargement {
        z-index: 1052;
    }
    #ppl_modal_backdrop {
        opacity: 0.5;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1051;
        width: 100vw;
        height: 100vh;
        background-color: #000;
    }

    /* Couleur de fond pour les lignes de tableau incorrect. */
    .ligne_incorrect
    {
        background-color: #B3B3B3 !important;
    }

    /* Class pour aligner les boutons des carousel sur le bord plutôt que au centre. */
    .carousel-control-prev-icon {
        position: inherit !important;
        left: 0 !important;
    }
    .carousel-control-next-icon {
        position: inherit !important;
        right: 0 !important;
    }

    /* Taille des inputs pour le choix du nombre de jours pour la date limite de paiment de la facture. */
    .mode_calcul_date_limite_paiement {
        display: unset;
        width: 100px;
    }

    /* Création d'un hr avec du texte au milieu. */
    .hr_texte_centre {
        align-items: center;
        display: flex;
        text-align: center;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    .hr_texte_centre::after, .hr_texte_centre::before {
        content: "";
        flex: 1;
        border-top: .0625em solid #c9c5c3;
    }
    .hr_texte_centre::after {
        margin-left: .5em;
    }
    .hr_texte_centre::before {
        margin-right: .5em;
    }

    /* Taille minimum pour les inputs des lignes de facturation et de règlement. */
    .input_ligne_facturation {
        min-width: 200px;
    }
    .input_ligne_facturation_date, .input_ligne_facturation_moyen_paiement {
        min-width: 150px;
    }
    .input_ligne_facturation_montant {
        min-width: 100px !important;
    }

    /* Défini la taille des datatables en dur pour éviter les décalages lors des recalculs. */
    .table-responsive > .dataTable {
        width: 100% !important;
    }

    /* Change la couleur du fond et du texte de l'option du menu. */
    .menu_actif {
        background-color: #2A588C;
        color: #fff !important;
    }

    /* Change la couleur de fond de la ligne du tableau si il s'agit d'un établissement de test. */
    .etablissement_test {
        background-color: #BFBFBF !important;
    }

    /* Création d'un élément fonctionnant comme un hr mais avec du texte à gauche. */
    .hr_text_gauche {
        align-items: center;
        display: flex;
        text-align: center;
        color: #007BFF !important;
    }
    .hr_text_gauche::after {
        content: "";
        flex: 1;
        margin: 0 .5em;
        border-top: .0625em solid #45607D;
        top: 50%;
    }

/*
* -----------------
* Fin partie commun
* -----------------
*/

/*
* -------------------
* Partie theme clair
* -------------------
*/

    /* Couleur de fond du site */
    body:not(.dark-mode) .content-wrapper, body:not(.dark-mode) .wrapper, .login-page {
        background-color:#E0DCDA;
    }

    /* Couleur du header de toutes les cards */
    body:not(.dark-mode) .card-header {
        background-color:#F0F0F0;
    }

    /* Changement de la couleur de fond des thead */
    body:not(.dark-mode) table > thead  {
        background-color:#F9F9F9;
    }

    /* Change la couleur lorsque l'on passe la souris sur la ligne d'un tableau */
    body:not(.dark-mode) > *:not(#toolbarContainer) tbody tr:hover {
        background-color: #DFE8F6 !important;
    }

    /* Change la couleur lorsque l'on passe la souris sur la ligne d'un sous tableau dans la journalisation */
    body:not(.dark-mode) > *:not(#toolbarContainer) tbody tr:hover tr:hover {
        background-color: #d4f3ff !important;
    }

    /* Utilisation de la meme ombre que les inputs */
    body:not(.dark-mode) .custom-select {
        box-shadow: inset 0 0 0 transparent;
    }

    /* Corrige les boutons du carousel qui ne sont pas visible en thème clair. */
    body:not(.dark-mode) .carousel-control-prev-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23222' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
    }
    body:not(.dark-mode) .carousel-control-next-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23222' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
    }

    /* Couleur de fond pour les footer de table. */
    body:not(.dark-mode) table > tfoot {
        background-color: #F9F9F9;
    }

/*
* -----------------------
* Fin partie theme clair
* -----------------------
*/

/*
* -------------------
* Partie theme sombre
* -------------------
*/

    /* Change la couleur du texte dans les confirmations et notifications. */
    body.dark-mode .swal2-html-container {
        color: #e2e2e2;
    }

    /* Couleur du header de toutes les cards */
    .dark-mode .card-header {
        background-color:#444444;
    }

    /* Couleur de fond du site */
    .dark-mode .content-wrapper, .dark-mode .wrapper {
        background-color:#222222 !important;
    }

    /* Change la couleur lorsque l'on passe la souris sur la ligne d'un tableau */
    .dark-mode > *:not(#toolbarContainer) tbody tr:hover {
        background-color: #656b72 !important;
    }

    /* Change la couleur lorsque l'on passe la souris sur la ligne d'un sous tableau dans la journalisation */
    .dark-mode > *:not(#toolbarContainer) tbody tr:hover tr:hover {
        background-color: #888 !important;
    }

    /* Change la couleur de la bordure que l'on rajoute pour les tables */
    .dark-mode .border-left.border-bottom {
        border-color: #6c757d !important;
    }

    /* Change la couleur du texte des informations pour le suivi des utilisateurs */
    .dark-mode table pre {
        color: #fff;
    }

    /* Change la couleur des inputs, des selects et des textareas qui sont en disabled */
    .dark-mode select:disabled, .dark-mode textarea:disabled , .dark-mode input[type]:disabled {
        background: #454d55 !important;
    }

    /* Change la couleur des hr qui ne sont pas visible avec le theme sombre */
    .dark-mode hr {
        border-top: 1px solid #fff;
    }

    /* Change la couleur du trait. */
    .dark-mode .hr_text_gauche::after {
        border-top: .0625em solid #a2b0ce;
    }

/*
* -----------------------
* Fin partie theme sombre
* -----------------------
*/

/*
* -----------------------
* Partie éditeur de code.
* -----------------------
*/

    /* Style du pre pour afficher du code */
    pre.code
    {
        font-family: Consolas,"Andale Mono WT","Andale Mono","Bitstream Vera Sans Mono","Nimbus Mono L",Monaco,"Courier New",monospace;
        font-size: 1em;
        direction: ltr;
        text-align: left;
        background-color: #eff2f8;
        color: var(--text,#333);
        box-shadow: none;
        border-radius: 2px;
        overflow: auto;
        word-wrap: normal;
        border: 1px solid #cccccc;
        padding: .7em 1em;
    }

    /* Ajoute un compteur de ligne  */
    pre.code.compteur_ligne {
        counter-reset: line;
    }
    pre.code.compteur_ligne div:before {
        counter-increment: line;
        content: counter(line);
        display: inline-block;
        border-right: 1px solid #ddd;
        padding: 0 .5em;
        margin-right: .5em;
        color: #888;
        width: 3rem;
        text-align: end;
    }

/*
* ---------------------------
* Fin partie éditeur de code.
* ---------------------------
*/

/*
* ----------------------
* Partie état des lieux.
* ----------------------
*/

    /* Gestion de la corbeille dans le fancytree pour l'état des lieux. */
    .etat_lieux_supprimer_element {
        visibility: hidden;
    }
    span:hover .etat_lieux_supprimer_element, span.fancytree-active .etat_lieux_supprimer_element {
        visibility: visible;
    }

    /* Hauteur fixe dans la modal pour visualiser le json de l'état des lieux. */
    .code_composition_logement {
        height: 65vh;
    }

    /* Définition de la taille pour l'affichage du plan */
    .plan_pdf {
        height: 750px;
    }
    .plan_image {
        max-height: 500px;
    }

/*
* --------------------------
* Fin partie état des lieux.
* --------------------------
*/