/* ==========================================================================
   SHARED DARK MODE for the user site-dashboard (.main-panel content).
   Applies when the user's theme is dark: body[data-background-color="dark"].
   One place that darkens every dashboard sub-page (Payments, Analytics, Blog,
   AI Docs, Product Management, …) instead of theming each file separately.

   - Flips every page's --*-bg / --*-card / --*-ink … token set to dark, so any
     token-based surface follows automatically.
   - Darkens the common hardcoded-white surfaces by their shared naming
     patterns (cards / papers / panels / modals / tables / inputs).
   - The chat lives in .vai inside .main-panel and has its OWN theme, so every
     rule excludes .vai.
   ========================================================================== */

/* ── Token sets → dark (per-page prefixes) ───────────────────────────────── */
body[data-background-color="dark"] .main-panel,
body[data-background-color="dark"] .pay-page,
body[data-background-color="dark"] .an-page,
body[data-background-color="dark"] .bm-page,
body[data-background-color="dark"] .ed-page,
body[data-background-color="dark"] .ar-page {
  --pay-bg:#000000; --pay-card:#000000; --pay-ink:#ffffff; --pay-ink-2:#e5e5e5; --pay-muted:#cfcfcf; --pay-border:#262626; --pay-divider:#1f1f1f;
  --an-bg:#000000;  --an-card:#000000;  --an-ink:#ffffff;  --an-ink-2:#e5e5e5;  --an-muted:#cfcfcf;  --an-border:#262626;  --an-divider:#1f1f1f;
  --bm-bg:#000000;  --bm-card:#000000;  --bm-ink:#ffffff;  --bm-ink-2:#e5e5e5;  --bm-muted:#cfcfcf;  --bm-border:#262626;  --bm-divider:#1f1f1f;
  --ed-bg:#000000;  --ed-card:#000000;  --ed-ink:#ffffff;  --ed-ink-2:#e5e5e5;  --ed-muted:#cfcfcf;  --ed-border:#262626;  --ed-divider:#1f1f1f;
  --ar-bg:#000000;  --ar-card:#000000;  --ar-ink:#ffffff;  --ar-muted:#cfcfcf;  --ar-border:#262626;
}

/* ── Common white surfaces → pure black (skip anything inside the chat) ───── */
body[data-background-color="dark"] .main-panel :is(
  .card, .card-body, .card-header, .card-footer,
  .panel, .panel-body,
  [class*="-card"], [class*="-paper"], [class*="-panel"], [class*="-modal"],
  [class*="-empty"], [class*="-sheet"]
):not([class*="vai"]) {
  background: #000000 !important;
  border-color: #262626 !important;
  color: #eaeaea;
}

/* Tables */
body[data-background-color="dark"] .main-panel table:not([class*="vai"]) { color: #e5e5e5; }
body[data-background-color="dark"] .main-panel thead th:not([class*="vai"]),
body[data-background-color="dark"] .main-panel [class*="-table"] thead th {
  background: #0a0a0a !important; color: #cfcfcf !important; border-color: #1f1f1f !important;
}
body[data-background-color="dark"] .main-panel tbody td:not([class*="vai"]) { border-color: #1a1a1a !important; }

/* Form controls */
body[data-background-color="dark"] .main-panel :is(input, select, textarea):not([class*="vai"]):not([type="checkbox"]):not([type="radio"]) {
  background: #000000 !important; border-color: #2a2a2a !important; color: #ededed !important;
}
body[data-background-color="dark"] .main-panel :is(input, textarea)::placeholder { color: #7a7a7a !important; }

/* Headings + body text → light (leave coloured/brand text alone) */
body[data-background-color="dark"] .main-panel :is(h1, h2, h3, h4, h5):not([class*="vai"]) { color: #ffffff; }

/* Dropdowns / menus that float over dark content */
body[data-background-color="dark"] .main-panel .dropdown-menu:not([class*="vai"]) {
  background: #0a0a0a !important; border-color: #262626 !important; color: #e5e5e5;
}
body[data-background-color="dark"] .main-panel .dropdown-item:not([class*="vai"]) { color: #e5e5e5 !important; }
body[data-background-color="dark"] .main-panel .dropdown-item:hover:not([class*="vai"]) { background: rgba(255,255,255,0.06) !important; }