/* job-sheet — หน้าเว็บใบรับงาน (ปักทองดี) */
:root{--bg:#eef1ee;--card:#fff;--fg:#1c2421;--muted:#66706b;--line:#d5dbd6;--acc:#1f4d3a;--acc-fg:#fff;--ink:#1a3fb0;--red:#d2232a;--warn:#fff3b8;--warn-b:#e0b400;--ok:#2b8a3e;--bad:#c92a2a;--chip:#e6ebe7;--paper:#fdfdfb}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,"Leelawadee UI","Noto Sans Thai","Sarabun",sans-serif}
button,input,select,textarea{font:inherit;color:inherit}
.center{padding:60px 16px;text-align:center}.muted{color:var(--muted)}.sm{font-size:13px}.mono{font-family:ui-monospace,Consolas,monospace}
.wrap{max-width:920px;margin:0 auto;padding:12px 12px 80px}
.bar{position:sticky;top:0;z-index:20;background:var(--acc);color:var(--acc-fg);padding:10px 12px;display:flex;gap:8px;align-items:center}
.bar h1{font-size:17px;margin:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar a,.bar button.ghost{color:#fff;text-decoration:none;background:rgba(255,255,255,.14);border:0;border-radius:8px;padding:7px 10px;font-size:14px;cursor:pointer;white-space:nowrap}
.btn{cursor:pointer;border:0;border-radius:10px;padding:10px 14px;background:var(--acc);color:var(--acc-fg);font-weight:600;min-height:44px}
.btn.s{background:var(--chip);color:var(--fg)}.btn.r{background:var(--bad);color:#fff}.btn.sm{min-height:36px;padding:6px 10px;font-size:14px;font-weight:500}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #f0a500;outline-offset:1px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px}
.card h2{font-size:14px;color:var(--muted);margin:0 0 10px;font-weight:600}
.in{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;min-height:44px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.grow{flex:1;min-width:0}
.chip{display:inline-block;font-size:12px;border-radius:99px;padding:2px 10px;background:var(--chip);color:var(--fg);white-space:nowrap}
.chip.review{background:#fff3b8}.chip.wait_block{background:#ffd8a8}.chip.block_done{background:#c5f6d0}.chip.on_drive{background:#bfe3ff}.chip.failed{background:#ffc9c9}.chip.queued,.chip.reading{background:#e5dbff}
.tabs{display:flex;gap:6px;margin-bottom:10px;overflow-x:auto}
.tabs button{border:1px solid var(--line);background:#fff;border-radius:99px;padding:8px 14px;cursor:pointer;white-space:nowrap;min-height:40px}
.tabs button.on{background:var(--acc);color:#fff;border-color:var(--acc)}
/* รายการใบงาน */
.item{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:8px;text-decoration:none;color:inherit}
.item .no{font-size:22px;font-weight:700;color:var(--red);min-width:74px;line-height:1.2}
.item .pl{margin:2px 0;overflow-wrap:anywhere}.item .pl b{color:var(--ink)}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.25);vertical-align:-1px}
/* ใบรับงาน (เลียนแบบใบกระดาษ) */
.paper{background:var(--paper);border:1px solid #9aa39d;box-shadow:0 2px 8px rgba(0,0,0,.12);padding:12px;color:#222}
.p-head{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;border-bottom:2px solid #222;padding-bottom:8px;margin-bottom:0}
.p-logo{font-size:34px;font-weight:800;line-height:1;letter-spacing:.5px}
.p-sub{font-size:13px;color:#444}
.p-nums{margin-left:auto;display:grid;grid-template-columns:auto 96px;gap:4px 8px;align-items:center;font-weight:700}
.p-nums input{color:var(--red);font-weight:700;font-size:20px;border:0;border-bottom:1px dashed #999;background:transparent;width:96px;padding:2px 4px;min-height:36px}
.p-grid{display:grid;grid-template-columns:1fr;border:1.5px solid #222;border-top:0}
.p-cell{border-top:1.5px solid #222;padding:10px}
.p-left{display:none}
@media (min-width:760px){
  .p-grid{grid-template-columns:34% 66%}
  .p-left{display:block}
  .c-collar{grid-column:1;grid-row:1 / span 2;border-right:1.5px solid #222}
  .c-pos1{grid-column:2;grid-row:1}.c-pos2{grid-column:2;grid-row:2}
  .c-pos3{grid-column:1;grid-row:3;border-right:1.5px solid #222}.c-foot{grid-column:2;grid-row:3}
  .c-more{grid-column:1 / span 2}
}
.p-title{font-weight:700;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.p-num{display:inline-flex;width:26px;height:26px;border:1.5px solid #222;border-radius:6px;align-items:center;justify-content:center;font-weight:700}
.p-num.circled{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink);border-radius:50%}
.hand,.paper input.hand,.paper textarea.hand{color:var(--ink);font-weight:600}
.paper input[type=text],.paper input[type=tel],.paper input[type=number],.paper textarea{border:0;border-bottom:1px solid #777;background:transparent;padding:6px 4px;min-height:40px;width:100%;border-radius:0}
.paper textarea{resize:vertical;min-height:64px;line-height:1.5;background:repeating-linear-gradient(transparent,transparent 31px,#bbb 31px,#bbb 32px);line-height:32px;padding-top:0}
.paper .unsure{background:var(--warn)!important;box-shadow:inset 0 -2px 0 var(--warn-b)}
.f{display:flex;gap:6px;align-items:center;margin:4px 0}.f>label,.f>span.l{font-size:14px;white-space:nowrap}
.f .w60{width:64px;flex:none}.f .w90{width:96px;flex:none}
.embrow{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center;margin:6px 0}
.embrow input{font-size:19px!important}
.fname{background:#eef2ff;border:1px dashed #9aa8d8;border-radius:8px;padding:6px 8px;overflow-wrap:anywhere;font-size:14px}
.ck{display:inline-flex;gap:6px;align-items:center;min-height:36px;cursor:pointer;font-size:14px}
.ck input{width:20px;height:20px}
.swatch{display:inline-block;width:28px;height:28px;border-radius:6px;border:1px solid rgba(0,0,0,.3);flex:none}
.collar{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px}
.shirt{width:100%;max-width:230px;display:block;margin:8px auto 0}
.stamp{display:inline-block;border:3px solid var(--ink);color:var(--ink);font-weight:800;padding:2px 12px;transform:rotate(-8deg);border-radius:6px;letter-spacing:1px;opacity:.9}
.stamp.off{border-color:#bbb;color:#bbb;transform:none;font-weight:500}
.p-note{font-size:12px;text-align:center;margin-top:8px;color:#444}
/* รูปใบจริง */
.photo{background:#111;border-radius:12px;overflow:hidden;margin-bottom:12px}
.photo img{display:block;width:100%;height:auto}
.photo.sticky{position:sticky;top:56px;z-index:10;max-height:42vh;overflow:auto}
.actions{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--line);padding:8px 12px calc(8px + env(safe-area-inset-bottom));display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.sw{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}.sw:first-of-type{border-top:0}
.sw input[type=checkbox]{width:22px;height:22px;margin-top:2px;flex:none}
.sw .n{width:76px;flex:none}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.cbox{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:6px;background:#fff;cursor:pointer;text-align:left}
.cbox b{min-width:28px;text-align:right}
.ev{font-size:13px;border-top:1px solid var(--line);padding:4px 0}
#toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);background:#222;color:#fff;padding:10px 16px;border-radius:99px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:99;max-width:90vw;text-align:center}
#toast.on{opacity:.95}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:90;display:flex;align-items:center;justify-content:center;padding:16px}
.modal>div{background:#fff;border-radius:14px;padding:18px;max-width:420px;width:100%}
.msg{padding:10px 12px;border-radius:10px;margin-bottom:12px}.msg.bad{background:#fdecec;color:var(--bad)}.msg.warn{background:var(--warn)}.msg.ok{background:#e6f4ea;color:var(--ok)}
@media print{.bar,.actions,.photo,.noprint{display:none!important}body{background:#fff}}
.f>.l{white-space:nowrap;font-size:14px}
.stamp{white-space:nowrap;flex:none;cursor:pointer;background:transparent;min-height:40px}
.actions .btn{flex:1 1 auto;padding:10px 8px;font-size:14px;white-space:nowrap;max-width:240px}
.wrap{padding-bottom:120px}
.frow{display:flex;gap:6px;align-items:center;padding:6px 0;border-top:1px dashed #b9c0bb;flex-wrap:wrap}
.frow .grow{min-width:180px}
.bar button.ghost,.bar a{padding:7px 8px}
/* v1.2.0 — หน้าสรุป · ลากไฟล์ · ปลายทางแจ้งเตือน */
.srow{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}.srow:first-child{border-top:0}
.srow>input[type=checkbox]{width:24px;height:24px;margin-top:2px;flex:none}
.sno{font-size:20px;font-weight:700;color:var(--red);text-decoration:none;line-height:1.2}
.sline{font-size:15px;overflow-wrap:anywhere}.sline b{color:var(--ink)}
.dsel{width:auto;flex:none;padding:6px 8px;min-height:40px;font-size:14px}
body.drag::after{content:"วางไฟล์ที่นี่";position:fixed;inset:8px;z-index:95;border:4px dashed var(--acc);border-radius:16px;background:rgba(31,77,58,.12);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:var(--acc);pointer-events:none}
.actions .ck{font-size:14px}