/* =====================================================================
   Exavoris — sgbl_sector-filter.css  (sgbl-Scripts/sector-filter)
   Habillage du filtre de tri sectoriel : colonnes de niveaux, lignes à case tri-état.

   Aucune variable n'est DÉFINIE ici — seulement consommée depuis le :root de gbl_styles.css
   (cf. _direction/2_app-conventions/edition-css.md). Les couleurs de NIVEAU sont posées en JS
   (bordure de colonne, fondu du titre), depuis `ExvCommon.sectorLevelColor` — la même fonction
   que le sunburst « Rattachement sectoriel », pour que les deux surfaces s'accordent.

   L'apparence de la case à cocher, état indéterminé compris, appartient à `.exv-checkbox` dans
   gbl_styles.css : rien n'en est redéfini ici.

   Sections ordonnées : A petits éléments · B textes · C secondaires · D structurels.
   ===================================================================== */

/* ---------- A. Petits éléments fonctionnels ---------- */

/* La case ne porte aucun texte : le libellé est le bouton de navigation, à côté. Sans ce zéro,
   le `gap` de `.exv-checkbox` ouvrirait un vide entre la case et un libellé absent. */
.exv-sf-check {
    gap: 0;
    flex: 0 0 auto;
}

/* Chevron de branche : il annonce « ce niveau en contient un autre », il ne se clique pas
   (le libellé entier est la cible). */
.exv-sf-chev {
    flex: 0 0 auto;
    color: var(--theme-texte-tertiaire);
    font-size: var(--ht-texte-10);
    line-height: 1;
    pointer-events: none;
}

/* ---------- B. Textes ---------- */

/* Le fondu de teinte du niveau est posé en JS et court sur toute la largeur : titre à fond perdu,
   comme les blocs de niveau de la légende du sunburst. */
.exv-sf-col-head {
    font-size: var(--ht-texte-08);
    font-weight: var(--wg-texte-semibold);
    color: var(--theme-texte-primaire);
    margin: 0;
    padding: 6px 10px 5px;
}

/* Le libellé EST la commande de navigation : un bouton, mais dont l'habillage global serait
   déplacé — c'est une ligne de liste, pas une action de formulaire. Aucune couleur n'est
   redéfinie, seules la mise à plat du bouton natif et la troncature le sont. */
.exv-sf-label {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    font-family: inherit;
    font-size: var(--ht-texte-09);
    line-height: 1.45;
    color: var(--theme-texte-secondaire);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exv-sf-empty {
    font-size: var(--ht-texte-08);
    color: var(--theme-texte-tertiaire);
    margin: 0;
}

/* ---------- C. Secondaires (conteneurs, états) ---------- */

.exv-sf-row:hover .exv-sf-label,
.exv-sf-row.is-nav .exv-sf-label {
    color: var(--theme-texte-primaire);
}

/* La ligne ouverte pour la navigation est le point d'attache de la colonne de droite : elle doit
   rester lisible d'un coup d'œil quand trois colonnes sont dépliées. */
.exv-sf-row.is-nav {
    background: var(--theme-bg-tertiaire);
}

.exv-sf-row.is-nav .exv-sf-label,
.exv-sf-row.is-nav .exv-sf-chev {
    font-weight: var(--wg-texte-medium);
}

/* La colonne porte la couleur de son niveau sur son bord : le rattachement à l'anneau
   correspondant du sunburst se lit sans légende. */
.exv-sf-col {
    flex: 0 0 auto;
    width: 232px;
    max-height: 296px;
    overflow-y: auto;
    background: var(--theme-bg-secondaire);
    border: 1px solid var(--theme-border-color);
    border-left-width: 4px;
    border-left-style: solid;
    border-radius: var(--border-radius-classic);
}

/* ---------- D. Structurels (layout) ---------- */

.exv-sf {
    display: block;
    width: 100%;
}

.exv-sf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

/* Les colonnes défilent HORIZONTALEMENT plutôt que de se replier : quatre niveaux dépliés sur un
   écran étroit doivent rester atteignables, et la page elle-même ne doit jamais déborder. */
.exv-sf-cols {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.exv-sf-list {
    list-style: none;
    margin: 0;
    padding: 0 0 4px;
}

.exv-sf-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 3px 10px;
}

@media (max-width: 700px) {
    .exv-sf-col {
        width: 196px;
    }
}