/* ==========================================================
   Design tokens — Dengue & Waterlog Management System
   Source: ui_design_plan.md
   ========================================================== */
:root {
  /* Primary — Health Green */
  --primary-900: #0B3D2E;
  --primary-700: #146C43;
  --primary-500: #1E8A5F;
  --primary-300: #6FCF97;
  --primary-100: #E6F7EE;

  /* Risk scale — deliberately a different hue family from primary green */
  --risk-low: #2E9E5B;
  --risk-medium: #F5A623;
  --risk-high: #D64545;
  --risk-low-bg: #E9F7EF;
  --risk-medium-bg: #FEF3E2;
  --risk-high-bg: #FCEAEA;

  /* Neutrals */
  --gray-900: #1A1D1E;
  --gray-600: #5C6660;
  --gray-300: #D9E2DC;
  --gray-100: #F7FAF8;
  --white: #FFFFFF;

  /* Type */
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Spacing scale (8px base) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;

  /* Shape / elevation */
  --radius-sm: 8px;
  --radius-md: 12px;
  --shadow-card: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-hover: 0 12px 28px rgba(11,61,46,0.14);
  --shadow-btn: 0 4px 12px rgba(20,108,67,0.25);

  /* Motion */
  --ease-out: cubic-bezier(.16,.84,.44,1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 900ms;
}

/* Shared entrance keyframes — reused across auth, report, and admin pages */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes fieldErrorIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================
   Dark mode — token overrides + cross-cutting fixes.
   Loaded on every page (dashboards, public site, auth), so this is
   the one place theme support lives. Toggled by adding `dark-mode`
   to <html> (assets/js/theme.js wires the click; a small inline
   guard script in each page's <head> applies it before first paint
   to avoid a flash of the wrong theme, falling back to the OS/browser
   `prefers-color-scheme` when the user hasn't chosen explicitly).

   Most of this project's own components (cards, sidebars, tables,
   forms, buttons) are already built on the --white/--gray-* tokens
   below, so redefining the tokens re-themes almost everything
   automatically. The rules after the token block only patch the
   handful of places — mostly Bootstrap's own default styling — that
   don't read those tokens and would otherwise stay a hardcoded
   light color (e.g. a white Bootstrap modal, or light text turning
   invisible on a `bg-white` table).
   ========================================================== */
html.dark-mode {
  --gray-900: #EAF2ED;
  --gray-600: #A9B7B0;
  --gray-300: #2B3530;
  --gray-100: #121815;
  --white: #1B2420;
  --primary-100: #16332A;
}

html.dark-mode body { background: var(--gray-100); color: var(--gray-900); }

/* Bootstrap form controls (login/register/contact/report forms,
   filters, dashboards) carry their own hardcoded light background
   instead of our tokens. */
html.dark-mode .form-control,
html.dark-mode .form-select,
html.dark-mode .input-group-text {
  background-color: var(--gray-100);
  color: var(--gray-900);
  border-color: var(--gray-300);
}
html.dark-mode .form-control::placeholder { color: var(--gray-600); }
html.dark-mode .form-control:focus,
html.dark-mode .form-select:focus { background-color: var(--gray-100); color: var(--gray-900); }
html.dark-mode .form-check-input { background-color: var(--gray-100); border-color: var(--gray-300); }

/* Some tables/inputs use the Bootstrap `bg-white` utility to force a
   light surface; left alone, our text tokens turn light in dark mode
   and become invisible against that forced white. */
html.dark-mode .bg-white { background-color: var(--white) !important; }

/* Bootstrap dropdown menus (topbar notifications/user menu) */
html.dark-mode .dropdown-menu { background-color: var(--white); border-color: var(--gray-300); }
html.dark-mode .dropdown-item { color: var(--gray-900); }
html.dark-mode .dropdown-item:hover,
html.dark-mode .dropdown-item:focus { background-color: var(--primary-100); color: var(--gray-900); }
html.dark-mode .dropdown-divider { border-color: var(--gray-300); }

/* Bootstrap tables */
html.dark-mode .table {
  --bs-table-color: var(--gray-900);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--gray-300);
  color: var(--gray-900);
}
html.dark-mode .table-hover > tbody > tr:hover > * {
  --bs-table-hover-bg: var(--primary-100);
  color: var(--gray-900);
}

/* Bootstrap accordion (FAQ) — the button's background stays
   Bootstrap's hardcoded white while its text follows our --gray-900
   token, which is unreadable once that token flips to a light color. */
html.dark-mode .accordion-item { background-color: var(--white); border-color: var(--gray-300); color: var(--gray-900); }
html.dark-mode .accordion-button { background-color: var(--white); color: var(--gray-900); }
html.dark-mode .accordion-button:not(.collapsed) { background-color: var(--primary-100); color: var(--gray-900); box-shadow: none; }
html.dark-mode .accordion-button::after { filter: invert(1) grayscale(1) brightness(1.8); }
html.dark-mode .accordion-body { color: var(--gray-900); }

/* Bootstrap modals */
html.dark-mode .modal-content { background-color: var(--white); color: var(--gray-900); border-color: var(--gray-300); }
html.dark-mode .modal-header,
html.dark-mode .modal-footer { border-color: var(--gray-300); }
html.dark-mode .btn-close { filter: invert(1) grayscale(1) brightness(1.8); }

/* Leaflet popups & controls (Risk Map, Reports Map, Ward Workload,
   Dengue Heatmap) keep a hardcoded white chrome by default. */
html.dark-mode .leaflet-popup-content-wrapper,
html.dark-mode .leaflet-popup-tip { background: var(--white); color: var(--gray-900); }
html.dark-mode .leaflet-bar a,
html.dark-mode .leaflet-control-layers-toggle,
html.dark-mode .leaflet-control-layers-expanded {
  background: var(--white); color: var(--gray-900); border-color: var(--gray-300);
}
html.dark-mode .leaflet-bar a:hover { background: var(--primary-100); }

/* Smooth the light/dark switch instead of an instant color snap */
body, .form-control, .form-select, .input-group-text, .dropdown-menu,
.table, .accordion-item, .accordion-button, .modal-content {
  transition: background-color var(--dur-med) var(--ease-out),
              color var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out);
}

/* ---- Dark-mode toggle button ----
   Shared moon/sun icon swap for every #darkModeToggle instance
   (dashboard topbar, public nav, auth pages) — icon markup is the
   same two <i> tags everywhere, this just decides which shows. */
#darkModeToggle .dark-icon-on { display: none; }
html.dark-mode #darkModeToggle .dark-icon-off { display: none; }
html.dark-mode #darkModeToggle .dark-icon-on { display: inline; color: #F5A623; }

/* Light/card-background button chrome, for placing the toggle
   outside the admin dashboards (which already have .icon-btn from
   dashboard.css doing the same job). Public nav overrides this to
   fit its dark brand navbar — see .navbar-gov .theme-toggle-btn in
   style.css. */
.theme-toggle-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--gray-300); background: var(--white); color: var(--gray-900);
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.theme-toggle-btn:hover { background: var(--primary-100); color: var(--primary-700); }