/*
 * Globale Styles der Admin-SPA (Light DOM / Host-Ebene).
 * GlassKit-Klassen wirken nur hier im Light DOM; in den Hybrids-Views (Shadow DOM)
 * werden ausschließlich <glk-*>-Elements + die durchdringenden --gl-*-Tokens genutzt.
 */

/* Reset — sonst weißer Rand um den glass-bg-Aurora-Hintergrund. */
html, body { margin: 0; padding: 0; }
/* dvh statt vh: auf mobilen Browsern wächst/schrumpft der Viewport mit der Adressleiste;
   100vh erzeugt dort einen Überhang, der die Seite unnötig scrollbar macht. */
body { min-height: 100dvh; }

/* Aurora-Hintergrund deckt den ganzen Viewport (glass-bg ist Light DOM). */
.glass-bg { min-height: 100dvh; }

/*
 * Sichere Ränder für die installierte App (iOS-PWA).
 *
 * `viewport-fit=cover` (index.html) legt die Seite unter Dynamic Island, Notch und
 * Home-Indicator — ohne die folgenden Insets verschwindet die Kopfzeile teilweise
 * darunter. Im QUERFORMAT wandert die Aussparung an den seitlichen Rand, deshalb zählen
 * auch left/right; `max()` sorgt dafür, dass am Desktop trotzdem die normalen 16px stehen.
 */
:root {
  --safe-l: max(16px, env(safe-area-inset-left, 0px));
  --safe-r: max(16px, env(safe-area-inset-right, 0px));
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* Eine zentrierte App-Spalte. Voller glass-bg dahinter. */
app-root {
  display: block;
}
.app-col {
  max-width: 640px;
  margin-inline: auto;
  /* unten Platz für die floating Tab-Bar (die selbst schon über dem Home-Indicator sitzt) */
  padding: 24px var(--safe-r) calc(120px + var(--safe-b)) var(--safe-l);
  box-sizing: border-box;
}

/* Kopfzeile (Brand + Theme-Toggle + Logout) — persistentes Chrome. */
.app-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 640px;
  margin: 0 auto 8px;
  padding: calc(16px + var(--safe-t)) var(--safe-r) 0 var(--safe-l);
  box-sizing: border-box;
}
.app-head__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--gl-color-text-heading);
  text-decoration: none;
}
/* App-Icon statt Text-Badge. Die Rundung liegt schon im SVG; border-radius hält sie,
   falls hier später ein quadratisches PNG steht. */
.app-head__logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: block;
  flex: 0 0 auto;
}
.app-head__actions { display: flex; gap: 8px; align-items: center; }

/* Tab-Bar-Icons (Light DOM). */
app-tabbar .glass-tab-bar__icon svg { width: 22px; height: 22px; }

/* Floating Tab-Bar global positionieren (Host im Light DOM). */
/*
 * Zentriert per Flexbox statt `left:50% + translateX(-50%)`: Ein `transform` erzeugt einen
 * eigenen Stacking-Context und isoliert damit den Hintergrund, den das `backdrop-filter`
 * der Tab-Bar filtern soll — der Blur hätte dann nur noch den (leeren) Inhalt dieses
 * Kontexts zu verwischen. Ohne transform greift er wieder auf die Seite dahinter.
 * `pointer-events` hält die Fläche links und rechts der Bar klickbar.
 */
app-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(16px + var(--safe-b));
  z-index: 50;
  display: flex;
  justify-content: center;
  /* Querformat: die Leiste darf nicht unter die seitliche Aussparung geraten. */
  padding-inline: var(--safe-l) var(--safe-r);
  box-sizing: border-box;
  pointer-events: none;
}
app-tabbar > * { pointer-events: auto; }

/*
 * Farbgebung der Tab-Bar: BEWUSST keine eigene — es gelten die GlassKit-Werte
 * (--gl-surface-3 → --gl-surface-1, --gl-border-subtle), damit sie exakt aussieht wie im
 * Showcase des Design-Systems.
 *
 * Was hier lange fehlte, war nicht Farbe, sondern der Blur: Sowohl das frühere
 * `transform: translateX(-50%)` als auch ein `view-transition-name` auf dem Host isolieren
 * das Element, und dann hat GlassKits `backdrop-filter` nichts mehr zu filtern. Beides ist
 * oben entfernt — seitdem trägt die Bar mit den Original-Werten.
 */

/* Stat-Cards: gestapelt, ab 520px nebeneinander. */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 520px) {
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- View Transitions ---- */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(view-content),
  ::view-transition-new(view-content) {
    animation-duration: 0.22s;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}
/* Persistentes Chrome bekommt stabile Namen → wird nicht überblendet. */
.app-head { view-transition-name: app-head; }
/*
 * Die Tab-Bar bekommt BEWUSST keinen view-transition-name: Der Name isoliert das Element,
 * und damit hat das `backdrop-filter` unten nichts mehr zu filtern (headless in Chrome
 * verifiziert — mit Namen kein Blur, ohne Namen sichtbar). Der Verlust ist gering: Die Bar
 * sieht über alle Views gleich aus, ein Cross-Fade zwischen identischen Zuständen fällt
 * nicht auf; nur der aktive Reiter blendet jetzt weich statt hart um.
 */
/* Der wechselnde Inhalt. */
.app-col { view-transition-name: view-content; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}