/* ============================================================
   LIGTAS GIS System — Royal Blue Design System
   HTML5 + Bootstrap 5 + Custom CSS
   ============================================================ */

/* ── CSS VARIABLES ── */
:root {
  --royal: #1a237e;
  --royal-dark: #0d1357;
  --royal-mid: #283593;
  --royal-light: #3949ab;
  --accent: #1565c0;
  --accent-light: #e3f0ff;
  --sky: #42a5f5;
  --sky-light: #e1f5fe;
  --suspected: #c62828;
  --success: #2e7d32;
  --warning: #e65100;
  --bg: #f0f4ff;
  --bg-card: #ffffff;
  --text: #0d1357;
  --text-muted: #546e7a;
  --border: #c5cae9;
  --shadow: 0 2px 16px rgba(26,35,126,.10);
  --shadow-lg: 0 8px 40px rgba(26,35,126,.18);
  --radius: 16px;
  --radius-sm: 10px;
}

/* ── DARK MODE ── */
.dark-mode {
  --bg: #0a0f2e;
  --bg-card: #131a45;
  --text: #e8eaf6;
  --text-muted: #9fa8da;
  --border: #283593;
  --accent-light: #1a237e;
  --sky-light: #0d1357;
}
/* ── DARK MODE: HEADER ── */
.dark-mode .ligtas-header {
  background:
    linear-gradient(rgba(21,151,213,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,151,213,0.06) 1px, transparent 1px),
    linear-gradient(135deg, #060c2e 0%, #0d1357 60%, #0a1a6e 100%);
  background-size: 40px 40px, 40px 40px, auto;
  border-image: linear-gradient(90deg, var(--sky), var(--royal-light)) 1;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .4);
}
.dark-mode .ligtas-header,
.dark-mode .header-name,
.dark-mode .header-sub,
.dark-mode .status-label {
  color: #e8eaf6;
}
/* ── DARK MODE: FOOTER ── */
.dark-mode .ligtas-footer {
  background: linear-gradient(135deg, #060a24, #0d1357);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
/* ── DARK MODE: NAV BAR ── */
.dark-mode .ligtas-nav {
  background:
    linear-gradient(rgba(21,151,213,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,151,213,0.05) 1px, transparent 1px),
    linear-gradient(135deg, #0a1040 0%, #0d1357 100%) !important;
  background-size: 40px 40px, 40px 40px, auto !important;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  box-shadow: none;
}
.dark-mode .ligtas-nav a,
.dark-mode .ligtas-nav .nav-link {
  color: #c5cae9;
}
.dark-mode .ligtas-nav .active,
.dark-mode .ligtas-nav .nav-link.active {
  background: var(--royal-light);
  color: #fff;
}

/* ── DARK MODE: CARDS + CARD HEADERS ── */
.dark-mode .ligtas-card {
  background: #1a2356 !important;
  border: 1px solid rgba(120, 144, 220, .15) !important;
  color: #e8eaf6 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .4);
}
/* ── DARK MODE: FORM INPUTS ── */
.dark-mode .form-control,
.dark-mode .form-select {
  background: rgba(255, 255, 255, .04) !important;
  border-color: rgba(120, 144, 220, .2) !important;
  color: #e8eaf6 !important;
}
.dark-mode .form-control:focus,
.dark-mode .form-select:focus {
  border-color: var(--sky) !important;
  box-shadow: 0 0 0 3px rgba(66, 165, 245, .15) !important;
  background: rgba(255, 255, 255, .06) !important;
}
.dark-mode .form-control::placeholder { color: #7986cb !important; }
.dark-mode .year-btn {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(120, 144, 220, .2);
  color: #e8eaf6;
}
.dark-mode .ligtas-card-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: #e8eaf6 !important;
  padding-bottom: .75rem;
  margin-bottom: 1rem;
}

/* ── DARK MODE: TABLES ── */
.dark-mode table {
  color: #e8eaf6;
}
.dark-mode table thead {
  background: rgba(255, 255, 255, .05);
}
.dark-mode table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

/* ── DARK MODE: BODY GRADIENT ── */
.dark-mode body {
  background: linear-gradient(180deg, #0a0f2e 0%, #131a45 100%) !important;
  min-height: 100vh;
}

/* ── DARK MODE: DISEASE PILLS (inactive) ── */
.dark-mode .disease-pill,
.dark-mode .badge.bg-light {
  background: rgba(255, 255, 255, .08) !important;
  color: #c5cae9 !important;
  border: 1px solid rgba(255, 255, 255, .1);
}
.dark-mode body { background: var(--bg) !important; color: var(--text) !important; }
.dark-mode .card, .dark-mode .ligtas-card { background: var(--bg-card); border-color: var(--border); }
.dark-mode .form-control, .dark-mode .form-select { background: #1a237e22; border-color: var(--border); color: var(--text); }
.dark-mode .ligtas-nav { background: rgba(13,19,87,.98); }
/* ── DARK MODE: NOTIFICATION ITEMS ── */
.dark-mode .notif-item {
  background: #1a2356 !important;
  border-color: rgba(120, 144, 220, .15) !important;
  border-left-color: rgba(120, 144, 220, .3) !important;
}
.dark-mode .notif-item.unread {
  background: #1e2a5e !important;
  border-left-color: var(--sky) !important;
}
.dark-mode .notif-title { color: #c5cae9 !important; }
.dark-mode .notif-msg   { color: #9fa8da !important; }
.dark-mode .notif-time  { color: #7986cb !important; }
.dark-mode .notif-item:hover {
  background: #202d6a !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}

/* ── DARK MODE: USER/DROPDOWN MENUS ── */
.dark-mode .user-dropdown {
  background: #1a2356 !important;
  border-color: rgba(120, 144, 220, .2) !important;
}
.dark-mode .dropdown-header {
  background: #131a45 !important;
  border-color: rgba(120, 144, 220, .15) !important;
}
.dark-mode .dropdown-header strong { color: #c5cae9 !important; }
.dark-mode .user-dropdown .dropdown-item { color: #c5cae9 !important; }
.dark-mode .user-dropdown .dropdown-item:hover { background: rgba(255,255,255,.06) !important; }
.dark-mode .dropdown-divider { border-color: rgba(255,255,255,.08) !important; }

/* ── DARK MODE: GIS MAP STAT CARDS & LEGEND ── */
.dark-mode .map-stat-label,
.dark-mode .map-stat-card .small,
.dark-mode .map-stat-card span,
.dark-mode .map-stat-card p {
  color: #9fa8da !important;
}
.dark-mode .map-legend,
.dark-mode .disease-border-legend,
.dark-mode [class*="legend"] {
  background: #1a2356 !important;
  border: 1px solid rgba(120, 144, 220, .15) !important;
  color: #c5cae9 !important;
}
.dark-mode .map-legend-item { color: #c5cae9 !important; }

/* ── DARK MODE: BUTTONS (outline/secondary) ── */
.dark-mode .btn-outline-ligtas {
  background: transparent !important;
  color: #c5cae9 !important;
  border-color: rgba(120, 144, 220, .3) !important;
}
.dark-mode .btn-outline-ligtas:hover {
  background: rgba(255,255,255,.08) !important;
  color: white !important;
}
.dark-mode .btn-outline-secondary,
.dark-mode .btn-light {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(120,144,220,.2) !important;
  color: #c5cae9 !important;
}
/* ── DARK MODE: SELECT DROPDOWNS ── */
.dark-mode .form-select,
.dark-mode select {
  background-color: #1a2356 !important;
  border-color: rgba(120, 144, 220, .3) !important;
  color: #e8eaf6 !important;
}
.dark-mode .form-select option,
.dark-mode select option {
  background-color: #1a2356 !important;
  color: #e8eaf6 !important;
}
.dark-mode .form-select:focus,
.dark-mode select:focus {
  border-color: var(--sky) !important;
  box-shadow: 0 0 0 3px rgba(66, 165, 245, .15) !important;
}
/* ── DARK MODE: TABS ── */
.dark-mode .ligtas-tabs { background: rgba(255,255,255,.04) !important; }
.dark-mode .ligtas-tab { color: #9fa8da !important; }
.dark-mode .ligtas-tab.active {
  background: #1a2356 !important;
  color: #e8eaf6 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.3) !important;
}
.dark-mode .ligtas-tab:hover { background: rgba(255,255,255,.06) !important; color: white !important; }
/* ── DARK MODE: MAP STAT CARDS ── */
.dark-mode #stat-total-cases,
.dark-mode #stat-affected {
  color: #c5cae9 !important;
}
/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Poppins', sans-serif;
  background: var(--royal-dark);
  background-image:
    radial-gradient(ellipse 80% 50% at 0% 0%, rgba(66,165,245,.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 100% 100%, rgba(40,53,147,.2) 0%, transparent 60%);
  min-height: 100vh;
  color: var(--text);
}

/* ── HEADER ── */
.ligtas-header {
  background:
    linear-gradient(rgba(21,151,213,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,151,213,0.04) 1px, transparent 1px),
    rgba(255,255,255,.98);
  background-size: 40px 40px, 40px 40px, auto;
  backdrop-filter: blur(20px);
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--royal), var(--sky)) 1;
  box-shadow: 0 4px 24px rgba(26,35,126,.15);
  position: sticky; top: 0; z-index: 1000;
}
.header-inner {
  display: flex; align-items: center; gap: 1rem;
  padding: .75rem 0; flex-wrap: wrap;
}
.header-brand {
  display: flex; align-items: center; gap: .9rem;
  text-decoration: none; color: inherit;
}
.header-logo { width: 56px; height: 56px; object-fit: contain; }
.header-name {
  font-size: 1.8rem; font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, var(--royal), var(--royal-light));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.header-sub { font-size: .72rem; color: var(--text-muted); font-weight: 600; }
.header-status {
  align-items: center; gap: .5rem; margin-left: auto;
  font-size: .78rem; font-weight: 600; color: var(--text-muted);
}
.status-dot {
  width: 9px; height: 9px; background: #2e7d32; border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(46,125,50,.2);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%,100% { box-shadow: 0 0 0 3px rgba(46,125,50,.2); }
  50%      { box-shadow: 0 0 0 7px rgba(46,125,50,.06); }
}
.header-actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.btn-ligtas {
  background: linear-gradient(135deg, var(--royal), var(--royal-light));
  color: white; border: none; border-radius: 40px;
  padding: .5rem 1.25rem; font-weight: 700; font-size: .83rem;
  text-decoration: none; cursor: pointer; transition: all .2s;
  font-family: 'Poppins', sans-serif;
}
.btn-ligtas:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(26,35,126,.3); color: white; }
.btn-ligtas-outline {
  background: transparent; color: var(--royal);
  border: 2px solid var(--royal); border-radius: 40px;
  padding: .45rem 1.1rem; font-weight: 700; font-size: .83rem;
  text-decoration: none; cursor: pointer; transition: all .2s;
}
.btn-ligtas-outline:hover { background: var(--royal); color: white; }

/* ── NOTIFICATION BELL ── */
.notif-bell {
  position: relative; color: var(--royal); font-size: 1.25rem;
  text-decoration: none; padding: .4rem; border-radius: 50%;
  transition: background .2s;
}
.notif-bell:hover { background: var(--bg); color: var(--royal); }
.notif-count {
  position: absolute; top: 0; right: 0;
  background: var(--suspected); color: white;
  font-size: .65rem; font-weight: 800;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid white;
}

/* ── THEME TOGGLE ── */
.theme-toggle {
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 50%; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--royal); font-size: 1.1rem; transition: all .2s;
}
.theme-toggle:hover { background: var(--accent-light); }

/* ── USER MENU ── */
.user-menu { position: relative; }
.user-btn {
  display: flex; align-items: center; gap: .5rem;
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 40px; padding: .4rem .9rem .4rem .4rem;
  cursor: pointer; transition: all .2s;
}
.user-btn:hover { border-color: var(--royal); }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.user-initials {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--royal), var(--royal-light));
  color: white; font-weight: 800; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
}
.user-name { font-size: .82rem; font-weight: 700; color: var(--text); line-height: 1.2; }
.user-role { font-size: .7rem; color: var(--text-muted); }
.user-dropdown {
  display: none; position: absolute; right: 0; top: calc(100% + 8px);
  background: white; border-radius: 14px;
  box-shadow: var(--shadow-lg); min-width: 220px; z-index: 999;
  border: 1.5px solid var(--border); overflow: hidden;
}
.user-dropdown.show { display: block; animation: dropIn .18s ease; }
@keyframes dropIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.dropdown-header { padding: .85rem 1rem; background: var(--accent-light); border-bottom: 1px solid var(--border); }
.dropdown-header strong { display: block; font-size: .88rem; color: var(--royal); }
.dropdown-header small { color: var(--text-muted); font-size: .75rem; }
.user-dropdown .dropdown-item {
  padding: .65rem 1rem; font-size: .84rem; font-weight: 500;
  color: var(--text); display: flex; align-items: center;
  border: none; background: none; width: 100%; text-align: left; cursor: pointer;
  text-decoration: none; transition: background .15s;
}
.user-dropdown .dropdown-item:hover { background: var(--bg); }
.dropdown-divider { border-top: 1px solid var(--border); margin: .25rem 0; }

/* ── NAV ── */
.ligtas-nav {
  background:
    linear-gradient(rgba(21,151,213,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,151,213,0.035) 1px, transparent 1px),
    rgba(248,249,255,.97);
  background-size: 40px 40px, 40px 40px, auto;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(26,35,126,.06);
}
.nav-inner {
  display: flex; align-items: center; gap: .2rem;
  padding: .35rem 0; flex-wrap: wrap;
}
.ligtas-nav .nav-link {
  padding: .55rem 1rem; border-radius: 8px;
  font-size: .83rem; font-weight: 600; color: var(--text-muted);
  text-decoration: none; transition: all .18s; white-space: nowrap;
  display: flex; align-items: center;
}
.ligtas-nav .nav-link:hover { background: var(--accent-light); color: var(--royal); }
.ligtas-nav .nav-link.active {
  background: linear-gradient(135deg, var(--royal), var(--royal-light));
  color: white; box-shadow: 0 3px 10px rgba(26,35,126,.22);
}

/* ── MAIN ── */
.ligtas-main { padding: 1.5rem 0 3rem; min-height: calc(100vh - 200px); }

/* ── CARDS ── */
.ligtas-card {
  background: var(--bg-card); border-radius: var(--radius);
  box-shadow: var(--shadow); border: 1.5px solid rgba(26,35,126,.06);
  padding: 1.5rem; margin-bottom: 1.25rem;
}
.ligtas-card-header {
  font-size: 1.1rem; font-weight: 800; color: var(--royal);
  margin-bottom: 1.25rem; padding-bottom: .75rem;
  border-bottom: 2px solid var(--bg); display: flex; align-items: center; gap: .5rem;
}

/* ── STAT CARDS ── */
.stat-card {
  color: white; border-radius: 16px; padding: 1.5rem;
  position: relative; overflow: hidden; transition: transform .2s;
}
.stat-card:hover { transform: translateY(-3px); }
.stat-card::after {
  content: ''; position: absolute; right: -20px; bottom: -20px;
  width: 90px; height: 90px; border-radius: 50%; background: rgba(255,255,255,.08);
}
.stat-value { font-size: 2.4rem; font-weight: 900; line-height: 1; position: relative; z-index: 1; }
.stat-label { font-size: .8rem; opacity: .92; font-weight: 600; margin-top: .3rem; position: relative; z-index: 1; }
.stat-navy   { background: linear-gradient(135deg, #0247ae, #0d5fd4); }
.stat-red    { background: linear-gradient(135deg, #1597d5, #1ab0f0); }
.stat-green  { background: linear-gradient(135deg, #1597d5, #1ab0f0); }
.stat-orange { background: linear-gradient(135deg, #e6be00, #ffd302); }
.stat-blue   { background: linear-gradient(135deg, #ffba21, #ffd05a); }
.stat-teal   { background: linear-gradient(135deg, #00695c, #00897b); }

/* ── MAP ── */
#homeMap, #choMap, #adminMap, #patientMap { width: 100%; height: 580px; border-radius: 14px; box-shadow: var(--shadow); }
.leaflet-container { border-radius: 14px; font-family: 'Poppins', sans-serif; }
.custom-popup .leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.2); padding: 0; overflow: hidden; }
.popup-header { background: var(--royal); color: white; padding: .7rem 1rem; font-weight: 700; font-size: .9rem; }
.popup-body { padding: .8rem 1rem; font-size: .85rem; line-height: 1.8; }

/* ── FORMS ── */
.form-label { font-weight: 700; font-size: .83rem; color: var(--text); margin-bottom: .35rem; }
.form-control, .form-select {
  border: 2px solid var(--border); border-radius: 9px; height: 42px;
  font-family: 'Poppins', sans-serif; font-size: .87rem;
  transition: border .2s, box-shadow .2s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--royal); box-shadow: 0 0 0 4px rgba(26,35,126,.08); outline: none;
}
textarea.form-control { height: auto; }
.form-check-input:checked { background-color: var(--royal); border-color: var(--royal); }
.form-section {
  background: var(--bg); border-radius: 13px; padding: 1.5rem;
  border: 1.5px solid rgba(26,35,126,.08); margin-bottom: 1.25rem;
}
.form-section-title {
  font-size: .9rem; font-weight: 800; color: var(--royal);
  margin-bottom: 1.1rem; display: flex; align-items: center; gap: .5rem;
}
.step-badge {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--royal), var(--royal-light));
  color: white; font-size: .78rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ── BUTTONS ── */
.btn-primary-ligtas {
  background: linear-gradient(135deg, var(--royal), var(--royal-light));
  color: white; border: none; border-radius: 10px;
  padding: .65rem 1.5rem; font-weight: 700; font-size: .87rem;
  cursor: pointer; transition: all .2s; font-family: 'Poppins', sans-serif;
  display: inline-flex; align-items: center; gap: .4rem;
}
.btn-primary-ligtas:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(26,35,126,.3); color: white; }
.btn-success-ligtas { background: linear-gradient(135deg, #1b5e20, #2e7d32); color: white; }
.btn-danger-ligtas  { background: linear-gradient(135deg, #b71c1c, #c62828); color: white; }
.btn-warning-ligtas { background: linear-gradient(135deg, #bf360c, #e65100); color: white; }
.btn-outline-ligtas {
  background: white; color: var(--royal); border: 2px solid var(--royal);
  border-radius: 10px; padding: .6rem 1.4rem; font-weight: 700; font-size: .87rem;
  cursor: pointer; transition: all .2s; font-family: 'Poppins', sans-serif;
}
.btn-outline-ligtas:hover { background: var(--royal); color: white; }

/* ── BADGES ── */
.badge-suspected { background: var(--suspected); color: white; }
.badge-low_risk  { background: #e65100; color: white; }
.badge-no_risk   { background: #546e7a; color: white; }
.badge-confirmed { background: #1565c0; color: white; }
.badge-negative  { background: #2e7d32; color: white; }
.badge-pending   { background: #1565c0; color: white; }
.badge-assessed  { background: #2e7d32; color: white; }
.badge-closed    { background: #546e7a; color: white; }
.ligtas-badge {
  display: inline-flex; align-items: center;
  padding: .22rem .75rem; border-radius: 20px;
  font-size: .72rem; font-weight: 700; white-space: nowrap; letter-spacing: .3px;
}

/* ── TABLES ── */
.ligtas-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .87rem; }
.ligtas-table thead th {
  background: linear-gradient(135deg, var(--royal), var(--royal-light));
  color: white; padding: .75rem 1rem; font-weight: 700; font-size: .8rem;
  letter-spacing: .3px;
}
.ligtas-table tbody tr { transition: background .15s; }
.ligtas-table tbody tr:hover { background: var(--accent-light); }
.ligtas-table tbody td { padding: .75rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }

/* ── TABS ── */
.ligtas-tabs {
  display: flex; gap: .3rem; background: var(--bg); border-radius: 12px;
  padding: .4rem; margin-bottom: 1.25rem; flex-wrap: wrap;
}
.ligtas-tab {
  padding: .55rem 1.1rem; border: none; background: transparent;
  border-radius: 8px; font-weight: 600; font-size: .84rem;
  color: var(--text-muted); cursor: pointer; transition: all .18s;
  font-family: 'Poppins', sans-serif;
}
.ligtas-tab:hover { color: var(--royal); background: rgba(255,255,255,.7); }
.ligtas-tab.active {
  background: white; color: var(--royal);
  box-shadow: 0 2px 10px rgba(26,35,126,.12); font-weight: 800;
}

/* ── NOTIFICATIONS ── */
.notif-item {
  background: white; border-radius: 12px; padding: 1rem 1.25rem;
  border-left: 4px solid var(--border); margin-bottom: .75rem;
  transition: all .2s; border: 1px solid var(--border);
  border-left: 4px solid var(--border);
}
.notif-item.unread { border-left-color: var(--royal); background: var(--accent-light); }
.notif-item:hover { transform: translateX(3px); box-shadow: var(--shadow); }
.notif-title { font-weight: 700; font-size: .9rem; color: var(--royal); }
.notif-msg   { font-size: .83rem; color: var(--text-muted); margin-top: .2rem; }
.notif-time  { font-size: .72rem; color: var(--text-muted); margin-top: .35rem; }

/* ── PROFILE ── */
.profile-avatar-wrap {
  width: 110px; height: 110px; border-radius: 50%; position: relative;
  margin: 0 auto 1rem;
}
.profile-avatar-wrap img,
.profile-avatar-initials {
  width: 110px; height: 110px; border-radius: 50%; object-fit: cover;
  border: 4px solid var(--royal); box-shadow: 0 4px 16px rgba(26,35,126,.2);
}
.profile-avatar-initials {
  background: linear-gradient(135deg, var(--royal), var(--royal-light));
  color: white; font-size: 2.5rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.profile-avatar-upload {
  position: absolute; bottom: 0; right: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--royal); color: white; border: 2px solid white;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .9rem;
}

/* ── CASE CARD ── */
.case-card {
  background: white; border-radius: 13px; padding: 1.1rem 1.4rem;
  border-left: 5px solid var(--border); margin-bottom: .85rem;
  transition: all .2s; box-shadow: 0 1px 5px rgba(26,35,126,.05);
  border: 1px solid rgba(26,35,126,.06); border-left-width: 5px;
}
.case-card:hover { box-shadow: 0 6px 20px rgba(26,35,126,.1); transform: translateX(3px); }
.case-card.suspected { border-left-color: var(--suspected); }
.case-card.low_risk  { border-left-color: var(--warning); }
.case-card.confirmed { border-left-color: var(--accent); }

/* ── INSIGHT PANEL ── */
.insight-panel {
  background: linear-gradient(135deg, var(--royal-dark), var(--royal), #1565c0);
  color: white; border-radius: 18px; padding: 1.75rem;
  margin-bottom: 1.25rem; box-shadow: 0 8px 32px rgba(13,19,87,.3);
  position: relative; overflow: hidden;
}
.insight-panel::before {
  content: ''; position: absolute; right: -30px; top: -30px;
  width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.04);
}
.insight-kpi { font-size: 2.2rem; font-weight: 900; line-height: 1; }
.insight-lbl { font-size: .75rem; opacity: .82; font-weight: 600; margin-top: .25rem; }

/* ── YEAR SELECTOR ── */
.year-btn {
  padding: .35rem .85rem; border: 2px solid var(--border); border-radius: 8px;
  background: white; font-size: .8rem; font-weight: 700; cursor: pointer;
  transition: all .18s; font-family: 'Poppins', sans-serif; color: var(--text);
}
.year-btn.active, .year-btn:hover {
  background: var(--royal); color: white; border-color: var(--royal);
}

/* ── MAP LEGEND ── */
.map-legend-item { display: flex; align-items: center; gap: .6rem; font-size: .83rem; font-weight: 600; }
.legend-swatch { width: 26px; height: 18px; border-radius: 4px; flex-shrink: 0; }

/* ── REPORT PDF styles ── */
.report-pdf-header { border-bottom: 3px solid #1a237e; padding-bottom: 1rem; margin-bottom: 1.5rem; }

/* ── FOOTER ── */
.ligtas-footer {
  background: linear-gradient(135deg, #0d1357, #1a237e);
  color: rgba(255,255,255,.9); padding: 3rem 0 1.5rem;
  margin-top: 2rem;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
@media(max-width:900px){ .footer-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width:600px){ .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.footer-link { color: rgba(255,255,255,.75); text-decoration: none; font-size: .87rem; }
.footer-link:hover { color: white; }
.footer-bottom { text-align: center; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .78rem; opacity: .7; }
.ligtas-footer h6 { color: white; font-weight: 700; margin-bottom: .75rem; font-size: .88rem; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(26,35,126,.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--royal); }
::selection { background: rgba(26,35,126,.15); color: var(--royal); }

/* ── RESPONSIVE ── */
@media(max-width:768px) {
  .header-name { font-size: 1.4rem; }
  .header-sub  { display: none; }
  #homeMap, #choMap, #adminMap, #patientMap { height: 400px; }
  .stat-value { font-size: 1.8rem; }
  .filter-bar { overflow-x: auto; flex-wrap: nowrap !important; }
}

/* ── MAP FILTER BUTTONS ── */
.filter-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: 4px 12px; border-radius: 6px;
  font-family: 'Poppins', sans-serif; font-size: .78rem; font-weight: 600;
  border: 1.5px solid #d1d5db; background: white; color: #64748b;
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.filter-btn:hover {
  border-color: var(--fc, #1a237e); color: var(--fc, #1a237e);
  background: rgba(26,35,126,.04);
}
.filter-btn.active {
  background: var(--fc, #1a237e); color: white;
  border-color: var(--fc, #1a237e);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* ── MAP TOOLBAR BUTTONS ── */
.map-tool-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: 5px 12px; border-radius: 7px;
  font-family: 'Poppins', sans-serif; font-size: .78rem; font-weight: 600;
  border: 1.5px solid var(--border); background: white; color: var(--text-muted);
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.map-tool-btn:hover { border-color: var(--royal); color: var(--royal); background: var(--accent-light); }
.map-tool-btn.active { background: var(--royal); color: white; border-color: var(--royal); }
.map-tool-btn i { font-size: .9rem; }

/* ── MAP LOADING OVERLAY ── */
.map-loading-overlay {
  position: absolute; inset: 0; z-index: 800;
  background: rgba(240,244,255,.85); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px; transition: opacity .3s;
}
.map-loading-spinner { text-align: center; }

/* ── MAP FULLSCREEN ── */
.map-fullscreen {
  position: fixed !important; inset: 0 !important; z-index: 9999 !important;
  margin: 0 !important; border-radius: 0 !important; max-width: none !important;
  background: white;
}
.map-fullscreen #homeMap, .map-fullscreen #choMap,
.map-fullscreen #adminMap, .map-fullscreen #patientMap {
  height: calc(100vh - 120px) !important; border-radius: 0 !important;
}
body.map-fullscreen-active { overflow: hidden; }

/* ── MARKER PULSE (confirmed cases) ── */
@keyframes marker-pulse {
  0%, 100% { box-shadow: 0 0 0 1.5px currentColor, 0 2px 6px rgba(0,0,0,.35); }
  50%      { box-shadow: 0 0 0 4px currentColor, 0 2px 10px rgba(0,0,0,.25); }
}

/* ── BARANGAY SEARCH SELECT ── */
.brgy-search-select {
  max-width: 200px; height: 36px; font-size: .82rem;
  font-family: 'Poppins', sans-serif; font-weight: 500;
  border: 1.5px solid var(--border); border-radius: 8px;
  padding-left: .6rem;
}
.brgy-search-select:focus {
  border-color: var(--royal); box-shadow: 0 0 0 3px rgba(26,35,126,.1);
}

/* ── DARK MODE MAP ADDITIONS ── */
.dark-mode .filter-btn { background: var(--bg-card); border-color: var(--border); color: var(--text-muted); }
.dark-mode .filter-btn:hover { background: rgba(26,35,126,.3); color: white; border-color: var(--royal-light); }
.dark-mode .filter-btn.active { background: var(--fc, var(--royal-light)); border-color: var(--fc, var(--royal-light)); }
.dark-mode .map-tool-btn { background: var(--bg-card); border-color: var(--border); color: var(--text-muted); }
.dark-mode .map-tool-btn:hover { background: rgba(26,35,126,.3); color: white; }
.dark-mode .map-tool-btn.active { background: var(--royal-light); }
.dark-mode .basemap-btn { background: var(--bg-card); border-color: var(--border); color: var(--text-muted); }
.dark-mode .basemap-btn.active, .dark-mode .basemap-btn:hover { background: var(--royal); color: white; border-color: var(--royal); }
.dark-mode .map-loading-overlay { background: rgba(10,15,46,.85); }
.dark-mode .map-loading-overlay .small { color: var(--text-muted) !important; }
.dark-mode .map-fullscreen { background: var(--bg-card); }
.dark-mode .popup-header { background: var(--royal) !important; }
.dark-mode .popup-body { background: var(--bg-card); color: var(--text); }
.dark-mode .custom-popup .leaflet-popup-content-wrapper { background: var(--bg-card); }

/* ── ANIMATIONS ── */
@keyframes fadeUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes spin   { to { transform:rotate(360deg); } }
@keyframes pulse  { 0%,100%{opacity:1;} 50%{opacity:.6;} }
.animate-fadeup { animation: fadeUp .35s ease; }

/* ════════════════════════════════════════════════════════════════════════
   ADDITIONS — May 2026
   - Compact disease pills (fits 7 diseases on one row at desktop widths)
   - Unified .basemap-btn so Street/Satellite/Dark look the same everywhere
   - .map-toolbar layout used by all map pages (basemap LEFT, Reset/FS RIGHT)
   ════════════════════════════════════════════════════════════════════════ */

/* ── DISEASE PILLS (compact, single-row) ── */
.disease-pill-row {
  display: flex; align-items: center; gap: .35rem;
  flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: .25rem .1rem .5rem;
  scrollbar-width: thin;
}
.disease-pill-row::-webkit-scrollbar { height: 4px; }

.disease-map-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .35rem .65rem; border-radius: 20px;
  font-size: .76rem; font-weight: 700;
  border: 2px solid #e3e8ff; color: #475569; background: white;
  cursor: pointer; transition: all .18s ease;
  white-space: nowrap; flex-shrink: 0;
  text-decoration: none; line-height: 1;
}
.disease-map-btn .dpb-icon { font-size: .9rem; line-height: 1; }
.disease-map-btn .dpb-label { line-height: 1; }
.disease-map-btn:hover { border-color: var(--dc); color: var(--dc); background: var(--dbg); text-decoration: none; }
.disease-map-btn.active { border-color: var(--dc); color: white; background: var(--dc); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.disease-map-btn.active:hover { color: white; }

/* On narrower viewports hide the disease emoji to keep all pills in one line */
@media (max-width: 980px) {
  .disease-map-btn .dpb-icon { display: none; }
  .disease-map-btn { padding: .35rem .55rem; font-size: .72rem; }
}

.dark-mode .disease-map-btn {
  border-color: rgba(120, 144, 220, .35) !important;
  color: #c5cae9 !important;
  background: rgba(255, 255, 255, .06) !important;
}
.dark-mode .disease-map-btn:hover {
  border-color: var(--dc) !important;
  color: #fff !important;
  background: rgba(255,255,255,.1) !important;
}
.dark-mode .disease-map-btn.active {
  color: white !important;
  background: var(--dc) !important;
  border-color: var(--dc) !important;
}

/* ── UNIFIED .basemap-btn (Street / Satellite / Dark) ── */
.basemap-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .4rem .9rem; height: 36px;
  font-family: 'Poppins', sans-serif; font-size: .8rem; font-weight: 700;
  border: 1.5px solid #cbd5e1; border-radius: 8px;
  background: #f8fafc; color: #475569;
  cursor: pointer; transition: all .15s ease;
  white-space: nowrap; line-height: 1;
}
.basemap-btn:hover {
  background: #e2e8f0; border-color: #94a3b8; color: #1e293b;
  transform: translateY(-1px);
}
.basemap-btn.active {
  background: #1a237e; color: #ffffff; border-color: #1a237e;
  box-shadow: 0 2px 6px rgba(26,35,126,.25);
}
.basemap-btn.active:hover { background: #0d1357; color: #ffffff; transform: none; }

/* ── MAP TOOLBAR LAYOUT ── */
/* Container that holds groups of buttons and pushes Reset/Fullscreen
   to the right with `.ms-auto`. Used on all map pages. */
.map-toolbar {
  display: flex; align-items: center; gap: .75rem;
  flex-wrap: wrap;
}
.map-toolbar-group {
  display: inline-flex; align-items: center; gap: .4rem;
  flex-wrap: nowrap;
}

/* ── MAP STYLE BUTTON (Border / Stratified, used on cho/admin map) ── */
.map-style-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .35rem .7rem; height: 36px;
  border-radius: 7px; font-size: .78rem; font-weight: 700;
  border: 1.5px solid #cbd5e1; color: #475569; background: white;
  cursor: pointer; transition: all .15s ease; white-space: nowrap; line-height: 1;
}
.map-style-btn:hover { border-color: #1a237e; color: #1a237e; background: #f1f5f9; }
.map-style-btn.active { border-color: #1a237e; color: white; background: #1a237e; }
.dark-mode .map-style-btn { border-color: #334155; color: #94a3b8; background: #1e293b; }
.dark-mode .map-style-btn.active { background: #1a237e; border-color: #1a237e; color: white; }

/* ═══════════════════════════════════════════════════════════════════════
   DARK MODE — UNIVERSAL TEXT VISIBILITY FIX (May 11, 2026)
   Forces all hard-to-read text to pure white in dark mode.
   This block MUST be the last thing in the file.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── HEADER BRAND (LIGTAS title + subtitle) ── */
.dark-mode .header-name,
.dark-mode .header-sub,
.dark-mode .header-text,
.dark-mode .header-text *,
.dark-mode .header-brand,
.dark-mode .header-brand *,
.dark-mode .header-name {
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
}
.dark-mode .status-label {
  color: #ffffff !important;
}

/* ── NAV LINKS ── */
.dark-mode .ligtas-nav .nav-link,
.dark-mode .ligtas-nav .nav-link.active,
.dark-mode .ligtas-nav .nav-link * {
  color: #ffffff !important;
}

/* ── TABLES: every cell + every child element ── */
.dark-mode table,
.dark-mode .table,
.dark-mode table thead th,
.dark-mode .table thead th,
.dark-mode table tbody td,
.dark-mode .table tbody td,
.dark-mode table tbody th,
.dark-mode .table tbody th,
.dark-mode table td a,
.dark-mode table td span,
.dark-mode table td small,
.dark-mode table td strong,
.dark-mode table td em,
.dark-mode table td p,
.dark-mode table td div,
.dark-mode table td li,
.dark-mode .table td a,
.dark-mode .table td span,
.dark-mode .table td small,
.dark-mode .table td strong,
.dark-mode .table td em,
.dark-mode .table td p,
.dark-mode .table td div,
.dark-mode .table td li {
  color: #ffffff !important;
}

/* ── DASHBOARD STAT CARDS (Total Cases, Brgys Affected, etc.) ── */
.dark-mode .stat-card,
.dark-mode .stat-card *,
.dark-mode .stat-label,
.dark-mode .stat-value,
.dark-mode [id^="stat-"],
.dark-mode [id^="stat-"] *,
.dark-mode [class*="stat-card"] *:not(.badge):not(.btn) {
  color: #ffffff !important;
}

/* ── CARD BODY CONTENT (paragraphs, definitions, lists, labels) ── */
.dark-mode .ligtas-card p,
.dark-mode .ligtas-card .small,
.dark-mode .ligtas-card small,
.dark-mode .ligtas-card li,
.dark-mode .ligtas-card dd,
.dark-mode .ligtas-card dt,
.dark-mode .ligtas-card label,
.dark-mode .ligtas-card .form-label,
.dark-mode .ligtas-card h1,
.dark-mode .ligtas-card h2,
.dark-mode .ligtas-card h3,
.dark-mode .ligtas-card h4,
.dark-mode .ligtas-card h5,
.dark-mode .ligtas-card h6,
.dark-mode .card p,
.dark-mode .card .small,
.dark-mode .card small,
.dark-mode .card li,
.dark-mode .card label {
  color: #ffffff !important;
}

/* ── EMPTY STATE / "NO DATA" / TEXT-MUTED ── */
.dark-mode .text-muted,
.dark-mode .text-secondary,
.dark-mode .empty-state,
.dark-mode .empty-state *,
.dark-mode .no-data,
.dark-mode .no-data *,
.dark-mode em {
  color: #ffffff !important;
}

/* ── INLINE-STYLE DARK COLORS — nuclear override ── */
.dark-mode [style*="color:#1a237e"],
.dark-mode [style*="color: #1a237e"],
.dark-mode [style*="color:#0d1357"],
.dark-mode [style*="color: #0d1357"],
.dark-mode [style*="color:#283593"],
.dark-mode [style*="color: #283593"],
.dark-mode [style*="color:#3949ab"],
.dark-mode [style*="color: #3949ab"],
.dark-mode [style*="color:#546e7a"],
.dark-mode [style*="color: #546e7a"],
.dark-mode [style*="color:#000"],
.dark-mode [style*="color: #000"],
.dark-mode [style*="color:#212529"],
.dark-mode [style*="color: #212529"],
.dark-mode [style*="color:#333"],
.dark-mode [style*="color: #333"],
.dark-mode [style*="color:#666"],
.dark-mode [style*="color: #666"],
.dark-mode [style*="color:#999"],
.dark-mode [style*="color: #999"] {
  color: #ffffff !important;
}

/* ── DROPDOWN MENU TEXT ── */
.dark-mode .user-dropdown .dropdown-item,
.dark-mode .user-dropdown .dropdown-item *,
.dark-mode .user-dropdown .dropdown-header strong,
.dark-mode .user-dropdown .dropdown-header small,
.dark-mode .user-name,
.dark-mode .user-role {
  color: #ffffff !important;
}

/* ── FOOTER TEXT ── */
.dark-mode .ligtas-footer,
.dark-mode .ligtas-footer *,
.dark-mode .footer-link {
  color: #ffffff !important;
}

/* ── ALERTS in dark mode ── */
.dark-mode .alert { border: 1.5px solid !important; }
.dark-mode .alert-success {
  background: rgba(22,101,52,.85) !important;
  border-color: rgba(34,197,94,.4) !important;
  color: #bbf7d0 !important;
}
.dark-mode .alert-success *,
.dark-mode .alert-success .btn-close { color: #bbf7d0 !important; filter: invert(0) !important; }
.dark-mode .alert-info {
  background: rgba(12,74,110,.85) !important;
  border-color: rgba(56,189,248,.4) !important;
  color: #bae6fd !important;
}
.dark-mode .alert-info *,
.dark-mode .alert-info .btn-close { color: #bae6fd !important; filter: invert(0) !important; }
.dark-mode .alert-danger {
  background: rgba(127,29,29,.85) !important;
  border-color: rgba(239,68,68,.4) !important;
  color: #fecaca !important;
}
.dark-mode .alert-danger *,
.dark-mode .alert-danger .btn-close { color: #fecaca !important; filter: invert(0) !important; }
.dark-mode .alert-warning {
  background: rgba(120,53,15,.85) !important;
  border-color: rgba(251,191,36,.4) !important;
  color: #fef08a !important;
}
.dark-mode .alert-warning *,
.dark-mode .alert-warning .btn-close { color: #fef08a !important; filter: invert(0) !important; }
.dark-mode .alert,
.dark-mode .alert * {
  color: #ffffff !important;
}

/* ── FORM LABELS ── */
.dark-mode label,
.dark-mode .form-label,
.dark-mode legend {
  color: #ffffff !important;
}

/* ═════════════════════════════════════════════════════
   EXCEPTIONS — colored elements that MUST stay colored
   ═════════════════════════════════════════════════════ */

/* Badges keep their white-on-color look (they already work) */
.dark-mode .badge,
.dark-mode .badge * { color: #ffffff !important; }

/* Buttons keep their own color schemes */
.dark-mode .btn-primary,
.dark-mode .btn-primary *,
.dark-mode .btn-danger,
.dark-mode .btn-danger *,
.dark-mode .btn-success,
.dark-mode .btn-success *,
.dark-mode .btn-warning,
.dark-mode .btn-warning *,
.dark-mode .btn-ligtas,
.dark-mode .btn-ligtas * { color: #ffffff !important; }

/* Status colors — keep readable variants */
.dark-mode .text-success,
.dark-mode .text-success * { color: #66bb6a !important; }
.dark-mode .text-danger,
.dark-mode .text-danger * { color: #ef5350 !important; }
.dark-mode .text-warning,
.dark-mode .text-warning * { color: #ffa726 !important; }
.dark-mode .text-info,
.dark-mode .text-info * { color: #4fc3f7 !important; }

/* Logout button must stay red */
.dark-mode .user-dropdown .dropdown-item.text-danger,
.dark-mode .user-dropdown .dropdown-item.text-danger * { color: #ef5350 !important; }
/* ═══════════════════════════════════════════════════════════════════════
   DARK MODE — LIGHT-BG-ELEMENT TEXT FIX (May 12, 2026, v2)
   Universal rule: any element that keeps a white/light background in
   dark mode must show DARK text so it stays readable.
   This block must be the absolute LAST thing in the file.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Patient report — disease selector pills (inactive = white bg) ── */
.dark-mode .disease-report-option,
.dark-mode .disease-report-option * {
  color: #0d1357 !important;
}
.dark-mode .disease-report-option.active,
.dark-mode .disease-report-option.active * {
  color: #ffffff !important;
}

/* ── Patient report — symptom & exposure checkbox cards ── */
.dark-mode .symptom-check,
.dark-mode .symptom-check *,
.dark-mode .exposure-check,
.dark-mode .exposure-check * {
  /* handled by the detailed rules below — no override here */
}

/* ── Glossary category badges (light pill on dark bg) ── */
.dark-mode .gloss-card .ligtas-badge,
.dark-mode .gloss-card .ligtas-badge *{
  color: #0d1357 !important;
},
/*-- For Reports Table--*/
.dark-mode .ligtas-table .ligtas-badge,
.dark-mode .ligtas-table .ligtas-badge * {
  color: #ffffff !important;
}

/* ── Active tabs / pills (white pill on dark bg) ── */
.dark-mode .ligtas-tab.active,
.dark-mode .ligtas-tab.active * {
  color: #0d1357 !important;
}

/* ── Glossary category tabs — inactive on dark page ── */
/* Inactive tabs sit on a transparent/dark area; force white text. */
.dark-mode .ligtas-tabs .ligtas-tab,
.dark-mode .ligtas-tabs .ligtas-tab * {
  color: #ffffff !important;
}
.dark-mode .ligtas-tabs .ligtas-tab.active,
.dark-mode .ligtas-tabs .ligtas-tab.active * {
  color: var(--royal, #1a237e) !important;
}

/* ── Disease pills inside cards on dark page — use translucent dark color */
.dark-mode .ligtas-card .disease-map-btn:not(.active),
.dark-mode .ligtas-card .disease-map-btn:not(.active) * {
  color: #c5cae9 !important;
}

/* ── Map legend ("Disease Border Colors:") — strip is on dark page bg
   in dark mode (no card behind it). Force its strip to a translucent
   light background, with dark text so border colors and labels read. ── */
.dark-mode .ligtas-card > [style*="background:#f0f4ff"],
.dark-mode .ligtas-card [style*="background: #f0f4ff"] {
  background: rgba(255,255,255,0.92) !important;
}
.dark-mode [style*="background:#f0f4ff"],
.dark-mode [style*="background: #f0f4ff"] {
  background: rgba(255,255,255,0.92) !important;
  color: #0d1357 !important;
}
.dark-mode [style*="background:#f0f4ff"] *,
.dark-mode [style*="background: #f0f4ff"] * {
  color: #0d1357 !important;
}

/* Same treatment for other common light tip/banner backgrounds */
.dark-mode [style*="background:#e8f5e9"],
.dark-mode [style*="background:#e8f5e9"] *,
.dark-mode [style*="background:#fff8e1"],
.dark-mode [style*="background:#fff8e1"] *,
.dark-mode [style*="background:#fef3c7"],
.dark-mode [style*="background:#fef3c7"] *,
.dark-mode [style*="background:#fffbf0"],
.dark-mode [style*="background:#fffbf0"] *,
.dark-mode [style*="background:#e3f0ff"],
.dark-mode [style*="background:#e3f0ff"] *,
.dark-mode [style*="background:#e0f7fa"],
.dark-mode [style*="background:#e0f7fa"] * {
  color: #0d1357 !important;
}

/* ── Bootstrap alert components (info/warning use light bg) ── */
.dark-mode .alert-info,
.dark-mode .alert-info *,
.dark-mode .alert-warning,
.dark-mode .alert-warning *,
.dark-mode .alert-light,
.dark-mode .alert-light * {
  color: #0d1357 !important;
}

/* ── Map markers / leaflet div icons — KEEP their natural dark text ── */
/* My earlier universal override forces white text everywhere; this
   undoes it for marker circles so the numbers stay visible. */
.dark-mode .leaflet-marker-icon,
.dark-mode .leaflet-marker-icon *,
.dark-mode .leaflet-div-icon,
.dark-mode .leaflet-div-icon *,
.dark-mode .leaflet-popup-content,
.dark-mode .leaflet-popup-content * {
  color: initial !important;
}

/* ── Stat cards on dashboards: gradient bg, white text stays ── */
.dark-mode .stat-card .stat-value,
.dark-mode .stat-card .stat-label,
.dark-mode .stat-card .stat-value *,
.dark-mode .stat-card .stat-label * {
  color: #ffffff !important;
}

/* ── Patient disease quick cards: lighten the dark inline colors ── */
.dark-mode .ligtas-card [style*="color:#795548"],
.dark-mode .ligtas-card [style*="color: #795548"] {
  color: #bcaaa4 !important;
}

/* ── Welcome / insight-panel text — make black per user request ── */
.dark-mode .insight-panel,
.dark-mode .insight-panel * {
  color: #ffffff !important;
}

/* ── Risky Barangays cards — name = black, count badge keeps white
   Targets any span inside a flex row that has a colored border-left
   (the inline-style trick the dashboard uses). Works without blade
   changes. The badge (.ligtas-badge) keeps its own color/white. ── */
.dark-mode [style*="border-left:4px solid"] .small.fw-bold,
[style*="border-left:4px solid"] .small.fw-bold {
  color: #000000 !important;
}

/* ── Risky Barangays — count badge MUST keep white text in all modes
   (it's a colored pill, inline color:white was getting overridden) ── */
[style*="border-left:4px solid"] .ligtas-badge,
[style*="border-left:4px solid"] .ligtas-badge *,
.dark-mode [style*="border-left:4px solid"] .ligtas-badge,
.dark-mode [style*="border-left:4px solid"] .ligtas-badge * {
  color: #ffffff !important;
}

/* ── PSGC code subtitle (under barangay name) ─────────────
   Used in admin views to show the official Philippine Standard
   Geographic Code below each barangay name. Light gray on light
   bg; bright white on dark bg. Monospace for easy alignment. ── */
.psgc-sub {
  font-family: 'Courier New', 'SF Mono', Consolas, monospace;
  font-size: .68rem;
  font-weight: 600;
  color: #94a3b8;          /* slate-400 — soft gray on light bg */
  letter-spacing: .04em;
  margin-top: 1px;
  line-height: 1.1;
}
.dark-mode .psgc-sub {
  color: #ffffff !important;   /* white in dark mode */
  opacity: .85;
}

/* ═══════════════════════════════════════════════════════════════════════
   FINAL NUCLEAR OVERRIDE — Inline-styled alert banners in dark mode
   The patient report's "Reporting: ..." banner uses inline style with
   disease-specific color values, e.g. style="color:#e65100" for Measles.
   Inline styles beat regular CSS, so we need higher-specificity selectors
   with !important AND -webkit-text-fill-color to force readable text.
   This MUST be at the absolute bottom of the file.
   ═══════════════════════════════════════════════════════════════════════ */
html.dark-mode div.alert[style] {
  background: #f0f4ff !important;
  background-color: #f0f4ff !important;
}
html.dark-mode div.alert[style],
html.dark-mode div.alert[style] strong,
html.dark-mode div.alert[style] span,
html.dark-mode div.alert[style] i,
html.dark-mode div.alert[style] em,
html.dark-mode div.alert[style] b,
html.dark-mode div.alert[style] small,
html.dark-mode div.alert[style] p,
html.dark-mode div.alert[style] a {
  color: #0d1357 !important;
  -webkit-text-fill-color: #0d1357 !important;
}
html.dark-mode .alert .btn-close {
  filter: none !important;
  opacity: .7;
}
/* ═══════════════════════════════════════════════════════════════════════
   FINAL: Disease Border Colors legend strip — dark mode visibility
   This MUST stay at the very bottom of the file to win specificity wars.
   ═══════════════════════════════════════════════════════════════════════ */
html.dark-mode .ligtas-card [style*="background:#f0f4ff"],
html.dark-mode .ligtas-card [style*="background: #f0f4ff"] {
  background: #ffffff !important;
  border: 1px solid #e3e8ff !important;
}
html.dark-mode .ligtas-card [style*="background:#f0f4ff"] *,
html.dark-mode .ligtas-card [style*="background: #f0f4ff"] * {
  color: #0d1357 !important;
  background-color: transparent !important;
}
html.dark-mode .ligtas-card [style*="background:#f0f4ff"] strong,
html.dark-mode .ligtas-card [style*="background: #f0f4ff"] strong {
  color: #1a237e !important;
  font-weight: 800 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Report form — Step section titles ("Impormasyon ng Pasyente", "Lokasyon",
   "Pinpoint Household Location", "Mga Sintomas", etc.)
   In dark mode these inherit dark navy from .form-section-title and become
   invisible on the dark .form-section background.
   ═══════════════════════════════════════════════════════════════════════ */
html.dark-mode .form-section-title,
html.dark-mode .form-section-title *:not(.step-badge):not(.step-badge *) {
  color: #ffffff !important;
}
/* ═══════════════════════════════════════════════════════════════════════
   Report form — Disease-specific extra fields (Joints, Swimming, Indigenous,
   Blood, Vaccination, etc.)
   These cards use hardcoded light background colors via inline style, so
   their child <label> text becomes invisible in dark mode.
   Fix: flip the card to a dark tint and force label/text to be light.
   ═══════════════════════════════════════════════════════════════════════ */

/* Chikungunya – Affected Joints (#f0fdf4 green tint) */
html.dark-mode [style*="background:#f0fdf4"] {
  background: #0d2e1a !important;
  border-color: #16a34a !important;
}
html.dark-mode [style*="background:#f0fdf4"] label,
html.dark-mode [style*="background:#f0fdf4"] .small,
html.dark-mode [style*="background:#f0fdf4"] span {
  color: #bbf7d0 !important;
}
html.dark-mode [style*="background:#f0fdf4"] .fw-bold,
html.dark-mode [style*="background:#f0fdf4"] [style*="color:#15803d"] {
  color: #4ade80 !important;
}

/* Dengue – Blood Transfusion (#fef2f2 red tint) */
html.dark-mode [style*="background:#fef2f2"] {
  background: #2d0a0a !important;
  border-color: #dc2626 !important;
}
html.dark-mode [style*="background:#fef2f2"] label,
html.dark-mode [style*="background:#fef2f2"] .small,
html.dark-mode [style*="background:#fef2f2"] span {
  color: #fecaca !important;
}
html.dark-mode [style*="background:#fef2f2"] .fw-bold,
html.dark-mode [style*="background:#fef2f2"] [style*="color:#991b1b"] {
  color: #f87171 !important;
}

/* Measles – Indigenous / Ethnic Group (#f5f3ff purple tint) */
html.dark-mode [style*="background:#f5f3ff"] {
  background: #1e0a3c !important;
  border-color: #7c3aed !important;
}
html.dark-mode [style*="background:#f5f3ff"] label,
html.dark-mode [style*="background:#f5f3ff"] .small,
html.dark-mode [style*="background:#f5f3ff"] span {
  color: #ddd6fe !important;
}
html.dark-mode [style*="background:#f5f3ff"] .fw-bold,
html.dark-mode [style*="background:#f5f3ff"] [style*="color:#5b21b6"] {
  color: #a78bfa !important;
}

/* Leptospirosis – Swimming Exposure (#f0f9ff blue tint) */
html.dark-mode [style*="background:#f0f9ff"] {
  background: #0a1e2e !important;
  border-color: #0284c7 !important;
}
html.dark-mode [style*="background:#f0f9ff"] label,
html.dark-mode [style*="background:#f0f9ff"] .small,
html.dark-mode [style*="background:#f0f9ff"] span {
  color: #bae6fd !important;
}
html.dark-mode [style*="background:#f0f9ff"] .fw-bold,
html.dark-mode [style*="background:#f0f9ff"] [style*="color:#075985"] {
  color: #38bdf8 !important;
}

/* Measles – Vaccination History (#fef9c3 yellow tint) */
html.dark-mode [style*="background:#fef9c3"] {
  background: #2a1f00 !important;
  border-color: #ca8a04 !important;
}
html.dark-mode [style*="background:#fef9c3"] label,
html.dark-mode [style*="background:#fef9c3"] .small,
html.dark-mode [style*="background:#fef9c3"] span {
  color: #fef08a !important;
}
html.dark-mode [style*="background:#fef9c3"] .fw-bold,
html.dark-mode [style*="background:#fef9c3"] [style*="color:#92400e"] {
  color: #fbbf24 !important;
}

/* Generic fallback: any .mb-3.p-3.rounded label inside dark mode
   that still has no visible color (catches future additions too) */
html.dark-mode .mb-3.p-3.rounded label,
html.dark-mode .mb-3.p-3.rounded .small:not([style*="color"]) {
  color: var(--text, #e8eaf6) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   CHO Assess form — clf-field radio/checkbox labels
   These <label class="clf-field small"> elements have no explicit color,
   so in dark mode they vanish on the dark card background.
   ═══════════════════════════════════════════════════════════════════════ */
html.dark-mode .clf-field {
  color: var(--text, #e8eaf6) !important;
}

/* Also cover any plain inline label next to a radio/checkbox
   inside a ligtas-card in dark mode */
html.dark-mode .ligtas-card label.small,
html.dark-mode .ligtas-card .d-flex label {
  color: var(--text, #e8eaf6) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   AWD – Uri ng Diarrhea (Type of Diarrhea)
   Outer card: #fff8e1 (warm yellow); inner option pills: white background.
   ═══════════════════════════════════════════════════════════════════════ */
html.dark-mode [style*="background:#fff8e1"] {
  background: #2a1f00 !important;
  border-color: #f59e0b !important;
}
html.dark-mode [style*="background:#fff8e1"] .fw-bold,
html.dark-mode [style*="background:#fff8e1"] [style*="color:#92400e"] {
  color: #fbbf24 !important;
}
/* Inner option pill buttons (background:white) inside this card */
html.dark-mode [style*="background:#fff8e1"] label[style*="background:white"] {
  background: #3a2e0a !important;
  border-color: #78350f !important;
  color: #fef3c7 !important;
}
html.dark-mode [style*="background:#fff8e1"] label[style*="background:white"]:hover {
  background: #4a3a0f !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   SYMPTOM & EXPOSURE CHECKBOX CARDS — DARK MODE
   Both now use the same blue-navy style for full consistency.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Symptom cards (blue tint → dark navy) ── */
html.dark-mode .symptom-check {
  background: #0d1a3a !important;
  border-color: #2d3a6e !important;
  color: #c5cae9 !important;
}
html.dark-mode .symptom-check * {
  color: #c5cae9 !important;
}
html.dark-mode .symptom-check:hover {
  background: #121f45 !important;
  border-color: #3d4d8e !important;
}
html.dark-mode .symptom-check:has(input:checked) {
  background: #1a2a5e !important;
  border-color: var(--dc, #3949ab) !important;
  box-shadow: 0 0 0 2px rgba(57,73,171,0.25) !important;
}
html.dark-mode .symptom-check:has(input:checked) * {
  color: #e8eaf6 !important;
}

/* ── Exposure cards — now identical style to symptom cards ── */
html.dark-mode .exposure-check {
  background: #0d1a3a !important;
  border-color: #2d3a6e !important;
  color: #c5cae9 !important;
}
html.dark-mode .exposure-check * {
  color: #c5cae9 !important;
}
html.dark-mode .exposure-check:hover {
  background: #121f45 !important;
  border-color: #3d4d8e !important;
}
html.dark-mode .exposure-check:has(input:checked) {
  background: #1a2a5e !important;
  border-color: #3949ab !important;
  box-shadow: 0 0 0 2px rgba(57,73,171,0.25) !important;
}
html.dark-mode .exposure-check:has(input:checked) * {
  color: #e8eaf6 !important;
}

/* ── Checkbox accent color ── */
html.dark-mode .symptom-check input[type="checkbox"],
html.dark-mode .exposure-check input[type="checkbox"] {
  accent-color: var(--dc, #3949ab);
}


/* ═══════════════════════════════════════════════════════════════════════
   DENGUE — Travel outside city/province card (#fef3c7 amber tint)
   Previously only forced text dark on light bg — now truly dark card.
   ═══════════════════════════════════════════════════════════════════════ */
html.dark-mode [style*="background:#fef3c7"] {
  background: #221800 !important;
  border-color: #d97706 !important;
}
html.dark-mode [style*="background:#fef3c7"] .fw-bold,
html.dark-mode [style*="background:#fef3c7"] [style*="color:#92400e"] {
  color: #fbbf24 !important;
}
/* Radio option labels (Yes / No / Unknown) */
html.dark-mode [style*="background:#fef3c7"] label,
html.dark-mode [style*="background:#fef3c7"] label * {
  color: #fde68a !important;
}
/* "If Yes, where?" text input inside this card */
html.dark-mode [style*="background:#fef3c7"] input[type="text"].form-control {
  background: #2a1f00 !important;
  border-color: #78350f !important;
  color: #fef3c7 !important;
}
html.dark-mode [style*="background:#fef3c7"] input[type="text"].form-control::placeholder {
  color: #92651a !important;
}
/* Radio button accent color */
html.dark-mode [style*="background:#fef3c7"] input[type="radio"] {
  accent-color: #f59e0b;
}
/* ═══════════════════════════════════════════════════════════════════════
   Header Log In button — visibility in dark mode
   The .btn-ligtas-outline default styling is dark navy (royal) text+border
   which is invisible against the dark-mode page background. Override to
   white text + white border in dark mode for the header context.
   ═══════════════════════════════════════════════════════════════════════ */
html.dark-mode .ligtas-header .btn-ligtas-outline {
  background: rgba(255, 255, 255, .08) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, .6) !important;
}
html.dark-mode .ligtas-header .btn-ligtas-outline:hover {
  background: #ffffff !important;
  color: #1a237e !important;
  -webkit-text-fill-color: #1a237e !important;
  border-color: #ffffff !important;
}
/* ═══════════════════════════════════════════════════════════════════════
   MOBILE UX POLISH (June 2026)
   Append to the bottom of public/assets/css/ligtas.css
   ═══════════════════════════════════════════════════════════════════════

   Two main improvements for mobile:
   1. Disease pill rows scroll horizontally with a visible fade hint on the
      right edge (signals to users that there's more to scroll). Applies on
      mobile only; desktop still wraps normally.
   2. Map toolbar dropdowns (Base Map, Year, Month) become cleaner full-
      width controls on narrow screens with taller touch targets.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────── HORIZONTAL-SCROLL DISEASE PILLS (mobile) ─────────────── */

@media (max-width: 768px) {

  /* Public home page (.disease-pill-row → .disease-map-btn) */
  .disease-pill-row {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-right: 2.5rem !important;     /* room for the fade-out cue */
    position: relative;
    mask-image: linear-gradient(to right, #000 0%, #000 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 85%, transparent 100%);
  }
  .disease-pill-row::-webkit-scrollbar { display: none; }
  .disease-pill-row > * {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
  }

  /* Patient dashboard "Disease:" row — same horizontal scroll treatment.
     The dashboard wraps its pills in .ligtas-card with inline display:flex,
     so we target .disease-pill directly inside any flex container. */
  .patient-disease-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: .4rem;
    padding: .3rem .25rem .5rem;
    margin: 0 -.25rem;
    position: relative;
    mask-image: linear-gradient(to right, #000 0%, #000 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 85%, transparent 100%);
  }
  .patient-disease-row::-webkit-scrollbar { display: none; }
  .patient-disease-row > * {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  /* Patient REPORT CASE page — disease selector tiles ("HFMD", "Dengue"...)
     These are styled as buttons; on mobile we want a single sliding row. */
  .disease-select-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: .55rem;
    padding: .35rem .25rem .65rem;
    margin: 0 -.25rem;
    mask-image: linear-gradient(to right, #000 0%, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 88%, transparent 100%);
  }
  .disease-select-row::-webkit-scrollbar { display: none; }
  .disease-select-row > .disease-report-option,
  .disease-select-row > .col,
  .disease-select-row > [class*="col-"] {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
    min-width: 120px;          /* tap-target floor */
    white-space: nowrap;
  }
}

/* ─────────────── MAP TOOLBAR DROPDOWNS (mobile) ─────────────── */

@media (max-width: 768px) {
  /* Base Map label + buttons on its own row */
  .map-toolbar {
    gap: .5rem !important;
  }
  .map-toolbar .map-toolbar-group {
    width: 100%;
    flex-wrap: wrap;
  }

  /* Year and month dropdowns become full-width tap targets, stacked */
  .map-toolbar #yearSelect,
  .map-toolbar #monthSelect,
  .map-toolbar #weekSelect {
    max-width: none !important;
    flex: 1 1 calc(50% - .25rem);
    min-width: 130px;
    height: 44px !important;     /* iOS recommended touch target */
    font-size: .9rem !important;
    padding: 0 .85rem !important;
    border-radius: 10px !important;
  }

  /* Basemap buttons get equal share of width on small screens */
  .map-toolbar .basemap-btn {
    flex: 1 1 0;
    height: 40px;
    min-width: 70px;
    font-size: .85rem;
  }

  /* "Base Map:" label takes its own line so the buttons can breathe */
  .map-toolbar .map-toolbar-group > .small.fw-bold:first-child {
    flex: 1 0 100%;
    margin-bottom: 0;
  }

  /* Reset + fullscreen buttons drop to a tidy right-aligned bottom row */
  .map-toolbar .map-toolbar-group.ms-auto {
    justify-content: flex-end;
    gap: .4rem;
    margin-left: 0 !important;
  }
  .map-toolbar .map-tool-btn {
    height: 40px;
    padding: 0 .9rem;
    font-size: .85rem;
  }
}

/* ─────────────── EXTRA SMALL SCREENS (<400px) ─────────────── */

@media (max-width: 400px) {
  /* Make year/month dropdowns full-width each */
  .map-toolbar #yearSelect,
  .map-toolbar #monthSelect,
  .map-toolbar #weekSelect {
    flex: 1 1 100%;
  }
  /* Basemap buttons stay in one row, slightly smaller */
  .map-toolbar .basemap-btn {
    font-size: .8rem;
    padding: 0 .5rem;
  }
}