@import "_ls-variables-dbbff4a4206661e535d05c719b7c8a9a.css";
:root {
    --tblr-font-sans-serif: Muli, sans-serif;
    --tblr-primary: var(--ls-bleu-fonce-hex);
    --tblr-border-radius-sm: 0;
    --tblr-border-radius-md: 0;
    --tblr-border-radius-lg: 0;
    --tblr-border-radius-xl: 0;
    --tblr-body-font-size: 14px;
    --bs-body-bg: var(--ls-blanc-hex);

    margin-left: 0; /* https://github.com/tabler/tabler/issues/2271 */
}
body {
    overflow-y: scroll; /* https://github.com/tabler/tabler/issues/2271 */
}

/*********************************************/
/*              Typography                   */
/*********************************************/

.hr-text {
    font-size: 1rem;
    font-weight: 500;
}
.bg-ls-bleu-fonce {
    background-color: var(--ls-bleu-fonce-hex);
}
.text-white {
    color: var(--ls-blanc-hex);
}
.text-orange {
    color: var(--ls-orange-hex);
}

.navbar {
    --tblr-navbar-active-border-color: var(--ls-vert-base-hex);
    .navbar-nav .nav-item.active {
        color: var(--ls-vert-base-hex);
    }
}

/*********************************************/
/*        Menu latéral (espace siège)        */
/*********************************************/
/* Le fond bleu foncé est posé par bg-ls-bleu-fonce sur l'aside ; les menus
   déroulants, eux, sont détachés dans le DOM du point de vue du peintre et
   retomberaient sur la surface sombre par défaut de Tabler. On les aligne. */
.navbar-vertical .dropdown-menu {
    background-color: var(--ls-bleu-fonce-hex);
}
.navbar-vertical .nav-item.active > .nav-link,
.navbar-vertical .nav-link.active {
    color: var(--ls-vert-base-hex);
}

/* Entrée de second niveau correspondant à la page courante. Le vert ne va qu'à
   elle : la section parente ne porte pas `active`, sans quoi la règle
   `.navbar .navbar-nav .nav-item.active { color }` ci-dessus se transmettrait à
   tout le sous-menu (les .dropdown-item de Tabler sont en `color: inherit`).
   Sélecteur volontairement long : Tabler pose ce `color: inherit` avec cinq
   classes, il faut au moins autant pour reprendre la main. */
.navbar-vertical .navbar-collapse .navbar-nav .dropdown-menu .dropdown-item.active {
    color: var(--ls-vert-base-hex);
    background: none;
}

/* Au-delà de lg, Tabler aligne les entrées de second niveau sur le *libellé* du
   premier niveau : padding de page + 1.75rem réservés à l'icône, soit un retrait
   de 2.75rem. C'est beaucoup pour un menu de quatre à six entrées. On réduit le
   décrochage à 0.75rem — assez pour que la hiérarchie se lise, sans le gouffre. */
@media (min-width: 992px) {
    .navbar-vertical.navbar-expand-lg .navbar-collapse .dropdown-menu .dropdown-item {
        padding-left: calc(var(--tblr-page-padding) + 0.75rem);
        /* Tabler pose display:flex sur ces entrées : sans cela « Demande de
           réapprovisionnement » ou « Import de dépôts des campagnes précédentes »
           débordent de la sidebar (15rem) et sont rognés au lieu de passer à la ligne. */
        white-space: normal;
    }
}

/* !important comme les utilitaires .text-* de Bootstrap : sans lui, la règle Tabler
   « .table thead th { color: … } » l'emporte et les en-têtes germanophones
   ressortent en gris au lieu du rose. */
.text-ls-rose {
    color: var(--ls-rose-hex) !important;
}

/*********************************************/
/*              Toast                        */
/*********************************************/
.toast-success {
    background-color: var(--ls-vert-base-hex);
    color: var(--ls-noir-hex);
}
/* La croix de fermeture est positionnée en absolu : on lui réserve sa place
   à droite pour qu'elle ne recouvre pas la fin du message. */
.toastify {
    padding-right: 44px;
}
.toast-close {
    color: var(--ls-noir-hex);
    position: absolute;
    right: 10px;
    top: 10px;
}

/*********************************************/
/*              TomSelect                    */
/*********************************************/
/* Le thème bootstrap5 de TomSelect confie la bordure, le fond et le chevron au
   .ts-wrapper (qui porte la classe form-select posée par le thème de formulaire)
   et rend le .ts-control transparent et sans bordure. Deux conséquences :

   - le background-image du wrapper est le chevron de Tabler : le neutraliser
     laisse le champ sans flèche. C'est ce que faisait la règle précédente, pour
     compenser le double chevron dû au thème « default » chargé en parallèle ;
     ce second thème ayant été retiré d'app.js, l'override n'a plus lieu d'être.
   - la hauteur du champ dépend entièrement de son contenu. Un select dont
     l'option sélectionnée est vide (allowEmptyOption) n'a rien à afficher et
     s'écrase à une dizaine de pixels, à côté des champs natifs voisins. */
.ts-wrapper.form-select .ts-control,
.ts-wrapper.form-control .ts-control {
    /* 38px + les 2px de bordure du wrapper = les 40px d'un champ Tabler */
    min-height: 38px;
    align-items: center;
    padding-left: 16px;
}

/* Invite des listes déroulantes. L'option vide d'un select (l'option « placeholder »
   de Symfony) s'affiche comme n'importe quelle valeur : en gris, elle se lit comme
   une invite et non comme une saisie. Le premier sélecteur couvre les selects
   natifs ; le second les listes reprises par TomSelect, qui laisse le <select>
   d'origine à côté du .ts-wrapper — impossible donc de remonter à l'option depuis
   le wrapper : c'est le data-value de l'item rendu qui sert de repère. */
.form-select:has(> option[value=""]:checked),
.ts-wrapper .item[data-value=""] {
    color: var(--tblr-secondary);
}

/* Surlignage de l'option active du menu déroulant — celle que désignent le survol
   et les flèches du clavier. Le thème bootstrap5 de TomSelect la peint avec
   var(--bs-tertiary-bg) / var(--bs-body-color), or Tabler ne définit pas ces
   variables : les siennes sont préfixées --tblr-. Une var() introuvable rend la
   déclaration invalide au calcul — mais elle remporte quand même la cascade, et
   l'option active restait donc transparente : la navigation aux flèches
   fonctionnait, sans le moindre repère visuel. D'où le sélecteur plus spécifique
   que le `.ts-dropdown .active` du thème, seul moyen de reprendre la main. */
.ts-dropdown .option.active {
    background-color: var(--tblr-tertiary-bg);
    color: var(--tblr-body-color);
}

/*********************************************/
/*              Cards                        */
/*********************************************/
.card {
    --tblr-card-cap-padding-y: 0.6rem;
}
.row-deck .card-body {
    font-size: 13px;
}

/*********************************************/
/*              Accordion                    */
/*********************************************/
/* Tabler 1.4 a retiré la flèche ::after de Bootstrap : il attend un
   <span class="accordion-button-toggle"> dans le markup. Nos accordéons
   utilisent le markup Bootstrap standard, on redessine donc la flèche avec
   la webfont Tabler Icons (ti-chevron-down = \ea5f). */
.accordion-button:not(.accordion-button-toggle-none)::before {
    content: "\ea5f";
    font-family: "tabler-icons";
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Le bouton est en flex avec gap : .75rem, l'espacement est déjà géré */
    color: var(--tblr-secondary);
    transition: transform .3s;
}
/* Bootstrap retire .collapsed du bouton quand le panneau est ouvert */
.accordion-button:not(.collapsed)::before {
    transform: rotate(-180deg);
    color: var(--tblr-accordion-active-color);
}

/*********************************************/
/*        Historique des emails              */
/*********************************************/
/* Chaque mail est un <tbody> de deux lignes (métadonnées, puis sujet). On retire
   le trait entre ces deux lignes et on marque nettement la séparation entre deux
   mails, avec un fond alterné par mail et non par ligne. */
.table-emails > tbody > tr:first-child > td {
    border-bottom-width: 0;
    padding-top: .5rem;
}
.table-emails > tbody > tr:last-child > td {
    padding-bottom: .5rem;
}
.table-emails > tbody + tbody,
.table-emails > thead + tbody {
    border-top: 2px solid var(--tblr-gray-300);
}
/* Le fond de la page est déjà --tblr-bg-surface-secondary : on alterne donc
   blanc et gray-100 pour que le contraste reste visible. */
.table-emails > tbody > tr > td {
    background-color: var(--tblr-bg-surface);
}
.table-emails > tbody:nth-of-type(even) > tr > td {
    background-color: var(--tblr-gray-100);
}
/* Survol en surimpression, pour conserver le fond alterné en dessous */
.table-emails > tbody:hover > tr > td {
    background-image: linear-gradient(var(--tblr-active-bg), var(--tblr-active-bg));
}

/*********************************************/
/*              DataTables                   */
/*********************************************/
/* DataTables détecte le type de chaque colonne et ajoute dt-type-numeric ou
   dt-type-date. Son CSS passe alors l'entête en flex-direction: row-reverse,
   ce qui place la flèche de tri AVANT le libellé. On rétablit l'ordre naturel
   (libellé puis flèche) tout en gardant l'alignement à droite des chiffres. */
table.dataTable th.dt-type-numeric div.dt-column-header,
table.dataTable th.dt-type-numeric div.dt-column-footer,
table.dataTable th.dt-type-date div.dt-column-header,
table.dataTable th.dt-type-date div.dt-column-footer,
table.dataTable td.dt-type-numeric div.dt-column-header,
table.dataTable td.dt-type-numeric div.dt-column-footer,
table.dataTable td.dt-type-date div.dt-column-header,
table.dataTable td.dt-type-date div.dt-column-footer {
    flex-direction: row;
}

/*********************************************/
/*              GMaps                        */
/*********************************************/
.gm-style-iw-chr {
    padding-bottom: 0;
    margin-bottom: 0;
    .gm-style-iw-ch {
        padding-bottom: 0;
        margin-bottom: 0;
        font-weight: bold;
        font-size: 16px;
    }
}