/* fonctions/recherche-filtres/recherche.css — recherche et filtres
   Extrait de styles.css à l'étape 8 du découpage. L'ordre de chargement (index.html) est celui
   de l'ancienne feuille : à spécificité égale, la dernière règle l'emporte (voir CARTE.md, CSS). */
 /* ==================== RECHERCHE ET FILTRES ==================== */
 .filter-bar{
 display:flex; align-items:center; gap:calc(6px * var(--ui-scale-factor)); padding:calc(6px * var(--ui-scale-factor)) calc(12px * var(--ui-scale-factor)); flex-wrap:wrap;
 background:var(--surface); border-bottom:calc(1px * var(--ui-scale-factor)) solid var(--border-soft); flex-shrink:0;
 }
 .filter-bar.hidden{display:none;}
 .filter-bar.is-reordering{cursor:grabbing;}
 .filter-label{font-size:calc(9px * var(--ui-scale-factor)); color:var(--text-faint); margin-right:calc(1.5px * var(--ui-scale-factor));}
 .chip{
 display:inline-flex; align-items:center; gap:calc(4.5px * var(--ui-scale-factor)); padding:calc(3px * var(--ui-scale-factor)) calc(7.5px * var(--ui-scale-factor)); border-radius:calc(749.25px * var(--ui-scale-factor));
 font-size:calc(9px * var(--ui-scale-factor)); font-weight:600; border:calc(1px * var(--ui-scale-factor)) solid var(--border); background:var(--surface-2); color:var(--text-dim);
 }
 .chip .dot{width:calc(6px * var(--ui-scale-factor));height:calc(6px * var(--ui-scale-factor));border-radius:50%;flex-shrink:0;}
 .chip.on{color:#fff; border-color:transparent;}
 /* Sépare visuellement les 4 filtres fixes (Toutes/Aujourd'hui/À venir/En retard) des étiquettes,
    qui elles se réordonnent librement par glisser (voir enableFilterChipReorder). */
 .filter-sep{width:calc(1px * var(--ui-scale-factor)); align-self:stretch; margin:calc(2px * var(--ui-scale-factor)) calc(1.5px * var(--ui-scale-factor)); background:var(--border-soft); flex-shrink:0;}
 /* Classe state.labels par ordre alphabétique en un clic (voir sortLabelsAlphabetically) ;
    n'apparaît qu'à partir de 2 étiquettes, sinon trier n'a pas de sens. Reprend la classe .chip
    (même modèle de boîte que les puces : même hauteur à tout facteur d'échelle, sans valeur
    recopiée à la main) et ne surcharge que la mise en forme propre à un bouton icône seule.
    color:var(--text-dim) diffère du fond transparent d'un .chip non actif : ici pas de fond
    plein forcé, on garde juste sa teinte de texte neutre au repos. */
 .filter-sort-btn{display:inline-flex; align-items:center; justify-content:center; padding-left:calc(6px * var(--ui-scale-factor)); padding-right:calc(6px * var(--ui-scale-factor)); color:var(--text-dim);}
 .filter-sort-btn:hover{color:var(--text); border-color:var(--text-faint);}