/*
 * LE SELECTEUR DE COMPTES QUI SE TAPE POUR FILTRER.
 *
 * Il accompagne `js/liste-de-comptes.js`, qui remplace a l'ecran le menu natif
 * d'un `<select data-liste-comptes>`. Voir l'en-tete du script pour la raison :
 * le menu d'un `select` est dessine par le navigateur et aucune regle CSS ne
 * l'atteint, donc avec quinze comptes il couvre l'ecran et se fait couper.
 *
 * LA LISTE VIT DANS LE FLUX, PAS AU-DESSUS. Posee en `absolute`, elle se fait
 * tailler par le premier parent qui defile -- mesure du 08/11/2026 sur la
 * fenetre de choix du groupe : deux entrees visibles sur quatorze. Dans le
 * flux, elle pousse ce qui suit et c'est le conteneur qui defile : elle ne peut
 * donc ni etre coupee, ni sortir, quel que soit le nombre de comptes.
 *
 * LES TEINTES SUIVENT CELLES DES CHAMPS DU PRODUIT, et le theme clair a sa
 * reprise : une liste blanche sur fond blanc ne se verrait pas.
 */

/*
 * TOUTES LES REGLES PASSENT PAR `.lc`, ET CE N EST PAS DU CONFORT.
 *
 * `theme.css` porte un remise a zero `.vx-bloc, .vx-bloc *, ... { padding: 0 }`
 * pour les blocs de l'Expert. Un selecteur a une classe perd contre lui : le
 * champ se retrouvait colle a son bord et la liste sans marge interieure.
 * Mesure du 08/11/2026 dans la fenetre de choix du groupe : `padding` calcule
 * a `10px 0px` la ou la feuille demande `9px 11px`.
 *
 * `.lc .lc__champ` DEUX CLASSES passe devant `.vx-bloc *`, une classe et un
 * element. C'est la meme reponse que le produit emploie deja dans ses blocs,
 * ou les regles s'ecrivent `.vx-bloc.vx-bloc .x`.
 */
.lc {
    position: relative;
    /* ELLE PREND LA PLACE DU SELECTEUR QU ELLE REMPLACE : dans une rangee
       souple, celui-ci grandissait, donc elle grandit. `min-width: 0` lui
       permet de retrecir au lieu de pousser ses voisins dehors. */
    flex: 1 1 auto;
    min-width: 0;
}

.lc .lc__champ {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 9px 11px;
    border-radius: 9px;
    border: 1px solid rgba(148, 163, 184, .28);
    background: rgba(15, 23, 42, .55);
    color: inherit;
    font: inherit;
}

.lc .lc__champ:focus {
    outline: none;
    border-color: rgba(96, 165, 250, .55);
    box-shadow: 0 0 0 3px rgba(96, 165, 250, .16);
}

.lc .lc__champ:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.lc .lc__liste {
    /* EN COORDONNEES D ECRAN : hors du flux, donc elle ne deplace rien, et
       hors de tout conteneur qui coupe, donc elle n'est pas taillee. `caler()`
       lui donne sa place sous le champ. Voir le script. */
    position: fixed;
    z-index: 1000;
    margin: 0;
    /* LA LARGEUR POSEE EST CELLE DU CHAMP : sans `border-box`, les quatre
       pixels de marge interieure et le filet s'y ajoutaient, et le bord
       droit de la liste depassait celui du champ de dix pixels. */
    box-sizing: border-box;
    padding: 4px;
    list-style: none;
    /* CINQ LIGNES, ET UN BOUT DE LA SIXIEME. L'Admin, le 08/11/2026 : « 5
       elements c'est bien ». Le bout qui depasse dit qu'il y en a d'autres --
       une liste coupee net a l'air finie. */
    max-height: 196px;
    overflow-y: auto;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, .28);
    background: #111a2b;
    box-shadow: 0 14px 34px rgba(2, 6, 23, .55);
}

.lc .lc__liste [role="option"] {
    padding: 8px 10px;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lc .lc__liste [role="option"]:hover,
.lc .lc__liste [role="option"].is-actif {
    background: rgba(96, 165, 250, .18);
}

.lc .lc__liste [role="option"][aria-selected="true"] {
    font-weight: 600;
}

.lc .lc__liste [role="option"][aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
}

/* L INTITULE D UN GROUPE : un repere, pas un choix. */
.lc .lc__groupe {
    padding: 10px 10px 4px;
    font-size: .82em;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .6;
}

.lc .lc__liste__vide,
.lc .lc-liste__vide {
    padding: 8px 10px;
    opacity: .62;
}

/* ===================== LE THEME CLAIR ================================== */

html[data-theme="clair"] .lc .lc__champ,
html[data-theme="light"] .lc .lc__champ {
    background: rgba(255, 255, 255, .9);
    border-color: rgba(15, 23, 42, .18);
}

html[data-theme="clair"] .lc .lc__liste,
html[data-theme="light"] .lc .lc__liste {
    background: #ffffff;
    border-color: rgba(15, 23, 42, .18);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .16);
}

html[data-theme="clair"] .lc .lc__liste [role="option"]:hover,
html[data-theme="clair"] .lc .lc__liste [role="option"].is-actif,
html[data-theme="light"] .lc .lc__liste [role="option"]:hover,
html[data-theme="light"] .lc .lc__liste [role="option"].is-actif {
    background: rgba(37, 99, 235, .12);
}