/* Additions for the live app (sign-in, account box, loading states) */
.boot{padding:40px 0;text-align:center;color:var(--ink-2)}
.login{max-width:420px;margin:40px auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px;display:grid;gap:14px}
.login h2{margin:0}
.login .err{color:var(--bad);font-size:14px;min-height:1em}
.login .dev{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.userbox{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.userbox .name{font-weight:600}
.userbox .pos{font-size:12px;color:var(--ink-2)}
.loading{opacity:.55;pointer-events:none;transition:opacity .15s}
.pill-note{font-size:12px;color:var(--ink-2)}
.tablewrap-empty{padding:18px;text-align:center;color:var(--ink-2)}
.inline{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
#cExtra:empty{display:none}
#cExtra{display:grid;gap:10px}
@media print{.tabs,.doors,.who,.lowbar,.actions,.actbox{display:none!important}}
.split{align-items:start}
.prlist{align-content:start}
.access-note:empty{display:none}
.testnote{margin-top:16px;padding:12px;border:1px dashed var(--line,#ccc);border-radius:8px;font-size:13px}
.testnote .dev{margin-top:8px}

#app:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
#app>[hidden]{display:none}

/* ---------- Side bar (like the Claude app): sections with their screens ---------- */
.shell{display:grid;grid-template-columns:auto minmax(0,1fr);min-height:100vh}
.shell>.wrap{width:100%;align-content:start}
#app{align-content:start}
.side{position:sticky;top:0;height:100vh;width:252px;overflow-y:auto;background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:6px;padding:14px 10px;transition:width .18s ease}
.side[hidden]{display:none}
.side-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.side-brand{display:flex;align-items:center;gap:10px;min-width:0}
.side-brand .mark{width:30px;height:30px}
.side-brand b{display:block;font-family:var(--display);font-size:17px;line-height:1.1}
.side-brand small{display:block;color:var(--ink-3);font-size:12px}
.iconbtn{display:grid;place-items:center;width:36px;height:36px;flex:none;border:0;border-radius:8px;background:none;color:var(--ink-2);cursor:pointer}
.iconbtn:hover{background:var(--surface-2);color:var(--ink)}
.side-nav{display:grid;gap:4px}
.grp{display:grid;gap:2px}
.grp-h{display:flex;align-items:center;gap:10px;width:100%;padding:6px 8px;border:0;border-radius:8px;background:none;
  color:var(--ink);font:600 15px var(--display);letter-spacing:.02em;text-align:left;cursor:pointer}
.grp-h:hover{background:var(--surface-2)}
.grp-h .ic{position:relative;display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:9px;background:var(--surface-2);color:var(--ink-2)}
.grp-h .ic svg{width:22px;height:22px}
.grp.current .grp-h .ic{background:var(--jade);color:var(--jade-ink)}
.grp-h .badge{position:absolute;top:-6px;right:-8px;margin:0}
.grp-items{display:grid;gap:1px;padding:0 0 6px 44px}
.item{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 10px;border:0;border-radius:7px;background:none;
  color:var(--ink-2);font:500 14px var(--body);text-align:left;cursor:pointer}
.item:hover{background:var(--surface-2);color:var(--ink)}
.item[aria-current="page"]{background:var(--jade-soft);color:var(--ink);font-weight:600;box-shadow:inset 3px 0 0 var(--jade)}
.menubtn{display:none}

/* Desktop, side bar open: screens are in the side bar, so no tab row */
@media (min-width:900px){
  body:not(.side-closed) .tabs{display:none}
  /* Closed: a narrow strip, each section's icon above its label */
  body.side-closed .side{width:84px;padding:14px 6px}
  body.side-closed .side-top{flex-direction:column;padding:2px 0 10px}
  body.side-closed .side-brand div:last-child,body.side-closed .grp-items{display:none}
  body.side-closed .grp-h{flex-direction:column;gap:4px;padding:8px 2px;text-align:center;font-size:12px}
  body.side-closed .grp-h .ic{width:40px;height:40px}
  body.side-closed .grp-h .ic svg{width:24px;height:24px}
  body.side-closed .grp.current .grp-h{background:var(--jade-soft)}
}
/* Phone: a slide-out menu opened from the ☰ button */
@media (max-width:899px){
  .shell{display:block}
  .side{position:fixed;left:0;top:0;z-index:40;width:280px;max-width:86vw;box-shadow:0 10px 40px rgba(0,0,0,.25);transform:translateX(-105%);transition:transform .2s ease}
  body.side-open-m .side{transform:none}
  .side-backdrop{position:fixed;inset:0;z-index:39;background:rgba(10,20,16,.45)}
  .side-backdrop[hidden]{display:none}
  .menubtn:not([hidden]){display:grid;margin-right:2px}
}
@media (prefers-reduced-motion:reduce){.side{transition:none}}
@media (min-width:900px){ body:not(.side-closed) .shell .side:not([hidden]) ~ .wrap header.top .brand{display:none} body:not(.side-closed) .shell .side:not([hidden]) ~ .wrap header.top{justify-content:flex-end} }

/* Signature pad: a white "paper" strip in both themes, so the dark ink always shows */
.sigpad{display:grid;gap:6px;margin-top:4px}
.sig-head{display:flex;justify-content:space-between;align-items:center}
#cSigCanvas{display:block;width:100%;height:170px;background:#fff;border:1.5px dashed var(--line);border-radius:8px;touch-action:none;cursor:crosshair;
  background-image:linear-gradient(transparent calc(100% - 42px), #c9d3ce calc(100% - 42px), #c9d3ce calc(100% - 41px), transparent calc(100% - 41px))}
.sigpad.signed #cSigCanvas{border-style:solid;border-color:var(--jade)}
.sig-line{display:flex;justify-content:space-between;gap:8px;font-size:13px;flex-wrap:wrap}
/* Signatures on a request and on the Purchase Order */
.sigs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.sig{border:1px solid var(--line);border-radius:8px;padding:8px 10px;display:grid;gap:2px;background:var(--surface)}
.sig img{width:100%;height:70px;object-fit:contain;background:#fff;border-radius:4px}
.sig-onfile{display:flex;align-items:center;height:70px;padding:0 10px;border:1px dashed var(--line);border-radius:4px;color:var(--muted);font-size:13px}
.sig b{font-size:13px}.sig .faint{font-size:11.5px}
.sig.old{opacity:.6}
.po .sigs{margin-top:6px}
@media print{ .side,.side-backdrop,header.top,.lowbar,.tabs,.doors,.actions,.access-note{display:none!important} .shell{display:block} .panel{border:0} }

/* Stock entry: what are you entering? */
.seg{display:flex;flex-wrap:wrap;gap:6px}
.segbtn{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:999px;padding:7px 14px;font:600 13.5px var(--body);cursor:pointer}
.segbtn:hover{border-color:var(--jade);color:var(--ink)}
.segbtn[aria-selected="true"]{background:var(--jade);border-color:var(--jade);color:var(--jade-ink)}
.segbtn .badge{background:var(--warn)}

/* Stock: its own side menu (All Stocks, Create Stock, Categories & Suppliers, Stock movements) */
.stockwrap{display:grid;grid-template-columns:210px minmax(0,1fr);gap:18px;align-items:start}
.subside{display:flex;flex-direction:column;gap:4px;border-right:1px solid var(--line);padding-right:14px;position:sticky;top:12px}
.subitem{display:grid;gap:2px;text-align:left;background:none;border:0;border-radius:10px;padding:9px 12px;font:inherit;color:var(--ink);cursor:pointer}
.subitem b{font-weight:600;font-size:14px}.subitem .faint{font-size:12px}
.subitem:hover{background:var(--surface-2)}
.subitem[aria-current="page"]{background:var(--jade-soft);box-shadow:inset 3px 0 0 var(--jade)}
.stockmain{min-width:0}
@media (max-width:1199px){.stockwrap{grid-template-columns:1fr}.subside{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:0 0 8px;position:static}.subitem{flex:0 0 auto}.subitem .faint{display:none}}
.thumb{width:44px;height:44px;border-radius:8px;object-fit:cover;background:var(--surface-2);border:1px solid var(--line);display:inline-grid;place-items:center;font-size:13px;font-weight:700;color:var(--ink-3)}
.thumb.big{width:120px;height:120px;font-size:22px}
.thumb.none{font-family:var(--display)}
.thumb.broken{visibility:hidden}
.alltbl td{vertical-align:top}
.alltbl tr.arow{cursor:pointer}.alltbl tr.arow:hover{background:var(--surface-2)}
.alltbl tr.arow.open{background:var(--jade-soft)}
.alltbl tr.lotrow > td{padding-top:0;background:var(--jade-soft)}
.lots table{background:var(--surface);border:1px solid var(--line);border-radius:8px}
.itemform{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:start;margin:10px 0}
.imgpick{display:grid;gap:8px;justify-items:start}
@media (max-width:700px){.itemform{grid-template-columns:1fr}}
.itemhead{display:grid;grid-template-columns:130px 1fr;gap:16px;align-items:start}
.note-box{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:6px 0 12px;font-size:14px}
.label-sp{display:block;font-size:12px}
.alltbl td.iname{min-width:180px}
.alltbl td.num{white-space:nowrap}
.alltbl .min-input{width:84px}

/* Dashboard */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:4px 0 14px}
.tile{display:grid;gap:2px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:inherit;color:var(--ink);cursor:pointer}
.tile b{font-family:var(--display);font-size:26px;line-height:1.1}.tile span{font-size:13px;color:var(--ink-2)}
.tile.bad{border-color:var(--bad);box-shadow:inset 3px 0 0 var(--bad)}.tile.bad b{color:var(--bad)}
.tile.warn{border-color:#c98a12;box-shadow:inset 3px 0 0 #c98a12}.tile.warn b{color:#b07a0a}
.tile.info{box-shadow:inset 3px 0 0 var(--jade)}
.dcard{border-top:1px solid var(--line);padding-top:10px;margin-top:16px;scroll-margin-top:12px}
.dfilters{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 8px}.dfilters input{flex:1 1 220px}.dfilters select{flex:0 1 170px}
tr.clicky{cursor:pointer}tr.clicky:hover{background:var(--surface-2)}
tr.row-bad td:first-child{box-shadow:inset 3px 0 0 var(--bad)}tr.row-warn td:first-child{box-shadow:inset 3px 0 0 #c98a12}
tr.row-bad{background:color-mix(in srgb, var(--bad) 7%, transparent)}
.seg.small .segbtn{font-size:12px;padding:5px 10px}
.seg{flex-wrap:wrap}
tr.hl{background:var(--jade-soft)}
.alerttbl .min-input{width:84px}

/* Stock's own options, nested under Stock in the side bar */
.item.has-sub .caret{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);opacity:.55;flex:none;margin-right:2px}
.item.has-sub[aria-expanded="true"] .caret{transform:rotate(45deg)}
.item.has-sub[aria-current="true"]{color:var(--ink);font-weight:600}
.subitems{display:grid;gap:1px;margin:2px 0 4px 10px;padding-left:10px;border-left:2px solid var(--line)}
.item.sub{font-size:13.5px;padding:6px 10px}
/* The in-page Stock menu is only needed when the side bar is closed or on a phone */
@media (min-width:900px){body:not(.side-closed) .subside{display:none}body:not(.side-closed) .stockwrap{grid-template-columns:1fr}}
@media (min-width:900px) and (min-width:1200px){body.side-closed .stockwrap{grid-template-columns:1fr}body.side-closed .subside{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:0 0 8px;position:static}body.side-closed .subitem{flex:0 0 auto}body.side-closed .subitem .faint{display:none}}

/* Stock entry: create a missing item without leaving the receipt */
.actbox.newitem{margin:12px 0;border-left:3px solid var(--jade)}
.actbox.newitem .field.wide{grid-column:1/-1}
.warnbox{margin:10px 0;padding:10px 12px;border-radius:10px;background:var(--warn-soft,#fff4e0);border:1px solid var(--warn)}
.warnbox ul{margin:6px 0 0;padding-left:18px}.warnbox li{margin:4px 0}
.warnbox li .btn{margin-left:8px}

/* Stock Withdrawals and Equipment Borrowing */
.field.wide{grid-column:1/-1}
.bad-text{color:var(--bad);font-weight:600}
.ok-text{color:var(--ok);font-weight:600}
td.nowrap{white-space:nowrap}
td.nowrap .btn+.btn{margin-left:4px}
tr.clicky[aria-selected="true"]{background:var(--jade-soft)}

/* Stock Entry: Record Stock Entry / Create New Item */
.seg.big{margin-bottom:6px}
.seg.big .segbtn{font-size:15px;padding:9px 18px}
.suprows{display:grid;gap:8px}
.suprow{display:grid;grid-template-columns:minmax(160px,1.3fr) minmax(120px,1fr) minmax(110px,.8fr) auto;gap:8px;align-items:center}
@media (max-width:700px){.suprow{grid-template-columns:1fr 1fr}}
.actbox.okbox{border-color:var(--ok)}
details.linkbox{margin:8px 0 4px;border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;background:var(--surface)}
details.linkbox summary{cursor:pointer;font-weight:600}
details.linkbox[open] summary{margin-bottom:10px}
tr.faint td{color:var(--ink-3)}
/* Purchase orders per supplier */
.pochips{display:flex;flex-wrap:wrap;gap:4px}
.po + .actions{margin:6px 0 14px}
.po .row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.po .tbl-wrap{margin-top:4px}
/* Cash advances */
.upload.inline{display:inline-flex;gap:6px;align-items:center;margin-top:4px;flex-wrap:wrap}
.actions.tight{gap:4px;margin-top:4px}
.split.ca-split{grid-template-columns:minmax(0,1fr) minmax(0,2.2fr)} @media (max-width:900px){.split.ca-split{grid-template-columns:minmax(0,1fr)}}
/* TEMPORARY: role preview bar (test system only) */
.testbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px;padding:8px 12px;border-radius:8px;
  background:color-mix(in srgb, #f5b301 18%, var(--surface, #fff));border:1px dashed #c98f00;font-size:13px}
.testbar .tb-tag{font-weight:700;letter-spacing:.06em;font-size:11px;background:#c98f00;color:#fff;border-radius:4px;padding:2px 6px}
.testbar select{max-width:min(460px,100%)}
.testbar .tb-now{flex:1 1 280px;color:var(--ink-2)}

/* Purchase requests: narrow list, wide detail in cards */

.pr-stack>.detail{border:1px solid var(--line);border-radius:var(--r);padding:0 0 16px;background:var(--surface);gap:14px}
.pr-stack>.detail>.empty{padding:40px 16px}
.pr-stack>.detail>*:not(.dhead){margin:0 16px}
.pr-stack .dhead{gap:14px;padding:16px 16px 14px;border-bottom:1px solid var(--line)}
.pr-stack .dtitle{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pr-stack .dtitle h2{font-size:24px;font-family:var(--mono);letter-spacing:-.01em}
.pr-stack .dsub{font-size:16px;color:var(--ink);margin-top:2px}
.infogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px 0}
.infogrid .info{display:flex;flex-direction:column;gap:3px;padding:0 14px;border-left:1px solid var(--line);min-width:0}
.infogrid .info>span{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.infogrid .info b{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.infogrid .info.wide{grid-column:span 2}
.infogrid .info.total b{font-size:19px}
.nextline{font-size:14px;color:var(--ink-2)} .nextline b{color:var(--ink)}
.pr-stack>.detail>.subsec{border:1px solid var(--line);border-radius:var(--r);padding:14px;background:var(--surface-2)}
.pr-stack .actbox .actions .btn{min-width:150px}
@media (max-width:520px){.infogrid .info.wide{grid-column:auto}.pr-stack .dtitle h2{font-size:20px}}
.infogrid .info.total b,.infogrid .info.total b .mono{font-size:20px;font-weight:700}
.infogrid .info a{color:var(--jade)} .infogrid .info b .faint{font-weight:400}
.pr-stack tr.editing td{background:var(--warn-soft)}
.pr-stack tr.editing select{min-width:200px;max-width:260px}
.pr-stack tr.editing .edit-num{width:86px}
.pr-stack tr.editing td:nth-child(2){min-width:140px}
.pr-stack tr.editrow td{background:var(--warn-soft);border-top:0}
.pr-stack tr.editrow .inline-form{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;max-width:min(600px,calc(100vw - 140px));position:sticky;left:0}
.pr-stack tr.editrow .field.grow{flex:1 1 200px}
.pr-stack tfoot td{font-weight:600}

/* Request list above, details below, each full width */
.pr-stack{display:grid;gap:16px}
.prlist-panel{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:14px 16px;display:grid;gap:10px}
.panel-sub{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.panel-sub h3{font-size:16px}
.prtable{max-height:360px;overflow:auto;border:1px solid var(--line);border-radius:6px}
.prtable thead th{position:sticky;top:0;background:var(--surface-2);z-index:1}
.prtable td{vertical-align:top}
.prtable td.step{font-size:13px;color:var(--ink-2)}
.prtable .nowrap{white-space:nowrap}
.prtable tr.mine td:first-child{box-shadow:inset 4px 0 0 var(--warn)}
.prtable tr[aria-selected="true"] td{background:var(--jade-soft)}
.prtable tr[aria-selected="true"] td:first-child{box-shadow:inset 4px 0 0 var(--jade)}
/* Purchase order: supplier block (where to buy) */
.po-meta{color:var(--ink-2)}
.po-boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.po-box{border:1px solid var(--line);border-radius:6px;padding:10px 12px;background:var(--surface)}
.po-box.po-sup{border:2px solid var(--jade)}
.po-lbl{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.po-supname{font-size:18px;font-weight:700;margin:2px 0 6px}
.po-kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0}
.po-kv dt{color:var(--ink-3)} .po-kv dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.po-kv a{color:var(--jade)} .po-map{font-size:12px;margin-left:6px}
.po-kv .missing{font-weight:400;color:var(--warn);font-size:12px}
.po .chips{display:inline-flex;gap:6px;flex-wrap:wrap}
.po-issued{font-size:13px;color:var(--ok)}
.po-acks{font-size:13px;margin-top:-4px}
.po-issue{border:1px solid var(--line);border-radius:6px;padding:10px 12px;display:grid;gap:8px;background:var(--surface)}
.po-issue .row{display:flex;gap:10px;align-items:baseline}
.radio-row{border:0;padding:0;margin:6px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px}
.radio-row legend{font-size:13px;font-weight:600;margin-bottom:4px;padding:0}
.rc-table .rc-match{border:0;margin:0;padding:0;display:grid;gap:4px}
.rc-table .rc-match:disabled{opacity:.45}
.rc-table tr.on td{background:var(--jade-soft)}
.rc-table tr.rc-diff td{background:var(--warn-soft)}
.rc-table tr.rc-diff .inline-form{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.rc-table tr.rc-diff .field.grow{flex:1 1 240px}
.locked{display:inline-flex;align-items:center;gap:4px;color:var(--ink-2)}