/* ════════════════════════════════════════════════════════════════════
   iskobonus — Theme  (echtes tweakcn "Twitter"-Theme, via shadcn-Registry)
     npx shadcn@latest add https://tweakcn.com/r/themes/cmlznk552000004jubsv77roj
   Dark-only · EINZIGE Farbquelle der Seite (realbazzi-:root wurde entfernt).
   Alle Legacy-Variablen mappen auf ECHTE Theme-Tokens — keine erfundenen Töne.
   ════════════════════════════════════════════════════════════════════ */

:root { color-scheme: dark; }

:root,
.dark {
  /* ── Twitter-Theme Tokens (dark) — 1:1 aus der Registry ── */
  --background: hsl(228 9.8039% 10%);     /* Page-BG (Slate) — vom User vorgegeben */
  --foreground: oklch(0.9328 0.0025 228.7857);
  --card: rgba(255,255,255,.04);          /* dezenter 4%-Weiß-Overlay über dem Page-BG */
  --card-foreground: oklch(0.8853 0 0);
  --popover: hsl(228 11% 6.5%);
  --popover-foreground: oklch(0.9328 0.0025 228.7857);
  --primary: oklch(0.6692 0.1607 245.0110);
  --primary-foreground: oklch(1.0000 0 0);
  --secondary: oklch(0.9622 0.0035 219.5331);
  --secondary-foreground: oklch(0.1884 0.0128 248.5103);
  --muted: oklch(0.2090 0 0);
  --muted-foreground: oklch(0.5637 0.0078 247.9662);
  --accent: oklch(0.1928 0.0331 242.5459);
  --accent-foreground: oklch(0.6692 0.1607 245.0110);
  --destructive: oklch(0.6188 0.2376 25.7658);
  --destructive-foreground: oklch(1.0000 0 0);
  --border: oklch(0.2674 0.0047 248.0045);
  --input: oklch(0.3020 0.0288 244.8244);
  --ring: oklch(0.6818 0.1584 243.3540);
  --chart-1: oklch(0.6723 0.1606 244.9955);
  --chart-2: oklch(0.6907 0.1554 160.3454);
  --chart-3: oklch(0.8214 0.1600 82.5337);
  --chart-4: oklch(0.7064 0.1822 151.7125);
  --chart-5: oklch(0.5919 0.2186 10.5826);
  --radius: 1.3rem;
  --sidebar: #202127;                    /* Solide Version von rgba(255,255,255,.04) über dem Page-BG — nicht durchsichtig (Sidebar/Topbar haben scrollenden Inhalt dahinter) */
  --sidebar-foreground: oklch(0.8853 0 0);
  --sidebar-primary: oklch(0.6818 0.1584 243.3540);
  --sidebar-primary-foreground: oklch(1.0000 0 0);
  --sidebar-accent: oklch(0.1928 0.0331 242.5459);
  --sidebar-accent-foreground: oklch(0.6692 0.1607 245.0110);
  --sidebar-border: oklch(0.3795 0.0220 240.5943);
  --sidebar-ring: oklch(0.6818 0.1584 243.3540);

  /* Schatten — Theme ist bewusst flach (alpha 0 = praktisch unsichtbar) */
  --shadow-2xs: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00);
  --shadow-xs:  0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00);
  --shadow-sm:  0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
  --shadow:     0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
  --shadow-md:  0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 2px 4px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
  --shadow-lg:  0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 4px 6px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
  --shadow-xl:  0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 8px 10px -1px hsl(202.8169 89.1213% 53.1373% / 0.00);
  --shadow-2xl: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00);

  /* ── Legacy-iskobonus-Variablen → AUSSCHLIESSLICH echte Theme-Tokens ──
     Damit ist alles einheitlich. "Gold"-Akzente werden zu Primary (blau),
     da das Theme monochrom-blau ist (chart-Farben sind nur für Diagramme). */
  --bg:    var(--background);
  --bg1:   var(--card);
  --bg2:   var(--card);
  --bg3:   var(--input);
  --bg4:   var(--input);
  --blu:   var(--primary);
  --blu2:  var(--ring);
  --blu3:  var(--primary);
  --gold:  var(--primary);
  --gold2: var(--ring);
  --gold3: var(--primary);
  --text:  var(--foreground);
  --sub:   var(--muted-foreground);
  --sub2:  var(--muted-foreground);
  --twitch:#9146ff;
  --green: var(--chart-4);
  --red:   var(--destructive);
  --yellow:var(--chart-3);
  --orange:var(--chart-3);

  --font-sans: 'Open Sans', 'Sora', sans-serif;

  --r-sm: calc(var(--radius) * 0.5);   /* ~10px  Controls */
  --r-md: calc(var(--radius) * 0.7);   /* ~15px  Buttons/Chips */
  --r-lg: var(--radius);               /*  21px  Cards/Panels */

  /* Sidebar-Breiten (vormals in realbazzi-:root) */
  --sb-w: 240px;
  --sb-w-collapsed: 82px;
}

/* ════════════════════ @layer base (shadcn-Konvention) ════════════════════ */
* { border-color: var(--border); }
body { background: var(--background); color: var(--foreground); letter-spacing: -0.01em; }
*:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ════════════════════ tweakcn Komponenten-Layer (site-weit) ════════════════════ */
body, button, input, select, textarea, a { font-family: var(--font-sans); }
h1, h2, h3, .hero-title, .section-title-txt { letter-spacing: -0.02em; }

/* Primitives */
.card, .panel, .tile, .box, .modal, .dialog,
.dropdown, .menu, .popover {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: none;
}

/* Buttons */
button, .btn, .button { border-radius: var(--r-md); }
.tb-btn-primary, .btn-primary {
  background: var(--primary) !important; color: var(--primary-foreground) !important;
  border: none; border-radius: var(--r-md); box-shadow: none; font-weight: 700;
}
.tb-btn-primary:hover, .btn-primary:hover {
  background: color-mix(in oklab, var(--primary) 88%, white); transform: none;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 22%, transparent);
}
.tb-btn-ghost, .btn-ghost {
  background: var(--card); border: 1px solid var(--border);
  color: var(--foreground); border-radius: var(--r-md);
}
.tb-btn-ghost:hover, .btn-ghost:hover { background: var(--accent); border-color: var(--primary); }

/* Inputs */
input, select, textarea {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--foreground);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 22%, transparent);
}

/* Sidebar */
.sidebar { background: var(--sidebar); border-right: 1px solid var(--sidebar-border); backdrop-filter: none; }
.sb-logo { border-bottom: 1px solid var(--sidebar-border); min-height: 60px; height: 60px; }   /* gleiche Höhe wie die Topbar → Trennstriche fluchten */
.sb-link { border-radius: var(--r-md); color: var(--muted-foreground); }
.sb-link:hover { background: var(--accent); color: var(--foreground); }
.sb-link.active {
  background: none;        /* kein Background — nur Icon + Schrift highlighten */
  color: var(--primary);
  border: none;
  box-shadow: none;
  font-weight: 700;
}
.sb-link.active i { color: var(--primary); }   /* Icon highlighten */
.sb-section-label { color: var(--muted-foreground); }
.sb-toggle-btn { border-top: 1px solid var(--sidebar-border); border-radius: 0; }

/* Topbar / Mobile-Header */
.topbar { background: color-mix(in oklab, var(--background) 78%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: blur(14px); }
.mobile-header { background: var(--sidebar); border-bottom: 1px solid var(--sidebar-border); }
.mobile-menu-btn { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--muted-foreground); }
.mobile-menu-btn:hover { border-color: var(--primary); color: var(--foreground); }

/* Scrollbar */
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }

/* Deko-Orbs komplett weg — tweakcn ist flaches Schwarz, keine Farbkleckse.
   (Die blau/gold/lila Blur-Orbs tönten den BG + Sidebar ungleichmäßig.) */
.orbs-bg, .orb { display: none !important; }

/* ════════════════════ Text-Logo ════════════════════ */
.sb-logo { gap: 11px; }
.sb-logo-mark, .mobile-logo .sb-logo-mark {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--sidebar-primary));
  color: #fff; font-weight: 900; line-height: 1; font-family: 'Open Sans', sans-serif;
}
.sb-logo-mark { width: 40px; height: 40px; border-radius: 13px; font-size: 24px; }
.sb-logo-text { font-size: 21px; font-weight: 800; letter-spacing: -.03em; color: var(--foreground); white-space: nowrap; }
.sb-logo-accent { color: var(--primary); }
.sidebar.collapsed .sb-logo-text { opacity: 0; width: 0; }
.sidebar.collapsed:hover .sb-logo-text { opacity: 1; width: auto; }
.mobile-logo { display: inline-flex; align-items: center; gap: 9px; }
.mobile-logo .sb-logo-mark { width: 32px; height: 32px; font-size: 19px; border-radius: 10px; }
.mobile-logo-text { font-size: 18px; font-weight: 800; letter-spacing: -.03em; color: var(--foreground); }