/* =========================================================================
   Moh OS V3 — DARK MODE overlay (warm tones, no cold blues)
   Espresso + cognac + cream + candle-lit gold accents
   Activates only when body[data-theme="dark"]
   ========================================================================= */

body[data-theme="dark"] {
  /* Palette overrides — warm dark with strong contrast */
  --bg: #14100a;
  --bg-2: #1c1610;
  --surface: rgba(38, 28, 18, 0.94);          /* much more opaque for readability */
  --surface-solid: #2a1f15;
  --surface-2: rgba(48, 36, 24, 0.85);
  --ink: #fff5e1;                              /* brighter for headlines */
  --ink-2: #e8d8b8;
  --muted: #a89478;                            /* lighter so it's visible */
  --line: rgba(212, 168, 106, 0.20);
  --line-2: rgba(212, 168, 106, 0.35);
  --accent: #e8b878;                           /* brighter warm gold */
  --accent-2: #f5d09a;
  --gold: #fbdf99;
  --success: #a3d684;
  --warn: #f5b258;
  --urgent: #f08568;
  --info: #d8c099;

  /* Custom dark-only tokens */
  --glow-warm:   0 0 24px rgba(212, 168, 106, 0.30), 0 0 48px rgba(212, 168, 106, 0.12);
  --glow-amber:  0 0 24px rgba(240, 210, 144, 0.28);
  --bevel: 0 1px 0 rgba(255, 230, 190, 0.06) inset, 0 -1px 0 rgba(0, 0, 0, 0.4) inset;

  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(212, 168, 106, 0.10), transparent 60%),
    radial-gradient(1000px 600px at 95% 10%, rgba(192, 136, 88, 0.08), transparent 60%),
    radial-gradient(800px 800px at 50% 110%, rgba(139, 94, 52, 0.06), transparent 60%),
    var(--bg);
  color: var(--ink);
  background-attachment: fixed;
}

body[data-theme="dark"] .topbar,
body[data-theme="dark"] .sidebar,
body[data-theme="dark"] .card,
body[data-theme="dark"] .row-card,
body[data-theme="dark"] .modal-card,
body[data-theme="dark"] .dispatch-card,
body[data-theme="dark"] .wed-card,
body[data-theme="dark"] .wed-list,
body[data-theme="dark"] .kpi,
body[data-theme="dark"] .pnl-table,
body[data-theme="dark"] .empty {
  background: var(--surface);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow:
    var(--bevel),
    0 24px 60px -32px rgba(8, 4, 0, 0.7);
  color: var(--ink);
}

body[data-theme="dark"] .topbar {
  background: rgba(26, 18, 8, 0.85);
  border-bottom: 1px solid var(--line);
}

body[data-theme="dark"] .sidebar {
  background: rgba(34, 24, 16, 0.92);
  border-right: 1px solid var(--line);
}
body[data-theme="dark"] .nav-link { color: var(--ink-2); transition: all 200ms; }
body[data-theme="dark"] .nav-link:hover {
  background: rgba(212, 168, 106, 0.08);
  color: var(--ink);
}
body[data-theme="dark"] .nav-link.active {
  background: linear-gradient(90deg, rgba(212, 168, 106, 0.18), rgba(212, 168, 106, 0.04));
  color: #fff;
  border-left: 2px solid var(--accent);
}
body[data-theme="dark"] .nav-section {
  color: var(--muted);
  letter-spacing: 0.18em;
  font-size: 10px;
}

body[data-theme="dark"] body,
body[data-theme="dark"] .main { color: var(--ink); }

body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] .page-title,
body[data-theme="dark"] .card-title,
body[data-theme="dark"] .row-title,
body[data-theme="dark"] .auth-title,
body[data-theme="dark"] .modal-title,
body[data-theme="dark"] .sec-title { color: #fff5e1 !important; }

body[data-theme="dark"] .page-title em {
  background: linear-gradient(135deg, var(--accent) 0%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body[data-theme="dark"] .page-sub,
body[data-theme="dark"] .row-meta,
body[data-theme="dark"] .lbl,
body[data-theme="dark"] .muted,
body[data-theme="dark"] .auth-sub,
body[data-theme="dark"] .modal-sub { color: var(--muted) !important; }

body[data-theme="dark"] p,
body[data-theme="dark"] li,
body[data-theme="dark"] span:not(.pill):not(.hb-num):not(.hb-lbl):not(.hb-dot),
body[data-theme="dark"] div { color: inherit; }

body[data-theme="dark"] a:not(.btn):not(.nav-link) { color: var(--accent); }
body[data-theme="dark"] strong { color: #fff5e1; }

body[data-theme="dark"] input,
body[data-theme="dark"] textarea,
body[data-theme="dark"] select,
body[data-theme="dark"] .input,
body[data-theme="dark"] .select,
body[data-theme="dark"] .textarea {
  background: rgba(26, 18, 8, 0.55);
  border: 1px solid var(--line);
  color: var(--ink);
}
body[data-theme="dark"] input:focus,
body[data-theme="dark"] textarea:focus,
body[data-theme="dark"] select:focus,
body[data-theme="dark"] .input:focus,
body[data-theme="dark"] .select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(212, 168, 106, 0.18);
  outline: none;
}

body[data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #1a1208;
  border: 1px solid rgba(240, 210, 144, 0.35);
  box-shadow: var(--glow-warm);
  font-weight: 600;
}
body[data-theme="dark"] .btn-primary:hover {
  filter: brightness(1.1);
}
body[data-theme="dark"] .btn-soft,
body[data-theme="dark"] .btn-ghost {
  background: rgba(232, 184, 120, 0.14);
  border: 1px solid rgba(232, 184, 120, 0.30);
  color: #fff5e1;
}
body[data-theme="dark"] .btn-soft:hover,
body[data-theme="dark"] .btn-ghost:hover {
  background: rgba(232, 184, 120, 0.22);
  border-color: rgba(232, 184, 120, 0.50);
  color: #fff5e1;
}
body[data-theme="dark"] .btn-soft.btn-sm,
body[data-theme="dark"] .btn-ghost.btn-sm { color: #fff5e1; }

/* Theme switcher previews readable in dark mode */
body[data-theme="dark"] .theme-opt {
  background: rgba(38, 28, 18, 0.94);
  border-color: rgba(212, 168, 106, 0.28);
  color: #fff5e1;
}
body[data-theme="dark"] .theme-opt strong { color: #fff5e1; }
body[data-theme="dark"] .theme-opt small { color: #a89478; }
body[data-theme="dark"] .theme-opt.active {
  border-color: var(--accent);
  background: rgba(232, 184, 120, 0.12);
  box-shadow: 0 0 0 3px rgba(232, 184, 120, 0.20);
}

/* Card status pills — make CONNECTED / DEPLOYED legible */
body[data-theme="dark"] .pill-done {
  background: rgba(163, 214, 132, 0.18);
  border-color: rgba(163, 214, 132, 0.45);
  color: #d6f0b6;
}
body[data-theme="dark"] .pill-failed {
  background: rgba(240, 133, 104, 0.18);
  border-color: rgba(240, 133, 104, 0.45);
  color: #ffc4b3;
}
body[data-theme="dark"] .btn-accent {
  background: linear-gradient(135deg, var(--gold) 0%, var(--accent) 100%);
  color: #1a1208;
  font-weight: 700;
  box-shadow: var(--glow-amber);
}

body[data-theme="dark"] .pill {
  background: rgba(212, 168, 106, 0.12);
  border: 1px solid rgba(212, 168, 106, 0.25);
  color: var(--ink);
}
body[data-theme="dark"] .pill-booked {
  background: linear-gradient(135deg, rgba(212, 168, 106, 0.30), rgba(212, 168, 106, 0.08));
  border-color: rgba(212, 168, 106, 0.50);
  color: #fff5e0;
}
body[data-theme="dark"] .pill-done {
  background: rgba(141, 185, 104, 0.14);
  border-color: rgba(141, 185, 104, 0.35);
  color: #d6f0b6;
}

body[data-theme="dark"] .kpi-value {
  color: var(--ink);
}
body[data-theme="dark"] .kpi-label,
body[data-theme="dark"] .kpi-sub { color: var(--muted); }

body[data-theme="dark"] .studio-tile-countdown {
  background:
    radial-gradient(600px 300px at 0% 100%, rgba(212, 168, 106, 0.20), transparent 60%),
    linear-gradient(135deg, rgba(45, 33, 22, 0.85) 0%, rgba(34, 24, 16, 0.85) 100%);
  border: 1px solid rgba(212, 168, 106, 0.25);
  box-shadow: var(--glow-warm), var(--bevel);
}
body[data-theme="dark"] .studio-countdown-number {
  background: linear-gradient(135deg, var(--accent) 0%, var(--gold) 50%, #fffaee 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
body[data-theme="dark"] .studio-tile-label em {
  background: linear-gradient(135deg, var(--accent), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body[data-theme="dark"] .studio-tile-eyebrow {
  color: rgba(216, 197, 163, 0.85);
}
body[data-theme="dark"] .studio-tile-viral,
body[data-theme="dark"] .studio-tile-recent {
  border: 1px solid rgba(212, 168, 106, 0.25);
}

body[data-theme="dark"] .heartbeat-strip { background: rgba(26, 18, 8, 0.5); }
body[data-theme="dark"] .hb-item {
  background: rgba(212, 168, 106, 0.06);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
body[data-theme="dark"] .hb-item:hover { background: rgba(212, 168, 106, 0.14); border-color: rgba(212, 168, 106, 0.40); }
body[data-theme="dark"] .hb-dot-good   { background: var(--success); box-shadow: 0 0 8px rgba(141, 185, 104, 0.6); }
body[data-theme="dark"] .hb-dot-warn   { background: var(--warn);    box-shadow: 0 0 8px rgba(240, 160, 64, 0.6); }
body[data-theme="dark"] .hb-dot-urgent { background: var(--urgent);  box-shadow: 0 0 12px rgba(224, 115, 88, 0.8); }

body[data-theme="dark"] .wed-card-thumb {
  background: linear-gradient(135deg, #3a2a1c 0%, #221812 100%);
}
body[data-theme="dark"] .wed-card-initials {
  background: linear-gradient(135deg, var(--accent), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

body[data-theme="dark"] .wed-row { border-bottom: 1px solid var(--line); }
body[data-theme="dark"] .wed-row:hover { background: rgba(212, 168, 106, 0.06); }
body[data-theme="dark"] .row-countdown {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #1a1208;
}

body[data-theme="dark"] .dispatch-body {
  background: rgba(26, 18, 8, 0.55);
  border: 1px solid var(--line);
  color: var(--ink-2);
}

body[data-theme="dark"] .tabs { border-bottom: 1px solid var(--line); }
body[data-theme="dark"] .tab { color: var(--muted); border-bottom-color: transparent; }
body[data-theme="dark"] .tab.active { color: #fff; border-bottom-color: var(--accent); }
body[data-theme="dark"] .tab:hover:not(.active) { color: var(--ink-2); }

body[data-theme="dark"] .divider {
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
  height: 1px;
}

body[data-theme="dark"] .auth-screen {
  background:
    radial-gradient(900px 500px at 30% -10%, rgba(212, 168, 106, 0.15), transparent),
    radial-gradient(900px 600px at 80% 100%, rgba(192, 136, 88, 0.18), transparent),
    var(--bg);
}
body[data-theme="dark"] .auth-card {
  background: var(--surface);
  border: 1px solid var(--line);
  backdrop-filter: blur(20px) saturate(1.1);
  box-shadow: var(--glow-warm), var(--bevel);
}

/* Scrollbar */
body[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; }
body[data-theme="dark"] ::-webkit-scrollbar-track { background: rgba(26, 18, 8, 0.4); }
body[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(212, 168, 106, 0.25);
  border-radius: 4px;
}
body[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(212, 168, 106, 0.5); }

/* Theme switcher in Settings */
.theme-switcher {
  display: flex;
  gap: 8px;
}
.theme-switcher .theme-opt {
  flex: 1;
  padding: 16px 12px;
  border-radius: 12px;
  border: 2px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  text-align: center;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
  transition: all 200ms;
  color: var(--ink);
}
.theme-switcher .theme-opt:hover { border-color: var(--accent); }
.theme-switcher .theme-opt.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(212, 168, 106, 0.18);
}
.theme-switcher .theme-opt small { display:block; font-size:11px; color: var(--muted); margin-top:4px; font-family: var(--sans); font-weight: 400; }
.theme-preview {
  height: 28px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.theme-preview-studio { background: linear-gradient(135deg, #fbf3df, #d4a86a, #8b5e34); }
.theme-preview-dark   { background: linear-gradient(135deg, #1a1208, #8b5e34, #d4a86a); }