/* ═══════════════════════════════════════════════════════════════
   OLYMP DESIGN TOKENS + THEME LAYER  ·  AksjePuls
   Additive only — overrides CSS variables declared in page <style>.
   Load AFTER the page's own <style> block.
   ═══════════════════════════════════════════════════════════════ */

/* Selvhostet (var Google Fonts CDN: @import lekket bruker-IP til fonts.googleapis
   ved HVER sidelast — samme tredjeparts-lekkasje som chart.js, og «Google Fonts»-
   saken personvern-tilsyn har slått ned på). Variable fonter: én fil dekker hele
   vektspennet. Latin-subsett dekker norsk (æ ø å ligger i U+0000-00FF). */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;src:url('/static/fonts/Fraunces.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 700;font-display:swap;src:url('/static/fonts/Fraunces-italic.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 600;font-display:swap;src:url('/static/fonts/Inter.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/IBMPlexMono-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/IBMPlexMono-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ── Design Tokens ───────────────────────────────────────────── */
:root {
  /* Base */
  --bg:           #0A0D12;
  --surface:      rgba(14, 22, 38, 0.90);
  --surface2:     rgba(20, 30, 50, 0.85);
  --border:       #1c2640;
  --border2:      #263352;

  /* Text — warm ivory, not pure white */
  --text:         #EDE8DE;
  --text2:        #7d8ea8;
  --text3:        #5b6b83;   /* fotnoter: skal tre tilbake, ikke forsvinne */

  /* Gold accent — used sparingly */
  --gold:         #C9A24B;
  --gold-dim:     #8C6D3F;
  --gold-glow:    rgba(201, 162, 75, 0.10);
  --gold-glow2:   rgba(201, 162, 75, 0.22);

  /* Semantic — colorblind-safe (supplemented by direction/icon) */
  --green:        #4CC38A;
  --green-dim:    #0a2b1c;
  --red:          #C1554F;
  --red-dim:      #2a100f;
  --blue:         #4A90D9;
  --star:         #A9B4C9;

  /* Typography */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* Shape */
  --radius: 6px;
  --radius-lg: 8px;

  /* Motion — Apple-aktig easing. --ease-spring har en liten overshoot (fjær-pop),
     brukes på trykk. --ease-standard er kritisk dempet (ingen overshoot), brukes
     der noe glir på plass (paneler, hover) og aldri skal skyte forbi målet. */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Body ────────────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  background-color: var(--bg);
  animation: olymp-fade-in 0.55s ease forwards;
  /* Variable fonter (Fraunces/Inter) får riktig optisk vekt per størrelse.
     No-op på fonter uten opsz-akse, så trygt globalt (arves nedover). */
  font-optical-sizing: auto;
}

@keyframes olymp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Background canvas ───────────────────────────────────────── */
#olymp-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
body.olymp-cinema-off #olymp-bg { display: none; }
@media (prefers-reduced-motion: reduce) { #olymp-bg { display: none; } }

/* ── Navbar ──────────────────────────────────────────────────── */
.topnav {
  background: var(--surface);
  border-bottom-color: var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Logo: "Aksje" ivory · "Puls" gold — serif display */
.topnav-logo {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: -0.2px;
}
.topnav-logo span { color: var(--gold); }

/* Active nav link: subtle gold tint */
.nav-link.active {
  color: var(--gold);
  background: var(--gold-glow);
}

/* ── Widget cards ─────────────────────────────────────────────── */
.widget {
  background: var(--surface);
  border-color: var(--border);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── Side panels: solid background so the star field doesn't bleed through.
   Bruker var(--surface) så lys modus blir lys (ikke navy). */
.widget-panel,
.bank-panel,
.networth-panel,
.ai-chat-panel {
  background: var(--surface);
}
html:not(.light-mode) .widget-panel,
html:not(.light-mode) .bank-panel,
html:not(.light-mode) .networth-panel,
html:not(.light-mode) .ai-chat-panel {
  background: #0e1626;   /* ugjennomsiktig navy i mørk modus (--surface har alfa) */
}

/* Gold pulse accent — thin line grows on hover */
.widget-header { position: relative; }
.widget-header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  height: 1px; width: 24px;
  background: linear-gradient(90deg, var(--gold), transparent);
  opacity: 0.5;
  transition: width 0.5s var(--ease-standard);
}
.widget:hover .widget-header::after { width: 52px; }

/* ── User chip ───────────────────────────────────────────────── */
.user-dot {
  background: var(--gold-glow);
  color: var(--gold);
}
.user-chip { transition: border-color 0.2s; }
.user-chip:hover { border-color: var(--gold-dim); }

/* ── Financial data: monospaced, tabular nums ────────────────── */
.big-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.positions-table td,
.pos-value-bold {
  font-variant-numeric: tabular-nums;
}

/* ── Design panel — Olymp toggle (lives inside settings panel) ── */
#olymp-toggle {
  opacity: 0.55;
  transition: opacity 0.2s, color 0.2s;
}
#olymp-toggle:hover { opacity: 1; color: var(--gold); }
#olymp-toggle.active { color: var(--gold); opacity: 0.9; }

/* ─────────────────────────────────────────────────────────────
   LOGIN PAGE — Olymp cinematic styles
   ───────────────────────────────────────────────────────────── */

/* Full-screen stage */
.olymp-stage {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  z-index: 10;
}

/* Emblem */
.olymp-emblem {
  width: 160px;
  height: 160px;
  position: relative;
  margin-bottom: 36px;
  will-change: transform;
}
.olymp-emblem svg { display: block; }

/* Shimmer bar (sweeps over emblem on spin) */
.olymp-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 30%, rgba(201,162,75,0.35) 50%, transparent 70%);
  transform: translateX(-100%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}

/* Brand title */
.olymp-title {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1;
  color: var(--text);
  margin-bottom: 10px;
  text-align: center;
}
.olymp-title em {
  font-style: normal;
  color: var(--gold);
}

/* Subtitle */
.olymp-sub {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 52px;
  text-align: center;
}

/* Login buttons */
.olymp-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 280px;
}
.olymp-btn {
  width: 100%;
  padding: 13px 20px;
  border-radius: 5px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
  border: none;
}
.olymp-btn:hover { transform: translateY(-1px); }
.olymp-btn:active { transform: translateY(0); }
.olymp-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.olymp-btn-github {
  background: #161b22;
  color: var(--text);
  border: 1px solid var(--border2);
}
.olymp-btn-github:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.4); }

.olymp-btn-demo {
  background: transparent;
  color: var(--text2);
  border: 1px solid var(--border);
  font-size: 13px;
}
.olymp-btn-demo:hover { border-color: var(--gold-dim); color: var(--gold); }

/* Divider */
.olymp-divider {
  font-size: 12px;
  color: var(--text2);
  opacity: 0.5;
}

/* Cinema toggle (bottom) */
.olymp-cinema-label {
  position: fixed;
  bottom: 20px;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text2);
  opacity: 0.45;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  letter-spacing: 0.4px;
  transition: opacity 0.2s;
  user-select: none;
}
.olymp-cinema-label:hover { opacity: 0.85; }
.olymp-cinema-label input { accent-color: var(--gold); }

/* Error message */
.olymp-error {
  display: none;
  background: rgba(193, 85, 79, 0.12);
  border: 1px solid rgba(193, 85, 79, 0.3);
  color: #e8a09d;
  padding: 10px 16px;
  border-radius: 5px;
  font-size: 13px;
  width: 280px;
  text-align: center;
  margin-top: -6px;
}

/* ── Spin animation ───────────────────────────────────────────── */
@keyframes olymp-emblem-spin {
  0%   { transform: rotate(0deg)   scale(1);    }
  80%  { transform: rotate(700deg) scale(1.06); }
  100% { transform: rotate(720deg) scale(1.02); }
}
@keyframes olymp-shimmer-sweep {
  0%   { transform: translateX(-100%); opacity: 1; }
  100% { transform: translateX(220%);  opacity: 0.3; }
}
@keyframes olymp-emblem-out {
  from { opacity: 1; transform: scale(1.02); }
  to   { opacity: 0; transform: scale(0.92); }
}
@keyframes olymp-stage-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.olymp-emblem.spinning {
  animation: olymp-emblem-spin 1.3s cubic-bezier(0.2, 0.6, 0.35, 1) forwards;
}
.olymp-emblem.spinning .olymp-shimmer {
  animation: olymp-shimmer-sweep 0.65s 0.35s ease-in forwards;
}
.olymp-emblem.fading {
  animation: olymp-emblem-out 0.4s ease-in forwards;
}
.olymp-stage.fading-out {
  animation: olymp-stage-out 0.5s ease-in forwards;
}

/* Reduced motion: only cross-fade */
@media (prefers-reduced-motion: reduce) {
  .olymp-emblem.spinning {
    animation: none;
  }
  .olymp-stage.fading-out {
    animation: olymp-stage-out 0.3s ease-in forwards;
  }
}

/* ═══════════════════════════════════════════════════════════════
   OLYMP DAYLIGHT — lys modus. Overstyrer tokens over, må ligge sist.
   Varmt papir + dempet gull; stjernehimmelen skjules i dagslys.
   ═══════════════════════════════════════════════════════════════ */
html.light-mode {
  --bg:           #F5F2EA;
  --surface:      #FFFFFF;
  --surface2:     #EFEADD;
  --border:       #E2DBC9;
  --border2:      #D0C6AE;
  --text:         #22252B;
  --text2:        #6B6456;
  --gold:         #9A7B34;
  --gold-dim:     #C9A24B;
  --gold-glow:    rgba(154, 123, 52, 0.10);
  --gold-glow2:   rgba(154, 123, 52, 0.20);
  --green:        #2E8B57;
  --green-dim:    #dcefe2;
  --red:          #B23A32;
  --red-dim:      #f6e2df;
  --blue:         #3B6FA0;
  --blue-dim:     #dde8f2;
  --star:         transparent;
}
html.light-mode #olymp-bg { display: none; }
html.light-mode body { background-color: var(--bg); }

/* ── Gullaksenter — speiler emblemets farger i navigasjonen ────── */
.topnav-logo span { color: var(--gold); }
.topnav-links .nav-link.active {
  color: var(--gold);
  box-shadow: inset 0 -2px 0 var(--gold);
  background: var(--gold-glow);
}
.bottom-nav-item.active { color: var(--gold); }
.user-dot { background: var(--gold-glow2); color: var(--gold); }