/**
 * Plotit — Deep Midnight Dark Theme (v3)
 * Buttons + tabs: Plotit sky-blue (#38bdf8) matching the logo, no glow/shadow elevation.
 * Forms: lifted surface, visible borders, blue focus ring.
 * Light mode is untouched — all rules scoped to body.dark.
 * Link AFTER the page's own <style> block so these take precedence.
 * Excluded from: waitlist.html, waitlist-signup.html, create-account.html, login.html
 */

/* ── Plotit blue palette (matches logo #7dd3fc family) ─────────────── */
/*   --plotit-blue:       #38bdf8  (sky-400, primary interactive)        */
/*   --plotit-blue-hover: #0ea5e9  (sky-500, pressed / hover)            */
/*   --plotit-blue-dim:   #0c4a6e  (sky-900, tint for danger-free focus) */

/* ── CSS custom properties ─────────────────────────────────────────── */
body.dark {
  /* Backgrounds */
  --bg-color:        #06081a !important;
  --nav-bg:          #080c1e !important;
  --card-bg:         #0c1026 !important;
  --tab-bg:          #10152e !important;
  --tab-active-bg:   #0c2d45 !important;
  --profile-bg:      #10152e !important;
  --skeleton-bg:     #10152e !important;
  --skeleton-shine:  #191e3d !important;

  /* Raised surface (inputs, secondary buttons) */
  --surface:         #0f1330 !important;
  --surface-hover:   #14193e !important;

  /* Text */
  --text-color:      #eaedfa !important;
  --nav-link:        #c4cce0 !important;
  --muted:           #7a83a8 !important;

  /* Accent — Plotit sky-blue */
  --nav-link-active:    #38bdf8 !important;
  --accent:             #38bdf8 !important;
  --accent-hover:       #0ea5e9 !important;
  --tab-active:         #38bdf8 !important;
  --tab-active-color:   #ffffff !important;
  --tab-inactive-color: #7a83a8 !important;

  /* Borders & shadows */
  --border:      #1e2347 !important;
  --card-shadow: 0 4px 32px rgba(0,0,12,0.72) !important;
  --focus-ring:  0 0 0 3px rgba(56,189,248,0.35) !important;

  /* Danger */
  --danger:     #f87171 !important;
  --danger-bg:  rgba(239,68,68,0.10) !important;

  /* Mark / highlight */
  --mark-bg: #3a3500 !important;

  color-scheme: dark;
}

/* ── Banners ────────────────────────────────────────────────────────── */
body.dark .banner.warn {
  background:   #1e1700 !important;
  color:        #fde68a !important;
  border-color: #4a3800 !important;
}

/* ── Toast ──────────────────────────────────────────────────────────── */
body.dark .toast.ok  { color: #6ee7b7 !important; }
body.dark .toast.err { color: #fca5a5 !important; }

/* ── Msg (profile page) ─────────────────────────────────────────────── */
body.dark .msg.ok  { color: #4ade80 !important; }
body.dark .msg.err { color: #f87171 !important; }

/* ══════════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════════ */

/* Primary — flat Plotit blue, no shadow */
body.dark .btn-primary,
body.dark button.btn-primary,
body.dark a.btn-primary {
  background:  #38bdf8 !important;
  color:       #03101a !important;
  border:      1px solid #38bdf8 !important;
  box-shadow:  none !important;
  text-shadow: none !important;
}
body.dark .btn-primary:hover:not(:disabled),
body.dark button.btn-primary:hover:not(:disabled) {
  background:  #0ea5e9 !important;
  border-color: #0ea5e9 !important;
  box-shadow:  none !important;
}

/* Secondary — raised surface, no shadow */
body.dark .btn-secondary,
body.dark button.btn-secondary,
body.dark a.btn-secondary {
  background:  var(--surface) !important;
  color:       #c4cce0 !important;
  border:      1px solid var(--border) !important;
  box-shadow:  none !important;
}
body.dark .btn-secondary:hover:not(:disabled),
body.dark button.btn-secondary:hover:not(:disabled) {
  background:   var(--surface-hover) !important;
  border-color: #38bdf8 !important;
  color:        #38bdf8 !important;
  box-shadow:   none !important;
}

/* Danger — red tint, no shadow */
body.dark .btn-danger,
body.dark button.btn-danger,
body.dark a.btn-danger {
  background:  rgba(239,68,68,0.12) !important;
  color:       #fca5a5 !important;
  border:      1px solid rgba(248,113,113,0.38) !important;
  box-shadow:  none !important;
}
body.dark .btn-danger:hover:not(:disabled),
body.dark button.btn-danger:hover:not(:disabled) {
  background:   rgba(239,68,68,0.22) !important;
  border-color: rgba(248,113,113,0.65) !important;
  box-shadow:   none !important;
}

/* Icon buttons (toolbar back arrow, settings gear, etc.) */
body.dark .icon-btn,
body.dark button.icon-btn,
body.dark a.icon-btn {
  background:  var(--surface) !important;
  border:      1px solid var(--border) !important;
  color:       #9aa3c0 !important;
  box-shadow:  none !important;
}
body.dark .icon-btn:hover,
body.dark a.icon-btn:hover {
  background:   var(--surface-hover) !important;
  border-color: #38bdf8 !important;
  color:        #38bdf8 !important;
  box-shadow:   none !important;
}

/* Toolbar text buttons */
body.dark .toolbar-btn,
body.dark a.toolbar-btn {
  background:  var(--surface) !important;
  border:      1px solid var(--border) !important;
  color:       #c4cce0 !important;
  box-shadow:  none !important;
}
body.dark .toolbar-btn:hover,
body.dark a.toolbar-btn:hover {
  background:   var(--surface-hover) !important;
  border-color: #38bdf8 !important;
  color:        #38bdf8 !important;
  box-shadow:   none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   FORMS  (inputs, selects, textareas)
   ══════════════════════════════════════════════════════════════════════ */
body.dark input[type="text"],
body.dark input[type="email"],
body.dark input[type="url"],
body.dark input[type="password"],
body.dark input[type="search"],
body.dark input[type="number"],
body.dark select,
body.dark textarea {
  background:    #0f1330 !important;
  color:         var(--text-color) !important;
  border:        1px solid #252b55 !important;
  border-radius: 10px !important;
  box-shadow:    inset 0 1px 3px rgba(0,0,12,0.5) !important;
}

body.dark input::placeholder,
body.dark textarea::placeholder {
  color: #4a5175 !important;
}

body.dark input:focus,
body.dark select:focus,
body.dark textarea:focus {
  border-color: #38bdf8 !important;
  box-shadow:   0 0 0 3px rgba(56,189,248,0.28), inset 0 1px 3px rgba(0,0,12,0.5) !important;
  outline:      none !important;
}

body.dark input:disabled,
body.dark select:disabled,
body.dark textarea:disabled {
  opacity: 0.45 !important;
  cursor:  not-allowed !important;
}

/* Select arrow */
body.dark select {
  appearance:          none !important;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237a83a8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat:   no-repeat !important;
  background-position: right 0.65rem center !important;
  padding-right:       2.25rem !important;
}

/* Switch thumb */
body.dark .switch-ui::after { background: #d0d5ec !important; }

/* ══════════════════════════════════════════════════════════════════════
   TAB SWITCHERS
   ══════════════════════════════════════════════════════════════════════ */
body.dark .tabs {
  background:    transparent !important;
  border:        1px solid transparent !important;
  border-radius: 999px !important;
  padding:       4px !important;
  box-shadow:    none !important;
}

/* Inactive tabs */
body.dark .tab-btn {
  background:  transparent !important;
  color:       #7a83a8 !important;
  border:      none !important;
  box-shadow:  none !important;
  transition:  background 0.18s, color 0.18s !important;
}
body.dark .tab-btn:hover:not([aria-selected="true"]) {
  background: transparent !important;
  color:      #c4cce0 !important;
}

/* Active tab — flat Plotit blue pill, no shadow */
body.dark .tab-btn[aria-selected="true"] {
  background:  #38bdf8 !important;
  color:       #03101a !important;
  border:      none !important;
  box-shadow:  none !important;
  text-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   CHOICE CARDS (radio option blocks in settings)
   ══════════════════════════════════════════════════════════════════════ */
body.dark .choice {
  background:   #0f1330 !important;
  border-color: #1e2347 !important;
}
body.dark .choice:hover {
  border-color: #38bdf8 !important;
  background:   #121638 !important;
}
body.dark .choice:has(input:checked) {
  border-color: #38bdf8 !important;
  background:   #0a2133 !important;
  box-shadow:   none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   SETTINGS ROWS
   ══════════════════════════════════════════════════════════════════════ */
body.dark .settings-row:hover {
  background: #0f1330 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   POLICY CALLOUT
   ══════════════════════════════════════════════════════════════════════ */
body.dark .policy .callout {
  background:   #0f1330 !important;
  border-color: #1e2347 !important;
}
body.dark .policy code {
  background:   #0f1330 !important;
  border-color: #1e2347 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   SWITCH ROW separators
   ══════════════════════════════════════════════════════════════════════ */
body.dark .switch-row {
  border-bottom-color: #1a1f42 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   PANEL BACK BUTTON
   ══════════════════════════════════════════════════════════════════════ */
body.dark .panel-back-btn:hover {
  background: #10152e !important;
}