/* Optima Ops design system v2 - operations room look: dark sidebar, light working area, signal colour for action.
   Keep class names stable: card, tbl, chip, btn, tile, form, kv, sev, score, bar, alert are used by every screen. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
:root{
  --ink-900:#0b1526; --ink-800:#111f36; --ink-700:#1a2c4a; --ink-600:#27406a; --ink-fg:#dbe4f3; --ink-muted:#8396b5;
  --bg:#eef1f5; --panel:#ffffff; --panel-2:#f7f9fb; --fg:#121a26; --muted:#5b6b7f; --line:#d7dde6; --line-soft:#e9edf2;
  --brand:#0e6e8c; --brand-soft:#e1f0f4; --brand-fg:#ffffff;
  --signal:#f26b1d; --signal-soft:#fdebdf;
  --ok:#178a4c; --ok-bg:#e1f3e8; --warn:#c77700; --warn-bg:#fff2dd; --block:#c3271b; --block-bg:#fbe7e4; --info:#3b6fb6; --info-bg:#e4edf8;
  --accent:var(--brand); --accent-soft:var(--brand-soft); --accent-fg:var(--brand-fg);
  --display:"IBM Plex Sans","Segoe UI",system-ui,sans-serif; --body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif; --mono:"IBM Plex Mono",Consolas,monospace;
  --radius:8px; --radius-sm:5px; --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --sidebar:228px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:14.5px;line-height:1.45}
a{color:var(--brand)}
h1{font-family:var(--display);font-size:1.45rem;margin:0 0 .6rem;font-weight:600;letter-spacing:-.01em}
h2{font-family:var(--display);font-size:1.02rem;margin:0 0 .6rem;font-weight:600}
h3{font-size:.95rem;margin:0 0 .4rem;font-weight:600}
.muted{color:var(--muted)}.muted-sm{color:var(--muted);font-size:.85rem}
.mono,.num,.tbl td.num,.tile-n,.score,.kpi-n{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{text-align:right}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

/* ---- shell: sidebar + main */
.shell{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100vh}
.sidebar{background:var(--ink-900);color:var(--ink-fg);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:14px 12px}
.brand{display:flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;padding:6px 8px 16px;border-bottom:1px solid var(--ink-700);margin-bottom:10px}
.brand-mark{width:30px;height:30px;border-radius:7px;background:linear-gradient(135deg,var(--signal),#ffb04d);display:grid;place-items:center;font-family:var(--mono);font-weight:600;color:#1a1200;font-size:.95rem}
.brand-name{font-family:var(--display);font-weight:600;font-size:1.02rem;line-height:1.1}
.brand-sub{display:block;font-size:.7rem;color:var(--ink-muted);letter-spacing:.08em;text-transform:uppercase;font-family:var(--mono)}
.nav{display:flex;flex-direction:column;gap:2px;flex:1}
.nav a{display:flex;align-items:center;gap:.65rem;padding:.5rem .7rem;border-radius:6px;color:var(--ink-fg);text-decoration:none;font-weight:500;font-size:.93rem}
.nav a svg{width:17px;height:17px;flex:none;opacity:.75}
.nav a:hover{background:var(--ink-800)}
.nav a.active{background:var(--ink-700);color:#fff;box-shadow:inset 3px 0 0 var(--signal)}
.nav a.active svg{opacity:1}
.nav .nav-gap{height:8px}
.nav .nav-label{padding:.7rem .7rem .25rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
.who{border-top:1px solid var(--ink-700);padding-top:10px;margin-top:8px;display:grid;grid-template-columns:34px 1fr auto;gap:.5rem;align-items:center}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--ink-600);display:grid;place-items:center;font-weight:600;font-size:.85rem;color:#fff}
.who-name{font-weight:600;font-size:.9rem;color:#fff;line-height:1.15}.who-role{color:var(--ink-muted);font-size:.75rem}
.who a{color:var(--ink-muted);font-size:.78rem;text-decoration:none}.who a:hover{color:#fff}
.clock{font-family:var(--mono);font-size:.78rem;color:var(--ink-muted);padding:.2rem .7rem .6rem}
.main{min-width:0;display:flex;flex-direction:column}
.page{padding:22px 26px 40px;max-width:1500px;width:100%;margin:0 auto}
.flash{background:var(--ok-bg);color:var(--ok);padding:.55rem 26px;border-bottom:1px solid var(--line);font-weight:500}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:14px}
.page-head h1{margin:0}
.page-head .sub{color:var(--muted);font-size:.9rem}
@media(max-width:900px){.shell{grid-template-columns:1fr}.sidebar{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.3rem;padding:8px 10px}.brand{border:0;margin:0;padding:4px 8px}.nav{flex-direction:row;flex-wrap:wrap}.nav .nav-label,.nav .nav-gap,.clock{display:none}.who{border:0;margin:0;padding:0;margin-left:auto}.page{padding:16px}}

/* ---- surfaces */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:16px;min-width:0;box-shadow:var(--shadow)}
.card.flat{box-shadow:none}.card.narrow{max-width:560px}.card.tight{padding:12px 14px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.6rem}
.card-head h2{margin:0}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}.grid-12{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
@media(max-width:1100px){.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.grid-2,.grid-3,.grid-4,.grid-21,.grid-12{grid-template-columns:1fr}}
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}.spread{justify-content:space-between}
.toolbar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:12px}

/* ---- KPI tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.tile{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px 10px;text-decoration:none;color:var(--fg);box-shadow:var(--shadow);position:relative;min-width:0}
.tile-n{font-size:1.65rem;font-weight:600;line-height:1.1}
.tile-l{color:var(--muted);font-size:.8rem;margin-top:.15rem}
.tile-sub{font-size:.78rem;color:var(--muted);margin-top:.3rem}
.tile .spark{display:block;width:100%;height:28px;margin-top:.45rem}
.tile .spark svg{width:100%;height:28px}
.tile{display:flex;flex-direction:column}.tile .spark{margin-top:auto;padding-top:.4rem}
.tile.warn .tile-n{color:var(--warn)}.tile.block .tile-n{color:var(--block)}.tile.ok .tile-n{color:var(--ok)}.tile.signal .tile-n{color:var(--signal)}
.delta{font-family:var(--mono);font-size:.74rem;padding:.05rem .4rem;border-radius:999px;background:var(--line-soft);color:var(--muted)}
.delta.up{background:var(--ok-bg);color:var(--ok)}.delta.down{background:var(--block-bg);color:var(--block)}

/* ---- tables */
.tbl{border-collapse:collapse;width:100%;font-size:.9rem}
.tbl th,.tbl td{padding:.5rem .6rem;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}
.tbl th{font-weight:600;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-family:var(--mono);white-space:nowrap}
.tbl tbody tr:hover td{background:var(--panel-2)}
.tbl td.num,.tbl th.num{text-align:right}
.tbl tr.clickable{cursor:pointer}
.tbl-wrap{overflow-x:auto}
.tbl .tot td{font-weight:600;border-top:2px solid var(--line)}

/* ---- chips, severity, score */
.chip{display:inline-block;padding:.12rem .55rem;border-radius:999px;font-size:.74rem;font-weight:600;letter-spacing:.02em;background:var(--line-soft);color:var(--muted);white-space:nowrap;line-height:1.5}
.chip.ok{background:var(--ok-bg);color:var(--ok)}.chip.warn{background:var(--warn-bg);color:var(--warn)}.chip.block{background:var(--block-bg);color:var(--block)}
.chip.info{background:var(--info-bg);color:var(--info)}.chip.accent{background:var(--brand-soft);color:var(--brand)}.chip.signal{background:var(--signal-soft);color:var(--signal)}
.chip.dark{background:var(--ink-700);color:#fff}
.sev{display:inline-block;min-width:3.6rem;text-align:center;font-family:var(--mono);font-size:.68rem;text-transform:uppercase;padding:.12rem .3rem;border-radius:3px;letter-spacing:.05em}
.sev.block{background:var(--block-bg);color:var(--block)}.sev.warn{background:var(--warn-bg);color:var(--warn)}.sev.info{background:var(--info-bg);color:var(--info)}
.score{font-weight:600}.score.ok{color:var(--ok)}.score.warn{color:var(--warn)}.score.block{color:var(--block)}
.bar{height:8px;background:var(--line-soft);border-radius:4px;overflow:hidden}.bar>i{display:block;height:100%;background:var(--brand)}
.bar>i.ok{background:var(--ok)}.bar>i.warn{background:var(--warn)}.bar>i.block{background:var(--block)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--muted);margin-right:.35rem;vertical-align:middle}
.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.block{background:var(--block)}.dot.info{background:var(--info)}.dot.signal{background:var(--signal)}
.dot.live{box-shadow:0 0 0 3px rgba(23,138,76,.2);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(23,138,76,.35)}70%{box-shadow:0 0 0 6px rgba(23,138,76,0)}100%{box-shadow:0 0 0 0 rgba(23,138,76,0)}}
@media(prefers-reduced-motion:reduce){.dot.live{animation:none}}

/* ---- buttons, forms */
.btn{display:inline-flex;align-items:center;gap:.35rem;padding:.42rem .9rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);color:var(--fg);font:inherit;font-weight:500;cursor:pointer;text-decoration:none;line-height:1.2;box-shadow:0 1px 1px rgba(16,24,40,.04)}
.btn:hover{border-color:var(--brand);color:var(--brand)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:var(--brand-fg)}.btn-primary:hover{color:#fff;filter:brightness(1.08)}
.btn-signal{background:var(--signal);border-color:var(--signal);color:#fff}.btn-signal:hover{color:#fff;filter:brightness(1.06)}
.btn-ok{background:var(--ok);border-color:var(--ok);color:#fff}.btn-ok:hover{color:#fff}
.btn-danger{background:var(--block);border-color:var(--block);color:#fff}.btn-danger:hover{color:#fff}
.btn-ghost{border-color:transparent;background:transparent;color:var(--muted);box-shadow:none}
.btn-sm{padding:.25rem .6rem;font-size:.83rem}.btn-lg{padding:.7rem 1.2rem;font-size:1.02rem}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.form{display:flex;flex-direction:column;gap:.7rem}
.form label,.field{display:flex;flex-direction:column;gap:.2rem;font-size:.84rem;color:var(--muted);font-weight:500}
input,select,textarea{font:inherit;color:var(--fg);padding:.42rem .6rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;min-width:0}
input[type=checkbox]{width:auto}textarea{min-height:70px}
.form-row{display:flex;gap:.8rem;flex-wrap:wrap}.form-row>*{flex:1 1 160px}
.inline-form{display:inline}
.alert{padding:.6rem .8rem;border-radius:var(--radius-sm);margin-bottom:.8rem;border-left:3px solid currentColor}
.alert.block{background:var(--block-bg);color:var(--block)}.alert.warn{background:var(--warn-bg);color:var(--warn)}.alert.ok{background:var(--ok-bg);color:var(--ok)}.alert.info{background:var(--info-bg);color:var(--info)}
.tabs{display:flex;gap:.2rem;border-bottom:1px solid var(--line);margin-bottom:12px;flex-wrap:wrap}
.tabs a{padding:.45rem .8rem;color:var(--muted);text-decoration:none;font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.active{color:var(--brand);border-color:var(--brand)}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:.25rem 1rem;font-size:.9rem}.kv dt{color:var(--muted)}.kv dd{margin:0}
.login-box{max-width:380px;margin:8vh auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.empty{padding:1.5rem;text-align:center;color:var(--muted)}
.crumbs{font-size:.85rem;color:var(--muted);margin-bottom:.5rem}.crumbs a{color:var(--muted)}
.legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;font-size:.82rem;color:var(--muted)}
.sq{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:middle;margin-right:.3rem}

/* ---- unit board */
.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.unit{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow);border-top:3px solid var(--muted);min-width:0}
.unit.working{border-top-color:var(--ok)}.unit.planned{border-top-color:var(--info)}.unit.idle{border-top-color:var(--line)}.unit.standby{border-top-color:var(--warn)}
.unit-head{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.unit-code{font-family:var(--mono);font-weight:600;font-size:1.05rem}
.unit-well{font-weight:600;margin-top:.3rem}
.unit-meta{color:var(--muted);font-size:.82rem;margin-top:.15rem}
.unit-foot{display:flex;justify-content:space-between;align-items:center;margin-top:.6rem;font-size:.8rem;color:var(--muted)}
.unit-elapsed{font-family:var(--mono);font-weight:600;color:var(--fg)}
.unit .spark{width:96px;height:26px}

/* ---- timeline bar (job) */
.tl{position:relative;height:26px;background:var(--line-soft);border-radius:5px;overflow:hidden}
.tl>i{position:absolute;top:0;bottom:0;display:block}
.tl .RIGUP,.tl .RIGDOWN{background:#8fa6c7}.tl .RUN{background:var(--brand)}.tl .STANDBY{background:var(--warn)}.tl .GAP{background:repeating-linear-gradient(45deg,#fff,#fff 4px,#e4e8ee 4px,#e4e8ee 8px)}
.tl-axis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.7rem;color:var(--muted);margin-top:.2rem}

@media print{.sidebar,.flash,.no-print{display:none!important}.shell{display:block}.page{padding:0;max-width:none}.card{border:0;box-shadow:none}body{background:#fff}}

/* ---- horizontal bars (league tables) */
.hbars{display:flex;flex-direction:column;gap:.45rem}
.hbar{display:grid;grid-template-columns:minmax(90px,150px) 1fr 64px;gap:.6rem;align-items:center;font-size:.88rem}
.hbar-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar-t{height:10px;background:var(--line-soft);border-radius:5px;overflow:hidden}.hbar-t>i{display:block;height:100%;border-radius:5px}
.hbar-v{text-align:right;font-size:.82rem}
.list{display:flex;flex-direction:column;gap:.5rem}
.list-row{display:flex;justify-content:space-between;gap:.6rem;align-items:center;padding:.45rem 0;border-bottom:1px solid var(--line-soft);font-size:.9rem}
.list-row:last-child{border-bottom:0}
.age{font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.age.old{color:var(--block);font-weight:600}

/* ---- inbox badge + feedback widget */
.nav-badge{margin-left:auto;background:var(--signal);color:#fff;font-family:var(--mono);font-size:.7rem;font-weight:600;padding:.05rem .45rem;border-radius:999px}
.fb{position:fixed;right:18px;bottom:18px;z-index:50;display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}
.fb-btn{background:var(--ink-900);color:#fff;border:0;border-radius:999px;padding:.55rem 1rem;font:inherit;font-weight:600;font-size:.85rem;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.fb-btn:hover{background:var(--ink-700)}
.fb-box[hidden]{display:none}
.fb-box{width:320px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px;box-shadow:0 8px 28px rgba(0,0,0,.2);display:flex;flex-direction:column;gap:.5rem}
.fb-head{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:.9rem}
.fb-box textarea{width:100%}
@media print{.fb{display:none}}