/* Mission Control — the PRODUCTION aesthetic, ported (Leo, 2026-08-10:
   "use the live production site's header, design, style, and logo across
   the entire admin panel"). Tokens, topbar, tabs, user chip, split-menu and
   the sign-in card are copied from app/static/next/app.css + app/auth.py
   LOGIN_HTML with the same class names, so a change of house style there is
   a find-here reminder. Content fills the full viewport and scales
   (Leo: "occupy the full browser screen width and height … responsively").
   Breathing space (rule 9): nothing full-bleed; the column wears padding. */

/* ---- tokens (app.css :root, verbatim) ---- */
:root{
  --coral:#EF5756; --coral-soft:#FDEEEE; --coral-border:#F8C9C8;
  --charcoal:#252429; --ink:#1C2128; --body:#4B5563; --mut:#8A919E;
  --line:#E7E9EE; --line2:#D6DAE2; --neutral:#F1F2F5;
  --green:#1E9E55; --green-soft:#E9F7EE; --green-border:#BFE4CB; --green-text:#166B3C;
  --amber-soft:#FDF4E5; --amber-border:#F0D9AE; --amber-text:#8A5A00;
  --red:#D6453A; --red-soft:#FCEFED; --red-border:#F0C4BE; --red-text:#A32E24;
  --canvas:#F4F5F7;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,sans-serif;
  color:var(--ink);background:var(--canvas);display:flex;flex-direction:column;overflow:hidden}
button{font-family:inherit;cursor:pointer}
input{font-family:inherit}

/* ---- topbar (app.css #topbar, ported) ---- */
#topbar{height:48px;min-height:48px;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;padding:0 12px 0 20px;position:relative;z-index:40}
.tb-mark{width:23.4px;height:26px;display:block}
.tb-word{font-size:16.5px;font-weight:600;letter-spacing:-.1px;white-space:nowrap}
.tb-word .w1{color:var(--charcoal);font-weight:600}
.tb-word .w2{color:var(--coral);font-weight:600}
.tb-div{width:1px;height:20px;background:var(--line)}
.tb-filegroup{display:flex;flex-direction:column;gap:1px;padding-left:10px;min-width:0;max-width:300px}
.fg-title{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fg-sub{font-size:10.5px;color:var(--mut);white-space:nowrap}
.tb-spacer{flex:1}
.tb-ver{font-size:10.5px;color:var(--mut);white-space:nowrap;padding:0 2px}

/* tabs — production's boxed-pill active state and icon grammar */
.tb-tabs{display:flex;gap:4px;height:48px;align-items:stretch;
  flex:0 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}
.tb-tabs::-webkit-scrollbar{display:none}
.tb-tabs .tab{display:flex;align-items:center;gap:7px;padding:0 14px;font-size:13px;color:var(--body);
  text-decoration:none;position:relative;white-space:nowrap}
.tb-tabs .tab svg{width:15px;height:15px;flex:none}
.tb-tabs .tab.on{color:var(--coral);font-weight:600;border:1.5px solid var(--coral);border-radius:8px;padding:7px 14px;margin:0 2px;
  align-self:center;height:auto}  /* the pill hugs its label (Leo, 2026-07-29) */
.tb-tabs .tab.dis{color:#b6bcc6;cursor:default}
/* icon-only below the production breakpoint — the title is the hover label */
@media (max-width:1100px){
  .tb-tabs .tab .tab-lbl{display:none}
  .tb-tabs .tab{padding:0 9px}
  .tb-tabs .tab.on{padding:7px 9px}
  .tb-tabs .tab svg{width:17px;height:17px}
}
@media (max-width:1180px){
  #topbar{gap:8px;padding:0 8px 0 12px}
  .tb-tabs{gap:2px}
}

/* user chip + menu (app.css .tb-user / .split-menu, ported) */
.tb-user{position:relative}
.tb-userbtn{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line2);
  border-radius:999px;padding:5px 12px 5px 5px;cursor:pointer;font:600 13px/1 Inter,system-ui,sans-serif;color:var(--body)}
.tb-userbtn:hover{border-color:#C3C9D3;background:var(--neutral)}
.tb-avatar{width:24px;height:24px;border-radius:50%;background:var(--coral);color:#fff;
  display:flex;align-items:center;justify-content:center;font:700 12px/1 Inter,system-ui,sans-serif;letter-spacing:.02em}
.tb-uname{white-space:nowrap}
.split-menu{position:absolute;top:calc(100% + 6px);right:0;background:#fff;border:1px solid var(--line2);
  border-radius:10px;box-shadow:0 10px 30px rgba(15,23,41,.16);padding:6px;min-width:230px;z-index:60}
.split-menu button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:7px;
  padding:8px 12px;font-size:13px;color:var(--ink)}
.split-menu button:hover{background:var(--neutral)}
.split-menu button.danger{color:var(--red)}
.tb-usermenu{min-width:238px}
.tb-userhead{padding:8px 10px 6px;border-bottom:1px solid var(--line2);margin-bottom:4px}
.tb-userhead b{display:block;font-size:13px}
.tb-userhead span{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em}

/* ---- content column — full width and height, scrolls as one page ---- */
.wrap{flex:1;width:100%;overflow-y:auto;padding:24px 32px;display:flex;
  flex-direction:column;gap:12px}
@media (max-width:900px){.wrap{padding:16px}}

/* KPI strip — equal tiles that share the full row; they wrap on narrow */
.kpis{display:flex;gap:12px;flex-wrap:wrap}
.kpi{flex:1 1 140px;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:11px 14px}
.kpi b{display:block;font-weight:590;font-size:17px;color:var(--ink)}
.kpi.bad b{color:var(--red)}
.kpi span{font-size:11px;color:var(--mut)}

/* fleet table — a card whose columns are PROPORTIONS, not pixels, so the
   row uses whatever width the browser has */
.card{background:#fff;border:1px solid var(--line);border-radius:12px}
.fleet{padding:6px 0}
.frow{display:flex;align-items:center;padding:12px 20px;gap:8px}
.frow.head{padding:9px 20px}
.frow.head span{font-size:11px;font-weight:590;color:var(--mut);letter-spacing:.7px}
.fdiv{height:1px;background:var(--neutral);margin:0 20px}
.fdiv.hd{background:var(--line)}
.c-co{flex:2.4 1 160px}.c-st{flex:1.5 1 110px}.c-ver{flex:1 1 80px}
.c-ex{flex:1.8 1 120px}.c-jobs{flex:1.2 1 90px}.c-cl{flex:1.1 1 90px}
.frow .cell{display:flex;align-items:center;min-height:20px;min-width:0}
.frow .cell>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px){.c-ver,.c-cl{display:none}}  /* least-load-bearing first */
.dot{width:8px;height:8px;border-radius:999px;margin-right:8px;flex:none}
.dot.ok{background:var(--green)}.dot.warn{background:#f0b429}
.dot.bad{background:var(--red)}
.coname{font-weight:590;font-size:13.5px;color:var(--ink)}
.val{font-size:12.5px;color:var(--body)}
.val.dim{color:var(--mut)}.val.ok{color:var(--green-text)}
.val.warn{color:var(--amber-text)}
.val.bad{color:var(--red-text);font-weight:590}

/* chips — the app.css status-chip pattern */
.chip{display:inline-block;padding:3px 8px;border-radius:999px;
  font-size:10.5px;font-weight:510}
.chip.ok{background:var(--green-soft);border:1px solid var(--green-border);color:var(--green-text)}
.chip.warn{background:var(--amber-soft);border:1px solid var(--amber-border);color:var(--amber-text)}
.chip.bad{background:var(--red-soft);border:1px solid var(--red-border);color:var(--red-text)}
.chip.dim{background:var(--neutral);border:1px solid var(--line);color:var(--body)}

/* alerts card */
.alerts{padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.alerts .label{font-size:11px;font-weight:590;color:var(--mut);letter-spacing:.7px}
.arow{display:flex;align-items:center;gap:12px}
.arow .msg{flex:1;font-size:13px;color:var(--ink);min-width:0}
.arow a{font-size:12.5px;font-weight:590;color:var(--coral);text-decoration:none;white-space:nowrap}
.empty{font-size:13px;color:var(--mut);padding:8px 20px 14px}
.alerts .msg.quiet{color:var(--mut)}

/* ---- Dashboard (MC-2, Figma 275:9 D6): tiles, 61/39 grid, chart, bars ---- */
.tiles{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.tile{flex:1 1 210px;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-height:84px}
.tile b{font-size:19px;font-weight:600;color:var(--ink)}
.tile .tlabel{font-size:11px;color:var(--mut)}
.tile .tlabel.caps{font-weight:590;letter-spacing:.7px}
.tile .tsub{font-size:10.5px;color:var(--mut)}
.tile .trow{display:flex;align-items:baseline;gap:8px}
.tile .tdelta{font-size:11px;font-weight:590}
.tile .tdelta.up{color:var(--green-text)}.tile .tdelta.down{color:var(--red-text)}
.tile.attn{background:var(--red-soft);border-color:var(--red-border)}   /* 275:46 */
.tile.attn b{color:var(--red-text)}
.dgrid{display:grid;grid-template-columns:61fr 39fr;gap:10px}
@media (max-width:1000px){.dgrid{grid-template-columns:1fr}}
.dcol{display:flex;flex-direction:column;gap:10px;min-width:0}
.dcol .card{padding:12px 16px}
.dcol .label{font-size:11px;font-weight:590;color:var(--mut);letter-spacing:.7px}
.pempty{font-size:12.5px;color:var(--mut);padding:10px 0 4px}

/* net chart (275:52): grid hairlines, direct labels, current month coral */
.phead{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.seg{display:flex;gap:2px;background:var(--neutral);border-radius:8px;padding:3px}   /* 275:55 */
.seg button{border:0;background:none;border-radius:6px;padding:3px 8px;
  font-size:11px;font-weight:590;color:var(--body)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(15,23,41,.12)}
svg.net{width:100%;height:auto;display:block}
svg.net .grid{stroke:var(--neutral);stroke-width:1}
svg.net .line{fill:none;stroke:var(--body);stroke-width:1.6}
svg.net .pt{fill:var(--body)}
svg.net .pt.now{fill:var(--coral)}
svg.net .plab{font-size:10px;fill:var(--body);text-anchor:middle;font-weight:600}
svg.net .plab.now{fill:var(--coral)}
svg.net .mlab{font-size:10px;fill:var(--mut);text-anchor:middle}

/* fleet mini-table (275:94) — proportion columns, row click → Health */
.drow{display:flex;align-items:center;gap:8px;padding:8px 0;cursor:pointer}
.drow:hover{background:var(--canvas);border-radius:8px}
.d-co{flex:2.2 1 140px}.d-st{flex:1.3 1 90px}.d-ex{flex:1.6 1 110px}
.d-jobs{flex:.9 1 60px}.d-mg{flex:.8 1 50px}
.dfleet .fdiv{margin:0}

/* onboarding rows (275:137) + shared bar rows (275:176 grammar) */
.obrow,.brow{padding:7px 0}
.btop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bname{font-size:13px;font-weight:590;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bval{font-size:12px;color:var(--body);white-space:nowrap}
.obright{display:flex;align-items:center;gap:8px;min-width:0}
.brail{height:5px;border-radius:999px;background:var(--neutral);margin-top:5px}
.bfill{height:5px;border-radius:999px}
.bfill.green{background:var(--green)}
.bfill.coral{background:var(--coral)}
.bfill.gray{background:var(--line2)}

/* needs attention (275:151): tinted red-soft, red border, white rows */
.datt.hot{background:var(--red-soft);border-color:var(--red-border)}
.athead{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.atcount{background:var(--red);color:#fff;border-radius:999px;min-width:18px;
  height:18px;display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;padding:0 5px}
.atnote{font-size:11.5px;color:var(--red-text);margin-left:auto}
.atrow{display:flex;align-items:center;gap:12px;background:#fff;
  border:1px solid var(--line);border-radius:8px;padding:7px 10px;margin-top:6px}
.atrow .msg{flex:1;font-size:13px;color:var(--ink);min-width:0}
.atrow a{font-size:12.5px;font-weight:590;color:var(--coral);
  text-decoration:none;white-space:nowrap}

/* ---- Onboarding (MC-3, Figma 265:9 W2): rail 230px + checklist panel ---- */
.obgrid{display:grid;grid-template-columns:230px 1fr;gap:10px;align-items:start}
@media (max-width:900px){.obgrid{grid-template-columns:1fr}}
.obrail{padding:14px;display:flex;flex-direction:column;gap:6px}
.obrail .label.rl{margin-top:10px}
.obcard{display:flex;flex-direction:column;gap:2px;text-align:left;border:0;
  background:none;border-radius:10px;padding:9px 12px;cursor:pointer}   /* 265:31 */
.obcard:hover{background:var(--canvas)}
.obcard.on{background:var(--coral-soft)}
.obcard b{font-size:13.5px;font-weight:590;color:var(--ink)}
.obcard span{font-size:11.5px;color:var(--mut)}
.obcard.on span{color:var(--red-text)}
.obnew{border:1px dashed var(--line2);background:none;border-radius:10px;
  padding:8px 12px;font-size:13px;font-weight:590;color:var(--body);
  text-align:left;margin-top:8px}                                       /* 265:47 */
.obnew:hover{border-color:var(--coral);color:var(--coral)}
.obform{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.obform input{border:1px solid var(--line2);border-radius:8px;padding:7px 10px;
  font-size:12.5px}
.obform input:focus{outline:none;border-color:var(--coral)}
.obformrow{display:flex;gap:6px}
.obgo{flex:1;background:var(--coral);color:#fff;border:0;border-radius:8px;
  padding:7px 10px;font-size:12.5px;font-weight:590}
.obcancel{background:var(--neutral);border:1px solid var(--line2);color:var(--body);
  border-radius:8px;padding:7px 10px;font-size:12.5px}
.oberr{font-size:11.5px;color:var(--red-text);min-height:0}
.oberr:empty{display:none}
.obmain{display:flex;flex-direction:column;gap:10px;min-width:0}
.obpanel{padding:14px 16px}
.obhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.obhead h2{margin:0;font-size:16px;font-weight:600;color:var(--ink)}    /* 265:51 */
.obmeta{font-size:12px;color:var(--mut);margin-left:auto}               /* 265:55 */
.obstatus{border:1px solid var(--line2);border-radius:8px;padding:4px 8px;
  font-size:12px;font-family:inherit;color:var(--body);background:#fff}
.obcols{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
@media (max-width:760px){.obcols{grid-template-columns:1fr}}
.obcol{min-width:0}
.obitem{display:flex;align-items:flex-start;gap:8px;width:100%;border:0;
  background:none;border-radius:7px;padding:5px 8px;text-align:left;cursor:pointer}
.obitem:hover{background:var(--canvas)}
.obglyph{width:14px;flex:none;font-size:13px;color:var(--mut)}
.obitem.st-done .obglyph{color:var(--green-text)}
.obitem.st-progress .obglyph,.obitem.st-waiting .obglyph{color:var(--amber-text)}
.obtext{font-size:13px;color:var(--ink)}
.obitem.st-done .obtext{color:var(--body)}
.obitem.st-skipped .obglyph,.obitem.st-skipped .obtext{color:var(--mut)}
.obcall{padding:12px 16px;display:flex;align-items:center;gap:12px}     /* 265:101 */
.obcall .msg{flex:1;font-size:13px;color:var(--ink)}
.obrblink{font-size:12.5px;font-weight:590;color:var(--coral);text-decoration:none;
  border:1px solid var(--coral-border);border-radius:8px;padding:6px 12px;
  white-space:nowrap}
.obwiz{padding:12px 16px}                                               /* 265:105 */

/* ---- sign-in — the production card (app/auth.py LOGIN_HTML, ported) ---- */
body.loginpage{align-items:center;justify-content:center;overflow:auto}
.logincard{width:360px;max-width:92vw;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:40px 36px 32px;box-shadow:0 8px 28px rgba(28,33,40,.07)}
.logincard .brand{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:26px}
.logincard .brand img{width:56px;height:62px}
.logincard .word{font-size:26px;letter-spacing:-.02em}
.logincard .word b{font-weight:600}
.logincard .word .w1{color:var(--charcoal)}
.logincard .word .w2{color:var(--coral)}
.logincard .sub{font-size:12.5px;color:var(--mut);margin-top:-8px;text-align:center}
.logincard label{display:block;font-size:12px;font-weight:600;color:var(--body);margin:14px 0 6px}
.logincard input{width:100%;height:40px;padding:0 12px;font-size:14px;
  color:var(--ink);background:#fff;border:1px solid var(--line2);border-radius:9px;
  outline:none;transition:border-color .12s, box-shadow .12s}
.logincard input:focus{border-color:var(--coral);box-shadow:0 0 0 3px rgba(239,87,86,.13)}
.logincard button{width:100%;height:42px;margin-top:22px;font-size:14px;font-weight:600;
  color:#fff;background:var(--coral);border:0;border-radius:9px;transition:filter .12s}
.logincard button:hover{filter:brightness(.95)}
.logincard .err{margin:16px 0 -4px;padding:9px 12px;font-size:12.5px;border-radius:8px;
  background:var(--red-soft);border:1px solid var(--red-border);color:var(--red-text)}
.logincard .note{margin-top:18px;text-align:center;font-size:11.5px;color:var(--mut)}