/* Industrial Logic design system — Stitch export tokens
   Anvil Energy PQMS · CablePricer Pro v6 */
/* ============ INDUSTRIAL LOGIC DESIGN TOKENS (Stitch export) ============ */
:root{
  --surface:#f7f9fb; --surface-dim:#d8dadc;
  --c-lowest:#ffffff; --c-low:#f2f4f6; --c:#eceef0; --c-high:#e6e8ea; --c-highest:#e0e3e5;
  --on-surface:#191c1e; --on-surface-var:#444651;
  --inverse-surface:#2d3133; --inverse-on:#eff1f3;
  --outline:#757682; --outline-var:#c5c5d3; --line:#e2e8f0;
  --primary:#00236f; --on-primary:#ffffff; --primary-cont:#1e3a8a; --on-primary-cont:#90a8ff;
  --primary-fixed:#dce1ff; --primary-dim:#b6c4ff;
  --secondary:#515f74; --secondary-cont:#d5e3fc; --on-secondary-cont:#57657a;
  --tertiary:#6e2c00; --tertiary-fix:#ffdbcb;
  --error:#ba1a1a; --error-cont:#ffdad6; --on-error-cont:#93000a;
  --emerald:#047857; --emerald-bg:rgba(4,120,87,.10);
  --amber:#b45309; --amber-bg:rgba(180,83,9,.12);
  --rose:#be123c;  --rose-bg:rgba(190,18,60,.10);
  --slate:#515f74; --slate-bg:rgba(81,95,116,.10);
  --font:'Inter',sans-serif; --mono:'JetBrains Mono',monospace;
  --r-sm:.125rem; --r:.25rem; --r-md:.375rem; --r-lg:.5rem; --r-xl:.75rem;
  --shadow2:0 4px 12px rgba(0,0,0,.05);
  --rail:240px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px}
body{background:var(--surface);color:var(--on-surface);font-family:var(--font);
  font-size:14px;line-height:20px;height:100vh;overflow:hidden}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--c-low)}
::-webkit-scrollbar-thumb{background:var(--outline-var);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--outline)}
button{font-family:var(--font);cursor:pointer}
input,select,textarea{font-family:var(--font)}
:focus-visible{outline:2px solid var(--primary);outline-offset:1px}

/* type roles */
.display-lg{font-size:36px;font-weight:700;line-height:44px;letter-spacing:-.02em}
.headline-md{font-size:24px;font-weight:600;line-height:32px}
.title-sm{font-size:18px;font-weight:600;line-height:24px}
.body-sm{font-size:13px;line-height:18px}
.label-caps{font-size:12px;font-weight:700;line-height:16px;letter-spacing:.05em;text-transform:uppercase}
.mono{font-family:var(--mono);font-size:13px;line-height:18px;font-variant-numeric:tabular-nums}
.muted{color:var(--on-surface-var)}

/* ============ LOGIN ============ */
#screen-login{position:fixed;inset:0;background:var(--surface);display:flex;
  align-items:center;justify-content:center;z-index:110}
#screen-login.off{display:none}
.login-split{display:grid;grid-template-columns:1fr 1fr;width:100%;height:100%}
.login-brand-panel{background:linear-gradient(135deg,var(--primary) 0%,#0a4d9e 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center}
.login-brand-logo{filter:drop-shadow(0 8px 20px rgba(0,0,0,.25))}
.login-form-panel{display:flex;align-items:center;justify-content:center;padding:40px}
@media(max-width:900px){
  .login-split{grid-template-columns:1fr}
  .login-brand-panel{display:none}
}
/* ============ UPLOAD / LANDING ============ */
#screen-upload{position:fixed;inset:0;background:var(--surface);display:none;
  align-items:center;justify-content:center;z-index:100;flex-direction:column;gap:28px}
#screen-upload.on{display:flex}
.up-card{background:var(--c-lowest);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:40px 48px;max-width:620px;width:92%;box-shadow:var(--shadow2)}
.up-brand{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.up-mark{width:38px;height:38px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px}
.dropzone{border:2px dashed var(--outline-var);border-radius:var(--r-lg);padding:34px;
  text-align:center;margin:22px 0 14px;transition:border-color .15s,background .15s;cursor:pointer}
.dropzone:hover,.dropzone.drag{border-color:var(--primary);background:var(--primary-fixed)}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--r);
  padding:9px 16px;font-size:13px;font-weight:600;border:1px solid transparent;line-height:18px}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-cont)}
.btn-secondary{background:var(--c-lowest);color:var(--on-surface);border-color:var(--outline-var)}
.btn-secondary:hover{border-color:var(--outline);background:var(--c-low)}
.btn-ghost-danger{background:transparent;color:var(--rose);border-color:var(--rose)}
.btn-ghost-danger:hover{background:var(--rose-bg)}
.btn-sm{padding:5px 10px;font-size:12px}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ============ APP SHELL ============ */
#app{display:none;height:100vh;grid-template-rows:56px 1fr 30px;
  grid-template-columns:var(--rail) 1fr;
  grid-template-areas:"rail topbar" "rail main" "rail statusbar"}
#app.on{display:grid}
/* top bar */
.topbar{grid-area:topbar;background:var(--c-lowest);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:24px;padding:0 32px}
.topbar .brand{font-size:18px;font-weight:800;color:var(--primary);letter-spacing:-.01em}
.top-search{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--c-low);
  border:1px solid var(--line);border-radius:var(--r);padding:6px 12px;width:260px}
.top-search input{border:0;background:transparent;font-size:13px;width:100%;color:var(--on-surface)}
.top-search input:focus{outline:none}
.role-pick{display:flex;align-items:center;gap:8px}
.role-pick select{border:1px solid var(--outline-var);border-radius:var(--r);padding:6px 8px;
  font-size:12px;font-weight:600;background:var(--c-lowest);color:var(--on-surface)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
/* nav rail */
.rail{grid-area:rail;background:var(--c-low);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:18px 12px}
.rail-brand{padding:4px 12px 18px}
.rail-brand .nm{font-size:16px;font-weight:700}
.rail-brand .sub{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--on-surface-var);text-transform:uppercase;margin-top:2px}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r);
  font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--on-surface-var);border:0;background:transparent;width:100%;text-align:left;margin-bottom:2px}
.nav-item svg{width:17px;height:17px;flex:0 0 17px}
.nav-item:hover{background:var(--c-high);color:var(--on-surface)}
.nav-item.active{background:var(--primary-fixed);color:var(--primary)}
.rail-bottom{margin-top:auto;border-top:1px solid var(--line);padding-top:10px}
/* main + status bar */
.main{grid-area:main;overflow-y:auto;padding:18px 24px 28px}
.statusbar{grid-area:statusbar;background:var(--c-lowest);border-top:1px solid var(--line);
  display:flex;align-items:center;gap:20px;padding:0 32px;font-size:11px;
  color:var(--on-surface-var);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.dot{width:7px;height:7px;border-radius:50%;background:var(--emerald);display:inline-block;margin-right:6px}
.statusbar .right{margin-left:auto}

/* ============ COMPONENTS ============ */
.page{display:none}.page.on{display:block}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--on-surface-var)}
.page-head{display:flex;align-items:flex-end;gap:16px;margin:2px 0 14px;flex-wrap:wrap}
.page-head h1{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:36px}
.page-head .actions{margin-left:auto;display:flex;gap:10px}
.card{background:var(--c-lowest);border:1px solid var(--line);border-radius:var(--r-lg)}
.card-pad{padding:14px 16px}
.card-head{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line)}
.grid{display:grid;gap:16px}
.kpis{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.kpi{padding:18px 20px}
.kpi .lbl{display:flex;justify-content:space-between;align-items:center;color:var(--on-surface-var)}
.kpi .val{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:10px 0 6px;font-variant-numeric:tabular-nums}
.kpi .delta{font-size:12px;font-weight:600}
.delta.up{color:var(--emerald)}.delta.down{color:var(--rose)}
.kico{width:30px;height:30px;border-radius:var(--r);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--primary)}
/* tables */
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--on-surface-var);text-align:left;padding:8px 14px;border-bottom:1px solid var(--line);
  background:var(--c-low);position:sticky;top:0;z-index:2;white-space:nowrap}
.tbl td{padding:8px 14px;border-bottom:1px solid var(--c);font-size:13px;vertical-align:middle}
.tbl tbody tr:nth-child(odd){background:#fbfcfd}
.tbl tbody tr:hover{background:var(--primary-fixed)}
.tbl tr.sel{background:var(--secondary-cont)}
.tbl .num{font-family:var(--mono);font-size:13px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--c-lowest)}
.clickable{cursor:pointer}
/* badges */
.badge{display:inline-block;padding:3px 8px;border-radius:var(--r);font-size:10.5px;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.b-draft{background:var(--slate-bg);color:var(--slate)}
.b-submitted{background:var(--secondary-cont);color:var(--primary)}
.b-review{background:var(--primary);color:#fff}
.b-approved{background:var(--emerald-bg);color:var(--emerald)}
.b-shared{background:var(--primary-fixed);color:var(--primary)}
.b-won{background:var(--emerald-bg);color:var(--emerald)}
.b-lost{background:var(--rose-bg);color:var(--rose)}
.b-valid{background:var(--emerald-bg);color:var(--emerald)}
.b-expired{background:var(--rose-bg);color:var(--rose)}
.b-amber{background:var(--amber-bg);color:var(--amber)}
.b-cable{background:var(--secondary-cont);color:var(--on-secondary-cont)}
.b-conductor{background:var(--tertiary-fix);color:var(--tertiary)}
/* forms — every field is label-left, input-right by default (applies app-wide) */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fgrp{display:flex;align-items:center;gap:10px}
.fgrp label{display:block;width:130px;flex:0 0 130px;font-size:12px;font-weight:700;letter-spacing:.05em;line-height:14px;
  text-transform:uppercase;color:var(--on-surface-var);margin-bottom:0}
.fgrp .finput{flex:1;min-width:0}
.finput{width:100%;border:1px solid var(--outline-var);border-radius:var(--r);
  padding:6px 10px;font-size:13px;background:var(--c-lowest);color:var(--on-surface)}
.finput:focus{outline:none;border:2px solid var(--primary);padding:5px 9px}
.finput.err{border:2px solid var(--rose)}
input.cell-edit{width:90px;border:1px solid var(--outline-var);border-radius:var(--r);
  padding:5px 8px;font-family:var(--mono);font-size:13px;text-align:right;background:var(--c-lowest)}
input.cell-edit:focus{outline:none;border:2px solid var(--primary);padding:4px 7px}
/* stepper */
.stepper{display:flex;align-items:flex-start;padding:22px 18px 16px}
.step{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;min-width:0}
.step .bar{position:absolute;top:14px;left:50%;width:100%;height:2px;background:var(--c-highest);z-index:0}
.step:last-child .bar{display:none}
.step .bar.done{background:var(--primary)}
.step .pip{width:28px;height:28px;border-radius:50%;background:var(--c-highest);color:var(--on-surface-var);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;z-index:1;border:2px solid var(--c-highest)}
.step.done .pip{background:var(--primary);border-color:var(--primary);color:#fff}
.step.active .pip{background:var(--secondary-cont);border-color:var(--primary);color:var(--primary)}
.step .snm{font-size:12px;font-weight:600;margin-top:8px;text-align:center;color:var(--on-surface-var)}
.step.active .snm{color:var(--primary);font-weight:700}
.step.done .snm{color:var(--on-surface)}
.step .sdt{font-size:10.5px;color:var(--outline);margin-top:2px;font-family:var(--mono)}
/* approval rail */
.appr{border-left:3px solid transparent;background:var(--c-low);border-radius:var(--r);
  padding:12px 14px;margin-bottom:10px;display:flex;gap:12px;align-items:flex-start}
.appr.done{border-left-color:var(--primary);background:var(--c-lowest);border:1px solid var(--line);border-left:3px solid var(--primary)}
.appr.pending{border-left-color:var(--amber)}
.appr .aico{width:30px;height:30px;border-radius:var(--r);background:var(--primary);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:0 0 30px;font-size:13px;font-weight:700}
.appr.queue .aico{background:var(--c-highest);color:var(--on-surface-var)}
.note-info{background:var(--secondary-cont);border-radius:var(--r);padding:12px 14px;font-size:12px;
  color:var(--on-secondary-cont);line-height:17px}
/* costing ledger — signature element: Excel column letters in the margin */
.ledger{font-variant-numeric:tabular-nums}
.ledger .lrow{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;
  padding:6px 16px;border-bottom:1px solid var(--c)}
.ledger .lrow:hover{background:var(--c-low)}
.ledger .xl{font-family:var(--mono);font-size:11px;color:var(--outline);text-align:center;
  background:var(--c-low);border:1px solid var(--line);border-radius:var(--r-sm);padding:1px 0}
.ledger .lnm{font-size:13px}
.ledger .lnm .hint{font-size:11px;color:var(--on-surface-var);display:block}
.ledger .lval{font-family:var(--mono);font-size:13px;text-align:right;white-space:nowrap}
.ledger .lrow.total{background:var(--c-low);border-top:2px solid var(--on-surface)}
.ledger .lrow.total .lnm{font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.05em}
.ledger .lrow.total .lval{font-weight:600;color:var(--primary);font-size:14px}
.ledger .lrow.grand{background:var(--primary);border-radius:0 0 var(--r-lg) var(--r-lg)}
.ledger .lrow.grand .lnm,.ledger .lrow.grand .lval{color:#fff;font-weight:700}
.ledger .lrow.grand .xl{background:rgba(255,255,255,.15);border-color:transparent;color:var(--primary-dim)}
.quirk{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--on-surface-var);margin:6px 0}
/* misc */
.split{display:grid;grid-template-columns:340px 1fr;gap:16px;align-items:start}
.split-r{display:grid;grid-template-columns:1fr 360px;gap:16px;align-items:start}
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.chip{border:1px solid var(--outline-var);background:var(--c-lowest);border-radius:var(--r);
  padding:5px 12px;font-size:12px;font-weight:600;color:var(--on-surface-var)}
.chip.active{background:var(--primary);border-color:var(--primary);color:#fff}
.empty{padding:46px;text-align:center;color:var(--on-surface-var)}
.fab{position:fixed;right:30px;bottom:46px;width:52px;height:52px;border-radius:50%;
  background:var(--primary);color:#fff;border:0;font-size:24px;box-shadow:0 6px 16px rgba(0,35,111,.35);z-index:30}
.fab:hover{background:var(--primary-cont)}
.toast{position:fixed;bottom:44px;left:50%;transform:translateX(-50%);background:var(--inverse-surface);
  color:var(--inverse-on);padding:10px 18px;border-radius:var(--r-md);font-size:13px;z-index:80;
  box-shadow:var(--shadow2);display:none}
.modal-bk{position:fixed;inset:0;background:rgba(25,28,30,.45);z-index:60;display:none;
  align-items:center;justify-content:center}
.modal-bk.on{display:flex}
.modal{background:var(--c-lowest);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow2);width:680px;max-width:94vw;max-height:90vh;overflow:auto}
.spark{width:100%;height:120px}
@media(max-width:1024px){
  #app{grid-template-columns:64px 1fr}
  .rail-brand .nm,.rail-brand .sub,.nav-item span{display:none}
  .nav-item{justify-content:center}
  .split,.split-r,.fgrid{grid-template-columns:1fr}
}
@media(max-width:767px){
  .main{padding:16px}
  .page-head h1{font-size:22px;line-height:28px}
  .topbar{padding:0 16px}.top-search{display:none}
}
@media print{body{overflow:visible}}