/* Barre de filtres d'une liste (@StaminaSearch/FilterBar/bar.html.twig) et son popover. */

.filter-bar {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem 1.25rem;
    border-bottom: 1px solid var(--color-line);
}
.filter-bar-chips {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
.filter-bar-tools {
    flex: none;
    display: flex;
    align-items: center;
    gap: .125rem;
    min-height: 2.25rem;
}

/* Dans la barre d'outils de la liste (list-toolbar, paramètre « inline ») : sur sa propre ligne, sous le compteur
   et la pagination. Cachée tant qu'aucun filtre n'est posé ; le bouton « Filtrer » l'affiche. */
.list-toolbar:has(> .filter-bar) { flex-wrap: wrap; row-gap: .75rem; column-gap: 1rem; }
.list-toolbar > .filter-bar { order: 3; flex: 1 0 100%; padding: 0; border: 0; }
.filter-bar.is-collapsed { display: none; }
/* Même habit que les groupes voisins (pagination, défilement) : un pavé teinté, sans cadre. */
.filter-bar-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    height: 2rem;
    padding: 0 .75rem;
    border: 0;
    border-radius: .6875rem;
    background: var(--color-tile);
    color: var(--color-ink);
    font-size: .78125rem;
    font-weight: 600;
    cursor: pointer;
}
.filter-bar-toggle:hover { background: var(--color-tile-2); }
.filter-bar-toggle > i { color: var(--color-accent); }
.list-toolbar:has(> .filter-bar:not(.is-collapsed)) .filter-bar-toggle:not(.filter-bar-export) { display: none; }
/* « Exporter » (lien du bundle Données) : même pavé que « Filtrer », mais toujours visible. */
a.filter-bar-toggle { text-decoration: none; }

/* Outils à droite : discrets, sans cadre, pour laisser la place aux filtres. */
.filter-bar-tool {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    height: 2.25rem;
    padding: 0 .625rem;
    border: 0;
    border-radius: var(--radius-field);
    background: none;
    color: var(--color-muted-2);
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.filter-bar-tool:hover,
.filter-bar-tool[aria-expanded="true"] { background: var(--color-tile); color: var(--color-ink); }
.filter-bar-tool > i { font-size: .8125rem; }
.filter-bar-caret { font-size: .625rem !important; opacity: .7; }

/* Un filtre posé : « Échéance · dépassée ✕ » */
.filter-chip {
    display: inline-flex;
    align-items: stretch;
    height: 2.25rem;
    border: 1px solid var(--color-line-dashed);
    border-radius: var(--radius-field);
    background: var(--color-surface);
    font-size: .8125rem;
    overflow: hidden;
}
.filter-chip.is-open {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}
.filter-chip-body {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: 0 .375rem 0 .625rem;
    border: 0;
    background: none;
    color: var(--color-ink);
    cursor: pointer;
    max-width: 28rem;
}
.filter-chip-body:hover { background: var(--color-tile); }
.filter-chip-key {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    color: var(--color-muted-2);
    white-space: nowrap;
}
.filter-chip-key > i { color: var(--color-muted); font-size: .75rem; }
.filter-chip-value {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.filter-chip-remove {
    display: inline-flex;
    align-items: center;
    padding: 0 .625rem 0 .375rem;
    color: var(--color-muted);
}
.filter-chip-remove:hover { color: var(--color-danger); }

/* Périmètre imposé par la page : verrouillé, sans croix. */
.filter-chip.is-locked { background: var(--color-tile); border-style: solid; border-color: transparent; }
.filter-chip.is-locked .filter-chip-body { padding-right: .75rem; }
.filter-scope-menu { width: 20rem; }
.filter-scope-text { margin: .5rem .75rem .75rem; font-size: .8125rem; color: var(--color-muted-2); }

.filter-bar-add {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    height: 2.25rem;
    padding: 0 .875rem;
    border: 1.5px dashed var(--color-accent);
    border-radius: var(--radius-field);
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
}
.filter-bar-add:hover,
.filter-bar-add.is-open { background: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface)); }

/* ---------- Popover ---------- */

.filter-pop {
    position: fixed;
    z-index: 60;
    width: min(24rem, calc(100vw - 1.5rem));
    border: 1px solid var(--color-line-dashed);
    border-radius: var(--radius-tile);
    background: var(--color-surface);
    box-shadow: var(--shadow-dialog);
    overflow: hidden;
    font-size: .875rem;
    color: var(--color-ink);
}
.filter-pop[hidden] { display: none; }
.filter-pop.is-wide { width: min(36rem, calc(100vw - 1.5rem)); }

.filter-pop-search {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--color-line);
    color: var(--color-muted);
}
.filter-pop-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: none;
    font-size: .9375rem;
    color: var(--color-ink);
    caret-color: var(--color-accent);
}
.filter-pop-scroll { max-height: 26rem; overflow: auto; padding: .375rem; }
.filter-pop-group {
    padding: .625rem .75rem .25rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-muted);
}
.filter-pop-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .5625rem .75rem;
    border: 0;
    border-radius: var(--radius-menu-item);
    background: none;
    text-align: left;
    color: var(--color-ink);
    cursor: pointer;
}
.filter-pop-item > i { width: 1.125rem; text-align: center; color: var(--color-muted-2); }
.filter-pop-item:hover,
.filter-pop-item.is-highlighted { background: var(--color-tile-2); }
.filter-pop-label { flex: 1; min-width: 0; font-weight: 500; }
.filter-pop-label small { color: var(--color-muted); font-weight: 400; }
.filter-pop-hint {
    max-width: 48%;
    color: var(--color-muted);
    font-size: .8125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.filter-pop-empty { margin: 0; padding: 1rem; color: var(--color-muted-2); font-size: .8125rem; }

/* Réglage d'un critère */
.filter-pop-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem .75rem;
    border-bottom: 1px solid var(--color-line);
}
.filter-pop-head b { flex: 1; display: flex; align-items: center; gap: .5rem; font-size: .9375rem; }
.filter-pop-head b i { color: var(--color-muted-2); font-size: .8125rem; }
.filter-pop-back {
    width: 1.875rem;
    height: 1.875rem;
    border: 0;
    border-radius: var(--radius-item);
    background: none;
    color: var(--color-muted-2);
    cursor: pointer;
}
.filter-pop-back:hover { background: var(--color-tile-2); }
.filter-pop-body { display: grid; gap: .625rem; padding: .875rem; max-height: 26rem; overflow: auto; }
.filter-pop-input {
    width: 100%;
    height: 2.375rem;
    padding: 0 .75rem;
    border: 1px solid var(--color-field);
    border-radius: var(--radius-field);
    background: var(--color-surface);
    color: var(--color-ink);
    outline: none;
}
.filter-pop-input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.filter-pop-field { display: flex; align-items: center; gap: .5rem; }
.filter-pop-unit { color: var(--color-muted); }

.filter-pop-ops,
.filter-pop-quick,
.filter-pop-presets.is-inline { display: flex; flex-wrap: wrap; gap: .375rem; }
.filter-pop-ops button,
.filter-pop-presets.is-inline button {
    padding: .25rem .6875rem;
    border: 1px solid var(--color-field);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-muted-2);
    font-size: .78125rem;
    font-weight: 600;
    cursor: pointer;
}
.filter-pop-ops button.is-on,
.filter-pop-presets.is-inline button.is-on { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-on-accent); }
.filter-pop-quick button {
    padding: .1875rem .5625rem;
    border: 1px dashed var(--color-field);
    border-radius: var(--radius-item);
    background: var(--color-tile);
    color: var(--color-muted-2);
    font-size: .78125rem;
    cursor: pointer;
}

.filter-pop-presets:not(.is-inline) { display: grid; gap: .125rem; }
.filter-pop-presets:not(.is-inline) button {
    padding: .5rem .625rem;
    border: 0;
    border-radius: var(--radius-menu-item);
    background: none;
    text-align: left;
    color: var(--color-ink);
    cursor: pointer;
}
.filter-pop-presets:not(.is-inline) button:hover { background: var(--color-tile); }
.filter-pop-presets:not(.is-inline) button.is-on { background: var(--color-accent-soft); color: var(--color-accent); font-weight: 600; }

.filter-pop-checks { max-height: 16rem; overflow: auto; }
.filter-pop-checks .filter-pop-group { padding-left: .5rem; }
.filter-pop-check {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .4375rem .5rem;
    border-radius: var(--radius-menu-item);
    cursor: pointer;
}
.filter-pop-check:hover { background: var(--color-tile); }
.filter-pop-check input { width: 1rem; height: 1rem; accent-color: var(--color-accent); }
.filter-pop-avatar { width: 1.375rem; height: 1.375rem; border-radius: 50%; object-fit: cover; flex: none; }
.filter-pop-avatar.is-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-size: .5625rem;
    font-weight: 700;
}
.filter-pop-dot { width: .625rem; height: .625rem; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }
.filter-pop-check span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.filter-pop-yesno { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.filter-pop-yesno button {
    padding: .625rem;
    border: 1px solid var(--color-field);
    border-radius: var(--radius-field);
    background: var(--color-surface);
    color: var(--color-ink);
    font-weight: 600;
    cursor: pointer;
}
.filter-pop-yesno button.is-on { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent); }

.filter-pop-native .form-row-layout { padding-bottom: .625rem; }
/* Les gabarits des cartes de recherche avancée sont pensés pour une page large : dans le popover, un bloc
   qui contient sa propre grille (adresse de facturation…) et les séparateurs prennent toute la largeur. */
.filter-pop-native .grid > :has(> .grid),
.filter-pop-native .grid > .border-t { grid-column: 1 / -1; }
.filter-pop-native .grid > :has(> .grid) > strong { display: block; margin-top: .25rem; }
/* Gabarits propres à la barre : deux colonnes, intertitres discrets. */
.filter-pop-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: .75rem; }
.filter-pop-grid > * { min-width: 0; }
.filter-pop-or {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin: .875rem 0 .75rem;
    color: var(--color-muted);
    font-size: .75rem;
}
.filter-pop-or::before,
.filter-pop-or::after { content: ""; flex: 1; border-top: 1px solid var(--color-line); }
.filter-pop-sub {
    margin: .25rem 0 .5rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-muted);
}
@media (max-width: 767.98px) { .filter-pop-grid { grid-template-columns: 1fr; } }

.filter-pop-more { border-top: 1px dashed var(--color-line-dashed); padding-top: .625rem; }
.filter-pop-more > summary {
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem 0 .625rem;
    color: var(--color-accent);
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.filter-pop-more > summary::-webkit-details-marker { display: none; }
.filter-pop-more > summary::before { content: "+"; font-weight: 700; }
.filter-pop-more[open] > summary::before { content: "−"; }
.filter-pop-intro {
    margin: 0;
    padding: .625rem .75rem;
    border-radius: var(--radius-item);
    background: var(--color-accent-soft);
    color: var(--color-ink);
    font-size: .8125rem;
    line-height: 1.45;
}
.filter-pop-intro b { color: var(--color-accent); }

.filter-pop-foot {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .75rem .875rem;
    border-top: 1px solid var(--color-line);
    background: var(--color-tile);
}
.filter-pop-count { flex: 1; font-size: .78125rem; color: var(--color-muted-2); }
.filter-pop-count b { color: var(--color-ink); }

@media (max-width: 767.98px) {
    .filter-bar { flex-direction: column; align-items: stretch; padding: .75rem 1rem; }
    .filter-bar-tools { flex-wrap: wrap; }
    .filter-chip-body { max-width: calc(100vw - 6rem); }
}