/* ═══════════════════════════════════════════════════════════════
   Multi-Hazard EWS — Indus Basin & CPEC Corridor
   Dark Tactical Operations Centre Theme
═══════════════════════════════════════════════════════════════ */

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: #020c1a; color: #c8e6f8;
  font-family: 'Segoe UI', Tahoma, sans-serif; font-size: 13px;
}

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #020c1a; }
::-webkit-scrollbar-thumb { background: rgba(0,200,255,.4); border-radius: 2px; }

#app { display: flex; flex-direction: column; height: 100vh; width: 100vw; }

/* ── Header ─────────────────────────────────────────────────── */
#hdr {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: 14px;
  height: 54px; padding: 0 16px;
  background: #040d1a;
  border-bottom: 1px solid rgba(0,200,255,.22);
  flex-shrink: 0; position: relative; z-index: 1000;
}
#hdr::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,200,255,.6), transparent);
}

.hdr-brand { display: flex; align-items: center; gap: 10px; }
.brand-title {
  font-size: 1rem; font-weight: 700; letter-spacing: 3px; color: #00c8ff;
  text-shadow: 0 0 16px rgba(0,200,255,.4); line-height: 1.1;
}
.brand-sub { font-size: .55rem; color: rgba(200,230,248,.4); letter-spacing: 1px; margin-top: 1px; }

.hdr-center { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.live-badge {
  display: flex; align-items: center; gap: 7px;
  background: rgba(255,20,60,.12); border: 1px solid rgba(255,20,60,.35);
  padding: 3px 12px; border-radius: 12px;
  font-size: .62rem; font-weight: 700; letter-spacing: 2px; color: #ff3d5a;
  animation: badgePulse 2.5s infinite;
}
@keyframes badgePulse { 0%,100%{box-shadow:none} 50%{box-shadow:0 0 10px rgba(255,20,60,.3)} }
.live-dot {
  width: 6px; height: 6px; background: #ff1744; border-radius: 50%;
  animation: dotBlink 1.1s infinite;
}
@keyframes dotBlink { 0%,100%{opacity:1} 50%{opacity:.1} }

.hdr-feeds { display: flex; gap: 18px; }
.hfeed {
  display: flex; flex-direction: column; align-items: center;
  font-size: .54rem; letter-spacing: 1.5px; color: rgba(200,230,248,.4); text-transform: uppercase;
}
.hfeed-v { font-family: 'Courier New', monospace; font-size: .9rem; color: #00c8ff; font-weight: 700; line-height: 1.1; }

.hdr-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.data-status {
  display: flex; align-items: center; gap: 7px;
  background: rgba(0,200,255,.06); border: 1px solid rgba(0,200,255,.12);
  padding: 5px 12px; border-radius: 20px;
  font-family: 'Courier New', monospace; font-size: .62rem; color: rgba(200,230,248,.5);
}
.ds-dot {
  width: 7px; height: 7px; background: #00e676; border-radius: 50%;
  box-shadow: 0 0 6px #00e676; animation: dsPulse 2s infinite;
}
@keyframes dsPulse { 0%,100%{opacity:1} 50%{opacity:.3} }

.clock-wrap, .refresh-wrap { text-align: right; }
.clock-lbl { font-size: .5rem; letter-spacing: 2px; color: rgba(200,230,248,.3); text-transform: uppercase; }
.clock-time {
  font-family: 'Courier New', monospace; font-size: 1.2rem;
  font-weight: 700; color: #00c8ff; letter-spacing: 2px;
}
.clock-date { font-size: .56rem; color: rgba(200,230,248,.35); }
.ref-val { font-family: 'Courier New', monospace; font-size: .9rem; color: #1de9b6; letter-spacing: 2px; }

/* ── Ticker ──────────────────────────────────────────────────── */
#ticker {
  height: 24px; flex-shrink: 0;
  background: rgba(255,20,60,.06);
  border-bottom: 1px solid rgba(255,20,60,.18);
  display: flex; align-items: center; overflow: hidden;
}
.ticker-tag {
  flex-shrink: 0; padding: 0 12px; background: #b00020;
  font-size: .6rem; font-weight: 700; letter-spacing: 2px; color: #fff;
  height: 100%; display: flex; align-items: center;
}
.ticker-track {
  display: flex; white-space: nowrap;
  animation: tickerScroll 40s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }
@keyframes tickerScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.t-item {
  padding: 0 20px; font-family: 'Courier New', monospace; font-size: .62rem;
  border-right: 1px solid rgba(255,255,255,.07);
  height: 24px; display: inline-flex; align-items: center; gap: 6px;
}
.t-crit{color:#ff3d5a} .t-high{color:#ff8c00} .t-watch{color:#ffd600} .t-ok{color:#00e676}

/* ── KPI Strip ───────────────────────────────────────────────── */
#kpi-strip {
  display: grid; grid-template-columns: repeat(6,1fr);
  flex-shrink: 0; border-bottom: 1px solid rgba(0,200,255,.1);
}
.kpi-card {
  padding: 7px 12px; background: #040d1a;
  border-right: 1px solid rgba(0,200,255,.07);
  position: relative; overflow: hidden; transition: background .2s; cursor: default;
}
.kpi-card:hover { background: #051828; }
.kpi-card:last-child { border-right: none; }
.kpi-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: var(--c, #00c8ff); transform: scaleX(.2); transform-origin: left; transition: .4s;
}
.kpi-card:hover::after { transform: scaleX(1); }
.kpi-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.kpi-lbl { font-size: .52rem; color: rgba(200,230,248,.4); letter-spacing: 1px; text-transform: uppercase; }
.kpi-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--c, #00c8ff); animation: ledBlink 3s infinite;
}
@keyframes ledBlink { 0%,100%{opacity:1} 50%{opacity:.2} }
.kpi-val {
  font-family: 'Courier New', monospace; font-size: 1.35rem; font-weight: 700;
  color: var(--c, #00c8ff); line-height: 1; transition: color .3s;
}
.kpi-val.flash { animation: kpiFlash .5s; }
@keyframes kpiFlash { 0%,100%{opacity:1} 40%{opacity:.1} }
.kpi-sub { font-size: .54rem; color: rgba(200,230,248,.3); margin-top: 2px; }
.kpi-chip {
  font-size: .56rem; padding: 1px 6px; border-radius: 3px;
  margin-top: 3px; display: inline-block;
  font-family: 'Courier New', monospace;
  background: var(--cb, rgba(0,200,255,.08)); color: var(--c, #00c8ff);
}

/* ── Main Grid ───────────────────────────────────────────────── */
#main-grid {
  display: grid; grid-template-columns: 210px 1fr 245px;
  flex: 1; min-height: 0; overflow: hidden;
}

/* ── Left Panel ──────────────────────────────────────────────── */
#left-panel {
  background: #040d1a;
  border-right: 1px solid rgba(0,200,255,.1);
  display: flex; flex-direction: column; overflow: hidden;
}
.panel-hdr {
  padding: 6px 12px; background: #030810;
  border-bottom: 1px solid rgba(0,200,255,.1);
  font-size: .58rem; font-weight: 700; letter-spacing: 3px; color: #00c8ff;
  text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
}
.ptag {
  font-size: .5rem; color: rgba(200,230,248,.3);
  background: rgba(0,200,255,.06); padding: 1px 5px; border-radius: 2px; letter-spacing: 1px;
}
.layer-list { flex-shrink: 0; }
.lrow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 12px; border-bottom: 1px solid rgba(0,200,255,.04);
  cursor: pointer; transition: background .15s;
}
.lrow:hover { background: rgba(0,200,255,.04); }
.ll { display: flex; align-items: center; gap: 7px; font-size: .72rem; color: rgba(200,230,248,.65); }
.ldot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sw { position: relative; width: 28px; height: 15px; flex-shrink: 0; }
.sw input { opacity: 0; width: 0; height: 0; position: absolute; }
.sw-t {
  position: absolute; inset: 0; background: rgba(255,255,255,.1);
  border-radius: 15px; cursor: pointer; transition: .2s;
}
.sw-t::before {
  content: ''; position: absolute; width: 11px; height: 11px; top: 2px; left: 2px;
  background: #fff; border-radius: 50%; transition: .2s;
}
.sw input:checked ~ .sw-t { background: #00c8ff; }
.sw input:checked ~ .sw-t::before { transform: translateX(13px); }

.ctrl-section { padding: 8px 12px; border-top: 1px solid rgba(0,200,255,.08); flex-shrink: 0; }
.ctrl-lbl { font-size: .55rem; color: rgba(200,230,248,.35); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 3px; }
.ctrl-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ctrl-slider {
  flex: 1; -webkit-appearance: none; height: 3px;
  background: rgba(0,200,255,.2); border-radius: 2px; outline: none;
}
.ctrl-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px;
  border-radius: 50%; background: #00c8ff; cursor: pointer;
  box-shadow: 0 0 6px rgba(0,200,255,.6);
}
.ctrl-val { font-family: 'Courier New', monospace; font-size: .65rem; color: #00c8ff; min-width: 52px; text-align: right; }
.api-inp {
  width: 100%; background: rgba(0,200,255,.04); border: 1px solid rgba(0,200,255,.15);
  color: #c8e6f8; padding: 6px 8px; border-radius: 4px;
  font-family: 'Courier New', monospace; font-size: .64rem; margin-bottom: 6px; outline: none;
}
.api-inp:focus { border-color: #00c8ff; }
.btn-refresh {
  width: 100%; background: linear-gradient(135deg, #0d47a1, #00c8ff);
  border: none; color: #000; font-size: .74rem; font-weight: 700; letter-spacing: 2px;
  padding: 8px; border-radius: 4px; cursor: pointer; transition: opacity .2s, transform .1s;
}
.btn-refresh:hover { opacity: .85; transform: translateY(-1px); }
.btn-refresh:disabled { opacity: .4; cursor: not-allowed; transform: none; }

#proc-log {
  flex: 1; overflow-y: auto; padding: 6px 10px;
  font-family: 'Courier New', monospace; font-size: .56rem;
  color: rgba(200,230,248,.35); line-height: 1.8;
  border-top: 1px solid rgba(0,200,255,.07);
}
.log-ok { color: #00e676; } .log-warn { color: #ffd600; } .log-run { color: #00c8ff; }

/* ── Map ─────────────────────────────────────────────────────── */
#map-wrap { position: relative; background: #020810; min-height: 0; }
#map { width: 100%; height: 100%; }
.map-ov {
  position: absolute; z-index: 800;
  background: rgba(2,8,16,.9); border: 1px solid rgba(0,200,255,.25);
  border-radius: 5px; backdrop-filter: blur(4px);
}
#m-countdown {
  top: 10px; right: 10px; padding: 6px 11px;
  font-family: 'Courier New', monospace; font-size: .6rem; color: rgba(200,230,248,.45);
}
#m-countdown b { color: #1de9b6; font-weight: 700; }
#m-legend { bottom: 34px; right: 10px; padding: 9px 12px; font-size: .64rem; }
.leg-title { font-size: .52rem; letter-spacing: 1.5px; color: rgba(200,230,248,.3); margin-bottom: 6px; text-transform: uppercase; }
.leg-row { display: flex; align-items: center; gap: 6px; color: rgba(200,230,248,.55); margin: 3px 0; }
.leg-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.leg-line { width: 14px; height: 2.5px; border-radius: 1px; flex-shrink: 0; }
.leg-divider { border-top: 1px solid rgba(255,255,255,.07); margin: 5px 0 3px; }
#m-src {
  position: absolute; bottom: 4px; left: 8px; z-index: 800;
  font-size: .5rem; color: rgba(255,255,255,.2); font-family: 'Courier New', monospace;
}

/* Leaflet popup */
.leaflet-popup-content-wrapper {
  background: #041525 !important; color: #c8e6f8 !important;
  border: 1px solid rgba(0,200,255,.3) !important; border-radius: 6px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.8) !important;
}
.leaflet-popup-tip { background: #041525 !important; }
.leaflet-popup-content { font-size: .72rem !important; line-height: 1.65 !important; margin: 9px 12px !important; }
.pu-t { font-weight: 700; font-size: .85rem; color: #00c8ff; margin-bottom: 5px; padding-bottom: 4px; border-bottom: 1px solid rgba(0,200,255,.18); }
.pu-r { display: flex; justify-content: space-between; gap: 14px; }
.pu-k { color: rgba(200,230,248,.4); }
.pu-v { color: #c8e6f8; font-family: 'Courier New', monospace; font-size: .68rem; }

/* ── Right Panel ─────────────────────────────────────────────── */
#right-panel {
  background: #040d1a; border-left: 1px solid rgba(0,200,255,.1);
  display: flex; flex-direction: column; overflow: hidden;
}
.alert-feed { overflow-y: auto; flex: 0 0 auto; max-height: 195px; }
.acard {
  padding: 7px 11px; border-left: 3px solid var(--ac, #00c8ff);
  border-bottom: 1px solid rgba(0,200,255,.06);
  position: relative; transition: background .15s; cursor: default;
}
.acard:hover { background: rgba(255,255,255,.02); }
.acard.crit { --ac: #ff1744; animation: acritGlow 2s infinite; }
.acard.high { --ac: #ff6d00; }
.acard.watch { --ac: #ffd600; }
.acard.ok { --ac: #00e676; }
@keyframes acritGlow { 0%,100%{background:transparent} 50%{background:rgba(255,23,68,.05)} }
.acard-name { font-size: .76rem; font-weight: 600; color: #c8e6f8; padding-right: 40px; }
.acard-meta { font-family: 'Courier New', monospace; font-size: .57rem; color: rgba(200,230,248,.35); margin-top: 1px; }
.acard-pct {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-family: 'Courier New', monospace; font-size: 1rem; font-weight: 700; color: var(--ac, #00c8ff);
}
.mini-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: rgba(0,200,255,.07); flex-shrink: 0;
}
.mini-cell { background: #040d1a; padding: 6px 9px; text-align: center; }
.mini-val { font-family: 'Courier New', monospace; font-size: 1rem; font-weight: 700; color: #00c8ff; }
.mini-lbl { font-size: .5rem; color: rgba(200,230,248,.3); text-transform: uppercase; letter-spacing: 1px; margin-top: 1px; }
.chart-pane { flex: 1; min-height: 0; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.reach-sel {
  width: 100%; background: rgba(0,200,255,.05); border: 1px solid rgba(0,200,255,.18);
  color: #c8e6f8; padding: 5px 8px; border-radius: 4px;
  font-family: 'Courier New', monospace; font-size: .64rem;
}
.reach-sel:focus { outline: none; border-color: #00c8ff; }
.chart-canvas-wrap { flex: 1; min-height: 0; position: relative; }

/* ── Bottom Tabs ─────────────────────────────────────────────── */
#bottom-section {
  border-top: 2px solid rgba(0,200,255,.2);
  background: #040d1a; flex-shrink: 0;
  height: 210px; display: flex; flex-direction: column;
}
.tab-bar { display: flex; border-bottom: 1px solid rgba(0,200,255,.08); overflow-x: auto; flex-shrink: 0; }
.tab-btn {
  padding: 6px 14px; background: none; border: none;
  color: rgba(200,230,248,.3); font-size: .6rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  cursor: pointer; border-bottom: 2px solid transparent;
  white-space: nowrap; flex-shrink: 0; transition: all .2s;
}
.tab-btn:hover { color: rgba(200,230,248,.55); }
.tab-btn.active { color: #00c8ff; border-bottom-color: #00c8ff; }
.tab-panel { display: none; padding: 9px 13px; overflow: auto; flex: 1; }
.tab-panel.active { display: block; }

/* Table */
.data-tbl { width: 100%; border-collapse: collapse; font-size: .67rem; }
.data-tbl thead th {
  position: sticky; top: 0; background: #030810;
  color: #00c8ff; font-family: 'Courier New', monospace;
  font-size: .55rem; letter-spacing: 1px; text-transform: uppercase;
  padding: 5px 8px; text-align: left;
  border-bottom: 1px solid rgba(0,200,255,.2); white-space: nowrap;
}
.data-tbl tbody tr { border-bottom: 1px solid rgba(0,200,255,.05); transition: background .12s; }
.data-tbl tbody tr:hover { background: rgba(0,200,255,.04); }
.data-tbl td { padding: 4px 8px; color: rgba(200,230,248,.55); }
.data-tbl td:first-child { color: #c8e6f8; font-weight: 600; }
.bdg {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  font-size: .53rem; font-weight: 700; font-family: 'Courier New', monospace;
}
.bc { background: rgba(255,23,68,.18); color: #ff3d5a; }
.bh { background: rgba(255,109,0,.18); color: #ff8c00; }
.bm { background: rgba(255,214,0,.15); color: #ffd600; }
.bl { background: rgba(0,230,118,.1); color: #00e676; }
.bp { background: rgba(0,200,255,.1); color: #00c8ff; }

.chart-row { display: flex; gap: 10px; height: 160px; }
.chart-box { flex: 1; background: #030810; border: 1px solid rgba(0,200,255,.1); border-radius: 5px; padding: 9px; }

.dem-stats-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(0,200,255,.08); border-radius: 5px; overflow: hidden; margin-bottom: 8px; }
.dem-stat { background: #030810; padding: 8px; text-align: center; }
.dem-val { display: block; font-family: 'Courier New', monospace; font-size: .95rem; font-weight: 700; color: #1de9b6; }
.dem-lbl { display: block; font-size: .5rem; color: rgba(200,230,248,.3); text-transform: uppercase; margin-top: 2px; }

.brief-box {
  background: #030810; border: 1px solid rgba(0,200,255,.1); border-radius: 5px;
  padding: 10px 14px; font-family: 'Courier New', monospace; font-size: .6rem;
  line-height: 1.85; color: rgba(200,230,248,.6); white-space: pre-wrap;
  max-height: 130px; overflow-y: auto; margin-bottom: 7px;
}
.dl-row { display: flex; gap: 7px; flex-wrap: wrap; }
.btn-dl {
  background: rgba(0,200,255,.07); border: 1px solid rgba(0,200,255,.22);
  color: #00c8ff; font-size: .58rem; padding: 5px 10px; border-radius: 4px;
  cursor: pointer; font-family: 'Courier New', monospace; letter-spacing: 1px; transition: background .2s;
}
.btn-dl:hover { background: rgba(0,200,255,.18); }

/* ── Footer ──────────────────────────────────────────────────── */
#footer {
  padding: 4px 14px; background: #030810;
  border-top: 1px solid rgba(0,200,255,.08);
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'Courier New', monospace; font-size: .5rem;
  color: rgba(200,230,248,.25); flex-shrink: 0;
}