@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);
}
.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);
}

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