/* ===== Barres de liste partagées (refonte 10/2026) =====
   Recherche + filtres en pastilles + onglets + compteur + bouton principal.
   Utilisé par Réparations (liste_formulaires), Chiffrage IA (admin/factures_list) et Relances.
   Les pastilles habillent de vrais <select> : le sélecteur natif reste sur téléphone.
   Couleurs : celles de la barre du haut (gm-topbar.css). */

.fl-cmd {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    margin-bottom: 0.25rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.fl-search { position: relative; flex: 1 1 240px; min-width: 0; }
.fl-search-ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: .8rem; pointer-events: none; }
.fl-search input {
    width: 100%; height: 34px;
    padding: 0 2rem 0 2rem;
    border: 1px solid #e2e8f0; border-radius: 8px;
    background: #f8fafc;
    font-size: .85rem; color: #0f172a;
}
.fl-search input:focus { outline: none; border-color: #10b981; background: #fff; box-shadow: 0 0 0 3px rgba(16, 185, 129, .15); }
.fl-filters { display: flex; align-items: center; gap: 0.375rem; flex: none; }
.fl-pill {
    position: relative;
    display: inline-flex; align-items: center; gap: 0.35rem;
    height: 34px; margin: 0;
    padding: 0 0.6rem;
    border: 1px solid #e2e8f0; border-radius: 8px;
    background: #fff; color: #334155;
    font-size: .8rem; font-weight: 600;
    white-space: nowrap; cursor: pointer;
}
.fl-pill:hover { border-color: #cbd5e1; }
.fl-pill:focus-within { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .15); }
.fl-k { color: #64748b; font-weight: 500; }
.fl-pill select {
    appearance: none; -webkit-appearance: none;
    border: 0; background: transparent;
    padding: 0 1rem 0 0; margin: 0;
    font: inherit; color: inherit; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right center;
}
.fl-pill select:focus { outline: none; }
.fl-pill.is-on { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.fl-pill.is-on .fl-k { color: #059669; }
.fl-reset { display: inline-flex; align-items: center; gap: 0.3rem; height: 34px; padding: 0 0.4rem; color: #64748b; font-size: .8rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.fl-reset:hover { color: #dc2626; }
.fl-reset[hidden] { display: none; }
.fl-count { font-size: .8rem; color: #64748b; white-space: nowrap; }
.fl-count b { color: #0f172a; font-variant-numeric: tabular-nums; }
.fl-new {
    display: inline-flex; align-items: center; gap: 0.4rem;
    height: 32px; padding: 0 0.8rem;
    border-radius: 8px; background: #10b981; color: #fff;
    font-size: .82rem; font-weight: 700; text-decoration: none; white-space: nowrap;
    box-shadow: 0 1px 2px rgba(4, 120, 87, .3);
}
.fl-new:hover { background: #047857; color: #fff; }

/* Onglets en liens (pages sans JS d'onglets) */
.fl-tabs { display: flex; align-items: center; gap: 0.15rem; flex: none; overflow-x: auto; scrollbar-width: none; }
.fl-tabs::-webkit-scrollbar { display: none; }
.fl-tab {
    position: relative;
    display: inline-flex; align-items: center; gap: 0.45rem;
    height: 34px; padding: 0 0.7rem;
    border-radius: 8px;
    color: #64748b; font-size: .85rem; font-weight: 600; white-space: nowrap; text-decoration: none;
    border: 0; background: none; font-family: inherit; cursor: pointer;   /* aussi sur <button> */
}
.fl-tab:hover { background: #f8fafc; color: #334155; }
.fl-tab .fl-n {
    padding: 0.1rem 0.45rem; border-radius: 999px;
    background: #f1f5f9; color: #334155;
    font-size: .7rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.fl-tab .fl-n.is-alert { background: #fee2e2; color: #b91c1c; }
.fl-tab.is-active { background: #ecfdf5; color: #047857; }
.fl-tab.is-active .fl-n { background: #fff; color: #047857; }
.fl-sep { width: 1px; align-self: stretch; margin: 0.25rem 0.15rem; background: #e2e8f0; flex: none; }
.fl-end { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; flex: none; }

@media (max-width: 1100px) {
    .fl-cmd.fl-wrap { flex-wrap: wrap; }
    .fl-cmd.fl-wrap .fl-search { order: 5; flex-basis: 100%; }
}
@media (max-width: 640px) {
    .fl-cmd.fl-wrap .fl-sep { display: none; }
    .fl-cmd.fl-wrap .fl-end { margin-left: 0; width: 100%; justify-content: space-between; order: 6; }
    .fl-new-label { display: none; }
}