/* ==========================================================================
   Theme Dark / Light Mode — CSS Variables & Aturan
   File terpisah dari resident-ui.css agar terkelola sendiri.
   Semua aturan [data-bs-theme="dark"] dimuat di file ini.
   ========================================================================== */

/* ------------------------------------------------------------------
   1. Color Variables — Light Mode (default :root)
   Variable baru yang belum ada di resident-ui.css.
   Ditambahkan di sini agar dark mode counterparts bisa di-override.
   Hanya definisi variabel — belum dipakai di file lain (Task 4 constraint).
   ------------------------------------------------------------------ */

:root {
  /* Badge / status warna — light mode */
  --color-badge-primary: #2454ba;
  --color-badge-primary-bg: #eaf0ff;
  --color-badge-success: #18794e;
  --color-badge-success-bg: #daf6e8;
  --color-badge-warning: #9b6a00;
  --color-badge-warning-bg: #fff3d6;
  --color-badge-danger: #b4233c;
  --color-badge-danger-bg: #ffeaed;

  /* Brand warna — light mode */
  --color-brand: #3874ff;
  --color-brand-deep: #7aa2f7;
  --color-brand-light: #dce7ff;
  --color-brand-medium: #2d61d8;
  --color-brand-border-soft: #c7d7fe;

  /* Status / indikator */
  --color-notif: #e11d48;

  /* Surface variant — light mode */
  --color-blue-soft: #eaf0ff;
  --color-blue-softest: #eef3ff;

  /* Weather widget icon colors — light + dark sama (icon fill tidak berubah) */
  --color-weather-clear: #f59e0b;
  --color-weather-cloud-bg: #94a3b8;
  --color-weather-rain: #3b82f6;
  --color-weather-storm: #6366f1;
  --color-weather-unknown: #cbd5e1;

  /* Inline hex di template — diganti var() di Task 7 */
  --color-surface-muted: #f0f4f5;
  --color-border-muted: #dddddd;
  --color-chart-line: #17191F;
  --color-print-border: #999999;

  /* Text warna khusus */
  --color-dark-slate: #0f172a;
  --color-sky-700: #0369a1;

  /* site.css — light mode app colors */
  --app-text-light: #1a2332;
  --app-accent-light: #0d6e6e;
  --app-accent-deep-light: #0a5555;
  --app-muted-light: #5c6b7a;
  --pub-surface-light: #f7f4ef;
  --app-sand-light: #e8e0d4;
  --color-soft-white: #f4f7f6;
  --color-white: #ffffff;
  --site-hero-radial-light: #1a8a8a;
  --site-hero-radial-edge-light: #244055;
  --site-footer-rich-bg: #0f1a22;
  --site-video-fallback-link: #9ae6e0;
  --site-dark-surface: #1a2332;
  --site-dark-card-ph-secondary: #2a3b52;
  --site-dark-hero-surface: #0f1723;
  --site-table-border-dark: #3d4a5c;
  --site-badge-green-dark: #2b7a5a;
  --site-badge-orange: #f39c12;
  --site-badge-green-light: #27ae60;
  --site-badge-blue-dark: #295092;
}

/* ------------------------------------------------------------------
   2. Dark Mode — CSS Variables Override
   ------------------------------------------------------------------ */

[data-bs-theme="dark"] {
  color-scheme: dark;
  --bs-light-rgb: 24, 34, 48;
  --bs-dark-rgb: 220, 231, 255;
  --app-text: #dce7ff;
  --app-accent: #3874ff;
  --app-accent-deep: #7aa2f7;
  --app-sand: #253550;

  /* === Color Variables — Dark Mode Override (Task 4) === */

  /* Badge / status warna — dark mode */
  --color-badge-primary: #7aa2f7;
  --color-badge-primary-bg: #1e3a6a;
  --color-badge-success: #5fcb8a;
  --color-badge-success-bg: #1a3d2e;
  --color-badge-warning: #f0b429;
  --color-badge-warning-bg: #3d3320;
  --color-badge-danger: #f5768e;
  --color-badge-danger-bg: #3d1a2a;

  /* Brand warna — dark mode */
  --color-brand: #7aa2f7;
  --color-brand-deep: #7aa2f7;
  --color-brand-light: #dce7ff;
  --color-brand-medium: #3874ff;
  --color-brand-border-soft: #3d5a8a;

  /* Status / indikator — dark mode */
  --color-notif: #e11d48;

  /* Surface variant — dark mode */
  --color-blue-soft: #1e3a6a;
  --color-blue-softest: #253550;

  /* Weather widget icon colors — tidak berubah antara mode */
  --color-weather-clear: #f59e0b;
  --color-weather-cloud-bg: #94a3b8;
  --color-weather-rain: #3b82f6;
  --color-weather-storm: #6366f1;
  --color-weather-unknown: #cbd5e1;

  /* Inline hex di template — dark mode override (Task 7) */
  --color-surface-muted: var(--app-surface);
  --color-border-muted: var(--app-border);
  --color-chart-line: var(--app-muted);
  --color-print-border: #999999;

  /* Text warna khusus — dark mode */
  --color-dark-slate: #dce7ff;
  --color-sky-700: #7aa2f7;

  /* === Dark Mode Override — Variabel dari Task 5-6 (Refactor site.css & resident-ui.css) === */

  /* "Light" suffixed variables — light mode defaults, overridden di dark mode oleh variable non-suffixed */
  --app-text-light: #1a2332;
  --app-accent-light: #0d6e6e;
  --app-accent-deep-light: #0a5555;
  --app-muted-light: #a7b0c3;
  --pub-surface-light: #f7f4ef;
  --app-sand-light: #253550;

  /* Warna teks khusus */
  --color-soft-white: #dce7ff;
  --color-white: #ffffff;

  /* Site-specific: hero radial gradient (digunakan di light mode, tetap sama di dark mode) */
  --site-hero-radial-light: #1a8a8a;
  --site-hero-radial-edge-light: #244055;

  /* Site-specific: footer & video fallback */
  --site-footer-rich-bg: #0f1a22;
  --site-video-fallback-link: #7ae0c8;

  /* Site-specific: dark surface variables (sudah gelap, tetap sama di dark mode) */
  --site-dark-surface: #1a2332;
  --site-dark-card-ph-secondary: #2a3b52;
  --site-dark-hero-surface: #0f1723;
  --site-table-border-dark: #4a5a70;

  /* Site-specific: badge colors (digunakan di light mode site-card, tetap sama) */
  --site-badge-green-dark: #2b7a5a;
  --site-badge-orange: #f39c12;
  --site-badge-green-light: #27ae60;
  --site-badge-blue-dark: #295092;
}

/* Bootstrap utility class dark mode overrides */
/* Class-class yang hardcode warna tetap terang/putih harus adapt di dark mode */

[data-bs-theme="dark"] .bg-white {
  background-color: var(--bs-body-bg) !important;
}

[data-bs-theme="dark"] .text-dark {
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .bg-light {
  background-color: var(--bs-tertiary-bg) !important;
}

[data-bs-theme="dark"] .text-white {
  color: var(--bs-body-color) !important;
}

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

[data-bs-theme="dark"] .text-muted {
  color: var(--bs-secondary-color) !important;
}

[data-bs-theme="dark"] body {
  background: #0f1723;
  --app-border: #293445;
  --app-surface: #182230;
  --app-muted: #a7b0c3;
  --sidebar-scroll-thumb: rgba(167, 176, 195, .28);
  --sidebar-scroll-thumb-hover: rgba(167, 176, 195, .45);
  --bs-body-bg: #0f1723;
  --bs-body-color: #d5dcec;
  --surface-muted: #222b3a;
  color: #dce7ff;
}

/* ------------------------------------------------------------------
   3. Dark Mode — Component Overrides
   ------------------------------------------------------------------ */

/* Brand mark & avatar */
[data-bs-theme="dark"] .brand-mark,
[data-bs-theme="dark"] .avatar {
  background: #3874ff;
}

[data-bs-theme="dark"] .avatar {
  background: #2a4a8a;
  color: #dce7ff;
}

/* Notif badge */
[data-bs-theme="dark"] .notif-badge {
  background: #e11d48;
  border-color: var(--app-surface);
}

/* Sidebar nav link */
[data-bs-theme="dark"] .app-sidebar .nav-link:hover,
[data-bs-theme="dark"] .app-sidebar .nav-link.active {
  background: #253550;
  color: #7aa2f7;
}

/* Sidebar edge trigger */
[data-bs-theme="dark"] .sidebar-edge-trigger:hover {
  background: #253550;
  color: #7aa2f7;
}

[data-bs-theme="dark"] .sidebar-edge-trigger {
  background: var(--app-surface);
  border-color: var(--app-border);
}

/* Metric icon */
[data-bs-theme="dark"] .metric-icon {
  background: #253550;
  color: #7aa2f7;
}

/* Action card */
[data-bs-theme="dark"] .action-card:hover {
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .4);
}

/* Demography metrics */
[data-bs-theme="dark"] .demography-metrics--dashboard .demography-metrics__item:hover {
  background: #1e2a3a;
}

/* Search autocomplete */
[data-bs-theme="dark"] .app-search-autocomplete__menu {
  background: var(--app-surface, #182230);
  border-color: var(--app-border);
  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .3);
}

[data-bs-theme="dark"] .app-search-autocomplete__item:hover,
[data-bs-theme="dark"] .app-search-autocomplete__item.is-active {
  background: var(--app-bg, #253550);
}

[data-bs-theme="dark"] .app-search-autocomplete__label {
  color: var(--app-text, #dce7ff);
}

/* Filter chip */
[data-bs-theme="dark"] .app-filter-chip {
  background: var(--app-bg, #253550);
  border-color: var(--app-border);
  color: var(--app-muted);
}

[data-bs-theme="dark"] .app-filter-chip:hover {
  background: #2d3f57;
  color: var(--app-text, #dce7ff);
}

[data-bs-theme="dark"] .app-filter-chip--active {
  background: #1e3a6a;
  border-color: #3874ff;
  color: #7aa2f7;
}

[data-bs-theme="dark"] .app-filter-panel__section {
  background: var(--app-bg, #1e2a3a);
  border-color: var(--app-border);
}

/* Donut legend */
[data-bs-theme="dark"] .action-donut-legend__link:hover {
  background: var(--surface-muted, #253550);
}

/* Badge soft — dark mode variant */
[data-bs-theme="dark"] .badge-soft-primary {
  background: #1e3a6a;
  color: #7aa2f7;
}

[data-bs-theme="dark"] .badge-soft-success {
  background: #1a3d2e;
  color: #5fcb8a;
}

[data-bs-theme="dark"] .badge-soft-warning {
  background: #3d3320;
  color: #f0b429;
}

[data-bs-theme="dark"] .badge-soft-danger {
  background: #3d1a2a;
  color: #f5768e;
}

/* Module hero */
[data-bs-theme="dark"] .module-hero {
  background: linear-gradient(120deg, #1e3a8a, #3478f6);
}

/* ------------------------------------------------------------------
   4. Dark Mode — Weather Widget
   ------------------------------------------------------------------ */

[data-bs-theme="dark"] .weather-widget {
  background: linear-gradient(135deg, #182230 0%, #1e2a3a 50%, #182230 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.2) !important;
}

[data-bs-theme="dark"] .weather-widget__icon,
[data-bs-theme="dark"] .weather-widget__day {
  background: #253550 !important;
  border-color: var(--app-border) !important;
}

[data-bs-theme="dark"] .weather-widget__temp,
[data-bs-theme="dark"] .weather-widget__day-temp {
  color: #dce7ff !important;
}

[data-bs-theme="dark"] .weather-widget__footer {
  border-color: var(--app-border);
}

[data-bs-theme="dark"] .weather-topbar-pill {
  background: #1e2a3a !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
  color: #7aa2f7 !important;
}

/* ------------------------------------------------------------------
   5. Dark Mode — Bootstrap Hardcoded Utility Overrides
   ------------------------------------------------------------------ */

[data-bs-theme="dark"] .bg-white {
  background-color: var(--app-surface, #182230) !important;
  color: var(--bs-body-color, #dce7ff) !important;
}

[data-bs-theme="dark"] .card-header.bg-white {
  background-color: var(--app-surface, #182230) !important;
  border-bottom-color: var(--app-border) !important;
  color: var(--bs-body-color, #dce7ff) !important;
}

[data-bs-theme="dark"] .bg-light {
  background-color: var(--app-surface-2, #1e2a3a) !important;
  color: var(--bs-body-color, #dce7ff) !important;
}

[data-bs-theme="dark"] .text-dark {
  color: var(--bs-body-color, #dce7ff) !important;
}

[data-bs-theme="dark"] a.text-dark {
  color: var(--bs-body-color, #dce7ff) !important;
}

[data-bs-theme="dark"] a.text-dark:hover {
  color: #7aa2f7 !important;
}

[data-bs-theme="dark"] .badge.bg-light.text-dark {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #dce7ff !important;
  border: 1px solid var(--app-border) !important;
}

[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light > th,
[data-bs-theme="dark"] .table-light > td {
  background-color: #1e2a3a !important;
  color: #dce7ff !important;
  border-color: var(--app-border) !important;
}

/* ------------------------------------------------------------------
   6. Dark Mode — Table & Form Controls
   ------------------------------------------------------------------ */

[data-bs-theme="dark"] .table th {
  background: #253550;
  color: #a7b0c3;
}

[data-bs-theme="dark"] .table td {
  background: #182230;
  color: #c8d0e0;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: #1e2a3a !important;
  color: #dce7ff !important;
  border-color: var(--app-border) !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: #253550 !important;
  color: #ffffff !important;
  border-color: #3874ff !important;
  box-shadow: 0 0 0 0.25rem rgba(56, 116, 255, 0.25) !important;
}

/* ------------------------------------------------------------------
   7. Dark Mode — Theme Toggle Icon
   ------------------------------------------------------------------ */

#themeToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  color: var(--bs-body-color);
}

#themeToggle i {
  font-size: 1.15rem;
  line-height: 1;
  visibility: visible !important;
}

#themeToggle:hover {
  background-color: var(--bs-secondary-bg);
}

/* ==========================================================================
   8. Dark Mode — Modals
   ========================================================================== */

[data-bs-theme="dark"] .modal-content {
  background-color: #182230 !important;
  color: #dce7ff !important;
  border: 1px solid #293445 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6) !important;
}

[data-bs-theme="dark"] .modal-header {
  background-color: #182230 !important;
  border-bottom: 1px solid #293445 !important;
}

[data-bs-theme="dark"] .modal-body {
  background-color: #182230 !important;
  color: #dce7ff !important;
}

[data-bs-theme="dark"] .modal-footer {
  background-color: #131b26 !important;
  border-top: 1px solid #293445 !important;
}