/* ===========================================================================
   Cockpit — geteilter Header (Design-Konsolidierung „Header", 2026-07-16)
   ---------------------------------------------------------------------------
   Ergänzt _partials/c2/topbar.php um die NEUEN Slots (Back-Lead, Meta-Chips,
   Persona, Custom-Actions, Context-Badge), Sticky-Verhalten (nur app, opt-in)
   und den prioritätsgesteuerten Mobile-Overflow.

   Die BASIS-Klassen (.topbar/.tb-left/.tb-right/.lv-brand/.lv-logo/.crumb/
   .toggle) bleiben in cockpit-listen-v2.css unverändert. Diese Datei greift
   ausschließlich bei Views, die das neue Partial einbinden — bestehende
   Standalone-Topbars (listen-v2, Dossiers …) bleiben unberührt.

   Tokens: siehe cockpit-v2-tokens.css → --c2-topbar-*.
   =========================================================================== */

/* ---- Basis-Layout: macht cockpit-header.css self-contained für Views, die NICHT
   cockpit-listen-v2.css laden (z.B. der Public-Header). Bewusst identisch zu den
   Basis-Klassen in cockpit-listen-v2.css, aber auf `.tb-v2` gescoped (greift nur bei
   Partial-Output). Dedupe der Doppel-Definitionen = späterer Cleanup. */
.tb-v2.topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--c2-topbar-gap); }
.tb-v2 .tb-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; }
.tb-v2 .tb-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tb-v2 .lv-brand { display: inline-flex; align-items: center; height: 44px; text-decoration: none; flex: 0 0 auto; }
.tb-v2 .lv-logo { height: 44px; width: auto; display: block; }
.tb-v2 .lv-logo-dark { display: none; }
:root[data-theme="dark"] .tb-v2 .lv-logo-light { display: none; }
:root[data-theme="dark"] .tb-v2 .lv-logo-dark { display: block; }

/* ---- Public-Variante: eigener Layout-Branch — zentrierte Inhalts-Spalte (wie bisher
   der pub-top-Header), NICHT sticky, kein User-Menü/Toggle. */
.topbar.tb-public { max-width: 840px; margin: 0 auto; padding: 20px 24px; }
.topbar.tb-public .tb-mono { width: 24px; height: 24px; }

/* ---- Sticky: NUR app, opt-in via .topbar.is-sticky (public bleibt statisch) */
.topbar.is-sticky {
  position: sticky;
  top: 0;
  z-index: var(--c2-topbar-z);
  background: var(--c2-bg);
  -webkit-backdrop-filter: saturate(1.1) blur(8px);
  backdrop-filter: saturate(1.1) blur(8px);
}

/* ---- Back-Lead („← Übersicht") ------------------------------------------- */
.tb-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  font-size: var(--c2-fs-small);
  font-weight: var(--c2-fw-semibold);
  color: var(--c2-ink);
  text-decoration: none;
}
.tb-back:hover { color: var(--c2-accent-text); }
.tb-back .bi { font-size: var(--c2-topbar-icon); }

/* ---- Titel/Crumb mit Ellipsis (wenn als .tb-title markiert) --------------- */
.tb-title {
  max-width: var(--c2-crumb-max);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Meta-Chips (0..n, priority high|low) -------------------------------- */
.tb-meta { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.tb-chip {
  display: inline-flex;
  align-items: center;
  font-size: var(--c2-fs-label);
  font-weight: var(--c2-fw-semibold);
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--c2-line-2);
  color: var(--c2-ink-2);
  white-space: nowrap;
}
.tb-chip--muted   { color: var(--c2-ink-3); border-color: var(--c2-line-3); }
.tb-chip--neutral { color: var(--c2-ink-2); border-color: var(--c2-line-2); }
.tb-chip--accent  { color: var(--c2-accent-text); border-color: var(--c2-accent); background: var(--c2-accent-tile); }

/* ---- Persona (Modus-Pille, eigener Slot ≠ context) ----------------------- */
.tb-persona {
  display: inline-flex;
  align-items: center;
  font-size: var(--c2-fs-label);
  font-weight: var(--c2-fw-semibold);
  padding: 3px 10px;
  border-radius: 999px;
  color: var(--c2-accent-text);
  border: 1px solid var(--c2-accent);
  background: var(--c2-accent-tile);
}

/* ---- Custom-Actions (priority primary|secondary|destructive) ------------- */
.tb-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: var(--c2-fs-small);
  font-weight: var(--c2-fw-semibold);
  cursor: pointer;
  text-decoration: none;
  border: 1px solid var(--c2-line-3);
  background: var(--c2-card);
  color: var(--c2-ink);
}
.tb-act:hover { border-color: var(--c2-accent); color: var(--c2-accent-text); }
.tb-act--primary { border-color: transparent; background: var(--c2-accent); color: #04222f; }
.tb-act--primary:hover { color: #04222f; filter: brightness(1.04); }
.tb-act--destructive { color: var(--c2-danger); border-color: var(--c2-danger-tile); }
.tb-act--destructive:hover { border-color: var(--c2-danger); color: var(--c2-danger); }
.tb-act .bi { font-size: var(--c2-topbar-icon); }

/* ---- Context-Badge (Tenant/Mandant, generisch — public) ------------------ */
.tb-context {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--c2-fs-small);
  color: var(--c2-ink-2);
  text-decoration: none;
}
.tb-context .tb-mono {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: var(--c2-fs-label);
  font-weight: var(--c2-fw-bold);
  background: var(--c2-accent-tile);
  color: var(--c2-accent-text);
}
a.tb-context:hover { color: var(--c2-accent-text); }

/* ---- Theme-Toggle (icon, dauerhaft in der Topbar, globale UI-Funktion) ---- */
.tb-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: none;
  background: none;
  color: var(--c2-ink-2);
  cursor: pointer;
  font-family: inherit;
  flex: 0 0 auto;
}
.tb-theme:hover { background: var(--c2-surface-2); color: var(--c2-ink); }
.tb-theme .bi { font-size: 16px; }

/* ---- Overflow „⋯" (Kebab) — Container, nur mobil sichtbar ---------------- */
.tb-overflow { display: none; }

/* ===========================================================================
   Responsive: prioritätsgesteuerter Overflow (== --c2-topbar-bp: 720px;
   Media-Queries können keine var() lesen → Wert gespiegelt, bei Änderung
   des Tokens hier mitziehen).
   =========================================================================== */
@media (max-width: 720px) {
  .topbar { min-height: var(--c2-topbar-h-mobile); }

  /* Back nur als Icon */
  .tb-back .tb-back-label { display: none; }

  /* Meta: nur priority=high bleibt, low fällt */
  .tb-chip[data-prio="low"] { display: none; }

  /* Persona → Overflow */
  .tb-persona { display: none; }

  /* Actions: primary bleibt, secondary/destructive → Overflow */
  .tb-act[data-prio="secondary"],
  .tb-act[data-prio="destructive"] { display: none; }

  /* Theme-Toggle wandert ins User-Menü (2-stufig Light/Dark).
     OPT-IN via .tb-collapse-toggle — wird ERST gesetzt, wenn das User-Menü
     eine Theme-Option enthält (Folgeschritt). Sonst bliebe der Schalter auf
     Mobile unerreichbar → in Etappe 1 bewusst inert. */
  .topbar.tb-collapse-toggle .toggle { display: none; }

  /* Kebab sichtbar, wenn es etwas ins Overflow zu verlagern gibt */
  .tb-right.has-overflow .tb-overflow { display: inline-flex; }
}