/* ── KPN AMS — Design System v2 ─────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital,wght@0,400;1,400&family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.31.0/dist/tabler-icons.min.css');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --ink:#0D1117; --ink2:#1E2533; --ink3:#3A3F50;
  --surface:#F2F0E8; --surface2:#E8E5DC; --surface3:#DDD9CE;
  --card:#FFFFFF;
  --gold:#7A5C0E; --gold2:#B8962E; --gold3:#E8C96B; --gold-bg:#FBF6E8; --gold-border:#E0C060;
  --muted:#6E717E; --muted2:#9A9DA8;
  --border:rgba(13,17,23,0.07); --border2:rgba(13,17,23,0.13); --border3:rgba(13,17,23,0.20);
  --shadow:0 1px 2px rgba(13,17,23,0.05),0 3px 12px rgba(13,17,23,0.04);
  --shadow2:0 2px 8px rgba(13,17,23,0.08),0 8px 32px rgba(13,17,23,0.06);
  /* BU */
  --ds:#0D4F7A; --ds2:#1A72AE; --ds-bg:#EBF4FB; --ds-border:#A8D0F0;
  --cm:#5C3D0E; --cm2:#8B5E20; --cm-bg:#F8F0E0; --cm-border:#E0C080;
  --pl:#1A5C2E; --pl2:#2D7A42; --pl-bg:#E8F5EC; --pl-border:#A0D8B0;
  --pr:#6B1E54; --pr2:#922B72; --pr-bg:#F8E8F4; --pr-border:#D8A0C8;
  /* Status */
  --red:#9B2020; --red2:#C43030; --red-bg:#FBE8E8; --red-border:#F0A8A8;
  --amber:#7A4A08; --amber2:#A86810; --amber-bg:#FEF3DC; --amber-border:#F0C870;
  --green:#1A5C2E; --green2:#2D7A42; --green-bg:#E8F5EC; --green-border:#A0D8B0;
  --blue:#0D4F7A; --blue2:#1A72AE; --blue-bg:#EBF4FB; --blue-border:#A8D0F0;
  --purple:#4A1E6B; --purple-bg:#F0E8FB; --purple-border:#C0A0E8;
  /* Layout */
  --sb-w:232px; --topbar-h:54px;
  --r:8px; --rl:12px; --rxl:16px;
}

@media (prefers-color-scheme:dark){:root{
  --ink:#EAE6DC; --ink2:#14192A; --ink3:#9A9DA8;
  --surface:#090C14; --surface2:#0F1420; --surface3:#161C2C;
  --card:#111828;
  --gold:#C4A255; --gold2:#E0B84A; --gold3:#F5D878; --gold-bg:#1A1405; --gold-border:#5A4010;
  --muted:#7A7D8A; --muted2:#555870;
  --border:rgba(255,255,255,0.06); --border2:rgba(255,255,255,0.11); --border3:rgba(255,255,255,0.18);
  --shadow:0 1px 2px rgba(0,0,0,0.2),0 3px 12px rgba(0,0,0,0.15);
  --shadow2:0 2px 8px rgba(0,0,0,0.3),0 8px 32px rgba(0,0,0,0.25);
  --ds:#85B7EB; --ds2:#B0D4F8; --ds-bg:#061420; --ds-border:#0D3A5C;
  --cm:#E8C98A; --cm2:#F5DFA0; --cm-bg:#1A1006; --cm-border:#3A2808;
  --pl:#9FE1CB; --pl2:#C0F0D8; --pl-bg:#061408; --pl-border:#0D3A18;
  --pr:#E093B1; --pr2:#F0B8D0; --pr-bg:#180614; --pr-border:#3A0D28;
  --red:#F09090; --red2:#F8B8B8; --red-bg:#1C0606; --red-border:#4A1010;
  --amber:#F0C870; --amber2:#F8DCA0; --amber-bg:#1C1004; --amber-border:#3A2208;
  --green:#9FE1CB; --green2:#C0F0D8; --green-bg:#061408; --green-border:#0D3A18;
  --blue:#85B7EB; --blue2:#B0D4F8; --blue-bg:#061420; --blue-border:#0D3A5C;
  --purple:#C0A0F0; --purple-bg:#100818; --purple-border:#3A1860;
}}

html,body{height:100%;font-family:'IBM Plex Sans',system-ui,sans-serif;background:var(--surface);color:var(--ink);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ── APP SHELL ─────────────────────────────────────────────────── */
.app{display:flex;height:100vh;overflow:hidden}

/* ── SIDEBAR ───────────────────────────────────────────────────── */
.sb{width:var(--sb-w);flex-shrink:0;background:var(--ink2);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;border-right:1px solid rgba(255,255,255,0.05)}
.sb-head{padding:1.1rem 1rem 0.9rem;border-bottom:1px solid rgba(255,255,255,0.07)}
.sb-brand{display:flex;align-items:center;gap:10px}
.sb-mark{width:36px;height:36px;background:linear-gradient(135deg,var(--gold2),var(--gold3));border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px rgba(184,150,46,0.35)}
.sb-mark span{font-family:'Instrument Serif',serif;color:#fff;font-size:13px;font-weight:400;letter-spacing:0.02em}
.sb-corp{font-family:'Instrument Serif',serif;font-size:15.5px;color:#EAE6DC;line-height:1.1}
.sb-sub{font-size:9.5px;color:rgba(255,255,255,0.30);text-transform:uppercase;letter-spacing:0.1em;margin-top:2px}
.sb-sect{padding:1rem 0.85rem 0.2rem;font-size:9.5px;text-transform:uppercase;letter-spacing:0.11em;color:rgba(255,255,255,0.25);font-weight:600}
.sb-ul{list-style:none;padding:0 0.5rem}
.sb-ul li{margin:1px 0}
.sb-ul a{display:flex;align-items:center;gap:8px;padding:6.5px 10px;border-radius:7px;color:rgba(255,255,255,0.48);font-size:12.5px;text-decoration:none;transition:all 0.12s;white-space:nowrap;overflow:hidden}
.sb-ul a:hover{background:rgba(255,255,255,0.07);color:rgba(255,255,255,0.88)}
.sb-ul a.on{background:linear-gradient(135deg,rgba(184,150,46,0.9),rgba(224,184,74,0.8));color:#fff;font-weight:500;box-shadow:0 2px 8px rgba(184,150,46,0.2)}
.sb-ul a .ti{font-size:14px;flex-shrink:0;opacity:0.9}
.sb-pill{margin-left:auto;background:rgba(255,255,255,0.12);color:rgba(255,255,255,0.6);font-size:9.5px;padding:1px 7px;border-radius:10px;font-weight:500}
.sb-ul a.on .sb-pill{background:rgba(255,255,255,0.25);color:#fff}
.sb-tag{margin-left:auto;font-size:9px;padding:1px 5px;border-radius:4px;background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.35)}
.sb-ul a.on .sb-tag{background:rgba(255,255,255,0.18);color:rgba(255,255,255,0.85)}
.sb-foot{margin-top:auto;padding:0.85rem;border-top:1px solid rgba(255,255,255,0.07)}
.sb-user{display:flex;align-items:center;gap:9px}
.sb-ava{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--gold2),var(--gold3));display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#fff;flex-shrink:0}
.sb-uname{font-size:11.5px;color:rgba(255,255,255,0.55);line-height:1.2}
.sb-urole{font-size:9.5px;color:rgba(255,255,255,0.26)}

/* ── MAIN + TOPBAR ─────────────────────────────────────────────── */
.main{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column}
.topbar{height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;padding:0 1.75rem;background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;flex-shrink:0;gap:1rem}
.tb-left{display:flex;align-items:baseline;gap:8px}
.tb-title{font-family:'Instrument Serif',serif;font-size:19px;font-weight:400;color:var(--ink)}
.tb-title em{color:var(--gold2);font-style:italic}
.tb-crumb{font-size:11px;color:var(--muted)}
.tb-right{display:flex;align-items:center;gap:8px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:20px;font-size:11px;font-weight:500;border:1px solid var(--border2);background:var(--card);color:var(--muted);cursor:pointer;transition:all 0.12s;white-space:nowrap;text-decoration:none}
.chip:hover{border-color:var(--gold2);color:var(--gold2)}
.chip.phase-active{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-border)}
.chip.phase-done{background:var(--green-bg);color:var(--green);border-color:var(--green-border)}
.chip.phase-pending{background:var(--surface2);color:var(--muted);border-color:var(--border2)}
.chip-dot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* ── CONTENT ───────────────────────────────────────────────────── */
.content{padding:1.5rem 1.75rem 3rem;flex:1}
.sl{font-size:10px;text-transform:uppercase;letter-spacing:0.11em;color:var(--muted2);margin-bottom:0.6rem;font-weight:600}
.mb{margin-bottom:1.5rem}

/* ── KPI ────────────────────────────────────────────────────────── */
.kpi4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:1.5rem}
.kpi3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:1.5rem}
.kpi2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:1.5rem}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--rl);padding:1.1rem 1.3rem;position:relative;overflow:hidden;box-shadow:var(--shadow);animation:fadeUp 0.35s ease both}
.kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--k-accent,var(--gold2))}
.kpi-l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:6px;font-weight:500}
.kpi-v{font-family:'Instrument Serif',serif;font-size:32px;color:var(--ink);line-height:1;letter-spacing:-0.01em}
.kpi-s{font-size:11px;color:var(--muted);margin-top:5px;display:flex;align-items:center;gap:4px}
.up{color:var(--green)}.dn{color:var(--red)}.wa{color:var(--amber)}

/* ── CARDS ──────────────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--rl);padding:1.2rem 1.4rem;box-shadow:var(--shadow)}
.card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;gap:1rem;flex-wrap:wrap}
.card-t{font-size:13px;font-weight:500;color:var(--ink)}
.card-a{font-size:11px;color:var(--gold2);text-decoration:none;display:flex;align-items:center;gap:3px;white-space:nowrap}
.card-a:hover{text-decoration:underline}
.card-meta{font-size:11px;color:var(--muted)}

/* ── GRID LAYOUTS ────────────────────────────────────────────────── */
.g2{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;margin-bottom:1.5rem}
.g2r{display:grid;grid-template-columns:1fr 1.55fr;gap:14px;margin-bottom:1.5rem}
.g22{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:1.5rem}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:1.5rem}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:1.5rem}
.full{margin-bottom:1.5rem}

/* ── TABLE ──────────────────────────────────────────────────────── */
.t-wrap{overflow-x:auto}
.dt{width:100%;border-collapse:collapse}
.dt th{font-size:10px;text-transform:uppercase;letter-spacing:0.07em;color:var(--muted);padding:6px 10px 7px 0;border-bottom:2px solid var(--border2);text-align:left;font-weight:600;white-space:nowrap}
.dt th:first-child{padding-left:0}
.dt td{font-size:12px;padding:9px 10px 9px 0;border-bottom:1px solid var(--border);color:var(--ink);vertical-align:middle}
.dt td:first-child{padding-left:0}
.dt tr:last-child td{border-bottom:none}
.dt tbody tr:hover td{background:rgba(184,150,46,0.03)}
.mono{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted)}

/* ── BADGES ─────────────────────────────────────────────────────── */
.bd{display:inline-flex;align-items:center;gap:3px;font-size:10px;padding:2px 8px;border-radius:20px;font-weight:500;white-space:nowrap;border:1px solid transparent}
.bd-red{background:var(--red-bg);color:var(--red);border-color:var(--red-border)}
.bd-amber{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-border)}
.bd-green{background:var(--green-bg);color:var(--green);border-color:var(--green-border)}
.bd-blue{background:var(--blue-bg);color:var(--blue);border-color:var(--blue-border)}
.bd-gold{background:var(--gold-bg);color:var(--gold);border-color:var(--gold-border)}
.bd-purple{background:var(--purple-bg);color:var(--purple);border-color:var(--purple-border)}
.bd-ds{background:var(--ds-bg);color:var(--ds);border-color:var(--ds-border)}
.bd-cm{background:var(--cm-bg);color:var(--cm);border-color:var(--cm-border)}
.bd-pl{background:var(--pl-bg);color:var(--pl);border-color:var(--pl-border)}
.bd-pr{background:var(--pr-bg);color:var(--pr);border-color:var(--pr-border)}
.bd-muted{background:var(--surface2);color:var(--muted);border-color:var(--border2)}

/* ── PROGRESS BAR ────────────────────────────────────────────────── */
.pb-wrap{height:5px;background:var(--surface3);border-radius:3px;overflow:hidden;flex:1;min-width:40px}
.pb{height:100%;border-radius:3px;transition:width 0.8s ease}
.pb-lg{height:8px}
.score-row{display:flex;align-items:center;gap:8px}
.score-n{font-size:12px;font-weight:600;min-width:28px;text-align:right}

/* ── STAT ROW ────────────────────────────────────────────────────── */
.sr{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border)}
.sr:last-child{border-bottom:none}
.sr-l{font-size:12px;color:var(--ink);display:flex;align-items:center;gap:6px}
.sr-v{font-size:12px;font-weight:500;color:var(--ink)}

/* ── LIFECYCLE ITEM ──────────────────────────────────────────────── */
.lc-it{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.lc-it:last-child{border-bottom:none}
.lc-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.lc-name{flex:1;font-size:12px;color:var(--ink)}
.lc-n{font-size:13px;font-weight:600;color:var(--ink)}
.lc-p{font-size:11px;color:var(--muted);margin-left:3px}

/* ── EXPIRY ITEM ─────────────────────────────────────────────────── */
.exp-it{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border)}
.exp-it:last-child{border-bottom:none}
.exp-name{font-size:12px;font-weight:500;color:var(--ink)}
.exp-meta{font-size:10px;color:var(--muted);margin-top:1px}
.exp-days{font-size:13px;font-weight:700;padding-left:10px;white-space:nowrap}

/* ── CHECKLIST ───────────────────────────────────────────────────── */
.chk-it{display:flex;align-items:flex-start;gap:9px;padding:8px 0;border-bottom:1px solid var(--border)}
.chk-it:last-child{border-bottom:none}
.chk-ic{font-size:14px;flex-shrink:0;margin-top:1px}
.chk-label{flex:1;font-size:12px;color:var(--ink);line-height:1.4}
.chk-sub{font-size:10px;color:var(--muted);margin-top:1px}
.chk-v{font-size:11px;font-weight:600;white-space:nowrap}
.ic-ok{color:var(--green)}.ic-warn{color:var(--amber)}.ic-fail{color:var(--red)}.ic-idle{color:var(--muted)}

/* ── CHART WRAP ──────────────────────────────────────────────────── */
.cw{position:relative}

/* ── LEGEND ──────────────────────────────────────────────────────── */
.lg{display:flex;flex-wrap:wrap;gap:7px 14px;margin-top:10px}
.lg-i{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}
.lg-d{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.lg-sq{width:8px;height:8px;border-radius:2px;flex-shrink:0}

/* ── BU STRIP ────────────────────────────────────────────────────── */
.bu-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:1.5rem}
.bu-card{background:var(--card);border:1px solid var(--border);border-radius:var(--rl);padding:1rem 1.1rem;border-top:3px solid var(--bc,var(--gold2));box-shadow:var(--shadow)}
.bu-nm{font-size:10px;text-transform:uppercase;letter-spacing:0.07em;color:var(--muted);margin-bottom:5px;font-weight:500}
.bu-v{font-family:'Instrument Serif',serif;font-size:28px;color:var(--ink);line-height:1}
.bu-m{font-size:11px;color:var(--muted);margin-top:3px}
.bu-bar{height:3px;background:var(--surface3);border-radius:2px;margin-top:10px;overflow:hidden}
.bu-fill{height:100%;border-radius:2px;background:var(--bc,var(--gold2));transition:width 1s ease}

/* ── PHASE TRACKER ───────────────────────────────────────────────── */
.ph-track{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:1.5rem}
.ph{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:12px 8px 10px;text-align:center;position:relative;box-shadow:var(--shadow)}
.ph.done{border-color:var(--green-border);background:var(--green-bg)}
.ph.act{border-color:var(--gold-border);background:var(--gold-bg);box-shadow:0 0 0 2px rgba(184,150,46,0.15)}
.ph.lock{opacity:0.42}
.ph-num{font-size:9px;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);margin-bottom:4px;font-weight:600}
.ph.done .ph-num{color:var(--green)}.ph.act .ph-num{color:var(--gold)}
.ph-t{font-size:10px;font-weight:500;color:var(--ink);line-height:1.3}
.ph.done .ph-t{color:var(--green)}.ph.act .ph-t{color:var(--gold)}
.ph-ic{font-size:20px;display:block;margin-bottom:5px}
.ph-mo{font-size:9px;color:var(--muted2);margin-top:4px}

/* ── FILTER BAR ──────────────────────────────────────────────────── */
.fb{display:flex;align-items:center;gap:10px;margin-bottom:1.2rem;flex-wrap:wrap}
.search-b{flex:1;min-width:180px;display:flex;align-items:center;gap:7px;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--r);padding:7px 11px;transition:border-color 0.12s}
.search-b:focus-within{border-color:var(--gold2)}
.search-b input{background:none;border:none;outline:none;font-size:13px;color:var(--ink);width:100%;font-family:'IBM Plex Sans',sans-serif}
.search-b .ti{color:var(--muted);font-size:14px;flex-shrink:0}
.fsel{padding:7px 10px;border-radius:var(--r);border:1px solid var(--border2);background:var(--card);color:var(--ink);font-size:12px;font-family:'IBM Plex Sans',sans-serif;cursor:pointer;outline:none;transition:border-color 0.12s}
.fsel:focus{border-color:var(--gold2)}

/* ── MODAL ───────────────────────────────────────────────────────── */
.modal-ov{position:fixed;inset:0;background:rgba(0,0,0,0.52);backdrop-filter:blur(2px);z-index:100;display:none;align-items:center;justify-content:center;padding:1rem}
.modal-ov.open{display:flex}
.modal{background:var(--card);border-radius:var(--rxl);padding:1.75rem;width:520px;max-width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 20px 60px rgba(0,0,0,0.25);border:1px solid var(--border2)}
.modal-x{position:absolute;top:1rem;right:1rem;font-size:17px;color:var(--muted);cursor:pointer;background:none;border:none;line-height:1;padding:2px;border-radius:4px;transition:color 0.12s}
.modal-x:hover{color:var(--ink)}
.modal-h{font-family:'Instrument Serif',serif;font-size:20px;margin-bottom:0.4rem;color:var(--ink)}
.modal-sub{font-size:12px;color:var(--muted);margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.m-row{display:flex;justify-content:space-between;align-items:flex-start;padding:7px 0;border-bottom:1px solid var(--border);font-size:13px;gap:1rem}
.m-row:last-child{border-bottom:none}
.m-k{color:var(--muted);flex-shrink:0}
.m-v{font-weight:500;color:var(--ink);text-align:right}

/* ── ALERT BOX ───────────────────────────────────────────────────── */
.alert-box{border-radius:var(--r);padding:10px 14px;border:1px solid;margin-top:0.75rem;font-size:12px}
.alert-box.red{background:var(--red-bg);border-color:var(--red-border);color:var(--red)}
.alert-box.amber{background:var(--amber-bg);border-color:var(--amber-border);color:var(--amber)}
.alert-box.green{background:var(--green-bg);border-color:var(--green-border);color:var(--green)}
.alert-box.blue{background:var(--blue-bg);border-color:var(--blue-border);color:var(--blue)}
.alert-box.gold{background:var(--gold-bg);border-color:var(--gold-border);color:var(--gold)}

/* ── TIMELINE ────────────────────────────────────────────────────── */
.tl-item{display:flex;gap:14px;padding-bottom:1.2rem;position:relative}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:'';position:absolute;left:11px;top:26px;bottom:0;width:1px;background:var(--border2)}
.tl-item:last-child::before{display:none}
.tl-dot{width:23px;height:23px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;border:2px solid}
.tl-body{flex:1;padding-top:2px}
.tl-t{font-size:13px;font-weight:500;color:var(--ink)}
.tl-m{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.4}

/* ── MAP ─────────────────────────────────────────────────────────── */
.map-tt{position:absolute;background:var(--ink2);color:#EAE6DC;font-size:11px;padding:7px 11px;border-radius:7px;pointer-events:none;display:none;z-index:10;box-shadow:var(--shadow2);line-height:1.5;white-space:nowrap}
.asset-dot{cursor:pointer}
.asset-dot:hover{filter:brightness(1.25)}

/* ── ANIMATIONS ──────────────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.kpi:nth-child(1){animation-delay:.04s}.kpi:nth-child(2){animation-delay:.08s}
.kpi:nth-child(3){animation-delay:.12s}.kpi:nth-child(4){animation-delay:.16s}

/* ── SCROLLBAR ───────────────────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

/* ── PRINT ───────────────────────────────────────────────────────── */
@media print{.sb,.tb-right{display:none}.app{display:block}.main{overflow:visible}.content{padding:0}}

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media(max-width:1100px){.g2,.g2r{grid-template-columns:1fr}}
@media(max-width:960px){
  .sb{width:52px}
  .sb-corp,.sb-sub,.sb-sect,.sb-ul a span,.sb-pill,.sb-tag,.sb-uname,.sb-urole{display:none}
  .sb-ul a{justify-content:center;padding:9px 6px}
  .sb-head{padding:0.8rem 0.5rem}.sb-brand{justify-content:center}
  .kpi4{grid-template-columns:repeat(2,1fr)}.bu-strip{grid-template-columns:repeat(2,1fr)}
  .g22{grid-template-columns:1fr}.g3{grid-template-columns:1fr 1fr}
  .g4{grid-template-columns:repeat(2,1fr)}.ph-track{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:600px){
  .kpi4,.kpi3{grid-template-columns:1fr 1fr}.g3,.g4{grid-template-columns:1fr}
  .ph-track{grid-template-columns:repeat(2,1fr)}.bu-strip{grid-template-columns:1fr 1fr}
  .content{padding:1rem 1rem 2rem}
}