/* ═══════════════════════════════════════════════════════════════════
   theme.css — Gemeinsame Design-Identität für alle Seiten
   „Präzisions-Terminal": warmes Anthrazit, Amber-Akzent,
   Archivo (UI) + JetBrains Mono (Zahlen, tabular-nums).
   Wird NACH dem Inline-<style> jeder Seite geladen und übersteuert
   gezielt die Design-Tokens — Layout-Regeln der Seiten bleiben intakt.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Schriften (self-hosted, variable) ─────────────────────────────── */
@font-face {
  font-family: "Archivo";
  src: url("/fonts/Archivo-Variable.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

/* ── Design-Tokens: Dunkel (Default) ───────────────────────────────── */
:root {
  --bg:     #0b0d11;   /* Seite — tiefes, leicht warmes Anthrazit */
  --bg2:    #14171d;   /* Karten */
  --bg3:    #1e222b;   /* Inputs, Hover, Chips */
  --border: #272d38;
  --text:   #e9ebf0;
  --text2:  #8d95a6;
  --accent: #f0b429;   /* Amber — die Identitätsfarbe */
  --accent-ink: #14171d; /* Text AUF Amber-Flächen */
  --green:  #34c97b;
  --red:    #ff5d5d;
  --yellow: #e0a82e;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.5);
  --radius: 12px;
  --font-ui: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Design-Tokens: Hell ───────────────────────────────────────────── */
[data-theme="light"] {
  --bg:     #f4f3ef;   /* warmes Papier statt kaltem Grau */
  --bg2:    #ffffff;
  --bg3:    #ebe9e3;
  --border: #d9d6cc;
  --text:   #1d2025;
  --text2:  #687080;
  --accent: #a87708;   /* dunkleres Amber für Kontrast auf Hell */
  --accent-ink: #ffffff;
  --green:  #1a8a4f;
  --red:    #d63a3a;
  --yellow: #9a6700;
  --shadow: 0 1px 2px rgba(60,50,20,.06), 0 8px 24px -16px rgba(60,50,20,.18);
}

/* ── Basis-Typografie ──────────────────────────────────────────────── */
body {
  font-family: var(--font-ui);
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .logo, .sidebar-link {
  font-family: var(--font-ui);
  letter-spacing: -.015em;
}
h2 { font-weight: 700; }

/* Zahlen: Mono + Tabellenziffern — Kolonnen springen nicht mehr */
td, th,
.price-big, .price-change, .metric, .chip strong,
input[type="number"], #last-update {
  font-variant-numeric: tabular-nums;
}
.price-big, .price-change, .metric,
td[style*="right"], th[style*="right"] {
  font-family: var(--font-mono);
}
.price-big { font-weight: 600; letter-spacing: -.02em; }
.metric { font-weight: 600; }

/* ── Karten: Elevation statt nur 1px-Linie ─────────────────────────── */
.card, .signal-card, .chart-section {
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  transition: border-color .2s ease;
}
.card:hover, .signal-card:hover { border-color: #333a47; }
[data-theme="light"] .card:hover,
[data-theme="light"] .signal-card:hover { border-color: #c8c4b8; }

/* ── Header: dezente Trennung mit Akzent-Hauch ─────────────────────── */
header {
  box-shadow: 0 1px 0 var(--border), 0 1px 12px rgba(0,0,0,.25);
}
[data-theme="light"] header { box-shadow: 0 1px 0 var(--border); }

/* Aktiver Nav-Link: Amber-Pille mit dunkler Schrift */
nav.main-nav a.active {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  font-weight: 700;
}

/* ── Buttons & Inputs: Fokus sichtbar, Übergänge weich ─────────────── */
button, .btn-primary, .btn-muted {
  font-family: var(--font-ui);
  transition: filter .15s ease, background .15s ease, border-color .15s ease;
}
button:hover { filter: brightness(1.08); }
input, select, textarea { font-family: var(--font-ui); }
input[type="number"] { font-family: var(--font-mono); }
input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ── Tabellen: ruhige Zeilen, Hover-Feedback ───────────────────────── */
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: rgba(240,180,41,.045); }
[data-theme="light"] tbody tr:hover { background: rgba(168,119,8,.05); }

/* ── Chips: kompakter, ruhiger ─────────────────────────────────────── */
.chip { font-family: var(--font-ui); }

/* ── Scrollbars (WebKit) ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--bg3); border-radius: 6px; border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--border); }

/* ── Settings-Sidebar: Gruppen-Labels ──────────────────────────────── */
.sidebar-group {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text2);
  padding: 14px 10px 4px; user-select: none;
}
.sidebar-group:first-child { padding-top: 4px; }
.sidebar-link.active {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
}

/* ── Score-Badges in Tabellen ──────────────────────────────────────── */
.score-badge {
  display: inline-block; min-width: 34px; padding: 2px 7px;
  border-radius: 999px; font-family: var(--font-mono);
  font-size: 12px; font-weight: 600; text-align: center;
}
.score-badge.hi  { background: rgba(52,201,123,.15); color: var(--green); }
.score-badge.mid { background: rgba(224,168,46,.15); color: var(--yellow); }
.score-badge.lo  { background: rgba(255,93,93,.12);  color: var(--red); }

/* ── Sticky Sektor-Leiste: Token statt Dark-Hardcode (Light-Mode-Fix) ─ */
.sector-filter.sticky {
  background: color-mix(in srgb, var(--bg2) 92%, transparent) !important;
}

/* ── Dismissbarer Hinweis-Banner ───────────────────────────────────── */
.notice-banner { position: relative; }
.notice-banner .banner-close {
  position: absolute; top: 6px; right: 8px;
  background: none; border: none; color: var(--yellow);
  font-size: 14px; cursor: pointer; padding: 4px; line-height: 1;
}
.notice-banner .banner-close:hover { filter: brightness(1.3); }

/* ── Trading: Tab-Leiste & KPI-Metrics ─────────────────────────────── */
.tabs { gap: 2px; }
.tab {
  border-radius: 8px 8px 0 0;
  transition: color .15s ease, background .15s ease;
}
.tab:hover { color: var(--text); background: var(--bg3); }
.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: linear-gradient(to top, rgba(240,180,41,.07), transparent);
}
.metric { transition: border-color .2s ease; border: 1px solid transparent; }
.metric:hover { border-color: var(--border); }
.metric .value {
  font-family: var(--font-mono);
  font-size: 22px;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.metric .label { font-size: 10px; letter-spacing: .08em; }