/* No @font-face: the web fonts those rules pointed at (/assets/fonts/Inter-*.woff2) are not part of
   this application, so every load fetched four files that nginx answered with index.html (the SPA
   fallback) and the browser refused as fonts ("invalid sfntVersion"). Inter stays FIRST in the stack
   below, so a machine that has it installed still uses it; everywhere else the next family does, which
   is what the product already rendered in. Restore the rules together with the font files. */

:root {
  --tc: #0030DB; --tc-2: #2B55E8; --tc-bg: #E8EDFD; --tc-ink: #001A80;
  --ink: #0E1630; --ink-2: #47506B; --ink-3: #5F6780;
  --line: #E1E5EE; --line-2: #CDD3E0;
  --bg: #F4F6FA; --panel: #FFFFFF; --panel-2: #F8F9FC;
  --ok: #077650; --ok-bg: #E2F4EC; --warn: #8F5600; --warn-bg: #FDF0D9; --bad: #C8261B; --bad-bg: #FCE8E6; --info: #3A4FB8; --info-bg: #ECEFFC;
  --h-g2: #1C7F5A; --h-g1: #BFE6D3; --h-n0: #EEF1F6; --h-a1: #F7D9A0; --h-r1: #F1A39B; --h-r2: #D2392D;
  --scn: #7A3FD1; --scn-bg: #F1EAFC;
  --r: 10px; --sh: 0 1px 2px rgba(14,22,48,.05), 0 1px 0 rgba(14,22,48,.03);
  --nav-w: 236px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 14px/1.5 Inter, 'Segoe UI', system-ui, sans-serif; color: var(--ink); background: var(--bg); font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; }
a { color: var(--tc); text-decoration: none; }
h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
.num, .tbl td.num, .kv, code { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.neg { color: var(--bad); }
.pos { color: var(--ok); }
:focus-visible { outline: 2px solid var(--tc); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- layout ---------- */
.app { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--panel); border-right: 1px solid var(--line); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 10px; padding: 16px 18px 14px; border-bottom: 1px solid var(--line); }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--tc); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; letter-spacing: -0.02em; }
.brand b { display: block; font-size: 14px; font-weight: 650; line-height: 1.2; }
.brand small { color: var(--ink-3); font-size: 11.5px; }
#nav-items { padding: 8px 10px; overflow-y: auto; flex: 1; }
.nav-group { display: flex; width: 100%; justify-content: space-between; align-items: center; border: 0; background: none; cursor: pointer; font: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 14px 10px 6px; text-align: left; }
.nav-group:hover { color: var(--ink-2); }
.nav-group .caret { font-size: 13px; letter-spacing: 0; }
.persona { display: flex; align-items: center; gap: 10px; }
.persona select { border: 0; background: transparent; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); padding: 0; cursor: pointer; max-width: 170px; }
.persona-logout { border: 1px solid var(--line, #d6dbe6); background: transparent; color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 600; border-radius: 8px; padding: 4px 10px; cursor: pointer; white-space: nowrap; }
.persona-logout:hover { color: var(--ink); border-color: var(--ink-3); }
.appr { font-size: 12px; font-weight: 600; color: var(--warn); background: var(--warn-bg); border-radius: 20px; padding: 3px 10px; white-space: nowrap; }
.appr span { font-weight: 700; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--ink-2); font-weight: 500; }
.nav-item svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.nav-item:hover { background: var(--panel-2); color: var(--ink); }
.nav-item.on { background: var(--tc-bg); color: var(--tc-ink); }
.nav-item em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 600; background: var(--bad-bg); color: var(--bad); border-radius: 10px; padding: 0 7px; }
.side-foot { border-top: 1px solid var(--line); padding: 12px 18px; font-size: 12px; color: var(--ink-3); }
.side-foot b { color: var(--ink-2); font-weight: 600; }

.main { min-width: 0; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; gap: 14px; padding: 0 24px; height: 58px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.top .ws { font-weight: 600; }
.top .ws small { display: block; font-weight: 400; color: var(--ink-3); font-size: 12px; margin-top: -2px; }
.top .grow { flex: 1; }
.plan { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); border-radius: 9px; padding: 3px 4px 3px 10px; background: var(--panel); }
.plan .flag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ok); }
body.is-scenario .plan { border-color: var(--scn); background: var(--scn-bg); }
body.is-scenario .plan .flag { color: var(--scn); }
.plan select { border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--ink); padding: 4px 6px; cursor: pointer; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #DCE3F8; color: var(--tc-ink); display: grid; place-items: center; font-weight: 600; font-size: 12px; }
.who { font-size: 12.5px; line-height: 1.25; }
.who small { display: block; color: var(--ink-3); }
.icon-btn { border: 0; background: transparent; font-size: 22px; line-height: 1; color: var(--ink-2); cursor: pointer; width: 34px; height: 34px; border-radius: 8px; }
.icon-btn:hover { background: var(--panel-2); }
#menu-btn { display: none; }

.scope { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; padding: 12px 24px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 58px; z-index: 19; }
.scope label { display: flex; flex-direction: column; gap: 3px; }
.scope label span { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.scope select, select.inp, input.inp { font: inherit; border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 28px 6px 10px; background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2347506B' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center; appearance: none; color: var(--ink); min-width: 150px; }
input.inp { background: var(--panel); padding-right: 10px; }
.scope-meta { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
body.is-scenario .scope { box-shadow: inset 0 -2px 0 var(--scn); }

#view { padding: 22px 24px 48px; max-width: 1480px; width: 100%; }

/* ---------- page parts ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head h1 { font-size: 22px; font-weight: 650; }
.page-head p { margin: 4px 0 0; color: var(--ink-2); max-width: 72ch; }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 600; font-size: 13px; border: 1px solid var(--tc); background: var(--tc); color: #fff; border-radius: 8px; padding: 7px 14px; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--tc-2); }
.btn.ghost { background: var(--panel); color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--ink-3); }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.btn.done { background: var(--ok-bg); color: var(--ok); border-color: #A9DCC4; }
.link { border: 0; background: none; color: var(--tc); font: inherit; font-weight: 600; cursor: pointer; padding: 0; }

.grid { display: grid; gap: 16px; }
.g-kpi { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.g-2 { grid-template-columns: minmax(0, 1fr) 340px; }
.g-2e { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh); padding: 16px 18px; min-width: 0; }
.card + .card { margin-top: 0; }
.card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card-h h2 { font-size: 15px; font-weight: 650; }
.card-h p { margin: 2px 0 0; color: var(--ink-3); font-size: 12.5px; }
.stack { display: flex; flex-direction: column; gap: 16px; }

.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; box-shadow: var(--sh); }
.kpi[data-go] { cursor: pointer; }
.kpi[data-go]:hover { border-color: var(--line-2); }
.kl { font-size: 12px; color: var(--ink-2); font-weight: 500; }
.kv { font-size: 24px; font-weight: 650; letter-spacing: -0.02em; margin-top: 2px; }
.ks { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.kpi.bad .kv { color: var(--bad); }
.kpi.ok .kv { color: var(--ok); }
.kpi.warn .kv { color: var(--warn); }
.kpi .delta { font-size: 12px; font-weight: 600; margin-left: 6px; }

.pill { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 20px; background: var(--h-n0); color: var(--ink-2); white-space: nowrap; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.bad { background: var(--bad-bg); color: var(--bad); }
.pill.info { background: var(--info-bg); color: var(--info); }
.pill.scn { background: var(--scn-bg); color: var(--scn); }

/* heatmap */
.heat-wrap { overflow-x: auto; }
.heat { border-collapse: separate; border-spacing: 3px; width: 100%; min-width: 760px; }
.heat th { font-size: 11.5px; font-weight: 500; color: var(--ink-3); text-align: center; padding: 0 0 4px; white-space: nowrap; }
.heat th.rowh { text-align: left; color: var(--ink); font-weight: 500; font-size: 13px; padding: 0 10px 0 0; width: 210px; }
.heat th.rowh small { color: var(--ink-3); font-weight: 400; margin-left: 4px; }
.heat tr.grp th { text-align: left; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); padding-top: 10px; }
.heat td { height: 32px; border-radius: 5px; text-align: center; font-size: 12px; font-weight: 600; cursor: pointer; transition: transform .08s; font-variant-numeric: tabular-nums; }
.heat td:hover { outline: 2px solid var(--ink); outline-offset: 0; }
.heat td.g2 { background: var(--h-g2); color: #fff; }
.heat td.g1 { background: var(--h-g1); color: #0F5A3D; }
.heat td.n0 { background: var(--h-n0); color: var(--ink-3); }
.heat td.a1 { background: var(--h-a1); color: #6B4200; }
.heat td.r1 { background: var(--h-r1); color: #6E120B; }
.heat td.r2 { background: var(--h-r2); color: #fff; }
.heat td.peak { box-shadow: inset 0 0 0 2px var(--ink); }
.heat th.now { color: var(--tc); font-weight: 700; }
.heat-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); margin-top: 10px; align-items: center; }
.heat-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 5px; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; }
.seg button { font: inherit; font-size: 12px; font-weight: 600; border: 0; background: var(--panel); color: var(--ink-2); padding: 5px 10px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line-2); }
.seg button.on { background: var(--ink); color: #fff; }

/* charts */
.chart svg { width: 100%; display: block; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .ax { fill: var(--ink-3); font-size: 10.5px; }
.chart .band { fill: var(--bad-bg); opacity: .7; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-2); margin-top: 6px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: 3px; margin-right: 6px; }
.spark { width: 96px; height: 26px; display: block; }

.bars { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) 56px; gap: 10px; align-items: center; font-size: 13px; }
.bar-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.bar { height: 8px; background: var(--h-n0); border-radius: 4px; overflow: hidden; position: relative; }
.bar i { display: block; height: 100%; background: var(--tc); border-radius: 4px; }
.bar.two i.req { position: absolute; top: 0; left: 0; background: transparent; border-right: 2px solid var(--ink); border-radius: 0; height: 100%; }

/* tables */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--panel-2); }
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl th.num, .tbl td.num { text-align: right; }
.tbl tbody tr:hover { background: var(--panel-2); }
.tbl tr[data-href], .tbl tr[data-open] { cursor: pointer; }

/* suggested moves + alerts */
.move { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 13px; }
.move:first-of-type { border-top: 0; padding-top: 0; }
.move .muted { font-size: 12px; margin-top: 2px; }
.alert { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; }
.alert:first-of-type { border-top: 0; padding-top: 0; }
.alert .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; }

/* drawer */
#drawer { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
#drawer.open { pointer-events: auto; }
.dr-scrim { position: absolute; inset: 0; background: rgba(14,22,48,.32); }
.dr-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(620px, 100%); background: var(--panel); box-shadow: -8px 0 32px rgba(14,22,48,.18); display: flex; flex-direction: column; animation: slide .18s ease-out; }
@keyframes slide { from { transform: translateX(24px); opacity: 0; } }
.dr-head { display: flex; justify-content: space-between; gap: 12px; padding: 18px 22px 14px; border-bottom: 1px solid var(--line); }
.dr-head h2 { font-size: 18px; font-weight: 650; }
.dr-head p { margin: 2px 0 0; color: var(--ink-3); font-size: 12.5px; }
.dr-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--tc); margin-bottom: 2px; }
.dr-body { padding: 6px 22px 28px; overflow-y: auto; }
.dr-body h3 { font-size: 13px; font-weight: 650; margin: 18px 0 8px; }
.dr-actions { display: flex; gap: 8px; margin-top: 20px; }
.why { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 13px; }
.why li + li { margin-top: 4px; }
.formula { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 12.5px; }
.fx-row { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; padding: 3px 0; }
.fx-lab { color: var(--ink-3); font-weight: 500; }
.formula code { font-family: inherit; color: var(--ink); }
.formula b { font-weight: 700; }
.fx-note { color: var(--ink-3); font-size: 11.5px; margin-top: 6px; border-top: 1px dashed var(--line-2); padding-top: 6px; }

#toast { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 9px; font-weight: 500; font-size: 13px; opacity: 0; transition: .2s; z-index: 60; pointer-events: none; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

.empty { padding: 32px; text-align: center; color: var(--ink-3); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tabs button { font: inherit; font-weight: 600; font-size: 13px; color: var(--ink-3); background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; cursor: pointer; margin-bottom: -1px; }
.tabs button.on { color: var(--tc); border-bottom-color: var(--tc); }

@media (max-width: 1180px) {
  .g-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-2 { grid-template-columns: minmax(0, 1fr); }
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; z-index: 40; left: 0; width: var(--nav-w); transform: translateX(-100%); transition: transform .2s; }
  body.nav-open .side { transform: none; box-shadow: 8px 0 32px rgba(14,22,48,.2); }
  /* the open menu sits below the top bar, so its menu button stays reachable to close it again */
  .side { top: 58px; height: calc(100vh - 58px); }
  /* an open drawer also starts below the top bar, and the opened menu sits above it, so the menu stays usable
     while a drill-down is open (choosing a screen closes the drawer) */
  #drawer { top: 58px; }
  body.nav-open .side { z-index: 55; }
  #menu-btn { display: block; }
  .top { padding: 0 16px; } .who { display: none; }
  .scope { padding: 10px 16px; position: static; } .scope select { min-width: 0; }
  #view { padding: 16px 16px 40px; }
  .g-kpi, .g-2e, .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .g-kpi, .g-2e, .g-3 { grid-template-columns: minmax(0, 1fr); }
  .plan .flag, .top .ws, .avatar { display: none; }
  .top { gap: 8px; } .plan { min-width: 0; flex: 1; } .plan select { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.help-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink-2); font: inherit; font-weight: 700; cursor: pointer; }
.help-btn:hover { border-color: var(--tc); color: var(--tc); }

.ro-note { margin: -8px 0 14px; font-size: 12.5px; color: var(--warn); background: var(--warn-bg); border-radius: 8px; padding: 7px 12px; }

/* WFM lifecycle strip */
.lc-strip{display:flex;align-items:stretch;gap:6px;overflow-x:auto;padding:2px 0 4px;margin:0 0 14px}
.lc-step{flex:1 1 0;min-width:128px;display:block;text-decoration:none;color:var(--ink,#18213A);background:#fff;border:1px solid #E1E5EE;border-radius:10px;padding:8px 11px;transition:border-color .12s}
.lc-step:hover{border-color:#0030DB}.lc-step:focus-visible{outline:2px solid #0030DB;outline-offset:2px}
.lc-step b{display:block;font-size:12.5px;font-weight:650;white-space:nowrap}.lc-step b i{font-style:normal;color:#5F6780;font-size:11px}
.lc-step small{display:block;font-size:11px;color:#5F6780;white-space:nowrap}
.lc-step.on{background:#0030DB;border-color:#0030DB;color:#fff}.lc-step.on small{color:#C9D3FF}
.lc-arr{align-self:center;color:#9AA3B8;font-size:14px;flex:0 0 auto}
@media (max-width:700px){.lc-step{min-width:118px}}