/*
  Grundlayout: Reset, Typografie, Seitenraster (Sidebar-Nav + Inhalt).
  Baut auf tokens.css auf.
*/
* { box-sizing: border-box; margin: 0; padding: 0; }

html { color-scheme: dark; overflow-x: hidden; }

/* TALVAXO UX/Performance Update (Mandat Teil C, "subtle page transition, 120-220ms, kein Blank
   Screen, opacity/transform, keine teuren Layout-Animationen") — diese App ist eine klassische
   Multi-Page-App (jeder Sidebar-Klick ist eine echte Seiten-Navigation, kein SPA-Routing). Ein
   handgebauter Fade mit JavaScript kann eine harte Dokumentnavigation strukturell nicht sauber
   ueberbruecken (die JS-Ausfuehrung stoppt zwischen den Seiten) — die native Cross-Document View
   Transitions API (Chrome/Edge, hier ueber Chrome 148 bestaetigt verfuegbar) ist genau dafuer
   gebaut: die alte Seite bleibt sichtbar und blendet in die neue ueber, kein Blank Screen, reine
   Compositor-Animation (opacity), keine teure Layout-Neuberechnung. Deaktiviert unter
   reduced-motion, dann normale, sofortige Navigation ohne jede Animation. */
@media not (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: auto;
  }
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 160ms;
  animation-timing-function: ease;
}

body {
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 900px 500px at 15% -10%, var(--bg-glow-1), transparent),
    radial-gradient(ellipse 900px 500px at 90% 0%, var(--bg-glow-2), transparent);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

/* Nutzeranweisung ("Wellen-Hintergrund auch im Dashboard, nicht nur Login"): .app-shell traegt
   den Hauptinhalt ueber der fixierten #wave-canvas-Ebene (siehe .wave-bg unten) — dieselbe
   position:relative/z-index:1-ueber-fixiertem-Canvas-Technik wie login.css .login-layout.

   Beta 10.0 FINAL CLOSURE PASS (echter, per Nutzer-Video reproduzierter Bug — siehe pages/*.html
   Kommentar bei #app-nav-slot fuer die volle Herleitung): .app-shell traegt NICHT MEHR die Sidebar
   (#app-nav-slot/.app-nav sind jetzt ein Geschwister-Element in jeder pages/*.html-Datei, ausserhalb
   von .app-shell) — position:relative + z-index:1 spannt einen eigenen Stacking-Context auf, der
   JEDEN z-index-Wert eines Kindelements (egal wie hoch lokal gesetzt) auf diese Ebene deckelt. Die
   waehrend des Ladens auf z-index:100 geboostete Welle (page-loader.css) konnte dadurch die Sidebar
   trotz deren eigenem hoeherem z-index ueberdecken, solange die Sidebar noch ein Kind von .app-shell
   war. .app-shell traegt jetzt nur noch .app-main — nur EIN Grid-Track statt zwei, die Sidebar ist
   jetzt durchgehend position:fixed (siehe components.css .app-nav) und reserviert ihren Platz nicht
   mehr ueber eine Grid-Spalte, sondern ueber .app-shell's eigenes linkes Padding (siehe unten) — die
   bestehende margin:0 auto-Zentrierung von .app-main (siehe dort) zentriert dadurch weiterhin
   korrekt INNERHALB des um --nav-width verkleinerten Bereichs, unveraendert gegenueber vorher. */
.app-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  padding-left: var(--nav-width);
  min-height: 100vh;
  align-items: start;
}

.app-main {
  padding: 28px 32px 80px 32px;
  max-width: var(--content-max);
  width: 100%;
  /* Bugfix (V5.4, gefunden bei responsivem Screenshot-QA bei 1024px): CSS-Grid-Tracks mit `1fr`
     haben per Spezifikation `min-width: auto`, schrumpfen also NICHT unter den Min-Content ihrer
     Kinder — genügend breiter innerer Inhalt (z.B. eine 7-spaltige Metric-Tile-Zeile) sprengte
     dadurch die gesamte Seite horizontal statt intern zu umbrechen. `min-width: 0` erlaubt dem
     Grid-Track, tatsächlich auf die verfügbare Breite zu schrumpfen. */
  min-width: 0;
  /* Nutzeranweisung ("Dashboard auf Desktop immer mittig vom Bildschirm zentrieren"): .app-main
     ist ueber max-width bereits nach oben begrenzt (siehe --content-max, bis zu 1520px) — ohne
     Auto-Margin landete der gesamte ungenutzte Freiraum auf sehr breiten Bildschirmen einseitig
     rechts (die Box haengt links an der Grid-Spalte, die direkt auf die feste Sidebar folgt).
     margin:0 auto zentriert die Box innerhalb ihrer Grid-Spalte, sobald width < verfuegbare
     Spaltenbreite ist (unterhalb des Breakpoints, wo die Box ohnehin volle Breite hat, ist auto
     hier wirkungslos). */
  margin: 0 auto;
}

/* ===== Wellen-Hintergrund (TalvaxoWaveField, dieselbe Canvas-Engine wie Login — siehe
   assets/js/wave-canvas-engine.js und die Moduldoku dort). Fixierte Vollbild-Ebene HINTER
   .app-shell (siehe dessen z-index:1 oben) — bleibt beim Scrollen der Dashboard-Seiten stehen,
   genau wie auf der Login-Seite. Karten/Sidebar haben eigene deckende Hintergrundflaechen
   (--surface-card/.app-nav-Gradient) und verdecken die Welle dort automatisch; sichtbar bleibt
   sie in den Zwischenraeumen/Randflaechen der Seite. ===== */
.wave-bg {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; display: block;
}

/* Nutzeranweisung ("Partikeleffekte von der Login-Welle auch im Dashboard"): identische Regel wie
   .wave-particles-bg in login.css — im HTML NACH #wave-canvas platziert, beide z-index:0, malt per
   Tree-Order oben drauf (Partikel sichtbar VOR der Welle, nicht dahinter versteckt), weiterhin
   unter .app-shell (z-index:1). */
.wave-particles-bg {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; display: block;
}

/* ===== Seitenkopf ===== */
.page-head { margin-bottom: 24px; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.eyebrow::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 8px var(--teal);
  display: inline-block;
}
h1.title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.subtitle { color: var(--text-muted); font-size: 14.5px; }

/* ===== Section headers (aus Originaldashboard) ===== */
section { margin-bottom: 44px; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 18px; gap: 16px; flex-wrap: wrap;
}
.section-head h2 {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
}
/* Beta 7.7 (Punkt 81-83, "Keine 01/02/03 als Standard-Section-Style"): wirkte auf normalen
   Nutzerseiten zu sehr wie interne Entwickler-Nummerierung statt fertiger Produkt-UI — Section-
   Überschriften stehen jetzt ohne Zahlenpräfix (siehe .section-head h2, unverändert normale
   Typografie). Markup bleibt unverändert (kein Umbau von 11 Seiten-Skripten nötig), das Element
   wird nur nicht mehr angezeigt. */
.section-num { display: none; }
.section-desc { color: var(--text-muted); font-size: 13px; }

footer.page-footer {
  text-align: left; color: var(--text-dim); font-size: 12px; padding-top: 24px;
  font-family: var(--font-mono);
}

@media (max-width: 900px) {
  /* Sidebar ist hier off-canvas (siehe components.css .app-nav) — kein reservierter Platz mehr noetig. */
  .app-shell { padding-left: 0; }
  /* V7.1 (Mandat Teil I, Punkt 51/55): padding-top erhöht, damit der neue fixierte Hamburger-Button
     (42px + 14px Abstand, siehe components.css .nav-hamburger) den Seiteninhalt (z.B. die System-
     Health-Zeile) nicht mehr überlagert — real im ersten Screenshot nach der Umstellung gefunden
     ("GARMIN VERBUNDEN" teilweise vom Button verdeckt). */
  .app-main { padding: 68px 16px 64px 16px; }
}