/* --- DARK MODE SUPPORT --- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #181a20;
    --surface: #23262f;
    --surface-subtle: #23262f;
    --text: #e5e7ef;
    --heading: #fff;
    --muted: #a1a1aa;
    --border: #353945;
    --border-focus: #3b82f6;
    --primary: #60a5fa;
    --primary-hover: #2563eb;
    --primary-soft: #1e293b;
    --link: #60a5fa;
    --success: #34d399;
    --success-soft: #1e293b;
    --warning: #fbbf24;
    --warning-soft: #2d2d2d;
    --danger: #f87171;
    --danger-soft: #2d2d2d;
    --shadow-xs: 0 2px 4px rgba(37,99,235,.10);
    --shadow-sm: 0 4px 8px rgba(37,99,235,.14), 0 2px 4px rgba(37,99,235,.10);
    --shadow-md: 0 8px 24px rgba(37,99,235,.18), 0 4px 8px rgba(37,99,235,.10);
    --shadow-lg: 0 20px 64px rgba(37,99,235,.22), 0 8px 16px rgba(37,99,235,.10);
  }
  body, .layout-grid, .sector-select-main {
    background: var(--bg) !important;
  }
  .card, .section-heading, .toolbar, .sidebar, .site-header, .dashboard-hero, .metric-card {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
  }
  .sidebar a, .sidebar a.active {
    color: var(--text) !important;
    background: transparent !important;
  }
  .sidebar a.active {
    background: linear-gradient(135deg, var(--primary-soft) 0%, #23262f 100%) !important;
    color: var(--primary) !important;
  }
}
.dark-mode {
  --bg: #181a20;
  --surface: #23262f;
  --surface-subtle: #23262f;
  --text: #e5e7ef;
  --heading: #fff;
  --muted: #a1a1aa;
  --border: #353945;
  --border-focus: #3b82f6;
  --primary: #60a5fa;
  --primary-hover: #2563eb;
  --primary-soft: #1e293b;
  --link: #60a5fa;
  --success: #34d399;
  --success-soft: #1e293b;
  --warning: #fbbf24;
  --warning-soft: #2d2d2d;
  --danger: #f87171;
  --danger-soft: #2d2d2d;
  --shadow-xs: 0 2px 4px rgba(37,99,235,.10);
  --shadow-sm: 0 4px 8px rgba(37,99,235,.14), 0 2px 4px rgba(37,99,235,.10);
  --shadow-md: 0 8px 24px rgba(37,99,235,.18), 0 4px 8px rgba(37,99,235,.10);
  --shadow-lg: 0 20px 64px rgba(37,99,235,.22), 0 8px 16px rgba(37,99,235,.10);
}
.dark-mode body, .dark-mode .layout-grid, .dark-mode .sector-select-main {
  background: var(--bg) !important;
}
.dark-mode .card, .dark-mode .section-heading, .dark-mode .toolbar, .dark-mode .sidebar, .dark-mode .site-header, .dark-mode .dashboard-hero, .dark-mode .metric-card {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.dark-mode .sidebar a, .dark-mode .sidebar a.active {
  color: var(--text) !important;
  background: transparent !important;
}
.dark-mode .sidebar a.active {
  background: linear-gradient(135deg, var(--primary-soft) 0%, #23262f 100%) !important;
  color: var(--primary) !important;
}