/* ============================================================
   Bangladesh Dengue–Climate Atlas
   ============================================================ */
:root{
  --ground:#f4f6f5;
  --panel:#ffffff;
  --panel-2:#eef1f0;
  --ink:#16232a;
  --ink-2:#3b4a52;
  --muted:#6b7880;
  --rule:#dde3e2;
  --rule-2:#c3ccca;
  --dengue:#c1272d;
  --weather:#1b6ca8;
  --air:#7a5195;
  --accent:#0e6155;
  --shadow:0 1px 2px rgba(22,35,42,.06), 0 6px 16px rgba(22,35,42,.05);
  --radius:6px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:13.5px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
:lang(bn), .bn{font-family:'Noto Sans Bengali','Inter',sans-serif}

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:10px 18px; background:#12303a; color:#eaf1f0;
  border-bottom:3px solid var(--dengue);
}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  width:36px; height:36px; border-radius:5px; display:grid; place-items:center;
  background:linear-gradient(135deg,#c1272d,#7a1f24); color:#fff;
  font-weight:800; font-size:12px; letter-spacing:.04em;
}
.brand h1{margin:0; font-size:15px; font-weight:700; letter-spacing:-.01em}
.brand p{margin:1px 0 0; font-size:11px; color:#9fb4b6}
.topbar-actions{display:flex; align-items:center; gap:10px}
.status-badge{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  font-size:11px; padding:4px 9px; border-radius:20px;
  background:rgba(255,255,255,.1); color:#eaf1f0; border:1px solid rgba(255,255,255,.16);
}
.status-badge .d{width:7px; height:7px; border-radius:50%; background:#e9a020}
.status-badge.live .d{background:#37b98c}
.lang,.ext{
  font-size:11.5px; padding:5px 11px; border-radius:5px; cursor:pointer;
  background:rgba(255,255,255,.1); color:#eaf1f0;
  border:1px solid rgba(255,255,255,.18); text-decoration:none;
}
.lang:hover,.ext:hover{background:rgba(255,255,255,.18)}

/* ---------- stage ---------- */
.stage{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:12px; padding:12px; height:calc(100vh - 59px);
}
.panel{min-width:0; min-height:0}
.panel.left{overflow-y:auto; padding-right:4px}
.panel.right{display:flex; flex-direction:column; gap:8px}

/* ---------- filters ---------- */
.filters{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:8px; background:var(--panel); border:1px solid var(--rule);
  border-radius:var(--radius); padding:10px; box-shadow:var(--shadow);
}
.field{display:flex; flex-direction:column; gap:3px; min-width:0}
.field label{
  font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); font-weight:600;
}
.field select{
  width:100%; padding:5px 7px; font-size:12px; font-family:inherit;
  border:1px solid var(--rule-2); border-radius:4px; background:#fff; color:var(--ink);
}
.field select:disabled{background:var(--panel-2); color:#9aa5a3}
.field.var{grid-column:span 2}

/* ---------- period slider ---------- */
.timebar{
  display:flex; align-items:center; gap:10px; margin-top:8px;
  background:var(--panel); border:1px solid var(--rule); border-radius:var(--radius);
  padding:8px 12px; box-shadow:var(--shadow);
}
.timebar input[type=range]{flex:1; accent-color:var(--dengue)}
#period-label{
  font-variant-numeric:tabular-nums; font-weight:700; font-size:14px;
  min-width:74px; text-align:center;
}
#period-range{font-size:10.5px; color:var(--muted); white-space:nowrap}
.mini{
  border:1px solid var(--rule-2); background:#fff; border-radius:4px;
  padding:4px 9px; font-size:11.5px; cursor:pointer; font-family:inherit; color:var(--ink);
}
.mini:hover{background:var(--panel-2)}
.mini.on{background:#12303a; color:#fff; border-color:#12303a}

/* ---------- KPI ---------- */
.kpi-row{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  gap:8px; margin-top:8px;
}
.kpi{
  background:var(--panel); border:1px solid var(--rule); border-radius:var(--radius);
  padding:9px 11px; box-shadow:var(--shadow); min-width:0;
}
.k-n{
  display:block; font-size:20px; font-weight:700; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; line-height:1.1;
}
.k-u{font-size:10.5px; color:var(--muted)}
.k-l{
  display:block; margin-top:5px; font-size:9.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}

/* ---------- narrative ---------- */
.narrative{
  margin-top:8px; background:var(--panel); border:1px solid var(--rule);
  border-left:3px solid var(--accent); border-radius:var(--radius);
  padding:9px 12px; font-size:12.5px; color:var(--ink-2); box-shadow:var(--shadow);
}
.narrative .flag{
  display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:6px;
  vertical-align:0;
}
.nsrc{display:block; margin-top:3px; font-size:11px; color:var(--muted)}

/* ---------- cards ---------- */
.cgrid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:10px; margin-top:10px;
}
.card{
  background:var(--panel); border:1px solid var(--rule); border-radius:var(--radius);
  padding:10px 12px 12px; box-shadow:var(--shadow); min-width:0;
}
.card.wide{grid-column:1/-1}
.card-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:8px; min-height:24px;
}
.card-head h3{
  margin:0; font-size:12px; font-weight:700; letter-spacing:.01em; color:var(--ink);
}
.head-opts{display:flex; align-items:center; gap:5px}
.head-opts select{
  padding:3px 6px; font-size:11px; border:1px solid var(--rule-2);
  border-radius:4px; background:#fff; font-family:inherit;
}
.png{
  border:none; background:none; cursor:pointer; color:var(--muted);
  font-size:13px; padding:2px 4px; border-radius:3px;
}
.png:hover{background:var(--panel-2); color:var(--ink)}
.ch{position:relative; height:210px}
.ch.tall{height:260px}

/* ---------- table ---------- */
.tbl{width:100%; border-collapse:collapse; font-size:12px}
.tbl th{
  text-align:left; font-size:9.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid var(--rule-2); padding:6px 8px; font-weight:600;
}
.tbl td{padding:5px 8px; border-bottom:1px solid var(--rule); color:var(--ink-2)}
.tbl td:first-child{color:var(--ink)}
.tbl .r{text-align:right; font-variant-numeric:tabular-nums}
.tbl-wrap{max-height:280px; overflow-y:auto}
.chip{
  font-size:8.5px; padding:1px 4px; border-radius:2px; background:var(--panel-2);
  color:var(--muted); letter-spacing:.05em; vertical-align:1px;
}
.muted{color:var(--muted); font-size:11.5px; margin:8px 2px 0}

/* ---------- map ---------- */
.map-bar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--panel); border:1px solid var(--rule); border-radius:var(--radius);
  padding:7px 10px; box-shadow:var(--shadow);
}
.breadcrumb{font-size:12px; color:var(--ink-2); display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.breadcrumb a{color:var(--accent); text-decoration:none; font-weight:600}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb i{color:var(--rule-2); font-style:normal}
.map-right{display:flex; gap:6px}
#map{
  flex:1; min-height:420px; border-radius:var(--radius); border:1px solid var(--rule);
  box-shadow:var(--shadow); background:#e8eeec;
}
.leaflet-container{font-family:inherit}
.map-tip{
  border:none !important; box-shadow:0 4px 14px rgba(22,35,42,.18) !important;
  border-radius:5px !important; padding:0 !important; background:#fff !important;
}
.map-tip .tip{padding:8px 10px; min-width:150px}
.tip-h{font-weight:700; font-size:12.5px; margin-bottom:3px}
.tip-v{font-size:15px; font-variant-numeric:tabular-nums}
.tip-m{font-size:10.5px; color:var(--muted)}
.tip-src{font-size:10.5px; color:var(--weather); margin-top:2px}
.tip-nd{color:var(--muted); font-style:italic; font-size:12px}
.tip-f{
  margin-top:5px; padding-top:5px; border-top:1px solid var(--rule);
  font-size:10px; color:var(--muted); display:flex; align-items:center; gap:5px;
}
.tip-f i{width:9px; height:9px; border-radius:2px; display:inline-block}
.legend{
  background:rgba(255,255,255,.95); padding:8px 10px; border-radius:5px;
  box-shadow:0 2px 10px rgba(22,35,42,.16); font-size:10.5px; line-height:1.5;
}
.lg-title{
  font-weight:700; font-size:11px; margin-bottom:5px; color:var(--ink);
}
.lg-title span{font-weight:400; color:var(--muted)}
.lg-row{display:flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums}
.lg-row i{width:15px; height:10px; border-radius:2px; display:inline-block; flex:none}
.lg-nd{margin-top:4px; padding-top:4px; border-top:1px solid var(--rule); color:var(--muted)}
.map-label{
  font-size:9.5px; font-weight:600; color:#1c2b33; text-shadow:0 0 3px #fff,0 0 3px #fff;
  white-space:nowrap; pointer-events:none; background:none; border:none;
}
.map-btn{
  border:1px solid var(--rule-2); background:#fff; border-radius:4px;
  padding:4px 8px; font-size:11px; cursor:pointer; font-family:inherit; color:var(--ink);
}
.map-btn:hover{background:var(--panel-2)}
.map-btn.on{background:#12303a; color:#fff; border-color:#12303a}

/* ---------- status ---------- */
.status{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(244,246,245,.9); z-index:9999; font-size:13px; color:var(--ink-2);
}

@media (max-width:1080px){
  .stage{grid-template-columns:1fr; height:auto}
  .panel.right{height:70vh}
}

/* ---------- coverage strip ---------- */
.coverage{
  display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:8px;
  background:var(--panel); border:1px solid var(--rule); border-radius:var(--radius);
  padding:7px 12px; box-shadow:var(--shadow); font-size:11px; color:var(--muted);
}
.cov{display:flex; align-items:center; gap:6px; white-space:nowrap}
.cov i{width:9px; height:9px; border-radius:2px; display:inline-block}
.cov b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
.cov.out b{color:var(--dengue)}
.cov-note{margin-left:auto; font-size:10.5px}

/* ---------- compare panel ---------- */
.cchips{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 9px}
.cchip{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px;
  background:var(--panel-2); border:1px solid var(--rule-2); border-radius:20px;
  padding:2px 9px 2px 7px; color:var(--ink);
}
.cchip i{width:9px; height:9px; border-radius:50%; background:var(--c); flex:none}
.cchip button{
  border:none; background:none; cursor:pointer; color:var(--muted);
  font-size:14px; line-height:1; padding:0 0 0 2px;
}
.cchip button:hover{color:var(--dengue)}
.cmp-grid{display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:12px}
@media (max-width:900px){ .cmp-grid{grid-template-columns:1fr} }