/* 
    Si on veut un style spécifique au theme claire 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
* -------------
*/
    /* Agrandi la card du formulaire de connexion quand on est pas en mode mobile */
    @media (min-width:577px) {
        .login-box {
            width: 560px;
        }
    }

    /* Réduit la taille des lignes du tableau lors du réglement d'une facture */
    .table-lighter tbody tr th {
        font-weight: lighter !important;
    }

    /* Lors de la création d'une facture, ajoute une contour rouge autour du select de l'occupant si l'on sélectionne un mois de loyer à facturer mais aucun occupant  */
    .is-invalid .select2-selection,
    .needs-validation ~ span > .select2-dropdown{
        border-color:red !important;
    }
    
    /* suppression de la bordure du haut du premier element pour les tables */
    table > tbody > tr:first-child > td {
        border-top: none;
    }

    /* Définition de class pour changer le curseur */
    .cursor_pointer, .afficher_mot_de_passe {
        cursor: pointer;
    }
    .cursor_grab {
        cursor: grab;
    }

    /* Définition de class pour changer le style du texte */
    .text_underline {
        text-decoration: underline;
    }

    /* Gestion de la corbeille dans le fancytree pour l'état des lieux */
    .etat_lieux_supprimer_element {
        cursor: pointer;
        visibility: hidden;
    }
    span:hover .etat_lieux_supprimer_element {
        visibility: visible;
    }

    /* Définition de la taille pour l'affichage du plan */
    .plan_pdf {
        height: 750px;
    }
    .plan_image {
        max-height: 500px;
    }

    /* Ecrase les styles d'adminlte dans les infobox de l'accueil admin, sinon le texte va dépasser car il est trop long */
    .info-box-text-accueil {
        text-overflow: unset !important;
        white-space: unset !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;
    }

    /* Style à appliquer seulement pour l'impression. */
    @media print {
        /* Masque le bouton lors de l'impression. */
        body .btn_imprimer {
            display: none;
        }
    }
    
    /* Définis la taille de la datatable en dur pour éviter les décalages lors des recalculs */
    .table-responsive > .dataTable {
        width: 100% !important;
    }
/*
* -----------------
* Fin partie commun
* -----------------
*/

/*
* -------------------
* Partie theme claire
* -------------------
*/
    /* Couleur du header de toutes les cards */
    body:not(.dark-mode) .card-header {
        background-color:#F0F0F0;
    }

    /* Couleur de fond du site */
    body:not(.dark-mode) .content-wrapper, body:not(.dark-mode) .wrapper {
        background-color:#E0DCDA;
    }

    /* Couleur de fond de la page de login et de la page accès interdit */
    body:not(.dark-mode) .login-page, .acces_interdit {
        background-color:#E0DCDA;
    }

    /* Changement de la couleur de fond des thead */
    body:not(.dark-mode) table > thead  {
        background-color:#F9F9F9;
    }

    /* Utilisation de la meme ombre que les inputs */
    body:not(.dark-mode) .custom-select {
        box-shadow: inset 0 0 0 transparent;
    }

    /* Change la couleur lorsque l'on passe la souris sur la ligne d'un tableau */
    body:not(.dark-mode) tbody tr:hover {
        background-color: #DFE8F6 !important;
    }

    /* Class pour aligner les boutons des carousel sur le bord plutôt que au centre et passer l'icon en sombre*/
    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;
    }
/*
* -----------------------
* Fin partie theme claire
* -----------------------
*/

/*
* -------------------
* Partie theme sombre
* -------------------
*/
    /* 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 du texte des informations pour le suivi des utilisateurs */
    .dark-mode pre.debug {
        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 de la flèche des custom-select qui n'est pas visible avec le theme sombre */
    .dark-mode .custom-select {
        background: #343a40 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23fff' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center/8px 10px;
    }

    /* 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 lorsque l'on passe la souris sur la ligne d'un tableau */
    .dark-mode tbody tr:hover {
        background-color: #656b72 !important;
    }
/*
* -----------------------
* Fin partie theme sombre
* -----------------------
*/


/*
* -----------------------------
* Partie visualisation des logs
* -----------------------------
*/
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;
}

/* Hauteur fixe dans la vue pour visualiser les logs */
.fancytree_container, .log_container {
    height: 65vh;
}

/* 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 visualisation des logs
* ---------------------------------
*/


/* Class pour personnaliser le dropdown de recherche de la navbar */
.dropdown-recherche 
{
    width: auto !important; 
    max-height: 80vh !important; 
    overflow-y: scroll;
}

/* Change la couleur de fond pour les etablissements de tests */
.etablissement_test
{
    background-color: #B3B3B3 !important;
}
