:root{
  --bg:#f4f6f8; --card:#fff; --ink:#1c2530; --muted:#4d5763;
  --line:#e2e7ec; --brand:#0b6b5a; --brand2:#0e8a73; --bad:#c0392b; --ok:#0b6b5a;
}
*{box-sizing:border-box}
body{margin:0;font:15px/1.4 system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink)}
header{display:flex;align-items:center;gap:12px;padding:14px 22px;background:var(--brand);color:#fff}
header h1{font-size:18px;margin:0;font-weight:600}
/* The mark and the title are one thing, and one link home. The leaf is white
   on the brand bar, so logo-mark.svg carries its own fill -- an <img> cannot
   inherit currentColor from the page around it. */
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit}
.brand img{display:block;flex:none}
.brand:hover h1{text-decoration:underline}
.login-logo{display:block;margin:0 auto 12px}
.pill{font-size:12px;padding:3px 10px;border-radius:20px;background:rgba(255,255,255,.2)}
.pill.ok{background:#0a5}.pill.bad{background:#c0392b}
main{max-width:1080px;margin:18px auto;padding:0 16px;display:flex;flex-direction:column;gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px}
h2{font-size:15px;margin:0 0 10px}
.grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px}
.field{position:relative;display:flex;flex-direction:column;gap:5px}
label{font-size:12px;color:var(--muted)}
.sub, p.sub{color:var(--muted);font-size:12.5px;margin:-2px 0 12px;line-height:1.45}
input{padding:8px 10px;border:1px solid var(--line);border-radius:7px;font:inherit;width:100%;transition:border-color .15s,box-shadow .15s,background-color .15s}
input:focus{outline:2px solid var(--brand2);border-color:var(--brand2)}
.dropdown{position:absolute;top:100%;left:0;right:0;z-index:9;background:#fff;border:1px solid var(--line);
  border-radius:7px;box-shadow:0 8px 24px rgba(0,0,0,.1);max-height:260px;overflow:auto}
.opt{padding:8px 10px;cursor:pointer;border-bottom:1px solid var(--line);font-size:13px}
.opt:hover{background:#eef7f4}
.chosen{margin-top:6px;font-size:13px;color:var(--brand);font-weight:600}
.hidden{display:none}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left}
th{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.num{text-align:right}
td input{padding:5px 7px}
td input.code{width:120px;text-transform:uppercase}
td input.qty{width:70px}
.sn{color:var(--muted)}
.totals{display:flex;justify-content:flex-end;gap:26px;padding:12px 4px 4px;font-size:14px}
.totals b{margin-left:6px}
.totals .grand{font-size:17px;font-weight:700;color:var(--brand)}
.actions{display:flex;align-items:center;gap:12px;margin-top:10px}
button{font:inherit;padding:8px 16px;border-radius:7px;border:1px solid var(--line);cursor:pointer;background:#fff}
button.primary{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:600}
button.primary:hover{background:var(--brand2)}
button.ghost{background:#fff;color:var(--muted)}
.del{padding:3px 9px}
#saveMsg.ok{color:var(--ok);font-weight:600}
#saveMsg.bad{color:var(--bad);font-weight:600}
#saveMsg.warn{color:#8a6100;font-weight:600}
@media(max-width:720px){.grid{grid-template-columns:1fr}table{font-size:12px}}

/* auth */
.user{font-size:13px;opacity:.9;margin-left:12px}
.logout{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.4);
  padding:5px 12px;font-size:13px}
.logout:hover{background:rgba(255,255,255,.28)}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.login-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:30px 28px;
  width:320px;display:flex;flex-direction:column;box-shadow:0 12px 40px rgba(0,0,0,.08)}
.login-card h1{color:var(--brand);font-size:20px;margin:0}
.login-card .sub{color:var(--muted);font-size:13px;margin:4px 0 18px}
.login-card label{margin:10px 0 4px}
.login-card button{margin-top:18px}
#err{margin-top:10px;font-size:13px;min-height:16px}

/* code suggestions dropdown — one line per batch.
   `right` from .dropdown must be cleared or the panel stretches to the page
   edge. Column widths come from a colgroup measured against the widest value
   in the data (see measureColumns in app.js), so they are the same on every
   search; only Medicine is capped, and it scrolls inside its own cells. */
.code-drop{position:absolute;right:auto;z-index:60;max-height:340px;overflow:auto;
  width:max-content;max-width:96vw;font-size:13px}
/* fixed layout: the colgroup widths measured from the data are authoritative,
   so every column is identical on every search and nothing is truncated */
.code-drop .sug-table{table-layout:fixed;border-collapse:collapse}
.code-drop .sug-table th{position:sticky;top:0;z-index:2;background:#eef2f4;
  border-bottom:1px solid var(--line);font-size:11px;text-transform:uppercase;
  letter-spacing:.03em;color:var(--muted);font-weight:700;padding:6px 10px;
  text-align:left;white-space:nowrap}
.code-drop .sug-table td{padding:6px 10px;border-bottom:1px solid var(--line);
  white-space:nowrap;vertical-align:middle}
.code-drop tr.sug{cursor:pointer}
.code-drop tr.sug:hover td{background:#eef7f4}
.code-drop .c-code{font-weight:700;color:var(--brand);text-transform:uppercase;font-size:12px;
  letter-spacing:.02em}
.code-drop .c-name{color:var(--ink);padding-right:0}
/* only the medicine name scrolls; the cells scroll in sync (see app.js) so the
   column moves as one. A thin bar appears only on names that overflow. */
.code-drop .cellscroll{overflow-x:auto;overflow-y:hidden;white-space:nowrap;
  scrollbar-width:thin;padding-bottom:1px}
.code-drop .cellscroll::-webkit-scrollbar{height:5px}
.code-drop .cellscroll::-webkit-scrollbar-thumb{background:#c3ccd4;border-radius:3px}
.code-drop .c-batch{font-size:12px;color:#3a4652}
.code-drop .c-inv{font-size:12px;color:#8a6d3b}
.code-drop .c-meta{font-size:12px;color:var(--muted)}
.code-drop .c-mrp{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.code-drop .stk{text-align:right;font-weight:700}
.code-drop .stk.in{color:var(--brand)}
.code-drop .stk.out{color:var(--bad)}

/* nav + admin pages */
.nav{display:flex;gap:4px;margin-left:18px}
.nav a{color:#fff;text-decoration:none;font-size:13px;padding:6px 12px;border-radius:6px;opacity:.85}
.nav a:hover{background:rgba(255,255,255,.15);opacity:1}
.nav a.active{background:rgba(255,255,255,.22);opacity:1;font-weight:600}
.filters{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.filters .field{flex:0 0 auto}
.filters .field input{width:170px}
.filters .field input[type=date]{width:150px}
.filters button{white-space:nowrap;align-self:flex-end}
.summary{margin:12px 0;font-size:14px;color:var(--muted);font-weight:600}
.chk{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}
.chk input{width:auto}
td input{width:100%}
td input.code{width:90px}

/* stock / history / resources */
/* A batch with nothing left reads as spent -- but it is not disabled, and it
   can still be archived or edited. Fading the whole row with opacity dragged
   its buttons down with it, so Archive looked dead when it was always live.
   Only the text fades now; the controls keep their own colours. */
.outrow td{color:#667382}
.outrow td b{color:#667382}
.outrow .edit{color:var(--ink)}
.tag{font-size:11px;background:#eef2f4;color:var(--muted);padding:2px 7px;border-radius:5px}
.nochange{font-size:12px;color:var(--muted)}
.meter{margin:14px 0}
.meter-top{display:flex;justify-content:space-between;font-size:14px;margin-bottom:5px}
.meter-top em{color:var(--muted);font-style:normal}
.bar{height:12px;background:#eef2f4;border-radius:7px;overflow:hidden}
.fill{height:100%;border-radius:7px;transition:width .4s}
.fill.lo{background:var(--brand)}.fill.mid{background:#e0a500}.fill.hi{background:var(--bad)}
.meter-sub{font-size:12px;color:var(--muted);margin-top:3px}

/* object explorer context menu */
.ctxmenu{position:absolute;z-index:100;background:#fff;border:1px solid var(--line);
  border-radius:8px;box-shadow:0 8px 28px rgba(0,0,0,.16);min-width:150px;overflow:hidden;padding:4px 0}
.ctxmenu div{padding:8px 14px;font-size:13px;cursor:pointer}
.ctxmenu div:hover{background:#eef7f4}
.ctxmenu div.danger{color:var(--bad)}
.ctxmenu div.danger:hover{background:#fdecea}


/* cloud resources link on the right */
.nav-cloud{margin-left:auto;color:#fff;text-decoration:none;font-size:13px;font-weight:600;
  padding:6px 12px;border-radius:6px;background:rgba(255,255,255,.15)}
.nav-cloud:hover{background:rgba(255,255,255,.28)}
.nav-cloud.active{background:rgba(255,255,255,.32)}

/* ---- responsive / mobile ---- */
.burger{display:none;background:transparent;border:none;color:#fff;font-size:24px;
  cursor:pointer;line-height:1;padding:2px 8px}
@media(max-width:820px){
  header{flex-wrap:wrap;position:relative;padding:12px 16px}
  .burger{display:block;margin-left:auto}
  .nav,.nav-cloud,.user,.logout,#health{display:none}
  header.menu-open{padding-bottom:8px}
  header.menu-open .nav{display:flex;flex-direction:column;gap:2px;width:100%;margin:8px 0 0}
  header.menu-open .nav a{padding:11px 10px;border-radius:6px;font-size:15px}
  header.menu-open .nav-cloud{display:block;width:100%;margin:6px 0 0;text-align:left;padding:11px 12px}
  header.menu-open .user{display:block;width:100%;margin:8px 0 0;opacity:.8}
  header.menu-open .logout{display:block;width:100%;margin:6px 0 0;text-align:center;padding:11px}
  /* wide tables scroll inside their card on phones */
  .card{overflow-x:auto}
  main{padding:0 10px}
  .grid{grid-template-columns:1fr}
  h1{font-size:16px}
  input,button,td input{font-size:16px}  /* prevents iOS zoom on focus */
  table{min-width:560px}
  .code-drop .sug-table{min-width:0}
  .totals{flex-wrap:wrap;gap:14px}
}
@media(max-width:820px){ .filters{flex-direction:column;align-items:stretch} .filters .field{min-width:0} }

/* radios + select */
.radios{display:flex;gap:16px;align-items:center;padding-top:6px}
.radios label{display:flex;align-items:center;gap:5px;font-size:14px;color:var(--ink);cursor:pointer}
.radios input{width:auto}
select{padding:8px 10px;border:1px solid var(--line);border-radius:7px;font:inherit;width:100%;background:#fff}
select:focus{outline:2px solid var(--brand2);border-color:var(--brand2)}

/* extension page */
.dlbtn{display:inline-block;background:var(--brand);color:#fff;text-decoration:none;
  padding:10px 18px;border-radius:8px;font-weight:600}
.dlbtn:hover{background:var(--brand2)}
.steps{line-height:1.9;padding-left:20px}
.steps code{background:#eef2f4;padding:1px 6px;border-radius:4px;font-size:13px}
h3{font-size:14px;margin:18px 0 6px}


/* invoice submitted status */
/* archive / restore on the invoices list */
button.archive,button.restore{font-size:12px;padding:3px 10px;border-radius:6px;
  border:1px solid var(--line);background:#fff;cursor:pointer}
button.archive{color:var(--bad)}
button.archive:hover{background:#fdecea;border-color:var(--bad)}
button.restore{color:var(--brand);font-weight:600}
button.restore:hover{background:#e6f4ef;border-color:var(--brand)}
button.archive:disabled,button.restore:disabled{opacity:.5;cursor:default}
/* the bin is a different place, not just a filter - tint it so that is obvious */
#list.binview tbody tr,#recent.binview tbody tr{background:#fcfcfa}
#list.binview tbody td,#recent.binview tbody td{color:var(--muted)}
#list.binview tbody td a b,#recent.binview tbody td a b{color:var(--ink)}

/* SIMS capture panel on the invoice detail view */
.simsbox{margin-top:18px;padding:14px 16px;border:1px solid var(--line);
  border-radius:10px;background:#fafbfc}
.simsbox.empty{color:var(--muted);font-size:13px;background:none}
.simsbox h3{margin:0 0 4px}
.simsbox h3 .sub{margin:0;font-weight:400}
.simsgroup{font-size:11px;text-transform:uppercase;letter-spacing:.03em;
  color:var(--muted);font-weight:700;margin:14px 0 6px;
  padding-bottom:4px;border-bottom:1px solid var(--line)}
.simsgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:8px 18px;margin:0}
.simscell dt{font-size:11px;color:var(--muted);margin:0}
.simscell dd{margin:1px 0 0;font-size:13.5px;color:var(--ink);
  word-break:break-word;line-height:1.35}
@media(max-width:560px){ .simsgrid{grid-template-columns:1fr} }

.badge{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;font-weight:600}
.badge.submitted{background:#e6f4ef;color:#0b6b5a}
.badge.draft{background:#f0f2f4;color:#6b7785}
tr.done{background:#fafcfb}


/* editable stock rows */
tr.editing{background:#fff8e6}
tr.editing input{padding:4px 6px;font-size:13px}
.edit{padding:2px 10px;font-size:12px;background:#fff;border:1px solid var(--line);border-radius:5px;cursor:pointer}
.edit:hover{border-color:var(--brand);color:var(--brand)}
.save{padding:3px 11px;font-size:12px;background:var(--brand);color:#fff;border:none;border-radius:5px;cursor:pointer}
.cancel{padding:3px 8px;font-size:12px;background:#fff;border:1px solid var(--line);border-radius:5px;cursor:pointer}

input[readonly]{background:#f4f6f8;color:#6b7785}

/* stock: next-code hint + sortable headers */
.nexthint{color:var(--brand);font-weight:600}
#list thead th[data-col]{cursor:pointer;user-select:none}
#list thead th[data-col]:hover{color:var(--brand)}
#list thead th.sort-asc::after{content:" ▲";font-size:10px}
#list thead th.sort-desc::after{content:" ▼";font-size:10px}

/* purchases list: edit/delete + sortable headers */
#recent thead th[data-col],#files thead th[data-col]{cursor:pointer;user-select:none}
#recent thead th[data-col]:hover,#files thead th[data-col]:hover{color:var(--brand)}
#recent thead th.sort-asc::after,#files thead th.sort-asc::after{content:" ▲";font-size:10px}
#recent thead th.sort-desc::after,#files thead th.sort-desc::after{content:" ▼";font-size:10px}
.p-edit{padding:2px 10px;font-size:12px;background:#fff;border:1px solid var(--line);border-radius:5px;cursor:pointer}
.p-edit:hover{border-color:var(--brand);color:var(--brand)}
.p-save{padding:3px 11px;font-size:12px;background:var(--brand);color:#fff;border:none;border-radius:5px;cursor:pointer}
.p-cancel{padding:3px 8px;font-size:12px;background:#fff;border:1px solid var(--line);border-radius:5px;cursor:pointer}
.rowhint{font-size:11px;color:var(--brand);font-weight:600;margin-top:2px}

/* history: per-row change detail */
.expand{padding:2px 10px;font-size:12px;background:#fff;border:1px solid var(--line);
  border-radius:5px;cursor:pointer;color:var(--brand);font-weight:600;white-space:nowrap}
.expand:hover{border-color:var(--brand);background:#eef7f4}
tr.detail{background:#fafcfb;font-size:12px}
tr.detail td{padding:4px 8px;border-bottom:1px dotted var(--line);color:#3a4652}
tr.detail .tag{font-size:10px}
tr.detail.skipped td{color:var(--bad)}
.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;color:var(--muted)}
.who-sys{font-size:12px;color:var(--muted);background:#eef2f4;padding:2px 7px;border-radius:5px;font-weight:600}

/* history: recorded before/after vs the value now */
.statetbl{width:auto;margin:5px 0 2px;font-size:11px;border-collapse:collapse}
.statetbl th{text-transform:none;letter-spacing:0;font-size:11px;color:var(--muted);
  font-weight:600;text-align:left;padding:1px 10px 1px 0;border:none}
.statetbl td{padding:1px 8px 1px 0;border:none}
.statetbl .was{color:var(--muted)}
.statetbl .arrow{color:var(--muted);padding:0 2px}
.statetbl .became{font-weight:600;color:var(--ink)}
.statetbl .now{color:var(--muted)}
.statetbl .now.moved{color:var(--bad);font-weight:600}
.statenote{font-size:11px;color:var(--bad);margin-top:4px}

/* inline hint under a field (e.g. TID -> SIMS capture) */
.hint{font-size:12px;color:var(--muted);margin-top:3px;min-height:15px}
.hint.ok{color:var(--brand);font-weight:600}

/* note callout box */
.note-box{display:flex;align-items:flex-start;gap:9px;background:#eef7f4;border:1px solid #cce5de;
  border-left:3px solid var(--brand);border-radius:6px;padding:9px 12px;margin:0 0 14px;
  font-size:12.5px;line-height:1.45;color:#174239}
.note-ico{flex:0 0 auto;margin-top:2px;color:var(--brand)}

/* compulsory fields & validation */
.req{color:var(--bad);font-weight:700;font-size:12px;margin-left:2px;vertical-align:baseline}
input.invalid, select.invalid{border-color:#d9534f;background:#fffafa;box-shadow:0 0 0 1px #d9534f inset}
input.invalid:focus, select.invalid:focus{outline:2px solid rgba(217,83,79,.35);border-color:#d9534f}

/* receipt capture sheet (built for a phone first) */
.rc-back{position:fixed;inset:0;z-index:200;background:rgba(20,28,36,.55);
  display:flex;align-items:flex-end;justify-content:center}
.rc-sheet{position:relative;background:#fff;width:100%;max-width:640px;max-height:92vh;min-height:70vh;
  border-radius:14px 14px 0 0;display:flex;flex-direction:column;
  box-shadow:0 -8px 34px rgba(0,0,0,.28)}
@media(min-width:641px){ .rc-back{align-items:center} .rc-sheet{border-radius:14px} }
.rc-head{display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--line)}
.rc-head b{flex:1;font-size:15px}
.rc-count{font-size:12px;color:var(--muted)}
.rc-x{padding:4px 10px;border:none;background:none;font-size:18px;color:var(--muted);cursor:pointer}
.rc-pages{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-wrap:wrap;gap:12px;
  align-content:flex-start;min-height:140px}
.rc-empty{width:100%;margin:0}
.rc-thumb{position:relative;width:104px}
.rc-thumb img{width:104px;height:138px;object-fit:cover;border-radius:8px;
  border:1px solid var(--line);display:block;background:#f4f6f8}
.rc-no{position:absolute;left:5px;top:5px;background:rgba(20,28,36,.72);color:#fff;
  font-size:11px;font-weight:700;padding:1px 7px;border-radius:10px}
.rc-del{position:absolute;right:4px;top:4px;width:24px;height:24px;padding:0;
  border-radius:50%;border:none;background:rgba(20,28,36,.72);color:#fff;
  font-size:13px;line-height:24px;cursor:pointer}
.rc-msg{padding:0 16px;font-size:13px;color:var(--muted);min-height:18px}
.rc-foot{display:flex;gap:10px;padding:14px 16px;border-top:1px solid var(--line)}
.rc-foot button{flex:1;padding:13px 16px;font-size:15px}   /* thumb-sized targets */
.rc-save{font-weight:600}
.rc-save:disabled{opacity:.45;cursor:default}

/* receipt column on the purchases list */
.rcell{white-space:nowrap}
.pgbadge{display:inline-block;font-size:11px;padding:2px 7px;border-radius:10px;
  background:#e6f4ef;color:var(--brand);font-weight:600}
.pgbadge.wait{background:#fdf3e0;color:#8a6d3b}
.ocrstat{margin:0 0 0 4px;align-self:center;white-space:nowrap}

/* rotate / crop editor inside the capture sheet */
.rc-thumb{padding-bottom:26px}
.rc-edit{position:absolute;left:0;right:0;bottom:0;padding:4px 0;font-size:11px;
  border:1px solid var(--line);border-radius:0 0 8px 8px;background:#f4f6f8;
  color:var(--muted);cursor:pointer;width:104px}
.rc-edit:hover{background:#eef7f4;color:var(--brand)}
.rc-editor{position:absolute;inset:0;background:#fff;z-index:5;display:flex;
  flex-direction:column;border-radius:14px}
.rc-edhead{display:flex;gap:10px;align-items:baseline;padding:14px 16px;
  border-bottom:1px solid var(--line)}
.rc-edhead .sub{margin:0}
.rc-stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;
  background:#1c2530;overflow:hidden;padding:10px}
.rc-canvas{max-width:100%;display:block;touch-action:none}
.rc-crop{position:absolute;border:2px solid #fff;box-shadow:0 0 0 9999px rgba(20,28,36,.5);
  touch-action:none;cursor:move}
.rc-crop i{position:absolute;width:26px;height:26px;background:#fff;border-radius:50%;
  border:2px solid var(--brand);touch-action:none}
.rc-crop i[data-h=nw]{left:-13px;top:-13px;cursor:nwse-resize}
.rc-crop i[data-h=ne]{right:-13px;top:-13px;cursor:nesw-resize}
.rc-crop i[data-h=sw]{left:-13px;bottom:-13px;cursor:nesw-resize}
.rc-crop i[data-h=se]{right:-13px;bottom:-13px;cursor:nwse-resize}
.rc-edfoot{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.rc-edfoot button{flex:1;padding:12px 8px;font-size:15px}
.rc-rot{font-size:20px;line-height:1}

/* "what did OCR read" viewer */
.rc-view{flex:1;overflow-y:auto;padding:14px 16px}
.rcv-page{border:1px solid var(--line);border-radius:10px;margin-bottom:14px;overflow:hidden}
.rcv-head{display:flex;align-items:center;gap:10px;padding:9px 12px;background:#fafbfc;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.rcv-head .sub{margin:0}
.ocrchip{font-size:11px;font-weight:700;padding:2px 9px;border-radius:10px}
.ocrchip.ok{background:#e6f4ef;color:var(--brand)}
.ocrchip.wait{background:#fdf3e0;color:#8a6d3b}
.ocrchip.bad{background:#fdecea;color:var(--bad)}
.rcv-body{display:flex;gap:14px;padding:12px;flex-wrap:wrap}
.rcv-img{width:190px;border:1px solid var(--line);border-radius:8px;display:block}
.rcv-side{flex:1;min-width:220px}
.rcv-fields h4{margin:0 0 6px;font-size:11px;text-transform:uppercase;
  letter-spacing:.03em;color:var(--muted)}
.rcv-fields h4 .sub{text-transform:none;letter-spacing:0;font-weight:400;margin-left:5px}
.rcv-fields dl{margin:0 0 10px;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:7px 16px}
.rcv-fields dt{font-size:11px;color:var(--muted)}
.rcv-fields dd{margin:1px 0 0}
.rcv-fields code{font-size:12.5px;background:#eef2f4;padding:1px 6px;border-radius:4px;
  word-break:break-all}
.rc-toggle{font-size:12px;padding:4px 12px}
.rcv-side pre{margin:9px 0 0;padding:10px;background:#f4f6f8;border-radius:8px;
  font-size:12px;line-height:1.45;max-height:280px;overflow:auto;white-space:pre-wrap;
  word-break:break-word}
@media(max-width:560px){ .rcv-img{width:100%} }
.rcv-del{margin-left:auto;font-size:12px;padding:4px 11px;color:var(--bad);
  border:1px solid var(--line);border-radius:6px;background:#fff;cursor:pointer}
.rcv-del:hover:not(:disabled){background:#fdecea;border-color:var(--bad)}
.rcv-del:disabled{opacity:.55;cursor:default}

/* three-button row menu */
.rc-menu{position:absolute;z-index:210;background:#fff;border:1px solid var(--line);
  border-radius:9px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:5px 0;min-width:190px}
.rc-mi{padding:10px 16px;font-size:14px;cursor:pointer;white-space:nowrap}
.rc-mi:hover{background:#eef7f4}
.rc-mi.off{opacity:.35;cursor:default}
.rc-mi.off:hover{background:none}
button.p-scan,button.p-view,button.p-del2{padding:4px 12px;font-size:12.5px}
button.p-scan{color:var(--brand);font-weight:600}
button.p-del2{color:var(--bad)}
button.p-view:disabled,button.p-del2:disabled{opacity:.35;cursor:default;color:var(--muted)}

/* delete picker */
.rc-picklist{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.rc-pick1{display:flex;align-items:center;gap:12px;padding:8px;border:1px solid var(--line);
  border-radius:9px;cursor:pointer}
.rc-pick1:hover{background:#fafbfc}
.rc-pick1 input{width:20px;height:20px;flex:0 0 auto}
.rc-pick1 img{width:56px;height:74px;object-fit:cover;border-radius:6px;
  border:1px solid var(--line);background:#f4f6f8}
.rc-pick1 small{font-size:11px}
.rc-nuke{color:var(--bad);font-weight:600}
.rc-nuke:disabled,.rc-all:disabled{opacity:.4;cursor:default}
.ocrchip.run{background:#e7f0fb;color:#1c5fa8}
.ocrstat.busy{color:#8a6d3b;font-weight:600}

/* cloud map: what exists, and what is moving between it */
.graphwrap{overflow-x:auto;margin:6px 0 10px}
.cloudmap{width:100%;min-width:720px;height:auto;display:block}
.cloudmap .nbox{fill:#fff;stroke-width:1.5}
.cloudmap .nlabel{font:600 14px system-ui;fill:var(--ink)}
.cloudmap .nsub{font:11.5px system-ui;fill:var(--muted)}
.cloudmap .nmeta{font:11px system-ui;fill:var(--muted)}
.cloudmap .dot{stroke:#fff;stroke-width:1.5}
.cloudmap .dot.on{fill:#0b6b5a}
.cloudmap .dot.warn{fill:#e0a500}
.cloudmap .dot.off{fill:#c3ccd4}
.cloudmap .wire{fill:none;stroke:#dbe2e8;stroke-width:2}
.cloudmap .edge.live .wire{stroke:#bfe0d6}
/* the moving dash is the whole point: a still line means a still link */
.cloudmap .pulse{fill:none;stroke:var(--brand);stroke-width:2.5;
  stroke-dasharray:7 15;stroke-linecap:round;animation:flow 1.1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-44}}
.cloudmap .elabel{font:10.5px system-ui;fill:var(--muted);text-anchor:middle}
.cloudmap .elabel.live{fill:var(--brand);font-weight:600}
.legend{display:flex;flex-wrap:wrap;gap:16px;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;vertical-align:middle;margin-right:5px}
.legend i.dot{width:9px;height:9px;border-radius:50%}
.legend i.dot.on{background:#0b6b5a}.legend i.dot.warn{background:#e0a500}
.legend i.dot.off{background:#c3ccd4}
.legend i.wirekey{width:22px;height:2px;background:#dbe2e8}
.legend i.wirekey.live{background:var(--brand)}
@media(prefers-reduced-motion:reduce){.cloudmap .pulse{animation:none}}

/* a PDF queued for splitting, sitting alongside the photographed pages */
.rc-pdf{display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;
  border:1px solid var(--line);border-radius:8px;background:#fafbfc}
.rc-pdficon{font-size:11px;font-weight:700;letter-spacing:.4px;padding:3px 8px;
  border-radius:5px;background:#fdecea;color:var(--bad)}
.rc-pdfname{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:46%}
.rc-pdf .sub{margin:0}
.rc-delpdf{margin-left:auto;width:24px;height:24px;padding:0;border-radius:50%;
  border:none;background:rgba(20,28,36,.72);color:#fff;font-size:13px;
  line-height:24px;cursor:pointer}

/* a PDF has no thumbnail, so its tile stands in for one */
.rcv-pdf{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;width:120px;height:150px;border:1px solid var(--line);border-radius:8px;
  background:#fafbfc;font-weight:700;color:var(--bad);font-size:15px}
.rcv-pdf small{font-weight:600;color:var(--muted);font-size:11px}

/* download the file exactly as it was uploaded.
   The meta line does the pushing so the buttons stay grouped at the right. */
.rcv-head .sub{margin:0 auto 0 0}
.rcv-head .rcv-del{margin-left:0}
.rcv-dl{font-size:12px;font-weight:600;text-decoration:none;
  padding:3px 9px;border-radius:10px;background:#e6f4ef;color:var(--brand);
  white-space:nowrap}
.rcv-dl:hover{background:#d7ece4}
.rcv-dl.alt{background:#eef1f5;color:var(--muted)}
.rcv-dl.alt:hover{background:#e2e7ee;color:var(--ink)}
.ctxmenu div.hidden{display:none}

/* the table OCR found on a page, shown beside the transcript */
.rcv-tablewrap{margin:10px 0 4px}
.rcv-tablewrap h4{margin:0 0 6px;font-size:13px}
.rcv-tables{max-height:340px;overflow:auto;border:1px solid var(--line);border-radius:8px}
.rcv-table{border-collapse:collapse;font-size:11px;width:max-content;min-width:100%}
.rcv-table td{border:1px solid var(--line);padding:3px 6px;vertical-align:top;
  white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.rcv-table tr:first-child td{background:#fafbfc;font-weight:600;position:sticky;top:0}
.rcv-table tr:nth-child(even) td{background:#fcfdfe}

/* pagination bar under a list table */
.pager{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:9px 2px 2px;font-size:12px;color:var(--muted)}
.pager.hidden{display:none}
.pg-nav{display:inline-flex;align-items:center;gap:4px}
.pager button{min-width:28px;padding:3px 8px;font-size:12px;line-height:18px}
.pager button:disabled{opacity:.4;cursor:default}
.pg-where{padding:0 6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pg-count{font-variant-numeric:tabular-nums}
.pg-size{margin-left:auto;display:inline-flex;align-items:center;gap:6px}
.pg-size select{padding:3px 6px;font-size:12px}

/* sortable headings and the per-column filter row (TableKit) */
thead th.sortable{cursor:pointer;user-select:none}
thead th.sortable:hover{color:var(--brand)}
thead th.sort-asc::after{content:" ▲";font-size:10px}
thead th.sort-desc::after{content:" ▼";font-size:10px}
tr.colfilters th{padding:3px 4px 5px;background:#fafbfc;border-bottom:1px solid var(--line)}
tr.colfilters input{width:100%;min-width:44px;box-sizing:border-box;padding:3px 6px;
  font-size:11px;font-weight:400;border:1px solid var(--line);border-radius:5px;
  background:#fff}
tr.colfilters input:focus{outline:none;border-color:var(--brand)}

/* per-line link back to the purchase receipt, on the invoice detail */
td.rcpts{white-space:nowrap}
td.rcpts .pinv{display:inline-block;margin-right:6px;font-size:11px;font-weight:600;
  color:var(--muted)}
td.rcpts a{display:inline-block;margin-right:4px;padding:1px 7px;border-radius:9px;
  font-size:11px;font-weight:600;text-decoration:none;background:#e6f4ef;color:var(--brand)}
td.rcpts a:hover{background:#d7ece4}
td.rcpts a.alt{background:#eef1f5;color:var(--muted)}
td.rcpts a.alt:hover{background:#e2e7ee;color:var(--ink)}
td.rcpts .pinv.approx{color:#8a6d3b;border-bottom:1px dotted #c9a227;cursor:help}

/* folder view on the Files page */
.crumb{font-size:13px;margin:0 0 8px;color:var(--muted)}
.crumb a{color:var(--brand);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb .sep{margin:0 6px;opacity:.6}
tr.folder{cursor:pointer}
tr.folder:hover td{background:#f2f7f5}
tr.folder td:first-child{font-weight:600}
tr.folder .fico{margin-right:8px}
tr.folder .sub{margin-left:8px;font-weight:400}

/* ---- table rules, darkened -------------------------------------------------
   The grid was #e2e7ec, which is nearly invisible against a white card and
   makes a thirteen-column stock table hard to read across. Rows now get a
   clearly darker rule, the last header row a heavier one so the headings read
   as a block, and columns a lighter vertical so a wide table can be scanned
   sideways without the whole thing looking like a cage. */
:root{--grid:#c2ccd7; --grid-strong:#8f9dab; --grid-soft:#dbe2e9}

table{border:1px solid var(--grid)}
th,td{border-bottom:1px solid var(--grid)}
/* whichever header row is last carries the heavy rule, so a table with a
   filter row under its headings gets one separator rather than two */
thead tr:last-child th{border-bottom:2px solid var(--grid-strong)}
thead th{background:#f6f8fa}
tbody td + td, thead th + th{border-left:1px solid var(--grid-soft)}
tbody tr:last-child td{border-bottom:none}

/* the filter row sits inside the header block, so it keeps the header tint
   and hands the heavy rule to itself as the last row */
tr.colfilters th{background:#f6f8fa;border-bottom:2px solid var(--grid-strong)}

/* small inline tables are not grids and should not be boxed, and the OCR
   table already sits inside a bordered scroll box -- a second frame on the
   table itself would double the line */
.statetbl,.code-drop .sug-table,.rcv-table{border:none}
.statetbl td,.statetbl th{border-left:none}
.badge.rejected{background:#fdecea;color:var(--bad)}

/* a rejected invoice says so across the whole panel, not just in a badge */
#detail{position:relative}
#detail.rejected{background:linear-gradient(0deg,#fff9f8,#fff9f8),var(--card);
  border-color:#f0c8c2}
.rejstamp{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%) rotate(-18deg);
  font-size:clamp(48px,11vw,110px);font-weight:800;letter-spacing:.06em;
  color:rgba(192,57,43,.16);border:6px solid rgba(192,57,43,.16);border-radius:12px;
  padding:4px 26px;pointer-events:none;user-select:none;white-space:nowrap;z-index:1}
@media print{.rejstamp{color:rgba(192,57,43,.4);border-color:rgba(192,57,43,.4)}}

/* cells on the invoice line that the stock lookup fills but the operator may
   complete or correct -- a batch with no expiry recorded should not stop a bill */
td.edit-cell{cursor:text}
td.edit-cell:hover{background:#f7fafc}
td.edit-cell:focus{outline:2px solid var(--brand2);outline-offset:-2px;background:#fff}
td.edit-cell.needs{background:#fdf6e3;box-shadow:inset 0 -2px 0 #e0b34d}
td.edit-cell.needs:focus{box-shadow:none}
/* a quantity that goes past the recorded stock — cautioned in the same amber
   as a field that still needs typing, because neither is an error */
td input.qty.over{background:#fdf6e3;border-color:#e0b34d}
td input.qty.over:focus{outline-color:#e0b34d}
.stock-note{color:#8a6100;font-size:12.5px;font-weight:600}

/* Browsers draw placeholder text far lighter than any colour set here, which
   is what makes an empty field look empty rather than optional. */
input::placeholder, textarea::placeholder{color:#6b7785;opacity:1}
/* a column filter answered by the server rather than in the browser */
tr.colfilters input.server-filter{background:#f3f8ff;border-color:#b9cfe8}
tr.colfilters input.server-filter:focus{border-color:var(--brand)}