/* =============================================================================
   LA BARRE DE SÉLECTION GROUPÉE d'une liste de tickets (16-09-2026)
   =============================================================================

   Jumelle de `window.TicketBulk` (modules/ticket-bulk.js).

   ── POURQUOI UNE FEUILLE, ET PAS UN `style.cssText` ─────────────────────────

   La barre dont celle-ci descend vivait dans `xorizo/tickets.js`, peinte par un
   `style.cssText` de 300 caractères plus une douzaine de `style="…"` dans son
   gabarit — dont SIX couleurs écrites en dur (quatre hexadécimaux, deux voiles
   blancs). Deux conséquences, toutes deux payées :

   ⚠ Les six valeurs ne sont pas CITÉES ici, et c'est délibéré :
   `audit-ui-helpers.php` lit au TEXTE, donc un commentaire qui écrit un
   hexadécimal déclenche `hardcoded-hex-in-components-css` — le même piège que
   `table-shell-ok` avec une balise de tableau nommée dans une phrase. On décrit
   ce qui a été retiré, on ne le réécrit pas.

     · l'audit CSS ne les voyait pas — ce qui s'écrit en JS n'est pas dans une
       feuille, donc pas dans son périmètre ;
     · personne ne pouvait dire, en lisant une feuille, à quoi la barre
       ressemble : il fallait lire un gabarit de chaîne dans un module de
       2 690 lignes.

   Tout ici passe donc par les jetons de `tokens.css`. Le jour où le socle change
   sa gamme de gris, cette barre suit sans qu'on la touche.

   ⚠ Les quatre `rgb(255 255 255 / …)` qui subsistent sont des VOILES, pas des
   couleurs : ils éclaircissent le fond sur lequel ils sont posés, quel qu'il
   soit. `tokens.css` n'a pas de jeton pour ça — un jeton de voile se déciderait
   pour tout le parc, et ce n'est pas le lot d'une barre de tickets.
*/

.tk-bulk {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;

    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-lg, 0.75rem);
    box-shadow: var(--shadow-lg);

    /* Le contraste inversé DIT que la barre n'appartient pas à la liste : elle
       flotte au-dessus d'elle et disparaît avec la sélection. Un fond de surface
       ordinaire la ferait lire comme un pied de page permanent. */
    background: var(--gray-800);
    /* ⚠ `--gray-50` et non un blanc écrit en clair : `tokens.css` n'a pas de
       jeton `--white`, et le premier hex qu'on s'autorise dans une feuille est
       celui qui invite les cinq suivants. */
    color: var(--gray-50);

    /* ⚠ AU-DESSUS DES MODALES, comme le menu détaché de `rowActions`. Une fiche
       ouverte par-dessus la liste ne doit pas enterrer la barre — mais la
       sélection, elle, survit à la fermeture de la fiche. */
    z-index: var(--z-float);
}

/* Le décompte — c'est le SUJET de la barre, il ouvre la ligne. */
.tk-bulk-count {
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
}

/* Le filet qui sépare le sujet des gestes, et les gestes de la sortie.
   `aria-hidden` côté balisage : c'est un trait, il n'a rien à dire. */
.tk-bulk-sep {
    width: 1px;
    height: 1.5rem;
    background: currentColor;
    opacity: 0.3;
    flex-shrink: 0;
}

/* Les boutons héritent de `.btn`/`.btn-sm` du socle ; seule la teinte du
   NEUTRE change, parce qu'ils sont posés sur un fond inversé. `.btn-danger`
   n'est pas touché : le rouge de la suppression est le même partout, et c'est
   précisément ce qui le rend lisible. */
.tk-bulk .btn:not(.btn-danger) {
    background: rgb(255 255 255 / 0.12);
    border-color: rgb(255 255 255 / 0.25);
    color: inherit;
}

.tk-bulk .btn:not(.btn-danger):hover {
    background: rgb(255 255 255 / 0.2);
}

/* « Annuler » est une SORTIE, pas un geste : elle se lit en retrait. */
.tk-bulk .tk-bulk-annuler {
    background: transparent;
    opacity: 0.8;
}

.tk-bulk .tk-bulk-annuler:hover {
    background: rgb(255 255 255 / 0.12);
    opacity: 1;
}

/* Les deux listes déroulantes. `appearance: auto` est VOULU : le chevron natif
   dit « il y a des choix là-dedans », et une liste stylée à plat sur ce fond se
   confondrait avec les boutons. */
.tk-bulk-select {
    appearance: auto;
    padding: 0.4rem 0.75rem;
    border: 1px solid rgb(255 255 255 / 0.25);
    border-radius: var(--radius-sm, 0.375rem);
    background: rgb(255 255 255 / 0.12);
    color: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    max-width: 14rem;
}

/* ⚠ LES OPTIONS SE PEIGNENT DANS LE MENU NATIF DU SYSTÈME, pas dans la barre :
   elles n'héritent NI du fond sombre NI de `color: inherit`. Sans cette règle,
   du texte blanc sur le fond blanc du menu — des options invisibles, et le
   défaut ne se voit que menu ouvert. */
.tk-bulk-select option {
    background: var(--surface);
    color: var(--text-primary);
}

.tk-bulk :disabled {
    opacity: 0.55;
    cursor: default;
}

/* ── Sur un téléphone ──────────────────────────────────────────────────────
   La barre prend la largeur moins une gouttière : centrée et `flex-wrap`, elle
   se retrouvait sinon en colonne étroite au milieu de l'écran. */
@media (max-width: 640px) {
    .tk-bulk {
        left: 0.75rem;
        right: 0.75rem;
        transform: none;
        bottom: 0.75rem;
    }
}