/* Extracted from bisatumbuh_soh_performance_v15.html lines 306-478.
   PO Governance (#page-po) + its dm-nav header override
   Phase 1: verbatim copy - no rule added, removed, or reordered. */
/* ===== PO Governance page styles (scoped to #page-po) ===== */
#page-po{--blue-600:#0F4583;
    --green-500:#7CBA43;
    --navy:#0A2E58;
    --ink-50:#F6F7F9;
    --line:#E4E7EC;
    --muted:#667085;
    --red:#D92D20;
    --red-bg:#FEF3F2;
    --amber:#DC6803;
    --amber-bg:#FFFAEB;
    --green-txt:#4A7A1E;
    --white:#FFFFFF;}
#page-po *{box-sizing:border-box;margin:0;padding:0}
#page-po{
    min-height:100vh;
    font-family:'Nunito Sans',system-ui,sans-serif;
    background:var(--ink-50);
    color:var(--navy);
    -webkit-font-smoothing:antialiased;
  }
#page-po .wrap{max-width:1560px;margin:0 auto;padding:0 28px 56px}
#page-po /* ---------- top bar ---------- */
  .topbar{
    background:var(--white);border-bottom:1px solid var(--line);
    padding:16px 28px;margin-bottom:28px;
  }
#page-po /* ---------- header ---------- */
  .eyebrow{
    display:flex;align-items:center;gap:10px;
    font-size:12px;font-weight:700;letter-spacing:.11em;
    color:var(--blue-600);text-transform:uppercase;margin-bottom:9px;
  }
#page-po .eyebrow::before{content:'';width:26px;height:4px;border-radius:2px;background:var(--green-500)}
#page-po h1{font-family:'Quicksand';font-size:34px;font-weight:700;margin-bottom:20px}
/* month selector — sits beside the title, defaults to the newest month in the sheet */
#page-po .po-titlerow{
    display:flex;align-items:baseline;justify-content:space-between;
    gap:18px;flex-wrap:wrap;
  }
#page-po .po-monthpick{
    display:flex;align-items:center;gap:9px;margin-bottom:20px;
    font-size:11px;font-weight:700;letter-spacing:.09em;
    text-transform:uppercase;color:var(--t3,#8a97a3);
  }
#page-po .po-monthpick select{
    font-family:inherit;font-size:13px;font-weight:700;letter-spacing:0;
    text-transform:none;color:var(--blue-600);background:var(--white,#fff);
    border:1.5px solid #e3eae6;border-radius:9px;padding:7px 30px 7px 12px;
    cursor:pointer;transition:.15s;outline:none;
    appearance:none;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7' fill='none' stroke='%230F4583' stroke-width='2'%3E%3Cpath d='M1 1l4.5 4.5L10 1'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 11px center;
  }
#page-po .po-monthpick select:hover{border-color:var(--blue-600)}
#page-po .po-monthpick select:focus-visible{border-color:var(--blue-600);box-shadow:0 0 0 3px rgba(15,69,131,.12)}
#page-po .po-stale{
    background:#FFF6E5;border:1px solid #FFD599;color:#8A5A00;
    border-radius:12px;padding:12px 16px;margin-bottom:18px;font-size:13px;line-height:1.5;
  }
#page-po .cadence{
    background:#F1F8E8;border:1px solid #D6EBC0;border-radius:12px;
    padding:14px 18px;margin-bottom:22px;
    display:flex;align-items:center;gap:14px;font-size:14px;flex-wrap:wrap;
  }
#page-po .cadence .tag{
    background:var(--white);border:1px solid #D6EBC0;color:var(--green-txt);
    font-size:10.5px;font-weight:700;letter-spacing:.09em;
    padding:5px 11px;border-radius:6px;flex:none;
  }
#page-po /* ---------- KPI ---------- */
  .kpis{
    display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:24px;
  }
#page-po .kpi{
    background:var(--white);border:1px solid var(--line);border-radius:14px;
    padding:20px 22px;
  }
#page-po .kpi .v{font-family:'Quicksand';font-size:30px;font-weight:700;line-height:1.15;margin-bottom:7px}
#page-po .kpi .l{font-size:12.5px;color:var(--muted);line-height:1.55}
#page-po .v.red{color:var(--red)}
#page-po .v.amber{color:var(--amber)}
#page-po .v.green{color:var(--green-500)}
#page-po .v.blue{color:var(--blue-600)}
#page-po /* ---------- card ---------- */
  .card{
    background:var(--white);border:1px solid var(--line);border-radius:16px;
    padding:26px;margin-bottom:24px;
  }
#page-po .card > h2{
    font-family:'Quicksand';font-size:20px;font-weight:700;
    display:flex;align-items:center;gap:10px;
  }
#page-po .card > h2::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--blue-600)}
#page-po .card.alerts > h2::before{background:var(--red)}
#page-po .sub{font-size:13px;color:var(--muted);margin:5px 0 20px 19px}
#page-po /* ---------- table ---------- */
  .tw{overflow-x:auto}
#page-po table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:1180px}
#page-po th{
    text-align:right;font-size:10.5px;font-weight:700;letter-spacing:.07em;
    text-transform:uppercase;color:var(--muted);
    padding:0 12px 12px;border-bottom:1px solid var(--line);vertical-align:bottom;
  }
#page-po th:first-child, #page-po td:first-child{text-align:left;padding-left:4px}
#page-po td{padding:13px 12px;text-align:right;border-bottom:1px solid #F2F4F7}
#page-po tbody tr:last-child td{border-bottom:none}
#page-po tbody tr:hover{background:#FCFCFD}
#page-po .bn{font-weight:700}
#page-po .dot{
    display:inline-block;width:7px;height:7px;border-radius:50%;
    margin-right:7px;vertical-align:middle;
  }
#page-po .d-red{background:var(--red)}
#page-po .d-amber{background:#F79009}
#page-po .d-green{background:var(--green-500)}
#page-po .frozen{font-weight:700;font-size:11px;letter-spacing:.07em;color:var(--muted)}
#page-po /* DOI bar */
  .bar-cell{width:270px;padding-right:20px}
#page-po .bar{
    position:relative;height:9px;border-radius:5px;background:#EAECF0;overflow:visible;
  }
#page-po .bar .fill{height:100%;border-radius:5px;background:var(--blue-600)}
#page-po .bar .mark{
    position:absolute;top:-3px;width:2px;height:15px;
    background:var(--green-500);border-radius:1px;left:25%;
  }
#page-po .note{font-size:12.5px;color:var(--muted);margin-top:16px}
#page-po /* ---------- alerts ---------- */
  .alert{
    display:flex;align-items:flex-start;gap:16px;
    padding:15px 18px;border-radius:11px;margin-bottom:9px;font-size:13.8px;line-height:1.5;
  }
#page-po .alert.critical{background:var(--red-bg)}
#page-po .alert.watch{background:var(--amber-bg)}
#page-po .badge{
    flex:none;font-size:10px;font-weight:700;letter-spacing:.09em;
    padding:5px 11px;border-radius:6px;background:var(--white);margin-top:1px;
  }
#page-po .alert.critical .badge{color:var(--red);border:1px solid #FECDCA}
#page-po .alert.watch  .badge{color:var(--amber);border:1px solid #FEDF89}
#page-po .alert b{font-weight:700}
#page-po .none{padding:22px;text-align:center;color:var(--muted);font-size:14px}
#page-po .rules{
    font-size:12px;color:var(--muted);line-height:1.7;
    padding-top:18px;margin-top:6px;border-top:1px solid var(--line);
  }
#page-po .banner{
    background:#FFFAEB;border:1px solid #FEDF89;color:#93370D;
    border-radius:10px;padding:12px 16px;font-size:13px;margin-bottom:20px;
  }
@media(max-width:1200px){#page-po .kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){#page-po .kpis{grid-template-columns:1fr}
#page-po .wrap{padding:0 14px 40px}}



/* PO header — matched to DOI hyper-monitor */
#page-po .dm-nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 0 6px}
#page-po .dm-brand{display:flex;align-items:center;gap:10px;margin-right:6px}
#page-po .dm-brand img{height:38px;width:auto;display:block}
#page-po .dm-tabs{display:flex;gap:4px;background:#eef2f7;border-radius:12px;padding:5px}
#page-po .dm-tab{font-family:inherit;font-size:13px;font-weight:700;border:none;background:transparent;color:#5c6b78;padding:8px 16px;border-radius:9px;cursor:pointer;transition:.15s;white-space:nowrap}
#page-po .dm-tab:hover{color:var(--navy)}
#page-po .dm-tab.active{background:var(--blue-600);color:#fff;box-shadow:0 2px 8px rgba(15,69,131,.28)}
#page-po .dm-meta{margin-left:auto;text-align:right;font-size:12px;color:#8a97a3;line-height:1.5}
#page-po .dm-meta b{color:var(--navy);font-size:13px}
#page-po .dm-meta span{display:inline-block}
#page-po .po-refresh{display:inline-block;margin-left:8px;font-family:inherit;font-size:11px;font-weight:700;border:1.5px solid var(--line);border-radius:8px;background:#fff;color:var(--navy);padding:4px 9px;cursor:pointer;transition:.15s}
#page-po .po-refresh:hover{border-color:var(--blue-600);background:var(--ink-50)}
#page-po .wrap{max-width:1400px;margin:0 auto;padding:22px 26px 40px}
@media(max-width:900px){#page-po .dm-meta{margin-left:0;text-align:left;width:100%;margin-top:6px}}