/* Extracted from bisatumbuh_soh_performance_v15.html lines 479-538.
   unified dm-nav / eyebrow / h1 / sortable-th shared by all 4 pages
   Phase 1: verbatim copy - no rule added, removed, or reordered. */
/* SOH Performance header — matched to DOI hyper-monitor */
#page-perf .dm-nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 0 6px}
#page-perf .dm-brand{display:flex;align-items:center;gap:10px;margin-right:6px}
#page-perf .dm-brand img{height:38px;width:auto;display:block}
#page-perf .dm-tabs{display:flex;gap:4px;background:#eef2f7;border-radius:12px;padding:5px}
#page-perf .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-perf .dm-tab:hover{color:var(--ink)}
#page-perf .dm-tab.active{background:var(--c-vf);color:#fff;box-shadow:0 2px 8px rgba(15,69,131,.28)}
#page-perf .dm-meta{margin-left:auto;text-align:right;font-size:12px;color:var(--t3);line-height:1.5}
#page-perf .dm-meta b{color:var(--ink);font-size:13px;font-family:'Quicksand','Nunito Sans',system-ui,sans-serif}
#page-perf .wrap{max-width:1400px}
@media(max-width:900px){#page-perf .dm-meta{margin-left:0;text-align:left;width:100%;margin-top:6px}}

/* ===== unified page header (PO Governance pattern) — all four pages ===== */
#page-home .dm-nav,#page-perf .dm-nav,#page-doi .dm-nav,#page-po .dm-nav{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 0 6px}
#page-home .dm-brand,#page-perf .dm-brand,#page-doi .dm-brand,#page-po .dm-brand{
  display:flex;align-items:center;gap:10px;margin-right:6px}
#page-home .dm-brand img,#page-perf .dm-brand img,#page-doi .dm-brand img,#page-po .dm-brand img{
  height:38px;width:auto;display:block}
#page-home .dm-tabs,#page-perf .dm-tabs,#page-doi .dm-tabs,#page-po .dm-tabs{
  display:flex;gap:4px;background:#eef2f7;border-radius:12px;padding:5px}
#page-home .dm-tab,#page-perf .dm-tab,#page-doi .dm-tab,#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-home .dm-tab:hover,#page-perf .dm-tab:hover,#page-doi .dm-tab:hover,#page-po .dm-tab:hover{color:#0A2E58}
#page-home .dm-tab.active,#page-perf .dm-tab.active,#page-doi .dm-tab.active,#page-po .dm-tab.active{
  background:#0F4583;color:#fff;box-shadow:0 2px 8px rgba(15,69,131,.28)}
#page-home .dm-meta,#page-perf .dm-meta,#page-doi .dm-meta,#page-po .dm-meta{
  margin-left:auto;text-align:right;font-size:12px;color:#8a97a3;line-height:1.5}
#page-home .dm-meta b,#page-perf .dm-meta b,#page-doi .dm-meta b,#page-po .dm-meta b{
  color:#0A2E58;font-size:13px}
#page-home .dm-meta span,#page-perf .dm-meta span,#page-doi .dm-meta span,#page-po .dm-meta span{display:inline-block}

/* eyebrow + h1 */
#page-home .eyebrow,#page-perf .eyebrow,#page-doi .eyebrow,#page-po .eyebrow{
  display:flex;align-items:center;gap:9px;
  font-size:12px;font-weight:700;letter-spacing:.11em;
  color:#0F4583;text-transform:uppercase;margin-bottom:9px}
#page-home .eyebrow::before,#page-perf .eyebrow::before,#page-doi .eyebrow::before,#page-po .eyebrow::before{
  content:'';width:26px;height:4px;border-radius:2px;background:#7CBA43}
#page-home h1,#page-perf h1,#page-doi h1,#page-po h1{
  font-family:'Quicksand','Nunito Sans',system-ui,sans-serif;
  font-size:34px;font-weight:700;color:#0A2E58;margin:0 0 20px}
@media(max-width:900px){
  #page-home .dm-meta,#page-perf .dm-meta,#page-doi .dm-meta,#page-po .dm-meta{
    margin-left:0;text-align:left;width:100%;margin-top:6px}
  #page-home h1,#page-perf h1,#page-doi h1,#page-po h1{font-size:26px}
}
/* sortable headers — DOI burn-down + PO brand heat map */
#page-doi table.dm-tbl th.dm-sort,
#page-po .tw th.po-sort{cursor:pointer;user-select:none;-webkit-user-select:none;transition:.12s}
#page-doi table.dm-tbl th.dm-sort:hover,
#page-po .tw th.po-sort:hover{background:#eef2f7;color:#0F4583}
#page-doi table.dm-tbl th.dm-sort.on,
#page-po .tw th.po-sort.on{color:#0F4583}
#page-doi table.dm-tbl th.dm-sort .dm-arrow,
#page-po .tw th.po-sort .po-arrow{font-size:10px}
#page-doi table.dm-tbl th.dm-sort:not(.on):hover .dm-arrow::after,
#page-po .tw th.po-sort:not(.on):hover .po-arrow::after{content:' \2195';opacity:.45}