/* ============================================================
 * dashboard-dark.css — the optional DARK theme for the creator dashboard.
 *
 * Off by default (the dashboard stays the warm light musenest look). A creator
 * turns it on with the sun/moon button in the header; the choice is saved
 * (cookie + admin_theme_prefs) and applied as <html data-mn-theme="dark">.
 *
 * Loaded LAST so it wins over dashboard.css, crm.css and the Club sheets. Page
 * templates carry many literal colours in their own <style> blocks and inline
 * styles, so besides re-pointing the tokens this sheet maps the handful of
 * light surface/ink colours those use. Everything is scoped to the attribute,
 * so light mode is untouched.
 * ============================================================ */

html[data-mn-theme="dark"] { color-scheme: dark; }

html[data-mn-theme="dark"] .mn-admin-shell,
html[data-mn-theme="dark"] body {
  --mn-admin-bg: #1A1613;
  --mn-admin-surface: #231E1A;
  --mn-admin-surface-2: #2D2722;
  --mn-admin-panel: #2D2722;
  --mn-admin-border: #3B342E;
  --mn-admin-border-strong: #4B433B;
  --mn-admin-text: #F1EAE2;
  --mn-admin-text-muted: #D2C8BD;
  --mn-admin-text-dim: #9A9086;
  --mn-admin-primary: #E0A94E;
  --mn-admin-primary-hover: #EDBE6E;
  --mn-admin-action: #D8909F;
  --mn-admin-action-hover: #E7A9B6;
  --mn-admin-on-action: #1A1613;
  --mn-admin-danger: #F08A8A;
  --mn-admin-danger-soft: #3A2224;
  --mn-admin-success: #7CC49E;
  --mn-admin-success-soft: #1F3329;
  --mn-admin-warning: #E0A94E;
  --mn-admin-warning-soft: #3A2E1A;
  --mn-admin-focus-ring: #4A2A33;
  --mn-admin-card-bg: var(--mn-admin-surface);
  --mn-admin-input-bg: var(--mn-admin-panel);
  --mn-admin-header-bg: var(--mn-admin-surface);
  --mn-admin-sidebar-bg: #120F0D;
  --mn-admin-link: var(--mn-admin-action-hover);
  --mn-admin-link-hover: var(--mn-admin-action);

  --mn-content-bg: #1A1613;
  --mn-header-bg: #231E1A;
  --mn-header-border: #3B342E;
  --mn-sidebar-bg: #120F0D;
  --bs-body-bg: #1A1613;
  --bs-body-color: #F1EAE2;
  --bs-border-color: #3B342E;
  --bs-secondary-color: #C2B8AD;
  --bs-tertiary-bg: #2D2722;
  --bs-secondary-bg: #2D2722;
  --bs-emphasis-color: #F1EAE2;
  --bs-link-color: #E7A9B6;
  --bs-link-hover-color: #F2C3CD;
}

html[data-mn-theme="dark"] .dashboard-body { background: #1A1613; color: #E4DBD1; }

/* Surfaces that dashboard.css / crm.css paint white */
html[data-mn-theme="dark"] .dashboard-header,
html[data-mn-theme="dark"] .card,
html[data-mn-theme="dark"] .stat-card,
html[data-mn-theme="dark"] .dash-card,
html[data-mn-theme="dark"] .quick-action,
html[data-mn-theme="dark"] .mn-tile,
html[data-mn-theme="dark"] .modal-content,
html[data-mn-theme="dark"] .dropdown-menu,
html[data-mn-theme="dark"] .offcanvas,
html[data-mn-theme="dark"] .list-group-item,
html[data-mn-theme="dark"] .table-wrapper,
html[data-mn-theme="dark"] .mn-billing-chip,
html[data-mn-theme="dark"] [class*="-card"]:not([class*="icon"]):not([class*="trend"]),
html[data-mn-theme="dark"] [class*="-panel"],
html[data-mn-theme="dark"] [class*="-sheet"],
html[data-mn-theme="dark"] [class*="-dialog"] {
  background-color: #231E1A;
  border-color: #3B342E;
  color: #E4DBD1;
}
html[data-mn-theme="dark"] .modal-header,
html[data-mn-theme="dark"] .modal-footer,
html[data-mn-theme="dark"] .card-header,
html[data-mn-theme="dark"] .card-footer { background-color: #2D2722; border-color: #3B342E; }

/* Text */
html[data-mn-theme="dark"] h1, html[data-mn-theme="dark"] h2, html[data-mn-theme="dark"] h3,
html[data-mn-theme="dark"] h4, html[data-mn-theme="dark"] h5, html[data-mn-theme="dark"] h6,
html[data-mn-theme="dark"] .header-page-title,
html[data-mn-theme="dark"] .card-title,
html[data-mn-theme="dark"] .stat-card-value,
html[data-mn-theme="dark"] strong, html[data-mn-theme="dark"] b,
html[data-mn-theme="dark"] label,
html[data-mn-theme="dark"] th { color: #F1EAE2; }
html[data-mn-theme="dark"] .text-muted,
html[data-mn-theme="dark"] .form-text,
html[data-mn-theme="dark"] small,
html[data-mn-theme="dark"] .stat-card-label,
html[data-mn-theme="dark"] .header-breadcrumb,
html[data-mn-theme="dark"] .header-breadcrumb a { color: #CFC5BA !important; }
html[data-mn-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.mn-qv-open):not(.mn-btn-sm):not(.sb-tab) { color: #E7A9B6; }
html[data-mn-theme="dark"] hr { border-color: #3B342E; opacity: 1; }

/* Forms */
html[data-mn-theme="dark"] .form-control,
html[data-mn-theme="dark"] .form-select,
html[data-mn-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
html[data-mn-theme="dark"] select,
html[data-mn-theme="dark"] textarea {
  background-color: #2D2722;
  border-color: #4B433B;
  color: #F1EAE2;
}
html[data-mn-theme="dark"] .form-control::placeholder,
html[data-mn-theme="dark"] input::placeholder,
html[data-mn-theme="dark"] textarea::placeholder { color: #B5ABA1; }
html[data-mn-theme="dark"] .form-control:disabled,
html[data-mn-theme="dark"] .form-select:disabled,
html[data-mn-theme="dark"] select:disabled,
html[data-mn-theme="dark"] input:disabled { color: #B5ABA1; opacity: 1; }
html[data-mn-theme="dark"] .form-control:focus,
html[data-mn-theme="dark"] .form-select:focus { background-color: #2D2722; border-color: #D8909F; box-shadow: 0 0 0 3px rgba(216,144,159,.25); color: #F1EAE2; }
html[data-mn-theme="dark"] .form-check-input { background-color: #2D2722; border-color: #6A6056; }
html[data-mn-theme="dark"] .form-check-input:checked { background-color: #9E3950; border-color: #9E3950; }
html[data-mn-theme="dark"] .input-group-text { background-color: #3B342E; border-color: #4B433B; color: #E4DBD1; }

/* Tables */
html[data-mn-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: #E4DBD1; --bs-table-border-color: #3B342E; --bs-table-striped-bg: #2D2722; --bs-table-hover-bg: #2D2722; color: #E4DBD1; }
html[data-mn-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; border-color: #3B342E; color: inherit; }
html[data-mn-theme="dark"] thead th, html[data-mn-theme="dark"] .table thead th { background-color: #2D2722 !important; }
html[data-mn-theme="dark"] tbody tr:hover > * { background-color: #2D2722; }

/* Buttons that are light by default */
html[data-mn-theme="dark"] .btn-light,
html[data-mn-theme="dark"] .btn-outline-secondary,
html[data-mn-theme="dark"] .btn-outline-dark,
html[data-mn-theme="dark"] .btn-white { background-color: #2D2722; border-color: #4B433B; color: #E4DBD1; }
html[data-mn-theme="dark"] .btn-light:hover,
html[data-mn-theme="dark"] .btn-outline-secondary:hover { background-color: #3B342E; color: #fff; }
html[data-mn-theme="dark"] .dropdown-item { color: #E4DBD1; }
html[data-mn-theme="dark"] .dropdown-item:hover, html[data-mn-theme="dark"] .dropdown-item:focus { background-color: #3B342E; color: #fff; }
html[data-mn-theme="dark"] .nav-tabs { border-color: #3B342E; }
html[data-mn-theme="dark"] .nav-tabs .nav-link { color: #C2B8AD; }
html[data-mn-theme="dark"] .nav-tabs .nav-link.active { background-color: #231E1A; border-color: #3B342E #3B342E #231E1A; color: #fff; }
html[data-mn-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
html[data-mn-theme="dark"] .progress { background-color: #3B342E; }
html[data-mn-theme="dark"] .badge.bg-light { background-color: #3B342E !important; color: #E4DBD1 !important; }

/* Status banners and tinted notices */
html[data-mn-theme="dark"] .alert { border-color: #4B433B; }
html[data-mn-theme="dark"] .alert-info, html[data-mn-theme="dark"] .mn-billing-blue   { background-color: #1B2B36; border-color: #2E4E63; color: #BBD9EC; }
html[data-mn-theme="dark"] .alert-success, html[data-mn-theme="dark"] .mn-billing-green { background-color: #1F3329; border-color: #34583F; color: #BEE3CE; }
html[data-mn-theme="dark"] .alert-warning, html[data-mn-theme="dark"] .mn-billing-yellow { background-color: #3A2E1A; border-color: #6A5326; color: #F0D9A5; }
html[data-mn-theme="dark"] .alert-danger, html[data-mn-theme="dark"] .mn-billing-red    { background-color: #3A2224; border-color: #6B3A3D; color: #F3C4C4; }
html[data-mn-theme="dark"] .mn-billing-label, html[data-mn-theme="dark"] .mn-billing-amount { color: inherit; }

/* Pages carry their own literal colours. Inline styles first (attribute match),
   then the light surface/ink values their <style> blocks reuse. */
html[data-mn-theme="dark"] [style*="background:#fff"], html[data-mn-theme="dark"] [style*="background: #fff"],
html[data-mn-theme="dark"] [style*="background:#FFF"], html[data-mn-theme="dark"] [style*="background:#ffffff"],
html[data-mn-theme="dark"] [style*="background: #ffffff"], html[data-mn-theme="dark"] [style*="background:white"],
html[data-mn-theme="dark"] [style*="background: white"], html[data-mn-theme="dark"] [style*="background-color:#fff"],
html[data-mn-theme="dark"] [style*="background-color: #fff"], html[data-mn-theme="dark"] [style*="background-color:#ffffff"] { background: #231E1A !important; }
html[data-mn-theme="dark"] [style*="background:#FCFAF7"], html[data-mn-theme="dark"] [style*="background: #FCFAF7"],
html[data-mn-theme="dark"] [style*="background:#F5EFE8"], html[data-mn-theme="dark"] [style*="background: #F5EFE8"],
html[data-mn-theme="dark"] [style*="background:#faf7f2"], html[data-mn-theme="dark"] [style*="background:#f8fafc"],
html[data-mn-theme="dark"] [style*="background:#f1f5f9"], html[data-mn-theme="dark"] [style*="background:#f9fafb"],
html[data-mn-theme="dark"] [style*="background:#f3f4f6"] { background: #2D2722 !important; }
html[data-mn-theme="dark"] [style*="color:#1B1613"], html[data-mn-theme="dark"] [style*="color: #1B1613"],
html[data-mn-theme="dark"] [style*="color:#3D352F"], html[data-mn-theme="dark"] [style*="color:#111"],
html[data-mn-theme="dark"] [style*="color:#222"], html[data-mn-theme="dark"] [style*="color:#333"],
html[data-mn-theme="dark"] [style*="color:#000"] { color: #F1EAE2 !important; }
html[data-mn-theme="dark"] [style*="color:#574E48"], html[data-mn-theme="dark"] [style*="color:#6E655D"],
html[data-mn-theme="dark"] [style*="color: #6E655D"], html[data-mn-theme="dark"] [style*="color:#666"],
html[data-mn-theme="dark"] [style*="color:#777"], html[data-mn-theme="dark"] [style*="color:#888"],
html[data-mn-theme="dark"] [style*="color:#64748b"], html[data-mn-theme="dark"] [style*="color:#555"] { color: #B3A99F !important; }
html[data-mn-theme="dark"] [style*="border:1px solid #E8E0D7"], html[data-mn-theme="dark"] [style*="border: 1px solid #E8E0D7"],
html[data-mn-theme="dark"] [style*="border:1px solid #ddd"], html[data-mn-theme="dark"] [style*="border:1px solid #e5e7eb"] { border-color: #3B342E !important; }

/* Photos and video are never recoloured */
html[data-mn-theme="dark"] img, html[data-mn-theme="dark"] video { filter: none; }
html[data-mn-theme="dark"] img:not([src$=".svg"]) { opacity: .95; }

/* The toggle itself */
.mn-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  background: transparent; border: 1px solid var(--mn-header-border, #E8E0D7);
  color: #574E48; padding: 0;
}
.mn-theme-toggle:hover { background: rgba(158, 57, 80, .08); }
.mn-theme-toggle .ico-sun { display: none; }
html[data-mn-theme="dark"] .mn-theme-toggle { color: #E4DBD1; border-color: #4B433B; }
html[data-mn-theme="dark"] .mn-theme-toggle:hover { background: rgba(255, 255, 255, .08); }
html[data-mn-theme="dark"] .mn-theme-toggle .ico-sun { display: block; }
html[data-mn-theme="dark"] .mn-theme-toggle .ico-moon { display: none; }

/* Club pages: surfaces and text now map to the universal --mn-admin-* tokens in
   club-dashboard.css, so they follow this theme automatically. Only the accents need a
   dark value here (maroon text on a dark card is unreadable). */
html[data-mn-theme="dark"] .mn-admin-shell,
html[data-mn-theme="dark"] body {
  --club-gold: #C96A80;
  --club-gold-light: #E7A9B6;
  --club-pink: #C96A80;
  --club-pink-light: #E7A9B6;
  --club-pink-dark: #A8465C;
}
html[data-mn-theme="dark"] .an-card .section-title,
html[data-mn-theme="dark"] .kpi-val { color: #F6F0E8; }

/* Club page subtitles and filter text were too dim on dark (Crystal 2026-10-13) */
html[data-mn-theme="dark"] .ca-page-sub,
html[data-mn-theme="dark"] .vlt-toolbar .text-muted { color: #CFC5BA; }