/* Unified Shop: large, simple, touch-first. Works on tablets, phones and computers. */
:root{--navy:#123f4a;--teal:#1286a0;--line:#d6e2e4;--bg:#eef4f5;--ink:#173f4a;--muted:#5c757c;--warn:#a3352b;--gold:#f7b03a}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:18px;-webkit-text-size-adjust:100%}
.shop{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.shop-loading{margin:40px auto;color:var(--muted)}
.shop-btn{min-height:56px;padding:0 22px;border-radius:12px;border:2px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-weight:600;cursor:pointer;touch-action:manipulation}
.shop-btn:active{transform:scale(.98)}
.shop-primary{background:var(--teal);border-color:var(--teal);color:#fff}
.shop-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px}
.shop-signin{width:min(440px,calc(100% - 32px));margin:8vh auto;text-align:center}
.shop-signin h1{font-size:26px;margin:10px 0 18px}.shop-signin form{display:flex;flex-direction:column;gap:14px;text-align:left}
.shop-signin label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:16px}
.shop-signin input{min-height:56px;border:2px solid var(--line);border-radius:12px;padding:0 14px;font:inherit;font-size:20px}
.shop-logo{width:180px;height:auto}.shop-logo-sm{width:90px;height:auto}
.shop-msg{min-height:22px;margin:0;color:var(--warn);font-size:16px}
.shop-top{display:flex;align-items:center;gap:14px;padding:12px 16px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.shop-top>div{flex:1;min-width:0}.shop-top strong{display:block;font-size:22px}.shop-top small{color:var(--muted);font-size:15px}
.shop-top-icon{font-size:34px}
.shop-chat-btn b{display:inline-block;min-width:26px;margin-left:6px;padding:2px 8px;border-radius:999px;background:#e8603c;color:#fff;font-size:15px}
.shop-stations{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding:24px 16px;max-width:1100px;width:100%;margin:0 auto}
.shop-station{min-height:170px;border-radius:20px;border:2px solid var(--line);background:#fff;font:inherit;font-size:24px;font-weight:700;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;cursor:pointer}
.shop-station span{font-size:56px}.shop-station:active{border-color:var(--teal)}
.shop-note{text-align:center;color:var(--muted);font-size:16px}
.shop-body{flex:1;display:grid;grid-template-columns:1fr;gap:0;min-height:0}
.shop-body.with-chat{grid-template-columns:minmax(0,1fr) min(420px,40vw)}
.shop-queue{padding:16px;overflow:auto}
.shop-day{font-size:17px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:16px 4px 10px}.shop-day.shop-late{color:var(--warn)}
.shop-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.shop-job{position:relative;background:#fff;border:2px solid var(--line);border-left:8px solid var(--teal);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:4px;min-height:120px}
.shop-job strong{font-size:21px}.shop-job span{color:var(--ink)}.shop-job small{color:var(--muted);font-size:16px}
.shop-job.shop-high{border-left-color:var(--warn)}
.shop-tag{align-self:flex-start;background:#fbe3df;color:var(--warn);font-size:13px;font-weight:700;padding:2px 10px;border-radius:999px}
.shop-empty{margin:40px auto;max-width:520px;text-align:center;display:flex;flex-direction:column;gap:6px;color:var(--muted)}.shop-empty strong{color:var(--ink);font-size:20px}
.shop-chat{background:#fff;border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0;height:calc(100svh - 81px);position:sticky;top:81px}
.shop-chat>header{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line)}
.shop-chat nav{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line)}
.shop-chan{min-height:44px;padding:0 14px;border-radius:999px;border:2px solid var(--line);background:#fff;font:inherit;font-size:16px;cursor:pointer}
.shop-chan.active{background:var(--navy);border-color:var(--navy);color:#fff}.shop-chan b{background:#e8603c;color:#fff;border-radius:999px;padding:0 7px;font-size:13px}
.shop-msgs{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.shop-m{max-width:88%;background:var(--bg);border-radius:14px;padding:8px 12px}.shop-m.own{align-self:flex-end;background:#dcecf7}
.shop-m small{color:var(--muted);font-size:13px}.shop-m p{margin:2px 0 0;font-size:17px;overflow-wrap:anywhere}
.shop-link{display:inline-block;margin-top:4px;font-size:14px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:2px 8px}
#shop-send{padding:10px 12px;border-top:1px solid var(--line)}.shop-send-row{display:flex;gap:8px;align-items:stretch}
.shop-photo{display:inline-flex;align-items:center;justify-content:center;min-width:52px;padding:0 10px!important;font-size:22px;cursor:pointer}
.shop-m.at{box-shadow:inset 3px 0 0 #c2410c}
.shop-m-react{display:flex;gap:4px;margin-top:4px;opacity:.55}.shop-m-react button{border:0;background:none;font-size:18px;padding:2px 4px;cursor:pointer}
#shop-send textarea{flex:1;border:2px solid var(--line);border-radius:12px;padding:10px;font:inherit;font-size:17px;resize:none}
@media(max-width:800px){.shop-body.with-chat{grid-template-columns:1fr}.shop-body.with-chat .shop-queue{display:none}.shop-chat{height:calc(100svh - 81px);border-left:0}.shop-top strong{font-size:19px}.shop-btn{padding:0 14px}}
/* Job cards open the job */
.shop-job{cursor:pointer}.shop-job:active{border-color:var(--teal)}
.shop-job.shop-progress{border-left-color:#e0a21a}.shop-job.shop-hold{border-left-color:var(--warn)}
.shop-tag-progress{background:#fff3dc;color:#8a5a12}.shop-tag-hold{background:#fbe3df;color:var(--warn)}.shop-tag-done{background:#dff3ea;color:#21613f}.shop-tag-info{background:#e3f1f5;color:#1d4f60}
/* A job's screen */
.shop-detail{max-width:1000px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.shop-back{align-self:flex-start}
.shop-detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.shop-detail-head h1{margin:0;font-size:28px}.shop-detail-head p{margin:6px 0 0;color:var(--muted)}
.shop-count{text-align:center;min-width:130px}.shop-count strong{display:block;font-size:48px;line-height:1;color:var(--navy)}.shop-count span{font-weight:600}.shop-count small{display:block;color:var(--muted)}
.shop-big{min-height:72px;font-size:22px;width:100%}
.shop-danger{border-color:#e7b4ad;color:var(--warn)}
.shop-panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.shop-panel h2{margin:0;font-size:20px;display:flex;justify-content:space-between;align-items:baseline}.shop-panel h2 small{font-size:15px;color:var(--muted);font-weight:500}
.shop-alert{background:#fbe3df;color:#7a2a20;border-radius:12px;padding:14px 16px;font-weight:600}.shop-alert.shop-info{background:#e3f1f5;color:#1d4f60}
.shop-flash{margin:0;background:#dff3ea;color:#21613f;border-radius:12px;padding:12px 16px;font-weight:600}.shop-flash.bad{background:#fbe3df;color:#7a2a20}
.shop-ing{display:grid;grid-template-columns:64px 30px minmax(0,1fr) 130px 86px;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid #eef2f3}
.shop-ing.done{background:#f3fbf6}
.shop-tick{width:56px;height:56px;border-radius:14px;border:3px solid var(--line);background:#fff;font-size:30px;font-weight:800;color:#21613f;cursor:pointer}
.shop-ing.done .shop-tick{background:#dff3ea;border-color:#3d8a5f}
.shop-phase{font-weight:800;color:var(--teal);font-size:20px;text-align:center}
.shop-ing-name strong{display:block;font-size:19px}.shop-ing-name small{color:var(--muted);font-size:14px}
.shop-amt,.shop-ing select,.shop-qc input,.shop-field input{min-height:56px;border:2px solid var(--line);border-radius:12px;padding:0 12px;font:inherit;font-size:20px;width:100%;background:#fff}
.shop-step{padding:10px 14px;border-radius:12px;background:#e3f1f5;color:#1d4f60;font-weight:600}.shop-step.stop{background:#fff3dc;color:#7a4b06;border:2px solid #e0a21a}
.shop-qc{display:grid;grid-template-columns:minmax(0,1fr) 180px auto;gap:10px;align-items:center}.shop-qc label{font-weight:600}.shop-qc label small{display:block;color:var(--muted);font-weight:400}
.shop-qc.out input{border-color:var(--warn)}
.shop-field{display:flex;flex-direction:column;gap:6px;font-weight:600;flex:1}
.shop-row{display:flex;gap:12px;flex-wrap:wrap}
.shop-check{display:grid;grid-template-columns:40px 140px minmax(0,1fr);align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #eef2f3}
.shop-check span{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff}
.shop-check.ok span{background:#3d8a5f}.shop-check.no span{background:#e0a21a}.shop-check small{color:var(--muted);font-size:15px}
.shop-rec{display:grid;grid-template-columns:150px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid #eef2f3}.shop-rec.undone{opacity:.55}.shop-rec small{color:var(--muted)}
.shop-dialog{border:0;border-radius:18px;padding:22px;width:min(440px,calc(100% - 32px))}.shop-dialog::backdrop{background:#0f303e80}
.shop-dialog h2{margin:0 0 6px}.shop-dialog input{width:100%;min-height:56px;border:2px solid var(--line);border-radius:12px;padding:0 12px;font:inherit;font-size:20px;margin:10px 0}
.shop-dialog .shop-row{justify-content:flex-end}
@media(max-width:700px){.shop-ing{grid-template-columns:56px minmax(0,1fr) 110px;}.shop-ing .shop-phase{display:none}.shop-ing select{grid-column:3}.shop-qc{grid-template-columns:1fr}.shop-detail-head{flex-direction:column}.shop-rec{grid-template-columns:1fr auto}}
.shop-btn:disabled{opacity:.4;cursor:not-allowed}
/* Labels station */
.shop-file{display:flex;align-items:center;gap:14px;padding:6px 0}.shop-file strong{display:block;font-size:19px}.shop-file small{color:var(--muted)}
.shop-file-icon{width:64px;height:64px;border-radius:12px;background:#fbe3df;color:var(--warn);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:18px}
a.shop-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.shop-grow{flex:1}
.shop-reasons summary{list-style:none;display:flex;align-items:center;justify-content:center}.shop-reasons summary::-webkit-details-marker{display:none}
.shop-reasons[open] summary{margin-bottom:10px}
.shop-input{flex:1;min-height:56px;border:2px solid var(--line);border-radius:12px;padding:0 12px;font:inherit;font-size:18px}
/* Packing: pallet builder */
.shop-pal-row{display:grid;grid-template-columns:minmax(0,1fr) 64px 110px 64px;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid #eef2f3}
.shop-pal-row strong{display:block;font-size:18px}.shop-pal-row small{color:var(--muted);font-size:14px}
.shop-step-btn{padding:0;font-size:28px}
.shop-fill{position:relative;height:34px;border-radius:10px;background:#eef4f5;overflow:hidden}
.shop-fill i{position:absolute;left:0;top:0;bottom:0;background:#9fd3df}.shop-fill.over i{background:#f2a49b}
.shop-fill em{position:relative;font-style:normal;font-weight:700;line-height:34px;padding-left:12px}
.shop-pal{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid #eef2f3}
.shop-pal strong{font-size:20px}.shop-pal small{display:block;color:var(--muted)}
/* The 4×6 pallet label (printing only) */
.shop-print,.ops-print{display:none}
@media print{
  @page label{size:4in 6in;margin:0.15in}
  body>*{display:none!important}
  body>.shop-print,body>.ops-print{display:block!important}
  .pl-label{page:label;width:3.7in;height:5.65in;display:flex;flex-direction:column;gap:0.06in;font-family:Arial,Helvetica,sans-serif;color:#000}
  .pl-top{display:flex;justify-content:space-between;align-items:baseline;border-bottom:3px solid #000;padding-bottom:0.04in}
  .pl-top span{font-size:9pt;font-weight:700;letter-spacing:.08em}.pl-top strong{font-size:18pt}
  .pl-to small{display:block;font-size:7pt;font-weight:700}.pl-to strong{display:block;font-size:17pt;line-height:1.1}.pl-to span{display:block;font-size:10pt}
  .pl-items{width:100%;border-collapse:collapse;font-size:9pt}.pl-items td{border-bottom:1px solid #000;padding:2px 3px}.pl-items .n{text-align:right;font-weight:700;font-size:11pt}
  .pl-total{font-size:12pt;font-weight:700;text-align:right}
  .pl-bo{border:2px solid #000;padding:3px 5px;font-size:8.5pt;font-weight:700}
  .pl-code{margin-top:auto;text-align:center}.pl-code svg{width:100%;height:0.9in}.pl-code span{display:block;font-size:12pt;font-weight:700;letter-spacing:.1em}
  .pl-foot{font-size:7pt;text-align:center}
}
@media(max-width:700px){.shop-pal-row{grid-template-columns:minmax(0,1fr) 52px 80px 52px}.shop-pal{grid-template-columns:1fr}}
@media print{html,body{background:#fff!important}}
/* Shipping: scanning pallets onto a truck */
.shop-scan label{font-size:20px;font-weight:700}
.shop-scan input{min-height:72px;border:3px solid var(--teal);border-radius:14px;padding:0 16px;font:inherit;font-size:28px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.shop-scan-msg{margin:0;min-height:30px;font-size:22px;font-weight:800;border-radius:12px;padding:0}
.shop-scan-msg.ok{color:#fff;background:#3d8a5f;padding:14px 16px}.shop-scan-msg.bad{color:#fff;background:var(--warn);padding:14px 16px}
.shop-stop h2{justify-content:flex-start;gap:12px;flex-wrap:wrap}.shop-stop h2 small{width:100%;font-size:15px}
.shop-stopno{width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:18px}
.shop-palrow{display:grid;grid-template-columns:44px 160px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px;border-radius:12px;border:2px dashed var(--line)}
.shop-palrow span{font-size:26px;font-weight:800;color:var(--muted)}.shop-palrow strong{font-size:22px}.shop-palrow small{color:var(--muted)}
.shop-palrow.on{border-style:solid;border-color:#3d8a5f;background:#f0faf4}.shop-palrow.on span{color:#21613f}
.shop-bo{text-align:left;color:#7a2a20}
.shop-job.shop-done{border-left-color:#3d8a5f;opacity:.8}
@media(max-width:700px){.shop-palrow{grid-template-columns:36px 1fr;}.shop-palrow small,.shop-palrow button{grid-column:2}}