/* ============================================================
   TBC Coordinator — design tokens
   Palette: graphite ink + denim blue accent, ledger/manifest feel
   Type: IBM Plex Sans (headings/UI) + Inter (body) + IBM Plex Mono (codes/numbers)
   ============================================================ */
:root{
  --bg:#f4f5f7;
  --card:#ffffff;
  --border:#e3e6eb;
  --border-strong:#cbd0d9;
  --ink:#1c2130;
  --ink-soft:#5a6072;
  --ink-faint:#8d93a3;

  --accent:#2b4c7e;
  --accent-dark:#1f3860;
  --accent-soft:#e7eef8;
  --accent-line:#a9c1e0;

  --good:#1f8a5f;
  --good-bg:#e5f5ec;
  --warn:#de8e16;
  --warn-bg:#fbf0dd;
  --bad:#c23b3b;
  --bad-bg:#fbeaea;
  --info:#3d6bb5;
  --info-bg:#e9f0fb;

  --radius:10px;
  --radius-sm:6px;
  --shadow-card:0 1px 2px rgba(28,33,48,.04);
  --shadow-pop:0 12px 32px rgba(20,24,36,.16);

  --font-ui:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  font-size:10.5pt;
}
h1,h2,h3,.font-ui{font-family:var(--font-ui);}
.mono{font-family:var(--font-mono);}

button{font-family:inherit;}
input,select,textarea{font-family:inherit;}

a{color:var(--accent);}

/* ---------- layout shell ---------- */
/* min-height stays 100vh on purpose: it must always match the browser's
   actual viewport height, which a fixed px value can't do across screens. */
.app-shell{display:flex;min-height:100vh;}

.sidebar{
  width:220px;flex-shrink:0;
  background:var(--accent-dark);
  color:#dfe6f2;
  display:flex;flex-direction:column;
  padding:20px 0;
}
.sidebar-brand{
  padding:0 20px 20px;
  border-bottom:1px solid rgba(255,255,255,.12);
  margin-bottom:14px;
}
.sidebar-brand .mark{
  font-size:7.88pt;letter-spacing:.14em;text-transform:uppercase;
  color:#9fb4d6;font-weight:600;margin-bottom:3px;
}
.sidebar-brand h1{
  font-size:12.75pt;margin:0;font-weight:600;color:#fff;letter-spacing:-.01em;
}
.nav-group{margin-bottom:6px;}
.nav-label{
  font-size:7.88pt;text-transform:uppercase;letter-spacing:.08em;
  color:#7d93b8;padding:10px 20px 6px;font-weight:600;
}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 20px;font-size:10.13pt;font-weight:500;
  color:#c3d0e4;cursor:pointer;border-left:3px solid transparent;
  transition:background .12s,color .12s,border-color .12s;
}
.nav-item svg{flex-shrink:0;opacity:.85;}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff;}
.nav-item.active{
  background:rgba(255,255,255,.09);
  color:#fff;border-left-color:#7fa6de;
}
.sidebar-foot{
  margin-top:auto;padding:14px 20px 0;
  border-top:1px solid rgba(255,255,255,.12);
}
.user-chip{display:flex;align-items:center;gap:9px;margin-bottom:10px;}
.user-avatar{
  width:30px;height:30px;border-radius:50%;
  background:#3a5a8c;color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:9.38pt;font-weight:700;flex-shrink:0;
}
.user-meta .name{font-size:9.75pt;font-weight:600;color:#fff;line-height:1.25;}
.user-meta .role{font-size:8.25pt;color:#9fb4d6;text-transform:uppercase;letter-spacing:.05em;}

.main{flex:1;min-width:0;padding:26px 32px 60px;max-width:1280px;}

/* ---------- header row ---------- */
.page-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:20px;flex-wrap:wrap;gap:14px;
}
.page-head h2{font-size:15pt;margin:0;font-weight:600;letter-spacing:-.01em;}
.page-head .sub{font-size:9.75pt;color:var(--ink-soft);margin-top:3px;}

/* ---------- buttons ---------- */
.btn{
  appearance:none;border:1px solid var(--border-strong);background:var(--card);
  color:var(--ink);padding:9px 15px;border-radius:var(--radius-sm);
  font-size:9.75pt;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;
  transition:background .12s,border-color .12s,color .12s;
}
.btn:hover{background:#f4f5f7;border-color:var(--ink-faint);}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);}
.btn-primary:hover{background:var(--accent-dark);}
.btn-danger{color:var(--bad);}
.btn-danger:hover{background:var(--bad-bg);border-color:var(--bad);}
.btn-sm{padding:6px 11px;font-size:9pt;}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.btn[hidden]{display:none;}

/* ---------- summary metrics ---------- */
/* Auto-fits however many metric tiles a page has (RFQ has 4, Purchases has
   5) into equal-width columns, so neither page needs its own hardcoded
   column count. minmax floor keeps tiles from getting too narrow before
   wrapping to the next row. */
.summary-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:10px;margin-bottom:22px;
}
.metric{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;box-shadow:var(--shadow-card);
}
.metric .label{
  font-size:8.25pt;color:var(--ink-faint);text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:6px;font-weight:600;
}
.metric .value{font-size:15.75pt;font-weight:700;font-family:var(--font-mono);}

/* Purchases dashboard tile colors, one per stage of the flow. Heading
   (.label) and number (.value) share the same color per tile. */
.metric-totalpos .label,.metric-totalpos .value{color:var(--accent);}
.metric-totalitems .label,.metric-totalitems .value{color:var(--accent-dark);}
.metric-pending .label,.metric-pending .value{color:var(--bad);}
.metric-onpurchase .label,.metric-onpurchase .value{color:var(--warn);}
.metric-ready .label,.metric-ready .value{color:var(--good);}

/* ---------- toolbar / search ---------- */
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:18px;flex-wrap:wrap;}
.search{flex:1;min-width:200px;position:relative;}
.search input{
  width:100%;padding:9px 12px 9px 34px;border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);font-size:9.75pt;background:var(--card);color:var(--ink);
}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);opacity:.4;}

.tabs{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 18px;border-bottom:1px solid var(--border);}
.tab-btn{
  appearance:none;border:none;background:none;padding:10px 4px;margin-right:22px;
  font-size:10.13pt;font-weight:600;color:var(--ink-faint);cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .12s,border-color .12s;font-family:var(--font-ui);
}
.tab-btn:hover{color:var(--ink);}
.tab-btn.active{color:var(--ink);border-bottom-color:var(--accent);}

/* ---------- card / group (project or PO) ---------- */
.group{
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  margin-bottom:14px;overflow:hidden;box-shadow:var(--shadow-card);
}
.group.is-complete{border-color:var(--good-bg);}
.group-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;cursor:pointer;gap:12px;flex-wrap:wrap;
}
.group-head:hover{background:#fafbfc;}
.gh-left{display:flex;align-items:center;gap:12px;min-width:0;}
.chev{transition:transform .15s;flex-shrink:0;color:var(--ink-faint);}
.chev.open{transform:rotate(90deg);}
.gh-titles{min-width:0;}
.gh-name{font-size:10.88pt;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-ui);}
.gh-meta{font-size:9pt;color:var(--bad);margin-top:2px;}
.gh-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.group-body{border-top:1px solid var(--border);}

/* ---------- status / badges (stamp motif) ---------- */
.badge{
  font-size:8.25pt;padding:4px 10px;border-radius:20px;font-weight:600;
  white-space:nowrap;letter-spacing:.02em;
}
.badge-active{background:var(--accent-soft);color:var(--accent);}
.badge-complete{background:var(--good-bg);color:var(--good);}

.stamp{
  font-family:var(--font-mono);font-size:7.88pt;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  padding:4px 9px;border-radius:4px;border:1.5px dashed currentColor;
  display:inline-block;white-space:nowrap;
}
.stamp-poissue{color:var(--ink-faint);background:#eef0f3;}
.stamp-onpurchase{color:var(--warn);background:var(--warn-bg);}
.stamp-ready{color:var(--info);background:var(--info-bg);}
.stamp-delivered{color:var(--good);background:var(--good-bg);}

/* Clickable status stamp (Purchases item rows, admin only) — same stamp
   look but interactive, with a small arrow hinting it advances the item
   to its next stage on click. */
.stamp-btn{
  border:1.5px dashed currentColor;background:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;transition:background .12s,transform .08s;
}
.stamp-btn:hover{transform:translateY(-1px);}
.stamp-btn:active{transform:translateY(0);}
.stamp-btn.stamp-poissue:hover{background:#e4e7ec;}
.stamp-btn.stamp-onpurchase:hover{background:#f5e6c8;}
.stamp-btn.stamp-ready:hover{background:#d9e6f8;}

/* ---------- table ---------- */
table{width:100%;border-collapse:collapse;font-size:9.75pt;}
th{
  text-align:left;padding:9px 12px;font-size:7.88pt;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-faint);font-weight:700;background:#fafbfc;
  border-bottom:1px solid var(--border);white-space:nowrap;font-family:var(--font-ui);
}
td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--ink);}
tr:last-child td{border-bottom:none;}
td.num{font-family:var(--font-mono);}

/* Softer, less "spreadsheet" look for the RFQ items table: no vertical
   grid lines (replaced with alternating row shading below), a bit more
   vertical breathing room, and header/data alignment matched up so each
   column's label sits directly above its values. */
.rfq-items-table,.po-items-table{border-radius:8px;overflow:hidden;}
.rfq-items-table th,.rfq-items-table td,.po-items-table th,.po-items-table td{padding-top:11px;padding-bottom:11px;}
.rfq-items-table tbody tr:nth-child(even),.po-items-table tbody tr:nth-child(even){background:#fafbfc;}
.rfq-items-table th,.po-items-table th{text-align:center;}
.rfq-items-table th[data-field="requirement"],.po-items-table th[data-field="item"]{text-align:left;}
.rfq-items-table td,.po-items-table td{text-align:center;}
.rfq-items-table td[data-field="requirement"],.po-items-table td[data-field="item"]{text-align:left;}
/* Status cell holds a single pill/button — center it as a flex container
   rather than relying on text-align, so it's centered regardless of the
   button's own box model. */
.po-items-table td[data-field="status"]{display:flex;align-items:center;justify-content:center;}
/* Remove button: the ~25px button (5px padding + 15px icon) plus this
   cell's default 12px left/right padding didn't fit inside the 36px
   column, so it was overflowing instead of centering — no amount of
   centering CSS fixes an element that doesn't fit its container. Trimming
   the cell's own padding (paired with widening the column in rfq.js's
   colgroup) gives it enough room, and margin:0 auto centers the
   now-fitting button within that room. Permanent red tint so it reads as
   a delete action at a glance, not just on hover. */
.rfq-items-table td:last-child,.po-items-table td:last-child{padding-left:6px;padding-right:6px;}
.rfq-items-table .icon-btn,.po-items-table .icon-btn{display:flex;margin:0 auto;color:var(--bad);background:var(--bad-bg);}
.rfq-items-table .icon-btn:hover,.po-items-table .icon-btn:hover{background:var(--bad);color:#fff;}

.editable-cell{cursor:text;border-radius:6px;padding:5px 7px;min-height:20px;transition:background .1s;}
.editable-cell.locked{cursor:default;}
.editable-cell:not(.locked):hover{background:#f2f4f7;}
.editable-cell input{
  width:100%;border:1px solid var(--accent);border-radius:5px;padding:4px 6px;
  font-size:9.75pt;font-family:inherit;background:#fff;
}
.cost-badge{background:var(--good);color:#fff;padding:4px 10px;border-radius:6px;font-weight:600;display:inline-block;font-family:var(--font-mono);}
.cost-empty{color:var(--ink-faint);}

.icon-btn{border:none;background:none;cursor:pointer;color:var(--ink-faint);padding:5px;border-radius:6px;display:flex;}
.icon-btn:hover{background:#f0eee6;color:var(--bad);}
.icon-btn[hidden]{display:none;}

.add-row-btn{
  display:flex;align-items:center;gap:6px;padding:11px 18px;font-size:9.75pt;
  color:var(--accent);cursor:pointer;font-weight:600;border-top:1px solid var(--border);
  background:#fafbfc;
}
.add-row-btn:hover{background:var(--accent-soft);}
.empty{padding:40px 20px;text-align:center;color:var(--ink-faint);font-size:10.13pt;}
.empty-page{padding:80px 20px;text-align:center;color:var(--ink-faint);}
.empty-page svg{opacity:.35;margin-bottom:12px;}
.empty-page .msg{font-size:10.5pt;}

/* ---------- status select (purchases) ---------- */
select.status-select{
  border:1px solid var(--border-strong);border-radius:6px;padding:6px 8px;
  font-size:9.38pt;font-family:var(--font-mono);background:#fff;color:var(--ink);
}

/* ---------- simple data cards (clients / sales team) ---------- */
/* Fixed to 4 equal columns in px, assuming the page is at/near the .main
   max-width of 1280px. The mobile overrides below handle narrow screens. */
.card-grid{display:grid;grid-template-columns:295px 295px 295px 295px;gap:12px;}
.data-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow-card);
}
.data-card .dc-name{font-weight:600;font-size:10.88pt;font-family:var(--font-ui);margin-bottom:2px;}
.data-card .dc-sub{font-size:9pt;color:var(--ink-faint);margin-bottom:10px;}
.data-card .dc-row{font-size:9.38pt;color:var(--ink-soft);margin-bottom:3px;display:flex;gap:6px;}
.data-card .dc-row b{color:var(--ink);font-weight:600;}
.data-card .dc-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.team-section-title{font-weight:600;font-size:10pt;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;margin-top:6px;}
.status-pill{font-size:7.88pt;padding:3px 8px;border-radius:20px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;}
.status-pill.on{background:var(--good-bg);color:var(--good);}
.status-pill.off{background:var(--bad-bg);color:var(--bad);}

/* ---------- modal ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(20,24,36,.44);display:none;
  align-items:flex-start;justify-content:center;z-index:100;padding:40px 16px;overflow-y:auto;
}
.modal-overlay.open{display:flex;}
.modal{
  background:var(--card);border-radius:14px;width:100%;max-width:820px;
  padding:26px 26px 22px;box-shadow:var(--shadow-pop);
}
.modal.modal-sm{max-width:460px;}
.modal h2{font-size:12.75pt;margin:0 0 4px;font-weight:600;font-family:var(--font-ui);}
.modal .modal-sub{font-size:9.38pt;color:var(--ink-soft);margin-bottom:18px;}
.field{margin-bottom:12px;}
.field label{display:block;font-size:9pt;font-weight:600;color:var(--ink-soft);margin-bottom:5px;}
.field input,.field select,.field textarea{
  width:100%;padding:9px 10px;border:1px solid var(--border-strong);border-radius:7px;
  font-size:10.13pt;color:var(--ink);background:var(--bg);font-family:inherit;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:#fff;}
/* 378px + 378px + 12px gap = 768px, matching the default 820px modal's
   inner content width (820 - 26px padding each side). */
.field-row{display:grid;grid-template-columns:378px 378px;gap:12px;}
/* modal-sm is only 460px wide, so field-row needs its own narrower columns
   here (198px + 198px + 12px gap = 408px, matching modal-sm's content width). */
.modal.modal-sm .field-row{grid-template-columns:198px 198px;}

/* Columns sized in px against the default 820px modal's 768px content
   width: 246 + 123 + 123 + 216 + 28 (remove button) + 4*8px gaps = 768px. */
.item-row{display:grid;grid-template-columns:190px 70px 70px 100px 100px 162px 28px;gap:8px;margin-bottom:8px;align-items:center;}
.item-row input{padding:8px 9px;border:1px solid var(--border-strong);border-radius:7px;font-size:9.75pt;font-family:inherit;background:var(--bg);}
.item-row input:focus{outline:none;border-color:var(--accent);background:#fff;}
.item-row-remove{border:none;background:none;color:var(--ink-faint);cursor:pointer;padding:6px;border-radius:6px;}
.item-row-remove:hover{background:var(--bad-bg);color:var(--bad);}
.item-header{
  display:grid;grid-template-columns:190px 70px 70px 100px 100px 162px 28px;gap:8px;
  font-size:7.88pt;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em;
  margin-bottom:6px;font-weight:700;
}
/* RFQ rows have one extra column (Unit) that Purchases rows don't, so they
   get their own 6-column layout instead of overriding the shared one above.
   Order: Requirement, Unit, Quantity, Cost, Remark, remove-button.
   220 + 69 + 110 + 110 + 191 + 28 (remove btn) + 5*8px gaps = 768px, matching
   the default 820px modal's content width. */
.item-row.rfq-items,.item-header.rfq-items{
  grid-template-columns:220px 69px 110px 110px 191px 28px;
}
.gh-progress{font-size:9pt;color:var(--ink-faint);white-space:nowrap;}
.add-item-link{display:inline-flex;align-items:center;gap:6px;font-size:9.75pt;color:var(--accent);cursor:pointer;font-weight:600;margin:4px 0 16px;}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;}

/* ---------- toast ---------- */
.toast{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(0);
  background:var(--ink);color:#fff;padding:10px 18px;border-radius:8px;font-size:9.75pt;
  opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:200;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-6px);}

/* ---------- login screen ---------- */
.login-screen{
  position:fixed;inset:0;background:linear-gradient(160deg,var(--accent-dark),#141c2e);
  display:flex;align-items:center;justify-content:center;z-index:300;padding:20px;
}
.login-card{
  background:var(--card);border-radius:16px;width:100%;max-width:760px;
  box-shadow:var(--shadow-pop);display:flex;overflow:hidden;
}
.login-brand{
  flex:0 0 42%;background:linear-gradient(160deg,var(--accent-dark),#141c2e);
  display:flex;align-items:center;justify-content:center;padding:32px;
}
.login-logo{max-width:100%;max-height:180px;object-fit:contain;}
.login-form{flex:1;min-width:0;padding:34px 32px;}
.login-card .mark{font-size:8.25pt;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700;}
.login-card h2{font-size:14.25pt;margin:4px 0 4px;font-weight:600;font-family:var(--font-ui);}
.login-card .sub{font-size:9.75pt;color:var(--ink-soft);margin-bottom:22px;}
.login-error{font-size:9.38pt;color:var(--bad);margin-bottom:10px;display:none;}

/* ---------- helpers ---------- */
.hidden{display:none !important;}
.text-faint{color:var(--ink-faint);}
.mt-0{margin-top:0;}

@media (max-width:900px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform .18s;z-index:90;}
  .sidebar.open{transform:translateX(0);}
  .main{padding:18px 16px 60px;}
  .field-row{grid-template-columns:1fr;}
  .summary-row{grid-template-columns:1fr 1fr;}
  .card-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .login-card{flex-direction:column;max-width:380px;}
  .login-brand{padding:22px;}
  .login-logo{max-height:90px;}
  .login-form{padding:28px 24px;}
}
@media (max-width:640px){
  .item-row,.item-header{grid-template-columns:1fr;}
  .item-row.rfq-items,.item-header.rfq-items{grid-template-columns:1fr;}
  .summary-row{grid-template-columns:1fr;}
  .card-grid{grid-template-columns:1fr;}
}

.item-row input.r-total{background:var(--bg);color:var(--ink-soft);font-weight:600;cursor:default;}
.item-row input.r-total:focus{border-color:var(--border-strong);background:var(--bg);}
.po-total-row td{font-weight:700;border-top:2px solid var(--border);}

/* ---------- wide modal (New PO) ----------
   1100px wide so the 7-column item grid (Item, Unit, Qty, Unit Price, Total,
   Remark, remove) has room. Columns are fluid so it still fits on smaller
   laptop screens; the mobile rule below stacks everything. */
.modal.modal-lg{max-width:1100px;}
.modal.modal-lg .field-row{grid-template-columns:1fr 1fr;}
.modal.modal-lg .item-row,.modal.modal-lg .item-header{
  grid-template-columns:minmax(180px,2.4fr) minmax(60px,.7fr) minmax(60px,.7fr) minmax(90px,1fr) minmax(90px,1fr) minmax(140px,2fr) 28px;
}
@media (max-width:640px){
  .modal.modal-lg .field-row,
  .modal.modal-lg .item-row,.modal.modal-lg .item-header{grid-template-columns:1fr;}
}

/* ---------- Excel import bar (New PO modal) ---------- */
.excel-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:10px 12px;margin:-4px 0 16px;border:1px dashed var(--border-strong);border-radius:9px;background:var(--bg);
}
.excel-bar-text{font-size:9pt;color:var(--ink-soft);}
.excel-bar-actions{display:flex;gap:8px;}
.excel-bar .btn{display:inline-flex;align-items:center;gap:6px;}
.btn-excel{background:#1d6f42;border-color:#1d6f42;color:#fff;}
.btn-excel:hover{background:#185c37;border-color:#185c37;color:#fff;}

/* ---------- partial purchase ---------- */
.metric-partial .label,.metric-partial .value{color:#b35c00;}
.partial-badge{
  display:inline-block;margin-top:3px;padding:1px 7px;border-radius:999px;
  font-size:7.5pt;font-weight:700;color:#b35c00;background:#fff1e0;white-space:nowrap;
}
.purchase-cell:not(.locked){background:rgba(29,111,66,.04);}

/* ---------- partial purchase approval ---------- */
.appr-select,.appr-chip{
  display:block;margin-top:5px;font-size:8pt;font-weight:700;border-radius:6px;
  padding:3px 6px;border:1px solid currentColor;width:100%;max-width:148px;font-family:inherit;
}
.appr-select{cursor:pointer;}
.appr-chip{width:auto;display:inline-block;}
.appr-pending{color:#b35c00;background:#fff1e0;}
.appr-approved{color:var(--good);background:var(--good-bg);}

.stamp-partial{color:#b35c00;background:#fff1e0;}
.unit-cost{font-size:7.5pt;color:var(--ink-faint);margin-top:2px;white-space:nowrap;}
.report-btn{display:inline-flex;align-items:center;gap:6px;margin-left:auto;}
.report-btn[hidden]{display:none;}
.po-report-btn{display:inline-flex;align-items:center;gap:5px;}

/* ---------- Reports page ---------- */
.rpt-select{padding:9px 10px;border:1px solid var(--border-strong);border-radius:7px;background:var(--card);font-family:inherit;font-size:9.75pt;min-width:180px;}
.rpt-table-wrap{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow-x:auto;}
.rpt-table{width:100%;border-collapse:collapse;font-size:9.5pt;}
.rpt-table th{background:var(--bg);color:var(--ink-faint);font-size:7.9pt;text-transform:uppercase;letter-spacing:.04em;font-weight:700;padding:10px 12px;text-align:right;border-bottom:1px solid var(--border);white-space:nowrap;}
.rpt-table td{padding:10px 12px;text-align:right;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums;white-space:nowrap;}
.rpt-table .l{text-align:left;}
.rpt-table tbody tr:hover{background:var(--accent-soft);}
.rpt-table tfoot td{font-weight:700;border-bottom:none;border-top:2px solid var(--border);}
.rpt-pos{color:var(--good) !important;}
.rpt-neg{color:var(--bad) !important;}
.rpt-warn{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#fff1e0;color:#b35c00;font-size:8pt;font-weight:700;cursor:help;}
.purchase-cell.locked{cursor:not-allowed;}