/* Banzene — legacy.css
   Rules carried over unchanged from the old assets/app.css for screens the new app.css does not cover yet
   (barcode labels, camera/OCR, "who is at the door", invoice item lines, bars chart, work-order slots, VIP bar…).
   Load after tokens.css and app.css. Old variable names below point at the new tokens. Move each block into app.css
   with token values when that screen is redesigned, then delete it here. */
:root{--y:var(--brand);--y2:var(--brand-hover);--ink2:var(--nav-bg);--mut:var(--ink-muted);--err:var(--danger-fill);--ok:var(--success-fill);--warn:var(--warning-fill);--card:var(--surface);--r:var(--radius-lg);--blue:var(--xl-highlight);--peach:var(--xl-weekend);--shadow:var(--shadow-sm);--gold:var(--brand-press)}
.items td{padding:4px}
.items th{font-size:12.5px;color:var(--mut);text-align:right;padding:2px 6px;font-weight:700}
.items{width:100%;border-collapse:collapse;min-width:620px}
.items .rm{background:#fff;border:1px solid #f3b4ae;color:var(--err);border-radius:7px;width:34px;height:34px;cursor:pointer;font-size:18px;line-height:1}
.items .lt{font-weight:800;direction:ltr;text-align:center;min-width:70px}
.bars{display:flex;align-items:flex-end;gap:3px;height:150px;padding-top:8px;direction:ltr}   /* like .bars-x below: each bar stands over its own day */
.bars .b{flex:1;background:var(--y);border-radius:3px 3px 0 0;min-height:2px;position:relative}
.bars .b.wk{background:#e6e8ee}
.bars .b:hover{background:var(--ink)}
.bars .b:hover::after{content:attr(data-t);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:3px 8px;border-radius:6px;font-size:12px;white-space:nowrap;z-index:3;direction:ltr}
.bars-x{display:flex;gap:3px;font-size:10px;color:var(--mut);direction:ltr}
.bars-x span{flex:1;min-width:0;text-align:center}   /* as wide as the bar above it, also when the number is wider than a phone's bar */
details.diff summary{cursor:pointer;color:#3b5fa8;font-weight:700}
details.diff pre{white-space:pre-wrap;text-align:left;direction:ltr;background:#f6f7f9;padding:8px;border-radius:8px;font-size:12px;max-width:520px;margin:6px 0 0}
@media (max-width:640px){
  .items{min-width:0}
  .items thead{display:none}
  .items tr{display:grid;grid-template-columns:1fr 1fr 1fr 38px;gap:6px;padding:10px 0;border-bottom:1px solid var(--line);align-items:center}
  .items td{padding:0}
  .items td:nth-child(1){grid-column:1/2}
  .items td:nth-child(2){grid-column:2/-1}
  .items .lt{min-width:0}
}
.sheet-split{grid-template-columns:minmax(0,1fr) 330px;align-items:start}
@media (max-width:1200px){
  .sheet-split{grid-template-columns:1fr}
}
@media print{
  .sheet-split{grid-template-columns:1fr}
}
details.diff pre{max-width:min(520px,70vw)}
@media (max-width:1100px){
  .sheet-split{grid-template-columns:1fr}
}
@media (max-width:640px){
  .bars{height:110px}
  .bars-x span{font-size:8px}
}
.branch-pick{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.branch-pick span{font-weight:700;color:var(--mut)}
.branch-pick a{padding:10px 22px;border-radius:12px;background:#fff;border:2px solid var(--line);text-decoration:none;font-weight:800;font-size:16px;box-shadow:var(--shadow)}
.branch-pick a.on{background:var(--ink);color:var(--y);border-color:var(--ink)}
@media (max-width:640px){
  .branch-pick a{flex:1 1 auto;text-align:center;padding:10px 12px}
}
.todo-late{border-color:#fecdca!important}
.todo-today{border-color:#f1dc7a!important}
.tour-tip.center{top:50%;left:50%;transform:translate(-50%,-50%);animation:none}
.nb-menu.fit{overflow:visible}
.gs-opt small.gs-who{color:#3a3d45;font-size:13.5px}
.gs-opt .gs-hist{grid-column:2;grid-row:2/4;align-self:center;font-size:12.5px;font-weight:700;color:#2f55a4;text-decoration:underline;white-space:nowrap}
.att-add{cursor:pointer}
.att.busy .att-add{opacity:.5;pointer-events:none}
.chk-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px 16px}
.chk-list span{color:#8a8f9c}
.chk-list span.on{color:var(--ink);font-weight:700}
.sign-row{display:none;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:38px;font-size:12.5px}
.sign-row i{display:block;border-bottom:1px solid #1d1e20;height:44px}
@media print{
  .sign-row{display:grid}
  .att .att-grid img{height:150px}
  .chk-list span{color:#555}
  .chk-list span.on{color:#000}
}
.pl-strip{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px}
.pl-strip>div{display:flex;flex-direction:column;gap:2px}
.pl-strip span{font-size:12.5px;color:var(--mut)}
.pl-strip span a{margin-inline-start:6px}
.pl-strip b{font-size:19px;font-weight:800}
.pl-strip>i{font-style:normal;font-size:22px;color:#b7bac3;font-weight:800}
.pl-strip .res{margin-inline-start:auto;background:#FFF4BF;border-radius:11px;padding:8px 16px}
.pl-strip .res b{font-size:23px}
@media (max-width:640px){
  .pl-strip .res{margin-inline-start:0;width:100%}
}
.lbl-sheet{display:none}
.blbl{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;overflow:hidden;color:#000;background:#fff;direction:rtl;font-family:Arial,Tahoma,sans-serif;break-inside:avoid}
.blbl b{font-size:8.5pt;line-height:1.15;text-align:center;max-height:2.3em;overflow:hidden;font-weight:700}
.blbl svg{width:100%;flex:1;min-height:0;display:block}
.blbl span{display:flex;justify-content:space-between;align-items:baseline;font-size:7.5pt;direction:ltr}
.blbl span i{font-style:normal;letter-spacing:.5px}
.blbl span u{text-decoration:none;font-weight:700;direction:rtl}
@media print{
  body:has(.lbl-sheet .blbl) .main>*:not(.lbl-sheet){display:none!important}
  body:has(.lbl-sheet .blbl) .main{padding:0!important;margin:0!important;max-width:none!important}
  .lbl-sheet{display:block}
  .lbl-sheet .blbl{padding:1.5mm 2mm;page-break-after:always;box-sizing:border-box}
  .lbl-sheet.s50x25 .blbl{width:50mm;height:25mm}
  .lbl-sheet.s40x30 .blbl{width:40mm;height:30mm}
  .lbl-sheet.s60x40 .blbl{width:60mm;height:40mm}
  .lbl-sheet.s60x40 .blbl b{font-size:11pt}
  .lbl-sheet.sa4{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
  .lbl-sheet.sa4 .blbl{height:34mm;padding:3mm 4mm;page-break-after:auto;border:.2mm dashed #bbb}
}
.scan-ov{position:fixed;inset:0;z-index:300;background:#0d131ae6;display:flex;align-items:center;justify-content:center;padding:16px}
.scan-box{background:#fff;border-radius:16px;padding:14px;width:min(460px,100%);text-align:center}
.scan-box video{width:100%;max-height:60vh;border-radius:11px;background:#000;object-fit:cover}
.scan-box p{margin:10px 0;font-weight:700}
.slot-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.slot .att-add{align-self:flex-start}
.fuel{display:inline-block;width:120px;height:12px;border-radius:99px;background:#e6e8ee;overflow:hidden;vertical-align:middle;direction:ltr}
.fuel i{display:block;height:100%;background:linear-gradient(90deg,#d92d20,#f9cb00 45%,#12a150)}
.job-add{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-top:14px;padding:13px;background:#fffbe6;border:1px solid #f1dc7a;border-radius:12px}
.job-add label{font-size:12.5px}
.job-lock #items .rm,.job-lock [data-add],.job-lock #scanBtn{display:none!important}
.job-lock #items select,.job-lock #items input,.locked{pointer-events:none;background-color:#f6f7f9!important}
.job-lock .sticky-save [name=again]{display:none!important}
.who-list{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.who-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border:1px solid var(--line);border-radius:12px;padding:11px 13px;background:#fff}
.who-row:hover{border-color:var(--ink);background:#fffbe6}
.who-row.blocked{background:#fef3f2;border-color:#fecdca}
.who-main{flex:1;min-width:220px;line-height:1.7}
.who-car{color:#565a66;font-size:13.5px}
.who-acts{display:flex;gap:6px;flex-wrap:wrap}
.who-none{padding:16px;text-align:center;color:var(--mut);border:2px dashed #cfd2da;border-radius:12px}
.who-new{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.who-new .hint{margin-inline-end:auto;font-size:14px}
.who-group{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden}
.who-group:hover{background:#fff}
.who-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 13px;background:#f6f7f9;border-bottom:1px solid var(--line)}
.who-carrow{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 13px;border-top:1px solid #eef0f3}
.who-carrow:first-of-type{border-top:0}
.who-carrow:hover{background:#fffbe6}
.who-carrow.blocked{background:#fef3f2}
.shot-state.bad{color:#b42318;font-weight:700}
.shot-cands{display:flex;gap:6px;flex-wrap:wrap}
.shot-cands .chip{direction:ltr;font-family:Consolas,monospace;font-size:13.5px}
.shot-sel{position:absolute;border:2px solid var(--y);background:#f9cb0033;border-radius:4px;pointer-events:none}
.shot-sel[hidden]{display:none}
@media (max-width:640px){
  .sheet.cards tr.c-head{background:#1d1e20;color:#fff;border-color:#1d1e20;padding:9px 13px}
  .sheet.cards tr.c-head td{border:0!important;padding:2px 0;display:block;color:#fff}
  .sheet.cards tr.wk:not(.c-head){background:#fdf3e7}
}
@media (max-width:640px){
  .job-add input,.job-add select{font-size:16px!important}
  .bars-x span{font-size:10px!important;visibility:hidden}
  .bars-x span:nth-child(5n/**/+1){visibility:visible}
  .who-row .btn.sm,.who-carrow .btn.sm,.who-head .btn.sm{min-height:42px;padding:8px 15px;font-size:14.5px}
  .job-add>div{flex:1 1 100%!important;width:auto!important;min-width:0!important}
  .job-add .actions .btn{width:100%;min-height:48px}
  .pl-strip>i{display:none}
  .pl-strip>div{flex:1 1 40%}
}
.bars-x{overflow:hidden}
.ocr-bar{height:16px;border-radius:99px;background:#e6e8ee;overflow:hidden;direction:ltr}
.ocr-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--y),#ffd83a);transition:width .25s}
.ocr-bar i.ok{background:#12a150}
a.ocr-ask{display:block;text-decoration:none;margin-bottom:14px;border-color:#f3b4ae;background:#fff4f2}
a.ocr-ask:hover{border-color:var(--err)}
a.ocr-ask[hidden]{display:none}
.vip-btn{background:linear-gradient(135deg,#f9cb00,#e0a800)}
.vip-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:10px 14px;border-radius:12px;background:#fffbe6;border:1px solid #f1dc7a}
.kb-card.is-vip{border:2px solid #e0a800;background:linear-gradient(180deg,#fffbe6,#fff 60%)}
.sheet tbody tr.row-go:hover td:not(.hl){background-color:#fff3b8}
tr.row-go{cursor:pointer}
.who-carrow[data-href]:active{transform:scale(.995)}
details.row-more{display:inline-block;position:relative}
details.row-more>summary{list-style:none;cursor:pointer}
details.row-more>summary::-webkit-details-marker{display:none}
.row-more-box{position:absolute;inset-inline-end:0;top:calc(100% + 6px);z-index:15;width:min(520px,86vw);background:#fff;border:1px solid #d5d8df;border-radius:13px;box-shadow:0 16px 36px #0004;padding:14px;text-align:right;white-space:normal}
@media (max-width:640px){
  .row-more-box{position:static;width:auto;box-shadow:none;margin-top:8px}
  details.row-more{display:block;width:100%}
}
.field-msg{display:block;color:#b42318;font-weight:700;font-size:13px;margin-top:4px}
.scan-acts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.lbl-code{display:flex;gap:6px;align-items:center}
.lbl-code input{flex:1;min-width:120px}
/* a purchase line with no cost: the clerk says it is a free piece (pages/stock.php) */
.free-tick{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:12.5px;font-weight:700;color:var(--danger-fill);cursor:pointer;white-space:nowrap}
.free-tick[hidden]{display:none}
.free-tick input{width:18px;height:18px;margin:0}
@media(max-width:640px){
  #lines .c-part{grid-column:1/-1}
  #lines .c-q{grid-column:1}
  #lines .c-u{grid-column:2}
  #lines .c-u.wide{grid-column:2/4}
  #lines .c-s{grid-column:3}
  #lines .lt{grid-column:1;text-align:start}
  #lines .inf{grid-column:2/4}
  #lines .c-rm{grid-column:4}
  /* the heads are hidden on a phone: every box shows its own title (data-l), so quantity, cost and price are not three bare boxes */
  #lines td[data-l]::before,#srLines td[data-l]::before{content:attr(data-l);display:block;font-size:11.5px;font-weight:700;color:var(--mut);margin-bottom:2px;direction:rtl;text-align:start}
  /* a request to the other warehouse: the part's name gets the whole line, the quantity and «عندنا / عندهم» go under it */
  #srLines tr{grid-template-columns:1fr 1fr}
  #srLines td.sr-p{grid-column:1/-1}
  #srLines td.sr-q{grid-column:1}
  #srLines td.sr-i{grid-column:2;align-self:end}
}
.dchips{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.dchip{display:block;border:1px solid var(--line);border-radius:12px;padding:10px 12px;color:inherit;text-decoration:none;background:#fff}
a.dchip[href]:hover{border-color:#b9bcc6;box-shadow:0 2px 10px #0001}
.dchip b{display:block;font-size:21px;font-weight:800;direction:ltr;text-align:right}
.dchip span{font-size:12.5px;color:var(--mut)}
.dchip.hot{border-color:#f1dc7a;background:#fffbe6}
.dchip.bad{border-color:#f3b4ae;background:#fff5f4}
@media (max-width:640px){
  .dchips{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.adv-split{display:flex;gap:6px;align-items:center;margin:0}
.adv-split select{width:96px;min-height:34px;padding:4px 8px}

/* reception: the car from every side (added after the design hand-off) */
.car-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:var(--space-3)}
.car-shot{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);border:2px dashed var(--line-strong);border-radius:var(--radius-lg);padding:var(--space-2);cursor:pointer;text-align:center;background:var(--surface-2);min-height:var(--touch-min)}
.car-shot b{font-size:13.5px;color:var(--ink)}
.car-shot.has{border-style:solid;border-color:var(--success-fill);background:var(--success-soft)}
.car-shot.bad{border-color:var(--danger-fill);background:var(--danger-soft)}
.cs-pic{width:100%;aspect-ratio:4/3;border-radius:var(--radius-md);background:var(--surface-3);color:var(--ink-muted);display:flex;align-items:center;justify-content:center;overflow:hidden}
.cs-pic .ic{width:34px;height:34px}
.cs-pic img{width:100%;height:100%;object-fit:cover}
.cs-state{font-size:12.5px;color:var(--ink-muted)}
.car-shot.has .cs-state{color:var(--success);font-weight:700}
.car-shot.bad .cs-state{color:var(--danger);font-weight:700}
@container shell (max-width:640px){.car-shots{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* the save bar of a long form wraps on a phone when it carries three buttons */
@container shell (max-width:640px){.sticky-save{flex-wrap:wrap}.sticky-save .btn,.sticky-save .btn.ghost{flex:1 1 auto}}