/* ==========================================================================
   Bangladesh Cyclone Shelter Web-GIS Dashboard
   Clean, minimal, light theme
   Credit: Al Jubaer (https://www.jubaer.riverpeopleplanet.com), icddr,b
   ========================================================================== */

:root{
  --bg-page:#f4f6fb;
  --bg-card:#ffffff;
  --card-border: rgba(15,23,42,0.08);
  --card-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.05);
  --card-shadow-hover: 0 4px 10px rgba(15,23,42,0.06), 0 14px 32px rgba(15,23,42,0.08);

  --text-1:#0f172a;
  --text-2:#475569;
  --text-3:#94a3b8;

  --accent-indigo:#6366f1;
  --accent-cyan:#0891b2;
  --accent-pink:#db2777;
  --accent-amber:#d97706;
  --accent-green:#059669;
  --accent-orange:#ea580c;
  --accent-red:#dc2626;
  --accent-blue:#2563eb;

  --grad-brand: linear-gradient(135deg,#6366f1 0%,#0891b2 100%);

  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:9px;

  --font-display:'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}

*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; height:100%; width:100%;
  overflow:hidden; /* fixed single-page dashboard, no page scroll */
  font-family:var(--font-body);
  color:var(--text-1);
  background:var(--bg-page);
}

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(15,23,42,0.14); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(15,23,42,0.24); }

.glass, .card{
  background:var(--bg-card);
  border:1px solid var(--card-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--card-shadow);
}

/* ============ APP SHELL ============ */
.app-shell{
  height:100vh; width:100vw;
  display:flex; flex-direction:column;
  padding:8px 12px 8px;
  gap:7px;
}

/* ============ HEADER ============ */
.topbar{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 16px;
  gap:18px;
  border-radius:var(--radius-lg);
}
.brand{ display:flex; align-items:center; gap:11px; min-width:270px; }
.brand-icon{
  width:38px; height:38px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; color:#ffffff;
  background:var(--grad-brand);
  box-shadow:0 4px 14px rgba(99,102,241,0.28);
  flex-shrink:0;
}
.brand-text h1{
  font-family:var(--font-display); font-weight:800; font-size:16.5px; margin:0; line-height:1.15;
  color:var(--text-1); letter-spacing:.2px;
}
.brand-text h1 span{
  display:block; font-size:10.5px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand-text p{
  margin:3px 0 0; font-size:11.5px; color:var(--text-2); display:flex; align-items:center; gap:6px;
}
.brand-text p i{ color:var(--accent-cyan); }
.scope-sep{ color:var(--text-3); }

/* short credit line, moved here from the old fixed bottom-corner badge */
.brand-credit{
  margin-top:2px !important; font-size:9.5px !important; color:var(--text-3) !important;
}
.brand-credit i{ color:var(--accent-indigo) !important; font-size:9px; }
.brand-credit a{ color:var(--accent-indigo); text-decoration:none; font-weight:700; }
.brand-credit a:hover{ text-decoration:underline; color:var(--accent-pink); }

.kpi-strip{ display:flex; gap:8px; flex-wrap:nowrap; }
.kpi-chip{
  display:flex; align-items:center; gap:9px;
  background:#f8fafc; border:1px solid var(--card-border);
  border-radius:var(--radius-md); padding:6px 13px 6px 6px;
  min-width:126px; transition:.2s ease;
}
.kpi-chip:hover{ box-shadow:var(--card-shadow-hover); transform:translateY(-2px); }
.kpi-chip i{
  font-size:13px; color:var(--accent-indigo); background:rgba(99,102,241,0.12);
  width:28px; height:28px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.kpi-chip:nth-child(2) i{ color:var(--accent-cyan); background:rgba(8,145,178,0.12); }
.kpi-chip:nth-child(3) i{ color:var(--accent-pink); background:rgba(219,39,119,0.12); }
.kpi-chip:nth-child(4) i{ color:var(--accent-amber); background:rgba(217,119,6,0.12); }
.kpi-chip:nth-child(5) i{ color:var(--accent-green); background:rgba(5,150,105,0.12); }
.kpi-chip:nth-child(6) i{ color:var(--accent-orange); background:rgba(234,88,12,0.12); }
.kpi-chip div{ display:flex; flex-direction:column; line-height:1.1; }
.kpi-chip b{ font-family:var(--font-mono); font-size:13.5px; font-weight:700; color:var(--text-1); }
.kpi-chip small{ font-size:9.5px; color:var(--text-3); text-transform:uppercase; letter-spacing:.5px; }

/* ============ MAIN GRID ============ */
.main-grid{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:3fr 2fr; /* left dashboard 60% / map 40% */
  gap:10px;
  min-height:0;
}
.panel{ min-height:0; display:flex; flex-direction:column; gap:7px; overflow:hidden; }

/* ============ LEFT PANEL ============ */
/* Everything below is sized with flex/min-height:0 so it shrinks to fit the fixed viewport —
   no inner scrollbar needed or wanted. */
.left-panel{ overflow:hidden; padding-right:2px; }

.card-title{
  font-family:var(--font-display); font-weight:700; font-size:13.5px;
  letter-spacing:.3px; color:var(--text-1);
  display:flex; align-items:center; gap:8px;
  text-transform:uppercase;
  padding-bottom:8px; border-bottom:1px solid var(--card-border);
}
.card-title.small{ font-size:11.5px; color:var(--text-2); padding-bottom:0; border-bottom:none; }
.card-title i{
  color:#ffffff; font-size:11px; width:22px; height:22px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  background:var(--grad-brand); flex-shrink:0;
}
.card-title.small i{ color:var(--accent-indigo); background:none; width:auto; height:auto; font-size:13px; }

.filter-card{ flex:0 0 auto; padding:9px 13px 10px; overflow:hidden; }
.filter-card .card-title{ justify-content:space-between; margin-bottom:7px; padding-bottom:6px; }
.chip-btn{
  font-family:var(--font-body); font-size:11.5px; font-weight:600; text-transform:none;
  color:var(--text-2); background:#f1f5f9; border:1px solid var(--card-border);
  border-radius:999px; padding:5px 11px; cursor:pointer; display:flex; align-items:center; gap:6px;
  transition:.15s ease;
}
.chip-btn:hover{ background:#e2e8f0; color:var(--text-1); }

/* small uppercase divider label between the location and attribute sections of the merged filter card */
.filter-subhead{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-3);
  display:flex; align-items:center; gap:5px; margin:9px 0 5px;
}
.filter-subhead i{ color:var(--accent-indigo); font-size:11px; }
.filter-subhead:first-of-type{ margin-top:0; }

.filter-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:7px 10px; }
.filter-grid-attr{ grid-template-columns:repeat(6,1fr); } /* wider left panel (60%) fits 6 across, 11 fields = 2 rows not 3 */
.filter-field{ display:flex; flex-direction:column; gap:3px; }
.filter-field span{
  font-size:11px; color:var(--text-3); font-weight:600; text-transform:uppercase; letter-spacing:.4px;
  display:flex; align-items:center; gap:5px;
}
.filter-field span i{ color:var(--accent-indigo); font-size:12px; }
.filter-field select{
  appearance:none; -webkit-appearance:none;
  background:#f8fafc url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%236366f1'/></svg>") no-repeat right 10px center;
  border:1px solid var(--card-border); border-radius:var(--radius-sm);
  color:var(--text-1); font-family:var(--font-body); font-size:13px; font-weight:500;
  padding:7px 22px 7px 9px; cursor:pointer; outline:none; transition:.15s ease;
  text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
}
.filter-field select:hover{ border-color:var(--accent-indigo); }
.filter-field select:disabled{ opacity:.45; cursor:not-allowed; }
.filter-field select:focus{ border-color:var(--accent-indigo); box-shadow:0 0 0 3px rgba(99,102,241,0.14); }

/* ---- map legend, embedded as a slim strip inside the filter card (no floating map overlay) ---- */
.legend-strip{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px;
  font-size:10.5px; color:var(--text-2); font-weight:500;
  background:#f8fafc; border:1px solid var(--card-border); border-radius:8px;
  padding:6px 10px; margin:2px 0 3px;
}
.legend-strip > span{ display:flex; align-items:center; gap:6px; white-space:nowrap; }
.legend-strip i{ color:var(--accent-indigo); font-size:11px; }
.legend-strip .dot{ width:8px; height:8px; }
.legend-sep{ color:var(--card-border); }
.legend-src{ color:var(--text-3); font-weight:400; white-space:normal !important; }

/* ============ STATS ============ */
.stats-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px; flex:0 0 auto; }
.stat-card{
  padding:8px 9px; display:flex; flex-direction:column; align-items:flex-start; gap:5px;
  transition:.2s ease; position:relative; overflow:hidden;
}
.stat-card:hover{ transform:translateY(-3px); box-shadow:var(--card-shadow-hover); }
.stat-icon{
  font-size:14px; width:30px; height:30px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.stat-icon.c1{ color:var(--accent-indigo); background:rgba(99,102,241,0.12); }
.stat-icon.c2{ color:var(--accent-cyan); background:rgba(8,145,178,0.12); }
.stat-icon.c3{ color:var(--accent-pink); background:rgba(219,39,119,0.12); }
.stat-icon.c4{ color:var(--accent-amber); background:rgba(217,119,6,0.12); }
.stat-icon.c5{ color:var(--accent-green); background:rgba(5,150,105,0.12); }
.stat-icon.c6{ color:var(--accent-orange); background:rgba(234,88,12,0.12); }
.stat-body{ display:flex; flex-direction:column; gap:2px; }
.stat-body b{ font-family:var(--font-mono); font-size:17px; font-weight:700; color:var(--text-1); }
.stat-body span{ font-size:10.5px; color:var(--text-3); text-transform:uppercase; letter-spacing:.4px; font-weight:600; }

/* ============ CHARTS ============ */
/* 3 columns x 2 rows (not 2x3) — the 60%-width left panel gives each column enough room, and
   halving the row count is what actually buys back vertical space. The grid fills whatever
   height remains in the fixed-viewport left panel (flex:1 1 auto + min-height:0 top to bottom),
   so it never forces a scrollbar — it just sizes to fit. */
.charts-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); grid-template-rows:repeat(2, 1fr); gap:8px;
  flex:1 1 auto; min-height:0;
}
.chart-card{ padding:7px 9px 5px; display:flex; flex-direction:column; min-height:0; overflow:hidden; transition:.2s ease; }
.chart-card:hover{ box-shadow:var(--card-shadow-hover); }
.chart-holder{ position:relative; flex:1 1 auto; min-height:0; }
.chart-holder canvas{ position:absolute; inset:0; width:100% !important; height:100% !important; }
.chart-fallback{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; padding:14px; background:rgba(255,255,255,0.92); border-radius:10px;
  color:var(--text-3); font-size:10.5px; line-height:1.5;
}
.chart-fallback i{ font-size:18px; color:var(--accent-red); }

/* ============ RIGHT PANEL / MAP ============ */
.right-panel{ gap:8px; }
.map-toolbar{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; gap:10px;
}
.toolbar-group{ display:flex; gap:6px; }
.tool-btn{
  display:flex; align-items:center; gap:7px; font-family:var(--font-body); font-weight:600; font-size:11.5px;
  color:var(--text-2); background:#f1f5f9; border:1px solid var(--card-border);
  border-radius:999px; padding:7px 13px; cursor:pointer; transition:.15s ease;
}
.tool-btn i{ font-size:12px; }
.tool-btn:hover{ background:#e2e8f0; color:var(--text-1); }
.tool-btn.active{
  background:var(--grad-brand); color:#ffffff; border-color:transparent;
  box-shadow:0 4px 12px rgba(99,102,241,0.25);
}
.tool-btn.ghost{ background:transparent; }

.map-wrap{ position:relative; flex:1 1 auto; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--card-border); box-shadow:var(--card-shadow); }
#map{ position:absolute; inset:0; background:#eef2f7; }

.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; flex-shrink:0; }
.dot-active{ background:var(--accent-cyan); box-shadow:0 0 0 3px rgba(8,145,178,0.15); }
.dot-muted{ background:transparent; border:1.5px dashed var(--text-3); }
.dot-point{ background:var(--accent-pink); box-shadow:0 0 0 3px rgba(219,39,119,0.15); }

.map-loading{
  position:absolute; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  gap:10px; font-size:13px; font-weight:600; color:var(--text-2); text-align:center; padding:20px;
  background:rgba(244,246,251,0.92);
  transition:opacity .3s ease;
}
.map-loading.hidden{ opacity:0; pointer-events:none; }
.load-error{ color:var(--accent-red); max-width:360px; line-height:1.6; }
.load-error i{ font-size:20px; display:block; margin-bottom:6px; }
.load-error small{ display:inline-block; color:var(--text-2); font-weight:500; font-size:11px; margin-top:4px; }
.load-error code{ background:#f1f5f9; padding:1px 5px; border-radius:5px; font-family:var(--font-mono); font-size:10.5px; }


/* ============ LEAFLET OVERRIDES ============ */
.leaflet-popup-content-wrapper{
  background:#ffffff; color:var(--text-1); border-radius:14px;
  border:1px solid var(--card-border); box-shadow:0 10px 30px rgba(15,23,42,0.14);
  font-family:var(--font-body);
}
.leaflet-popup-tip{ background:#ffffff; }
.leaflet-popup-content{ margin:12px 14px; font-size:12px; line-height:1.5; }
.shelter-popup h4{
  margin:0 0 6px; font-family:var(--font-display); font-size:13px; color:var(--accent-indigo);
  display:flex; align-items:center; gap:6px;
}
.shelter-popup table{ border-collapse:collapse; width:100%; }
.shelter-popup td{ padding:2px 4px; vertical-align:top; font-size:11.5px; }
.shelter-popup td.k{ color:var(--text-3); white-space:nowrap; padding-right:8px; }
.shelter-popup td.v{ color:var(--text-1); font-weight:600; }
.leaflet-container{ font-family:var(--font-body); background:#eef2f7; }
.leaflet-control-zoom a{
  background:#ffffff !important; color:var(--text-1) !important; border-color:var(--card-border) !important;
}
.leaflet-control-zoom a:hover{ background:#f1f5f9 !important; }
.leaflet-control-attribution{
  background:rgba(255,255,255,0.75) !important; color:var(--text-3) !important; font-size:9.5px !important;
}
.leaflet-control-attribution a{ color:var(--accent-indigo) !important; }

.marker-cluster-custom{
  background:radial-gradient(circle,rgba(219,39,119,0.92),rgba(99,102,241,0.85));
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#ffffff; font-weight:700; font-family:var(--font-mono); font-size:12px;
  border:2px solid #ffffff;
  box-shadow:0 3px 10px rgba(15,23,42,0.28);
}

/* ============ ADMIN AREA NAME LABELS (map) ============ */
.leaflet-tooltip.admin-label{
  background:transparent; border:none; box-shadow:none; padding:0; margin:0;
  font-family:var(--font-display); font-weight:600; font-size:9.5px; color:#64748b;
  letter-spacing:.2px; pointer-events:none; white-space:nowrap;
  text-shadow:
    0 1px 3px rgba(255,255,255,0.95), 0 -1px 3px rgba(255,255,255,0.95),
    1px 0 3px rgba(255,255,255,0.95), -1px 0 3px rgba(255,255,255,0.95);
}
.leaflet-tooltip.admin-label::before{ display:none; }
.leaflet-tooltip.admin-label.active{ color:#0f172a; font-weight:800; font-size:11px; }
.leaflet-tooltip.admin-label.active::after{ content:''; }

/* subtle transition + soft lift on polygons so hover/selection restyles feel smooth and premium */
.leaflet-interactive{
  transition:fill-opacity .18s ease, stroke-width .18s ease, filter .18s ease;
  stroke-linejoin:round; stroke-linecap:round;
}
.leaflet-interactive:hover{ filter:drop-shadow(0 3px 8px rgba(15,23,42,0.16)); }

/* shelter point markers: soft glassy dots, no hard-edged clutter at high density */
.leaflet-marker-icon, .leaflet-interactive.leaflet-circle-marker{ transition:opacity .15s ease, transform .15s ease; }
.marker-cluster-custom{ opacity:.94; }

/* ============ RESPONSIVE FALLBACK ============ */
@media (max-width: 1180px){
  .main-grid{ grid-template-columns:1fr; overflow-y:auto; }
  html,body{ overflow:auto; }
  .stats-grid{ grid-template-columns:repeat(3,1fr); }
  .filter-grid{ grid-template-columns:repeat(2,1fr); }
  .kpi-strip{ display:none; }
}