/*
 * SympWatch — Marilao, Bulacan Health Surveillance System
 * Professional Design System — Modern 2025 Government-Grade Interface
 * ISO/IEC 25010 Compliance — Mobile-first Fluid Responsive Design
 */

:root {
  /* ============================================================
   * SympWatch 2025 — Luxury Premium Design System
   * ISO/IEC 25010 | ISO/IEC 25002 Compliant
   * Palette: Deep Royal Navy + Warm Platinum + Gold Accent
   * ============================================================ */

  /* === Deep Royal Navy Primary === */
  --primary-50:  #eff3ff;
  --primary-100: #dce6fd;
  --primary-200: #b8cbfb;
  --primary-300: #86a5f7;
  --primary-400: #537df2;
  --primary-500: #2a57e8;
  --primary-600: #1d46d6;  /* main interactive */
  --primary-700: #1638b8;
  --primary-800: #102c96;
  --primary-900: #0b2078;

  /* === Warm Platinum Neutrals === */
  --neutral-0:   #ffffff;
  --neutral-25:  #f9fafd;
  --neutral-50:  #f3f4f9;
  --neutral-100: #e8eaf3;
  --neutral-200: #d0d4e8;
  --neutral-300: #adb4d4;
  --neutral-400: #8390ba;
  --neutral-500: #5c6a96;
  --neutral-600: #43507c;
  --neutral-700: #2e3864;
  --neutral-800: #1c254a;
  --neutral-900: #0f162f;

  /* === Gold Accent — Luxury Highlight === */
  --accent-gold:       #b8903c;
  --accent-gold-light: #faf3e0;
  --accent-gold-mid:   #d4a85a;

  /* === Accent Colors === */
  --accent-blue: #1d46d6;
  --accent-blue-light: #eff3ff;
  --accent-amber: #c49a3c;

  /* === Semantic Colors === */
  --success: #059669;
  --success-light: #ecfdf5;
  --warning: #d97706;
  --warning-light: #fffbeb;
  --danger: #dc2626;
  --danger-light: #fef2f2;
  --info: #1d46d6;
  --info-light: #eff3ff;

  /* === Portal Identity Tokens === */
  --portal-user:  var(--primary-600);
  --portal-hw:    #0d9488;
  --portal-admin: #374151;

  /* === Surface Layers === */
  --surface-0:      #ffffff;
  --surface-1:      #f7f8fd;
  --surface-2:      #eef0f8;
  --surface-raised: #ffffff;

  /* === Map Colors === */
  --map-green:  #22c55e;
  --map-blue:   #3b82f6;
  --map-yellow: #eab308;

  /* === Map Layout === */
  --map-min-height: 320px;

  /* === Typography — System Font Stack === */
  --font-sans: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Cascadia Code', 'Fira Code', Consolas, 'Courier New', monospace;

  /* Fluid type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.0625rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.375rem;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* === Spacing Scale === */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* === Border Radius — Generous & Modern === */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.25rem;
  --radius-3xl:  1.5rem;
  --radius-full: 9999px;

  /* === Refined Shadow System === */
  --shadow-xs:   0 1px 2px rgba(15, 22, 48, 0.05);
  --shadow-sm:   0 1px 4px rgba(15, 22, 48, 0.07), 0 1px 2px rgba(15, 22, 48, 0.04);
  --shadow-md:   0 4px 12px rgba(15, 22, 48, 0.08), 0 2px 4px rgba(15, 22, 48, 0.04);
  --shadow-lg:   0 8px 24px rgba(15, 22, 48, 0.10), 0 3px 8px rgba(15, 22, 48, 0.04);
  --shadow-xl:   0 20px 40px rgba(15, 22, 48, 0.12), 0 8px 16px rgba(15, 22, 48, 0.05);
  --shadow-card: 0 0 0 1px rgba(15, 22, 48, 0.06), 0 2px 8px rgba(15, 22, 48, 0.06);
  --shadow-gold: 0 4px 16px rgba(184, 144, 60, 0.18);

  /* === Transitions === */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 320ms ease;

  /* === Z-Index === */
  --z-dropdown:  1000;
  --z-sticky:    1020;
  --z-modal-bg:  1040;
  --z-modal:     1050;
  --z-tooltip:   1060;
}

/* ====== RESET ====== */
*, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--neutral-800);
  background: #f3f4f9;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
img, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
a { color: var(--primary-600); text-decoration: none; -webkit-transition: color var(--transition-fast); transition: color var(--transition-fast); }
a:hover { color: var(--primary-700); }
code { font-family: var(--font-mono); font-size: 0.85em; background: var(--neutral-100); padding: 0.125em 0.375em; border-radius: var(--radius-sm); color: var(--primary-700); }

/* ====== TYPOGRAPHY ====== */
h1, h2, h3, h4, h5, h6 { font-weight: var(--weight-semibold); line-height: var(--leading-tight); color: var(--neutral-900); letter-spacing: -0.01em; }
h1 { font-size: var(--text-2xl); letter-spacing: -0.02em; }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-base); }
h5 { font-size: var(--text-base); }
h6 { font-size: var(--text-sm); }
p { margin-bottom: var(--space-4); }
@media (min-width: 576px) {
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }
}
@media (min-width: 992px) {
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }
  h4 { font-size: var(--text-xl); }
}

/* ====== LAYOUT ====== */
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--space-4); }
@media (min-width: 480px) { .container { padding: 0 var(--space-5); } }
@media (min-width: 640px) { .container { padding: 0 var(--space-6); } }
@media (min-width: 1024px) { .container { padding: 0 var(--space-8); } }
.section { padding: var(--space-8) 0; }
@media (min-width: 576px) { .section { padding: var(--space-10) 0; } }
@media (min-width: 768px) { .section { padding: var(--space-12) 0; } }
@media (min-width: 1024px) { .section { padding: var(--space-16) 0; } }

/* ====== GRID ====== */
.row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 calc(var(--space-3) * -1); }
[class*="col-"] { padding: 0 var(--space-3); }
.col-6 { -webkit-box-flex: 0; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
.col-12 { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
@media (min-width: 576px) {
  .col-sm-4 { -webkit-flex: 0 0 33.333%; flex: 0 0 33.333%; max-width: 33.333%; }
  .col-sm-6 { -webkit-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
  .col-sm-12 { -webkit-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 768px) {
  .col-md-3 { -webkit-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
  .col-md-4 { -webkit-flex: 0 0 33.333%; flex: 0 0 33.333%; max-width: 33.333%; }
  .col-md-6 { -webkit-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
  .col-md-8 { -webkit-flex: 0 0 66.666%; flex: 0 0 66.666%; max-width: 66.666%; }
  .col-md-12 { -webkit-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 992px) {
  .col-lg-3 { -webkit-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
  .col-lg-4 { -webkit-flex: 0 0 33.333%; flex: 0 0 33.333%; max-width: 33.333%; }
  .col-lg-6 { -webkit-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
  .col-lg-8 { -webkit-flex: 0 0 66.666%; flex: 0 0 66.666%; max-width: 66.666%; }
}
@media (min-width: 1200px) {
  .col-xl-3 { -webkit-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
  .col-xl-4 { -webkit-flex: 0 0 33.333%; flex: 0 0 33.333%; max-width: 33.333%; }
  .col-xl-6 { -webkit-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
}

/* ====== NAVBAR ====== */
.navbar {
  background: -webkit-linear-gradient(315deg, var(--primary-700) 0%, var(--primary-800) 100%);
  background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-800) 100%);
  padding: var(--space-3) 0;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  -webkit-box-shadow: var(--shadow-md);
  box-shadow: var(--shadow-md);
}
.navbar .container { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; gap: var(--space-3); -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.navbar-brand { font-weight: var(--weight-bold); font-size: var(--text-base); color: #fff !important; letter-spacing: -0.02em; white-space: nowrap; }
.navbar-brand:hover { color: var(--primary-100) !important; }
.navbar-links { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: var(--space-2); -webkit-box-align: center; align-items: center; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
@media (min-width: 768px) {
  .navbar-brand { font-size: var(--text-lg); }
}

/* ====== PAGE HEADER ====== */
.page-header {
  padding: var(--space-5) 0;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.5;
}
.page-header .container { position: relative; z-index: 1; }
.page-header-title { font-size: var(--text-xl); font-weight: var(--weight-bold); color: #fff; margin-bottom: var(--space-1); }
.page-header-subtitle { font-size: var(--text-sm); opacity: 0.85; color: #fff; }
.header-admin { background: -webkit-linear-gradient(315deg, var(--neutral-700) 0%, var(--neutral-900) 100%); background: linear-gradient(135deg, var(--neutral-700) 0%, var(--neutral-900) 100%); }
.header-health-worker { background: -webkit-linear-gradient(315deg, #059669 0%, #047857 100%); background: linear-gradient(135deg, #059669 0%, #047857 100%); }
.header-default { background: -webkit-linear-gradient(315deg, var(--primary-600) 0%, var(--primary-800) 100%); background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-800) 100%); }
@media (min-width: 576px) {
  .page-header { padding: var(--space-6) 0; }
  .page-header-title { font-size: var(--text-2xl); }
}
@media (min-width: 768px) {
  .page-header { padding: var(--space-8) 0; }
  .page-header-title { font-size: var(--text-3xl); }
  .page-header-subtitle { font-size: var(--text-base); }
}

/* ====== CARD ====== */
.card {
  background: var(--neutral-0);
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius-xl);
  -webkit-box-shadow: var(--shadow-card);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-5);
  overflow: hidden;
  -webkit-transition: box-shadow var(--transition-base), transform var(--transition-base);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.card:hover {
  -webkit-box-shadow: var(--shadow-md);
  box-shadow: var(--shadow-md);
}
.card-header {
  background: var(--neutral-25);
  border-bottom: 1px solid var(--neutral-100);
  padding: var(--space-3) var(--space-4);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  color: var(--neutral-800);
}
.card-body { padding: var(--space-4); }
.card-footer {
  background: var(--neutral-25);
  border-top: 1px solid var(--neutral-100);
  padding: var(--space-3) var(--space-4);
}
@media (min-width: 576px) {
  .card-header { padding: var(--space-4) var(--space-5); }
  .card-body { padding: var(--space-5); }
  .card-footer { padding: var(--space-3) var(--space-5); }
}

/* ====== LUXURY CARD VARIANT ====== */
.card-luxury {
  background: var(--neutral-0);
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}
.card-luxury:hover { box-shadow: var(--shadow-lg); }
.card-luxury .card-header {
  background: linear-gradient(135deg, var(--primary-900) 0%, var(--primary-800) 100%);
  border-bottom: none;
  color: #fff;
  padding: var(--space-4) var(--space-5);
}
.card-luxury .card-header h5,
.card-luxury .card-header h4,
.card-luxury .card-header h3 { color: #fff; margin: 0; }
.card-gold-accent { border-top: 3px solid var(--accent-gold); }
.card-primary-accent { border-top: 3px solid var(--primary-600); }

/* ====== STAT CARD ====== */
.stat-card {
  background: var(--neutral-0);
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  text-align: center;
  -webkit-transition: all var(--transition-base);
  transition: all var(--transition-base);
  -webkit-box-shadow: var(--shadow-xs);
  box-shadow: var(--shadow-xs);
}
.stat-card:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); -webkit-box-shadow: var(--shadow-md); box-shadow: var(--shadow-md); }
.stat-number {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--primary-600);
  line-height: 1;
  margin-bottom: var(--space-2);
}
.stat-label {
  font-size: var(--text-xs);
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--weight-medium);
}
@media (min-width: 576px) {
  .stat-card { padding: var(--space-5); }
  .stat-number { font-size: var(--text-3xl); }
}

/* ====== BUTTONS ====== */
.btn {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-transition: all var(--transition-fast);
  transition: all var(--transition-fast);
  gap: var(--space-2);
  white-space: nowrap;
  text-decoration: none;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn-primary {
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
  color: #fff;
  border-color: var(--primary-600);
  box-shadow: 0 2px 8px rgba(29, 70, 214, 0.28);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-800) 100%);
  border-color: var(--primary-700);
  color: #fff;
  box-shadow: 0 4px 12px rgba(29, 70, 214, 0.35);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); box-shadow: none; }
.btn-secondary { background: var(--neutral-0); color: var(--neutral-700); border-color: var(--neutral-200); box-shadow: var(--shadow-xs); }
.btn-secondary:hover { background: var(--neutral-50); color: var(--neutral-800); border-color: var(--neutral-300); }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: #059669; color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #dc2626; color: #fff; }
.btn-warning { background: var(--warning); color: #fff; }
.btn-warning:hover { background: #d97706; color: #fff; }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.btn-outline-light:hover { background: rgba(255,255,255,0.1); border-color: #fff; color: #fff; }
.btn-outline-primary { background: transparent; color: var(--primary-600); border-color: var(--primary-300); }
.btn-outline-primary:hover { background: var(--primary-50); color: var(--primary-700); }
.btn-outline-danger { background: transparent; color: var(--danger); border-color: #fca5a5; }
.btn-outline-danger:hover { background: var(--danger-light); }
.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.btn-lg { padding: var(--space-3) var(--space-6); font-size: var(--text-base); }
.btn-light { background: #fff; color: var(--neutral-800); border-color: var(--neutral-200); }
.btn-light:hover { background: var(--neutral-50); color: var(--neutral-900); }
.btn-block { display: block; width: 100%; }

/* ====== FORMS ====== */
.form-group { margin-bottom: var(--space-4); }
.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--neutral-700);
  margin-bottom: var(--space-1);
}
.form-control {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--neutral-800);
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  -webkit-transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.form-control:focus { outline: none; border-color: var(--primary-400); -webkit-box-shadow: 0 0 0 3px rgba(76,110,245,0.12); box-shadow: 0 0 0 3px rgba(76,110,245,0.12); }
.form-control::-webkit-input-placeholder { color: var(--neutral-400); }
.form-control:-ms-input-placeholder { color: var(--neutral-400); }
.form-control::placeholder { color: var(--neutral-400); }
.form-text { font-size: var(--text-xs); color: var(--neutral-500); margin-top: var(--space-1); }
select.form-control { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7685' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.form-check { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); cursor: pointer; }
.form-check input[type="checkbox"], .form-check input[type="radio"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--primary-600); }

/* ====== TABLES ====== */
.table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th {
  background: var(--neutral-25);
  font-weight: var(--weight-semibold);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--neutral-100);
  color: var(--neutral-600);
  white-space: nowrap;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--neutral-100); vertical-align: middle; }
.table tbody tr { -webkit-transition: background var(--transition-fast); transition: background var(--transition-fast); }
.table tbody tr:hover { background: var(--neutral-25); }

/* ====== BADGES ====== */
.badge {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  padding: 0.125rem var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.badge-primary { background: var(--primary-100); color: var(--primary-700); }
.badge-success { background: var(--success-light); color: #065f46; }
.badge-warning { background: var(--warning-light); color: #92400e; }
.badge-danger { background: var(--danger-light); color: #991b1b; }
.badge-info { background: var(--info-light); color: #1e40af; }
.badge-secondary { background: var(--neutral-100); color: var(--neutral-600); }

/* ====== ALERTS ====== */
.alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); margin-bottom: var(--space-4); font-size: var(--text-sm); border: 1px solid transparent; }
.alert-success { background: var(--success-light); color: #065f46; border-color: #a7f3d0; }
.alert-warning { background: var(--warning-light); color: #92400e; border-color: #fde68a; }
.alert-danger { background: var(--danger-light); color: #991b1b; border-color: #fecaca; }
.alert-info { background: var(--info-light); color: #1e40af; border-color: #bfdbfe; }

/* ====== MAP — Fluid Layout ====== */
#map { height: clamp(320px, 50vw, 640px); width: 100%; border-radius: var(--radius-xl); min-height: var(--map-min-height); }
@media (max-width: 767px) and (orientation: landscape) { #map { height: 50vh; min-height: 250px; } }
@media (min-width: 1920px) { #map { max-height: 700px; } }

/* ====== CHART — Fluid ====== */
.chart-wrapper { height: clamp(250px, 30vw, 360px); position: relative; }

/* ====== INFO BOX ====== */
.info-box {
  background: var(--primary-50);
  border-left: 3px solid var(--primary-500);
  padding: var(--space-3) var(--space-4);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  margin: var(--space-3) 0;
  font-size: var(--text-sm);
}
.info-box-content { color: var(--neutral-600); font-size: var(--text-sm); margin-top: var(--space-1); }
.warning-box { background: var(--warning-light); border-left-color: var(--warning); }
.danger-box { background: var(--danger-light); border-left-color: var(--danger); }

/* ====== FILTER BAR ====== */
.filter-bar {
  background: var(--neutral-0);
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius-xl);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: var(--space-3);
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-shadow: var(--shadow-xs);
  box-shadow: var(--shadow-xs);
}
.time-selector {
  background: var(--neutral-0);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  border: 1px solid var(--neutral-200);
  font-size: var(--text-sm);
  cursor: pointer;
}

/* ====== EMPTY STATE ====== */
.empty-state { text-align: center; padding: var(--space-8) var(--space-4); }
.empty-state h4 { font-size: var(--text-xl); margin: var(--space-4) 0 var(--space-2); color: var(--neutral-700); }
.empty-state p { color: var(--neutral-500); margin-bottom: var(--space-5); }
@media (min-width: 768px) {
  .empty-state { padding: var(--space-12) var(--space-4); }
}

/* ====== LEGEND ====== */
.legend-item { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.legend-color { width: 14px; height: 14px; border-radius: var(--radius-sm); -webkit-flex-shrink: 0; flex-shrink: 0; }

/* ====== FOOTER ====== */
.footer {
  background: var(--neutral-900);
  color: var(--neutral-400);
  padding: var(--space-6) 0;
  margin-top: var(--space-8);
}
.footer-title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: #fff; margin-bottom: var(--space-3); }
.footer-text { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--neutral-400); }
.footer-divider { border-top: 1px solid var(--neutral-700); margin-top: var(--space-6); padding-top: var(--space-5); text-align: center; }
@media (min-width: 768px) {
  .footer { padding: var(--space-8) 0; margin-top: var(--space-12); }
}

/* ====== AUTH PAGES ====== */
.auth-main {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
  min-height: 100vh;
  background: -webkit-linear-gradient(330deg, var(--neutral-50) 0%, var(--neutral-100) 100%);
  background: linear-gradient(160deg, var(--neutral-50) 0%, var(--neutral-100) 100%);
}
.auth-card { width: 100%; max-width: 440px; }
.auth-header { text-align: center; margin-bottom: var(--space-6); }
.auth-title { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--neutral-900); }
.auth-subtitle { color: var(--neutral-500); margin-top: var(--space-1); font-size: var(--text-sm); }
.auth-logo {
  width: 56px; height: 56px;
  margin: 0 auto var(--space-4);
  border-radius: var(--radius-xl);
  display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center;
}
.login-type-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3);
  color: #fff;
}
@media (min-width: 576px) {
  .auth-main { padding: var(--space-8) var(--space-4); }
  .auth-title { font-size: var(--text-2xl); }
}

/* ====== TOGGLE SWITCH ====== */
.toggle-switch { position: relative; width: 40px; height: 22px; display: inline-block; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--neutral-300); -webkit-transition: var(--transition-base); transition: var(--transition-base); border-radius: 22px;
}
.toggle-slider:before {
  position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px;
  background: #fff; -webkit-transition: var(--transition-base); transition: var(--transition-base); border-radius: 50%;
}
input:checked + .toggle-slider { background: var(--primary-500); }
input:checked + .toggle-slider:before { -webkit-transform: translateX(18px); transform: translateX(18px); }

/* ====== TAB NAV ====== */
.nav-tabs { display: -webkit-box; display: flex; gap: 0; border-bottom: 2px solid var(--neutral-100); margin-bottom: var(--space-4); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nav-tabs .nav-link {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--neutral-500);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  -webkit-transition: all var(--transition-fast);
  transition: all var(--transition-fast);
  background: none;
  border-top: none; border-left: none; border-right: none;
  white-space: nowrap;
}
.nav-tabs .nav-link:hover { color: var(--primary-600); }
.nav-tabs .nav-link.active { color: var(--primary-600); border-bottom-color: var(--primary-600); }
.tab-pane { display: none; }
.tab-pane.show.active { display: block; }

/* ====== QR UPLOAD ====== */
.qr-upload-area {
  border: 2px dashed var(--neutral-300);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  text-align: center;
  cursor: pointer;
  -webkit-transition: all var(--transition-base);
  transition: all var(--transition-base);
}
.qr-upload-area:hover, .qr-upload-area.dragover { border-color: var(--primary-400); background: var(--primary-50); }
.qr-upload-area input[type="file"] { display: none; }

/* ====== SYMPTOM OPTION ====== */
.symptom-option {
  background: var(--neutral-0);
  border: 2px solid var(--neutral-200);
  border-radius: var(--radius-xl);
  /* right side clears the absolute sd-info-btn (26px + 8px offset + 10px gap = 44px) */
  padding: var(--space-3) 44px var(--space-3) var(--space-3);
  cursor: pointer;
  -webkit-transition: all var(--transition-fast);
  transition: all var(--transition-fast);
  position: relative;
  /* Fluid layout — flex prevents check-icon/text overlap on any screen width */
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  box-sizing: border-box;
  min-height: 64px;
}
.symptom-option:hover { border-color: var(--primary-300); background: var(--primary-50); }
.symptom-option.selected { border-color: var(--primary-500); background: var(--primary-50); -webkit-box-shadow: 0 0 0 3px rgba(76,110,245,0.1); box-shadow: 0 0 0 3px rgba(76,110,245,0.1); }
@media (min-width: 576px) {
  .symptom-option { padding: var(--space-4) 44px var(--space-4) var(--space-4); }
}

/* ====== SYMPTOM SELECTION GRID (fluid, mobile-first) ====== */
/* ISO/IEC 25010 — Usability: equal-width fluid cards, no overlap, even visual weight */
/* ISO/IEC 25002 — Effectiveness: single-column on mobile for thumb-friendly tap targets */
.sw-symptom-grid {
  display: grid;
  grid-template-columns: 1fr;           /* mobile-first: 1 col, 100% fluid width */
  gap: var(--space-3);
  width: 100%;
}
@media (min-width: 576px) {
  .sw-symptom-grid { grid-template-columns: repeat(2, 1fr); }  /* ≥576px: 2 equal cols */
}
@media (min-width: 992px) {
  .sw-symptom-grid { grid-template-columns: repeat(3, 1fr); }  /* ≥992px: 3 equal cols */
}
@media (min-width: 1200px) {
  .sw-symptom-grid { gap: var(--space-4); }
}

/* Symptom option — check icon (min-width ensures it never collapses into text) */
.sw-so-check {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: var(--radius-lg);
  background: var(--neutral-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

/* Symptom option — text block, fills remaining space */
.sw-so-text {
  flex: 1;
  min-width: 0;          /* prevents flex child overflow */
}
.sw-so-text strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--neutral-900);
  line-height: 1.3;
  word-break: break-word;
}
.sw-so-sub {
  font-size: var(--text-xs);
  color: var(--neutral-500);
  margin: 2px 0 0 0;
  line-height: 1.4;
}
.member-option {
  background: var(--neutral-25);
  border: 2px solid var(--neutral-200);
  border-radius: var(--radius-xl);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  -webkit-transition: all var(--transition-fast);
  transition: all var(--transition-fast);
  /* Fluid layout — flex prevents icon/text overlap on any screen width */
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  box-sizing: border-box;
  min-height: 68px;
}
.member-option:hover { border-color: var(--primary-300); background: var(--primary-50); }
.member-option.selected { border-color: var(--primary-500); background: var(--primary-50); -webkit-box-shadow: 0 0 0 3px rgba(76,110,245,0.10); box-shadow: 0 0 0 3px rgba(76,110,245,0.10); }

/* ====== MEMBER SELECTION GRID (fluid, mobile-first) ====== */
/* ISO/IEC 25010 — Usability: equal-width fluid cards, no overlap */
/* ISO/IEC 25002 — Effectiveness: single-column on mobile for thumb-friendly tap targets */
.sw-member-grid {
  display: grid;
  grid-template-columns: 1fr;         /* mobile-first: 1 col, 100% fluid width */
  gap: var(--space-3);
  width: 100%;
}
@media (min-width: 576px) {
  .sw-member-grid { grid-template-columns: repeat(2, 1fr); } /* ≥576px: 2 equal cols */
}
@media (min-width: 1200px) {
  .sw-member-grid { gap: var(--space-4); }
}

/* Member option — icon avatar (no flex-shrink, never overlaps text) */
.sw-mo-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;   /* prevents icon from collapsing */
  border-radius: 50%;
  background: var(--neutral-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sw-mo-icon--primary { background: var(--primary-100); }

/* Member option — text block fills remaining space */
.sw-mo-text {
  flex: 1;
  min-width: 0;      /* prevents flex child overflow */
}
.sw-mo-text strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--neutral-900);
  line-height: 1.3;
  word-break: break-word;
}
.sw-mo-sub {
  font-size: var(--text-xs);
  color: var(--neutral-500);
  margin: 2px 0 0 0;
  line-height: 1.4;
}

/* ====== MODAL ====== */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: var(--z-modal-bg);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.modal-content {
  position: relative;
  width: calc(100% - 32px);
  max-width: 600px;
  margin: 48px auto;
  background: var(--neutral-0);
  border-radius: var(--radius-xl);
  overflow: hidden;
  -webkit-box-shadow: var(--shadow-xl);
  box-shadow: var(--shadow-xl);
}
.modal-header {
  padding: var(--space-4) var(--space-5);
  background: var(--neutral-25);
  border-bottom: 1px solid var(--neutral-100);
  display: -webkit-box; display: flex;
  -webkit-box-pack: justify; justify-content: space-between;
  -webkit-box-align: center; align-items: center;
}
.modal-close {
  border: none;
  background: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--neutral-500);
  line-height: 1;
}
.modal-body { padding: var(--space-5); max-height: 70vh; overflow-y: auto; }

/* ====== FORM SECTION ====== */
.form-section {
  background: var(--neutral-25);
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.form-section h6 { margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--neutral-100); }

/* ====== PIN INPUT ====== */
.pin-input { font-size: 1.5rem; letter-spacing: 0.5em; text-align: center; }

/* ====== HERO SECTION — Luxury 2025 ====== */
.hero-section {
  background: linear-gradient(150deg, var(--primary-900) 0%, var(--primary-800) 45%, var(--primary-700) 100%);
  color: #fff;
  padding: var(--space-12) 0 var(--space-10);
  position: relative;
  overflow: hidden;
}
.hero-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.025' fill-rule='evenodd'%3E%3Ccircle cx='40' cy='40' r='2'/%3E%3C/g%3E%3C/svg%3E");
}
.hero-section::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to top, #f3f4f9, transparent);
}
.hero-section .container { position: relative; z-index: 1; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.88);
  padding: 5px 14px;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
  backdrop-filter: blur(8px);
}
.hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: var(--weight-bold);
  color: #fff;
  margin-bottom: var(--space-4);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.hero-title span { color: var(--accent-gold-mid); }
.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.125rem);
  opacity: 0.82;
  margin-bottom: var(--space-8);
  max-width: 560px;
  line-height: 1.65;
}
.hero-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}
@media (min-width: 576px) {
  .hero-section { padding: var(--space-16) 0 var(--space-12); }
}
@media (min-width: 768px) {
  .hero-section { padding: var(--space-20) 0 var(--space-16); }
}
@media (min-width: 1024px) {
  .hero-section { padding: calc(var(--space-20) + var(--space-8)) 0 var(--space-20); }
}

/* ====== SYMPTOM GRID ====== */
.symptom-grid { display: -ms-grid; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 480px) { .symptom-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .symptom-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }
@media (min-width: 768px) { .symptom-grid { grid-template-columns: repeat(5, 1fr); } }
.symptom-icon-card {
  text-align: center;
  padding: var(--space-3);
  background: var(--neutral-0);
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius-xl);
  -webkit-transition: all var(--transition-base);
  transition: all var(--transition-base);
}
.symptom-icon-card:hover { -webkit-box-shadow: var(--shadow-md); box-shadow: var(--shadow-md); -webkit-transform: translateY(-2px); transform: translateY(-2px); }
.symptom-icon-card .icon-circle {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center;
  margin: 0 auto var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: #fff;
}
@media (min-width: 576px) {
  .symptom-icon-card { padding: var(--space-4); }
  .symptom-icon-card .icon-circle { width: 48px; height: 48px; font-size: var(--text-xl); margin-bottom: var(--space-3); }
}

/* ====== STEP CARD ====== */
.step-number {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--primary-100);
  color: var(--primary-700);
  display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center;
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  margin: 0 auto var(--space-3);
}
@media (min-width: 576px) {
  .step-number { width: 40px; height: 40px; font-size: var(--text-lg); }
}

/* ====== BARANGAY CHECKBOX ====== */
.barangay-checkbox { max-height: 200px; overflow-y: auto; background: var(--neutral-25); border-radius: var(--radius-lg); padding: var(--space-3); }

/* ====== QR PREVIEW ====== */
.qr-preview { max-width: 150px; border-radius: var(--radius-lg); }

/* ====== LOADING ====== */
.loading-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--neutral-200);
  border-top-color: var(--primary-500);
  border-radius: 50%;
  -webkit-animation: spin 0.7s linear infinite;
  animation: spin 0.7s linear infinite;
}
@-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); } }
@keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

/* ====== SKELETON LOADING ====== */
.skeleton {
  background: -webkit-linear-gradient(left, var(--neutral-100) 25%, var(--neutral-50) 50%, var(--neutral-100) 75%);
  background: linear-gradient(90deg, var(--neutral-100) 25%, var(--neutral-50) 50%, var(--neutral-100) 75%);
  background-size: 200% 100%;
  -webkit-animation: skeleton-loading 1.5s infinite;
  animation: skeleton-loading 1.5s infinite;
  border-radius: var(--radius-md);
  height: 1em;
}
@-webkit-keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ====== ANIMATIONS ====== */
@-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@-webkit-keyframes slideUp { from { opacity: 0; -webkit-transform: translateY(8px); } to { opacity: 1; -webkit-transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; -webkit-transform: translateY(8px); transform: translateY(8px); } to { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } }
.animate-fade-in { -webkit-animation: fadeIn var(--transition-base); animation: fadeIn var(--transition-base); }
.animate-slide-up { -webkit-animation: slideUp var(--transition-slow); animation: slideUp var(--transition-slow); }

/* ====== CORRELATION MATRIX / HEATMAP ====== */
.correlation-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.correlation-grid table { border-collapse: collapse; width: auto; min-width: 100%; }
.correlation-grid th, .correlation-grid td {
  padding: var(--space-2);
  text-align: center;
  font-size: var(--text-xs);
  border: 1px solid var(--neutral-100);
  min-width: 48px;
  white-space: nowrap;
}
.correlation-grid th { background: var(--neutral-25); font-weight: var(--weight-semibold); }
.heatmap-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.heatmap-grid table { border-collapse: collapse; width: 100%; }
.heatmap-grid th, .heatmap-grid td {
  padding: 2px;
  text-align: center;
  font-size: var(--text-xs);
  min-width: 28px;
  height: 28px;
}
.heatmap-grid th { background: var(--neutral-25); font-weight: var(--weight-medium); padding: var(--space-1); }
.heatmap-cell { border-radius: 3px; display: block; width: 100%; height: 100%; min-height: 24px; }

/* ====== DATA SCIENCE PANEL ====== */
.ds-panel {
  background: var(--neutral-0);
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.ds-panel-title { font-size: var(--text-base); font-weight: var(--weight-semibold); margin-bottom: var(--space-3); color: var(--neutral-800); }
.ds-metric {
  display: -webkit-box; display: flex;
  -webkit-box-pack: justify; justify-content: space-between;
  -webkit-box-align: center; align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--neutral-50);
  font-size: var(--text-sm);
}
.ds-metric:last-child { border-bottom: none; }
.ds-metric-label { color: var(--neutral-500); }
.ds-metric-value { font-weight: var(--weight-semibold); color: var(--neutral-800); }

/* ====== SIR MODEL ====== */
.sir-controls {
  display: -ms-grid; display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 576px) { .sir-controls { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .sir-controls { grid-template-columns: repeat(3, 1fr); } }
.sir-summary {
  display: -ms-grid; display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
}
@media (min-width: 576px) { .sir-summary { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .sir-summary { grid-template-columns: repeat(6, 1fr); } }
.sir-stat {
  background: var(--neutral-25);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  text-align: center;
}
.sir-stat-value { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--primary-700); }
.sir-stat-label { font-size: var(--text-xs); color: var(--neutral-500); margin-top: var(--space-1); }

/* ====== EXPORT BUTTONS ====== */
.export-group {
  display: -webkit-box; display: flex;
  gap: var(--space-2);
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
}
.btn-export {
  display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex;
  -webkit-box-align: center; align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-lg);
  border: 1px solid var(--neutral-200);
  background: var(--neutral-0);
  color: var(--neutral-700);
  cursor: pointer;
  text-decoration: none;
  -webkit-transition: all var(--transition-fast);
  transition: all var(--transition-fast);
}
.btn-export:hover { background: var(--neutral-50); border-color: var(--neutral-300); color: var(--neutral-800); }

/* ====== RESPONSIVE STAT GRID ====== */
.stat-grid {
  display: -ms-grid; display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (min-width: 576px) { .stat-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } }
@media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }

/* ====== PROGRESS BAR ====== */
.progress-bar-container { height: 6px; background: var(--neutral-100); border-radius: 3px; overflow: hidden; margin-top: var(--space-1); }
.progress-bar-fill { height: 100%; border-radius: 3px; -webkit-transition: width 0.5s ease; transition: width 0.5s ease; }

/* ====== TOOLTIP ====== */
.custom-tooltip {
  position: absolute;
  background: var(--neutral-900);
  color: #fff;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  z-index: var(--z-tooltip);
  pointer-events: none;
  white-space: nowrap;
  -webkit-box-shadow: var(--shadow-lg);
  box-shadow: var(--shadow-lg);
}

/* ====== LOCATION PIN ====== */
.location-required-card {
  border: 2px solid var(--warning);
  border-radius: var(--radius-xl);
  background: var(--warning-light);
}
.location-pin-icon {
  width: 48px; height: 48px;
  display: -webkit-box; display: flex;
  -webkit-box-align: center; align-items: center;
  -webkit-box-pack: center; justify-content: center;
  border-radius: 50%;
  background: var(--primary-100);
  color: var(--primary-600);
  margin: 0 auto var(--space-3);
}
#locationMap { height: clamp(300px, 40vw, 420px); width: 100%; border-radius: var(--radius-lg); border: 2px solid var(--neutral-200); }

/* ====== COMPARISON TABLE ====== */
.comparison-positive { color: var(--danger); font-weight: var(--weight-semibold); }
.comparison-negative { color: var(--success); font-weight: var(--weight-semibold); }
.comparison-neutral { color: var(--neutral-500); }

/* ====== UTILITY CLASSES ====== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-primary { color: var(--primary-600); }
.text-secondary { color: var(--neutral-500); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-info { color: var(--info); }
.text-white { color: #fff; }
.font-bold { font-weight: var(--weight-bold); }
.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }

.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
.d-inline-flex { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; }
.flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; }
.flex-wrap { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.flex-1 { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; }
.align-items-center { -webkit-box-align: center; -webkit-align-items: center; align-items: center; }
.align-items-start { -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; }
.justify-content-center { -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; }
.justify-content-between { -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; }
.justify-content-end { -webkit-box-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.w-100 { width: 100%; }
.h-100 { height: 100%; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.p-0 { padding: 0; }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }

.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.position-relative { position: relative; }
.border-0 { border: 0; }
.rounded { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.shadow-sm { -webkit-box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm); }
.shadow-md { -webkit-box-shadow: var(--shadow-md); box-shadow: var(--shadow-md); }

/* ====== RESPONSIVE UTILITIES ====== */
@media (max-width: 359px) {
  .hide-xs { display: none !important; }
  .container { padding: 0 var(--space-3); }
  .btn { font-size: var(--text-xs); padding: var(--space-1) var(--space-2); }
}
@media (max-width: 479px) {
  .hide-xxs { display: none !important; }
  .table { font-size: var(--text-xs); }
  .table th, .table td { padding: var(--space-2); }
}
@media (max-width: 575px) {
  .hide-mobile { display: none !important; }
  .btn:not(.btn-sm):not(.btn-lg) { font-size: var(--text-xs); padding: var(--space-2) var(--space-3); }
  .filter-bar { -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: stretch; align-items: stretch; }
  .stat-card { padding: var(--space-3); }
  .stat-number { font-size: var(--text-xl); }
  .card-header { padding: var(--space-3); }
  .card-body { padding: var(--space-3); }
}
@media (min-width: 576px) and (max-width: 767px) {
  .hide-sm { display: none !important; }
}
@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}
@media (min-width: 768px) {
  .d-md-flex { display: -webkit-box; display: flex; }
  .d-md-block { display: block; }
  .d-md-none { display: none; }
}
@media (min-width: 992px) {
  .d-lg-flex { display: -webkit-box; display: flex; }
  .d-lg-block { display: block; }
  .d-lg-none { display: none; }
}

/* ====== ENHANCED RESPONSIVE — ISO/IEC 25010 Usability & Performance ====== */

/* Touch-friendly targets for mobile (WCAG 2.1 AAA) */
@media (max-width: 767px) {
  .btn, .time-btn, .nav-link, .toggle-switch,
  .form-check, .symptom-option, .member-option,
  input[type="file"], .fm-close, .btn-fields, .btn-delete-sm {
    min-height: 44px;
    min-width: 44px;
  }
  .time-btn { min-width: 44px; min-height: 36px; }
}

/* Extra small devices — 320px and below */
@media (max-width: 359px) {
  :root {
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-base: 0.8125rem;
  }
  .page-header { padding: var(--space-3) 0; }
  .page-header-title { font-size: var(--text-lg); }
  .page-header-subtitle { font-size: var(--text-xs); }
  .stat-card { padding: var(--space-2); }
  .stat-number { font-size: var(--text-lg); }
  .stat-label { font-size: 0.5625rem; }
  .modal-content { width: calc(100% - 16px); margin: 24px auto; }
  .modal-body { padding: var(--space-3); max-height: 80vh; }
  .auth-card { padding: 0 var(--space-2); }
}

/* Small mobile — 360-479px */
@media (min-width: 360px) and (max-width: 479px) {
  .stat-grid { gap: var(--space-2); }
  .symptom-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .sir-controls { grid-template-columns: 1fr; }
  .export-group { -webkit-flex-direction: column; flex-direction: column; }
  .export-group .btn-export { width: 100%; -webkit-box-pack: center; justify-content: center; }
}

/* Standard mobile — 480-575px */
@media (min-width: 480px) and (max-width: 575px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .sir-controls { grid-template-columns: repeat(2, 1fr); }
}

/* Large mobile / small tablet — 576-639px */
@media (min-width: 576px) and (max-width: 639px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .symptom-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Tablet — 640-767px */
@media (min-width: 640px) and (max-width: 767px) {
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .sir-summary { grid-template-columns: repeat(3, 1fr); }
}

/* Landscape orientation — prevent content overflow */
@media (max-width: 767px) and (orientation: landscape) {
  .page-header { padding: var(--space-3) 0; }
  .page-header-title { font-size: var(--text-lg); }
  #map { height: 50vh; min-height: 250px; }
  .hero-section { padding: var(--space-6) 0 var(--space-4); }
  .modal-body { max-height: 60vh; }
}

/* High-DPI displays — sharper borders */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .card, .stat-card, .chart-card, .ds-panel, .filter-bar {
    border-width: 0.5px;
  }
}

/* Reduced motion — accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    -webkit-animation-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
    -webkit-transition-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ====== PRINT ====== */
@media print {
  .navbar, .footer, .btn, .filter-bar, .export-group { display: none !important; }
  .card { -webkit-box-shadow: none; box-shadow: none; border: 1px solid #ddd; page-break-inside: avoid; }
  body { background: #fff; }
  .page-header { background: #333 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ============================================================
   ENHANCED ALERT INTELLIGENCE SYSTEM — GLOBAL STYLES
   ISO/IEC 25010 — Reliability, Usability, Performance
   Mobile-First Responsive Design System v2.0
   ============================================================ */

/* ─── Shared severity semantic tokens (global reuse) ─────── */
:root {
  --alert-critical-bg: #fef2f2; --alert-critical-fg: #991b1b;
  --alert-critical-bd: #fecaca; --alert-critical-dot: #ef4444;
  --alert-high-bg: #fff7ed;     --alert-high-fg: #c2410c;
  --alert-high-bd: #fed7aa;     --alert-high-dot: #f97316;
  --alert-medium-bg: #fffbeb;   --alert-medium-fg: #92400e;
  --alert-medium-bd: #fde68a;   --alert-medium-dot: #f59e0b;
  --alert-low-bg: #ecfdf5;      --alert-low-fg: #065f46;
  --alert-low-bd: #a7f3d0;      --alert-low-dot: #10b981;
}

/* ─── Alert count badge (dashboard header) ──────────────── */
.alert-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--alert-critical-dot); color: #fff;
  border-radius: var(--radius-full); font-size: 10px;
  font-weight: var(--weight-bold); min-width: 18px; height: 18px;
  padding: 0 5px; margin-left: 4px; vertical-align: middle;
  animation: pulse-badge 2s infinite;
}
@keyframes pulse-badge {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.75; transform: scale(0.95); }
}

/* ─── Severity pill utility (reusable across all pages) ─── */
.sev-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: var(--radius-full);
  font-size: 10px; font-weight: var(--weight-bold);
  text-transform: uppercase; letter-spacing: .05em;
}
.sev-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.sev-pill-critical { background: var(--alert-critical-bg); color: var(--alert-critical-fg); border: 1px solid var(--alert-critical-bd); }
.sev-pill-critical::before { background: var(--alert-critical-dot); }
.sev-pill-high     { background: var(--alert-high-bg);     color: var(--alert-high-fg);     border: 1px solid var(--alert-high-bd); }
.sev-pill-high::before     { background: var(--alert-high-dot); }
.sev-pill-medium   { background: var(--alert-medium-bg);   color: var(--alert-medium-fg);   border: 1px solid var(--alert-medium-bd); }
.sev-pill-medium::before   { background: var(--alert-medium-dot); }
.sev-pill-low      { background: var(--alert-low-bg);      color: var(--alert-low-fg);      border: 1px solid var(--alert-low-bd); }
.sev-pill-low::before      { background: var(--alert-low-dot); }

/* ─── Alert ribbon (dashboard summary) ──────────────────── */
.alert-ribbon {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); align-items: center;
  background: var(--neutral-0); border-radius: var(--radius-xl);
  border: 1px solid var(--neutral-200); box-shadow: var(--shadow-sm);
}
.alert-ribbon-critical { border-left: 4px solid var(--alert-critical-dot); }
.alert-ribbon-high     { border-left: 4px solid var(--alert-high-dot); }
.alert-ribbon-count {
  font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: 1;
}

/* ─── Monitoring widget (for dashboard sidebar) ──────────── */
.alert-monitor-widget {
  background: var(--neutral-0); border: 1px solid var(--neutral-200);
  border-radius: var(--radius-xl); overflow: hidden;
}
.alert-monitor-widget-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--neutral-50); border-bottom: 1px solid var(--neutral-200);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--neutral-800);
}
.alert-monitor-item {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--neutral-100);
  transition: background var(--transition-fast);
}
.alert-monitor-item:last-child { border-bottom: none; }
.alert-monitor-item:hover { background: var(--neutral-25); }
.alert-monitor-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  margin-top: 4px;
}
.alert-monitor-body { flex: 1; min-width: 0; }
.alert-monitor-title {
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--neutral-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.alert-monitor-meta { font-size: var(--text-xs); color: var(--neutral-500); margin-top: 2px; }

/* ─── Compact alert summary card (for admin dashboard) ──── */
.alert-summary-card {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--neutral-0); border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg); min-width: 120px;
  transition: box-shadow var(--transition-fast);
}
.alert-summary-card:hover { box-shadow: var(--shadow-md); }
.alert-summary-num {
  font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: 1;
}
.alert-summary-label { font-size: var(--text-xs); color: var(--neutral-500); }

/* ─── Responsive grid improvements ──────────────────────── */

/* Ultra-wide (1920px+) */
@media (min-width: 1920px) {
  .container { max-width: 1760px; }
  .stat-grid { grid-template-columns: repeat(6, 1fr); }
  .aic-main { max-width: 1800px; }
}

/* Wide (1400-1919px) */
@media (min-width: 1400px) and (max-width: 1919px) {
  .stat-grid { grid-template-columns: repeat(5, 1fr); }
}

/* Large desktop (1200-1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Desktop (992-1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Large tablet / small desktop (768-991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .alert-ribbon { justify-content: center; }
}

/* Tablet portrait (640-767px) */
@media (min-width: 640px) and (max-width: 767px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .alert-summary-card { min-width: 110px; }
}

/* Large mobile (480-639px) */
@media (min-width: 480px) and (max-width: 639px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .alert-ribbon { flex-direction: column; align-items: stretch; }
}

/* Mobile (up to 479px) */
@media (max-width: 479px) {
  .stat-grid { grid-template-columns: 1fr; }
  .alert-ribbon { flex-direction: column; }
  .alert-monitor-widget-header { font-size: var(--text-xs); }
}

/* ─── Loading states (reusable spinner improvements) ─────── */
.loading-overlay {
  position: absolute; inset: 0; background: rgba(255,255,255,.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 50; border-radius: inherit;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}

/* ─── Toast notification styles ──────────────────────────── */
.toast-container {
  position: fixed; bottom: 24px; right: 24px;
  z-index: 99999; display: flex; flex-direction: column; gap: 8px;
  max-width: 400px; pointer-events: none;
}
.toast {
  pointer-events: all; padding: 12px 18px;
  border-radius: var(--radius-xl); font-size: var(--text-sm);
  font-weight: var(--weight-medium); box-shadow: var(--shadow-xl);
  display: flex; align-items: center; gap: var(--space-3);
  animation: slideInRight .25s ease;
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: none; }
}
.toast-success { background: var(--success-light); color: #065f46; border: 1px solid #a7f3d0; }
.toast-danger  { background: var(--danger-light);  color: #991b1b; border: 1px solid #fecaca; }
.toast-warning { background: var(--warning-light); color: #92400e; border: 1px solid #fde68a; }
.toast-info    { background: var(--info-light);    color: #1e40af; border: 1px solid #bfdbfe; }

/* ─── Interactive button states ──────────────────────────── */
.btn-danger {
  background: var(--danger); color: #fff; border: 1px solid var(--danger);
  border-radius: var(--radius-md); cursor: pointer;
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  padding: 6px 14px; transition: all var(--transition-fast);
}
.btn-danger:hover { background: #dc2626; border-color: #dc2626; }
.btn-danger:active { transform: scale(.97); }
.btn-outline {
  background: transparent; color: var(--neutral-700);
  border: 1px solid var(--neutral-300); border-radius: var(--radius-md);
  cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-medium);
  padding: 6px 14px; transition: all var(--transition-fast);
}
.btn-outline:hover { background: var(--neutral-100); border-color: var(--neutral-400); }
.btn-close-modal {
  background: rgba(255,255,255,.15); border: none; cursor: pointer;
  width: 30px; height: 30px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #fff; transition: background var(--transition-fast);
}
.btn-close-modal:hover { background: rgba(255,255,255,.3); }

/* ─── Data table enhancements ────────────────────────────── */
.data-table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table-responsive table { min-width: 600px; }

/* ─── Focus ring (accessibility) ────────────────────────── */
:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

/* ─── Custom scrollbar (Webkit) ──────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--neutral-100); border-radius: 3px; }
::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--neutral-400); }

/* ─── Skip link (screen reader) ─────────────────────────── */
.skip-link {
  position: absolute; top: -40px; left: 0; background: var(--primary-700);
  color: #fff; padding: 8px 16px; z-index: 10000; font-size: var(--text-sm);
  border-radius: 0 0 var(--radius-md) 0;
  transition: top var(--transition-fast);
}
.skip-link:focus { top: 0; }

/* ─── AIC fluid overrides for small viewports ────────────── */
@media (max-width: 575px) {
  .aic-main { padding: var(--aic-sp-3, var(--space-3)) var(--aic-sp-3, var(--space-3)); }
  .aic-stats-ribbon { gap: var(--aic-sp-2, var(--space-2)); }
  .aic-topbar { padding: 0 var(--aic-sp-3, var(--space-3)); min-height: 50px; }
  .aic-topbar-brand { font-size: var(--text-xs); }
  .aic-topbar-nav { gap: var(--space-1); }
  .aic-topbar-nav a { font-size: 10px; padding: 3px 7px; }
}

/* ─── Print: include alert data ──────────────────────────── */
@media print {
  .aic-topbar, .aic-tabs-bar, .aic-modal-bg,
  .aic-alert-card-actions, .aic-filter-bar { display: none !important; }
  .aic-alert-card { box-shadow: none !important; break-inside: avoid; border: 1px solid #ddd; }
  .aic-stats-ribbon { display: flex; flex-wrap: wrap; }
}

/* ================================================================
   SPATIAL ANNOUNCEMENTS — Sonar Hexagonal Alert System
   ISO/IEC 25010 – Usability: immediate visual recognition of risk
   ISO/IEC 25002 – Quality in Use: public health communication
   ================================================================ */

/* ─── Sonar Keyframes ─────────────────────────────────────── */
@keyframes annSonarRipple {
  0%   { transform: translate(-50%,-50%) scale(1);   opacity: 0.85; }
  100% { transform: translate(-50%,-50%) scale(3.2); opacity: 0;    }
}
@keyframes annHexPulse {
  0%, 100% { filter: brightness(1);   box-shadow: 0 0 0 0 rgba(220,38,38,0.5); }
  50%       { filter: brightness(1.15); box-shadow: 0 0 16px 4px rgba(220,38,38,0.35); }
}
@keyframes annBannerSlide {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@keyframes annBannerPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.88; }
}
@keyframes annUrgentFlash {
  0%, 100% { background: linear-gradient(135deg, #dc2626, #b91c1c); }
  50%       { background: linear-gradient(135deg, #ef4444, #dc2626); }
}

/* ─── Leaflet Marker Wrapper ─────────────────────────────── */
.ann-marker-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  pointer-events: all;
}
/* Sonar rings */
.ann-ring {
  position: absolute;
  border-radius: 50%;
  top: 50%; left: 50%;
  border: 2.5px solid rgba(220,38,38,0.55);
  pointer-events: none;
  animation: annSonarRipple 2.8s ease-out infinite;
}
.ann-ring-1 { width: 44px; height: 44px; animation-delay: 0s;    }
.ann-ring-2 { width: 44px; height: 44px; animation-delay: 0.93s; }
.ann-ring-3 { width: 44px; height: 44px; animation-delay: 1.86s; }

/* Severity ring colours */
.ann-sev-critical .ann-ring { border-color: rgba(220,38,38,0.6);  }
.ann-sev-high     .ann-ring { border-color: rgba(234,88,12,0.6);  }
.ann-sev-medium   .ann-ring { border-color: rgba(217,119,6,0.6);  }
.ann-sev-low      .ann-ring { border-color: rgba(22,163,74,0.55); }
.ann-sev-info     .ann-ring { border-color: rgba(37,99,235,0.55); }

/* Central hexagon */
.ann-hex-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 34px; height: 34px;
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 15px;
  color: #fff;
  z-index: 2;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.ann-hex-center:hover { transform: translate(-50%,-50%) scale(1.12); }

/* Urgent markers — hex pulses only when flagged urgent */
.ann-urgent .ann-hex-center {
  animation: annHexPulse 2.5s ease-in-out infinite;
}

/* Severity hex colours */
.ann-sev-critical .ann-hex-center { background: linear-gradient(135deg,#dc2626,#991b1b); }
.ann-sev-high     .ann-hex-center { background: linear-gradient(135deg,#ea580c,#c2410c); }
.ann-sev-medium   .ann-hex-center { background: linear-gradient(135deg,#d97706,#b45309); }
.ann-sev-low      .ann-hex-center { background: linear-gradient(135deg,#16a34a,#15803d); }
.ann-sev-info     .ann-hex-center { background: linear-gradient(135deg,#2563eb,#1d4ed8); }

/* Municipality-wide — larger hex */
.ann-muni .ann-hex-center  { width: 42px; height: 42px; font-size: 18px; }
.ann-muni .ann-ring        { width: 52px; height: 52px; }

/* ─── Alert Announcement Banner (user portals) ────────────── */
.ann-banner {
  position: relative;
  z-index: var(--z-sticky);
  animation: annBannerSlide 0.35s ease-out;
}
.ann-banner-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 11px var(--space-5);
  flex-wrap: wrap;
}
.ann-banner-critical { background: linear-gradient(135deg,#dc2626,#b91c1c); color:#fff; }
.ann-banner-high     { background: linear-gradient(135deg,#ea580c,#c2410c); color:#fff; }
.ann-banner-medium   { background: linear-gradient(135deg,#d97706,#92400e); color:#fff; }
.ann-banner-low      { background: linear-gradient(135deg,#16a34a,#065f46); color:#fff; }
.ann-banner-info     { background: linear-gradient(135deg,#2563eb,#1e40af); color:#fff; }
.ann-banner.urgent .ann-banner-inner {
  animation: annUrgentFlash 1.8s ease-in-out infinite;
}
.ann-banner-icon {
  flex-shrink: 0;
  width: 30px; height: 30px;
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background: rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 16px;
}
.ann-banner-text { flex: 1; min-width: 0; }
.ann-banner-title {
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ann-banner-msg {
  font-size: var(--text-xs);
  opacity: 0.88;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ann-banner-count {
  background: rgba(255,255,255,0.25);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  white-space: nowrap;
  flex-shrink: 0;
}
.ann-banner-btn {
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  padding: 4px 12px;
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
  text-decoration: none;
  display: inline-block;
}
.ann-banner-btn:hover { background: rgba(255,255,255,0.35); }

/* ─── Announcement Modal ─────────────────────────────────── */
.ann-modal-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.52);
  z-index: var(--z-modal-bg);
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--space-4);
  overflow-y: auto;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: fadeIn 0.18s ease;
}
.ann-modal {
  background: var(--neutral-0);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  width: 100%; max-width: 680px;
  margin: auto;
  overflow: hidden;
}
.ann-modal-header {
  padding: var(--space-4) var(--space-5);
  display: flex; align-items: center; gap: var(--space-3);
  color: #fff;
}
.ann-modal-header-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background: rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 18px;
}
.ann-modal-header-critical { background: linear-gradient(135deg,#dc2626,#991b1b); }
.ann-modal-header-high     { background: linear-gradient(135deg,#ea580c,#c2410c); }
.ann-modal-header-medium   { background: linear-gradient(135deg,#d97706,#b45309); }
.ann-modal-header-low      { background: linear-gradient(135deg,#16a34a,#15803d); }
.ann-modal-header-info     { background: linear-gradient(135deg,#2563eb,#1e40af); }
.ann-modal-header h3 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-bold); }
.ann-modal-header-close {
  margin-left: auto;
  background: rgba(255,255,255,0.15);
  border: none; cursor: pointer;
  width: 30px; height: 30px;
  border-radius: var(--radius-md);
  color: #fff; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.ann-modal-header-close:hover { background: rgba(255,255,255,0.3); }
.ann-modal-body { padding: var(--space-5); }
.ann-modal-meta {
  display: flex; gap: var(--space-2); flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.ann-meta-chip {
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border: 1px solid;
}
.ann-chip-critical { background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.ann-chip-high     { background:#fff7ed; color:#c2410c; border-color:#fed7aa; }
.ann-chip-medium   { background:#fffbeb; color:#92400e; border-color:#fde68a; }
.ann-chip-low      { background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.ann-chip-info     { background:#eff6ff; color:#1e40af; border-color:#bfdbfe; }
.ann-chip-neutral  { background:var(--neutral-100); color:var(--neutral-700); border-color:var(--neutral-200); }
.ann-chip-urgent   { background:#fef2f2; color:#dc2626; border-color:#fca5a5; font-weight:var(--weight-bold); }
.ann-message-box {
  background: var(--neutral-25);
  border-left: 4px solid;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  white-space: pre-wrap;
}
.ann-message-critical { border-left-color: #dc2626; }
.ann-message-high     { border-left-color: #ea580c; }
.ann-message-medium   { border-left-color: #d97706; }
.ann-message-low      { border-left-color: #16a34a; }
.ann-message-info     { border-left-color: #2563eb; }
.ann-action-box {
  background: #fefce8;
  border: 1px solid #fde047;
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}
.ann-action-label {
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #a16207;
  margin-bottom: var(--space-1);
}
.ann-contact-box {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--neutral-600);
}
/* ─── Highlight Area Color Picker (Create Announcement modal) ─── */
/* ISO/IEC 25010 — Operability: accessible, keyboard-friendly color selection.  */
/* ISO/IEC 25002 — Effectiveness: clear visual feedback on chosen highlight.    */
.ann-highlight-row {
  background: var(--neutral-25, #f8fafc);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.ann-highlight-toggle-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
  padding-top: 1px;
}
.ann-highlight-toggle-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #FF4C38;
  cursor: pointer;
  flex-shrink: 0;
}
.ann-highlight-label-text {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--neutral-700);
  white-space: nowrap;
}
.ann-highlight-picker-wrap {
  flex: 1;
  min-width: 0;
  display: none;
  flex-direction: column;
  gap: var(--space-2);
}
.ann-color-swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1-5, 6px);
}
.ann-color-divider {
  width: 1px;
  height: 22px;
  background: var(--neutral-200);
  flex-shrink: 0;
}
/* Individual color swatch button */
.ann-cswatch {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.1s, border-color 0.12s, box-shadow 0.12s;
  outline: none;
  position: relative;
}
.ann-cswatch:hover {
  transform: scale(1.18);
  border-color: rgba(0, 0, 0, 0.25);
  z-index: 1;
}
.ann-cswatch:focus-visible {
  outline: 2px solid var(--primary-600);
  outline-offset: 2px;
}
.ann-cswatch.ann-cswatch--selected {
  border-color: var(--neutral-800);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--neutral-700);
  transform: scale(1.08);
}
/* Native color input styled as a swatch */
.ann-custom-color-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-1-5, 6px);
}
.ann-custom-color-label {
  font-size: var(--text-xs);
  color: var(--neutral-500);
  white-space: nowrap;
}
.ann-custom-color-input {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-md);
  border: 1px solid var(--neutral-300);
  padding: 2px;
  cursor: pointer;
  background: none;
  flex-shrink: 0;
}
.ann-custom-color-input:hover { border-color: var(--neutral-500); }
/* Selected color preview row */
.ann-highlight-preview {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.ann-highlight-preview-swatch {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  border: 1px solid var(--neutral-300);
  flex-shrink: 0;
  transition: background 0.15s;
}
.ann-highlight-preview-hex {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--neutral-600);
  letter-spacing: 0.05em;
}
.ann-highlight-preview-desc {
  font-size: var(--text-xs);
  color: var(--neutral-400);
}

/* Responsive: on very small screens, stack the toggle + picker vertically */
@media (max-width: 420px) {
  .ann-highlight-row { flex-direction: column; }
  .ann-color-swatches { gap: 4px; }
  .ann-cswatch { width: 24px; height: 24px; }
}

.ann-modal-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--neutral-100);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: var(--space-2);
}
.ann-modal-footer-info {
  font-size: var(--text-xs);
  color: var(--neutral-400);
}
.ann-hide-btn {
  background: var(--neutral-50);
  color: var(--neutral-600);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ann-hide-btn:hover {
  background: var(--neutral-100);
  color: var(--neutral-800);
  border-color: var(--neutral-300);
}
/* ─── Show Alert Button (restore hidden announcement) ─── */
.ann-show-btn {
  background: var(--success-light, #f0fdf4);
  color: var(--success, #16a34a);
  border: 1px solid #bbf7d0;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ann-show-btn:hover {
  background: #dcfce7;
  color: #15803d;
  border-color: #86efac;
}

/* ─── Hidden Alerts Indicator (map legend area) ─── */
.hidden-alerts-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 3px 8px;
  background: var(--neutral-50, #f8fafc);
  border: 1px solid var(--neutral-200, #e2e8f0);
  border-radius: var(--radius-md, 6px);
  font-size: var(--text-xs, 0.75rem);
}
.hidden-alerts-text {
  color: var(--neutral-500, #64748b);
  font-weight: 500;
}
.hidden-alerts-show-btn {
  background: none;
  border: none;
  color: var(--primary, #2563eb);
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s;
}
.hidden-alerts-show-btn:hover {
  text-decoration-color: currentColor;
}

@media (max-width: 479px) {
  .ann-modal-footer { flex-direction: column; align-items: stretch; }
  .ann-modal-footer .ann-hide-btn,
  .ann-modal-footer .ann-show-btn,
  .ann-modal-footer .btn-primary { width: 100%; text-align: center; min-height: 44px; }
  .ann-modal-footer-info { text-align: center; }
  .hidden-alerts-indicator { margin-left: 0; margin-top: 4px; }
}

/* ─── Admin Flag Mode Controls ───────────────────────────── */
.sa-flag-mode-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  cursor: pointer;
  border: none;
  transition: all 0.15s;
  width: 100%;
  text-align: left;
}
.sa-flag-mode-btn.inactive {
  background: var(--neutral-100); color: var(--neutral-700);
}
.sa-flag-mode-btn.active {
  background: linear-gradient(135deg,#dc2626,#b91c1c);
  color: #fff;
  animation: annBannerPulse 1.5s ease-in-out infinite;
}
.sa-flag-mode-btn:hover.inactive { background: var(--neutral-200); }
.ann-flag-cursor,
.ann-flag-cursor .leaflet-interactive { cursor: crosshair !important; }

/* ─── Admin Announcements Management Panel ───────────────── */
.ann-mgmt-list { max-height: 360px; overflow-y: auto; }
.ann-mgmt-item {
  display: flex; align-items: flex-start; gap: 0;
  border-bottom: 1px solid var(--neutral-100);
  position: relative; overflow: hidden;
  transition: background 0.12s;
}
.ann-mgmt-item:last-child { border-bottom: none; }
.ann-mgmt-item:hover { background: var(--neutral-25); }
.ann-mgmt-stripe {
  width: 3px; flex-shrink: 0; align-self: stretch;
}
.ann-stripe-critical { background: #dc2626; }
.ann-stripe-high     { background: #ea580c; }
.ann-stripe-medium   { background: #d97706; }
.ann-stripe-low      { background: #16a34a; }
.ann-stripe-info     { background: #2563eb; }
.ann-mgmt-content {
  flex: 1; padding: 9px 10px; min-width: 0;
}
.ann-mgmt-title {
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--neutral-800); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.ann-mgmt-sub {
  font-size: 10px; color: var(--neutral-400); margin-top: 2px;
}
.ann-mgmt-actions {
  display: flex; gap: 4px; padding: 6px 8px;
  flex-shrink: 0; align-self: center;
}
.ann-action-btn {
  background: var(--neutral-100); border: none; cursor: pointer;
  border-radius: var(--radius-md); padding: 3px 7px;
  font-size: 10px; font-weight: var(--weight-bold);
  color: var(--neutral-600); transition: all 0.12s;
}
.ann-action-btn:hover { background: var(--neutral-200); }
.ann-action-btn.pause  { color: #b45309; }
.ann-action-btn.pause:hover  { background: #fffbeb; }
.ann-action-btn.resume { color: #047857; }
.ann-action-btn.resume:hover { background: #f0fdf4; }
.ann-action-btn.delete { color: #dc2626; }
.ann-action-btn.delete:hover { background: #fef2f2; }

/* ─── Health Worker Announcement Strip ───────────────────── */
.hw-ann-strip {
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-md);
}
.hw-ann-strip-header {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  color: #fff; cursor: pointer;
}
.hw-ann-strip-hex {
  width: 28px; height: 28px; flex-shrink: 0;
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background: rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 14px;
}
.hw-ann-strip-title {
  flex: 1;
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
}
.hw-ann-strip-count {
  background: rgba(255,255,255,0.25);
  padding: 1px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}
.hw-ann-strip-body {
  background: var(--neutral-0);
  border: 1px solid var(--neutral-100);
  border-top: none;
}
.hw-ann-item {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--neutral-50);
  cursor: pointer;
  transition: background 0.12s;
}
.hw-ann-item:last-child { border-bottom: none; }
.hw-ann-item:hover { background: var(--neutral-25); }
.hw-ann-item-title {
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--neutral-800);
}
.hw-ann-item-sub {
  font-size: var(--text-xs); color: var(--neutral-500); margin-top: 2px;
}

/* ─── Legend swatch for announcements ───────────────────────── */
.sa-ann-swatch {
  width: 14px; height: 14px; flex-shrink: 0;
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background: linear-gradient(135deg,#dc2626,#b91c1c);
}

/* ================================================================
   RESPONSIVE DESIGN SYSTEM — Mobile-First Refinements
   ISO/IEC 25010 – Usability: accessibility across device sizes
   ================================================================ */

/* ─── 320px (base mobile) ─────────────────────────────────── */
@media (max-width: 359px) {
  body { font-size: 14px; }
  .container { padding-left: var(--space-3); padding-right: var(--space-3); }
  .card-body { padding: var(--space-3); }
  .btn-lg { padding: 10px 18px; font-size: var(--text-sm); }
  .hero-title { font-size: var(--text-2xl); }
  .hero-subtitle { font-size: var(--text-xs); }
  .stat-card { padding: var(--space-3); }
  .stat-number { font-size: var(--text-2xl); }
  .page-header { padding: var(--space-5) 0; }
  .page-header-title { font-size: var(--text-xl); }
  .ann-banner-msg { display: none; }
  .ann-banner-inner { padding: 9px var(--space-3); }
}

/* ─── 360px (small phone) ─────────────────────────────────── */
@media (min-width: 360px) and (max-width: 479px) {
  .container { padding-left: var(--space-4); padding-right: var(--space-4); }
  .hero-title { font-size: var(--text-3xl); }
  .ann-banner-msg { display: none; }
}

/* ─── 480px (large phone) ─────────────────────────────────── */
@media (min-width: 480px) and (max-width: 575px) {
  .container { padding-left: var(--space-4); padding-right: var(--space-4); }
  .hero-title { font-size: var(--text-3xl); }
  .ann-banner-msg { display: block; }
}

/* ─── 576px (sm breakpoint — tablet portrait) ────────────── */
@media (min-width: 576px) {
  .container { padding-left: var(--space-5); padding-right: var(--space-5); }
  .col-sm-6  { flex: 0 0 50%;   max-width: 50%;   }
  .col-sm-12 { flex: 0 0 100%;  max-width: 100%;  }
  .hero-title { font-size: var(--text-4xl); }
  .section { padding: var(--space-10) 0; }
}

/* ─── 640px (small tablet) ───────────────────────────────── */
@media (min-width: 640px) {
  .card-body { padding: var(--space-5); }
  .page-header { padding: var(--space-8) 0; }
  .ann-modal { max-width: 600px; }
}

/* ─── 768px (md — tablet landscape) ─────────────────────── */
@media (min-width: 768px) {
  .container { padding-left: var(--space-6); padding-right: var(--space-6); }
  .col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; }
  .col-md-6 { flex: 0 0 50%;     max-width: 50%; }
  .col-md-8 { flex: 0 0 66.666%; max-width: 66.666%; }
  .col-md-12{ flex: 0 0 100%;    max-width: 100%; }
  .navbar-links { gap: var(--space-3); }
  .ann-banner-msg { display: block; }
  .ann-modal { max-width: 640px; }
  .hw-ann-strip { display: block; }
}

/* ─── 992px (lg — desktop) ───────────────────────────────── */
@media (min-width: 992px) {
  .container { max-width: 1280px; padding-left: var(--space-8); padding-right: var(--space-8); }
  .col-lg-4  { flex: 0 0 33.333%; max-width: 33.333%; }
  .col-lg-6  { flex: 0 0 50%;     max-width: 50%; }
  .col-lg-8  { flex: 0 0 66.666%; max-width: 66.666%; }
  .col-lg-12 { flex: 0 0 100%;    max-width: 100%; }
  .section { padding: var(--space-16) 0; }
  .ann-modal { max-width: 680px; }
}

/* ─── 1200px (xl — large desktop) ────────────────────────── */
@media (min-width: 1200px) {
  .col-xl-3  { flex: 0 0 25%;     max-width: 25%; }
  .col-xl-4  { flex: 0 0 33.333%; max-width: 33.333%; }
  .col-xl-6  { flex: 0 0 50%;     max-width: 50%; }
  .col-xl-8  { flex: 0 0 66.666%; max-width: 66.666%; }
}

/* ─── 1400px (2xl — large monitor) ───────────────────────── */
@media (min-width: 1400px) {
  .container { max-width: 1360px; }
  .sa-stats-panel { width: 260px; }
  .sa-control-panel { width: 300px; }
}

/* ─── 1920px (4K / ultra-wide) ───────────────────────────── */
@media (min-width: 1920px) {
  .container { max-width: 1600px; }
  body { font-size: 17px; }
}

/* ─── Print: suppress announcement banners + search UI ──── */
@media print {
  .ann-banner, .ann-modal-bg, .sa-flag-mode-btn,
  .hw-ann-strip { display: none !important; }
  .search-command-bar { display: none !important; }
  .profile-drawer-bg { display: none !important; }
}

/* ============================================================
   SEARCH COMMAND BAR — RESPONSIVE ENHANCEMENTS (main.css)
   ISO/IEC 25010 — Usability: Operability across device sizes
   These complement the inline <style> rules in dashboard.html
============================================================ */

/* Touch-friendly targets on mobile */
@media (max-width: 767px) {
  .search-filter-btn {
    min-height: 40px;
    padding: 8px 12px;
  }
  .search-suggestion-item {
    min-height: 44px;
    padding: 10px 14px;
  }
  .search-result-row {
    min-height: 48px;
  }
  .profile-drawer {
    width: 100vw !important;
  }
}

/* Landscape mobile optimization */
@media (max-width: 767px) and (orientation: landscape) {
  .search-results-list { max-height: 200px; }
  .cohort-chart-container { height: 160px; }
}

/* Tablet: balanced layout */
@media (min-width: 768px) and (max-width: 991px) {
  .search-command-row { flex-wrap: nowrap; }
  .search-filter-btns { flex-wrap: nowrap; }
}

/* Desktop: full horizontal layout */
@media (min-width: 992px) {
  .search-command-row { flex-wrap: nowrap; }
  .search-results-list { max-height: 420px; }
}

/* XL desktop: larger search input */
@media (min-width: 1400px) {
  .search-input-main { font-size: 15px; }
  .search-results-list { max-height: 480px; }
}

/* 4K / Ultra-wide: maximize real estate */
@media (min-width: 1920px) {
  .search-command-bar { padding: 20px 28px; }
  .search-input-main { font-size: 16px; padding: 12px 16px 12px 44px; }
  .search-result-row { padding: 12px 18px; }
  .search-results-list { max-height: 560px; }
}


/* ====================================================================
   BARANGAY DRILL-DOWN PANEL — Dynamic Map Interactivity
   Professional National Level Epidemiological Analysis Tool
   ISO/IEC 25010: Operability, Accessibility, Appropriateness recognizability
   ISO/IEC 25002: Quality measurement model
   ==================================================================== */

/* ---- Overlay ---- */
.bdd-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 1049;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.bdd-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* ---- Slide-out Panel ---- */
.bdd-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 440px;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: #ffffff;
  z-index: 1050;
  box-shadow: -4px 0 30px rgba(0, 0, 0, 0.18);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.bdd-panel.active {
  transform: translateX(0);
}

/* ---- Header ---- */
.bdd-header {
  flex-shrink: 0;
  border-bottom: 1px solid var(--neutral-100, #f1f5f9);
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
}
.bdd-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 16px 8px;
  gap: 8px;
}
.bdd-header-title { flex: 1; min-width: 0; }
.bdd-brgy-name {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bdd-brgy-sub {
  font-size: 10.5px;
  color: #64748b;
  margin-top: 2px;
  line-height: 1.3;
}
.bdd-header-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.bdd-action-btn {
  width: 30px;
  height: 30px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  transition: all 0.15s ease;
}
.bdd-action-btn:hover {
  background: #f1f5f9;
  color: #334155;
  border-color: #cbd5e1;
}
.bdd-close-btn {
  width: 30px;
  height: 30px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #94a3b8;
  transition: all 0.15s ease;
  line-height: 1;
}
.bdd-close-btn:hover {
  background: #fef2f2;
  color: #ef4444;
  border-color: #fca5a5;
}

/* ---- Risk Severity Strip ---- */
.bdd-risk-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 10px;
  font-size: 10px;
}
.bdd-risk-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 4px;
  color: #fff;
}
.bdd-risk-badge-critical { background: #ef4444; }
.bdd-risk-badge-high { background: #f97316; }
.bdd-risk-badge-medium { background: #eab308; color: #422006; }
.bdd-risk-badge-low { background: #22c55e; }
.bdd-risk-badge-none { background: #94a3b8; }
.bdd-risk-strip.bdd-risk-critical { background: linear-gradient(90deg, rgba(239,68,68,0.08), transparent); }
.bdd-risk-strip.bdd-risk-high { background: linear-gradient(90deg, rgba(249,115,22,0.08), transparent); }
.bdd-risk-strip.bdd-risk-medium { background: linear-gradient(90deg, rgba(234,179,8,0.06), transparent); }
.bdd-risk-strip.bdd-risk-low { background: linear-gradient(90deg, rgba(34,197,94,0.06), transparent); }
.bdd-risk-strip.bdd-risk-none { background: transparent; }
.bdd-risk-label { color: #475569; font-weight: 500; }

/* ---- Metrics Row ---- */
.bdd-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--neutral-100, #f1f5f9);
  flex-shrink: 0;
}
.bdd-metric-card {
  text-align: center;
  padding: 8px 4px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}
.bdd-metric-card:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.bdd-metric-card[data-severity="critical"] { border-color: #fca5a5; background: #fef2f2; }
.bdd-metric-card[data-severity="high"] { border-color: #fdba74; background: #fff7ed; }
.bdd-metric-card[data-severity="medium"] { border-color: #fde68a; background: #fefce8; }
.bdd-metric-card[data-severity="low"] { border-color: #86efac; background: #f0fdf4; }
.bdd-metric-value {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}
.bdd-metric-label {
  font-size: 9px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
  font-weight: 500;
}

/* ---- Tab Navigation ---- */
.bdd-tabs {
  display: flex;
  border-bottom: 1px solid var(--neutral-100, #f1f5f9);
  padding: 0 8px;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-shrink: 0;
}
.bdd-tabs::-webkit-scrollbar { display: none; }
.bdd-tab {
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.bdd-tab:hover { color: #334155; background: #f8fafc; }
.bdd-tab.active {
  color: #2563eb;
  border-bottom-color: #2563eb;
}

/* ---- Content Area ---- */
.bdd-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  -webkit-overflow-scrolling: touch;
}
.bdd-tab-pane { display: none; }
.bdd-tab-pane.active { display: block; }

.bdd-chart-wrap {
  position: relative;
  width: 100%;
  min-height: 180px;
  margin-bottom: 12px;
}
.bdd-section-title {
  font-size: 11px;
  font-weight: 700;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 14px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #f1f5f9;
}

/* ---- Insight Box ---- */
.bdd-insight-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px;
}
.bdd-insight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  text-align: center;
}
.bdd-insight-grid > div strong {
  display: block;
  font-size: 15px;
  color: #0f172a;
  margin-bottom: 2px;
}
.bdd-insight-grid > div span {
  font-size: 9px;
  color: #64748b;
}

/* ---- Symptom Rows ---- */
.bdd-symptom-list { margin-top: 10px; }
.bdd-symptom-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid #f8fafc;
}
.bdd-symptom-name {
  font-size: 10px;
  font-weight: 600;
  color: #334155;
  min-width: 90px;
  flex-shrink: 0;
}
.bdd-symptom-bar-wrap {
  flex: 1;
  height: 6px;
  background: #f1f5f9;
  border-radius: 3px;
  overflow: hidden;
}
.bdd-symptom-bar {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  border-radius: 3px;
  transition: width 0.4s ease;
}
.bdd-symptom-count {
  font-size: 9px;
  color: #64748b;
  font-weight: 600;
  min-width: 60px;
  text-align: right;
  white-space: nowrap;
}

/* ---- Co-occurrence Matrix ---- */
.bdd-cooccurrence { overflow-x: auto; margin-top: 6px; }
.bdd-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9px;
}
.bdd-matrix-table th,
.bdd-matrix-table td {
  padding: 3px 4px;
  border: 1px solid #f1f5f9;
  text-align: center;
  font-size: 8px;
}
.bdd-matrix-table th {
  background: #f8fafc;
  font-weight: 700;
  color: #475569;
}
.bdd-matrix-label {
  text-align: left !important;
  font-weight: 600 !important;
  color: #334155 !important;
  white-space: nowrap;
}

/* ---- Demographics Stats ---- */
.bdd-demo-stats { margin-top: 12px; }
.bdd-demo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  text-align: center;
}
.bdd-demo-item {
  padding: 8px 4px;
  background: #f8fafc;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}
.bdd-demo-val {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}
.bdd-demo-lbl {
  display: block;
  font-size: 9px;
  color: #64748b;
  margin-top: 2px;
}

/* ---- Case Listing ---- */
.bdd-case-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.bdd-case-search {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 11px;
  outline: none;
  transition: border-color 0.2s;
}
.bdd-case-search:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.1); }
.bdd-case-count {
  font-size: 10px;
  color: #64748b;
  font-weight: 600;
  white-space: nowrap;
}
.bdd-case-list { display: flex; flex-direction: column; gap: 6px; }
.bdd-case-item {
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  transition: all 0.15s ease;
}
.bdd-case-item:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.bdd-case-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.bdd-case-name {
  font-size: 11px;
  font-weight: 600;
  color: #0f172a;
}
.bdd-case-id {
  font-size: 9px;
  color: #94a3b8;
  font-family: monospace;
}
.bdd-case-details {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.bdd-case-chip {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #e2e8f0;
  color: #475569;
  font-weight: 500;
}
.bdd-chip-geo {
  background: #dbeafe;
  color: #1d4ed8;
}
.bdd-case-symptoms {
  font-size: 9.5px;
  color: #64748b;
  line-height: 1.3;
}

/* ---- Comparison ---- */
.bdd-compare-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.bdd-compare-label {
  font-size: 11px;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
}
.bdd-compare-select {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 11px;
  outline: none;
  background: #fff;
}
.bdd-compare-select:focus { border-color: #3b82f6; }
.bdd-compare-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
  margin-top: 10px;
}
.bdd-compare-tbl th {
  padding: 6px 8px;
  background: #f8fafc;
  font-weight: 700;
  color: #334155;
  text-align: left;
  border-bottom: 2px solid #e2e8f0;
}
.bdd-compare-tbl td {
  padding: 5px 8px;
  border-bottom: 1px solid #f1f5f9;
  color: #475569;
}
.bdd-cell-higher { color: #ef4444; font-weight: 600; }
.bdd-cell-lower { color: #22c55e; font-weight: 600; }

/* ---- Alert Items ---- */
.bdd-alert-list { display: flex; flex-direction: column; gap: 6px; }
.bdd-alert-item {
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.bdd-alert-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.bdd-alert-sev {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: 3px;
  color: #fff;
}
.bdd-alert-rule {
  font-size: 11px;
  font-weight: 600;
  color: #0f172a;
}
.bdd-alert-body {
  font-size: 10px;
  color: #64748b;
  line-height: 1.4;
}
.bdd-alert-body p { margin: 3px 0 0; }

/* ---- Empty State ---- */
.bdd-empty {
  text-align: center;
  padding: 24px 12px;
  font-size: 11px;
  color: #94a3b8;
}

/* ---- Loading Overlay ---- */
.bdd-loading {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  z-index: 10;
}
.bdd-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #e2e8f0;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: bddSpin 0.7s linear infinite;
}
@keyframes bddSpin {
  to { transform: rotate(360deg); }
}
.bdd-loading-text {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}

/* ---- Pulse Marker (case locate) ---- */
.bdd-pulse-marker {
  position: relative;
}
.bdd-pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 3px solid #2563eb;
  border-radius: 50%;
  animation: bddPulseExpand 1.5s ease-out infinite;
}
.bdd-pulse-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: #2563eb;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.5);
}
@keyframes bddPulseExpand {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}


/* ====================================================================
   DRILL-DOWN PANEL — RESPONSIVE DESIGN SYSTEM
   Mobile-first approach with progressive enhancement
   ISO/IEC 25010: Operability across all device form factors
   Breakpoints: 320, 360, 480, 576, 640, 768, 992, 1200, 1400, 1920
   ==================================================================== */

/* ---- Ultra-Small (< 320px) ---- */
@media (max-width: 319px) {
  .bdd-panel { width: 100vw; }
  .bdd-brgy-name { font-size: 14px; }
  .bdd-metrics { grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 6px 8px; }
  .bdd-metric-value { font-size: 13px; }
  .bdd-tab { padding: 7px 8px; font-size: 9px; }
  .bdd-content { padding: 8px; }
  .bdd-chart-wrap { min-height: 140px; }
  .bdd-insight-grid { grid-template-columns: repeat(2, 1fr); }
  .bdd-demo-grid { grid-template-columns: repeat(2, 1fr); }
  .bdd-symptom-name { min-width: 60px; font-size: 9px; }
}

/* ---- Small Mobile (320px – 359px) ---- */
@media (min-width: 320px) and (max-width: 359px) {
  .bdd-panel { width: 100vw; }
  .bdd-brgy-name { font-size: 15px; }
  .bdd-metrics { grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 8px 10px; }
  .bdd-metric-value { font-size: 14px; }
  .bdd-tab { padding: 8px 9px; font-size: 10px; }
}

/* ---- Mobile (360px – 479px) ---- */
@media (min-width: 360px) and (max-width: 479px) {
  .bdd-panel { width: 100vw; }
  .bdd-metrics { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Large Mobile / Small Tablet (480px – 575px) ---- */
@media (min-width: 480px) and (max-width: 575px) {
  .bdd-panel { width: 100vw; }
  .bdd-metrics { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Phablet (576px – 639px) ---- */
@media (min-width: 576px) and (max-width: 639px) {
  .bdd-panel { width: 420px; }
}

/* ---- Small Tablet (640px – 767px) ---- */
@media (min-width: 640px) and (max-width: 767px) {
  .bdd-panel { width: 420px; }
}

/* ---- Tablet (768px – 991px) ---- */
@media (min-width: 768px) and (max-width: 991px) {
  .bdd-panel { width: 440px; }
  .bdd-metrics { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Desktop (992px – 1199px) ---- */
@media (min-width: 992px) and (max-width: 1199px) {
  .bdd-panel { width: 440px; }
}

/* ---- Large Desktop (1200px – 1399px) ---- */
@media (min-width: 1200px) and (max-width: 1399px) {
  .bdd-panel { width: 460px; }
  .bdd-brgy-name { font-size: 18px; }
  .bdd-metric-value { font-size: 17px; }
}

/* ---- XL Desktop (1400px – 1919px) ---- */
@media (min-width: 1400px) and (max-width: 1919px) {
  .bdd-panel { width: 480px; }
  .bdd-brgy-name { font-size: 19px; }
  .bdd-metric-value { font-size: 18px; }
  .bdd-chart-wrap { min-height: 200px; }
}

/* ---- Ultra-wide / 4K (1920px+) ---- */
@media (min-width: 1920px) {
  .bdd-panel { width: 520px; }
  .bdd-brgy-name { font-size: 20px; }
  .bdd-header-top { padding: 18px 20px 10px; }
  .bdd-metric-value { font-size: 19px; }
  .bdd-metrics { padding: 12px 16px; gap: 8px; }
  .bdd-content { padding: 16px; }
  .bdd-chart-wrap { min-height: 220px; }
  .bdd-tab { padding: 10px 14px; font-size: 12px; }
  .bdd-case-item { padding: 10px 14px; }
  .bdd-symptom-name { font-size: 11px; }
}

/* ---- Landscape mobile optimization ---- */
@media (max-width: 767px) and (orientation: landscape) {
  .bdd-panel { width: 50vw; min-width: 320px; }
  .bdd-metrics { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .bdd-chart-wrap { min-height: 140px; }
  .bdd-content { padding: 8px; }
}

/* ---- Touch device enhancements ---- */
@media (hover: none) and (pointer: coarse) {
  .bdd-tab { padding: 10px 12px; min-height: 40px; }
  .bdd-action-btn, .bdd-close-btn { width: 36px; height: 36px; }
  .bdd-case-item { padding: 10px 12px; }
  .bdd-case-search { padding: 8px 12px; font-size: 16px; /* prevents iOS zoom */ }
}

/* ---- High contrast / accessibility ---- */
@media (prefers-contrast: high) {
  .bdd-panel { border-left: 2px solid #000; }
  .bdd-metric-card { border-width: 2px; }
  .bdd-tab.active { border-bottom-width: 3px; }
  .bdd-risk-badge { font-size: 10px; }
}

/* ---- Reduced motion preference ---- */
@media (prefers-reduced-motion: reduce) {
  .bdd-panel { transition: none; }
  .bdd-overlay { transition: none; }
  .bdd-pulse-ring { animation: none; }
  .bdd-spinner { animation-duration: 1.5s; }
}

/* ==============================================
   LANGUAGE MANAGEMENT (Admin & User)
   ISO/IEC 25010 — Usability: multi-language support
   ISO/IEC 25002 — Quality in Use: language inclusivity
   ============================================== */

/* Admin: Language list rows */
.lang-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--neutral-100);
    gap: 0.75rem;
    flex-wrap: wrap;
    transition: background var(--transition-fast);
}
.lang-row:last-child { border-bottom: none; }
.lang-row:hover { background: var(--neutral-25, #fafafa); }
.lang-info {
    flex: 1;
    min-width: 150px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.lang-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* Admin: Translation Manager rows */
.translation-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--neutral-100);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    background: var(--neutral-25, #fafafa);
    flex-wrap: wrap;
}
.translation-original {
    flex: 0 0 200px;
    min-width: 140px;
}
.translation-original strong {
    font-size: var(--text-sm);
    color: var(--neutral-800);
}
.translation-inputs {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.translation-inputs input {
    font-size: var(--text-sm);
}
.translation-actions {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
}

/* User: Language selector wrapper */
.lang-selector-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.lang-selector-wrap select {
    font-size: var(--text-sm);
}

/* Language responsive: mobile stacking */
@media (max-width: 575px) {
    .lang-row {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }
    .lang-actions {
        justify-content: flex-end;
    }
    .translation-row {
        flex-direction: column;
    }
    .translation-original {
        flex: 1 1 100%;
    }
    .translation-inputs {
        min-width: 100%;
    }
    .lang-selector-wrap {
        flex-direction: column;
        align-items: flex-start;
    }
    .lang-selector-wrap select {
        width: 100%;
        max-width: 100%;
    }
}

/* Language responsive: touch targets */
@media (max-width: 767px) {
    .lang-actions button,
    .translation-actions button {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ==============================================
   SYMPTOM DETAIL MANAGER
   ISO/IEC 25010 — Usability, Accessibility
   ISO/IEC 25002 — Quality in Use: admin content management
   ============================================== */

/* "Details" button on symptom row */
.btn-details {
    padding: 0.25rem 0.625rem;
    font-size: var(--text-xs);
    font-weight: 500;
    border: 1px solid #d97706;
    border-radius: var(--radius-md);
    background: #fef3c7;
    color: #92400e;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.btn-details:hover { background: #d97706; color: #fff; }

/* Detail type badges */
.detail-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 500;
    margin-left: var(--space-2);
}
.detail-type-text  { background: var(--primary-50, #eff6ff); color: var(--primary, #2563eb); }
.detail-type-image { background: #f3e8ff; color: #7e22ce; }
.detail-type-link  { background: #ecfdf5; color: #059669; }

/* Detail row inside the modal */
.detail-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--neutral-100);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    gap: var(--space-3);
    background: var(--neutral-25, #fafafa);
    transition: background var(--transition-fast);
}
.detail-row:hover { background: var(--neutral-50, #f5f5f5); }
.detail-row-info { flex: 1; min-width: 0; }
.detail-row-header {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-1);
    flex-wrap: wrap;
}
.detail-row-header strong {
    font-size: var(--text-sm);
    color: var(--neutral-800);
}
.detail-row-actions { flex-shrink: 0; }

/* Content preview */
.detail-preview {
    font-size: var(--text-xs);
    color: var(--neutral-500);
    margin-top: var(--space-1);
    line-height: 1.5;
}
.detail-preview-text { white-space: pre-wrap; word-break: break-word; }
.detail-preview-image img {
    max-width: 160px;
    max-height: 100px;
    border-radius: var(--radius-md);
    border: 1px solid var(--neutral-200);
    object-fit: cover;
    margin-top: var(--space-1);
}
.detail-caption {
    font-size: 10px;
    color: var(--neutral-400);
    margin-top: var(--space-1);
    font-style: italic;
}
.detail-preview-link a {
    font-size: var(--text-xs);
    color: var(--primary, #2563eb);
    word-break: break-all;
}
.detail-preview-link a:hover { text-decoration: underline; }

/* Image preview in add form */
.detail-image-preview {
    margin-bottom: var(--space-3);
    padding: var(--space-2);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    display: inline-block;
    background: var(--neutral-50, #f5f5f5);
}
.detail-image-preview img {
    max-width: 240px;
    max-height: 160px;
    border-radius: var(--radius-sm);
    object-fit: contain;
    display: block;
}

/* Type config panel (show/hide per type) */
.detail-type-config { margin-bottom: var(--space-3); }

/* Responsive: mobile stacking */
@media (max-width: 575px) {
    .detail-row { flex-direction: column; align-items: stretch; }
    .detail-row-actions { width: 100%; display: flex; justify-content: flex-end; margin-top: var(--space-2); }
    .detail-preview-image img { max-width: 100%; max-height: 180px; }
    .detail-image-preview { width: 100%; }
    .detail-image-preview img { max-width: 100%; }
}

/* Touch targets */
@media (max-width: 767px) {
    .btn-details { min-height: 44px; min-width: 44px; }
    .detail-row-actions button { min-height: 44px; min-width: 44px; }
}

/* Desktop: wider preview images */
@media (min-width: 768px) {
    .detail-row { align-items: center; }
    .detail-preview-image img { max-width: 200px; max-height: 120px; }
}

/* ==============================================
   USER SYMPTOM DETAIL VIEWER
   ISO/IEC 25010 — Usability: health literacy for all users
   ISO/IEC 25002 — Effectiveness: informed symptom selection
   ============================================== */

/* Info button on symptom cards — position: relative is on .symptom-option base rule */
.sd-info-btn {
    position: absolute;
    top: 8px; right: 8px;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--primary, #2563eb);
    background: var(--primary-50, #eff6ff);
    color: var(--primary, #2563eb);
    font-size: 13px;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, serif;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.15s ease;
    z-index: 2;
    padding: 0;
}
.sd-info-btn:hover {
    background: var(--primary, #2563eb);
    color: #fff;
    transform: scale(1.1);
}
.sd-info-btn.visible { display: flex; }

/* Overlay */
.sd-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1050;
    display: none;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transition: opacity var(--transition-normal);
}
.sd-overlay.active { display: block; }

/* Modal — mobile-first: bottom-sheet */
.sd-modal {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    max-height: 85vh;
    background: var(--neutral-0);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
    z-index: 1051;
    display: none;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
}
.sd-modal.active { display: flex; transform: translateY(0); }

/* Drag handle (mobile) */
.sd-drag-handle {
    width: 36px; height: 4px;
    background: var(--neutral-200);
    border-radius: 2px;
    margin: 8px auto 0;
    flex-shrink: 0;
}

/* Header */
.sd-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--neutral-100);
    flex-shrink: 0;
    position: sticky; top: 0;
    background: var(--neutral-0);
    z-index: 2;
}
.sd-modal-header h5 {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--neutral-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    padding-right: var(--space-2);
}
.sd-modal-close {
    background: none; border: none;
    font-size: 22px; color: var(--neutral-400);
    cursor: pointer; padding: 4px 8px;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
    line-height: 1; flex-shrink: 0;
}
.sd-modal-close:hover { background: var(--neutral-100); color: var(--neutral-700); }

/* Body */
.sd-modal-body {
    padding: var(--space-4);
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

/* Detail items */
.sd-detail-item {
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--neutral-100);
}
.sd-detail-item:last-child { border-bottom: none; margin-bottom: 0; }
.sd-detail-label {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--neutral-700);
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.sd-detail-type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
}
.sd-detail-type-icon.type-text { background: var(--primary-50, #eff6ff); color: var(--primary, #2563eb); }
.sd-detail-type-icon.type-image { background: #f3e8ff; color: #7e22ce; }
.sd-detail-type-icon.type-link { background: #ecfdf5; color: #059669; }

.sd-detail-text {
    font-size: var(--text-sm);
    color: var(--neutral-600);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}
.sd-detail-image {
    margin-top: var(--space-1);
}
.sd-detail-image img {
    max-width: 100%;
    max-height: 300px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--neutral-200);
    object-fit: contain;
    cursor: pointer;
    transition: opacity 0.15s;
}
.sd-detail-image img:hover { opacity: 0.9; }
.sd-detail-caption {
    font-size: var(--text-xs);
    color: var(--neutral-400);
    font-style: italic;
    margin-top: var(--space-1);
}
.sd-detail-link a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--primary, #2563eb);
    font-weight: 500;
    word-break: break-all;
    text-decoration: none;
}
.sd-detail-link a:hover { text-decoration: underline; }
.sd-detail-link a::after {
    content: '\2197';
    font-size: 12px;
    opacity: 0.6;
}

/* Responsive: mobile bottom-sheet */
@media (max-width: 479px) {
    .sd-info-btn { width: 34px; height: 34px; font-size: 15px; top: 6px; right: 6px; }
    .sd-detail-label { font-size: 14px; }
    .sd-detail-image img { max-height: 220px; }
}

@media (min-width: 480px) and (max-width: 767px) {
    .sd-modal { max-height: 70vh; }
}

/* Desktop: centered modal */
@media (min-width: 768px) {
    .sd-modal {
        top: 50%; bottom: auto; left: 50%; right: auto;
        transform: translate(-50%, -50%) scale(0.95);
        width: 520px;
        max-height: 80vh;
        border-radius: var(--radius-2xl);
        opacity: 0;
    }
    .sd-modal.active {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    .sd-drag-handle { display: none; }
}

@media (min-width: 992px) {
    .sd-modal { width: 560px; }
}

/* Touch targets */
@media (max-width: 767px) {
    .sd-info-btn { min-width: 34px; min-height: 34px; }
    .sd-modal-close { min-width: 44px; min-height: 44px; font-size: 24px; }
}


/* ==============================================
   BARANGAY INFO PANEL — Map Interactivity
   ISO/IEC 25010 — Operability: clickable barangay details
   ISO/IEC 25002 — Effectiveness: symptom analysis for all ages
   ============================================== */

/* Overlay */
.bi-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1040;
    display: none;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transition: opacity var(--transition-normal);
}
.bi-overlay.active { display: block; }

/* Panel — mobile-first: bottom-sheet */
.bi-panel {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    max-height: 80vh;
    background: var(--neutral-0);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
    z-index: 1041;
    display: none;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
}
.bi-panel.active { display: flex; transform: translateY(0); }

/* Drag handle (mobile bottom-sheet indicator) */
.bi-drag-handle {
    width: 36px; height: 4px;
    background: var(--neutral-200);
    border-radius: 2px;
    margin: 8px auto 0;
    flex-shrink: 0;
}

/* Panel header */
.bi-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--neutral-100);
    flex-shrink: 0;
    position: sticky; top: 0;
    background: var(--neutral-0);
    z-index: 2;
}
.bi-panel-header h5 { margin: 0; font-size: var(--text-base); font-weight: 700; color: var(--neutral-800); }
.bi-panel-close {
    background: none; border: none;
    font-size: 22px; color: var(--neutral-400);
    cursor: pointer; padding: 4px 8px;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
    line-height: 1;
}
.bi-panel-close:hover { background: var(--neutral-100); color: var(--neutral-700); }

/* Panel body — scrollable */
.bi-panel-body {
    padding: var(--space-4);
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

/* Hero stat */
.bi-hero {
    text-align: center;
    padding: var(--space-4) 0 var(--space-3);
}
.bi-hero-number {
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
    color: var(--primary);
}
.bi-hero-label {
    font-size: var(--text-sm);
    color: var(--neutral-500);
    margin-top: var(--space-1);
    font-weight: 500;
}

/* Stats grid */
.bi-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.bi-stat-card {
    background: var(--neutral-25, #fafafa);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    text-align: center;
}
.bi-stat-value {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--neutral-800);
}
.bi-stat-label {
    font-size: var(--text-xs);
    color: var(--neutral-500);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Section heading */
.bi-section-title {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--neutral-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--neutral-100);
}

/* Symptom bar chart rows */
.bi-symptom-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
}
.bi-symptom-row + .bi-symptom-row { border-top: 1px solid var(--neutral-50); }
.bi-symptom-name {
    width: 110px;
    min-width: 80px;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--neutral-700);
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bi-symptom-bar-wrap {
    flex: 1;
    height: 22px;
    background: var(--neutral-50);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
}
/* Symptom bar — Monochromatic primary-blue palette
   ISO/IEC 25010 — Usability › Accessibility: WCAG AA contrast maintained.
   ISO/IEC 25010 — Interaction Capability › UI Aesthetics: cohesive
   single-hue bars reduce cognitive load while preserving visual distinction.
   ISO/IEC 25002 — Quality Measure: visual consistency via uniform hue
   (primary-blue 220°) with perceptually distinct lightness per bar. */
.bi-symptom-bar {
    height: 100%;
    border-radius: var(--radius-md);
    background: var(--primary-600);
    min-width: 4px;
    transition: width 0.4s cubic-bezier(0.22,1,0.36,1);
}
.bi-symptom-count {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--neutral-800);
    min-width: 28px;
    text-align: right;
    flex-shrink: 0;
}

/* No data state */
.bi-no-data {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: var(--neutral-400);
}
.bi-no-data-icon { font-size: 36px; margin-bottom: var(--space-2); }
.bi-no-data-text { font-size: var(--text-sm); }

/* ── Symptoms Distribution Chart ─────────── */
.bi-chart-title {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--neutral-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: var(--space-3);
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--neutral-100);
}
.bi-chart-wrap {
    position: relative;
    height: 240px;
    margin-top: var(--space-2);
    padding: var(--space-2) 0;
}
@media (max-width: 479px) {
    .bi-chart-wrap { height: 200px; }
}
@media (min-width: 480px) and (max-width: 767px) {
    .bi-chart-wrap { height: 220px; }
}

/* ── Filter Chip Bar ─────────────────────── */
.bi-filter-bar {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
}
.bi-filter-bar::-webkit-scrollbar { display: none; }
.bi-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    border: 1.5px solid var(--neutral-200);
    border-radius: 999px;
    background: var(--neutral-0);
    color: var(--neutral-600);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
    user-select: none;
    -webkit-user-select: none;
    min-height: 34px;
}
/* ISO/IEC 25010 — Usability: clear hover affordance on inactive chips.
   ISO/IEC 25002 — Effectiveness: user can scan which chips are interactive. */
.bi-chip:hover {
    border-color: var(--primary-500);
    color: var(--primary-600);
    background: var(--primary-50);
}
/* ISO/IEC 25010 — Usability: active filter is unambiguously distinct from inactive.
                   Accessibility: focus ring for keyboard navigation.
   ISO/IEC 25002 — Effectiveness: user always knows which filter is applied. */
.bi-chip.active {
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
    border-color: var(--primary-700);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(29, 70, 214, 0.28);
    letter-spacing: -0.01em;
}
.bi-chip.active:hover {
    background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-800) 100%);
    border-color: var(--primary-800);
    box-shadow: 0 3px 12px rgba(29, 70, 214, 0.36);
}
.bi-chip:focus-visible {
    outline: 2px solid var(--primary-400);
    outline-offset: 2px;
}

/* ── Summary Bar ─────────────────────────── */
.bi-summary-bar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: var(--space-2) var(--space-3);
    background: var(--neutral-25, #fafafa);
    border-top: 1px solid var(--neutral-100);
    gap: var(--space-3);
    flex-wrap: wrap;
}
.bi-summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
.bi-summary-num {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--primary);
}
.bi-summary-label {
    font-size: 11px;
    color: var(--neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ── Count Labels on Map ─────────────────── */
.bi-count-label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px; height: 22px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 700;
    color: var(--neutral-800);
    background: rgba(255,255,255,0.92);
    border-radius: 11px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
    pointer-events: none;
    line-height: 1;
}

/* ── Barangay Info Panel: Responsive ─────── */

/* Mobile small (<480px): taller bottom-sheet, smaller text */
@media (max-width: 479px) {
    .bi-panel { max-height: 85vh; }
    .bi-hero-number { font-size: 40px; }
    .bi-stats-grid { grid-template-columns: 1fr; }
    .bi-symptom-name { width: 90px; min-width: 70px; font-size: var(--text-xs); }
    .bi-count-label { min-width: 18px; height: 18px; font-size: 10px; border-radius: 9px; padding: 0 4px; }
    .bi-chip { font-size: 12px; padding: 5px 10px; min-height: 36px; }
}

/* Tablet (480px–767px): medium bottom-sheet */
@media (min-width: 480px) and (max-width: 767px) {
    .bi-panel { max-height: 70vh; }
}

/* Desktop (768px+): side panel */
@media (min-width: 768px) {
    .bi-panel {
        top: 0; bottom: 0; left: auto; right: 0;
        width: 380px;
        max-height: 100vh;
        border-radius: 0;
        transform: translateX(100%);
    }
    .bi-panel.active { transform: translateX(0); }
    .bi-drag-handle { display: none; }
    .bi-filter-bar { flex-wrap: wrap; }
}

/* Large desktop (992px+): wider panel */
@media (min-width: 992px) {
    .bi-panel { width: 420px; }
}

/* Touch targets on mobile */
@media (max-width: 767px) {
    .bi-chip { min-height: 44px; }
    .bi-panel-close { min-width: 44px; min-height: 44px; font-size: 24px; }
}


/* ==============================================
   RESPONSIVE DESIGN ENHANCEMENTS
   ISO/IEC 25010 — Usability / Operability
   ISO/IEC 25002 — Quality in Use
   Mobile-first approach with granular breakpoints
   ============================================== */

/* ---- 375px breakpoint (iPhone SE / compact mobile) ---- */
@media (min-width: 375px) and (max-width: 479px) {
  .container { padding-left: var(--space-4); padding-right: var(--space-4); }
  h1 { font-size: 1.375rem; }
  h2 { font-size: 1.125rem; }
  .card-body { padding: var(--space-3); }
  .card-header { padding: var(--space-3); }
  .page-header-title { font-size: 1.25rem; }
  .page-header-subtitle { font-size: var(--text-xs); }
  .row { gap: var(--space-2); }
  .form-control { font-size: 16px; /* prevents iOS zoom on focus */ }
}

/* ---- Form control iOS zoom prevention (all mobile) ---- */
@media (max-width: 767px) {
  input[type="text"], input[type="number"], input[type="email"],
  input[type="password"], input[type="tel"], input[type="url"],
  textarea, select, .form-control {
    font-size: 16px;
  }
}

/* ---- 1440px breakpoint (large desktop) ---- */
@media (min-width: 1440px) {
  .container { max-width: 1400px; }
  .card-body { padding: var(--space-6); }
  .page-header { padding: var(--space-8) 0; }
  h1 { font-size: var(--text-4xl); }
  .stat-card { padding: var(--space-5); }
}

/* ---- Custom fields section responsive (report form) ---- */
.custom-fields-section {
  border-left: 3px solid var(--primary-400);
  padding-left: var(--space-4);
  margin-bottom: var(--space-5);
}
.custom-fields-section h6 {
  color: var(--primary-700);
  margin-bottom: var(--space-3);
}

@media (max-width: 575px) {
  .custom-fields-section {
    padding-left: var(--space-3);
    border-left-width: 2px;
  }
}

/* ---- Upload preview responsive ---- */
.upload-preview img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--neutral-200);
}

@media (max-width: 575px) {
  .upload-preview img { max-width: 150px; max-height: 100px; }
}
@media (min-width: 576px) {
  .upload-preview img { max-width: 200px; max-height: 150px; }
}

/* ---- Field type/required badges ---- */
.field-type-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--radius-full);
  font-size: 10px; font-weight: var(--weight-medium);
  background: var(--info-light); color: var(--info);
}
.field-required-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--radius-full);
  font-size: 10px; font-weight: var(--weight-medium);
  background: var(--danger-light); color: var(--danger);
}
.field-optional-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--radius-full);
  font-size: 10px; font-weight: var(--weight-medium);
  background: var(--neutral-100); color: var(--neutral-500);
}

/* ---- Symptom management row fine-tuning ---- */
@media (max-width: 359px) {
  .symptom-actions .btn-fields,
  .symptom-actions .btn-delete-sm {
    font-size: 10px;
    padding: var(--space-1) var(--space-2);
  }
}

/* ---- Range inputs responsive ---- */
.range-inputs {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}
.range-inputs input { flex: 1; min-width: 0; }
.range-inputs .range-sep {
  color: var(--neutral-400);
  font-size: var(--text-sm);
  flex-shrink: 0;
}

@media (max-width: 575px) {
  .range-inputs {
    flex-direction: column;
    gap: var(--space-2);
  }
  .range-inputs .range-sep { display: none; }
}

/* ---- Report form card step responsiveness ---- */
@media (max-width: 479px) {
  .member-option {
    padding: var(--space-2) var(--space-3);
    min-height: 60px;
    gap: var(--space-2);
  }
  .symptom-option {
    padding: var(--space-3) 40px var(--space-3) var(--space-3);  /* keeps right clearance */
    min-height: 60px;
    gap: var(--space-2);
  }
  .member-option strong, .symptom-option strong {
    font-size: var(--text-sm);
  }
}
@media (max-width: 359px) {
  .sw-mo-icon { width: 34px; height: 34px; min-width: 34px; }
  .sw-mo-icon svg { width: 16px; height: 16px; }
  .sw-so-check { width: 30px; height: 30px; min-width: 30px; }
  .sw-so-check svg { width: 14px; height: 14px; }
}

/* ---- Button block on small mobile ---- */
@media (max-width: 375px) {
  .btn-lg {
    width: 100%;
    text-align: center;
  }
  .d-flex.gap-3.flex-wrap {
    flex-direction: column;
  }
}

/* ---- Print styles ---- */
@media print {
  .bdd-overlay { display: none !important; }
  .bdd-panel {
    position: static;
    transform: none;
    width: 100%;
    height: auto;
    box-shadow: none;
    border: 1px solid #000;
    page-break-inside: avoid;
  }
  .bdd-close-btn, .bdd-action-btn { display: none; }
  .bdd-tab-pane { display: block !important; page-break-inside: avoid; }
  .bdd-tabs { display: none; }
}


/* ================================================================
   SYMPWATCH USER PORTAL — Design System Extension
   ISO/IEC 25010 — Usability: Operability, Learnability, Accessibility
   ISO/IEC 25002 — Quality in Use: Effectiveness, Satisfaction
   Professional Modern 2025 Government-Grade Interface
   ================================================================ */

/* ─── SympWatch Navbar — Luxury 2025 ──────────────────────── */
.sw-navbar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(208, 212, 232, 0.6);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-transition: box-shadow 0.25s ease;
  transition: box-shadow 0.25s ease;
}
.sw-navbar.scrolled {
  -webkit-box-shadow: 0 2px 20px rgba(15, 22, 48, 0.08);
  box-shadow: 0 2px 20px rgba(15, 22, 48, 0.08);
}
.sw-navbar-inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  height: 44px;
  gap: var(--space-3);
}
@media (min-width: 768px) {
  .sw-navbar-inner { height: 48px; }
}
.sw-navbar-brand {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.sw-navbar-brand-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-800) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(29, 70, 214, 0.30);
}
.sw-navbar-brand-text {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--neutral-900);
  letter-spacing: -0.03em;
}
.sw-navbar-brand-sub {
  display: none;
  font-size: 0.6875rem;
  color: var(--neutral-400);
  font-weight: var(--weight-normal);
  margin-left: var(--space-2);
  padding-left: var(--space-2);
  border-left: 1px solid var(--neutral-200);
  letter-spacing: 0.01em;
}
@media (min-width: 768px) {
  .sw-navbar-brand-sub { display: inline; }
  .sw-navbar-brand-icon { width: 30px; height: 30px; }
}

/* Desktop nav links */
.sw-nav-links {
  display: none;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  gap: 2px;
}
@media (min-width: 768px) {
  .sw-nav-links { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
}
.sw-nav-link {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 12px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--neutral-600);
  text-decoration: none;
  border-radius: var(--radius-full);
  -webkit-transition: all var(--transition-fast);
  transition: all var(--transition-fast);
  white-space: nowrap;
  position: relative;
}
.sw-nav-link:hover {
  color: var(--primary-700);
  background: var(--primary-50);
}
.sw-nav-link--active {
  color: var(--primary-700);
  background: var(--primary-50);
  font-weight: var(--weight-semibold);
}
.sw-nav-link--active::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background: var(--primary-600);
  border-radius: var(--radius-full);
}
.sw-nav-link--signout {
  color: var(--neutral-500);
  margin-left: var(--space-2);
  padding-left: var(--space-3);
  border-left: 1px solid var(--neutral-100);
  border-radius: var(--radius-lg);
}
.sw-nav-link--signout:hover {
  color: var(--danger);
  background: var(--danger-light);
}

/* ── Desktop nav: panel-trigger buttons ───────────────────────
   ISO/IEC 25010 — Operability: <button> elements share the
   exact visual treatment of <a> nav links so the account entry
   points are indistinguishable in appearance from page links,
   minimising learning cost for existing users.
   ISO/IEC 25010 — Accessibility: aria-haspopup="dialog" on the
   buttons signals the panel behaviour to assistive technology;
   focus-visible ring ensures keyboard navigability.
   ISO/IEC 25002 — Effectiveness: one-click access to account
   panels without leaving or reloading the dashboard page. */
.sw-nav-links .sw-nav-link--panel {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  align-items: center;
  gap: var(--space-1);
}
.sw-nav-links .sw-nav-link--panel:hover {
  color: var(--primary-700);
  background: var(--primary-50);
}
.sw-nav-links .sw-nav-link--panel:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--primary-300);
  border-radius: var(--radius-xl);
}
.sw-nav-links .sw-nav-link--panel svg {
  flex-shrink: 0;
  opacity: 0.6;
}

/* Left-border separator that opens the account button group */
.sw-nav-links .sw-nav-link--section {
  margin-left: var(--space-2);
  padding-left: var(--space-3);
  border-left: 1px solid var(--neutral-100);
}

/* Navbar actions (right side buttons for public/auth) */
.sw-navbar-actions {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  gap: var(--space-2);
}

/* Mobile hamburger toggle */
.sw-nav-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius-xl);
  background: var(--neutral-0);
  cursor: pointer;
  transition: all var(--transition-fast);
  padding: 0;
  flex-shrink: 0;
  color: var(--neutral-600);
}
.sw-nav-hamburger:hover {
  background: var(--neutral-50);
  border-color: var(--neutral-300);
  color: var(--neutral-800);
}
@media (min-width: 768px) {
  .sw-nav-hamburger { display: none; }
}

/* Mobile nav drawer */
.sw-nav-mobile {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--neutral-0);
  border-bottom: 1px solid var(--neutral-100);
  box-shadow: 0 12px 32px rgba(15, 22, 48, 0.10);
  padding: var(--space-3) var(--space-4) var(--space-4);
  z-index: var(--z-dropdown);
}
.sw-nav-mobile.show { display: block; }
.sw-nav-mobile .sw-nav-link {
  display: -webkit-box;
  display: flex;
  width: 100%;
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-xl);
  font-size: var(--text-base);
}
.sw-nav-mobile .sw-nav-link--signout {
  margin-left: 0;
  padding-left: var(--space-3);
  border-left: none;
  margin-top: var(--space-2);
  border-top: 1px solid var(--neutral-100);
  padding-top: var(--space-3);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ── Mobile nav: Account section divider ──────────────────────
   ISO/IEC 25010 — Operability: visible section label reduces
   cognitive load; users immediately recognise the grouping.
   ISO/IEC 25002 — Effectiveness: consistent visual hierarchy
   mirrors the desktop layout without needing extra navigation. */
.sw-nav-mobile-divider {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-1);
  padding: 0 var(--space-1);
}
.sw-nav-mobile-divider::before,
.sw-nav-mobile-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--neutral-100);
}
.sw-nav-mobile-divider-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--neutral-400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* ── Mobile nav: panel-trigger buttons ────────────────────────
   ISO/IEC 25010 — Operability: <button> elements receive the
   same tap-target size (min 44 px) and visual treatment as
   <a> nav links — no visible difference to the user.
   ISO/IEC 25002 — Effectiveness: panel opens in-place without
   a full page reload, preserving scroll position and context. */
.sw-nav-mobile .sw-nav-link--panel {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-xl);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--neutral-700);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.sw-nav-mobile .sw-nav-link--panel:hover,
.sw-nav-mobile .sw-nav-link--panel:focus-visible {
  background: var(--neutral-50);
  color: var(--primary-700);
  outline: none;
}
.sw-nav-mobile .sw-nav-link--panel:focus-visible {
  box-shadow: 0 0 0 2px var(--primary-300);
}
.sw-nav-mobile .sw-nav-link--panel svg {
  flex-shrink: 0;
  opacity: 0.65;
}

@media (min-width: 768px) {
  .sw-nav-mobile { display: none !important; }
}

/* Dark navbar variant — public pages */
.sw-navbar--dark {
  background: -webkit-linear-gradient(315deg, var(--primary-700) 0%, var(--primary-900) 100%);
  background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-900) 100%);
  border-bottom: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.sw-navbar--dark .sw-navbar-brand-text { color: #fff; }
.sw-navbar--dark .sw-navbar-brand-sub { color: rgba(255,255,255,0.6); border-left-color: rgba(255,255,255,0.2); }
.sw-navbar--dark .sw-navbar-brand-icon {
  background: rgba(255,255,255,0.15);
}
.sw-navbar--dark .sw-nav-hamburger {
  border-color: rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.sw-navbar--dark .sw-nav-hamburger:hover {
  background: rgba(255,255,255,0.15);
}
.sw-navbar--dark .sw-nav-link {
  color: rgba(255,255,255,0.75);
}
.sw-navbar--dark .sw-nav-link:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
}
.sw-navbar--dark .sw-nav-mobile {
  background: var(--primary-800);
  border-bottom-color: var(--primary-900);
  -webkit-box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.sw-navbar--dark .sw-nav-mobile .sw-nav-link {
  color: rgba(255,255,255,0.8);
}
.sw-navbar--dark .sw-nav-mobile .sw-nav-link:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
}
.sw-navbar--dark .sw-nav-mobile .sw-nav-link--signout {
  border-top-color: rgba(255,255,255,0.15);
}

/* Minimal auth navbar variant */
.sw-navbar--auth {
  background: transparent;
  border-bottom: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.sw-navbar--auth .sw-navbar-brand-text { color: var(--neutral-600); }
.sw-navbar--auth .sw-nav-link { color: var(--neutral-500); }
.sw-navbar--auth .sw-nav-link:hover { color: var(--neutral-700); background: rgba(0,0,0,0.04); }

/* ─── SympWatch Footer ──────────────────────────────────── */
.sw-footer {
  background: linear-gradient(160deg, var(--neutral-900) 0%, var(--primary-900) 100%);
  color: var(--neutral-400);
  padding: var(--space-8) 0 0;
  margin-top: var(--space-10);
}
.sw-footer-grid {
  display: -ms-grid;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
}
@media (min-width: 576px) {
  .sw-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
  .sw-footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--space-8); }
  .sw-footer { padding: var(--space-10) 0 0; }
}
.sw-footer-col-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--neutral-200);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3);
}
.sw-footer-brand {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.sw-footer-brand-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.1);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.sw-footer-brand-text {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: #fff;
  letter-spacing: -0.02em;
}
.sw-footer-desc {
  font-size: var(--text-sm);
  color: var(--neutral-400);
  line-height: var(--leading-relaxed);
  margin-bottom: 0;
}
.sw-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sw-footer-links li { margin-bottom: var(--space-2); }
.sw-footer-links a {
  font-size: var(--text-sm);
  color: var(--neutral-400);
  text-decoration: none;
  -webkit-transition: color var(--transition-fast);
  transition: color var(--transition-fast);
}
.sw-footer-links a:hover { color: var(--neutral-100); }
.sw-footer-contact {
  font-size: var(--text-sm);
  color: var(--neutral-400);
  line-height: var(--leading-relaxed);
}
.sw-footer-bottom {
  border-top: 1px solid var(--neutral-700);
  padding: var(--space-4) 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--neutral-500);
}

/* ─── SympWatch Page Header ─────────────────────────────── */
.sw-page-header {
  padding: var(--space-6) 0 var(--space-5);
}
.sw-page-header h1 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--neutral-900);
  margin-bottom: var(--space-1);
}
.sw-page-header p {
  font-size: var(--text-sm);
  color: var(--neutral-500);
  margin-bottom: 0;
  max-width: 640px;
}
@media (min-width: 576px) {
  .sw-page-header h1 { font-size: var(--text-2xl); }
  .sw-page-header { padding: var(--space-8) 0 var(--space-6); }
}

/* ─── SympWatch Step Badge ──────────────────────────────── */
.sw-step-badge {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary-600);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  margin-right: var(--space-2);
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

/* ─── SympWatch Card Accent ─────────────────────────────── */
.sw-card-accent {
  border-left: 3px solid var(--primary-500);
}

/* ─── Responsive helpers ────────────────────────────────── */
.show-mobile { display: block; }
@media (min-width: 768px) {
  .show-mobile { display: none !important; }
}

/* ─── SympWatch Auth — Luxury 2025 ───────────────────────── */
.sw-auth-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  min-height: 100vh;
  background: #f3f4f9;
  position: relative;
  overflow: hidden;
}
.sw-auth-main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 55%;
  background: linear-gradient(135deg, var(--primary-800) 0%, var(--primary-900) 100%);
  z-index: 0;
}
.sw-auth-main::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 55%;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  z-index: 0;
}
.sw-auth-card {
  width: 100%;
  max-width: 440px;
  position: relative;
  z-index: 1;
}
.sw-auth-card-wide {
  max-width: 740px;
}
.sw-auth-header {
  text-align: center;
  margin-bottom: var(--space-5);
  color: #fff;
  position: relative;
  z-index: 1;
}
.sw-auth-header .sw-auth-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.9);
  margin-bottom: var(--space-3);
  border: 1px solid rgba(255,255,255,0.2);
}
.sw-auth-header h1 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: #fff;
  margin-bottom: var(--space-2);
  letter-spacing: -0.02em;
}
.sw-auth-header p {
  color: rgba(255,255,255,0.70);
  font-size: var(--text-sm);
  margin-bottom: 0;
}
.sw-auth-logo {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-4);
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
}
.sw-auth-form-card {
  background: var(--neutral-0);
  border-radius: var(--radius-2xl);
  box-shadow: 0 24px 64px rgba(15, 22, 48, 0.16), 0 4px 16px rgba(15, 22, 48, 0.08);
  overflow: hidden;
  border: 1px solid rgba(208, 212, 232, 0.5);
}
.sw-auth-form-body {
  padding: var(--space-5);
}
@media (min-width: 576px) {
  .sw-auth-form-body { padding: var(--space-6) var(--space-7, 2rem); }
  .sw-auth-header h1 { font-size: var(--text-3xl); }
}
.sw-auth-footer {
  text-align: center;
  margin-top: var(--space-4);
  position: relative;
  z-index: 1;
}
.sw-auth-footer p {
  color: rgba(255,255,255,0.65);
  font-size: var(--text-sm);
}
.sw-auth-footer a {
  color: rgba(255,255,255,0.92);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.35);
  text-underline-offset: 2px;
}
.sw-auth-footer a:hover {
  color: #fff;
  text-decoration-color: rgba(255,255,255,0.7);
}

/* Divider with text */
.sw-auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  color: var(--neutral-400);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sw-auth-divider::before,
.sw-auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--neutral-100);
}

/* ─── Auth Portal Variants ─────────────────────────────── */
.sw-auth-main--admin::before {
  background: -webkit-linear-gradient(315deg, var(--neutral-700) 0%, var(--neutral-900) 100%);
  background: linear-gradient(135deg, var(--neutral-700) 0%, var(--neutral-900) 100%);
}
.sw-auth-main--admin .sw-auth-badge { background: rgba(255,255,255,0.12); }
.sw-auth-main--admin .sw-auth-footer a { color: var(--neutral-600); }
.sw-auth-main--hw::before {
  background: -webkit-linear-gradient(315deg, #0d9488 0%, #0f766e 100%);
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
}
.sw-auth-main--hw .sw-auth-badge { background: rgba(255,255,255,0.15); }
.sw-auth-btn--admin {
  background: linear-gradient(135deg, var(--neutral-700) 0%, var(--neutral-900) 100%);
  border-color: var(--neutral-700);
  color: #fff;
}
.sw-auth-btn--admin:hover {
  background: linear-gradient(135deg, var(--neutral-600) 0%, var(--neutral-800) 100%);
  border-color: var(--neutral-600);
  color: #fff;
}
.sw-auth-btn--hw {
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  border-color: #0d9488;
  color: #fff;
}
.sw-auth-btn--hw:hover {
  background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
  border-color: #14b8a6;
  color: #fff;
}
.sw-auth-version {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  background: var(--neutral-100);
  color: var(--neutral-500);
  margin-top: var(--space-2);
}

/* ─── Tab Indicator (HW Login) ─────────────────────────── */
.sw-tab-indicator {
  display: -webkit-box;
  display: flex;
  background: var(--neutral-100);
  border-radius: var(--radius-lg);
  padding: 3px;
  margin-bottom: var(--space-5);
}
.sw-tab-indicator button {
  -webkit-box-flex: 1;
  flex: 1;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--neutral-500);
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
}
.sw-tab-indicator button.active {
  background: var(--neutral-0);
  color: var(--primary-700);
  -webkit-box-shadow: var(--shadow-sm);
  box-shadow: var(--shadow-sm);
}
.sw-tab-indicator button:hover:not(.active) {
  color: var(--neutral-700);
}

/* ─── Tab Panel Visibility (HW Login) ─────────────────── */
/* ISO/IEC 25010 §4.2.1 — Functional Completeness: each tab panel
   is exclusively shown; only the active tab's content is rendered
   to the user, preventing form-field collision between methods.
   ISO/IEC 25002 — Accountability: one distinct authentication
   path is exposed at a time, keeping audit events unambiguous. */
.login-tab-content {
  display: none;
}
.login-tab-content.visible {
  display: block;
}

/* ─── QR Code Drop Zone (HW Login) ────────────────────── */
.sw-qr-drop-zone {
  border: 2px dashed var(--neutral-300);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-4);
  text-align: center;
  cursor: pointer;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
  position: relative;
  background: var(--neutral-25);
}
.sw-qr-drop-zone:hover,
.sw-qr-drop-zone.drag-active {
  border-color: #0d9488;
  background: #f0fdfa;
}
.sw-qr-drop-zone input[type="file"] { display: none; }
.sw-qr-drop-zone .qr-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-3);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  background: var(--neutral-100);
  border-radius: var(--radius-lg);
}
.sw-qr-drop-zone.drag-active .qr-icon {
  background: #ccfbf1;
}
.sw-qr-drop-zone .drop-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--neutral-700);
  margin-bottom: var(--space-1);
}
.sw-qr-drop-zone .drop-subtitle {
  font-size: var(--text-xs);
  color: var(--neutral-400);
}
.sw-qr-file-name {
  display: none;
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: #f0fdfa;
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: #065f46;
  font-weight: var(--weight-medium);
}
.sw-qr-file-name.visible { display: block; }

/* ─── Auth Divider ─────────────────────────────────────── */
.sw-auth-divider {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  margin: var(--space-4) 0;
  font-size: var(--text-xs);
  color: var(--neutral-400);
}
.sw-auth-divider::before,
.sw-auth-divider::after {
  content: '';
  -webkit-box-flex: 1;
  flex: 1;
  height: 1px;
  background: var(--neutral-200);
}
.sw-auth-divider span {
  padding: 0 var(--space-3);
}

/* ─── SympWatch Navbar — Health Worker Portal Variant ───── */
.sw-navbar--hw {
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  border-bottom: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.sw-navbar--hw .sw-navbar-brand-text { color: #fff; }
.sw-navbar--hw .sw-navbar-brand-sub { color: rgba(255,255,255,0.6); border-left-color: rgba(255,255,255,0.2); }
.sw-navbar--hw .sw-navbar-brand-icon { background: rgba(255,255,255,0.15); }
.sw-navbar--hw .sw-nav-hamburger { border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: #fff; }
.sw-navbar--hw .sw-nav-hamburger:hover { background: rgba(255,255,255,0.15); }
.sw-navbar--hw .sw-nav-link { color: rgba(255,255,255,0.75); }
.sw-navbar--hw .sw-nav-link:hover { color: #fff; background: rgba(255,255,255,0.1); }
.sw-navbar--hw .sw-nav-link--active { color: #fff; background: rgba(255,255,255,0.18); font-weight: var(--weight-semibold); }
.sw-navbar--hw .sw-nav-link--signout { border-left-color: rgba(255,255,255,0.15); }
.sw-navbar--hw .sw-nav-mobile { background: #0f766e; border-bottom-color: #115e59; box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.sw-navbar--hw .sw-nav-mobile .sw-nav-link { color: rgba(255,255,255,0.8); }
.sw-navbar--hw .sw-nav-mobile .sw-nav-link:hover { color: #fff; background: rgba(255,255,255,0.1); }
.sw-navbar--hw .sw-nav-mobile .sw-nav-link--signout { border-top-color: rgba(255,255,255,0.15); }

/* ─── SympWatch Navbar — Admin Portal Variant ──────────── */
.sw-navbar--admin {
  background: linear-gradient(135deg, var(--neutral-700) 0%, var(--neutral-900) 100%);
  border-bottom: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.sw-navbar--admin .sw-navbar-brand-text { color: #fff; }
.sw-navbar--admin .sw-navbar-brand-sub { color: rgba(255,255,255,0.6); border-left-color: rgba(255,255,255,0.2); }
.sw-navbar--admin .sw-navbar-brand-icon { background: rgba(255,255,255,0.12); }
.sw-navbar--admin .sw-nav-hamburger { border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: #fff; }
.sw-navbar--admin .sw-nav-hamburger:hover { background: rgba(255,255,255,0.15); }
.sw-navbar--admin .sw-nav-link { color: rgba(255,255,255,0.7); }
.sw-navbar--admin .sw-nav-link:hover { color: #fff; background: rgba(255,255,255,0.1); }
.sw-navbar--admin .sw-nav-link--active { color: #fff; background: rgba(255,255,255,0.15); font-weight: var(--weight-semibold); }
.sw-navbar--admin .sw-nav-link--signout { border-left-color: rgba(255,255,255,0.15); }
.sw-navbar--admin .sw-nav-mobile { background: var(--neutral-800); border-bottom-color: var(--neutral-900); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.sw-navbar--admin .sw-nav-mobile .sw-nav-link { color: rgba(255,255,255,0.8); }
.sw-navbar--admin .sw-nav-mobile .sw-nav-link:hover { color: #fff; background: rgba(255,255,255,0.1); }
.sw-navbar--admin .sw-nav-mobile .sw-nav-link--signout { border-top-color: rgba(255,255,255,0.15); }

/* ─── SympWatch Inline SVG Icon Base ──────────────────── */
.sw-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.sw-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ─── Extended Touch Targets (< 1024px) ───────────────── */
@media (max-width: 1023px) {
  .sw-nav-link, .symptom-option { min-height: 48px; }
  .member-option { min-height: 64px; }  /* larger for name + sub-label */
}

/* ─── SympWatch Print Override ──────────────────────────── */
@media print {
  .sw-navbar, .sw-footer, .sw-nav-hamburger { display: none !important; }
}

/* ================================================================
   USER PORTAL — LUXURY 2025 PREMIUM COMPONENTS
   ISO/IEC 25010 | ISO/IEC 25002 — Quality Characteristics
   Mobile-First Fluid Responsive Design System
   ================================================================ */

/* ─── Page Wrapper (body offset for mobile bottom nav) ────── */
@media (max-width: 767px) {
  .sw-page-has-bottom-nav { padding-bottom: 72px; }
}

/* ─── Premium Page Header Band ────────────────────────────── */
.sw-pheader {
  background: linear-gradient(135deg, var(--primary-800) 0%, var(--primary-900) 100%);
  padding: var(--space-6) 0 var(--space-5);
  position: relative;
  overflow: hidden;
}
.sw-pheader::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.025' fill-rule='evenodd'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}
.sw-pheader .container { position: relative; z-index: 1; }
.sw-pheader-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255,255,255,0.65);
  margin-bottom: var(--space-2);
}
.sw-pheader-eyebrow svg { opacity: 0.7; }
.sw-pheader-title {
  font-size: clamp(1.375rem, 3.5vw, 2rem);
  font-weight: var(--weight-bold);
  color: #fff;
  margin: 0 0 var(--space-1);
  letter-spacing: -0.02em;
}
.sw-pheader-sub {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.65);
  margin: 0;
  max-width: 600px;
}
.sw-pheader-actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
@media (min-width: 576px) {
  .sw-pheader { padding: var(--space-8) 0 var(--space-6); }
}
@media (min-width: 768px) {
  .sw-pheader { padding: var(--space-10) 0 var(--space-8); }
  .sw-pheader-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
  }
}

/* ─── Mobile Bottom Navigation ────────────────────────────── */
.sw-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,0.97);
  border-top: 1px solid rgba(208,212,232,0.6);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  z-index: var(--z-sticky);
  padding: 0;
  box-shadow: 0 -4px 20px rgba(15,22,48,0.08);
}
@media (max-width: 767px) {
  .sw-bottom-nav { display: flex; }
}
.sw-bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 4px 12px;
  gap: 4px;
  text-decoration: none;
  color: var(--neutral-400);
  font-size: 0.625rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  transition: color var(--transition-fast);
  min-height: 60px;
  position: relative;
}
.sw-bottom-nav-item:hover { color: var(--primary-600); }
.sw-bottom-nav-item.active {
  color: var(--primary-600);
}
.sw-bottom-nav-item.active::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 28px; height: 2px;
  background: var(--primary-600);
  border-radius: 0 0 var(--radius-full) var(--radius-full);
}
.sw-bottom-nav-icon {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
}
.sw-bottom-nav-item.active .sw-bottom-nav-icon {
  background: var(--primary-50);
  border-radius: var(--radius-lg);
  padding: 4px;
  width: 30px; height: 30px;
  margin-bottom: -2px;
}
.sw-bottom-nav-badge {
  position: absolute;
  top: 8px;
  right: calc(50% - 18px);
  background: var(--danger);
  color: #fff;
  border-radius: var(--radius-full);
  font-size: 9px;
  font-weight: var(--weight-bold);
  min-width: 16px;
  height: 16px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  line-height: 1;
  border: 2px solid #fff;
}

/* ─── Luxury Welcome Section ──────────────────────────────── */
.sw-welcome-card {
  background: linear-gradient(135deg, var(--primary-800) 0%, var(--primary-700) 60%, var(--primary-600) 100%);
  border-radius: var(--radius-2xl);
  padding: var(--space-5) var(--space-6);
  color: #fff;
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-5);
}
.sw-welcome-card::before {
  content: '';
  position: absolute;
  top: -30%; right: -10%;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  pointer-events: none;
}
.sw-welcome-card::after {
  content: '';
  position: absolute;
  bottom: -20%; right: 15%;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: rgba(255,255,255,0.03);
  pointer-events: none;
}
.sw-welcome-inner { position: relative; z-index: 1; }
.sw-welcome-greeting {
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.65);
  margin-bottom: 4px;
}
.sw-welcome-name {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: var(--weight-bold);
  color: #fff;
  margin-bottom: var(--space-1);
  letter-spacing: -0.02em;
}
.sw-welcome-meta {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.6);
}
.sw-welcome-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.12);
}
@media (min-width: 640px) {
  .sw-welcome-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
  }
  .sw-welcome-actions {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    flex-shrink: 0;
  }
}

/* ─── Quick Action Cards ──────────────────────────────────── */
.sw-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
/* ISO/IEC 25010 — Operability: on mobile the burger menu and bottom
   navigation bar already expose every action card function, so the
   duplicated card grid adds visual clutter without adding capability.
   Hiding it declutters the mobile layout and reduces scroll distance.
   ISO/IEC 25002 — Effectiveness: all actions remain fully reachable
   via the burger menu (Profile, Family Members) and the persistent
   bottom navigation bar (Report, My Reports, Announcements, Dashboard),
   so no user workflow path is removed — only redundancy is eliminated. */
@media (max-width: 767px) {
  .sw-action-grid { display: none; }
}
.sw-action-card {
  background: var(--neutral-0);
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  text-align: center;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.sw-action-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--primary-200);
}
.sw-action-card-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-xl);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-1);
  flex-shrink: 0;
}
.sw-action-card-icon--primary {
  background: linear-gradient(135deg, var(--primary-50) 0%, var(--primary-100) 100%);
  color: var(--primary-700);
}
.sw-action-card-icon--success {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  color: #065f46;
}
.sw-action-card-icon--info {
  background: linear-gradient(135deg, #eff3ff 0%, #dce6fd 100%);
  color: var(--primary-700);
}
.sw-action-card-icon--warning {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  color: #92400e;
}
.sw-action-card-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--neutral-500);
}
.sw-action-card-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--neutral-800);
  margin: 0;
}

/* ─── Premium Info Grid (Profile/Detail display) ──────────── */
.sw-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 480px) { .sw-info-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px) { .sw-info-grid { grid-template-columns: 1fr 1fr 1fr; } }
.sw-info-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sw-info-label {
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--neutral-400);
}
.sw-info-value {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--neutral-800);
}

/* ─── Luxury Symptom Selection Cards ──────────────────────── */
.sw-symptom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: var(--space-3);
}
.sw-symptom-card {
  background: var(--neutral-0);
  border: 2px solid var(--neutral-100);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 72px;
}
.sw-symptom-card:hover {
  border-color: var(--primary-300);
  background: var(--primary-50);
  box-shadow: 0 4px 12px rgba(29, 70, 214, 0.1);
}
.sw-symptom-card.selected {
  border-color: var(--primary-500);
  background: var(--primary-50);
  box-shadow: 0 0 0 3px rgba(29, 70, 214, 0.12);
}
.sw-symptom-check {
  width: 38px; height: 38px;
  border-radius: var(--radius-xl);
  background: var(--neutral-100);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}
.sw-symptom-card.selected .sw-symptom-check {
  background: var(--primary-100);
}
.sw-symptom-card.selected .sw-symptom-check svg {
  stroke: var(--primary-700);
}
.sw-symptom-info { flex: 1; min-width: 0; }
.sw-symptom-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--neutral-800);
  margin-bottom: 2px;
}
.sw-symptom-desc {
  font-size: var(--text-xs);
  color: var(--neutral-500);
}
.sd-info-btn {
  position: absolute;
  top: var(--space-2); right: var(--space-2);
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--neutral-200);
  background: var(--neutral-0);
  color: var(--neutral-400);
  font-size: 11px;
  font-weight: var(--weight-bold);
  font-style: italic;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  line-height: 1;
  padding: 0;
}
.sd-info-btn.visible {
  display: flex;
  /* Subtle primary tint signals "tap me for details" before hover.
     ISO/IEC 25010 — Discoverability: latent action made visible. */
  border-color: var(--primary-300);
  color: var(--primary-600);
}
.sd-info-btn:hover {
  background: var(--primary-50);
  border-color: var(--primary-400);
  color: var(--primary-700);
}

/* ── Ping ring — attention indicator on info buttons with detail content ──
   ISO/IEC 25010 — Usability / Discoverability: users notice the interactive
                   cue without interrupting the symptom-selection workflow.
   ISO/IEC 25002 — Effectiveness: health-detail content is found and read.
   Accessibility: animation paused on hover; suppressed for reduced-motion.
   ──────────────────────────────────────────────────────────────────────── */
@keyframes sdInfoPing {
  0%   { transform: scale(1);    opacity: 0.5; }
  65%  { transform: scale(1.85); opacity: 0;   }
  100% { transform: scale(1.85); opacity: 0;   }
}

/* The ring is a separate layer via ::after so it never overlaps the "i" glyph
   and never shifts layout.  inset: -3px keeps it just outside the border box. */
.sd-info-btn.visible::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--primary-400);
  animation: sdInfoPing 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none;
}

/* Pause ring when the user hovers — they have found the button */
.sd-info-btn.visible:hover::after {
  animation-play-state: paused;
}

/* ISO/IEC 25010 — Accessibility: respect reduced-motion OS setting */
@media (prefers-reduced-motion: reduce) {
  .sd-info-btn.visible::after { animation: none; }
}

/* ─── Member Selection Cards ───────────────────────────────── */
.sw-member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: var(--space-3);
}
.sw-member-card {
  background: var(--neutral-0);
  border: 2px solid var(--neutral-100);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.sw-member-card:hover { border-color: var(--primary-300); box-shadow: var(--shadow-sm); }
.sw-member-card.selected {
  border-color: var(--primary-500);
  background: var(--primary-50);
  box-shadow: 0 0 0 3px rgba(29,70,214,0.12);
}
.sw-member-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--neutral-100);
  color: var(--neutral-500);
}
.sw-member-card.selected .sw-member-avatar {
  background: var(--primary-100);
  color: var(--primary-700);
}
.sw-member-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--neutral-800);
}
.sw-member-rel {
  font-size: var(--text-xs);
  color: var(--neutral-500);
}

/* ─── Step Wizard Indicator ────────────────────────────────── */
.sw-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: var(--space-6);
  overflow-x: auto;
  padding-bottom: var(--space-1);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.sw-steps::-webkit-scrollbar { display: none; }
.sw-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.sw-step-num {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
  border: 2px solid var(--neutral-200);
  background: var(--neutral-0);
  color: var(--neutral-400);
  transition: all var(--transition-base);
}
.sw-step-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--neutral-400);
  white-space: nowrap;
  transition: color var(--transition-base);
}
.sw-step--active .sw-step-num {
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(29,70,214,0.14);
}
.sw-step--active .sw-step-label { color: var(--primary-700); font-weight: var(--weight-semibold); }
.sw-step--done .sw-step-num {
  background: #ecfdf5;
  border-color: #059669;
  color: #059669;
}
.sw-step--done .sw-step-label { color: var(--neutral-600); }
.sw-step-line {
  flex: 1;
  height: 2px;
  min-width: 24px;
  background: var(--neutral-200);
  margin: 0 var(--space-1);
  flex-shrink: 0;
}
.sw-step-line--done { background: #059669; }
.sw-step-line--active { background: var(--primary-300); }

/* ─── Announcement Badge in Navbar ────────────────────────── */
.sw-nav-ann-badge {
  position: relative;
  display: inline-flex;
}
.sw-nav-ann-badge::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 8px; height: 8px;
  background: var(--danger);
  border-radius: 50%;
  border: 2px solid #fff;
}

/* ─── Form Section Headers ─────────────────────────────────── */
.sw-form-section {
  background: var(--neutral-0);
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-xs);
}
.sw-form-section-header {
  background: var(--neutral-25);
  border-bottom: 1px solid var(--neutral-100);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.sw-form-section-badge {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--primary-600);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sw-form-section-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--neutral-800);
  margin: 0;
}
.sw-form-section-body { padding: var(--space-4); }
@media (min-width: 576px) { .sw-form-section-body { padding: var(--space-5); } }

/* ─── Premium Form Controls ────────────────────────────────── */
.form-control {
  display: block;
  width: 100%;
  padding: 10px var(--space-3);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--neutral-800);
  background: var(--neutral-0);
  border: 1.5px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.form-control:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(29, 70, 214, 0.12);
}
.form-control::-webkit-input-placeholder { color: var(--neutral-400); }
.form-control::placeholder { color: var(--neutral-400); }
.form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--neutral-700);
  margin-bottom: 6px;
}
.form-text { font-size: var(--text-xs); color: var(--neutral-500); margin-top: 5px; }

/* ─── Premium Data Table ──────────────────────────────────── */
.sw-table-wrapper {
  background: var(--neutral-0);
  border-radius: var(--radius-xl);
  border: 1px solid var(--neutral-100);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.sw-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--neutral-100);
  gap: var(--space-3);
  flex-wrap: wrap;
}
.sw-table-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--neutral-800);
  margin: 0;
}
.sw-table-count {
  font-size: var(--text-xs);
  color: var(--neutral-400);
}

/* ─── Luxury Announcement Cards ───────────────────────────── */
.sw-ann-card {
  background: var(--neutral-0);
  border-radius: var(--radius-xl);
  border: 1px solid var(--neutral-100);
  border-left: 4px solid var(--neutral-300);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  position: relative;
}
.sw-ann-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.sw-ann-card-critical { border-left-color: #dc2626; }
.sw-ann-card-high     { border-left-color: #ea580c; }
.sw-ann-card-medium   { border-left-color: #d97706; }
.sw-ann-card-low      { border-left-color: #059669; }
.sw-ann-card-info     { border-left-color: var(--primary-500); }

/* ─── Stat Cards — Luxury ─────────────────────────────────── */
.sw-stat-card {
  background: var(--neutral-0);
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}
.sw-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.sw-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-600), var(--primary-400));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.sw-stat-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-xl);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
}
.sw-stat-number {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--weight-bold);
  color: var(--neutral-900);
  line-height: 1;
  letter-spacing: -0.02em;
}
.sw-stat-label {
  font-size: 0.6875rem;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: var(--weight-semibold);
  margin-top: var(--space-1);
}

/* ─── Section Headings ─────────────────────────────────────── */
.sw-section-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--neutral-900);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-1);
}
.sw-section-sub {
  font-size: var(--text-sm);
  color: var(--neutral-500);
  margin-bottom: 0;
}

/* ─── Gradient Button Variants ─────────────────────────────── */
.btn-gold {
  background: linear-gradient(135deg, var(--accent-gold) 0%, #d4a44a 100%);
  color: #fff;
  border-color: var(--accent-gold);
  box-shadow: 0 2px 8px rgba(184, 144, 60, 0.28);
}
.btn-gold:hover {
  background: linear-gradient(135deg, #a07832 0%, var(--accent-gold) 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(184, 144, 60, 0.38);
  transform: translateY(-1px);
}
.btn-white {
  background: rgba(255,255,255,0.95);
  color: var(--primary-800);
  border-color: rgba(255,255,255,0.8);
  font-weight: var(--weight-semibold);
}
.btn-white:hover {
  background: #fff;
  color: var(--primary-700);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.btn-outline-white {
  background: transparent;
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.4);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.7);
  color: #fff;
}

/* ─── Privacy Notice Box ───────────────────────────────────── */
.sw-privacy-box {
  background: linear-gradient(135deg, var(--primary-50) 0%, #eff3ff 100%);
  border: 1px solid var(--primary-200);
  border-left: 4px solid var(--primary-500);
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  padding: var(--space-4) var(--space-5);
}
.sw-privacy-box-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--primary-800);
  margin-bottom: var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.sw-privacy-box-text {
  font-size: var(--text-xs);
  color: var(--neutral-600);
  line-height: var(--leading-relaxed);
  margin: 0;
}
.sw-warning-box {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 4px solid #d97706;
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  padding: var(--space-4) var(--space-5);
}

/* ─── Status Chip ──────────────────────────────────────────── */
.sw-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
.sw-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sw-status-active  { background: #fef2f2; color: #991b1b; }
.sw-status-active::before { background: #dc2626; }
.sw-status-cleared { background: #ecfdf5; color: #065f46; }
.sw-status-cleared::before { background: #059669; }
.sw-status-pending { background: #fffbeb; color: #92400e; }
.sw-status-pending::before { background: #d97706; }

/* ─── Symptom Badges ───────────────────────────────────────── */
.sw-badge-fever         { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.sw-badge-rashes        { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.sw-badge-cough         { background: #eff3ff; color: var(--primary-800); border: 1px solid var(--primary-200); }
.sw-badge-cold          { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.sw-badge-conjunctivitis{ background: #faf5ff; color: #6b21a8; border: 1px solid #e9d5ff; }
.sw-badge-default       { background: var(--neutral-100); color: var(--neutral-700); border: 1px solid var(--neutral-200); }

/* ─── Loading Spinner Centered ─────────────────────────────── */
.sw-loading-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-4);
  gap: var(--space-3);
  color: var(--neutral-500);
  font-size: var(--text-sm);
}
.sw-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--neutral-100);
  border-top-color: var(--primary-500);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

/* ─── Empty State — Luxury ─────────────────────────────────── */
.sw-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-12) var(--space-4);
  gap: var(--space-3);
}
.sw-empty-icon {
  width: 72px; height: 72px;
  border-radius: var(--radius-2xl);
  background: var(--neutral-50);
  display: flex; align-items: center; justify-content: center;
  color: var(--neutral-300);
  margin-bottom: var(--space-2);
}
.sw-empty-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--neutral-700);
  margin: 0;
}
.sw-empty-text {
  font-size: var(--text-sm);
  color: var(--neutral-500);
  max-width: 380px;
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* ─── Responsive Layout Helpers ───────────────────────────── */
.sw-main-content { padding: var(--space-6) 0; }
@media (min-width: 576px)  { .sw-main-content { padding: var(--space-8) 0; } }
@media (min-width: 768px)  { .sw-main-content { padding: var(--space-10) 0; } }

.sw-content-card {
  background: var(--neutral-0);
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.sw-content-card + .sw-content-card { margin-top: var(--space-4); }

/* ─── Fluid Data Grid ──────────────────────────────────────── */
.sw-data-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px)  { .sw-data-grid-2 { grid-template-columns: 1fr 1fr; } }

.sw-data-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 480px)  { .sw-data-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px)  { .sw-data-grid-3 { grid-template-columns: 1fr 1fr 1fr; } }

.sw-data-grid-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (min-width: 640px)  { .sw-data-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px)  { .sw-data-grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* ─── Symbol Detail Modal (sw-sd) ──────────────────────────── */
/*
  ROOT-CAUSE FIX: ghost-click area after fast open→close
  ─────────────────────────────────────────────────────────────
  BUGS FOUND:
  1. .sd-modal was always display:flex — modal body <a> tags remained
     in the hit-test layer the entire time (just translated off-screen).
  2. No pointer-events:none on inactive state — clicks during or after
     the 0.3s close animation still reached modal content.
  3. Desktop (≥576px): inactive modal sat at translate(-50%,-50%)
     scale(0.95) with no opacity:0 — fully opaque & clickable at the
     center of the viewport.
  4. Overlay had no pointer-events:none — could intercept page clicks
     if display:none was deferred by the browser's rendering pipeline.

  FIX STRATEGY (ISO/IEC 25010 — Reliability / ISO/IEC 25002 — Effectiveness):
  • pointer-events:none on all inactive states — zero hit surface when closed.
  • visibility:hidden with delayed transition — element exits the
    accessibility tree and hit-test layer only AFTER transform completes.
  • opacity:0 on desktop inactive state — removes visual remnant.
  • translateY(105%) — extra 5% ensures box-shadow is also off-screen.
*/
.sd-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15,22,48,0.5);
  z-index: var(--z-modal-bg);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  pointer-events: none;    /* no click-interception when hidden */
}
.sd-overlay.active { display: block; pointer-events: auto; }

.sd-modal {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--neutral-0);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  box-shadow: 0 -8px 40px rgba(15,22,48,0.14);
  z-index: var(--z-modal);
  /* 105%: box-shadow also fully off-screen */
  transform: translateY(105%);
  /* visibility delays to 0.3s on close (after slide-down), immediate on open */
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              visibility 0s linear 0.3s;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: none;    /* no interaction while off-screen */
  visibility: hidden;      /* removed from hit-test & accessibility tree */
}
.sd-modal.active {
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  /* visibility becomes visible immediately on open (0s delay) */
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              visibility 0s linear 0s;
}
@media (min-width: 576px) {
  .sd-overlay { display: none; pointer-events: none; }
  .sd-overlay.active { display: block; pointer-events: auto; }
  .sd-modal {
    position: fixed;
    inset: auto;
    bottom: auto; left: 50%; top: 50%;
    /* scale(0.95) + opacity:0 — invisible AND non-interactive at rest */
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    width: min(calc(100vw - 2rem), 560px);
    max-height: 85vh;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    transition: transform 0.25s ease, opacity 0.25s ease,
                visibility 0s linear 0.25s;
  }
  .sd-modal.active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transition: transform 0.25s ease, opacity 0.25s ease,
                visibility 0s linear 0s;
  }
}
.sd-drag-handle {
  width: 36px; height: 4px;
  background: var(--neutral-200);
  border-radius: var(--radius-full);
  margin: var(--space-3) auto var(--space-1);
  flex-shrink: 0;
}
@media (min-width: 576px) { .sd-drag-handle { display: none; } }
.sd-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--neutral-100);
  flex-shrink: 0;
}
.sd-modal-header h5 { margin: 0; font-size: var(--text-base); font-weight: var(--weight-bold); }
.sd-modal-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--neutral-200);
  background: var(--neutral-50);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--neutral-500);
  transition: all var(--transition-fast);
  padding: 0;
}
.sd-modal-close:hover { background: var(--neutral-100); color: var(--neutral-800); }
.sd-modal-body { overflow-y: auto; padding: var(--space-4); -webkit-overflow-scrolling: touch; }
.sd-detail-item { margin-bottom: var(--space-4); }
.sd-detail-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-1);
  display: flex;
  align-items: center;
  gap: 6px;
}
.sd-detail-type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: var(--weight-bold);
  font-style: normal;
}
.type-text  { background: #eff3ff; color: var(--primary-700); }
.type-image { background: #ecfdf5; color: #059669; }
.type-link  { background: #fffbeb; color: #92400e; }
.sd-detail-text {
  font-size: var(--text-sm);
  color: var(--neutral-700);
  line-height: var(--leading-relaxed);
  background: var(--neutral-25);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}
.sd-detail-image img {
  max-width: 100%; max-height: 280px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--neutral-100);
  display: block;
}
.sd-detail-caption {
  font-size: var(--text-xs);
  color: var(--neutral-400);
  margin-top: var(--space-1);
  text-align: center;
}
.sd-detail-link a {
  color: var(--primary-600);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ─── Image Lightbox — in-page full-screen viewer ───────────────────────
   ISO/IEC 25010 — Usability: images viewed without leaving the page;
                   Accessibility: ESC and backdrop click to dismiss.
   ISO/IEC 25002 — Effectiveness: health-literacy context is preserved;
                   no navigation disruption between symptom selection
                   and the detail panel.
   ─────────────────────────────────────────────────────────────────────── */

/* Clickable thumbnail trigger inside the symptom-detail modal */
.sd-img-trigger {
  display: block;
  background: none;
  border: none;
  padding: 0;
  cursor: zoom-in;
  width: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  line-height: 0;        /* remove inline gap beneath the <img> */
}
.sd-img-trigger img {
  max-width: 100%;
  max-height: 280px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--neutral-100);
  display: block;
  transition: opacity 0.15s, transform 0.15s;
  cursor: zoom-in;
}
.sd-img-trigger:hover img,
.sd-img-trigger:focus img {
  opacity: 0.85;
  transform: scale(1.015);
  outline: none;
}

/* Full-screen lightbox overlay */
.sd-lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1070;                        /* above sd-modal (1050) and tooltip (1060) */
  background: rgba(0, 0, 0, 0.92);
  pointer-events: none;
  align-items: center;
  justify-content: center;
}
.sd-lightbox-overlay.active {
  display: flex;
  pointer-events: auto;
}

/* Flex column centred inside the overlay */
.sd-lightbox-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 56px 16px 24px;
  box-sizing: border-box;
}

/* The displayed image */
.sd-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: calc(100svh - 120px);    /* svh: safe area on mobile */
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55);
  pointer-events: none;                /* prevent drag-select */
  user-select: none;
  -webkit-user-select: none;
}

/* Optional caption below the image */
.sd-lightbox-caption {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  max-width: 480px;
  line-height: 1.5;
}

/* Close button — fixed top-right inside the overlay */
.sd-lightbox-close {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 1071;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 0;
}
.sd-lightbox-close:hover,
.sd-lightbox-close:focus {
  background: rgba(255, 255, 255, 0.28);
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: 2px;
}
.sd-lightbox-close svg { pointer-events: none; }

@media (max-width: 479px) {
  .sd-lightbox-inner  { padding: 48px 8px 20px; }
  .sd-lightbox-img    { max-height: calc(100svh - 100px); }
  .sd-lightbox-close  { top: 8px; right: 10px; width: 36px; height: 36px; }
}

/* ─── Landing Page — Tracked Symptom Cards ─────────────────── */
.sw-tracked-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (min-width: 480px) { .sw-tracked-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .sw-tracked-grid { grid-template-columns: repeat(5, 1fr); } }
.sw-tracked-card {
  background: var(--neutral-0);
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  text-align: center;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-xs);
}
.sw-tracked-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.sw-tracked-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--space-3);
}
.sw-tracked-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--neutral-800);
  margin-bottom: 4px;
}
.sw-tracked-desc {
  font-size: var(--text-xs);
  color: var(--neutral-500);
  line-height: 1.5;
}

/* ─── How It Works Steps ───────────────────────────────────── */
.sw-how-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) { .sw-how-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px) { .sw-how-grid { grid-template-columns: 1fr 1fr 1fr; } }
.sw-how-card {
  background: var(--neutral-0);
  border: 1px solid var(--neutral-100);
  border-radius: var(--radius-2xl);
  padding: var(--space-5) var(--space-5);
  box-shadow: var(--shadow-xs);
  position: relative;
}
.sw-how-step-num {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--primary-50);
  border: 2px solid var(--primary-200);
  color: var(--primary-700);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
}
.sw-how-title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--neutral-800);
  margin-bottom: var(--space-2);
}
.sw-how-text {
  font-size: var(--text-sm);
  color: var(--neutral-600);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* ─── Landing Page CTA Section ─────────────────────────────── */
.sw-cta-section {
  background: linear-gradient(135deg, var(--primary-900) 0%, var(--primary-800) 100%);
  padding: var(--space-12) 0;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.sw-cta-section::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.02' fill-rule='evenodd'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/svg%3E");
}
.sw-cta-section .container { position: relative; z-index: 1; }
.sw-cta-title {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: var(--weight-bold);
  color: #fff;
  margin-bottom: var(--space-3);
  letter-spacing: -0.02em;
}
.sw-cta-subtitle {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.72);
  max-width: 480px;
  margin: 0 auto var(--space-6);
  line-height: var(--leading-relaxed);
}
.sw-cta-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* ─── Responsive Additions ─────────────────────────────────── */
@media (max-width: 359px) {
  .sw-form-section-body { padding: var(--space-3); }
  .sw-pheader { padding: var(--space-4) 0 var(--space-3); }
  .sw-welcome-card { padding: var(--space-4); }
}
@media (min-width: 1400px) {
  .container { max-width: 1320px; }
}
@media (min-width: 1920px) {
  .container { max-width: 1680px; }
  .sw-data-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
 * DEACTIVATE ACCOUNT — Danger Zone Component
 * ISO/IEC 25010 — Operability: visually distinct danger zone
 *                  prevents accidental interaction.
 * ISO/IEC 25010 — Security: two-step flow + password confirm.
 * ISO/IEC 25002 — Transparency: consequences explained upfront.
 * ISO/IEC 25002 — Accountability: destructive action is guarded.
 * ============================================================ */
.sw-danger-zone {
  margin-top: clamp(1.5rem, 4vw, 2rem);
  border: 1.5px solid #fecaca;
  border-radius: var(--radius-xl);
  background: #fff8f8;
  overflow: hidden;
}
.sw-danger-zone-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background: #fef2f2;
  border-bottom: 1px solid #fecaca;
}
.sw-danger-zone-icon {
  color: #dc2626;
  flex-shrink: 0;
}
.sw-danger-zone-title {
  font-size: 11px;
  font-weight: 700;
  color: #b91c1c;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.sw-danger-zone-body {
  padding: clamp(0.875rem, 3vw, 1.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.sw-deactivate-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sw-deactivate-desc {
  font-size: var(--text-sm);
  color: var(--neutral-700);
  margin: 0;
  line-height: 1.55;
}
.sw-deactivate-desc strong {
  color: #b91c1c;
}
.sw-deactivate-list {
  margin: 0;
  padding-left: 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.sw-deactivate-list li {
  font-size: var(--text-xs);
  color: var(--neutral-600);
  line-height: 1.5;
}
/* Trigger button — shown by default, hidden when form opens */
.sw-deactivate-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.875rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: #dc2626;
  background: #fff;
  border: 1.5px solid #fca5a5;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  width: 100%;
  justify-content: center;
}
.sw-deactivate-trigger:hover,
.sw-deactivate-trigger:focus-visible {
  background: #fef2f2;
  border-color: #f87171;
  color: #b91c1c;
  outline: none;
}
/* Deactivate form */
.sw-deactivate-form {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.sw-deactivate-pw-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  position: relative;
}
.sw-deactivate-pw-row .form-control {
  flex: 1;
  min-width: 0;
  border-color: #fca5a5;
  padding-right: 2.75rem;
}
.sw-deactivate-pw-row .form-control:focus {
  border-color: #f87171;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.12);
}
/* Password visibility toggle */
.sw-pw-toggle {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--neutral-400);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: color 0.15s;
  padding: 0;
  flex-shrink: 0;
}
.sw-pw-toggle:hover { color: var(--neutral-700); }
/* Status message */
.sw-deactivate-status {
  font-size: var(--text-xs);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  line-height: 1.45;
}
.sw-deactivate-status--error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.sw-deactivate-status--success {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}
/* Action buttons row */
.sw-deactivate-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
/* The confirm/destructive button */
.sw-btn-deactivate {
  background: #dc2626;
  color: #fff;
  border: none;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  transition: background 0.15s, opacity 0.15s;
}
.sw-btn-deactivate:hover:not(:disabled) { background: #b91c1c; }
.sw-btn-deactivate:focus-visible { outline: 2px solid #dc2626; outline-offset: 2px; }
.sw-btn-deactivate:disabled { opacity: 0.6; cursor: not-allowed; }

/* ============================================================
 * FLUID LAYOUT & RESPONSIVE SYSTEM IMPROVEMENTS
 * ISO/IEC 25010 — Adaptability: system functions across all
 *   viewport sizes from 320 px mobile to 2560 px widescreen.
 * ISO/IEC 25010 — Operability: consistent UX at every breakpoint.
 * ISO/IEC 25002 — Effectiveness: key content never hidden or
 *   clipped — fluid layout prevents information loss.
 *
 * Breakpoints used (mobile-first):
 *   xs  < 400 px  — compact phones (SE, Galaxy A)
 *   sm  ≥ 480 px  — large phones (iPhone Pro Max, Pixel 9)
 *   md  ≥ 640 px  — large phones landscape / small tablets
 *   lg  ≥ 768 px  — tablets portrait (iPad mini)
 *   xl  ≥ 1024 px — tablets landscape / small laptops
 *   2xl ≥ 1280 px — desktops
 *   3xl ≥ 1536 px — wide desktops
 * ============================================================ */

/* ── Base fluid container ── */
.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 1.5rem);
}

/* ── Fluid typography scale (clamp) ──
   Headlines scale smoothly between smallest and largest viewport
   without relying on a stack of discrete media-query overrides.
   ISO/IEC 25002 — Readability: font sizes are proportional to the
   reading distance implied by the device form factor. */
h1 { font-size: clamp(1.375rem, 5vw + 0.5rem, 2.5rem); }
h2 { font-size: clamp(1.125rem, 3.5vw + 0.25rem, 1.875rem); }
h3 { font-size: clamp(1rem,    2.5vw + 0.25rem, 1.375rem); }
h4 { font-size: clamp(0.9375rem, 2vw + 0.25rem, 1.125rem); }

/* ── Page header — fluid spacing ── */
.sw-pheader {
  padding-block: clamp(0.875rem, 3vw, 1.5rem);
}
.sw-pheader-title {
  font-size: clamp(1.125rem, 3.5vw, 1.5rem);
  line-height: 1.25;
}
.sw-pheader-sub {
  font-size: clamp(0.8125rem, 2vw, 0.9375rem);
}

/* ── Action grid — fluid columns ── */
.sw-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: clamp(0.625rem, 2vw, 1rem);
}

/* ── Info grid — fluid columns ── */
.sw-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: clamp(0.5rem, 2vw, 0.75rem);
}

/* ── Stat cards ── */
.sw-stat-card {
  padding: clamp(0.875rem, 3vw, 1.25rem);
}

/* ── Form section body ── */
.sw-form-section-body {
  padding: clamp(0.875rem, 3vw, 1.5rem);
}

/* ── Content card ── */
.sw-content-card {
  padding: clamp(1rem, 3.5vw, 1.75rem);
  border-radius: var(--radius-xl);
}

/* ── Bottom nav spacing ── */
.sw-page-has-bottom-nav {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 68px);
}
.sw-bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Panel width — fluid across breakpoints ──
   Panels slide in from the right; width scales with viewport
   so they never feel too cramped (mobile) or too wide (desktop).
   ISO/IEC 25010 — Operability: consistent panel usability at all sizes.
   ISO/IEC 25002 — Effectiveness: content readable at every breakpoint. */
.fm-panel,
.prof-panel {
  /* fluid: 100vw on mobile, up to 520/600px on desktop */
  width: min(100vw, 520px);
}
.prof-panel {
  width: min(100vw, 600px);
}

/* ── Card grids — auto-fit for balanced layout ── */
.sw-data-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: clamp(0.75rem, 2.5vw, 1.25rem);
}
.sw-data-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: clamp(0.75rem, 2.5vw, 1.25rem);
}

/* ── Navbar ── */
.sw-navbar {
  padding-block: clamp(0.25rem, 0.8vw, 0.375rem);
}

/* ── Table wrapper ── */
.sw-table-wrapper {
  border-radius: var(--radius-xl);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sw-table-wrapper table {
  min-width: 500px;
}

/* ─────────────────────────────────────────────────────────────
 * BREAKPOINTS
 * ───────────────────────────────────────────────────────────── */

/* xs — compact phones ≤ 399 px */
@media (max-width: 399px) {
  .sw-form-section-body { padding: 0.75rem; }
  .sw-pheader { padding-block: 0.75rem; }
  .sw-action-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .sw-data-grid-2,
  .sw-data-grid-3 { grid-template-columns: 1fr; }
  .sw-stat-card { padding: 0.75rem; }
  .sw-content-card { padding: 0.875rem; }
  .fm-panel,
  .prof-panel { width: 100vw; }
  .prof-edit-grid { grid-template-columns: 1fr; }
  .sw-deactivate-actions { flex-direction: column; }
  .sw-btn-deactivate { flex: unset; width: 100%; }
}

/* sm — large phones 400 px – 639 px */
@media (min-width: 400px) and (max-width: 639px) {
  .sw-action-grid { grid-template-columns: repeat(2, 1fr); }
  .sw-data-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .sw-data-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .fm-panel,
  .prof-panel { width: 100vw; }
}

/* md — large phones landscape / small tablets 640 px – 767 px */
@media (min-width: 640px) and (max-width: 767px) {
  .sw-action-grid { grid-template-columns: repeat(3, 1fr); }
  .sw-data-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .sw-data-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .fm-panel  { width: min(100vw, 460px); }
  .prof-panel{ width: min(100vw, 520px); }
}

/* lg — tablets portrait 768 px – 1023 px */
@media (min-width: 768px) and (max-width: 1023px) {
  .sw-action-grid { grid-template-columns: repeat(4, 1fr); }
  .sw-data-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .fm-panel  { width: 480px; }
  .prof-panel{ width: 540px; }
  .sw-pheader-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

/* xl — tablets landscape / small laptops 1024 px – 1279 px */
@media (min-width: 1024px) and (max-width: 1279px) {
  .sw-action-grid { grid-template-columns: repeat(4, 1fr); }
  .fm-panel  { width: 500px; }
  .prof-panel{ width: 560px; }
}

/* 2xl — desktops 1280 px – 1535 px */
@media (min-width: 1280px) {
  .sw-action-grid { grid-template-columns: repeat(4, 1fr); }
  .fm-panel  { width: 520px; }
  .prof-panel{ width: 600px; }
}

/* 3xl — wide desktops ≥ 1536 px */
@media (min-width: 1536px) {
  .container { max-width: 1480px; }
  .sw-data-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ── Bottom nav hidden on desktop ── */
@media (min-width: 768px) {
  .sw-bottom-nav { display: none !important; }
  .sw-page-has-bottom-nav { padding-bottom: 0; }
}

/* ── Profile panel edit grid — always 2 col on md+ ── */
@media (min-width: 480px) {
  .prof-edit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .prof-span-full { grid-column: 1 / -1; }
}

/* ── Family member edit grid — always 2 col on md+ ── */
@media (min-width: 480px) {
  .fm-edit-grid  { grid-template-columns: repeat(2, 1fr); }
  .fm-card-grid  { grid-template-columns: repeat(2, 1fr); }
  .fm-detail-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ── Announcement + symptom cards ── */
.sw-ann-card {
  padding: clamp(0.875rem, 3vw, 1.25rem);
}
.sw-symptom-card {
  padding: clamp(0.625rem, 2vw, 1rem);
  display: flex;
  align-items: flex-start;
  gap: clamp(0.5rem, 2vw, 0.875rem);
}
.sw-symptom-card .sw-symptom-check {
  flex-shrink: 0;
  width: clamp(18px, 5vw, 22px);
  height: clamp(18px, 5vw, 22px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMMUNITY HEALTH NOTICE (CHN) MODAL
   Mobile-first fluid layout — ISO/IEC 25010 (Usability, Accessibility)
   ISO/IEC 25002 — Data Integrity: residency gate before registration.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Backdrop --- */
.chn-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(0.75rem, 4vw, 1.5rem);
  overflow-y: auto;
  /* Smooth entrance */
  animation: chn-fade-in 0.18s ease both;
}

@keyframes chn-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Modal Card --- */
.chn-modal {
  background: var(--neutral-0, #ffffff);
  border-radius: clamp(8px, 2vw, 14px);
  box-shadow:
    0 4px 6px -1px rgba(0,0,0,0.10),
    0 10px 15px -3px rgba(0,0,0,0.10),
    0 25px 50px -12px rgba(0,0,0,0.25);
  width: 100%;
  max-width: 680px;
  /* Grow to content on small screens, cap height on large */
  max-height: calc(100dvh - clamp(1.5rem, 8vw, 3rem));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: chn-slide-up 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
  margin: auto;
}

@keyframes chn-slide-up {
  from { opacity: 0; transform: translateY(clamp(12px, 4vw, 20px)); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Modal Header --- */
.chn-header {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.625rem, 2vw, 1rem);
  padding: clamp(1rem, 4vw, 1.5rem) clamp(1rem, 4vw, 1.5rem) clamp(0.875rem, 3vw, 1.25rem);
  background: linear-gradient(135deg, var(--primary-600, #2563eb), var(--primary-700, #1d4ed8));
  color: #ffffff;
  flex-shrink: 0;
}

.chn-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(36px, 8vw, 44px);
  height: clamp(36px, 8vw, 44px);
  background: rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.chn-header-text {
  flex: 1;
  min-width: 0;
}

.chn-title {
  font-size: clamp(1rem, 3.5vw, 1.25rem);
  font-weight: var(--weight-bold, 700);
  color: #ffffff;
  margin: 0 0 0.125rem 0;
  line-height: 1.3;
}

.chn-subtitle {
  font-size: clamp(0.6875rem, 2.5vw, 0.8125rem);
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  line-height: 1.4;
}

.chn-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
  margin-top: 0.125rem;
}

.chn-close-btn:hover,
.chn-close-btn:focus-visible {
  background: rgba(255, 255, 255, 0.28);
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 1px;
}

/* --- Modal Body (scrollable) --- */
.chn-body {
  flex: 1;
  overflow-y: auto;
  padding: clamp(1rem, 4vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.875rem, 3vw, 1.25rem);
  /* Smooth momentum scrolling on iOS */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Custom scrollbar (modern browsers) */
.chn-body::-webkit-scrollbar        { width: 6px; }
.chn-body::-webkit-scrollbar-track  { background: var(--neutral-50, #f8fafc); }
.chn-body::-webkit-scrollbar-thumb  { background: var(--neutral-200, #e2e8f0); border-radius: 3px; }
.chn-body::-webkit-scrollbar-thumb:hover { background: var(--neutral-300, #cbd5e1); }

/* --- Content Sections --- */
.chn-section {
  padding: clamp(0.875rem, 3vw, 1.125rem);
  background: var(--neutral-50, #f8fafc);
  border-radius: 8px;
  border: 1px solid var(--neutral-100, #f1f5f9);
}

.chn-section-warning {
  background: #fffbeb;
  border-color: #fde68a;
}

.chn-section-consent {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.chn-section-header {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 0.75rem);
  margin-bottom: clamp(0.5rem, 2vw, 0.75rem);
}

.chn-section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  flex-shrink: 0;
}

.chn-icon-primary {
  background: var(--primary-100, #dbeafe);
  color: var(--primary-700, #1d4ed8);
}

.chn-icon-blue {
  background: #e0f2fe;
  color: #0369a1;
}

.chn-icon-warning {
  background: #fef3c7;
  color: #92400e;
}

.chn-icon-green {
  background: #dcfce7;
  color: #15803d;
}

.chn-section-title {
  font-size: clamp(0.8125rem, 2.5vw, 0.9375rem);
  font-weight: var(--weight-semibold, 600);
  color: var(--neutral-900, #0f172a);
  margin: 0;
  line-height: 1.35;
}

.chn-section-body {
  font-size: clamp(0.75rem, 2.2vw, 0.875rem);
  color: var(--neutral-700, #334155);
  line-height: 1.65;
  margin: 0;
}

/* --- ZIP Verification Block --- */
.chn-verify-block {
  border: 2px solid var(--primary-200, #bfdbfe);
  border-radius: 10px;
  padding: clamp(1rem, 4vw, 1.375rem);
  background: linear-gradient(135deg, #f0f7ff, #eff6ff);
}

.chn-verify-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  font-weight: var(--weight-bold, 700);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--primary-700, #1d4ed8);
  margin-bottom: clamp(0.5rem, 2vw, 0.75rem);
}

.chn-verify-question {
  font-size: clamp(0.8125rem, 2.5vw, 0.9375rem);
  color: var(--neutral-800, #1e293b);
  margin: 0 0 clamp(0.75rem, 3vw, 1rem) 0;
  line-height: 1.55;
}

.chn-verify-input-row {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.chn-zip-label {
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold, 600);
  color: var(--neutral-700, #334155);
  display: block;
}

.chn-zip-input {
  width: 100%;
  max-width: 240px;
  padding: clamp(0.5rem, 2vw, 0.625rem) clamp(0.75rem, 2vw, 0.875rem);
  font-size: clamp(0.875rem, 2.5vw, 1rem);
  font-weight: var(--weight-semibold, 600);
  color: var(--neutral-900, #0f172a);
  background: #ffffff;
  border: 2px solid var(--neutral-200, #e2e8f0);
  border-radius: 7px;
  outline: none;
  letter-spacing: 0.1em;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.chn-zip-input:focus {
  border-color: var(--primary-500, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.chn-zip-input--error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.13) !important;
}

.chn-zip-input--ok {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.13) !important;
}

.chn-zip-hint {
  font-size: 0.6875rem;
  color: var(--neutral-400, #94a3b8);
  margin: 0;
  line-height: 1.45;
}

.chn-zip-error {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  font-size: 0.8125rem;
  color: #b91c1c;
  line-height: 1.45;
  max-width: 440px;
}

.chn-zip-error svg {
  flex-shrink: 0;
  margin-top: 1px;
}

/* --- Modal Footer --- */
.chn-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(0.5rem, 2vw, 0.75rem);
  padding: clamp(0.875rem, 3vw, 1.125rem) clamp(1rem, 4vw, 1.5rem);
  border-top: 1px solid var(--neutral-100, #f1f5f9);
  background: var(--neutral-0, #ffffff);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.chn-footer .btn {
  min-width: clamp(80px, 22vw, 120px);
}

/* Proceed button icon + text alignment */
.chn-footer .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* ── Responsive: full-width buttons below 400px ── */
@media (max-width: 399px) {
  .chn-footer {
    flex-direction: column-reverse;
  }
  .chn-footer .btn {
    width: 100%;
    justify-content: center;
    min-width: 0;
  }
  .chn-zip-input {
    max-width: 100%;
  }
}

/* ── Tablet: slightly more spacious modal ── */
@media (min-width: 600px) {
  .chn-backdrop {
    align-items: center;
    padding: 1.5rem;
  }
  .chn-modal {
    max-height: calc(100dvh - 3rem);
  }
}

/* ── Desktop: cap modal width, centre vertically ── */
@media (min-width: 768px) {
  .chn-backdrop {
    align-items: center;
    padding: 2rem;
  }
}

/* Prevent body scroll when modal is open — toggled via JS class */
body.chn-open {
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHONE NUMBER INPUT — Philippine format validation UI
   Mobile-first fluid layout — ISO/IEC 25010 (Operability, Functional Correctness)
   ISO/IEC 25002 — Data Integrity: visual states communicate validity clearly.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Wrapper: prefix badge + input side by side */
.phone-input-wrap {
  display: flex;
  align-items: stretch;
  border: 2px solid var(--neutral-200, #e2e8f0);
  border-radius: 7px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: #ffffff;
}

.phone-input-wrap:focus-within {
  border-color: var(--primary-500, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.13);
}

/* Country prefix badge */
.phone-prefix {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0 clamp(0.625rem, 2vw, 0.875rem);
  background: var(--neutral-50, #f8fafc);
  border-right: 2px solid var(--neutral-200, #e2e8f0);
  color: var(--neutral-600, #475569);
  font-size: clamp(0.6875rem, 2vw, 0.8125rem);
  font-weight: var(--weight-semibold, 600);
  white-space: nowrap;
  user-select: none;
  flex-shrink: 0;
  line-height: 1;
  letter-spacing: 0.03em;
}

/* Input field inside wrapper — remove its own border/radius */
.phone-input-field {
  flex: 1;
  min-width: 0;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: clamp(0.5rem, 2vw, 0.625rem) clamp(0.75rem, 2vw, 0.875rem);
  font-size: clamp(0.875rem, 2.5vw, 1rem);
  font-weight: var(--weight-semibold, 600);
  color: var(--neutral-900, #0f172a);
  background: transparent;
  letter-spacing: 0.04em;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.phone-input-field::placeholder {
  font-weight: var(--weight-normal, 400);
  letter-spacing: 0.02em;
  color: var(--neutral-300, #cbd5e1);
}

/* --- Validation states applied on the wrapper --- */

/* Error state */
.phone-input-wrap:has(.phone-input--error) {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.phone-input-wrap:has(.phone-input--error) .phone-prefix {
  border-right-color: #ef4444;
  background: #fef2f2;
  color: #b91c1c;
}

/* Valid state */
.phone-input-wrap:has(.phone-input--ok) {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}

.phone-input-wrap:has(.phone-input--ok) .phone-prefix {
  border-right-color: #22c55e;
  background: #f0fdf4;
  color: #15803d;
}

/* Fallback for browsers without :has() — state on the input itself */
.phone-input--error {
  /* border already handled via wrapper :has(), this is the fallback */
  background: #fff5f5 !important;
}

.phone-input--ok {
  background: #f6fff8 !important;
}

/* --- Inline error message --- */
.phone-error {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  margin-top: 0.3rem;
  padding: 0.375rem 0.625rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 5px;
  font-size: clamp(0.6875rem, 2vw, 0.8125rem);
  color: #b91c1c;
  line-height: 1.45;
}

.phone-error svg {
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── phone status line (pending / available) ──────────────────────────────
   ISO/IEC 25010 — Operability: distinct pending and ok states give the user
     an unambiguous signal about the current availability check progress.
   ISO/IEC 25010 — Accessibility: role="status" + aria-live="polite" ensure
     screen readers announce state changes without interrupting the user.
   ISO/IEC 25002 — Functional Correctness: ok state only shown after the
     server confirms the phone number is not already in use.
   ────────────────────────────────────────────────────────────────────────── */
.phone-status {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.3rem;
  font-size: clamp(0.6875rem, 2vw, 0.8125rem);
  line-height: 1.45;
}

.phone-status--pending {
  color: #6b7280;
}

.phone-status--ok {
  color: #15803d;
  font-weight: 500;
}

.phone-status--ok svg {
  stroke: #15803d;
  flex-shrink: 0;
}

.phone-status--pending svg {
  flex-shrink: 0;
}

@keyframes phone-status-spin {
  to { transform: rotate(360deg); }
}

.phone-status-spin {
  animation: phone-status-spin 0.8s linear infinite;
  transform-origin: center;
}

/* ── Responsive: on very narrow screens the prefix collapses to icon only ── */
@media (max-width: 360px) {
  .phone-prefix {
    padding: 0 0.5rem;
    font-size: 0;        /* hide "PH" text */
    gap: 0;
  }
  .phone-prefix svg {
    display: block;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EMAIL ADDRESS INPUT — validation UI
   Mirrors the phone-input pattern for visual consistency.
   ISO/IEC 25010 — Operability, Functional Correctness
   ISO/IEC 25002 — Data Integrity
   ═══════════════════════════════════════════════════════════════════════════ */

.email-input-wrap {
  display: flex;
  align-items: stretch;
  border: 2px solid var(--neutral-200, #e2e8f0);
  border-radius: 7px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: #ffffff;
}

.email-input-wrap:focus-within {
  border-color: var(--primary-500, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.13);
}

.email-prefix {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(0.625rem, 2vw, 0.875rem);
  background: var(--neutral-50, #f8fafc);
  border-right: 2px solid var(--neutral-200, #e2e8f0);
  color: var(--neutral-500, #64748b);
  flex-shrink: 0;
  user-select: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.email-input-field {
  flex: 1;
  min-width: 0;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: clamp(0.5rem, 2vw, 0.625rem) clamp(0.75rem, 2vw, 0.875rem);
  font-size: clamp(0.875rem, 2.5vw, 1rem);
  color: var(--neutral-900, #0f172a);
  background: transparent;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.email-input-field::placeholder {
  color: var(--neutral-300, #cbd5e1);
  font-weight: var(--weight-normal, 400);
}

/* --- Error state --- */
.email-input-wrap:has(.email-input--error) {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.email-input-wrap:has(.email-input--error) .email-prefix {
  border-right-color: #ef4444;
  background: #fef2f2;
  color: #b91c1c;
}

/* --- Valid state --- */
.email-input-wrap:has(.email-input--ok) {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}

.email-input-wrap:has(.email-input--ok) .email-prefix {
  border-right-color: #22c55e;
  background: #f0fdf4;
  color: #15803d;
}

/* Fallback for browsers without :has() support */
.email-input--error { background: #fff5f5 !important; }
.email-input--ok    { background: #f6fff8 !important; }

/* --- Inline error message --- */
.email-error {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  margin-top: 0.3rem;
  padding: 0.375rem 0.625rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 5px;
  font-size: clamp(0.6875rem, 2vw, 0.8125rem);
  color: #b91c1c;
  line-height: 1.45;
}

.email-error svg {
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── email status line (pending / available) ──────────────────────────────
   ISO/IEC 25010 — Operability: distinct pending and ok states give the user
     an unambiguous signal about the current availability check progress.
   ISO/IEC 25010 — Accessibility: role="status" + aria-live="polite" ensure
     screen readers announce state changes without interrupting the user.
   ISO/IEC 25002 — Functional Correctness: ok state only shown after the
     server confirms the email is not already in use.
   ────────────────────────────────────────────────────────────────────────── */
.email-status {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.3rem;
  font-size: clamp(0.6875rem, 2vw, 0.8125rem);
  line-height: 1.45;
}

.email-status--pending {
  color: #6b7280;
}

.email-status--ok {
  color: #15803d;
  font-weight: 500;
}

.email-status--ok svg {
  stroke: #15803d;
  flex-shrink: 0;
}

.email-status--pending svg {
  flex-shrink: 0;
}

@keyframes email-status-spin {
  to { transform: rotate(360deg); }
}

.email-status-spin {
  animation: email-status-spin 0.8s linear infinite;
  transform-origin: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   USERNAME INPUT — real-time availability + format validation
   ISO/IEC 25010 — Operability: status icon + colour-coded border give
     immediate, unambiguous feedback without requiring screen-reader text.
   ISO/IEC 25010 — Adaptability: clamp() sizing adapts from 320 px upward.
   ISO/IEC 25002 — Data Integrity: visual states reflect server-authoritative
     availability so the resident cannot submit a taken username silently.
   ═══════════════════════════════════════════════════════════════════════════ */

.uname-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.uname-input-field {
  flex: 1;
  padding-right: clamp(2rem, 8vw, 2.5rem);
}

.uname-status-icon {
  position: absolute;
  right: clamp(0.5rem, 2vw, 0.75rem);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  line-height: 1;
}

/* ── wrapper error state ── */
.uname-wrap--error .uname-input-field {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,.15);
}

/* ── wrapper ok state ── */
.uname-wrap--ok .uname-input-field {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.15);
}

/* ── wrapper pending state ── */
.uname-wrap--pending .uname-input-field {
  border-color: #9ca3af;
}

/* ── :has() progressively enhanced wrapper states (no-JS-fallback friendly) ── */
@supports selector(:has(*)) {
  .uname-input-wrap:has(.uname-input--error) .uname-input-field {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,.15);
  }
  .uname-input-wrap:has(.uname-input--ok) .uname-input-field {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,.15);
  }
}

/* ── status line (pending / available) ── */
.uname-status {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.3rem;
  font-size: clamp(0.6875rem, 2vw, 0.8125rem);
  line-height: 1.45;
}

.uname-status--pending {
  color: #6b7280;
}

.uname-status--ok {
  color: #15803d;
  font-weight: 500;
}

/* ── error line ── */
.uname-error {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  margin-top: 0.3rem;
  padding: 0.375rem 0.625rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 5px;
  font-size: clamp(0.6875rem, 2vw, 0.8125rem);
  color: #b91c1c;
  line-height: 1.45;
}

.uname-error svg {
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── spinner keyframes (shared with phone/email if already defined; safe to duplicate) ── */
@keyframes uname-spin {
  to { transform: rotate(360deg); }
}

.uname-spin {
  animation: uname-spin 0.8s linear infinite;
  transform-origin: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PASSWORD INPUT — show/hide toggle + strength meter + validation states
   CONFIRM PASSWORD — match validation states
   ISO/IEC 25010 — Operability: colour-coded borders and labelled strength
     bar give immediate, unambiguous feedback on password quality and match.
   ISO/IEC 25010 — Adaptability: clamp() sizing scales from 320 px upward;
     the 2-col password grid collapses to a single column on narrow screens.
   ISO/IEC 25002 — Data Integrity: visual error/ok states reinforce that
     both fields must satisfy their constraints before submission proceeds.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── wrapper ── */
.pwd-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.pwd-input-field {
  flex: 1;
  /* Right padding reserves space for the toggle button */
  padding-right: clamp(2.25rem, 9vw, 2.75rem);
}

/* ── show/hide toggle button ── */
.pwd-toggle {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: clamp(2.25rem, 9vw, 2.75rem);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: #6b7280;
  padding: 0;
  border-radius: 0 6px 6px 0;
  transition: color 0.15s;
}

.pwd-toggle:hover,
.pwd-toggle:focus-visible {
  color: #1a3c5e;
  outline: 2px solid #3b82f6;
  outline-offset: -2px;
}

/* ── wrapper error / ok border states ── */
.pwd-wrap--error .pwd-input-field {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,.15);
}

.pwd-wrap--ok .pwd-input-field {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.15);
}

/* ── :has() progressive enhancement ── */
@supports selector(:has(*)) {
  .pwd-input-wrap:has(.pwd-wrap--error) .pwd-input-field {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,.15);
  }
  .pwd-input-wrap:has(.pwd-wrap--ok) .pwd-input-field {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,.15);
  }
}

/* ── strength meter container ── */
.pwd-strength {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

/* ── four-segment bar ── */
.pwd-strength-bar {
  display: flex;
  gap: 3px;
  flex: 1;
}

.pwd-strength-seg {
  height: 4px;
  flex: 1;
  border-radius: 2px;
  background: #e5e7eb;
  transition: background 0.2s;
}

/* Segment active colours per strength level */
.pwd-strength--weak   .pwd-strength-seg--active { background: #ef4444; }
.pwd-strength--fair   .pwd-strength-seg--active { background: #f97316; }
.pwd-strength--good   .pwd-strength-seg--active { background: #eab308; }
.pwd-strength--strong .pwd-strength-seg--active { background: #22c55e; }

/* ── strength label ── */
.pwd-strength-label {
  font-size: clamp(0.6875rem, 1.8vw, 0.75rem);
  font-weight: 600;
  min-width: 3.5rem;
  text-align: right;
  line-height: 1;
}

.pwd-strength--weak   .pwd-strength-label { color: #ef4444; }
.pwd-strength--fair   .pwd-strength-label { color: #f97316; }
.pwd-strength--good   .pwd-strength-label { color: #ca8a04; }
.pwd-strength--strong .pwd-strength-label { color: #15803d; }

/* ── error line (shared by password + confirm) ── */
.pwd-error {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  margin-top: 0.3rem;
  padding: 0.375rem 0.625rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 5px;
  font-size: clamp(0.6875rem, 2vw, 0.8125rem);
  color: #b91c1c;
  line-height: 1.45;
}

.pwd-error svg {
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── ok line (confirm password match) ── */
.pwd-ok {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.3rem;
  font-size: clamp(0.6875rem, 2vw, 0.8125rem);
  font-weight: 500;
  color: #15803d;
  line-height: 1.45;
}

.pwd-ok svg {
  flex-shrink: 0;
  stroke: #15803d;
}

/* ── narrow-screen: stack password + confirm vertically ── */
@media (max-width: 480px) {
  .sw-data-grid-2:has(.pwd-input-wrap) {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REGISTRATION SUBMIT BUTTON — disabled / ready states
   ISO/IEC 25010 — Operability: the greyed-out button with a lock icon and
     explanatory hint text communicates clearly that the form is incomplete,
     preventing confusion about why clicking produces no result.
   ISO/IEC 25010 — Accessibility: reduced opacity and desaturated colour
     signal the disabled state visually; the hint text provides a text
     alternative for assistive technology via aria-live="polite".
   ISO/IEC 25010 — User Error Protection: visual suppression of the button
     discourages premature submission before validation is complete.
   ISO/IEC 25002 — Functional Correctness: the disabled state lifts only
     when all required fields are filled and all async checks report ok,
     ensuring the visual affordance accurately reflects the form's true state.
   ═══════════════════════════════════════════════════════════════════════════ */

#regSubmitBtn:disabled,
#regSubmitBtn[aria-disabled="true"] {
  opacity: 0.52;
  filter: saturate(0.45);
  cursor: not-allowed;
  pointer-events: none;
}

/* Smooth transition when the button becomes enabled so the change is
   noticeable — ISO/IEC 25010 Operability: draws attention to form ready. */
#regSubmitBtn:not(:disabled) {
  transition: opacity 0.25s ease, filter 0.25s ease;
  opacity: 1;
  filter: none;
  cursor: pointer;
  pointer-events: auto;
}

/* ── hint text shown below the button while it is disabled ── */
.reg-submit-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.55rem;
  font-size: clamp(0.6875rem, 1.8vw, 0.8rem);
  color: #6b7280;
  text-align: center;
  line-height: 1.5;
}

.reg-submit-hint svg {
  flex-shrink: 0;
  opacity: 0.75;
}