/* Filtres communs (filtres.js) : Z.filtres (recherche, « Filtres (n) », pastilles) et Z.tiersFiltre (Tous | Clients | Fournisseurs, Entreprise, Compte).
   Variables propres à ce fichier : seules valeurs « nouvelles » ; tout le reste vient des variables du thème. */
:root {
  --fl-champ-h: 38px;                  /* hauteur des champs de la barre */
  --fl-pop-l: 440px;                   /* largeur de la fenêtre de filtres */
  --fl-bord: var(--border);            /* bordure des champs : plus marquée en sombre (voir ci-dessous) */
  --fl-fond: color-mix(in oklab, var(--bg) 70%, transparent);
  --fl-pastille: var(--surface2);
  --fl-z: 100;                         /* au-dessus des en-têtes figés (40 a 60), sous les modales (1200) */
}
[data-theme="dark"] { --fl-bord: var(--border-in); }

.fl { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.fl-barre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.fl-q { position: relative; flex: 1 1 280px; min-width: 0; display: block; }
.fl-q input { width: 100%; height: var(--fl-champ-h); padding: 0 var(--s-3) 0 36px; border: 1px solid var(--fl-bord); border-radius: var(--r-md); background: var(--surface); color: var(--fg); font: inherit; font-size: 13px; }
.fl-loupe { position: absolute; left: var(--s-3); top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.fl-barre select, .fl-barre input[type="date"] { height: var(--fl-champ-h); border: 1px solid var(--fl-bord); border-radius: var(--r-md); background: var(--surface); color: var(--fg); font: inherit; font-size: 13px; padding: 0 var(--s-3); max-width: 220px; }
.fl-champ-barre { display: inline-flex; }

.fl-wrap { position: relative; }
.fl-btn { height: var(--fl-champ-h); display: inline-flex; align-items: center; gap: var(--s-2); border-radius: var(--r-md); }
.fl-btn.fl-actif { border-color: var(--accent); }
.fl-n { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.fl-fond { display: none; }
.fl-pop { position: absolute; z-index: var(--fl-z); top: calc(100% + var(--s-2)); left: 0; width: min(var(--fl-pop-l), calc(100vw - 2 * var(--s-4))); padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e-4); }
.fl-pop[hidden] { display: none; }
.fl-pop.fl-droite { left: auto; right: 0; }
.fl-grille { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.fl-champ { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; font-size: 12px; color: var(--muted); }
.fl-champ[hidden] { display: none; }
.fl-champ-large { grid-column: 1 / -1; }
.fl-champ select, .fl-champ input[type="date"] { height: var(--fl-champ-h); width: 100%; border: 1px solid var(--fl-bord); border-radius: var(--r-sm); background: var(--surface); color: var(--fg); font: inherit; font-size: 13px; padding: 0 var(--s-2); }
.fl-check { flex-direction: row; align-items: center; gap: var(--s-2); color: var(--fg); font-size: 13px; }
.fl-pied { display: flex; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-4); }

.fl-pastilles { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.fl-pastilles[hidden] { display: none; }
.fl-pastille { display: inline-flex; align-items: center; gap: var(--s-1); padding: 3px 4px 3px var(--s-3); border-radius: 999px; background: var(--fl-pastille); font-size: 12px; }
.fl-x { all: unset; box-sizing: border-box; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--muted); cursor: pointer; line-height: 1; }
.fl-x:hover { background: var(--border); color: var(--fg); }
.fl-x:focus-visible { outline: 2px solid var(--accent); }

/* Filtre tiers en cascade */
.ft { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-width: 0; }
.ft-seg button { min-height: calc(var(--fl-champ-h) - 2px); }
.ft select { height: var(--fl-champ-h); border: 1px solid var(--fl-bord); border-radius: var(--r-md); background: var(--surface); color: var(--fg); font: inherit; font-size: 13px; padding: 0 var(--s-3); max-width: 220px; }
.ft select[hidden] { display: none; }
.ft-plein { display: flex; }
.ft-plein select { flex: 1 1 140px; max-width: none; min-width: 0; }
.fl-lbl { font-size: 12px; color: var(--muted); }

@media (max-width: 640px) {
  .fl-q { flex-basis: 100%; }
  .fl-pop, .fl-pop.fl-droite { position: fixed; z-index: calc(var(--fl-z) + 1); inset: auto 0 0 0; width: auto; max-height: 85vh; overflow: auto; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .fl-fond { display: block; position: fixed; z-index: var(--fl-z); inset: 0; background: var(--fl-fond); }
  .fl-fond[hidden] { display: none; }
  .fl-grille { grid-template-columns: 1fr; }
  .ft-plein .ft-seg { width: 100%; }
  .ft-plein .ft-seg button { flex: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .fl-pop { animation: fl-entree var(--t-base) ease-out; }
  @keyframes fl-entree { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

/* Dans une barre de filtres compacte (.filter-bar : Commercial, listes) */
.filter-bar .ft select { height: 30px; font-size: 12px; border-radius: var(--r-sm); padding: 0 var(--s-3); }
.filter-bar .ft-seg button { min-height: 28px; }