/* ============ NaijaDecides — Broadcast theme ============ */
:root {
  --bg: #0b1220;
  --bg2: #101a2e;
  --panel: #14203a;
  --panel2: #1a2945;
  --line: rgba(255,255,255,.08);
  --txt: #e8eefc;
  --muted: #93a3c0;
  --green: #1db954;
  --accent: #25d366;
  --gold: #f5c451;
  --red: #ff5d5d;
  --radius: 14px;
}
* { box-sizing: border-box; }
html, body { background: var(--bg); color: var(--txt); }
body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
}
a { color: #7fc4ff; }
.text-muted, .form-text { color: var(--muted) !important; }

/* ---- top bar ---- */
.topbar {
  background: linear-gradient(90deg, #07101f 0%, #0d2b1c 55%, #07101f 100%);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 1030;
}
.brand-flag { display:inline-flex; width: 28px; height: 19px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.brand-flag span { flex:1; } .brand-flag .g { background:#1c8a4c; } .brand-flag .w { background:#fff; }
.live-dot { width:10px; height:10px; border-radius:50%; background:var(--red); display:inline-block; animation: pulse 1.4s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(255,93,93,.6)} 70%{box-shadow:0 0 0 9px rgba(255,93,93,0)} 100%{box-shadow:0 0 0 0 rgba(255,93,93,0)} }

/* ---- stat cards ---- */
.stat-card {
  background: linear-gradient(160deg, var(--panel) 0%, var(--bg2) 100%);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .9rem 1rem; height: 100%;
}
.stat-card .label { font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.stat-card .value { font-size: clamp(1.15rem, 2.2vw, 1.7rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.stat-card .sub { font-size:.75rem; color:var(--muted); }

/* ---- panels ---- */
.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.panel-head {
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.7rem 1rem; border-bottom:1px solid var(--line);
  background: rgba(255,255,255,.02);
}
.panel-head h2 { font-size:.95rem; font-weight:700; margin:0; letter-spacing:.02em; }
.panel-body { padding: 1rem; }

/* ---- map ---- */
#map-wrap { position: relative; min-height: 420px; }
#map-svg { width: 100%; height: auto; display:block; cursor: grab; }
.map-unit { stroke:#0b1220; stroke-width:.7; transition: filter .12s ease; cursor:pointer; }
.map-unit:hover { filter: brightness(1.3); stroke:#fff; stroke-width:1.1; }
.map-label { fill:#eef4ff; font-size:9px; pointer-events:none; text-anchor:middle; paint-order:stroke; stroke:#0b1220; stroke-width:2.4px; font-weight:600; }
#map-tooltip {
  position:absolute; pointer-events:none; z-index:40; display:none;
  background:#0a1426ee; border:1px solid var(--line); border-radius:10px;
  padding:.55rem .75rem; font-size:.8rem; min-width: 190px; box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
#map-tooltip .tt-title { font-weight:700; margin-bottom:.2rem; }
#map-breadcrumb button { border:0; background:transparent; color:#7fc4ff; padding:0; font-weight:600; }
.map-legend { display:flex; flex-wrap:wrap; gap:.6rem 1rem; font-size:.78rem; color:var(--muted); }
.map-legend .sw { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:.35rem; vertical-align:-1px; }
#map-loading { position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:rgba(11,18,32,.55); z-index:30; }

/* ---- leaderboard ---- */
.cand-card { background: var(--panel2); border:1px solid var(--line); border-radius: var(--radius); padding: 1rem; position:relative; overflow:hidden; height:100%; }
.cand-card .accent { position:absolute; inset:0 auto 0 0; width:5px; }
.cand-photo { width:64px; height:64px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.25); }
.rank-badge { font-size:1.35rem; line-height:1; }
.cand-votes { font-size:1.25rem; font-weight:800; font-variant-numeric: tabular-nums; }
.party-chip { display:inline-block; padding:.1rem .55rem; border-radius:99px; font-size:.72rem; font-weight:700; color:#fff; }
.vote-bar { height:7px; border-radius:99px; background:rgba(255,255,255,.09); overflow:hidden; }
.vote-bar > div { height:100%; border-radius:99px; transition: width .8s ease; }

/* ---- ticker ---- */
.ticker-wrap { background:#07101f; border-block:1px solid var(--line); overflow:hidden; white-space:nowrap; position:relative; }
.ticker-label { position:absolute; inset:0 auto 0 0; z-index:5; display:flex; align-items:center; padding:0 .9rem; background:var(--red); font-weight:800; font-size:.78rem; letter-spacing:.06em; }
.ticker-track { display:inline-block; padding-left:100%; animation: tickmove 60s linear infinite; }
.ticker-wrap:hover .ticker-track { animation-play-state: paused; }
@keyframes tickmove { 0%{transform:translateX(0)} 100%{transform:translateX(-100%)} }
.tick-item { display:inline-flex; align-items:center; gap:.45rem; padding:.5rem 1.4rem .5rem 0; font-size:.82rem; }
.tick-sep { color:#3b4a66; }

/* ---- tables ---- */
.table-dark-x { --bs-table-bg: transparent; color:var(--txt); margin:0; }
.table-dark-x th { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; border-color:var(--line) !important; white-space:nowrap; }
.table-dark-x td { border-color:var(--line) !important; vertical-align:middle; font-size:.86rem; }
.table-dark-x tbody tr { cursor:pointer; }
.table-dark-x tbody tr:hover { background:rgba(255,255,255,.04); }
.scroll-table { max-height: 430px; overflow:auto; }
.progress-mini { height:6px; background:rgba(255,255,255,.09); border-radius:99px; overflow:hidden; min-width:70px; }
.progress-mini > div { height:100%; }

/* ---- incidents ---- */
.incident { border-left:4px solid var(--gold); background:var(--panel2); border-radius:10px; padding:.65rem .8rem; margin-bottom:.6rem; }
.incident.sev-high { border-left-color: var(--red); }
.incident.sev-medium { border-left-color: #ff9f43; }
.incident.sev-low { border-left-color: var(--gold); }
.sev-pill { font-size:.66rem; font-weight:800; letter-spacing:.05em; padding:.12rem .5rem; border-radius:99px; text-transform:uppercase; }
.sev-pill.high { background:rgba(255,93,93,.18); color:var(--red); }
.sev-pill.medium { background:rgba(255,159,67,.18); color:#ff9f43; }
.sev-pill.low { background:rgba(245,196,81,.18); color:var(--gold); }
.incident-feed { max-height: 420px; overflow:auto; }

/* ---- misc ---- */
.btn-broadcast { background:linear-gradient(135deg,#1db954,#0f7c38); border:0; font-weight:700; }
.search-input, .form-select-dark, .form-control-dark {
  background:#0d1830 !important; border:1px solid var(--line) !important; color:var(--txt) !important;
}
.search-input::placeholder { color:#5c6c8c; }
.modal-content { background:var(--panel); color:var(--txt); border:1px solid var(--line); }
.modal-header, .modal-footer { border-color: var(--line); }
.badge-soft { background:rgba(255,255,255,.08); color:var(--txt); }
.nav-pills .nav-link { color:var(--muted); }
.nav-pills .nav-link.active { background:var(--panel2); color:#fff; }
.chart-box { position:relative; height: 215px; }
.updated-chip { font-size:.72rem; color:var(--muted); }
footer { color:var(--muted); font-size:.78rem; }

/* ---- broadcast mode ---- */
body.broadcast .hide-broadcast { display:none !important; }
body.broadcast { font-size: 1.05rem; }
body.broadcast .stat-card .value { font-size: 2.1rem; }
body.broadcast .topbar { position: static; }

@media (max-width: 768px) {
  .stat-card .value { font-size: 1.05rem; }
  .chart-box { height: 190px; }
  .ticker-label { font-size:.66rem; padding:0 .5rem; }
}
