/* ═══════════════════════════════════════════════════════════════════════════
   BLUE HORIZON DESIGN SYSTEM — patterns/shell.css
   Version: 0.1.1 · Build: 2026-09-17 · Benötigt: tokens.css, base.css

   0.1.1 — .bh-shell__content stapelt seine Kinder und setzt dafür gap.
   Vorher trug jeder Seitenblock seinen Abstand selbst, und wo zwei Quellen
   zusammenkamen, stand eine Summe (DESIGN.md §0c).
   VENDORED — READ-ONLY.

   Der Rahmen, in dem overview, list, detail und form liegen: Sidebar, Topbar,
   Inhaltsspalte. Nicht selbst ein Pattern, sondern deren gemeinsame Bühne —
   dasselbe Verhältnis wie base.css zu den Komponenten.
   ═══════════════════════════════════════════════════════════════════════════ */

.bh-shell {
  display: grid;
  grid-template-columns: var(--bh-sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.bh-shell__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--bh-space-4);

  padding: var(--bh-space-4);
  border-right: 1px solid var(--bh-border-subtle);
  background: var(--bh-surface-1);

  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.bh-shell__brand {
  display: flex;
  align-items: center;
  gap: var(--bh-space-2);
  min-height: var(--bh-control-height);
  color: var(--bh-text-primary);
  font-size: var(--bh-text-md);
  font-weight: var(--bh-weight-semibold);
}

.bh-shell__nav { display: flex; flex-direction: column; gap: var(--bh-space-1); }

/* BEGRÜNDETE AUSNAHME ZU §0c. Dieser Rand bleibt am Kind, obwohl
   .bh-shell__nav ein gap setzt — und er addiert sich darauf: 16px über
   der Beschriftung, 8px darunter.

   Der Grund: Die Beschriftung IST die Gruppengrenze. In einer einzigen
   Flex-Spalte aus Beschriftungen und Punkten gibt es keinen Behälter, in
   den der Gruppenabstand gehören könnte — ihn zu erfinden hieße, um jede
   Gruppe ein <div> zu legen, und dieses <div> müsste den gap der Navigation
   wiederholen. Genau das hatte der Team Hub gebaut (.nav-section) und damit
   dieselbe Aufteilung zweimal beschrieben (DESIGN.md §0).

   Zwischen einer Summe und einer zweiten Wahrheit ist die Summe der
   kleinere Fehler — sie ist sichtbar und steht an einer Stelle.
   check-spacing-sum.py führt diese Klasse als benannte Ausnahme. */
.bh-shell__nav-label {
  margin: var(--bh-space-3) 0 var(--bh-space-1);
  font-size: var(--bh-text-xs);
  font-weight: var(--bh-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--bh-tracking-caps);
  color: var(--bh-text-muted);
}

.bh-shell__nav-item {
  display: flex;
  align-items: center;
  gap: var(--bh-space-2);
  min-height: var(--bh-control-height);
  padding: 0 var(--bh-space-3);
  border-radius: var(--bh-radius-lg);
  color: var(--bh-text-tertiary);
  font-size: var(--bh-text-sm);
  font-weight: var(--bh-weight-medium);
  transition: background var(--bh-transition), color var(--bh-transition);
}
.bh-shell__nav-item > svg { width: var(--bh-icon-size-nav); height: var(--bh-icon-size-nav); flex: none; }
.bh-shell__nav-item:hover  { background: var(--bh-surface-hover); color: var(--bh-text-primary); }
.bh-shell__nav-item:active { background: var(--bh-surface-3); }
.bh-shell__nav-item[aria-current="page"],
.bh-shell__nav-item.is-active {
  background: var(--bh-color-accent-overlay);
  color: var(--bh-color-accent);
}
.bh-shell__nav-item:focus-visible {
  outline: var(--bh-focus-width) solid var(--bh-focus-color);
  outline-offset: var(--bh-focus-offset);
}
.bh-shell__nav-item[aria-disabled="true"] { color: var(--bh-text-muted); pointer-events: none; }

.bh-shell__nav-count { margin-left: auto; color: var(--bh-text-muted); font-variant-numeric: tabular-nums; }

.bh-shell__sidebar-foot { margin-top: auto; padding-top: var(--bh-space-3); border-top: 1px solid var(--bh-border-subtle); }

/* ── Topbar — nur auf Mobil ──────────────────────────────────────────────── */
.bh-shell__topbar {
  display: none;
  align-items: center;
  gap: var(--bh-space-2);
  position: sticky;
  top: 0;
  z-index: var(--bh-z-topbar);
  height: var(--bh-topbar-height);
  padding: 0 var(--bh-space-4);
  border-bottom: 1px solid var(--bh-border-subtle);
  background: var(--bh-surface-1);
}

/* ── Inhalt ──────────────────────────────────────────────────────────────── */
.bh-shell__main { min-width: 0; }

/* Der Inhaltsbereich ist der Stapel der Seite — also setzt ER den Abstand
   zwischen den Seitenblöcken, nicht die Blöcke selbst (DESIGN.md §0c).
   Bis 0.1.1 stand hier kein gap: der Seitenkopf brachte seinen eigenen
   margin-bottom mit, und wo er zusätzlich in einem Listenbehälter steckte,
   addierte sich beides auf 40px, auf der Übersicht auf 72px.

   Der Wert ist --bh-space-6, dasselbe Maß, mit dem dieser Behälter oben und
   seitlich polstert: 32px ist im System das SEITENmaß. 24px wäre ein
   Innenmaß — es steht für Kartenpolster und Dialogpolster — und gäbe dem
   Kopf weniger Trennung als .bh-detail__head hat, der zusätzlich eine Linie
   führt. Ein Kopf ohne Linie braucht mehr Abstand als einer mit, nicht
   weniger.

   Die Staffelung, jede Stufe mit einer Bedeutung:
     16px  innerhalb eines Patterns   (Listenzeilen, Karten der Hauptspalte)
     24px  innerhalb einer Komponente (Karten-, Dialogpolster)
     32px  zwischen Seitenblöcken     (hier)
     48px  zwischen Sektionen         (.bh-overview)

   Folgenlos auf Seiten mit nur einem Kind — und das sind die meisten. */
.bh-shell__content {
  width: 100%;
  max-width: var(--bh-content-max);
  margin: 0 auto;
  padding: var(--bh-space-6) var(--bh-space-6) var(--bh-section-gap);

  display: flex;
  flex-direction: column;
  gap: var(--bh-space-6);
}

.bh-shell__scrim {
  display: none;
  position: fixed; inset: 0;
  z-index: var(--bh-z-scrim);
  background: var(--bh-surface-overlay);
}

/* ── Umbrüche ────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .bh-shell__content { padding: var(--bh-space-5) var(--bh-space-5) var(--bh-space-6); }
}

@media (max-width: 767px) {
  .bh-shell { grid-template-columns: minmax(0, 1fr); }
  .bh-shell__topbar { display: flex; }

  /* Sidebar wird zur Schublade. */
  .bh-shell__sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--bh-z-sidebar);
    width: var(--bh-sidebar-width);
    transform: translateX(-100%);
    transition: transform var(--bh-transition-enter);
    box-shadow: var(--bh-shadow-3);
  }
  .bh-shell.is-nav-open .bh-shell__sidebar { transform: none; }
  .bh-shell.is-nav-open .bh-shell__scrim { display: block; }

  .bh-shell__content { padding: var(--bh-space-4) var(--bh-space-4) var(--bh-space-6); gap: var(--bh-space-5); }
}

@media (prefers-reduced-motion: reduce) {
  .bh-shell__sidebar { transition: none; }
}

@media print {
  .bh-shell__sidebar, .bh-shell__topbar, .bh-shell__scrim { display: none !important; }
  .bh-shell { grid-template-columns: 1fr; }
}