/* HINWEIS (2026-08-03): Diese Datei entstand, BEVOR `menu-sidebar.css` aus
 * dem Bestand portiert wurde ("bislang hat sie KEINE Stylesheet-Entsprechung",
 * siehe unten). Danach standen 34 Selektoren DOPPELT — und weil shell.css
 * spaeter geladen wird, gewann sie: die portierten Bestandsregeln waren zum
 * Teil wirkungslos. Messbar an den Brotkrumen (42 statt 24,4 px hoch) und an
 * der Menuezeile.
 *
 * Fuer die Seitenleiste ist jetzt `menu-sidebar.css` die alleinige Autoritaet;
 * die doppelten Regeln sind hier entfernt. Was bleibt, gehoert der Shell
 * selbst (Rahmenlayout, Kopfzeilenplatz, Inhaltsflaeche).
 */
/* App-Shell (<vc-app-shell>).
 *
 * Warum diese Datei existiert: die Shell rendert im Light DOM und trägt die
 * Klassen .vc-shell-header, .sidebar-panel, .menu-entry, … — bislang hat sie
 * KEINE Stylesheet-Entsprechung. Ohne sie fällt die Anwendung auf die
 * Browser-Defaults zurück: Header, Sidebar und Inhalt stehen untereinander im
 * Dokumentfluss, die Menüeinträge erscheinen als nackte Buttons in einer
 * Reihe. Genau das war der Zustand der Einstiegsseite.
 *
 * Umfang bewusst schmal: Layout, Grundflächen und Zustände (aktiv/hover/
 * fokussiert) aus den vorhandenen semantischen Tokens. Keine eigenen
 * Farbwerte — Theme-Wechsel über html[data-core-theme] bleiben damit wirksam.
 */

.vc-app-shell {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    'header header'
    'sidebar content';
  /* HOEHE, nicht min-height (SPEC-0354, Befund 2026-07-30): mit `min-height`
   * waechst das Grid ueber das Fenster hinaus, die Inhaltszeile `1fr` richtet
   * sich nach dem Inhalt — und `.vc-shell-content { overflow: auto }` bekommt
   * nie eine begrenzte Hoehe, kann also nicht scrollen. GEMESSEN am
   * Hilfe-Dialog: Host 2553/2553 (gewachsen statt gescrollt), Inhalt endete
   * bei 2569px in einem 700px hohen Fenster, unerreichbar.
   * Mit `height` ist die Shell an das Fenster gebunden, die Inhaltszeile wird
   * begrenzt und scrollt. `min-height` bleibt zusaetzlich stehen, damit
   * kurze Inhalte die Flaeche weiterhin fuellen. */
  height: 100dvh;
  min-height: 100dvh;
  background: var(--surface);
  color: var(--text);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* --- Kopfleiste ---------------------------------------------------------- */

.vc-shell-header {
  grid-area: header;
  /* Drei Spalten wie im Bestand (AvengersHeader.vue:137-146) — die mittlere
   * Spalte steht dadurch echt mittig, unabhaengig von der Breite der beiden
   * aeusseren. Mit Flexbox sass sie dort, wo die linke Spalte endete; die
   * Area-Auswahl klebte deshalb links neben „Live-Aktualisierung".
   *
   * ACHTUNG, gemessene Falle: dieselbe Leiste wird ZWEIMAL beschrieben — hier
   * ueber die Klasse und in header.css ueber `cw-app-header`. Die Klasse
   * (0,1,0) schlaegt den Elementselektor (0,0,1), unabhaengig von der
   * Ladereihenfolge. Eine Aenderung nur in header.css bleibt also wirkungslos.
   * Beide Stellen muessen uebereinstimmen. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-inline);
  padding: 0 var(--space-pad-control);
  min-height: 48px;
  background: var(--surface-elevated);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  /* Die Kopfleiste bleibt beim Scrollen langer Inhalte stehen. */
  position: sticky;
  top: 0;
  z-index: 20;
}

.vc-shell-title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--control-text);
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
}

.menu-button:hover {
  background: var(--control-bg-hover);
}

/* SPEC-0724 Etappe 3: unter grobem Zeiger 44 px (gemessen waren es 30x30).
 * Etappe 4: Leiste und Dialog-Wirte ketten ihr Scrollen nicht an die Seite —
 * auf iPad zog das Gummiband sonst die ganze Anwendung mit. */
@media (pointer: coarse) {
  .menu-button {
    width: 44px;
    height: 44px;
  }
}

@media (hover: none) {
  .menu-button:hover {
    background: var(--control-bg);
  }
}

:where(.sidebar-panel),
.vc-shell-view,
.vc-shell-overlay,
.vc-shell-content {
  overscroll-behavior: contain;
}

/* --- Sidebar ------------------------------------------------------------- */

:where(.sidebar-panel) {
  grid-area: sidebar;
  justify-self: start;
  display: flex;
  flex-direction: column;
  width: 280px;
  /* Kopfleiste ist 48px hoch; die Sidebar scrollt unabhängig vom Inhalt. */
  max-height: calc(100dvh - 48px);
  min-height: 0;
  padding: var(--space-pad-card);
  background: var(--surface-elevated);
  border-right: 1px solid var(--border);
  overflow: hidden;
}

/* Ist die Sidebar zu (oder von einer Vollbild-View verdrängt), darf der Inhalt
 * die volle Breite nutzen — sonst bliebe die Spalte als Lücke stehen. */
.vc-app-shell:not(:has(.sidebar-panel)) {
  grid-template-columns: 1fr;
  grid-template-areas:
    'header'
    'content';
}

.root-menu-sections::-webkit-scrollbar,
.sidebar-menu-scroll::-webkit-scrollbar {
  width: 8px;
}

.root-menu-sections::-webkit-scrollbar-thumb,
.sidebar-menu-scroll::-webkit-scrollbar-thumb {
  background: var(--border-focus);
  border-radius: 999px;
}

.menu-entry:focus-visible {
  outline: none;
  border-color: var(--border-focus);
}
.menu-entry--active {
  color: var(--text);
  background: var(--menu-entry-active-bg, linear-gradient(180deg, rgba(37, 99, 125, 0.68), rgba(19, 74, 108, 0.58)));
  border-color: var(--menu-entry-active-border, color-mix(in srgb, var(--primary, #38bdf8) 58%, transparent));
}

.menu-entry--active:hover,
.menu-entry.active:hover {
  background: var(--menu-entry-active-bg, linear-gradient(180deg, rgba(37, 99, 125, 0.72), rgba(19, 74, 108, 0.62)));
}
.sidebar-panel--collapsed .submenu-section-title {
  display: none;
}

/* --- Inhaltsbereich ------------------------------------------------------ */

.vc-shell-content {
  grid-area: content;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

/* VOLLFLAECHIG — kein Innenabstand.
 *
 * Bestand (sidebar/MenueSideBar.styles.css:514, `.settings-right-overlay`):
 * `flex: 1 1 0; height: 100%; overflow: hidden` — KEIN padding. Die Maske
 * fuellt die Flaeche neben dem Menuepanel bis an die Kante; ihr Innenabstand
 * ist Sache der Maske, nicht des Hosts.
 *
 * Hier stand zuvor `padding: var(--space-pad-card)` (= --space-5 = 20px). Das
 * war die Ursache des vom Nutzer gemeldeten „nicht mehr vollflaechigen"
 * Aufbaus: JEDE der 177 Masken sass in einem 20-px-Rahmen
 * (docs/BLATTWEISER_ABGLEICH_ERGEBNIS.md §1.2).
 *
 * `overflow: auto` BLEIBT: es traegt zusammen mit der display-Regel weiter
 * unten die Scrollbarkeit der Dialoge (SPEC-0354) und ist vom Innenabstand
 * unabhaengig. */
.vc-shell-view,
.vc-shell-overlay {
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  overflow: auto;
}

/* Der Bestand legt UNS direkt ab der Seitenleiste in den verbleibenden
 * Viewport. (Das fruehere `padding: 0` dieser Regel ist entfallen — ohne
 * Host-Innenabstand gibt es nichts mehr zurueckzunehmen.) */
.vc-app-shell:has(.sidebar-panel--uns) .vc-shell-overlay {
  height: calc(100dvh - 48px);
  max-height: calc(100dvh - 48px);
}

.vc-app-shell:has(.sidebar-panel--uns) .vc-shell-overlay > .isa95-overlay {
  height: 100%;
}

/* Ohne aktive Auswahl ist der Inhaltsbereich leer. Das ist ein gültiger
 * Zustand (Startseite), soll aber nicht wie ein Ladefehler wirken. */
.vc-shell-content:empty::after {
  content: 'Bitte einen Menüpunkt wählen.';
  display: block;
  padding: var(--space-pad-card);
  color: var(--text-muted);
}

/* --- Tablets: die Seitenleiste ueberlagert den Inhalt (SPEC-0724 Etappe 2) --
 *
 * BEFUND (2026-08-20, iPad 834 px hoch, ausgelieferter Stand): die Leiste war
 * bis 721 px herunter eine GRID-SPALTE. Der Benutzerverwaltung blieben
 * 584 px, ihr Inhalt braucht ~760 — Kopfknoepfe und dritte Formularspalte
 * lagen rechts ausserhalb, erreichbar nur ueber einen horizontalen Host-
 * Scroll, den Touch nicht anzeigt. Und jedes Oeffnen legte den gesamten Inhalt
 * samt 3D-Canvas animiert neu (`transition: width` der Leiste) — das vom
 * Betreiber gemeldete „Wackeln".
 *
 * Zwischen 721 und 1199 px liegt die Leiste deshalb ALS UEBERLAGERUNG ueber
 * dem Inhalt, mit Backdrop; ein Tipp daneben schliesst sie (vc-app-shell.js).
 * Vorbild ist `.cp-shell.is-compact` des Control Panels. Ab 1200 px bleibt
 * alles wie bisher — kein Byte dieser Regeln greift dort.
 *
 * SPEZIFITAET, bewusst: `.vc-app-shell > .sidebar-panel` (0,1,1) — nicht
 * `:where(.sidebar-panel)` wie oben. menu-sidebar.css setzt `.sidebar-panel
 * { position: relative; height: 100% }` mit (0,1,0); ein spezifitaetsfreier
 * Selektor verloere `position: fixed` still, und die Leiste bliebe im Fluss.
 *
 * z-index 1000/999: wie `.sidebar-overlay` des Bestands (menu-sidebar.css:18);
 * unter Hilfe (1390), Konto (1400) und Kopf-Aufklappern (3000). */

.vc-shell-backdrop {
  display: none;
}

@media (min-width: 721px) and (max-width: 1199px) {
  .vc-app-shell,
  .vc-app-shell:has(.sidebar-panel) {
    grid-template-columns: 1fr;
    grid-template-areas:
      'header'
      'content';
  }

  .vc-app-shell > .sidebar-panel {
    position: fixed;
    top: 48px;
    left: 0;
    bottom: 0;
    height: auto;
    max-height: none;
    z-index: 1000;
    box-shadow: var(--shadow-overlay, var(--shadow-card));
    overscroll-behavior: contain;
  }

  .vc-app-shell > .vc-shell-backdrop {
    display: block;
    position: fixed;
    inset: 48px 0 0;
    z-index: 999;
    background: color-mix(in srgb, var(--surface-sunken, var(--surface)) 44%, transparent);
    backdrop-filter: blur(2px);
  }
}

/* --- Schmale Viewports --------------------------------------------------- */

@media (max-width: 720px) {
  .vc-app-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      'header'
      'sidebar'
      'content';
  }

  :where(.sidebar-panel) {
    width: auto;
    max-height: 45dvh;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

/* ---------------------------------------------------------------------------
 * Scrollbarkeit der Dialoge (SPEC-0354, Befund 2026-07-30)
 *
 * Custom Elements sind per HTML-Vorgabe `display: inline`. Eine Dialogwurzel
 * ohne eigene display-Regel bildet damit KEINE Blockbox: ihre Hoehe zaehlt
 * fuer keinen Vorfahren, `scrollHeight`/`clientHeight` stehen auf 0, und
 * sobald der Inhalt unter den Rand reicht, merkt niemand, dass gescrollt
 * werden muesste. GEMESSEN an <cw-user-management-overlay> mit 150 Zeilen:
 * `.detail-block` endete bei 1102px in einem 700px hohen Fenster, weder der
 * Host noch das Dokument waren scrollbar — der untere Teil des Dialogs war
 * schlicht unerreichbar.
 *
 * Die Regel trifft NUR die Dialogwurzel (direktes Kind eines Dialog-Hosts),
 * nicht jedes Custom Element: `vc-button`, `vc-pill` & Co. setzen selbst kein
 * `display` und muessen inline bleiben, sonst zerfaellt jede Knopfreihe.
 *
 * `:where()` macht den Selektor spezifitaetsfrei (0,0,0). Jede bestehende
 * Regel — auch ein Tag- oder Klassenselektor — sticht ihn; Dialoge mit
 * eigenem `display: grid/flex` bleiben unveraendert. Die Regel greift also
 * ausschliesslich dort, wo bisher gar nichts gesetzt war.
 *
 * `min-height: 0` gehoert dazu: in Flex-/Grid-Kontexten verhindert die
 * Vorgabe `min-height: auto` sonst genau das Schrumpfen, aus dem der
 * Scrollbereich des Hosts entsteht.
 * ------------------------------------------------------------------------- */
:where(.vc-shell-overlay, .vc-shell-view, .account-right-overlay) > * {
  display: block;
  min-height: 0;
}

/* Kein `.vc-shell-close` mehr: der Schliessen-Knopf auf Shell-Ebene war
 * eine Zutat des Ports. Der Bestand traegt keinen — der Bediener
 * verlaesst eine Maske ueber das Menue. Siehe vc-app-shell.js und
 * docs/BLATTWEISER_ABGLEICH_ERGEBNIS.md §1.1. */