/* Barre de filtres — l'enveloppe des filtres d'une liste, posée par `{% barre_filtres %}`.
   Référence : docs/design-system.md. */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
}

/* Une barre qui vit déjà dans une carte partagée avec le tableau qu'elle
   filtre : pas de surface, pas de padding, la carte les donne. */
.filter-bar--nu {
  padding: 0;
}

/* La marge de rythme vertical d'un formulaire n'a pas de sens sur une ligne :
   `items-end` alignerait les boîtes de marge et décalerait les boutons. */
.filter-bar > * {
  margin-bottom: 0;
}

/* Un champ de la barre part de 140 px et se partage le reste. Sans cette
   base, un champ dont le contrôle est en `width: 100%` n'a aucun plancher et
   se fait écraser par un voisin à largeur fixe. */
.filter-bar__item {
  flex: 1 1 140px;
  min-width: 0;

  /* Sans plafond, le dernier champ d'une ligne repliée s'étire sur tout le
     reste : « Montant HT » occupait 1003 px pour deux contrôles de 100 px. */
  max-width: 320px;
}

/* Le champ de recherche pèse deux fois plus que les autres. */
.filter-bar__item--grow {
  flex: 2 1 220px;
  max-width: 480px;
}

/* Un champ qui porte deux contrôles — une plage de dates, un intervalle de
   montants. À 140 px de base, les deux dates tombaient à 77 px et l'année
   était coupée (« 31/01/20 »). */
.filter-bar__item--paire {
  flex: 1 1 280px;
  max-width: 360px;
}

/* Une rangée de chips à cocher (les projets du Gantt multi-projets) : toute la
   largeur de la barre, les autres champs passent dessous. Dans 480 px, deux chips
   ne tenaient pas côte à côte et la barre montait à quinze lignes. */
.filter-bar__item--full {
  flex: 1 1 100%;
  max-width: none;
}

/* Les actions se collent à droite et ne rétrécissent jamais. */
.filter-bar__actions {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-2);
  margin-left: auto;
}

@media (width <= 768px) {
  .filter-bar__item,
  .filter-bar__item--grow,
  .filter-bar__item--paire {
    flex: 1 1 100%;
    max-width: none;
  }

  .filter-bar__actions {
    margin-left: 0;
  }
}