/* ═══════════════════════════════════════════════════════════════
   Jemke Portal — Unified Design Layer
   Sattelt auf portal-manual.css / portal-shell.css auf.
   Regelt: Farben (Dark+Light), konsistente Nav, Lesbarkeit.
   ═══════════════════════════════════════════════════════════════ */

/* ── Design Tokens ────────────────────────────────────────── */
:root {
  --pu-accent:     #6366f1;        /* Indigo = Portal-Akzent */
  --pu-accent-g:   #10b981;        /* Grün = Care/Akademie-Akzent */
  --pu-radius:     14px;
  --pu-sidebar-w:  238px;

  /* Light-Mode Farben */
  --pu-bg:         #f4f6fb;
  --pu-surface:    rgba(255,255,255,.88);
  --pu-surface-2:  rgba(255,255,255,.62);
  --pu-ink:        #111827;
  --pu-ink-2:      #374151;
  --pu-muted:      #64748b;
  --pu-line:       rgba(15,23,42,.1);
  --pu-shadow:     0 4px 24px rgba(15,23,42,.1);
  --pu-sidebar-bg: rgba(255,255,255,.9);
  --pu-topbar-bg:  rgba(255,255,255,.88);
}

html[data-theme="dark"] {
  --pu-bg:         #070b11;
  --pu-surface:    rgba(18,24,38,.82);
  --pu-surface-2:  rgba(18,24,38,.55);
  --pu-ink:        #e5e7eb;
  --pu-ink-2:      #9ca3af;
  --pu-muted:      rgba(226,232,240,.52);
  --pu-line:       rgba(255,255,255,.09);
  --pu-shadow:     0 4px 28px rgba(0,0,0,.38);
  --pu-sidebar-bg: rgba(10,14,22,.9);
  --pu-topbar-bg:  rgba(8,12,20,.9);
}

/* ── Login/Konto-Index Seiten (kp-* Klassen) ──────────────── */
/* Fix: --fg war im Light Mode nie definiert → Headline unsichtbar */
html[data-theme="light"] {
  --fg:  #111827;
  --fg2: #374151;
  --bg:  #f4f6fb;
}
html[data-theme="dark"] {
  --fg:  #e5e7eb;
  --fg2: #9ca3af;
  --bg:  #070b11;
}

/* Login-Karte */
.kp-card {
  background: var(--pu-surface) !important;
  border: 1px solid var(--pu-line) !important;
  box-shadow: var(--pu-shadow) !important;
  color: var(--pu-ink) !important;
}
.kp-h1 {
  color: var(--pu-ink) !important;
}
.kp-logo-text {
  color: var(--pu-ink) !important;
}
.kp-sub {
  color: var(--pu-muted) !important;
}
.kp-label {
  color: var(--pu-ink-2) !important;
}
.kp-input {
  background: var(--pu-surface-2) !important;
  border-color: var(--pu-line) !important;
  color: var(--pu-ink) !important;
}
.kp-input::placeholder {
  color: var(--pu-muted) !important;
}
.kp-feature, .kp-back {
  color: var(--pu-muted) !important;
}

/* Login-Seite Body-Hintergrund */
html[data-theme="light"] body:not(.portal-app-page) {
  background: linear-gradient(135deg, #f4f6fb, #eaf0f8) !important;
  color: var(--pu-ink) !important;
}

/* ── Portal Topbar ─────────────────────────────────────────── */
.portal-topbar {
  background: var(--pu-topbar-bg) !important;
  border-bottom: 1px solid var(--pu-line) !important;
  backdrop-filter: blur(18px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
  box-shadow: 0 1px 12px rgba(15,23,42,.07) !important;
}
html[data-theme="dark"] .portal-topbar {
  box-shadow: 0 1px 16px rgba(0,0,0,.3) !important;
}
/* Logo-Text in Topbar */
.portal-topbar__logo {
  font-family: var(--font-heading, 'Space Grotesk', sans-serif) !important;
  font-weight: 800 !important;
  color: var(--pu-ink) !important;
  text-decoration: none !important;
}
.portal-topbar__logo em {
  color: var(--pu-accent) !important;
}
/* Burger */
.portal-topbar__burger {
  color: var(--pu-ink) !important;
}
/* Theme-Button */
.portal-theme-btn {
  color: var(--pu-muted) !important;
  background: transparent !important;
  border: 1px solid var(--pu-line) !important;
  border-radius: 10px !important;
}
.portal-theme-btn:hover {
  background: var(--pu-surface-2) !important;
  color: var(--pu-ink) !important;
}

/* ── Sidebar ───────────────────────────────────────────────── */
.portal-sidebar {
  background: var(--pu-sidebar-bg) !important;
  border-right: 1px solid var(--pu-line) !important;
  backdrop-filter: blur(22px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.4) !important;
}

/* Sidebar-Head (Logo-Bereich) */
.portal-sidebar__head {
  border-bottom: 1px solid var(--pu-line) !important;
}
.portal-sidebar__logo-text,
.portal-sidebar__logo-name {
  color: var(--pu-ink) !important;
  font-weight: 800 !important;
}

/* Sidebar Gruppen-Labels */
.portal-sidebar__group-label {
  color: var(--pu-muted) !important;
  font-size: .65rem !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

/* Sidebar Links */
.portal-sidebar__link {
  color: var(--pu-ink-2) !important;
  border-radius: 10px !important;
  transition: background .15s, color .15s !important;
}
.portal-sidebar__link:hover {
  background: rgba(99,102,241,.1) !important;
  color: var(--pu-accent) !important;
}
.portal-sidebar__link.is-active {
  background: rgba(99,102,241,.14) !important;
  color: var(--pu-accent) !important;
  font-weight: 700 !important;
}
html[data-theme="dark"] .portal-sidebar__link.is-active {
  background: rgba(99,102,241,.18) !important;
}

/* ── Cards / Panels ────────────────────────────────────────── */
.portal-card,
.portal-panel,
[class*="portal-card"],
[class*="portal-panel"] {
  background: var(--pu-surface) !important;
  border: 1px solid var(--pu-line) !important;
  border-radius: var(--pu-radius) !important;
  color: var(--pu-ink) !important;
}

/* ── Content-Text ──────────────────────────────────────────── */
.portal-content h1,
.portal-content h2,
.portal-content h3,
[class*="portal-"] h1,
[class*="portal-"] h2 {
  color: var(--pu-ink) !important;
}
.portal-section-title {
  color: var(--pu-ink) !important;
}
.portal-muted {
  color: var(--pu-muted) !important;
}

/* ── Mobile Bottombar ──────────────────────────────────────── */
.portal-bottombar,
.portal-mobile-nav {
  background: var(--pu-topbar-bg) !important;
  border-top: 1px solid var(--pu-line) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}
.portal-bottombar__item,
.portal-mobile-nav__item {
  color: var(--pu-muted) !important;
}
.portal-bottombar__item.is-active,
.portal-mobile-nav__item.is-active {
  color: var(--pu-accent) !important;
}

/* ── Light Mode: Sidebar aktiv stärker abgrenzen ─────────── */
html[data-theme="light"] .portal-sidebar__link.is-active {
  box-shadow: inset 3px 0 0 var(--pu-accent) !important;
}

/* ── Body background für Portal-Shell-Seiten ──────────────── */
html[data-theme="light"] body.portal-app-page {
  background:
    radial-gradient(circle at 12% 12%, rgba(99,102,241,.08), transparent 36rem),
    radial-gradient(circle at 84% 6%, rgba(16,185,129,.07), transparent 32rem),
    linear-gradient(135deg, #f4f6fb, #eaf0f8) !important;
  color: var(--pu-ink) !important;
}
html[data-theme="dark"] body.portal-app-page {
  background:
    radial-gradient(circle at 12% 12%, rgba(99,102,241,.12), transparent 36rem),
    radial-gradient(circle at 84% 6%, rgba(16,185,129,.09), transparent 32rem),
    linear-gradient(135deg, #070b11, #0a0f18) !important;
  color: var(--pu-ink) !important;
}