:root {
  --etfm-bg: #f8fafc;
  --etfm-bg-soft: #eef2f7;
  --etfm-surface: #ffffff;
  --etfm-surface-raised: #ffffff;
  --etfm-surface-muted: #f1f5f9;
  --etfm-border: #e2e8f0;
  --etfm-border-strong: #cbd5e1;
  --etfm-text: #0f172a;
  --etfm-text-soft: #475569;
  --etfm-muted: #64748b;
  --etfm-subtle: #94a3b8;
  --etfm-header: rgba(255, 255, 255, 0.9);
  --etfm-shadow: rgba(15, 23, 42, 0.10);
  color-scheme: light;
}

html[data-theme="dark"] {
  --etfm-bg: #0b1220;
  --etfm-bg-soft: #0e1728;
  --etfm-surface: #111c2e;
  --etfm-surface-raised: #162338;
  --etfm-surface-muted: #1b2a40;
  --etfm-border: #26364d;
  --etfm-border-strong: #34465f;
  --etfm-text: #e5edf7;
  --etfm-text-soft: #c3cfdd;
  --etfm-muted: #94a3b8;
  --etfm-subtle: #718198;
  --etfm-header: rgba(11, 18, 32, 0.9);
  --etfm-shadow: rgba(2, 6, 23, 0.34);
  color-scheme: dark;
}

html,
body {
  transition: background-color 180ms ease, color 180ms ease;
}

html[data-theme="dark"] body {
  background: var(--etfm-bg) !important;
  color: var(--etfm-text) !important;
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-white\/90,
html[data-theme="dark"] .bg-white\/95,
html[data-theme="dark"] .bg-surface,
html[data-theme="dark"] .bg-card {
  background-color: var(--etfm-surface) !important;
}

html[data-theme="dark"] .bg-slate-50,
html[data-theme="dark"] .bg-slate-50\/40,
html[data-theme="dark"] .bg-slate-50\/50,
html[data-theme="dark"] .bg-mist {
  background-color: var(--etfm-bg-soft) !important;
}

html[data-theme="dark"] .bg-slate-100,
html[data-theme="dark"] .bg-slate-100\/70,
html[data-theme="dark"] .bg-slate-100\/80 {
  background-color: var(--etfm-surface-muted) !important;
}

html[data-theme="dark"] .from-white,
html[data-theme="dark"] .via-white,
html[data-theme="dark"] .to-white,
html[data-theme="dark"] .from-slate-50,
html[data-theme="dark"] .to-slate-50 {
  --tw-gradient-from: var(--etfm-surface) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(17 28 46 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--etfm-surface-raised) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

html[data-theme="dark"] .from-emerald-50,
html[data-theme="dark"] .to-sky-50 {
  --tw-gradient-from: rgba(6, 78, 59, 0.24) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(7, 89, 133, 0.18) var(--tw-gradient-to-position) !important;
}

html[data-theme="dark"] .text-slate-950,
html[data-theme="dark"] .text-slate-900,
html[data-theme="dark"] .text-slate-800,
html[data-theme="dark"] .text-ink,
html[data-theme="dark"] .text-primary {
  color: var(--etfm-text) !important;
}

html[data-theme="dark"] .text-slate-700,
html[data-theme="dark"] .text-slate-600 {
  color: var(--etfm-text-soft) !important;
}

html[data-theme="dark"] .text-slate-500,
html[data-theme="dark"] .text-muted {
  color: var(--etfm-muted) !important;
}

html[data-theme="dark"] .text-slate-400,
html[data-theme="dark"] .text-slate-300 {
  color: var(--etfm-subtle) !important;
}

html[data-theme="dark"] .border-slate-100,
html[data-theme="dark"] .border-slate-200,
html[data-theme="dark"] .border-slate-200\/80,
html[data-theme="dark"] .border-line,
html[data-theme="dark"] .border-border {
  border-color: var(--etfm-border) !important;
}

html[data-theme="dark"] .border-slate-300 {
  border-color: var(--etfm-border-strong) !important;
}

html[data-theme="dark"] header.bg-white\/90,
html[data-theme="dark"] header.bg-white\/95 {
  background-color: var(--etfm-header) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  border-color: var(--etfm-border-strong) !important;
  background-color: var(--etfm-surface-muted) !important;
  color: var(--etfm-text) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--etfm-subtle) !important;
}

html[data-theme="dark"] .shadow-sm,
html[data-theme="dark"] .shadow-md,
html[data-theme="dark"] .shadow-lg,
html[data-theme="dark"] .shadow-xl,
html[data-theme="dark"] .shadow-2xl {
  --tw-shadow-color: var(--etfm-shadow) !important;
}

html[data-theme="dark"] .hover\:bg-slate-50:hover,
html[data-theme="dark"] .hover\:bg-slate-100:hover,
html[data-theme="dark"] .hover\:bg-slate-800\/35:hover,
html[data-theme="dark"] .group:hover .group-hover\:bg-slate-50 {
  background-color: var(--etfm-surface-muted) !important;
}

html[data-theme="dark"] .hover\:text-slate-900:hover,
html[data-theme="dark"] .hover\:text-white:hover {
  color: var(--etfm-text) !important;
}

html[data-theme="dark"] .shell-border,
html[data-theme="dark"] .glass {
  border-color: var(--etfm-border) !important;
  background: rgba(17, 28, 46, 0.94) !important;
  box-shadow: 0 18px 42px rgba(2, 6, 23, 0.18) !important;
}

html[data-theme="dark"] .drawdown-zoom {
  border-color: var(--etfm-border-strong) !important;
  background: var(--etfm-surface-muted) !important;
}

html[data-theme="dark"] .drawdown-zoom-mask {
  background: rgba(11, 18, 32, 0.58) !important;
}

html[data-theme="dark"] .drawdown-zoom-handle {
  border-color: #32658a !important;
  background: var(--etfm-surface-raised) !important;
}

html[data-theme="dark"] .heatmap-cell {
  color: #dbe7f3 !important;
}

.theme-toggle {
  display: inline-grid;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--etfm-border);
  border-radius: 0.65rem;
  background: var(--etfm-surface);
  color: var(--etfm-text-soft);
  box-shadow: 0 8px 24px var(--etfm-shadow);
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.theme-toggle:hover {
  transform: translateY(-1px);
  border-color: #0f766e;
  color: #0f766e;
}

.theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.18);
}

.theme-toggle svg {
  width: 1.15rem;
  height: 1.15rem;
}

.theme-toggle .theme-icon-sun,
html[data-theme="dark"] .theme-toggle .theme-icon-moon {
  display: none;
}

html[data-theme="dark"] .theme-toggle .theme-icon-sun {
  display: block;
}

/* The four strategy monitors use a compact custom layout instead of Tailwind. */
html[data-theme="dark"] body > .container {
  border: 1px solid var(--etfm-border);
  background: var(--etfm-surface) !important;
  box-shadow: 0 18px 42px rgba(2, 6, 23, 0.3) !important;
}

html[data-theme="dark"] body > .container h1,
html[data-theme="dark"] body > .container .card-name,
html[data-theme="dark"] body > .container .card-score-label,
html[data-theme="dark"] body > .container .score-mid,
html[data-theme="dark"] body > .container .stability-mid,
html[data-theme="dark"] body > .container .return-mid,
html[data-theme="dark"] body > .container .return10-mid,
html[data-theme="dark"] body > .container .bias-mid {
  color: var(--etfm-text) !important;
}

html[data-theme="dark"] body > .container .update-time,
html[data-theme="dark"] body > .container .card-label {
  color: var(--etfm-muted) !important;
}

html[data-theme="dark"] body > .container .card,
html[data-theme="dark"] body > .container th {
  background: var(--etfm-surface-muted) !important;
  color: var(--etfm-text) !important;
}

html[data-theme="dark"] body > .container td,
html[data-theme="dark"] body > .container th,
html[data-theme="dark"] body > .container .card-score-row {
  border-color: var(--etfm-border) !important;
}

html[data-theme="dark"] body > .container tr:hover {
  background: var(--etfm-surface-muted) !important;
}

html[data-theme="dark"] body > .container .code,
html[data-theme="dark"] body > .container .card-code {
  background: #233249 !important;
  color: #cbd5e1 !important;
}

html[data-theme="dark"] body > .container .trial-expired-banner {
  border-color: #78350f !important;
  background: rgba(120, 53, 15, 0.32) !important;
  color: #fde68a !important;
}

/* Admin pages were originally dark-only; these overrides give them the same light default. */
html:not([data-theme="dark"]) body.admin-theme {
  background: var(--etfm-bg) !important;
  color: var(--etfm-text) !important;
}

html:not([data-theme="dark"]) .admin-theme .bg-slate-950,
html:not([data-theme="dark"]) .admin-theme .bg-slate-950\/80 {
  background-color: var(--etfm-bg-soft) !important;
}

html:not([data-theme="dark"]) .admin-theme .bg-slate-900,
html:not([data-theme="dark"]) .admin-theme .bg-slate-900\/80,
html:not([data-theme="dark"]) .admin-theme .bg-slate-900\/90 {
  background-color: var(--etfm-surface) !important;
}

html:not([data-theme="dark"]) .admin-theme .text-slate-100,
html:not([data-theme="dark"]) .admin-theme .text-white {
  color: var(--etfm-text) !important;
}

html:not([data-theme="dark"]) .admin-theme .text-slate-300,
html:not([data-theme="dark"]) .admin-theme .text-slate-400 {
  color: var(--etfm-text-soft) !important;
}

html:not([data-theme="dark"]) .admin-theme .text-slate-500,
html:not([data-theme="dark"]) .admin-theme .text-slate-600 {
  color: var(--etfm-muted) !important;
}

html:not([data-theme="dark"]) .admin-theme .border-slate-700,
html:not([data-theme="dark"]) .admin-theme .border-slate-800 {
  border-color: var(--etfm-border) !important;
}

html:not([data-theme="dark"]) .admin-theme input,
html:not([data-theme="dark"]) .admin-theme select {
  border-color: var(--etfm-border-strong) !important;
  background: var(--etfm-surface) !important;
  color: var(--etfm-text) !important;
}

html[data-theme="dark"] .data-loading-panel {
  background: rgba(11, 18, 32, 0.74) !important;
}

html[data-theme="dark"] .data-loading-content,
html[data-theme="dark"] .page-loading-card {
  border-color: var(--etfm-border) !important;
  background: rgba(17, 28, 46, 0.94) !important;
  color: var(--etfm-text) !important;
}

@media (prefers-reduced-motion: reduce) {
  html,
  body,
  .theme-toggle {
    transition: none !important;
  }
}