/* ⛔ THIS FILE'S OWN `:root` IS GONE — 11-Sep-2026, with the kiosk redesign.
   It used to open with a complete dark-only palette (`--bg:#0b1220; --panel:#131c2e; --txt:#e8eefc`
   …), and because index.html loads theme.css FIRST and this file second, that block simply
   outranked the shared palette. That is the whole reason the shop floor was the one surface in the
   product that could not follow a theme: not a decision, a load order.

   Every name it defined now lives in theme.css as an alias onto a canonical token, so this file
   inherits light-as-base and the dark override for free, and `--muted` means the same grey here as
   it does in HR.

   ⛔ WHAT DID NOT MOVE, AND WHY. The six `--role-*` colours below are IDENTITY, not theme — they
   tell a supervisor at a glance which kind of person is signed in, and they must look the same in
   every light. theme.css has no canonical equivalent and should not grow one. */
:root{
  /* per-role identity colors — topbar badge + role-aware UI (R2+) */
  --role-operator:#3b82f6; --role-supervisor:#f59e0b; --role-warehouse:#22d3ee;
  --role-qc:#fb7185; --role-admin:#a78bfa; --role-planner:#2dd4bf;
}
/* floating build-version badge — fixed top-right on every screen, never blocks taps */
/* Build badge lives BOTTOM-LEFT, not top-right. Top-right is where every screen keeps its live
   controls, and a fixed z-index:9999 chip was sitting on top of them: it covered the supervisor's
   "📍 Line-1" (the one thing §1.4.0 tells you to check), the "🖨️ Print" button on Pallet labels,
   and "Logout" on Label Print. Bottom-left is empty on every screen (#float-print is bottom-right).
   It is also hidden on the landing page, where the build is already printed in words as
   "Ready · Taiyaar · <build>" — one number, one place. */
#ver-badge{position:fixed;bottom:8px;left:8px;top:auto;right:auto;z-index:9999;pointer-events:none;
  /* ⛔ opacity:.75 AUR ek faint ink — ek hi kaam do baar, aur milkar AA se neeche. Badge chup
     rehna chahiye, padha na jaane layak nahi: opacity gayi, ink ek daraja gehra. */
  font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.4px;
  /* ⛔ background aur border hardcoded DARK the — light me ye pill kaali reh jaati thi aur uspar
     --muted 2.73:1 par aa jaata tha. Ab dono token se, to pill har theme me apne page ki hai. */
  color:var(--ink-3);background:var(--sunk);border:1px solid var(--line);
  border-radius:7px;padding:4px 7px}
body.on-landing #ver-badge{display:none}
.lk-item{display:block;width:100%;text-align:left;margin:8px 0;padding:16px 18px;font-size:17px;
  background:var(--panel2);border:1px solid var(--line);border-radius:12px;color:var(--txt);cursor:pointer}
.lk-item:active{transform:scale(.99)} .lk-item[disabled]{opacity:.5}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
/* ⛔ background/color yahan se hata diye (11-Sep). theme.css ka `html{background:var(--bg);
   color:var(--ink)}` pehle se hi ye kaam karta hai, aur yahan dobara likhna wahi cheez hai jo ek
   page ko theme se ladne deti hai. Font aur size kiosk ke apne hain — wo rahenge. */
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:17px;line-height:1.4}
.hidden{display:none !important}
.muted{color:var(--muted)} .small{font-size:13px} .center{text-align:center}
h1{font-size:26px;margin:0} h2{font-size:22px;margin:0 0 16px}
.err{color:var(--fail);font-weight:600;text-align:center}

button{font:inherit;border:0;border-radius:var(--r-md);padding:13px 18px;font-weight:600;cursor:pointer;transition:.14s ease}
button:active{transform:scale(.97)}
button:focus-visible{outline:none;box-shadow:var(--focus)}
button:disabled,button[disabled]{opacity:.4;cursor:not-allowed;filter:saturate(.55)}
button:disabled:active,button[disabled]:active{transform:none}
/* ⛔ `background:var(--btn-primary-bg);color:var(--btn-primary-ink)` THA — aur aaj subah jo galti poore suite me
   theek ki thi, ye theek wahi thi. `--accent` ab `var(--blue)` hai, jo dark me halka neela
   (#6f9bf0) ho jaata hai; uspar safed syahi 2.6:1 par aa jaati — button dikhta, likha nahi
   padhta. theme.css ke paas is sawaal ka apna jodaa hai (bg + uspar ki syahi), dono theme me
   naapa hua. Wahi use karo. */
.primary{background:var(--btn-primary-bg);color:var(--btn-primary-ink)}
.primary:hover{background:var(--accent2);color:#fff}
.secondary{background:var(--panel2);color:var(--txt);border:1px solid var(--line)}.secondary:hover{border-color:var(--accent)}
.danger{background:var(--fail);color:var(--on-bad)}.danger:hover{background:var(--red-2)}
.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}
.ghost:hover{color:var(--txt);border-color:var(--accent)}
.big{padding:16px 22px;font-size:18px;width:100%}
input{width:100%;padding:15px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--panel2);
  color:var(--txt);font-size:20px;outline:none;margin:6px 0 16px;letter-spacing:.04em}
input:focus{border-color:var(--accent);box-shadow:var(--focus)}
label{font-size:13px;color:var(--muted);letter-spacing:.01em}

.screen{min-height:100%}
.pad{padding:18px;max-width:860px;margin:0 auto}
/* operator = phone-friendly (narrow, big targets) · supervisor = desktop-friendly (wide) */
body.phone .pad{max-width:520px}
body.phone .tile-grid{grid-template-columns:1fr 1fr;gap:12px}
body.phone .count-btn{padding:34px 0}
body.desktop .pad{max-width:1120px}
.center-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:24px;gap:26px}
/* ⛔ THE KIOSK LANDING MUST NOT SCROLL ON A TABLET. Measured 15-Sep-2026 on 1024×768 — the other
   size the floor actually has: the page came to 805px, so the bottom strip was cut in half by the
   screen edge and the chip that says "Auto-print: OFF — setup karo" could not be read, let alone
   pressed. A short viewport gets a tighter rhythm instead of a scrollbar; nothing changes on a
   desk screen. */
@media (max-height: 820px) {
  .center-screen{padding:14px;gap:16px}
}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px;
  background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.topbar b{font-size:16px}

/* persistent role identity strip (R2) — who is logged in, their role (role-coloured), line, clock, live */
/* THE IDENTITY HEADER (design: Kiosk Worklist B).
   58px, not 40: it now carries two lines — who you are, and what/where you are — and the avatar
   that makes the strip readable at a glance from a metre away, which is how far an operator
   stands from a wall-mounted tablet. */
.role-strip{display:flex;align-items:center;gap:12px;min-height:58px;padding:0 16px;
  background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:29}
.role-strip.hidden{display:none}
/* ⛔ Navy + white in BOTH themes, like every other Morcom mark — see --brand-red's note in
   theme.css. A disc that changes colour when the page goes dark stops being a person's face. */
.rs-ava{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--navy);color:#fff;font-size:14px;font-weight:700;letter-spacing:.02em}
.rs-who{display:flex;flex-direction:column;min-width:0;gap:1px;flex:1}
.rs-sub{display:flex;align-items:center;gap:8px;min-width:0}
.rs-left,.rs-right{display:flex;align-items:center;gap:10px;min-width:0}
/* ⛔ THE ROLE COLOUR IS IDENTITY, SO IT CANNOT ALSO BE THE INK.
   These six hues were picked for a dark page — supervisor amber #f59e0b reads 2.15:1 on white.
   They must not change (a supervisor knows himself by that colour), so the badge stops using the
   hue as TEXT and uses it as a FILL instead: the role colour at a low strength behind, its own
   full strength on the ring and the dot, and the page's own ink on the words. Identity intact,
   readable on either ground. */
.rs-badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px;
  color:var(--txt);white-space:nowrap;flex:none;
  background:color-mix(in srgb, var(--role-col,var(--accent)) 16%, transparent);
  border:1.5px solid color-mix(in srgb, var(--role-col,var(--accent)) 55%, transparent)}
.rs-user{font-size:15px;font-weight:650;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}
.rs-line{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Mono + tabular so the clock does not twitch sideways every minute. */
.rs-clock{font-family:var(--mono);font-size:15px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums;flex:none}
/* The design's "Live" pill. It is a state, so it is shaped like every other state chip in the
   app rather than being a lone dot nobody reads. */
.rs-conn{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;flex:none;
  color:var(--ok);background:var(--okbg);border:1px solid var(--green-ln);border-radius:999px;padding:4px 10px}
.rs-conn .dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}
/* ⛔ Offline ko poora pill badalna padta hai, sirf likhai nahi — warna hare pill par laal
   akshar, jo "theek hai" aur "gadbad" dono ek saath kehta hai. */
.rs-conn.off{color:var(--fail);background:var(--failbg);border-color:var(--red-ln)}
.rs-conn.off .dot{background:var(--fail)}

/* brand */
.brand{display:flex;gap:14px;align-items:center}
.brand p{margin:2px 0 0;color:var(--muted);font-size:14px}
.logo{width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,var(--accent),#7c3aed);
  display:grid;place-items:center;font-size:28px;font-weight:800}
.big-brand .logo{width:64px;height:64px;font-size:34px}

/* role choice */
.role-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;width:100%;max-width:560px}
#conn-line .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
#conn-line .dot.ok{background:var(--ok)} #conn-line .dot.bad{background:var(--fail)}
.recent-ops{margin-bottom:16px}
.recent-ops .ro-hint{font-size:14px;color:var(--muted);text-align:center;margin-bottom:10px}
.recent-ops .ro-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.recent-ops .ro-chip{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;background:var(--panel2);border:2px solid var(--line);border-radius:14px;color:var(--txt);cursor:pointer}
.recent-ops .ro-chip:active{border-color:var(--accent);transform:scale(.97)}
.recent-ops .ro-av{width:40px;height:40px;border-radius:50%;background:var(--btn-primary-bg);color:var(--btn-primary-ink);font-size:20px;font-weight:800;display:flex;align-items:center;justify-content:center}
.recent-ops .ro-nm{font-size:14px;font-weight:700;text-align:center;line-height:1.2}
/* The four doors. Left-aligned, because a card a person READS beats a card that is arranged;
   and no lift on hover — a tile that jumps under a gloved finger on a tablet is a tile that gets
   tapped twice. The current line is marked by its BORDER, which is still true when the mouse
   leaves. (design: Operator Flow, landing) */
.role-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:22px 20px;
  text-align:left;color:var(--txt);min-height:150px;display:flex;flex-direction:column;justify-content:center;
  box-shadow:var(--elev-1);transition:border-color .14s ease}
@media(hover:hover){.role-card:hover{border-color:var(--ink-4)}}
.role-ico{font-size:38px} .role-t{font-size:20px;font-weight:700;margin-top:12px} .role-s{color:var(--muted);font-size:13px;margin-top:4px}

/* tile grid (lines, operations) */
.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px 16px;text-align:left;
  color:var(--txt);position:relative;box-shadow:var(--elev-1);min-height:104px;
  display:flex;flex-direction:column;justify-content:center;transition:border-color .14s ease}
/* An operation tile carries one more line than a line tile, so it is taller by exactly that line. */
#screen-operations .tile{min-height:118px}
@media(hover:hover){.tile:hover{border-color:var(--ink-4)}}
.tile .tt{font-size:19px;font-weight:700}
.tile .ts{color:var(--muted);font-size:13px;margin-top:6px}
.tile .badge{position:absolute;top:12px;right:12px;background:var(--blue-bg);color:var(--blue);font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px}
.tile.dim{opacity:.45}
/* Pre-Production: order-linked child body MO cards (priority) */
.pp-sec-hd{grid-column:1/-1;font-size:13px;font-weight:800;color:var(--txt);text-transform:uppercase;letter-spacing:.5px;margin:16px 2px 4px;padding-left:9px;border-left:3px solid var(--accent);line-height:1.3}
/* QC team section (PDI / IPQC / IQC) */
.qc-hd{font-size:14px;font-weight:800;color:var(--txt);margin:6px 2px 12px}
.qc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;margin:8px 0;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.qc-row .row{display:flex;gap:8px}
.qc-form{display:flex;flex-direction:column;gap:12px;max-width:540px}
.qc-form>.row{display:flex;gap:10px}
.qc-lbl{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);flex:1}
.qc-lbl select{padding:11px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--txt);font-size:15px}
.qc-form .scan-in{width:100%}
button.big{padding:14px 18px;font-size:16px}
.qc-form>.row button.big{flex:1}
.body-mo-card{grid-column:1/-1;display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--accent);border-left:5px solid var(--accent);border-radius:var(--radius);padding:14px 16px}
.body-mo-card .bmc-main{flex:1;min-width:0}
.body-mo-card .bmc-mo{font-size:18px;font-weight:800}
.body-mo-card .bmc-sub{color:var(--muted);font-size:13px;margin-top:3px}
.body-mo-card .bmc-qty{font-size:14px;color:var(--txt);white-space:nowrap}
.body-mo-card .bmc-qty b{font-size:22px;color:var(--accent)}
.body-mo-card .bmc-go{padding:12px 18px;font-size:15px;white-space:nowrap}
.op-tile{text-align:center;padding:20px 14px}
.op-tile .op-ico{font-size:46px;line-height:1;margin:2px 0 8px}
.op-tile .tt{font-size:18px}
.op-tile .ts{font-size:13px}

/* login keypad */
.login-wrap{display:flex;justify-content:center;padding:24px}
.login-box{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:22px;width:100%;max-width:390px;box-shadow:var(--elev-1)}
.pin-dots{display:flex;gap:12px;justify-content:center;margin:12px 0 20px;height:22px}
.pin-dots .d{width:17px;height:17px;border-radius:50%;background:var(--sunk);border:1px solid var(--line)}
.pin-dots .d.on{background:var(--btn-primary-bg);border-color:var(--btn-primary-bg)}
/* Pehli baar apna PIN banane wali screen ki wajah — dots ke upar, taaki aadmi ko pehle
   pata chale KYUN, phir kya. */
.np-why{font-size:13.5px;line-height:1.5;color:var(--muted);background:var(--panel2);
  border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 12px}
.np-why b{color:var(--txt)}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
/* 62px: a gloved thumb, not a mouse pointer. */
.key{background:var(--panel);color:var(--txt);font-size:24px;font-weight:700;min-height:62px;padding:0;
  border:1px solid var(--line);border-radius:13px}
.key.ghost{background:var(--panel2)}
.key:hover{border-color:var(--accent)} .key.primary{background:var(--accent);border-color:var(--accent)}

/* work cards */
.who-strip{color:var(--txt);font-size:15px;font-weight:700;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.who-strip #work-who::before{content:"👤 "}
/* kaunsi shift chal rahi hai, aur kis din ki hai — raat wali shift ke liye ye zaroori hai */
.shift-bar{font-size:14px;line-height:1.45;color:var(--muted);background:var(--panel);
  border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;
  padding:10px 12px;margin:0 0 12px}
.shift-bar b{color:var(--txt)}
.shift-bar.warn{border-left-color:var(--warn,#e0a400);color:var(--txt)}
.sup-shift-chip{font-size:12.5px;font-weight:700;color:var(--muted);background:var(--panel);
  border:1px solid var(--line);border-radius:999px;padding:4px 10px;white-space:nowrap}
.sup-shift-chip.warn{border-color:var(--warn);color:var(--warn)}
.op-tile .op-hi{font-size:13px;color:var(--accent);font-weight:700;margin-top:2px}
/* ⛔ A JOB IS A TILE NOW, NOT A ROW. A row forces the eye left-to-right across a wide tablet and
   puts the thing you tap at the far end of it; a tile keeps the product, its numbers and its one
   button in the same 290px of attention. (design: Kiosk Worklist B) */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--elev-1);
  display:flex;flex-direction:column;gap:10px;cursor:pointer;transition:border-color .14s ease}
.card>div:first-child{min-width:0}
@media(hover:hover){.card:hover{border-color:var(--ink-4)}}
.card .t{font-size:19px;font-weight:700;overflow-wrap:anywhere}.card .s{color:var(--muted);font-size:14px;margin-top:3px;overflow-wrap:anywhere}
.card .s2{color:var(--muted);font-size:13px;margin-top:5px;font-variant-numeric:tabular-nums}
/* schedule-date awareness: badge + left accent so a searched/scanned job reads past/future at a glance */
.card.when-past{border-left:3px solid var(--fail)} .card.when-future{border-left:3px solid var(--accent)}
.when-badge{display:inline-block;font-size:11px;font-weight:800;padding:2px 7px;border-radius:6px;vertical-align:middle;margin-left:6px;letter-spacing:.03em}
.when-badge.past{background:var(--failbg);color:var(--fail)}
.when-badge.future{background:var(--blue-bg);color:var(--accent)}
.when-badge.today{background:var(--okbg);color:var(--ok)}
.when-badge.rework{background:var(--warnbg);color:var(--warn);font-weight:700}
.card.is-rework{border:2px solid var(--warn);box-shadow:0 0 0 1px var(--warn) inset}
.when-badge.incomplete{background:var(--failbg);color:var(--fail);font-weight:800}
.card.is-incomplete{border:2px solid var(--fail);box-shadow:0 0 0 1px var(--fail) inset}
.card.when-past .s2{color:var(--fail)}
.s2 .dl-over{color:var(--fail);font-weight:700}
.chip{font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;background:var(--panel2);color:var(--muted);white-space:nowrap}
.chip.prog{background:var(--warnbg);color:var(--warn)}
/* ===== Odoo-style unified smart search bar (work list + trace) ===== */
.smartbar{position:relative;margin-bottom:12px}
.sb-box{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 8px 8px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);min-height:50px}
.smartbar.open .sb-box{border-color:var(--accent)}
.sb-ico{font-size:16px;opacity:.7;flex:none}
.sb-facets{display:flex;gap:6px;flex-wrap:wrap}
.sb-chip{display:inline-flex;align-items:center;gap:4px;min-height:34px;background:var(--btn-primary-bg);color:var(--btn-primary-ink);border-radius:8px;padding:4px 4px 4px 12px;font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap}
.sb-chip b{font-weight:800}
.sb-chip.filt{background:var(--warnbg);color:var(--warn)}
.sb-chip.grp{background:var(--panel);color:var(--accent);border:1px solid var(--accent)}
.sb-chip.scope{background:var(--blue-bg);color:var(--accent);border:1px solid var(--accent)}
#btn-work-search.on{color:var(--accent);border-color:var(--accent);background:var(--blue-bg)}
.sb-chip i{font-style:normal;font-weight:800;font-size:15px;line-height:1;padding:6px 9px;margin-left:2px;border-radius:6px;background:rgba(0,0,0,.18)}
.sb-chip:active{transform:scale(.97)}
.sb-input{flex:1;min-width:120px;border:none;background:transparent;color:var(--txt);font-size:17px;padding:6px 2px;outline:none;box-shadow:none}
.sb-input:focus{border:none;outline:none}
.sb-caret{flex:none;margin-left:auto;width:40px;height:40px;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--muted);font-size:14px;font-weight:800;cursor:pointer}
.sb-caret:active{transform:scale(.94)}
.sb-menu{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 6px);background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.45);overflow:hidden;max-height:60vh;overflow-y:auto}
.sb-sec{padding:6px}
.sb-cols{display:flex;gap:0}
.sb-col{flex:1;padding:8px;border-right:1px solid var(--line)}
.sb-col:last-child{border-right:none}
.sb-h{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding:4px 10px 8px}
.sb-opt{padding:12px 12px;border-radius:8px;cursor:pointer;font-size:15px;color:var(--txt)}
.sb-opt:hover{background:var(--panel2)}
.sb-opt.on{color:var(--accent);font-weight:700}
.sb-opt.muted{color:var(--muted);cursor:default}
.sb-opt b{font-weight:800} .sb-opt i{font-style:normal;color:var(--accent);font-weight:700}
.lk-row{padding:14px 16px}
/* warehouse guided picker (one item at a time) */
/* guided-picker progress: how many picked vs left (always visible) */
.pick-prog{max-width:440px;margin:0 auto 6px}
.pick-prog-bar{height:12px;border-radius:7px;background:var(--panel2);overflow:hidden;border:1px solid var(--line)}
.pick-prog-bar span{display:block;height:100%;background:var(--ok);border-radius:7px;transition:width .3s}
.pick-prog-txt{text-align:center;font-size:15px;margin-top:7px;color:var(--muted)}
.pick-prog-txt b{color:var(--txt);font-size:17px}
.wh-step{padding:10px 4px}
.wh-big{font-size:26px;font-weight:800;text-align:center;margin:10px 0;overflow-wrap:anywhere}
/* product photo so the picker can visually verify the item */
.wh-photo{width:160px;height:160px;margin:6px auto 4px;border-radius:14px;border:1px solid var(--line);
  background:var(--panel2);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.wh-photo img{width:100%;height:100%;object-fit:contain;display:block}
.wh-photo .wh-photo-ph{display:none;text-align:center;font-size:38px;color:var(--muted);line-height:1.2}
.wh-photo .wh-photo-ph small{font-size:12px}
.wh-photo.noimg img{display:none}
.wh-photo.noimg .wh-photo-ph{display:block}
.wh-warn{margin:10px 0 0;padding:10px;border-radius:10px;font-size:14px;font-weight:600;text-align:center;
  background:var(--warnbg);border:1px solid var(--amber-ln);color:var(--warn)}
/* shift summary card */
/* ⛔ NO CARD INSIDE A CARD. These already sit in a panel; boxing each number again just draws
   three more borders and makes the numbers smaller. Plain figures, a quiet label, room between. */
.shift-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:10px 0}
.shift-stat{background:none;border-radius:0;padding:0;text-align:left}
.shift-stat .n{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.shift-stat .l{font-size:11.5px;color:var(--muted);margin-top:2px}
.shift-prog{position:relative;height:14px;border-radius:8px;background:var(--panel2);overflow:hidden;margin:8px 0}
.shift-prog .f{position:absolute;left:0;top:0;bottom:0;background:var(--ok);border-radius:8px}
.shift-prog .exp{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--warn)}
.shift-alert{margin-top:6px;padding:8px 10px;border-radius:8px;font-size:13px;font-weight:600}
.shift-alert.bad{background:var(--failbg);border:1px solid var(--fail);color:var(--fail)}
.shift-alert.warn{background:var(--warnbg);border:1px solid var(--amber-ln);color:var(--warn)}
.shift-alert.ok{background:var(--okbg);border:1px solid var(--green-ln);color:var(--ok)}
.wave-card.disabled{opacity:.45;pointer-events:none}
.ret-card{border-color:var(--amber-ln) !important;background:var(--warnbg)}
/* verify pallet overview: which pallets, which done/current */
.pallet-list{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0 auto 14px;max-width:440px}
.pallet-chip{padding:5px 10px;border-radius:8px;font-size:12px;font-weight:700;background:var(--panel2);border:1px solid var(--line);color:var(--muted)}
.pallet-chip.cur{background:var(--btn-primary-bg);color:var(--btn-primary-ink);border-color:var(--accent)}
.pallet-chip.done{background:var(--okbg);border-color:var(--green-ln);color:var(--ok)}

/* ===== supervisor dashboard: sidebar + tabbed panels ===== */
.sup-shell{display:flex;min-height:100vh;align-items:stretch}
.sup-side{width:236px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:16px 12px;position:sticky;top:0;height:100vh}
/* ⛔ ONE IDENTITY STRIP, NOT TWO. #role-strip above now carries the avatar, the name, the role and
   the line — and this block was printing the same name and the same line again, 60px under it.
   The design shows one. The element stays in the markup because loadSupervisor() writes into
   #sup-side-name / #sup-side-line and a missing node would be a silent throw; it is just not drawn. */
.sup-side-head{display:none}
.sup-side-ava{width:42px;height:42px;border-radius:12px;background:var(--panel2);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.sup-side-id b{font-size:15px;display:block;line-height:1.2}
/* The rail scrolls when the screen is short — at 1280×800 five of the thirteen tabs sit below the
   fold, Handover among them (chain step 18). There was no hint at all: scrollbar width 0, no fade,
   and only a 12px sliver of the next row, with a divider + buttons right underneath so the list
   looked complete. A permanent thin scrollbar plus a fade at the bottom edge says "there is more". */
.sup-nav{display:flex;flex-direction:column;gap:4px;flex:1;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(120,140,180,.45) transparent;
  mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent 100%)}
.sup-nav::-webkit-scrollbar{width:6px}
.sup-nav::-webkit-scrollbar-thumb{background:rgba(120,140,180,.45);border-radius:3px}
/* nothing to scroll → no fade, no ghost scrollbar */
.sup-nav.no-scroll{mask-image:none;-webkit-mask-image:none}
.sup-nav-btn{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;border-radius:10px;
  background:transparent;border:0;color:var(--txt);font-size:15px;font-weight:600;cursor:pointer;text-align:left}
.sup-nav-btn .ic{font-size:18px;width:22px;text-align:center;flex-shrink:0}
.sup-nav-btn .lb{flex:1}
.sup-nav-btn:hover{background:var(--panel2)}
.sup-nav-btn.active{background:var(--btn-primary-bg);color:var(--btn-primary-ink)}
.sup-nav-btn .bdg{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--fail);color:var(--on-bad);
  font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.sup-nav-btn.active .bdg{background:rgba(255,255,255,.3)}
.sup-side-foot{display:flex;flex-direction:column;gap:6px;padding-top:10px;border-top:1px solid var(--line);margin-top:10px}
.sup-side-btn{width:100%;text-align:left;padding:10px 12px}
.sup-main{flex:1;min-width:0;display:flex;flex-direction:column}
.sup-main-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:18px 24px 12px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5}
.sup-main-head b{font-size:22px}
.sup-scroll{padding:18px 24px;overflow-y:auto}
.sup-panel{max-width:980px}
/* ⛔ AN EMPTY PANEL MUST LOOK DELIBERATE, NOT BROKEN. 48px of nothing reads as "did it fail to
   load"; a dashed card reads as "there is genuinely nothing here yet", which is the truth. The
   sentence inside is SUP_NO_WORK's, unchanged. */
.panel-empty{padding:34px 20px;font-size:15px;text-align:center;color:var(--muted);
  border:1px dashed var(--line);border-radius:var(--r-lg);background:var(--panel2)}
.panel-empty .pe-ico{font-size:34px;display:block;margin-bottom:8px}
.panel-empty .pe-t{font-size:17px;font-weight:650;color:var(--txt);display:block;margin-bottom:4px}
/* overview "needs attention" strip */
.attn-row{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
/* Full width and 54px: this is the row that says somebody must decide something. */
.attn-card{flex:1 1 100%;min-width:220px;min-height:54px;display:flex;align-items:center;gap:10px;
  text-align:left;padding:0 16px;border-radius:12px;font-size:15px;font-weight:700;
  cursor:pointer;background:var(--warnbg);border:1px solid var(--amber-ln);color:var(--warn)}
.attn-card::after{content:"\203A";margin-left:auto;font-size:20px;opacity:.7}
.attn-card:hover{filter:brightness(1.12)}
.attn-ok{padding:14px 16px;border-radius:12px;background:var(--okbg);border:1px solid var(--green-ln);color:var(--ok);font-weight:700;margin:0 0 18px}
@media(max-width:900px){
  .sup-shell{flex-direction:column}
  .sup-side{width:auto;height:auto;position:static;flex-direction:column}
  /* The tab strip is MEANT to scroll sideways. It could not: a flex item's default min-width is
     its content, so the strip grew to fit all ten tabs and pushed the whole PAGE sideways instead
     of scrolling inside itself. min-width:0 is what lets overflow-x actually take effect. */
  .sup-nav{flex-direction:row;overflow-x:auto;gap:6px;min-width:0;width:100%}
  /* The whole chain has to be constrained, not just the strip: a flex column's items are sized by
     their content unless something says otherwise, so the shell grew to fit the widest tab row and
     the PAGE scrolled instead of the strip. */
  .sup-shell{width:100%;max-width:100%;min-width:0}
  .sup-side{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
  .sup-main{min-width:0;max-width:100%}
  /* ⛔ ON A PHONE THE TAB STRIP IS A ROW OF CHIPS, NOT A SHRUNKEN RAIL. Stacking the icon over a
     9px label to squeeze thirteen tabs into 375px makes every one of them unreadable and none of
     them easier to hit. A chip is one line, it is 40px tall, and it scrolls — which is what the
     supervisor is already doing with his thumb. (design: Supervisor Console, phone) */
  .sup-nav{padding:2px 0 6px}
  /* ⛔ width:auto — the base rule sets width:100%, and `flex:0 0 auto` does NOT undo that, so
     every chip took the full row and the twelve of them stacked invisibly on top of each other.
     Measured: two chips, both 765px wide, both at y=149. */
  .sup-nav-btn{flex-direction:row;gap:7px;min-height:40px;padding:0 14px;min-width:0;width:auto;
    font-size:13.5px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);
    white-space:nowrap;flex:0 0 auto;position:relative}
  .sup-nav-btn .lb{font-size:13.5px;flex:0 0 auto}
  .sup-nav-btn .ic{width:auto}
  .sup-nav-btn.active{border-color:transparent}
  .sup-nav-btn .bdg{position:static;margin:0}
  /* Five buttons in a row do not fit a phone — let them wrap instead of pushing the page. */
  .sup-side-foot{flex-direction:row;flex-wrap:wrap}
  /* Phone: the header is a row of three and the shift chip is the longest thing in it. Let the
     whole header wrap and the chip go full-width rather than pushing the page sideways — the
     supervisor screen is used on a phone and a page that scrolls left-right is unusable there.
     The nav row keeps its own overflow-x; only the PAGE must not scroll. */
  .sup-main-head{flex-wrap:wrap;min-width:0;max-width:100%}
  .sup-main-head b, .sup-main-head #sup-updated{min-width:0;overflow-wrap:anywhere}
  .sup-shift-chip{white-space:normal;width:100%;text-align:center;order:3}
  .sup-side-id b, .sup-side-id div{overflow-wrap:anywhere}
  .sup-side-head{min-width:0}
}
/* group-by headers (work list + trace) */
.grp-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:14px 2px 6px}
.grp-h .grp-n{background:var(--panel2);color:var(--txt);border-radius:999px;padding:1px 9px;font-size:12px}

/* counter screen */
.counter-pad{max-width:520px}
.counter-head{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:18px}
.ch-row{display:flex;justify-content:space-between;padding:5px 0;font-size:15px}
.bigcount{text-align:center;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:24px;margin-bottom:18px}
.bc-label{color:var(--muted);font-size:14px;letter-spacing:.1em;font-weight:700}
/* 72px, and the weight comes DOWN from 800 to 700: at this size 800 stops reading as emphasis and
   starts reading as a slab. The tight tracking is what keeps a four-digit count from sprawling. */
.bc-num{font-size:72px;font-weight:700;line-height:1;margin:6px 0;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.bc-total{font-size:28px;color:var(--muted);font-weight:600}
.progress{height:12px;background:var(--panel2);border-radius:999px;overflow:hidden;margin-top:8px}
.bar{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--ok));transition:width .25s}
.count-btns{display:grid;grid-template-columns:2fr 1fr;gap:12px}
/* 128px tall. This is the button a person presses several hundred times a shift, standing,
   sometimes with a glove on — it is the one control on the floor that should be impossible to miss. */
.count-btn{font-size:40px;font-weight:700;min-height:128px;padding:0;border-radius:20px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.count-btn small{font-size:14px;font-weight:600;opacity:.92}
.count-btn.produce{background:var(--ok);color:var(--on-good)}
.count-btn.reject{background:var(--fail);color:var(--on-bad)}
/* Undo is deliberately quieter AND equal — the two mistakes are equally likely, so neither gets
   the bigger button. */
.undo-row{display:flex;gap:12px;margin-top:12px}
.undo-row .ghost{flex:1;min-height:46px;border-radius:12px}
.finish-btn{margin-top:22px;min-height:64px;font-size:18px;font-weight:700;border-radius:16px}

/* supervisor */
.sup-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-bottom:20px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center}
.stat .n{font-size:30px;font-weight:800}.stat .l{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.sup-line{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;margin-bottom:12px;box-shadow:var(--elev-1)}
.sup-line h3{margin:0 0 12px;font-size:17px;display:flex;justify-content:space-between}
.sup-op{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.sup-op .nm{flex:1}.sup-op .pg{width:120px;height:8px;background:var(--panel2);border-radius:999px;overflow:hidden}
.sup-op .pg .f{height:100%;background:var(--ok)} .sup-op .rj{color:var(--fail);font-weight:700;width:60px;text-align:right}
.sup-op .ct{width:70px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.qrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.qrow .mono{font-family:monospace}
.qrow .rework:hover{color:var(--warn);border-color:var(--warn)}
.hrow{display:flex;align-items:center;gap:12px;padding:5px 0;font-size:14px}
.hrow .hh{width:60px;font-variant-numeric:tabular-nums;color:var(--muted)}
.hrow .hbar{flex:1;height:14px;background:var(--panel2);border-radius:999px;overflow:hidden;display:flex}
.hrow .hbar .hp{height:100%;background:var(--ok)} .hrow .hbar .hf{height:100%;background:var(--fail)}
.hrow .hn{width:70px;text-align:right;font-variant-numeric:tabular-nums}
.hrow.op-head{border-top:1px solid var(--line);padding-top:8px}

/* scan input */
/* ⛔ THE SCANNER TYPES INTO THIS, so it has to LOOK like the target. A tinted field with a real
   blue edge is the difference between "where do I scan" and scanning. */
.scan-input{width:100%;min-height:64px;padding:0 16px;border-radius:12px;border:2px solid var(--blue);background:var(--blue-bg);
  color:var(--txt);font-size:19px;outline:none;margin:6px 0 12px}
.scan-input:focus{border-color:var(--accent)}
select.scan-input{appearance:none}
.scn-feedback{padding:18px;border-radius:14px;font-size:19px;font-weight:700;text-align:center;margin-bottom:12px;line-height:1.4}
.scn-feedback.pass{background:var(--okbg);color:var(--ok);border:1px solid var(--ok)}
.scn-feedback.fail{background:var(--failbg);color:var(--fail);border:2px solid var(--fail)}
.scn-feedback.warn{background:var(--warnbg);color:var(--warn);border:2px solid var(--warn)}
.scn-feedback .sf-sub{display:block;font-size:14px;font-weight:600;opacity:.85;margin-top:4px;font-family:monospace}
.carton-stats{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:14px}
.carton-stats .cs-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:15px}
.carton-stats .cs-row span{color:var(--muted)}
.carton-stats .cs-row b{font-size:16px}
.carton-stats .cs-now{border-top:1px solid var(--line);margin-top:5px;padding-top:9px}
.carton-stats .cs-now b{color:var(--accent)}
.carton-stats .cs-done{color:var(--ok);font-weight:700;text-align:center;font-size:16px}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;max-width:460px;width:100%;max-height:90vh;overflow-y:auto}
.modal-card h3{margin:0 0 8px;font-size:19px}
.modal-card label{display:block;margin:12px 0 6px;font-size:13px;color:var(--muted)}
.confirm-card{text-align:center}
.confirm-card .cf-icon{font-size:46px;width:84px;height:84px;line-height:84px;margin:0 auto 8px;border-radius:50%}
.confirm-card .cf-icon.ok{background:var(--okbg);color:var(--ok)}
.confirm-card .cf-icon.warn{background:var(--warnbg);color:var(--warn)}
.confirm-card .cf-hi{font-size:16px;font-weight:700;margin:2px 0}
#toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(140%);z-index:2000;display:flex;align-items:center;gap:10px;max-width:90%;padding:16px 22px;border-radius:14px;font-size:17px;font-weight:700;box-shadow:0 8px 30px rgba(0,0,0,.5);transition:transform .25s ease;pointer-events:none}
#toast.show{transform:translateX(-50%) translateY(0)}
#toast .tg-ico{font-size:22px;font-weight:800}
#toast.error{background:var(--failbg);color:var(--fail);border:2px solid var(--fail)}
#toast.ok{background:var(--okbg);color:var(--ok);border:2px solid var(--ok)}
#toast.warn{background:var(--warnbg);color:var(--warn);border:2px solid var(--warn)}
#float-print{position:fixed;right:18px;bottom:18px;z-index:1500;background:var(--btn-primary-bg);color:var(--btn-primary-ink);border:none;border-radius:14px;padding:16px 22px;font-size:17px;font-weight:800;box-shadow:0 8px 30px rgba(0,0,0,.5);cursor:pointer}
#float-print:active{transform:scale(.96)}
.counter-done{background:var(--okbg);color:var(--ok);border:2px solid var(--ok);border-radius:14px;padding:14px;text-align:center;font-size:18px;font-weight:800;margin-bottom:12px}

/* assembly labels */
.label-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-bottom:18px}
.label{background:#fff;color:#000;border-radius:8px;padding:10px;border:1px solid #ccc}
.label .lc{font-family:monospace;font-weight:800;font-size:13px}
.label .ln{font-size:11px;color:#333;line-height:1.2;height:26px;overflow:hidden}
.label .lserial{font-family:monospace;font-weight:700;font-size:12px;margin-top:2px}
.label svg{display:block;margin-top:4px}
.label.qr{display:flex;gap:10px;align-items:center}
.label.qr .lqr{flex:none;line-height:0}
.label.qr .ltxt{flex:1;min-width:0}
.label.qr .ln{height:auto}

/* testing QC */
.qc-counts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:14px}
.qc-stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;text-align:center;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.qc-stat .n{font-size:30px;font-weight:800;color:var(--txt)}
.qc-stat.pass .n{color:var(--ok)} .qc-stat.fail .n{color:var(--fail)}
.serial-card{background:var(--panel);border:1px solid var(--accent);border-radius:18px;padding:18px;text-align:center;margin-bottom:14px}
.sc-serial{font-family:monospace;font-size:24px;font-weight:800}
.warn-txt{color:var(--warn);font-weight:600;margin-top:6px}
.serial-card.blocked{border:2px solid var(--fail);background:var(--failbg)}
.serial-card.blocked .warn-txt{color:var(--fail);font-weight:800;font-size:20px}
.serial-card .warn-txt .sc-sub{font-size:13px;font-weight:600;opacity:.85}
.serial-card.ok{border:2px solid var(--ok)}
.serial-card.ok .warn-txt{color:var(--ok);font-weight:700}
/* PASS and FAIL are the same size on purpose: making PASS bigger is a thumb on the scale. */
.pf-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pf-btns>button{min-height:118px;border-radius:20px;font-size:26px;font-weight:700}
#fail-box{margin-top:14px;background:var(--failbg);border:1px solid var(--fail);border-radius:14px;padding:14px}

/* lookup timeline */
.trace{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:14px}
.trace .th{font-family:monospace;font-size:20px;font-weight:800}
.tl{list-style:none;padding:0;margin:12px 0 0}
.tl li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.tl .badge2{font-size:11px;font-weight:800;padding:3px 8px;border-radius:6px;background:var(--panel2);color:var(--muted);white-space:nowrap}
.tl .badge2.PASS{background:var(--okbg);color:var(--ok)} .tl .badge2.FAIL{background:var(--failbg);color:var(--fail)}
.tl .tt{flex:1} .tl .tm{color:var(--muted);font-size:12px}
.tl .cyc{color:var(--accent);font-size:12px;font-weight:700;white-space:nowrap}
.status-pill{display:inline-block;padding:4px 12px;border-radius:999px;font-weight:700;font-size:13px;margin-top:6px}
.status-pill.active{background:var(--okbg);color:var(--ok)} .status-pill.quarantine{background:var(--failbg);color:var(--fail)}

/* print: thermal label printer (TSC TE310, 300dpi) — one label per page; @page size injected by JS */
#print-area{display:none}
@page{ size:50mm 25mm; margin:0 }
/* on-screen label PREVIEW (non-kiosk QA): show the exact label markup on a white card,
   with NO window.print() so it never freezes the touch app. */
/* ⛔ Labels stack TOP TO BOTTOM, one per page as they print. Side by side with justify-content:center
   an 84-label job overflowed BOTH edges and the scroll could never reach the left one — the preview
   opened on B42/B43 and read as "reprint starts from box 42" (owner, 24-Sep-2026). `safe` keeps a
   too-wide label pinned to the left edge instead of cut on both sides. */
.label-preview{background:#fff;color:#000;border-radius:10px;padding:10px;max-height:64vh;overflow:auto;display:flex;flex-direction:column;align-items:safe center;gap:8px}
.label-preview > div{flex:none}
.lp-count{font-size:13px;text-align:center;margin:0 0 6px}
/* ⛔ NO transform here. The preview is the last look anybody gets before the sticker is on a box,
   and `scale(.8)` painted this label wrong — the scan caption landed on top of the QUANTITY
   heading while the DOM measured perfectly, because a scaled subtree rounds its children's mm
   boxes differently from their text. A 100mm label is 378px and the modal is 440px, so it fits
   1:1; anything wider scrolls (.label-preview is overflow:auto). */
.label-preview .carton-label{transform-origin:top center}
@media print{
  html,body{margin:0;padding:0;background:#fff}
  body > *:not(#print-area){display:none !important}
  #print-area{display:block}
}
/* label LAYOUT — global so it renders in BOTH the hidden #print-area (when printing) and
   the on-screen .label-preview. (.plabel/.carton-label markup only ever appears in those two.) */
.plabel{color:#000;box-sizing:border-box;overflow:hidden;page-break-before:always;break-before:page}
.plabel:first-child{page-break-before:avoid;break-before:avoid}
.plabel .lc{font-family:monospace;font-weight:800}
.plabel .lserial{font-family:monospace;font-weight:700;word-break:break-all}
.plabel.wide{display:flex;gap:1.5mm;align-items:center;width:50mm;height:25mm;padding:1.5mm}
.plabel.wide .pqr{flex:none;line-height:0}
.plabel.wide .pqr svg{width:21mm;height:21mm}
.plabel.wide .ptxt{flex:1;min-width:0}
.plabel.wide .lc{font-size:9pt;margin-bottom:.4mm}
.plabel.wide .ln{font-size:6pt;line-height:1.05;margin-bottom:.4mm}
.plabel.wide .lserial{font-size:7pt}
.plabel.sq{display:flex;flex-direction:column;align-items:center;justify-content:center;width:25mm;height:25mm;padding:.8mm}
.plabel.sq .pqr{width:100%;display:flex;justify-content:center;line-height:0}
.plabel.sq .pqr svg{width:20mm;height:20mm}
.plabel.sq .lserial{font-size:5pt;margin-top:.4mm;text-align:center;line-height:1;width:100%}
/* master carton label — 4x6 inch (101.6 x 152.4 mm) */
.carton-label{width:101.6mm;height:101.6mm;padding:5mm;color:#000;box-sizing:border-box;font-family:-apple-system,Arial,sans-serif;overflow:hidden}
.carton-label .cl-top{display:flex;justify-content:space-between;align-items:flex-start;gap:4mm;border-bottom:1.5px solid #000;padding-bottom:1.5mm;margin-bottom:1.5mm}
.carton-label .cl-code{font-size:15pt;font-weight:800;font-family:monospace}
.carton-label .cl-name{font-size:7.5pt;margin-top:.6mm}
.carton-label .cl-box{font-size:10.5pt;font-weight:800;font-family:monospace;margin-top:1mm;letter-spacing:.5px}
.carton-label .cl-grid b small{font-size:7pt;font-weight:600;color:#333}
.carton-label .cl-allqr{text-align:center;flex:none}
.carton-label .cl-allqr svg{width:17mm;height:17mm}
.carton-label .cl-allcap{font-size:6pt;font-weight:800;margin-top:.4mm;text-transform:uppercase;letter-spacing:.3px}
.carton-label .cl-serqr{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5mm 3mm;margin-top:1.5mm}
.carton-label .cl-serqr .cl-sq{text-align:center}
.carton-label .cl-serqr .cl-sq svg{width:15mm;height:15mm;display:block;margin:0 auto}
.carton-label .cl-serqr .cl-sq div{font-family:monospace;font-size:5pt;font-weight:700;margin-top:.2mm;word-break:break-all}
.carton-label .cl-grid{display:grid;grid-template-columns:1fr 1fr;gap:1mm 5mm;margin-bottom:1mm}
.carton-label .cl-grid span{font-size:6pt;color:#555;display:block}
.carton-label .cl-grid b{font-size:9.5pt}
.carton-label .cl-sertitle{font-size:7.5pt;font-weight:700;border-top:1.5px solid #000;padding-top:1mm;margin-top:.8mm}
.carton-label .cl-serlist{display:grid;grid-template-columns:repeat(3,1fr);gap:.5mm 3mm;margin-top:1mm;font-family:monospace;font-size:6.5pt;font-weight:700}
.carton-label .cl-serlist span{white-space:nowrap}

.serial-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;max-height:170px;overflow:auto}
.serial-chip{font-family:monospace;font-size:12px;padding:4px 8px;border-radius:8px;background:var(--panel2);border:1px solid var(--line);white-space:nowrap}
.serial-chip.quarantine{color:var(--fail);border-color:var(--fail)}
.serial-chip.scrap{color:var(--muted);text-decoration:line-through}
/* carton scan list: touch-friendly removable chips */
#scn-list{display:flex;flex-direction:column;gap:8px;margin:10px 0}
#scn-list .serial-chip{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:16px;padding:12px 14px}
#scn-list .chip-x{flex:none;width:34px;height:34px;border-radius:8px;border:1px solid var(--fail);background:var(--failbg);color:var(--fail);font-size:16px;font-weight:800;cursor:pointer}
#scn-list .chip-x:active{transform:scale(.94)}
.export-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px;justify-content:center}
.export-bar .exp{padding:7px 12px;font-size:13px}

/* label-size selector (assembly) */
.size-sel{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.size-sel .sz{border-radius:0;background:var(--panel2);color:var(--muted);padding:9px 12px;font-size:13px}
.size-sel .sz.active{background:var(--btn-primary-bg);color:var(--btn-primary-ink)}

/* result / busy / offline */
.result-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:40px;text-align:center;max-width:420px}
.check{width:80px;height:80px;border-radius:50%;background:var(--okbg);color:var(--ok);font-size:44px;display:grid;place-items:center;margin:0 auto 18px;border:2px solid var(--ok)}
.check.bad{background:var(--failbg);color:var(--fail);border-color:var(--fail)}   /* failed finish — red ✕, not green ✓ */
.check.warn{background:var(--warnbg);color:var(--warn);border-color:var(--warn)}        /* partial/warning — amber */
.busy{position:fixed;inset:0;background:rgba(5,9,18,.7);display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;z-index:50;backdrop-filter:blur(2px)}
/* ⛔ A SPINNER SAYS "WAIT"; A SKELETON SAYS "WHAT IS COMING" — and the second keeps the page the
   size it will be, so nothing jumps when the data lands.
   ⛔ THE TWO ARE NOT INTERCHANGEABLE, THOUGH. #busy is a full-screen overlay over a BLOCKING
   action (posting a count, finishing an operation): there is no shape to predict there, and three
   card outlines floating over a dimmed page would say nothing. So the spinner keeps the overlay,
   and the skeletons go where a LIST is loading and its shape IS known — the work list. */
.spinner{width:44px;height:44px;border:4px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* ⛔ #241a00 yahan reh gaya tha — wo `var(--warn)` PAR ki syahi thi, haath se chuni hui, yaani
   theek wahi cheez jo ab --on-warn hai. Aur handoff isko thos amber ki jagah TINTED banner kehta
   hai: ek chetavni jo poori patti ko amber kar de, wo screen ki har cheez se zyada zor se bolti
   hai, jabki kehna sirf itna hai ki net nahi hai. */
.offline-banner{background:var(--amber-bg);color:var(--warn);border-bottom:1px solid var(--amber-ln);
  text-align:center;padding:9px;font-size:13.5px;font-weight:600;position:sticky;top:0;z-index:30}
.mat-banner{align-items:center}
.mat-list{max-height:52vh;overflow:auto;display:flex;flex-direction:column;gap:8px;margin-top:6px}
.mat-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--panel2);border-left:4px solid var(--muted)}
.mat-row.mat-green{border-left-color:var(--ok)} .mat-row.mat-amber{border-left-color:var(--warn)} .mat-row.mat-red{border-left-color:var(--fail)}
.mat-chip{font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;white-space:nowrap}
.mat-chip.mat-green{background:var(--okbg);color:var(--ok)} .mat-chip.mat-amber{background:var(--warnbg);color:var(--warn)} .mat-chip.mat-red{background:var(--failbg);color:var(--fail)}
.rep-mo{cursor:pointer}
.rep-head{display:flex;justify-content:space-between;margin-bottom:10px}
.rep-title .rt-h{font-size:18px;font-weight:800} .rep-title .rt-s{color:var(--muted);margin-bottom:10px}
.rep-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;margin:8px 0}
.rep-grid>div{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:4px 0}
.rep-grid span{color:var(--muted)} .rep-grid b{font-weight:700}
.rep-kpis{display:flex;gap:8px;margin:12px 0;flex-wrap:wrap}
.rep-kpis .kpi{flex:1;min-width:84px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px;text-align:center}
.rep-kpis .kpi .kn{font-size:20px;font-weight:800} .rep-kpis .kpi .kl{font-size:11px;color:var(--muted)}
.rep-kpis .kpi.ok{border-color:var(--ok)} .rep-kpis .kpi.warn{border-color:var(--warn)} .rep-kpis .kpi.bad{border-color:var(--fail)}
.rep-sec{margin:14px 0 6px;font-size:14px;font-weight:700;border-bottom:2px solid var(--accent);padding-bottom:3px}
.rep-tbl{width:100%;border-collapse:collapse;font-size:13px}
.rep-tbl th,.rep-tbl td{border:1px solid var(--line);padding:5px 8px;text-align:left}
.rep-tbl .num{text-align:right} .rep-tbl .rep-short{color:var(--fail);font-weight:700}
.rep-reasons{margin:4px 0 0 18px} .rep-reasons li{margin:2px 0}
.rep-foot{margin-top:16px;font-size:11px;border-top:1px solid var(--line);padding-top:8px}
.place-mo{cursor:pointer}
.place-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.place-ready{padding:10px 12px;border-radius:10px;font-weight:700;margin-bottom:10px}
.place-ready.ok{background:var(--okbg);color:var(--ok)} .place-ready.warn{background:var(--warnbg);color:var(--warn)}
.place-ready.bad{background:var(--failbg);color:var(--fail)}
.place-stage{display:block} .place-stage.done{border-left:4px solid var(--ok)}
.ps-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ps-items{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.ps-chip{font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px;background:var(--panel2);color:var(--muted)}
.ho-mo{cursor:pointer}
.chip.ho-dispatched{background:var(--okbg);color:var(--ok)} .chip.ho-pdi_fail,.chip.ho-opqc_fail{background:var(--failbg);color:var(--fail)}
.chip.ho-opqc_pass,.chip.ho-pdi_pass,.chip.ho-picked{background:var(--blue-bg);color:var(--accent)}
.chip.ho-handover_req,.chip.ho-assigned{background:var(--warnbg);color:var(--warn)}
.chip.wip-badge{background:var(--warnbg);color:var(--warn);border:1px solid var(--warn);margin-right:5px}
/* FG handover (warehouse side): assign + dispatch + picker cards */
.fg-sec-hd{font-size:13px;font-weight:800;color:var(--txt);text-transform:uppercase;letter-spacing:.5px;margin:8px 2px 8px;padding-left:9px;border-left:3px solid var(--accent)}
.fg-card{display:block;padding:14px}
.fg-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px}
.fg-lbl{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);margin-bottom:10px}
.fg-lbl select{padding:11px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--txt);font-size:15px}
/* IPQC serial timeline (scan → see full journey → verdict) */
.ipqc-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0 4px}
.ipqc-card .t{font-size:16px;font-weight:800}
.ipqc-tl{display:flex;flex-direction:column;gap:6px}
.ipqc-ev{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--line);border-radius:9px}
.ipqc-ev.ok{border-left-color:var(--ok)} .ipqc-ev.bad{border-left-color:var(--fail)} .ipqc-ev.warn{border-left-color:var(--warn)}
.ipqc-ev-l{display:flex;flex-direction:column;gap:1px;min-width:0}
.ipqc-ev-r{display:flex;flex-direction:column;align-items:flex-end;gap:1px;white-space:nowrap;font-weight:700}
/* auto-print setup chip + modal */
/* The kiosk's two status lines share one row — see the comment in index.html. */
.kiosk-foot{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.autoprint-chip{display:inline-block;padding:6px 14px;border-radius:999px;font-size:12px;font-weight:700;cursor:pointer;border:1px solid var(--line);background:var(--panel2);color:var(--muted)}
.autoprint-chip.ap-on{background:var(--okbg);color:var(--ok);border-color:var(--ok)}
.autoprint-chip.ap-off{background:var(--warnbg);color:var(--warn);border-color:var(--warn)}
.autoprint-chip.ap-bad{background:var(--failbg);color:var(--fail);border-color:var(--fail)}
/* ⛔ Chot ka link — landing par, sign-in se pehle. Warn wale rang me taaki jaldi me nazar aa
   jaye, par role-card jitna bada nahi: ye kaam ka raasta nahi hai, zaroorat ka hai. */
/* ⛔ NO MARGIN ON TOP OF A FLEX GAP. `.center-screen` already puts 26px between its children;
   this added 14 more and `.kiosk-foot` 10, so the landing was 24px taller than it looked in the
   rules — which is how it came to overflow a 1024×768 tablet by exactly its own footer. */
.chot-link{display:block;max-width:520px;margin:0 auto;padding:11px 16px;border-radius:var(--r-md);
  border:1px solid var(--warn);background:var(--warnbg);color:var(--warn);
  font-size:14px;font-weight:600;text-align:center;text-decoration:none}
.chot-link:hover{background:var(--warnbg)}
.chot-link:focus-visible{outline:none;box-shadow:var(--focus)}
.ap-statusbox{padding:10px 12px;border-radius:10px;font-weight:700;text-align:center;margin-top:6px}
.ap-statusbox.ap-on{background:var(--okbg);color:var(--ok)}
.ap-statusbox.ap-off{background:var(--warnbg);color:var(--warn)}
.ap-statusbox.ap-bad{background:var(--failbg);color:var(--fail)}
.ap-steps{margin:8px 0 12px;padding-left:20px;line-height:1.85;font-size:14px;color:var(--txt)}
/* handover: assembly serial label re-print */
.ho-serbox{display:flex;gap:10px;align-items:center;margin:6px 2px}
.ho-serbox .scan-input{flex:1}
.ho-serbox .ho-ser-go{white-space:nowrap}
.ho-bad{color:var(--fail);font-weight:700}
/* handover: expandable packed carton -> per-serial print + per-box status/dispatch */
.ho-carton{display:flex;flex-direction:column;align-items:stretch;cursor:default}
.ho-boxchip{flex:none}
.ho-rollup{font-size:13px;color:var(--muted);margin:0 2px 10px;padding:6px 10px;background:var(--panel2);border-radius:8px;display:inline-block}
.ho-cartactions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.ho-cartactions .ho-reprint{margin-left:auto}
.ho-dmeta{overflow-wrap:anywhere}
.chip.cst-packed{background:var(--warnbg);color:var(--warn)}
.chip.cst-warehouse{background:var(--blue-bg);color:var(--accent)}
.chip.cst-dispatched{background:var(--okbg);color:var(--ok)}
/* fast-scan/+1 "syncing…" badge — shows while the queue drains (counter lag, never a loss) */
.scan-sync{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:60;
  background:var(--panel2);color:var(--accent);border:1px solid var(--accent);border-radius:999px;
  padding:6px 14px;font-size:13px;font-weight:700;box-shadow:0 2px 10px rgba(0,0,0,.35)}
/* warehouse FG screen: per-box dispatch rows */
.fg-boxwrap{margin-top:10px;border-top:1px solid var(--line);padding-top:8px;display:flex;flex-direction:column;gap:8px}
.fg-box-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.fg-box-l{display:flex;align-items:center;gap:8px;min-width:0}
.fg-box-btns{display:flex;gap:6px;flex-wrap:wrap}
/* handover MO list: 3-bucket status (Open / Started / Finish) */
.ho-mostat{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.chip.hb-open{background:var(--panel2);color:var(--muted)}
.chip.hb-started{background:var(--warnbg);color:var(--warn)}
.chip.hb-finish{background:var(--okbg);color:var(--ok)}
.ho-cartrow{display:flex;align-items:center;gap:10px;justify-content:space-between}
.ho-cartoggle{flex:1;min-width:0;display:flex;align-items:center;gap:10px;background:none;border:0;text-align:left;cursor:pointer;color:var(--txt);padding:0;font:inherit}
.ho-chev{font-size:12px;color:var(--muted);width:14px;flex:none}
.ho-cartinfo{display:flex;flex-direction:column;gap:2px;min-width:0}
.ho-serials{margin-top:10px;border-top:1px solid var(--line);padding-top:8px;display:flex;flex-direction:column;gap:6px}
.ho-serrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:3px 2px}
.ho-serrow .mono{font-size:14px;word-break:break-all}
.ho-serrow .ho-serprint{white-space:nowrap;flex:none}
/* admin: per-stage label/page sizes */
.ls-row{display:flex;align-items:center;gap:12px;padding:10px 14px;margin:6px 0;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.ls-name{flex:1;font-weight:700}
.ls-inp{display:flex;align-items:center;gap:6px}
.ls-inp input{width:72px;padding:8px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--txt);font-size:15px;text-align:center}
.ls-inp span{color:var(--muted);font-size:13px}
.rollup-wrap{max-width:880px;margin:0 auto;padding:16px}
.rollup-totals{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.rt-card{flex:1;min-width:90px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}
.rt-card .kn{font-size:24px;font-weight:800} .rt-card .kl{font-size:12px;color:var(--muted)}
.rt-card.bad{border-color:var(--fail)}
.rollup-list{display:flex;flex-direction:column;gap:10px}
.sb-view{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}   /* four tabs since 29-Sep — at 390 px the fourth sat off the edge, untappable */
.sb-view .sb-v.on{background:var(--btn-primary-bg);color:var(--btn-primary-ink);border-color:var(--btn-primary-bg)}
.sb-sup{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;font-size:14px}
.sb-p{padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid var(--line)}
.sb-p.in{color:var(--ok);border-color:var(--ok)} .sb-p.out{color:var(--fail);border-color:var(--fail)} .sb-p.na{color:var(--muted)}
.sb-pick{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.sb-pick button{text-align:left;min-width:0}
/* ⛔ `.card` IS A TAPPABLE ROW, NOT A PANEL — it is flex, centred, space-between, with
   cursor:pointer. Reusing it for the Production Head's report put every heading to the LEFT of
   its own table and told the mouse the block was clickable when it is not. The report's blocks
   get their own panel, same colours, honest layout. */
.rpt-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--elev-1);display:block}
.rpt-card>b{display:block;font-size:16px;margin-bottom:2px}
.rpt-card .rep-tbl{margin-top:10px}
/* A line that is down RIGHT NOW is not a statistic — it is somebody standing still. It gets the
   warning edge so it reads before the tables under it, and it sits inside the same panel so it
   cannot be mistaken for a separate screen. */
.dt-live{margin-top:10px;border-left:4px solid var(--warn);background:var(--warnbg);
  border-radius:8px;padding:10px 12px}
.dt-live>b{display:block;color:var(--warn)}
.dt-live .rep-tbl{margin-top:6px}
/* Wajah ki suchi — ungli se dabane layak, wrap hoti hui. Ek bhi typing ki jagah nahi. */
.dt-reasons{display:flex;flex-wrap:wrap;gap:8px}
/* 44px, because this is pressed with a glove on, in a hurry, by somebody whose line has stopped. */
.dt-reasons .chip{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;font-size:15px;border-radius:999px}
.line-card{cursor:pointer;border-left:4px solid var(--muted)}
.line-card.ln-bad{border-left-color:var(--fail)} .line-card.ln-warn{border-left-color:var(--warn)} .line-card.ln-ok{border-left-color:var(--ok)}
.chip.ln-chip-bad{background:var(--failbg);color:var(--fail)} .chip.ln-chip-warn{background:var(--warnbg);color:var(--warn)} .chip.ln-chip-ok{background:var(--okbg);color:var(--ok)}
.admin-wrap{max-width:760px;margin:0 auto;padding:16px}
.admin-bar{display:flex;gap:10px;margin-bottom:14px;align-items:center} .admin-bar .scan-input{flex:1}
.admin-user{cursor:pointer} .admin-user.inactive{opacity:.55}
.chip.off{background:var(--failbg);color:var(--fail)}
.admin-form .fl{display:block;font-size:12px;color:var(--muted);margin:10px 0 4px}
.admin-form .scan-input,.admin-form select{width:100%}
.uf-checks{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.uf-chk{display:flex;align-items:center;gap:5px;font-size:14px;background:var(--panel2);padding:6px 10px;border-radius:8px}
.admin-tabs{display:flex;gap:8px;margin-bottom:14px}
.admin-tab{flex:1;padding:10px;border-radius:10px;background:var(--panel2);color:var(--muted);font-weight:700;border:1px solid var(--line);cursor:pointer}
.admin-tab.active{background:var(--btn-primary-bg);color:var(--btn-primary-ink);border-color:var(--accent)}
.admin-role{cursor:pointer}

/* R4 — tablet / accessibility: touch-target minimums (shop-floor, gloves + fast taps) + keyboard focus */
button.small{min-height:42px}
#scn-list .chip-x{width:44px;height:44px}
.sb-caret{width:44px;height:44px}
.recent-ops .ro-chip:focus-visible,.role-card:focus-visible,.tile:focus-visible,.card:focus-visible,
.key:focus-visible,.sup-nav-btn:focus-visible,.admin-tab:focus-visible{outline:none;box-shadow:var(--focus)}
/* R5 — error/warn toasts are tappable-to-dismiss (they now linger; ok toasts stay pass-through) */
.toast.error,.toast.warn{pointer-events:auto;cursor:pointer}
/* (the old `.inward-label .cl-inmark` green stamp lived here. The PO inward sticker no longer has a
   layout of its own — both inward flows print `.clm.iw` — and nothing rendered this class any more.) */
/* inward box screen — progress bar + persisted box list (MNC-level) */
.inw-prog{height:7px;background:var(--sunk);border-radius:5px;overflow:hidden;margin-top:12px}
.inw-prog #inwb-bar{height:100%;width:0;background:linear-gradient(90deg,var(--accent),#22d3ee);transition:width .45s cubic-bezier(.2,.7,.2,1);border-radius:5px}
.inw-search{display:flex;align-items:center;gap:10px;margin:0 2px 12px}
.inw-search input{flex:1;min-width:0;box-sizing:border-box;background:rgba(255,255,255,.06);color:inherit;border:1px solid rgba(255,255,255,.18);border-radius:4px;padding:12px 14px;font-size:15px}
.inw-search span{flex:none}
.inw-hd{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--txt);padding-left:9px;border-left:3px solid var(--accent);margin:8px 2px 10px}
/* boxes grouped pallet-wise: each pallet = a card, header shows box + pcs count, rows nested under it */
.inw-palgrp{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--elev-1);margin:10px 0;overflow:hidden}
.inw-palhd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;background:var(--blue-bg);border-bottom:1px solid var(--accent)}
.inw-palhd .iph-pal{font-size:15px;font-weight:800;color:var(--accent);letter-spacing:.01em}
.inw-palhd .iph-cnt{font-size:12.5px;font-weight:700;color:var(--txt);font-variant-numeric:tabular-nums;white-space:nowrap}
.inw-box-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-top:1px solid var(--line)}
.inw-palgrp .inw-box-row:first-of-type{border-top:none}
.inw-box-row .ibr-l{display:flex;flex-direction:column;gap:3px;min-width:0}
.inw-box-row .ibr-l b{font-size:15px}
.inw-box-row .ibr-sub{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
/* IQC discrepancy flag (QC sees short/extra; QC only does quality — inventory/accounts handle qty in Odoo) */
.iq-disc{font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;letter-spacing:.03em;white-space:nowrap;vertical-align:middle}
.iq-disc.short{background:var(--failbg);color:var(--fail);border:1px solid var(--red-ln)}
.iq-disc.extra{background:var(--warnbg);color:var(--warn);border:1px solid var(--amber-ln)}
.iq-disc.ok{background:var(--okbg);color:var(--ok);border:1px solid var(--green-ln)}

/* ═══════════ MATERIAL HISAAB (MO reconciliation) — control-panel ledger layout ═══════════ */
/* hero: MO identity + the whole hisaab in one glance (component-count segments) */
.mr-hero{position:relative;overflow:hidden;background:
  radial-gradient(120% 180% at 0% 0%, var(--surface-2) 0%, var(--panel) 55%);
  border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:14px;box-shadow:var(--elev-1)}
.mr-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg, transparent 0 46px, rgba(120,150,210,.045) 46px 47px)}
.mr-hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.mr-mo{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:24px;font-weight:800;letter-spacing:.02em}
.mr-mo-sub{color:var(--muted);font-size:13px;margin-top:3px}
.mr-balance{--bal-c:var(--ok);text-align:right}
.mr-balance .mb-num{font-size:38px;font-weight:900;line-height:1;color:var(--bal-c);
  font-variant-numeric:tabular-nums;text-shadow:0 0 22px color-mix(in srgb, var(--bal-c) 45%, transparent)}
.mr-balance .mb-lbl{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.mr-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:16px 0 12px}
.mr-stat{background:rgba(11,18,32,.55);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px}
.mr-stat .ms-n{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.15}
.mr-stat .ms-l{font-size:11.5px;color:var(--muted);font-weight:700;letter-spacing:.05em;text-transform:uppercase}
/* the hisaab bar: every component as a segment — green done · amber leftover · red phantom */
.mr-bar{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--panel2);
  border:1px solid var(--line)}
.mr-bar span{transform-origin:left;animation:mrGrow .7s cubic-bezier(.2,.8,.2,1) both}
.mr-bar .sg-ok{background:linear-gradient(180deg,var(--ok),var(--green-ln))}
.mr-bar .sg-warn{background:linear-gradient(180deg,var(--warn),var(--amber-ln))}
.mr-bar .sg-bad{background:linear-gradient(180deg,var(--fail),var(--fail))}
@keyframes mrGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.mr-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;font-size:12.5px;color:var(--muted)}
.mr-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
/* attention cards — the rows that actually need a human */
.mr-sec-h{display:flex;justify-content:space-between;align-items:baseline;margin:18px 2px 10px;font-size:16px;font-weight:800}
.mr-sec-h .muted{font-weight:600}
.mr-attn{background:var(--panel);border:1px solid var(--amber-ln);border-left:5px solid var(--warn);
  border-radius:var(--radius);padding:14px 16px;margin-bottom:10px;box-shadow:var(--elev-1);
  animation:mrIn .35s ease both}
.mr-attn.is-phantom{border-color:var(--red-ln);border-left-color:var(--fail)}
.mr-attn.is-pend{border-color:var(--blue-ln);border-left-color:var(--accent)}
@keyframes mrIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mr-attn-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.mr-attn-id b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:19px;letter-spacing:.02em}
.mr-attn-id .muted{font-size:13px}
.mr-attn-bal{font-size:24px;font-weight:900;font-variant-numeric:tabular-nums;color:var(--warn);white-space:nowrap}
.mr-attn.is-phantom .mr-attn-bal{color:var(--fail)}
.mr-minibar{display:flex;height:9px;border-radius:999px;overflow:hidden;background:var(--panel2);
  border:1px solid var(--line);margin:10px 0 8px}
.mr-minibar span{animation:mrGrow .6s ease both}
.mr-minibar .sg-laga{background:var(--ok)}.mr-minibar .sg-scrap{background:var(--fail)}
.mr-minibar .sg-wapas{background:var(--blue)}.mr-minibar .sg-bacha{background:var(--warn)}
.mr-chiprow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mr-kv{font-size:12.5px;color:var(--muted);background:var(--panel2);border:1px solid var(--line);
  border-radius:999px;padding:4px 10px;font-variant-numeric:tabular-nums}
.mr-kv b{color:var(--txt)}
.mr-kv.k-laga b{color:var(--ok)}.mr-kv.k-scrap b{color:var(--fail)}.mr-kv.k-wapas b{color:var(--blue)}
.mr-attn-act{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.mr-attn-act button{flex:1;min-width:130px;padding:12px 14px}
/* done components — compact tile grid, not a mile-long list */
.mr-donegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.mr-tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:9px 11px;
  display:flex;justify-content:space-between;align-items:center;gap:6px;min-width:0;
  animation:mrIn .3s ease both}
.mr-donegrid .mr-tile:nth-child(-n+18){animation-delay:calc(var(--i,0)*18ms)}
.mr-tile b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mr-tile .mt-q{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.mr-tile .mt-ok{color:var(--ok);font-weight:900;font-size:15px;flex:none}
/* sticky action dock */
.mr-dock{position:sticky;bottom:0;z-index:4;margin-top:16px;padding:12px;border-radius:var(--radius);
  background:rgba(19,28,46,.92);backdrop-filter:blur(8px);border:1px solid var(--line);box-shadow:var(--elev-2);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mr-dock .mr-closed{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--ok);white-space:nowrap}
.mr-dock button{margin:0}
/* history timeline rail */
.mr-hist{margin-top:16px}
.mr-hist .mh-item{position:relative;padding:10px 0 10px 26px;border-top:1px solid var(--line);font-size:14px}
.mr-hist .mh-item::before{content:"";position:absolute;left:6px;top:16px;width:9px;height:9px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 3px rgba(59,130,246,.18)}
.mr-hist .mh-item.h-scrap::before{background:var(--fail);box-shadow:0 0 0 3px var(--failbg)}
.mr-hist .mh-item.h-done::before{background:var(--ok);box-shadow:0 0 0 3px var(--okbg)}
.mr-hist .mh-meta{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .mr-balance .mb-num{font-size:30px}
  .mr-mo{font-size:20px}
  .mr-attn-act button{min-width:110px}
}
@media (max-width:640px){
  .mr-dock{padding:10px}
  .mr-dock button.big{font-size:15px;padding:13px 14px}
  .mr-dock .mr-closed{font-size:14px}
}

/* ── hisaab as an Excel-style ledger sheet (owner request: rows × columns) ── */
/* NOTE: no forced height / own scrollbar here on purpose — that reads as "everything trapped in
   one little box" (owner feedback). The table flows in the normal page like any other section;
   the PAGE scrolls, and the header sticks to the real window scroll (top offset = topbar height,
   set inline by JS in renderReconcil so it freezes just under the topbar, not on top of it). */
.mr-sheet{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);box-shadow:var(--elev-1)}
.mr-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;table-layout:auto}
.mr-tbl thead th{position:sticky;top:var(--mr-top,0px);z-index:2;background:var(--surface-2);color:var(--muted);
  font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;text-align:right;
  padding:10px 12px;border-bottom:2px solid var(--line);white-space:nowrap}
.mr-tbl td{padding:9px 12px;border-bottom:1px solid var(--line-2);border-right:1px solid var(--line-2);
  vertical-align:middle}
.mr-tbl td:last-child,.mr-tbl th:last-child{border-right:0}
.mr-tbl tbody tr:nth-child(even) td{background:rgba(255,255,255,.018)}
.mr-tbl tbody tr:hover td{background:rgba(59,130,246,.07)}
.mr-tbl .rn{width:34px;text-align:right;color:var(--ink-4);font-size:12px;font-variant-numeric:tabular-nums;
  background:rgba(11,18,32,.5)}
.mr-tbl .cc{min-width:190px}
.mr-tbl .cc b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15.5px;letter-spacing:.02em}
.mr-tbl .cc .cn,.mr-tbl .cs .cn{display:block;font-size:11.5px;color:var(--muted);margin-top:1px;
  max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mr-tbl .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.mr-tbl .n-laga{color:var(--ok)}.mr-tbl .n-scrap{color:var(--fail)}.mr-tbl .n-wapas{color:var(--blue)}
/* Excel-wali conditional formatting on the Balance column */
.mr-tbl .c-bal{font-weight:900;font-size:16px}
.mr-tbl .c-bal.b-ok{background:var(--okbg)!important;color:var(--ok)}
.mr-tbl .c-bal.b-warn{background:var(--warnbg)!important;color:var(--warn)}
.mr-tbl .c-bal.b-bad{background:var(--failbg)!important;color:var(--fail)}
/* attention rows float to the top with a tint + left notch */
.mr-tbl tr.r-warn td{background:var(--warnbg)}
.mr-tbl tr.r-warn td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.mr-tbl tr.r-bad td{background:var(--failbg)}
.mr-tbl tr.r-bad td:first-child{box-shadow:inset 3px 0 0 var(--fail)}
.mr-tbl .st{font-weight:800;font-size:12.5px;white-space:nowrap}
.mr-tbl .st.ok{color:var(--ok)}.mr-tbl .st.warn{color:var(--warn)}
.mr-tbl .st.bad{color:var(--fail)}.mr-tbl .st.pend{color:var(--blue)}
.mr-tbl .ca{white-space:nowrap}
.mr-tbl .ca button{padding:8px 12px;font-size:13.5px;margin-right:6px;border-radius:9px}
.mr-tbl .ca .mt-ok{font-size:16px}
/* phone only: 9 columns genuinely don't fit a 390px screen — a horizontal SWIPE strip here is a
   normal, expected mobile pattern (unlike a boxed vertical scroll-pane) so it's scoped to phone only. */
@media (max-width:640px){
  .mr-tbl{font-size:14px}
  .mr-tbl .cc{min-width:150px}
  .mr-sheet{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .mr-tbl{min-width:760px}
  /* the swipe-strip becomes its own tiny scroll frame (overflow-x forces overflow-y too), which
     would misplace the --mr-top-offset header mid-table; pin it to the frame's own top instead */
  .mr-tbl thead th{top:0}
}

/* ===== MYMEE master-carton label (industrial B/W, Code128) — admin-selectable design 'mymee' ===== */
/* .clm-frame = full label page; padding = white margin so the black frame (all 4 sides) sits INSIDE the
   label. Even white gap all around = aligned; a missing/clipped side = operator instantly sees a cut. */
/* asymmetric margin: L/R 3mm (print offset tolerance for the frame lines) but top/bottom only 1.2mm
   (vertical space is tight — bigger top/bottom clipped the serial list). */
.clm-frame{box-sizing:border-box;background:#fff;padding:1.2mm 3mm;overflow:hidden}
/* border-radius = the carton's own edge. overflow:hidden clips the full-bleed black blocks (.m-fg,
   .m-ft .fc) to the same curve, so the corner reads as one smooth edge instead of a black square
   poking out of a rounded frame. Radius stays small: a big one would eat into the barcode rows. */
.clm{color:#000;background:#fff;box-sizing:border-box;width:100%;height:100%;padding:0;border:0.6mm solid #000;border-radius:2.4mm;display:flex;flex-direction:column;font-family:Arial,Helvetica,sans-serif;overflow:hidden}
.clm *{box-sizing:border-box}
.clm .m-hd{display:flex;align-items:stretch;border-bottom:0.7mm solid #000;flex:0 0 12.5mm}
.clm .m-brand{flex:0 0 29mm;border-right:0.7mm solid #000;display:flex;flex-direction:column;justify-content:center;padding:0 2.5mm;overflow:hidden}
.clm .m-brand b{font-size:16pt;font-weight:900;letter-spacing:.5px;line-height:1}
.clm .m-brand span{font-size:5.2pt;font-weight:700;letter-spacing:.22em;margin-top:1mm;white-space:nowrap}
/* brand with NO tagline (non-MYMEE): center the name, auto-shrink long names to fit the 29mm cell */
.clm .m-brand-solo{align-items:center;text-align:center}
.clm .m-brand-solo b{font-size:15pt;line-height:1.05;word-break:break-word}
.clm .m-brand-empty{border-right:0.7mm solid #000}   /* no brand: keep the cell + divider, blank inside */
.clm .m-prod{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 1.5mm;min-width:0}
.clm .m-prod b{font-size:9pt;font-weight:800;line-height:1.12;max-height:8mm;overflow:hidden}
.clm .m-prod b.fit2{font-size:7.6pt;max-height:8.6mm}
.clm .m-prod b.fit3{font-size:6.6pt;line-height:1.08;max-height:8.8mm}
.clm .m-prod b.fit4{font-size:5.8pt;line-height:1.05;max-height:9mm}
.clm .m-brand-prod b{font-size:8.2pt;letter-spacing:.3px;white-space:nowrap;word-break:normal}
.clm .m-prod span{font-family:monospace;font-size:7.5pt;font-weight:700;margin-top:.8mm;letter-spacing:.4px}
.clm .m-fg{flex:0 0 16mm;border-left:0.7mm solid #000;background:#000;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.clm .m-fg b{font-size:26pt;font-weight:900;line-height:1;letter-spacing:.5px}
/* three-letter kind (SFG / MAT / AST / SVC): 26pt runs past the 16mm cell — two letters is what fits */
.clm .m-fg b.b3{font-size:17pt;letter-spacing:.2px}
.clm .m-sec{border-bottom:0.55mm solid #000;padding:1mm 2.5mm 1.4mm}
.clm .m-sechd{display:flex;align-items:center;gap:1.6mm;min-width:0}
.clm .m-n{background:#000;color:#fff;font-size:5.8pt;font-weight:900;width:3.2mm;height:3.2mm;display:flex;align-items:center;justify-content:center;flex:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.clm .m-lb{font-size:7pt;font-weight:800;letter-spacing:.14em;white-space:nowrap}
.clm .m-tag{border:0.4mm solid #000;font-size:5.2pt;font-weight:800;letter-spacing:.05em;padding:.3mm 1.1mm;white-space:nowrap}
.clm .m-val{margin-left:auto;font-family:monospace;font-size:11.5pt;font-weight:800;letter-spacing:.4px;white-space:nowrap}
.clm .m-bar{margin-top:.8mm}
.clm .m-bar svg{display:block;width:100%}
.clm .m-s1q{display:flex;flex-direction:row;gap:2mm;align-items:stretch}
.clm .m-s1l{flex:1;min-width:0;display:flex;flex-direction:column}
.clm .m-qr{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;border-left:0.55mm solid #000;padding-left:2mm}
.clm .m-qr svg{width:17mm;height:17mm;display:block}
.clm .m-s1q .m-val{font-size:10pt}
.clm .m-qr span{font-size:5.2pt;font-weight:800;letter-spacing:.1em;margin-top:.3mm}
.clm .m-stats{display:flex;border-bottom:0.55mm solid #000;flex:0 0 13.5mm}
.clm .m-st{flex:1;padding:1mm 2.5mm;border-right:0.55mm solid #000;display:flex;flex-direction:column;min-width:0}
.clm .m-st:last-child{border-right:none;flex:1.5;justify-content:center;gap:.8mm}
.clm .m-st .k{font-size:6.2pt;font-weight:800;letter-spacing:.14em}
.clm .m-st .v{font-size:19pt;font-weight:900;line-height:1;margin-top:auto}
.clm .m-st .v small{font-size:7.5pt;font-weight:800}
/* Label ABOVE value, not beside it. Side-by-side left the value ~18mm and clipped it — "SMALL CARTON"
   printed as "SMALL CARTOM", and a longer box name would lose more. Stacked, the value gets the whole
   cell width, so box names can't be cut. */
.clm .m-kv{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.3mm;min-width:0}
.clm .m-kv .k{font-size:6.2pt;font-weight:800;letter-spacing:.12em;flex:none}
.clm .m-kv .v2{font-family:monospace;font-size:8pt;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.clm .m-serials{flex:1;padding:1.2mm 2.5mm;overflow:hidden}
.clm .m-serhd{font-size:7pt;font-weight:800;letter-spacing:.14em}
.clm .m-serlist{display:grid;grid-template-columns:repeat(3,1fr);gap:.7mm 2mm;margin-top:1.1mm;font-family:monospace;font-size:6.8pt;font-weight:700}
/* ---- supervisor variant (no serial list): fill the 100mm, don't leave a hole ----
   Fixed anchors (header/stats/footer) grow a little; ALL remaining slack goes to the barcode blocks
   via flex, never hardcoded mm. That matters: the carton page size is admin-settable, so a fixed
   sum would re-open the hole at one size and OVERFLOW (= a cut label) at another. Flex can do neither.
   BOX ID gets the biggest share — it is the one barcode the floor actually scans. */
.clm.clm-nos .m-sec{display:flex;flex-direction:column;min-height:0}
.clm.clm-nos .m-s1{flex:1.5 1 0}
.clm.clm-nos .m-s1.m-s1q{flex-direction:row}
.clm.clm-nos .m-s1l .m-bar{flex:1;min-height:0}
.clm.clm-nos .m-s2{flex:1 1 0}
.clm.clm-nos .m-s3{flex:1 1 0}
.clm.clm-nos .m-bar{flex:1;min-height:0;display:flex;align-items:stretch;margin-top:1mm}
/* beats code128Svg()'s inline height:Xmm. Only the BAR HEIGHT stretches — Code128 carries no data in
   its height, and preserveAspectRatio="none" keeps bar WIDTHS driven by the viewBox, so nothing the
   scanner reads is distorted. */
.clm.clm-nos .m-bar svg{height:100% !important;width:100%}
.clm.clm-nos .m-stats{flex:0 0 16mm}
.clm.clm-nos .m-st .v{font-size:22pt}
.clm.clm-nos .m-ft{flex:0 0 7mm;font-size:7.4pt}
.clm .m-ft{border-top:0.7mm solid #000;display:flex;align-items:stretch;flex:0 0 5.5mm;font-size:6.8pt;font-weight:800;letter-spacing:.1em}
.clm .m-ft > div{display:flex;align-items:center;padding:0 2.5mm;white-space:nowrap}
.clm .m-ft .fl{flex:1}
.clm .m-ft .fc{background:#000;color:#fff;flex:1.2;justify-content:center;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.clm .m-ft .fr{flex:1;justify-content:flex-end}
/* inward master carton (Label Printer) — big product QR + code + barcode */
/* ===== THE INWARD STICKER (4x4 in) — one layout, PO or no PO (owner, 16-Sep-2026) =====
   Seven full-width bands on one grid. ⛔ THE ARITHMETIC IS THE DESIGN: a 100mm label has 96.4mm
   inside the frame (100 − 2×1.2mm page margin − 2×0.6mm border). The six fixed bands take
   11.5+12.5+12.5+14+11+8 = 69.5mm and the QR band flexes into the remaining ~27mm — and what is
   inside that band flexes too, so it fits whatever it is given. Get this wrong and the bands do
   not clip, they SPILL: an early draft gave the QR 30mm and printed the scan caption on top of the
   QUANTITY heading, and the first printed sticker put the ITEM CODE caption on a rule. A band
   clips at its PADDING box, so an overflow spends the padding — where the rule is — before it
   disappears. Measure the columns against `clientHeight − padding`, in print media. */
.clm.iw > *{min-height:0;overflow:hidden}
.clm.iw .iw-hd{flex:0 0 11.5mm}
.clm.iw .iw-mark{flex:0 0 26mm;border-right:0.7mm solid #000;display:flex;align-items:center;justify-content:center}
.clm.iw .iw-mark b{font-size:15pt;font-weight:900;letter-spacing:.5px}
.clm.iw .iw-kind{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:0 2mm;font-size:9.5pt;font-weight:800;letter-spacing:.12em;min-width:0;overflow-wrap:anywhere}
/* THE NAME GETS ITS OWN BAND, AND IS NEVER CUT. It used to share the 12.5mm header with the badge
   under `max-height:8mm;overflow:hidden`, so a long name simply lost its tail on the printed
   sticker — the owner sent one back. Full width, centred, and the class steps the size down by
   length (~19 characters per line at 13pt); at 92 characters three lines still fit inside 15mm. */
.clm.iw .iw-name{flex:0 0 12.5mm;border-bottom:0.7mm solid #000;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:1mm 2.5mm;min-width:0}
.clm.iw .iw-name b{font-weight:800;line-height:1.12;overflow-wrap:anywhere}
.clm.iw .iw-name.n1 b{font-size:13pt}
.clm.iw .iw-name.n2 b{font-size:11pt}
.clm.iw .iw-name.n3 b{font-size:9.5pt}
.clm.iw .iw-name.n4 b{font-size:8pt;line-height:1.08}
.clm.iw .iw-name.n5 b{font-size:6.6pt;line-height:1.06}   /* the kit names: one is 336 characters */
.clm.iw .iw-qrsec{display:flex;align-items:center;gap:3.5mm;padding:2mm 3mm;flex:1;
  border-bottom:0.7mm solid #000;min-height:0}
/* ⛔ THIS BAND'S CONTENTS SCALE TO IT — they are not sized to fit and hoped for. Printed on the
   real TE310 (owner's photo, 16-Sep-2026) the "ITEM CODE" caption sat ON the band's top rule and
   the barcode crossed the bottom one. Measured afterwards, in print media: the band leaves 20.6mm
   between its paddings, the QR column wanted 22.5mm and the code column 25.4mm. Nothing warned,
   because a band clips at its PADDING box — an overflow spends the 2mm of padding first, and that
   padding is exactly where the rule is drawn. So the QR is `flex` with `aspect-ratio:1` and the
   barcode is `flex` too: both give back whatever the band is short of, at any page size, instead
   of printing over its edges. */
.clm.iw .iw-qr{flex:none;width:19mm;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.6mm;min-height:0}
.clm.iw .iw-qr svg{flex:1 1 auto;min-height:0;width:auto;height:auto;aspect-ratio:1/1;display:block}
.clm.iw .iw-qr span{flex:none;font-size:5pt;font-weight:800;letter-spacing:.08em;white-space:nowrap}
.clm.iw .iw-codes{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;
  justify-content:center;gap:.5mm;min-height:0}
.clm.iw .iw-codes .m-lb{flex:none;font-size:6.5pt}
.clm.iw .iw-code{flex:none;font-family:monospace;font-size:19pt;font-weight:900;letter-spacing:.5px;
  line-height:1.05;overflow-wrap:anywhere}
/*                            ^^^^ measured, not guessed: the band leaves 22.9mm between its
   paddings and this column needs 2.3 (caption) + 7.0 (19pt code) + 9 (barcode) + 1 (gaps) =
   19.3mm. 3.6mm of slack — enough that a hairline rule is never touched, and the code stays the
   size a storeman reads. */
.clm.iw .m-bar{flex:0 1 auto;min-height:0;margin:0;display:flex;align-items:flex-end}
/* `code128Svg()` writes `style="height:9mm"` INLINE, and an inline style beats this file — a
   `height` here would have been dead CSS. `max-height` still caps it, so the barcode keeps its
   9mm where there is room and shrinks instead of crossing a rule where there is not. */
.clm.iw .m-bar svg{max-height:100%}
.clm.iw .iw-stats{flex:0 0 14mm}
.clm.iw .m-stats .m-st:last-child{flex:1;justify-content:flex-start;gap:0}   /* both halves equal */
/* THE BOX NUMBER, READ FROM ACROSS THE FLOOR (owner, 16-Sep-2026: "box numbers bhi bada karo and
   dur se visible ho jye aisa bnao"). It used to be one of four 8pt cells in the grid below. It is
   the one string a person matches against a pallet, a list or a phone call, so it gets its own
   band and the largest type on the label; `.b-long` steps it down only when the number itself is
   long enough to need it (measured: 15 characters fit 92mm at 19pt monospace). */
.clm.iw .iw-box{flex:0 0 12.5mm;border-bottom:0.7mm solid #000;display:flex;flex-direction:column;
  justify-content:center;padding:1mm 2.5mm;min-width:0}
.clm.iw .iw-box span{font-size:6pt;font-weight:800;letter-spacing:.14em;line-height:1}
.clm.iw .iw-box b{font-family:monospace;font-size:19pt;font-weight:900;line-height:1.1;
  letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.6mm}
/* What only a PO box carries. A box with no PO prints "—" in all three rather than dropping the
   band: same label, same places, whichever way the box came in. */
/* ⛔ BOTH ROWS EXPLICIT. With `auto` rows the second one took whatever was left and its values
   (RECEIPT, SUPPLIER) were clipped by the band's own overflow — the labels printed, the values did
   not. Two equal rows of 8mm hold a 5.8pt caption over an 8.5pt value with room to spare. */
.clm.iw .iw-po{flex:0 0 11mm;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr);
  border-bottom:0.7mm solid #000}
/*                                       ^^^^^ the supplier's name is the long one of the three
   (J.B. ENGG. WORKS (M.V.)), so its cell gets the extra width rather than the ellipsis. */
/*                            ^^^^^^^^^^^^^^ minmax(0,1fr), not 1fr: `1fr` is minmax(AUTO,1fr), so the
   first row grew to its content and squeezed the second — RECEIPT and SUPPLIER printed their
   captions and lost their values off the bottom edge. */
.clm.iw .iw-po > div{display:flex;flex-direction:column;justify-content:center;gap:.2mm;
  padding:.6mm 2.5mm;min-width:0;border-right:0.55mm solid #000;border-bottom:0.55mm solid #000}
/* ⛔ THE CELL MUST BE TALLER THAN ITS CONTENTS, not the same height. Caption + value came to 24px
   in a 21px content box, so with `overflow:hidden` on the value the glyphs were shaved off at the
   bottom — BOX and PO printed as half-letters while RECEIPT and SUPPLIER (no bottom border, 0.55mm
   more room) looked fine. 9mm rows, 0.6mm padding: 27px of box for 21px of content. */
.clm.iw .iw-po > div{border-bottom:none}
.clm.iw .iw-po > div:last-child{border-right:none}
.clm.iw .iw-po span{font-size:5.4pt;font-weight:800;letter-spacing:.12em;line-height:1.1}
.clm.iw .iw-po b{font-family:monospace;font-size:7.6pt;font-weight:800;white-space:nowrap;
  line-height:1.25;overflow:hidden;text-overflow:ellipsis}
/* the supplier is a NAME, not a code: let it use two lines rather than end in an ellipsis. PO and
   RECEIPT stay on one line — a code broken across lines is harder to read, not easier. */
.clm.iw .iw-po > div:last-child b{white-space:normal;line-height:1.15;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
/*             ^^^^^^^^^^^^^^^ `overflow:hidden` clips to the LINE BOX, and at the default line
   height a monospace box's own descenders sat outside it: BOX and PO printed with their bottoms
   shaved off. 1.3 gives the glyphs room inside the box that does the clipping. */
/* TWO DATES, AND THEY ARE NOT THE SAME DAY. INWARD is when we counted the box; MFG is the date
   printed on the vendor's box. A sticker that shows one of them invites the reader to assume the
   other. Equal halves so neither looks like the footnote of the other. */
.clm.iw .m-ft{flex:0 0 8mm;font-size:7pt}
.clm.iw .iw-ft .fl, .clm.iw .iw-ft .fc{flex:1;gap:1.4mm}
.clm.iw .iw-ft b{font-family:monospace;font-size:8.5pt;font-weight:900;letter-spacing:.3px}

.clm .ip-qrsec{display:flex;align-items:center;gap:3.5mm;padding:2.5mm 3mm;flex:1;border-bottom:0.7mm solid #000}
.clm .ip-qr{flex:none;width:34mm;height:34mm}
.clm .ip-qr svg{width:100%;height:100%;display:block}
.clm .ip-qrx{flex:1;min-width:0}
.clm .ip-qrx .m-lb{font-size:8pt;font-weight:800;letter-spacing:.14em}
.clm .ip-code{font-family:monospace;font-size:19pt;font-weight:900;letter-spacing:.5px;margin-top:1.5mm}

/* changeover banner — planner moved this operator to a new task while their old one was open */
.co-banner{position:sticky;top:0;z-index:29;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--warnbg);color:var(--warn);border-bottom:1px solid var(--amber-ln);
  padding:9px 14px;font-size:13.5px;font-weight:600}
.co-banner button{flex:none;white-space:nowrap}
.co-banner.hidden{display:none}
/* my work history — simple timeline list */
.hist-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;
  border-bottom:1px solid var(--line);background:var(--panel);border-radius:var(--r-sm);margin-bottom:8px}
.hist-item.is-co{border-left:3px solid var(--accent)}
.hist-item .hi-l b{display:block;font-size:14.5px}
.hist-item .hi-l span{font-size:12.5px;color:var(--muted)}
.hist-item .hi-r{font-weight:800;font-size:16px;white-space:nowrap}

/* ===== SUPERVISOR-ONLY PRODUCTION MODE (SM3/SM4/SM5) — phone-first =====
   These three panels are the whole job on a line with no operator tablets. Designed for a supervisor
   holding a phone on the floor: one column, thumb-sized targets, numeric keypads, no wide tables.
   They scale up on a desk screen rather than the other way round. */
.sm-wrap{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.sm-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px}
.sm-card.sm-good{border-color:var(--ok);background:rgba(34,197,94,.08)}
.sm-card.sm-bad{border-color:var(--bad);background:rgba(240,85,95,.08)}
.sm-h{font-size:18px;font-weight:800;margin-bottom:8px}
.sm-help{color:var(--muted);font-size:13.5px;line-height:1.65;margin:10px 0 0}
.sm-empty{color:var(--muted);font-size:14px;padding:10px 0}
.sm-lb{display:block;font-size:13px;font-weight:700;color:var(--muted);margin:14px 0 6px}
/* 16px min = iOS won't zoom the page when the field is focused */
.sm-in{width:100%;font-size:16px;padding:14px;border-radius:12px;border:1px solid var(--line);
  background:var(--panel2);color:var(--txt);min-height:52px}
.sm-in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(90,140,255,.18)}
.sm-num{font-size:24px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums}
.sm-scanrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.sm-scanrow button{min-height:48px;font-size:15px;font-weight:700;border-radius:12px;min-width:0}
.sm-scan{font-size:18px;font-family:var(--mono,monospace);letter-spacing:.02em}
.sm-btn{width:100%;min-height:56px;font-size:17px;font-weight:800;border-radius:14px;margin-top:16px}
.sm-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
.sm-kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.sm-kv:last-child{border-bottom:0}
.sm-boxes{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.sm-box{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel2);font-size:14px}
.sm-box b{font-family:var(--mono,monospace)}
.sm-box span{margin-left:auto}
.sm-box.done{border-color:var(--ok);background:rgba(34,197,94,.1)}
/* Reprint one box. Thumb-sized (44px) — this gets tapped on a phone on the floor. */
.sm-box .sm-re{min-width:44px;min-height:44px;padding:0;border-radius:10px;font-size:17px;line-height:1;flex:0 0 auto}
/* drill-down: order -> stage -> qty. Rows are big tap targets, not dropdown options. */
.sm-pick{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.sm-pk{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;width:100%;
  min-height:60px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);
  color:var(--txt);text-align:left;cursor:pointer}
.sm-pk:hover,.sm-pk:focus-visible{border-color:var(--accent)}
.sm-pk b{font-size:15px;font-weight:800}
.sm-pk span{grid-column:1;color:var(--muted);font-size:12.5px}
.sm-pk .sm-pk-go{grid-column:2;grid-row:1/3;color:var(--muted);font-size:20px;font-weight:800}
/* the trail back — always visible, so "what am I filling?" never needs remembering */
.sm-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:10px;font-size:13px}
.sm-cr{min-height:36px;padding:6px 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel2);
  color:var(--accent);font-size:13px;font-weight:700;cursor:pointer}
.sm-cr:hover,.sm-cr:focus-visible{border-color:var(--accent)}
.sm-cr-s{color:var(--muted)}
.sm-cr-now{color:var(--txt);font-weight:800}
/* what you are filling, restated right above the number pad */
.sm-now{display:flex;flex-direction:column;gap:2px;margin:10px 0 4px;padding:10px 12px;
  border:1px solid var(--accent);border-radius:12px;background:var(--panel2)}
.sm-now b{font-size:16px;font-weight:800}
.sm-now span{color:var(--muted);font-size:12.5px}
.sm-stages{display:flex;flex-direction:column;gap:8px}
.sm-stg{display:grid;grid-template-columns:1fr auto auto auto;gap:10px;align-items:center;padding:12px;
  border:1px solid var(--line);border-radius:12px;background:var(--panel2);font-size:14px}
.sm-g{font-weight:800;font-size:19px;color:var(--ok);font-variant-numeric:tabular-nums}
.sm-r{font-weight:800;color:var(--bad);font-variant-numeric:tabular-nums;min-width:26px;text-align:right}
.sm-left{color:var(--muted);font-size:12.5px;min-width:64px;text-align:right}
.sm-hrs{display:flex;flex-direction:column;gap:8px}
.sm-hr{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:10px;align-items:center;width:100%;
  min-height:56px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);
  color:var(--txt);font-size:14px;text-align:left}
.sm-hr.open{border-color:var(--accent)}
.sm-hr b{font-variant-numeric:tabular-nums}
.sm-hr .sm-edit{color:var(--muted);font-size:12px}
.sm-hr-edit{border:1px solid var(--accent);border-top:0;border-radius:0 0 12px 12px;padding:12px;background:var(--panel)}
/* labels for the ONE bulk print (SM3) — one sticker per printed page */
.lbl-pg{page-break-after:always;padding:6px;text-align:center;font-family:var(--mono,monospace)}
.lbl-sn{font-size:15px;font-weight:800;letter-spacing:.02em}
.lbl-it{font-size:12px;font-weight:700;margin-top:2px}
.lbl-nm{font-size:9px;color:#333;margin-top:2px}
.lbl-box .lbl-sn{font-size:20px}
.lbl-ser{font-size:8px;margin-top:4px;line-height:1.5;word-break:break-all}
/* read-only stage row (Master Carton) — fed by the box scan, never typed here */
.sm-stg.sm-ro{opacity:.85;border-style:dashed}
.sm-ro-tag{font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}

/* ===== Stock Count (inv_counter) — native kiosk wizard, dark shop-floor look ===== */
.sc-dots{display:flex;align-items:center;gap:6px;margin-bottom:16px}
.sc-dot{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--panel2);color:var(--muted);font-weight:700;font-size:15px;flex:none;border:1px solid var(--line)}
.sc-dot.on{background:var(--btn-primary-bg);color:var(--btn-primary-ink);border-color:var(--accent)}
.sc-dot.done{background:var(--ok);color:var(--on-good);border-color:var(--ok)}
.sc-dline{flex:1;height:2px;background:var(--line);max-width:60px}
.sc-q{font-size:20px;font-weight:700;color:var(--txt)}
.sc-locked{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:11px 13px;border:1px solid var(--green-ln);background:var(--okbg);border-radius:12px}
.sc-ok{display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;border-radius:50%;background:var(--ok);color:var(--on-good);font-weight:700;flex:none}
.sc-drop{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.sc-drop:empty{display:none}
.sc-opt{display:flex;gap:8px;align-items:center;text-align:left;width:100%;padding:13px;border:1px solid var(--line);border-radius:11px;background:var(--panel2);color:var(--txt);cursor:pointer;font-size:15px}
.sc-opt:hover{border-color:var(--accent)}
.sc-opt .mono{color:var(--accent)}
.sc-opt.muted{cursor:default;color:var(--muted)}
.sc-row{display:flex;align-items:center;gap:8px;padding:10px 2px;border-bottom:1px solid var(--line);font-size:14px}
.sc-row:last-child{border-bottom:none}
.sc-cam{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center}
.sc-cam-box{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px}
.sc-cam-box video{width:min(88vw,460px);height:min(66vw,340px);object-fit:cover;border-radius:16px;background:#000}

/* shift badli — kya bacha, kis stage par */
/* A long product name has to wrap on a phone, not push the row sideways — the kiosk is used on
   one and a page that scrolls left-right is unusable there. */
.he-row{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);
  margin-bottom:8px;min-width:0;overflow-wrap:anywhere}
.he-row .muted{overflow-wrap:anywhere}
#sup-shiftend{min-width:0}
#sup-shiftend .sup-line h3{flex-wrap:wrap;gap:4px 10px}
.he-row b{color:var(--txt)}
#sup-shiftend textarea{width:100%;box-sizing:border-box;background:var(--panel2);color:var(--txt);
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;font-size:15px;
  line-height:1.45;resize:vertical;min-height:76px}
#sup-shiftend textarea:focus{outline:none;border-color:var(--accent)}


/* ── the customer's specification at the station (Order Desk · Phase F) ────────────────────
   ⛔ Big type on purpose. This is read at a bench, standing, often in a hurry, by somebody who
   has to get the right glass and the right carton onto the right piece. */
.spec-link { color: var(--accent, #1f5fd0); text-decoration: underline; }
.spec-t { width: 100%; border-collapse: collapse; font-size: 15px; }
.spec-t td { padding: 6px 8px; border-bottom: 1px solid rgba(128,128,128,.25); }
.spec-t td.k { color: #667; width: 45%; }

/* ═══ THE OPERATOR RAIL ══════════════════════════════════════════════════════════════════════
   Owner's design (Kiosk Worklist B), 11-Sep-2026. The four things an operator reaches for all
   shift — the job list, what they already did, who is on the line today, and tracing a serial —
   were controls buried in the work screen's header. On the rail they are reachable from any of
   the five working screens, and "Chot lagi" is pinned at the bottom where it is always the same
   distance from a thumb.

   ⛔ FIXED, NOT A FLEX SIBLING. The five screens are shown and hidden one at a time by show();
   wrapping them in a new shell would mean touching that logic, and the show/hide path is the one
   thing on this app that must never break. A fixed rail plus padding on those screens is the same
   picture with none of that risk.

   ⛔ AND IT IS DESKTOP/TABLET ONLY. 106px out of a 375px phone is a third of the screen for four
   buttons; below 760px the rail is gone and the topbar's own back button does the job, exactly as
   it does today. The design file itself is drawn at tablet width. */
.op-rail{position:fixed;left:0;top:0;bottom:0;width:106px;z-index:28;
  background:var(--rail);border-right:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 9px}
.op-rail.hidden{display:none}
.opr-mark{width:42px;height:42px;border-radius:12px;background:var(--brand-red);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:20px;flex:none;margin-bottom:8px}
.opr-btn{width:88px;min-height:72px;border:0;border-radius:16px;background:none;color:var(--rail-ink);
  font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  cursor:pointer;position:relative;text-decoration:none;transition:background .14s ease}
.opr-btn:hover{background:var(--rail-on)}
.opr-btn.on{background:var(--rail-on);color:#fff}
.opr-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.opr-ic{font-size:25px;line-height:1}
.opr-lb{font-size:12px;font-weight:650}
.opr-bdg{position:absolute;top:7px;right:11px;font-size:11.5px;font-weight:800;
  background:var(--brand-red);color:#fff;border-radius:999px;padding:1px 7px}
.opr-bdg.hidden{display:none}
.opr-gap{margin-top:auto}
/* ⛔ THE RAIL IS ALWAYS DARK, SO WHAT SITS ON IT MUST NOT FLIP — the same rule theme.css already
   states for --rail-ink. My first version used --failbg / --red-ln, which in LIGHT become a
   near-white pink: pale pink text on a pale pink chip, on a navy rail. Measured 1.14:1 — the one
   button on this screen a person reaches for when somebody is hurt. These three values are fixed,
   like --brand-red, and read 7.4:1 on the rail in both themes. */
.opr-hurt{border:1px solid rgba(240,112,95,.38);background:rgba(240,112,95,.16);color:#ffd9d4;min-height:66px}
.opr-hurt:hover{background:rgba(240,112,95,.26)}
.opr-out{min-height:48px;color:var(--rail-ink-2)}

/* The five working screens step aside for it. */
body.has-rail #screen-work,
body.has-rail #screen-counter,
body.has-rail #screen-assembly,
body.has-rail #screen-testing,
body.has-rail #screen-scan{padding-left:106px}
/* ⛔ margin, NOT padding. Padding only indents the TEXT — the strip's own background still spans
   the full width at z-index 29 and painted straight over the rail's brand mark. Measured: strip
   left 0 / width 790, rail 0–106, mark at top 14 and invisible. A margin makes the strip actually
   begin where the rail ends, which is also what the design draws. */
body.has-rail #role-strip,
body.has-rail #co-banner{margin-left:106px}

@media(max-width:760px){
  .op-rail{display:none}
  body.has-rail #screen-work,
  body.has-rail #screen-counter,
  body.has-rail #screen-assembly,
  body.has-rail #screen-testing,
  body.has-rail #screen-scan{padding-left:0}
  body.has-rail #role-strip,
  body.has-rail #co-banner{margin-left:0}
}

/* The work list while it loads — three cards the size the real ones will be. */
@keyframes sk{0%{opacity:.45}50%{opacity:.95}100%{opacity:.45}}
.sk-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.sk{border-radius:18px;background:var(--panel);border:1px solid var(--line);
  animation:sk 1.4s ease-in-out infinite}
.sk-a{height:92px}.sk-b{height:136px}.sk-c{height:136px;animation-delay:.18s}
.sk-b{animation-delay:.09s}
.sk-note{margin:10px 2px 0;font-size:13px;color:var(--muted);text-align:center}

/* ⛔ ON A PHONE A CENTRED DIALOG IS THE WRONG SHAPE — it lands under the thumb's reach and above
   the keyboard, and the buttons end up where a hand is not. The design shows these as a bottom
   sheet. This is the SAME confirmModal(), restyled: §3.6 of the handoff says in as many words not
   to fork a second modal implementation, and two dialogs is how two of them drift. */
@media(max-width:640px){
  .modal-overlay{align-items:flex-end;padding:0}
  .modal-card{width:100%;max-width:100%;border-radius:22px 22px 0 0;padding:8px 16px 20px;
    max-height:86vh;overflow-y:auto}
  /* The grab handle says "this came from the bottom and goes back there". */
  .modal-card::before{content:"";display:block;width:38px;height:4px;border-radius:99px;
    background:var(--line);margin:6px auto 14px}
}

/* ⛔ THE SWITCHER SITS ON TOP OF THE PRINT BUTTON UNLESS IT IS MOVED.
   switcher.js parks itself at right:14px / bottom:14px with z-index 2147483000; #float-print is
   at right:18px / bottom:18px with 1500. This file already carries the scar from the last time a
   fixed chip landed on the floor's own controls (see #ver-badge above — it covered "📍 Line-1",
   the Print button and Logout). Lifting it one button-height clears that for good, and it stays
   lifted whether or not the print button is showing, because a control that moves depending on
   the screen is a control people stop reaching for without looking. */
#mc-switcher { bottom: 92px !important; right: 18px !important; }

/* ── Aaj ka din — the supervisor's checklist (13-Sep-2026, paper-free chain) ── */
.day-list{padding:6px 0}
.day-step{display:flex;align-items:center;gap:12px;padding:12px 6px;border-bottom:1px solid var(--line)}
.day-step:last-child{border-bottom:0}
.day-step .day-ic{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none;background:var(--panel);border:1px solid var(--line)}
.day-step.done .day-ic{background:var(--ok);color:#fff;border-color:var(--ok)}
.day-step.now .day-ic{background:var(--accent);color:#fff;border-color:var(--accent)}
.day-step.locked{opacity:.5}
.day-step .day-tx{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.day-step .day-go{flex:none}
.pq .t{font-size:16px}

/* 50×25 box tag (owner 24-Sep): the box number and its QR, nothing else */
.btag{color:#000;background:#fff;box-sizing:border-box;padding:.9mm;font-family:Arial,Helvetica,sans-serif;overflow:hidden;flex:none}
.btag .bt-in{box-sizing:border-box;width:100%;height:100%;border:.55mm solid #000;border-radius:2mm;display:flex;align-items:stretch;overflow:hidden}
.btag .bt-qr{flex:none;display:flex;align-items:center;justify-content:center;padding:0 1mm;border-right:.45mm solid #000}
.btag .bt-qr svg{width:19.5mm;height:19.5mm;display:block}
.btag .bt-r{flex:1;min-width:0;display:flex;flex-direction:column}
.btag .bt-k{background:#000;color:#fff;font-size:6.2pt;font-weight:900;letter-spacing:.2em;text-align:center;padding:.5mm 0 .4mm;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.btag .bt-mo{font-family:monospace;font-size:6.3pt;font-weight:800;text-align:center;padding:.8mm .8mm 0;word-break:break-all;line-height:1.1}
.btag .bt-no{flex:1;display:flex;align-items:center;justify-content:center;font-size:21pt;font-weight:900;line-height:1;letter-spacing:.4px}
.btag .bt-no.bt-long{font-family:monospace;font-size:7.4pt;word-break:break-all;line-height:1.2;text-align:center;padding:0 .8mm}
.btag-row{display:flex;align-items:stretch;background:#fff}
.lp-roll{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0 4px}
.lp-roll button{min-height:40px;font-size:14px;font-weight:700;border-radius:10px}
.lp-roll button.on{border-color:var(--btn-primary-bg);box-shadow:inset 0 0 0 2px var(--btn-primary-bg)}
.lp-roll input{width:64px;min-height:40px;font-size:15px;text-align:center;border-radius:10px}
.carton-label .cl-bar svg{display:block;width:100%;margin-top:1mm}
.sm-fmt{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sm-fmt button{min-height:48px;font-size:14px;font-weight:700;border-radius:12px;min-width:0;white-space:normal}
.sm-fmt button.on{border-color:var(--btn-primary-bg);box-shadow:inset 0 0 0 2px var(--btn-primary-bg)}

/* ⏳ Backlog (owner 24-Sep): planned before today, not finished */
.bl-kpis{display:flex;gap:14px;flex-wrap:wrap;margin:6px 0 10px;font-size:14px}
.bl-tools{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.bl-tools button{min-height:48px;font-weight:700;border-radius:12px}
.bl-row .bl-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:14px}
.bl-row .bl-mid{margin:6px 0 4px;font-size:15px}
.bl-tag{background:var(--fail);color:var(--on-bad);font-size:11.5px;font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:999px}
.bl-left{color:var(--fail)}
.sup-noline{margin:12px;border-color:var(--fail);font-size:15px;line-height:1.5}

/* IQC (owner 25-Sep): where the material is, and what came */
.iq-where{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;border:1px solid var(--line);margin-left:4px}
.iq-where.bad{background:var(--fail);color:var(--on-bad);border-color:transparent}
.iq-lines{margin-top:6px;display:grid;grid-template-columns:minmax(0,1fr);gap:3px}   /* the auto track took the whole nowrap name: 286px sideways on a phone (I43) */
.iq-line{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.iq-line span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== IQC — incoming inspection (owner 25-Sep: "MNC IQC app jaisa") ===== */
.iqc-wrap{padding:4px 2px 90px;display:flex;flex-direction:column;gap:12px}
.iqc-title{font-size:20px;font-weight:800;letter-spacing:-.01em}
.iqc-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.iqc-kpi{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);color:var(--ink);text-align:left;min-width:0;cursor:pointer}
.iqc-kpi b{font-size:24px;line-height:1.1}
.iqc-kpi span{font-size:12.5px;color:var(--muted)}
.iqc-kpi.on{border-color:var(--btn-primary-bg);box-shadow:inset 0 0 0 2px var(--btn-primary-bg)}
.iqc-kpi.k-hold b{color:var(--warn)} .iqc-kpi.k-bad b{color:var(--fail)} .iqc-kpi.k-flat{cursor:default}
.iqc-search{width:100%}
.iqc-list{display:flex;flex-direction:column;gap:8px}
.iqc-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);color:var(--ink);cursor:pointer}
.iqc-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.iqc-main > span{overflow:hidden;text-overflow:ellipsis}
.iqc-go{font-weight:800;color:var(--btn-primary-bg);white-space:nowrap}
.iqc-st{display:inline-block;font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:999px;white-space:nowrap;letter-spacing:.02em}
.iqc-st.st-pend{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-ln)}
.iqc-st.st-hold{background:var(--warnbg);color:var(--warn);border:1px solid var(--amber-ln)}
.iqc-st.st-bad{background:var(--failbg);color:var(--fail);border:1px solid var(--red-ln)}
.c-pass{color:var(--ok);font-weight:800} .c-rej{color:var(--fail);font-weight:800} .c-hold{color:var(--warn);font-weight:800}
.iqc-back{align-self:flex-start}
.iqc-doc{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);padding:16px}
.iqc-doc-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.iqc-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-top:12px}
.iqc-meta div{display:flex;flex-direction:column;gap:2px;min-width:0}
.iqc-meta span{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.iqc-meta b{overflow:hidden;text-overflow:ellipsis}
.iqc-warn{margin:12px 0 0;padding:10px 12px;border-radius:var(--r-sm);background:var(--failbg);color:var(--fail);font-weight:700;font-size:13.5px}
.iqc-lines{display:flex;flex-direction:column;gap:10px}
.iqc-item{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);padding:14px;display:flex;flex-direction:column;gap:10px}
.iqc-item-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.iqc-item-name{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 260px}
.iqc-quick{display:flex;gap:6px;flex-wrap:wrap}
.iqc-quick button{min-height:36px;font-size:13px;padding:0 10px}
.iqc-qty{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.iqc-qty label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:800;min-width:0}
.iqc-qty input{width:100%;min-height:52px;font-size:20px;font-weight:800;text-align:center;border-radius:var(--r-sm);border:2px solid var(--line);background:var(--field);color:var(--ink)}
.iqc-qty .f-pass input{border-color:var(--green-ln)} .iqc-qty .f-rej input{border-color:var(--red-ln)} .iqc-qty .f-hold input{border-color:var(--amber-ln)}
.iqc-bal{font-size:13px;font-weight:700}
.iqc-bal.ok{color:var(--ok)} .iqc-bal.bad{color:var(--fail)}
.iqc-why{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:8px}
.iqc-why .iq-reason{opacity:.7}
.iqc-why.need .iq-reason{opacity:1;border-color:var(--warn)}
.iqc-hist{padding:0 4px}
.iqc-foot{position:sticky;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--shadow)}
.iqc-sum{display:flex;gap:14px;flex-wrap:wrap;font-size:14px}
@media (max-width:640px){.iqc-qty{grid-template-columns:1fr}.iqc-why{grid-template-columns:1fr}.iqc-row{grid-template-columns:minmax(0,1fr) auto}.iqc-row .iqc-st{grid-column:1 / -1;justify-self:start}}
.iqc-st.st-part{background:var(--blue-bg);color:var(--blue);border:1px dashed var(--blue-ln)}
.iqc-row.iqc-row-last{outline:2px solid var(--accent);outline-offset:-2px}
.iqc-st.st-done{background:var(--okbg);color:var(--ok);border:1px solid var(--green-ln)}
.c-part{color:var(--blue);font-weight:800}
.iqc-bal.muted{color:var(--muted);font-weight:600}
.iqc-release{border:1px dashed var(--amber-ln);background:var(--warnbg);border-radius:var(--r-md);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.iqc-rel-h{font-weight:800;color:var(--warn)}
.iqc-rel-row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.iqc-rel-row label{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:700;flex:1 1 120px;min-width:0}
.iqc-rel-row input{min-height:44px;font-size:17px;font-weight:800;text-align:center;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--field);color:var(--ink);width:100%}
.iqc-rel-row button{min-height:44px}
.iqc-undo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
@media (max-width:640px){.iqc-undo{grid-template-columns:1fr}}
/* PP handover (29-Sep-2026) — PP supervisor bhejta, line supervisor leta, dono ginte hain */
.pph { margin-bottom: 10px; }
.pph-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pph-h > div { min-width: 0; }
.pph-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.pph-act label { flex: 1 1 100%; }
.pph-act .pph-q { width: 110px; font-size: 18px; padding: 8px 10px; }
/* Aage ka roster (29-Sep-2026) — manager apni lines par supervisor lagata hai */
/* the manager's roster day bar — its own class: .mr-bar is the reconciliation's 14 px progress bar (overflow hidden),
   and sharing the name clipped the date picker to an empty strip (13-Oct-2026, the manager's situation walk) */
.mrr-day { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mrr-day .sm-in { width: auto; }
.mr-pick { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.mr-pick .mr-sel { flex: 1 1 220px; min-width: 0; }