/* ============ Rakhi ERP design system ============ */
:root{
  --mod:#6366f1;
  --bg:#f4f6fb; --panel:#ffffff; --ink:#111827; --ink2:#475569; --ink3:#94a3b8;
  --line:#e6ebf3; --line2:#eef2f8;
  --g:#16a34a; --a:#f59e0b; --r:#e11d48; --s:#94a3b8;
  --gb:#dcfce7; --ab:#fef3c7; --rb:#ffe4e6; --sb:#f1f5f9;
  --rad:16px; --rad2:11px;
  --sh:0 1px 2px rgba(16,24,40,.05),0 8px 24px -12px rgba(16,24,40,.14);
  --sh2:0 2px 6px rgba(16,24,40,.07),0 18px 44px -16px rgba(16,24,40,.22);
  --top:60px; --side:236px;
  --ease:cubic-bezier(.22,.9,.28,1);
  --fs:15px;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#0b1020;--panel:#141a2e;--ink:#eef2ff;--ink2:#a6b0c8;--ink3:#6b7793;
    --line:#242c45;--line2:#1c2338;--gb:#0f2e1d;--ab:#3a2b06;--rb:#3d1020;--sb:#1b2237;
    --sh:0 1px 2px rgba(0,0,0,.4),0 10px 30px -14px rgba(0,0,0,.7);
    --sh2:0 2px 8px rgba(0,0,0,.5),0 22px 50px -18px rgba(0,0,0,.8);}
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:var(--fs)/1.5 "Segoe UI",Inter,system-ui,"Noto Sans Devanagari","Noto Sans Gujarati",sans-serif;
  background:var(--bg); color:var(--ink); overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.015em}
a{color:inherit;text-decoration:none}
code{font:12px/1.4 ui-monospace,Consolas,monospace;background:var(--sb);padding:1px 5px;border-radius:5px}
::selection{background:color-mix(in srgb,var(--mod) 26%,transparent)}

/* ---- ambient animated background ---- */
.bgfx{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:.5}
.bgfx i{position:absolute;width:46vw;height:46vw;border-radius:50%;filter:blur(90px);
  background:radial-gradient(circle at 30% 30%,var(--mod),transparent 70%);opacity:.20;animation:drift 26s var(--ease) infinite alternate}
.bgfx i:nth-child(2){right:-10vw;top:30vh;background:radial-gradient(circle at 60% 40%,#ec4899,transparent 70%);animation-duration:34s;animation-delay:-6s}
.bgfx i:nth-child(3){left:20vw;bottom:-18vw;background:radial-gradient(circle at 50% 50%,#22c55e,transparent 70%);animation-duration:42s;animation-delay:-14s}
@keyframes drift{0%{transform:translate3d(-6vw,-4vh,0) scale(1)}100%{transform:translate3d(8vw,8vh,0) scale(1.25)}}

/* ---- animated icons ---- */
.ic{flex:0 0 auto;vertical-align:-.18em;overflow:visible}
.ic *{stroke-dasharray:var(--dl,120);stroke-dashoffset:0}
.ic.hero{animation:draw .8s var(--ease) both}
@keyframes draw{from{stroke-dashoffset:120;opacity:.2}to{stroke-dashoffset:0;opacity:1}}
.ic.float{animation:bob 3.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
.ic.spin{animation:sp 1.1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
a:hover>.ic,button:hover>.ic{animation:pop .45s var(--ease)}
@keyframes pop{35%{transform:translateY(-3px) scale(1.14)}70%{transform:translateY(1px) scale(.97)}}

/* ---- top bar ---- */
.top{position:fixed;inset:0 0 auto 0;height:var(--top);z-index:40;display:flex;align-items:center;gap:12px;
  padding:0 14px;background:color-mix(in srgb,var(--panel) 82%,transparent);backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--line);animation:slidedown .5s var(--ease) both}
@keyframes slidedown{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
.brand{display:flex;align-items:center;gap:9px;font-size:16px;white-space:nowrap}
.brand b{background:linear-gradient(96deg,var(--mod),#ec4899 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.knot{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;color:#fff;
  background:linear-gradient(135deg,var(--mod),#ec4899);box-shadow:0 4px 14px -4px var(--mod);animation:knot 5s var(--ease) infinite}
@keyframes knot{0%,88%,100%{transform:rotate(0)}92%{transform:rotate(-12deg) scale(1.07)}96%{transform:rotate(9deg)}}
.navbtn{display:none;width:38px;height:38px;border:0;background:none;color:var(--ink);cursor:pointer;padding:9px}
.navbtn span{display:block;height:2px;background:currentColor;border-radius:2px;margin:4px 0;transition:.3s var(--ease)}
body.navopen .navbtn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.navopen .navbtn span:nth-child(2){opacity:0}
body.navopen .navbtn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.gsearch{flex:1;max-width:520px;display:flex;align-items:center;gap:8px;padding:0 12px;height:38px;
  background:var(--sb);border:1px solid transparent;border-radius:999px;color:var(--ink3);transition:.25s var(--ease)}
.gsearch:focus-within{background:var(--panel);border-color:var(--mod);box-shadow:0 0 0 4px color-mix(in srgb,var(--mod) 14%,transparent);color:var(--mod)}
.gsearch input{flex:1;border:0;background:none;outline:0;font:inherit;color:var(--ink);min-width:60px}
.topright{margin-left:auto;display:flex;align-items:center;gap:8px}
.tbtn{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink2);cursor:pointer;transition:.22s var(--ease)}
.tbtn:hover{color:var(--mod);border-color:var(--mod);transform:translateY(-2px);box-shadow:var(--sh)}
.tbtn.on{color:#fff;background:var(--mod);border-color:var(--mod)}
/* A17 B1.2: the approved DIRECT ENTRIES (Masters, Settings, Audit, Help) as
   persistent header controls that replaced the removed SETUP accordion. They
   follow the .tbtn pattern — icon-only so a phone header stays uncrowded — and
   reveal their label only on a wide desktop where there is genuinely room. The
   accessible name is always present (aria-label + title), so an icon-only
   control is never unlabelled for assistive technology. */
.topadmin{display:flex;align-items:center;gap:8px}
.topadmin .tdirect .tdtxt{display:none}
@media (min-width:1500px){
  .topadmin .tdirect{width:auto;padding:0 11px;display:inline-flex;align-items:center;gap:6px}
  .topadmin .tdirect .tdtxt{display:inline;font-size:13px;font-weight:600}
}
.scanbtn{position:relative}
.scanbtn::after{content:"";position:absolute;inset:-4px;border-radius:13px;border:1.5px solid var(--mod);opacity:0;animation:ring 2.6s ease-out infinite}

/* ---- A2 §4 / §17. THE CONNECTIVITY INDICATOR ----
   Four colours with four meanings, and the colour is a custom property so the
   server paints it on first render and app.js repaints it when the device loses
   the server. Wider than a plain tbtn because it carries a word: §69 asks for
   plain language, and a bare coloured dot is not plain language. */
.connchip{width:auto;padding:0 10px;gap:6px;display:flex;align-items:center;text-decoration:none;
  color:var(--c);border-color:color-mix(in srgb,var(--c) 45%,var(--line));position:relative}
.connchip:hover{color:var(--c);border-color:var(--c)}
.connchip .connlabel{font-size:12px;font-weight:600;letter-spacing:.01em}
.connchip[data-state=device],.connchip[data-state=error]{background:color-mix(in srgb,var(--c) 12%,var(--panel))}
.connchip[data-state=device] svg{animation:pulse 2.4s ease-in-out infinite}
@media(max-width:760px){.connchip .connlabel{display:none}.connchip{padding:0 8px}}

/* The banner is the one thing that must be impossible to miss, so it sits at
   the bottom of the viewport above everything. It appears ONLY in the device-
   offline state: a warning that is always on screen stops being read. */
.offbanner{position:fixed;left:12px;right:12px;bottom:12px;z-index:900;display:flex;align-items:center;
  gap:10px;flex-wrap:wrap;padding:10px 14px;border-radius:12px;font-size:13px;
  color:#7c2d12;background:#ffedd5;border:1px solid #fdba74;box-shadow:0 12px 30px -12px rgba(124,45,18,.5)}
.offbanner .offcount{padding:1px 8px;border-radius:999px;background:#f97316;color:#fff;font-weight:700}
.offbanner .mini{margin-left:auto}
body.hasactbar .offbanner{bottom:calc(var(--abh,56px) + 16px)}
@media print{.offbanner{display:none}}

/* §17. A control that cannot be honoured right now looks unavailable instead of
   failing when it is pressed. */
.offblocked{opacity:.5;cursor:not-allowed;filter:grayscale(.6)}
@keyframes ring{0%{opacity:.7;transform:scale(.86)}70%{opacity:0;transform:scale(1.25)}100%{opacity:0}}
.lang{display:flex;align-items:center;gap:5px;height:36px;padding:0 8px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink2)}
.lang select{border:0;background:none;outline:0;font:inherit;color:var(--ink);cursor:pointer}
.who{display:flex;align-items:center;gap:8px;padding-left:8px;border-left:1px solid var(--line)}
.av{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:#fff;font-weight:700;
  background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 45%,#000));box-shadow:0 4px 12px -5px var(--c)}
.whoinfo{display:flex;flex-direction:column;line-height:1.15}
.whoinfo small{color:var(--ink3);font-size:11px}

/* ---- sidebar ---- */
.side{position:fixed;top:var(--top);bottom:0;left:0;width:var(--side);z-index:30;overflow:hidden;
  background:color-mix(in srgb,var(--panel) 72%,transparent);backdrop-filter:blur(14px);border-right:1px solid var(--line)}
.sidescroll{height:100%;overflow-y:auto;padding:12px 10px 40px;scrollbar-width:thin}
.ngroup{margin-bottom:14px;animation:fadeup .5s var(--ease) both}
.ngroup:nth-child(2){animation-delay:.04s}.ngroup:nth-child(3){animation-delay:.08s}
.ngroup:nth-child(4){animation-delay:.12s}.ngroup:nth-child(5){animation-delay:.16s}
.ngroup:nth-child(6){animation-delay:.2s}.ngroup:nth-child(7){animation-delay:.24s}
@keyframes fadeup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* CHANGES4 12: the section heading is the collapse control, and the section that
   owns the current screen is marked so the operator can see where they are
   without reading every label. */
.nglabel{display:flex;align-items:center;gap:6px;width:100%;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink3);padding:6px 10px;
  background:none;border:0;cursor:pointer;text-align:left;font-family:inherit;border-radius:8px}
.nglabel>span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nglabel:hover{background:var(--line2);color:var(--ink2)}
.ngchev{width:0;height:0;border:4px solid transparent;border-top-color:currentColor;
  margin-top:3px;transition:transform .2s var(--ease);flex:none}
.ngroup.shut .ngchev{transform:rotate(-90deg)}
/* !important because a collapsed section must win over the inline display the
   "More" drawer sets on its own list — otherwise a shut section still showed the
   modules inside its drawer. One mechanism decides whether a section is open. */
.ngroup.shut .nglist{display:none!important}
.ngroup.cur>.nglabel{color:var(--ink);background:var(--line2)}
.nglist{display:block}
.nav{position:relative;display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--rad2);
  color:var(--ink2);font-weight:520;transition:.2s var(--ease)}
.nav .ni{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:var(--c);
  background:color-mix(in srgb,var(--c) 13%,transparent);transition:.25s var(--ease)}
.nav:hover{background:var(--line2);color:var(--ink);transform:translateX(3px)}
.nav:hover .ni{background:var(--c);color:#fff;transform:rotate(-7deg) scale(1.06)}
.nav.on{background:color-mix(in srgb,var(--c) 12%,transparent);color:var(--ink);font-weight:650}
.nav.on .ni{background:var(--c);color:#fff;box-shadow:0 5px 14px -5px var(--c)}
.nav.on::before{content:"";position:absolute;left:-10px;top:20%;bottom:20%;width:3px;border-radius:0 3px 3px 0;background:var(--c);animation:grow .35s var(--ease)}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.nt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}

/* ---- MODULE NAME CARRIES THE COLOUR, NOT AN ICON ----
   The 30px icon tile that used to lead every row is gone; the module's own
   colour sits behind its NAME as a soft tint instead. Soft, with the normal
   ink colour on top, rather than a solid block in white text: fifty different
   saturated blocks down one column is a paint chart, and twelve of the fifty
   are too light to carry white text at all. */
.nav.noico{gap:0;padding:7px 9px}
.nav.noico .nt{flex:0 1 auto;padding:4px 9px;border-radius:7px;
  background:color-mix(in srgb,var(--c) 14%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 22%,transparent);
  transition:.2s var(--ease)}
.nav.noico:hover .nt{background:color-mix(in srgb,var(--c) 26%,transparent)}
.nav.noico.on .nt{background:color-mix(in srgb,var(--c) 34%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 52%,transparent);font-weight:680}
/* the badge keeps its place at the far right of the row */
.nav.noico .nbadge{margin-left:auto}
.nbadge{min-width:20px;padding:1px 6px;border-radius:999px;font-size:11px;font-weight:700;text-align:center;
  color:#fff;background:var(--c);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

/* ---- main ---- */
.main{position:relative;z-index:10;margin:var(--top) 0 0 var(--side);padding:18px 20px 70px;min-height:calc(100vh - var(--top))}
.crumb{display:flex;align-items:center;gap:11px;margin-bottom:16px;flex-wrap:wrap}
.mdot{width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 4px color-mix(in srgb,var(--mod) 18%,transparent);animation:pulse 2.2s ease-in-out infinite}
.crumb h1{display:flex;align-items:center;gap:9px;font-size:22px;color:var(--ink)}
.crumb h1 .ic{color:var(--mod)}
/* ---- THE ACTIONS FOLLOW THE TITLE, THEY DO NOT LIVE IN THE CORNER ----
   margin-left:auto pushed Save / New / Print to the far right edge, so on a
   wide monitor the operator read the heading on the left and then travelled
   the whole width of the screen to press the button the heading was about.
   They sit beside the heading now: one short movement, and on a wide screen
   the cluster lands near the middle rather than at an edge. */
.pageact{margin-left:14px;display:flex;gap:8px;flex-wrap:wrap}
/* narrow screens stack, so the offset would only indent them */
@media(max-width:760px){.pageact{margin-left:0;width:100%}}
/* ON A PHONE THE HEADING LINE IS ONE LINE: the title with the status-panel
   button at its end, and the screen's buttons in one row under it — never a
   line holding one lone arrow. A rule for every screen without a tab row. */
@media (max-width:760px){
  .crumb:not(.hastabs){row-gap:6px}
  .crumb:not(.hastabs) h1{flex:1 1 50%;min-width:0;order:0}   /* a half-width basis: the panel button stays on the title line, the title wraps inside if it must */
  .crumb:not(.hastabs) .kpibtn{order:1;margin-left:auto}
  .crumb:not(.hastabs) .pfind{order:1}
  .crumb:not(.hastabs) .pageact{order:2;width:100%;gap:6px}
  .crumb:not(.hastabs) .pageact>a,.crumb:not(.hastabs) .pageact>button{flex:0 1 auto}
}

/* ---- cards ---- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);box-shadow:var(--sh);
  padding:16px;margin-bottom:16px;animation:fadeup .45s var(--ease) both;transition:box-shadow .3s var(--ease)}
.card:hover{box-shadow:var(--sh2)}
.chead{display:flex;align-items:center;gap:10px;margin:-2px 0 13px;padding-bottom:11px;border-bottom:1px solid var(--line2)}
.chead h2{display:flex;align-items:center;gap:8px;font-size:16px}
.chead h2 .ic{color:var(--mod)}
.cact{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.card.danger{border-color:var(--r);background:color-mix(in srgb,var(--rb) 55%,var(--panel))}
.card.flat{box-shadow:none;background:color-mix(in srgb,var(--panel) 60%,transparent)}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
.g5{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.pad{padding:20px}
.muted{color:var(--ink3)}.small{font-size:12.5px}.mono{font-family:inherit;font-variant-numeric:tabular-nums}
.right{text-align:right}.center{text-align:center}.nowrap{white-space:nowrap}
.row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.sp{margin-left:auto}

/* ---- buttons ---- */
.btn,.btn2,.ghost,.mini,.danger-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 15px;border-radius:11px;border:1px solid transparent;font:inherit;font-weight:600;font-size:14px;
  cursor:pointer;transition:.22s var(--ease);white-space:nowrap;position:relative;overflow:hidden}
.btn{background:var(--mod);color:#fff;box-shadow:0 6px 18px -8px var(--mod)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px var(--mod);filter:brightness(1.06)}
.btn:active{transform:translateY(0) scale(.985)}
.btn2{background:var(--panel);border-color:var(--line);color:var(--ink)}
.btn2:hover{border-color:var(--mod);color:var(--mod);transform:translateY(-2px);box-shadow:var(--sh)}
.ghost{background:transparent;color:var(--ink2);border-color:var(--line)}
.ghost:hover{background:var(--line2);color:var(--ink)}
.mini{padding:5px 10px;font-size:12.5px;border-radius:9px;background:var(--sb);color:var(--ink2)}
.mini:hover{background:var(--mod);color:#fff}
.danger-btn{background:var(--r);color:#fff}
.danger-btn:hover{filter:brightness(1.08);transform:translateY(-2px)}
.btn::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,#fff6,transparent 62%);
  opacity:0;transform:scale(.3);transition:.5s var(--ease)}
.btn:active::after{opacity:.6;transform:scale(1.6);transition:0s}
.btnrow{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.stickybar{position:sticky;bottom:0;z-index:20;display:flex;gap:9px;flex-wrap:wrap;align-items:center;
  margin:16px -16px -16px;padding:12px 16px;border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--panel) 90%,transparent);backdrop-filter:blur(10px);border-radius:0 0 var(--rad) var(--rad)}

/* ---- forms ---- */
/* ---- A FIELD IS AS WIDE AS WHAT GOES IN IT ----
   Every box used to stretch to fill its column, so a three-character code sat
   in the same 300px as a street address and the eye crossed a lot of empty
   white to read a number. The grid track is narrower now and each field
   declares its own size through data-w, which fld() sets from the field's type
   and its maximum length. Anything that genuinely needs the room — an address,
   a note, anything marked wide or big — still spans the full row. */
.fgrid{display:grid;gap:12px 14px;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));align-items:start}
/* A size is a number of TRACKS, not only a maximum width. Capping the width
   alone left a name field sharing the same 122px track as a four-character
   code — technically narrower, and useless, because the cap was never the
   binding constraint. Spanning tracks makes a field as wide as it needs while
   the row still packs. */
.f[data-w="xs"]{grid-column:span 1;max-width:112px}
.f[data-w="s"] {grid-column:span 1;max-width:160px}
.f[data-w="m"] {grid-column:span 2;max-width:230px}
.f[data-w="l"] {grid-column:span 2;max-width:300px}
.f[data-w="xl"]{grid-column:span 3;max-width:440px}
/* THE HINT DOES NOT GET TO UNDO THE COMPACTNESS.
   A one-line explanation under a 112px box became eight stacked lines and gave
   back all the vertical room the narrow box had just saved. Two lines, then it
   stops; the whole text is still there for a screen reader and on hover. */
.f[data-w="xs"] .hint,.f[data-w="s"] .hint{display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;cursor:help}
/* an explicit wide/big from the screen always wins over the computed size */
.fgrid .wide,.fgrid .big{grid-column:1/-1;max-width:none}
/* ...but 'wide' means the field gets the whole ROW, not that a customer name
   needs 1200px of it. The box itself stops at a readable length; a textarea,
   which really does use the room, is left alone. */
.fgrid .wide>input,.fgrid .wide>select,.fgrid .big>input,.fgrid .big>select{max-width:720px}
@media(max-width:760px){.f[data-w]{max-width:none}}
.f{display:flex;flex-direction:column;gap:5px;min-width:0}
/* an author display rule beats the browser's own hidden styling, so every
   field carrying .f ignored the hidden attribute and showed anyway — which is
   why the outsourced-only boxes appeared with no worker chosen */
.f[hidden]{display:none}
/* THE RULE, NOT THE INSTANCE. Any element carrying hidden is hidden, whatever
   display rule its class sets — the browser's own hidden styling loses to any
   author display, and that has now bitten a form field, a tab key and a card
   heading in one day. */
[hidden]{display:none!important}
.f.wide{grid-column:1/-1}
.f label{font-size:12px;font-weight:640;color:var(--ink2);display:flex;gap:3px}
.f label i{color:var(--r);font-style:normal}
.f input,.f select,.f textarea,.numin,.bigscan{width:100%;padding:9px 11px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel);color:var(--ink);font:inherit;outline:0;transition:.2s var(--ease)}
.f input:focus,.f select:focus,.f textarea:focus,.numin:focus{border-color:var(--mod);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--mod) 14%,transparent)}
.f.big input{font-size:20px;font-weight:700;padding:12px 14px;text-align:center;letter-spacing:.04em}
.hint{font-size:11.5px;color:var(--ink3)}
.chk{display:inline-flex;align-items:center;cursor:pointer;height:38px;position:relative}
/* the real box stays 1px and inside its switch: a full-width hidden input used
   to stretch the page sideways (Fast order entry scrolled to 2,200px) */
.chk input{position:absolute;opacity:0;width:1px!important;height:1px!important;min-width:0!important;margin:0;left:0;top:50%}
.chk span{width:44px;height:24px;border-radius:999px;background:var(--line);position:relative;transition:.25s var(--ease)}
.chk span::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.3);transition:.25s var(--ease)}
.chk input:checked+span{background:var(--g)}
.chk input:checked+span::after{transform:translateX(20px)}

/* short choice lists are radio buttons: one tap, nothing hidden behind a dropdown */
.flabel{font-size:12px;font-weight:640;color:var(--ink2);display:flex;gap:3px}
.flabel i{color:var(--r);font-style:normal}
.radios{display:flex;flex-wrap:wrap;gap:7px}
.radios .ro{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 13px;
  border:1.5px solid var(--line);border-radius:11px;background:var(--panel);color:var(--ink2);
  font-size:13.5px;font-weight:600;cursor:pointer;user-select:none;transition:.2s var(--ease)}
.radios .ro input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.radios .ro i{flex:0 0 auto;width:17px;height:17px;border-radius:50%;border:2px solid var(--line);
  transition:.2s var(--ease)}
.radios .ro:hover{border-color:var(--mod);color:var(--mod);transform:translateY(-1px);box-shadow:var(--sh)}
.radios .ro.on{border-color:var(--mod);color:var(--ink);background:color-mix(in srgb,var(--mod) 11%,transparent)}
.radios .ro.on i{border-color:var(--mod);background:var(--mod);box-shadow:inset 0 0 0 3.5px var(--panel)}
.radios .ro.none{color:var(--ink3);font-weight:500}
.radios .ro:focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--mod) 15%,transparent)}
body.simple .radios .ro{font-size:16px;padding:12px 18px;min-height:54px}
body.simple .radios .ro i{width:20px;height:20px}

/* a row that just changed, so a scan is visibly acknowledged */
@keyframes rowflash{0%{background:var(--gb)}100%{background:transparent}}
tr.flash>td{animation:rowflash .7s var(--ease)}
body:not(.showadv) .adv{display:none}
.advtoggle{font-size:12.5px;color:var(--mod);cursor:pointer;user-select:none;display:inline-flex;gap:5px;align-items:center}

/* multi-UOM entry */
.uomrow{display:flex;gap:8px;flex-wrap:wrap}
.uf{display:flex;flex-direction:column;gap:4px;flex:1;min-width:80px}
.uf label{font-size:11px;font-weight:650;color:var(--ink2);display:flex;justify-content:space-between}
.uf label em{color:var(--ink3);font-style:normal;font-size:10px}
.numin{text-align:center;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.uomcalc{margin-top:6px;font-size:12.5px;color:var(--g);font-weight:650;min-height:18px}

/* ---- tables ---- */
.tw{overflow-x:auto;margin:0 -16px;padding:0 16px;scrollbar-width:thin}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.tbl th{text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink3);padding:8px 10px;border-bottom:1.5px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:2;white-space:nowrap}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--line2);vertical-align:middle}
.tbl tbody tr{transition:.16s var(--ease)}
.tbl tbody tr:hover{background:color-mix(in srgb,var(--mod) 5%,transparent)}
.tbl tfoot td{font-weight:700;border-top:1.5px solid var(--line);background:var(--sb)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;font-family:inherit;font-variant-numeric:tabular-nums}
.tbl .r,.tbl th.r{text-align:right}
.tbl.zebra tbody tr:nth-child(even){background:color-mix(in srgb,var(--sb) 55%,transparent)}
.tbl input,.tbl select{padding:6px 8px;font-size:13px;border-radius:8px}

/* ---- pills / status ---- */
.pill{display:inline-flex;align-items:center;gap:4px;padding:2.5px 9px;border-radius:999px;font-size:11.5px;font-weight:650;white-space:nowrap}
.pg{background:var(--gb);color:var(--g)}.pa{background:var(--ab);color:#b45309}
.pr{background:var(--rb);color:var(--r)}.ps{background:var(--sb);color:var(--ink3)}

/* ---- ID + photo unit (global image rule) ---- */
.idph{display:inline-flex;align-items:center;gap:9px;min-width:0}
.idph .ph{flex:0 0 auto;width:var(--s);height:var(--s);border-radius:10px;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--sb),color-mix(in srgb,var(--mod) 8%,var(--sb)));border:1px solid var(--line);
  transition:.3s var(--ease)}
.idph:hover .ph{transform:scale(1.09) rotate(-2deg);box-shadow:var(--sh2);z-index:3}
.idph img{width:100%;height:100%;object-fit:cover;display:block}
.nophoto{color:var(--ink3);opacity:.55}
.idtx{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.idtx b{font-size:13.5px;font-family:inherit;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.idtx small{color:var(--ink3);font-size:11.5px;overflow:hidden;text-overflow:ellipsis}

/* ---- gallery (image-first selection) ---- */
.gal{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.gcard{position:relative;background:var(--panel);border:1.5px solid var(--line);border-radius:var(--rad2);overflow:hidden;
  cursor:pointer;transition:.25s var(--ease);animation:fadeup .4s var(--ease) both}
.gcard:hover{transform:translateY(-4px);box-shadow:var(--sh2);border-color:var(--mod)}
.gcard.sel{border-color:var(--g);box-shadow:0 0 0 3px var(--gb)}
.gcard .gimg{aspect-ratio:1;background:var(--sb);display:grid;place-items:center;overflow:hidden}
.gcard .gimg img{width:100%;height:100%;object-fit:cover;transition:.4s var(--ease)}
.gcard:hover .gimg img{transform:scale(1.08)}
.gcard .gmeta{padding:8px 9px;display:flex;flex-direction:column;gap:3px}
.gcard .gmeta b{font-family:inherit;font-variant-numeric:tabular-nums;font-size:13px}
.gcard .gq{font-size:19px;font-weight:800;color:var(--mod);font-variant-numeric:tabular-nums}
.gcard input[type=checkbox]{position:absolute;top:8px;left:8px;width:22px;height:22px;accent-color:var(--g);z-index:2;cursor:pointer}
.gcard .gtick{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:var(--g);color:#fff;
  display:grid;place-items:center;opacity:0;transform:scale(.5);transition:.25s var(--ease)}
.gcard.sel .gtick{opacity:1;transform:none}

/* ---- kpi ---- */
.kpi{display:flex;align-items:center;gap:12px;padding:13px 14px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--rad2);box-shadow:var(--sh);transition:.25s var(--ease);animation:fadeup .45s var(--ease) both}
a.kpi:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:var(--c,var(--mod))}
.ki{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;color:var(--c);flex:0 0 auto;
  background:color-mix(in srgb,var(--c) 14%,transparent);transition:.3s var(--ease)}
a.kpi:hover .ki{background:var(--c);color:#fff;transform:rotate(-8deg) scale(1.07)}
.kv{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.kv b{font-size:23px;font-weight:800;font-variant-numeric:tabular-nums}
.kv small{font-size:11.5px;color:var(--ink3);font-weight:600}
.kv em{font-size:11px;color:var(--ink3);font-style:normal}

/* module launcher tiles, grouped into one grid per menu section */
.tiles{display:grid;gap:13px;grid-template-columns:repeat(auto-fill,minmax(146px,1fr))}
.modgrid{display:flex;flex-direction:column;gap:18px}
.modgroup{animation:fadeup .45s var(--ease) both}
.modglabel{display:flex;align-items:center;gap:7px;margin:0 0 9px;padding-bottom:7px;
  border-bottom:1px solid var(--line2);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ink3)}
.modglabel .ic{color:var(--mod)}
.modglabel .chip{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:600}
/* the launcher tile is a coloured NAME now, not an icon with a caption, so it
   is shorter and a good deal more of the grid fits on one screen */
.tile b{padding:5px 10px;border-radius:8px;background:color-mix(in srgb,var(--c) 15%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 26%,transparent);line-height:1.35}
.tile:hover b{background:color-mix(in srgb,var(--c) 30%,transparent)}
.tile.on b{background:color-mix(in srgb,var(--c) 38%,transparent)}
.tile{display:flex;flex-direction:column;align-items:center;gap:9px;padding:12px 10px;border-radius:var(--rad);
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--sh);text-align:center;
  transition:.28s var(--ease);animation:fadeup .5s var(--ease) both;position:relative;overflow:hidden}
.tile::before{content:"";position:absolute;inset:auto -30% -70% -30%;height:120%;border-radius:50%;
  background:var(--c);opacity:0;transition:.4s var(--ease)}
.tile:hover{transform:translateY(-5px) scale(1.02);box-shadow:var(--sh2);border-color:var(--c)}
.tile:hover::before{opacity:.09}
.tile .ti{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;color:#fff;position:relative;
  background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 55%,#000));box-shadow:0 8px 20px -8px var(--c);
  transition:.3s var(--ease)}
.tile:hover .ti{transform:rotate(-8deg) scale(1.09)}
.tile b{font-size:13.5px;font-weight:640;position:relative}
.tile .tb{position:absolute;top:10px;right:10px;min-width:22px;padding:2px 7px;border-radius:999px;background:var(--r);
  color:#fff;font-size:11px;font-weight:700;animation:pulse 2s ease-in-out infinite}

/* ---- empty ---- */
.empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px 16px;color:var(--ink3)}
.empty .ic{color:var(--mod);opacity:.5}

/* ---- toasts ---- */
.toasts{position:fixed;right:16px;bottom:16px;z-index:90;display:flex;flex-direction:column;gap:9px;max-width:min(400px,92vw)}
.toast{display:flex;align-items:center;gap:9px;padding:11px 15px;border-radius:12px;background:var(--panel);
  border:1px solid var(--line);box-shadow:var(--sh2);font-weight:600;font-size:13.5px;
  animation:toastin .45s var(--ease) both,toastout .4s var(--ease) 5s forwards}
@keyframes toastin{from{transform:translateX(120%) scale(.9);opacity:0}to{transform:none;opacity:1}}
@keyframes toastout{to{transform:translateX(120%);opacity:0}}
.toast.ok{border-left:4px solid var(--g)}.toast.ok .ic{color:var(--g)}
.toast.warn{border-left:4px solid var(--a)}.toast.warn .ic{color:var(--a)}
.toast.err{border-left:4px solid var(--r)}.toast.err .ic{color:var(--r)}

/* ---- modal ---- */
.modal{position:fixed;inset:0;z-index:80;display:none;place-items:center;padding:18px;
  background:rgba(8,12,24,.55);backdrop-filter:blur(5px)}
.modal.on{display:grid;animation:fadein .25s var(--ease)}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.mbox{width:min(560px,100%);background:var(--panel);border-radius:var(--rad);border:1px solid var(--line);
  box-shadow:var(--sh2);padding:20px;animation:zoomin .32s var(--ease)}
@keyframes zoomin{from{transform:scale(.9) translateY(14px);opacity:0}to{transform:none;opacity:1}}
.mbox h3{display:flex;align-items:center;gap:9px;margin-bottom:14px;color:var(--mod)}
.bigscan{font-size:26px!important;font-weight:800;text-align:center;letter-spacing:.08em;padding:14px!important;font-family:inherit;font-variant-numeric:tabular-nums;background:color-mix(in srgb,var(--mod) 4%,var(--panel));border:2px solid var(--mod)!important;border-radius:10px;box-shadow:inset 0 2px 4px rgba(0,0,0,.03);transition:all .2s var(--ease)}
.bigscan:focus{background:color-mix(in srgb,var(--mod) 6%,var(--panel));border-color:var(--act)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--act) 15%,transparent),inset 0 2px 4px rgba(0,0,0,.03)}
/* Radio button groups */
.rbtn-group{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.rbtn{display:flex;align-items:center;gap:5px;padding:6px 10px;border-radius:6px;border:1px solid var(--line);background:var(--panel);cursor:pointer;transition:all .15s var(--ease);font-size:13px}
.rbtn:hover{border-color:var(--act);background:color-mix(in srgb,var(--act) 8%,var(--panel))}
.rbtn input[type="radio"]{cursor:pointer}
.rbtn input[type="radio"]:checked+*,
.rbtn input[type="radio"]:checked~*{color:var(--act)}
.rbtn input[type="radio"]:checked{accent-color:var(--act)}
.rbtn:has(input[type="radio"]:checked){background:color-mix(in srgb,var(--act) 12%,var(--panel));border-color:var(--act);font-weight:600}
.scanres{margin:12px 0;max-height:44vh;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.scanrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:var(--sb);
  animation:flashin .5s var(--ease)}
@keyframes flashin{0%{background:var(--gb);transform:translateX(-12px)}100%{background:var(--sb);transform:none}}
.scanrow.bad{background:var(--rb)}

/* ---- barcode / labels ---- */
.bc{display:block;max-width:100%;background:#fff}
.lbl{background:#fff;color:#000;border:1px dashed #999;border-radius:6px;padding:6px 8px;display:flex;flex-direction:column;
  gap:2px;font-family:Arial,sans-serif;break-inside:avoid}
.lbl .l1{font-size:11px;font-weight:700;display:flex;justify-content:space-between;gap:6px}
.lbl .l2{font-size:9px;color:#333}
.lblsheet{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.scrim{display:none;position:fixed;inset:var(--top) 0 0 0;background:rgba(8,12,24,.45);z-index:25}

/* ---- misc ---- */
.bi{font-size:10.5px;color:var(--ink3);font-weight:500;margin-left:4px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;padding-bottom:2px;overflow-x:auto}
.tab{padding:7px 14px;border-radius:999px;background:var(--panel);border:1px solid var(--line);font-size:13.5px;
  font-weight:600;color:var(--ink2);white-space:nowrap;transition:.22s var(--ease)}
.tab:hover{border-color:var(--mod);color:var(--mod)}
.tab.on{background:var(--mod);border-color:var(--mod);color:#fff;box-shadow:0 6px 16px -8px var(--mod)}
.bar{height:7px;border-radius:99px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--mod),#ec4899);
  animation:fill 1s var(--ease) both}
@keyframes fill{from{width:0}}
.camwrap{position:relative;border-radius:var(--rad2);overflow:hidden;background:#000;aspect-ratio:1;max-width:420px}
.camwrap video,.camwrap canvas{width:100%;height:100%;object-fit:cover;display:block}
.guide{position:absolute;inset:12%;border:2px dashed rgba(255,255,255,.65);border-radius:12px;pointer-events:none}
.guide::after{content:attr(data-d);position:absolute;bottom:-26px;left:0;right:0;text-align:center;color:#fff;font-size:11px}
.camfocus{position:absolute;width:56px;height:56px;margin:-28px 0 0 -28px;border:2px solid #fff;border-radius:50%;
  opacity:0;transition:opacity .3s var(--ease);pointer-events:none;box-shadow:0 0 0 2px rgba(0,0,0,.35) inset}
.camwrap{cursor:crosshair}
.dz{border:2px dashed var(--line);border-radius:var(--rad2);padding:18px;text-align:center;color:var(--ink3);
  cursor:pointer;transition:.25s var(--ease)}
.dz:hover,.dz.over{border-color:var(--mod);color:var(--mod);background:color-mix(in srgb,var(--mod) 5%,transparent)}
.timeline{display:flex;flex-direction:column;gap:0;position:relative;padding-left:22px}
.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tlrow{position:relative;padding:8px 0;font-size:13px}
.tlrow::before{content:"";position:absolute;left:-19px;top:13px;width:9px;height:9px;border-radius:50%;
  background:var(--mod);box-shadow:0 0 0 3px var(--panel)}
.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;background:var(--sb);
  font-size:12px;color:var(--ink2)}
/* THE BOXCARD CHIP. The boxcard's own colour leads it — a tinted body and a
   solid dot — so the floor picks it out the way it picks the real thing off the
   rack, and the four digits confirm rather than carry. Fixed width so a row of
   three lines up with the row above it. */
.skfchip{align-items:center;margin:0 5px 4px 0;padding:3px 9px 3px 6px;gap:6px;
  background:color-mix(in srgb,var(--pc,var(--ink3)) 7%,var(--panel));
  border:1px solid color-mix(in srgb,var(--pc,var(--ink3)) 28%,transparent);
  border-left:4px solid var(--pc,var(--ink3));border-radius:8px;
  min-width:118px;vertical-align:top}
.skfchip:hover{background:color-mix(in srgb,var(--pc,var(--ink3)) 14%,var(--panel))}
.skfchip span{display:flex;flex-direction:column;line-height:1.3}
.skfchip .pcdot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--pc,var(--ink3));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--pc,var(--ink3)) 22%,transparent)}
.skfchip .skfcode{font-weight:800;font-size:12px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.skfchip .skfq{font-size:10.5px;opacity:.72;font-variant-numeric:tabular-nums}
/* COMBOS AS A LIST. One row per combo, its sides on the row, and the side that
   runs out first marked — because that side is the whole reason the combo
   cannot be packed, and finding it by arithmetic across 200 rows is not a job. */
.cbtbl td{vertical-align:middle}
.cbsides{max-width:430px}
.cbside{gap:4px;margin:0 4px 3px 0;padding:2px 8px;border:1px solid var(--line);background:var(--panel)}
.cbside i{font-style:normal;font-weight:700;opacity:.6;font-size:11px}
.cbside b{font-weight:700;font-size:11.5px}
.cbside .cbn{font-weight:800;font-variant-numeric:tabular-nums}
.cbside .cbpipe{font-size:10px;opacity:.6;font-variant-numeric:tabular-nums}
.cbside.on{border-color:var(--a);background:color-mix(in srgb,var(--a) 10%,var(--panel))}
.cbshort{font-style:normal;font-size:10px;font-weight:800;color:var(--a);letter-spacing:.02em}
.cbres td{background:color-mix(in srgb,var(--ink3) 5%,transparent)}
.rectag{font-weight:700;font-size:10px;letter-spacing:.02em}
.rectag{font-weight:700;font-size:10px;letter-spacing:.02em}
.flow{display:flex;gap:0;overflow-x:auto;padding:4px 0;margin-bottom:14px}
.fstep{display:flex;align-items:center;gap:7px;padding:7px 16px 7px 20px;background:var(--panel);border:1px solid var(--line);
  font-size:12.5px;font-weight:600;color:var(--ink3);white-space:nowrap;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%,10px 50%)}
.fstep.on{background:var(--mod);color:#fff;border-color:var(--mod)}
.fstep.done{background:var(--gb);color:var(--g)}

/* Simple Staff Mode: bigger everything, less text */
body.simple{--fs:17px}
body.simple .nglabel,body.simple .whoinfo,body.simple .adv{display:none}
body.simple .tbl{font-size:15.5px}
body.simple .tbl td{padding:13px 11px}
body.simple .btn,body.simple .btn2{padding:13px 20px;font-size:16px}
body.simple .numin{font-size:22px;padding:13px}
body.simple .gal{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
body.simple .idph{--s:74px!important}
body.simple .kv b{font-size:28px}

@media (max-width:1020px){
  :root{--side:0px}
  .navbtn{display:block}
  .side{transform:translateX(-100%);transition:transform .3s var(--ease);width:250px}
  body.navopen .side{transform:none;box-shadow:var(--sh2)}
  body.navopen .scrim{display:block}
  .main{margin-left:0;padding:14px 13px 80px}
  .whoinfo{display:none}

  /* Autoscroll on phones and tablets: the app moves the screen to the field or the
     row you are working on, so nobody scrolls with one hand full of rakhi.
     The offsets keep the target clear of the fixed header and the sticky action bar. */
  html{scroll-behavior:smooth}
  .f,.uf,.radios,.card,.chead,tr[data-line],#fastbody tr,.scanrow,.stickybar{
    scroll-margin-top:calc(var(--top) + 14px);scroll-margin-bottom:96px}
  .radios{gap:9px}
  .radios .ro{flex:1 1 auto;justify-content:center;min-height:48px}
}
@media (max-width:600px){
  .gsearch{max-width:none}
  .brand b{display:none}
  .crumb h1{font-size:18px}
  .lang{display:none}
  .tw{margin:0 -16px}
  /* keep the launcher a grid on the narrowest phone instead of collapsing to one column */
  .tiles{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
  .tile{padding:14px 8px}
  .tile .ti{width:46px;height:46px}
  .tile b{font-size:12.5px}
}
@media print{
  .top,.side,.pageact,.stickybar,.toasts,.bgfx,.scrim,.modal,.crumb .mdot,.btn,.btn2,.mini,.ghost{display:none!important}
  .main{margin:0;padding:0}
  .card{box-shadow:none;border:0;padding:0;margin:0 0 8px;break-inside:avoid}
  body{background:#fff;--fs:11px}
  .tbl{font-size:10.5px}.tbl td,.tbl th{padding:3px 5px}
  .lblsheet{grid-template-columns:repeat(4,1fr)}
  @page{margin:8mm}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* =======================================================================
   CHANGE REQUEST 2026
   ======================================================================= */

/* ---- C. permanent language switcher, one tap per language ---- */
.langseg{gap:0;padding:2px;overflow:hidden}
.lseg{display:grid;place-items:center;min-width:34px;height:30px;padding:0 8px;border-radius:8px;
  font-size:12px;font-weight:650;color:var(--ink3);transition:.2s var(--ease);white-space:nowrap}
.lseg:hover{color:var(--ink);background:var(--sb)}
.lseg.on{background:var(--mod);color:#fff;box-shadow:0 4px 12px -6px var(--mod)}

/* ---- D. context help ---- */
.fhelp{width:16px;height:16px;margin-left:5px;border-radius:50%;border:1px solid var(--line2);
  background:var(--sb);color:var(--ink3);font-size:10px;font-weight:800;line-height:1;cursor:help;
  display:inline-grid;place-items:center;vertical-align:middle;padding:0}
.fhelp:hover{background:var(--mod);color:#fff;border-color:var(--mod)}
.helpmodal .mbox{width:min(520px,100%)}
.helpbody{display:flex;flex-direction:column;gap:12px;max-height:60vh;overflow-y:auto;margin-bottom:14px}
.hrow{padding:10px 12px;border-radius:11px;background:var(--sb);border-left:3px solid var(--mod)}
.hrow b{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--mod);margin-bottom:4px}
.hrow p{font-size:13.5px;line-height:1.6;color:var(--ink2)}

/* ---- B. module launcher overlay ---- */
.launchmodal .mbox.wide{width:min(1000px,100%);max-height:86vh;overflow-y:auto}
.launchmodal .tiles{grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:10px}
.launchmodal .tile{padding:13px 9px;gap:7px}
.launchmodal .tile .ti{width:42px;height:42px;border-radius:13px}
.launchmodal .tile b{font-size:12px}
.tile.on{border-color:var(--c);box-shadow:0 0 0 2px var(--c) inset}

/* ---- K / N / V. planned | actual | difference strip ---- */
.diffstrip{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--panel);margin:10px 0}
.diffstrip>div{flex:1 1 120px;min-width:110px;padding:9px 13px;border-right:1px solid var(--line)}
.diffstrip>div:last-child{border-right:0}
.diffstrip small{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink3);margin-bottom:2px}
.diffstrip b{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}
.diffstrip .neg b{color:var(--r)}
.diffstrip .pos b{color:var(--a)}
.diffstrip .zero b{color:var(--g)}

/* ---- F. cost calculator boxes ---- */
.calcgrid{display:grid;gap:11px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.calcbox{padding:11px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel)}
.calcbox label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink3);margin-bottom:5px}
.calcbox input{width:100%;font-size:17px;font-weight:700;font-family:inherit;font-variant-numeric:tabular-nums}
.calcbox .cbout{margin-top:5px;font-size:13px;font-weight:700;color:var(--g);font-variant-numeric:tabular-nums}
.calcbox .cberr{margin-top:5px;font-size:12px;color:var(--r)}
.calcbox.derived{background:var(--sb)}
.calcbox.final{border-color:var(--mod);box-shadow:0 0 0 2px color-mix(in srgb,var(--mod) 22%,transparent)}
.calcbox.final .cbout{font-size:22px;color:var(--mod)}

/* ---- G. mandatory photo capture stepper ---- */
.stepper{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.step{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:12px;
  font-weight:650;background:var(--sb);color:var(--ink3);border:1px solid var(--line)}
.step.on{background:var(--mod);color:#fff;border-color:var(--mod)}
.step.done{background:color-mix(in srgb,var(--g) 15%,transparent);color:var(--g);border-color:var(--g)}
.step i{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:rgba(255,255,255,.25);
  font-size:10px;font-weight:800;font-style:normal}
.capturebar{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:9px;align-items:center;
  padding:11px 13px;margin-bottom:12px;border-radius:13px;
  background:color-mix(in srgb,var(--mod) 9%,var(--panel));border:1px solid var(--mod)}
.capturebar .need{font-size:12.5px;font-weight:650;color:var(--r)}
.capturebar .have{font-size:12.5px;font-weight:650;color:var(--g)}
button[disabled],.btn[disabled]{opacity:.45;pointer-events:none;filter:grayscale(.5)}

/* ---- E. live design-name matches, photo first ---- */
.matchstrip{display:flex;gap:9px;overflow-x:auto;padding:9px 0;margin-top:8px}
.matchcard{flex:0 0 auto;width:96px;text-align:center}
.matchcard .mimg{width:96px;height:96px;border-radius:12px;overflow:hidden;background:var(--sb);
  display:grid;place-items:center;border:1px solid var(--line)}
.matchcard .mimg img{width:100%;height:100%;object-fit:cover}
.matchcard b{display:block;margin-top:5px;font-size:12px;font-family:inherit;font-variant-numeric:tabular-nums}
.matchcard small{display:block;font-size:10.5px;color:var(--ink3)}
.dupwarn{margin-top:8px;padding:9px 12px;border-radius:11px;font-size:13px;font-weight:650;
  background:color-mix(in srgb,var(--r) 12%,transparent);color:var(--r);border:1px solid var(--r)}

/* ---- Y. barcode print popup ---- */
.printmodal .mbox{width:min(460px,100%)}
.printqty input{font-size:34px!important;font-weight:800;text-align:center;
  font-family:inherit;font-variant-numeric:tabular-nums;padding:12px!important}
.valuegrid{display:grid;gap:8px;grid-template-columns:repeat(3,1fr);margin:12px 0}
.valuegrid div{padding:9px;border-radius:10px;background:var(--sb);text-align:center}
.valuegrid small{display:block;font-size:10px;font-weight:700;text-transform:uppercase;color:var(--ink3)}
.valuegrid b{font-size:16px;font-weight:800}

/* ---- AB. purchase home: two clear choices ---- */
.bigchoice{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.choicecard{display:flex;flex-direction:column;gap:11px;padding:24px;border-radius:var(--rad);
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--sh);transition:.28s var(--ease)}
.choicecard:hover{transform:translateY(-4px);box-shadow:var(--sh2);border-color:var(--c)}
.choicecard .ci{display:grid;place-items:center;width:56px;height:56px;border-radius:17px;color:#fff;
  background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 55%,#000))}
.choicecard h3{font-size:17px;font-weight:700}
.choicecard p{font-size:13px;line-height:1.6;color:var(--ink3)}

/* ---- B. dashboard hierarchy: countdown and information last, small ---- */
.infostrip{display:flex;flex-wrap:wrap;gap:9px;align-items:center;padding:10px 13px;border-radius:12px;
  background:var(--sb);border:1px solid var(--line);font-size:12.5px;color:var(--ink3)}
.infostrip b{color:var(--ink)}

/* ---- G-12 / G-13. no horizontal scroll, compact two-row mobile layout ---- */
@media (max-width:640px){
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid .wide,.fgrid .big{grid-column:1/-1}
  .diffstrip>div{flex:1 1 33%;min-width:0;padding:7px 9px}
  .diffstrip b{font-size:16px}
  .calcgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .valuegrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .langseg .lseg{min-width:29px;padding:0 5px;font-size:11px}
  .stepper{gap:4px}
  .step{padding:5px 9px;font-size:11px}
}
@media (max-width:400px){
  .fgrid{grid-template-columns:1fr}
}

/* ---- B. module grid column counts, exactly as the requirement states ----
   Mobile 2–3 columns · Tablet 3–4 · Desktop 4–6. Fixed counts rather than
   auto-fill, so the grid never drops to a single wasteful column and never
   sprawls past six. */
.tiles.dash{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:420px){ .tiles.dash{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:700px){ .tiles.dash{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:1100px){ .tiles.dash{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media (min-width:1400px){ .tiles.dash{grid-template-columns:repeat(6,minmax(0,1fr))} }
@media (max-width:420px){
  .tiles.dash .tile{padding:13px 8px;gap:7px}
  .tiles.dash .tile .ti{width:42px;height:42px;border-radius:13px}
  .tiles.dash .tile b{font-size:11.5px;line-height:1.25}
}

/* ---- G-15. Simple Staff Mode: bigger targets, fewer words, photo led ---- */
body.simple .nglabel,body.simple .modglabel .chip,body.simple .hint,body.simple .bi{display:none}
body.simple .tile{padding:22px 12px}
body.simple .tile .ti{width:60px;height:60px}
body.simple .tile b{font-size:15px}
body.simple .btn,body.simple .btn2{padding:13px 18px;font-size:15px}
body.simple .f input,body.simple .f select{min-height:48px;font-size:16px}
body.simple .adv{display:none!important}
body.simple .tbl{font-size:15px}
body.simple .idph{--s:64px!important}

/* ---- AW. cascading location picker -------------------------------------- */
/* One control, several stops. Two columns on a phone so the whole hierarchy
   is visible without sideways scrolling (G-12). */
.geopick{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;
  padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--line2)}
.geopick .gf{display:flex;flex-direction:column;gap:4px;min-width:0}
.geopick .gf>label{font-size:11px;font-weight:640;color:var(--ink3);text-transform:uppercase;letter-spacing:.3px}
.geopick .gf select,.geopick .gf input{width:100%;min-width:0}
.geopick .gfwide{grid-column:1/-1}
.geopick [data-geo-label]{grid-column:1/-1;font-weight:640}
.geohits{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;max-height:130px;overflow:auto}
.geohits button{font-size:11px;padding:4px 8px;border:1px solid var(--line);border-radius:999px;
  background:var(--panel);cursor:pointer;color:inherit}
.geohits button:hover{border-color:var(--mod);color:var(--mod)}
@media(max-width:520px){.geopick{grid-template-columns:1fr 1fr}}

/* =======================================================================
   ADDENDUM 2026
   ======================================================================= */

/* ---- 15. density: one set of custom properties, set once in <head> ----
   --fs font size · --rowh row height · --btnh button height
   --cellpad grid density · --colw default column width · --gap spacing
   Every value is clamped server-side, so nothing here can produce a screen
   nobody can use. */
:root{--rowh:30px;--btnh:34px;--cellpad:2px;--colw:120px;--gap:10px}
body{font-size:var(--fs)}
.tbl td,.tbl th{padding:var(--cellpad) 8px;height:var(--rowh)}
.tbl td>input,.tbl td>select,.tbl td>textarea{min-height:calc(var(--rowh) - 4px)}
.btn,.btn2,.ghost{min-height:var(--btnh)}
.card{margin-bottom:var(--gap)}
.grid,.fgrid{gap:var(--gap)}
body.d-compact .card{padding:calc(var(--gap) + 2px)}
body.d-compact .crumb{margin-bottom:calc(var(--gap) - 2px)}
body.d-compact .kpi{padding:8px 10px}
body.d-compact .chead{margin-bottom:8px}
body.d-large .f input,body.d-large .f select,body.d-large .f textarea{min-height:calc(var(--btnh) + 8px)}
body.d-large .tbl{font-size:calc(var(--fs) + .5px)}

/* ---- 15. compact colour-coded text controls ----
   Text first, colour second. Every control carries a readable label, so colour
   is never the only signal. Icons appear only where they earn their space. */
.ctabs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:var(--gap);align-items:stretch}
.ctabs.modes{gap:8px}
.ct{--c:var(--mod);display:inline-flex;flex-direction:column;justify-content:center;gap:1px;
  padding:5px 11px;min-height:var(--btnh);border-radius:8px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink2);cursor:pointer;font:inherit;text-align:left;
  border-left:3px solid var(--c);transition:.16s var(--ease);position:relative;white-space:nowrap}
.ct b{font-size:calc(var(--fs) - 1.5px);font-weight:680;letter-spacing:-.005em;color:var(--ink)}
.ct em{font-size:calc(var(--fs) - 4px);font-style:normal;color:var(--ink3);font-weight:500}
.ct i{position:absolute;top:2px;right:4px;min-width:16px;padding:0 4px;border-radius:99px;
  background:var(--c);color:#fff;font-size:9.5px;font-style:normal;font-weight:800;text-align:center;line-height:14px}
.ct>.ic{color:var(--c)}
.ct:hover{border-color:var(--c);color:var(--ink);transform:translateY(-1px)}
.ct.on{background:color-mix(in srgb,var(--c) 14%,var(--panel));border-color:var(--c);
  box-shadow:inset 3px 0 0 var(--c)}
.ct.on b{color:var(--c)}
.ctabs.settingstabs .ct{padding:4px 9px}
.ctabs.settingstabs .ct b{font-size:calc(var(--fs) - 2.5px)}
/* the older tab strips are drawn as the same compact text tabs, never hidden
   (Sales Floor, Rating, Purchase … navigate by them) */
body.textui .tabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px;padding:0;overflow:visible}
body.textui .tabs .tab{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;min-height:var(--btnh);border-radius:8px;
  border:1px solid var(--line);border-left:3px solid var(--mod);background:var(--panel);color:var(--ink);
  font-size:calc(var(--fs) - 1.5px);font-weight:680;box-shadow:none;transition:.16s var(--ease)}
body.textui .tabs .tab:hover{border-color:var(--mod);color:var(--ink)}
body.textui .tabs .tab.on{background:color-mix(in srgb,var(--mod) 14%,var(--panel));border-color:var(--mod);color:var(--mod);box-shadow:inset 3px 0 0 var(--mod)}
body.textui .tabs .tab b{min-width:16px;padding:0 5px;border-radius:99px;background:var(--mod);color:#fff;font-size:10px;font-weight:800;line-height:15px;text-align:center}
body.textui .tabs .tab .ic{width:13px;height:13px}

/* compact coloured figure boxes: a subtotal, a count, a balance */
.cboxrow{display:grid;gap:6px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-bottom:var(--gap)}
.cboxrow.grand{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-top:6px}
.cbox{--c:var(--mod);display:flex;flex-direction:column;gap:0;padding:6px 10px;border-radius:9px;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--c);min-width:0}
.cbox small{font-size:calc(var(--fs) - 4.5px);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbox b{font-size:calc(var(--fs) + 2px);font-weight:800;font-variant-numeric:tabular-nums;color:var(--c)}
.cbox em{font-size:calc(var(--fs) - 4px);font-style:normal;color:var(--ink3)}
a.cbox:hover{border-color:var(--c);transform:translateY(-1px)}
.cboxrow.grand .cbox b{font-size:calc(var(--fs) + 5px)}

/* ---- 13. searchable dropdown (the global controlled-value standard) ---- */
.pickwrap{position:relative;display:block}
.pickwrap .pickin{width:100%}
.picklist{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 2px);display:none;
  max-height:240px;overflow-y:auto;background:var(--panel);border:1px solid var(--mod);
  border-radius:10px;box-shadow:var(--sh2);padding:4px}
.pickwrap.open .picklist{display:block}
.picklist button{display:block;width:100%;text-align:left;padding:6px 9px;border:0;border-radius:7px;
  background:none;color:var(--ink);font:inherit;font-size:calc(var(--fs) - 1px);cursor:pointer}
.picklist button:hover,.picklist button.sel{background:color-mix(in srgb,var(--mod) 14%,transparent);color:var(--mod)}
.picklist .none{padding:6px 9px;color:var(--ink3);font-size:calc(var(--fs) - 2px)}
.pickwrap.bad .pickin{border-color:var(--r);box-shadow:0 0 0 3px color-mix(in srgb,var(--r) 16%,transparent)}

/* ---- 7 / 8 / 9. the estimate scanning desk ---- */
.deskhead{position:sticky;top:var(--top);z-index:20;padding:6px 0;margin:-4px 0 8px;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px)}
.bucketbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.bblabel{font-size:calc(var(--fs) - 4px);font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3)}
.bucketbar .ctabs{margin-bottom:0}
.bucketbar .ct{min-width:118px}
.scanrow{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.scanecho{display:flex;gap:10px;align-items:center;padding:7px 11px;border-radius:11px;
  background:var(--sb);border:1px solid var(--line);min-width:240px;flex:1}
.scanecho.flash{animation:seflash .5s var(--ease)}
@keyframes seflash{0%{background:color-mix(in srgb,var(--g) 30%,var(--sb))}100%{background:var(--sb)}}
.sephoto{width:56px;height:56px;border-radius:9px;overflow:hidden;background:var(--panel);
  display:grid;place-items:center;flex:0 0 auto;border:1px solid var(--line)}
.sephoto img{width:100%;height:100%;object-fit:cover}
.seinfo{display:flex;flex-direction:column;min-width:0}
.seinfo b{font-family:inherit;font-variant-numeric:tabular-nums;font-size:calc(var(--fs) + 1px)}
.seinfo em{font-style:normal;font-weight:800;color:var(--mod)}
.lotbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:7px 11px;margin-top:9px;
  border-radius:10px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--mod)}
.lotbar>span{display:flex;flex-direction:column;min-width:0}
.lotbar small{font-size:calc(var(--fs) - 4.5px);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3)}
.lotbar b{font-size:calc(var(--fs) + 1px);font-weight:800;font-variant-numeric:tabular-nums}
.lotbar .lotno b{color:var(--mod);font-size:calc(var(--fs) + 4px)}
.lotbar .lotdone{flex-direction:row;gap:4px;flex-wrap:wrap}
tr.lotlock td{background:color-mix(in srgb,var(--g) 6%,transparent)}
tr.lotlock td:first-child{box-shadow:inset 3px 0 0 var(--g)}

/* ---- 4 / 5. the print template designer ---- */
.dtwrap{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:1200px){.dtwrap{grid-template-columns:1fr}}
.dtprev{position:sticky;top:calc(var(--top) + 10px);align-self:start}
.dtframe{width:100%;height:70vh;min-height:420px;border:1px solid var(--line);border-radius:10px;background:#fff}
.dth{margin:16px 0 7px;display:flex;align-items:center;gap:7px;color:var(--ink2);
  border-bottom:1px solid var(--line2);padding-bottom:5px}
.logobox{width:150px;min-height:64px;display:grid;place-items:center;padding:7px;border-radius:10px;
  background:var(--sb);border:1px dashed var(--line)}
.logobox img{max-width:100%;max-height:80px}

/* ---- 16. the AI concept grid: 3 x 4 = 12 ---- */
.aigrid{display:grid;gap:10px;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
@media (max-width:900px){.aigrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.aigrid{grid-template-columns:1fr}}
.aicard{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;background:var(--panel);
  border:1px solid var(--line);box-shadow:var(--sh);transition:.2s var(--ease)}
.aicard:hover{transform:translateY(-2px);box-shadow:var(--sh2);border-color:var(--mod)}
.aiimg{position:relative;aspect-ratio:1;background:var(--sb);display:grid;place-items:center;overflow:hidden}
.aiimg img{width:100%;height:100%;object-fit:cover}
.aiseg{position:absolute;left:6px;top:6px;padding:2px 7px;border-radius:99px;background:rgba(17,24,39,.78);
  color:#fff;font-size:10.5px;font-weight:700}
.aiconf{position:absolute;right:6px;top:6px;padding:2px 7px;border-radius:99px;color:#fff;
  font-size:10.5px;font-weight:800}
.aiconf.g{background:var(--g)}.aiconf.a{background:var(--a)}.aiconf.s{background:var(--s)}
.aimeta{display:flex;flex-direction:column;gap:1px;padding:8px 10px}
.airow{display:flex;gap:6px;font-size:calc(var(--fs) - 3px);color:var(--ink2);min-width:0}
.airow i{font-style:normal;font-weight:700;color:var(--ink3);min-width:58px;flex:0 0 auto}
.aicost{margin-top:4px;font-size:calc(var(--fs) + 1px);font-weight:800;color:var(--mod)}
.aiacts{display:flex;gap:5px;padding:0 10px 10px}
.aiacts .ct{flex:1;justify-content:center;text-align:center;min-height:30px;padding:4px 7px}
.aiacts .ct b{font-size:calc(var(--fs) - 3px)}
.dimgrid{display:grid;gap:7px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.dimbox{padding:7px 9px;border-radius:9px;background:var(--sb);border:1px solid var(--line)}
.dimbox small{display:block;font-size:calc(var(--fs) - 4px);font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink3);margin-bottom:4px}
.dimbox small em{font-style:normal;color:var(--mod)}
.dimbox>div{display:flex;flex-wrap:wrap;gap:3px}
.pickgrid{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}
.pickchip{width:auto!important;gap:5px;padding:3px 9px;border:1px solid var(--line);border-radius:99px;
  background:var(--panel);font-size:calc(var(--fs) - 3px)}
.pickchip b{font-weight:600}

/* ---- print: the document engine renders standalone, so nothing here leaks ---- */
@media print{
  .ctabs,.cboxrow,.deskhead,.lotbar,.scanecho,.dtprev,.aiacts{display:none!important}
}

/* =======================================================================
   WORKFLOW & UX CORRECTIONS ADDENDUM (changes3)
   ======================================================================= */

/* --- C3-14/15/16: the global camera capture component ------------------
   The default view is the live window and ONE prominent shutter. Everything
   technical is inside .camadv, which is closed until the DETAILS / ADVANCED
   button is pressed — so a worker's screen has exactly two controls on it. */
.camshoot{margin-top:10px;align-items:center}
.camshoot .btn.big{font-size:16px;font-weight:800;padding:14px 22px;letter-spacing:.02em;
  min-height:52px;flex:1 1 210px;justify-content:center}
.camshoot .btn.big svg{width:22px;height:22px}
.camadv{margin-top:12px;padding:12px 13px;border-radius:13px;
  background:color-mix(in srgb,var(--mod) 6%,var(--panel));border:1px dashed var(--line)}
.camadv .uomrow{flex-wrap:wrap}
[data-camdetails].on{background:color-mix(in srgb,var(--mod) 16%,transparent);color:var(--mod)}
/* the confirmation step reads as the thing to press next */
[data-camuse]{min-height:46px}
@media (max-width:640px){
  .camshoot{position:sticky;bottom:0;z-index:6;padding:9px 0;
    background:linear-gradient(to top,var(--panel) 72%,transparent)}
  .camshoot .btn.big{flex:1 1 100%}
}

/* --- C3-17/18/19: a quantity the browser has already refused ----------- */
input[data-qty].qtybad{border-color:var(--r) !important;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--r) 18%,transparent) !important}
.qtymsg{display:block;font-size:11.5px;font-weight:650;color:var(--r);margin-top:3px}

/* --- C3-23/24/25: checkbox product selection on the production floor ---
   The checkbox comes BEFORE the image, is big enough for a thumb, and a
   selected row is obvious at a glance across a bench. */
.pickcol{width:44px;text-align:center}
tr[data-selrow] .pickcol .chk{height:auto}
tr[data-selrow] .pickcol input[type=checkbox]{width:22px;height:22px;accent-color:var(--mod);cursor:pointer}
tr[data-selrow]{transition:background .18s var(--ease)}
tr[data-selrow].on{background:color-mix(in srgb,var(--mod) 9%,transparent)}
tr[data-selrow]:not(.on) .qtycell input{opacity:.5}
tr[data-selrow]:not(.on) td:not(.pickcol){opacity:.62}
.selbar{display:flex;flex-wrap:wrap;gap:9px;align-items:center;padding:10px 13px;margin-bottom:12px;
  border-radius:13px;background:color-mix(in srgb,var(--mod) 8%,var(--panel));border:1px solid var(--mod)}
.selbar b{font-variant-numeric:tabular-nums}
.selcount{display:inline-flex;gap:6px;align-items:center;font-size:13px;font-weight:700}
.selcount em{font-style:normal;font-weight:800;color:var(--mod)}

/* --- C3-5/6: the pairing suggestion and gallery cards ------------------ */
.gcard.sel{outline:2px solid var(--g);outline-offset:1px}
.matchstrip .top{outline:2px solid var(--g)}

/* --- C3-10: the paired planning strip --------------------------------- */
.pairstrip{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px 12px;margin:8px 0;
  border-radius:12px;background:color-mix(in srgb,var(--mod) 7%,var(--panel));border:1px solid var(--line)}
.pairstrip .pnum{display:flex;flex-direction:column;min-width:104px}
.pairstrip .pnum small{font-size:10.5px;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em}
.pairstrip .pnum b{font-size:16px;font-variant-numeric:tabular-nums}
.pairstrip .pnum.short b{color:var(--r)}
.pairstrip .pnum.ok b{color:var(--g)}

/* ==========================================================================
   CHANGES4 9 / 10 / 11. THE ONE GLOBAL STOCK INDICATOR.
   Every stock-bearing item card, list row and search result draws the same
   chip, so "Available: 432 pcs" looks and means the same thing everywhere.
   The breakup is a <details>, so expanding it needs no JavaScript at all.
   ========================================================================== */
.stkchip{display:inline-block;max-width:100%}
.stkchip>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.stkchip>summary::-webkit-details-marker{display:none}
.stkchip>summary::after{content:"";width:0;height:0;border:3.5px solid transparent;
  border-top-color:var(--ink3);margin-top:3px;transition:transform .18s var(--ease);flex:none}
.stkchip[open]>summary::after{transform:rotate(180deg)}
.stkq{display:inline-flex;align-items:baseline;gap:4px;flex-wrap:wrap;
  padding:1px 7px;border-radius:999px;font-size:12.5px;line-height:1.5;
  color:var(--c,var(--ink2));background:color-mix(in srgb,var(--c,var(--ink3)) 11%,transparent)}
.stkq em{font-style:normal;font-weight:600;opacity:.8}
.stkq b{font-weight:800;font-variant-numeric:tabular-nums}
.stkq i{font-style:normal;font-size:11px;opacity:.8}
.stkq .stkuom{font-size:10.5px;opacity:.7;white-space:nowrap}
.stkres{margin-left:4px;font-size:10.5px}
/* STACKED: the total, and its breakup in letters directly under it — one narrow
   column instead of a line that wraps and loses the number. */
.stkq.stkstack{flex-direction:column;align-items:flex-end;gap:0;padding:2px 8px}
.stkq.stkstack b{font-size:14px;line-height:1.25}
.stkq.stkstack .stkuom{font-size:10px;opacity:.65;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.stkbreak{margin-top:7px;padding:9px 10px;border:1px solid var(--line);border-radius:11px;
  background:var(--panel);min-width:230px;text-align:left}
.stksum{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:6px;margin-bottom:8px}
.stksum>div{padding:5px 7px;border-radius:8px;background:var(--line2)}
.stksum small{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3)}
.stksum b{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.stksum .free b{color:var(--g)}
.stklist{display:flex;flex-direction:column;gap:2px}
.stkrow{display:flex;align-items:center;gap:7px;font-size:12px;padding:2px 0}
.stkrow .stkname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stkrow b{font-variant-numeric:tabular-nums}
.stkdot{width:8px;height:8px;border-radius:50%;flex:none}
.stkgone{margin-top:7px;padding-top:6px;border-top:1px dashed var(--line);opacity:.65}
.stkgone>small{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);
  margin-bottom:3px}
.tbl .stkchip>summary{justify-content:flex-end}
.tbl .stkbreak{position:relative;z-index:2}

/* CHANGES4 22 / 23: the four standard job work tabs read the same in Rakhi,
   Packaging and Packing Job Work, so the numbering is part of the look. */
.jwtabs .tab b{margin-left:5px}

/* CHANGES4 32 / 34: the Packer Code on a barcode sticker. Printed as plain text
   outside the barcode's quiet zone, never inside it. */
.lbl{position:relative}
.lbl .lblpacker{position:absolute;font-weight:800;letter-spacing:.06em;line-height:1;
  font-family:inherit;font-variant-numeric:tabular-nums}
.lbl .lblpacker.bottom_right{right:1.2mm;bottom:0.8mm}
.lbl .lblpacker.bottom_left{left:1.2mm;bottom:0.8mm}
.lbl .lblpacker.top_right{right:1.2mm;top:0.8mm}
.lbl .lblpacker.top_left{left:1.2mm;top:0.8mm}
.lbl .bc{margin:0.6mm 0}

/* =========================================================================
   CHANGES5
   ========================================================================= */

/* ---- 4 / 6: the estimate desk head. The Sales Bucket tab strip is gone; what
   is left is a read-only statement of what the Customer Discount Master will do,
   because the operator no longer chooses anything. ---- */
.discbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dchip{display:flex;flex-direction:column;line-height:1.15;padding:5px 11px;border-radius:11px;
  background:color-mix(in srgb,var(--c) 10%,transparent);border:1px solid color-mix(in srgb,var(--c) 40%,transparent)}
.dchip small{font-size:calc(var(--fs) - 4.5px);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3)}
.dchip b{font-size:calc(var(--fs) + 3px);font-weight:800;color:var(--c);font-variant-numeric:tabular-nums}
.dchip em{font-size:calc(var(--fs) - 4px);font-style:normal;color:var(--ink3)}

/* ---- 10: maximum image density, minimum scrolling. The tile size is
   configuration (gallery.tile_px), and a compact card carries two lines. ---- */
.gal{grid-template-columns:repeat(auto-fill,minmax(var(--tile,150px),1fr))}
.gcard.gtight .gmeta{padding:5px 7px;gap:1px}
.gcard.gtight .gmeta b{font-size:12.5px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gcard.gtight .gq{font-size:16px;line-height:1.15}
.gpend{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;color:#b45309;
  background:var(--ab);border-radius:999px;padding:1px 7px;align-self:flex-start;white-space:nowrap}
.gq.muted{color:var(--ink3)}
@media (max-width:600px){.gal{grid-template-columns:repeat(auto-fill,minmax(min(var(--tile,150px),44vw),1fr))}}

/* ---- 12 / 13: the gallery search + filter bar ---- */
.galbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px;position:relative}
.fdbtn{position:relative}
.fdbtn b{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:5px;padding:0 5px;
  border-radius:999px;background:var(--mod);color:#fff;font-size:11px}
.fdchips{display:flex;gap:6px;flex-wrap:wrap;width:100%}
.fchip{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;font-size:11.5px;
  background:color-mix(in srgb,var(--mod) 12%,transparent);color:var(--mod);border:1px solid color-mix(in srgb,var(--mod) 35%,transparent)}
.fchip small{color:var(--ink3);font-weight:600}
.fchip button{border:0;background:none;color:inherit;cursor:pointer;font:inherit;line-height:1;padding:0 0 0 2px}
.fchip button:hover{color:var(--r)}

/* the filter panel: a dropdown on a desktop, a bottom sheet on a phone, so the
   gallery keeps its space either way (13) */
.fdrawer{display:none;position:absolute;z-index:70;top:calc(100% + 6px);left:0;right:0;
  max-height:min(70vh,560px);overflow-y:auto;padding:12px;border-radius:var(--rad);
  background:var(--panel);border:1px solid var(--mod);box-shadow:var(--sh2)}
.fdrawer.on{display:block}
.fdhead{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px;
  padding-bottom:8px;border-bottom:1px solid var(--line2)}
.fdbody{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.fdfoot{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:12px;padding-top:10px;
  border-top:1px solid var(--line2);position:sticky;bottom:-12px;background:var(--panel)}
@media (max-width:700px){
  .fdrawer{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:82vh;border-radius:18px 18px 0 0;
    border-left:0;border-right:0;border-bottom:0;padding:14px 14px 20px;
    animation:sheetup .28s var(--ease) both}
  .fdbody{grid-template-columns:1fr}
  .fdrawer .fdfoot{bottom:0}
}
@keyframes sheetup{from{transform:translateY(100%)}to{transform:none}}

/* ---- 13: the searchable multi-select itself ---- */
.mpick{display:flex;flex-direction:column;gap:5px;min-width:0}
.mpick>label{font-size:12px;font-weight:640;color:var(--ink2);display:flex;align-items:center;gap:5px}
.mpick>label .mpn{font-style:normal;font-size:11px;font-weight:700;color:#fff;background:var(--mod);
  border-radius:999px;padding:0 6px;min-width:16px;text-align:center}
.mpick>label .mpn:empty{display:none}
.mpbox{border:1px solid var(--line);border-radius:10px;background:var(--panel);overflow:hidden}
.mpin{width:100%;border:0;border-bottom:1px solid var(--line2);background:none;outline:0;font:inherit;
  color:var(--ink);padding:7px 10px}
.mpin:focus{border-bottom-color:var(--mod)}
.mplist{max-height:172px;overflow-y:auto;padding:3px;scrollbar-width:thin}
.mpopt{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:7px;cursor:pointer;
  font-size:calc(var(--fs) - 1px);line-height:1.25}
.mpopt:hover{background:var(--line2)}
.mpopt.on{background:color-mix(in srgb,var(--mod) 13%,transparent);color:var(--mod);font-weight:640}
.mpopt input{width:16px;height:16px;accent-color:var(--mod);flex:0 0 auto}
.mpopt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mpopt[hidden]{display:none}
.mplist .none{padding:6px 9px;color:var(--ink3);font-size:calc(var(--fs) - 2px)}
.mpchips{display:flex;gap:5px;flex-wrap:wrap}
.mpchips:empty{display:none}
.mpchips .fchip{font-size:11px}

/* ---- 1: the location picker, now one row per level with the PIN box first ---- */
.geopick{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.geopick .gf{display:flex;flex-direction:column;gap:4px;min-width:0}
.geopick .gf>label{font-size:12px;font-weight:640;color:var(--ink2)}
.geopick .gfwide{grid-column:1/-1}
.geopick .gf[hidden]{display:none}
.geohits{display:flex;gap:5px;flex-wrap:wrap}
.geohits:empty{display:none}

/* ---- 14-27: the migration workflow strip reuses .flow; only the audit grid is new ---- */
.migaudit{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

@media print{.galbar,.fdrawer,.fdchips,.discbar{display:none!important}}

/* =======================================================================
   CHANGES5.5 — THE COMPACT MOBILE ACTION BAR
   -----------------------------------------------------------------------
   .stickybar is a card footer with flex-wrap on. On a phone the Design Entry
   copy of it wrapped onto three or four rows — Save, Save & Next, Cancel, a
   draft chip, two sentences of explanation, the advanced switch — and took
   about a quarter of the screen. This is the replacement, and it is a NEW
   component rather than a change to .stickybar, because forty-odd other
   screens still render that one and are not part of this change.

   Two pieces:
     .actmeta  a single scrolling line above the bar: Advanced ▾, the (i) that
               carries the sentence that used to be printed permanently, and
               the draft note. In flow, so it costs no permanent screen space.
     .actbar   the bar itself: Cancel | Save | Save & Next, one row, no wrap,
               nothing else in it. Fixed above the keyboard on a phone.

   Permanently visible height on a phone: 5 + 44 + 5 + 1 = 55px, which is
   6.9% of an 800px viewport and 8.6% of a 640px one. Buttons are 44px, the
   touch-target floor, and a larger density setting raises them but nothing
   lowers them.

   Two custom properties, both written by ActBar in app.js:
     --abh    the measured bar height, so the page reserves exactly that much
              and no blank strip appears under the buttons
     --kbins  how much of the layout viewport the on-screen keyboard covers,
              0 whenever there is no keyboard
   ======================================================================= */

.actmeta{display:flex;align-items:center;gap:9px;min-width:0;margin:12px 0 6px;
  font-size:12.5px;line-height:1.3}
.actmeta .advtoggle{gap:4px;font-weight:650;padding:1px 3px;border-radius:7px;margin-left:-3px}
.actmeta .advtoggle:focus-visible{outline:2px solid var(--mod);outline-offset:1px}
.actmeta .advtoggle .cv{flex:none;width:0;height:0;margin-top:3px;
  border:4px solid transparent;border-top-color:currentColor;transition:transform .18s var(--ease)}
body.showadv .actmeta .advtoggle .cv{transform:rotate(180deg);margin-top:-3px}
/* Simple Staff Mode hides every .adv field outright, so the switch would be dead UI */
body.simple .actmeta .advtoggle{display:none}
.actmeta .fhelp{margin-left:0;cursor:pointer}
.actmeta .chip{margin-left:auto;padding:2px 8px;font-size:11px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.actmeta .chip:empty{display:none}

/* No card footer: the bar is rendered outside the card entirely, so it gets a
   hairline and the page background — no negative margins bleeding it to a panel
   edge, no rounded bottom corners pretending to be one. */
.actbar{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;
  position:sticky;bottom:0;z-index:24;margin:0;padding:8px 0;
  border-top:1px solid var(--line);background:var(--bg)}
.actbar>.btn,.actbar>.btn2,.actbar>.ghost{min-height:var(--btnh);padding:0 15px;min-width:0}
.actbar .ic{flex:none}
.actbar>*>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width:1020px){
  /* --abh is only ever set on a screen that has the bar, so a screen without one
     resolves this to 0px and behaves exactly as before */
  html{scroll-padding-bottom:calc(var(--abh,0px) + var(--kbins,0px))}

  .actmeta{margin:5px 0 3px;gap:8px;font-size:11.5px}

  /* Fixed, not sticky: a sticky bottom:0 sits at the bottom of the LAYOUT
     viewport, which on Android does not shrink for the keyboard, so the bar
     ends up behind it. --kbins lifts it to the top of the keyboard instead. */
  .actbar{position:fixed;left:0;right:0;top:auto;bottom:var(--kbins,0px);
    gap:7px;padding:5px 11px calc(5px + env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--line);border-radius:0;
    background:color-mix(in srgb,var(--panel) 95%,transparent);backdrop-filter:blur(12px);
    box-shadow:0 -5px 14px -10px rgba(16,24,40,.55)}
  /* the keyboard is already occupying the home-bar area; do not pad for it twice */
  body.kbopen .actbar{padding-bottom:5px}

  .actbar>.btn,.actbar>.btn2,.actbar>.ghost{flex:1 1 0;min-width:0;
    min-height:max(44px,var(--btnh));padding:0 12px;border-radius:11px;font-size:13.5px}
  .actbar>.btn{flex:1.4 1 0}                    /* Save is the widest: the obvious one */
  /* Cancel is the smallest control, so it is the one that needs the touch floor
     spelled out: a two-letter translation would otherwise render it under 44px */
  .actbar>.abcancel{flex:0 0 auto;min-width:44px;padding:0 13px;font-weight:600;
    color:var(--ink3);box-shadow:none}
  body.simple .actbar>.btn,body.simple .actbar>.btn2,body.simple .actbar>.ghost{
    padding:0 13px;font-size:15px;min-height:max(48px,var(--btnh))}
  /* a fixed bar cannot be nudged, so the hover lift would only look broken */
  .actbar>.btn:hover,.actbar>.btn2:hover,.actbar>.ghost:hover{transform:none}

  /* Reserve exactly the bar, plus the keyboard while it is up. The bar part is
     what stops a blank strip appearing under the buttons. The keyboard part is
     what makes the LAST field reachable: Android shrinks only the visual
     viewport, so without it the document simply runs out of scroll and the final
     field can never be lifted clear of the bar. It costs nothing visible — the
     padding it adds is behind the keyboard — and returns to zero the moment the
     keyboard closes. */
  body.hasactbar .main{padding-bottom:calc(var(--abh,56px) + var(--kbins,0px) + 14px)}
  body.hasactbar .toasts{bottom:calc(var(--abh,56px) + var(--kbins,0px) + 12px)}
}

@media print{.actbar,.actmeta{display:none!important}}

/* =======================================================================
   A3 — APPROVED NON-ORDER-MANAGEMENT ENHANCEMENTS
   A3 §31: "powerful in the backend but simple at the user level", so nothing
   below adds decoration. Every class here exists because a screen needed to say
   something clearly: a share as a bar, an ageing band as a colour, a confidential
   document as a word rather than an icon nobody decodes.
   ======================================================================= */

/* --- §29: a proportion, shown as a bar, without a chart library --------- */
.bar { display:block; height:4px; margin-top:4px; border-radius:2px; background:var(--sb,#e2e8f0); overflow:hidden }
.bar::after { content:''; display:block; height:100%; width:var(--p,0%); background:var(--mod); border-radius:2px }

/* --- §11: THE GALLERY TILE ---------------------------------------------
   "PRIMARY CARD DISPLAY: Design Image, Design Number, Selling Rate. Do not
   clutter the tile with unnecessary cost, attributes, kit info, etc." So the
   tile has exactly three slots and no room for a fourth. */
.gallery { display:grid; gap:var(--gap,10px);
           grid-template-columns:repeat(auto-fill,minmax(132px,1fr)) }
.gtile { display:flex; flex-direction:column; gap:2px; padding:6px; border-radius:10px;
         background:#fff; border:1px solid var(--sb,#e2e8f0); text-decoration:none; color:inherit;
         transition:transform .12s ease, box-shadow .12s ease }
.gtile:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(15,23,42,.12) }
.gtile .gimg { position:relative; display:flex; align-items:center; justify-content:center;
               aspect-ratio:1/1; border-radius:7px; overflow:hidden; background:var(--sb,#f1f5f9);
               color:#94a3b8 }
.gtile .gimg img { width:100%; height:100%; object-fit:cover }
.gtile b { font-size:.86rem; letter-spacing:.01em }
.gtile em { font-style:normal; font-weight:700; font-size:.82rem; color:#0f766e }
.gflag { position:absolute; top:4px; left:4px; font-style:normal; font-size:.62rem; font-weight:700;
         padding:1px 5px; border-radius:99px; background:#0f172a; color:#fff; letter-spacing:.02em }
.gflag.new { background:#16a34a }
.gflag.limited { background:#f59e0b }
.gflag.red { background:#ef4444 }
.gflag.closed { background:#64748b }

/* --- §22: THE "WHY" BLOCK ---------------------------------------------
   The share bar and the confidence label are the two things §22 insists on:
   how much is explained, and whether it is a cause or a correlation. */
.whyblock { padding:2px 0 }
.whyblock h3 { display:flex; align-items:center; gap:6px; margin:0 0 4px; font-size:1rem }
.whyconf { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:6px 0 10px }
.whylist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px }
.whylist li { position:relative; padding:5px 8px 7px; border-radius:7px;
              background:var(--sb,#f8fafc); border:1px solid rgba(148,163,184,.28) }
.whylist li em { font-style:normal; font-weight:700; color:var(--mod) }
.whylist a { font-weight:600 }
.wbar { position:absolute; left:0; bottom:0; height:3px; width:var(--p,0%);
        background:var(--mod); border-radius:0 2px 2px 0 }

/* --- §25: THE APPROVAL INBOX ------------------------------------------- */
.apprrow { display:grid; gap:12px; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) }
.apprmain, .apprside { min-width:0 }
.apprimpact { margin:0 0 8px; padding:7px 9px; border-radius:7px; font-weight:600;
              background:rgba(5,150,105,.08); border-left:3px solid #059669 }
.card.danger .apprimpact { background:rgba(239,68,68,.08); border-left-color:var(--r,#ef4444) }
@media (max-width:820px) { .apprrow { grid-template-columns:1fr } }

/* --- §17: THE EXCEPTION QUEUE -----------------------------------------
   §17: "Operational users should see human-readable messages, not raw technical
   logs." .excmsg is the sentence; .exctech is folded away and Admin-only. */
.excmsg { margin:0 0 4px; font-size:1rem; font-weight:600 }
.excact { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:8px 0 }
.exctech { margin:8px 0; padding:6px 9px; border-radius:7px; background:#0f172a; color:#e2e8f0 }
.exctech summary { cursor:pointer; font-size:.78rem; opacity:.85 }
.exctech pre { margin:6px 0 0; white-space:pre-wrap; word-break:break-word; color:#93c5fd }

/* --- shared small pieces the A3 screens use --------------------------- */
.btnrow2 { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px }
.inlineform { display:inline-flex; flex-wrap:wrap; gap:5px; align-items:center; margin:0 }
.filtercard { background:linear-gradient(180deg,rgba(99,102,241,.05),transparent) }
.lateRow > td { background:rgba(239,68,68,.06) }
.reusesentence { margin:0 0 10px; padding:8px 10px; border-radius:8px; font-weight:600;
                 background:rgba(22,163,74,.08); border-left:3px solid #16a34a }
.dglist { list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:5px }
.dglist li { display:flex; flex-wrap:wrap; gap:6px; align-items:center }
.docprev { margin:0 0 10px; max-height:300px; overflow:hidden; border-radius:8px;
           background:var(--sb,#f1f5f9); display:flex; align-items:center; justify-content:center }
.docprev img { max-width:100%; max-height:300px; object-fit:contain }

/* --- §2: THE "MORE" DRAWER AND THE FAVOURITE PIN ---------------------- */
/* The drawer's own list is opened and closed by app.js on the inline style, and
   a collapsed SECTION is closed by .ngroup.shut above. There used to be an
   .ngmore / .openmore pair here as well; nothing ever emitted those classes, and
   `.ngroup.openmore > .nglist { display:block }` would have forced the section's
   main list open too. Two mechanisms for one behaviour is how a menu ends up
   stuck, so there is now one. */
.navmore { display:flex; align-items:center; gap:5px; width:100%; padding:5px 9px; border:0;
           border-radius:7px; background:transparent; color:inherit; cursor:pointer;
           font:inherit; font-size:.78rem; opacity:.75 }
.navmore:hover { background:rgba(148,163,184,.16); opacity:1 }
/* The pin sits beside the module link, not inside it — see nav_row_html(). It is
   positioned over the row's right edge so the link keeps the whole row as its
   click target, and the row reserves room so a long name never runs under it. */
.navrow { position:relative }
.navrow.haspin > .nav { padding-right:34px }
.navfav { position:absolute; right:7px; top:50%; transform:translateY(-50%);
          display:flex; align-items:center; justify-content:center;
          width:22px; height:22px; border-radius:6px; color:inherit;
          opacity:.3; transition:.15s var(--ease); z-index:2 }
.navfav:hover { opacity:1; background:var(--line2) }
.navfav.on { opacity:1; color:#f59e0b }
.navrow:hover .navfav { opacity:.75 }
.navrow:hover .navfav.on { opacity:1 }

/* --- §2: MOBILE BOTTOM NAVIGATION -------------------------------------
   "Mobile bottom navigation for 4–5 highest-use destinations." Only on a phone;
   on anything wider the sidebar already does the job better. */
.botnav { display:none }
@media (max-width:720px) {
  .botnav { position:fixed; left:0; right:0; bottom:0; z-index:40;
            display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
            background:#fff; border-top:1px solid var(--sb,#e2e8f0);
            box-shadow:0 -2px 12px rgba(15,23,42,.08);
            padding-bottom:env(safe-area-inset-bottom,0) }
  .botnav a { display:flex; flex-direction:column; align-items:center; gap:1px;
              padding:6px 2px 5px; text-decoration:none; color:#64748b; font-size:.62rem;
              position:relative }
  .botnav a.on { color:var(--mod) }
  .botnav a.on::before { content:''; position:absolute; top:0; left:22%; right:22%; height:2px;
                         border-radius:0 0 2px 2px; background:var(--mod) }
  .botnav a b { font-weight:600; letter-spacing:.01em }
  .botnav .nbadge { position:absolute; top:2px; right:18%; }
  body { padding-bottom:56px }
}

/* --- §4: the WIP stage board reads as a pipeline, not a spreadsheet ---- */
.wipdims, .whytabs, .exctabs { flex-wrap:wrap }
.mdot { display:inline-block; width:8px; height:8px; border-radius:99px; vertical-align:baseline }

/* --- §24: a value this role may not see is a dash, never a zero ------- */
.nosee { color:#94a3b8; letter-spacing:.08em }

/* =======================================================================
   A4 — GLOBAL REQUIREMENTS + SETTINGS/MASTERS + MODULE-WISE CHANGES
   ======================================================================= */

/* --- GLOBAL 3: the direct Labor WhatsApp strip -------------------------
   One row: the action, the state, and the sentence saying what will actually
   be sent. It wraps on a phone rather than scrolling sideways, because the
   sentence is the part somebody reads once and the button is the part they
   press every day. */
.lwabar { display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.lwabar form { display:inline-flex; margin:0 }
.lwabar > .small { flex:1 1 260px; min-width:0 }

/* --- GLOBAL 1: the photo control, now carrying one label ---------------
   The heading says "Photo (Mandatory)" and the chip beside the camera button
   reports state only. Sizing it down keeps it reading as a status rather than
   as a second heading competing with the first. */
.capturebar [data-photostate] { font-size:calc(var(--fs) - 2px); font-weight:600; display:inline-flex;
  align-items:center; gap:4px }
.capturebar [data-photostate].have { color:var(--g) }
.capturebar [data-photostate].need { color:var(--a) }

/* --- GLOBAL 6: the mandatory-field cursor path ------------------------
   A field that is on the keyboard path gets a quiet marker on its label, so
   somebody can see WHY Tab skipped the box they expected. Optional fields are
   never hidden — that is the requirement — they are simply not marked. */
.f > label > i, .f > .flabel > i { color:var(--r); font-style:normal; font-weight:800; margin-left:2px }
body.showmand .f:has(> :is(input,select,textarea)[data-mandatory]) > :is(label,.flabel) { color:var(--ink) }
body.showmand .f:has(> :is(input,select,textarea)[data-mandatory]) { border-left:2px solid var(--mod);
  padding-left:6px; margin-left:-8px }

/* --- the focus note a fast-entry screen prints above its form --------- */
.seqnote { display:flex; align-items:flex-start; gap:6px; margin:-4px 0 12px;
  font-size:calc(var(--fs) - 2px); color:var(--ink3) }
.seqnote b { color:var(--ink2) }

/* --- PART B 3-14 / 16: the two-level Settings bar ----------------------
   Level 1 is the section, level 2 the tabs inside it. The section row reads
   heavier than the tab row so the hierarchy is visible without a border or an
   indent, and a section A4 marks sensitive carries its own tone. */
.ctabs.settingsgroups { margin-bottom:6px }
.ctabs.settingsgroups .ct { padding:6px 13px }
.ctabs.settingsgroups .ct b { font-size:calc(var(--fs) - 0.5px); font-weight:750 }
.ctabs.settingstabs { margin-bottom:var(--gap); padding-left:2px }

/* PART B 16: the search sits in the heading action bar, not in a card. */
.gsearch.cfgfind { max-width:230px; flex:0 1 230px }
@media (max-width:640px) {
  .gsearch.cfgfind { max-width:none; flex:1 1 100%; order:-1 }
  .ctabs.settingsgroups .ct { padding:5px 10px }
}

/* --- PART B 1: the Masters section ------------------------------------- */
.gal.mstgal { grid-template-columns:repeat(auto-fill,minmax(210px,1fr)) }
.mstcard { display:flex; align-items:flex-start; gap:11px; padding:11px 12px; text-decoration:none;
  border-radius:var(--rad2); border:1px solid var(--line); background:var(--panel);
  border-left:3px solid var(--c,var(--mod)); transition:.16s var(--ease) }
.mstcard:hover { border-color:var(--c,var(--mod)); transform:translateY(-1px) }
.mstcard .mstic { flex:0 0 auto; color:var(--c,var(--mod)); display:grid; place-items:center;
  width:34px; height:34px; border-radius:9px; background:color-mix(in srgb,var(--mod) 12%,transparent) }
.mstcard .gmeta { display:flex; flex-direction:column; gap:2px; min-width:0 }
.mstcard b { font-size:var(--fs); color:var(--ink) }
.mstrights { display:flex; gap:4px; flex-wrap:wrap; margin-top:2px }
.mstnote { display:block; margin-top:3px; line-height:1.35 }

/* A4 PART C 3 — read-only value box.
   Used where a figure is SHOWN but must not be editable (the Production
   Assigned Qty on Design Relationships). It deliberately does not look like an
   input, so nobody tries to type in it and wonders why nothing saved. */
.ro{display:flex;align-items:center;min-height:38px;padding:8px 11px;border-radius:9px;
    background:var(--bg2,#f6f7f9);border:1px dashed var(--line,#dfe3e8);font-size:14px}
.ro .mono{font-variant-numeric:tabular-nums}
.chip.warn{background:#fff4e5;color:#8a5300;border-color:#f0c98a}

/* =======================================================================
   A5 — GLOBAL 2 AND THE MODULAR REQUIREMENTS
   ======================================================================= */

/* GLOBAL 2 §1. The contextual Settings button, in a fixed corner of every
   screen and in the SAME corner on every screen — "Keep the Settings button in
   a consistent position across the entire software." It sits above the mobile
   bottom navigation so the two never overlap on a phone. */
.pagecfgbtn{
  position:fixed; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:58;
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  background:var(--panel); color:var(--mod); display:grid; place-items:center;
  box-shadow:0 6px 22px rgba(0,0,0,.18); cursor:pointer; transition:transform .16s, box-shadow .16s;
}
.pagecfgbtn.br{ right:calc(16px + env(safe-area-inset-right)) }
.pagecfgbtn.bl{ left:calc(16px + env(safe-area-inset-left)) }
.pagecfgbtn:hover{ transform:translateY(-2px) rotate(25deg); box-shadow:0 10px 28px rgba(0,0,0,.24) }
.pagecfgbtn:focus-visible{ outline:2px solid var(--mod); outline-offset:2px }
@media (max-width:720px){ .pagecfgbtn{ bottom:calc(70px + env(safe-area-inset-bottom)) } }
@media print{ .pagecfgbtn,.pagecfgmodal{ display:none !important } }
.pagecfgmodal .mbox{ max-width:560px }
.pagecfgmodal .pcgroup{
  border:1px solid var(--line); border-radius:10px; padding:9px 11px; margin:9px 0;
  display:flex; flex-direction:column; gap:5px;
}
.pagecfgmodal .pcgroup .btnrow{ margin:0; flex-wrap:wrap; gap:5px }

/* GLOBAL 2 §7.1. "Convert letters automatically to UPPERCASE." The transform is
   here rather than inline so app.js can normalise the value itself without an
   inline style outranking the stylesheet. */
input[data-upper]{ text-transform:uppercase }
/* GLOBAL 2 §6 / §7. A refused value reuses the quantity rule's shape, so an
   operator never learns two different looks for "that is wrong". */
.valmsg{ color:var(--r) }

/* PICKING §7. The priority view strip, and the urgency band on a row. */
.priotabs{ margin:0 0 10px }
tr.prio-overdue td{ box-shadow:inset 3px 0 0 var(--r) }
tr.prio-today td{ box-shadow:inset 3px 0 0 var(--a) }
tr.prio-held td{ opacity:.55 }
tr.prio-held td:first-child{ box-shadow:inset 3px 0 0 var(--mut) }

/* MODULE 5 §8. "Clearly indicate visually when Bulk Mode is active." */
body.bulkmode .scanrow, body.bulkmode #bcin{ box-shadow:0 0 0 2px var(--a) inset }
body.bulkmode #bcin{ background:color-mix(in srgb, var(--a) 8%, var(--panel)) }
[data-bulk-toggle].on{ background:var(--a); color:#fff; border-color:var(--a) }
.bulkbar{
  display:flex; gap:7px; align-items:flex-end; flex-wrap:wrap;
  border:1px dashed var(--a); border-radius:10px; padding:8px 10px; margin:8px 0;
}
.bulkbar .f{ margin:0 }

/* A15 P2 / MODULE 5 §8. THE THREE EXPLICIT SCAN MODES, as a segmented control. */
.scanmodes{ display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin:8px 0 2px }
.scanmodes .modebtn{
  border:1px solid var(--line); background:var(--panel); color:var(--ink);
  border-radius:8px; padding:5px 12px; font-size:.82rem; font-weight:700; cursor:pointer;
}
.scanmodes .modebtn.on{ background:var(--mod); color:#fff; border-color:var(--mod) }
.scanmodes [data-fixed-row]{ margin:0 }
/* Fixed mode is visually distinct from Bulk so the two are never confused. */
body.fixedmode .scanrow, body.fixedmode #bcin{ box-shadow:0 0 0 2px var(--g) inset }
body.fixedmode #bcin{ background:color-mix(in srgb, var(--g) 8%, var(--panel)) }

/* A15 P4 §9.2. "Why it is here" — a keyboard/touch-accessible disclosure, so the
   factor breakdown is reachable without a mouse hover. */
.whyhere{ display:inline-block }
.whyhere>summary{ cursor:pointer; list-style:none; color:var(--mut); display:inline-flex; align-items:center; gap:4px }
.whyhere>summary::-webkit-details-marker{ display:none }
.whyhere>summary:focus-visible{ outline:2px solid var(--mod); outline-offset:2px; border-radius:4px }
.whyhere[open]>summary{ color:var(--ink) }
.whybody{ margin-top:4px; padding:6px 8px; border:1px solid var(--line); border-radius:8px; background:var(--panel); min-width:180px }
.whybody .prow{ display:flex; justify-content:space-between; gap:12px; font-size:.8rem; padding:1px 0 }
.whybody .prow b{ font-variant-numeric:tabular-nums }

/* A15 P4. Fast Order two-zone desktop layout: item/scanner + lines on the left,
   customer / deadline / priority / metadata on the right. Collapses to one
   column on a narrow screen. */
.fastzones{ display:grid; grid-template-columns:1fr; gap:16px }
@media (min-width:900px){ .fastzones{ grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr) } }
.fastzones .fz-right{ align-self:start }
.fastzones .fz-right .f{ margin:0 0 8px }

/* A15 P2 / MODULE 5 §28. The final customer / WhatsApp confirmation strip. */
.confirmstrip{ display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  border-left:3px solid var(--mod); padding:4px 6px }
.confirmstrip .cs-total{ margin-left:auto }
.confirmstrip .cs-total b{ font-size:calc(var(--fs) + 3px); color:var(--mod);
  font-variant-numeric:tabular-nums }

/* A15 P2 / MODULE 5. ~TEN VISIBLE LINE ROWS, THEN SCROLL INTERNALLY.
   The Lines grid caps its height at roughly ten rows and scrolls inside itself,
   so the scan box above and the subtotal/actions stay put on one screen. The
   header stays pinned while scrolling (columns keep their labels) and the tfoot
   subtotal is pinned to the bottom of the scroll area, so the running total is
   always visible however far down the operator has scrolled. */
/* A16 P3.4: at least 12 complete item rows visible, the grid body scrolling
   internally with a sticky header and a sticky subtotal/footer row. */
.tw:has(table.deskgrid){ max-height:calc(12 * 2.5em + 3em); overflow-y:auto }
.tw:has(table.deskgrid) thead th{ position:sticky; top:0; z-index:3; background:var(--panel) }
.tw:has(table.deskgrid) tfoot td{ position:sticky; bottom:0; z-index:2;
  background:var(--panel); box-shadow:0 -1px 0 var(--line) }

/* =========================================================================
   A16 P3.1 / P3.4 / P3.6  +  A19 B3.1. THE COMPRESSED DESKTOP ESTIMATE WORKSPACE.

   On a working desktop the estimate desk becomes one flex COLUMN that fills the
   viewport under the fixed header. Only the line-grid body scrolls; the customer
   header, entry toolbar, charges, totals and the action bar stay put, and the
   document itself never grows a page-level vertical scrollbar. Every flex
   ancestor of the grid scroller uses min-height:0 so the grid — not the page —
   is what scrolls (P3.1 / B3.1).

   A19 B3.1 broadened the trigger. It used to be (min-width:1440px) and
   (min-height:820px), which a MAXIMISED 1366x768 browser never matched — its
   usable height is only ~600-650px after the OS task bar and browser chrome, so
   that laptop-class screen silently fell back to the page-scrolling block and
   failed the "1366x768: only the grid body scrolls" rule. The trigger is now
   (min-width:1280px) and (min-height:600px): it engages the one-viewport model
   on 1920x1080, on the >=1440x850 primary target AND on a real 1366x768 laptop,
   while genuinely small/short windows still fall back to the plain block with
   the 12-row internal-scroll cap, so nothing regresses (P3.7).
   NOTE: the exact "zero page scroll + 12 fully visible rows" pixel guarantee at
   each resolution can only be proven by a real browser at that resolution; that
   measurement is recorded in BATCH_3_OUTPUT_REPORT.txt as environment-blocked.
   ========================================================================= */
@media (min-width:1280px) and (min-height:600px){
  /* reserve room for the fixed top bar (--top), the breadcrumb and the page
     paddings so the column never overflows the viewport — the hard P3.1 / B3.1
     contract is "no page-level vertical scrollbar", so this errs on the safe
     side; any slack becomes a small bottom margin, never a document scroll. */
  .estdesk{ display:flex; flex-direction:column; gap:8px; min-height:0;
    height:calc(100vh - var(--top) - 120px) }
  .estdesk > .card{ margin:0; padding:10px 12px; min-height:0 }
  .estdesk > .deskhead{ flex:0 0 auto }
  /* the Lines card is the one element that grows and scrolls internally */
  .estdesk > .card:has(table.deskgrid){ flex:1 1 auto; display:flex; flex-direction:column; overflow:hidden }
  .estdesk > .card:has(table.deskgrid) > form{ display:flex; flex-direction:column; min-height:0; flex:1 1 auto }
  .estdesk .tw:has(table.deskgrid){ flex:1 1 auto; max-height:none; min-height:0 }
  /* the action bar stays visible at the foot of the workspace (P3.6 / B3.1) */
  .estdesk .stickybar{ position:sticky; bottom:0; margin:0; flex:0 0 auto }
  /* P3.1 / B3.1: the long explanatory paragraphs leave the dense transaction
     screen; the same information is one keypress away in the Help drawer (F1).
     A19 tagged the non-barcode / O-Rakhi / charges intros with .deskhelp too so
     those "long separate sections below the grid" stop eating vertical room. */
  .estdesk .deskhelp{ display:none }
  /* B3.1: the entry toolbar is scan-first but MUST be allowed to wrap into at
     most two logical rows on the 1024-1439 tier without reordering, so the
     scan box, modes and Add never overflow their card horizontally. */
  .estdesk .scanrow, .estdesk .scanmodes, .estdesk .bulkbar{ flex-wrap:wrap }
  /* P3.5 / B3.1: compact spacing so the whole thing breathes without spreading,
     and the below-grid entry/summary cards give their vertical room to the grid. */
  .estdesk .scanmodes, .estdesk .bulkbar{ margin:4px 0 }
  .estdesk .nbrow{ margin:3px 0 }
  .estdesk .fgrid{ gap:6px 10px }
  .estdesk .diffstrip{ margin:4px 0 }
}

/* MODULE 5 §9. "All four non-barcode input boxes should be placed very close to
   each other. Do not spread them across the full width of the screen. Use only
   the minimum practical width for each field." */
.nbrow{ display:flex; gap:6px; align-items:flex-end; flex-wrap:wrap; margin:0 0 6px }
.nbrow .f{ margin:0 }
.nbrow input, .nbrow select{ height:var(--btnh, 34px) }
.nbrow .nb-item{ width:210px } .nbrow .nb-item input{ width:100% }
.nbrow .nb-qty{ width:76px }   .nbrow .nb-qty input{ width:100% }
.nbrow .nb-uom{ width:104px }  .nbrow .nb-uom select{ width:100% }
.nbrow .nb-rate{ width:88px }  .nbrow .nb-rate input{ width:100% }
.nbrow label{ font-size:.72rem; display:block; margin:0 0 2px; color:var(--mut) }
@media (max-width:520px){
  .nbrow .nb-item{ width:100% }
  .nbrow .nb-qty,.nbrow .nb-uom,.nbrow .nb-rate{ flex:1 1 30% }
}

/* MODULE 5 §24. Check Lot on the left corner, End Lot on the right, clearly
   separated. */
.lotends{ display:flex; align-items:center; gap:10px; width:100% }
.lotends .lotleft{ margin-right:auto }
.lotends .lotright{ margin-left:auto }

/* MODULE 5 §12 / §21. Non-barcode items first, and the serial number they now
   carry, in a column narrow enough not to cost anything. */
td.serialcell{ font-variant-numeric:tabular-nums; white-space:nowrap }
tr[data-nonbarcode] td{ background:color-mix(in srgb, var(--a) 4%, transparent) }

/* MODULE 11 §4 / §5. "Keep this grid extremely compact … Priority is to display
   the essential working information on the first screen without horizontal
   scrolling wherever possible. Avoid large empty spacing, excessive padding,
   unnecessary columns, long explanations, oversized controls." */
table.shipgrid{ table-layout:fixed; width:100% }
table.shipgrid th, table.shipgrid td{ padding:3px 5px; font-size:.86rem }
table.shipgrid input, table.shipgrid select{ width:100%; height:30px; padding:2px 6px; font-size:.86rem }
/* §4: "Maximum input length: 16 characters/digits. Give this field sufficient
   width for 16 characters." */
table.shipgrid col.c-lr{ width:15ch }
table.shipgrid col.c-transport{ width:18% }
table.shipgrid col.c-customer{ width:26% }
table.shipgrid col.c-date{ width:9ch }
table.shipgrid col.c-value{ width:11ch }
table.shipgrid col.c-city{ width:14% }
table.shipgrid col.c-act{ width:8ch }
table.shipgrid td.lrcell input{ font-variant-numeric:tabular-nums; letter-spacing:.02em }
/* §10's frozen first column, so the LR box stays put if a wide screen is not wide enough */
table.shipgrid.freeze th:first-child, table.shipgrid.freeze td:first-child{
  position:sticky; left:0; background:var(--panel); z-index:1;
}
table.shipgrid tr.shipdone td{ opacity:.6 }

/* MODULE 8. The party ledger / T report, on screen and on paper. The page size,
   the fonts, the borders and the shading are all configuration; these are the
   hooks those settings write into. */
.ptreport{ --pt-font:9pt; --pt-row:5mm; font-size:var(--pt-font) }
.ptreport table{ width:100%; border-collapse:collapse; table-layout:fixed }
.ptreport th, .ptreport td{ padding:1mm 1.5mm; height:var(--pt-row); vertical-align:top }
.ptreport.b-grid th, .ptreport.b-grid td{ border:.2mm solid #999 }
.ptreport.b-h th, .ptreport.b-h td{ border-bottom:.2mm solid #bbb }
.ptreport.b-none th, .ptreport.b-none td{ border:0 }
.ptreport.zebra tbody tr:nth-child(even) td{ background:#f6f7f9 }
.ptreport .num{ text-align:right; font-variant-numeric:tabular-nums }
.ptreport thead th{ background:#eef1f5; font-weight:600; text-align:left }
.ptreport .pthead{ display:flex; justify-content:space-between; gap:6mm; align-items:flex-start; margin:0 0 3mm }
.ptreport .ptfoot{ margin:3mm 0 0; display:flex; justify-content:space-between; gap:6mm; font-size:.9em }
.ptreport .ptparty{ break-inside:avoid }
.ptreport .ptbreak{ break-after:page; page-break-after:always }
.ptreport .ptopening td{ font-weight:600; background:#fbfbe8 }
.ptreport .ptclosing td{ font-weight:700; border-top:.4mm solid #333 }
@media print{
  body.printing > *:not(.ptwrap){ display:none !important }
  .ptwrap{ margin:0; padding:0 }
  .ptreport thead{ display:table-header-group }
  .ptreport tfoot{ display:table-footer-group }
}

/* HELP MODULE. The manual, the step list and the company's own notes. */
.helpgrid{ display:grid; grid-template-columns:minmax(190px,240px) 1fr; gap:14px; align-items:start }
@media (max-width:860px){ .helpgrid{ grid-template-columns:1fr } }
.helpnav{ position:sticky; top:66px; max-height:calc(100vh - 96px); overflow:auto }
.helpnav a{ display:block; padding:4px 8px; border-radius:7px; font-size:.88rem; color:inherit; text-decoration:none }
.helpnav a:hover{ background:var(--soft) }
.helpnav a.on{ background:var(--mod); color:#fff }
.helpnav .hgrp{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--mut); margin:10px 0 3px }
.helpsteps{ counter-reset:hstep; list-style:none; padding:0; margin:8px 0 }
.helpsteps li{ counter-increment:hstep; display:flex; gap:9px; padding:5px 0; align-items:flex-start }
.helpsteps li::before{
  content:counter(hstep); flex:0 0 22px; height:22px; border-radius:50%;
  background:var(--mod); color:#fff; display:grid; place-items:center; font-size:.74rem; font-weight:700;
}
.helpnote{ border-left:3px solid var(--a); background:color-mix(in srgb, var(--a) 6%, transparent);
  border-radius:0 8px 8px 0; padding:7px 11px; margin:8px 0 }
.helpshot{ max-width:100%; border:1px solid var(--line); border-radius:9px; margin:6px 0 }
.helpfeedback{ display:flex; gap:8px; align-items:center; margin-top:12px; flex-wrap:wrap }
/* §14. Training / guided mode: a first-time tip that goes away when dismissed. */
.traintip{ border:1px dashed var(--mod); border-radius:10px; padding:8px 11px; margin:8px 0;
  display:flex; gap:9px; align-items:flex-start; font-size:.9rem }
body:not(.training) .traintip{ display:none }

/* MIGRATION. The export progress and the per-sheet record-count comparison,
   because §17 says a failure must be reported and never delivered quietly. */
.exptable td.cnt{ text-align:right; font-variant-numeric:tabular-nums }
.exptable tr.expbad td{ background:color-mix(in srgb, var(--r) 8%, transparent) }
.exptable tr.expsplit td{ background:color-mix(in srgb, var(--a) 8%, transparent) }

/* A5 MODULE 2 §2B. "Where possible, highlight uncertain values." A field filled
   in automatically from a business card that the reader was not confident about
   is marked, so the operator's review has somewhere to start rather than being
   asked to re-check everything equally. */
.f.uncertain input, .f.uncertain textarea, .f.uncertain select{
  border-color:var(--a); background:color-mix(in srgb, var(--a) 7%, var(--panel));
}
.f.uncertain > label::after, .f.uncertain > .flabel::after{
  content:' — check this'; color:var(--a); font-weight:600; font-size:.72rem;
}
.inceptways{ margin:0 0 10px }
.inceptpane{
  border:1px dashed var(--line); border-radius:10px; padding:9px 11px; margin:0 0 12px;
}
.inceptpane h3{ margin:8px 0 4px }

/* ======================================================================
   A6 §71 — THE GLOBAL HEADER LEAD CLUSTER: Home -> Help -> Language -> Logo.
   These three controls sit in the absolute top-left, before the logo, on every
   screen and at every width. Their order is fixed; only presentation changes.
   ====================================================================== */
.navlead{display:flex;align-items:center;gap:6px;flex:0 0 auto;order:0}
.top .brand{order:1}
.top .navbtn{order:2}
.top .gsearch{order:3}
.top .topright{order:4}
.nlbtn{display:inline-flex;align-items:center;gap:6px;height:38px;min-width:40px;padding:0 11px;
  border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);
  cursor:pointer;font:inherit;font-size:13px;font-weight:650;text-decoration:none;
  transition:.2s var(--ease);white-space:nowrap}
.nlbtn:hover{border-color:var(--mod);color:var(--mod);background:color-mix(in srgb,var(--mod) 8%,var(--panel))}
.nlbtn:focus-visible{outline:2px solid var(--mod);outline-offset:2px}
.nlbtn svg{flex:0 0 auto}
.navlead .nl-lang{display:flex;height:38px}
.navlead .nlglobe{display:none;color:var(--ink3)}
/* A6 §71.5 responsive priority: as width falls, collapse the LOWER-priority
   things first (search text, logo wordmark, launcher) and keep Home/Help/Language
   directly visible. They are NEVER moved into the hamburger. */
@media (max-width:1024px){
  .nlbtn .nltxt{display:none}            /* icon-only, but still a real button */
  .nlbtn{padding:0 9px;min-width:38px;justify-content:center}
}
@media (max-width:600px){
  .top{gap:8px;padding:0 10px}
  .top .navlead{order:0}
  .top .navlead .nl-lang{display:flex}   /* override the generic .lang hide: it is mandatory */
  .navlead .langseg .lseg{min-width:26px;padding:0 5px;font-size:11px}
  .top .gsearch{display:none}            /* search collapses before the three controls do */
  .brand{max-width:120px}
}
@media (max-width:380px){
  .brand .knot{width:26px;height:26px}
  .nlbtn{height:36px;min-width:36px;padding:0 7px}
}
/* A6 §71.10 compact header mode (order still fixed) */
.top.compact{height:52px}
.top.compact .nlbtn{height:34px}

/* ======================================================================
   A6 TESTING & DIAGNOSTICS
   ====================================================================== */
.ttabs{margin:0 0 14px}
.tstat{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.tstat svg{width:12px;height:12px}
.t-pass{background:color-mix(in srgb,var(--g) 16%,transparent);color:var(--g)}
.t-fail{background:color-mix(in srgb,var(--r) 16%,transparent);color:var(--r)}
.t-critical{background:var(--r);color:#fff}
.t-warn{background:color-mix(in srgb,var(--a) 20%,transparent);color:var(--a)}
.t-info{background:var(--sb);color:var(--ink2)}
.t-skip{background:var(--sb);color:var(--ink3)}
.ttable tr.tr-fail td,.ttable tr.tr-critical td{background:color-mix(in srgb,var(--r) 7%,transparent)}
.ttable tr.tr-warn td{background:color-mix(in srgb,var(--a) 7%,transparent)}
.ttable code{font-size:11px;color:var(--ink3)}
.errtext{color:var(--r)} .oktext{color:var(--g)}
/* health ring */
.healthwrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:4px 0 10px}
.healthring{width:118px;height:118px;border-radius:50%;display:grid;place-items:center;position:relative;
  background:conic-gradient(var(--tone) calc(var(--h)*1%),var(--line) 0);flex:0 0 auto}
.healthring::after{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--panel)}
.healthring b{position:relative;font-size:30px;font-weight:800;line-height:1;color:var(--tone)}
.healthring small{position:relative;color:var(--ink3);font-size:11px}
.healthmeta{display:flex;gap:18px;flex-wrap:wrap}
.healthmeta>div{display:flex;flex-direction:column}
.healthmeta b{font-size:22px;line-height:1.1}
.healthmeta small{color:var(--ink3);font-size:11px}
.hbar{height:8px;border-radius:6px;background:var(--sb);overflow:hidden}
.hbar i{display:block;height:100%;border-radius:6px}
/* diagnostics grid */
.diaggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.diagcard{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--panel);display:flex;flex-direction:column;gap:6px}
.diagcard b{font-size:14px}
.scnpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px;margin-bottom:10px}
.scnchk{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel);cursor:pointer;font-size:13px}
/* live simulation */
.simctrl{flex-wrap:wrap}
.simpanel{min-height:140px;padding:6px 2px}
.simpanel .simstep{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px}
.simpanel .simstep dt{color:var(--ink3);font-size:12px}
.simpanel .simstep dd{margin:0;font-weight:650}
.simverdict{margin-top:10px;font-size:16px;font-weight:800}
.simlog{max-height:420px;overflow:auto;font-size:12.5px;display:flex;flex-direction:column;gap:3px}
.simlog .lg{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:8px;background:var(--sb)}
.simlog .lg time{color:var(--ink3);font-variant-numeric:tabular-nums}
.simlog .lg.f{background:color-mix(in srgb,var(--r) 12%,transparent)}
.simlog .lg.w{background:color-mix(in srgb,var(--a) 12%,transparent)}

/* A11 §5.1 — the reason a Save button is disabled, shown right beside it.
   Save is never silently disabled: this explains what to fix to enable it. */
.savewhy{
  color:var(--r,#dc2626);
  font-size:13px;
  font-weight:600;
  align-self:center;
  margin-left:6px;
  max-width:32ch;
  line-height:1.25;
}
@media (max-width:640px){ .savewhy{ max-width:100%; flex:1 1 100%; margin-left:0; } }

/* ============ A14 P0 §5 — Label Designer ============ */
.ldz{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.ldz-stage{flex:1 1 340px;min-width:300px}
.ldz-canvas{position:relative;background:#fff;border:1px solid var(--line);border-radius:8px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.02);overflow:hidden;max-width:100%}
.ldz-canvas::before{content:"";position:absolute;inset:var(--m,0);border:1px dashed #c7ccd6;pointer-events:none;border-radius:2px}
.ldz-el{position:absolute;box-sizing:border-box;overflow:hidden;font-size:11px;line-height:1.05;
  color:#111;padding:0 1px;border:1px solid transparent;cursor:move;user-select:none;touch-action:none;white-space:nowrap}
.ldz-el:hover{border-color:#9aa4b2}
.ldz-el.sel{border-color:var(--pri,#2563eb);box-shadow:0 0 0 2px rgba(37,99,235,.25);z-index:5}
.ldz-el.hid{opacity:.4;border-style:dashed}
.ldz-el small{display:block;font-size:8px;text-align:center;color:#333}
.ldz-bars{display:block;height:100%;min-height:8px;background:repeating-linear-gradient(90deg,#111 0 2px,#fff 2px 4px)}
.ldz-qr{display:block;width:100%;height:100%;min-height:10px;
  background:conic-gradient(#111 90deg,#fff 0 180deg,#111 0 270deg,#fff 0);background-size:6px 6px}
.ldz-img{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  border:1px dashed #9aa4b2;color:#6b7280;font-size:9px;background:#f7f8fa}
.ldz-rule{background:#111}
.ldz-side{flex:0 0 320px;max-width:100%}
.ldz-add{margin-bottom:12px}
.ldz-props{border:1px solid var(--line);border-radius:8px;padding:12px;background:var(--card,#fff)}
.ldz-props .f{margin-bottom:8px}
.ldz-props .row{display:flex}
.ldz-checks{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:8px}
.ldz-chk{display:inline-flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;height:auto}
.ldz-chk input{position:static;opacity:1;width:auto;height:auto;margin:0}
@media (max-width:720px){.ldz-side{flex:1 1 100%}}
/* A25 §4 — print-safe-area handling: highlight, live dims, one-click fixes */
.ldz-el.ldz-over{border-color:var(--r,#dc2626)!important;box-shadow:0 0 0 2px rgba(220,38,38,.35);background:rgba(220,38,38,.06)}
.ldz-resize{position:absolute;right:-4px;bottom:-4px;width:11px;height:11px;background:var(--pri,#2563eb);
  border:1px solid #fff;border-radius:2px;cursor:nwse-resize;touch-action:none;z-index:6}
.ldz-live{margin-top:6px;font-size:12px;color:var(--mut,#6b7280)}
.ldz-live b{color:#111}
.ldz-safe{margin-top:10px;border:1px solid var(--r,#dc2626);border-radius:8px;padding:10px;background:rgba(220,38,38,.05)}
.ldz-safe-h{font-weight:700;color:var(--r,#b91c1c);margin-bottom:6px;font-size:13px}
.ldz-safe-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:4px 0;font-size:12px}
.ldz-safe-row .btn2{padding:2px 8px;font-size:12px}
.skuphoto-missing{background:#f7f8fa}

/* =======================================================================
   A21 A2A — GLOBAL MANUAL RAKHI / SKU ID IMAGE PREVIEW.

   The 3in x 3in preview shown when a Rakhi/Design or SKU id is typed or picked.
   --idprev: 288px is 3in at the 96 CSS px/in reference the requirement names.
   The IMAGE area (.idprev-in) is a square driven by the box width, with
   object-fit:contain so a picture is never stretched, cropped through critical
   detail or upscaled misleadingly. The floating variant is position:fixed so it
   never pushes a field down, changes the line-grid height or introduces page
   scrolling; the panel variant drops into an explicit reserved container. On a
   narrow screen the width falls back to the largest non-overlapping square (JS
   caps it at min(288, 90vmin)) and click/tap opens the full-size zoom.
   ======================================================================= */
:root{ --idprev:288px }                       /* 3in @ 96 CSS px/in */
.idprev{ width:var(--idprev); max-width:min(var(--idprev),90vw);
  background:var(--panel); border:1px solid var(--line); border-radius:var(--rad2);
  box-shadow:var(--sh2); overflow:hidden }
.idprev-float{ position:fixed; z-index:70; }   /* fixed: no reflow, no page scroll, never covers the next field */
.idprev-panel{ width:100%; max-width:var(--idprev); }
.idprev-in{ position:relative; width:100%; aspect-ratio:1/1; display:grid; place-items:center;
  background:repeating-conic-gradient(var(--sb) 0 25%, color-mix(in srgb,var(--sb) 60%,var(--panel)) 0 50%) 0 0/18px 18px;
  cursor:zoom-in }
.idprev-in img{ width:100%; height:100%; object-fit:contain; display:block; background:var(--panel) }
.idprev-cap{ font-size:11.5px; font-weight:600; color:var(--ink3); padding:5px 8px;
  border-top:1px solid var(--line2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-family:inherit;font-variant-numeric:tabular-nums }
.idprev-cap:empty{ display:none }
/* subtle loading skeleton, no modal interruption */
.idprev-skel{ width:100%; height:100%;
  background:linear-gradient(100deg,var(--sb) 30%,color-mix(in srgb,var(--mod) 12%,var(--sb)) 50%,var(--sb) 70%);
  background-size:200% 100%; animation:idprevshimmer 1.15s ease-in-out infinite }
@keyframes idprevshimmer{ from{background-position:200% 0} to{background-position:-200% 0} }
/* role-correct "photo required" / not-found placeholder — never a wrong image */
.idprev-ph{ width:100%; height:100%; display:grid; place-items:center; text-align:center; padding:10px;
  color:var(--ink3); font-size:12.5px; font-weight:650; line-height:1.3;
  border:1px dashed var(--line); border-radius:inherit }
.idprev-ph.idprev-err{ color:var(--a) }
/* user-initiated zoom to the full picture */
.idprev-zoom{ position:fixed; inset:0; z-index:95; display:none; align-items:center; justify-content:center;
  padding:20px; background:rgba(8,12,24,.72); backdrop-filter:blur(4px); cursor:zoom-out }
.idprev-zoom img{ max-width:min(90vw,90vh); max-height:90vh; object-fit:contain;
  border-radius:12px; box-shadow:var(--sh2); background:var(--panel) }
@media (prefers-reduced-motion:reduce){ .idprev-skel{ animation:none } }
/* the hover box never sits under the cursor: it is a picture, not a control */
.idprev.idhover{ pointer-events:none; z-index:80 }
.idprev.idhover .idprev-in{ cursor:default }
@media print{ .idprev,.idprev-zoom{ display:none!important } }

/* =======================================================================
   A27 — keyboard shortcut UI: the Ctrl+K palette, the Ctrl+/ help overlay,
   the two-key sequence hint and the Settings table. The overlays reuse the
   existing .modal / .mbox chrome, so only the specifics are declared here.
   ======================================================================= */
kbd{display:inline-block;min-width:16px;padding:1.5px 6px;border-radius:6px;font:600 11.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--sb,#eef1f5);border:1px solid var(--line,#dfe3e8);border-bottom-width:2px;color:var(--ink2,#374151);white-space:nowrap}

.scpalbox{width:min(560px,100%);padding:14px}
#scpalin{width:100%;margin-bottom:8px}
.scpallist{max-height:52vh;overflow:auto;display:flex;flex-direction:column;gap:2px}
.scpalitem{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;
  padding:9px 12px;border-radius:10px;border:0;background:none;color:var(--ink);font:inherit;cursor:pointer}
.scpalitem:hover,.scpalitem.sel{background:color-mix(in srgb,var(--mod,#6366f1) 13%,transparent);color:var(--mod,#6366f1)}
.scpallist .none{padding:10px 12px;color:var(--ink3)}

.schelpbox{width:min(560px,100%);padding:18px}
.schelpgrp{margin:10px 0}
.schelpgrp h4{margin:0 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3)}
.schelprow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 2px;border-bottom:1px solid var(--line)}
.schelprow span{color:var(--ink2)}

.scseqhint{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:120;
  padding:8px 16px;border-radius:999px;background:var(--ink,#111827);color:#fff;font:600 13px/1 ui-monospace,monospace;
  box-shadow:0 6px 24px rgba(8,12,24,.3)}

.sctable{width:100%;font-size:13px}
.sctable kbd{font-size:11px}
.sctable td{vertical-align:top}
.sctable tr.scwarn{background:color-mix(in srgb,#f59e0b 9%,transparent)}
.scrow-form{display:inline-flex;gap:4px;align-items:center;flex-wrap:wrap;margin:0 0 4px}
.scrow-form .scen{display:inline-flex;align-items:center;gap:3px;font-size:12px;color:var(--ink2)}

/* 12-TASK Task 12 — Settings hierarchy: the selected SECTION is inverse
   (module colour background, white text); the selected SUB-TAB is a
   high-contrast ink pill. Two different treatments, so "which section am I in"
   and "which screen is open" are answered at a glance, not by a tint. */
.ctabs.settingsgroups .ct{border-radius:10px;padding:7px 14px;border-left-width:1px}
.ctabs.settingsgroups .ct.on{background:var(--mod);border-color:var(--mod);box-shadow:0 6px 16px -8px var(--mod)}
.ctabs.settingsgroups .ct.on b,.ctabs.settingsgroups .ct.on em{color:#fff}
.ctabs.settingsgroups .ct.on b::before{content:"▸ "}
.ctabs.settingstabs{gap:4px;padding:6px 8px;border-radius:12px;background:color-mix(in srgb,var(--mod) 7%,var(--panel));border:1px dashed color-mix(in srgb,var(--mod) 35%,transparent)}
.ctabs.settingstabs .ct{border-radius:999px;border-left-width:1px;background:transparent;border-color:transparent}
.ctabs.settingstabs .ct:hover{background:var(--panel);border-color:var(--line)}
.ctabs.settingstabs .ct.on{background:var(--ink);border-color:var(--ink);box-shadow:0 2px 8px -3px var(--ink)}
.ctabs.settingstabs .ct.on b{color:var(--panel);font-weight:800}
.ctabs.settingstabs .ct.on::after{content:"";position:absolute;left:50%;bottom:-6px;width:8px;height:8px;background:var(--ink);transform:translateX(-50%) rotate(45deg)}
.ctabs.mstgroups .ct.on{background:#b45309;border-color:#b45309}
.crumbs a{color:var(--mod);text-decoration:none}

/* 12-TASK Task 5 — All Modules lives in the left lead cluster, beside Language */
.navlead .nl-launch{color:var(--mod);border-color:color-mix(in srgb,var(--mod) 45%,var(--line));font-weight:700}
.navlead .nl-launch:hover{background:var(--mod);color:#fff;border-color:var(--mod)}
@media (max-width:600px){.top .navlead .nl-launch{display:inline-flex}}

/* 12-TASK Task 8 — SYSTEM-SUGGESTED VALUES. One reusable class for every value
   the system suggested, defaulted or calculated: italic, slightly muted, with a
   dotted underline. A value the operator entered or confirmed is normal text.
   Applies to text, to inputs still holding the suggestion, and to the formula
   calculator's derived boxes at every level. */
.system-suggested-value,
input.system-suggested-value,
select.system-suggested-value,
.calcbox.derived .cbout,
.calcbox .cbout,
#finalcost,
#sugout,
[data-sug],
.sug-val{font-style:italic;font-weight:400;color:color-mix(in srgb,var(--ink3) 82%,var(--mod));text-decoration:underline dotted color-mix(in srgb,var(--mod) 40%,transparent);text-underline-offset:3px}
/* A suggested value is never bold, even when the markup wraps it in <b>: the
   whole point is that it reads as lighter than a value a person entered. */
b.system-suggested-value,b[data-sug],#finalcost.system-suggested-value,#finalcost{font-weight:400}
input.system-suggested-value{background:color-mix(in srgb,var(--mod) 6%,var(--panel))}
.calcbox.final .cbout{font-style:italic;font-weight:400}
.system-suggested-value::after{content:""}

/* SETTINGS RESTRUCTURE — three levels: group (inverse block) › section (ink pill,
   dashed tray) › screen (light tray, smaller pills). Same source, same order on
   every device; on a phone Level 2 becomes a dropdown so the tray never becomes a wall. */
.ctabs.lvl1{margin-bottom:8px}
.ctabs.lvl2{margin-bottom:6px}
.ctabs.lvl3{background:color-mix(in srgb,var(--mod) 3%,var(--panel));border-style:solid;border-color:var(--line);gap:3px;padding:5px 7px}
.ctabs.lvl3 .ct{padding:3px 9px}
.ctabs.lvl3 .ct b{font-size:calc(var(--fs) - 2.5px)}
.ctabs.lvl3 .ct.on{background:var(--mod);border-color:var(--mod);box-shadow:none}
.ctabs.lvl3 .ct.on::after{background:var(--mod)}
.lvl2sel{display:none;width:100%;margin:0 0 8px;font-weight:700}
@media (max-width:640px){.ctabs.lvl2{display:none}.lvl2sel{display:block}}
.crumbs{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;margin:0 0 8px;font-size:calc(var(--fs) - 1px)}
.crumbs .sep{color:var(--muted)}
.cfgidx td.mono{font-family:inherit;font-variant-numeric:tabular-nums;font-size:calc(var(--fs) - 2px)}
.lvl2sel{padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font-size:var(--fs)}

/* MASTER BOX UNIT — every quantity and rate carries the unit its barcode is on.
   The unit is a label, not the news. Coloured pills made MB read louder than
   the number beside it, so the eye landed on "MB" and had to walk back to find
   the 12. A unit now sets exactly like the value it follows — same font, same
   size, same weight, no box, no colour — and carries only its tooltip. */
.ubadge,.ub-mb,.ub-ip,.ub-pk,.ub-pc{font:inherit;font-size:inherit;font-weight:inherit;
  letter-spacing:inherit;background:none;border:0;padding:0;color:inherit;
  vertical-align:baseline;line-height:inherit;border-radius:0}

/* =======================================================================
   CONFIGURE — the top-centre button and the per-screen drawer
   ======================================================================= */
.cfgbtn{ display:inline-flex; align-items:center; gap:7px; margin:0 auto; border:2px solid var(--mod,#2563eb); color:var(--mod,#2563eb);
  background:var(--panel); border-radius:12px; padding:6px 14px; font:800 14px/1 inherit; cursor:pointer; position:relative; white-space:nowrap }
.cfgbtn:hover,.cfgbtn:focus-visible{ background:color-mix(in srgb, var(--mod,#2563eb) 12%, var(--panel)); outline:none }
.cfgbtn .cfgbadge{ background:#d97706; color:#fff; border-radius:999px; font-size:11px; padding:1px 7px; font-weight:800 }
@media (max-width:720px){ .cfgbtn span{ display:none } .cfgbtn{ padding:6px 9px } }
.cfgdrawer{ position:fixed; top:0; right:0; bottom:0; width:min(440px,100%); background:var(--panel); border-left:1px solid var(--line);
  box-shadow:0 10px 30px rgba(0,0,0,.18); transform:translateX(102%); transition:transform .22s ease; display:flex; flex-direction:column; z-index:120;
  padding-top:env(safe-area-inset-top,0px) }
.cfgdrawer.open{ transform:none }
.cfgscrim{ position:fixed; inset:0; background:rgba(15,23,42,.25); z-index:119; display:none }
.cfgscrim.open{ display:block }
@media (prefers-reduced-motion:reduce){ .cfgdrawer{ transition:none } }
.cfghead{ display:flex; align-items:flex-start; gap:8px; padding:12px 14px; border-bottom:1px solid var(--line) }
.cfghead b{ font-size:15px } .cfghead small{ display:block; color:var(--ink3); font-size:11.5px; margin-top:2px }
.cfgx{ margin-left:auto; border:0; background:transparent; font-size:22px; line-height:1; cursor:pointer; color:var(--ink2) }
.cfgbody{ overflow:auto; padding:8px 14px 24px; flex:1 }
.cfgsec{ margin:10px 0 16px }
.cfgsec h4{ margin:0 0 4px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); display:flex; align-items:center; gap:6px }
.cfgsec h4 a{ margin-left:auto; font-size:11px; letter-spacing:0; text-transform:none; color:var(--mod,#2563eb); text-decoration:none }
.cfgrow{ display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px dashed var(--line); font-size:13px }
.cfgrow:last-child{ border-bottom:0 }
.cfgrow.locked{ opacity:.6 }
.cfgrow.flash{ animation:cfgflash 1.2s ease }
@keyframes cfgflash{ from{ background:rgba(22,163,74,.18) } to{ background:transparent } }
.cfglbl{ flex:1; min-width:0 } .cfglbl small{ display:block; color:var(--ink3); font-size:11px } .cfglbl small a{ color:var(--mod,#2563eb); text-decoration:none }
.cfggo{ color:var(--mod,#2563eb); text-decoration:none; font-size:12px; white-space:nowrap }
.cfgval{ color:var(--ink2); font-family:ui-monospace,monospace; font-size:11px }
.cfgsw{ width:38px; height:22px; border-radius:999px; background:var(--line); position:relative; border:0; cursor:pointer; flex:none; padding:0 }
.cfgsw::after{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left .15s; box-shadow:0 1px 2px rgba(0,0,0,.3) }
.cfgsw.on{ background:#16a34a } .cfgsw.on::after{ left:19px }
.cfgnum{ width:84px; border:1px solid var(--line); border-radius:7px; padding:4px 6px; font:inherit; background:var(--panel); color:var(--ink) }
.cfgsel{ max-width:160px; border:1px solid var(--line); border-radius:7px; padding:4px 6px; font:inherit; background:var(--panel); color:var(--ink) }
.cfgstat{ font-size:10.5px; border-radius:6px; padding:1px 6px; font-weight:800 }
.cfgstat.ok{ background:rgba(22,163,74,.14); color:#15803d } .cfgstat.warn{ background:rgba(217,119,6,.16); color:#b45309 }
.cfggrp{ border:1px solid var(--line); border-radius:10px; padding:8px 10px; margin:6px 0; display:flex; flex-direction:column; gap:4px; font-size:13px }
.cfgchips{ display:flex; flex-wrap:wrap; gap:5px } .cfgchips .chip{ text-decoration:none; color:var(--ink) }
.cfgfoot{ margin-top:14px }
.mini.solid{ background:var(--mod,#2563eb); color:#fff; border-color:var(--mod,#2563eb) }
.cfgused{ display:block; margin-top:4px; font-size:11px; color:var(--ink3) }
.cfgused a{ color:var(--mod,#2563eb); text-decoration:none; border:1px solid var(--line); border-radius:999px; padding:0 7px; margin-right:3px }
@media print{ .cfgbtn,.cfgdrawer,.cfgscrim{ display:none !important } }

/* =======================================================================
   GUIDED BUILDERS — picker · formula · condition · result (lib/guided.php)
   ======================================================================= */
.gb{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.f .gb{ width:100% }
.gbchips{ display:flex; flex-wrap:wrap; gap:6px; min-height:34px; border:1px solid var(--line); border-radius:10px; padding:5px 6px; background:var(--panel) }
.gbtag{ display:inline-flex; align-items:center; gap:2px; background:color-mix(in srgb, var(--mod,#2563eb) 14%, var(--panel)); color:var(--ink); border-radius:999px; padding:2px 4px 2px 10px; font-size:12.5px; font-weight:600 }
.gbtag.unknown{ background:rgba(217,119,6,.16) }
.gbtag button,.gbx{ border:0; background:transparent; cursor:pointer; color:var(--ink2); font-size:14px; line-height:1; padding:0 4px }
.gbempty{ color:var(--ink3); font-size:12px; padding:4px 2px }
.gbopts{ display:flex; flex-wrap:wrap; gap:5px; align-items:center }
.gbopt{ border:1px solid var(--line); border-radius:999px; padding:3px 10px; font-size:12.5px; background:var(--panel); cursor:pointer; color:var(--ink); font-family:inherit }
.gbopt.on{ background:var(--ink); color:var(--panel); border-color:var(--ink) }
.gbfree{ display:inline-flex; gap:4px; align-items:center } .gbfree input{ width:150px; padding:4px 8px; border:1px dashed var(--line); border-radius:999px; font:inherit; background:var(--panel); color:var(--ink) }
.gbcode{ font-size:11.5px; color:var(--ink3); display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.gbcode a{ color:var(--mod,#2563eb); text-decoration:none }
.gbraw{ flex:1; min-width:180px; font:12px/1.4 ui-monospace,Consolas,monospace; padding:4px 8px; border:1px solid var(--line); border-radius:7px; background:var(--bg); color:var(--ink) }
.gbmaptbl{ width:100%; border-collapse:collapse; font-size:13px } .gbmaptbl th{ text-align:left; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); padding:4px 6px }
.gbmaptbl td{ padding:4px 6px; border-top:1px solid var(--line2) } .gbmaptbl select{ font:inherit; padding:3px 6px; border-radius:7px; border:1px solid var(--line); background:var(--panel); color:var(--ink) }
.gbchk{ display:inline-flex; align-items:center; gap:3px; margin-right:8px; font-size:12.5px; white-space:nowrap }
.gbaddrow select{ font:inherit; padding:4px 8px; border-radius:999px; border:1px dashed var(--line); background:var(--panel); color:var(--mod,#2563eb) }
.gbtok{ display:flex; flex-wrap:wrap; gap:4px; align-items:center; min-height:34px; border:1px solid var(--line); border-radius:10px; padding:5px 6px; background:var(--panel) }
.gblead{ font-weight:800; margin-right:4px }
.gbtk{ border:1px solid var(--line); border-radius:8px; padding:4px 9px; background:var(--panel); font:inherit; font-weight:600; color:var(--ink); cursor:pointer }
.gbtk.op{ background:var(--bg); min-width:34px; text-align:center } .gbtk.br{ color:var(--ink3); font-weight:800 } .gbtk.n{ font-family:ui-monospace,monospace }
.gbtk.del{ border-color:var(--r); color:var(--r) }
.gbpal{ display:flex; flex-wrap:wrap; gap:5px }
.gbpal button{ border:1px solid var(--line); border-radius:8px; padding:3px 9px; background:var(--panel); font:inherit; font-size:12.5px; cursor:pointer; color:var(--ink) }
.gbpal button.op{ background:var(--bg); font-weight:800 } .gbpal button.fn{ font-style:italic } .gbpal button.n{ color:var(--ink2) }
.gbtry{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:12.5px; color:var(--ink2) }
.gbtry input{ width:76px; border:1px solid var(--line); border-radius:8px; padding:4px 8px; font:inherit; background:var(--panel); color:var(--ink) }
.gbsay{ padding:7px 11px; border-radius:9px; background:rgba(22,163,74,.12); color:var(--ink); font-size:13px }
.gbsay:empty{ display:none } .gbsay.bad{ background:rgba(220,38,38,.12) }
.gbbad{ color:var(--r); font-size:12.5px }
.gbrows{ display:flex; flex-direction:column; gap:5px }
.gbcrow{ display:grid; grid-template-columns:auto minmax(120px,1.2fr) minmax(90px,.8fr) minmax(110px,1fr) auto; gap:5px; align-items:center }
.gbcrow select,.gbcrow input{ min-width:0; border:1px solid var(--line); border-radius:8px; padding:5px 7px; font:inherit; background:var(--panel); color:var(--ink) }
.gbjoin{ font-size:11px; font-weight:800; color:var(--ink3); width:40px; text-align:right }
.gbadd{ display:flex; gap:6px }
.gbgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:6px }
.gbres1{ display:grid; gap:2px; font-size:11.5px; color:var(--ink2) }
.gbres1 input,.gbres1 select{ border:1px solid var(--line); border-radius:8px; padding:5px 8px; font:inherit; background:var(--panel); color:var(--ink); min-width:0 }
td .gb{ min-width:240px } td .gbcond{ min-width:360px } td .gbres{ min-width:420px }
.gbres1.wide{ grid-column:1/-1 } .gbsub{ border:1px dashed var(--line); border-radius:8px; padding:6px }
@media (max-width:640px){ .gbcrow{ grid-template-columns:1fr 1fr } .gbjoin{ grid-column:1/-1; text-align:left } td .gb,td .gbcond,td .gbres{ min-width:0 } }

/* WEIGHTAGE PLANNING — the parameters screen */
.pwgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:10px }
.pwattr{ border:1px solid var(--line); border-radius:10px; padding:10px 12px }
.pwattr h4{ margin:0 0 6px; font-size:13px; display:flex; align-items:center; gap:8px; flex-wrap:wrap } .pwattr h4 .chk,.pwattr h4 .chip{ margin-left:auto; font-weight:500 }
.pwopt{ display:grid; grid-template-columns:1fr 72px; gap:6px; align-items:center; font-size:12.5px; padding:2px 0 }
.pwopt input{ border:1px solid var(--line); border-radius:7px; padding:3px 6px; font:inherit; background:var(--panel); color:var(--ink); text-align:right }

/* ===== PAIRS ===== */
.idph .ph .phpair{display:flex;width:100%;height:100%;gap:1px;background:var(--line)}
.idph .ph .phpair img{width:50%;height:100%;object-fit:cover;flex:1 1 0}
.idph .ph .phpair .nophoto{flex:1 1 0;display:grid;place-items:center;background:var(--panel)}
.pairsides{display:flex;flex-wrap:wrap;gap:10px}
.pairside{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);min-width:0}
.pairside.me{border-color:var(--mod,#db2777);box-shadow:inset 0 0 0 1px var(--mod,#db2777)}
.pairalert{border:1px solid #f59e0b;background:#fffbeb;border-radius:12px;padding:10px 12px;margin:8px 0}
.pairalert.eats{border-color:#dc2626;background:#fef2f2}
.pairalert-h{font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pairfam{margin-top:6px}
.pairpreview{margin:6px 0 10px;display:flex;gap:6px;flex-wrap:wrap}
@media (prefers-color-scheme: dark){.pairalert{background:#3b2f10}.pairalert.eats{background:#3f1d1d}}
.pkpair td{background:rgba(219,39,119,.05)}
.pairret{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:8px}
.pairret .f{margin:0}

/* =====================================================================
   RIBBON MENU + CALM LOOK
   Two-row menu like Word (sections on top, that section's screens below,
   always visible) replaces the sidebar, and the decorative effects that
   made the screens look busy are switched off. Everything here is scoped
   to html.rib, so cfg ui.menu_style = sidebar restores the old look.
   ===================================================================== */
html.rib{--hdr:52px;--rib:81px;--top:133px;--side:0px}
html.rib .top{height:var(--hdr);background:var(--panel);backdrop-filter:none;animation:none}
html.rib .side,html.rib .navbtn,html.rib .scrim{display:none!important}
html.rib .main{margin-left:0}

.ribbon{position:fixed;left:0;right:0;top:var(--hdr);height:var(--rib);z-index:39;
  background:var(--panel);border-bottom:1px solid var(--line)}
.rtabs{display:flex;align-items:stretch;gap:2px;height:38px;padding:0 12px;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;border-bottom:1px solid var(--line)}
.rtabs::-webkit-scrollbar,.rpanel::-webkit-scrollbar{display:none}
.rtab{display:inline-flex;align-items:center;gap:7px;padding:0 14px;white-space:nowrap;flex:none;
  font-size:13.5px;font-weight:600;color:var(--ink2);border-bottom:3px solid transparent;margin-bottom:-1px;
  border-radius:8px 8px 0 0;transition:background .15s,color .15s}
.rtab .ic{color:var(--c)}
.rtab:hover{background:color-mix(in srgb,var(--c) 8%,transparent);color:var(--ink)}
.rtab.on{color:var(--c);border-bottom-color:var(--c);background:color-mix(in srgb,var(--c) 10%,var(--panel))}
.rpanel{display:none;align-items:center;gap:4px;height:42px;padding:0 12px;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;background:color-mix(in srgb,var(--c) 10%,var(--panel))}
.rpanel.on{display:flex}
.ritem{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;flex:none;white-space:nowrap;
  border-radius:8px;border:1px solid transparent;font-size:13px;font-weight:550;
  color:color-mix(in srgb,var(--c) 70%,var(--ink));transition:background .15s,border-color .15s}
.ritem .ic{color:var(--c)}
.ritem:hover{background:color-mix(in srgb,var(--panel) 75%,transparent);border-color:color-mix(in srgb,var(--c) 25%,transparent)}
.ritem.on{background:var(--panel);border-color:color-mix(in srgb,var(--c) 55%,transparent);color:var(--c);font-weight:650}
.ritem .nbadge{--c:var(--r);animation:none;margin-left:2px}
@media (max-width:760px){
  html.rib{--hdr:52px;--rib:77px;--top:129px}
  .rtabs{height:36px;padding:0 6px}.rtab{padding:0 11px;font-size:13px}
  .rpanel{height:40px;padding:0 6px}.ritem{padding:0 10px;font-size:12.5px}
}
@media print{.ribbon{display:none!important}html.rib .main{margin:0}}

/* ---- calm look: flat, one colour per section, no glow or motion ---- */
html.rib .bgfx{display:none}
html.rib .brand b{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--ink)}
html.rib .knot{background:var(--mod);box-shadow:none;animation:none;width:28px;height:28px;border-radius:8px}
html.rib .av{background:var(--mod);box-shadow:none}
html.rib a:hover>.ic,html.rib button:hover>.ic{animation:none}
html.rib .nbadge,html.rib .tile .tb,html.rib .mdot,html.rib .connchip[data-state=device] svg{animation:none}
html.rib .mdot{box-shadow:none}
html.rib .scanbtn::after{display:none}
html.rib .card,html.rib .kpi,html.rib .tile,html.rib .modgroup,html.rib .ngroup{animation:none}
html.rib .tbtn:hover,html.rib .btn2:hover,html.rib .ct:hover,html.rib a.cbox:hover{transform:none;box-shadow:none}
html.rib .tbtn{border-radius:8px}

/* buttons: the main action is solid in the section colour, everything else is plain */
html.rib .btn,html.rib .btn2,html.rib .ghost,html.rib .danger-btn{border-radius:8px;padding:7px 14px;font-size:13.5px;font-weight:600}
html.rib .btn{box-shadow:none}
html.rib .btn:hover{transform:none;box-shadow:none;filter:brightness(.92)}
html.rib .btn:active{transform:none}
html.rib .btn::after{display:none}
html.rib .btn2{border-color:color-mix(in srgb,var(--ink) 18%,transparent)}
html.rib .btn2:hover{border-color:var(--mod);color:var(--mod)}
html.rib .mini{border-radius:7px;background:transparent;border:1px solid var(--line)}
html.rib .mini:hover{background:color-mix(in srgb,var(--mod) 10%,transparent);color:var(--ink);border-color:color-mix(in srgb,var(--mod) 40%,transparent)}
html.rib .danger-btn:hover{transform:none}

/* text tabs and figure boxes: neutral by default, the colour only marks the chosen one */
html.rib .ct{border-left:1px solid var(--line)}
html.rib .ct:hover{border-color:color-mix(in srgb,var(--mod) 45%,transparent)}
html.rib .ct.on{--c:var(--mod);background:color-mix(in srgb,var(--mod) 10%,var(--panel));border-color:var(--mod);box-shadow:none}
html.rib .ct.on b{color:var(--mod)}
html.rib .ct i{background:var(--ink2)}
html.rib .ctabs.settingsgroups .ct.on{background:var(--mod);border-color:var(--mod);box-shadow:none}
html.rib .ctabs.settingstabs .ct.on{box-shadow:none}
html.rib .ctabs.mstgroups .ct.on{background:var(--mod);border-color:var(--mod)}
html.rib .ctabs.lvl3 .ct.on{background:var(--mod);border-color:var(--mod)}
html.rib .cbox{border-left:3px solid color-mix(in srgb,var(--mod) 55%,var(--line))}
html.rib .cbox b{color:var(--ink)}
html.rib .tab.on,html.rib .lseg.on{box-shadow:none}

/* dashboard figures and launcher tiles: quiet cards, colour as a small accent */
html.rib .kpi{box-shadow:none}
html.rib a.kpi:hover{transform:none;box-shadow:none;border-color:var(--mod)}
html.rib .ki{--c:var(--mod)}
html.rib a.kpi:hover .ki{transform:none}
html.rib .tile{box-shadow:none}
html.rib .tile::before{display:none}
html.rib .tile:hover{transform:none;box-shadow:none}
html.rib .tile .ti{background:var(--c);box-shadow:none}
html.rib .tile:hover .ti{transform:none}
html.rib .card{box-shadow:0 1px 2px rgba(16,24,40,.05)}
html.rib .card:hover{box-shadow:0 1px 2px rgba(16,24,40,.05)}
html.rib .bar i{background:var(--mod)}

/* ---- RIBBON MENU: compact header in the same style, everything within one
   comfortable width so the eye does not travel edge to edge ---- */
html.rib{--hdr:44px;--rib:73px;--top:117px;--maxw:1360px;
  --gut:max(12px,calc((100vw - var(--maxw)) / 2))}
html.rib .top{gap:8px;padding:0 var(--gut);border-bottom:1px solid var(--line)}
html.rib .rtabs{height:34px;padding:0 var(--gut)}
html.rib .rpanel{height:38px;padding:0 var(--gut)}
html.rib .rtab{padding:0 12px;font-size:13px;gap:6px}
html.rib .ritem{height:28px;padding:0 10px;font-size:12.5px;gap:5px}
html.rib .main{padding:12px var(--gut) 60px}
html.rib .crumb{margin-bottom:10px;gap:8px}
html.rib .crumb h1{font-size:18px}
/* header controls: one height, one radius, plain outline like the ribbon */
html.rib .nlbtn,html.rib .tbtn,html.rib .lang,html.rib .navlead .nl-lang{height:30px;border-radius:7px}
html.rib .tbtn{width:30px}
html.rib .connchip{width:auto}
html.rib .nlbtn{padding:0 9px;font-size:12.5px}
html.rib .lseg{height:24px;min-width:30px;border-radius:5px;font-size:12px}
html.rib .brand{font-size:14.5px;gap:7px}
html.rib .knot{width:24px;height:24px;border-radius:6px}
html.rib .cfgbtn{border-width:1px;padding:3px 10px;font-size:12.5px;border-radius:7px}
html.rib .av{width:28px;height:28px;font-size:13px}
html.rib .who{gap:6px}
html.rib .whoinfo b{font-size:12.5px}
html.rib .topright{gap:6px}
@media (max-width:760px){
  html.rib{--hdr:44px;--rib:71px;--top:115px}
  html.rib .rtabs{height:33px}html.rib .rpanel{height:37px}
}

/* ---- RIBBON MENU: Configure at the right end of the screens row ---- */
.ribbon{--cfgw:0px}
.ribbon:has(.rcfg){--cfgw:120px}
.rcfg{position:absolute;right:var(--gut,12px);top:34px;height:38px;display:flex;align-items:center;z-index:2}
html.rib .rpanel{padding-right:calc(var(--gut) + var(--cfgw))}
html.rib .rcfg .cfgbtn{margin:0;height:28px;background:var(--panel)}
@media (max-width:760px){.ribbon:has(.rcfg){--cfgw:48px}.rcfg{top:33px;height:37px}}

/* ---- DASHBOARD: work as a readable to-do list ---- */
.r-dashboard .dsum{margin:-4px 0 12px;font-size:15px;color:var(--ink2)}
.dsec{margin:0 0 18px}
.dsec>h3{display:flex;align-items:center;gap:7px;margin:0 0 7px;font-size:13px;font-weight:650;color:var(--ink2);letter-spacing:.01em}
.dsec.crit>h3{color:var(--r)}
.dsec.fire>h3{color:var(--a)}
/* WHAT JUST FIRED — the fan-out from a punched-in order or sale. Reads as a
   list of sentences, not a table: severity, what happened, and two buttons. */
.firelist{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.firerow{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-top:1px solid var(--line2)}
.firerow:first-child{border-top:0}
.firetxt{flex:1;min-width:0}
.firego{display:flex;gap:6px;flex-shrink:0;align-items:center}
@media(max-width:640px){
  .firerow{flex-wrap:wrap}
  .firetxt{flex:1 1 100%;order:2}
  .firego{flex:1 1 100%;order:3;justify-content:flex-end}
}
.dlist{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.drow{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--line2);color:var(--ink);min-height:52px}
.drow:first-child{border-top:0}
.drow:hover{background:color-mix(in srgb,var(--mod) 6%,var(--panel))}
.drow .dn{flex:none;min-width:48px;padding:3px 8px;border-radius:7px;text-align:center;font-size:17px;font-weight:700;
  font-variant-numeric:tabular-nums;background:color-mix(in srgb,var(--mod) 12%,var(--panel));color:var(--mod)}
.drow .dic{flex:none;color:var(--ink3);display:grid}
.drow .dl{flex:1;min-width:0;font-size:16.5px;font-weight:550;line-height:1.3}
.drow .dgo{flex:none;padding:6px 16px;font-size:13.5px;pointer-events:none}
.dlist.crit{border-color:color-mix(in srgb,var(--r) 35%,var(--line))}
.dlist.crit .drow{background:color-mix(in srgb,var(--r) 6%,var(--panel))}
.dlist.crit .dn{background:var(--r);color:#fff}
.dlist.crit .dl{color:color-mix(in srgb,var(--r) 80%,var(--ink))}
.dlist.due .dn{background:color-mix(in srgb,var(--a) 18%,var(--panel));color:color-mix(in srgb,var(--a) 70%,var(--ink))}
.dlist.watch .drow{min-height:44px;padding:7px 14px}
.dlist.watch .dl{font-size:15px;font-weight:500}
.dlist.watch .dn{font-size:15px;background:var(--sb);color:var(--ink2)}
.dmore{margin-top:7px}
.dfig{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.dfi{display:flex;align-items:baseline;gap:8px;padding:8px 12px;border-radius:8px;background:var(--sb);color:var(--ink2);font-size:13.5px}
.dfi span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dfi b{color:var(--ink);font-size:15px;font-variant-numeric:tabular-nums}
.dfi em{font-style:normal;font-size:12px;color:var(--ink3)}
.dfi.band-crit b{color:var(--r)}.dfi.band-warn b{color:color-mix(in srgb,var(--a) 70%,var(--ink))}
@media (max-width:600px){
  .drow{gap:9px;padding:9px 11px}.drow .dic{display:none}
  .drow .dl{font-size:15.5px}.drow .dn{min-width:42px;font-size:16px}
  .drow .dgo{padding:5px 11px}
}

/* ---- RIBBON: global Search settings + Configure at the right end ---- */
.ribbon:has(.rsearch){--cfgw:330px}
.rcfg{gap:6px}
.rsearch{display:flex;align-items:center;gap:6px;height:28px;padding:0 9px;border-radius:7px;
  border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);background:var(--panel);color:var(--ink3);width:190px}
.rsearch input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:12.5px;color:var(--ink)}
.rsearch:focus-within{border-color:var(--mod);color:var(--mod)}
@media (max-width:900px){.ribbon:has(.rsearch){--cfgw:190px}.rsearch{width:120px}}
@media (max-width:600px){.ribbon:has(.rsearch){--cfgw:92px}.rsearch{width:40px;padding:0 6px}.rsearch:focus-within{width:160px}}

/* ---- RIBBON: settings screens — two plain rows, no heading or path ---- */
html.rib body.r-settings .main>.crumb{display:none}
html.rib .ctabs.settingstabs.lvl2{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;
  padding:0;gap:2px;margin-bottom:8px}
html.rib .ctabs.settingstabs.lvl2 .ct{border:0;border-bottom:3px solid transparent;border-radius:0;background:none;padding:6px 12px;min-height:0}
html.rib .ctabs.settingstabs.lvl2 .ct b{font-size:13.5px;font-weight:600;color:var(--ink2)}
html.rib .ctabs.settingstabs.lvl2 .ct em{display:none}
html.rib .ctabs.settingstabs.lvl2 .ct:hover{background:var(--line2)}
html.rib .ctabs.settingstabs.lvl2 .ct.on{background:none;border-bottom-color:var(--mod)}
html.rib .ctabs.settingstabs.lvl2 .ct.on b{color:var(--mod)}
html.rib .ctabs.settingstabs.lvl2 .ct.on::after{display:none}
html.rib .ctabs.lvl3{background:none;border:0;padding:0;margin-bottom:12px;gap:4px}
html.rib .ctabs.lvl3 .ct{border-radius:999px;padding:3px 12px;border:1px solid var(--line);background:var(--panel)}
html.rib .ctabs.lvl3 .ct.on{background:var(--mod);border-color:var(--mod)}
html.rib .ctabs.lvl3 .ct.on b{color:#fff}
.gnote{margin:0 0 10px;font-size:12.5px;color:var(--ink3);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gnote b{color:var(--ink2)}

/* ---- RIBBON: Masters — one row of masters, then the list ---- */
html.rib body.r-masters .main>.crumb{display:none}
html.rib .ctabs.mstrow .ct{flex-direction:row;align-items:center;gap:7px;padding:5px 14px}
html.rib .ctabs.mstrow .ct b{font-size:13.5px;font-weight:600}
html.rib .ctabs.mstrow .ct em{font-size:11.5px;color:var(--ink3);background:var(--sb);border-radius:999px;padding:0 7px}
html.rib .ctabs.mstrow .ct.on em{background:rgba(255,255,255,.25);color:#fff}

/* ---- DIVISIONS: one division at a time, screens as grouped tick boxes ---- */
.divcard{padding:14px 16px}
.divhead{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;margin-bottom:12px}
.divhead label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--ink2);font-weight:600}
.divhead input:not([type=checkbox]),.divhead select{height:34px;padding:0 10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:14px;background:var(--panel);color:var(--ink);min-width:170px}
.divhead .divact{flex-direction:row;align-items:center;gap:6px;font-size:14px;height:34px}
.divpeople{margin-left:auto;font-size:13px;color:var(--ink3);align-self:center}
.divgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.divsec{border:1px solid var(--line);border-radius:10px;padding:8px 12px 10px;margin:0;background:var(--panel)}
.divsec legend{padding:0 6px;font-size:12.5px;font-weight:700;color:var(--ink2)}
.divsec legend span{display:inline-block;min-width:18px;padding:0 6px;border-radius:999px;background:var(--mod);color:#fff;font-size:11px;text-align:center;margin-left:4px}
.divmod{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:14px;color:var(--ink);cursor:pointer}
.divmod input{width:16px;height:16px;accent-color:var(--mod)}
.divmore{margin:12px 0 4px}
.divmore summary{cursor:pointer;font-size:13px;color:var(--ink2);font-weight:600;margin-bottom:8px}

/* =====================================================================
   COMPACT HEADER. The old top row is gone in the ribbon layout: the logo,
   Scan and the avatar menu sit in the ribbon's own tab row. Phones get an
   app layout — a slim bar with the open section, the screens row, and the
   person's sections along the bottom.
   ===================================================================== */
html.rib{--hdr:0px;--rib:73px;--top:73px}
html.rib .ribbon{top:0}
html.rib .ribbon .rpanel{padding-right:var(--gut)}
.rlogo{display:grid;place-items:center;flex:none;width:26px;height:26px;margin:auto 6px auto 0;border-radius:7px;
  background:var(--mod);color:#fff}
.rcur{display:none}
.rright{position:sticky;right:0;margin-left:auto;display:flex;align-items:center;gap:6px;flex:none;
  padding-left:10px;background:var(--panel)}
.rbtn{display:grid;place-items:center;width:30px;height:30px;border-radius:7px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink2);cursor:pointer}
.rbtn:hover{border-color:var(--mod);color:var(--mod)}
.umenu{position:relative}
.umenu>summary{list-style:none;cursor:pointer}
.umenu>summary::-webkit-details-marker{display:none}
.uav{position:relative;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--c,var(--mod));color:#fff;font-weight:700;font-size:13px}
.udot{position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border-radius:50%;background:var(--c,#16a34a);
  border:2px solid var(--panel);padding:0}
.udot .nbadge,.udot .connlabel{display:none!important}
.umpanel{position:fixed;top:40px;right:var(--gut,12px);z-index:60;width:250px;padding:6px;border-radius:10px;
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--sh2)}
.umhead{padding:8px 10px 10px;border-bottom:1px solid var(--line2);margin-bottom:4px;display:flex;flex-direction:column}
.umhead b{font-size:14px;color:var(--ink)}.umhead small{font-size:12px;color:var(--ink3)}
.umrow{display:flex;align-items:center;gap:8px;min-height:36px;padding:4px 10px;border-radius:7px;font-size:13.5px;color:var(--ink)}
a.umrow:hover{background:var(--line2)}
.umrow em{margin-left:auto;font-style:normal;font-size:12px;color:var(--ink3)}
.umrow select{flex:1;min-width:0;height:30px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--ink);font:inherit;font-size:13px}
.umlang{gap:4px}.umlang .ic{margin-right:4px}
.umlang .lseg{height:26px;min-width:34px;display:grid;place-items:center;border-radius:6px;font-size:12px;color:var(--ink2)}
.umlang .lseg.on{background:var(--mod);color:#fff}
.umdot{width:9px;height:9px;border-radius:50%;background:var(--c)}
.umenu .umpanel .rsearch{width:100%;height:34px;margin:2px 0}
.umrow .cfgbtn{margin:0;width:100%;justify-content:flex-start}
.umout{color:var(--r);border-top:1px solid var(--line2);margin-top:4px;border-radius:0 0 7px 7px}
html.rib .botnav,html.rib .rcfg{display:none!important}
.rbot,.rsheet{display:none}
@media (max-width:760px){
  html.rib{--rib:83px;--top:83px}
  html.rib .rtabs{height:44px;padding:0 8px;overflow:visible}
  html.rib .rtab{display:none}
  .rcur{display:block;flex:1;min-width:0;font-size:16px;font-weight:700;color:var(--ink);align-self:center;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.rib .rpanel{height:38px;padding:0 8px}
  html.rib .main{padding-bottom:84px}
  .rbtn{width:36px;height:36px}.uav{width:32px;height:32px}
  .umpanel{top:48px;right:8px;width:min(290px,calc(100vw - 16px))}
  .rbot{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:45;
    height:58px;background:var(--panel);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .rbot a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--ink3);position:relative}
  .rbot a b{font-size:11px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
  .rbot a .ic{color:inherit}
  .rbot a.on{color:var(--c,var(--mod))}
  .rbot a.on::before{content:"";position:absolute;top:0;left:25%;right:25%;height:3px;border-radius:0 0 3px 3px;background:var(--c,var(--mod))}
  body.rsheet-open .rsheet{display:flex;position:fixed;inset:0 0 58px 0;z-index:44;background:rgba(8,12,24,.35);align-items:flex-end}
  .rsheetin{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:12px;background:var(--panel);
    border-radius:14px 14px 0 0}
  .rsheetin a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 4px;border-radius:10px;
    background:color-mix(in srgb,var(--c) 8%,var(--panel));color:var(--ink);font-size:12.5px;text-align:center}
  .rsheetin a .ic{color:var(--c)}
  .offbanner{bottom:70px}
}
@media print{.rbot,.rsheet,.umenu,.rright{display:none!important}}
/* all sections fit on one line beside Scan and the avatar */
html.rib .rtab{padding:0 9px;gap:5px;font-size:13px}
@media (max-width:1350px){html.rib .rtab{padding:0 7px;font-size:12.5px}html.rib .rtab .ic{width:14px;height:14px}}
@media (max-width:1100px){html.rib .rtab .ic{display:none}}
@media (max-width:1100px){html.rib .rtab{padding:0 5px;font-size:12px}}
.umenu .umpanel .cfgbtn span{display:inline!important}
.umenu .umpanel .cfgbtn{padding:5px 10px}

/* ---- Settings → Users: preview this person's menu ---- */
.mprev{margin:16px 0 8px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.mprev>summary{cursor:pointer;font-weight:650;font-size:14px;display:flex;align-items:center;gap:6px}
.mprevgrid{display:grid;gap:6px 14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin-top:6px}
.mprevgrid>div{display:flex;flex-direction:column;gap:2px;padding:6px 0;border-top:1px solid var(--line2)}
.mprevgrid b{font-size:12.5px;color:var(--c,var(--ink2))}
.mprevgrid span{font-size:13.5px;color:var(--ink)}
.mprevwhy{margin-top:8px}.mprevwhy>summary{cursor:pointer;font-size:13px;color:var(--ink2)}

/* ---- SMART BUTTON: the logo opens the menu (replaces the avatar at the end) ---- */
.umenu.uleft{flex:none;margin:auto 6px auto 0}
.umenu.uleft>summary.rlogo{position:relative;margin:0;cursor:pointer}
.umenu.uleft>summary.rlogo:hover,.umenu.uleft[open]>summary.rlogo{filter:brightness(.9);box-shadow:0 0 0 3px color-mix(in srgb,var(--mod) 25%,transparent)}
.umenu.uleft .umpanel{left:var(--gut,12px);right:auto}
.umme{display:block}
.umme>.uav{float:left;margin:8px 8px 0 6px}
.umme .umhead{padding-left:4px}
@media (max-width:760px){
  .umenu.uleft .umpanel{left:8px;right:auto}
  .umenu.uleft>summary.rlogo{width:32px;height:32px}
}
.rlogo .udot.connchip,.uav .udot.connchip{display:block;width:11px;height:11px;padding:0;gap:0;border-radius:50%;
  background:var(--c,#16a34a)!important;border:2px solid var(--panel)!important;right:-3px;bottom:-3px}

/* ---- Logo menu: one aligned list (icon · name · value) ---- */
.umpanel{width:272px;padding:6px}
.umme>.uav{margin:10px 10px 0 8px}
.umhead{padding:10px 10px 10px 4px;margin-bottom:0}
.umsec{border-top:1px solid var(--line2);padding:4px 0}
.umsec .umrow{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:10px;min-height:38px;
  padding:0 10px;margin:0;border:0;border-radius:7px;background:none;font-size:13.5px;font-weight:500;color:var(--ink);
  text-decoration:none;width:100%;box-sizing:border-box;text-align:left;cursor:pointer}
.umsec a.umrow:hover,.umsec label.umrow:hover{background:var(--line2)}
.umi{display:grid;place-items:center;width:22px;height:22px;color:var(--ink3)}
.umi .umdot{width:9px;height:9px;border-radius:50%;background:var(--c)}
.uml{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.umv{display:flex;align-items:center;justify-content:flex-end;font-size:12.5px;color:var(--ink3);font-weight:500}
.umseg{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:7px;background:var(--bg,var(--panel))}
.umseg .lseg{height:24px;min-width:32px;padding:0 6px;border-radius:5px;font-size:12px;box-shadow:none;color:var(--ink2)}
.umseg .lseg.on{background:var(--mod);color:#fff}
.umv select{max-width:130px;height:28px;padding:0 4px;border:1px solid var(--line);border-radius:6px;background:var(--panel);
  color:var(--ink);font:inherit;font-size:12.5px}
.umsw{position:relative;width:32px;height:18px;border-radius:9px;background:var(--line);transition:background .15s}
.umsw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.umsw.on{background:var(--mod)}.umsw.on::after{left:16px}
.umsec a.umrow[data-out]:hover{color:var(--r)}.umsec a.umrow[data-out]:hover .umi{color:var(--r)}

/* ---- Top bar tools (Admin / Owner / Manager): Search settings + Configure ---- */
.rtools{display:flex;align-items:center;gap:4px;flex:none;margin-left:8px;padding-left:8px;border-left:1px solid var(--line2);align-self:center;height:24px}
.rtsearch{display:flex;align-items:center;height:28px;border:1px solid transparent;border-radius:7px;color:var(--ink3);transition:border-color .15s}
.rtsearch label{display:grid;place-items:center;width:28px;height:28px;cursor:pointer;border-radius:7px}
.rtsearch label:hover{background:var(--line2);color:var(--ink)}
.rtsearch input{width:0;padding:0;border:0;outline:0;background:none;font:inherit;font-size:12.5px;color:var(--ink);transition:width .18s,padding .18s}
.rtsearch:focus-within{border-color:var(--mod);background:var(--panel);color:var(--mod)}
.rtsearch:focus-within input,.rtsearch input:not(:placeholder-shown){width:170px;padding-right:8px}
.rtbtn{position:relative;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:7px;
  background:none;color:var(--ink3);cursor:pointer}
.rtbtn:hover{background:var(--line2);color:var(--ink)}
.rtbtn .cfgbadge{position:absolute;top:-3px;right:-5px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;
  background:#d97706;color:#fff;font-size:10px;font-weight:700;line-height:15px;text-align:center}
@media (max-width:760px){
  .rtools{margin-left:0;border-left:0;padding-left:0;height:auto}
  .rtbtn,.rtsearch label{width:34px;height:34px}.rtsearch{height:34px}
  .rtsearch:focus-within input,.rtsearch input:not(:placeholder-shown){width:min(150px,40vw)}
}
.umpanel{width:292px}.umv select{max-width:156px}
.rright .rtools{margin:0 2px 0 0;padding:0 6px 0 0;border-left:0;border-right:1px solid var(--line2)}
@media (min-width:761px) and (max-width:1350px){html.rib .rtab{padding:0 5px;gap:4px}}

/* ---- PHONE: sections along the top (scroll sideways), their screens right under them ---- */
@media (max-width:760px){
  .rbot,.rsheet,body.rsheet-open .rsheet{display:none!important}
  html.rib .main{padding-bottom:16px}
  .offbanner{bottom:12px}
  .rcur{display:none!important}
  html.rib .rtabs{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:0;gap:0}
  html.rib .rtabs::-webkit-scrollbar{display:none}
  html.rib .rtab{display:inline-flex;padding:0 11px;gap:5px;font-size:14px}
  html.rib .rtab .ic{display:inline-block;width:15px;height:15px}
  html.rib .rtabs .umenu.uleft{position:sticky;left:0;z-index:3;background:var(--panel);align-self:stretch;
    display:flex;align-items:center;margin:0;padding:0 6px 0 8px}
  html.rib .rpanel{overflow-x:auto;scrollbar-width:none}
  html.rib .rpanel::-webkit-scrollbar{display:none}
}

/* ---- STEPPER: one compact line, no numbers — a thin bar under each step
   (grey = to do, section colour = now, green = done), like the ribbon rows ---- */
.stepper{display:flex;flex-wrap:nowrap;gap:6px;margin:0 0 12px;padding:0}
.step,html.rib .step{flex:1 1 auto;min-width:0;display:block;margin:0;padding:2px 2px 6px;border:0;border-radius:0;
  border-bottom:3px solid var(--line);background:none;box-shadow:none;font-size:12.5px;font-weight:600;
  color:var(--ink3);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step i{display:none}
.step.on,html.rib .step.on{background:none;color:var(--mod);border-bottom-color:var(--mod)}
.step.done,html.rib .step.done{background:none;color:var(--g);border-bottom-color:var(--g)}
.step.done::before{content:"✓ "}
@media (max-width:760px){.stepper{gap:4px}.step,html.rib .step{padding:2px 1px 5px;font-size:12px}}

/* ---- SUGGESTIONS SHOWN INSIDE EMPTY BOXES (placeholders) read the same way as
   every other system suggestion: italic, light, never bold — even in the big
   centred boxes such as Mnemonic ---- */
input::placeholder,textarea::placeholder,
.f.big input::placeholder,html.rib input::placeholder{font-style:italic;font-weight:400;color:var(--ink3);opacity:.75;letter-spacing:normal}

/* ---- SMART SELECT: ordinary dropdowns turned type-to-search ---- */
.smartsel{display:inline-block;min-width:150px;max-width:100%;vertical-align:middle}
.f .smartsel,.fgrid .smartsel,td .smartsel{display:block;width:100%}
.smartsel-native{position:absolute!important;left:0;bottom:0;width:1px!important;height:1px!important;
  opacity:0!important;pointer-events:none!important;border:0!important;padding:0!important;margin:0!important}
.smartsel .pickin{cursor:text}
.smartsel .picklist button[disabled]{opacity:.45;cursor:not-allowed}
:where(.smartsel) .pickin{width:100%;min-height:34px;padding:0 10px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);color:var(--ink);font:inherit;font-size:13.5px;box-sizing:border-box}
:where(.smartsel) .pickin:focus{outline:0;border-color:var(--mod);box-shadow:0 0 0 3px color-mix(in srgb,var(--mod) 16%,transparent)}

/* Desktop view switch: only on touch phones/tablets (it stays visible while the phone shows the PC layout) */
.umsec .umrow[data-umdesk]{display:none}
@media (pointer:coarse){.umsec .umrow[data-umdesk]{display:grid}}

/* ---- TRAINING-ONLY TEXT: explanations show only while Training mode is on ---- */
.trainonly{display:none!important}

/* ---- PRODUCTION PLANNING: compact grid, cards on phones ---- */
.plantbl th,.plantbl td{padding:5px 6px;white-space:nowrap}
.plantbl td select,.plantbl td .smartsel{min-width:0!important}
.plantbl td .smartsel{display:inline-block;width:118px}
.plantbl td .smartsel .pickin{width:100%!important;min-width:0!important}
.plantbl td[data-l="Grading"] .smartsel,.plantbl td[data-l="Grading"] select{width:58px}
.plantbl td select{max-width:120px}
.plantbl .pickin{min-height:30px;padding:0 7px;font-size:13px}
.plantbl .qty4{width:4.6em!important;padding:4px 6px;text-align:right}
.plantbl .qty3{width:3.4em!important;padding:4px 6px;text-align:right}
.plantbl .pdes{white-space:normal;max-width:190px}
.plantbl .pdes .pill,.plantbl .pdes .chip{font-size:11px}
#reasonbox{display:none}
#reasonbox.needreason{display:block;border-left:3px solid var(--a);padding-left:10px;margin-top:8px}
@media (max-width:760px){
  .plantbl thead{display:none}
  .plantbl,.plantbl tbody{display:block;width:100%}
  .plantbl tr[data-line]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 8px;padding:10px 8px;
    border-bottom:1px solid var(--line)}
  .plantbl tr[data-line]{height:auto!important}
  .plantbl tr[data-line] td{display:block;padding:0;border:0;min-width:0;text-align:left;height:auto!important;max-height:none!important;overflow:visible}
  .plantbl td[data-l]::before{content:attr(data-l);display:block;font-size:11px;font-weight:600;color:var(--ink3);margin-bottom:2px}
  .plantbl td.pdes{grid-column:1/-1;max-width:none}
  .plantbl td[data-l="Category"],.plantbl td[data-l="Product type"]{grid-column:span 2}
  .plantbl td .smartsel,.plantbl td select,.plantbl td[data-l="Grading"] .smartsel{width:100%;max-width:none}
  .plantbl td.num{text-align:left}
  .tw:has(.plantbl){overflow:visible}
}

/* ---- DESIGN SCREEN, COMPACT: only field names and boxes unless Training mode is on.
   On a phone the keyboard leaves ~40% of the screen, so every pixel counts. ---- */
body:not(.train):is(.r-createdesign,.r-designs) form .hint,
body:not(.train):is(.r-createdesign,.r-designs) form .guide-text,
body:not(.train):is(.r-createdesign,.r-designs) form .stepper,
body:not(.train):is(.r-createdesign,.r-designs) form #mnstate:not(:has(.dupwarn)),
body:not(.train):is(.r-createdesign,.r-designs) .actmeta{display:none!important}
:is(.r-createdesign,.r-designs) form .f{margin-bottom:6px}
:is(.r-createdesign,.r-designs) form .f label{margin-bottom:2px}
:is(.r-createdesign,.r-designs) form .fgrid{gap:6px 10px}
:is(.r-createdesign,.r-designs) form .f.big input{font-size:18px;padding:6px 10px;letter-spacing:.06em}
:is(.r-createdesign,.r-designs) form .radios{gap:6px}
:is(.r-createdesign,.r-designs) form .radios .ro{padding:6px 10px;min-height:0;flex:0 1 auto}
:is(.r-createdesign,.r-designs) form .calcgrid{gap:6px}
:is(.r-createdesign,.r-designs) form .calcbox{padding:6px 8px}
:is(.r-createdesign,.r-designs) form .calcbox label{font-size:11px;margin-bottom:2px}
:is(.r-createdesign,.r-designs) form .calcbox input{padding:5px 7px}
:is(.r-createdesign,.r-designs) form .cbout:empty,:is(.r-createdesign,.r-designs) form .cberr:empty{display:none}
@media (max-width:760px){
  /* no page title, crumbs or outer card heading — the ribbon already says where you are */
  :is(.r-createdesign) .crumb,:is(.r-createdesign) main>h1,:is(.r-createdesign) .pageact{display:none!important}
  :is(.r-createdesign,.r-designs) form>.card,:is(.r-createdesign,.r-designs) main>.card{padding:8px}
  :is(.r-createdesign,.r-designs) main>.card>.chead{display:none}
  :is(.r-createdesign,.r-designs) form .card.flat{padding:8px;margin-bottom:8px}
  :is(.r-createdesign,.r-designs) form .card.flat>.chead{margin:-2px 0 6px;padding:0 0 4px}
  :is(.r-createdesign,.r-designs) form .card.flat>.chead h2{font-size:13px}
  :is(.r-createdesign,.r-designs) form .f label{font-size:12px}
  :is(.r-createdesign,.r-designs) form input:not([type=checkbox]):not([type=radio]),
  :is(.r-createdesign,.r-designs) form select,:is(.r-createdesign,.r-designs) form .pickin{min-height:36px;padding-top:4px;padding-bottom:4px}
  :is(.r-createdesign,.r-designs) form .calcgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  :is(.r-createdesign,.r-designs) form .calcbox.final{grid-column:1/-1}
  :is(.r-createdesign,.r-designs) main{padding-top:6px}
}
/* design screen: second pass — bare form outside Training mode */
:is(.r-createdesign,.r-designs) #mnlet:empty,:is(.r-createdesign,.r-designs) .matchstrip:empty{display:none}
body:not(.train):is(.r-createdesign,.r-designs) form .fradio>label,
body:not(.train):is(.r-createdesign,.r-designs) form [data-photostate].need,
body:not(.train):is(.r-createdesign,.r-designs) form .calcbox:not(.final) .cbout{display:none!important}
:is(.r-createdesign,.r-designs) form .calcbox label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:none;letter-spacing:0}
:is(.r-createdesign,.r-designs) form .calcbox label code{display:none}
@media (max-width:760px){
  :is(.r-createdesign,.r-designs) section.card:has(form[data-draft])>.chead{display:none}
  body:not(.train):is(.r-createdesign,.r-designs) form .card.flat>.chead{display:none}
  body:not(.train):is(.r-createdesign,.r-designs) form .card.flat{padding:6px 8px;margin-bottom:6px}
  :is(.r-createdesign,.r-designs) form [data-photobox] .dz{display:none}
  :is(.r-createdesign,.r-designs) form .capturebar{padding:6px;margin:0}
  :is(.r-createdesign,.r-designs) form .capturebar .btn{padding:6px 12px;min-height:34px}
  :is(.r-createdesign,.r-designs) form .radios .ro{font-size:13px;padding:5px 8px}
  :is(.r-createdesign,.r-designs) form .calcbox{padding:4px 6px}
  :is(.r-createdesign,.r-designs) form .calcbox input{min-height:32px!important;font-size:15px}
}
@media (max-width:760px){
  :is(.r-createdesign,.r-designs) form[data-draft]>section.card>.chead{display:none}
  :is(.r-createdesign,.r-designs) form[data-draft]>section.card{padding:6px}
  :is(.r-createdesign,.r-designs) form .radios .ro{white-space:nowrap}
}
body:not(.train):is(.r-createdesign,.r-designs) form .fradio>.flabel{display:none!important}

/* ---- PRODUCTION PLANNING v2: tick first, one-line toolbar, filter that fits ---- */
.plbar{display:flex;align-items:center;gap:8px;margin:0 0 8px;flex-wrap:nowrap}
.plsearch{display:flex;align-items:center;gap:6px;flex:1 1 auto;max-width:360px;height:32px;padding:0 10px;
  border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink3)}
.plsearch:focus-within{border-color:var(--mod);color:var(--mod)}
.plsearch input{flex:1;min-width:0;border:0!important;outline:0;background:none!important;box-shadow:none!important;padding:0!important;height:30px;font-size:13px}
.plbar .ghost.mini{height:32px;padding:0 10px;font-size:12.5px;white-space:nowrap}
.plcount{white-space:nowrap}
.pchk{width:18px;height:18px;accent-color:var(--mod);cursor:pointer;margin:0;vertical-align:middle}
.pchk:disabled{cursor:not-allowed;opacity:.4}
.plantbl th:first-child,.plantbl td.pchkcell{width:30px;text-align:center;padding-left:8px;padding-right:2px}
.plantbl td.num{font-variant-numeric:tabular-nums}
.plantbl tr[data-line]:has(.pchk:checked){background:color-mix(in srgb,var(--g) 7%,transparent)}
@media (max-width:760px){
  .plbar .ghost.mini span{display:none}
  .plsearch{max-width:none}
  .plantbl tr[data-line]{position:relative;grid-template-columns:repeat(3,minmax(0,1fr))}
  .plantbl td.pchkcell{position:absolute;top:10px;right:8px;width:auto;padding:0}
  .plantbl td.pchkcell .pchk{width:22px;height:22px}
  .plantbl td.pdes{padding-right:34px}
}
@media (max-width:760px){ .r-planning #savehint,.r-planning .stickybar .advtoggle{display:none} .r-planning .stickybar{padding:8px 12px} }
/* Production Planning on a phone: the list starts near the top */
@media (max-width:760px){
  .r-planning .crumb,.r-planning main>h1{display:none}
  .r-planning .pageact{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;margin:0 0 6px}
  .r-planning .pageact a{flex:none;padding:5px 10px;font-size:12px;min-height:0}
  .r-planning .grid.g4:has(.kpi){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-bottom:6px}
  .r-planning .grid.g4 .kpi{padding:6px 4px;min-height:0;display:block;text-align:center}
  .r-planning .grid.g4 .kpi .ki,.r-planning .grid.g4 .kpi em{display:none}
  .r-planning .grid.g4 .kpi .kv b{font-size:16px;line-height:1.1}
  .r-planning .grid.g4 .kpi .kv small{font-size:10px;line-height:1.15;display:block;white-space:normal}
  .r-planning main>.card:has(.plantbl){padding:8px}
  .r-planning main>.card:has(.plantbl)>.chead{display:none}
}
/* planning parameters: carried value hint must stay visible (it is an instruction, not help) */
.r-settings form .f .hint:not(:empty){display:block}
.pwunused{margin-top:10px}

/* ---- search boxes: a visible outline everywhere (they were grey-on-grey) ---- */
.gsearch{background:var(--panel);border-color:var(--line)}

/* ---- status radio groups (Pending / Hold / Ready): a neat segmented control.
   The ribbon's square .rbtn icon button had taken over their look. ---- */
.rbtn-group{display:inline-flex;gap:0;flex-wrap:nowrap;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel)}
.rbtn-group .rbtn{display:inline-flex;align-items:center;justify-content:center;width:auto;height:30px;padding:0 10px;margin:0;
  border:0;border-right:1px solid var(--line);border-radius:0;background:none;font-size:12.5px;color:var(--ink2);cursor:pointer;white-space:nowrap}
.rbtn-group .rbtn:last-child{border-right:0}
.rbtn-group .rbtn input[type=radio]{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.rbtn-group .rbtn:has(input:checked){background:var(--mod);color:#fff;font-weight:600}
.rbtn-group .rbtn:has(input[data-kit-status=hold]:checked){background:var(--a,#d97706)}
.rbtn-group .rbtn:has(input[data-kit-status=ready]:checked){background:var(--g,#16a34a)}
.rbtn-group .rbtn:has(input:focus-visible){outline:2px solid var(--mod);outline-offset:-2px}

/* ---- KIT PREPARATION: one toolbar, no repeated headings ---- */
.r-kits main>h1,.r-kits .crumb{display:none}
.kitbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.kitbar .kitsearch{flex:1 1 220px;max-width:320px;height:34px}
.kittot{font-size:13px;color:var(--ink2);white-space:nowrap}
.kittot b{color:var(--ink)}.kittot b.neg{color:var(--r)}.kittot b.pos{color:var(--g)}
.kitact{margin-left:auto;display:flex;gap:6px}
.kitact .btn2,.kitact .ghost{height:34px;padding:0 10px;font-size:13px}
.kitcard{padding-top:8px}
@media (max-width:760px){
  .kittot{display:none}                      /* no Planned / Prepared / Difference bar on phones */
  .kitbar .kitsearch{max-width:none;flex-basis:100%}
  .kitact{margin-left:0}
  .kitact a span{font-size:12px}
}
@media (max-width:760px){
  .kitbar{flex-wrap:nowrap}
  .kitbar .kitsearch{flex:1 1 auto;min-width:0}
  .kitbar>.chip{display:none}
  .kitact a span{display:none}               /* icon-only on phones */
  .kitact a{width:36px;padding:0;justify-content:center}
  .kittbl thead{display:none}
  .kittbl,.kittbl tbody{display:block;width:100%}
  .kittbl tr[data-line]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 8px;padding:10px 6px;border-bottom:1px solid var(--line);height:auto!important}
  .kittbl tr[data-line] td{display:block;padding:0;border:0;height:auto!important;min-width:0;text-align:left}
  .kittbl td[data-l]::before{content:attr(data-l);display:block;font-size:11px;font-weight:600;color:var(--ink3);margin-bottom:2px}
  .kittbl td.kdes{grid-column:1/3}
  .kittbl td.kid{grid-column:3;text-align:right;align-self:center}
  .kittbl td.kunits,.kittbl td.kst{grid-column:1/-1}
  .kittbl td.krel:empty{display:none}
  .kittbl .uomrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .kittbl .uomrow .uf input{width:100%!important}
  .kittbl .rbtn-group{display:flex;width:100%}
  .kittbl .rbtn-group .rbtn{flex:1 1 0;height:34px}
  .tw:has(.kittbl){overflow:visible}
}
/* Kit Preparation tabs: To prepare · On hold · Ready */
.kittabs{display:flex;gap:6px;margin:0 0 8px;overflow-x:auto}
.kittabs a{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:8px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink2);font-size:13.5px;font-weight:600;white-space:nowrap}
.kittabs a b{min-width:20px;padding:0 6px;border-radius:10px;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c);font-size:12px;text-align:center}
.kittabs a.on{background:var(--c);border-color:var(--c);color:#fff}
.kittabs a.on b{background:rgba(255,255,255,.25);color:#fff}
@media (max-width:760px){.kittabs a{flex:1 1 0;justify-content:center;padding:0 6px;font-size:13px}}
/* KIT PREPARATION on a phone, v2: one compact block per kit, three vertical columns
   [photo · design · kit ID · difference] [Piece / Dozen / Gross] [Pending / Hold / Ready] */
@media (max-width:760px){
  .kittbl tr[data-line]{grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr) minmax(0,.9fr);grid-auto-rows:auto;gap:4px 8px;padding:8px 4px;align-items:start}
  .kittbl td.kdes{grid-column:1;grid-row:1}
  .kittbl td.kid{grid-column:1;grid-row:2;text-align:left;font-size:11px;color:var(--ink3)}
  .kittbl td[data-l="Difference"]{grid-column:1;grid-row:3}
  .kittbl td[data-l="Difference"]::before,.kittbl td[data-l="Planned"],.kittbl td[data-l="Pieces"]{display:none}
  .kittbl td.kunits{grid-column:2;grid-row:1/span 3}
  .kittbl td.kst{grid-column:3;grid-row:1/span 3}
  .kittbl td.krel{grid-column:1;grid-row:4}
  .kittbl td.kdes .idph{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
  .kittbl td.kdes .idtx small{display:none}   /* only the design name, no description */
  .kittbl td.kdes .idtx b{font-size:13px}
  .kittbl .uomrow{grid-template-columns:1fr;gap:4px}
  .kittbl .uomrow .uf{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:4px}
  .kittbl .uomrow .uf label{font-size:11px;margin:0;display:block;line-height:1.1}
  .kittbl .uomrow .uf label em{display:none}
  .kittbl .uomrow .uf input{height:32px;min-height:0;padding:2px 6px}
  .kittbl .rbtn-group{flex-direction:column;height:100%}
  .kittbl .rbtn-group .rbtn{height:32px;border-right:0;border-bottom:1px solid var(--line)}
  .kittbl .rbtn-group .rbtn:last-child{border-bottom:0}
  .kittbl td[data-diff] .pill{font-size:11px;padding:1px 6px}
}
@media (max-width:760px){
  .kittbl tr[data-line] td[data-l="Planned"],.kittbl tr[data-line] td[data-l="Pieces"]{display:none!important}
  .kittbl .rbtn-group .rbtn{height:34px}
  .kittabs a{padding:0 4px}
}
@media (max-width:760px){
  .kittbl td.kst{align-self:stretch;display:flex!important}
  .kittbl td.kst .rbtn-group{flex:1;height:auto}
  .kittbl td.kst .rbtn-group .rbtn{flex:1 1 0;height:auto;min-height:30px}
}

/* PHONE: the open section's screens sit in a grid of four across instead of
   scrolling sideways, so every screen is visible at once (two lines for up to
   eight screens). The count badge rides on the corner so the name keeps its room. */
@media (max-width:760px){
  html.rib .ribbon{height:auto}
  html.rib .rpanel.on{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:auto;overflow:visible;
    gap:4px;padding:5px 6px 6px}
  html.rib .rpanel .ritem{position:relative;min-width:0;justify-content:center;height:32px;padding:0 2px;gap:4px;font-size:11.5px;letter-spacing:-.1px}
  html.rib .rpanel .ritem>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html.rib .rpanel .ritem .ic{display:none}
  html.rib .rpanel .ritem .nbadge{position:absolute;top:-5px;right:0;margin:0;min-width:16px;height:16px;
    padding:0 4px;font-size:10px;line-height:16px}
}

/* ONE LABOUR SCREEN: workers with their account figures, department chips, one toolbar */
.labchips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.labchips .chip{text-decoration:none;cursor:pointer}
.labchips .chip.on{background:var(--mod);color:#fff;border-color:var(--mod)}
.labimp{position:relative}
.labimp summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.labimp summary::-webkit-details-marker{display:none}
.labimp[open] form{position:absolute;right:0;top:40px;z-index:5;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);white-space:nowrap}
.labtbl .lact .btn,.labtbl .lact a{margin-left:4px}
@media (max-width:760px){
  .labtbl thead{display:none}
  .labtbl,.labtbl tbody{display:block;width:100%}
  .labtbl tr[data-line]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 8px;padding:10px 4px;
    border-bottom:1px solid var(--line);height:auto!important}
  .labtbl tr[data-line] td{display:block;padding:0;border:0;height:auto!important;min-width:0;text-align:left}
  .labtbl td[data-l]::before{content:attr(data-l);display:block;font-size:11px;font-weight:600;color:var(--ink3);margin-bottom:2px}
  .labtbl td.lwho{grid-column:1/-1}
  .labtbl td.lact{grid-column:1/-1;display:flex!important;gap:6px;white-space:normal}
  .labtbl td.lact a{margin:0;flex:1 1 0;justify-content:center}
  .labtbl td.lmob{font-size:12px}
  .tw:has(.labtbl){overflow:visible}
  .labbar .kittot{display:none}
  .labtbl td.lact a{height:34px;padding:0 6px;gap:4px;font-size:12.5px;min-width:0}
  .labtbl td.lact a .ic{width:14px;height:14px}
  .labtabs{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
  .labtabs .ctab{min-width:0;padding:6px 4px;justify-content:center;text-align:center}
  .labtabs .ctab,.labtabs .ctab *{font-size:13px}
}

/* PHONE JOB CARDS: Job Work, Packing Job Work and Packaging Job Work lists read as
   one card per job on a phone — code and status on top, the worker, the figures
   in one row, a received bar and the buttons. On a PC they stay tables. */
.jobcards td.jc-bar{display:none}
.jobcards .jc-city{display:block}
.jcbar{height:6px;border-radius:4px;background:var(--line);overflow:hidden}
.jcbar i{display:block;height:100%;background:#16a34a;border-radius:4px}
@media (max-width:760px){
  .jobcards thead,.jobcards tfoot tr td[colspan]{display:none}
  .jobcards,.jobcards tbody,.jobcards tfoot{display:block;width:100%}
  .jobcards tr[data-line]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 8px;padding:10px 4px;
    border-bottom:1px solid var(--line);height:auto!important}
  .jobcards tr[data-line] td{display:block;padding:0;border:0;height:auto!important;min-width:0;text-align:left;white-space:normal}
  .jobcards td[data-l]::before{content:attr(data-l);display:block;font-size:11px;font-weight:600;color:var(--ink3);margin-bottom:1px}
  .jobcards td.jc-code{grid-column:1/4;order:-2;font-size:15px;align-self:center}
  .jobcards td.jc-st{grid-column:4;order:-1;text-align:right;justify-self:end;align-self:center}
  .jobcards td.jc-who{grid-column:1/-1;font-weight:600}
  .jobcards .jc-city{display:inline;margin-left:6px;font-weight:400}
  .jobcards td.jc-w2,.jobcards td.jc-due{grid-column:span 2}
  .jobcards td.jc-hide{display:none!important}
  .jobcards td.jc-bar{display:flex!important;grid-column:span 2;align-items:flex-end;gap:6px;flex-wrap:wrap;align-content:flex-end}
  .jobcards td.jc-bar .jcbar{flex:1 1 100%}
  .jobcards td.jc-bar small{color:var(--ink3);white-space:nowrap;font-size:11px}
  .jobcards td.jc-act{grid-column:1/-1;display:flex!important;gap:6px;flex-wrap:wrap}
  .jobcards td.jc-act>a,.jobcards td.jc-act>.btn{flex:1 1 auto;justify-content:center;margin:0;min-width:0}
  .jobcards td.jc-act:empty{display:none!important}
  .tw:has(.jobcards){overflow:visible}
  .jobcards tfoot tr{display:flex;flex-wrap:wrap;gap:4px 12px;padding:8px 4px}
  .jobcards tfoot td{border:0;padding:0}
}

/* LABOUR RECEIVING: compact worker picker, busiest first; one line once chosen */
.rcvlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px}
.rcvw{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);color:var(--ink);text-decoration:none;min-width:0}
.rcvw:hover{border-color:var(--mod)}
.rcvid{display:flex;flex-direction:column;min-width:0;flex:1}
.rcvid b{font-size:14px}
.rcvid small{color:var(--ink3);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rcvq{display:flex;flex-direction:column;align-items:flex-end;flex:none}
.rcvq b{font-size:17px;color:var(--mod);line-height:1.1}
.rcvq small{color:var(--ink3);font-size:11px}
.rcvidle{margin-top:10px}
.rcvidle summary{cursor:pointer;padding:4px 0}
.rcvidle .rcvlist{margin-top:6px;opacity:.8}
.rcvcur{display:flex;align-items:center;gap:10px;padding:8px 12px;margin:0 0 12px;border:1px solid color-mix(in srgb,var(--mod) 40%,transparent);
  border-radius:12px;background:color-mix(in srgb,var(--mod) 7%,var(--panel))}
.rcvcur>.ic{color:var(--mod);flex:none}
.rcvcur .rcvid small{font-size:11px}
.rcvcur .rcvid span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rcvcur .btn2{flex:none}
@media (max-width:760px){
  .rcvlist{grid-template-columns:1fr}
  .rcvcur .btn2 span{display:none}
  .rcvcur .btn2{width:36px;padding:0;justify-content:center}
}

/* PRODUCTION FLOOR: one toolbar (search · all · clear · totals); on a phone each
   design is one line — tick · design · available — and the Send / Left boxes open
   under it only once it is ticked. */
.pfbar .btn2,.pfbar .ghost{height:40px}
.pfsum a{text-decoration:none}
@media (max-width:760px){
  .pfbar{flex-wrap:wrap!important}
  .pfbar .kitsearch{flex:1 1 0!important;min-width:0}
  .pfbar .btn2 span,.pfbar .ghost span{display:none}
  .pfbar .btn2,.pfbar .ghost{width:40px;padding:0;justify-content:center;flex:none}
  .pfbar .pfsum{display:block!important;flex-basis:100%;font-size:12.5px;margin:0}
  .pftbl thead{display:none}
  .pftbl,.pftbl tbody{display:block;width:100%}
  .pftbl tr[data-selrow]{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:4px 8px;align-items:center;
    padding:8px 2px;border-bottom:1px solid var(--line);height:auto!important}
  .pftbl tr[data-selrow] td{display:block;padding:0;border:0;height:auto!important;min-width:0}
  .pftbl td.pickcol{grid-column:1}
  .pftbl td.pfd{grid-column:2}
  .pftbl td.pfav{grid-column:3;text-align:right}
  .pftbl td.pfav .small{font-size:10.5px;display:block;max-width:110px;line-height:1.2}
  .pftbl td.pfcat,.pftbl td.pfpe{display:none!important}
  .pftbl td.qtycell,.pftbl td.pfleft{display:none!important}
  .pftbl tr:has([data-selbox]:checked) td.qtycell{display:block!important;grid-column:2}
  .pftbl tr:has([data-selbox]:checked) td.pfleft{display:block!important;grid-column:3;text-align:right}
  .pftbl td[data-l]::before{content:attr(data-l);display:block;font-size:11px;font-weight:600;color:var(--ink3);text-align:left}
  .pftbl td.pfleft::before{text-align:right}
  .pftbl td.qtycell input{width:100%!important;max-width:none}
  .tw:has(.pftbl){overflow:visible}
}

/* WIP: views as tabs, results first; the filters fold under one button */
.wipbar .wipdes{flex:1 1 260px;max-width:340px;min-width:0}
.wipbar .wipdes select,.wipbar .wipdes .smartsel{width:100%}
.wipbar .btn2.on{border-color:var(--mod);color:var(--mod)}
#wipmore{margin:0 0 12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.wipadv{margin:14px 0 4px}
.wipadv summary{cursor:pointer}
.wipadv form{margin-top:8px}
@media (max-width:760px){
  .wipbar{flex-wrap:nowrap}
  .wipbar .wipdes{flex:1 1 auto;max-width:none}
  .wipbar .btn2 span{font-size:13px}
}
/* dashboard: system checks are one quiet line in the footer strip, not "Do first" */
.infostrip .syschk{display:inline-flex;align-items:center;gap:4px;color:var(--r,#dc2626);text-decoration:none;font-size:12.5px}
.infostrip .syschk:hover{text-decoration:underline}

/* KIT PREPARATION → READY: tick kits, choose the worker, Give */
.givetbl tr.sel td{background:color-mix(in srgb,var(--g,#16a34a) 8%,transparent)}
.givebar{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.givebar .f{margin:0}
.givebar .givewho{flex:1 1 280px;min-width:0}
.givebar .givedue{flex:0 0 170px}
.givebar .btn[disabled]{opacity:.5}
.givebar em{font-style:normal}
.givebar .hint,.givebar small.muted:not(.givesum){display:none}
.givebar .givewho .f,.givebar .givedue .f{max-width:none!important;width:100%!important}
.givebar .givewho select,.givebar .givewho input,.givebar .givewho .smartsel{width:100%;max-width:none}
@media (max-width:760px){
  .givetbl thead{display:none}
  .givetbl,.givetbl tbody{display:block;width:100%}
  .givetbl tr[data-give]{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:2px 8px;align-items:center;
    padding:8px 2px;border-bottom:1px solid var(--line);height:auto!important}
  .givetbl tr[data-give] td{display:block;padding:0;border:0;height:auto!important;min-width:0}
  .givetbl td.pickcol{grid-column:1;grid-row:1/3}
  .givetbl td.gdes{grid-column:2}
  .givetbl td.gprep{grid-column:3;text-align:right}
  .givetbl td.gkid{grid-column:2;font-size:11.5px;color:var(--ink3)}
  .givetbl td.gage{grid-column:3;text-align:right}
  .givetbl td.gprep::before,.givetbl td.gage::before{content:attr(data-l);display:block;font-size:10.5px;color:var(--ink3);font-weight:600}
  .givetbl td.gplan,.givetbl td.gpe,.givetbl td.gdate,.givetbl td.gact,.givetbl td.gdiff{display:none!important}
  .givetbl td.gst{grid-column:2/-1}
  .givetbl td.gst:not(:has(.pa)){display:none!important}
  .tw:has(.givetbl){overflow:visible}
  .givebar{gap:6px}
  .givebar .givewho{flex:1 1 100%}
  .givebar .givedue{flex:1 1 0}
  .givebar .btn{flex:1 1 0;justify-content:center}
  .givebar .givesum{flex-basis:100%}
}
/* Kits → Ready is a list only (batches are made in Job Work): no tick column on the phone either */
@media (max-width:760px){
  .givetbl.nogive tr[data-give]{grid-template-columns:minmax(0,1fr) auto}
  .givetbl.nogive td.gdes,.givetbl.nogive td.gkid,.givetbl.nogive td.gst{grid-column:1}
  .givetbl.nogive td.gprep,.givetbl.nogive td.gage{grid-column:2}
}

/* RESERVED BATCH: one grid (rates + going out) — a card per kit on a phone */
.jwdecide{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.jwdecide em{font-style:normal}
@media (max-width:760px){
  .jwgrid thead{display:none}
  .jwgrid,.jwgrid tbody,.jwgrid tfoot{display:block;width:100%}
  .jwgrid tr[data-line]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 8px;padding:10px 2px;
    border-bottom:1px solid var(--line);height:auto!important}
  .jwgrid tr[data-line] td{display:block;padding:0;border:0;height:auto!important;min-width:0;text-align:left}
  .jwgrid td[data-l]::before{content:attr(data-l);display:block;font-size:11px;font-weight:600;color:var(--ink3);margin-bottom:2px}
  .jwgrid td.jg-d{grid-column:1/-1}
  .jwgrid td.jg-r{grid-column:span 2}
  .jwgrid td.jg-r .row{display:inline-flex!important;margin:0 0 0 4px!important;vertical-align:middle}
  .jwgrid td.jg-s{display:none!important}
  .jwgrid td.jg-a{grid-column:1/-1;display:flex!important;gap:6px}
  .jwgrid td.jg-a a{flex:1 1 0;justify-content:center;margin:0}
  .jwgrid td input.numin{width:100%!important;max-width:120px}
  .jwgrid tfoot tr{display:flex;flex-wrap:wrap;gap:4px 14px;padding:8px 2px}
  .jwgrid tfoot td{border:0;padding:0}
  .tw:has(.jwgrid){overflow:visible}
  .jwdecide{gap:6px}
  .jwdecide .btn,.jwdecide .btn2{flex:1 1 0;justify-content:center}
  .jwdecide>.small{flex-basis:100%}
}
.jwdecide i.hpcs{font-style:normal}
@media (max-width:760px){.jwdecide i.hpcs{display:none}}
/* the one action on a line (Receive) stands out from the rest of the row */
html.rib .mini.solid,html.rib a.mini.solid{background:var(--mod,#2563eb);color:#fff;border-color:var(--mod,#2563eb);font-weight:650}
html.rib .mini.solid .ic{color:#fff}
html.rib .mini.solid:hover{filter:brightness(1.08)}

/* LABOUR RECEIVING — one card per pending design: photo, numbers left and
   right, then Qty · ₹/gross · Receive on the card itself. Search stays pinned
   under the header while scrolling through hundreds of designs. */
.rcvtools{position:sticky;top:var(--top);z-index:15;display:flex;gap:6px;align-items:center;
  margin:0 -4px 6px;padding:6px 4px;background:var(--bg,var(--panel))}
.rcvtools .rcvsearch{flex:1 1 auto;max-width:none;height:40px;background:var(--panel)}
.rcvtools .rcvsearch input{font-size:16px}
.rcvtools .rcvfb{height:40px;flex:none;position:relative;padding:0 11px;gap:5px}
.rbadge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;border-radius:9px;background:var(--mod);color:#fff;
  font:700 10.5px/17px system-ui;text-align:center;font-style:normal;padding:0 4px}
.rbadge[hidden]{display:none}
.rcvfilt{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)) auto;gap:8px;align-items:end;
  margin:0 0 8px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.rcvfilt[hidden],.rcvcam[hidden],.rtoday[hidden],.rnone[hidden]{display:none!important}
.rcvfilt label{display:flex;flex-direction:column;gap:3px;min-width:0}
.rcvfilt small{font-size:11px;font-weight:600;color:var(--ink3)}
.rcvfilt select,.rcvfilt input{width:100%;min-width:0;height:38px;font-size:15px}
.rcvfilt .ghost{height:38px}
.rcvcam{margin:0 0 10px}
.rcamrow{flex-wrap:wrap}
.rcampick{cursor:pointer}
.rcvcount{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12.5px;color:var(--ink3);margin:0 2px 8px}
.rcvcount b{color:var(--ink)}
.rpm{color:var(--mod);font-weight:600}
.rgal{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));margin-bottom:14px}
.rcard{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1.5px solid var(--line);
  border-radius:var(--rad2,14px);overflow:hidden;margin:0;transition:border-color .2s,box-shadow .2s,opacity .35s,transform .35s}
.rcard[hidden]{display:none}
.rcard.late{border-color:color-mix(in srgb,var(--r) 45%,var(--line))}
.rcard:focus-within{border-color:var(--mod);box-shadow:0 0 0 3px color-mix(in srgb,var(--mod) 16%,transparent)}
.rcard.rhi{border-color:var(--mod);box-shadow:0 0 0 3px color-mix(in srgb,var(--mod) 25%,transparent)}
.rimg{position:relative;aspect-ratio:1;background:var(--sb);display:grid;place-items:center;overflow:hidden}
.rimg>img{width:100%;height:100%;object-fit:cover}
.rimg .phpair{display:flex;width:100%;height:100%}
.rimg .phpair img{flex:1;min-width:0;height:100%;object-fit:cover}
.rimg .nophoto{color:var(--ink3);opacity:.6}
.rlate{position:absolute;top:6px;left:6px;display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:999px;
  background:var(--r);color:#fff;font-size:11px;font-weight:700}
.rconf{position:absolute;top:6px;right:6px}
.rconf .pill{box-shadow:0 2px 8px rgba(0,0,0,.18)}
.rdone{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:color-mix(in srgb,var(--g) 82%,transparent);color:#fff;font-size:15px}
.rcard.rok .rdone{display:flex}
.rcard.rbye{opacity:0;transform:scale(.96)}
.rcard.rpart{border-color:var(--g);box-shadow:0 0 0 3px var(--gb)}
.rbody{display:flex;flex-direction:column;gap:1px;padding:7px 8px 8px}
.rl{display:flex;justify-content:space-between;align-items:baseline;gap:4px 8px;flex-wrap:wrap;font-size:12px;color:var(--ink2);line-height:1.35}
.rl>:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
.rl>:last-child{margin-left:auto;text-align:right;white-space:nowrap}
.rl .mono{font-family:inherit;font-variant-numeric:tabular-nums;font-size:11.5px}
.rn{font:700 13.5px/1.25 inherit;font-variant-numeric:tabular-nums;color:var(--ink)}
.rp{font-size:19px;font-weight:800;line-height:1.1;color:var(--mod);font-variant-numeric:tabular-nums}
.rlt{color:var(--r);font-weight:650}
.rst{display:flex;flex-wrap:wrap;gap:3px;margin-top:2px}
.rst:empty{display:none}
.rst .pill,.rst .chip{font-size:10.5px;padding:1px 7px}
.rin{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.rin label{display:flex;flex-direction:column;gap:1px;min-width:0;margin:0}
.rin small{font-size:10.5px;font-weight:600;color:var(--ink3)}
.rin input{width:100%;min-width:0;height:38px;padding:0 8px;border:1.5px solid var(--line);border-radius:9px;background:var(--panel);
  color:var(--ink);font-size:16px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.rin input[name=received_qty]{border-color:color-mix(in srgb,var(--mod) 45%,var(--line))}
.rin input:focus{outline:0;border-color:var(--mod);box-shadow:0 0 0 3px color-mix(in srgb,var(--mod) 16%,transparent)}
.rcard.rup .rin input[name=rate_g]{border-color:var(--a);background:var(--ab)}
.rin .qtymsg{font-size:10.5px;color:var(--r)}
.rwhy{width:100%;height:36px;margin-top:6px;padding:0 8px;border:1.5px solid var(--a);border-radius:9px;font-size:15px;background:var(--panel);color:var(--ink)}
.rwhy[hidden]{display:none}
.rgo{display:flex;gap:6px;margin-top:6px}
.rgo .rcvgo{flex:1 1 auto;height:40px;justify-content:center;font-size:15px;font-weight:700;padding:0 10px;min-width:0}
.rgo .rcvgo:disabled{opacity:.6}
.rcard.rexc .rcvgo{background:var(--a);box-shadow:none}
.rcard.rbusy .rcvgo span{opacity:.5}
.rqc{flex:none;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 10px;border:1.5px solid var(--line);
  border-radius:10px;color:var(--ink2,var(--ink));font-size:12.5px;font-weight:600;text-decoration:none;background:var(--panel)}
.rqc:hover{border-color:var(--mod);color:var(--mod)}
.rmsg{font-size:11.5px;line-height:1.3;margin-top:4px;color:var(--ink3)}
.rmsg:empty{display:none}
.rmsg.ok{color:var(--g);font-weight:650}
.rmsg.warn{color:#b45309;font-weight:600}
.rmsg.err{color:var(--r);font-weight:600}
.rnone{text-align:center;color:var(--ink3);padding:30px 10px}
.rtoday .rtlist{display:flex;flex-direction:column}
.rtr{display:flex;align-items:center;gap:10px;padding:6px 2px;border-bottom:1px solid var(--line2,var(--line))}
.rtr:last-child{border-bottom:0}
.rtr.rnew{background:color-mix(in srgb,var(--g) 8%,transparent)}
.rtn{display:flex;flex-direction:column;min-width:0;flex:1}
.rtn b{font-family:inherit;font-variant-numeric:tabular-nums;font-size:13px}
.rtn small,.rtq small{font-size:11px;color:var(--ink3)}
.rtq{display:flex;flex-direction:column;align-items:flex-end}
.rtq b{font-size:15px}
@media (max-width:760px){
  .rcvtools{margin:0 -2px 6px;padding:6px 2px}
  .rcvtools .rcvfb span{display:none}
  .rcvtools .rcvfb{width:42px;padding:0;justify-content:center}
  .rcvfilt{grid-template-columns:1fr 1fr;padding:8px;gap:8px}
  .rcvfilt .rfb{grid-column:1/-1}
  .rcvfilt .ghost{align-self:end}
  .rgal{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .rbody{padding:6px 7px 7px}
  .rn{font-size:13px}
  .rp{font-size:18px}
  .rin{gap:5px}
  .rin input{padding:0 6px}
  .rqc{padding:0 8px}
  .rcvcur{margin-bottom:8px}
}
@media (max-width:340px){ .rgal{grid-template-columns:1fr} }
.rin.one{grid-template-columns:1fr}
.rbody{flex:1 1 auto}
.rbody .rin{margin-top:auto;padding-top:6px}

/* PICK CARDS — the Receiving card, used by every Production screen that picks
   designs or kits. Tapping the photo ticks the card. */
.pgal{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));margin:0 0 12px}
.pcard{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1.5px solid var(--line);
  border-radius:var(--rad2,14px);overflow:hidden;margin:0;transition:border-color .2s,box-shadow .2s}
.pcard[hidden]{display:none}
.pcard.late{border-color:color-mix(in srgb,var(--r) 45%,var(--line))}
.pcard:focus-within{border-color:var(--mod)}
.pcard.on{border-color:var(--g);box-shadow:0 0 0 3px var(--gb)}
.pcard[data-pk] .rimg{cursor:pointer}
.pcard.on .rimg::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--g) 14%,transparent);pointer-events:none}
.ptick{position:absolute;top:7px;left:7px;z-index:2;margin:0;cursor:pointer}
.ptick input{position:absolute;opacity:0;width:1px;height:1px}
.ptick span{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.92);
  border:2px solid rgba(15,23,42,.35);color:transparent;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.ptick input:checked+span{background:var(--g);border-color:var(--g);color:#fff}
.ptick input:focus-visible+span{outline:3px solid color-mix(in srgb,var(--mod) 40%,transparent)}
.ptick input:disabled+span{opacity:.35;cursor:not-allowed}
.pcard .rlate{left:auto;right:6px;top:auto;bottom:6px}
.pickbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 8px;font-size:13px}
.pickbar .pall{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1.5px solid var(--line);border-radius:10px;
  background:var(--panel);cursor:pointer;font-weight:650;margin:0}
.pickbar .pall input{width:18px;height:18px;accent-color:var(--g);margin:0}
[data-pickshow][hidden],[data-pickhide][hidden]{display:none!important}
@media (max-width:760px){
  .pgal{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
}
@media (max-width:340px){ .pgal{grid-template-columns:1fr} }
/* reserved batch as cards: totals line and the Transfer bar */
.jwcards .rin input{text-align:right}
.jwamt{margin-top:4px;font-size:11.5px}
.jwamt>:first-child{color:var(--ink3)}
.jwamt b{color:var(--ink);font-size:13px}
.jwallout{display:flex;align-items:center;height:38px;color:var(--ink3);font-size:12px}
.jwrm{height:32px;font-size:12px;gap:4px;color:var(--ink3)}
.jwtot{display:flex;justify-content:flex-end;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--ink2);margin:0 2px 10px}
.jwtot b{color:var(--ink);font-size:15px}
.jwxfer{align-items:flex-end;gap:8px;border-top:2px solid var(--g);background:color-mix(in srgb,var(--g) 6%,var(--panel))}
.jwxn{align-self:center;font-size:13.5px;white-space:nowrap}
.jwxf{display:flex;flex-direction:column;gap:2px;margin:0;min-width:0}
.jwxf[hidden]{display:none}
.jwxf small{font-size:11px;font-weight:650;color:var(--ink3)}
.jwxf select,.jwxf input{height:40px;font-size:15px;min-width:0}
.jwxw{flex:1 1 240px;max-width:380px}
.jwxq input{width:110px}
.jwxgo{height:40px;background:var(--g)}
@media (max-width:760px){
  .jwxfer{display:grid!important;grid-template-columns:1fr 1fr;gap:6px 8px}
  .jwxn,.jwxw,[data-xinto]{grid-column:1/-1}
  .jwxw{max-width:none}
  .jwxq input{width:100%}
  .jwxgo,.jwxfer .ghost{justify-content:center}
  .jwtot{justify-content:space-between}
}
.rin input::-webkit-inner-spin-button,.rin input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.rin input{-moz-appearance:textfield;appearance:textfield}
@media (max-width:760px){ .rin input{padding:0 5px;font-size:15.5px} }
/* HANDOVER: the return date beside Hand over; the two WhatsApp buttons */
.jwdue{display:flex;flex-direction:column;gap:2px;margin:0}
.jwdue small{font-size:11px;font-weight:650;color:var(--ink3)}
.jwdue input{height:40px;font-size:15px;min-width:150px}
.jwdecide{align-items:flex-end}
.needdue{border-color:var(--r)!important;box-shadow:0 0 0 3px var(--rb)!important}
.jwdueset{gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:6px}
.jwwa{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:6px}
.jwwa .btn{min-height:46px;font-size:16px;padding:0 18px}
.jwwat,.jwwai{background:#25d366!important;box-shadow:0 6px 18px -8px #25d366!important;color:#fff!important}
.jwwai{background:#128c7e!important}
.jwwanote{margin:4px 0 6px}
.jwwamsg pre{white-space:pre-wrap;background:var(--sb);padding:10px;border-radius:10px;font:13px/1.55 inherit;margin:6px 0 0}
@media (max-width:760px){
  .jwdecide .jwdue{flex-basis:100%}
  .jwdue input{width:100%}
  .jwwa .btn{flex:1 1 45%;justify-content:center;padding:0 10px}
  .jwwa .ghost{flex-basis:100%;justify-content:center}
}
.pickbar .pksearch{flex:1 1 220px;max-width:360px;height:38px;background:var(--panel)}
.pickbar .pksearch input{font-size:15px}
@media (max-width:760px){ .pickbar .pksearch{flex-basis:100%;max-width:none} }
/* Production Floor as pick cards */
.pcard[data-selrow]{cursor:pointer}
.pfcard .rin input:disabled{background:var(--sb);color:var(--ink3);border-style:dashed}
.pfleftv{display:flex;align-items:center;justify-content:flex-end;height:38px;font-size:16px;font-weight:700;color:var(--ink2)}
.pfpe{font-size:11px;min-height:15px}
.pfpe [data-pe]{color:var(--ink3)}
/* Kit Preparation queue as pick cards */
.kitcards .kun{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.kitcards .kun input{padding:0 6px;text-align:center}
.kitcards .kpd{margin-top:5px;font-size:12px}
.kitcards .kpd b{color:var(--ink);font-size:14px}
.kitcards .kst{display:flex;width:100%;margin-top:6px}
.kitcards .kst .rbtn{flex:1 1 0;height:36px;padding:0 4px;font-size:13px}
.kitcards .qtymsg{display:block;font-size:11px;color:var(--r)}
/* Planning as pick cards */
.plall{margin:0 0 8px}
.plall .pall{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1.5px solid var(--line);border-radius:10px;
  background:var(--panel);cursor:pointer;font-weight:650;font-size:13px;margin:0}
.plall .pall input{width:18px;height:18px;accent-color:var(--g);margin:0}
.plcards .pdes{color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plattrs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 6px;margin-top:6px}
.plattrs label{display:flex;flex-direction:column;gap:1px;min-width:0;margin:0}
.plattrs small{font-size:10.5px;font-weight:600;color:var(--ink3)}
.plattrs select,.plattrs input{width:100%;min-width:0;height:36px;font-size:14px;padding:0 6px}
.plq .plsug{display:flex;align-items:center;justify-content:flex-end;height:38px;font-size:17px;font-weight:700;color:var(--ink3)}
.plq .plsug .pill{font-size:10.5px}
.pllast{font-size:11px;margin-top:3px}
.pllast>:first-child{color:var(--ink3)}
.rl>:first-child:last-child{margin-left:0;text-align:left}
.plattrs small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* WORKER APP: photo, how many, rate, given — and the give-back date shouted */
.wkgal{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.wkc .rn{font-size:15px}
.wkc .rp{font-size:22px}
.wkrate b{color:var(--ink);font-size:14px}
.wkdue{display:flex;flex-direction:column;align-items:center;gap:0;padding:8px 6px 9px;text-align:center;
  background:color-mix(in srgb,var(--mod) 12%,var(--panel));border-top:2px solid var(--mod);color:var(--ink)}
.wkdue small{font-size:11.5px;font-weight:650;color:var(--ink2)}
.wkdue b{font-size:22px;font-weight:800;line-height:1.15}
.wkdue em{font-style:normal;font-size:12.5px;font-weight:700}
.wksoon .wkdue{background:var(--ab);border-top-color:var(--a)}
.wksoon .wkdue em{color:#b45309}
.wklate{border-color:color-mix(in srgb,var(--r) 55%,var(--line))}
.wklate .wkdue{background:var(--r);border-top-color:var(--r);color:#fff}
.wklate .wkdue small,.wklate .wkdue em{color:#fff}
.wkstat{border-top:1px solid var(--line)}
.wkkpi .kpi{min-width:0}
@media (max-width:760px){
  .wkgal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wkdue b{font-size:19px}
  .wkkpi{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* ===== PHONE PASS (21 Sep) ===== */
/* Training mode shows the explanations; normal mode keeps screens bare */
body.train .trainonly{display:revert!important}
/* a one-column form on a narrow phone: every field takes the full row
   (a field marked to span two columns used to create a phantom 0-px column
   and squeeze its neighbour into it) */
@media (max-width:400px){ .fgrid>*{grid-column:1/-1!important;max-width:none!important} }
/* on a phone, field hints are training material */
@media (max-width:760px){ body:not(.train) .f>small.hint{display:none} }

/* two-choice segmented radios, side by side */
.seg2{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1.5px solid var(--line);border-radius:11px;overflow:hidden;margin:10px 0;max-width:420px}
.seg2 label{position:relative;display:flex;align-items:center;justify-content:center;min-height:42px;margin:0;cursor:pointer;
  font-weight:650;font-size:14.5px;color:var(--ink2);background:var(--panel)}
.seg2 label+label{border-left:1.5px solid var(--line)}
.seg2 input{position:absolute;opacity:0;pointer-events:none}
.seg2 label:has(input:checked){background:var(--mod);color:#fff}
.seg2 label:has(input:focus-visible){outline:2px solid var(--mod);outline-offset:-3px}
/* New batch: rate + return date on one line */
.jwnew2{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:420px;margin:0 0 6px}
.jwnf{display:flex;flex-direction:column;gap:2px;margin:0;min-width:0}
.jwnf small{font-size:11.5px;font-weight:650;color:var(--ink3)}
.jwnf input{height:42px;font-size:15.5px;width:100%;min-width:0}
@media (max-width:760px){
  .jwnewbar{display:grid!important;grid-template-columns:1fr 1fr;gap:6px 8px}
  .jwnewbar>b{grid-column:1/-1;font-size:13.5px}
  .jwnewbar .btn,.jwnewbar .btn2{justify-content:center;margin:0;padding:0 8px;min-width:0}
  .jwnewbar .btn span,.jwnewbar .btn2 span{white-space:nowrap}
}
.jwnf input{border:1.5px solid var(--line);border-radius:9px;padding:0 9px;background:var(--panel);color:var(--ink)}
.jwnf input:focus{outline:0;border-color:var(--mod);box-shadow:0 0 0 3px color-mix(in srgb,var(--mod) 16%,transparent)}
@media (max-width:760px){
  .jwnewbar .btn .ic,.jwnewbar .btn2 .ic{display:none}
  .jwnewbar .btn,.jwnewbar .btn2{font-size:14px;height:44px}
}
/* Job Work list on a phone: three short lines per batch, the card opens it */
@media (max-width:760px){
  .jobcards tr[data-line]{gap:3px 8px;padding:9px 4px;cursor:pointer}
  .jobcards td.jc-code{grid-column:1/2;font-size:14px}
  .jobcards td.jc-who{grid-column:2/4;order:-2;align-self:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px}
  .jobcards td.jc-st{grid-column:4}
  .jobcards td[data-l]::before{font-size:10px;margin:0}
  .jobcards td[data-l]{font-size:13.5px}
  .jobcards td.jc-due{grid-column:1/3}
  .jobcards td.jc-nodue{display:none!important}
  .jobcards td.jc-bar{grid-column:1/-1;order:9;display:block!important}
  .jobcards td.jc-bar small{display:none}
  .jobcards td.jc-bar .jcbar{height:4px}
  .jobcards td.jc-act{grid-column:3/5;justify-content:flex-end;align-self:end;flex-wrap:nowrap}
  .jobcards td.jc-act .jc-open{display:none}
  .jobcards td.jc-act>a,.jobcards td.jc-act>.btn{flex:0 0 auto;height:30px;font-size:12.5px;padding:0 10px}
}
/* Batch view: one-line header on a phone, compact rate bar, remove on the photo */
.jwstrip{display:none}
@media (max-width:760px){
  .jwkpis{display:none!important}
  .jwstrip{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:9px 12px;margin:0 0 10px;border:1px solid var(--line);
    border-radius:12px;background:var(--panel);font-size:13px;color:var(--ink2)}
  .jwstrip .jwsw{flex:1 1 100%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .jwstrip .jwsw b{font-size:15.5px;color:var(--ink)}
  .jwstrip b{color:var(--ink)}
  .jwstrip .jwod{color:var(--r)}
  .jwstrip .pill{margin-left:auto}
  .phhide{display:none!important}
  .r-jobwork .pageact{gap:6px}
  .r-jobwork .pageact .btn,.r-jobwork .pageact .btn2,.r-jobwork .pageact .ghost{height:34px;font-size:13px;padding:0 10px}
  .jwsug{display:none}
  body.train .jwsug{display:inline}
}
.jwrbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 10px}
.jwrbar .seg2{margin:0;flex:0 1 300px}
.jwall{display:flex;gap:6px;align-items:center}
.jwall input{width:150px;height:40px;border:1.5px solid var(--line);border-radius:9px;padding:0 9px;font-size:15px;background:var(--panel);color:var(--ink)}
.jwall .btn2{height:40px}
.jwfill{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.jwfill .mini{height:30px}
@media (max-width:760px){
  .jwrbar .seg2{flex:1 1 100%;max-width:none}
  .jwall{flex:1 1 100%}
  .jwall input{flex:1;width:auto;min-width:0}
}
.jwrm{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--r);
  box-shadow:0 2px 6px rgba(0,0,0,.2);text-decoration:none}
.jwrm:hover{background:var(--r);color:#fff}
.jwcards .rgo .btn.rcvgo{flex:1 1 auto;height:38px;justify-content:center}
@media (max-width:760px){
  .jobcards tr[data-line] td.jc-who{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .jwdecide{display:grid!important;grid-template-columns:1fr 1fr;gap:6px 8px;align-items:end}
  .jwdecide .jwdue{grid-column:1/-1}
  .jwdecide>.btn,.jwdecide>.btn2{margin:0;justify-content:center;min-width:0;height:44px;padding:0 6px;font-size:14px}
  .jwdecide>.btn .ic,.jwdecide>.btn2 .ic{display:none}
  .jwdecide .advtoggle{grid-column:1/-1;justify-self:end;font-size:11.5px;margin:0}
}
.jwcards .rgo{flex-wrap:wrap}
.jwcards .rgo .btn.rcvgo{flex:1 1 100%}
.jwcards .rgo .rqc{flex:1 1 100%;height:32px;font-size:12px}
@media (max-width:760px){ .jwnewbar .btn,.jwnewbar .btn2{font-size:13.5px} }
@media (max-width:760px){
  .jstbl th:nth-child(5),.jstbl tbody td:nth-child(5),.jstbl tfoot td:nth-child(3){display:none}
  .jstbl th,.jstbl td{padding:6px 5px}
  .jstbl .idph{--s:44px!important}
  .jwwa .ghost{display:none}
}
@media (max-width:760px){
  .phx{display:none!important}
  .recvkpi{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
  .recvkpi .kpi{padding:8px 10px;min-height:0}
  .recvkpi .kv b{font-size:20px}
}
/* Production screens on a phone: header buttons small, one row where they fit */
@media (max-width:760px){
  :is(.r-productionfloor,.r-receive,.r-kits,.r-planning,.r-wip,.r-labour,.r-packlabour) .pageact{gap:6px}
  :is(.r-productionfloor,.r-receive,.r-kits,.r-planning,.r-wip,.r-labour,.r-packlabour) .pageact :is(.btn,.btn2,.ghost){height:34px;font-size:13px;padding:0 10px}
}
/* WIP board on a phone: stage · jobs · pieces, empty stages folded away, a row opens its list */
@media (max-width:760px){
  .wipboard th:nth-child(n+4),.wipboard td:nth-child(n+4){display:none}
  .wipboard tr.muted{display:none}
  .wipboard tfoot th:nth-child(n+4){display:none}
  .wipboard td:first-child{white-space:nowrap;max-width:190px;overflow:hidden;text-overflow:ellipsis}
  .wipboard td:first-child .chip{display:none}
  .wipboard tr[data-href]{cursor:pointer}
  .tw:has(.wipboard){overflow:visible}
  /* two KPI boxes a row on production screens */
  :is(.r-wip,.r-planning,.r-productionfloor,.r-kits,.r-receive,.r-labour,.r-worker) .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  :is(.r-wip,.r-planning,.r-productionfloor,.r-kits,.r-receive,.r-labour) .grid.g4 .kpi{padding:9px 10px;min-height:0}
  :is(.r-wip,.r-planning,.r-productionfloor,.r-kits,.r-receive,.r-labour) .grid.g4 .kpi .ki{width:34px;height:34px}
  /* Planning: photo on the left, the choices beside it */
  .plcards{grid-template-columns:1fr!important}
  .plcards .pcard{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:start}
  .plcards .pcard>.rimg{width:112px;margin:8px 0 8px 8px;border-radius:10px}
  .plcards .pcard>.rbody{padding:8px 10px 10px}
}
/* Labour list on a phone: name, mobile, then pending · late · balance, then the buttons */
@media (max-width:760px){
  .labtbl tr[data-line]{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 8px;padding:9px 4px}
  .labtbl td.lkind,.labtbl td.lrate{display:none!important}
  .labtbl td.lmob{grid-column:1/-1;font-size:12px;color:var(--ink2);margin-top:-4px;padding-left:48px!important}
  .labtbl td.lmob::before{display:none}
  .labtbl td.lfig{font-size:13.5px}
  .labtbl td[data-l]::before{font-size:10px;margin:0}
  .labtbl td.lact a{height:32px}
}
.phonly{display:none}
i.phonly,i.phhide{font-style:normal}
@media (max-width:760px){
  .phonly{display:inline}
  .jstbl{font-size:12px}
  .jstbl th,.jstbl td{padding:5px 4px}
  .jstbl .idph small{display:none}
}
.jwnewf{grid-template-columns:1fr!important;max-width:420px}

/* ---- Labour Receiving: put a receipt right (Change qty / Undo) ---- */
.rtoday .chead{justify-content:space-between;flex-wrap:wrap}
.rtrange{text-decoration:none;cursor:pointer}
.rtedit{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:10px;
  border:1px solid var(--line);background:var(--card,#fff);color:var(--ink2);cursor:pointer}
.rtedit:hover,.rtedit.on{border-color:var(--mod);color:var(--mod);background:color-mix(in srgb,var(--mod) 8%,transparent)}
.rtgone{opacity:.55}
.rtgone .rtq b{text-decoration:line-through}
.rtchg{font-style:normal;color:#b45309;font-weight:650}
.rtund{font-style:normal;color:var(--r);font-weight:650}
.rtday{font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.04em;color:var(--ink3);padding:10px 2px 2px}
.rfix{display:grid;grid-template-columns:130px minmax(0,1fr);gap:8px 10px;padding:10px;margin:4px 0 8px;
  border:1px solid color-mix(in srgb,var(--mod) 30%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--mod) 5%,transparent)}
.rfix[hidden]{display:none!important}
.rfix label{display:flex;flex-direction:column;gap:3px;min-width:0;margin:0}
.rfix label small{font-size:11px;color:var(--ink3)}
.rfix input{width:100%;min-width:0;box-sizing:border-box;height:40px;padding:0 10px;border:1.5px solid var(--line);border-radius:9px;
  background:var(--panel);color:var(--ink);font:inherit;font-size:15px}
.rfix input:focus{outline:0;border-color:var(--mod);box-shadow:0 0 0 3px color-mix(in srgb,var(--mod) 16%,transparent)}
.rfq input{font-size:19px;font-weight:750;text-align:right;border-color:color-mix(in srgb,var(--mod) 45%,var(--line))}
.rfb .rfclose{margin-left:auto}
.rfb{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.rfb button{min-height:38px}
.rfundo{color:var(--r)!important;border-color:color-mix(in srgb,var(--r) 40%,var(--line))!important}
.rfix .rmsg{grid-column:1/-1;margin:0}
.rfix.rbusy{opacity:.6;pointer-events:none}
.rfxrow:has(.rfix[hidden]){display:none}
.rfxrow>td{padding:0 6px!important;background:transparent!important}
tr.rtfix td{color:var(--ink3)}
@media (max-width:520px){.rfix{grid-template-columns:104px minmax(0,1fr)}.rfb{flex-wrap:nowrap}.rfb .rfsave,.rfb .rfundo{flex:1 1 0;min-width:0;justify-content:center}
  .rfb .rfclose{flex:0 0 40px;width:40px;padding:0;justify-content:center}.rfb .rfclose span{display:none}}
@media (min-width:521px){.rtlist .rfix{max-width:640px;margin-left:46px}}

/* ---- Job Work: reserved batches under their worker, and Merge (club) ---- */
.jobcards tr.jcgrp,.jobcards tr.jcgrp td{height:auto!important;background:transparent!important}
.jobcards tr.jcgrp td{padding:12px 8px 6px!important;background:transparent!important;border-bottom:2px solid var(--line);white-space:normal}
.jcgi{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap}
.jcgw{display:inline-flex;align-items:center;gap:6px;font-size:14px}
.jcgw .ic{color:var(--mod)}
.jcgm{margin-left:auto}
@media (max-width:760px){
  .jobcards tr.jcgrp{display:block;cursor:default}
  .jcgw{flex:1 1 100%;min-width:0}
  .jcgm{min-height:34px}
  .jobcards tr.jcgrp td{display:block;border:0;border-bottom:2px solid var(--line);padding:14px 4px 6px!important}
}
.mglist{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.mgw{display:flex;align-items:center;gap:6px;padding:8px 12px 6px;font-size:12.5px;font-weight:700;color:var(--ink2);
  background:color-mix(in srgb,var(--mod) 6%,transparent);border-top:1px solid var(--line)}
.mgw:first-child{border-top:0}
.mgw .ic{color:var(--mod)}
.mgrow{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:10px;padding:10px 12px;margin:0;
  border-top:1px solid var(--line2,var(--line));cursor:pointer}
.mgrow:has(input:checked){background:color-mix(in srgb,var(--g) 7%,transparent)}
.mgk{font-size:13px;color:var(--ink2)}
@media (max-width:420px){.mgrow{grid-template-columns:auto auto 1fr}.mgd{display:none}}
/* Transfer kits: the hint is always shown, and the tick boxes pulse when asked for */
.pkhint{color:var(--ink2);font-weight:600}
@keyframes pkpulse{0%,100%{transform:scale(1);box-shadow:none}40%{transform:scale(1.18);box-shadow:0 0 0 6px color-mix(in srgb,var(--mod) 25%,transparent)}}
.pkpulse .ptick span{animation:pkpulse .9s ease-in-out 2;border-color:var(--mod)}
.pickbar{scroll-margin-top:120px}
@media (max-width:760px){.pickbar{scroll-margin-top:175px}}

/* ---- Picking, design-wise: one set of column widths for every packaging group ---- */
table.pkdes{table-layout:fixed;width:100%}
table.pkdes th:nth-child(1){width:170px}
table.pkdes th:nth-child(2){width:64px}
table.pkdes th:nth-child(3){width:130px}
table.pkdes th:nth-child(4){width:110px}
table.pkdes th:nth-child(5){width:96px}
table.pkdes td{vertical-align:middle;padding-top:7px;padding-bottom:7px}
.pkdes .pk-sku b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pkdes .pk-dn{display:block;font-size:11.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pkdes .pk-req b{font-size:15.5px;display:block;white-space:nowrap}
.pkdes .pk-req small{display:block;font-size:11px}
.pkdes .pk-st,.pkdes .pk-sh{white-space:nowrap}
.pkdes .pk-pb .chip{margin:2px 4px 2px 0}
table.pkmx{table-layout:fixed;width:100%}
table.pkmx th:nth-child(1){width:150px}
table.pkmx th:nth-child(2){width:56px}
table.pkmx th:last-child{width:80px}
table.pkmx th{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pkfilt>summary{list-style:none;cursor:pointer;margin-bottom:0}
.pkfilt>summary::-webkit-details-marker{display:none}
.pkfilt>summary h2::after{content:"▾";margin-left:6px;color:var(--ink3);font-size:13px}
.pkfilt:not([open])>summary{margin:0;padding:0;border:0}
.pkfilt[open]>summary{margin-bottom:13px}
@media (max-width:760px){
  .pkfilt{padding:10px 14px}
  .pkgrp{padding:10px 12px}
  .pkgrp>.chead{margin-bottom:4px;padding-bottom:8px}
  .pkgrp>.chead h2{font-size:14px;line-height:1.25}
  .pkgrp>.chead h2 .chip{font-size:11.5px}
}
.pkfilt[open]>summary h2::after{content:"▴"}
@media (max-width:760px){
  .pkkpi{grid-template-columns:1fr 1fr!important;gap:8px}
  .pkkpi .kpi{padding:8px 10px;min-height:0}
  .pkkpi .kpi .kv b{font-size:17px}
  .pkkpi .kpi .ki,.pkkpi .kpi>.ic{display:none}
  /* each SKU is one compact card: photo · code · Required / In stock / Short, customers under it */
  table.pkdes,table.pkdes tbody{display:block;width:100%}
  table.pkdes thead{display:none}
  table.pkdes tr[data-line]{display:grid;grid-template-columns:52px minmax(0,1.25fr) minmax(0,1fr) minmax(64px,auto);gap:2px 10px;align-items:start;
    padding:8px 2px;border-bottom:1px solid var(--line)}
  table.pkdes tr[data-line] td{display:block;padding:0;border:0;height:auto!important;min-width:0;background:transparent}
  table.pkdes .pk-ph{grid-column:1;grid-row:1/3}
  table.pkdes .pk-sku{grid-column:2/-1;grid-row:1}
  table.pkdes .pk-req{grid-column:2;grid-row:2;text-align:left}
  table.pkdes .pk-st{grid-column:3;grid-row:2;text-align:right}
  table.pkdes .pk-sh{grid-column:4;grid-row:2;text-align:right}
  table.pkdes td[data-l]::before{content:attr(data-l);display:block;font-size:10px;font-weight:650;color:var(--ink3);text-transform:uppercase;letter-spacing:.02em}
  table.pkdes .pk-req b{font-size:15px;white-space:normal}
  table.pkdes .pk-st,table.pkdes .pk-sh{white-space:normal}
  table.pkdes .pk-req small{display:none}
  table.pkdes .pk-pb{grid-column:1/-1;grid-row:3;padding-top:4px}
  table.pkdes .pk-pb:empty{display:none}
  .tw:has(table.pkdes){overflow:visible}
}

/* ---- COMBOS: the photo picker, the combo card, Rating → Combos ---- */
.cbhead{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:10px}
.cbno{display:flex;flex-direction:column}
.cbno small,.cbname small{font-size:11px;color:var(--ink3);font-weight:600}
.cbno b{font-size:20px;color:var(--mod)}
.cbname{display:flex;flex-direction:column;gap:2px;flex:1 1 220px;max-width:420px;margin:0}
.cbname input{height:38px;border:1.5px solid var(--line);border-radius:9px;padding:0 10px;background:var(--panel);color:var(--ink);font-size:15px}
.cbtray{position:sticky;top:calc(var(--top,0px) + 6px);z-index:5;display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:start;
  padding:10px;margin:0 0 10px;border:1.5px solid color-mix(in srgb,var(--mod) 30%,var(--line));border-radius:14px;background:var(--panel);
  box-shadow:0 6px 18px -12px rgba(0,0,0,.35)}
.cbprev{width:150px;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--sb);display:flex;flex-direction:column;gap:3px}
.cbprev .cbrow{display:flex;gap:3px;flex:1;min-height:0}
.cbprev .cbrow>span{flex:1;min-width:0;overflow:hidden;background:#fff;display:grid;place-items:center}
.cbprev img{width:100%;height:100%;object-fit:cover;display:block}
.cbprev .nophoto b{font-size:11px;color:var(--ink3)}
.cbempty{margin:auto;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--ink3);text-align:center;padding:8px}
.cbempty small{font-size:11px;line-height:1.25}
.cbside{min-width:0}
.cbtn{font-size:13px;color:var(--ink2);margin-bottom:6px}
.cbtn b{font-size:20px;color:var(--mod);margin-right:3px}
.cbtl{display:flex;flex-wrap:wrap;gap:6px;max-height:132px;overflow:auto}
.cbchip{display:inline-flex;align-items:center;gap:5px;padding:3px 4px 3px 3px;border:1.5px solid var(--line);border-radius:10px;background:var(--panel)}
.cbci{width:30px;height:30px;border-radius:7px;overflow:hidden;background:var(--sb);display:grid;place-items:center;flex:0 0 auto}
.cbci img{width:100%;height:100%;object-fit:cover}
.cbci .nophoto b{font-size:8px}
.cbchip b{font-family:inherit;font-variant-numeric:tabular-nums;font-size:12.5px}
.cbchip em{font-style:normal;font-weight:800;min-width:16px;text-align:center}
.cbm{width:26px;height:26px;border-radius:7px;border:1px solid var(--line);background:var(--sb);color:var(--ink);font-size:16px;line-height:1;padding:0;cursor:pointer}
.cbm:hover{border-color:var(--mod);color:var(--mod)}
.cbfind{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.cbfind .gsearch{flex:1 1 240px;max-width:420px}
.cbgal{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
.cbd{position:relative;display:flex;flex-direction:column;align-items:stretch;padding:0 0 6px;border:1.5px solid var(--line);border-radius:12px;
  background:var(--panel);cursor:pointer;text-align:left;overflow:hidden;font:inherit;color:inherit}
.cbd[hidden]{display:none}
.cbd:hover{border-color:color-mix(in srgb,var(--mod) 50%,var(--line))}
.cbd.on{border-color:var(--g);box-shadow:0 0 0 2px color-mix(in srgb,var(--g) 25%,transparent)}
.cbd .cbimg{aspect-ratio:1;background:var(--sb);display:grid;place-items:center;overflow:hidden}
.cbd .cbimg img{width:100%;height:100%;object-fit:cover}
.cbd b{font-family:inherit;font-variant-numeric:tabular-nums;font-size:13px;padding:5px 8px 0}
.cbd small{font-size:11px;color:var(--ink3);padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbcnt{position:absolute;top:6px;right:6px;min-width:30px;height:30px;padding:0 6px;border-radius:15px;background:var(--g);color:#fff;
  font-style:normal;font-weight:800;display:grid;place-items:center;font-size:14px}
.cbcnt[hidden]{display:none}
.cbx{position:absolute;right:7px;bottom:7px;padding:2px 8px;border-radius:9px;background:rgba(17,24,39,.78);color:#fff;font-size:12px;font-weight:700}
.cbv{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px;align-items:start}
.cbvimg .idph{--s:220px!important}
.cbvt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:20px}
.cbvn{font-weight:650;margin:2px 0}
.cbvk{display:flex;gap:8px 18px;flex-wrap:wrap;margin:10px 0}
.cbvk span{display:flex;flex-direction:column}
.cbvk small{font-size:11px;color:var(--ink3)}
.cbvk b{font-size:17px}
.cbwait{padding:8px 10px;border-radius:10px;background:var(--ab,#fff7ed);color:#92400e}
.cbparts{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.cblist .rl .pill{font-size:11px}
.cbrlist{display:flex;flex-direction:column;gap:10px}
.cbr{border:1.5px solid var(--line);border-radius:14px;padding:10px;background:var(--panel)}
.cbr.ok{border-color:color-mix(in srgb,var(--g) 35%,var(--line))}
.cbrh{display:flex;gap:10px;align-items:center}
.cbrh .cbrn{flex:1;min-width:0}
.cbrn{display:flex;flex-direction:column;min-width:0}
.cbrn small{font-size:11.5px;color:var(--ink3)}
.cbrparts{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px;margin:10px 0}
.cbri{display:flex;align-items:center;gap:8px;padding:4px;border:1px solid var(--line2,var(--line));border-radius:10px}
.cbri .cbrn{flex:1}
.cbrt{font-weight:750;font-size:13.5px;white-space:nowrap}
.cbrsum{display:flex;align-items:flex-end;gap:10px 14px;flex-wrap:wrap;padding-top:8px;border-top:1px dashed var(--line)}
.cbrsum>span{flex:1 1 220px}
.cbrsum label{display:flex;flex-direction:column;gap:2px;margin:0}
.cbrsum label small{font-size:11px;color:var(--ink3)}
.cbrsum input{width:120px;height:40px;font-size:18px;font-weight:750;text-align:right}
.cbrwhy{margin-top:6px}
.cbrwhy select,.cbrwhy input{margin:4px 6px 0 0;max-width:220px}
@media (max-width:760px){
  .cbtray{grid-template-columns:96px minmax(0,1fr);gap:8px;padding:8px;position:static}
  .cbprev{width:96px}
  .cbtl{max-height:92px}
  .cbgal{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .cbd small{display:none}
  .cbd b{font-size:12px;padding:4px 6px 0}
  .cbfind .cbhint{display:none}
  .cbv{grid-template-columns:120px minmax(0,1fr);gap:10px}
  .cbvimg .idph{--s:120px!important}
  .cbvt{font-size:17px}
  .cbvk b{font-size:15px}
  .cbrparts{grid-template-columns:1fr}
}
.cbgo #cbmn{font-style:normal;opacity:.85}

/* ---- Orders: loose combos and their pipeline watch ---- */
.ocpanel{margin-top:12px}
.ocpanel>summary{list-style:none;cursor:pointer;margin-bottom:0}
.ocpanel>summary::-webkit-details-marker{display:none}
.ocpanel:not([open])>summary{margin:0;padding:0;border:0}
.ocpanel[open]>summary{margin-bottom:10px}
.ocpanel>summary h2::after{content:"▾";margin-left:6px;color:var(--ink3);font-size:13px}
.ocl{margin:0 0 6px}
.ocexg{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));margin-bottom:10px}
.occ{display:flex;flex-direction:column;padding:0 0 6px;border:1.5px solid var(--line);border-radius:12px;background:var(--panel);
  cursor:pointer;text-align:left;overflow:hidden;font:inherit;color:inherit}
.occ .cbimg{aspect-ratio:1;background:var(--sb);display:grid;place-items:center;overflow:hidden}
.occ .cbimg img{width:100%;height:100%;object-fit:cover}
.occ b{font-family:inherit;font-variant-numeric:tabular-nums;font-size:12.5px;padding:5px 8px 0}
.occ small{font-size:10.5px;color:var(--ink3);padding:0 8px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.occ.on{border-color:var(--g);box-shadow:0 0 0 2px color-mix(in srgb,var(--g) 25%,transparent)}
.ocnew>summary{cursor:pointer;color:var(--mod);font-weight:650;margin:4px 0 8px}
.ocadd{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.ocadd label{display:flex;flex-direction:column;gap:2px;margin:0}
.ocadd label small{font-size:11px;color:var(--ink3)}
.ocadd input{width:150px;height:40px;font-size:18px;font-weight:750;text-align:right;border:1.5px solid var(--line);border-radius:9px;padding:0 10px;background:var(--panel);color:var(--ink)}
.ocline{display:flex;flex-direction:column;gap:8px}
.oclh{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.oclt{display:flex;flex-direction:column;flex:1 1 200px;min-width:0}
.oclt small{font-size:12px;color:var(--ink3)}
.ocparts{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.ocpart{display:flex;gap:10px;align-items:center;padding:8px;border:1.5px solid var(--line);border-radius:12px;background:var(--panel)}
.ocpart.ocshort,.ocpart.oclate{border-color:color-mix(in srgb,var(--r) 45%,var(--line))}
.ocpart.ocplanned{border-color:color-mix(in srgb,var(--a) 50%,var(--line))}
.ocpart.ocready,.ocpart.occoming{border-color:color-mix(in srgb,var(--g) 40%,var(--line))}
.ocpb{flex:1;min-width:0}
.ocpt{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ocneed{margin-left:auto;font-size:13px}
.ocneed b{font-size:16px}
.ocnums{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-top:4px}
.ocn{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.ocn small{font-size:10px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ocn b{font-size:13.5px}
.ocn.zero b{color:var(--ink3);font-weight:500}
.ocn.g b{color:var(--g)}
.ocn.a b{color:#b45309}
.ocn.r b{color:var(--r)}
@media (max-width:760px){
  .ocparts{grid-template-columns:1fr}
  .ocexg{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .occ small{display:none}
}
/* Fast order entry on a phone: the zones never wider than the screen */
.fastzones>*{min-width:0}
@media (max-width:760px){
  .fz-left>.row{display:grid!important;grid-template-columns:1fr 1fr auto;gap:8px!important;align-items:end}
  .fz-left>.row>.f{min-width:0;margin:0}
  .fz-left>.row>.f.big{grid-column:1/-1}
  .fz-left>.row input,.fz-left>.row select{width:100%;min-width:0;max-width:none}
  .fz-left .tw{overflow-x:auto}
}
.oclt1{font-size:14px}
.ocbanner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;margin:0 0 12px;border-radius:12px;text-decoration:none;
  color:var(--ink);background:color-mix(in srgb,var(--g) 8%,var(--panel));border:1.5px solid color-mix(in srgb,var(--g) 30%,var(--line))}
.ocbanner.short{background:color-mix(in srgb,var(--r) 7%,var(--panel));border-color:color-mix(in srgb,var(--r) 35%,var(--line))}
.ocbanner em{margin-left:auto;font-style:normal;font-weight:700;color:var(--mod)}

/* ---- Picking: several customers, group by, photo detail ---- */
.pkparty>summary{list-style:none;cursor:pointer;margin-bottom:0}
.pkparty>summary::-webkit-details-marker{display:none}
.pkparty:not([open])>summary{margin:0;padding:0;border:0}
.pkparty[open]>summary{margin-bottom:10px}
.pkparty>summary h2::after{content:"▾";margin-left:6px;color:var(--ink3);font-size:13px}
.pkptools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.pkptools .gsearch{flex:1 1 220px;max-width:360px}
.pkpgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px;max-height:340px;overflow:auto;padding:2px}
.pkp{display:flex;align-items:center;gap:8px;padding:6px 8px;margin:0;border:1.5px solid var(--line);border-radius:10px;cursor:pointer;background:var(--panel)}
.pkp[hidden]{display:none}
.pkp.on{border-color:var(--g);background:color-mix(in srgb,var(--g) 7%,var(--panel))}
.pkp .chk{height:auto}
.pkpn{display:flex;flex-direction:column;min-width:0;flex:1}
.pkpn b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pkpn small{font-size:11px;color:var(--ink3)}
.pkpq{display:flex;flex-direction:column;align-items:flex-end}
.pkpq b{font-size:15px}
.pkpq small{font-size:10.5px;color:var(--ink3)}
.pkpu{font-size:10.5px!important}
.pkparty .btnrow em{font-style:normal;opacity:.85;margin-left:2px}
.pkby{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.pkby .chip{text-decoration:none;cursor:pointer;font-size:12.5px;padding:5px 11px}
.pkby .chip.on{background:var(--mod);color:#fff;border-color:var(--mod)}
.pkpic{padding:0;border:0;background:none;cursor:zoom-in;display:inline-flex}
.pkview{position:fixed;inset:0;z-index:90;background:rgba(15,23,42,.6);display:grid;place-items:center;padding:16px}
.pkview[hidden]{display:none}
.pkvbox{background:var(--panel);border-radius:16px;padding:12px;max-width:760px;width:100%;max-height:92vh;overflow:auto}
.pkvh{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:16px}
.pkvg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pkvg figure{margin:0;display:flex;flex-direction:column;gap:4px}
.pkvg img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;background:var(--sb)}
.pkvg .nophoto{width:100%;aspect-ratio:1;display:grid;place-items:center;border:1px dashed var(--line);border-radius:10px;color:var(--ink3);font-size:12px}
.pkvg figcaption{font-size:12px;font-weight:650;color:var(--ink2);text-align:center}
@media (max-width:760px){
  .pkpgrid{grid-template-columns:1fr;max-height:300px}
  .pkvg{grid-template-columns:1fr 1fr}
}

/* ============ FAST ORDER ENTRY — Order details · Items · order value bar ============ */
.ofast .card{margin-bottom:14px}
.ofast .ogrid{display:grid;gap:14px 16px;align-items:end;grid-template-columns:minmax(0,2.2fr) minmax(150px,1fr) minmax(170px,1fr)}
.ofast .ogrid+.ogrid{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.ofast .ogrid2{grid-template-columns:minmax(150px,1fr) minmax(260px,1.6fr) 118px 118px 86px}
.ofast .ogrid3{grid-template-columns:1fr}
.ofast .ofld{display:flex;flex-direction:column;gap:6px;min-width:0}
.ofast .ofld>label,.ofast .ofld>.flabel{font-size:12px;font-weight:650;color:var(--ink2);letter-spacing:.01em;display:flex;align-items:baseline;gap:5px;margin:0;white-space:nowrap}
.ofast .ofld>label small{font-weight:500;color:var(--ink3);font-size:11px}
.ofast .ofld>label .req{color:var(--r);font-weight:700}
.ofast .ofld :is(input:not([type=radio]):not([type=checkbox]),select){width:100%;height:42px;padding:0 12px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel);color:var(--ink);font:inherit;font-size:15px;outline:0;transition:.2s var(--ease)}
.ofast .ofld :is(input,select):focus{border-color:var(--mod);box-shadow:0 0 0 4px color-mix(in srgb,var(--mod) 14%,transparent)}
.ofast .ofld input[type=number]{font-variant-numeric:tabular-nums}
.ofast .ofld.osm input{text-align:center}
.ofast .ofld .pickwrap{width:100%}
/* segmented choice: one tap, the chosen one lifts */
.ofast .oseg{display:flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:11px;background:var(--sb);min-height:42px}
.ofast .oseg label{position:relative;flex:1 1 0;display:flex;margin:0;cursor:pointer;min-width:0}
.ofast .oseg input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.ofast .oseg span{flex:1;display:flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:8px;font-size:14px;font-weight:600;
  color:var(--ink2);white-space:nowrap;transition:.18s var(--ease)}
.ofast .oseg label:hover span{color:var(--ink)}
.ofast .oseg input:checked+span{background:var(--panel);color:var(--mod);box-shadow:0 1px 2px rgba(16,24,40,.08),0 0 0 1px color-mix(in srgb,var(--mod) 30%,transparent)}
.ofast .oseg input:focus-visible+span{outline:2px solid var(--mod);outline-offset:1px}
.ofast .ourg input[value=urgent]:checked+span{background:var(--r);color:#fff;box-shadow:none}
.ofast .ostrat{height:42px;align-self:flex-start}
.ofast .oover{margin-top:14px}
.ofast .oover summary{cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.ofast .oover .ogrid{margin-top:10px;grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
/* items: packaging · qty · design number on one line */
.ofast .oitems{display:grid;gap:12px 14px;align-items:end;grid-template-columns:minmax(0,1.6fr) 110px minmax(0,1fr) auto}
.ofast .oitems .onum input{font-size:18px;font-weight:700;letter-spacing:.06em;height:46px;border-color:color-mix(in srgb,var(--mod) 45%,var(--line))}
.ofast .oitems .ofld :is(select,input){height:46px}
.ofast .oitems .ores{height:46px}
.ofast .oitems+p{margin:8px 0 2px}
.ofast .olines{margin-top:12px}
.ofast .oempty{display:flex;align-items:center;gap:6px;justify-content:center;padding:18px;margin:6px 0 4px;border:1px dashed var(--line);border-radius:var(--rad2);color:var(--ink3)}
.ofast .oempty[hidden]{display:none}
.ofast .ocpanel{margin-top:12px}
/* order value bar — floats at the bottom of the screen while typing */
.ofast .obar{margin:4px 0 0;padding:10px 12px 10px 18px;border:1px solid var(--line);border-radius:var(--rad);box-shadow:var(--sh2);gap:14px;flex-wrap:nowrap}
.ofast .otot{display:flex;align-items:baseline;gap:10px;margin-right:auto;min-width:0}
.ofast .otot small{color:var(--ink3);font-size:12px;font-weight:600;white-space:nowrap}
.ofast .otot b{font-size:22px;font-weight:750;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.ofast .obar [data-draftnote]:empty{display:none}
.ofast .obar .btn{min-width:170px;justify-content:center}
@media (max-width:1100px){
  .ofast .ogrid2{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) 110px 110px 80px}
}
@media (max-width:900px){
  .ofast .ogrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ofast .ogrid .ocust{grid-column:1/-1}
  .ofast .ogrid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 72px}
  .ofast .ogrid2 .ofld:nth-child(1),.ofast .ogrid2 .ofld:nth-child(2){grid-column:1/-1}
  .ofast .ogrid3{grid-template-columns:1fr}
  .ofast .oitems{grid-template-columns:minmax(0,1fr) 96px}
  .ofast .oitems .ofld:first-child{grid-column:1/-1}
  .ofast .oitems .ores{grid-column:auto}
  .ofast .oover .ogrid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .ofast .card{margin-bottom:10px}
  .ofast .ogrid{gap:12px}
  .ofast .ogrid+.ogrid{margin-top:12px;padding-top:12px}
  .ofast .oseg span{padding:6px 6px;font-size:13.5px}
  .ofast .oitems{grid-template-columns:84px minmax(0,1fr)}
  .ofast .oitems .ores{grid-column:1/-1;justify-self:start;height:32px}
  .ofast .olines thead{display:none}
  .ofast .olines,.ofast .olines tbody{display:block;width:100%}
  .ofast .olines tr[data-line]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 34px;gap:6px 8px;
    padding:10px 2px;border-bottom:1px solid var(--line);height:auto!important;align-items:end}
  .ofast .olines tr[data-line] td{display:block;padding:0;border:0;min-width:0;height:auto!important;text-align:left}
  .ofast .olines tr[data-line] td:nth-child(1){grid-column:1/4;grid-row:1}
  .ofast .olines tr[data-line] td:nth-child(6){grid-column:4;grid-row:1;align-self:start;justify-self:end}
  .ofast .olines tr[data-line] td:nth-child(2){grid-column:1;grid-row:2}
  .ofast .olines tr[data-line] td:nth-child(3){grid-column:2;grid-row:2}
  .ofast .olines tr[data-line] td:nth-child(4){grid-column:3/5;grid-row:2;text-align:right;font-weight:700;font-size:16px;padding-bottom:9px}
  .ofast .olines tr[data-line] td:nth-child(5){grid-column:1/-1;grid-row:3;font-size:12px}
  .ofast .olines tr[data-line] td:nth-child(n+2):nth-child(-n+5)::before{display:block;font-size:10.5px;font-weight:650;color:var(--ink3);
    text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
  .ofast .olines tr[data-line] td:nth-child(2)::before{content:"Qty"}
  .ofast .olines tr[data-line] td:nth-child(3)::before{content:"Rate / unit"}
  .ofast .olines tr[data-line] td:nth-child(4)::before{content:"Amount"}
  .ofast .olines tr[data-line] td:nth-child(5):nth-child(5)::before{content:"Free stock";display:inline;margin-right:6px}
  .ofast .olines tr[data-line] td:nth-child(2),.ofast .olines tr[data-line] td:nth-child(3){white-space:nowrap}
  .ofast .olines tr[data-line] td input{width:calc(100% - 40px)!important;min-width:0;height:38px;padding:0 6px}
  .ofast .olines tr[data-line] td .ubadge,.ofast .olines tr[data-line] td [class*=unit]{vertical-align:middle}
  .ofast .osm input::placeholder{font-size:13px}
  .ofast .obar{position:sticky;bottom:8px;padding:8px 8px 8px 14px;gap:8px}
  .ofast .otot{flex-direction:column;gap:0}
  .ofast .otot b{font-size:19px}
  .ofast .obar .btn{min-width:0;flex:0 0 auto}
  .ofast .obar [data-draftnote]{display:none}
}

/* ============ DESIGN NAME FROM TWO ENTRIES — HA + 4 → HA041B ============ */
.mnbuild{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;min-width:0}
.mnbuild .mnp{display:flex;flex-direction:column;gap:4px;margin:0;min-width:0}
.mnbuild .mnp small{font-size:11px;font-weight:650;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em}
.mnbuild .mnp input{height:48px;padding:0 10px;border:1.5px solid var(--line);border-radius:11px;background:var(--panel);color:var(--ink);
  font:inherit;font-size:22px;font-weight:750;text-align:center;letter-spacing:.12em;outline:0;transition:.2s var(--ease)}
.mnbuild .mnp input:focus{border-color:var(--mod);box-shadow:0 0 0 4px color-mix(in srgb,var(--mod) 14%,transparent)}
.mnbuild .mnp input::placeholder{color:var(--ink3);opacity:.55;font-weight:500;font-style:normal}
.mnbuild .mncc input{width:92px;text-transform:uppercase}
.mnbuild .mndd input{width:78px}
.mnbuild .mneq{align-self:center;margin-top:18px;color:var(--ink3);font-size:20px}
.mnbuild .mnout{display:flex;height:48px;border-radius:11px;overflow:hidden;border:1.5px dashed var(--line);background:var(--sb);
  font-family:inherit;font-variant-numeric:tabular-nums;font-size:24px;font-weight:800;letter-spacing:.06em}
.mnbuild .mnout span{display:flex;align-items:center;padding:0 8px;color:var(--ink)}
.mnbuild .mnout span+span{border-left:1px solid var(--line)}
.mnbuild .mnout span.ph{color:var(--ink3);opacity:.5;font-weight:600}
.mnbuild .mnout .mnsys{background:color-mix(in srgb,var(--mod) 9%,transparent);color:var(--mod)}
.mnbuild.done .mnout{border-style:solid;border-color:color-mix(in srgb,var(--g) 55%,var(--line));background:color-mix(in srgb,var(--g) 6%,var(--panel))}
@media (max-width:640px){
  .mnbuild{gap:8px;flex-wrap:nowrap}
  .mnbuild .mnp{flex:0 0 auto}
  .mnbuild .mncc input{width:68px;letter-spacing:.08em}
  .mnbuild .mndd input{width:58px}
  .mnbuild .mneq{display:none}
  .mnbuild .mnout{flex:1 1 auto;min-width:0;justify-content:center;font-size:20px}
  .mnbuild .mnout span{padding:0 5px}
}
.mnbuild .mncc input::-webkit-calendar-picker-indicator{display:none!important;opacity:0}
.mnbuild .mncc input::-webkit-list-button{display:none!important}

/* ============ COMBO ORDERS — build a combo of anything, several customers in one sitting ============ */
.pill.pb,.pb{background:color-mix(in srgb,var(--mod) 13%,transparent);color:var(--mod)}
.ocmb .cxhead{grid-template-columns:minmax(150px,1fr) minmax(170px,1fr) minmax(0,2fr)}
.ocmb .cxwho{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ocmb .cxtray{display:grid;grid-template-columns:200px minmax(0,1fr);gap:14px;margin:14px 0 12px;padding:12px;border:1px solid var(--line);
  border-radius:var(--rad2);background:var(--sb)}
.ocmb .cxprev{aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--panel);display:flex;flex-direction:column;gap:3px;border:1px solid var(--line)}
.ocmb .cxprev .cbempty{margin:auto;padding:14px;text-align:center;color:var(--ink3);font-size:12.5px}
.ocmb .cxprev .cbrow{flex:1;display:flex;gap:3px;min-height:0}
.ocmb .cxprev .cbrow>span{flex:1;min-width:0;display:grid;place-items:center;background:var(--sb);overflow:hidden}
.ocmb .cxprev img{width:100%;height:100%;object-fit:cover}
.ocmb .cxprev .nophoto b{font-family:inherit;font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink3)}
.ocmb .cxside{min-width:0;display:flex;flex-direction:column;gap:8px}
.ocmb .cxmatch{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:24px}
.ocmb .cxmatch small{color:var(--ink3)}
.ocmb .cxlist{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow:auto}
.ocmb .cxrow{display:grid;grid-template-columns:38px minmax(0,1fr) auto 82px;gap:10px;align-items:center;padding:5px 8px 5px 5px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.ocmb .cxri{width:38px;height:38px;border-radius:8px;overflow:hidden;background:var(--sb);display:grid;place-items:center}
.ocmb .cxri img{width:100%;height:100%;object-fit:cover}
.ocmb .cxri .nophoto b{font-size:9px}
.ocmb .cxrn{min-width:0;display:flex;flex-direction:column}
.ocmb .cxrn b{font-family:inherit;font-variant-numeric:tabular-nums;font-size:13.5px}
.ocmb .cxrn small{font-size:11.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ocmb .cxq{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.ocmb .cxq .cbm{width:30px;height:30px;border:0;background:var(--sb);font:inherit;font-size:17px;font-weight:700;cursor:pointer;color:var(--ink)}
.ocmb .cxq em{min-width:30px;text-align:center;font-style:normal;font-weight:750;font-variant-numeric:tabular-nums}
.ocmb .cxrr{text-align:right;font-weight:650;font-variant-numeric:tabular-nums;color:var(--ink2)}
.cxty,.cxt.chip{display:inline-block;padding:0 6px;border-radius:6px;font-size:10.5px;font-weight:700;letter-spacing:.02em;margin-right:3px}
.cxty-d,.cxt-d{background:color-mix(in srgb,#e11d48 12%,transparent);color:#be123c}
.cxty-p,.cxt-p{background:color-mix(in srgb,#0891b2 13%,transparent);color:#0e7490}
.cxty-r,.cxt-r{background:color-mix(in srgb,#0369a1 13%,transparent);color:#0369a1}
.cxty-s,.cxt-s{background:color-mix(in srgb,#7c3aed 13%,transparent);color:#6d28d9}
.ocmb .cxpick{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ocmb .cxpick .gsearch{flex:1 1 220px;max-width:360px}
.ocmb .cxtabs{display:flex;gap:4px;padding:3px;border:1px solid var(--line);border-radius:11px;background:var(--sb);overflow-x:auto;max-width:100%}
.ocmb .cxtab{position:relative;border:0;background:transparent;padding:7px 12px;border-radius:8px;font:inherit;font-size:13.5px;font-weight:650;color:var(--ink2);cursor:pointer;white-space:nowrap}
.ocmb .cxtab small{color:var(--ink3);font-weight:500;margin-left:2px}
.ocmb .cxtab.on{background:var(--panel);color:var(--mod);box-shadow:0 1px 2px rgba(16,24,40,.08),0 0 0 1px color-mix(in srgb,var(--mod) 30%,transparent)}
.ocmb .cxtab i{display:inline-grid;place-items:center;vertical-align:1px;margin-left:5px;min-width:18px;height:18px;border-radius:9px;background:var(--g);color:#fff;font-style:normal;font-size:10.5px;font-weight:800;padding:0 5px}
.ocmb .cxgal{max-height:440px;overflow:auto;padding:2px}
.ocmb .cxt .cxtr{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:3px 8px 0;font-size:12px;font-weight:650;font-variant-numeric:tabular-nums}
.ocmb .cxt .cxtr em{font-weight:500;color:var(--ink3)}
.ocmb .cxst{font-size:11px;font-weight:600;color:var(--g)}
.ocmb .cxst::before{content:"● "}
.ocmb .cxst.z{color:var(--ink3)}
.ocmb .cxmore{margin:6px 0 0}
.ocmb .cxadd{display:grid;grid-template-columns:150px 190px 150px minmax(0,1fr) auto;gap:12px 14px;align-items:end;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.ocmb .cxsugv,.ocmb .cxamtv{height:42px;display:flex;align-items:center;gap:6px;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink2)}
.ocmb .cxsugv small{font-size:11.5px;font-weight:500;color:var(--ink3)}
.ocmb .cxamtv{color:var(--ink)}
.ocmb #cx_add{height:42px}
.ocmb .cxgrp{border:1px solid var(--line);border-radius:var(--rad2);overflow:hidden;margin-bottom:10px}
.ocmb .cxgh{padding:8px 12px;background:var(--sb);font-weight:700;border-bottom:1px solid var(--line)}
.ocmb .cxln{display:grid;grid-template-columns:44px minmax(0,1fr) 90px 100px 100px 34px;gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line2)}
.ocmb .cxli{width:44px;height:44px;border-radius:9px;overflow:hidden;background:var(--sb);display:grid;place-items:center}
.ocmb .cxli img{width:100%;height:100%;object-fit:cover}
.ocmb .cxlt{min-width:0;display:flex;flex-direction:column;gap:2px}
.ocmb .cxlt1{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ocmb .cxlt small{font-size:12px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ocmb .cxlq,.ocmb .cxlr{display:flex;flex-direction:column;align-items:flex-end;font-variant-numeric:tabular-nums}
.ocmb .cxlq small,.ocmb .cxlr small{font-size:11px;color:var(--ink3)}
.ocmb .cxla{text-align:right;font-weight:750;font-variant-numeric:tabular-nums}
.ocmb .cxgt{display:flex;justify-content:flex-end;align-items:baseline;gap:8px;padding:7px 12px;font-variant-numeric:tabular-nums}
.ocmb .cxgt small{color:var(--ink3)}
.cxalert{margin-bottom:14px}
.cxalert.short{border-color:color-mix(in srgb,var(--r) 35%,var(--line))}
.cxalert summary{cursor:pointer}
.cxalert h2{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cxord{margin-top:4px}
@media (max-width:900px){
  .ocmb .cxhead{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ocmb .cxhead .ofld:last-child{grid-column:1/-1}
  .ocmb .cxadd{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ocmb .cxadd #cx_add{grid-column:1/-1}
}
@media (max-width:560px){
  .ocmb .cxwho{grid-template-columns:1fr}
  .ocmb .cxtray{grid-template-columns:104px minmax(0,1fr);gap:10px;padding:8px;align-items:start}
  .ocmb .cxside{display:contents}
  .ocmb .cxprev{grid-column:1;grid-row:1}
  .ocmb .cxmatch{grid-column:2;grid-row:1;align-self:center;flex-direction:column;align-items:flex-start;gap:4px}
  .ocmb .cxlist{grid-column:1/-1;grid-row:2;max-height:none}
  .ocmb .cxtabs{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .ocmb .cxtab{text-align:center;padding:8px 6px}
  .ocmb .cxpick .gsearch{flex-basis:100%;max-width:none}
  .ocmb .cxrow{grid-template-columns:34px minmax(0,1fr) auto;gap:8px}
  .ocmb .cxri{width:34px;height:34px}
  .ocmb .cxrr{display:none}
  .ocmb .cxgal{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-height:380px}
  .ocmb .cxt .cxtr{flex-direction:column;align-items:flex-start;gap:0;padding:2px 6px 0}
  .ocmb .cxln{grid-template-columns:40px minmax(0,1fr) auto 28px;gap:6px 8px;padding:8px}
  .ocmb .cxli{width:40px;height:40px;grid-row:1/3}
  .ocmb .cxlt{grid-column:2/4}
  .ocmb .cxrm{grid-column:4;grid-row:1}
  .ocmb .cxlq{grid-column:2;grid-row:2;flex-direction:row;gap:4px;align-items:baseline}
  .ocmb .cxlr{grid-column:3;grid-row:2;flex-direction:row;gap:4px;align-items:baseline}
  .ocmb .cxlr small{display:none}
  .ocmb .cxla{grid-column:3/5;grid-row:3;font-size:15px}
}

/* ============ FAST ORDER — order details in two lines, labels inside the boxes ============ */
.ofast .odet{padding:12px 14px}
.ofast .orow{display:grid;gap:10px;align-items:center}
.ofast .orow+.orow{margin-top:10px}
.ofast .orow1{grid-template-columns:minmax(0,1fr) 250px 270px}
.ofast .orow2{grid-template-columns:auto auto 128px 150px auto minmax(140px,1fr) 42px}
.ofast .oin{position:relative;display:flex;align-items:stretch;height:42px;min-width:0;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);transition:.2s var(--ease)}
.ofast .oin:focus-within{border-color:var(--mod);box-shadow:0 0 0 4px color-mix(in srgb,var(--mod) 14%,transparent)}
.ofast .oinl{display:flex;align-items:center;gap:3px;padding:0 10px;margin:0;border-right:1px solid var(--line);border-radius:9px 0 0 9px;
  background:var(--sb);font-size:12px;font-weight:650;color:var(--ink2);white-space:nowrap;cursor:text}
.ofast .oinl .req{color:var(--r)}
.ofast .oin>input,.ofast .oin .pickwrap{flex:1 1 auto;min-width:0}
.ofast .oin input:not([type=checkbox]),.ofast .oin .pickin{width:100%;height:100%;border:0!important;box-shadow:none!important;background:transparent;
  padding:0 10px;font:inherit;font-size:15px;color:var(--ink);outline:0;border-radius:0 9px 9px 0}
.ofast .oin .pickwrap{position:relative;display:block;height:100%}
.ofast .onum4 input,.ofast .onum3 input{text-align:center;font-variant-numeric:tabular-nums;font-weight:650}
.ofast .orow .oseg{min-height:42px;height:42px}
.ofast .orow .oseg span{padding:0 12px}
.ofast .oword{font-style:normal;margin-left:.28em}
.ofast .oinl .oword{margin-left:0}
.ofast .ostrat{cursor:pointer}
.ofast .osw{position:relative;display:flex;align-items:center;padding:0 10px}
.ofast .osw input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.ofast .osw i{width:40px;height:22px;border-radius:999px;background:var(--line);position:relative;transition:.25s var(--ease)}
.ofast .osw i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);transition:.25s var(--ease)}
.ofast .osw input:checked+i{background:var(--g)}
.ofast .osw input:checked+i::after{transform:translateX(18px)}
.ofast .osw input:focus-visible+i{outline:2px solid var(--mod);outline-offset:2px}
.ofast .oover{position:relative;margin:0}
.ofast .oover summary{list-style:none;display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);color:var(--ink3);cursor:pointer}
.ofast .oover summary::-webkit-details-marker{display:none}
.ofast .oover[open] summary{color:var(--mod);border-color:var(--mod)}
.ofast .oovp{position:absolute;right:0;top:calc(100% + 6px);z-index:30;width:min(340px,86vw);display:flex;flex-direction:column;gap:8px;padding:12px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh2)}
@media (max-width:1180px){
  .ofast .orow2{grid-template-columns:auto auto 120px 140px auto 42px}
  .ofast .orow2 .onote{grid-column:1/-1;grid-row:2}
}
@media (max-width:900px){
  .ofast .orow1{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ofast .orow1 .ocust{grid-column:1/-1}
  .ofast .orow2{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}
  .ofast .orow2 .onote{grid-column:auto;grid-row:auto}
  .ofast .orow2 .onote,.ofast .orow2 .ozone{grid-column:1/-1}
}
@media (max-width:560px){
  .ofast .odet{padding:10px}
  .ofast .orow{gap:8px}
  .ofast .orow+.orow{margin-top:8px}
  .ofast .orow1{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
  .ofast .orow1 .odl .oinl{padding:0 7px}
  .ofast .orow1 .odl input{padding:0 4px;font-size:14px}
  .ofast .ourg .oword,.ofast .onum3 .oword{display:none}
  .ofast .orow .oseg span{padding:0 6px;font-size:13px}
  /* phone: three short lines — Cash/Credit + zone · Adj % + transit · strategic + note + override */
  .ofast .orow2{grid-template-columns:106px minmax(0,1fr) minmax(0,1fr) 42px;
    grid-template-areas:"pay zone zone zone" "adj adj tr tr" "st note note ov"}
  .ofast .orow2 .opay{grid-area:pay}
  .ofast .orow2 .ozone{grid-area:zone}
  .ofast .orow2 .onum4{grid-area:adj}
  .ofast .orow2 .onum3{grid-area:tr}
  .ofast .orow2 .ostrat{grid-area:st}
  .ofast .orow2 .onote{grid-area:note}
  .ofast .orow2 .oover{grid-area:ov}
  .ofast .orow2 .ozone span{padding:0 2px;font-size:12px;letter-spacing:-.01em}
  .ofast .orow2 .opay span{padding:0 3px;font-size:12.5px}
  .ofast .ostrat .oinl{padding:0 7px}
  .ofast .ostrat .osw{padding:0 7px}
  .ofast .oinl{padding:0 8px;font-size:11.5px}
}

/* ============ GENERATE INVOICE — one-line header, billing in three short lines ============ */
.invsum{display:inline-flex;align-items:center;gap:6px 14px;flex-wrap:wrap;padding:6px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);font-size:13.5px;color:var(--ink2)}
.invsum>b{color:var(--ink);font-size:14.5px}
.invsum b{font-variant-numeric:tabular-nums}
.invsum span b{color:var(--ink)}
.invsum .invnow b{color:#0f766e}
.invfast{padding:12px 14px}
.invfast .invrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.invfast .invrow+.invrow{margin-top:10px}
.invfast .oin select{flex:1 1 auto;min-width:0;height:100%;border:0;background:transparent;padding:0 8px;font:inherit;font-size:14.5px;color:var(--ink);
  outline:0;border-radius:0 9px 9px 0}
.invfast .ibs{width:150px}
.invfast .ibm{width:215px}
.invfast .ibl{width:300px}
.invfast .ibd{width:215px}
.invfast .ibcour{width:245px}
.invfast .onote{flex:1 1 260px}
.invfast .ibnl .oinl{display:none}
.invfast .ibnl select{border-radius:9px}
.invfast .invmode{min-height:42px;height:42px}
.invfast .osb{flex:1 1 0;border:0;background:transparent;padding:0;cursor:pointer;font:inherit;display:flex}
.invfast .osb span{flex:1;display:flex;align-items:center;justify-content:center;padding:0 16px;border-radius:8px;font-size:14px;font-weight:650;color:var(--ink2);white-space:nowrap}
.invfast .osb:hover span{color:var(--ink)}
.invfast .osb.on span{background:var(--panel);color:var(--mod);box-shadow:0 1px 2px rgba(16,24,40,.08),0 0 0 1px color-mix(in srgb,var(--mod) 30%,transparent)}
.invfast .osb.on.m-full span{color:#15803d}
.invfast .osb.on.m-factor span{color:#1d4ed8}
.invfast .osb.on.m-target span{color:#6d28d9}
.invstrip{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;padding:8px 12px;border-radius:10px;background:var(--sb);font-size:13px;color:var(--ink2)}
.invstrip b{color:var(--ink);font-variant-numeric:tabular-nums}
.invstrip .ok b{color:var(--g)}
.invstrip .neg b{color:var(--r)}
@media (max-width:560px){
  .invsum{width:100%;justify-content:space-between;padding:6px 10px;font-size:12.5px}
  .invsum>b{flex-basis:100%}
  .invfast{padding:10px}
  .invfast .invrow{gap:8px}
  .invfast .invrow+.invrow{margin-top:8px}
  .invfast .invmode{flex:1 1 100%}
  .invfast .osb span{padding:0 6px;font-size:13.5px}
  .invfast .ibs,.invfast .ibm,.invfast .ibd{width:calc(50% - 4px)}
  .invfast .ibd{width:calc(58% - 4px)}
  .invfast .ibd+.ibs{width:calc(42% - 4px)}
  .invfast .ibd input{padding:0 4px;font-size:14px}
  .invfast .ibl,.invfast .onote,.invfast .ibcour{width:100%;flex-basis:100%}
  .invfast .ibcour{order:2}
  .invfast .oinl{padding:0 8px;font-size:11.5px}
}

/* ============ COMPACT FIGURE TILES — everywhere ============
   The figure and what it means read together, on one line: a smaller number,
   a label in readable ink right beside it, the note under the label, a small
   icon. A tile is about 46px tall instead of 72px, and the eye no longer has
   to hunt for what a big number is about. */
.kpi{gap:9px;padding:7px 11px 7px 8px;min-height:46px;box-shadow:none;animation:none}
a.kpi:hover{transform:none;box-shadow:var(--sh)}
.kpi .ki{width:30px;height:30px;border-radius:8px;align-self:center}
.kpi .ki svg{width:17px;height:17px}
a.kpi:hover .ki{transform:none}
.kpi .kv{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:9px;row-gap:1px;align-items:center;line-height:1.22;flex:1 1 auto}
.kpi .kv b{grid-row:1 / span 2;font-size:19px;font-weight:800;color:var(--c,var(--ink));letter-spacing:-.01em;white-space:nowrap}
.kpi .kv small{grid-column:2;font-size:13px;font-weight:600;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kpi .kv em{grid-column:2;font-size:11.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .kv b:only-child{grid-row:auto}
.kpi .kv small:last-child{grid-row:1 / span 2}
.mqtoday{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 12px}
.mqtoday .mqtl{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em;margin-right:6px}
.mqtoday .ki{width:30px;height:30px;border-radius:8px}
.mqtoday>b{font-size:20px;font-variant-numeric:tabular-nums}
.mqtoday .mqtx{font-size:14.5px;font-weight:600;color:var(--ink2);flex:1 1 auto;min-width:0}
.mqtoday .btn{margin-left:auto}
.grid:has(>.kpi){gap:8px}
.cbox small{font-size:11.5px;font-weight:650;text-transform:none;letter-spacing:0;color:var(--ink2)}
.cbox em{font-size:11.5px}
@media (max-width:560px){
  .kpi{padding:6px 8px 6px 6px;gap:7px;min-height:44px}
  .kpi .ki{width:26px;height:26px}
  .kpi .ki svg{width:15px;height:15px}
  .kpi .kv{column-gap:7px}
  .kpi .kv b{font-size:16.5px}
  .kpi .kv small{font-size:12px}
  .kpi .kv em{font-size:10.5px}
  /* up to four figures: two per row, no icon, so the label has the room;
     a long list of queues: one per row, a slim line each, nothing cut off */
  .grid:has(>.kpi){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px}
  .grid:has(>.kpi):not(:has(>.kpi:nth-child(5))) .kpi .ki{display:none}
  .grid:has(>.kpi:nth-child(5)){grid-template-columns:minmax(0,1fr)!important;gap:5px}
  .grid:has(>.kpi:nth-child(5)) .kpi{min-height:40px;padding:5px 10px 5px 6px}
  .grid:has(>.kpi:nth-child(5)) .kpi .kv small{-webkit-line-clamp:1}
  .mqtoday{padding:8px 10px;gap:8px;flex-wrap:nowrap}
  .mqtoday .mqtl{display:none}
  .mqtoday .mqtx{font-size:13px}
  .mqtoday .btn{padding:0 12px}
}

/* ---- RIBBON: the screens row begins under its section, with a pointer ---- */
.rpanel.anch{position:relative}
.rpanel.anch::before{content:"";position:absolute;top:0;left:var(--caret);transform:translateX(-50%);width:0;height:0;
  border:6px solid transparent;border-top-color:var(--c);pointer-events:none}
@media (max-width:760px){.rpanel.anch::before{display:none}}

/* ============ CUSTOMERS (list + 360 in one) ============ */
.c360find{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.c360find .gsearch{flex:1 1 320px;max-width:520px}
.c360list td{vertical-align:middle}
.c360fc summary{cursor:pointer}
.c360ct{display:flex;flex-direction:column;gap:6px}
.c360c{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 10px;border:1px solid var(--line);border-radius:9px}
.c360c b{min-width:120px}

/* ============ DISPATCH TRIPS — tick the parcels, one challan ============ */
.drtbl tr.drsel-on td{background:color-mix(in srgb,var(--g) 8%,transparent)}
.drbar{flex-wrap:wrap!important;gap:10px!important}
.drbar .oin{width:auto;min-width:0}
.drbar .oin input{width:120px}
.drbar .ibd input{width:132px}
.drbar .osm input{width:100px}
.drbar .otot small{white-space:nowrap}
.drbar .otot{flex-direction:row;align-items:baseline}
.drbar .btn{margin-left:auto}
.chal{padding:16px 18px}
.chalh{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.chalh>div:first-child{display:flex;flex-direction:column}
.chalno{font-size:22px;font-family:inherit;font-variant-numeric:tabular-nums}
.chalh>div:first-child span{font-size:12px;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.chalm{display:flex;gap:6px 18px;flex-wrap:wrap;font-size:13.5px;color:var(--ink2)}
.chalm b{color:var(--ink)}
.chalt{margin-top:14px}
.chalth{display:flex;align-items:center;gap:8px;font-size:15px;margin-bottom:4px}
.chaltb td.chalsig{min-width:140px;border-bottom:1px dotted var(--line)}
.chalf{display:flex;justify-content:space-between;margin-top:34px;font-size:12.5px;color:var(--ink3)}
.chalf span{border-top:1px solid var(--ink3);padding-top:4px;min-width:180px;text-align:center}
.chaltext{white-space:pre-wrap;font-size:12.5px;background:var(--sb);padding:10px;border-radius:9px;max-height:260px;overflow:auto;margin-top:10px}
@media print{.noprint,.chaltext{display:none!important}.chal{border:0;box-shadow:none}}
@media (max-width:560px){
  .drtbl thead{display:none}
  .drtbl,.drtbl tbody{display:block;width:100%}
  .drtbl tr{display:grid;grid-template-columns:52px minmax(0,1fr) auto;column-gap:8px;row-gap:1px;padding:8px 4px;border-bottom:1px solid var(--line);height:auto!important}
  .drtbl td{display:block;padding:0;border:0;height:auto!important;min-width:0}
  .drtbl td:nth-child(1){grid-column:1;grid-row:1/4;align-self:center}
  .drtbl td:nth-child(2),.drtbl td:nth-child(9){display:none}
  .drtbl td:nth-child(3){grid-column:2;grid-row:1}
  .drtbl td:nth-child(3) br,.drtbl td:nth-child(3) .muted{display:none}
  .drtbl td:nth-child(4){grid-column:2;grid-row:2;font-weight:600}
  .drtbl td:nth-child(5){grid-column:2;grid-row:3}
  .drtbl td:nth-child(6){grid-column:3;grid-row:1;text-align:right}
  .drtbl td:nth-child(7){grid-column:3;grid-row:2;text-align:right;font-size:12.5px}
  .drtbl td:nth-child(8){grid-column:3;grid-row:3;text-align:right;font-weight:700}
  .drbar .otot{flex-basis:100%;gap:6px}
  .drbar .oin{flex:1 1 calc(50% - 5px)}
  .drbar .oin input{width:100%}
  .drbar .btn{flex:1 1 100%}
}
.chaltb{width:100%}.chaltb th.r,.chaltb td.num{text-align:right}
@media (max-width:560px){.chaltb th:last-child,.chaltb td.chalsig{display:none}.chal{padding:12px}}

/* ---- RIBBON: labelled groups inside a row (Money: Entries · Reports · Setup) ---- */
.rsub{flex:none;align-self:center;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:color-mix(in srgb,var(--c) 65%,var(--ink3));padding:0 3px 0 4px}
.rsubn{border-left:1.5px solid color-mix(in srgb,var(--c) 35%,transparent);margin-left:8px;padding-left:10px}
@media (max-width:760px){html.rib .rpanel .rsub{grid-column:1/-1;padding:3px 4px 0;font-size:9.5px}html.rib .rpanel .rsubn{border-left:0;margin-left:0;padding-left:4px;border-top:1px solid color-mix(in srgb,var(--c) 25%,transparent);padding-top:5px}}

/* ============ MONEY: voucher view, register filters ============ */
.vpick{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.vpick .f{flex:1 1 320px;max-width:520px}
.vch{padding:16px 18px}
.vchh{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.vchh>div{display:flex;flex-direction:column}
.vchh b{font-size:21px}
.vchh span{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.vchg{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:12px}
.vchg span{display:flex;flex-direction:column}
.vchg small,.vchr small{font-size:11px;color:var(--ink3);font-weight:650;text-transform:uppercase;letter-spacing:.04em}
.vchg b{font-size:15px}
.vchamt b{font-size:22px}
.vchr{margin-top:12px}
.regf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.regf .regk{min-height:38px}
.regf .oseg{display:flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--sb)}
.regf .oseg label{position:relative;display:flex;margin:0;cursor:pointer}
.regf .oseg input{position:absolute;opacity:0;width:1px;height:1px}
.regf .oseg span{padding:6px 12px;border-radius:7px;font-size:13.5px;font-weight:600;color:var(--ink2)}
.regf .oseg input:checked+span{background:var(--panel);color:var(--mod);box-shadow:0 0 0 1px color-mix(in srgb,var(--mod) 30%,transparent)}
.regd{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:650;color:var(--ink2)}
.regd input,.regd select{height:36px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font:inherit;font-size:14px;color:var(--ink)}
.exph{display:flex;flex-wrap:wrap;gap:6px}
.expf .exmode{min-height:42px;height:42px}
/* a row with labelled groups is a long one: text only, a little tighter, so it fits */
@media (min-width:761px){
  html.rib .rpanel:has(.rsub){gap:2px}
  html.rib .rpanel:has(.rsub) .ritem{padding:0 4px;font-size:12px}
  html.rib .rpanel:has(.rsub) .rsub{letter-spacing:.05em;padding:0 2px}
  html.rib .rpanel:has(.rsub) .rsubn{margin-left:4px;padding-left:6px}
  html.rib .rpanel:has(.rsub) .ritem .ic{display:none}
}
.expf .exmode label{flex:1 1 auto}
.expf .exmode span{padding:0 10px}
@media (max-width:560px){.expf .exmode{flex-wrap:wrap;height:auto;flex:1 1 100%}.expf .exmode label{flex:1 1 30%}.expf .exmode span{padding:6px 4px;font-size:13px}}

/* ---- Shipping labels at estimate / invoice ---- */
.slstrip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;margin:8px 0}
.slstrip .slt{font-weight:700;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.slstrip form.slseg{margin:0}
.slstrip .oseg{display:inline-flex;border:1px solid var(--line,#e2e8f0);border-radius:8px;overflow:hidden}
.slstrip .oseg label{margin:0;cursor:pointer}
.slstrip .oseg input{position:absolute;opacity:0;pointer-events:none}
.slstrip .oseg span{display:block;padding:5px 10px;font-size:13px}
.slstrip .oseg input:checked+span{background:var(--p,#7c3aed);color:#fff}
.slstrip .slm{flex:1;min-width:180px;font-size:13px;display:inline-flex;align-items:center;gap:5px}
.slstrip .slwarn{color:var(--a,#b45309);display:inline-flex;align-items:center;gap:4px}
.slstrip .sla{display:flex;gap:6px;align-items:center}
.slstrip form.slpk{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0}
.slstrip form.slpk label{display:inline-flex;align-items:center;gap:4px;font-size:13px;margin:0}
.slstrip form.slpk input{width:64px}
@media (max-width:640px){.slstrip{gap:6px}.slstrip .slm{min-width:100%;order:3}.slstrip .sla{order:4;width:100%}.slstrip .sla .btn{width:100%;justify-content:center}}
.slsheet{display:flex;flex-wrap:wrap;gap:6px}
/* SHIPPING LABEL — the owner's own format (24-09-2026: "exact copy of old label").
   ONE font everywhere — Verdana, the wide open face of the city line; nothing
   narrow or squeezed. Only the NAME and the CITY are bold (the two things read
   from across a godown). Even spacing between every block. From block 25% larger
   so the mobile number reads. 152 x 102 mm, printed turned on the 4 x 6 roll. */
.sllbl{box-sizing:border-box;border:1px dashed #94a3b8;background:#fff;color:#000;position:relative;
  padding:15mm 15mm 10mm;   /* owner 24-09-2026: 15 mm top / left / right, 10 mm bottom */
  overflow:hidden;font-family:Verdana,"DejaVu Sans",Geneva,sans-serif;
  font-weight:400;line-height:1.3;letter-spacing:0}
.sllbl .slto{font-size:10pt}
.sllbl .slname{font-size:18pt;font-weight:700;line-height:1.15;text-transform:uppercase;margin:.5mm 0 1.5mm;word-break:break-word}
.sllbl .sladdr{font-size:11pt;line-height:1.3;text-transform:uppercase;word-break:break-word}
.sllbl .slcity{font-size:15pt;font-weight:700;line-height:1.2;margin-top:1.5mm}
.sllbl .slstate{font-size:11.5pt;margin-top:.5mm}
.sllbl .slmob{font-size:11.5pt;margin-top:.5mm}
.sllbl .slsq{position:absolute;right:15mm;bottom:10mm;width:27mm;height:27mm;border:.5mm solid #000;background:#fff}
.sllbl .slfrom{position:absolute;left:15mm;bottom:10mm;right:47mm;font-size:9.5pt;line-height:1.3}
@media(max-width:640px){
  .sllbl .slname{font-size:16pt}
  .sllbl .sladdr,.sllbl .slstate,.sllbl .slmob{font-size:10pt}
  .sllbl .slcity{font-size:13pt}
  .sllbl .slfrom{font-size:8pt}
}
@media print{.slsheet{gap:2mm}}

/* ---- Picking: compact filter bar (one line on a PC, two on a phone) ---- */
.pkf{padding:8px 10px;margin-bottom:10px}
.pkf .pkfr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:8px;align-items:center}
.pkf .pkadv{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:8px}
.pkf .pkadv[hidden]{display:none}
.pkf .oin{position:relative;display:flex;align-items:stretch;height:38px;min-width:0;border:1px solid var(--line);border-radius:9px;background:var(--panel);margin:0}
.pkf .oin:focus-within{border-color:var(--mod);box-shadow:0 0 0 3px color-mix(in srgb,var(--mod) 14%,transparent)}
.pkf .oinl{display:flex;align-items:center;padding:0 9px;border-right:1px solid var(--line);border-radius:8px 0 0 8px;background:var(--sb);
  font-size:12px;font-weight:650;color:var(--ink2);white-space:nowrap}
.pkf .oin select,.pkf .oin input{flex:1 1 auto;min-width:0;width:100%;height:100%;border:0!important;box-shadow:none!important;background:transparent;
  padding:0 8px;font:inherit;font-size:14px;color:var(--ink);outline:0;border-radius:0 8px 8px 0;min-height:0}
.pkf .pkfb{display:flex;gap:6px;align-items:center}
.pkf .pkfb>*{height:38px;min-height:38px;display:inline-flex;align-items:center;gap:5px;padding:0 12px;white-space:nowrap}
.pkf .pkfm[aria-expanded=true]{background:var(--sb)}
.pkby{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pkcm{margin-left:auto;display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel)}
.pkcm a{padding:4px 11px;font-size:12.5px;font-weight:650;color:var(--ink2);text-decoration:none;white-space:nowrap}
.pkcm a.on{background:var(--mod);color:#fff}
.chip.pkid{font-variant-numeric:tabular-nums;letter-spacing:.2px}
.pkkpi .kpi .kv b{overflow-wrap:anywhere}
@media (max-width:760px){
  .pkf{padding:7px 8px}
  .pkf .pkfr{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:6px}
  .pkf .pkfr>.pkb:nth-child(1){grid-column:1;grid-row:1}
  .pkf .pkfr>.pkb:nth-child(2){grid-column:2;grid-row:1}
  .pkf .pkfr>.pkb:nth-child(3){grid-column:1;grid-row:2}
  .pkf .pkfr>.pkb:nth-child(4){grid-column:2;grid-row:2}
  .pkf .pkfb{grid-column:3;grid-row:1/span 2;display:grid;grid-template-columns:38px 38px;grid-auto-rows:38px;gap:6px}
  .pkf .pkfb>*{padding:0;justify-content:center;width:38px}
  .pkf .pkfb>* span{display:none}
  .pkf .pkfgo{grid-column:1;grid-row:1}
  .pkf .pkfm{grid-column:1;grid-row:2}
  .pkf .pkfx{grid-column:2;grid-row:1}
  .pkf .oinl{padding:0 7px;font-size:11px}
  .pkf .oin select,.pkf .oin input{font-size:13.5px;padding:0 5px}
  .pkf .pkadv{grid-template-columns:1fr 1fr;gap:6px}
  .pkcm{margin-left:0}
}
@media (max-width:760px){.pkkpi .kpi .kv b{white-space:normal;font-size:15px;line-height:1.15}.pkkpi .kpi .kv{min-width:0}}

/* ---- Combo orders: six customers in one line, a quantity under each ---- */
.ocmb .cx6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.ocmb .cx6 .ofld{min-width:0;margin:0}
.ocmb .cxwho1{display:grid;grid-template-columns:minmax(0,1fr);margin-top:10px}
.ocmb .cxadd{grid-template-columns:190px 150px minmax(0,1fr) auto}
.ocmb .cxadd .cxqrow{grid-column:1/-1;margin:0}
.ocmb .cxqb{display:flex;flex-direction:column;gap:3px;margin:0;min-width:0}
.ocmb .cxqb small{font-size:11.5px;font-weight:650;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ocmb .cxqb.on small{color:var(--ink)}
.ocmb .cxqb input{height:40px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.ocmb .cxqb input:disabled{background:var(--sb);opacity:.55}
@media (max-width:900px){
  .ocmb .cx6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ocmb .cxadd{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:560px){
  .ocmb .cx6{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
}

/* ---- Search on this screen (top right of the page header) ---- */
.crumb .pfind{margin-left:auto;display:flex;align-items:center}
.crumb .pfind[hidden]{display:none}
.pfind .pfbtn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel);
  color:var(--ink2);font:inherit;font-size:13.5px;font-weight:650;cursor:pointer}
.pfind .pfbtn:hover{border-color:var(--mod);color:var(--mod)}
.pfind .pfbox{display:none;align-items:center;gap:6px;height:36px;padding:0 4px 0 10px;border:1.5px solid var(--mod);border-radius:9px;background:var(--panel);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--mod) 12%,transparent)}
.pfind.open .pfbtn{display:none}
.pfind.open .pfbox,.pfind.has .pfbox{display:flex}
.pfind.has .pfbtn{display:none}
.pfind .pfbox input{border:0!important;box-shadow:none!important;outline:0;background:transparent;width:260px;height:100%;padding:0;font:inherit;font-size:14.5px;min-height:0}
.pfind .pfbox small{font-size:12px;color:var(--ink3);white-space:nowrap;font-variant-numeric:tabular-nums}
.pfind .pfx{border:0;background:transparent;font-size:20px;line-height:1;color:var(--ink3);cursor:pointer;padding:0 6px;height:100%}
.pf-hide{display:none!important}
.pfind .pfbox input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
@media (max-width:760px){
  .crumb .pfind{margin-left:auto}
  .pfind .pfbtn span{display:none}
  .pfind .pfbtn{width:36px;padding:0;justify-content:center}
  .pfind.open,.pfind.has{flex:1 1 100%;order:1}
  .pfind .pfbox{flex:1}
  .pfind .pfbox input{width:100%;flex:1}
}
@media print{.pfind{display:none!important}}

/* a module opened from Settings: "Settings › Modules › Accounts" with its sibling screens */
.scfgbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:-4px 0 12px;font-size:13px;color:var(--ink3)}
.scfgbar a{color:var(--ink2);text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.scfgbar a:hover{color:var(--mod)}
.scfgbar .sep{color:var(--ink3)}
.scfgbar .scfgsib{display:inline-flex;gap:6px;margin-left:6px;flex-wrap:wrap}
.scfgbar .chip{white-space:nowrap}
.scfgbar .chip.on{background:var(--mod);color:#fff}
@media (max-width:760px){
  .scfgbar .scfgsib{flex:1 1 100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .scfgbar .scfgsib::-webkit-scrollbar{display:none}
}

/* ==== ONE-LINE FIGURES AND TABS (whole ERP) ====
   A figure box reads "0  Shipments this week" on one line — the number first,
   its label beside it — instead of a tiny label over a big number. A tab carries
   its count as a chip after the label instead of a badge sitting on the text. */
.cbox{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:7px;row-gap:0;padding:7px 11px;min-height:0}
.cbox b{order:-1;font-size:17px;line-height:1.25}
.cbox small{font-size:13px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink2);white-space:normal;overflow:visible;line-height:1.25}
.cbox em{font-size:11.5px;line-height:1.25;color:var(--ink3)}
.cbox em::before{content:"· "}
.cboxrow.grand .cbox b{font-size:19px}
.ct{flex-direction:row;align-items:center;gap:7px}
.ct i{position:static;display:inline-block;min-width:18px;padding:0 6px;line-height:17px;font-size:11px;border-radius:99px}
.ct em{font-size:11.5px}
.ct em::before{content:"· "}
@media (max-width:560px){
  .grid:has(>.kpi){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px}
  .cboxrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cbox{padding:6px 9px}
  .cbox b{font-size:15.5px}
  .cbox small{font-size:12px}
}
@media (max-width:560px){
  /* five or more figures: still two per row (a slim tile each), label up to two lines */
  .grid:has(>.kpi:nth-child(5)){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px}
  .grid:has(>.kpi:nth-child(5)) .kpi .ki{display:none}
  .grid:has(>.kpi:nth-child(5)) .kpi .kv small{-webkit-line-clamp:2}
  /* a figure box: the number left, the label beside it, any note under the label */
  .cbox{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:7px;align-items:baseline}
  .cbox b{grid-column:1;grid-row:1}
  .cbox small{grid-column:2;grid-row:1}
  .cbox em{grid-column:2;grid-row:2}
  .cbox em::before{content:""}
}
.ocmb .cx6h{margin-bottom:3px}
.ocmb .cx6h span{font-size:11.5px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em;padding-left:2px}
.ocmb .cxlh{padding:5px 12px;background:transparent;border-bottom:1px solid var(--line)}
.ocmb .cxlh span{font-size:11px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.05em}
.ocmb .cxlh span:nth-child(3),.ocmb .cxlh span:nth-child(4),.ocmb .cxlh span:nth-child(5){text-align:right}
@media (max-width:900px){.ocmb .cx6h{display:none}}

/* ---- Shipping (revamp): queues you can work row by row ---- */
.shtabs{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.shtabs .ctabs{margin-bottom:0;flex:1 1 auto}
.shsearch{display:flex;gap:4px;margin-left:auto}
.shsearch input{height:34px;width:230px;padding:0 10px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:13.5px;min-height:0}
.shsearch .btn2{height:34px;min-height:34px;padding:0 10px}
.shlist{display:flex;flex-direction:column}
.shr{display:grid;align-items:center;gap:8px;padding:9px 4px;border-bottom:1px solid var(--line2);margin:0}
.shr:last-child{border-bottom:0}
.shr-lr{grid-template-columns:minmax(170px,1.3fr) minmax(150px,1fr) minmax(130px,.9fr) 92px auto 88px}
.shr-wa{grid-template-columns:minmax(170px,1.3fr) minmax(150px,1fr) auto auto auto}
.shr-fu{grid-template-columns:minmax(170px,1.3fr) minmax(170px,1.1fr) auto auto auto auto}
.shwho{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.shwho b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shwho small{font-size:12px;color:var(--ink3)}
.shwho .shcode{font-size:11px;color:var(--ink3);text-decoration:none;width:max-content}
.shwho .shcode:hover{color:var(--mod)}
.shr .oin{position:relative;display:flex;align-items:stretch;height:38px;min-width:0;border:1px solid var(--line);border-radius:9px;background:var(--panel);margin:0}
.shr .oin:focus-within{border-color:var(--mod);box-shadow:0 0 0 3px color-mix(in srgb,var(--mod) 14%,transparent)}
.shr .oinl{display:flex;align-items:center;padding:0 8px;border-right:1px solid var(--line);border-radius:8px 0 0 8px;background:var(--sb);font-size:11.5px;font-weight:650;color:var(--ink2);white-space:nowrap}
.shr .oin select,.shr .oin input{flex:1 1 auto;min-width:0;width:100%;height:100%;border:0!important;box-shadow:none!important;background:transparent;padding:0 8px;font:inherit;font-size:14px;outline:0;min-height:0;border-radius:0 8px 8px 0}
.shr .shdays input{text-align:center;padding:0 4px}
.shph{display:flex;align-items:center;gap:6px}
.shcam,.shgal{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--line);border-radius:9px;background:var(--panel);cursor:pointer;color:var(--ink2);margin:0;position:relative}
.shcam:hover,.shgal:hover{border-color:var(--mod);color:var(--mod)}
.shcam.on,.shgal.on{background:color-mix(in srgb,var(--g) 14%,var(--panel));border-color:var(--g);color:var(--g)}
.shcam.on::after,.shgal.on::after{content:"✓";position:absolute;top:-6px;right:-6px;background:var(--g);color:#fff;border-radius:99px;font-size:10px;width:15px;height:15px;display:grid;place-items:center}
.shthumb img{width:38px;height:38px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}
.shsave{height:38px;min-height:38px;justify-content:center}
.shsave.pulse{box-shadow:0 0 0 3px color-mix(in srgb,var(--mod) 30%,transparent)}
.shinfo{display:flex;flex-direction:column;min-width:0;font-size:13.5px;line-height:1.3}
.shinfo small{font-size:12px;color:var(--ink3)}
.shlate{color:var(--r)}
.shr form.shfu,.shr form.shtold{margin:0}
.shr .btn,.shr .btn2,.shr .ghost{white-space:nowrap}
.shnowa{font-size:11px}
.shcammod{position:fixed;inset:0;background:rgba(15,23,42,.72);z-index:1200;display:grid;place-items:center;padding:16px}
.shcammod[hidden]{display:none}
.shcambox{background:var(--panel);border-radius:14px;padding:12px;max-width:760px;width:100%}
.shcambox video,.shcambox img{width:100%;max-height:70vh;object-fit:contain;border-radius:10px;background:#000;display:block}
.shcambar{display:flex;gap:8px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.shdet .fgrid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
@media (max-width:760px){
  .shsearch{width:100%;margin-left:0}.shsearch input{flex:1;width:auto}
  .shr{padding:10px 2px;gap:7px}
  .shr-lr{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .shr-lr .shwho{grid-column:1/-1}
  .shr-lr .shtr{grid-column:1/-1}
  .shr-lr .shlr{grid-column:1/2}
  .shr-lr .shdays{grid-column:2/3}
  .shr-lr .shph{grid-column:1/2}
  .shr-lr .shsave{grid-column:2/3}
  .shr-wa,.shr-fu{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .shr-wa .shwho,.shr-fu .shwho,.shr-wa .shinfo,.shr-fu .shinfo{grid-column:1/-1}
  .shr-fu .shask{grid-column:1/-1;justify-content:center}
  .shr-fu form.shfu button,.shr-wa .shwa{width:100%;justify-content:center}
}
.shmsg{margin-top:8px}.shmsg pre{white-space:pre-wrap;background:var(--sb);padding:10px;border-radius:10px;font:inherit;font-size:13px;margin:6px 0 0}
.chip.shlate{background:color-mix(in srgb,var(--r) 14%,var(--panel));color:var(--r)}
.shdetrow{display:grid;grid-template-columns:minmax(150px,1.2fr) minmax(130px,1fr) 170px minmax(120px,.9fr) 92px auto;gap:8px;align-items:center}
.shdetrow .oin{position:relative;display:flex;align-items:stretch;height:40px;min-width:0;border:1px solid var(--line);border-radius:9px;background:var(--panel);margin:0}
.shdetrow .oin:focus-within{border-color:var(--mod);box-shadow:0 0 0 3px color-mix(in srgb,var(--mod) 14%,transparent)}
.shdetrow .oinl{display:flex;align-items:center;padding:0 8px;border-right:1px solid var(--line);border-radius:8px 0 0 8px;background:var(--sb);font-size:11.5px;font-weight:650;color:var(--ink2);white-space:nowrap}
.shdetrow .oin select,.shdetrow .oin input{flex:1 1 auto;min-width:0;width:100%;height:100%;border:0!important;box-shadow:none!important;background:transparent;padding:0 8px;font:inherit;font-size:14px;outline:0;min-height:0;border-radius:0 8px 8px 0}
.shdetrow .shdays input{text-align:center}
.shdetbar{margin-top:10px;align-items:center}
@media (max-width:760px){.shdetrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.shdetrow>.oin:first-child{grid-column:1/-1}}

/* ==== STATUS RAIL: the screen's count tiles in a right-hand panel (PC) / behind a Status button (phone) ==== */
:root{--railw:236px}
.kpirail{display:none}
.kpibtn{display:none}
@media (min-width:1100px){
  body.has-kpirail .main{padding-right:max(var(--gut,20px), calc(var(--railw) + 14px))}
  .kpirail{display:block;position:fixed;top:calc(var(--top) + 8px);right:10px;bottom:10px;width:calc(var(--railw) - 10px);overflow-y:auto;z-index:30;
    padding:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 2px 10px rgba(15,23,42,.05)}
  .kpirail .krh{display:flex;align-items:center;justify-content:space-between;margin:0 2px 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
  .kpirail .krx{display:none}
}
.kpirail .kgrid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:6px!important;margin:0 0 8px!important}
.kpirail .kpi{min-height:0;padding:7px 9px;gap:8px;border-radius:10px}
.kpirail .kpi .ki{width:28px;height:28px;flex:0 0 28px}
.kpirail .kpi .ki svg{width:15px;height:15px}
.kpirail .kpi .kv{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:6px;min-width:0}
.kpirail .kpi .kv b{font-size:16.5px;line-height:1.2}
.kpirail .kpi .kv small{font-size:12.5px;white-space:normal;-webkit-line-clamp:2}
.kpirail .kpi .kv em{flex-basis:100%;font-size:11px}
.kpirail .cboxrow{grid-template-columns:minmax(0,1fr)!important}
.kpirail .kglbl{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);margin:10px 2px 5px;line-height:1.25}
.kpirail .krh + .kglbl{margin-top:0}
.kpirail .cbox{min-height:0}
@media (max-width:1099px){
  .kpibtn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 11px;border:1px solid var(--line);border-radius:9px;background:var(--panel);
    color:var(--ink2);font:inherit;font-size:13.5px;font-weight:650;cursor:pointer;margin-left:auto}
  .kpibtn i{font-style:normal;background:var(--mod);color:#fff;border-radius:99px;font-size:11px;line-height:17px;min-width:18px;padding:0 5px;text-align:center}
  .crumb .kpibtn + .pfind{margin-left:6px}
  body.kpirail-open .kpirail{display:block;position:fixed;top:0;right:0;bottom:0;width:min(86vw,330px);z-index:1100;overflow-y:auto;padding:12px;
    background:var(--bg,#f1f5f9);box-shadow:-8px 0 30px rgba(15,23,42,.25)}
  body.kpirail-open::after{content:"";position:fixed;inset:0;background:rgba(15,23,42,.35);z-index:1090}
  .kpirail .krh{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .kpirail .krx{border:0;background:transparent;font-size:24px;line-height:1;color:var(--ink2);cursor:pointer}
}
@media (max-width:560px){.kpibtn span{display:none}.kpibtn{padding:0 9px}}
@media print{.kpirail,.kpibtn{display:none!important}}
@media (max-width:760px){.r-shipping .chead h2 .small.muted{display:none}}
.kpirail .kpi .kv b{white-space:normal;overflow-wrap:anywhere}

/* Picking: the customer picker opens as a pop-up (Customers button / Customers tile) */
.pkcmod{position:fixed;inset:0;z-index:1150;background:rgba(15,23,42,.45);display:grid;place-items:start center;padding:6vh 14px 14px;overflow:auto}
.pkcmod[hidden]{display:none}
.pkcmod .pkparty{width:min(980px,100%);margin:0;position:relative;max-height:86vh;overflow:auto;box-shadow:0 20px 50px rgba(15,23,42,.3)}
.pkcmod .pkparty>summary{pointer-events:none}
.pkcmod .pkparty>summary h2::after{content:none!important}
.pkcmod .pkcx{position:absolute;top:8px;right:10px;border:0;background:transparent;font-size:26px;line-height:1;color:var(--ink2);cursor:pointer}
.pkf .pkfc.on{background:color-mix(in srgb,var(--mod) 12%,var(--panel));border-color:var(--mod);color:var(--mod)}
@media (max-width:760px){
  .pkf .pkfb{grid-template-columns:38px 38px}
  .pkf .pkfc{grid-column:2;grid-row:2}
  .pkcmod{padding:0}.pkcmod .pkparty{max-height:100vh;border-radius:0;min-height:100vh}
}

/* PACKING — 2 · Receive: the line's job and packer, its photo, code and name, on one compact row */
.pkrecv .pkrw{display:block;font-size:12px;line-height:1.25;margin-top:2px;font-weight:400}
.pkrecv .pkrd{display:inline-flex;align-items:center;gap:8px;min-width:0}
.pkrecv .pkrd>span:last-child{display:flex;flex-direction:column;min-width:0}
.pkrecv .pkrd small{color:var(--ink3);font-size:12px;line-height:1.25;font-weight:400}
.pkrecv .pkrd .idph{flex:0 0 auto}
.pktabs{margin-bottom:10px}
@media (max-width:760px){.pkrecv td.jc-code{grid-column:1/-1}.pkrecv td.jc-who{grid-column:1/-1}}

/* AVAILABLE TO PACK — the gallery of loose products (Packing → Issue, New Packed SKU):
   one compact card per product: photo, number and code, name, what may be packed now */
.pkpick .pkbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:8px}
.pkpick .pksearch{display:inline-flex;align-items:center;gap:6px;flex:1 1 220px;max-width:340px;height:36px;padding:0 10px;
  border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink3)}
.pkpick .pksearch input{border:0;outline:0;background:transparent;flex:1;min-width:0;font:inherit;font-size:14px;height:100%;padding:0;color:var(--ink)}
.pkpick .pkcount{margin-left:auto}
.pkpick .pkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.pkpick .pkcard{display:flex;align-items:center;gap:10px;padding:7px 9px;border:1px solid var(--line);border-radius:10px;background:var(--panel);
  text-align:left;font:inherit;color:inherit;cursor:pointer;min-width:0;text-decoration:none;transition:border-color .15s}
.pkpick .pkcard:hover{border-color:var(--mod)}
.pkpick .pkcard.on{border-color:var(--mod);box-shadow:0 0 0 2px color-mix(in srgb,var(--mod) 22%,transparent)}
.pkpick .pkcard[hidden]{display:none}
.pkpick .pkph{flex:0 0 auto;line-height:0}
.pkpick .pkbody{display:block;min-width:0;flex:1;line-height:1.3}
.pkpick .pknum{font-size:14.5px;font-weight:800}
.pkpick .pkcode{font-size:12px;color:var(--ink3);margin-left:6px}
.pkpick .pkname{display:block;font-style:normal;font-size:13px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pkpick .pkmeta{display:flex;flex-wrap:wrap;align-items:center;gap:3px 8px;margin-top:3px}
.pkpick .pkav{font-weight:800;font-size:14px;color:var(--ink)}
.pkpick .pkav i{font-style:normal;font-weight:500;font-size:12px;color:var(--ink3)}
.pkpick .pkrate{font-size:12.5px;color:var(--ink2)}
.pkpick .pkpipe{display:block;font-size:11.5px;color:var(--ink3);margin-top:2px}
.pkpick .pknone{padding:10px 2px}
@media (max-width:560px){.pkpick .pkgrid{grid-template-columns:minmax(0,1fr)}.pkpick .pksearch{max-width:none;flex-basis:100%}}

/* SKU — one packed SKU: the photo on the left, the price on the right, the history folded
   below; stock and inventory intelligence live in the right-hand Status panel */
.skux{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);gap:var(--gap);align-items:start;margin-bottom:var(--gap)}
.skux>.card{margin:0;min-width:0}
@media (max-width:900px){.skux{grid-template-columns:minmax(0,1fr)}}
.skubig{display:block;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.skubig img{width:100%;height:100%;object-fit:contain;display:block}
.skubig.none{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--ink3);
  border-style:dashed;background:var(--sb);font-size:13px;text-align:center;padding:10px}
@media (max-width:900px){.skubig{max-width:340px;margin:0 auto}}
.skuref{display:flex;flex-wrap:wrap;gap:8px 14px;margin:10px 0 4px}
.skuref a{text-decoration:none;color:inherit}
.skuref .idtx b{font-size:13px}.skuref .idtx small{font-size:12px}
.skurepl{margin-top:8px;border-top:1px solid var(--line);padding-top:8px}
.skurepl>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:13.5px;font-weight:650;color:var(--mod)}
.skurepl>summary::-webkit-details-marker{display:none}
.skurepl[open]>summary{margin-bottom:8px}
.skurepl .card{margin:0 0 8px;box-shadow:none}
.skurepl-go{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.skurepl-go .f{flex:1 1 140px;margin:0}
.skuspec{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:13.5px;color:var(--ink2);margin:0 0 10px}
.skuladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:6px;margin:0 0 12px}
.skuladder>div{border:1px solid var(--line);border-radius:10px;padding:7px 10px;background:var(--panel);display:flex;flex-direction:column;gap:3px;min-width:0}
.skuladder small{display:flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.skuladder b{font-size:18px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums;color:var(--ink)}
.skuladder>div.sklead{border-color:var(--mod);background:color-mix(in srgb,var(--mod) 7%,var(--panel))}
.skuladder>div.sklead b{color:var(--mod)}
.skuprc table{margin-bottom:6px}
.skurate{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 16px;margin-top:12px}
.skurate .f{margin:0}
.skurate input{font-size:18px;font-weight:800;max-width:170px}
.skurate #derived{margin:0 0 8px}
.skuhint{margin:4px 0 8px}
.skusave{margin-top:12px}
.skuh{border-top:1px solid var(--line);padding:8px 0}
.skuh:first-of-type{border-top:0;padding-top:0}
.skuh>summary{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;font-weight:700;list-style:none}
.skuh>summary::-webkit-details-marker{display:none}
.skuh>summary .mini{margin-left:auto}
.skuh[open]>summary{margin-bottom:6px}
.skutags td.mono{white-space:nowrap}
@media (max-width:560px){.skutags th,.skutags td{padding-left:6px!important;padding-right:6px!important}.skutags td.mono{font-size:12px}}

/* SKU LIST — photo, SKU and design, packaging, then the figures; one card per SKU on a phone */
.skutabs{margin-bottom:0}
.skufind{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-bottom:8px}
.skufind .gsearch{flex:1 1 180px;min-width:150px;max-width:280px;margin:0}
.skufind .gbar.gbin{margin:0;order:-1}
.skufind .skutabs{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.skufind .skun{white-space:nowrap}
.skufind .skulegend{margin-left:auto;display:inline-flex;align-items:center;gap:3px;flex-wrap:nowrap;
  font-size:11.5px;white-space:nowrap}
.skulist td{vertical-align:middle}
.skulist td.sk-ph{width:64px}
.skulist td.sk-code small,.skulist td.sk-pk small{display:block;font-size:12px;color:var(--ink3);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.skulist td.sk-code b,.skulist td.sk-pk b{font-size:13.5px}
.skulist .skucode{color:inherit;text-decoration:none}
.skulist .skucode:hover b{color:var(--mod)}
.skulist td.sk-act{text-align:right;width:1%}
.skulist .skubase{display:block;font-size:11.5px;color:var(--ink3);font-weight:400}
.skulist .skubase.low{color:var(--r);font-weight:650}
.skulist td.sk-code .pill{margin-left:4px;vertical-align:1px}
@media (max-width:760px){
  .skufind .gsearch{flex:1 1 100%}
  .skufind .skulegend{margin-left:0}
  .skulist thead{display:none}
  .skulist,.skulist tbody{display:block;width:100%}
  .tw:has(.skulist){overflow:visible}
  .skulist tr[data-line]{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px 8px;padding:10px 2px;
    border-bottom:1px solid var(--line);height:auto!important}
  .skulist tr[data-line] td{display:block;padding:0!important;border:0!important;height:auto!important;min-width:0;text-align:left!important;white-space:normal}
  .skulist td[data-l]::before{content:attr(data-l);display:block;font-size:11px;font-weight:600;color:var(--ink3);margin-bottom:1px}
  .skulist td.sk-ph{grid-column:1/4;grid-row:1/3;width:auto}
  .skulist td.sk-code{grid-column:4/-1}
  .skulist td.sk-pk{grid-column:4/-1}
  .skulist td.sk-n{grid-column:span 3}
  .skulist td.sk-n:nth-child(4){grid-column:1/4}
  .skulist td.sk-code small,.skulist td.sk-pk small{max-width:none}
  .skulist td.sk-act{grid-column:1/-1;display:flex!important;gap:6px;width:auto}
  .skulist td.sk-act>a{flex:1 1 0;justify-content:center;margin:0!important}
}

/* PACKING — To pack for orders: tick, photo, SKU, packaging, the figures, Issue / Labels */
.tpbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 10px}
.tplist td{vertical-align:middle}
.tplist td.tp-tk{width:28px}
.tplist td.tp-ph{width:56px}
.tplist td.tp-sku a{color:inherit;text-decoration:none}
.tplist td.tp-sku small,.tplist td.tp-pk small,.tplist td.tp-can small{display:block;font-size:12px;color:var(--ink3);font-weight:400;line-height:1.25;white-space:nowrap}
.tplist td.tp-sku b,.tplist td.tp-pk b{font-size:13.5px}
.tplist .tpmiss{display:block;color:var(--r)!important;font-weight:600!important;font-size:11.5px!important;white-space:nowrap}
.tplist td.tp-can small,.tplist td.tp-sh small{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
.tplist td.tp-sku small,.tplist td.tp-pk small{max-width:190px;overflow:hidden;text-overflow:ellipsis}
.tplist tr.tpblock td{opacity:.8}
.tplist td.tp-act{text-align:right;width:1%}
.tplist td.tp-act .mini + .mini{margin-left:4px}
.tpnote{margin-top:8px}
@media (max-width:760px){
  .tplist thead{display:none}
  .tplist,.tplist tbody{display:block;width:100%}
  .tw:has(.tplist){overflow:visible}
  .tplist tr[data-line]{display:grid;grid-template-columns:28px 56px repeat(6,minmax(0,1fr));gap:6px 8px;padding:10px 2px;border-bottom:1px solid var(--line);height:auto!important}
  .tplist tr[data-line] td{display:block;padding:0!important;border:0!important;height:auto!important;min-width:0;text-align:left!important;white-space:normal;width:auto}
  .tplist td[data-l]::before{content:attr(data-l);display:block;font-size:11px;font-weight:600;color:var(--ink3);margin-bottom:1px}
  .tplist td.tp-tk{grid-column:1;grid-row:1/3;align-self:center}
  .tplist td.tp-ph{grid-column:2;grid-row:1/3}
  .tplist td.tp-sku{grid-column:3/-1}
  .tplist td.tp-n{grid-column:span 2}
  .tplist td.tp-n:nth-child(4){grid-column:1/5}
  .tplist td.tp-sh,.tplist td.tp-can{grid-column:span 3}
  .tplist td.tp-act{grid-column:1/-1;display:flex!important;gap:6px}
  .tplist td.tp-act>a{flex:1 1 0;justify-content:center;margin:0!important}
  .tplist td.tp-act:empty{display:none!important}
}

/* REPORTS — each group a short column of plain names, read top to bottom; the columns fill the width */
.repcols{column-width:290px;column-gap:14px}
.repcol{break-inside:avoid;display:inline-block;width:100%;margin:0 0 14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 10px 6px}
.repcol h3{display:flex;align-items:center;justify-content:space-between;margin:0 4px 6px;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--mod)}
.repcol h3 span{font-size:11.5px;font-weight:700;color:var(--ink3);letter-spacing:0}
.repcol ul{list-style:none;margin:0;padding:0}
.repcol li + li{border-top:1px solid var(--line)}
.repcol li a{display:block;padding:7px 6px;border-radius:7px;color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:600;line-height:1.3}
.repcol li a:hover{background:color-mix(in srgb,var(--mod) 8%,var(--panel));color:var(--mod)}
.repback{margin:-4px 0 10px}.repback a{color:var(--mod);text-decoration:none;font-weight:600}

/* COMBO STORE: the split of a lot, the held figure under a stock count, the Rating filters */
.cssplit{display:inline-flex;flex-wrap:wrap;gap:4px 8px;font-size:12.5px;white-space:nowrap}
.cssplit .cssc{color:#6d28d9;display:inline-flex;align-items:center;gap:3px}
.cssplit .css1{color:var(--ink2)}
.cshold{display:block;font-size:11px;color:#6d28d9;font-weight:600;white-space:nowrap}
.ratefilt{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin-bottom:12px}
.ratefilt .gsearch{flex:1 1 220px;max-width:320px;margin:0}
.ratefilt label{display:flex;flex-direction:column;gap:2px}
.ratefilt label small{font-size:11px;font-weight:600;color:var(--ink3)}
.ratefilt select{height:36px}
.cslist .csact{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cslist .inlineform{display:inline-flex;gap:4px;align-items:center;margin:0}

/* PURCHASE — the two doors, and the loose-Rakhi desk */
.purhome{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-bottom:var(--gap)}
.purdoor{display:flex;flex-direction:column;gap:6px;padding:18px 18px 14px;border:1px solid var(--line);border-left:5px solid var(--c);border-radius:14px;
  background:var(--panel);color:var(--ink);text-decoration:none;min-height:150px}
.purdoor .ic{color:var(--c)}
.purdoor b{font-size:19px}
.purdoor span{font-size:13.5px;color:var(--ink2);line-height:1.4}
.purdoor small{margin-top:auto;font-size:12px;color:var(--ink3)}
.purdoor:hover{border-color:var(--c);box-shadow:0 4px 14px rgba(15,23,42,.06)}
/* the loose-Rakhi line: standard fields in one grid, all the same height */
/* purchase desk line: compact data strip on the left, the photo last on the right */
.pdrow{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:12px 18px;align-items:start}
.pdfields{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:flex-end}
.pdfields .f{flex:0 0 auto}
.pdfields .pdno{width:170px}.pdfields .pdq{width:92px}.pdfields .pdu{width:120px}.pdfields .pdr{width:118px}
.pdrow .f label{min-height:16px;white-space:nowrap}
.pdrow .f label small{font-weight:500}
.pdrow input,.pdrow select{height:40px;width:100%}
.pdrow .pdok .btn{height:40px}
.pdphoto{border-left:1px dashed var(--line);padding-left:16px}
.pdphoto>label{display:block;font-weight:700;font-size:calc(var(--fs) - 1px);margin-bottom:6px}
.pdphoto .pdcam{display:flex;align-items:center;gap:10px}
.pdphoto .pdcam .btn.big{flex:1 1 auto;justify-content:center;height:48px;font-size:16px;font-weight:800}
.pdphoto .pdcam img{width:48px;height:48px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.pdphoto [data-photobox].bare .camwrap{max-width:100%}
.pdphoto .camshoot{flex-wrap:wrap}
@media (max-width:900px){.pdrow{grid-template-columns:minmax(0,1fr)}.pdphoto{border-left:0;padding-left:0;border-top:1px dashed var(--line);padding-top:10px}
  .pdfields .pdno{width:100%}.pdfields .pdq,.pdfields .pdu,.pdfields .pdr{flex:1 1 40%;width:auto}.pdfields .pdok{flex:1 1 100%}.pdfields .pdok .btn{width:100%;justify-content:center}}
.pdlook{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:30px;margin:6px 0 2px;font-size:13px}
.pdlook img{width:40px;height:40px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.pdlook .mono{font-size:13.5px}
.pdtbl td small.cshold{display:block}
@media (max-width:760px){
}
.ratebad td{background:color-mix(in srgb,var(--r) 7%,var(--panel))!important}
.ratebad input.bad{border-color:var(--r);box-shadow:0 0 0 2px color-mix(in srgb,var(--r) 25%,transparent)}
.ratewhy{display:block;font-size:11px;color:var(--r);font-weight:600;white-space:normal;max-width:220px;text-align:left}

/* LIVE PHOTO ONLY */
.dz.dzlive{cursor:pointer;border-style:solid}
.dz.dzlive:hover{border-color:var(--mod)}
.camlive{margin:8px 0 0}
.lcmod .mbox video{max-height:60vh;object-fit:contain}

/* purchase desk: the shared live camera sits under the line, without a second card */
.pdesk [data-photobox].bare{padding:0;border:0;background:none;box-shadow:none;margin:6px 0 0}
.pdesk [data-photobox].bare .camwrap{max-width:100%}
.pdesk [data-photobox].bare .camlive{margin:4px 0 0}
.fastcam{max-width:440px;margin:6px 0 10px}

/* packaging: negative stock as one line under the tabs */
.negline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;margin:0 0 10px;border-radius:10px;
  background:#fef2f2;border:1px solid #fecaca;color:#991b1b;font-size:calc(var(--fs) - 1px)}
.negline svg{flex:0 0 auto}
.pkacts{white-space:nowrap;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.pkacts .mini{padding:0 9px}
.pkunit{color:var(--mut);font-weight:700;margin-left:4px}
.pdclosebar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.pdclosebar p{margin:0;max-width:640px}
@media (max-width:700px){.pdclosebar{flex-direction:column;align-items:stretch}.pdclosebar form{width:100%}.pdclosebar .btn{width:100%;justify-content:center}}
/* Sales Floor accept: a 0 in "Accepting now" is refused unless the row is ticked Later */
tr.sfbad td{background:var(--rb)}
.sfzero{display:block;color:var(--r);font-weight:700;font-size:10.5px}
.sfzero[hidden]{display:none}
/* Rating → Combos: a part without an approved rate is rated right on the card */
.cbri .cbrpr{display:flex;flex-direction:column;gap:2px;margin-left:auto;margin-right:8px}
.cbri .cbrpr small{font-size:10px;color:var(--ink3)}
.cbri .cbrpr input{width:84px;padding:4px 6px}
/* Loose Rakhi purchase — draft lines until Save & close challan */
.pddraftchip{background:var(--ab);color:#b45309}
.pdpill{background:var(--ab);color:#b45309}
tr.pddraft td{background:color-mix(in srgb,var(--ab) 35%,transparent)}
tr.pdedit td{outline:2px solid var(--a);outline-offset:-2px}
.pdth{width:36px;height:36px;object-fit:cover;border-radius:6px}
.pdediting{display:flex;align-items:center;gap:8px;padding:6px 10px;margin-bottom:8px;border-radius:8px;background:var(--ab);color:#b45309;font-weight:650;font-size:13px}
.pdediting[hidden]{display:none}
.mini.danger,summary.mini.danger{color:var(--r)}
.btn.danger{background:var(--r);border-color:var(--r)}
details.pdfix{display:inline-block;vertical-align:top}
details.pdfix>summary{list-style:none;cursor:pointer;display:inline-flex}
details.pdfix>summary::-webkit-details-marker{display:none}
.pdfixf{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end;margin-top:6px;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);min-width:260px}
.pdfixf label{display:flex;flex-direction:column;font-size:11px;color:var(--ink3);gap:2px}
.pdfixf input,.pdfixf select{width:110px}
details.pdsaved{margin-top:10px}
details.pdsaved>summary{cursor:pointer;color:var(--ink2)}
/* Packaging priority — "Pack in PK021 — 40 pcs for ORD-45" */
.pptag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:650;
  background:color-mix(in srgb,#dc2626 12%,transparent);color:#b91c1c;white-space:nowrap}
.pptag b{font-weight:800}
.ppline{margin:0 0 4px}
.ppwarn{display:none;margin-top:4px;font-size:11px;color:#b91c1c;font-weight:650}
tr.ppover .ppwarn{display:block}
tr.ppover td{background:color-mix(in srgb,#dc2626 7%,transparent)}
.ppconfirm{border:2px solid #dc2626;border-radius:10px;padding:10px 12px;margin:10px 0;background:color-mix(in srgb,#dc2626 6%,var(--panel))}
.ppconfirm[hidden]{display:none}
.cbrparts .cbri:has(.cbrpr){grid-column:span 2;min-width:0}
@media (max-width:700px){.cbrparts .cbri:has(.cbrpr){grid-column:auto}}
/* Rating — rate changes that need a reason, all together; a card per item on a phone */
.rvall input{padding:7px 9px;border:1px solid var(--line);border-radius:8px}
@media (max-width:700px){
  table.rvtbl thead{display:none}
  table.rvtbl tr{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px 10px;padding:10px 4px;border-bottom:1px solid var(--line)}
  table.rvtbl td{display:block;padding:0!important;border:0!important;text-align:left!important}
  table.rvtbl td:first-child,table.rvtbl td:nth-child(6),table.rvtbl td:nth-child(7){grid-column:1/-1}
  table.rvtbl td:nth-child(2)::before{content:"Previous ";color:var(--ink3);font-size:11px}
  table.rvtbl td:nth-child(3)::before{content:"Suggested ";color:var(--ink3);font-size:11px}
  table.rvtbl select,table.rvtbl input[data-rvnote]{width:100%!important}
}
.phl{display:none;color:var(--ink3);font-size:10.5px}
/* Loose purchase lines on a phone: one card per line, Edit / Delete always in reach */
@media (max-width:700px){
  .phl{display:inline}
  table.pdtbl thead{display:none}
  table.pdtbl tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 6px;border-bottom:1px solid var(--line)}
  table.pdtbl td{display:block;padding:0!important;border:0!important;text-align:left!important;background:none!important}
  table.pdtbl td:nth-child(2){flex:1 1 55%}
  table.pdtbl td:last-child{flex-basis:100%;display:flex;gap:8px;flex-wrap:wrap}
  table.pdtbl tr.pddraft{background:color-mix(in srgb,var(--ab) 35%,transparent)}
}

/* PACKAGING UNIT: the four-level block on the packaging form */
.pku{display:grid;grid-template-columns:minmax(180px,1.4fr) repeat(3,minmax(110px,1fr));gap:10px 14px;align-items:start}
.pku .f{margin:0}
.pkuout{grid-column:1/-1;font-size:13px;color:var(--ink2);padding:8px 12px;border-radius:10px;background:color-mix(in srgb,var(--mod) 7%,transparent);min-height:20px}
.pkuout:empty{display:none}
@media (max-width:640px){.pku{grid-template-columns:1fr 1fr}.pku .f:first-child{grid-column:1/-1}}
/* status chips stay on one line: Active · Hold · Inactive */
.f.wide .radios[data-inline]{flex-wrap:nowrap;overflow-x:auto}

/* COMPACT NEW SKU */
.fgrid.skuc{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
.fgrid.skuc .f{margin:0}
.skuconfirm:empty,#pairnote:empty{display:none}
.skuconfirm{margin:8px 0}
.skunums{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px 14px;margin:12px 0 6px;align-items:end}
.skunums .f{margin:0}
.skunums input{font-size:24px;font-weight:800;height:52px;width:100%}
.skusug{font-size:22px;font-weight:700;height:52px;display:flex;align-items:center;padding:0 12px;border-radius:10px;
  background:var(--sb);color:var(--ink3);border:1px dashed var(--line)}
.skusum{margin:6px 0 4px;padding:9px 12px;border-radius:10px;font-size:13.5px;background:color-mix(in srgb,var(--mod) 7%,transparent)}
@media (max-width:640px){.fgrid.skuc{grid-template-columns:1fr}.skunums{grid-template-columns:1fr 1fr}.skunums .f:first-child{grid-column:1/-1}}
input.badin{border-color:var(--r)!important;background:var(--rb)!important;color:var(--r)}

/* ONE FORM, TWO HALVES — going out to a filler, or already packed.
   Both are always visible and both may be left blank; the live one is given a
   left edge and a faint tint so the eye knows which question it is answering,
   without either half ever being hidden or moved. */
.skuhalf{border:1px solid var(--line);border-left:3px solid var(--line);border-radius:10px;
  padding:10px 12px 4px;margin:10px 0}
.skuhalf > h3{margin:0 0 8px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.skuhalf > h3 .muted{font-weight:500}
.skuhalf .fgrid{margin:0}
/* the five fill questions belong on one line — they are one thought */
.skuout .fgrid{display:grid;grid-template-columns:minmax(150px,1.35fr) repeat(4,minmax(94px,1fr));gap:8px 12px;align-items:start}
.skuhalf .fgrid > .f{margin:0;min-width:0}
.skuhalf .hint{font-size:11.5px;line-height:1.35;display:block}
.skuin .fgrid{grid-template-columns:minmax(220px,2fr) 3fr}
@media (max-width:1100px){.skuout .fgrid{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:700px){.skuout .fgrid,.skuin .fgrid{grid-template-columns:1fr 1fr}}
.skuhalf.on{border-left-color:var(--mod,#2563eb);background:color-mix(in srgb,var(--mod,#2563eb) 4%,transparent)}
.skuwill{background:color-mix(in srgb,var(--g,#16a34a) 9%,transparent);font-weight:600}
.skuwill:empty{display:none}
@media (max-width:640px){.skuhalf{padding:9px 10px 2px}}

/* TRAFFIC-LIGHT SUGGESTIONS — Go (pastel green) · Wait (pastel yellow) · Stop (pastel red).
   The word travels with the colour so it reads in sunlight and without colour vision. */
:root{--tlg-bg:#dcfce7;--tlg-fg:#166534;--tlg-bd:#86efac;
      --tly-bg:#fef9c3;--tly-fg:#854d0e;--tly-bd:#fde047;
      --tlr-bg:#fee2e2;--tlr-fg:#991b1b;--tlr-bd:#fca5a5}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--tlg-bg:#14532d66;--tlg-fg:#86efac;--tlg-bd:#166534;
  --tly-bg:#713f1266;--tly-fg:#fde68a;--tly-bd:#854d0e;--tlr-bg:#7f1d1d66;--tlr-fg:#fca5a5;--tlr-bd:#991b1b}}
:root[data-theme="dark"]{--tlg-bg:#14532d66;--tlg-fg:#86efac;--tlg-bd:#166534;
  --tly-bg:#713f1266;--tly-fg:#fde68a;--tly-bd:#854d0e;--tlr-bg:#7f1d1d66;--tlr-fg:#fca5a5;--tlr-bd:#991b1b}
.tl{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;
  line-height:1.5;white-space:nowrap;border:1px solid transparent;letter-spacing:0}
.tl b{font-weight:800}
.tl-go{background:var(--tlg-bg);color:var(--tlg-fg);border-color:var(--tlg-bd)}
.tl-wait{background:var(--tly-bg);color:var(--tly-fg);border-color:var(--tly-bd)}
.tl-stop{background:var(--tlr-bg);color:var(--tlr-fg);border-color:var(--tlr-bd)}
.skfchip .tl{font-size:10px;padding:1px 6px;margin-top:2px;align-self:flex-start}
/* rating entry, coloured live as the rate is typed */
input.tlin-go{background:var(--tlg-bg)!important;border-color:var(--tlg-bd)!important}
input.tlin-wait{background:var(--tly-bg)!important;border-color:var(--tly-bd)!important}
input.tlin-stop{background:var(--tlr-bg)!important;border-color:var(--tlr-bd)!important}
.tlrate{display:block;margin-top:3px}
.tlrate:empty{display:none}
.fgrid.skuc .f[data-w],.fgrid.skuc .f{grid-column:auto;max-width:none}
.skunums label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f:has(> .pku) > label:empty,.f:has(> .pku) > label:only-child{display:none}
.skfchip span.tl{display:inline-flex;flex-direction:row;white-space:nowrap}
.skfchip span.ubadge{align-self:flex-start}

/* ===== LABEL DESIGNER — one screen, compact ===== */
.ldcard{padding:12px 14px}
.ldtop{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px;margin:0 0 8px}
.ldtitle{display:flex;align-items:center;gap:6px;font-size:16px;margin-right:6px;align-self:center}
.ldinfo{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;
  border:1.5px solid var(--ink3);color:var(--ink3);font:italic 700 11px/1 Georgia,serif;cursor:help}
.ldinfo:hover,.ldinfo:focus{border-color:var(--mod);color:var(--mod);outline:none}
.ldpick{display:flex;flex-direction:column;gap:3px;min-width:280px;flex:0 1 380px}
.ldpick>span{font-size:11.5px;font-weight:700;color:var(--ink2);text-transform:uppercase;letter-spacing:.03em}
.ldpick select{height:44px;font-size:15px;font-weight:650;padding:0 40px 0 12px;border:2px solid var(--mod);border-radius:10px;
  background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230e7490' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  -webkit-appearance:none;appearance:none;cursor:pointer;color:var(--ink)}
.ldpick select:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--mod) 18%,transparent);outline:none}
.ldmanage{font-size:13px;font-weight:600;align-self:center;white-space:nowrap}
.ldbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:8px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:10px}
.ldsize{font-size:12.5px;font-weight:650;color:var(--ink2);background:var(--sb);padding:4px 10px;border-radius:999px}
.ldpv{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ldpv select{height:32px;min-width:200px;max-width:280px;font-size:13px}
.ldpv .pickwrap{min-width:220px;max-width:280px}
.ldpv .pickwrap input{height:32px;font-size:13px}
.ldpvcode{height:32px;width:110px;font-size:13px}
.ldz{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}
.ldz-stage{min-width:0}
.ldz-canvasbox{background:repeating-conic-gradient(var(--sb) 0 25%,transparent 0 50%) 0 0/14px 14px;border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;justify-content:center}
.ldz-canvas{box-shadow:0 1px 4px rgba(0,0,0,.18)}
.ldz-canvas:focus{outline:2px solid color-mix(in srgb,var(--mod) 40%,transparent);outline-offset:3px}
.ldz-live{font-size:12px;color:var(--ink2);margin:5px 2px 0;min-height:16px}
.ldz-add{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0 8px}
.ldz-add button{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 11px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.ldz-add button:hover{border-color:var(--mod);color:var(--mod)}
.ldz-items{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ldz-itemsh{font-size:12px;font-weight:700;padding:6px 10px;background:var(--sb);border-bottom:1px solid var(--line)}
#ldItems{max-height:168px;overflow:auto}
.ldit{display:grid;grid-template-columns:30px minmax(90px,.8fr) minmax(0,1.4fr) auto 28px;gap:8px;align-items:center;
  padding:5px 10px;border-bottom:1px solid var(--line);font-size:12.5px;cursor:pointer}
.ldit:last-child{border-bottom:0}
.ldit:hover{background:color-mix(in srgb,var(--mod) 5%,transparent)}
.ldit.on{background:color-mix(in srgb,var(--mod) 12%,transparent);box-shadow:inset 3px 0 0 var(--mod)}
.ldit.off{opacity:.55}
.ldit.bad b{color:var(--r)}
.lditk{font:700 11px/1 inherit;font-variant-numeric:tabular-nums;color:var(--ink3);text-align:center}
.lditv{color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lditp{font:11px inherit;font-variant-numeric:tabular-nums;color:var(--ink3);white-space:nowrap}
.lditeye{border:0;background:none;cursor:pointer;font-size:14px;color:var(--ink2);padding:0}
.ldz-side{position:sticky;top:70px}
.ldz-props{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--panel)}
.ldz-props label{display:flex;flex-direction:column;gap:2px;margin:0;min-width:0}
.ldz-props label>span{font-size:11px;font-weight:700;color:var(--ink2);text-transform:uppercase;letter-spacing:.02em}
.ldz-props input,.ldz-props select{height:32px;font-size:13px;padding:0 8px;min-width:0;width:100%}
.ldr1{margin-bottom:8px!important}
.ldr2{display:grid;grid-template-columns:1.3fr 1fr;gap:8px;margin-bottom:8px}
.ldr4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:6px;align-items:end;margin-bottom:8px}
.ldr4 em{font-size:11px;color:var(--ink3);font-style:normal;padding-bottom:9px}
.ldz-props input.ldn{text-align:center;font-variant-numeric:tabular-nums;padding:0 4px;font-weight:650}
.ldz-props input.bad{border-color:var(--r);background:var(--rb)}
.ldrow{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end;margin-bottom:8px}
.ldfs{width:54px}
.ldseg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.ldseg button{height:30px;padding:0 9px;border:0;border-right:1px solid var(--line);background:var(--panel);font-size:12px;font-weight:600;color:var(--ink2);cursor:pointer}
.ldseg button:last-child{border-right:0}
.ldseg button.on{background:var(--mod);color:#fff}
.ldtogs{gap:6px}
.ldtog{height:30px;min-width:34px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-size:12.5px;color:var(--ink2);cursor:pointer}
.ldtog.on{background:color-mix(in srgb,var(--mod) 14%,transparent);border-color:var(--mod);color:var(--ink)}
.ldz-save{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px -14px -12px;padding:10px 14px;
  background:var(--panel);border-top:1px solid var(--line);border-radius:0 0 12px 12px;box-shadow:0 -4px 10px rgba(0,0,0,.05)}
.ldz-save .ldz-del{color:var(--r)}
#ldDirty{color:var(--a);font-weight:650}
.ldz-safe{margin:0 0 8px}
.ldz-phone{display:none}
@media (max-width:900px){
  .ldz{grid-template-columns:1fr}
  .ldz-side,.ldz-add,.ldz-save,.ldz-safe .btn2{display:none!important}
  .ldz-phone{display:block;margin:8px 0 0}
  .ldpick{min-width:0;flex:1 1 100%}
  .ldit{grid-template-columns:26px minmax(70px,1fr) minmax(0,1fr)}
  .ldit .lditp,.ldit .lditeye{display:none}
}
.ldz-canvasbox{padding:10px}
.ldz-safe{border:1px solid var(--tlr-bd,#fca5a5);background:var(--tlr-bg,#fee2e2);border-radius:10px;padding:6px 10px;font-size:12.5px}
.ldz-safe .ldz-safe-h{font-weight:700;color:var(--r);margin-bottom:4px}
.ldz-safe .ldz-safe-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:3px 0}
.ldz-safe .btn2,.ldz-safe .ghost,.ldz-props .btn2{height:28px!important;min-height:0!important;padding:0 10px!important;font-size:12px!important}
.ldz-safe .ldz-chk{font-size:12px}
.ldtest{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding-left:10px;border-left:1px solid var(--line)}
.ldtest input{width:42px;height:34px;text-align:center;font-weight:700}
/* designer canvas: the TSC prints font 0 = a bold condensed face — preview in a narrow face so what you see matches paper */
.ldz-el{font-family:'Arial Narrow','Roboto Condensed','DejaVu Sans Condensed','Liberation Sans Narrow',sans-serif;font-stretch:condensed}
/* SEND TO DISPATCH after a Fill Item receive */
.oahead{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.oalot{font-size:20px;line-height:1.2}
.oatbl input.oain{width:76px;text-align:right;font-weight:700}
.oatbl tr.oa-on td{background:var(--tlg-bg,#e7f7ec)}
.oasum{margin:12px 0 4px;font-size:15px}
.oaerr{color:#b91c1c;font-weight:600}
.oabtns{gap:10px;margin-top:8px;flex-wrap:wrap}
.oacust{font-size:13px}
@media (max-width:700px){.oatbl td:nth-child(1),.oatbl th:nth-child(1){display:none}.oatbl input.oain{width:56px}
 .oatbl .oaprio details{display:none}.oatbl th:nth-child(3){font-size:0}.oatbl th:nth-child(3)::after{content:"Priority";font-size:11px}
 .oatbl td,.oatbl th{padding-left:4px;padding-right:4px}}
/* CLOSING ORDERS */
.ordcx{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;border:1px solid var(--line);color:var(--mut);background:var(--panel)}
.ordcx:hover{color:var(--r,#b91c1c);border-color:var(--r,#b91c1c)}
.ordcwhy{max-width:150px;white-space:normal}
.ordcban{display:flex;gap:12px;align-items:center;padding:12px 14px;margin:0 0 12px;border-radius:12px;border:1px solid var(--tlr-bd,#fca5a5);background:var(--tlr-bg,#fee2e2);color:var(--tlr-fg,#991b1b)}
.ordcban>div{flex:1}
#ordcbox select,#ordcbox textarea{width:100%}
/* LABOUR RATE ON EVERY JOB */
.lrbox{display:flex;align-items:center;gap:6px}
.lrbox .lrrs{color:var(--mut);font-weight:600}
.lrbox input.lrin{width:96px;font-weight:700;text-align:right}
.lrsrc{color:var(--mut);white-space:nowrap}
.lrf.lrnone input.lrin{border-color:var(--tlr-bd,#fca5a5);background:var(--tlr-bg,#fee2e2)}
.lrf.lrchg input.lrin{border-color:var(--tly-bd,#fde047);background:var(--tly-bg,#fef9c3)}
.lrmore{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.lrmore[hidden]{display:none}
.lrmore input[type=text]{flex:1;min-width:180px}
.lrkeep{display:flex;gap:5px;align-items:center}
.lrtbl .lrw{margin:2px 4px 2px 0}
.lrf label.lrkeep{display:flex!important;flex-direction:row;gap:6px;align-items:center;font-weight:500;margin:0;text-transform:none;letter-spacing:0}
.lrf label.lrkeep input{width:auto!important;min-width:0;margin:0;flex:none}
/* FILL ITEM — READY-TO-SAVE JOBS */
.fpbar{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin:14px 0 6px}
.fpbar h3{margin:0}
.fpall{display:flex;gap:6px;align-items:center}
.fpall select{min-width:190px}
.fpkey{display:flex;gap:6px;align-items:center}
.fpdot{display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--tlg-bg,#dcfce7);border:1px solid var(--tlg-bd,#86efac)}
tr.fpgreen td{background:var(--tlg-bg,#dcfce7)!important}
tr[data-line] select.fpW{min-width:150px;max-width:200px}
tr[data-line] input.fpR{width:64px;text-align:right;font-weight:700}
tr[data-line] .fprs{color:var(--mut);margin-right:2px}
tr[data-line] input.fpD{width:132px}
tr[data-line] input.fpL{width:54px;text-align:right}
tr.fpchg input.fpR{border-color:var(--tly-bd,#fde047);background:var(--tly-bg,#fef9c3)}
tr.fpnone input.fpR{border-color:var(--tlr-bd,#fca5a5);background:var(--tlr-bg,#fee2e2)}
.fpwhy{margin:10px 0;max-width:520px}
.fpwhy[hidden]{display:none}
.pknew .fpjob{display:flex;flex-direction:column;gap:5px;min-width:250px}
.pknew .fpjob2{display:flex;gap:6px;align-items:center;flex-wrap:nowrap}
.pknew .fpcell{display:flex;align-items:center;gap:2px;margin:0;font-weight:400}
.pknew select.fpW{min-width:0;width:100%;max-width:260px}
.pknew input.fpR{width:58px}
.pknew input.fpD{width:128px;padding-left:6px;padding-right:4px}
.pknew input.fpL{width:44px}
.pknew select.pkSel{max-width:190px}
.pknew input.rq,.pknew input.pq{width:74px!important}
.pknew td [data-exp]{font-size:12px;display:inline-block;max-width:150px;line-height:1.3}
.pknew .fpcell svg{color:var(--mut)}
.pknew td .smartsel,.pknew td .smartsel input{min-width:0!important;max-width:200px}
.pknew td select.pkSel{min-width:0!important;max-width:200px}
.pknew .fpjob{min-width:0;width:212px}
.pknew .fpjob2{flex-wrap:wrap;row-gap:5px}
.pknew input.fpD{width:150px}
.pknew td [data-exp]{max-width:130px}
/* the job line under each Fill Item row */
.pknew tr.fpsub>td{padding-top:0!important;border-top:0!important}
.pknew tr.fpsub[hidden]{display:none}
.pknew .fpjob{display:flex!important;flex-direction:row!important;flex-wrap:wrap;gap:8px 16px;align-items:center;width:auto!important;min-width:0!important;padding:4px 0 8px 58px}
.pknew .fpcell{display:flex;align-items:center;gap:6px;margin:0;font-weight:400;font-size:12.5px;color:var(--mut)}
.pknew .fpcell>span:first-child{white-space:nowrap}
.pknew select.fpW{width:220px!important;max-width:220px}
.pknew input.fpD{width:150px!important}
.pknew tr.fpsub.fpchg input.fpR{border-color:var(--tly-bd,#fde047);background:var(--tly-bg,#fef9c3)}
.pknew tr.fpsub.fpnone input.fpR{border-color:var(--tlr-bd,#fca5a5);background:var(--tlr-bg,#fee2e2)}
@media (max-width:700px){.pknew .fpjob{padding-left:0;gap:6px 10px}.pknew select.fpW{width:100%!important;max-width:none}}
@media (max-width:700px){.pknew tr.fpsub .fpjob{position:sticky;left:0;max-width:calc(100vw - 48px);box-sizing:border-box}
 .pknew .fpcell{flex-wrap:nowrap}.pknew input.fpD{width:140px!important}}
.skctbl tr.skc-clash td,.skctbl tr.skc-invalid td{background:var(--tlr-bg,#fee2e2)}
.skcshare{margin:6px 0 0 18px}
/* LABEL ROLLS & STICKERS */
.lrollgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:14px}
.lrollcard{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--panel)}
.lrollcard.off{opacity:.6}
.lrollhead{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.lrollhead .mono{font-size:15px}
.lrollname{flex:1;min-width:140px}
.lrollf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 10px}
.lrollf label{display:flex;flex-direction:column;gap:3px;font-size:11.5px;font-weight:600;color:var(--mut);margin:0}
.lrollf label em{font-style:normal;font-weight:400}
.lrollf input,.lrollf select{width:100%;min-width:0}
.lrollfoot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.lrollwhy{flex:1;min-width:140px}
.lrolladd{margin-top:12px}
.lrolladd form{gap:8px;flex-wrap:wrap;margin-top:8px}
.lrollinl{gap:6px;flex-wrap:nowrap}
.lrollinl select{min-width:190px}
@media (max-width:700px){.lrollgrid{grid-template-columns:1fr}.lrollf{grid-template-columns:repeat(2,minmax(0,1fr))}.lrollinl{flex-wrap:wrap}}
.lrollcard input:not([type=checkbox]),.lrollcard select,.lrolladd input{height:34px;padding:4px 9px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font:inherit;font-size:13.5px;box-sizing:border-box}
.lrollcard input:focus,.lrollcard select:focus,.lrolladd input:focus{outline:0;border-color:var(--act,#2563eb);box-shadow:0 0 0 3px color-mix(in srgb,var(--act,#2563eb) 15%,transparent)}
.lrollcard input[type=number]{text-align:right;font-weight:600}
.lrollname{color:var(--mut)}
.lrollfoot label{display:flex;gap:5px;align-items:center}
.nsteps{gap:8px;flex-wrap:wrap;margin-top:10px}
.ptgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:8px;margin-top:8px}
.ptrow{display:flex;gap:8px;align-items:center;justify-content:space-between;margin:0;font-weight:500}
.ptrow select{min-width:120px}

/* ===== THE SEASON CLOCK ===== */
.seasnow{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.seasbig{display:flex;gap:14px;align-items:center;min-width:250px}
.seasd{font-size:40px;font-weight:800;letter-spacing:-1px;line-height:1}
.seasfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;flex:1;min-width:260px}
.seasfact{border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:var(--panel)}
.seasfl{font-size:11px;text-transform:uppercase;letter-spacing:.5px;opacity:.65}
.seasfv{font-weight:700;margin:2px 0 3px}
.seasform{display:block}
.seasradio{display:block;border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin:6px 0;cursor:pointer}
.seasradio.on{border-color:var(--g);box-shadow:inset 0 0 0 1px var(--g)}
.seasradio b{display:inline-block;margin-left:6px}
.seasradio span{display:block;margin:2px 0 0 24px}
.seasrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px}
.seasrow label{display:flex;gap:6px;align-items:center}
.seasnum{width:74px;text-align:right}
.seasbars{display:flex;gap:3px;margin:10px 0 14px;min-height:52px}
.seasbar{border-radius:7px;padding:7px 8px;color:#fff;display:flex;flex-direction:column;justify-content:center;overflow:hidden;min-width:0}
.seasbar b,.seasbar span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}
.seasbar span{opacity:.85}
.seasbar.now{outline:2px solid var(--ink);outline-offset:1px}
.seasbar.tl-g{background:var(--g)}.seasbar.tl-a{background:var(--a)}
.seasbar.tl-r{background:var(--r)}.seasbar.tl-m{background:#64748b}
.seastbl tr.on{background:color-mix(in srgb,var(--g) 12%,transparent)}
.seasdates input[type=date]{width:150px}
.seaswarn{border:1px solid var(--a);border-radius:10px;padding:10px 12px;margin:8px 0}
.seasrepair{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.seasonpill b{font-weight:800}
@media(max-width:640px){
  .seasd{font-size:32px}
  .seasbars{flex-direction:column;min-height:0}
  .seasbar{flex:none !important}
  .seasbar b,.seasbar span{display:inline;white-space:normal}
  .seasbar span{margin-left:8px}
  .seasdates input[type=date]{width:130px}
}
.seasready{display:inline-flex;align-items:center;gap:5px;border:1px solid currentColor;border-radius:999px;padding:2px 9px;text-decoration:none;font-size:12px}
@media(max-width:640px){
  .seasstages th:nth-child(5),.seasstages td:nth-child(5){display:none}
  .seasstages th:nth-child(4),.seasstages td:nth-child(4){display:none}
}

/* ===== LABOUR PLANNING ===== */
.lpnow{display:flex;gap:11px;align-items:center;border:1px solid var(--line);border-radius:11px;padding:10px 13px;margin:10px 0}
.lpnow.tl-r{border-color:var(--r);color:var(--r);background:color-mix(in srgb,var(--r) 7%,transparent)}
.lpnow.tl-a{border-color:var(--a);color:var(--a);background:color-mix(in srgb,var(--a) 8%,transparent)}
.lpnow.tl-g{border-color:var(--g);color:var(--g);background:color-mix(in srgb,var(--g) 7%,transparent)}
.lpnow b{color:var(--ink)}
.lpnow>div{flex:1;min-width:0}
.lpnow .small{opacity:.8;font-weight:400}
.lpgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.lpcard{border:1px solid var(--line);border-radius:11px;padding:9px 11px;transition:border-color .12s}
.lpcard.st-absent{border-color:var(--r);background:color-mix(in srgb,var(--r) 7%,transparent)}
.lpcard.st-half{border-color:var(--a);background:color-mix(in srgb,var(--a) 7%,transparent)}
.lpcard.st-off{opacity:.55}
.lphead{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;margin-bottom:7px}
.lphead b{flex:1;min-width:0}
.lpbtns{display:flex;gap:5px}
.lpb{flex:1;text-align:center;border:1px solid var(--line);border-radius:7px;padding:5px 3px;font-size:12px;cursor:pointer;user-select:none}
.lpb input{position:absolute;opacity:0;pointer-events:none}
.lpb.on{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.lpb-absent.on{background:var(--r);border-color:var(--r);color:#fff}
.lpb-half.on{background:var(--a);border-color:var(--a);color:#fff}
.lpnote{width:100%;margin-top:6px;font-size:12px}
.lpbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
.lpbig{font-size:22px;font-weight:800;margin:4px 0 8px}
.lpbig .small{font-weight:400;font-size:13px;opacity:.75}
.lpcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.lpcol h4{margin:0 0 6px;font-size:13px;display:flex;gap:6px;align-items:center}
.lpcol ul{margin:4px 0 0 16px;padding:0}
.lpq{width:86px;text-align:right}
.lpplan tr.on{background:color-mix(in srgb,var(--g) 10%,transparent)}
.lpplan tfoot th{border-top:2px solid var(--line)}
.lpscroll{overflow-x:auto}
.lpskills select,.lpmaster select{min-width:96px}
.lpdays{white-space:nowrap}
.lpd{display:inline-block;border:1px solid var(--line);border-radius:6px;padding:3px 6px;margin:1px;font-size:11px;cursor:pointer}
.lpd input{position:absolute;opacity:0;pointer-events:none}
.lpd.on{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.lpd.def.on{opacity:.45}
.tabs.sub .tab{font-size:12px;padding:5px 10px}
@media(max-width:640px){
  .lpgrid{grid-template-columns:1fr}
  .lpbig{font-size:19px}
  .lpq{width:70px}
  .lpd{padding:2px 4px;font-size:10px}
}
.lpva{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;margin-bottom:10px}
.lpvatot b{font-size:26px;font-weight:800}
.lpvatot .small{font-weight:400;opacity:.8}
.lpvatbl select{min-width:150px}
.lppat{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* traffic-light text colours — the class was used in several places with no
   rule behind it, so the tone never showed */
.tl-r{color:var(--r)}
.tl-a{color:var(--a)}
.tl-g{color:var(--g)}
.tl-m{color:var(--ink3)}
.chip.tl-r{border-color:var(--r)}
.chip.tl-a{border-color:var(--a)}
.chip.tl-g{border-color:var(--g)}
.seasbar.tl-g,.seasbar.tl-a,.seasbar.tl-r,.seasbar.tl-m,.lpb-absent.on,.lpb-half.on{color:#fff}
.slbox{padding:10px 13px}
.slboxf{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.slboxf label{display:flex;gap:6px;align-items:center}
.slboxf .numin{width:72px}
.mgnow{display:flex;flex-wrap:wrap;gap:14px;align-items:baseline}
.mgbig b{font-size:27px;font-weight:800}
.mgbig .small{font-weight:400;opacity:.8}
.mgtbl td,.mgtbl th{padding:4px 8px}
.mgtbl .mgsum th{border-top:1px solid var(--line)}
.mgrow{display:block;font-size:11px;font-weight:700;margin-top:2px;white-space:nowrap}
.opaste{margin:10px 0;padding:11px 13px;border:1px solid var(--line);border-radius:11px}
.opaste textarea{width:100%;font-family:ui-monospace,Menlo,monospace;font-size:13px;margin-top:6px}
.opb{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin-top:8px}
.opres{margin-top:8px;padding:7px 10px;border:1px solid currentColor;border-radius:8px}
.onotype{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:8px 0 2px}
.onotype .mini{flex:none}
.owhy{display:block;margin-top:3px;font-size:11px;font-style:italic}
.aarow{border:1px solid var(--line);border-radius:11px;padding:10px 12px;margin:8px 0}
.aarow.off{opacity:.55}
.aahead{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;margin-bottom:4px}
.aahead b{flex:1;min-width:0}
.aaform{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.aaform input{flex:1;min-width:220px}
/* ONE TAP ON A PHONE: an approval is a decision, not a form to fill in, so on a
   narrow screen its buttons are full width and thumb-sized. */
@media(max-width:640px){
  .apprside .btnrow{flex-direction:column;gap:8px}
  .apprside .btnrow>button{width:100%;justify-content:center;min-height:46px;font-size:15px}
  .aaform{flex-direction:column;align-items:stretch}
  .aaform input,.aaform button{width:100%}
}

/* SUPPLIER ORDERS — grouped the way a purchase order is actually sent: one
   block per supplier, with its own header line carrying the date and value. */
.suprow{border:1px solid var(--line);border-radius:10px;margin:0 0 12px;overflow:hidden;background:var(--panel)}
.suphead{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:9px 12px;background:var(--panel2,var(--bg));border-bottom:1px solid var(--line)}
.suprow .tbl{margin:0}
@media(max-width:640px){
  .suphead{gap:6px;font-size:13px}
  .suprow{margin:0 0 10px}
}
/* On a phone the supplier table has to lose its optional columns: the date the
   order is due is already in the block header, so value, wanted-by and why are
   detail a buyer reads at a desk, not on the floor. */
@media(max-width:640px){ .supx{display:none} }

/* MARKETING — the campaign planning form. A row of labelled fields that wraps
   on a narrow screen instead of squeezing every input to a thumbnail. */
.frow{display:flex;flex-wrap:wrap;gap:10px 14px;margin:0 0 10px;align-items:flex-end}
.frow>label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink2);flex:1 1 180px;min-width:0}
.frow>label>select,.frow>label>input{width:100%}
.inlf{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.inlf select,.inlf input{max-width:100%}
@media(max-width:640px){ .frow>label{flex:1 1 100%} }

/* ===== EVERY GRID SORTS AND FILTERS =====
   The heading becomes the control: click to sort, the arrow says which way.
   The funnel opens one filter box per column, folded away until asked for so
   no screen gets taller for a feature nobody is using on it right now. */
.g-hide{display:none!important}
.gbar{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.gbtn{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border:1px solid var(--line);
  border-radius:999px;background:var(--panel);color:var(--ink2);font-size:11.5px;font-weight:600;cursor:pointer}
.gbtn[hidden]{display:none}
.gbtn:hover{border-color:var(--ink3)}
.gbtn.on{border-color:var(--mod,var(--g));color:var(--mod,var(--g));
  background:color-mix(in srgb,var(--mod,var(--g)) 10%,var(--panel))}
.gcount{font-size:11px;color:var(--mut);font-variant-numeric:tabular-nums}
th.gsort{cursor:pointer;user-select:none;position:relative;padding-right:16px}
th.gsort:hover{color:var(--ink)}
th.gsort::after{content:"";position:absolute;right:5px;top:50%;margin-top:-2px;
  border:4px solid transparent;border-top-color:currentColor;opacity:.18}
th.gsort.gasc::after{margin-top:-6px;border-top-color:transparent;border-bottom-color:currentColor;opacity:.95}
th.gsort.gdesc::after{opacity:.95}
tr.gfrow th{padding:3px 4px!important;background:var(--sb)}
tr.gfrow input{width:100%;min-width:0;box-sizing:border-box;padding:2px 6px;font-size:11px;
  border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink)}
tr.gfrow input:focus{outline:none;border-color:var(--mod,var(--g))}
/* GROUP BY — the same list gathered into heaps, each heap totalled.
   The heading row is deliberately quiet: it is scaffolding around the data,
   not data, so it borrows the header tint and adds no colour of its own. */
.ggl{gap:6px;padding-right:4px;cursor:default}
.ggl select{border:0;background:none;color:inherit;font:inherit;font-weight:700;
  cursor:pointer;padding:0 2px;width:auto;max-width:130px;flex:0 0 auto}
.gbar > *{flex:0 0 auto}
.ggl select:focus{outline:none}
.ggl:has(select:not([value="-1"])){border-color:var(--mod,var(--g))}
tr.ggrp{cursor:pointer}
tr.ggrp > td{background:var(--sb);border-top:1px solid var(--line);
  padding-top:5px!important;padding-bottom:5px!important;font-size:12px}
tr.ggrp > td.ggl-c{font-weight:700;white-space:nowrap}
tr.ggrp .ggn{font-weight:500;color:var(--mut);margin-left:6px;font-size:11px}
tr.ggrp .ggsum{font-weight:700;font-variant-numeric:tabular-nums}
tr.ggrp .gcar{display:inline-block;width:0;height:0;margin-right:6px;vertical-align:middle;
  border:4px solid transparent;border-top-color:currentColor;opacity:.55}
tr.ggrp.gfold .gcar{border-top-color:transparent;border-left-color:currentColor;
  margin-right:8px;margin-bottom:1px}
tr.gfoldrow{display:none}

/* DOORS, NOT TABS — the screens this one leans on, in the right-hand panel.
   Set as a list of destinations with an arrow, so nothing about them reads as
   a control that changes the page you are standing on. */
.relnav{display:flex;flex-direction:column;gap:2px;margin:0}
.relnav .relh{display:none}
.relitem{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;
  color:var(--ink2);font-size:12.5px;font-weight:600;text-decoration:none;border:1px solid transparent}
.relitem:hover{background:var(--sb);border-color:var(--line);color:var(--ink)}
.relitem > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.relitem .relgo{opacity:.4;flex:0 0 auto}
.relitem:hover .relgo{opacity:.85}
.kglbl.krel{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
/* before the panel is built (or if its script never runs) the links still read
   as a plain list rather than as a row of buttons */
main .relnav{max-width:320px;margin:0 0 10px}

/* Receive carries two actions on a row now — they sit beside each other, or
   forty rows each grow a second line for no reason */
.pkrecv td.jc-act{white-space:nowrap}
.pkrecv td.jc-act .mini{margin:0 0 0 2px}
@media (max-width:760px){.gbar{margin-bottom:4px}.gbtn span{display:none}
  .ggl span{display:inline}.ggl select{max-width:96px}}

/* CLUBBED BILLING — the bar that appears when more than one of a customer's
   estimates is ticked for a single invoice. */
.clubchk{vertical-align:middle;margin-right:6px}
.clubbar{display:flex;align-items:center;gap:10px}
.clubbar .grow{flex:1}

/* WITH LABOUR — the time-used bar. A glance says how much rope is left. */
.lhbar{display:inline-block;width:52px;height:6px;border-radius:99px;margin-right:5px;
  background:color-mix(in srgb,var(--c,var(--ink3)) 16%,transparent);vertical-align:middle;overflow:hidden}
.lhbar i{display:block;height:100%;width:var(--p,0);background:var(--c,var(--ink3));border-radius:99px}
@media (max-width:760px){
  /* WITH LABOUR ON A PHONE. Nine columns do not fit, and the two that matter —
     why it is raised, and the button to ring the person — were the two that
     scrolled off. So each job becomes a card: who has it and what, then the
     reason, then the buttons, in that order. Same shape as the planning table. */
  .lhtbl thead,.lhtbl tfoot{display:none}
  .lhtbl,.lhtbl tbody{display:block;width:100%}
  .tw:has(.lhtbl){overflow:visible}
  .lhtbl tr[data-line]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px;
    padding:11px 12px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;
    background:var(--panel);height:auto!important}
  .lhtbl tr[data-line] td{display:block;padding:0!important;border:0!important;min-width:0;
    text-align:left!important;height:auto!important;max-height:none!important;overflow:visible;white-space:normal}
  .lhtbl td[data-l]::before{content:attr(data-l);display:block;font-size:10.5px;font-weight:600;
    color:var(--ink3);letter-spacing:.02em;margin-bottom:1px}
  .lhtbl td[data-l="Holding"],.lhtbl td[data-l="Waiting for it"],
  .lhtbl td[data-l="What to do"],.lhtbl td.lhact{grid-column:1/-1}
  .lhtbl td.lhact{display:flex!important;gap:8px;margin-top:6px}
  .lhtbl td.lhact a{flex:1;justify-content:center}
}

/* ATTENDANCE AS A ROLL CALL. One row per person, status changed on the row.
   The row itself takes the colour of the answer, so a glance down the list
   finds the exceptions without reading a word. */
.lptbl td{vertical-align:middle}
.lptbl .lpbtns{display:inline-flex;gap:4px;justify-content:center}
.lptbl .lpbtns .lpb{white-space:nowrap;padding:5px 10px;flex:none}
.lptbl td[data-l="Here today"]{width:1%}
.lptbl .lpnote{width:100%;min-width:0;padding:3px 8px;font-size:12px;
  border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--ink)}
.lprow.st-half td{background:color-mix(in srgb,var(--a) 8%,transparent)}
.lprow.st-absent td{background:color-mix(in srgb,var(--r) 8%,transparent)}
@media (max-width:760px){
  .lptbl thead{display:none}
  .lptbl,.lptbl tbody{display:block;width:100%}
  .tw:has(.lptbl){overflow:visible}
  .lptbl tr[data-line]{display:grid;grid-template-columns:1fr;gap:5px;padding:10px 12px;
    border:1px solid var(--line);border-radius:12px;margin-bottom:7px;background:var(--panel);height:auto!important}
  .lptbl tr[data-line] td{display:block;padding:0!important;border:0!important;text-align:left!important;
    height:auto!important;max-height:none!important;white-space:normal}
  .lptbl td[data-l="Department"]::before{content:attr(data-l);display:block;font-size:10.5px;
    font-weight:600;color:var(--ink3)}
  .lptbl td[data-l="Worker"]::before,.lptbl td[data-l="Here today"]::before,.lptbl td[data-l="Reason"]::before{display:none}
  .lptbl .lpbtns{display:flex;width:100%}
  .lptbl .lpbtns .lpb{flex:1;text-align:center}
}

/* ONE LINE AT THE TOP. The tabs sit beside the heading rather than under it,
   and where the heading was only repeating the ribbon there is no heading at
   all — so a screen opens on its content instead of on its own name. */
.crumbq{display:none}
.crumb.hastabs{margin-bottom:8px}
.crumb .tabs.intab,.crumb .ctabs.intab{margin-bottom:0;flex:0 1 auto;min-width:0;padding-bottom:0}
.crumb.hastabs .pageact{margin-left:auto}
/* line 3 is the tabs: the dot that marked an empty heading line is not drawn */
.crumb.hastabs > .mdot{display:none}
@media (max-width:760px){
  .crumb.hastabs{gap:7px}
  /* on a phone the tabs take the line and the search glyph sits at its end;
     the actions and list controls follow on the next line — never a line
     holding one lone button */
  .crumb .tabs.intab,.crumb .ctabs.intab{flex:1 1 200px;min-width:0;order:2}   /* the tabs lead the line; the panel button and the search glyph follow */
  /* line 3 is ONE line on a phone, like lines 1 and 2: a tab row wider than
     the screen scrolls sideways (lit tab brought into view) instead of
     stacking into two or three lines */
  .crumb .tabs.intab,.crumb .ctabs.intab{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .crumb .tabs.intab::-webkit-scrollbar,.crumb .ctabs.intab::-webkit-scrollbar{display:none}
  .crumb .tabs.intab>.tab,.crumb .ctabs.intab>.ct{flex:0 0 auto;white-space:nowrap;scroll-snap-align:center}
  .crumb.hastabs .pfind{order:3;align-self:flex-start}
  .crumb.hastabs .pageact{margin-left:0;order:4;width:100%}
  .crumb.hastabs .kpibtn{order:3;align-self:flex-start}
}

/* A SUB-ROW TOO WIDE TO CENTRE scrolls instead, and says so with a fade at the
   edge — an item nobody can see is an item nobody can use. */
.rpanel.rover{position:relative;scroll-padding-inline:12px}
.rpanel.rover::after{content:"";position:sticky;right:0;flex:none;width:26px;height:100%;
  margin-left:-26px;pointer-events:none;
  background:linear-gradient(to right,transparent,color-mix(in srgb,var(--c) 10%,var(--panel)))}

/* A KEY FOR EVERY TAB — shown only while Alt is held, so no screen carries a
   permanent mark for a hint that is one keypress away. */
.ct .tabkey,.tab .tabkey,.tabkey{display:none}
body.showkeys .ct .tabkey,body.showkeys .tab .tabkey,body.showkeys .tabkey{display:inline-block;margin-left:6px;padding:0 4px;border-radius:4px;
  font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.04em;line-height:1.5;
  background:var(--ink,#111);color:var(--panel,#fff);opacity:.85;vertical-align:middle}

/* Rakhi qty and its unit read as one control, because they are one answer */
.qtyuom{display:flex;align-items:stretch;gap:0;min-width:0}
.qtyuom > input{flex:1;min-width:0;border-top-right-radius:0;border-bottom-right-radius:0}
.qtyuom > select{flex:0 0 auto;width:auto;padding:0 6px;border-left:0;
  border-top-left-radius:0;border-bottom-left-radius:0;font-weight:700;font-size:12px;cursor:pointer}
.hint.overmax{color:var(--r)}

/* THE BLOCKED ROWS on the packing worklist. Kept, because "we owe 294 and
   cannot start" is the most important thing on the floor — and dimmed, because
   nothing on the row can be acted on here. */
tr.pwshort > td{opacity:.55}
tr.pwshort:hover > td{opacity:.9}
tr.pwshort .pill.pr{opacity:1}

/* the computed half of a job line: stated, not typed */
.fpjob .fpcell.fplab{min-width:0}
.fpjob .fplab b{font-variant-numeric:tabular-nums;font-size:13px}
.fpgate{font-weight:700}
form [data-primary]:disabled{opacity:.45;cursor:not-allowed}
/* Status is one word; the reason is on hover */
.pknew td:last-child .pill,.pknew .pill{white-space:nowrap}
.fpjob .fpsug{font-style:normal;font-size:9.5px;font-weight:700;opacity:.6;margin-left:4px}

/* THE ALERT TAB, WHEN IT IS ACTUALLY AN EMERGENCY.
   Red only when something is late or an order is at risk — a tab that is
   always red is a tab nobody sees. */
.pktabs.pkred .ct[data-ctab=alert]{border-color:var(--r);background:var(--rb,#fee2e2)}
.pktabs.pkred .ct[data-ctab=alert] b{color:var(--r)}
.pktabs.pkred .ct[data-ctab=alert] i{background:var(--r);color:#fff}
@keyframes pkredpulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.35)}50%{box-shadow:0 0 0 5px rgba(220,38,38,0)}}
.pktabs.pkred .ct[data-ctab=alert]{animation:pkredpulse 2.4s ease-out 3}

/* the grid controls, sitting on the card's own header line instead of a band */
.chead .gbar.ghead{margin:0;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.chead > .cact{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.chead .gbar.ghead .gbtn{padding:2px 9px;font-size:11px}
.chead .gbar.ghead .gcount{font-size:10.5px}
@media (max-width:760px){.chead .gbar.ghead{width:100%;justify-content:flex-start}}
.crumb .pageact .gbar.ghead{margin-left:4px}

/* a batch code is one word; the column's filter box must not split it */
.jobcards td.jc-code{white-space:nowrap}

/* EVERY RAKHI COUNT CARRIES ITS UNIT — the typed box, its unit, the pieces note */
.rqwrap{display:inline-grid;grid-template-columns:minmax(56px,1fr) auto;gap:3px 4px;align-items:center;max-width:100%;vertical-align:middle}
.rqwrap .rqv{min-width:0;width:100%;margin:0}
.rqwrap .rqu{width:auto;min-width:0;margin:0;padding:5px 7px;font:inherit;font-size:12px;font-weight:700;letter-spacing:.03em;
  line-height:1.2;border:1px solid var(--line);border-radius:8px;background:var(--sb);color:var(--ink2);cursor:pointer;
  text-transform:uppercase}
.rqwrap .rqu:hover{border-color:var(--mod);color:var(--ink)}
.rqwrap .rqn{grid-column:1/-1;font-size:11px;color:var(--ink3);line-height:1.2}
.rqwrap .rqn:empty{display:none}
td .rqwrap{grid-template-columns:minmax(46px,64px) auto}
.f .rqwrap{display:grid;grid-template-columns:1fr auto}

/* the list controls on line 3 stay compact: the Group select takes its own width */
.crumb .pageact .gbar .ggl select{width:auto;max-width:150px}
.crumb .pageact .gbar{flex-wrap:nowrap}
/* line 3 is shared by tabs, actions and the list controls: Search folds to
   its glyph there (the tooltip still says what it is) so the line holds */
.crumb.hastabs .pfind .pfbtn span{display:none}
.crumb.hastabs .pfind .pfbtn{padding-left:10px;padding-right:10px}

/* PHONE RIBBON, ONE LINE EACH.
   The main menu and the section menu were sized for a laptop and then squeezed
   onto a phone: the main row showed two or three modules, the section row
   wrapped to two lines. Both are about a third smaller now — smaller type,
   tighter padding, no icon in the section row — so the section's screens sit
   on ONE line (they scroll sideways only in the rare group too long for it)
   and the main row shows twice as many modules, with the lit one kept in view. */
@media (max-width:760px){
  html.rib{--rib:60px;--top:60px}
  html.rib .rtabs{height:32px;padding:0}
  /* ICONS ONLY on the main row: every module is its icon, the lit one alone
     keeps its name beside it; the row still scrolls sideways (lit one in view)
     when even the icons will not fit. */
  html.rib .rtab{padding:0 7px;gap:0;font-size:11px;letter-spacing:-.1px}
  html.rib .rtab .ic{display:inline-block;width:18px;height:18px}
  html.rib .rtab>span{display:none}
  html.rib .rtab.on{gap:5px;padding:0 9px 0 8px}
  html.rib .rtab.on>span{display:inline}
  html.rib .rtab .rbadge{min-width:14px;height:14px;font-size:9px;line-height:14px;top:-3px;right:-4px}
  .rbtn{width:28px;height:28px}.uav{width:26px;height:26px}
  .umenu.uleft>summary.rlogo{width:26px;height:26px}
  html.rib .rtabs .umenu.uleft{padding:0 4px 0 6px}
  html.rib .rpanel.on{display:flex;flex-wrap:nowrap;height:27px;gap:2px;padding:2px 4px 2px;
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;align-items:center;justify-content:space-between}
  html.rib .rpanel::-webkit-scrollbar{display:none}
  html.rib .rpanel .ritem{position:relative;flex:0 0 auto;height:22px;padding:0 5px;gap:2px;font-size:9.5px;font-weight:700;letter-spacing:-.15px;border-radius:6px}
  html.rib .rpanel .ritem>span{overflow:visible}
  /* the count rides the corner, so it costs the row no width */
  html.rib .rpanel .ritem .nbadge{position:absolute;top:-4px;right:-3px;min-width:13px;height:13px;padding:0 3px;font-size:8.5px;line-height:13px;margin:0}
  html.rib .rpanel .rsub{font-size:8px}
  .umpanel{top:36px}
}

/* REPACK — the boxcards a design could move into, ranked, each with its reason */
.rptargets{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px}
.rpt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);cursor:pointer}
.rpt:has(input:checked){border-color:var(--mod);box-shadow:0 0 0 3px color-mix(in srgb,var(--mod) 16%,transparent)}
.rpt input{margin:4px 0 0}
.rptbody{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.rpthead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rptwhy{font-size:12px;font-weight:600}
.rw-order{color:var(--r)}.rw-sells{color:var(--g)}.rw-none{color:var(--ink3);font-weight:500}
.rptnum{line-height:1.35}
.rprest{margin-top:10px}
.rprest summary{cursor:pointer;color:var(--ink2);display:flex;align-items:center;gap:6px;padding:6px 0}
.rpinl{display:inline;margin:0}
.rpinl button{margin:0 0 0 2px}
tr.rpoff td{opacity:.72}

/* E-WAY BILL — the three blocks the portal is told, side by side */
.ewgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 22px;margin:0 0 12px}
.ewgrid h3{margin:0 0 4px;color:var(--ink3);text-transform:uppercase;letter-spacing:.05em;font-size:11px}
.ewk{display:flex;gap:8px;align-items:baseline;line-height:1.5}
.ewk small{flex:0 0 118px;color:var(--ink3)}
.ewk b{font-weight:600;word-break:break-word}
.ewrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0 2px}

/* CARD HEADS ON A PHONE: the title keeps its words together and the muted note
   that sits beside it on a PC ("introduced in the last 30 days…") drops to its
   own line underneath — a title broken into "What / is new" reads like two
   headings. A rule for every card in the ERP. */
@media (max-width:760px){
  .chead{flex-wrap:wrap;row-gap:6px}
  .chead h2{flex:0 1 auto;min-width:0;flex-wrap:wrap;row-gap:2px}
  .chead h2>.ic{flex:0 0 auto}
  .chead h2>.small.muted,.chead h2>small.muted{flex:1 0 100%;font-weight:400;font-size:12px;line-height:1.3}
  /* the controls (Filters, Group, buttons) keep their place at the right when
     they fit beside the title, and take the next line when they do not —
     the title is never the thing that gives way */
  .chead > .cact{flex:0 1 auto;margin-left:auto}
  .chead > .cact:has(.gbar){flex:1 0 100%;margin-left:0}
}

/* NEW ARRIVALS — pick the designs, the card, who to tell */
.nainl{display:inline;margin:0}
.napick{display:flex;gap:8px;flex-wrap:wrap}
.napk{display:flex;align-items:center;gap:6px;padding:6px 10px 6px 8px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:var(--panel)}
.napk.on,.napk:has(input:checked){border-color:var(--mod);box-shadow:0 0 0 3px color-mix(in srgb,var(--mod) 14%,transparent)}
.nacard{display:grid;grid-template-columns:minmax(220px,420px) 1fr;gap:16px;align-items:start;margin-top:14px}
.nacard img{width:100%;height:auto;border:1px solid var(--line);border-radius:10px}
.namsg{white-space:pre-wrap;font:inherit;font-size:13px;background:var(--sb);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:0 0 8px}
tr.narecent td{opacity:.6}
tr.naon td:first-child{box-shadow:inset 3px 0 0 var(--g)}
@media (max-width:760px){
  .nacard{grid-template-columns:1fr}
  /* PHONE CARDS. A list table that says .pcards reads as one card per row on
     a phone — two columns, each cell under its own label, the buttons on the
     card — never a table dragged sideways with its buttons off the right edge.
     One rule; a table opts in with the class and data-l labels on its cells. */
  .pcards thead,.pcards tfoot tr td[colspan]:empty{display:none}
  .pcards,.pcards tbody,.pcards tfoot{display:block;width:100%}
  .pcards tr[data-line]{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;padding:10px 4px;border-bottom:1px solid var(--line);height:auto!important}
  .pcards tr[data-line] td{display:block;padding:0;border:0;height:auto!important;min-width:0;text-align:left;white-space:normal;box-shadow:none}
  .pcards td[data-l]::before{content:attr(data-l);display:block;font-size:10.5px;font-weight:600;color:var(--ink3)}
  .pcards td[data-w="2"]{grid-column:1/-1}
  .pcards tfoot tr{display:flex;flex-wrap:wrap;gap:4px 12px;padding:8px 4px;justify-content:space-between}
  .pcards tfoot td{border:0;padding:0}
  .tw:has(.pcards){overflow:visible}
  /* on a phone both lists read as cards — the buttons are on the card, never
     off the right edge of a table that has to be dragged sideways */
  .natbl thead,.naaud thead{display:none}
  .natbl,.natbl tbody,.naaud,.naaud tbody{display:block;width:100%}
  .natbl tr[data-line],.naaud tr[data-line]{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;padding:10px 4px;border-bottom:1px solid var(--line);height:auto!important}
  .natbl tr[data-line] td,.naaud tr[data-line] td{display:block;padding:0;border:0;height:auto!important;min-width:0;text-align:left;white-space:normal;box-shadow:none}
  .natbl td[data-l]::before,.naaud td[data-l]::before{content:attr(data-l);display:block;font-size:10.5px;font-weight:600;color:var(--ink3)}
  .natbl td[data-l="Design"],.naaud td[data-l="Customer"]{grid-column:1/-1;font-weight:600}
  .natbl td[data-l="Design"]::before,.naaud td[data-l="Customer"]::before,.naaud td[data-l="Why"]::before{display:none}
  .natbl td[data-l="In boxcards"],.naaud td[data-l="Why"]{grid-column:1/-1}
  .natbl td[data-l="Ready"],.natbl td:last-child,.naaud td:nth-last-child(-n+2){grid-column:span 1;display:flex;align-items:flex-end}
  .natbl td[data-l="Ready"]::before{display:none}
  .natbl td:last-child{justify-content:flex-end}
  .naaud td[data-l="Why"]{order:1}
  .naaud td:nth-last-child(2){grid-column:1;order:2}
  .naaud td:last-child{order:3}
  .naaud td:nth-last-child(2){grid-column:1}
  .naaud td:last-child{grid-column:2;justify-content:flex-end}
  .natbl .nainl,.naaud .nainl{display:inline-flex}
  tr.naon td:first-child{box-shadow:none}
  .natbl tr.naon{box-shadow:inset 3px 0 0 var(--g);padding-left:10px}
  .tw:has(.natbl),.tw:has(.naaud){overflow:visible}
}

/* CHALLAN READING — the read lines beside the entry row; a figure the reader
   suggested is italic until somebody types over it */
.chpanel .chhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chpanel .chhead select{width:auto;min-width:200px}
.chpanel .chcam{cursor:pointer}
.chpanel .chtbl{margin-top:8px}
.chpanel tr.chused td{opacity:.6}
input.chsug{font-style:italic;color:var(--ink2)}
.chclose input{width:170px;display:inline-block;margin-right:4px}

/* 24-09-2026 GLOBAL RULE (owner): figures are ONE compact line — label then value —
   never a big number stacked over a small label. Applies to every .cbox in the ERP. */
.cboxrow{display:flex!important;flex-wrap:wrap;gap:4px 16px;align-items:baseline;margin-bottom:8px}
.cboxrow.grand{margin-top:4px}
.cbox{flex-direction:row!important;align-items:baseline;gap:6px!important;padding:2px 8px!important;border-radius:6px;min-height:0}
.cbox small{font-size:calc(var(--fs) - 2px)!important;text-transform:none!important;letter-spacing:0!important;font-weight:600;color:var(--ink2)}
.cbox b{font-size:var(--fs)!important}
.cbox em{font-size:calc(var(--fs) - 3px)}
.cboxrow.grand .cbox b{font-size:calc(var(--fs) + 2px)!important}
.esttabs{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.esttabs .esttabs-r{margin-left:auto;display:flex;gap:10px;align-items:center}
.esttabs .esttabs-r select{font-size:13px;padding:3px 6px}
.estline{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;padding:6px 2px 10px;font-size:14px}
.cbox small{order:1}.cbox b{order:2}.cbox em{order:3}
@media (max-width:640px){.esttabs .esttabs-r{margin-left:0}.esttabs .esttabs-r .muted{display:none}.esttabs .esttabs-r select{max-width:120px}}
@media (max-width:640px){.tabs.esttabs{flex-wrap:wrap!important;overflow:visible!important;row-gap:6px}.tabs.esttabs .esttabs-r{flex:1 1 100%}}

/* OWNER 26-09 — GLOBAL: codes / ids are never bold; the photo column (designs, packaging) stays narrow */
.idtx b,table.tbl td.mono b,table.tbl td.mono strong,table.tbl td b.mono,table.tbl td strong.mono{font-weight:inherit!important}
table.tbl th.idpic,table.tbl td.idpic{width:1%;padding-right:4px!important}
/* OWNER 26-09 — GLOBAL: rakhi thumbnails in tables; pointing at one opens it 3× larger (the picture preview) */
table.tbl td.idpic .ph{background:var(--line,#eef0f4)}
/* OWNER 26-09 — print asks: with rakhi pictures or without */
#printpics{position:fixed;inset:0;z-index:9999;background:rgba(15,23,42,.45);display:grid;place-items:center}
#printpics .ppbox{background:#fff;border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:10px;width:min(340px,92vw);box-shadow:0 12px 40px rgba(0,0,0,.25);text-align:center}
#printpics .ppbox b{font-size:15px;margin-bottom:4px}
@media print{#printpics{display:none!important}body.print-nopics td.idpic,body.print-nopics th.idpic,body.print-nopics .idph .ph{display:none!important}}
/* 26-09 GLOBAL: a long radio choice wraps inside the screen on a phone instead of widening the page */
.radios .ro{max-width:100%;box-sizing:border-box}.radios .ro span{min-width:0;overflow-wrap:anywhere}

/* 27-09 (item 20) GLOBAL: colour dot on thumbnails */
.idph.hascol{position:relative}.idph .coldot.colthumb{position:absolute;left:-4px;bottom:-4px;--cs:16px;width:16px;height:16px;font-size:9px;border:2px solid var(--card,#fff);box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.coldot{display:inline-flex;align-items:center;justify-content:center;width:var(--cs,18px);height:var(--cs,18px);border-radius:50%;color:#fff;font:700 calc(var(--cs,18px)*.58)/1 system-ui;border:1px solid rgba(0,0,0,.18);vertical-align:middle;flex:none}
.coldot.coldark{color:#222}
.mnout .mncol{color:var(--accent,#185ABD);font-weight:700}

/* OWNER 27-09 — GLOBAL: every box and control at its OPTIMAL width, never stretched just to fill the
   row. The eye should not travel across an empty screen: form tracks stop growing at 190px (a field
   spans as many tracks as its content needs, 'wide' still gets a row but the box stops at 720px),
   selects, numbers and dates are as wide as what they hold, radio chips are content-wide, and a table
   is as wide as its columns — a 3-column table no longer spreads its last column to the far right. */
@media (min-width:761px){
  .fgrid{grid-template-columns:repeat(auto-fill,minmax(122px,190px));justify-content:start}
  .fgrid.skuc{grid-template-columns:repeat(2,minmax(0,260px))}
  .f select{width:auto;min-width:9em;max-width:100%}
  .f input[type=number],.f input[inputmode=numeric],.f input[inputmode=decimal]{max-width:150px}
  .f input[type=date],.f input[type=time]{max-width:180px}
  .f input[type=checkbox]{width:auto}
  .radios .ro{flex:0 1 auto}
  table.tbl:not(.full){width:auto;max-width:100%;min-width:min(100%,420px)}
  .grid.g2>.card,.grid.g3>.card{min-width:0}
}

/* OWNER 27-09 — GLOBAL: an identity is written ACROSS, "1 God Bless You", never the number with the
   name in small print under it. Same size as the text around it, so the box card or design reads as
   easily as the label drop-down beside it. Covers the photo+text helper (.idtx), the boxcard grid
   (.pigtx) and every ad-hoc "<b>code</b><br><small>name</small>" cell. */
.idtx,.pigtx{flex-direction:row!important;flex-wrap:nowrap;align-items:baseline;column-gap:6px;line-height:1.3;white-space:nowrap}
.idtx b,.pigtx b{font-size:inherit!important;flex:none}
.idtx small,.pigtx small{font-size:inherit!important;color:inherit!important;white-space:nowrap!important;overflow:visible!important}
@media(max-width:760px){.idtx,.pigtx{flex-wrap:wrap;white-space:normal}.idtx small,.pigtx small{white-space:normal!important}}
table.tbl td>b+br,table.tbl td>.mono+br,table.tbl td>b.mono+br{display:none}
table.tbl td>small:not(:first-child),table.tbl td>b+.small,table.tbl td>a+.small{display:inline!important;font-size:inherit!important;color:inherit!important;margin-left:6px;white-space:normal!important;max-width:none!important;line-height:inherit!important}
table.tbl td>b+br+small,table.tbl td>b+br+.small,table.tbl td>b.mono+br+small,table.tbl td>b.mono+br+.small{font-size:inherit!important;color:inherit!important;margin-left:6px}
.pcard .rl .rn+small,.pcard .rl .rn+.small{font-size:inherit}
@media(max-width:640px){.idtx small,.pigtx small{font-size:inherit!important}}

/* OWNER 27-09 — GLOBAL: ONE uniform, readable font everywhere. The drop-down's text was the most
   readable thing on the screen and the table text beside it was smaller and greyer; now every table,
   identity, chip-less text, input, select, date box and button uses the same family, the same size
   (--fs) and the same ink colour. */
input,select,textarea,button{font-family:inherit;font-size:var(--fs);color:var(--ink)}
table.tbl,.tbl td,.tbl th.tl{font-size:var(--fs)}
.tbl td{color:var(--ink)}
.idtx b,.idtx small,.pigtx b,.pigtx small,.gcard .gmeta b,.rn{font-size:var(--fs)!important}
.tbl td .small,.tbl td small:first-child{font-size:calc(var(--fs) - 2px)}
.tbl th{font-size:12px}
@media(max-width:640px){.tbl td{font-size:calc(var(--fs) - 1px)}}

/* OWNER 28-09 (item 26) — GLOBAL: the ERP's own number keypad on phones and tablets
   (assets/app.js "THE ERP'S OWN NUMBER KEYPAD"). 10 digits and + on one screen, the live answer above. */
.sumpad{position:fixed;left:0;right:0;bottom:0;z-index:2147483000;background:#e9edf3;border-top:1px solid #cfd6e2;
  padding:6px 6px calc(8px + env(safe-area-inset-bottom,0px));box-shadow:0 -4px 14px rgba(0,0,0,.10);
  font-family:inherit;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.sumpad[hidden]{display:none}
.sumpad .spt{display:flex;align-items:center;gap:8px;padding:0 4px 6px;font-size:14px;color:#475569;min-height:26px}
.sumpad .spl{flex:none;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sumpad .spx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#111;font-size:16px}
.sumpad .spx em{font-style:normal;color:#b91c1c;font-size:12.5px;font-weight:600}
.sumpad .spg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.sumpad .spg.spsm{margin-bottom:6px}
.sumpad button{font:600 22px/1 system-ui,-apple-system,"Segoe UI",sans-serif;height:46px;border:0;border-radius:10px;background:#fff;color:#111;
  box-shadow:0 1px 0 rgba(0,0,0,.18);padding:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.sumpad button:active{background:#dbe2ec;transform:scale(.98)}
.sumpad button:disabled{opacity:.28}
.sumpad .spsm button{height:34px;font-size:17px;background:#f6f8fb;color:#475569}
.sumpad .spop{background:#dde3ec}
.sumpad .spplus{background:var(--mod,#be185d);color:#fff;font-size:30px}
.sumpad .spnx{background:#1f2937;color:#fff;font-size:17px}
.sumpad .spkb{flex:none;height:28px;font:500 13px/1 system-ui,-apple-system,sans-serif;background:transparent;box-shadow:none;color:#475569;padding:0 4px}
body.sumpad-on{padding-bottom:var(--padh,300px)}

/* OWNER 28-09 (item 27) — GLOBAL: EVERY DESIGN CARD IS AS TALL AS ITS PHOTO.
   The photo keeps its size (130 px); the name with its colour, the controls, the quantities and the
   status sit beside it in short lines, the status in the bottom corner. One card per row on a phone,
   as many as fit on a PC. Applies to every pick card (Planning, Kits, Job Work, Floor, Receiving…). */
.pgal{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
.pcard.pch,.pcard:has(>.rimg+.rbody){display:grid;grid-template-columns:var(--pci,130px) minmax(0,1fr);gap:0 8px;padding:6px;align-items:start}
.pcard.pch>.rimg,.pcard:has(>.rimg+.rbody)>.rimg{width:var(--pci,130px);height:var(--pci,130px);aspect-ratio:auto;border-radius:10px;margin:0}
.pcard.pch>.rbody,.pcard:has(>.rimg+.rbody)>.rbody{padding:0;gap:4px;min-width:0;min-height:var(--pci,130px);display:flex;flex-direction:column}
.pcard.pch .rbody .rin{margin-top:0;padding-top:0}
.pcard .rtop,.rcard .rtop{flex-wrap:nowrap;align-items:center;column-gap:6px}
.pcard .rtl,.rcard .rtl{display:flex;align-items:center;gap:5px;min-width:0;overflow:hidden}
.pcard .rtl .rn,.rcard .rtl .rn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .rfoot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:6px;font-size:12px;color:var(--ink2);min-width:0}
.pcard .rfoot>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard .rfst{margin-left:auto;display:flex;align-items:center;gap:4px;flex:none}
.pcard .rfst .pill{cursor:help}
@media (max-width:760px){ .pgal{grid-template-columns:1fr;gap:6px} }
/* the older phone rule for planning cards gives way to the one above */
.plcards .pcard{grid-template-columns:var(--pci,130px) minmax(0,1fr)}
.plcards .pcard>.rimg{width:var(--pci,130px);margin:0}
.plcards .pcard>.rbody{padding:0}
/* colour chip beside a design name, and the colour after a design identity anywhere */
.colchip{display:inline-flex;align-items:center;gap:4px;padding:1px 8px 1px 2px;border-radius:999px;font-weight:600;border:1px solid rgba(0,0,0,.12);white-space:nowrap}
.colchip i{width:18px;height:18px;border-radius:50%;background:#fff;color:#111;font:800 10.5px/18px system-ui;text-align:center;font-style:normal;flex:none;border:1px solid rgba(0,0,0,.2)}
.pcard .colchip,.rcard .colchip{font-size:11px;flex:none;padding:1px 6px 1px 2px}
.pcard .colchip i,.rcard .colchip i{width:15px;height:15px;line-height:15px;font-size:9.5px}
/* the design name never shortens; a long colour name gives way first (full name on hover) */
.pcard .rtl .rn,.rcard .rtl .rn{flex:none}
.pcard .rtl .colchip,.rcard .rtl .colchip{display:block;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:15px}
.pcard .rtl .colchip i,.rcard .rtl .colchip i{display:inline-block;vertical-align:top;margin:0 4px 0 0}
/* a narrow card (four in a row on a PC) keeps the colour NAME and drops the letter circle —
   the letter is already the last letter of the design name */
.pcard.pch>.rbody,.pcard:has(>.rimg+.rbody)>.rbody,.rcard:has(>.rimg+.rbody)>.rbody{container-type:inline-size}
@container (max-width:210px){ .pcard .rtl .colchip i,.rcard .rtl .colchip i{display:none} .pcard .rtl .colchip,.rcard .rtl .colchip{padding:1px 7px} }
.idcol{display:inline-flex;align-items:center;gap:3px;margin:0 0 0 5px;font-weight:500;white-space:nowrap;color:var(--ink2)}
.idcol i{width:.72em;height:.72em;border-radius:50%;border:1px solid rgba(0,0,0,.25);display:inline-block;flex:none}
/* Planning card: the attribute names inside their boxes, Sugg. / Appr. on one line */
.plcards .plattrs{margin:0;gap:5px}
.plcards .plattrs label>small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.plcards .plattrs select,.plcards .plattrs input{height:30px;min-height:30px;font-size:13px;padding:0 4px;border-radius:8px}
.plcards .plq{display:flex;align-items:center;gap:6px;margin:0;padding:0;font-size:13px;color:var(--ink2);white-space:nowrap}
.plcards .plq .plsg{display:inline-flex;align-items:center;gap:4px}
.plcards .plq .plsug{display:inline-flex;height:auto;font-size:15px;color:var(--ink);font-weight:700;justify-content:flex-start}
.plcards .plq .plap{display:inline-flex;flex-direction:row;align-items:center;gap:4px;margin:0}
.plcards .plq input,.plcards .plq input[name^="aq["]{width:64px;height:32px;min-height:32px;font-size:15px;text-align:right;padding:0 6px}
.plgrph .plexp{display:block}
/* Kits card: three boxes in a row, the names inside the boxes, Pending | Ready small in the corner */
.kitcards .kun{margin:0;gap:4px}
.kitcards .kun small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.kitcards .kun input{height:32px;padding:0 4px;font-size:15px}
.kitcards .rfst .rbtn-group{height:auto}
.kitcards .rfst .rbtn-group .rbtn{height:28px;padding:0 9px;font-size:12.5px}
.kitcards .kcombo{display:inline-flex;align-items:center;gap:3px;color:var(--ink2)}
/* THE REASON OF A WARNING — tapped on a phone, hovered on a PC (assets/app.js "WHY TIP") */
.whytip{position:fixed;z-index:2147483100;max-width:260px;background:#111827;color:#fff;font-size:13px;line-height:1.35;padding:7px 10px;border-radius:9px;box-shadow:0 6px 18px rgba(0,0,0,.28);pointer-events:none}
.whytip[hidden]{display:none}
/* the same card on the other screens: Worker app (give-back date at the foot of the text column),
   Job Work (Receive / Reassign in the corner), Bhai choice (the match in the corner), Labour Receiving */
.wkc .rbody>.wkdue{margin-top:auto;flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:0 6px;padding:3px 8px;border-top:0;border-radius:8px;text-align:left}
.wkc .rbody>.wkdue small{font-size:11px}
.wkc .rbody>.wkdue b{font-size:17px}
.wkc .rbody>.wkdue em{font-size:11.5px}
.wkc>.wkstat{grid-column:1/-1;margin-top:6px}
.wkc .rn{font-size:14.5px}
.wkc .rp{font-size:20px}
.pcard .rfst .rgo.jwacts{margin:0;display:flex;gap:5px;flex-wrap:nowrap}
.pcard .rfst .jwacts .rcvgo{height:30px;padding:0 10px;font-size:13px;flex:none}
.pcard .rfst .jwacts .rqc{flex:none;height:30px;padding:0 8px;font-size:12.5px}
.cpick .rfoot .cpbadge{position:static;display:inline-flex;align-items:center;gap:3px}
.rgal{grid-template-columns:repeat(auto-fill,minmax(380px,1fr))}
.rcard{display:grid;grid-template-columns:var(--pci,130px) minmax(0,1fr);gap:0 8px;padding:6px;align-items:start}
.rcard>.rimg{width:var(--pci,130px);height:var(--pci,130px);aspect-ratio:auto;border-radius:10px}
.rcard>.rbody{padding:0;gap:3px;min-width:0;min-height:var(--pci,130px)}
.rcard .rstl{align-items:center;flex-wrap:nowrap;min-height:22px}
.rcard .rstl .rst{margin:0;min-width:0;overflow:hidden;flex-wrap:nowrap}
.rcard .rstl .rqc{height:24px;padding:0 8px;font-size:12px;border-radius:7px;margin-left:auto}
.rcard .rinr{display:flex;align-items:center;gap:5px;margin-top:auto;padding-top:3px}
.rcard .rinr label{flex-direction:row;align-items:center;min-width:0;position:relative}
.rcard .rinr label>small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rcard .rinr .rq{flex:1 1 92px}
.rcard .rinr .rr{flex:0 1 62px}
.rcard .rinr .rr>i{position:absolute;left:6px;top:50%;transform:translateY(-50%);font-style:normal;font-size:13px;font-weight:600;color:var(--ink3);pointer-events:none;z-index:1}
.rcard .rinr .rr input{padding-left:17px}
.rcard .rinr input,.rcard .rinr .rqv{height:34px}
.rcard .rinr .rqwrap{grid-template-columns:minmax(40px,1fr) auto;width:100%}
.rcard .rinr .rqu{white-space:nowrap;padding:5px 6px}
.rcard .rinr .rcvgo{flex:none;height:34px;padding:0 10px;gap:4px;font-size:14px;font-weight:700;justify-content:center}
.rcard .runm{display:flex;gap:5px;align-items:center;margin-top:4px;flex-wrap:wrap}/* b185: Unmade back */
.rcard .runm[hidden]{display:none}
.rcard .runq{display:flex;align-items:center;gap:4px;margin:0;flex:0 1 auto}
.rcard .runq small{font-size:11px;font-weight:700;color:var(--a,#b45309);white-space:nowrap}
.rcard .runm input,.rcard .runm select{height:32px;border:1.5px solid var(--a,#d97706);border-radius:8px;padding:0 6px;font-size:14px;background:var(--panel);color:var(--ink);min-width:0}
.rcard .runq input{width:62px;text-align:right}
.rcard .runm select{flex:1 1 0;width:0;min-width:90px}
.rcard .runm .runn{flex:1 1 100%}
.rcard .runwl[hidden]{display:none}
.rcard .runw{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--ab,#fff4e5);color:var(--a,#b45309);white-space:nowrap}
.rcard .rinr .runtg{flex:none;width:34px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--line);border-radius:9px;background:var(--panel);color:var(--a,#b45309);cursor:pointer}
.rcard .rinr .runtg:hover,.rcard .rinr .runtg.on{border-color:var(--a,#d97706);background:var(--ab,#fff4e5)}
@media (max-width:760px){ .rgal{grid-template-columns:1fr;gap:6px} }
/* a narrow kit card: Pending | Ready a little tighter, so "combo" is not cut */
@container (max-width:210px){ .kitcards .rfst .rbtn-group .rbtn{padding:0 6px;font-size:12px} }
/* 29-09 (owner): Repack in today's rules — photo cards as tall as the photo, history as short lines */
.rplink{background:none;border:0;padding:0;margin:0;min-height:0;height:auto;box-shadow:none;color:var(--ink2);font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:3px;text-decoration:underline;text-underline-offset:2px}
.rplink:hover{color:var(--r,#dc2626);background:none}
.rpgal .rfoot form{display:inline;margin:0}
.rphl{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:2px 14px}
@media (max-width:760px){.rphl{grid-template-columns:1fr}}
.rph{display:flex;align-items:center;gap:8px;padding:7px 4px;border-bottom:1px solid var(--line);min-width:0}
.rphph{flex:none;width:44px;height:44px;border-radius:8px;overflow:hidden;background:#eef2f7;display:flex;align-items:center;justify-content:center}
.rphph img{width:100%;height:100%;object-fit:cover}
.rpht{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.rpht .rtl{max-width:100%}
.rpht small{font-size:12px;color:var(--ink2)}
.rphf{flex:none;font-weight:700;padding:1px 8px;border-radius:999px;background:color-mix(in srgb,var(--mod) 12%,transparent);color:var(--mod);white-space:nowrap}
.rphd .rphf{background:var(--ab,#fef3c7);color:#92400e}
.pgal.rpnow{grid-template-columns:minmax(0,560px);margin:0}
.rpt .rpthead .mono{font-weight:700}
/* 29-09 (owner): the set recipe — colours in a set on packing, planning and breaking */
.pknew .fpcell.pxmix{flex:1 1 100%;flex-wrap:wrap;align-items:flex-start;gap:4px 10px}
.pxmix>span:first-child{flex:1 1 100%;color:var(--ink2)}
.pxhint{font-style:normal;font-weight:400;color:var(--mut);margin-left:6px}
.pxrow{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:flex-end}
.pxq{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;margin:0;font-weight:400;min-width:0}
.pxq .idcol{font-size:12.5px}
.pxq input.pxin,.pxq input.pxo,.pxq input.plrq{width:64px;height:32px;text-align:right}
.pxq small{font-size:11.5px;color:var(--mut);white-space:nowrap}
.pxq input.pxchg{border-color:var(--a,#d97706);box-shadow:0 0 0 1px var(--a,#d97706) inset}
.pxsum{display:block;margin-top:3px;color:var(--ink2)}
.pxbad{color:var(--r,#dc2626);font-weight:600}
.pxout{margin:8px 0 4px;padding:8px 10px;border:1px dashed var(--line);border-radius:10px}
.pxout>small{display:block;margin-bottom:5px;color:var(--ink2)}
.pxout>small em{font-style:normal;color:var(--mut)}
.pxout.pxbadbox{border-color:var(--r,#dc2626)}
.pxnote{margin:2px 0 8px;color:var(--ink2)}
.pxnote b{color:var(--ink)}
.plrcp{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 12px;flex:1 1 100%;padding:6px 0 2px}
.plrcp>b{flex:1 1 100%;font-size:12.5px;font-weight:600;color:var(--ink2)}
.plrcp .pxsum{margin:0 0 6px}
/* 29-09 (owner, GLOBAL): the Name column made from "photo + code + name" never squeezes to one word a line
   when a table has many columns — the table scrolls sideways in its frame instead */
td.idname{min-width:10em}
/* 30-09 (owner): Bhai–Bhabhi pairing marks on every list (Designs table, gallery, cards) */
.bbnote{display:block;font-size:12px;color:var(--ink2,#62667f);margin-top:2px}
.bbwarn{display:inline-block;font-size:12px;font-weight:600;background:#fff3e0;color:#9a5b0e;border-radius:8px;padding:2px 8px;text-decoration:none;margin-top:2px}
.gmeta .bbnote,.gmeta .bbwarn{margin-top:3px}
/* 01-10 (owner, phone screenshot "Overlapping"): on a phone the Receiving card's entry row never squeezes
   qty · unit · ₹ · Receive into one 250px line — qty and ₹ share the first line, Receive takes its own full-width line;
   the search bar shrinks so Filter / Photo stay inside the screen. Global phone rule (all screens using .rcard). */
@media (max-width:760px){
  .gsearch{min-width:0;flex:1 1 160px}                    /* every search box shrinks to the room it has, or takes its own line */
  .gsearch input{flex:1 1 0;width:0;min-width:0}          /* (the input's own 20-char size no longer pushes the row wider) */
  .rcard .rinr{flex-wrap:wrap;gap:5px}
  .rcard .rinr .rq{flex:1 1 118px}
  .rcard .rinr .rr{flex:1 1 74px;max-width:120px}
  .rcard .rinr .rcvgo{flex:1 1 100%;min-width:0;height:36px}
  .rcard .rinr .rqwrap{grid-template-columns:minmax(46px,1fr) auto}
  .rcard .rinr .rqu{min-width:2.4em;padding:5px 7px}
  .rcard .rstl{flex-wrap:wrap;row-gap:3px}
  .rcard .rstl .rst{flex-wrap:wrap;overflow:visible}
}
/* 01-10 (owner): Revise rate mid-job — the note on a card, the "₹ Revise" chip, the revise screen */
.rrnote{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:600;color:#9a3412;background:#ffedd5;border-radius:999px;padding:1px 8px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rcard .rrl{min-height:0}
.rcard .rstl .rqc.rrgo{margin-left:4px}
.rrcards .pcard{--pci:104px}
.rrcards .rrnew{display:inline-flex;align-items:center;position:relative;gap:0;min-width:0}
.rrcards .rrnew>small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.rrcards .rrnew>i{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-style:normal;font-weight:700;color:var(--ink3);pointer-events:none}
.rrcards .rrnew input{height:36px;width:120px;padding-left:20px;font-weight:700;font-size:15px}
.rrcards .pcard.rron .rrnew input{border-color:#f97316;box-shadow:0 0 0 3px rgba(249,115,22,.15)}
.rrcards .rrdiff{color:#9a3412;font-weight:600;text-align:right;min-width:0;overflow-wrap:anywhere}
.rrbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rrbar [data-difftot]{font-size:15px}
@media (max-width:760px){
  .rrcards .pcard .rfoot{flex-wrap:wrap;row-gap:4px}
  .rrcards .rrnew input{width:112px}
}
.pcard .rfst .rgo.jwacts{flex-wrap:wrap;justify-content:flex-end;row-gap:4px}
.pcard .rfoot:has(.jwacts){flex-wrap:wrap}
.pcard .rfst:has(.jwacts){flex:0 1 auto;min-width:0;max-width:100%}
@media (max-width:760px){ .rrnote{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25;padding:2px 8px} }
/* 01-10 (owner): correct a wrongly created design — the small gear link on a tile / row and the state pill */
.dfix{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;color:var(--ink3);background:var(--sb);vertical-align:middle}
.dfix:hover{color:var(--mod);background:color-mix(in srgb,var(--mod) 12%,transparent)}
.gcard{position:relative}.gcard .dfix{position:absolute;right:5px;top:5px;background:rgba(255,255,255,.88);box-shadow:0 1px 3px rgba(0,0,0,.18);z-index:2}
.gcard .gmeta .pill{font-size:10.5px}

/* b123 (02-10-2026) PHONE KEYBOARD RULE — while a box is being typed into, the form's action row is pinned
   above the keyboard / numpad (the layout viewport shrinks with the keyboard; the numpad reports --padh),
   and the page can scroll far enough to lift the tapped box into the upper half. */
html.phone .kbfix{position:fixed;left:0;right:0;bottom:0;z-index:2147482000;background:var(--panel);padding:8px 12px;margin:0;
  box-shadow:0 -6px 14px -10px rgba(0,0,0,.3);border-top:1px solid var(--line);display:flex;gap:9px;align-items:center;
  flex-wrap:nowrap;overflow-x:hidden;white-space:nowrap}
html.phone .kbfix>*{flex:0 0 auto;white-space:nowrap}
html.phone .kbfix>:not(button):not(.btn):not(.btn2):not(a){flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:12.5px}
html.phone body.sumpad-on .kbfix{bottom:var(--padh,0px)}
html.phone body{scroll-padding-top:120px}
html.phone main{padding-bottom:45vh!important}

/* b129 (owner 05-10): a long suggestion message ("Fill in: Market.") never pushes Appr. out of the card —
   the row wraps and the message wraps inside the card */
.plcards .plq{flex-wrap:wrap;white-space:normal;row-gap:4px;min-width:0;max-width:100%}
.plcards .plq .plsg,.plcards .plq .plsug{min-width:0;max-width:100%;flex-wrap:wrap}
.plcards .plq .plsug .pill{white-space:normal;max-width:100%;line-height:1.25;height:auto}
/* b131: the working of a suggested quantity (Planning — hover on a PC, tap on a phone) */
.plwhy{display:none;position:absolute;z-index:60;background:#fff;color:var(--ink,#1f2433);border:1px solid var(--line,#dde3ec);border-radius:12px;box-shadow:0 10px 30px rgba(15,23,42,.18);padding:10px 12px;font-size:13px;line-height:1.45}
.plwhy b{display:block;margin-bottom:4px}.plwhy ol{margin:0;padding-left:18px}.plwhy li{margin:2px 0}.plwhy p{margin:0}
[data-sugcell]{cursor:help}

/* b148 (owner 14-10-2026, 1b 2b 3a): EVERY TAPPABLE WORD LOOKS TAPPABLE — a light box, no arrow, everywhere
   (inside sentences too). app.js marks each plain-looking link in the page with .lkbox. */
.lkbox{display:inline-block;padding:1px 8px;margin:1px 1px;border:1px solid #cfc7f3;background:#f4f1ff;color:#4b3bc4;border-radius:7px;
  text-decoration:none!important;font-weight:400!important;line-height:1.45;vertical-align:baseline;white-space:nowrap;cursor:pointer;transition:background .12s,border-color .12s}
.lkbox:hover{background:#e9e4ff;border-color:#a99bec;color:#3a2ba8}
.lkbox:active{background:#ddd5ff}
.lkbox:focus-visible{outline:2px solid #6a54f0;outline-offset:1px}
li>.lkbox{margin:2px 0}
summary.lksum{display:inline-flex;align-items:center;gap:4px;list-style:none;width:auto}summary.lksum::-webkit-details-marker{display:none}
.lkbox b,.lkbox strong{font-weight:400}
.gmeta .bbnote.lkbox{display:inline-block;font-size:12px;margin-top:3px;white-space:normal}
@media (max-width:760px){.lkbox{padding:2px 9px;margin:2px 1px}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lkbox{background:#2a2550;border-color:#4a4190;color:#cfc6ff}}
:root[data-theme="dark"] .lkbox{background:#2a2550;border-color:#4a4190;color:#cfc6ff}

/* b150 (owner 15-10-2026): COLOUR-SET CARDS where kits are given to a worker — compact grid, the set collage,
   "JG013B (3 col · 3 kits)  8g", colour boxes, Set | Colour wise on one line. app.js builds them. */
.pgal.sgon{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
@media (max-width:760px){.pgal.sgon{grid-template-columns:1fr 1fr;gap:8px}}
.sgcard{border:1.5px solid var(--line,#e2dfee);border-radius:14px;background:var(--panel,#fff);padding:7px;display:flex;flex-direction:column;gap:3px;min-width:0}
.sgcard.on{border-color:#6a54f0;background:#f7f5ff}
.sgcard.open{grid-column:1/-1}
.sgcoll{border-radius:10px;overflow:hidden;background:#eef0f6;aspect-ratio:4/3;margin-bottom:2px}.sgcoll img{width:100%;height:100%;object-fit:contain;display:block}
.sgcard.open .sgcoll{max-width:240px;align-self:flex-start}
.sgimgs{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-bottom:2px}
.sgimgs>span{aspect-ratio:1;border-radius:7px;overflow:hidden;background:#eef0f6;display:flex;align-items:center;justify-content:center}
.sgimgs img{width:100%;height:100%;object-fit:cover}.sgimgs svg{width:18px;height:18px;opacity:.45}
.sghead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;column-gap:6px;row-gap:0}
.sgname{font-size:13.5px;font-weight:400;white-space:nowrap}.sgname small{font-size:12px;color:var(--ink2,#666)}
.sgbig{font-size:13.5px;color:#4b3bc4;font-weight:400;white-space:nowrap;margin-left:auto}
.sgsm{display:none}
.sgcols{display:flex;flex-wrap:wrap;gap:2px;margin:1px 0 3px}
.sgc{font-size:11px;line-height:1.35;padding:0 5px;border-radius:6px;white-space:nowrap}
.sgpart{font-size:11.5px;color:#9a5b0e;line-height:1.2}.sgpart:empty{display:none}
.sgbar{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sgbar button{padding:5px 2px;border-radius:10px;font-size:12.5px;font-weight:400;white-space:nowrap;cursor:pointer;border:1px solid #cfc7f3;background:#f4f1ff;color:#4b3bc4}
.sgbar .sgall{background:#6a54f0;border-color:#6a54f0;color:#fff}
.sgcard.on .sgbar .sgall{background:#e9e4ff;color:#3a2ba8;border-color:#cfc7f3}
.sgcard.open .sgbar .sgmore{background:#e9e4ff}
.sgkids{display:none}.sgcard.open .sgkids{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px}
.sgkids .pcard{display:flex!important;flex-direction:row!important;align-items:center;gap:8px;padding:5px!important;min-height:0!important;height:auto!important;min-width:0}
.sgkids .pcard .rimg{width:52px!important;height:52px!important;min-height:0!important;aspect-ratio:auto!important;flex:none;border-radius:8px}
.sgkids .pcard .rimg .nophoto svg{width:22px;height:22px}.sgkids .pcard .ptick{transform:scale(.8);transform-origin:top left}
.sgkids .pcard .rbody{padding:0!important;gap:0!important;min-height:0!important;flex:1;min-width:0}
.sgkids .pcard .rl{min-height:0;line-height:1.3;font-size:12.5px}.sgkids .pcard .rn{font-size:13.5px}.sgkids .pcard .rp{font-size:14px}
.sgkids .pcard .rst{display:none!important}
.pgal.sgon>.pcard{display:flex!important;flex-direction:column;gap:4px;padding:8px;border-radius:14px;min-width:0}
.pgal.sgon>.pcard .rimg{width:100%!important;height:auto!important;aspect-ratio:2.2/1;flex:none}
.pgal.sgon>.pcard .rbody{width:100%;min-width:0;padding:0}
.pgal.sgon .rn,.pgal.sgon .rp{font-weight:400}
.pgal.sgon .colchip i{display:none}.pgal.sgon .colchip{padding:0 6px;border-radius:6px;font-weight:400}
@media (max-width:760px){.sgcard.open .sgkids{grid-template-columns:1fr}.sglg{display:none}.sgsm{display:inline}.sgname,.sgbig{font-size:13px}.sghead{column-gap:3px}}
/* b152: hovering (or long-pressing) any collage shows the ONE colour under the pointer big */
.sgzoom{position:fixed;z-index:9999;pointer-events:none;background:#fff;border-radius:14px;box-shadow:0 12px 40px rgba(20,16,60,.28);padding:6px;width:min(340px,86vw)}
.sgzlens{width:100%;aspect-ratio:1;border-radius:10px;background-repeat:no-repeat;background-color:#eef0f6}
img[data-combo]{cursor:zoom-in}
.sgzoom img{width:100%;height:auto;display:block;border-radius:10px}
.sgzoom b{display:block;font-weight:400;font-size:13px;padding:4px 4px 0;color:var(--ink2,#555)}

/* b153: Kits — a Set link looks like the Set button; To prepare as compact single cards */
.sgbar a.sgall{display:flex;align-items:center;justify-content:center;padding:5px 2px;border-radius:10px;font-size:12.5px;font-weight:400;background:#6a54f0;border:1px solid #6a54f0;color:#fff!important;text-decoration:none!important}
.pgal.kcompact{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px}
.pgal.kcompact>.pcard{display:flex!important;flex-direction:row!important;gap:8px;padding:6px!important;min-height:0!important;height:auto!important}
.pgal.kcompact>.pcard .rimg{width:72px!important;height:72px!important;min-height:0!important;aspect-ratio:auto!important;flex:none;border-radius:9px}
.pgal.kcompact>.pcard .rbody{gap:2px!important;padding:0!important;min-width:0;flex:1}
.pgal.kcompact>.pcard .rl{min-height:0;line-height:1.3;font-size:12.5px}
.pgal.kcompact>.pcard .rn,.pgal.kcompact>.pcard .rp{font-weight:400}.pgal.kcompact .colchip i{display:none}.pgal.kcompact .colchip{padding:0 6px;border-radius:6px;font-weight:400}
.pgal.kcompact>.pcard .kgdp input{height:32px;padding:2px 6px}.pgal.kcompact>.pcard .kgdp label small{display:none}
.pgal.kcompact>.pcard .rfoot{margin-top:2px}.pgal.kcompact>.pcard .rbtn{padding:3px 10px;font-size:12.5px}
.sgkids .pcard .kgdp{margin-top:2px}.sgkids .pcard .kgdp input{height:30px;padding:2px 6px}.sgkids .pcard .kgdp label small{display:none}
@media (max-width:760px){.pgal.kcompact{grid-template-columns:1fr}.pgal.kcompact>.pcard .rimg{width:60px!important;height:60px!important}}
@media (max-width:760px){.pgal.sgon[data-sets="status"]{grid-template-columns:1fr}.pgal.sgon[data-sets="status"]>.pcard{flex-direction:row!important}.pgal.sgon[data-sets="status"]>.pcard .rimg{width:60px!important;height:60px!important;aspect-ratio:auto!important}}

/* owner 15-10: a quantity never breaks onto a second line — "5g 9d 4p" stays on the line with the design number */
.sghead{flex-wrap:nowrap!important}
.sgname{min-width:0;overflow:hidden;text-overflow:ellipsis}
.sgbig{flex:none}
.pcard .rp,.pcard .rl span{white-space:nowrap}
.pcard .rl{gap:6px}.pcard .rl>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pgal.sgon .pcard .rbody,.pgal.kcompact .pcard .rbody,.sgkids .pcard .rbody{height:auto!important;max-height:none!important}
.pgal.sgon .pcard .rbody>*,.pgal.kcompact .pcard .rbody>*,.sgkids .pcard .rbody>*{flex-shrink:0}

/* b154: ✂ Split — one kit / colour set to more than one worker */
.sgbar.s3{grid-template-columns:1fr 1fr auto}
.kssplit,.kssplit1{padding:5px 9px;border-radius:10px;font-size:12.5px;font-weight:400;border:1px solid #f0c98a;background:#fff6e6;color:#8a4b00;cursor:pointer;white-space:nowrap;line-height:1.2}
.kssplit1{align-self:flex-start;margin-top:4px;padding:3px 9px;font-size:12px}
.sgkids .kssplit1{display:none}/* b165: shown again below */
@media (max-width:760px){.sgbar.s3 .kssplit span{display:none}}
.ksov{position:fixed;inset:0;background:rgba(20,16,40,.38);z-index:9000;display:flex;align-items:center;justify-content:center}
.ksbox{background:var(--panel,#fff);color:var(--ink,#1d1b2c);border-radius:18px;width:min(580px,94vw);max-height:92vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.25);padding:14px 16px;display:flex;flex-direction:column;gap:10px;font-size:14px}
@media (max-width:760px){.ksov{align-items:flex-end}.ksbox{width:100vw;border-radius:18px 18px 0 0;max-height:90vh;padding:12px}}
.kshd{display:flex;gap:10px;align-items:center}.kshd img{width:58px;height:44px;object-fit:cover;border-radius:8px}
.kshd b{font-size:15.5px}.kshd small{display:block;color:var(--ink2,#666);font-size:12.5px}
.ksx{margin-left:auto;border:0;background:#f1eff8;border-radius:10px;width:32px;height:32px;font-size:18px;cursor:pointer;flex:none}
.ksquick{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.ksquick small{color:var(--ink2,#666)}
.ksquick button{border:1px solid #cfc7f3;background:#f4f1ff;color:#4b3bc4;border-radius:9px;padding:3px 10px;font-size:12.5px;cursor:pointer}
.ksquick button.on{background:#6a54f0;color:#fff;border-color:#6a54f0}
.ksrows{display:flex;flex-direction:column;gap:6px}
.ksrow{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;border:1.5px solid var(--line,#e2dfee);border-radius:12px;padding:7px 8px}
.ksrow.me{border-color:#6a54f0;background:#f7f5ff}
.ksn{width:22px;height:22px;border-radius:50%;background:#6a54f0;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}
.ksrow select{width:100%;padding:6px 7px;border-radius:9px;border:1px solid #d6d2e6;font:inherit;background:#fff;min-width:0;height:auto}
.kswho{font-size:13.5px}.kswho small{color:var(--ink2,#666);display:block;font-size:11.5px}
.ksq{display:flex;gap:3px;align-items:center}.ksq input{width:42px;height:32px;padding:4px;border-radius:8px;border:1px solid #d6d2e6;text-align:right;font:inherit}
.ksq i{font-style:normal;color:var(--ink2,#666);font-size:12px;margin-right:2px}
.ksq.rest{color:#4b3bc4;font-size:13.5px;white-space:nowrap;text-align:right}.ksq.rest small{color:#888;font-size:11px;display:block}
@media (max-width:760px){.ksrow{grid-template-columns:22px minmax(0,1fr)}.ksrow .ksq{grid-column:2}.ksq input{width:46px}}
.ksadd{border:1px dashed #b9b0e8;background:transparent;color:#4b3bc4;border-radius:12px;padding:6px;font-size:13px;cursor:pointer}
.kscolh{font-size:12.5px;color:var(--ink2,#666)}.kscolw{overflow-x:auto}
.kscol{width:100%;border-collapse:collapse;font-size:12.8px}.kscol th{font-weight:400;color:var(--ink2,#666);text-align:right;padding:3px 4px;border-bottom:1px solid #eee;white-space:nowrap}
.kscol th:first-child,.kscol td:first-child{text-align:left}.kscol td{padding:3px 4px;text-align:right;border-bottom:1px solid #f3f1f8;white-space:nowrap}
.kscol .sgc{font-size:11.5px;padding:0 6px;border-radius:6px}
.kscell{width:66px;height:28px;padding:2px 5px;border-radius:7px;border:1px solid #e0dcef;text-align:right;font:inherit;font-size:12.8px;background:#fff}
.kscell:focus{border-color:#6a54f0}.ksrest{font-weight:400;color:#4b3bc4}
.ksnote{font-size:12px;color:var(--ink2,#666);background:#f8f7fc;border-radius:10px;padding:6px 8px}
.ksft{display:flex;gap:8px;align-items:center;justify-content:space-between;border-top:1px solid #eee;padding-top:9px;position:sticky;bottom:-14px;background:var(--panel,#fff)}
.ksst.ok{color:#16803c;font-size:13px}.ksst.bad{color:#b42318;font-size:13px}
.ksft .btn[disabled]{opacity:.5}
.ksbox>*{flex-shrink:0}
@media (max-width:760px){.ksnote{display:none}}

/* b156: ONE SEARCH BOX in the top bar */
.gfind{position:relative;flex:0 1 250px;min-width:170px;margin:0 10px 0 4px;display:flex;align-items:center}
.gfind input{width:100%;height:36px;border-radius:12px;border:1.5px solid #d9d4f2;background:var(--panel,#fff);padding:0 52px 0 34px;font:inherit;font-size:14px;box-sizing:border-box;color:inherit}
.gfind input:focus{outline:0;border-color:#6a54f0;box-shadow:0 0 0 3px #ece8ff}
.gfind .gfi{position:absolute;left:10px;top:9px;opacity:.55;pointer-events:none;line-height:0}
.gfind .gfk{position:absolute;right:8px;top:9px;font-size:10.5px;color:#888;border:1px solid #ddd;border-radius:5px;padding:0 4px;background:#fafafa;pointer-events:none}
.gfind .gfclose{display:none}
.gfpanel{position:fixed;right:64px;top:50px;width:min(560px,92vw);background:var(--panel,#fff);border-radius:14px;box-shadow:0 18px 50px rgba(30,20,80,.22);border:1px solid #ece9f6;z-index:9500;max-height:72vh;overflow:auto;padding:6px}
.gfg{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#8a86a3;padding:8px 10px 3px}
.gfr{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;cursor:pointer;text-decoration:none;color:inherit}
.gfr:hover,.gfr.sel{background:#f3f0ff}
.gfr .gft{min-width:0;flex:1}.gfr b{font-weight:500;font-size:14px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gfr small{color:#777;font-size:12.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gfr .gfic{width:30px;height:30px;border-radius:8px;background:#f1eff8;display:flex;align-items:center;justify-content:center;font-size:14px;flex:none;color:#4b3bc4}
.gfr .gfent{display:none;margin-left:auto;font-size:11.5px;color:#6a54f0;white-space:nowrap}.gfr.sel .gfent{display:inline}
.gfr mark,.gfchip mark{background:#fff1a8;border-radius:3px;padding:0 1px;color:inherit}
.gfwait{padding:10px;color:#888;font-size:13px}
.gfall{display:block;text-align:center;padding:9px;border-top:1px solid #eee;margin-top:4px;color:#4b3bc4;font-size:13px}
.gfhid{display:none!important}
.gfchip{display:inline-flex;align-items:center;gap:6px;background:#fff6d6;border:1px solid #f2dc8a;border-radius:10px;padding:3px 4px 3px 10px;font-size:13px;margin:2px 6px 2px 0}
.gfchip button{border:0;background:#f5e6a8;border-radius:7px;width:24px;height:24px;cursor:pointer}
.gfflash{animation:gfflash 1.6s ease}
@keyframes gfflash{0%,40%{box-shadow:0 0 0 3px #6a54f0;background:#f3f0ff}100%{box-shadow:none}}
@media (min-width:761px){html.gfon .osearch{display:none!important}}
@media (max-width:760px){
  .gfind{display:none}
  .gfind.full{display:flex;position:fixed;inset:0;z-index:9600;background:var(--panel,#fff);margin:0;flex-direction:row;flex-wrap:wrap;align-content:flex-start;padding:10px 12px;gap:8px}
  .gfind.full input{flex:1 1 0;min-width:0;width:auto;height:42px;font-size:16px}
  .gfind.full .gfi{left:22px;top:22px}.gfind.full .gfk{display:none}
  .gfind.full .gfclose{display:block;border:0;background:#f1eff8;border-radius:10px;height:42px;padding:0 14px;font:inherit}
  .gfind.full .gfpanel{position:static;width:100%;flex-basis:100%;box-shadow:none;border:0;max-height:calc(100vh - 80px);padding:0}
}
/* b156: sort controls */
.csort{display:flex;gap:6px;align-items:center;margin:0 0 8px;flex-wrap:wrap;font-size:13px}
.csort small{color:var(--ink2,#666)}
.csort select{height:32px;border-radius:9px;border:1px solid #d6d2e6;padding:0 8px;font:inherit;font-size:13px;background:var(--panel,#fff);width:auto}
.csort button,.gbar .gsd{height:32px;border-radius:9px;border:1px solid #cfc7f3;background:#f4f1ff;color:#4b3bc4;padding:0 10px;font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.gbar .gsl select{width:auto;max-width:150px}
@media (max-width:760px){.gbar .gsl span{display:none}.gbar .gsl select{max-width:110px}.gbar .gsd{padding:0 9px}}
@media (max-width:760px){.gbar.ghead,.gbar.gbin{flex-wrap:wrap!important;row-gap:6px;max-width:100%}.pageact:has(.gbar){flex-wrap:wrap;max-width:100%;min-width:0}}

/* b157: phone Home and bottom bar (roles switched on in Settings › Phone home) */
.phbar{display:none}
html.phone .phbar{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:900;background:var(--panel,#fff);border-top:1px solid #e8e5f3;grid-auto-flow:column;grid-auto-columns:1fr;padding:4px 4px calc(4px + env(safe-area-inset-bottom));box-shadow:0 -6px 18px rgba(40,30,90,.06)}
html.phone .phbar a{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:11px;color:#6b6880;text-decoration:none;padding:5px 0 4px;border-radius:10px}
html.phone .phbar a .ic{width:21px;height:21px}
html.phone .phbar a.on{color:#4b3bc4;background:#f3f0ff;font-weight:600}
html.phone body:has(.phbar){padding-bottom:64px}
html.phone body:has(.phbar) .stickybar{bottom:60px!important}
.phome{padding:4px 2px 16px}
.phome h1{font-size:22px;margin:4px 0 2px}.phome .phsub{color:var(--ink2,#777);font-size:13px;margin-bottom:10px}
.phtodo{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.phtodo a{flex:none;background:var(--panel,#fff);border:1.5px solid #e6e2f5;border-radius:14px;padding:8px 11px;text-decoration:none;color:inherit;min-width:120px;max-width:170px}
.phtodo a b{display:block;font-size:20px;color:#4b3bc4;font-weight:600}.phtodo a span{font-size:12px;color:#555;line-height:1.25;display:block}
.phg{margin:14px 0 6px;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#8a86a3}
.phused{display:flex;gap:6px;flex-wrap:wrap}
.phused a{border:1px solid #e3dff3;background:#f8f7fc;border-radius:999px;padding:6px 12px;font-size:13px;text-decoration:none;color:#3b3560}
.phtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
@media (min-width:761px){.phtiles{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}}
.phtiles a{background:var(--panel,#fff);border:1px solid #ece9f6;border-radius:14px;padding:10px 4px 8px;text-align:center;text-decoration:none;color:#2b2840;font-size:12px;line-height:1.2;display:flex;flex-direction:column;align-items:center;gap:5px;min-height:80px}
.phtiles a i{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c) 15%,#fff);color:var(--c)}
.phtiles a em{font-style:normal;font-size:11px;color:#c52a2a;font-weight:600}
.phpc{margin-top:16px;text-align:center;font-size:13px}
.phroles,.phrolesel{display:flex;flex-wrap:wrap;gap:6px 14px}.phrolesel{gap:6px}
.phpick{display:flex;flex-direction:column;gap:4px;max-width:560px}
.phpi{display:flex;align-items:center;justify-content:space-between;border:1px solid #ece9f6;border-radius:10px;padding:5px 8px;background:var(--panel,#fff)}
.phpi label{display:flex;align-items:center;gap:8px;cursor:pointer}
.phpi i{width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c) 15%,#fff);color:var(--c)}
.phpi button{border:1px solid #d6d2e6;background:#fff;border-radius:7px;width:30px;height:28px;cursor:pointer;margin-left:4px}
.phrc{display:inline-flex;align-items:center;gap:6px;border:1px solid #e3dff3;border-radius:10px;padding:5px 10px;background:var(--panel,#fff);cursor:pointer}
.phrc input{display:inline-block!important;width:16px;height:16px;margin:0;appearance:auto;-webkit-appearance:checkbox;opacity:1;position:static}
.phrc:has(input:checked){border-color:#6a54f0;background:#f3f0ff;color:#3a2ba8}
.phrolesel .chip.on{background:#6a54f0;color:#fff;border-color:#6a54f0}
/* b158 (owner 18-10): a card the filter box hides stays hidden — the compact-card rules (display:flex!important) were overriding it */
.pgal .pcard[hidden],.sgkids .pcard[hidden],.pgal .sgcard[hidden]{display:none!important}
/* b160: the filter found nothing here — where it is instead */
.pknone{margin:6px 0 10px;padding:9px 12px;border:1px solid #f2dc8a;background:#fffbea;border-radius:12px;font-size:13.5px}
.pknone .muted{color:var(--ink2,#666)}
.pknl{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.pknl a{display:flex;flex-direction:column;gap:1px;border:1px solid #e3dff3;background:var(--panel,#fff);border-radius:10px;padding:6px 10px;text-decoration:none;color:inherit;min-width:150px}
.pknl a small{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:#8a86a3}.pknl a b{font-size:14px}.pknl a span{font-size:12px;color:#666}
/* b161: what a search matched is outlined; rows a search left out are hidden */
.pcard.pkhit{outline:2.5px solid #6a54f0;outline-offset:1px;box-shadow:0 0 0 5px #ece8ff}
.sgcard:has(.pcard.pkhit){outline:2px solid #b7abf7;outline-offset:1px}
tr.gfrowhid{display:none!important}
tr.gfrowhit td{background:#f6f3ff}

/* b163: buttons under a photo thumbnail wrap onto two lines instead of being cut off */
.gcard>button.mini{display:block;width:calc(100% - 8px);margin:4px auto 0;white-space:normal;line-height:1.2;padding:5px 3px;font-size:11.5px;min-height:0;height:auto;text-align:center;overflow:visible;text-overflow:clip}

/* b164 (owner 19-10): in compact kit cards (inside a set, To prepare) the tick box sits at the card's right end, never on the photo;
   an opened set lays out beside its collage and never grows wider than its row */
.sgkids .pcard,.pgal.kcompact>.pcard{position:relative}.sgkids .pcard .rimg,.pgal.kcompact>.pcard .rimg{position:static!important}
.sgkids .pcard .ptick,.pgal.kcompact>.pcard .ptick{position:absolute;top:auto;left:auto;right:7px;bottom:6px;transform:none}
.sgkids .pcard .rbody,.pgal.kcompact>.pcard .rbody{padding-right:30px!important}
.sgcard{max-width:100%}
.sgcard.open .sgkids{grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr))}
.sgkids .pcard .rbody{overflow:hidden}
@media (min-width:761px){
  .sgcard.open{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:12px;row-gap:4px;align-items:start}
  .sgcard.open>*{grid-column:2;min-width:0}
  .sgcard.open>.sgcoll,.sgcard.open>.sgimgs{grid-column:1;grid-row:1/span 6;max-width:200px}
}
/* b165 (owner 19-10): ✂ Split on every colour kit inside a set too — small, at the end of the kit line */
.sgkids .kssplit1{display:inline-flex;align-items:center;gap:3px;margin-top:2px;padding:1px 7px;font-size:11.5px;align-self:flex-start}

/* W1: Settings › Companies, and the business dues chips */
.cofm{display:flex;flex-direction:column;gap:12px}
.coblk{border:1px solid var(--line,#e2dfee);border-radius:14px;padding:8px 12px 10px;margin:0;min-width:0}
.coblk input[type=checkbox]{appearance:auto;-webkit-appearance:checkbox;width:16px;height:16px;opacity:1;position:static;margin:0}
.coblk legend{padding:0 6px;font-size:14px}.coblk legend small{color:#8a86a3;margin-left:6px}
.cogrid{display:flex;flex-wrap:wrap;gap:6px 10px}
.cogrid label{display:flex;flex-direction:column;gap:2px;font-size:11.5px;color:#6b6880}
.cogrid label.chk{flex-direction:row;align-items:center;gap:5px;align-self:flex-end}
.cogrid input,.bztbl input{height:30px;border:1px solid #d6d2e6;border-radius:8px;padding:0 6px;font:inherit;font-size:13px;color:#24213a}
.bztbl{margin-top:8px;border-collapse:collapse;font-size:12.5px}.bztbl th{font-weight:400;color:#6b6880;text-align:left;padding:3px 5px}.bztbl td{padding:2px 5px}
.bztbl input[type=color]{width:34px;padding:0 2px}
.bzdot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle}
.bzchip{display:inline-block;white-space:nowrap;border-radius:999px;padding:1px 8px;font-size:12px;border:1px solid color-mix(in srgb,var(--bz,#6a54f0) 35%,#fff);background:color-mix(in srgb,var(--bz,#6a54f0) 9%,#fff);color:color-mix(in srgb,var(--bz,#6a54f0) 80%,#000);margin:0 4px 2px 0}
.bzchip.tot{--bz:#475569}
@media (max-width:760px){.bztbl{display:block;overflow-x:auto}}
.bzpick{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.bzpick .bzchip{padding:4px 10px;font-size:13px;cursor:pointer}
.bzpick .bzchip input{appearance:auto;-webkit-appearance:checkbox;width:15px;height:15px;opacity:1;position:static;margin:0 4px 0 0;vertical-align:-2px}
.cocap{display:flex;flex-direction:column;font-size:11.5px;color:#6b6880;gap:2px}.cocap input{width:12ch;height:30px;border:1px solid #d6d2e6;border-radius:8px;padding:0 6px}

/* W1 (6C): receipt split between businesses + UPI QR */
.rsplit .rsrow{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.rsbox{display:flex;flex-direction:column;gap:3px;border:1px solid var(--line,#e2e8f0);border-left:4px solid var(--bz);border-radius:10px;padding:6px 8px;min-width:150px;flex:1 1 150px;max-width:240px;margin:0}
.rsbox span{font-size:12.5px;font-weight:600;color:var(--bz)}
.rsbox span small{font-weight:400;color:var(--muted,#64748b)}
.rsbox input{width:100%}
.rsbox.solo input{background:#f8fafc}
.rsleft{font-size:12.5px;font-weight:600;align-self:center}
.rsleft.ok{color:#16a34a}.rsleft.bad{color:#dc2626}
.rsqr{display:flex;align-items:center;gap:12px}
.rsqr[hidden]{display:none}
.rsqrbox svg{display:block;border:1px solid var(--line,#e2e8f0);border-radius:8px}

/* W1 (c): Cashier */
.cs-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
.cs-bar .seg{display:inline-flex;border:1px solid var(--line,#e2e8f0);border-radius:9px;overflow:hidden;background:#fff}
.cs-bar .seg a{padding:5px 12px;font-size:13px;color:#475569;text-decoration:none;white-space:nowrap}
.cs-bar .seg a+a{border-left:1px solid var(--line,#e2e8f0)}
.cs-bar .seg a.on{background:var(--bz);color:#fff}
.cs-day{margin:0 0 0 auto}
.cs-day input{height:32px}
.cs-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.cs-grid>*{min-width:0}
.cs-qrs{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.cs-qrs figure{margin:0;text-align:center;font-size:12px}
.cs-qrs svg{border:1px solid var(--line,#e2e8f0);border-radius:8px}
.cs-tbl td{white-space:nowrap}
.chip.amber{background:#fef3c7;color:#92400e}.chip.red{background:#fee2e2;color:#991b1b}
@media (max-width:760px){.cs-grid{grid-template-columns:1fr}.cs-tbl .hm,table.tbl.cs-tbl td>small.hm{display:none!important}.cs-day{margin-left:0}}
.cs-tbl{width:100%}
@media (max-width:760px){
  .cs-tbl th:nth-child(1),.cs-tbl td:nth-child(1),.cs-tbl th:nth-child(4),.cs-tbl td:nth-child(4),.cs-tbl th:nth-child(5),.cs-tbl td:nth-child(5){display:none}
  .cs-tbl td:nth-child(3){max-width:120px;overflow:hidden;text-overflow:ellipsis}
  .cs-tbl th,.cs-tbl td{padding:4px 5px}
}
.cs-ag form.inl{display:inline}.cs-ag td{white-space:normal}

/* W1 (e): the header business switch */
.bzview{display:inline-flex;align-items:center;margin-right:4px}
.bzview select{height:32px;border:1px solid var(--line,#e2e8f0);border-radius:9px;padding:0 6px;font-size:12.5px;background:#fff;color:#334155;max-width:140px}
.bzview.on select{border-color:var(--bz);color:#fff;background:var(--bz);font-weight:600}
@media (max-width:760px){.bzview select{max-width:92px;font-size:12px;height:30px}}
@media (max-width:760px){.bzview select{max-width:62px;font-size:11px;padding:0 2px;height:28px}.bzview{margin-right:0}}
/* W1 (f): reminders */
.rm-tbl td{vertical-align:middle}
.rm-tbl input[type=date]{width:16ch}
.rm-bz{display:inline-flex;align-items:center;gap:3px;color:var(--bz);font-size:12.5px;margin:0 4px 0 0;white-space:nowrap}

/* W1: Miracle import preview */
.mi-sum{display:flex;gap:8px 16px;flex-wrap:wrap;margin:0 0 10px;font-size:13px}
.mi-sum span{border:1px solid var(--line,#e2e8f0);border-radius:999px;padding:2px 10px;background:#fff}
.mi-sum span.warn{border-color:#f59e0b;background:#fffbeb}
.mi-t{width:auto;min-width:50%}
.mi-d td{vertical-align:top}
.mi-o{display:block;margin:0 0 3px;font-size:12.5px;white-space:nowrap}
.mi-o small{color:#64748b}

/* W8: sales totals */
.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin:0 0 12px}
.st-card{display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--line,#e2e8f0);border-radius:12px;padding:10px 12px;text-decoration:none;color:inherit}
.st-card.on{border-color:#0f766e;box-shadow:0 0 0 2px #ccfbf1}
.st-card span{font-size:12px;color:#64748b}.st-card b{font-size:20px}.st-card small{color:#64748b}
.st-card i{font-style:normal;font-size:12px;color:var(--bz)}
.st-tbl td{white-space:nowrap}
@media (max-width:760px){.st-grid{grid-template-columns:1fr 1fr}.st-card b{font-size:16px}.st-tbl .hm,table.tbl.st-tbl td>small.hm{display:none!important}.st-tbl td:nth-child(5),.st-tbl th:nth-child(5){display:none}.st-tbl td:nth-child(3){max-width:130px;overflow:hidden;text-overflow:ellipsis}}

/* 19-10 owner (GLOBAL compact rule): a breadcrumb row with nothing in it takes no line */
.crumb:not(:has(> :not(.mdot):not(.crumbq:empty))){display:none!important}
/* 19-10 GLOBAL: long name on PC, abbreviation on phone (<span class="ab-lg">Rakhi</span><span class="ab-sh">R</span>) */
.ab-sh{display:none}
@media (max-width:760px){.ab-lg{display:none!important}.ab-sh{display:inline!important}}
td.nowrap,td[data-dt]{white-space:nowrap}
@media (max-width:760px){
  /* the page's status button does not get a row of its own: it sits at the right, the next row flows beside it */
  .main>.crumb:not(.hastabs):not(:has(.pageact a,.pageact button:not(.kpibtn),.tabs)):has(+ .cs-bar){float:right;margin:0 0 4px 8px!important;padding:0!important;gap:4px}
  .main>.crumb:not(.hastabs):not(:has(.pageact a,.pageact button:not(.kpibtn),.tabs)):has(+ .cs-bar) .ocrumb{display:none}
  .main>.crumb .kpibtn{height:30px}
  /* card titles keep their Filter / Group buttons on the same line (icon only) */
  .chead{flex-wrap:wrap;gap:6px;row-gap:4px}
  .chead>h2{flex:1 1 150px;min-width:150px;white-space:nowrap;overflow:hidden;font-size:15px}
  .chead>h2 .ic{flex-shrink:0}
  .chead>.cact{flex:0 0 auto!important;width:auto!important;margin-left:auto;flex-wrap:nowrap;gap:4px}
  .chead .gbar.ghead{flex:0 0 auto!important;width:auto!important}
  .chead .gbar.ghead .gbtn>span{display:none}
  .chead .gbar.ghead select{font-size:12px;max-width:74px;height:26px}
  .chead .gbar.ghead .gbtn{padding:0 6px;height:28px}
}
/* W9: WhatsApp one-a-minute line */
.wa-slot{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:5px 9px;margin:0 0 8px}
.wa-slot .chip{font-size:11.5px}
/* 19-10 compact rule — the last four screens */
@media (max-width:760px){
  /* Cashier: business switch + day on one line */
  .cs-bar{flex-wrap:nowrap;gap:6px}.cs-bar .seg a{padding:0 9px}.cs-day{margin-left:auto!important}.cs-day input{width:128px;height:30px}
  /* Estimates: List · New · Club · Reconcile and the Stage picker on one line */
  .tabs.esttabs{flex-wrap:nowrap!important;gap:4px!important;overflow-x:auto;scrollbar-width:none}.tabs.esttabs .tab{flex:none;padding:5px 8px!important}
  .tabs.esttabs .esttabs-r{margin-left:auto!important;flex:none!important;width:auto!important}.tabs.esttabs .esttabs-r select{max-width:86px;height:30px;font-size:12px;padding:0 2px}
  /* page buttons (New customer · Show inactive · Excel · Print …): the main one keeps its words, the others are icons — one line */
  .pageact{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .pageact>a:not(.btn)>span,.pageact>button:not(.btn)>span{display:none}
  .pageact>a:not(.btn),.pageact>button:not(.btn){padding:0 8px;min-width:34px;justify-content:center}.pageact{gap:4px!important}
  .main>.crumb:has(.pageact a) .ocrumb{display:none}
  .main>.crumb:not(.hastabs):has(.pageact a){flex-wrap:nowrap}.main>.crumb:not(.hastabs) .pageact{width:auto!important;flex:1 1 auto;order:0!important}
  /* Festivals: the message is edited on the PC; R / I / N ticks; narrow name + date */
  .rm-tbl th:nth-child(5),.rm-tbl td:nth-child(5),.rm-tbl th:nth-child(7),.rm-tbl td:nth-child(7){display:none}
  .rm-tbl input[name$="[name]"]{width:11ch!important}.rm-tbl input[type=date]{width:15ch;font-size:12px;padding:0 4px}
  .rm-tbl input[name$="[days_before]"]{width:5ch!important}.rm-bz{margin:0 2px 0 0}
  .rm-tbl .mini>span{display:none}.rm-tbl .mini{padding:0 6px}
  .pageact>a,.pageact>button,.pageact>a>span,.pageact>button>span{white-space:nowrap!important}.pageact>a.btn{flex:none!important}
}
/* business print details (Settings › Companies) */
.prblk{margin-top:8px;border:1px solid #e6e3f0;border-radius:10px;padding:5px 9px;background:#fbfaff}
.prblk>summary{cursor:pointer;font-size:13px;display:flex;gap:6px;align-items:center}
.prgrid{margin-top:6px}.prgrid label{display:flex;flex-direction:column;gap:2px}
.prlogo{height:34px;max-width:120px;object-fit:contain;border:1px solid #eee;border-radius:6px;background:#fff}
.prgrid input[type=file]{height:auto;border:0;padding:0;font-size:12px}
@media (max-width:760px){.prgrid input:not([type=file]):not([type=checkbox]){width:100%!important}}
@media (max-width:760px){
  .cogrid,.prgrid{display:grid!important;grid-template-columns:1fr 1fr;gap:4px 8px}
  .cogrid label,.prgrid label{min-width:0}.cogrid input:not([type=checkbox]),.prgrid input:not([type=file]):not([type=checkbox]){width:100%!important;min-width:0}
  .prgrid label:has(input[type=file]){grid-column:span 1}.prgrid input[type=file]{width:100%;font-size:11px}
}
/* 19-10 compact rule: on the phone the top tabs (simple-mode menus) scroll UNDER the search / business / scan buttons, never through them */
@media (max-width:760px){
  .rright{z-index:6}.rright>.osearch,.rright>.bzview,.rright>*{position:relative;z-index:6}
  .rright>.osearch{background:#f1eff9}
  .rpanel.on{padding-right:156px!important}
  /* the module button (Account ▾ / Sales ▾ …) is never covered by the buttons on the right */
  .rright{gap:2px!important;padding-left:0!important}.rright .bzview select{max-width:52px!important;padding:0 2px!important}
  .pxmod{padding:0 8px!important;gap:2px!important}.pxmod span{font-size:15px!important;letter-spacing:-.2px}
}

/* C1: inquiry handed to me — one thin line on every screen */
.cd-nudge{display:flex;align-items:center;gap:6px;background:#f5f3ff;border:1px solid #c4b5fd;color:#5b21b6;border-radius:9px;padding:4px 10px;margin:0 0 8px;font-size:13px;text-decoration:none}
.cd-nudge b{margin-left:auto}

/* b165: on the phone the "it is here" cards sit two to a row, compact */
@media(max-width:760px){.pknl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.pknl a{min-width:0;padding:4px 7px}.pknl a b{font-size:13px}.pknl a span{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}

/* b180 (owner 27-10, GLOBAL): a message / hint / label line inside a card wraps inside the card — never cut at the card's edge.
   Quantities (.rp and the number side of a row) keep their one-line rule (owner 15-10). */
.pcard .rl>span:empty,.rcard .rl>span:empty{display:none}
.pcard .rl>span:has(.small,.muted,.hint,[data-diff],small,label),.rcard .rl>span:has(.small,.muted,.hint,[data-diff],small,label){white-space:normal;min-width:0;max-width:100%;flex:1 1 auto}
.pcard .rl .small,.pcard .rl .muted,.pcard .rl .hint,.pcard .rl [data-diff],.pcard .rl small,.pcard .jwsug,.pcard .rbody>p,.pcard .rbody>.small,
.rcard .rl .small,.rcard .rl .muted,.rcard .rl .hint,.rcard .rl [data-diff],.rcard .rl small,.rcard .rbody>p,.rcard .rbody>.small{white-space:normal!important;overflow-wrap:anywhere;min-width:0;max-width:100%;overflow:visible;text-overflow:clip}
/* b180: the card footer too — it wraps onto a second line when its parts do not fit, and a message in it wraps */
.pcard .rfoot,.rcard .rfoot{flex-wrap:wrap;row-gap:4px}
.pcard .rfst,.rcard .rfst{flex:0 1 auto;min-width:0;max-width:100%}
.pcard .rfst .small,.pcard .rfst [data-diff],.pcard .rfst .muted,.rcard .rfst .small,.rcard .rfst [data-diff],.rcard .rfst .muted{white-space:normal!important;overflow-wrap:anywhere;text-align:right}
.pcard .rfoot>span:first-child:has(label,input,small),.rcard .rfoot>span:first-child:has(label,input,small){overflow:visible;white-space:normal}

/* ===== b186 GLOBAL (owner 28-10): compact phone cards — see the note inside ===== */
@media (max-width:760px){
/* b186 GLOBAL (owner 28-10): compact phone cards — one card per row, a small photo at the left with the
   first lines beside it, the boxes and buttons on one full-width line under it */
.pgal:not(#_),.rgal:not(#_){grid-template-columns:1fr!important;gap:5px!important}
.pgal:not(#_)>.pcard,.rgal:not(#_)>.rcard{display:grid!important;grid-template-columns:58px minmax(0,1fr) auto;column-gap:7px;row-gap:3px;padding:5px 6px!important;min-height:0!important;height:auto!important;align-items:center}
.pgal:not(#_)>.pcard>.rimg,.rgal:not(#_)>.rcard>.rimg{grid-column:1;grid-row:1/span 3;width:58px!important;height:58px!important;min-height:0!important;aspect-ratio:auto!important;border-radius:8px;align-self:start}
.pgal:not(#_)>.pcard>.rimg,.rgal:not(#_)>.rcard>.rimg{overflow:hidden}
.pgal:not(#_)>.pcard>.rbody,.rgal:not(#_)>.rcard>.rbody{display:contents}
.pgal:not(#_)>.pcard>.rbody>*,.rgal:not(#_)>.rcard>.rbody>*{grid-column:2;margin:0!important;min-width:0}
.pgal:not(#_)>.pcard>.rbody>.rl,.rgal:not(#_)>.rcard>.rbody>.rl{font-size:12px;line-height:1.25;min-height:0}
.pgal:not(#_)>.pcard>.rbody>.rl.rtop,.rgal:not(#_)>.rcard>.rbody>.rl.rtop{font-size:13.5px}
.pgal:not(#_)>.pcard>.rbody>.rin,.pgal:not(#_)>.pcard>.rbody>.rfoot,.pgal:not(#_)>.pcard>.rbody>.rmsg,.pgal:not(#_)>.pcard>.rbody>.rwhy,
.rgal:not(#_)>.rcard>.rbody>.rin,.rgal:not(#_)>.rcard>.rbody>.rmsg,.rgal:not(#_)>.rcard>.rbody>.runm,.rgal:not(#_)>.rcard>.rbody>.rwhy,
.rgal:not(#_)>.rcard>.rbody>.rstl,.rgal:not(#_)>.rcard>.rbody>.runwl,.rgal:not(#_)>.rcard>.rbody>.rrl{grid-column:1/-1}
.pgal:not(#_)>.pcard>.rbody>.rmsg:empty,.rgal:not(#_)>.rcard>.rbody>.rmsg:empty{display:none}
/* receive: chips + QC / Revise on one line; Receive stays on the box line */
.rgal:not(#_)>.rcard .rstl{flex-wrap:nowrap!important}.rgal:not(#_)>.rcard .rstl .rst{flex:1 1 auto;min-width:0;overflow:hidden;flex-wrap:nowrap!important}
.rgal:not(#_)>.rcard .rstl .rqc{height:22px;font-size:11.5px}
.rgal:not(#_)>.rcard .rinr{flex-wrap:nowrap!important;padding-top:0!important}
.rgal:not(#_)>.rcard .rinr .rcvgo{flex:none!important;width:auto!important;height:34px;padding:0 10px}
.rgal:not(#_)>.rcard .rinr .rcvgo span{display:none}
.rgal:not(#_)>.rcard .rinr .rq{flex:1 1 80px!important}.rgal:not(#_)>.rcard .rinr .rr{flex:0 1 72px!important}
.rgal:not(#_)>.rcard .rlate{font-size:9.5px;padding:1px 4px;top:2px;left:2px}
/* the one-tap Split of a kit sits at the right of the photo lines */
.pgal:not(#_)>.pcard>.rbody>.kssplit1{grid-column:3;grid-row:1/span 3;align-self:center;padding:3px 8px!important;font-size:11.5px!important;width:auto!important}
/* kit preparation: photo beside two lines, then Gross | Dozen | Piece and Pending | Ready on one line */
.pgal.kitcards:not(#_)>.pcard>.rimg{grid-row:1/span 2;width:44px!important;height:44px!important}
.pgal.kitcards:not(#_)>.pcard>.rbody>.rin{grid-column:1/3;grid-row:3}
.pgal.kitcards:not(#_)>.pcard>.rbody>.rfoot{grid-column:3;grid-row:3;align-self:center}
.pgal.kitcards:not(#_)>.pcard .rin input{height:32px}
.pgal.kitcards:not(#_)>.pcard .rfoot .rbtn{padding:0 7px;height:32px;font-size:12px}
/* colour-set tiles: small photos at the left, the buttons under */
.pgal:not(#_)>.sgcard{display:grid!important;grid-template-columns:auto minmax(0,1fr);gap:3px 7px;padding:5px 6px!important;align-items:center}
.pgal:not(#_)>.sgcard>.sgimgs{grid-column:1;grid-row:1/span 2;display:flex!important;gap:2px;height:auto!important}
.pgal:not(#_)>.sgcard>.sgimgs>span{width:44px!important;height:44px!important;flex:none!important;aspect-ratio:auto!important}
.pgal:not(#_)>.sgcard>.sghead,.pgal:not(#_)>.sgcard>.sgcols,.pgal:not(#_)>.sgcard>.sgpart{grid-column:2;margin:0!important}
.pgal:not(#_)>.sgcard>.sgbar,.pgal:not(#_)>.sgcard>.sgkids{grid-column:1/-1}
.pgal:not(#_)>.sgcard>.sgpart:empty{display:none}
/* production floor: the Send box and what is left on one short line */
.pfgal:not(#_)>.pfcard>.rimg{grid-row:1/span 2;width:44px!important;height:44px!important}
.pfgal:not(#_)>.pfcard>.rbody>.rin{grid-template-columns:minmax(0,1fr) auto!important;align-items:center}
.pfgal:not(#_)>.pfcard .rin label{flex-direction:row!important;align-items:center;gap:5px}
.pfgal:not(#_)>.pfcard .rin input{height:32px}
.pfgal:not(#_)>.pfcard>.rbody>.pfpe{display:none}
}
@media (max-width:760px){
.pgal.kitcards:not(#_)>.pcard>.rbody>.rl,.pfgal:not(#_)>.pfcard>.rbody>.rl{grid-column:2/-1}
}