/* ============================================================
   PMT3 / EPROC — shared UI tokens & components
   PT Epcima Solusi Teknologi · living spec for Phase 0
   Load AFTER bootstrap 5 css.
   ============================================================ */

:root{
  /* brand */
  --navy-900:#0E1F3D;
  --navy-700:#16305E;
  --navy-500:#27467F;
  --orange-500:#F5822A;
  --orange-300:#FFA14E;

  /* neutrals */
  --ink:#1B2537;
  --muted:#6B7A90;
  --line:#DCE3ED;
  --bg:#F4F6FA;
  --surface:#FFFFFF;

  /* status palette — bind these to the status enum, never hand-pick */
  --st-draft:#6B7A90;
  --st-progress:#27467F;
  --st-wait:#B4761A;
  --st-ok:#1E7A50;
  --st-revise:#C0392B;
  --st-closed:#0E1F3D;

  --radius:6px;
  --radius-sm:4px;
  --shadow:0 1px 2px rgba(14,31,61,.06), 0 8px 24px rgba(14,31,61,.06);
}

/* ---------- base ---------- */
body{
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;}
a{color:var(--navy-700);}
h1,h2,h3,h4,h5{font-weight:600;letter-spacing:-.01em;}

.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
}

/* ---------- app shell ---------- */
.app-topbar{
  background:var(--navy-900);color:#fff;
  padding:0 20px;height:56px;
  display:flex;align-items:center;gap:18px;
  position:sticky;top:0;z-index:1030;
}
.app-topbar .brand{
  font-weight:600;letter-spacing:.02em;font-size:15px;
  display:flex;align-items:center;gap:9px;
}
.app-topbar .brand .mark{
  width:22px;height:22px;border-radius:3px;
  background:var(--orange-500);
  display:grid;place-items:center;
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;color:var(--navy-900);
}
.app-topbar .proj{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;
  color:rgba(255,255,255,.62);
  padding-left:18px;border-left:1px solid rgba(255,255,255,.16);
}
.app-topbar .spacer{flex:1;}
.app-user{display:flex;align-items:center;gap:10px;font-size:12.5px;}
.app-user .avatar{
  width:28px;height:28px;border-radius:50%;
  background:var(--navy-500);display:grid;place-items:center;
  font-size:11px;font-weight:600;
}
.app-user .role{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  color:var(--orange-300);text-transform:uppercase;letter-spacing:.08em;
}

.page{max-width:1180px;margin:0 auto;padding:26px 20px 60px;}
.page-head{margin-bottom:20px;}
.page-head h1{font-size:22px;margin:2px 0 4px;}
.page-head p{color:var(--muted);margin:0;font-size:13px;}

/* ---------- card ---------- */
.card-p{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);
}
.card-p > .hd{
  padding:13px 18px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;
}
.card-p > .hd h2{font-size:14px;margin:0;letter-spacing:0;}
.card-p > .bd{padding:18px;}

/* ---------- status pill ---------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:99px;
  border:1px solid currentColor;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-draft{color:var(--st-draft);background:#6b7a900f;}
.pill-progress{color:var(--st-progress);background:#27467f12;}
.pill-wait{color:var(--st-wait);background:#b4761a14;}
.pill-ok{color:var(--st-ok);background:#1e7a5012;}
.pill-revise{color:var(--st-revise);background:#c0392b12;}
.pill-closed{color:var(--st-closed);background:#0e1f3d0f;}

/* ---------- workflow rail (signature element) ---------- */
.rail{display:flex;align-items:stretch;gap:0;overflow-x:auto;}
.rail .node{
  flex:1 1 0;min-width:112px;padding:11px 14px 12px;
  border-top:3px solid var(--line);
  position:relative;
}
.rail .node .code{
  font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.1em;color:var(--muted);
}
.rail .node .lbl{font-size:12px;line-height:1.3;margin-top:2px;color:var(--muted);}
.rail .node.done{border-top-color:var(--navy-500);}
.rail .node.done .lbl{color:var(--ink);}
.rail .node.done .code{color:var(--navy-500);}
.rail .node.now{border-top-color:var(--orange-500);}
.rail .node.now .lbl{color:var(--navy-900);font-weight:600;}
.rail .node.now .code{color:var(--orange-500);}
.rail .node.now::after{
  content:'';position:absolute;top:-3px;left:0;right:0;height:3px;
  background:var(--orange-500);
  box-shadow:0 0 0 3px rgba(245,130,42,.18);
}

/* ---------- key/value detail ---------- */
.kv{display:grid;grid-template-columns:170px 1fr;gap:9px 18px;font-size:13px;}
.kv dt{color:var(--muted);font-weight:400;}
.kv dd{margin:0;color:var(--ink);}

/* ---------- history log ---------- */
.log{list-style:none;margin:0;padding:0;}
.log li{
  display:grid;grid-template-columns:118px 1fr;gap:14px;
  padding:11px 0;border-bottom:1px dashed var(--line);
}
.log li:last-child{border-bottom:0;}
.log .when{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);line-height:1.5;}
.log .who{font-weight:600;font-size:12.5px;}
.log .what{font-size:12.5px;color:var(--muted);}
.log .note{
  margin-top:6px;padding:8px 11px;font-size:12.5px;
  background:var(--bg);border-left:2px solid var(--orange-500);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--ink);
}

/* ---------- action bar ---------- */
.actionbar{
  position:sticky;bottom:0;
  background:var(--surface);border-top:1px solid var(--line);
  padding:13px 18px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  box-shadow:0 -6px 18px rgba(14,31,61,.05);
}
.actionbar .hint{
  flex:1;font-size:12px;color:var(--muted);min-width:200px;
}
.btn-act{
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  padding:9px 16px;border-radius:var(--radius-sm);border:1px solid transparent;
}
.btn-forward{background:var(--orange-500);color:#fff;}
.btn-forward:hover{background:#e0741f;color:#fff;}
.btn-neutral{background:#fff;color:var(--navy-700);border-color:var(--line);}
.btn-neutral:hover{border-color:var(--navy-500);color:var(--navy-900);}
.btn-back{background:#fff;color:var(--st-revise);border-color:#e6c3be;}
.btn-back:hover{background:#fdf3f2;color:var(--st-revise);}
.btn-navy{background:var(--navy-700);color:#fff;}
.btn-navy:hover{background:var(--navy-900);color:#fff;}

/* ---------- forms ---------- */
.form-label{font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:5px;}
.form-label .req{color:var(--st-revise);}
.form-control,.form-select{
  font-size:13.5px;border-color:var(--line);border-radius:var(--radius-sm);padding:9px 12px;
}
.form-control:focus,.form-select:focus{
  border-color:var(--navy-500);box-shadow:0 0 0 3px rgba(39,70,127,.13);
}
.form-text{font-size:11.5px;color:var(--muted);}

/* ---------- table ---------- */
.tbl{width:100%;font-size:13px;border-collapse:separate;border-spacing:0;}
.tbl thead th{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:600;padding:10px 14px;border-bottom:1px solid var(--line);
  background:#fbfcfe;text-align:left;white-space:nowrap;
}
.tbl tbody td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle;}
.tbl tbody tr:hover{background:#fbfcfe;}
.tbl tbody tr:last-child td{border-bottom:0;}

/* ---------- spec annotation (mockup only — strip in production) ---------- */
.spec{
  border:1px dashed var(--orange-500);background:#fff8f2;
  border-radius:var(--radius-sm);padding:10px 13px;
  font-size:12px;color:#8a4a10;margin:14px 0;
}
.spec b{color:#6d3908;}
.spec code{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#6d3908;background:#ffeddd;padding:1px 4px;border-radius:3px;}

/* ---------- split auth layout ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) 480px;}
.auth-brand{
  background:var(--navy-900);color:#fff;padding:44px 48px;
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;
}
.auth-brand::after{
  content:'';position:absolute;right:-160px;bottom:-160px;
  width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,130,42,.16),transparent 68%);
}
/* Sat at 17px in a caption colour, on a photograph - so it washed out.
   Larger, full white, and a shadow so it holds whatever is behind it. */
.auth-brand .logo{display:flex;align-items:center;gap:13px;font-size:21px;font-weight:700;
  color:#fff;letter-spacing:-0.01em;text-shadow:0 1px 12px rgba(0,0,0,.45);}
.auth-brand .logo > span:last-child > span{
  color:rgba(255,255,255,.72) !important;font-size:11px !important;letter-spacing:.15em !important;}
.auth-brand .logo .mark{
  width:30px;height:30px;border-radius:4px;background:var(--orange-500);
  display:grid;place-items:center;font-family:'IBM Plex Mono',monospace;
  font-weight:700;font-size:13px;color:var(--navy-900);
}
.auth-brand h1{font-size:31px;line-height:1.2;margin:0 0 14px;max-width:15ch;}
.auth-brand p{color:rgba(255,255,255,.66);max-width:46ch;font-size:13.5px;line-height:1.65;}
.auth-panel{
  background:var(--surface);padding:44px 46px;
  display:flex;flex-direction:column;justify-content:center;
  border-left:1px solid var(--line);
}
.auth-panel h2{font-size:20px;margin:0 0 5px;}
.auth-panel .sub{color:var(--muted);font-size:13px;margin-bottom:26px;}
.auth-switch{
  margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--muted);
}

/* chain motif on auth panel */
.chain{margin-top:34px;display:flex;flex-direction:column;gap:0;position:relative;z-index:1;}
.chain .step{
  display:flex;align-items:center;gap:13px;padding:8px 0;
  color:rgba(255,255,255,.5);font-size:12.5px;
}
.chain .step .c{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  width:42px;color:rgba(255,255,255,.42);
}
.chain .step .d{
  width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.26);flex:0 0 auto;
}
.chain .step.hi{color:#fff;}
.chain .step.hi .d{background:var(--orange-500);box-shadow:0 0 0 4px rgba(245,130,42,.2);}
.chain .step.hi .c{color:var(--orange-300);}

@media (max-width:900px){
  .auth{grid-template-columns:1fr;}
  .auth-brand{padding:32px 26px;}
  .auth-brand h1{font-size:25px;}
  .auth-panel{padding:32px 26px;border-left:0;border-top:1px solid var(--line);}
  .kv{grid-template-columns:1fr;gap:3px 0;}
  .kv dd{margin-bottom:9px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
}

/* ============================================================
   Phase 1 additions — Group A (Material Request)
   ============================================================ */

/* tabs (promoted from admin page to shared) */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:20px;flex-wrap:wrap;}
.tabs a{
  padding:9px 16px;font-size:13px;font-weight:600;text-decoration:none;color:var(--muted);
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.tabs a.on{color:var(--navy-900);border-bottom-color:var(--orange-500);}
.tabs .count{color:var(--muted);font-weight:400;}
.tabs a.on .count{color:var(--orange-500);}

/* breadcrumb */
.crumb{font-size:12px;color:var(--muted);margin-bottom:12px;}
.crumb a{text-decoration:none;}

/* record header */
.rec-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;}
.rec-no{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;color:var(--orange-500);font-weight:600;}
.rec-head h1{font-size:21px;margin:4px 0 6px;}
.rec-meta{font-size:12.5px;color:var(--muted);}

/* line item editor */
.items{width:100%;font-size:13px;border-collapse:separate;border-spacing:0;}
.items thead th{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:600;padding:9px 10px;border-bottom:1px solid var(--line);
  background:#fbfcfe;text-align:left;white-space:nowrap;
}
.items tbody td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:middle;}
.items tbody tr:last-child td{border-bottom:0;}
.items .rown{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);}
.items .form-control{padding:6px 9px;font-size:13px;}
.items .form-control.mono{font-family:'IBM Plex Mono',monospace;}
.items td.num,.items th.num{text-align:right;}
.items .del{
  border:0;background:none;color:var(--muted);font-size:16px;line-height:1;padding:2px 6px;border-radius:3px;
}
.items .del:hover{color:var(--st-revise);background:#c0392b10;}
.items tfoot td{padding:12px 10px;border-top:1px solid var(--line);font-weight:600;}

/* totals strip */
.totals{
  display:flex;gap:28px;flex-wrap:wrap;padding:14px 18px;
  background:#fbfcfe;border-top:1px solid var(--line);
}
.totals .t{min-width:150px;}
.totals .t .lbl{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.totals .t .val{font-size:17px;font-weight:600;margin-top:2px;}
.totals .t .val.mono{font-family:'IBM Plex Mono',monospace;font-size:16px;}
.totals .t.warn .val{color:var(--st-revise);}
.totals .t.ok .val{color:var(--st-ok);}

/* budget meter */
.meter{height:7px;border-radius:99px;background:#e7ecf4;overflow:hidden;margin:8px 0 6px;}
.meter span{display:block;height:100%;background:var(--navy-500);}
.meter span.over{background:var(--st-revise);}

/* upload dropzone */
.drop{
  border:1px dashed var(--line);border-radius:var(--radius-sm);padding:22px;text-align:center;
  color:var(--muted);font-size:13px;background:#fbfcfe;
}
.drop b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:3px;}

/* attachment row */
.att{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:13px;}
.att:last-child{border-bottom:0;}
.att .ic{
  width:32px;height:32px;border-radius:4px;background:#eef2f8;display:grid;place-items:center;
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:700;color:var(--navy-700);flex:0 0 auto;
}
.att .nm{font-weight:500;}
.att .sz{font-size:11.5px;color:var(--muted);font-family:'IBM Plex Mono',monospace;}

/* sla chip */
.timer{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--st-wait);
  background:#b4761a12;border:1px solid #e6d3ae;border-radius:99px;padding:3px 11px;font-weight:600;
}
.timer.late{color:var(--st-revise);background:#c0392b10;border-color:#e6c3be;}

/* slot marker (mockup only) */
.slot{outline:1px dashed rgba(245,130,42,.55);outline-offset:5px;border-radius:3px;}
.slot-tag{
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--orange-500);display:block;margin-bottom:7px;
}

/* empty state */
.empty{padding:44px 20px;text-align:center;color:var(--muted);font-size:13px;}
.empty b{display:block;color:var(--ink);font-size:14.5px;margin-bottom:5px;}

/* ============================================================
   Phase 1 additions — Group B (Vendor) & Group C (Tender)
   ============================================================ */

/* vendor portal chrome — visually distinct from internal */
.app-topbar.portal{background:var(--navy-700);border-bottom:3px solid var(--orange-500);}
.app-topbar.portal .proj{color:var(--orange-300);}
.portal-note{
  background:#fff8f2;border:1px solid #f3d9c0;border-radius:var(--radius-sm);
  padding:11px 14px;font-size:12.5px;color:#8a4a10;margin-bottom:18px;
}

/* form wizard steps */
.steps{display:flex;gap:0;flex-wrap:wrap;margin-bottom:22px;}
.steps .s{
  flex:1 1 0;min-width:130px;padding:10px 14px;border-top:3px solid var(--line);
  font-size:12.5px;color:var(--muted);
}
.steps .s .n{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;display:block;margin-bottom:2px;}
.steps .s.done{border-top-color:var(--navy-500);color:var(--ink);}
.steps .s.now{border-top-color:var(--orange-500);color:var(--navy-900);font-weight:600;}
.steps .s.now .n{color:var(--orange-500);}

/* section heading inside long forms */
.sec-h{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:600;padding-bottom:8px;border-bottom:1px solid var(--line);
  margin:26px 0 16px;
}
.sec-h:first-child{margin-top:0;}

/* bid comparison matrix */
.cmp{width:100%;font-size:12.5px;border-collapse:separate;border-spacing:0;}
.cmp th,.cmp td{padding:10px 12px;border-bottom:1px solid var(--line);}
.cmp thead th{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:600;background:#fbfcfe;text-align:center;vertical-align:bottom;
}
.cmp thead th.rowhead,.cmp td.rowhead{
  text-align:left;position:sticky;left:0;background:#fff;z-index:2;min-width:230px;
}
.cmp thead th.rowhead{background:#fbfcfe;}
.cmp td{text-align:center;}
.cmp td.num{text-align:right;font-family:'IBM Plex Mono',monospace;}
.cmp .best{background:#1e7a500d;font-weight:600;color:var(--st-ok);}
.cmp .worst{color:var(--st-revise);}
.cmp tfoot td{background:#fbfcfe;font-weight:600;border-top:1px solid var(--line);}

/* rank badge */
.rank{
  display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;
  background:#eef2f8;color:var(--navy-700);
}
.rank.r1{background:var(--orange-500);color:#fff;}

/* bidder card */
.bidder{
  display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line);
}
.bidder:last-child{border-bottom:0;}
.bidder .logo{
  width:38px;height:38px;border-radius:5px;background:#eef2f8;display:grid;place-items:center;
  font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:700;color:var(--navy-700);flex:0 0 auto;
}
.bidder .nm{font-weight:600;font-size:13.5px;}
.bidder .meta{font-size:11.5px;color:var(--muted);font-family:'IBM Plex Mono',monospace;margin-top:2px;}

/* score input */
.score{width:66px;text-align:center;font-family:'IBM Plex Mono',monospace;}

/* countdown block */
.count{
  display:flex;gap:22px;flex-wrap:wrap;padding:16px 18px;border-radius:var(--radius-sm);
  background:var(--navy-900);color:#fff;
}
.count .c .lbl{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.count .c .val{font-size:19px;font-weight:600;margin-top:3px;}
.count .c .val.mono{font-family:'IBM Plex Mono',monospace;}
.count .c .val.hot{color:var(--orange-300);}

/* sealed / locked notice */
.sealed{
  border:1px solid var(--line);border-radius:var(--radius-sm);background:#fbfcfe;
  padding:18px;text-align:center;color:var(--muted);font-size:13px;
}
.sealed b{display:block;color:var(--ink);font-size:14px;margin-bottom:4px;}

/* ============================================================
   Phase 2 & 3 — post-award, production, logistics
   ============================================================ */

/* photo grid (packing, inspection evidence) */
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;}
.photos .ph{
  aspect-ratio:4/3;border-radius:6px;background:#e7ecf4;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--muted);font-size:10px;position:relative;overflow:hidden;
  font-family:'IBM Plex Mono',monospace;
}
.photos .ph .tag{position:absolute;left:4px;bottom:4px;background:rgba(14,31,61,.72);color:#fff;
  font-size:8.5px;padding:1px 5px;border-radius:3px;}
.photos .add{border:1px dashed var(--line);background:#fbfcfe;cursor:pointer;}
.photos .add:hover{border-color:var(--orange-500);color:var(--navy-700);}

/* shipment / status timeline */
.track{list-style:none;margin:0;padding:0;position:relative;}
.track::before{content:'';position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:var(--line);}
.track li{position:relative;padding:0 0 18px 34px;}
.track li:last-child{padding-bottom:0;}
.track .dot{position:absolute;left:4px;top:1px;width:16px;height:16px;border-radius:50%;
  background:#fff;border:2px solid var(--line);z-index:1;}
.track li.done .dot{background:var(--st-ok);border-color:var(--st-ok);}
.track li.now .dot{background:var(--orange-500);border-color:var(--orange-500);box-shadow:0 0 0 4px rgba(245,130,42,.18);}
.track .tt{font-size:13px;font-weight:600;color:var(--ink);}
.track li:not(.done):not(.now) .tt{color:var(--muted);font-weight:500;}
.track .mt{font-size:11.5px;color:var(--muted);margin-top:2px;}
.track .when{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--muted);}

/* OSDR discrepancy row */
.osdr{border:1px solid #e6c3be;background:#fdf3f2;border-radius:var(--radius-sm);padding:12px 14px;}
.osdr .h{font-size:12.5px;font-weight:600;color:var(--st-revise);margin-bottom:6px;display:flex;align-items:center;gap:7px;}
.osdr.clean{border-color:#bfe0cd;background:#f2f9f5;}
.osdr.clean .h{color:var(--st-ok);}

/* receiving checklist */
.recv{list-style:none;margin:0;padding:0;}
.recv li{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px;}
.recv li:last-child{border-bottom:0;}
.recv .chk{width:20px;height:20px;border-radius:5px;border:1.5px solid var(--line);flex:0 0 auto;display:grid;place-items:center;font-size:12px;}
.recv .chk.ok{background:var(--st-ok);border-color:var(--st-ok);color:#fff;}
.recv .chk.no{background:#fff;border-color:var(--st-revise);color:var(--st-revise);}

/* mini progress bar cell */
.pbar{height:6px;border-radius:99px;background:#e7ecf4;overflow:hidden;min-width:90px;}
.pbar span{display:block;height:100%;background:var(--navy-500);}
.pbar span.late{background:var(--st-revise);}
.pbar span.done{background:var(--st-ok);}

/* stat chip inline */
.qstat{display:flex;gap:20px;flex-wrap:wrap;}
.qstat .q .l{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.qstat .q .v{font-size:19px;font-weight:600;margin-top:2px;}

/* ============================================================
   Project Configuration (pc000–pc012)
   ============================================================ */
.cfg-bar{
  background:var(--navy-700);color:#fff;padding:9px 22px;display:flex;align-items:center;gap:14px;
  font-size:12.5px;flex-wrap:wrap;
}
.cfg-bar .pj{font-weight:600;}
.cfg-bar .code{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--orange-300);}
.cfg-bar .sp{flex:1;}
.cfg-bar .st{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(255,255,255,.14);border-radius:5px;padding:3px 9px;}
.cfg-bar .st.live{background:var(--st-ok);}

.cfg-wrap{display:grid;grid-template-columns:236px 1fr;gap:22px;padding:22px;align-items:start;}
@media(max-width:900px){.cfg-wrap{grid-template-columns:1fr;}}
.cfg-nav{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px;position:sticky;top:14px;}
.cfg-nav .g{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:10px 12px 5px;}
.cfg-nav a{display:flex;align-items:center;gap:9px;padding:7px 12px;border-radius:6px;text-decoration:none;
  color:var(--ink);font-size:12.5px;}
.cfg-nav a:hover{background:#f2f5fa;}
.cfg-nav a.on{background:var(--navy-900);color:#fff;font-weight:600;}
.cfg-nav a .n{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:var(--muted);min-width:26px;}
.cfg-nav a.on .n{color:var(--orange-300);}

.lockbadge{display:inline-flex;align-items:center;gap:5px;font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  background:#fdecea;color:var(--st-revise);border-radius:5px;padding:3px 8px;}
.lockbadge.open{background:#eaf6ef;color:var(--st-ok);}

/* toggle row */
.tgl{display:flex;align-items:flex-start;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);}
.tgl:last-child{border-bottom:0;}
.tgl .sw{flex:0 0 auto;width:38px;height:21px;border-radius:99px;background:#cfd8e6;position:relative;cursor:pointer;margin-top:2px;}
.tgl .sw::after{content:'';position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;
  transition:left .15s;box-shadow:0 1px 3px rgba(14,31,61,.25);}
.tgl .sw.on{background:var(--st-ok);}
.tgl .sw.on::after{left:19px;}
.tgl .tx{flex:1;}
.tgl .tx .t{font-size:13px;font-weight:600;letter-spacing:-.01em;}
.tgl .tx .d{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.45;}
.tgl .side{flex:0 0 auto;}

/* weight editor */
.wrow{display:grid;grid-template-columns:1fr 92px 150px;gap:12px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--line);}
.wrow:last-child{border-bottom:0;}
.wrow .lb{font-size:12.5px;}
.wbar{height:8px;border-radius:99px;background:#e7ecf4;overflow:hidden;}
.wbar span{display:block;height:100%;background:var(--navy-500);}
.wtot{display:flex;justify-content:space-between;align-items:center;padding:11px 0 0;margin-top:8px;
  border-top:2px solid var(--navy-900);font-weight:600;font-size:13px;}
.wtot .v{font-family:'IBM Plex Mono',monospace;}
.wtot .v.bad{color:var(--st-revise);}

/* matrix */
.mtx{width:100%;border-collapse:collapse;font-size:12.5px;}
.mtx th{background:#f5f8fc;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);font-weight:600;padding:9px 11px;text-align:left;
  border-bottom:1px solid var(--line);white-space:nowrap;}
.mtx td{padding:9px 11px;border-bottom:1px solid var(--line);vertical-align:middle;}
.mtx tr:last-child td{border-bottom:0;}
.mtx .band{font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:600;}
.chain{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.chain .r{background:#eef2f8;border-radius:5px;padding:3px 8px;font-size:11px;font-weight:600;color:var(--navy-700);}
.chain .ar{color:var(--muted);font-size:11px;}

.hint-box{background:#f5f8fc;border:1px solid var(--line);border-radius:8px;padding:11px 14px;
  font-size:12px;color:var(--muted);line-height:1.55;}
.hint-box b{color:var(--ink);}

/* ============================================================
   Role home pages (shared)
   ============================================================ */

  /* ---- enhanced header ---- */
  .hdr{
    position:sticky;top:0;z-index:1030;height:58px;background:var(--navy-900);
    display:flex;align-items:center;gap:16px;padding:0 20px;color:#fff;
  }
  .hdr .brand{font-weight:600;font-size:15px;display:flex;align-items:center;gap:9px;flex:0 0 auto;}
  .hdr .brand .mark{width:23px;height:23px;border-radius:4px;background:var(--orange-500);
    display:grid;place-items:center;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;color:var(--navy-900);}
  .hdr .proj{font-family:'IBM Plex Mono',monospace;font-size:11px;color:rgba(255,255,255,.5);
    padding-left:16px;border-left:1px solid rgba(255,255,255,.16);flex:0 0 auto;}
  /* search */
  .searchbtn{
    flex:1;max-width:440px;margin:0 auto;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);
    border-radius:8px;height:36px;display:flex;align-items:center;gap:9px;padding:0 12px;cursor:text;
    color:rgba(255,255,255,.55);font-size:13px;
  }
  .searchbtn:hover{background:rgba(255,255,255,.13);}
  .searchbtn svg{width:15px;height:15px;flex:0 0 auto;}
  .searchbtn .kbd{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:10px;
    background:rgba(255,255,255,.12);border-radius:4px;padding:2px 6px;color:rgba(255,255,255,.7);}
  .hdr .actions{margin-left:auto;display:flex;align-items:center;gap:6px;flex:0 0 auto;}
  .iconbtn{
    width:36px;height:36px;border-radius:8px;border:0;background:transparent;color:rgba(255,255,255,.75);
    display:grid;place-items:center;cursor:pointer;position:relative;
  }
  .iconbtn:hover{background:rgba(255,255,255,.1);color:#fff;}
  .iconbtn svg{width:18px;height:18px;}
  .badge-dot{position:absolute;top:7px;right:8px;min-width:15px;height:15px;padding:0 4px;
    background:var(--orange-500);border-radius:99px;font-size:9px;font-weight:700;color:#fff;
    display:grid;place-items:center;border:2px solid var(--navy-900);}
  .hdr .me{display:flex;align-items:center;gap:9px;padding-left:8px;cursor:pointer;}
  .hdr .me .av{width:30px;height:30px;border-radius:50%;background:var(--navy-500);
    display:grid;place-items:center;font-size:11px;font-weight:600;}
  .hdr .me .nm{font-size:12.5px;line-height:1.1;}
  .hdr .me .rl{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:var(--orange-300);text-transform:uppercase;letter-spacing:.06em;}

  /* ---- notification panel ---- */
  .notif{
    position:absolute;top:52px;right:56px;width:360px;max-height:70vh;overflow-y:auto;z-index:1040;
    background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 16px 40px rgba(14,31,61,.22);
    display:none;
  }
  .notif.show{display:block;}
  .notif .nh{padding:13px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;}
  .notif .nh h3{font-size:14px;margin:0;}
  .notif .nh a{font-size:12px;text-decoration:none;}
  .nitem{display:flex;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;}
  .nitem:hover{background:#fbfcfe;}
  .nitem:last-child{border-bottom:0;}
  .nitem .ic{width:32px;height:32px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center;font-size:14px;}
  .nitem.unread{background:#fff8f2;}
  .nitem .tx{font-size:12.5px;line-height:1.4;}
  .nitem .tx b{font-weight:600;}
  .nitem .tm{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--muted);margin-top:3px;}

  /* ---- command palette ---- */
  .cmdk-scrim{position:fixed;inset:0;background:rgba(14,31,61,.4);z-index:1090;display:none;}
  .cmdk-scrim.show{display:block;}
  .cmdk{
    position:fixed;top:12vh;left:50%;transform:translateX(-50%);width:min(600px,92vw);z-index:1100;
    background:#fff;border-radius:12px;box-shadow:0 24px 60px rgba(14,31,61,.3);overflow:hidden;display:none;
  }
  .cmdk.show{display:block;}
  .cmdk-in{display:flex;align-items:center;gap:11px;padding:15px 18px;border-bottom:1px solid var(--line);}
  .cmdk-in svg{width:18px;height:18px;color:var(--muted);flex:0 0 auto;}
  .cmdk-in input{border:0;outline:0;font-size:16px;width:100%;color:var(--ink);font-family:'IBM Plex Sans',sans-serif;}
  .cmdk-in input::placeholder{color:var(--muted);}
  .cmdk-body{max-height:52vh;overflow-y:auto;padding:8px;}
  .cmdk-grp{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted);padding:10px 12px 5px;}
  .cmdk-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;text-decoration:none;color:inherit;cursor:pointer;}
  .cmdk-item:hover,.cmdk-item.sel{background:#eef2f8;}
  .cmdk-item .ci{width:28px;height:28px;border-radius:7px;background:#eef2f8;display:grid;place-items:center;font-size:13px;flex:0 0 auto;}
  .cmdk-item:hover .ci,.cmdk-item.sel .ci{background:#fff;}
  .cmdk-item .cl{font-size:13.5px;font-weight:500;}
  .cmdk-item .cs{font-size:11.5px;color:var(--muted);}
  .cmdk-item .tail{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted);}
  .cmdk-empty{padding:34px;text-align:center;color:var(--muted);font-size:13px;}
  .cmdk-foot{border-top:1px solid var(--line);padding:9px 16px;display:flex;gap:16px;font-size:11px;color:var(--muted);}
  .cmdk-foot span{display:flex;align-items:center;gap:5px;}
  .cmdk-foot kbd{font-family:'IBM Plex Mono',monospace;background:#eef2f8;border-radius:4px;padding:1px 5px;font-size:10px;}

  /* ---- landing content ---- */
  .greet{padding:26px 26px 6px;}
  .greet .hi{font-size:23px;font-weight:600;letter-spacing:-.01em;}
  .greet .sub{color:var(--muted);font-size:13.5px;margin-top:3px;}
  .home-wrap{padding:14px 26px 60px;display:grid;grid-template-columns:1fr 340px;gap:20px;}
  .stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;}
  .stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;}
  .stat .l{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
  .stat .n{font-size:24px;font-weight:600;margin-top:4px;}
  .stat .d{font-size:11.5px;color:var(--muted);}
  .stat .d.warn{color:var(--st-revise);}

  .sechd{display:flex;align-items:center;gap:9px;margin:2px 0 12px;}
  .sechd h2{font-size:15px;margin:0;}
  .sechd .cnt{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;color:#fff;
    background:var(--orange-500);border-radius:99px;padding:1px 8px;}

  .task{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);
    border-radius:10px;padding:13px 15px;margin-bottom:9px;text-decoration:none;color:inherit;transition:border-color .12s,box-shadow .12s;}
  .task:hover{border-color:var(--orange-500);box-shadow:0 6px 16px rgba(14,31,61,.08);}
  .task .stage{width:4px;align-self:stretch;border-radius:99px;flex:0 0 auto;}
  .task .body{flex:1;min-width:0;}
  .task .no{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted);letter-spacing:.05em;}
  .task .tt{font-size:13.5px;font-weight:600;margin:2px 0 3px;letter-spacing:-.01em;}
  .task .mt{font-size:11.5px;color:var(--muted);}
  .task .act{flex:0 0 auto;text-align:right;}
  .task .due{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;}
  .task .due.late{color:var(--st-revise);} .task .due.soon{color:var(--st-wait);} .task .due.ok{color:var(--muted);}
  .task .gobtn{display:inline-block;margin-top:5px;font-family:'IBM Plex Mono',monospace;font-size:10px;
    letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:#fff;background:var(--orange-500);
    padding:5px 11px;border-radius:6px;}

  .side .card-p{margin-bottom:16px;}
  .act-log{list-style:none;margin:0;padding:0;}
  .act-log li{display:flex;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:12.5px;}
  .act-log li:last-child{border-bottom:0;}
  .act-log .ai{width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-size:10px;font-weight:600;color:#fff;}
  .act-log .at{line-height:1.4;} .act-log .at .w{font-weight:600;}
  .act-log .at .tm{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted);}


  /* ---- app navbar (real module navigation) ---- */
  .appnav{padding-right:20px;
    background:var(--navy-700);border-bottom:1px solid rgba(255,255,255,.08);
    display:flex;align-items:center;gap:2px;padding:0 20px;height:44px;overflow-x:auto;
    position:sticky;top:58px;z-index:1029;
  }
  .appnav a{
    display:inline-flex;align-items:center;gap:7px;white-space:nowrap;flex:0 0 auto;
    color:rgba(255,255,255,.68);text-decoration:none;font-size:13px;font-weight:500;
    padding:0 14px;height:100%;border-bottom:2.5px solid transparent;
  }
  .appnav a:hover{color:#fff;background:rgba(255,255,255,.05);}
  .appnav a.on{color:#fff;font-weight:600;border-bottom-color:var(--orange-500);}
  .appnav a .cnt{
    font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;
    background:var(--orange-500);color:#fff;border-radius:99px;padding:0 6px;min-width:16px;
    height:16px;display:grid;place-items:center;
  }
  .appnav a.on .cnt{background:var(--orange-500);}
  .appnav a:not(.on) .cnt{background:rgba(255,255,255,.18);}
  .appnav .sep{flex:0 0 auto;width:1px;height:20px;background:rgba(255,255,255,.18);margin:0 8px;}
  .appnav svg{width:15px;height:15px;flex:0 0 auto;}

  @media (max-width:1000px){ .home-wrap{grid-template-columns:1fr;} .stat-row{grid-template-columns:repeat(2,1fr);} .searchbtn{max-width:none;} .appnav{padding-right:20px;top:58px;} .hdr .me .nm,.hdr .me .rl{display:none;} }


/* ============================================================
   Group SS — service & subcontract scope control
   ============================================================ */
.inc{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;
  padding:2px 8px;border-radius:5px;letter-spacing:.03em;white-space:nowrap;}
.inc-in{background:#eaf6ef;color:var(--st-ok);}
.inc-opt{background:#fff2e2;color:#a8560f;}
.inc-ex{background:#fdecea;color:var(--st-revise);}
.inc-ps{background:#eef2f8;color:var(--navy-700);}
.inc-blank{background:#f2f4f7;color:var(--muted);}

.scoperow{border-bottom:1px solid var(--line);}
.scoperow:last-child{border-bottom:0;}
.scoperow .ln{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--muted);}
.scoperow .desc{font-size:12.5px;line-height:1.4;}
.scoperow .desc b{font-weight:600;}

.diff-add{background:#eaf6ef;}
.diff-del{background:#fdecea;text-decoration:line-through;color:var(--st-revise);}
.diff-chg{background:#fff8f2;}
.difftag{font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  padding:1px 6px;border-radius:4px;text-transform:uppercase;}
.difftag.add{background:var(--st-ok);color:#fff;}
.difftag.del{background:var(--st-revise);color:#fff;}
.difftag.chg{background:var(--orange-500);color:#fff;}

.snapshot{border:2px solid var(--navy-900);border-radius:10px;padding:14px 16px;background:#f7f9fc;}
.snapshot .sh{display:flex;align-items:center;gap:9px;margin-bottom:8px;}
.snapshot .sh .t{font-size:13px;font-weight:700;}

/* ============================================================
   Vendor portal home — extras
   ============================================================ */
.hdr .projsel{
  display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14);border-radius:7px;padding:5px 11px;
  font-size:12px;color:#fff;cursor:pointer;flex:0 0 auto;white-space:nowrap;
}
.hdr .projsel:hover{background:rgba(255,255,255,.14);}
.hdr .projsel .cnt{font-family:'IBM Plex Mono',monospace;font-size:9.5px;
  background:rgba(255,255,255,.18);border-radius:4px;padding:1px 5px;}

.acctbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:11px 15px;margin:0 26px 4px;
}
.acctbar .st{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;}
.acctbar .st .d{width:8px;height:8px;border-radius:50%;}
.acctbar .sep{width:1px;height:18px;background:var(--line);}
.acctbar .m{font-size:12px;color:var(--muted);}
.acctbar .m b{color:var(--ink);}
.acctbar .right{margin-left:auto;display:flex;gap:8px;align-items:center;}

.pono{
  font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:700;
  color:var(--navy-900);letter-spacing:.02em;
}
.task .sub-t{font-size:12.5px;color:var(--ink);margin:2px 0 3px;}
.whatis{font-size:11.5px;color:var(--muted);font-style:italic;margin-top:4px;}

.paystrip{display:flex;gap:0;align-items:stretch;margin-top:4px;}
.paystrip .s{
  flex:1;padding:8px 10px;background:#f5f8fc;border:1px solid var(--line);
  border-right:0;font-size:11px;text-align:center;color:var(--muted);
}
.paystrip .s:first-child{border-radius:7px 0 0 7px;}
.paystrip .s:last-child{border-right:1px solid var(--line);border-radius:0 7px 7px 0;}
.paystrip .s.done{background:#eaf6ef;color:var(--st-ok);font-weight:600;border-color:#bfe0cd;}
.paystrip .s.now{background:var(--orange-500);color:#fff;font-weight:600;border-color:var(--orange-500);}
.paystrip .s .amt{display:block;font-family:'IBM Plex Mono',monospace;font-size:11.5px;margin-top:2px;}

.contact{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px dashed var(--line);}
.contact:last-child{border-bottom:0;}
.contact .av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:11px;font-weight:600;flex:0 0 auto;}
.contact .nm{font-size:12.5px;font-weight:600;}
.contact .rl{font-size:11px;color:var(--muted);}
.contact .wa{margin-left:auto;font-size:11.5px;text-decoration:none;color:var(--st-ok);font-weight:600;}

@media (max-width:900px){
  .acctbar{margin:0 16px 4px;}
  .hdr .projsel .lbl{display:none;}
}
@media (max-width:700px){
  .stat-row{grid-template-columns:repeat(2,1fr) !important;}
  .task{flex-wrap:wrap;}
  .task .act{width:100%;text-align:left;margin-top:8px;display:flex;align-items:center;gap:10px;}
  .paystrip{flex-wrap:wrap;}
  .paystrip .s{flex:1 1 45%;border-right:1px solid var(--line);border-radius:7px;margin:2px;}
}

/* ============================================================
   Build sheet additions — states, amendments, frameworks
   ============================================================ */
.statepick{display:flex;gap:6px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;margin-bottom:18px;align-items:center;}
.statepick .lb{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-right:4px;}
.statepick button{font-size:11.5px;font-weight:600;border:1px solid var(--line);background:#f5f8fc;
  color:var(--muted);border-radius:99px;padding:5px 12px;cursor:pointer;font-family:inherit;}
.statepick button.on{background:var(--navy-900);color:#fff;border-color:var(--navy-900);}

.stagerail{display:flex;align-items:stretch;margin:0 0 18px;flex-wrap:wrap;}
.stagerail .st{flex:1;min-width:104px;text-align:center;padding:11px 8px;background:#f5f8fc;
  border:1px solid var(--line);border-right:0;font-size:11.5px;color:var(--muted);}
.stagerail .st:first-child{border-radius:8px 0 0 8px;}
.stagerail .st:last-child{border-right:1px solid var(--line);border-radius:0 8px 8px 0;}
.stagerail .st.done{background:#eaf6ef;color:var(--st-ok);font-weight:600;border-color:#bfe0cd;}
.stagerail .st.now{background:var(--orange-500);color:#fff;font-weight:700;border-color:var(--orange-500);}
.stagerail .st.bad{background:#fdecea;color:var(--st-revise);font-weight:700;border-color:#e6c3be;}
.stagerail .st small{display:block;font-family:'IBM Plex Mono',monospace;font-size:9.5px;opacity:.85;margin-top:2px;}

.empty{text-align:center;padding:42px 26px;background:#fff;border:1px dashed #cdd6e4;border-radius:12px;}
.empty .ic{width:44px;height:44px;margin:0 auto 12px;border-radius:12px;background:#eef2f8;
  display:grid;place-items:center;color:var(--navy-500);}
.empty h3{font-size:16px;margin:0 0 6px;letter-spacing:-.01em;}
.empty p{font-size:13px;color:var(--muted);max-width:440px;margin:0 auto 14px;line-height:1.55;}
.empty .hint{font-size:12px;color:var(--muted);margin-top:12px;}

/* amendment diff */
.amd{display:grid;grid-template-columns:1fr 24px 1fr;gap:0;align-items:stretch;margin-bottom:10px;}
.amd .side{border:1px solid var(--line);padding:11px 13px;}
.amd .side.from{border-radius:8px 0 0 8px;background:#fbfcfe;}
.amd .side.to{border-radius:0 8px 8px 0;background:#fff8f2;border-color:#f2d9bf;}
.amd .arw{display:grid;place-items:center;color:var(--muted);font-size:14px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#f5f8fc;}
.amd .lbl{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:4px;}
.amd .val{font-size:13px;font-weight:600;}
.amd .val.mono{font-family:'IBM Plex Mono',monospace;}

.ackbox{border:2px solid var(--st-revise);background:#fdf3f2;border-radius:10px;padding:14px 16px;margin-bottom:16px;}
.ackbox .h{font-size:13px;font-weight:700;color:var(--st-revise);margin-bottom:6px;}
.ackbox label{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;cursor:pointer;margin-top:10px;}
.ackbox input{margin-top:2px;}

.receipt{border:1px solid var(--line);border-radius:10px;padding:16px 18px;background:#fff;
  font-family:'IBM Plex Mono',monospace;font-size:12px;}
.receipt .r{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px dashed var(--line);}
.receipt .r:last-child{border-bottom:0;}
.receipt .k{color:var(--muted);}

/* acting-for banner */
.acting{display:flex;align-items:center;gap:11px;background:#fff3e0;border:1px solid #f2d9bf;
  border-left:4px solid var(--orange-500);border-radius:0 8px 8px 0;padding:10px 15px;margin:0 26px 4px;}
.acting .ic{width:26px;height:26px;border-radius:50%;background:var(--orange-500);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:700;flex:0 0 auto;}
.acting .tx{font-size:12.5px;color:#8a4a10;line-height:1.5;}
.acting .tx b{color:var(--ink);}
.acting .right{margin-left:auto;}
@media (max-width:900px){.acting{margin:0 16px 4px;}}

/* ============================================================
   Auth & system state pages
   ============================================================ */
.authwrap{min-height:100vh;display:grid;place-items:center;background:var(--navy-900);padding:28px 18px;}
.authcard{width:100%;max-width:420px;background:#fff;border-radius:14px;padding:32px 30px;
  box-shadow:0 18px 50px rgba(6,15,32,.4);}
.authcard.wide{max-width:560px;}
.authbrand{display:flex;align-items:center;gap:9px;margin-bottom:22px;}
.authbrand .mark{width:30px;height:30px;border-radius:8px;background:var(--orange-500);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:15px;}
.authbrand .nm{font-size:16px;font-weight:700;letter-spacing:-.01em;}
.authbrand .sub{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);}
.authcard h1{font-size:21px;letter-spacing:-.02em;margin:0 0 7px;}
.authcard .lede{font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:22px;}
.authcard .form-label{font-size:12px;}
.authcard .foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font-size:12px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.authcard .foot a{color:var(--orange-500);text-decoration:none;font-weight:600;}
.authnote{background:#f5f8fc;border:1px solid var(--line);border-radius:9px;padding:11px 13px;
  font-size:12px;color:var(--muted);line-height:1.55;margin-top:16px;}
.authnote b{color:var(--ink);}

.pwbar{display:flex;gap:4px;margin-top:7px;}
.pwbar span{flex:1;height:4px;border-radius:99px;background:#e6ebf2;}
.pwbar span.on{background:var(--st-ok);}
.pwbar span.mid{background:var(--st-wait);}

.sysstate{min-height:100vh;display:grid;place-items:center;padding:40px 20px;background:#eef1f6;}
.sysbox{max-width:520px;text-align:center;}
.sysbox .code{font-family:'IBM Plex Mono',monospace;font-size:58px;font-weight:700;
  color:var(--navy-900);opacity:.14;line-height:1;letter-spacing:-.04em;}
.sysbox h1{font-size:23px;letter-spacing:-.02em;margin:8px 0 10px;}
.sysbox p{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:22px;}
.sysbox .acts{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;}
.sysbox .ref{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line);}

/* ============================================================
   List toolbar — injected by _shell.js on register pages
   ============================================================ */
.ltb{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);
  flex-wrap:wrap;background:#fbfcfe;border-radius:11px 11px 0 0;}
.ltb .lsearch{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
  border-radius:7px;padding:5px 10px;min-width:180px;flex:1 1 200px;max-width:300px;}
.ltb .lsearch svg{width:13px;height:13px;color:var(--muted);flex:0 0 auto;}
.ltb .lsearch input{border:0;outline:0;font-size:12.5px;font-family:inherit;width:100%;background:transparent;color:var(--ink);}
.ltb .lsearch input::placeholder{color:var(--muted);}

.ltb .lbtn{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);
  border-radius:7px;padding:5px 11px;font-size:12px;font-weight:500;color:var(--ink);
  cursor:pointer;font-family:inherit;white-space:nowrap;flex:0 0 auto;}
.ltb .lbtn:hover{border-color:var(--navy-500);}
.ltb .lbtn.on{background:var(--navy-900);border-color:var(--navy-900);color:#fff;}
.ltb .lbtn svg{width:12px;height:12px;}
.ltb .lbtn .n{font-family:'IBM Plex Mono',monospace;font-size:9.5px;background:var(--orange-500);
  color:#fff;border-radius:4px;padding:1px 5px;}
.ltb select.lsel{background:#fff;border:1px solid var(--line);border-radius:7px;padding:5px 9px;
  font-size:12px;font-family:inherit;color:var(--ink);cursor:pointer;flex:0 0 auto;max-width:170px;}
.ltb .lspacer{margin-left:auto;}
.ltb .lcount{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);flex:0 0 auto;}

/* saved views strip */
.lviews{display:flex;align-items:center;gap:6px;padding:8px 14px;border-bottom:1px solid var(--line);
  flex-wrap:wrap;background:#fff;}
.lviews .vlbl{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-right:3px;}
.lviews a{font-size:12px;padding:4px 10px;border-radius:99px;text-decoration:none;
  color:var(--muted);border:1px solid transparent;white-space:nowrap;}
.lviews a:hover{background:#f2f5fa;color:var(--ink);}
.lviews a.on{background:var(--navy-900);color:#fff;font-weight:600;}
.lviews a .c{font-family:'IBM Plex Mono',monospace;font-size:9.5px;opacity:.75;margin-left:4px;}

/* sortable headers */
.tbl thead th.srt{cursor:pointer;user-select:none;white-space:nowrap;}
.tbl thead th.srt:hover{color:var(--navy-900);}
.tbl thead th.srt .ar{opacity:.28;margin-left:4px;font-size:9px;}
.tbl thead th.srt.up .ar,.tbl thead th.srt.dn .ar{opacity:1;color:var(--orange-500);}

/* select column */
.tbl th.selc,.tbl td.selc{width:34px;padding-left:14px;padding-right:0;}
.tbl td.selc input,.tbl th.selc input{cursor:pointer;width:14px;height:14px;accent-color:var(--orange-500);}
.tbl tbody tr.picked{background:#fff6ee !important;}

/* bulk bar */
.lbulk{display:none;align-items:center;gap:9px;padding:10px 14px;background:var(--navy-900);
  color:#fff;flex-wrap:wrap;}
.lbulk.show{display:flex;}
.lbulk .bn{font-size:12.5px;font-weight:600;}
.lbulk .bsep{width:1px;height:16px;background:rgba(255,255,255,.2);}
.lbulk button{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;
  border-radius:6px;padding:4px 11px;font-size:12px;font-family:inherit;cursor:pointer;white-space:nowrap;}
.lbulk button:hover{background:rgba(255,255,255,.22);}
.lbulk .bclear{margin-left:auto;background:transparent;border:0;color:rgba(255,255,255,.65);text-decoration:underline;}

/* footer */
.lfoot{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line);
  flex-wrap:wrap;background:#fbfcfe;border-radius:0 0 11px 11px;}
.lfoot .fx{font-size:12px;color:var(--muted);}
.lfoot .pg{margin-left:auto;display:flex;gap:4px;}
.lfoot .pg button{background:#fff;border:1px solid var(--line);border-radius:6px;padding:3px 9px;
  font-size:12px;font-family:inherit;cursor:pointer;color:var(--ink);min-width:28px;}
.lfoot .pg button.on{background:var(--navy-900);border-color:var(--navy-900);color:#fff;font-weight:600;}
.lfoot .pg button:disabled{opacity:.4;cursor:default;}

/* empty state */
.lempty{padding:44px 20px;text-align:center;}
.lempty .ei{width:42px;height:42px;border-radius:12px;background:#f2f5fa;display:grid;
  place-items:center;margin:0 auto 12px;color:var(--muted);}
.lempty .ei svg{width:20px;height:20px;}
.lempty h3{font-size:15px;margin:0 0 6px;letter-spacing:-.01em;}
.lempty p{font-size:13px;color:var(--muted);margin:0 0 16px;line-height:1.55;}

/* column picker popover */
.lcols{position:absolute;z-index:200;background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 12px 34px rgba(14,31,61,.16);padding:11px 13px;min-width:190px;display:none;}
.lcols.show{display:block;}
.lcols .ch{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.lcols label{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:4px 0;cursor:pointer;}
.lcols label input{accent-color:var(--orange-500);width:13px;height:13px;}

/* Do not depend on the Bootstrap CDN for horizontal table scrolling —
   without this a wide table bleeds out of its card on narrow screens. */
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.card-p{overflow:hidden;}

/* ============================================================
   Data flow document
   ============================================================ */
.df-legend{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0;}
.df-legend span{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);}
.tagpill{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:700;
  letter-spacing:.04em;border-radius:4px;padding:2px 6px;white-space:nowrap;}
.t-new{background:#e7f4ec;color:#136B45;}
.t-read{background:#eef1f7;color:#3D5580;}
.t-upd{background:#FFF1E3;color:#8a4a10;}
.t-out{background:#f0eaf8;color:#5B3A96;}
.t-lock{background:#fdecea;color:#B03A2E;}

.fld{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--navy-700);font-weight:600;
  white-space:nowrap;}
.tbl td .why{font-size:11.5px;color:var(--muted);display:block;margin-top:2px;line-height:1.45;}

.thread{border:1px solid var(--line);border-radius:11px;background:#fff;padding:16px 18px;height:100%;}
.thread .th-h{display:flex;align-items:center;gap:9px;margin-bottom:11px;}
.thread .th-h .d{width:11px;height:11px;border-radius:50%;flex:0 0 auto;}
.thread .th-h h3{margin:0;font-size:14.5px;letter-spacing:-.01em;}
.thread ol{margin:0;padding-left:17px;font-size:12.5px;line-height:1.75;color:var(--ink);}
.thread ol code{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--navy-700);
  background:#f2f5fa;border-radius:3px;padding:1px 4px;}
.thread .th-n{margin-top:11px;font-size:12px;color:var(--muted);line-height:1.55;
  border-top:1px solid var(--line);padding-top:10px;}

.stagehd{display:flex;align-items:baseline;gap:11px;margin:34px 0 12px;padding-bottom:9px;
  border-bottom:2px solid var(--line);}
.stagehd .no{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#fff;background:var(--navy-900);
  border-radius:5px;padding:2px 8px;flex:0 0 auto;}
.stagehd h2{margin:0;font-size:17.5px;letter-spacing:-.015em;}
.stagehd .src{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--muted);}

/* ============================================================
   Phase 1 additions — system state pages (403/404/500/offline)
   and locked-account card. Appended by batch 1; the base file
   above is the untouched mockup spec.
   ============================================================ */
.sysstate{min-height:100vh;display:grid;place-items:center;background:var(--bg);padding:28px 18px;}
.sysbox{width:100%;max-width:520px;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow);padding:38px 36px;}
.sysbox .code{font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:44px;
  color:var(--orange-500);letter-spacing:.02em;line-height:1;margin-bottom:14px;}
.sysbox h1{font-size:20px;margin:0 0 10px;}
.sysbox p{color:var(--muted);font-size:13.5px;line-height:1.65;margin:0 0 22px;}
.sysbox .acts{display:flex;gap:10px;flex-wrap:wrap;}
.sysbox .ref{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
  font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);}
.authcard h1{font-size:19px;margin:6px 0 10px;}
.authcard .lede{color:var(--muted);font-size:13.5px;line-height:1.65;}
.authcard .nm{font-weight:600;font-size:14.5px;}
.authcard .sub{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);}

/* ===== topbar dropdown system (R1) — was unstyled, hence "berantakan" ===== */
.tb-menu{position:relative;display:inline-block;}
.tb-menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;}
.tb-menu>summary::-webkit-details-marker{display:none;}
.tb-drop{position:absolute;right:0;top:calc(100% + 8px);background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:9px;box-shadow:0 14px 34px rgba(14,31,61,.25);
  min-width:230px;max-width:320px;z-index:2000;padding:6px;}
.tb-drop a{display:block;color:var(--ink);text-decoration:none;font-size:12.5px;
  padding:8px 12px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tb-drop a:hover{background:var(--bg, #F4F6FA);}
.tb-drop .hdr{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  font-weight:700;padding:8px 12px 4px;}
.tb-drop form button{display:block;width:100%;text-align:left;background:none;border:0;color:var(--ink);
  font-size:12.5px;padding:8px 12px;border-radius:6px;cursor:pointer;}
.tb-drop form button:hover{background:var(--bg, #F4F6FA);}
.tb-roles{display:flex;flex-wrap:wrap;gap:4px;padding:2px 12px 8px;}
.tb-roles span{font-family:'IBM Plex Mono',monospace;font-size:9.5px;background:var(--bg, #F4F6FA);
  border:1px solid var(--line);border-radius:4px;padding:1px 6px;color:var(--muted);}
.tb-deleg{font-size:11px;color:var(--muted);background:#FFF4E8;border-radius:6px;
  padding:7px 10px;margin:4px 8px;line-height:1.45;}
.proj-pill{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);color:#fff;
  border-radius:6px;padding:3px 11px;font-size:11.5px;cursor:pointer;white-space:nowrap;
  max-width:260px;overflow:hidden;text-overflow:ellipsis;}
.tb-search{flex:1;max-width:430px;margin-left:18px;}
.tb-search input{width:100%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  border-radius:7px;color:#fff;font-size:12px;padding:6px 12px;outline:none;}
.tb-search input::placeholder{color:rgba(255,255,255,.45);}
.tb-search input:focus{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4);}

/* ===== R2: purpose-built confirm modal (replaces browser confirm) ===== */
.epc-modal-back{position:fixed;inset:0;background:rgba(14,31,61,.55);z-index:5000;display:flex;
  align-items:center;justify-content:center;padding:18px;}
.epc-modal{background:#fff;border-radius:12px;max-width:440px;width:100%;
  box-shadow:0 24px 60px rgba(14,31,61,.4);overflow:hidden;}
.epc-modal .mh{padding:16px 22px 0;font-weight:700;font-size:14.5px;color:var(--ink,#0E1F3D);}
.epc-modal .mb{padding:10px 22px 18px;font-size:13px;line-height:1.6;color:var(--muted,#5A6B85);}
.epc-modal .mf{padding:12px 22px;border-top:1px solid var(--line,#E3E8F0);display:flex;
  gap:10px;justify-content:flex-end;}
.epc-modal .mf .btn-ghost{background:none;border:1px solid var(--line,#E3E8F0);border-radius:6px;
  padding:7px 16px;font-size:12px;font-weight:600;color:var(--ink,#0E1F3D);cursor:pointer;}
.epc-modal .mf .btn-go{background:var(--orange-500,#F5822A);border:0;border-radius:6px;
  padding:7px 16px;font-size:12px;font-weight:700;color:#fff;cursor:pointer;
  font-family:'IBM Plex Mono',monospace;letter-spacing:.04em;}

/* ===== R2: pagination skin (Bootstrap 5 renderer + brand) ===== */
.pagination{gap:4px;font-family:'IBM Plex Sans',sans-serif;}
.pagination .page-link{border:1px solid var(--line,#E3E8F0);color:var(--ink,#0E1F3D);
  font-size:12px;border-radius:6px !important;padding:5px 11px;box-shadow:none;}
.pagination .page-item.active .page-link{background:var(--navy-700,#16305E);
  border-color:var(--navy-700,#16305E);color:#fff;font-weight:700;}
.pagination .page-link:focus{box-shadow:none;}
.pagination .page-item.disabled .page-link{color:#B9C3D4;}

/* ===== R2: padding & alignment tightening ===== */
.tbl td{vertical-align:middle;}
.tbl td .pill{vertical-align:middle;}
.hd{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.kpi{display:flex;flex-direction:column;justify-content:center;gap:2px;}
.pill{line-height:1.7;}
.card-p form.d-flex{align-items:center;}
.status-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

/* Row-3 tab breathing room + icon alignment */
.app-subnav a, .app-subnav summary{padding:11px 12px;gap:7px;}
.app-subnav svg{flex:0 0 auto;opacity:.75;}
.app-subnav a.on2 svg, .app-subnav summary.on2 svg{opacity:1;}
.nav-drop a{display:flex;align-items:center;gap:8px;padding:9px 14px;}

/* Hover nav groups: open on hover, gone when you leave, tap-friendly via focus */
.nav-group{position:relative;display:flex;align-items:stretch;}
.nav-group .nav-sum{display:flex;align-items:center;gap:7px;font-size:13px;padding:11px 12px;
  cursor:pointer;border-bottom:2px solid transparent;user-select:none;}
.nav-group .nav-sum.on2{font-weight:700;border-bottom-color:var(--orange-500,#F5822A);}
.nav-group .nav-drop{display:none;position:absolute;top:100%;left:0;background:#fff;
  border:1px solid var(--line,#E3E8F0);border-radius:0 0 10px 10px;
  box-shadow:0 16px 36px rgba(14,31,61,.18);min-width:290px;z-index:1500;padding:6px;}
.nav-group:hover .nav-drop, .nav-group:focus-within .nav-drop{display:block;}
.nav-group .nav-drop a{display:flex;align-items:center;gap:8px;padding:10px 14px;
  font-size:12.5px;color:var(--ink,#0E1F3D);text-decoration:none;border-radius:6px;white-space:nowrap;}
.nav-group .nav-drop a:hover{background:var(--bg,#F4F6FA);}

/* ===== Row-3 nav, self-contained. Summary is a real LINK (click goes to the
   group's main page); hover reveals the menu; leaving closes it. ===== */
.app-subnav .epc-it{display:inline-flex;align-items:center;gap:6px;padding:12px 13px;
  font-size:13px;color:var(--ink,#0E1F3D) !important;text-decoration:none;white-space:nowrap;
  border-bottom:2px solid transparent;line-height:1;}
.app-subnav .epc-it svg{opacity:.7;flex:0 0 auto;}
.app-subnav .epc-it:hover{background:var(--bg,#F4F6FA);}
.app-subnav .epc-it.on2{font-weight:700;border-bottom-color:var(--orange-500,#F5822A);}
.app-subnav .epc-it.on2 svg{opacity:1;}
.app-subnav .epc-it .cnt{margin-left:2px;}
.epc-grp{position:relative;display:flex;}
.epc-menu{display:none;position:absolute;left:0;top:100%;background:#fff;
  border:1px solid var(--line,#E3E8F0);border-radius:0 0 10px 10px;
  box-shadow:0 16px 36px rgba(14,31,61,.18);min-width:290px;z-index:1500;padding:6px;}
.epc-grp:hover .epc-menu{display:block;}
.epc-menu a{display:block;padding:10px 14px;font-size:12.5px;color:var(--ink,#0E1F3D);
  text-decoration:none;border-radius:6px;white-space:nowrap;}
.epc-menu a:hover{background:var(--bg,#F4F6FA);}