/* Contrôles de formulaire de la page Recherche (FilterPanel.razor, ColumnPicker.razor) — feuille globale
   partagée plutôt que dupliquée dans les deux .razor.css scopés : mêmes règles écrites deux fois risquerait
   une divergence silencieuse (même logique que data-table.css, cf. CLAUDE.md Client §5bis). Pas de
   composant Checkbox documenté dans le design system (gap explicite, même posture que Sidebar/FilterChip/
   Spinner déjà comblés ailleurs) : tokens génériques du reste de l'app plutôt qu'une valeur improvisée. */

/* Cases à cocher — natives réstylées (appearance:none + dessin manuel) plutôt qu'un composant custom :
   coché en accent-strong (règle générale du design system, "tout ce qui est rempli et porte du texte"),
   coche en on-fill (blanc) via le classique triangle de bordure en ::after, radius-sm/border comme les
   autres contrôles du panneau (filter-panel__input). */
.filter-panel input[type="checkbox"],
.column-picker input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    flex: 0 0 auto;
    border: 1.5px solid var(--divider);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
    position: relative;
}

.filter-panel input[type="checkbox"]:hover,
.column-picker input[type="checkbox"]:hover {
    border-color: var(--accent-strong);
}

.filter-panel input[type="checkbox"]:focus-visible,
.column-picker input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.filter-panel input[type="checkbox"]:checked,
.column-picker input[type="checkbox"]:checked {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
}

.filter-panel input[type="checkbox"]:checked::after,
.column-picker input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 3px;
    width: 4px;
    height: 8px;
    border: solid var(--on-fill);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Flèches haut/bas des champs numériques (filtre de dimension, min/max) — WebKit/Chromium expose un
   pseudo-élément stylable pour le fond du bloc de spin (pas le glyphe des flèches lui-même, jamais
   personnalisable en CSS pur) : teinté en surface-sunken plutôt que le gris système par défaut, coins
   arrondis assortis au bord droit du champ. Firefox n'expose aucun équivalent stylable pour ce
   sous-élément — le spinner y reste natif, limite du navigateur plutôt qu'un oubli. */
.filter-panel__number::-webkit-inner-spin-button,
.filter-panel__number::-webkit-outer-spin-button {
    opacity: 1;
    cursor: pointer;
    background: var(--surface-sunken);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}