/* SP500 Cockpit – Design-System „Nordlicht" (Variante B, freigegeben 17.07.2026)
   Token-Quelle: mockups/variante-b-nordlicht.html
   Die Alias-Brücke unten hält die portierten Stylesheets (map.css/earnings.css)
   ohne Massen-Umbenennung lauffähig. */

:root {
  /* ---- Gründe: tiefes Blauschwarz ---------------------------------- */
  --bg:            #0d1220;
  --bg-deep:       #080c15;
  --surface:       #131a2a;
  --surface-2:     #1a2338;
  --surface-3:     #212d46;
  --border:        #25314a;
  --hair:          rgba(255,255,255,.06);

  /* ---- Tinte / Text ------------------------------------------------ */
  --ink:           #eaf0fb;
  --ink-2:         #aab6d1;
  --muted:         #7183a3;

  /* ---- Akzent: Eisblau --------------------------------------------- */
  --accent:        #5b96ff;
  --accent-2:      #8fb8ff;
  --accent-soft:   rgba(91,150,255,.13);

  /* ---- Puls-Glow (Signatur, neutral zu Rot/Grün) ------------------- */
  --glow:          125, 211, 252;

  /* ---- Warnung / Earnings-Marker ----------------------------------- */
  --warn:          #ffb454;
  --warn-soft:     rgba(255,180,84,.15);

  /* ---- FESTE Datenfarben (plattformweit identisch) ------------------ */
  --pos:           #30cc5a;
  --neg:           #f63538;
  --neutral:       #414554;

  /* ---- Elevation ---------------------------------------------------- */
  --shadow-1: 0 1px 0 var(--hair) inset, 0 4px 14px rgba(0,0,0,.35);
  --shadow-2: 0 1px 0 var(--hair) inset, 0 18px 50px rgba(0,0,0,.55);
  --ring-glow: 0 0 0 1px rgba(var(--glow),.45), 0 0 22px -3px rgba(var(--glow),.5);

  /* ---- Form ---------------------------------------------------------- */
  --r-sm: 8px;  --r: 12px;  --r-lg: 14px;
  --maxw: 1360px;

  /* ---- Typografie ---------------------------------------------------- */
  --font-ui:  "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-num: "Spline Sans Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- Alias-Brücke für portierte Stylesheets ------------------------ */
  --panel:  var(--surface);      /* volume-map + earnings */
  --panel2: var(--surface-2);    /* earnings */
  --line:   var(--border);       /* earnings */
  --text:   var(--ink);          /* earnings nutzt --text */
  --accent2:var(--accent-2);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background:
    radial-gradient(1100px 700px at 75% -10%, rgba(91,150,255,.07), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(125,211,252,.05), transparent 55%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  min-height: 100vh;
}

/* ---------- Plattform-Shell: Header ---------- */
.shell-header {
  display: flex; align-items: center; gap: 18px;
  padding: 10px 18px;
  background: rgba(13,18,32,.88);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(8px);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 17px; letter-spacing: .2px;
  white-space: nowrap;
}
.brand .dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #cfe9ff, var(--accent));
  box-shadow: 0 0 10px rgba(var(--glow),.7);
}
.brand em { color: var(--accent-2); font-style: normal; }
.brand-logo { height: 30px; width: auto; display: block; }

.nav-tabs {
  display: flex; gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px; padding: 3px;
}
.nav-tabs button {
  border: 0; background: transparent; color: var(--ink-2);
  font: inherit; font-weight: 600; cursor: pointer;
  padding: 7px 16px; border-radius: 999px;
}
.nav-tabs button[aria-selected="true"] {
  background: var(--surface-3); color: var(--ink);
  box-shadow: var(--ring-glow);
}

.shell-spacer { flex: 1; }

.market-chip {
  display: flex; align-items: center; gap: 14px;
  font-size: 12px; color: var(--muted); white-space: nowrap;
}
.market-chip .vol { color: var(--ink); font-family: var(--font-num); font-size: 14px; }
.market-chip .state {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 12px; color: var(--ink-2);
}
.market-chip .state i {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block;
  background: var(--muted);
}
.market-chip .state.open i { background: var(--pos); box-shadow: 0 0 8px rgba(48,204,90,.8); }

/* ---------- Views ---------- */
.view { max-width: none; }
.view[hidden] { display: none !important; }

/* ---------- Globaler Finder ---------- */
.finder { position: relative; width: 320px; }
.finder input {
  width: 100%; padding: 8px 14px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border); border-radius: 999px;
  font: inherit; outline: none;
}
.finder input:focus { box-shadow: var(--ring-glow); border-color: transparent; }
#finder-list {
  position: absolute; top: calc(100% + 6px); left: 0;
  width: 460px; max-width: 70vw; z-index: 60;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow-2);
  overflow: hidden; padding: 4px;
}
.f-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer;
}
.f-row.active, .f-row:hover { background: var(--surface-3); }
.f-row > b { font-family: var(--font-num); min-width: 52px; }
.f-name { color: var(--ink-2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-badge {
  font-size: 11px; font-weight: 600; color: var(--warn);
  background: var(--warn-soft); border-radius: 999px; padding: 2px 8px;
  white-space: nowrap;
}
.f-cp { font-family: var(--font-num); font-size: 12px; min-width: 64px; text-align: right; }
.f-go { display: flex; gap: 4px; }
.f-go button {
  border: 1px solid var(--border); background: var(--surface);
  color: var(--ink-2); font-size: 11px; border-radius: 999px;
  padding: 3px 9px; cursor: pointer;
}
.f-go button:hover { color: var(--ink); border-color: var(--accent); }

/* ---------- Onboarding-Tour ---------- */
#tour-btn {
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: #fff; /* weiss statt muted — besser sichtbar (Daniel) */
  font: 600 14px/1 var(--font-ui);
  cursor: pointer;
}
#tour-btn:hover { color: var(--ink); box-shadow: var(--ring-glow); }
#tour-ov { position: fixed; inset: 0; z-index: 89; } /* blockt Klicks waehrend der Tour */
#tour-spot {
  position: fixed; z-index: 90;
  border-radius: 10px;
  pointer-events: none;
  /* Spotlight: riesiger Schatten dunkelt alles ausser dem Ziel ab */
  box-shadow: 0 0 0 200vmax rgba(8, 12, 21, .55), var(--ring-glow);
  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
}
#tour-bubble {
  position: fixed; z-index: 91;
  width: 330px; max-width: calc(100vw - 16px);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-2);
  padding: 14px 16px;
}
#tour-bubble h4 { margin: 0 0 6px; font-size: 14px; }
#tour-bubble p { margin: 0 0 12px; color: var(--ink-2); font-size: 12.5px; line-height: 1.55; }
.tour-foot { display: flex; align-items: center; gap: 10px; }
.tour-dots { display: flex; gap: 4px; flex: 1; justify-content: center; }
.tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--border); }
.tour-dots i.on { background: var(--accent); box-shadow: 0 0 6px rgba(var(--glow), .6); }
.tour-skip {
  background: none; border: none; padding: 0;
  color: var(--muted); font-size: 11.5px; cursor: pointer; white-space: nowrap;
}
.tour-skip:hover { color: var(--ink); }
.tour-next {
  background: var(--accent); color: #fff;
  border: none; border-radius: 999px;
  padding: 6px 16px;
  font: 600 12.5px var(--font-ui);
  cursor: pointer; white-space: nowrap;
}
.tour-next:hover { background: var(--accent-2); }

/* ---------- Gemeinsame Kleinteile ---------- */
.pos { color: var(--pos); }
.neg { color: var(--neg); }
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Scrollbalken im Nordlicht-Look ----------
   Global (Detailfenster, Radar-Panel, Earnings-Tabellen, Seite selbst):
   schlank, dunkler Daumen, keine hellen System-Pfeile. Moderne Browser
   nutzen scrollbar-color/-width, aeltere Chromium-Versionen die
   ::-webkit-scrollbar-Regeln — beides zu setzen ist der kompatible Weg. */
* {
  scrollbar-width: thin;
  scrollbar-color: #2e3c5c transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
*::-webkit-scrollbar-thumb {
  background: #2e3c5c;
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: #3d4f78; }