/* ==========================================================================
   MULTISELECT DROPDOWN COMPONENT
   ========================================================================== */

.ms-wrap {
    position: relative;
    display: inline-block;
}

/* Trigger button */
.ms-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px 3px 10px;
    /* 26px est RÉSERVÉ par `.th-filter-inner { min-height }` (tables.css)
       pour que la ligne d'en-tête ne grandisse pas à l'injection — changer
       cette hauteur = changer la réserve aussi. */
    height: 26px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 500;
    /* Casse normale EXPLICITE : logé dans un th, un <button> n'hérite pas de
       `text-transform: uppercase` sous Chrome/Safari mais SI sous Firefox
       (l'incohérence que normalize.css corrige) — sans ces deux lignes le
       chip s'écrit « ACTIVITÉ » sur un navigateur et « Activité » sur
       l'autre. La casse normale de Chrome est le rendu canonique. */
    text-transform: none;
    letter-spacing: normal;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    white-space: nowrap;
}
.ms-trigger:hover {
    border-color: var(--border);
    background: var(--gray-50);
    color: var(--text);
}
.ms-wrap.open .ms-trigger,
.ms-wrap.has-value .ms-trigger {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}
.ms-chevron {
    opacity: 0.5;
    flex-shrink: 0;
    transition: transform 0.15s;
}
.ms-wrap.open .ms-chevron {
    transform: rotate(180deg);
    opacity: 1;
}
.ms-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    font-size: 0.68rem;
    font-weight: 700;
    background: var(--primary);
    color: var(--surface);
    line-height: 1;
}

/* Panel */
.ms-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: var(--z-popover);
    min-width: 200px;
    /* Borne HAUTE : sans elle le panneau prend la largeur de son plus long
       libellé — mesuré 2026-09-01 sur le chip Affaires de l'export /jobs
       (titre · réf · client) : ~1 800 px, hors écran. Les options s'ellipsent
       (règle .ms-option > span), la recherche fait le reste. */
    max-width: 480px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}
.ms-wrap.open .ms-panel {
    display: block;
}

/* Search */
.ms-search-wrap {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
}
.ms-search {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.82rem;
    color: var(--text);
    width: 100%;
    min-width: 0;
}
/* Focus visible du champ de recherche du panneau — outline:none le rendait
   invisible au clavier (2026-08-27). */
.ms-search:focus {
    box-shadow: inset 0 -2px 0 var(--primary);
}
.ms-search::placeholder { color: var(--text-secondary); }

/* Options list */
.ms-options {
    max-height: 220px;
    overflow-y: auto;
    padding: 4px;
}
.ms-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--text);
    user-select: none;
    transition: background 0.1s;
}
.ms-option:hover { background: var(--gray-100); }
/* Une option tient sur UNE ligne et s'ellipse dans la borne du panneau —
   min-width:0 obligatoire : un flex-item ne descend pas sous sa largeur de
   contenu sans lui. */
.ms-option > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ms-option.hidden { display: none; }
.ms-option input[type="checkbox"] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    accent-color: var(--primary);
    cursor: pointer;
    margin: 0;
}

/* Empty state */
.ms-empty {
    padding: 10px 12px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: center;
}

/* Footer (clear link) */
.ms-footer {
    border-top: 1px solid var(--border);
    padding: 6px 8px;
    display: flex;
    justify-content: flex-end;
    gap: 4px;
}
/* « Fermer » — la sortie VISIBLE du panneau. Sans elle il ne restait que trois
   sorties invisibles (re-cliquer l'entonnoir, cliquer ailleurs, Échap), et un
   panneau ouvert masque les données qu'on vient de filtrer. */
.ms-close-btn {
    background: none;
    border: none;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
}
.ms-close-btn:hover { background: var(--primary-light); }
.ms-clear-btn {
    background: none;
    border: none;
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 3px;
}
.ms-clear-btn:hover { color: var(--error); background: var(--gray-100); }

/* ── Déclencheur DANS un en-tête de tableau ────────────────────────────────
   Deux formes, et le padding ne se déplace que dans la première :

   1. Dialecte hérité — le `<th>` est VIDE et le déclencheur (libellé +
      chevron) le remplit entièrement. Le padding descend donc du `<th>` vers
      le déclencheur, sans quoi la zone cliquable serait plus petite que la
      cellule et le libellé se retrouverait décalé de 12 px vers l'intérieur.

   2. Modèle cible — `table_list()` pose `.th-filter` sur un `<th>` qui porte
      DÉJÀ son titre, avec l'entonnoir (`iconOnly`) à côté. Ici le `<th>` doit
      GARDER son padding : c'est le titre qui doit s'aligner sur les cellules,
      pas le déclencheur.

   Sans le `:not(.th-filter)`, la règle 1 s'appliquait aussi au modèle cible :
   `padding: 0` collait le titre au bord de la cellule pendant que les `<td>`
   gardaient leurs 12 px — un décalage visible sur TOUTE colonne filtrable de
   TOUTE page migrée (constaté sur airfact /invoices et xorizo
   /company-documents, 2026-08-04, mesuré au DOM : th padding-left 0 vs td 12). */
.table thead th:has(.ms-wrap):not(.th-filter) {
    padding: 0;
}
.table thead th .ms-wrap {
    display: inline-block;
}
.table thead th:not(.th-filter) .ms-trigger {
    padding: var(--space-3);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

/* Allow the panel to escape the container's overflow:auto clipping while a
   dropdown is open — VERTICALLY only. overflow-x stays clipped (clip, not
   auto: visible+clip is the one mixed pair the spec doesn't coerce to auto)
   so a table wider than its container doesn't bleed outside the card while
   a filter panel is open. */
.table-container.ms-open {
    overflow-x: clip;
    overflow-y: visible;
}

/* Panels in the right-most columns anchor to the trigger's right edge so they
   open leftward into the (horizontally clipped) container instead of being
   cut off at its right edge. */
.table thead th:last-child .ms-panel,
.table thead th:nth-last-child(2) .ms-panel {
    left: auto;
    right: 0;
}

/* Restore rounded corners lost when overflow:visible disables border-radius clipping */
.table-container.ms-open thead tr:first-child th:first-child {
    border-top-left-radius: var(--radius);
}
.table-container.ms-open thead tr:first-child th:last-child {
    border-top-right-radius: var(--radius);
}

/* Ensure open thead floats above tbody rows */
.table-container.ms-open thead {
    position: relative;
    z-index: 5;
}

/* Variant « puce » — opt-in via renderMsDropdown(..., {compact:true}).
   Filtres co-localisés dans un même th (grille Affaires) : entonnoir + libellé
   en puce de contrôle — typographie volontairement distincte des libellés de
   colonne (pas d'uppercase, pas de letter-spacing) pour lire « filtre »,
   jamais « colonne ». Compteur quand des valeurs sont cochées. */
.ms-trigger--chip {
    gap: 4px;
    padding: 2px 9px;
    height: 22px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text-secondary);
}
.ms-trigger--chip svg { display: block; flex: none; opacity: .7; }
.ms-trigger--chip:hover { color: var(--text); border-color: var(--text-secondary); }
.ms-wrap.has-value .ms-trigger--chip,
.ms-wrap.open .ms-trigger--chip { color: var(--primary); border-color: var(--primary); }

/* Variant « icône seule » — opt-in via renderMsDropdown(..., {iconOnly:true}).
   Pour un `<th>` qui porte DÉJÀ son libellé (colonne triable + filtre côte à
   côte) : répéter « Statut » dans la puce à côté du titre « Statut » ne dit
   rien de plus. L'entonnoir seul suffit, l'intitulé vit dans le `title=`.
   Le compteur apparaît dès qu'une valeur est cochée — c'est le seul signal
   qui manquerait autrement. */
.ms-trigger--icon {
    gap: 3px;
    padding: 2px 5px;
    height: 22px;
    border-radius: var(--radius-sm);
}
.ms-trigger--icon svg { display: block; flex: none; opacity: .6; }
.ms-trigger--icon:hover svg { opacity: 1; }
.ms-wrap.has-value .ms-trigger--icon svg { opacity: 1; }

/* Séparateur de groupe dans un panneau — titre inerte au-dessus d'un bloc
   d'options (« Offre de prix », « Production »…). Rendu par renderMsDropdown
   quand une option porte `{group: '…'}` au lieu de `{value, label}`. */
.ms-group-label {
    padding: 8px 10px 3px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-400);
    user-select: none;
    pointer-events: none;
}
.ms-group-label:first-child { padding-top: 4px; }

/* ── Panneau « plage de dates » ─────────────────────────────────────────────
   Variante du `.ms-panel` : deux champs date au lieu d'une liste de cases.
   Motif documenté dans build/CLAUDE.md (« Date dropdown in th ») — une plage
   borne UNE colonne par deux valeurs, elle vit donc dans l'en-tête de cette
   colonne. La barre d'outils reste réservée à ce qui n'appartient à aucune
   colonne : aucune page de la plateforme n'y pose de champ date brut. */
.ms-panel--dates {
    min-width: 210px;
    padding: 8px;
}
/* Intitulé du panneau — dit SUR QUOI il filtre. Nécessaire dès que l'en-tête
   de colonne couvre plusieurs valeurs (« Émission / Échéance ») : « Du / Au »
   seuls n'indiquent pas laquelle des deux dates est bornée. */
.ms-panel-title {
    padding: 2px 2px 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}
.ms-daterange-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: none;
    letter-spacing: normal;
}
.ms-daterange-row > span { flex: 0 0 22px; }
.ms-daterange-row > input {
    flex: 1;
    min-width: 0;
    height: 30px;
    padding: 0 8px;
    font-family: inherit;
    font-size: 0.8125rem;
    color: var(--text-primary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    outline: none;
}
.ms-daterange-row > input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(25, 49, 83, 0.08);
}