/* ============================================================
   SCOREKEEPER v8 — Design Override
   Applied on top of the functional v7 build.
   Maps v7 ADS variables → new design tokens.
   ============================================================ */

/* ── 1. FONTS ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* ── 2. DESIGN TOKENS ─────────────────────────────────────── */
:root {
  --a-accent: #26c4b0;   /* dark mode default — mint teal */
  --b-accent: #c94c2a;   /* light mode default — rust     */
  --rust-fixed: #c94c2a;
}

/* ── 3. LIGHT MODE — remap all ADS vars ──────────────────── */
html, html[data-theme="light"] {
  /* Primitive palette */
  --n0:   #ffffff;
  --n10:  #f2f2f2;
  --n20:  #f5f5f5;
  --n30:  #ebebeb;
  --n40:  var(--b-accent);
  --n50:  #d0d0d0;
  --n60:  #c0c0c0;
  --n70:  #aaaaaa;
  --n80:  #999999;
  --n100: #888888;
  --n200: #777777;
  --n300: #666666;
  --n400: #555555;
  --n500: #444444;
  --n700: #222222;
  --n800: #1a1a1a;
  --n900: #111111;

  /* Brand / accent */
  --b50:  color-mix(in srgb, var(--b-accent) 12%, transparent);
  --b100: color-mix(in srgb, var(--b-accent) 20%, transparent);
  --b300: var(--b-accent);
  --b400: var(--b-accent);
  --b500: var(--b-accent);

  /* Semantic surface tokens */
  --surface:          #f2f2f2;
  --surface-raised:   #ffffff;
  --surface-sunken:   #f5f5f5;
  --surface-overlay:  #ffffff;
  --surface-hovered:  #f0f0f0;
  --surface-pressed:  #ebebeb;

  /* Text */
  --text:           #111111;
  --text-subtle:    #888888;
  --text-subtlest:  #999999;
  --text-inverse:   #ffffff;
  --text-brand:     var(--b-accent);
  --text-danger:    #c94c2a;
  --text-success:   #22863a;
  --text-warning:   #735c0f;

  /* Border */
  --border:      var(--b-accent);
  --border-bold: var(--b-accent);

  /* Backgrounds */
  --bg-brand:         var(--b-accent);
  --bg-brand-hovered: color-mix(in srgb, var(--b-accent) 85%, #000);
  --bg-neutral:       #f5f5f5;
  --bg-neutral-bold:  #888888;
  --bg-danger:        var(--b-accent);
  --bg-success:       #dcffe4;
  --bg-accent-blue:   var(--b50);

  /* Shadows — removed per design (no glow/shadow) */
  --shadow-raised:  none;
  --shadow-overlay: none;
  --shadow-modal:   none;
  --scrim: rgba(0,0,0,0.45);

  /* v7 shorthand tokens */
  --p:   var(--b-accent);
  --pc:  color-mix(in srgb, var(--b-accent) 12%, transparent);
  --opc: var(--b-accent);
  --op:  #ffffff;
  --bg:  #f2f2f2;
  --sv:  #f5f5f5;
  --s2:  #f5f5f5;
  --s3:  #ebebeb;
  --obg: #111111;
  --osv: #888888;
  --ol:  #999999;
  --olv: var(--b-accent);

  /* Active accent alias */
  --accent: var(--b-accent);
  --icon-pill-bg: #f0f0f0;
  --header-bg: #ffffff;
  --nav-bg: #ffffff;
  --nav-border: #ebebeb;
  --header-border: #ebebeb;
  --input-bg: #f5f5f5;
  --input-border: #e0e0e0;
  --nav-inactive: #999999;
  --text-section: #777777;
}

/* ── 4. DARK MODE — remap all ADS vars ───────────────────── */
html[data-theme="dark"] {
  --n0:   #1c1c1e;
  --n10:  #111111;
  --n20:  #1c1c1e;
  --n30:  #242424;
  --n40:  var(--a-accent);
  --n50:  #333333;
  --n60:  #3d3d3d;
  --n70:  #4a4a4a;
  --n80:  #888888;
  --n100: #888888;
  --n200: #888888;
  --n300: #666666;
  --n400: #aaaaaa;
  --n500: #cccccc;
  --n700: #dddddd;
  --n800: #e8e8e8;
  --n900: #f0f0f0;

  --b50:  color-mix(in srgb, var(--a-accent) 12%, transparent);
  --b100: color-mix(in srgb, var(--a-accent) 20%, transparent);
  --b300: var(--a-accent);
  --b400: var(--a-accent);
  --b500: var(--a-accent);

  --surface:          #111111;
  --surface-raised:   #1c1c1e;
  --surface-sunken:   #1c1c1e;
  --surface-overlay:  #1c1c1e;
  --surface-hovered:  #242424;
  --surface-pressed:  #2a2a2a;

  --text:           #f0f0f0;
  --text-subtle:    #888888;
  --text-subtlest:  #666666;
  --text-inverse:   #111111;
  --text-brand:     var(--a-accent);
  --text-danger:    #ff6b6b;
  --text-success:   #4bce97;
  --text-warning:   #e2b203;

  --border:      var(--a-accent);
  --border-bold: var(--a-accent);

  --bg-brand:         var(--a-accent);
  --bg-brand-hovered: color-mix(in srgb, var(--a-accent) 85%, #000);
  --bg-neutral:       #242424;
  --bg-neutral-bold:  #666666;
  --bg-danger:        var(--a-accent);
  --bg-success:       #1c3329;
  --bg-accent-blue:   var(--b50);

  --shadow-raised:  none;
  --shadow-overlay: none;
  --shadow-modal:   none;
  --scrim: rgba(0,0,0,0.65);

  --p:   var(--a-accent);
  --pc:  color-mix(in srgb, var(--a-accent) 12%, transparent);
  --opc: var(--a-accent);
  --op:  #111111;
  --bg:  #111111;
  --sv:  #1c1c1e;
  --s2:  #1c1c1e;
  --s3:  #242424;
  --obg: #f0f0f0;
  --osv: #888888;
  --ol:  #666666;
  --olv: var(--a-accent);

  --accent: var(--a-accent);
  --icon-pill-bg: #242424;
  --header-bg: #111111;
  --nav-bg: #0d0d0d;
  --nav-border: #1a1a1a;
  --header-border: #1a1a1a;
  --input-bg: #242424;
  --input-border: #333333;
  --nav-inactive: #666666;
  --text-section: #666666;
}

/* ── 5. GLOBAL TYPOGRAPHY ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body, html {
  font-family: 'Poppins', sans-serif !important;
  background: var(--surface) !important;
  transition: background 0.2s, color 0.2s;
}

/* Override all font-family declarations site-wide */
* { font-family: 'Poppins', sans-serif; }

/* Keep mono font for code/numbers */
code, pre, .font-mono { font-family: ui-monospace, monospace; }

/* ── 6. TOPBAR ─────────────────────────────────────────────── */
.topbar {
  background: var(--header-bg) !important;
  border-bottom: 1px solid var(--header-border) !important;
  box-shadow: none !important;
  padding: 48px 16px 14px !important;
  height: auto !important;
  display: block !important;
  z-index: 100;
  position: sticky;
  top: 0;
}

.topbar-title {
  font-size: 29px !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  color: var(--text) !important;
  line-height: 1 !important;
}

/* ── 7. BOTTOM NAV ─────────────────────────────────────────── */
.nav-bar {
  background: var(--nav-bg) !important;
  border-top: 1px solid var(--nav-border) !important;
  box-shadow: none !important;
  left: 0 !important;
  right: 0 !important;
  max-width: 100% !important;
}

.nav-item {
  color: var(--nav-inactive) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  gap: 5px !important;
  padding: 10px 4px 8px !important;
  position: relative;
}

.nav-item.active,
.nav-item[aria-selected="true"],
.nav-item.sk-active {
  color: var(--accent) !important;
}

/* Pip indicator below active nav label */
.nav-pip {
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
  margin: 0 auto;
  display: block;
}

/* Material Symbol icons in nav */
.nav-item .msr {
  font-size: 20px !important;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20 !important;
}

/* ── 8. CARDS ─────────────────────────────────────────────── */
.ads-card {
  background: var(--surface-raised) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  padding: 14px 12px 12px !important;
  overflow: visible !important;
}

/* ── 9. SECTION LABELS ─────────────────────────────────────── */
.section-header {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--text-section, var(--text-subtlest)) !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  padding: 14px 16px 8px !important;
}

/* ── 10. BUTTONS ─────────────────────────────────────────── */
.btn-primary,
.btn-filled {
  background: var(--accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  height: auto !important;
  padding: 10px 20px !important;
}

.btn-outlined,
.btn-default {
  border: 1px solid var(--accent) !important;
  color: var(--accent) !important;
  background: transparent !important;
  border-radius: 8px !important;
  font-family: 'Poppins', sans-serif !important;
  box-shadow: none !important;
  height: auto !important;
  padding: 9px 20px !important;
}

.btn-subtle, .btn-text, .btn-icon {
  color: var(--text-subtle) !important;
  border-radius: 8px !important;
}

/* ── 11. TABLES ───────────────────────────────────────────── */
.ads-table th {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  color: var(--text-subtle) !important;
  padding: 6px 8px !important;
}
.ads-table td {
  padding: 8px 8px !important;
  font-size: 12px !important;
  border-top: 1px solid var(--input-border, var(--n30)) !important;
}

/* ── 12. MODALS ──────────────────────────────────────────── */
.modal-backdrop,
[class*="modal"],
[class*="sheet"],
[class*="dialog"] {
  border-radius: 20px 20px 16px 16px !important;
  box-shadow: none !important;
}

/* ── 13. INPUTS ──────────────────────────────────────────── */
input, select, textarea {
  font-family: 'Poppins', sans-serif !important;
  background: var(--input-bg, var(--surface-sunken)) !important;
  border: 1.5px solid var(--input-border, var(--border)) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent) !important;
  outline: none !important;
}

/* ── 14. LOZENGES ─────────────────────────────────────────── */
.lozenge {
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  font-family: 'Poppins', sans-serif !important;
}
.lozenge-default { background: var(--bg-neutral) !important; color: var(--text-subtle) !important; }
.lozenge-success { background: var(--bg-success) !important; }
.lozenge-info    { background: var(--b50) !important; color: var(--text-brand) !important; }
.lozenge-danger  { background: color-mix(in srgb, var(--rust-fixed) 12%, transparent) !important; color: var(--rust-fixed) !important; }

/* ── 15. MATERIAL SYMBOLS styling ────────────────────────── */
.msr {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20 !important;
  color: inherit !important;
}

/* ── 16. THEME ICON BUTTON ────────────────────────────────── */
#sk-theme-btn {
  width: 32px;
  height: 32px;
  background: var(--icon-pill-bg, var(--surface-sunken));
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  border: none;
  color: var(--accent);
  flex-shrink: 0;
}
#sk-theme-btn .msr {
  font-size: 16px !important;
  color: var(--accent) !important;
}

/* ── 17. ACCENT COLOUR PICKER SHEET ──────────────────────── */
#sk-cp-overlay {
  position: fixed; inset: 0; z-index: 9000;
  display: none; align-items: flex-end;
  background: var(--scrim);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
#sk-cp-overlay.open { display: flex; }
#sk-cp-sheet {
  width: 100%; padding: 18px 16px 36px;
  border-radius: 22px 22px 0 0;
  background: var(--surface-raised);
  max-width: 480px;
  margin: 0 auto;
}
#sk-cp-handle {
  width: 32px; height: 3px; border-radius: 2px;
  margin: 0 auto 16px;
  background: var(--input-border, var(--n40));
}
#sk-cp-top {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 14px;
}
#sk-cp-title {
  font-size: 13px; font-weight: 700;
  letter-spacing: -0.2px; color: var(--text);
  font-family: 'Poppins', sans-serif;
}
#sk-cp-done {
  font-size: 11px; font-weight: 600;
  padding: 5px 14px; border-radius: 20px;
  border: none; cursor: pointer;
  font-family: 'Poppins', sans-serif;
  background: var(--bg-neutral);
  color: var(--text);
}
#sk-cp-canvas-wrap {
  position: relative; margin-bottom: 12px;
  border-radius: 10px; overflow: hidden;
}
#sk-cp-canvas {
  display: block; width: 100%; height: 110px;
  cursor: crosshair; border-radius: 10px;
}
#sk-cp-cursor {
  position: absolute; width: 14px; height: 14px;
  border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  pointer-events: none;
  transform: translate(-50%, -50%);
  top: 50%; left: 50%;
}
#sk-cp-hue {
  width: 100%; height: 12px; border-radius: 6px;
  -webkit-appearance: none; appearance: none;
  background: linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
  outline: none; cursor: pointer; margin-bottom: 14px; display: block;
}
#sk-cp-hue::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4); cursor: pointer;
}
#sk-cp-hue::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  border: none; cursor: pointer;
}
#sk-cp-hex-row {
  display: flex; align-items: center;
  gap: 10px; margin-bottom: 14px;
}
#sk-cp-preview { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; }
#sk-cp-hex {
  flex: 1; font-family: 'Poppins', sans-serif;
  font-size: 12px; font-weight: 600;
  padding: 7px 10px; border-radius: 8px !important; outline: none;
  letter-spacing: 0.5px; text-transform: uppercase;
  background: var(--input-bg, var(--surface-sunken)) !important;
  border: 1px solid var(--input-border, var(--n40)) !important;
  color: var(--text) !important;
}
#sk-cp-presets { display: flex; gap: 8px; flex-wrap: wrap; }
.sk-swatch {
  width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; transition: transform 0.1s; flex-shrink: 0;
  border: none; padding: 0;
}
.sk-swatch:hover { transform: scale(1.15); }
.sk-swatch.active { box-shadow: 0 0 0 2px var(--surface-raised), 0 0 0 4px currentColor; }

/* ── 18. LIVE INDICATOR ──────────────────────────────────── */
.sk-live-indicator {
  display: inline-flex; align-items: center;
  gap: 6px; margin-top: 8px;
}
.sk-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rust-fixed); flex-shrink: 0;
}
.sk-live-text {
  font-size: 10px; font-weight: 500;
  color: var(--text-subtle); letter-spacing: 0.3px;
}

/* ── 19. SCROLLBAR ────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--n40); border-radius: 2px; }