/* Extracted from bisatumbuh_soh_performance_v15.html lines 210-305.
   DOI Hyper-Monitor (#page-doi)
   Phase 1: verbatim copy - no rule added, removed, or reordered. */
/* ===== DOI Hyper-Monitor page styles (scoped to #page-doi) ===== */
#page-doi *{margin:0;padding:0;box-sizing:border-box}
#page-doi{background:var(--bg,#F6F7F9);color:#22303c;font-family:'Nunito Sans',system-ui,-apple-system,sans-serif;line-height:1.5;
  --green:#7CBA43;--green-d:#5f9a30;--blue:#0F4583;--navy:#0A2E58;--ink:#0A2E58;
  --t1:#22303c;--t2:#5c6b78;--t3:#8a97a3;--card:#fff;--border:#e3eae6;--soft:#eef2f7;
  --red:#d64545;--amber:#f5a623;--orange:#e8743b}
#page-doi h1,#page-doi h2,#page-doi .kpi .val,#page-doi .dm-logo{font-family:'Quicksand','Nunito Sans',system-ui,sans-serif}
#page-doi .wrap{max-width:1400px;margin:0 auto;padding:22px 26px 40px}
/* top nav bar */
#page-doi .dm-nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 0 6px}
#page-doi .dm-brand{display:flex;align-items:center;gap:10px;margin-right:6px}
#page-doi .dm-brand img{height:38px;width:auto;display:block}
#page-doi .dm-tabs{display:flex;gap:4px;background:#eef2f7;border-radius:12px;padding:5px}
#page-doi .dm-tab{font-family:inherit;font-size:13px;font-weight:700;border:none;background:transparent;color:var(--t2);padding:8px 16px;border-radius:9px;cursor:pointer;transition:.15s;white-space:nowrap}
#page-doi .dm-tab:hover{color:var(--navy)}
#page-doi .dm-tab.active{background:var(--blue);color:#fff;box-shadow:0 2px 8px rgba(15,69,131,.28)}
#page-doi .dm-meta{margin-left:auto;text-align:right;font-size:12px;color:var(--t3)}
#page-doi .dm-meta b{color:var(--navy);font-size:13px}
/* eyebrow + title */
#page-doi h1{font-size:33px;font-weight:700;color:var(--navy);letter-spacing:-.5px;margin:8px 0 0}
/* cadence banner */
#page-doi .dm-cadence{display:flex;align-items:flex-start;gap:16px;background:#f2f8ec;border:1px solid #dcecc9;border-radius:14px;padding:16px 20px;margin:20px 0 22px;font-size:13.5px;color:#3f5233}
#page-doi .dm-cadence .tag{flex-shrink:0;font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--green-d);background:#e2f0d3;border-radius:20px;padding:5px 12px;margin-top:1px}
#page-doi .dm-cadence b{color:var(--navy)}
/* KPI cards */
#page-doi .dm-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:22px}
#page-doi .kpi{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 20px;box-shadow:0 1px 3px rgba(31,45,58,.04)}
#page-doi .kpi .val{font-size:27px;font-weight:700;line-height:1.05;color:var(--navy)}
#page-doi .kpi.red .val{color:var(--orange)}
#page-doi .kpi.blue .val{color:var(--blue)}
#page-doi .kpi.green .val{color:var(--green-d)}
#page-doi .kpi.amber .val{color:var(--amber)}
#page-doi .kpi .lab{font-size:12px;color:var(--t2);margin-top:8px;line-height:1.4}
/* filter chips */
#page-doi .dm-chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:20px}
#page-doi .chip{font-family:inherit;font-size:12.5px;font-weight:700;border:1.5px solid var(--border);background:#fff;color:var(--t2);padding:8px 17px;border-radius:22px;cursor:pointer;transition:.15s}
#page-doi .chip:hover{border-color:var(--green);color:var(--navy)}
#page-doi .chip.active{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 2px 8px rgba(15,69,131,.25)}
/* panel */
#page-doi .panel{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:24px 26px;margin-bottom:22px;box-shadow:0 1px 3px rgba(31,45,58,.04)}
#page-doi .panel h2{font-size:18px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:10px}
#page-doi .panel h2 .dot{width:10px;height:10px;border-radius:50%;background:var(--blue)}
#page-doi .panel h2.red .dot{background:var(--red)}
#page-doi .panel .pdesc{font-size:13px;color:var(--t2);margin:6px 0 18px}
/* burn-down table */
#page-doi .tbl-scroll{overflow-x:auto}
#page-doi table.dm-tbl{width:100%;border-collapse:collapse;font-size:12.5px;min-width:1180px}
#page-doi table.dm-tbl th{text-align:left;padding:11px 12px;background:transparent;color:var(--t3);font-weight:800;font-size:10px;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid var(--border);vertical-align:bottom}
#page-doi table.dm-tbl th.r,#page-doi table.dm-tbl td.r{text-align:right}
#page-doi table.dm-tbl th.c,#page-doi table.dm-tbl td.c{text-align:center}
#page-doi table.dm-tbl td{padding:12px 12px;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums;color:#2a3742}
#page-doi table.dm-tbl tr.grp td{background:#eef4fb;font-weight:800;color:var(--navy);font-size:12.5px;padding:11px 12px;letter-spacing:.2px}
#page-doi table.dm-tbl tbody tr:not(.grp):hover{background:#f7fafd}
#page-doi .sku-code{font-family:'Quicksand',monospace;font-weight:700;color:var(--navy);letter-spacing:.3px}
#page-doi .pill{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.4px;padding:4px 10px;border-radius:7px;text-transform:uppercase}
#page-doi .pill.slow{background:#fdefd4;color:#b9791a}
#page-doi .pill.rat{background:#fbe0e0;color:#c23434}
#page-doi .pill.exp{background:#fde8e8;color:#c23434;margin-left:6px;font-size:9.5px;padding:3px 8px}
#page-doi .doi-now{font-weight:800;color:var(--navy);font-size:14px}
#page-doi .tgt{font-weight:800;color:var(--green-d)}
#page-doi .uplift-hold{color:var(--green-d);font-weight:800}
#page-doi .uplift-warn{color:var(--amber);font-weight:800}
#page-doi .uplift-crit{color:var(--red);font-weight:800}
#page-doi .dd-in{color:var(--green-d)}
#page-doi .dd-miss{color:var(--orange)}
#page-doi .dd-sub{color:var(--t3);font-size:11px}
#page-doi .stat-dot{width:12px;height:12px;border-radius:50%;display:inline-block}
#page-doi .stat-dot.ok{background:var(--green)}
#page-doi .stat-dot.warn{background:var(--amber)}
#page-doi .stat-dot.crit{background:var(--red)}
#page-doi .stat-dot.dead{background:var(--navy)}
#page-doi .spark{display:block}
/* movement (day-on-day / week-on-week) cells in the principal summary */
#page-doi .mv{font-weight:800;font-size:12px;white-space:nowrap;display:inline-block;line-height:1.25}
#page-doi .mv.up{color:var(--red)}
#page-doi .mv.dn{color:var(--green-d)}
#page-doi .mv.flat{color:var(--t3);font-weight:700}
#page-doi .mv .pc{display:block;font-size:10px;font-weight:700;color:var(--t3);letter-spacing:.2px}
#page-doi .msp{display:block;margin:0 auto}
#page-doi .pill.cleared{background:#e2f0d3;color:#4c7a1f}
#page-doi table.dm-tbl th .thsub{display:block;font-size:9px;font-weight:700;letter-spacing:.3px;color:var(--t3);text-transform:none;margin-top:2px}
#page-doi #dmSummary{min-width:920px}
/* escalations */
#page-doi .esc{display:flex;align-items:flex-start;gap:14px;padding:15px 18px;border-radius:12px;margin-bottom:11px;font-size:13.5px;line-height:1.45}
#page-doi .esc.watch{background:#fdf6e3;border:1px solid #f2e4bd}
#page-doi .esc.crit{background:#fcecec;border:1px solid #f4cccc}
#page-doi .esc .badge{flex-shrink:0;font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:5px 11px;border-radius:7px;margin-top:1px;min-width:64px;text-align:center}
#page-doi .esc.watch .badge{background:#f6e6b8;color:#8a6d1a}
#page-doi .esc.crit .badge{background:#f4c9c9;color:#a82c2c}
#page-doi .esc b{color:var(--navy)}
#page-doi .dm-foot{font-size:11.5px;color:var(--t3);line-height:1.6;padding:6px 2px 0}
#page-doi .dm-foot b{color:var(--t2)}
#page-doi .dm-empty{padding:40px;text-align:center;color:var(--t3);font-size:14px}
@media(max-width:1100px){#page-doi .dm-kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){#page-doi .dm-kpis{grid-template-columns:1fr}#page-doi .wrap{padding:16px}#page-doi h1{font-size:26px}}