/* ═══════════════════════════════════════════════════════════════════════════════
 * ViCORE — ZENTRALES FILTERSYSTEM (Optik)
 *
 * EINE Definition für ALLE Filterleisten des Systems. Es gibt kein Modul-eigenes
 * Filter-CSS mehr: gleiche Höhe, gleicher Radius, gleiche Rahmenfarbe, gleiche
 * Schriftgröße, gleiche Abstände, gleiches Verhalten auf jeder Seite.
 *
 *   .vif-l1     Ebene 1 — Ansicht (Segment) + Status (Pillen) + gespeicherte Ansicht
 *   .vif-bar    Ebene 2 — Objekt · Suche · Hauptfilter · Weitere Filter · Sortierung
 *   .vif-chips  Ebene 3 — aktive Filter zum direkten Entfernen
 *
 * Nur Tokens aus design-system.css, keine losen Hex-/px-Werte außer den
 * Filter-eigenen Maßen unten (eine Stelle, bewusst zentral).
 * Doku: docs/FILTER_STANDARD.md
 * ═══════════════════════════════════════════════════════════════════════════════ */

.vif {
  /* Die zentralen Maße der Filterleiste — nur hier, nirgends je Modul. */
  /* Feldhöhe der Leiste = Sprosse `lg` der einen Höhenleiter (UX-Phase 9 §6).
     Vorher 42 px — zwei Pixel neben der Suche, die in derselben Zeile steht. */
  --vif-h: var(--control-h-lg);
  --vif-r: var(--radius-md, 8px);
  --vif-bd: var(--border-color, var(--gray-300, #D8DFDC));
  --vif-bg: var(--color-surface, #fff);
  --vif-ink: var(--text-primary, var(--gray-900, #141A17));
  --vif-muted: var(--text-muted, var(--gray-500, #5F6B66));
  --vif-accent: var(--brand-accent, var(--color-sage, #147352));
  --vif-gap: var(--space-2, 8px);
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-3, 12px);
  font-family: var(--font-body);
}
/* Im kanonischen Seitenmuster ordnet die SEITE die Abstände (.vi-page: Flex + gap) —
   der Eigenabstand der Filterwurzel käme obendrauf (8 + 12 px statt 8 px). */
.vi-page .vif { margin-bottom: 0; }

/* ── Ebene 1: Ansicht · Status · gespeicherte Ansichten ─────────────────────── */
.vif-l1 {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-2, 8px) var(--space-4, 16px);
}
.vif-l1[hidden] { display: none; }
.vif-l1-l {
  font-size: var(--text-xs, 12px); font-weight: var(--fw-semibold, 600);
  letter-spacing: .02em; color: var(--vif-muted); white-space: nowrap;
}
/* Die Statusgruppe muss MITSCHRUMPFEN dürfen. Ohne `flex`/`min-width:0` ist sie ein
   unteilbarer Block in Inhaltsbreite: sie sprengt die Zeile und drängt Ansichts-
   umschalter oder gespeicherte Ansicht allein auf eine eigene, fast leere Zeile.
   Mit flexibler Basis teilen sich alle drei Gruppen eine Zeile — und wenn es eng
   wird, brechen die Statuspillen INNERHALB ihrer Gruppe um, was die Zeile füllt. */
.vif-status-wrap {
  display: flex; align-items: center; gap: var(--space-2, 8px); flex-wrap: wrap;
  flex: 1 1 auto; min-width: 0;
}

/* Ansichtsumschalter (Meine/Alle, Liste/Gruppiert, Aktiv/Archiviert) */
.vif-views {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--color-surface-sunken, var(--gray-100, #EFF2F1));
  border-radius: var(--vif-r); padding: 3px;
}
.vif-view {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--control-h-sm); padding: 0 var(--space-3, 12px);
  border-radius: calc(var(--vif-r) - 3px);
  font: var(--fw-semibold, 600) 13px/1 var(--font-body);
  color: var(--text-secondary, var(--gray-700, #3A4441));
  transition: background var(--transition, 150ms ease), color var(--transition, 150ms ease);
}
.vif-view:hover { background: rgba(255, 255, 255, .7); color: var(--vif-ink); }
.vif-view.is-active { background: var(--vif-bg); color: var(--gray-900); box-shadow: var(--shadow-sm); }
.vif-view:focus-visible, .vif-pill:focus-visible, .vif-chip:focus-visible,
.vif-more:focus-visible, .vif-sort-btn:focus-visible, .vif-saved-btn:focus-visible,
.vif-opt:focus-visible, .vif-menu-i:focus-visible {
  outline: 2px solid var(--vif-accent); outline-offset: 1px;
}

/* Statusnavigation — wenige, stabile Prozessstatus als Chips */
.vif-status { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vif-pill {
  --vif-pill-c: var(--vif-accent);
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--control-h-sm); padding: 0 var(--space-3, 12px);
  border: 1px solid var(--vif-bd); border-radius: var(--radius-pill);
  background: var(--vif-bg); color: var(--text-secondary, #3A4441);
  font: var(--fw-medium, 500) 13px/1 var(--font-body);
  transition: all var(--transition, 150ms ease);
}
.vif-pill:hover { border-color: var(--gray-400); background: var(--gray-50); color: var(--vif-ink); }
.vif-pill.is-active {
  background: var(--gray-900, #141A17); border-color: var(--gray-900, #141A17);
  color: var(--color-surface); font-weight: var(--fw-semibold, 600);
}
.vif-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.vif-pill.is-active .vif-dot { box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
.vif-n {
  font-size: var(--text-xxs); font-weight: var(--fw-semibold, 600);
  font-variant-numeric: tabular-nums; opacity: .75;
}
.vif-view .vif-n { margin-left: 2px; }

/* Gespeicherte Ansichten */
/* KEIN `margin-left: auto`. In einem umbrechenden Flex-Container (.vif-l1) schiebt das
   die gespeicherten Ansichten nach rechts — sobald Ansichtsumschalter und Statuspillen
   die Zeile füllen, bricht der Knopf um und steht ALLEIN auf einer sonst leeren Zeile
   ganz rechts. Genau das Waisen-Fehlerbild, das CLAUDE.md für die Filterkarte schon
   einmal festhält. Er läuft jetzt in Leserichtung mit. */
.vif-saved { margin-left: 0; }
.vif-saved-btn {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  height: var(--control-h-sm); padding: 0 var(--space-3, 12px);
  border: 1px solid var(--vif-bd); border-radius: var(--vif-r);
  background: var(--vif-bg); color: var(--vif-ink); font: var(--fw-medium, 500) 13px/1 var(--font-body);
}
.vif-saved-btn:hover { border-color: var(--vif-accent); }
.vif-saved-l { color: var(--vif-muted); }
.vif-saved-v { font-weight: var(--fw-semibold, 600); }
.vif-caret { color: var(--vif-muted); font-size: var(--text-xxs); }

/* ── Ebene 2: die Filterleiste ──────────────────────────────────────────────────
   KEINE Karte mehr (Redesign 16.08.2026). Die Leiste war eine weiße Karte mit
   Rahmen und Schatten, in der weiße Felder mit eigenem Rahmen standen: drei
   Flächenebenen für eine Zeile Bedienelemente — genau das „Card in Card", das eine
   Oberfläche unruhig macht. Die Felder tragen ihren eigenen Rahmen, das genügt.
   Die Leiste ist jetzt reine Anordnung: Position und Abstand statt Container. */
.vif-bar {
  display: flex; align-items: stretch; flex-wrap: wrap;
  gap: var(--vif-gap);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ── Suchfeld ────────────────────────────────────────────────────────────────
   Das Suchfeld ist KEIN `.vif-f`, sondern das zentrale Primitive `.vi-search`
   (public/css/design-system.css). Die Leiste bestimmt hier nur seine BREITE und
   gleicht die Höhe an die übrigen Felder an — Rahmen, Fokus, Icon und Typografie
   kommen ausschließlich aus dem Primitive. Kein Modul-Suchfeld-CSS. */
.vif-bar .vi-search.vif-search {
  --search-height: var(--vif-h);
  --search-radius: var(--vif-r);
  /* Die Suche ist das FLEXIBLE Element der Leiste: kleine Basis, hoher flex-grow.
     Über die Basis entscheidet Flexbox, ob noch ein Element auf die Zeile passt —
     eine zu große Basis drängte die Sortierung bei 1280 px um wenige Pixel auf eine
     eigene, fast leere Zeile. Mit 260 px bleibt bei allen geprüften Breiten eine
     Zeile, und die Suche füllt den Rest (Wachstum statt fester Breite).
     `min-width` schützt den Placeholder vor dem Abschneiden. */
  flex: 3 1 260px;
  min-width: 220px;
}

/* EIN Feldtyp für die Auswahlfilter: Label klein im Feld, Wert darunter. */
.vif-f {
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0; height: var(--vif-h);
  padding: 0 var(--space-3, 12px);
  border: 1px solid var(--vif-bd); border-radius: var(--vif-r);
  background: var(--vif-bg);
  transition: border-color var(--transition, 150ms ease), background var(--transition, 150ms ease);
}
.vif-f:focus-within { border-color: var(--vif-accent); box-shadow: var(--focus-ring); }
.vif-f-l {
  font: var(--fw-semibold, 600) 10.5px/1 var(--font-body);
  color: var(--vif-muted); margin-bottom: 2px; white-space: nowrap;
}
.vif-f-c { display: flex; align-items: center; gap: 6px; min-width: 0; }
.vif-f-c > svg { color: var(--vif-muted); flex: 0 0 auto; }

/* Der frühere `.vif-f-obj` (Objektfeld) ist entfallen — der Objektkontext wird genau
   einmal in der Hauptnavigation gewählt. Die Leiste beginnt mit der Suche. */
.vif-f-sel    { flex: 1 1 190px; max-width: 260px; }

/* Gefülltes Auswahlfeld: dieselbe ruhige Hervorhebung überall — ein gesetzter Filter ist
   eine Aussage über die Liste und muss auf einen Blick zu finden sein.
   Das Suchfeld ist bewusst NICHT dabei: dort steht der Suchbegriff selbst im Feld. */
.vif-f.is-filled, .vif-f:has(.vi-obj-picker-clear) {
  border-color: var(--green-300, #7CC3A2); background: var(--green-50, #EDF7F2);
}

/* Der zentrale Picker sitzt RANDLOS im Feld — der Rahmen gehört dem Feld (.vif-f).
   Spezifität bewusst über den Wrap qualifiziert, sonst gewinnt die generische
   Feldregel und es entsteht ein zweiter Rahmen im Rahmen. */
.vif .vif-f .vi-obj-picker-wrap { width: 100%; min-width: 0; }
.vif .vif-f .vi-obj-picker-input-wrap {
  border: 0 !important; background: transparent !important; box-shadow: none !important;
  height: auto; min-height: 0; padding: 0; border-radius: 0;
}
.vif .vif-f .vi-obj-picker-input-wrap .vi-obj-picker-input {
  border: 0; background: transparent; box-shadow: none;
  height: 18px; min-height: 0; padding: 0; border-radius: 0;
  font: var(--fw-medium, 500) 13.5px/1.2 var(--font-body); color: var(--vif-ink);
}
.vif .vif-f .vi-obj-picker-input-wrap .vi-obj-picker-input::placeholder { color: var(--vif-muted); font-weight: var(--fw-normal, 400); }
.vif .vif-f .vi-obj-picker-caret { color: var(--vif-muted); }
.vif .vif-f .vi-obj-picker-dropdown { top: calc(var(--vif-h) - 8px); }

/* „Weitere Filter" — genau EINE Komponente im ganzen System */
.vif-more {
  appearance: none; cursor: pointer; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  height: var(--vif-h); padding: 0 var(--space-4, 16px);
  border: 1px solid var(--vif-bd); border-radius: var(--vif-r);
  background: var(--vif-bg); color: var(--vif-ink);
  font: var(--fw-semibold, 600) 13px/1 var(--font-body);
  transition: all var(--transition, 150ms ease);
}
.vif-more:hover { border-color: var(--gray-400); background: var(--gray-50); }
.vif-more svg { color: var(--vif-muted); }
.vif-more-n {
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green-600, #147352); color: var(--color-surface);
  font-size: var(--text-xxs); font-weight: var(--fw-bold, 700); font-variant-numeric: tabular-nums;
}
.vif-more-n[hidden] { display: none; }

/* Sortierung — eigenes Steuerelement, NIE als Filter getarnt.
   Ebenfalls OHNE `margin-left: auto`: in der umbrechenden Filterleiste landete der
   Sortierknopf sonst als einzelnes Element auf einer zweiten, fast leeren Zeile —
   die Filterkarte wuchs dadurch um eine volle Feldhöhe (~54 px) ohne Informationsgewinn.
   Er sitzt jetzt direkt hinter „Weitere Filter" in derselben Zeile. */
.vif-sort { display: flex; align-items: stretch; margin-left: 0; }
.vif-sort-btn {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  height: var(--vif-h); padding: 0 var(--space-3, 12px);
  border: 1px solid var(--vif-bd); border-radius: var(--vif-r);
  background: var(--vif-bg); color: var(--vif-ink); font: var(--fw-medium, 500) 13px/1 var(--font-body);
}
.vif-sort-btn:hover { border-color: var(--vif-accent); }
.vif-sort-btn svg { color: var(--vif-muted); }
.vif-sort-v { font-weight: var(--fw-semibold, 600); }

/* ── Ebene 3: aktive Filter ─────────────────────────────────────────────────── */
.vif-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 0 2px; }
.vif-chips[hidden] { display: none; }
.vif-chips-l { font-size: var(--text-xs, 12px); color: var(--vif-muted); margin-right: 2px; }
.vif-chip {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 var(--space-2, 8px) 0 var(--space-3, 12px);
  border: 1px solid var(--green-100, #D8EEE3); border-radius: var(--radius-pill);
  background: var(--green-50, #EDF7F2); color: var(--green-700, #0F5C42);
  font: var(--fw-medium, 500) 12.5px/1 var(--font-body); max-width: 340px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vif-chip:hover { background: var(--vif-bg); border-color: var(--vif-accent); }
.vif-chip-l { font-weight: var(--fw-semibold, 600); opacity: .8; }
.vif-chip svg { opacity: .6; flex: 0 0 auto; }
.vif-chip:hover svg { opacity: 1; }
.vif-chip-clear {
  appearance: none; cursor: pointer; border: 0; background: none;
  color: var(--vif-muted); font: var(--fw-medium, 500) 12.5px/1 var(--font-body);
  text-decoration: underline; padding: 0 var(--space-2, 8px); height: 28px;
}
.vif-chip-clear:hover { color: var(--color-danger-ink, #A32C22); }

/* ── Drawer „Weitere Filter" (nutzt die zentrale .vi-drawer-Komponente) ─────── */
.vif-drw .vif-drw-sec + .vif-drw-sec { border-top: 1px solid var(--vif-bd, #D8DFDC); padding-top: var(--space-4, 16px); }
.vif-drw-h {
  margin: 0 0 var(--space-2, 8px); font: var(--fw-semibold, 600) 12px/1.2 var(--font-body);
  letter-spacing: .04em; text-transform: none; color: var(--text-muted, #5F6B66);
}
.vif-drw-f { margin-bottom: var(--space-3, 12px); }
.vif-drw-fl { display: block; margin-bottom: 5px; font: var(--fw-semibold, 600) 12.5px/1.2 var(--font-body); color: var(--text-primary, #141A17); }
.vif-drw-empty { color: var(--text-muted, #5F6B66); font-size: var(--text-sm, 14px); margin: 0; }
.vif-optlist { display: flex; flex-direction: column; gap: 4px; }

/* Auswahlzeile statt nackter Browser-Checkbox */
.vif-opt {
  appearance: none; cursor: pointer; display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 38px; padding: 0 var(--space-3, 12px);
  border: 1px solid transparent; border-radius: var(--vif-r, 10px);
  background: var(--gray-100, #EFF2F1); color: var(--text-primary, #141A17);
  font: var(--fw-medium, 500) 13.5px/1.3 var(--font-body); text-align: left;
  transition: all var(--transition, 150ms ease);
}
.vif-opt:hover { background: var(--gray-200, #E5EAE8); }
.vif-opt-mark {
  width: 17px; height: 17px; flex: 0 0 auto; border-radius: var(--radius-sm);
  border: 1.5px solid var(--gray-300, #D8DFDC); background: var(--color-surface);
}
.vif-opt.is-on { background: var(--green-50, #EDF7F2); border-color: var(--green-200, #AFDCC6); }
.vif-opt.is-on .vif-opt-mark {
  background: var(--green-600, #147352); border-color: var(--green-600, #147352);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 13px; background-position: center; background-repeat: no-repeat;
}
.vif-opt-l { flex: 1 1 auto; min-width: 0; }
.vif-opt-n { font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--text-muted, #5F6B66); }
.vif-range { display: flex; gap: var(--space-2, 8px); }
.vif-range-f { flex: 1 1 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vif-range-f > span { font-size: var(--text-xxs); color: var(--text-muted, #5F6B66); }

/* ── Menüs (Sortierung, gespeicherte Ansichten) ─────────────────────────────── */
.vif-menu {
  position: fixed; z-index: var(--vdlg-z-pop, 7000); min-width: 220px; max-width: 320px;
  background: var(--color-surface, #fff); border: 1px solid var(--gray-300, #D8DFDC);
  border-radius: var(--radius-lg, 12px); box-shadow: var(--shadow-pop, var(--shadow-md)); padding: 5px;
}
.vif-menu-i {
  /* justify-content ausdrücklich: design-system.css zentriert Buttons global. */
  appearance: none; cursor: pointer; display: flex; align-items: center; justify-content: flex-start;
  gap: 8px; width: 100%;
  min-height: 34px; padding: 0 var(--space-2, 8px); border: 0; border-radius: var(--radius-sm, 6px);
  background: none; color: var(--text-primary, #141A17);
  font: var(--fw-medium, 500) 13.5px/1.3 var(--font-body); text-align: left;
}
.vif-menu-ic {
  flex: 0 0 15px; width: 15px; height: 15px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted, #5F6B66);
}
.vif-menu-ic svg { display: block; }
.vif-menu-i:hover .vif-menu-ic, .vif-menu-i.is-on .vif-menu-ic { color: currentColor; }
.vif-menu-l { flex: 1 1 auto; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.vif-menu-i:hover { background: var(--gray-100, #EFF2F1); }
.vif-menu-i.is-on { color: var(--color-sage-hover, #0F5C42); font-weight: var(--fw-semibold, 600); }
.vif-menu-tag {
  margin-left: auto; font-size: var(--text-xxs); font-weight: var(--fw-semibold, 600);
  color: var(--color-sage-hover, #0F5C42); background: var(--color-sage-soft, #EDF7F2);
  border-radius: var(--radius-pill); padding: 2px 6px;
}
.vif-menu-x { margin-left: auto; color: var(--text-muted, #5F6B66); padding: 0 4px; }
.vif-menu-x:hover { color: var(--color-danger-ink, #A32C22); }
.vif-menu-sep { height: 1px; background: var(--gray-300, #D8DFDC); margin: 5px 0; }
.vif-menu-empty { padding: 8px; color: var(--text-muted, #5F6B66); font-size: var(--text-xs); }

/* ── Schmale Bildschirme: Reihenfolge bleibt, nur die Anzahl sinkt ────────────
   Breakpoint = kanonische Mobilbreite (767 px). Das quer gehaltene Telefon ist
   844 px BREIT — dort hat die Leiste Platz für EINE Zeile; der frühere
   900-px-Umbruch stapelte sie und kostete ~52 px der knappen 390-px-Bildhöhe. */
@media (max-width: 767px) {
  .vif-bar { gap: 6px; padding: 6px; }
  /* Mobil: Suche über die volle Breite, darunter die Filter — nie nebeneinander
     gequetscht, nie mit abgeschnittenem Placeholder. */
  .vif-bar .vi-search.vif-search { flex: 1 1 100%; min-width: 0; order: 0; }
  .vif-f-sel { flex: 1 1 46%; max-width: none; }
  /* „Weitere Filter" und Sortierung teilen sich EINE Zeile. Vorher füllte der
     Objektfilter die zweite Hälfte; ohne ihn stünde „Weitere Filter" allein auf einer
     halbleeren Zeile. */
  .vif-more { flex: 1 1 46%; order: 2; justify-content: center; }
  .vif-sort { flex: 1 1 46%; order: 3; margin-left: 0; min-width: 0; }
  .vif-sort-btn { width: 100%; justify-content: center; }
  .vif-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .vif-chips::-webkit-scrollbar { height: 4px; }
  .vif-saved { margin-left: 0; }
}
@media (max-width: 560px) {
  .vif-views { width: 100%; }
  .vif-view { flex: 1 1 0; justify-content: center; }
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  .vif *, .vif-menu, .vif-drw { transition: none !important; }
}

/* ── Mobiler Kontext: Statuszeile blättern statt umbrechen ────────────────────
   Fünf Statuspillen brachen auf 390 px in drei Zeilen um (gemessen 136 px allein
   für die Statuszeile) und schoben den Inhalt aus dem Bild. Waagerecht blätterbar
   bleibt jede Auswahl erreichbar, kostet aber nur EINE Zeile.
   Ausdruck zeichengleich mit mobile.js/mobile.css. */
@media (max-width: 767px), (max-height: 540px) and (pointer: coarse) {
  .vif-l1 {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .vif-l1::-webkit-scrollbar { display: none; }
  .vif-l1 > * { flex: 0 0 auto; }
}