/* ============================================================
   SKRYPT — Shared Design Tokens (Hub + Admin-Panel)
   Single Source of Truth. Hier ändern → überall wirksam.
   ============================================================ */

:root {
  /* Browser-Widgets (native Dropdowns, Datepicker, Scrollbars,
     Context-Menus) in Dark Mode rendern lassen — Chrome/Edge/Safari
     respektieren color-scheme automatisch. */
  color-scheme: dark;

  /* Surfaces */
  --bg:        #080c14;
  --surface:   #0d1220;
  --surface2:  #131929;
  --surface3:  #192038;

  /* Borders */
  --border:     rgba(100,140,220,0.10);
  --border-mid: rgba(100,140,220,0.16);
  --border-hi:  rgba(100,140,220,0.28);

  /* Accents */
  --accent:  #6c9ef8;
  --accent2: #a78bfa;
  --green:   #4ade80;
  --red:     #f87171;
  --amber:   #fbbf24;

  /* Text */
  --text:  #e8eef8;
  --text2: #7a8aaa;
  --text3: #3a4460;

  /* Glows */
  --glow-accent: 0 0 24px rgba(108,158,248,0.18);
  --glow-green:  0 0 8px rgba(74,222,128,0.5);

  /* Fonts */
  --font-body: 'Cabinet Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Layout */
  --topbar-h: 64px;
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 0px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

body::before, body::after {
  content: ''; position: fixed; border-radius: 50%; pointer-events: none; z-index: 0;
}
body::before {
  top: -15%; left: -10%; width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(108,158,248,0.05) 0%, transparent 65%);
}
body::after {
  bottom: -10%; right: -5%; width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(167,139,250,0.05) 0%, transparent 65%);
}

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

/* ── Dark-Scrollbar — global fuer Hub + Landing ───────────────────────────
   Firefox: scrollbar-width + scrollbar-color (Standard).
   Chromium/WebKit: ::-webkit-scrollbar Pseudo-Klassen.
   Ziel: transparenter Track, accent-Thumb der beim Hover staerker leuchtet. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(108, 158, 248, 0.25) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: rgba(13, 18, 32, 0.4);
}
*::-webkit-scrollbar-thumb {
  background: rgba(108, 158, 248, 0.18);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 10px;
  transition: background 0.15s;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(108, 158, 248, 0.45);
  background-clip: padding-box;
}
*::-webkit-scrollbar-corner { background: transparent; }

/* ── Native Form-Widgets im Dark-Mode ─────────────────────────────────────
   select-Trigger bekommt einen eigenen Chevron + Surface-Farben.
   Das Popup (offene Dropdown-Liste) ist OS-gerendert — color-scheme:dark
   auf :root kuemmert sich um Chrome/Edge/Safari, option-Styles decken
   Firefox ab. Weitere Elemente (input, textarea) bleiben Page-spezifisch,
   damit die lokalen .bh-input / .bh-textarea Klassen nicht kollidieren. */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--surface2);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  padding: 9px 36px 9px 12px;
  cursor: pointer;
  outline: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a8aaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color .15s, background-color .15s;
}
select:hover { border-color: var(--border-hi); }
select:focus {
  border-color: var(--accent);
  background-color: rgba(108, 158, 248, 0.04);
}
select:disabled {
  opacity: 0.55; cursor: not-allowed;
}
/* Firefox: option-Hintergrund wird respektiert. Chrome/Safari nutzen
   System-Theme dank color-scheme:dark — hier harmlos als Fallback. */
select option {
  background-color: var(--surface);
  color: var(--text);
}
select option:checked {
  background: linear-gradient(0deg, rgba(108,158,248,0.25), rgba(108,158,248,0.25));
  color: var(--text);
}