/* ==========================================================
   CFW 2.1.0 — Unified Civic Water Dashboard Design System
   Visual-only layer: preserves existing PHP, API and data flows.
   ========================================================== */
:root{
  --cfw-blue:#176bc4;
  --cfw-blue-strong:#0d5caf;
  --cfw-blue-deep:#10365f;
  --cfw-ink:#17324f;
  --cfw-muted:#6c8198;
  --cfw-line:#dfe9f3;
  --cfw-bg:#f2f6fb;
  --cfw-surface:#fff;
  --cfw-green:#159764;
  --cfw-amber:#e69a22;
  --cfw-red:#dc4d52;
  --cfw-radius:18px;
  --cfw-shadow:0 8px 26px rgba(21,55,91,.075);
  --cfw-shadow-hover:0 14px 34px rgba(21,55,91,.12);
}
html{scroll-padding-top:92px}
body.cfw-site,body{
  background:
    radial-gradient(ellipse at 10% 0%,rgba(218,235,252,.62),transparent 34rem),
    linear-gradient(180deg,#f7faff 0%,var(--cfw-bg) 52%,#f5f8fc 100%);
  color:var(--cfw-ink);
  font-family:'Sarabun',Tahoma,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{transition:color .16s ease,background .16s ease,border-color .16s ease}
button,input,select,textarea{font-family:inherit}
:focus-visible{outline:3px solid rgba(36,128,220,.32)!important;outline-offset:2px}

/* Global header and navigation */
.site-header{
  position:sticky;
  top:0;
  z-index:1200;
  min-height:72px;
  padding:10px clamp(14px,3vw,42px);
  gap:20px;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid rgba(215,229,243,.9);
  box-shadow:0 5px 22px rgba(20,54,88,.055);
  backdrop-filter:blur(16px);
}
.brand{min-width:230px;gap:12px;color:var(--cfw-blue-deep)}
.brand-mark{
  width:46px;height:46px;border-radius:15px;
  background:linear-gradient(145deg,#2587eb 0%,#0e4d91 100%);
  box-shadow:0 7px 17px rgba(23,107,196,.24);
  font-size:31px;
}
.brand strong{font-size:17px;letter-spacing:.2px}
.brand small{font-size:10px;color:#71859a}
.main-nav{gap:4px;align-items:center}
.main-nav>a,.main-nav .nav-logout{
  min-height:39px;padding:8px 11px;border-radius:11px;
  color:#35516e;font-size:12px;font-weight:750;
}
.main-nav>a:hover,.main-nav .nav-logout:hover{background:#edf5fd;color:var(--cfw-blue);text-decoration:none}
.main-nav>a.active{background:#e8f3ff;color:#1166b9;box-shadow:inset 0 0 0 1px #d5e9fc}
.main-nav>a.nav-rescue-cta{
  background:#fff3f3;color:#c43f46;border:1px solid #f3d3d5;
  box-shadow:none;font-weight:850;
}
.main-nav>a.nav-rescue-cta:hover{background:#ffe9e9;border-color:#edbfc2}
.main-nav .nav-join{
  padding-inline:15px;background:linear-gradient(135deg,#2787e7,#1264bd);
  color:#fff;box-shadow:0 6px 14px rgba(23,107,196,.2);
}
.main-nav .nav-join:hover{background:#0d5caf;color:#fff}
.nav-user{color:#70849a;font-size:11px}
.mobile-menu-toggle{
  border:1px solid #d6e5f3;background:#f7fbff;color:#1a5e9e;
  border-radius:12px;box-shadow:none;
}
.mobile-menu-glyph{font-size:19px}

/* Main page canvas and page headers */
.page-shell{
  width:min(100%,1540px);
  max-width:1540px;
  min-height:68vh;
  margin:0 auto;
  padding:26px clamp(14px,2.4vw,34px) 46px;
}
.welcome-row,.page-title-row,.rescue-page-heading,.rescue-page-heading.rescue-list-heading,
.v2-page-hero,.members-page-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(20px,2.8vw,32px);
  margin:0 0 20px;
  border:1px solid #d9e8f7;
  border-radius:22px;
  background:linear-gradient(112deg,#fff 0%,#f7fbff 48%,#eaf5ff 100%);
  box-shadow:var(--cfw-shadow);
}
.welcome-row:after,.page-title-row:after,.rescue-page-heading:after,.v2-page-hero:after{
  content:"";position:absolute;z-index:-1;right:-72px;top:-125px;width:340px;height:340px;
  border:1px solid rgba(67,148,222,.12);border-radius:50%;
  box-shadow:0 0 0 30px rgba(67,148,222,.035),0 0 0 65px rgba(67,148,222,.025);
  pointer-events:none;
}
.welcome-row h1,.page-title-row h1,.rescue-page-heading h1,.v2-page-hero h1,.members-page-hero h1{
  color:#10365f;font-size:clamp(25px,3vw,36px);font-weight:850;letter-spacing:-.45px;line-height:1.24;
}
.welcome-row p,.page-title-row p,.rescue-page-heading p,.v2-page-hero p,.members-page-hero p{
  max-width:850px;color:#647e98;font-size:13px;line-height:1.75;
}
.eyebrow,.v2-eyebrow,.quick-access-kicker{
  color:#1c73c5;font-size:10px;font-weight:900;letter-spacing:.09em;
}
.live-dot{background:#19a873;box-shadow:0 0 0 4px rgba(25,168,115,.13)}
.hero-actions,.page-actions,.rescue-heading-actions{display:flex;gap:9px;flex-wrap:wrap}

/* Buttons, links and status */
.button,.v2-button,.primary-btn,.secondary-btn,.route-primary-btn,.route-secondary-btn,
.ghost-btn,.rescue-home-primary,.rescue-home-secondary{
  min-height:40px;border-radius:11px;font-weight:800;transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.button:hover,.v2-button:hover,.primary-btn:hover,.secondary-btn:hover,.route-primary-btn:hover,.route-secondary-btn:hover{
  transform:translateY(-1px);box-shadow:0 7px 16px rgba(19,75,130,.12);
}
.button-primary,.v2-button-primary,.primary-btn,.route-primary-btn{
  background:linear-gradient(135deg,#2583df,#1264bb);border-color:#176bc4;color:#fff;
  box-shadow:0 6px 15px rgba(23,107,196,.18);
}
.button-primary:hover,.v2-button-primary:hover,.primary-btn:hover,.route-primary-btn:hover{background:#0e5eaf;color:#fff}
.button-ghost,.v2-button-ghost,.secondary-btn,.route-secondary-btn,.ghost-btn{
  background:#fff;border:1px solid #d8e6f3;color:#315574;
}
.button-danger,.button-danger-outline,.nav-rescue-cta{
  background:#fff2f2;border-color:#f2d0d2;color:#bf3e46;
}
.flash{border-radius:13px;border:1px solid #dce8f3;box-shadow:0 4px 12px rgba(20,54,88,.045)}
.flash-success{background:#effaf4;border-color:#ccebd9;color:#176b46}
.flash-error{background:#fff3f3;border-color:#f2d2d4;color:#a9363c}

/* Universal cards and panels */
.panel,.stat-card,.quick-access-card,.rescue-stat,.rescue-case-card,.rescue-cases-section,
.v2-filter-card,.v2-guide-card,.v2-safety-callout,.settings-card,.footer-card,
.cfw-rainfall-panel-v2,.cfw-rainfall-stat-card,.cfw-rainfall-source-note-v2,
.cfw-rainfall-data-note-v2,.cfw-rainfall-forecast-panel{
  border:1px solid var(--cfw-line);
  border-radius:var(--cfw-radius);
  background:rgba(255,255,255,.97);
  box-shadow:var(--cfw-shadow);
}
.panel{overflow:hidden}
.panel-heading{padding:18px 20px;border-bottom:1px solid #edf2f7}
.panel-heading h2,.panel-heading h3{color:#173e65;font-weight:850}
.panel-heading p{color:#70869c}
.panel-actions{gap:8px}
.panel-actions select,.map-tools select{
  min-height:39px;border:1px solid #dbe7f2;border-radius:10px;background:#fff;color:#385673;padding:8px 11px;
}
.empty-state,.empty-large,.v2-empty-card,.v2-empty-inline,.rescue-empty-inline{
  border:1px dashed #d5e3f0;border-radius:15px;background:#f8fbff;color:#73889d;
}

/* Home dashboard */
.stats-grid{
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;margin-bottom:18px;
}
.stats-grid .stat-card{
  position:relative;min-height:104px;padding:17px 18px;
  border:1px solid #dfebf6;border-radius:17px;background:#fff;
  box-shadow:0 5px 17px rgba(23,61,98,.055);
}
.stats-grid .stat-card>span{font-size:12px;color:#6c8298;font-weight:750}
.stats-grid .stat-card strong{font-size:30px;color:#123b66;font-weight:900}
.stats-grid .stat-card small{font-size:10px;color:#8a9bad}
.stats-grid .stat-card.danger{background:linear-gradient(145deg,#fff,#fff7f7);border-color:#f2dfe0}
.stats-grid .stat-card.info{background:linear-gradient(145deg,#fff,#f4f9ff)}
.stats-grid .stat-card.success{background:linear-gradient(145deg,#fff,#f3fbf7);border-color:#d9eee3}
.quick-access-section{
  margin:18px 0;padding:clamp(16px,2.2vw,24px);
  border:1px solid #dce8f4;border-radius:20px;background:linear-gradient(135deg,#fff,#f8fbff);
  box-shadow:var(--cfw-shadow);
}
.quick-access-heading{margin-bottom:15px}
.quick-access-heading h2{color:#143b63;font-size:22px;font-weight:850}
.quick-access-heading p{color:#7389a0;font-size:12px}
.quick-access-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:11px}
.quick-access-card{
  position:relative;min-height:86px;padding:15px;border-radius:15px;
  box-shadow:0 3px 12px rgba(24,61,97,.045);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.quick-access-card:hover{transform:translateY(-3px);box-shadow:var(--cfw-shadow-hover);border-color:#bcd8f2}
.quick-access-icon{width:43px;height:43px;border-radius:13px;background:#edf6ff;color:#1d72c1}
.quick-access-copy strong{color:#1a4168;font-size:13px}
.quick-access-copy small{color:#7b8fa4;font-size:10px}
.quick-access-secondary{gap:8px}
.quick-access-secondary a{
  border:1px solid #e0eaf3;border-radius:999px;background:#fff;padding:8px 12px;
  color:#44617e;font-size:11px;font-weight:750;
}
.quick-access-secondary a:hover{background:#edf6ff;border-color:#c9def2;text-decoration:none}
.dashboard-grid{grid-template-columns:minmax(0,1.55fr) minmax(320px,.85fr);gap:16px;align-items:start}
.map-panel,.reports-panel{border-radius:19px;box-shadow:var(--cfw-shadow)}
.map-panel .panel-heading{background:linear-gradient(110deg,#fff,#f6faff)}
.map-canvas,.flood-map{min-height:420px}
.map-legend{padding:13px 18px;color:#647d96}
.map-note{line-height:1.65}
.route-planner{
  margin:14px 16px;padding:16px;border:1px solid #dce9f5;border-radius:15px;
  background:linear-gradient(130deg,#f8fbff,#eef6ff);
}
.route-planner-heading h3{color:#16436e;font-size:15px;font-weight:850}
.route-planner-heading p,.route-safety-note{color:#6d8297;font-size:11px;line-height:1.65}
.route-controls input,.route-controls select{min-height:42px;border:1px solid #d5e3f0;border-radius:10px;background:#fff}
.route-status{border-radius:12px;border:1px solid #dce8f3;background:#fff;padding:11px 13px}
.reports-panel .report-card,.report-card{border-color:#e5edf5}
.report-card:hover{border-color:#c9def2}
.report-card h3,.report-card h2{color:#173d63}
.status-pill,.type-pill{border-radius:999px;font-weight:800}

/* Common forms and data tables */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
select,textarea{
  border-color:#d7e4f0;border-radius:11px;background:#fff;color:#203c59;
}
input:focus,select:focus,textarea:focus{
  border-color:#72aee8!important;box-shadow:0 0 0 3px rgba(36,128,220,.12)!important;outline:0;
}
label{color:#34536f}
table{border-collapse:separate;border-spacing:0;width:100%}
table thead th{
  background:#f1f6fb;color:#58718b;font-size:11px;font-weight:850;
  padding:11px 12px;border-bottom:1px solid #e2ebf3;
}
table tbody td{
  padding:11px 12px;border-bottom:1px solid #edf2f7;color:#3e5b78;
  font-size:12px;vertical-align:middle;
}
table tbody tr:hover td{background:#f8fbff}
table tbody tr:last-child td{border-bottom:0}
.form-section{
  padding:19px;border:1px solid #e3edf6;border-radius:16px;background:#fff;
  box-shadow:0 4px 14px rgba(20,54,88,.04);
}
.form-section h2{color:#173f67;font-size:16px;font-weight:850}
.step-number{background:#e9f4ff;color:#176bc4;border-radius:10px}
.field-help,.form-stack small{color:#7c91a5;line-height:1.6}
.upload-box{border-color:#b9d4ed;background:#f7fbff;border-radius:14px}

/* Report lists and cards */
.my-report-card,.admin-report-row,.rescue-case-card,.rescue-open-case{
  border:1px solid #e2ebf4;border-radius:15px;background:#fff;
  box-shadow:0 4px 14px rgba(18,53,88,.045);
}
.my-report-card:hover,.rescue-case-card:hover{border-color:#c6def4;box-shadow:var(--cfw-shadow)}
.report-card-top{gap:7px;flex-wrap:wrap}
.report-thumb,.admin-thumb{border-radius:12px;object-fit:cover}
.type-pill{background:#edf5fd;color:#34658f;padding:5px 9px;font-size:10px}
.status-pill{padding:5px 9px;font-size:10px}

/* Rescue and emergency center */
.rescue-home-strip{
  padding:16px 18px;border:1px solid #d6e9f7;border-radius:17px;
  background:linear-gradient(110deg,#edf7ff,#fff 70%);box-shadow:var(--cfw-shadow);
}
.rescue-home-icon{background:#e3f1ff;color:#176bc4;border-radius:13px}
.rescue-home-copy strong{color:#153f68;font-weight:850}
.rescue-home-copy p{color:#6c8298}
.rescue-home-primary{background:linear-gradient(135deg,#e64d55,#c73540);box-shadow:0 6px 15px rgba(205,55,65,.16)}
.rescue-stat-row{gap:12px}
.rescue-stat{padding:16px 18px}
.rescue-stat strong{color:#153f68;font-size:27px;font-weight:900}
.rescue-map-section,.rescue-cases-section{padding:17px}
.rescue-case-grid{gap:12px}
.rescue-case-card{padding:15px}
.rescue-page-heading{align-items:center}
.rescue-page-heading h1{margin:5px 0}
.emergency-grid-v14,.emergency-grid{gap:11px}
.emergency-item,.social-contact-v164{
  border:1px solid #e1ebf4;border-radius:13px;background:#fff;
}
.emergency-item:hover,.social-contact-v164:hover{border-color:#c5dcf2;background:#f8fbff}

/* Admin, settings, directory and content pages */
.admin-stats,.admin-member-stats{gap:11px}
.admin-stat,.admin-member-stat{
  border:1px solid #dfebf5;border-radius:15px;background:#fff;box-shadow:0 4px 14px rgba(20,54,88,.045);
}
.admin-stat strong,.admin-member-stat strong{color:#155b9d;font-weight:900}
.admin-table-panel,.settings-card,.v2-admin-grid .v2-form-card,.v2-admin-grid .v2-list-card{border-radius:18px}
.v2-page{display:grid;gap:16px}
.v2-page-hero{margin-bottom:0}
.v2-guide-grid{gap:12px}
.v2-guide-card{padding:18px}
.v2-guide-card h2{color:#153f68;font-weight:850}
.v2-filter-card{padding:16px}
.v2-safety-callout{padding:16px 18px}
.auth-wrap{max-width:520px;margin:28px auto}
.auth-card{padding:clamp(24px,4vw,38px);border-radius:22px}
.auth-symbol{border-radius:15px;background:#eaf4ff;color:#176bc4}
.auth-card h1{color:#123b64;font-weight:900}
.donate-layout{gap:16px}
.donate-intro-card,.donate-detail{border-radius:18px}
.cfw-about-card{min-height:100%}

/* Rainfall page harmonization */
.cfw-rainfall-page{max-width:1440px;margin:0 auto}
.cfw-rainfall-hero-v2{
  border:1px solid #d5e6f6;border-radius:22px;
  background:linear-gradient(110deg,#fff 0%,#f0f7ff 58%,#dceeff 100%);
  box-shadow:var(--cfw-shadow);
}
.cfw-rainfall-stat-card{box-shadow:0 5px 17px rgba(23,61,98,.055)}
.cfw-rainfall-chart-panel,.cfw-rainfall-station-panel,.cfw-rainfall-forecast-panel{box-shadow:var(--cfw-shadow)}
.cfw-rainfall-panel-head-v2 h2{color:#143d66;font-weight:850}
.cfw-rainfall-unit-pill{border:1px solid #d7e7f6;background:#f7fbff;color:#557694}
.cfw-rainfall-refresh{border-radius:11px;background:#176bc4;color:#fff}

/* Footer */
.site-footer{
  display:block;padding:30px clamp(14px,3vw,42px) 18px;
  border-top:1px solid #dce7f1;background:linear-gradient(180deg,#fff,#f8fbff);
}
.footer-shell{max-width:1480px;margin:0 auto}
.footer-top{gap:24px;padding-bottom:22px;border-bottom:1px solid #e6edf4}
.footer-brand-heading strong{color:#153e66;font-size:18px;font-weight:900}
.footer-brand-block p,.footer-card-copy,.footer-mini-list{color:#71869b;line-height:1.7}
.footer-card{padding:16px}
.footer-card-title{color:#19466f;font-size:13px;font-weight:900}
.footer-bottom-v14{gap:10px;flex-wrap:wrap;color:#8294a5}
.footer-bottom-v14 a,.footer-bottom-v14 button{color:#56718a;font-size:11px}
.cfw-cookie-inner{border:1px solid #dce8f3;border-radius:18px;box-shadow:0 18px 55px rgba(16,45,76,.2)}

/* Responsive layout */
@media(max-width:1200px){
  .site-header{gap:12px;padding-inline:18px}
  .brand{min-width:205px}
  .brand strong{font-size:15px}
  .main-nav>a,.main-nav .nav-logout{padding-inline:9px;font-size:11px}
  .dashboard-grid{grid-template-columns:minmax(0,1.3fr) minmax(300px,.9fr)}
}
@media(max-width:900px){
  .site-header{position:sticky;top:0;padding:9px 13px;gap:10px}
  .site-header .brand{min-width:0}
  .mobile-menu-toggle{min-height:42px}
  .site-header .main-nav{
    top:calc(100% + 7px);right:10px;left:10px;max-height:min(76vh,620px);
    border:1px solid #dce8f3;border-radius:17px;padding:10px;
    background:rgba(255,255,255,.985);box-shadow:0 18px 44px rgba(18,52,86,.2);
  }
  .site-header .main-nav>a,.site-header .main-nav .nav-logout{
    min-height:44px;padding:11px 13px;border-radius:11px;font-size:13px;
  }
  .page-shell{padding:17px 13px 32px}
  .welcome-row,.page-title-row,.rescue-page-heading,.v2-page-hero,.members-page-hero{border-radius:18px}
  .dashboard-grid{grid-template-columns:1fr}
  .map-canvas,.flood-map{min-height:390px}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  body{font-size:14px}
  .brand-mark{width:42px;height:42px;border-radius:13px;font-size:28px}
  .brand strong{font-size:13px}
  .brand small{font-size:9px}
  .mobile-menu-toggle{padding:7px 10px;font-size:12px}
  .welcome-row,.page-title-row,.rescue-page-heading,.v2-page-hero,.members-page-hero{
    align-items:flex-start;flex-direction:column;gap:13px;padding:18px;margin-bottom:14px;
  }
  .welcome-row h1,.page-title-row h1,.rescue-page-heading h1,.v2-page-hero h1{font-size:25px}
  .welcome-row p,.page-title-row p,.rescue-page-heading p{font-size:12px}
  .hero-actions,.page-actions,.rescue-heading-actions{width:100%}
  .hero-actions .button,.page-actions .button,.rescue-heading-actions .button{flex:1}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .stats-grid .stat-card{min-height:88px;padding:12px}
  .stats-grid .stat-card strong{font-size:24px}
  .stats-grid .stat-card>span{font-size:10px}
  .quick-access-grid{grid-template-columns:1fr;gap:8px}
  .quick-access-card{min-height:74px;padding:12px}
  .quick-access-secondary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .quick-access-secondary a{justify-content:center;text-align:center;font-size:10px}
  .panel-heading{padding:14px;align-items:flex-start;flex-direction:column}
  .panel-actions{width:100%}
  .panel-actions select{flex:1;min-width:0;max-width:none}
  .map-canvas,.flood-map{min-height:340px}
  .route-planner{margin:10px;padding:12px}
  .route-controls{grid-template-columns:1fr!important}
  .route-controls>*{width:100%;min-width:0}
  .rescue-home-strip{align-items:flex-start;flex-wrap:wrap;padding:13px}
  .rescue-home-actions{width:100%;display:grid;grid-template-columns:1fr}
  .rescue-stat-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .rescue-stat{padding:12px}
  .rescue-stat strong{font-size:23px}
  .form-section{padding:14px}
  .two-col{grid-template-columns:1fr!important}
  .auth-wrap{margin:12px auto}
  .auth-card{padding:22px}
  .footer-top,.footer-grid-v14{grid-template-columns:1fr!important}
  .footer-top-actions{width:100%;display:grid;grid-template-columns:1fr}
  .footer-bottom-v14{justify-content:center;text-align:center}
  table{min-width:620px}
  .table-wrap,.admin-table-panel,.cfw-rainfall-table-wrap-v2{overflow-x:auto}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}