/* ============================================================================
   BWS Control Tower — shared design system ("Corporate Light")
   Single source of truth for tokens + component styles used by base.html and
   every template that extends it. Lifted verbatim from the approved mockups
   in .tmp/portal_review/io_ui_2026-08-21/mockups/a/ (byte-identical <style>
   block across all five, md5 7285208e0cd5895a805acadfa64642a6) — do not fork
   these values back into <style> blocks inside templates, add here and
   reference by class.
   ============================================================================ */

:root{
  --page:#f7f7f4; --surface:#ffffff; --surface-2:#fbfbf9;
  --line:#d8dce6; --line-soft:#e9ebf1;
  --navy:#000074; --navy-2:#1c1c8e;
  --ink:#15171d; --ink-2:#4b5162; --ink-3:#6b7385;
  --link:#0000ab;
  --green:#1e7d46; --green-bg:#e8f3ec;
  --amber:#8a5a00; --amber-bg:#faf1de;
  --red:#b3261e; --red-bg:#fbecea;
  --slate-bg:#ecedf6;
  --amb:0 1px 2px rgba(15,20,45,.05);
  --r:4px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--page); color:var(--ink);
  font-family:'Segoe UI',system-ui,Arial,sans-serif;
  font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--link)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- shell ---------- */
.wrap{max-width:1280px;margin:0 auto;padding:0 40px;width:100%}
.appbar{background:var(--navy);height:52px;display:flex;align-items:center}
.appbar .wrap{display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff}
.mark{width:22px;height:22px;display:flex;align-items:center;justify-content:center}
.brand .wm{font-family:'Segoe UI Semibold','Segoe UI',Arial,sans-serif;font-size:13px;font-weight:600;letter-spacing:.155em;text-transform:uppercase;color:#fff}
.brand .ct{font-size:10.5px;font-weight:600;letter-spacing:.155em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.vrule{width:1px;height:16px;background:rgba(255,255,255,.26);display:block}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav a{display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:3px;font-size:12.5px;color:rgba(255,255,255,.76);text-decoration:none}
.nav a:hover{color:#fff;background:rgba(255,255,255,.10)}
.nav a.on{color:#fff;background:rgba(255,255,255,.14)}
.who{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:11px;background:rgba(255,255,255,.13);font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:#fff}

.subbar{background:var(--surface);border-bottom:1px solid var(--line)}
.subbar .wrap{display:flex;align-items:center;gap:16px;height:46px}
.crumbs{display:flex;align-items:center;gap:9px;font-size:12.5px}
.crumbs a{color:var(--link);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs .sep{color:#b9bfcd}
.crumbs .cur{color:var(--ink);font-weight:600}
.subright{margin-left:auto;display:flex;align-items:center;gap:16px;font-size:12.5px;color:var(--ink-3)}
.subright .tnum{color:var(--ink-2)}
.backlink{display:inline-flex;align-items:center;gap:6px;color:var(--link);text-decoration:none;font-size:12.5px}
.backlink:hover{text-decoration:underline}

/* ---------- page ---------- */
.page{padding:30px 0 70px}
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin:0 0 22px}
.eyebrow{font-family:'Segoe UI Semibold','Segoe UI',Arial,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 7px}
h1{font-size:23px;font-weight:600;color:var(--navy);margin:0 0 5px;letter-spacing:-.004em}
.lede{font-size:13px;color:var(--ink-2);margin:0;max-width:620px}
.headmeta{text-align:right;font-size:12.5px;color:var(--ink-3);line-height:1.7;white-space:nowrap}
.headmeta b{color:var(--ink-2);font-weight:600}

/* ---------- card ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--amb)}
.card-hd{display:flex;align-items:center;gap:13px;padding:12px 18px;border-bottom:1px solid var(--line-soft)}
.idx{font-size:11px;font-weight:600;color:#8f97ab;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.card-t{font-family:'Segoe UI Semibold','Segoe UI',Arial,sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.135em;text-transform:uppercase;color:var(--navy)}
.card-meta{margin-left:auto;font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:12px}
.card-bd{padding:18px}
.card-ft{display:flex;align-items:center;gap:10px;padding:11px 18px;border-top:1px solid var(--line-soft);background:var(--surface-2);border-radius:0 0 var(--r) var(--r)}
.ft-note{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.toolbar{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line-soft);background:var(--surface-2);flex-wrap:wrap}

/* ---------- button ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 16px;border-radius:3px;border:1px solid transparent;font-family:inherit;font-size:13px;font-weight:600;line-height:1;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-primary:hover{background:var(--navy-2);border-color:var(--navy-2)}
.btn-secondary{background:#fff;color:var(--ink);border-color:#c7cddd}
.btn-secondary:hover{background:#f3f4f8}
.btn-danger{background:#fff;color:var(--red);border-color:#e6c9c6}
.btn-danger:hover{background:var(--red-bg)}
.btn-quiet{background:transparent;color:var(--link);border-color:transparent;padding:0 8px;font-weight:600}
.btn-quiet:hover{text-decoration:underline}
.btn-sm{height:28px;padding:0 11px;font-size:12px}
.btn-wide{width:100%}
.btn-off{opacity:.45;pointer-events:none}

/* ---------- form field ---------- */
.flabel{display:block;font-family:'Segoe UI Semibold','Segoe UI',Arial,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 6px}
.input{width:100%;height:36px;background:#fff;border:1px solid #c7cddd;border-radius:3px;padding:0 11px;font-family:inherit;font-size:13.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.input::placeholder{color:#7d8496}
.input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,0,116,.10)}
.input-lg{height:44px;font-size:14px}
.selwrap{position:relative}
.selwrap select.input{appearance:none;-webkit-appearance:none;padding-right:30px;cursor:pointer}
.selwrap .cv{position:absolute;right:11px;top:12px;color:#8c94a6;pointer-events:none}
.hint{font-size:12px;color:var(--ink-3);margin:7px 0 0;line-height:1.5}
.searchwrap{position:relative}
.searchwrap .input{padding-left:38px}
.searchwrap .mg{position:absolute;left:13px;top:50%;transform:translateY(-50%);display:flex;color:#8c94a6}
.kbd{display:inline-flex;align-items:center;justify-content:center;height:22px;min-width:24px;padding:0 7px;border:1px solid var(--line);border-radius:3px;background:var(--surface-2);font-size:11px;font-weight:600;color:var(--ink-3)}
.filefield{display:flex;align-items:center;gap:12px;height:44px;padding:0 10px;border:1px solid #c7cddd;border-radius:3px;background:#fff}
.filefield .fname{font-size:13px;font-weight:600;color:var(--ink)}
.filefield .fmeta{margin-left:auto;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ---------- status pill ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:11px;font-size:11.5px;font-weight:600;white-space:nowrap}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pill-booked{background:var(--green-bg);color:var(--green)}
.pill-pending{background:var(--amber-bg);color:var(--amber)}
.pill-error{background:var(--red-bg);color:var(--red)}
.pill-info{background:var(--slate-bg);color:var(--navy)}
.pill-quiet{background:#f0f1f5;color:var(--ink-2)}

/* ---------- stat tile ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 18px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:13px 16px 14px;box-shadow:var(--amb)}
.stat .k{display:flex;align-items:center;gap:8px;font-family:'Segoe UI Semibold','Segoe UI',Arial,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.stat .v{font-size:27px;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums;line-height:1.15;margin-top:7px}
.stat .n{font-size:11.5px;color:var(--ink-3);margin-top:3px;font-variant-numeric:tabular-nums}
.stat .v.red{color:var(--red)}
.sdot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}
.sdot-navy{background:var(--navy)} .sdot-green{background:var(--green)}
.sdot-amber{background:var(--amber)} .sdot-red{background:var(--red)}

/* ---------- data table ---------- */
.tablewrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;min-width:860px}
.tbl th{font-family:'Segoe UI Semibold','Segoe UI',Arial,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:10px 16px;background:var(--surface-2);border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{font-size:13px;color:var(--ink);padding:11px 16px;border-bottom:1px solid var(--line-soft);font-variant-numeric:tabular-nums;vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td{background:#f6f7fb}
.tbl .num{font-weight:600;color:var(--navy);letter-spacing:.012em}
.tbl .muted{color:var(--ink-2)}
.tbl .right{text-align:right}
.tbl a{text-decoration:none;font-weight:600;font-size:12.5px}
.tbl a:hover{text-decoration:underline}
.row-error td{background:var(--red-bg)}
.row-error:hover td{background:#f8e3e1}
.errnote{display:block;font-size:11.5px;color:var(--red);margin-top:3px}

/* ---------- empty state ---------- */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:46px 20px;gap:13px}
.empty .g{color:#c4cad8}
.empty p{margin:0;font-size:13px;color:var(--ink-2)}

/* ---------- checkbox glyph ---------- */
.ck{width:16px;height:16px;border-radius:3px;border:1px solid #c1c8d8;background:#fff;display:inline-flex;align-items:center;justify-content:center;color:transparent}
.ck.on{background:var(--navy);border-color:var(--navy);color:#fff}
.ck.via{background:#e4e6f1;border-color:#c3c8dc;color:var(--navy)}

/* ---------- segmented toggle ---------- */
.seg{display:inline-flex;align-items:center;border:1px solid #c7cddd;border-radius:3px;overflow:hidden;background:#fff;height:30px}
.seg span{display:inline-flex;align-items:center;height:100%;padding:0 14px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.seg span.on{background:var(--navy);color:#fff}
.seg i{width:1px;height:100%;background:var(--line);display:block}

/* ---------- progress ---------- */
.bar{height:6px;background:#e6e8ef;border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--navy);border-radius:3px}
.runline{display:flex;align-items:center;gap:12px}
.runstate{font-size:14.5px;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums}
.runmeta{margin-left:auto;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.runsteps{display:flex;align-items:center;gap:10px;margin-top:11px;font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.runsteps .mid{color:#b9bfcd}

/* ---------- home directory ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.col{display:flex;flex-direction:column;gap:18px}
.tool{display:grid;grid-template-columns:210px 1fr 14px;align-items:center;gap:14px;padding:10px 18px;border-bottom:1px solid var(--line-soft);text-decoration:none;color:inherit}
.tool:last-child{border-bottom:none}
.tool:hover{background:#f6f7fb}
.tool .tn{font-size:13.5px;font-weight:600;color:var(--navy);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tool .td{font-size:12.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tool .tc{color:#b6bccb;display:flex}
.tool:hover .tc{color:var(--navy)}

/* ---------- admin ---------- */
.admgrid{display:grid;grid-template-columns:272px 1fr;gap:22px;align-items:start}
/* Grid items default to min-width:auto, so the 1fr track is floored by the
   max-content width of whatever's inside it (a wide table, a wrapping
   toolbar row measured as if it never wraps). min-width:0 lets the track
   shrink to the available width so .tablewrap/.toolbar can clip or wrap
   internally instead of pushing the page wider than the viewport. */
.admgrid>*{min-width:0}
.urow{display:flex;align-items:center;gap:10px;padding:9px 16px;border-bottom:1px solid var(--line-soft)}
.rows .urow:last-child{border-bottom:none}
.urow:hover{background:#f6f7fb}
.urow.sel{background:#edeff8}
.urow .un{font-size:13px;font-weight:600;color:var(--navy)}
.urow .ud{font-size:12px;color:var(--ink-3)}
.urow .ur{margin-left:auto;display:flex;align-items:center;gap:8px}
.seldot{width:6px;height:6px;border-radius:50%;background:var(--navy);flex:none}
.urow.stack{flex-direction:column;align-items:flex-start;gap:2px;padding-left:32px}
.urow .ux{font-size:13px;color:var(--ink)}
.seldot.off{background:transparent}
.formgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dl{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border-top:1px solid var(--line-soft)}
.dl>div{background:#fff;padding:13px 18px}
.dl .dt{font-family:'Segoe UI Semibold','Segoe UI',Arial,sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.dl .dd{font-size:13.5px;color:var(--ink);margin-top:5px;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:8px}

/* ---------- login ---------- */
.loginpage{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px}
.loginbox{width:410px}
.loginbrand{display:flex;align-items:center;gap:13px;margin:0 0 22px}
.loginbrand .badge{width:38px;height:38px;border-radius:4px;background:var(--navy);display:flex;align-items:center;justify-content:center;flex:none}
.loginbrand .wm{font-family:'Segoe UI Semibold','Segoe UI',Arial,sans-serif;font-size:15px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--navy);line-height:1.2}
.loginbrand .ct{font-size:10.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.loginfoot{margin:22px 0 0;font-size:12px;color:var(--ink-3);line-height:1.7;text-align:center}
.loginfoot a{color:var(--link);text-decoration:none}

/* ============================================================================
   Estate additions — NOT part of the mockup sheet, needed by the surrounding
   Flask app. Append only here; never fork these back into a template.
   ============================================================================ */

/* The hidden ATTRIBUTE must always win: existing JS across the estate sets
   el.hidden = true (admin group filter, matrix panels, run-progress panels)
   and relies on the UA default being enforced even when an author rule like
   `.foo { display:flex }` would otherwise override it. */
[hidden] { display: none !important; }

/* flash messages — base.html renders these from get_flashed_messages(); the
   mockups don't carry a flash component so this is a light-theme match of
   the existing pill/card language (info/success/error). */
.flashes { margin: 0 0 18px; display: flex; flex-direction: column; gap: 8px; }
.flash {
  padding: 11px 16px; border-radius: var(--r); font-size: 13px; font-weight: 500;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
}
.flash-success { background: var(--green-bg); border-color: #bfe0cc; color: var(--green); }
.flash-error   { background: var(--red-bg);   border-color: #eecac6; color: var(--red); }
.flash-info, .flash-message { background: var(--slate-bg); border-color: var(--line); color: var(--navy); }
.flash-warn    { background: var(--amber-bg); border-color: #ead9b4; color: var(--amber); }

/* clickable stat tile — a .stat that is also an <a>, e.g. a phase/bucket
   filter. #f6f7fb is the sheet's own hover value (.tool / .urow / .tbl
   tbody tr); reused here rather than invented. */
a.stat{display:block;color:inherit;text-decoration:none}
a.stat:hover{background:#f6f7fb}
a.stat.on{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy)}

/* disabled button — real [disabled], and .is-locked for a button an inline
   script disables without the attribute (e.g. lock-on-submit). Muted
   on-brand, never the opacity trick on .btn-primary that turns navy purple. */
.btn:disabled,.btn[disabled],.btn.is-locked{background:var(--slate-bg);color:var(--ink-3);border-color:var(--line);cursor:not-allowed;pointer-events:none}

/* file-input pair — .filefield (above) is the chosen-file bar; .dropzone is
   the drag target, dashed full-perimeter border, .dropzone.dragover state. */
.dropzone{position:relative;display:block;padding:26px 20px;text-align:center;cursor:pointer;border:1px dashed var(--line);border-radius:var(--r);background:var(--surface-2)}
.dropzone:hover,.dropzone.dragover{background:#f3f4f8;border-color:var(--navy)}
.dropzone input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.dropzone .uz-i{color:#b6bccb;display:block;margin:0 auto 9px}
.dropzone .uz-l{font-size:13.5px;font-weight:600;color:var(--navy)}
.dropzone .uz-h{font-size:12px;color:var(--ink-3);margin-top:4px}
.dropzone .uz-f{font-size:12.5px;font-weight:600;color:var(--ink-2);margin-top:9px;font-variant-numeric:tabular-nums}

/* job-run progress vocabulary — shared by the *_progress pages (SAP goods
   receipt / manifest / CIPL) and the upload-and-run pages that show a
   live-commit button. .st restates the .pill spec; .btn.live restates
   .btn-danger. */
.banner{padding:11px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);color:var(--ink);font-size:13px;font-weight:600;margin:0 0 14px}
.banner.run{background:var(--slate-bg);border-color:#ccd0e6;color:var(--navy)}
.banner.dry{background:var(--amber-bg);border-color:#e7d5ab;color:var(--amber)}
.banner.fin{background:var(--green-bg);border-color:#bfe0cc;color:var(--green)}
.banner.bad{background:var(--red-bg);border-color:#eecac6;color:var(--red)}
.st{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:11px;font-size:11.5px;font-weight:600;white-space:nowrap;background:#f0f1f5;color:var(--ink-2)}
.st.running{background:var(--slate-bg);color:var(--navy)}
.st.done{background:var(--green-bg);color:var(--green)}
.st.failed{background:var(--red-bg);color:var(--red)}
.st.warn{background:var(--amber-bg);color:var(--amber)}
.st.dry-ok{background:var(--slate-bg);color:var(--navy)}
pre.log{margin:11px 0 0;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r);padding:14px;font-family:Consolas,'Courier New',monospace;font-size:12px;line-height:1.55;color:var(--ink-2);max-height:420px;overflow:auto;white-space:pre-wrap;word-break:break-word}
.btn.live{background:#fff;color:var(--red);border-color:#e6c9c6}
.btn.live:hover{background:var(--red-bg)}