/* ── RESET & VARIABLES ──────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#f1f5f9;--surface:#fff;--s2:#f8fafc;--border:#e2e8f0;
  --accent:#1d4ed8;--al:#eff6ff;
  --green:#16a34a;--gl:#f0fdf4;
  --yellow:#d97706;--yl:#fffbeb;
  --red:#dc2626;--rl:#fef2f2;
  --purple:#7c3aed;--pl:#f5f3ff;
  --teal:#0d9488;--tl:#f0fdfa;
  --text:#1e293b;--t2:#475569;--muted:#94a3b8;
  --sw:220px
}
body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,sans-serif;font-size:15px}

/* ── HEADER ─────────────────────────────────────────── */
header{
  background:#0f172a;color:#fff;padding:0 20px;height:50px;
  display:flex;align-items:center;justify-content:space-between;
  position:fixed;top:0;left:0;right:0;z-index:100;
  box-shadow:0 2px 8px rgba(0,0,0,.3)
}
.hbrand{display:flex;align-items:center;gap:10px}
.hbrand h1{font-size:15px;font-weight:700;letter-spacing:.3px}
.hbrand p{font-size:11px;opacity:.55}
.hright{display:flex;align-items:center;gap:14px;font-size:12px;opacity:.8}
.ldot{width:7px;height:7px;background:#4ade80;border-radius:50%;
  animation:pulse 1.5s infinite;display:inline-block;margin-right:3px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ── LAYOUT ─────────────────────────────────────────── */
.layout{display:flex;margin-top:50px;min-height:calc(100vh - 50px)}
aside{
  width:var(--sw);background:var(--surface);border-right:1px solid var(--border);
  position:fixed;top:50px;bottom:0;overflow-y:auto;padding:8px 0
}
aside::-webkit-scrollbar{width:3px}
aside::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:2px}
main{margin-left:var(--sw);flex:1;padding:16px;min-width:0}

/* ── SIDEBAR NAVIGATION ─────────────────────────────── */
.nav-home{
  display:flex;align-items:center;gap:8px;padding:9px 12px;
  margin:0 6px 8px;border-radius:7px;cursor:pointer;
  font-weight:600;font-size:13px;text-decoration:none;
  background:var(--al);color:var(--accent);transition:all .15s
}
.nav-home:hover{background:var(--accent);color:#fff}
.nav-home.active{background:var(--accent);color:#fff}
.ngt{
  font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.8px;color:var(--muted);padding:10px 12px 3px
}
.ni{
  display:flex;align-items:center;gap:6px;padding:6px 12px;
  cursor:pointer;font-size:13px;color:var(--t2);
  text-decoration:none;transition:all .12s;border-left:2px solid transparent
}
.ni:hover{background:var(--s2);color:var(--text)}
.ni.active{background:var(--al);color:var(--accent);border-left-color:var(--accent);font-weight:600}
.ndot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.nscore{margin-left:auto;font-size:12px;font-weight:700}

/* ── CARDS ──────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:12px}
.ch{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.ct{font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px}
.cb{padding:12px 14px}

/* ── KPI CARDS ──────────────────────────────────────── */
.krow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.kcard{
  background:var(--surface);border:1px solid var(--border);
  border-radius:9px;padding:13px;position:relative;overflow:hidden
}
.kcard::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:9px 9px 0 0}
.k-b::after{background:var(--accent)}
.k-g::after{background:var(--green)}
.k-y::after{background:var(--yellow)}
.k-r::after{background:var(--red)}
.k-p::after{background:var(--purple)}
.k-t::after{background:var(--teal)}
.kl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.kv{font-size:24px;font-weight:700;line-height:1.1;margin-bottom:2px}
.kv.b{color:var(--accent)}.kv.g{color:var(--green)}.kv.y{color:var(--yellow)}
.kv.r{color:var(--red)}.kv.p{color:var(--purple)}.kv.t{color:var(--teal)}
.ks{font-size:12px;color:var(--muted);line-height:1.3}

/* ── GRID HELPERS ───────────────────────────────────── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:12px}
.g31{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-bottom:12px}
.g13{display:grid;grid-template-columns:1fr 2fr;gap:12px;margin-bottom:12px}

/* ── CHART WRAPPER ──────────────────────────────────── */
.cw{height:190px;position:relative}
.cw.sm{height:150px}
.cw.lg{height:240px}

/* ── TABLE ──────────────────────────────────────────── */
table.dt{width:100%;border-collapse:collapse}
table.dt th{
  font-size:11px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.5px;padding:0 8px 8px;text-align:left;
  border-bottom:1px solid var(--border)
}
table.dt td{padding:8px 8px;border-bottom:1px solid #f1f5f9;font-size:13px;vertical-align:middle}
table.dt tr:last-child td{border:none}
table.dt tr:hover td{background:var(--s2)}

/* ── BADGES ─────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;padding:3px 9px;border-radius:20px;font-weight:600;white-space:nowrap}
.bg{background:#dcfce7;color:#15803d;border:1px solid #bbf7d0}
.by{background:#fef9c3;color:#92400e;border:1px solid #fde68a}
.br{background:#fee2e2;color:#b91c1c;border:1px solid #fecaca}
.bb{background:#dbeafe;color:#1e40af;border:1px solid #bfdbfe}
.bt{background:#ccfbf1;color:#0f766e;border:1px solid #99f6e4}
.bp{background:#ede9fe;color:#6d28d9;border:1px solid #ddd6fe}

/* ── PROGRESS BAR ───────────────────────────────────── */
.pbar-wrap{height:6px;background:#f1f5f9;border-radius:3px;overflow:hidden;min-width:60px}
.pbar{height:100%;border-radius:3px}

/* ── ALERT ITEMS ────────────────────────────────────── */
.al-item{padding:9px 12px;border-radius:7px;margin-bottom:6px;display:flex;gap:8px;font-size:13px;line-height:1.5}
.al-item:last-child{margin-bottom:0}
.al-item.r{background:var(--rl);border:1px solid #fecaca}
.al-item.y{background:var(--yl);border:1px solid #fde68a}
.al-item.b{background:var(--al);border:1px solid #bfdbfe}
.al-item.g{background:var(--gl);border:1px solid #bbf7d0}

/* ── INSIGHT BOX ────────────────────────────────────── */
.insight{
  background:var(--s2);border:1px solid var(--border);
  border-left:3px solid var(--accent);border-radius:8px;
  padding:11px 14px;font-size:13px;line-height:1.6;color:var(--t2)
}
.insight strong{
  display:block;margin-bottom:4px;font-size:11px;
  text-transform:uppercase;letter-spacing:.5px;color:var(--accent)
}

/* ── OPD HEADER ─────────────────────────────────────── */
.opd-hd{
  display:flex;align-items:center;gap:12px;margin-bottom:14px;
  padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:10px
}
.opd-icon{width:44px;height:44px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.opd-name{font-size:18px;font-weight:700}
.opd-sub{font-size:12px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:8px}

/* ── MINI METRICS GRID ──────────────────────────────── */
.mrow{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.mi{background:var(--s2);border-radius:7px;padding:9px 11px}
.mi-l{font-size:11px;color:var(--muted);margin-bottom:2px;text-transform:uppercase;letter-spacing:.4px}
.mi-v{font-size:15px;font-weight:700}

/* ── AREA CARDS (HEALTH TEMPLATE) ───────────────────── */
.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.area-card{border-radius:8px;padding:9px 11px}
.area-name{font-weight:600;font-size:13px;margin-bottom:2px}
.area-val{font-size:17px;font-weight:700}
.area-sub{font-size:11px;opacity:.8;margin-top:1px}
.area-ok{background:var(--gl);color:#14532d}
.area-warn{background:var(--yl);color:#78350f}
.area-crit{background:var(--rl);color:#7f1d1d}

/* ── SIAGA BANNER ───────────────────────────────────── */
.siaga{border-radius:8px;padding:11px 16px;margin-bottom:12px;display:flex;align-items:center;gap:12px}
.siaga.s1{background:#fef2f2;border:1px solid #fecaca}
.siaga.s2{background:#fffbeb;border:1px solid #fde68a}
.siaga.s3{background:var(--gl);border:1px solid #bbf7d0}
.siaga-icon{font-size:22px}
.siaga-title{font-size:14px;font-weight:700}
.siaga-sub{font-size:12px;color:var(--t2);margin-top:2px}

/* ── PROW (TARGET PROGRESS) ─────────────────────────── */
.prow{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:8px}
.prow:last-child{margin-bottom:0}
.prow-l{width:150px;color:var(--t2);flex-shrink:0;font-size:13px}
.prow-v{width:34px;text-align:right;font-size:12px;color:var(--muted);flex-shrink:0}

/* ── PAGE TITLE ─────────────────────────────────────── */
.pt{font-size:18px;font-weight:700;margin-bottom:2px}
.ps{font-size:13px;color:var(--muted);margin-bottom:12px}

/* ── DATA FRESHNESS TAG ──────────────────────────────── */
.data-tag{font-size:11px;padding:2px 8px;border-radius:10px;font-weight:600;display:inline-flex;align-items:center;gap:3px;white-space:nowrap;flex-shrink:0}
.data-tag.fresh,.data-tag.ok{background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0}
.data-tag.warn{background:#fffbeb;color:#d97706;border:1px solid #fde68a}
.data-tag.stale{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}
.ch-right{display:flex;align-items:center;gap:6px}