/* ============================================================
 *  TEMA — Risk Command Center (dark command-center)
 *  Dipisah dari index.html supaya konsisten dengan skema dashboard
 *  lain (dashboard-contingency-plan, stress-test-dashboard,
 *  rcc-disaster-monitoring): index.html (layout) + styles.css (tema)
 *  + config.js (config API) + data.js (data lokal) + app.js (logika).
 * ============================================================ */
:root{
  /* --bg mengikuti dashboard-contingency-plan (navy nyaris hitam) */
  --bg:#000229; --main:#000229; --panel:#0e1a2e; --panel2:#0c1828; --raise:rgba(17,32,52,.33);
  --line:#1b2c45; --line2:#162338; --sidebar:#0a1220;
  --ink:#e9eff7; --mut:#8a9bb3; --mut2:#5f718c;
  --blue:#2a86ff; --sky:#00aff0; --violet:#8b6dff;
  --red:#ff5560; --orange:#ff944d; --yellow:#f5c83a; --green:#36c97b;
  --r:14px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  font-size:13px;line-height:1.45;
  min-height:100vh;overflow-x:hidden;
}
.mono{font-family:ui-monospace,"Cascadia Code","Consolas",monospace;font-variant-numeric:tabular-nums}
::selection{background:rgba(0,175,240,.3)}

/* ---------- Main ---------- */
/* Latar belakang (glow ganda + grid halus) mengikuti dashboard-contingency-plan */
.main{min-width:0;max-width:1320px;margin:0 auto;padding:28px 32px 60px;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(34,211,238,.07), transparent 60%),
    radial-gradient(ellipse 900px 600px at 100% 0%, rgba(167,139,250,.06), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0px, rgba(255,255,255,.015) 1px, transparent 1px, transparent 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0px, rgba(255,255,255,.015) 1px, transparent 1px, transparent 34px),
    var(--main)}
.hdr{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-bottom:20px}
.hdr .ti{font-size:21px;font-weight:800;letter-spacing:.2px;display:flex;align-items:center;gap:9px;text-wrap:balance}
.hdr .ti .gl{font-size:19px}
.srcbadge{margin-left:auto;font-size:10.5px;font-weight:700;padding:5px 11px;border-radius:7px;
  border:1px solid var(--line);color:var(--mut);white-space:nowrap}

.panel{border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,var(--panel),var(--panel2));
  padding:17px 18px;min-width:0}
.ph{display:flex;align-items:center;gap:9px;margin-bottom:15px}
.ph .tt{font-size:14px;font-weight:800;letter-spacing:.2px;display:flex;align-items:center;gap:8px}
.ph .gl{font-size:15px}
.ph .meta{margin-left:auto;font-size:10.5px;color:var(--mut2);letter-spacing:.3px}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:16px}
.kpis.kpis-row{grid-template-columns:repeat(7,1fr);gap:10px;margin-bottom:0}
@media(max-width:1100px){.kpis.kpis-row{grid-template-columns:repeat(4,1fr)}}
@media(max-width:640px){.kpis.kpis-row{grid-template-columns:repeat(2,1fr)}}
.kpis-row .kpi{padding:11px 10px}
.kpis-row .kl{font-size:8.5px;letter-spacing:.6px}
.kpis-row .kv{font-size:18px;margin-top:7px}
.kpis-row .kd{font-size:9px;margin-top:6px}
.kpi{border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;
  background:linear-gradient(180deg,var(--panel),var(--panel2))}
.kpi .kl{font-size:10px;font-weight:700;letter-spacing:1px;color:var(--mut);text-transform:uppercase}
.kpi .kv{font-size:27px;font-weight:800;letter-spacing:-.5px;margin-top:9px;line-height:1}
.kpi .kd{font-size:10.5px;margin-top:9px;font-weight:600}
.v-or{color:var(--orange)} .v-rd{color:var(--red)}

.row2{display:grid;gap:16px;margin-bottom:16px}
.r-score{grid-template-columns:1.32fr 1fr}
.r-risks{grid-template-columns:1.32fr 1fr}
@media(max-width:1080px){.r-score,.r-risks{grid-template-columns:1fr}}

/* ---------- Scrollable panels ---------- */
.scrollbox{max-height:414px;overflow-y:auto;padding-right:6px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.scrollbox::-webkit-scrollbar{width:8px}
.scrollbox::-webkit-scrollbar-track{background:transparent}
.scrollbox::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.scrollbox::-webkit-scrollbar-thumb:hover{background:var(--mut2)}

/* ---------- Key Parameter achievement ---------- */
.pmgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
@media(max-width:720px){.pmgrid{grid-template-columns:1fr}}
.pm-row{border:1px solid var(--line2);border-radius:10px;padding:12px 14px;background:var(--raise)}
.pm-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.pm-tag{font-size:8px;font-weight:800;letter-spacing:.5px;padding:3px 6px;border-radius:5px;flex:0 0 auto;text-transform:uppercase}
.pm-tag.fin{background:rgba(139,109,255,.18);color:#c3b2ff}
.pm-tag.ops{background:rgba(0,175,240,.18);color:#7fd6f7}
.pm-name{flex:1;min-width:0;font-size:12px;font-weight:700;color:#d3deeb;line-height:1.3}
.pm-pct{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;flex:0 0 auto}
.pm-bar{height:7px;border-radius:4px;background:#1a2a42;overflow:hidden;margin-bottom:7px}
.pm-bar i{display:block;height:100%;border-radius:4px;width:0;transition:width 1.1s cubic-bezier(.4,0,.2,1)}
.pm-sub{font-size:10px;color:var(--mut);font-variant-numeric:tabular-nums}
.pm-sub b{color:#aebfd4;font-weight:700}

/* ---------- AI advisor block ---------- */
.aibadge{font-size:10.5px;font-weight:800;letter-spacing:.8px;padding:4px 10px;border-radius:7px;
  background:linear-gradient(90deg,#7c5cff,#a674ff);color:#fff}
.advisor-sub{font-size:13.5px;color:var(--mut);font-weight:600}
.ai-brief{font-size:14px;line-height:1.6;color:#d3deeb}
.ai-brief b{color:#fff}.ai-brief .hl{color:var(--orange);font-weight:800}
.ai-rec{margin-top:14px;border:1px solid rgba(245,200,58,.3);background:rgba(245,200,58,.07);
  border-radius:10px;padding:12px 13px;font-size:13.5px;line-height:1.5}
.ai-rec b{color:var(--yellow)}

/* ---------- Critical + alerts ---------- */
.crit{display:flex;align-items:center;gap:14px;padding:13px 6px;border-bottom:1px solid var(--line2)}
.crit:last-child{border-bottom:none}
.crit .lb{width:4px;align-self:stretch;border-radius:3px;flex:0 0 auto}
.crit .body{flex:1;min-width:0}
.crit .tname{font-size:13.5px;font-weight:700;line-height:1.25}
.crit .cmeta{font-size:10.5px;color:var(--mut);margin-top:3px}.crit .cmeta b{color:#aebfd4;font-weight:600}
.crit .act{font-size:10.5px;color:var(--mut2);margin-top:5px}.crit .act .ar{color:var(--sky);font-weight:800}.crit .act b{color:#9fb6cf;font-weight:600}
.crit .sco{font-size:21px;font-weight:800;text-align:right;min-width:34px;font-variant-numeric:tabular-nums}
.sev{font-size:9.5px;font-weight:800;letter-spacing:.5px;padding:4px 11px;border-radius:7px;white-space:nowrap}
.sev.c{background:rgba(255,85,96,.16);color:#ff8a92;border:1px solid rgba(255,85,96,.4)}
.sev.h{background:rgba(255,148,77,.15);color:var(--orange);border:1px solid rgba(255,148,77,.4)}
.sev.m{background:rgba(245,200,58,.13);color:var(--yellow);border:1px solid rgba(245,200,58,.4)}
.alert{display:flex;gap:13px;padding:12px 4px;border-bottom:1px solid var(--line2)}
.alert:last-child{border-bottom:none}
.alert .ad{width:11px;height:11px;border-radius:50%;flex:0 0 auto;margin-top:3px}
.alert .ab{flex:1;min-width:0}.alert .an{font-size:12.5px;font-weight:700}
.alert .at{font-size:10.5px;color:var(--mut);margin-top:3px;line-height:1.4}
.alert .ag{font-size:9.5px;color:var(--mut2);white-space:nowrap}

/* ---------- KPI Cards ---------- */
.kpigrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
@media(max-width:900px){.kpigrid{grid-template-columns:1fr}}
.kpi-stack{display:flex;flex-direction:column;gap:14px;min-width:0}
.kpi-stack .kcard{flex:1;min-height:0}
.kcard{border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:12px;min-width:0;
  box-shadow:0 4px 16px rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08)}
.kc-red{background:linear-gradient(160deg,#9a1319,#611013)}
.kc-olive{background:linear-gradient(160deg,#7a7013,#4f480d)}
.kc-green{background:linear-gradient(160deg,#256b3c,#153f24)}
.kc-head{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.kc-ic{font-size:23px;line-height:1}
.kc-title{font-size:19px;font-weight:800;color:#ffe14d;letter-spacing:.2px}
.kc-unit{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.75)}
.kc-body{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.kc-group{display:flex;flex-direction:column;gap:8px}
.kc-sub{font-size:11px;font-weight:800;color:#ffe14d}
.kc-row{display:flex;gap:10px}
.kc-metric{flex:1;min-width:0;text-align:center}
.kc-metric .ml{font-size:9px;color:rgba(255,255,255,.72);margin-bottom:6px;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.kc-pill{display:flex;align-items:center;justify-content:center;width:100%;padding:8px 6px;
  border-radius:999px;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.kc-pill.fill-red{background:#ff2b2f;color:#fff}
.kc-pill.fill-orange{background:#ffa233;color:#251600}
.kc-pill.fill-green{background:#3ddc78;color:#04220f}
.kc-pill.outline{background:rgba(0,0,0,.15);border:2px solid rgba(255,255,255,.85);color:#fff}
.kc-update{align-self:flex-end;font-size:10px;font-style:italic;color:rgba(255,255,255,.7)}
.kc-update b{font-weight:700;color:#fff}