:root{
--primary:#0D4373; --primary-dark:#0A3459; --primary-light:#E8F1FA; --primary-glow:rgba(13,67,115,.16);
--accent:#F68A39; --accent-dark:#D9701F; --accent-soft:#FFF1E4;
--success:#15803D; --success-bg:#E8F8EE;
--warning:#B45309; --warning-bg:#FEF6E0;
--danger:#B91C1C; --danger-bg:#FDECEC;
--bg:#F4F7FB; --card:#FFF; --soft:#EEF3F9;
--ink:#0F2033; --ink-soft:#465b72; --muted:#6E8299;
--line:#E6EDF5; --line-strong:#CFDBE8;
--nav-bg:#0F2033; --nav-hdr:#0A1726; --nav-ink:#C3D2E2;
--r-lg:12px; --r:10px; --r-sm:7px; --r-pill:6px;
--sh:0 1px 2px rgba(15,32,51,.06),0 8px 24px rgba(15,32,51,.06);
--sh-lg:0 12px 32px rgba(10,23,38,.16);
--mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
/* ⚠️ ต้องมีฟอนต์ครบทุกภาษา ไม่งั้นพม่า/เขมร/ลาว ขึ้นเป็นสี่เหลี่ยม □□□ */
font-family:'IBM Plex Sans Thai','Noto Sans Thai','Noto Sans Myanmar','Padauk',
'Noto Sans Khmer','Noto Sans Lao',system-ui,-apple-system,sans-serif;
background:var(--bg); color:var(--ink); font-size:15px; line-height:1.55;
padding-bottom:env(safe-area-inset-bottom);
}
/* เขมร/พม่า/ไทใหญ่ มีสระบน-ล่างซ้อนหลายชั้น ต้องเพิ่มระยะบรรทัด ไม่งั้นตัวชนกัน */
html[lang="km"] body, html[lang="my"] body, html[lang="shn"] body{ line-height:1.85 }
html[lang="km"] .tabs button, html[lang="my"] .tabs button,
html[lang="shn"] .tabs button{ font-size:9.5px; line-height:1.35 }
html[lang="km"] .chip, html[lang="my"] .chip, html[lang="shn"] .chip{ line-height:1.6 }
h1,h2,h3,h4{margin:0;line-height:1.3}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit}
/* ===== หัวแอป ===== */
.appbar{
background:var(--primary);color:#fff;padding:13px 15px;
display:flex;align-items:center;gap:11px;position:sticky;top:0;z-index:20;
}
.appbar .logo{
width:31px;height:31px;border-radius:9px;background:rgba(255,255,255,.16);
display:grid;place-items:center;font-size:15px;flex:none
}
.appbar .t{flex:1;min-width:0}
.appbar .t b{display:block;font-size:14.5px;font-weight:700;line-height:1.25}
.appbar .t span{font-size:11px;opacity:.72;display:block}
.lang{
background:rgba(255,255,255,.15);border-radius:var(--r-pill);
padding:5px 11px;font-size:11.5px;font-weight:600;display:flex;gap:5px;align-items:center;flex:none
}
/* ===== แถบรอบจ่าย ===== */
.window-bar{
background:linear-gradient(135deg,#0A3459,#0D4373);color:#fff;padding:11px 15px;
display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.window-bar .wl{font-size:11px;opacity:.8;margin-bottom:2px}
.window-bar .wv{font-size:13.5px;font-weight:700}
.window-bar .cd{
background:var(--accent);border-radius:var(--r-sm);padding:6px 11px;text-align:center;flex:none
}
.window-bar .cd .n{font-size:15px;font-weight:700;font-family:var(--mono);line-height:1.1}
.window-bar .cd .u{font-size:9.5px;opacity:.95}
.body{padding:14px 15px 20px}
.has-fab .body{padding-bottom:104px}
.sec-t{
font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.05em;
text-transform:uppercase;margin:0 0 9px;display:flex;align-items:center;gap:7px
}
.sec-t::after{content:'';flex:1;height:1px;background:var(--line)}
/* ===== ค้นหา ===== */
.search{display:flex;gap:8px;margin-bottom:13px}
.search .box{
flex:1;display:flex;align-items:center;gap:9px;background:var(--card);
border:1.5px solid var(--line-strong);border-radius:var(--r-sm);padding:10px 13px;
}
.search input{border:0;outline:0;flex:1;background:none;min-width:0;font-size:14px}
.search input::placeholder{color:var(--muted)}
.search .qr{
width:44px;background:var(--primary);color:#fff;border-radius:var(--r-sm);
display:grid;place-items:center;font-size:19px;flex:none
}
/* ===== การ์ดสินค้า ===== */
.item{
background:var(--card);border:1px solid var(--line);border-radius:var(--r);
padding:13px;margin-bottom:9px;box-shadow:var(--sh);
}
.item-hd{display:flex;gap:11px;align-items:flex-start}
.item-ic{
width:40px;height:40px;border-radius:11px;background:var(--primary-light);
display:grid;place-items:center;font-size:19px;flex:none
}
.item-nm{flex:1;min-width:0}
.item-nm b{display:block;font-size:14.5px;font-weight:600;line-height:1.35}
.item-nm .sub{font-size:11px;color:var(--muted);font-family:var(--mono);margin-top:2px}
.item-nm .tr{font-size:11.5px;color:var(--primary);margin-top:3px}
/* ===== ยอด 2 ชั้น (หัวใจ) ===== */
.avail{background:var(--soft);border-radius:var(--r-sm);padding:10px 12px;margin-top:11px;font-size:12.5px}
.avail .r{display:flex;justify-content:space-between;padding:3px 0;color:var(--ink-soft)}
.avail .r.minus{color:var(--warning)}
.avail .r b{font-family:var(--mono);font-weight:600}
.avail .div{height:1px;background:var(--line-strong);margin:6px 0}
.avail .r.total{color:var(--ink);font-weight:700;font-size:14px;padding-top:1px}
.avail .r.total b{font-size:15.5px;color:var(--primary)}
.avail .note{
font-size:10.5px;color:var(--muted);margin-top:7px;padding-top:7px;
border-top:1px dashed var(--line-strong);line-height:1.45;display:flex;gap:5px
}
.stale{color:var(--warning);font-weight:600}
/* ===== ตัวนับจำนวน ===== */
.qty{display:flex;align-items:center;gap:9px;margin-top:11px}
.qty .lb{font-size:12.5px;color:var(--ink-soft);flex:1}
.qty .ctl{display:flex;align-items:center;gap:0;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);overflow:hidden;background:var(--card)}
.qty .ctl button{width:44px;height:44px;font-size:20px;color:var(--primary);font-weight:600;background:var(--soft)}
.qty .ctl button:active{background:var(--primary-light)}
.qty .ctl input{
width:58px;height:44px;border:0;outline:0;text-align:center;
font-family:var(--mono);font-weight:600;font-size:15px;background:var(--card)
}
.qty .un{font-size:12.5px;color:var(--muted);width:32px;flex:none}
.over{
background:var(--warning-bg);border:1px solid #F3D9A4;color:#7A4A08;
border-radius:var(--r-sm);padding:9px 11px;margin-top:9px;font-size:11.5px;
display:flex;gap:7px;line-height:1.45
}
/* ===== ปุ่ม ===== */
.btn{
display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
padding:14px;border-radius:var(--r-sm);font-weight:700;font-size:15px;min-height:50px;transition:.14s
}
.btn-p{background:var(--primary);color:#fff;box-shadow:0 4px 14px var(--primary-glow)}
.btn-p:active{background:var(--primary-dark)}
.btn-a{background:var(--accent);color:#fff}
.btn-o{background:var(--card);border:1.5px solid var(--line-strong);color:var(--ink-soft)}
.btn-g{background:var(--success);color:#fff}
.btn-sm{padding:9px 15px;font-size:13px;min-height:44px;width:auto;border-radius:var(--r-sm)}
/* ⚠️ min-height เดิม 40px — ต่ำกว่าเกณฑ์นิ้วโป้ง 44px ที่แอปนี้ใช้ทุกที่ (.chk/.box/select)
ปุ่มเล็กบนใบโอนเป็นปุ่มตัดสินใจ (อนุมัติ/ปฏิเสธ/จ่ายของ) กดพลาดไม่ได้ */
.btn-danger{background:var(--danger);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
/* ══ 20 ก.ย. 69 — ช่องติ๊กบนมือถือแตะยาก ══
เจอตอนวัดจริงที่ 360px: ช่องติ๊กทุกตัวกว้าง/สูงแค่ 20px ทั้งที่ทั้งแอปยึดเกณฑ์นิ้วโป้ง 44px
🔴 ตัวที่สำคัญที่สุดคือ l1pick / l1pickall (เลือกใบเบิกเพื่อ "จ่ายของรวบหลายใบ")
คนสโตร์ใช้บนมือถือ วันพุธเลือกทีละหลายสิบใบ — แตะพลาดใบข้างเคียง = จ่ายผิดใบ
⇒ ขยายรูปเป็น 24px แล้วเผื่อระยะรอบตัวอีก 8px ทุกด้าน ⇒ แตะได้จริง ~40px
(ไม่ขยายรูปเป็น 44px ตรง ๆ เพราะกล่องติ๊กจะใหญ่จนล้นแถวตาราง)
⚠️ 2 วิธีที่ลองแล้ว "วัดผลจริงแล้วไม่ได้ผล" — อย่าวนกลับไปทำอีก:
① ::after ซ้อนทับ — เป็น replaced element ไม่สร้าง pseudo-element
② border โปร่งใส — Chrome ไม่นับพื้นที่ border เข้า hit area ของ input
(วัดด้วย elementFromPoint: แตะห่างกึ่งกลาง 8px แล้วยังไม่โดน)
⇒ margin เป็นวิธีที่ได้ผลจริง เพราะกันพื้นที่ใน layout ให้เลย
ไม่มีอะไรมาทับ = นิ้วที่แตะเฉียดยังลงบนช่องติ๊ก ไม่ไปโดนแถวข้างเคียง */
#content input[type=checkbox]{
width:24px;height:24px;min-height:24px;flex:none;
accent-color:var(--brand);cursor:pointer;
margin:8px;
}
/* กรอบโฟกัสให้เห็นว่ากำลังจะติ๊กช่องไหน — คนสโตร์เลือกทีละหลายสิบใบบนมือถือ */
#content input[type=checkbox]:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
/* ตัวเลือกบนมือถือต้องสูงเท่าปุ่ม ไม่งั้นแตะพลาดเป็นแถวข้างหลัง */
#content select{min-height:44px}
.fab{
position:absolute;left:0;right:0;bottom:56px;padding:11px 15px;
background:var(--card);box-shadow:0 -6px 18px rgba(15,32,51,.07);
border-top:1px solid var(--line);display:flex;gap:9px;align-items:center;z-index:15
}
.fab .sum{flex:1;min-width:0}
.fab .sum .k{font-size:10.5px;color:var(--muted)}
.fab .sum .v{font-size:14.5px;font-weight:700;font-family:var(--mono)}
/* ===== สถานะ ===== */
.chip{
display:inline-flex;align-items:center;gap:5px;padding:4px 10px;
border-radius:var(--r-pill);font-size:11px;font-weight:700
}
.c-draft{background:var(--soft);color:var(--muted)}
.c-sub{background:var(--warning-bg);color:var(--warning)}
.c-app{background:var(--primary-light);color:var(--primary)}
.c-iss{background:var(--accent-soft);color:var(--accent-dark)}
.c-post{background:var(--success-bg);color:var(--success)}
.c-rej{background:var(--danger-bg);color:var(--danger)}
/* ===== ใบเบิก ===== */
.doc{
background:var(--card);border:1px solid var(--line);border-left:3.5px solid var(--primary);
border-radius:var(--r-sm);padding:12px 13px;margin-bottom:9px;box-shadow:var(--sh)
}
.doc.w{border-left-color:var(--warning)} .doc.a{border-left-color:var(--accent)}
.doc.g{border-left-color:var(--success)} .doc.d{border-left-color:var(--danger)}
.doc-hd{display:flex;justify-content:space-between;gap:9px;align-items:flex-start;margin-bottom:7px}
.doc-no{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--primary)}
.doc-mt{font-size:11.5px;color:var(--muted);margin-top:2px}
.doc-ln{font-size:12.5px;color:var(--ink-soft);padding:3px 0;display:flex;justify-content:space-between;gap:9px}
.doc-ln b{font-family:var(--mono);font-weight:600;color:var(--ink);flex:none}
.doc-ln.l1-ln b{font-family:inherit}
.doc-ln.l1-ln>span:first-child{flex:1;min-width:0}
.doc-ft{
display:flex;justify-content:space-between;align-items:center;gap:9px;
margin-top:9px;padding-top:9px;border-top:1px dashed var(--line-strong)
}
.doc-ft .val{font-size:12.5px;color:var(--muted)}
.doc-ft .val b{font-family:var(--mono);color:var(--ink);font-weight:700;font-size:13.5px}
/* ===== ไทม์ไลน์ ===== */
.tl{margin:11px 0 0;padding:11px 0 0;border-top:1px dashed var(--line-strong)}
.tl-r{display:flex;gap:10px;align-items:flex-start;padding:5px 0;font-size:12px}
.tl-d{width:9px;height:9px;border-radius:50%;background:var(--line-strong);margin-top:5px;flex:none;position:relative}
.tl-r.done .tl-d{background:var(--success)}
.tl-r.now .tl-d{background:var(--accent);box-shadow:0 0 0 3.5px var(--accent-soft)}
.tl-r:not(:last-child) .tl-d::after{content:'';position:absolute;left:3.5px;top:11px;width:2px;height:19px;background:var(--line)}
.tl-r.done:not(:last-child) .tl-d::after{background:#BFE3CC}
.tl-x{flex:1;min-width:0}
.tl-x b{display:block;font-weight:600;font-size:12.5px}
.tl-x span{color:var(--muted);font-size:11px}
.tl-r.wait .tl-x b{color:var(--muted);font-weight:500}
/* ===== ตารางสโตร์ ===== */
.row{
display:flex;align-items:center;gap:11px;background:var(--card);
border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 12px;margin-bottom:8px
}
.row .nm{flex:1;min-width:0}
.row .nm b{display:block;font-size:13.5px;font-weight:600}
.row .nm span{font-size:11px;color:var(--muted);font-family:var(--mono)}
.row .in{
width:66px;height:38px;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);
text-align:center;font-family:var(--mono);font-weight:600;font-size:14px;outline:0;flex:none
}
.row .in.edited{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-dark)}
.row .rq{font-size:11px;color:var(--muted);text-align:right;width:52px;flex:none;line-height:1.3}
.row .rq b{display:block;font-family:var(--mono);color:var(--ink-soft);font-size:12.5px}
/* ===== ใบสรุปคีย์ ===== */
.paste{
background:var(--nav-hdr);color:#D6E2EF;border-radius:var(--r-sm);padding:13px;
font-family:var(--mono);font-size:11.5px;line-height:1.75;overflow-x:auto;white-space:pre;margin:10px 0
}
.paste .k{color:#7FB6E8} .paste .v{color:#FFD9A8} .paste .m{color:#6E8299}
.info{
background:var(--primary-light);border-radius:var(--r-sm);padding:11px 13px;
font-size:12px;color:var(--primary-dark);line-height:1.55;margin-bottom:12px;display:flex;gap:8px
}
.empty{text-align:center;padding:38px 20px;color:var(--muted)}
.empty .ic{font-size:38px;margin-bottom:9px;opacity:.45}
.empty b{display:block;color:var(--ink-soft);margin-bottom:4px;font-size:14px}
.empty p{margin:0;font-size:12.5px}
/* ===== แท็บล่าง ===== */
.tabs{
display:flex;background:var(--card);border-top:1px solid var(--line);
padding-bottom:env(safe-area-inset-bottom);flex:none
}
.tabs button{
flex:1;padding:8px 3px 9px;display:flex;flex-direction:column;align-items:center;gap:2px;
color:var(--muted);font-size:10px;font-weight:600;min-height:56px;justify-content:center
}
.tabs button .i{font-size:19px;line-height:1}
.tabs button.on{color:var(--primary)}
.tabs button.on .i{transform:translateY(-1px)}
.badge{
position:absolute;top:-3px;right:-8px;background:var(--danger);color:#fff;
font-size:9px;font-weight:700;min-width:16px;height:16px;border-radius:8px;
display:grid;place-items:center;padding:0 4px;font-family:var(--mono)
}
.ico{position:relative;display:inline-block}
.note-box{
background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
padding:11px 12px;margin-bottom:11px
}
.note-box label{display:block;font-size:11.5px;color:var(--muted);font-weight:600;margin-bottom:5px}
.note-box textarea{
width:100%;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);
padding:9px 11px;resize:none;outline:0;font-size:13.5px;line-height:1.5
}
.note-box textarea:focus{border-color:var(--primary)}
/* ===== Loop 3 — เมทริกซ์ FSN × ABC ===== */
.mx{display:grid;grid-template-columns:auto repeat(3,1fr);gap:5px;font-size:12px}
.mx .hd{font-size:10.5px;font-weight:700;color:var(--muted);text-align:center;padding:4px 0;
letter-spacing:.03em;text-transform:uppercase}
.mx .rh{font-size:11px;font-weight:700;color:var(--ink-soft);display:flex;
flex-direction:column;align-items:flex-end;justify-content:center;
padding-right:8px;text-align:right;line-height:1.25}
.mx .cell{
border-radius:9px;padding:9px 8px;text-align:center;border:1.5px solid transparent;cursor:pointer;
background:var(--soft);transition:.13s;min-height:62px;display:flex;flex-direction:column;
justify-content:center;gap:2px
}
.mx .cell:hover{border-color:var(--primary)}
.mx .cell .n{font-family:var(--mono);font-size:16px;font-weight:700;line-height:1.1}
.mx .cell .f{font-size:9.5px;opacity:.75;font-weight:600}
.mx .cell .v{font-size:9.5px;font-family:var(--mono);opacity:.6}
/* ยิ่งต้องนับบ่อย ยิ่งเข้ม */
.mx .c12{background:#FDE7D3;color:#8A4508;border-color:#F6CFA8}
.mx .c4 {background:#FFF4DE;color:#7A4A08}
.mx .c2 {background:var(--primary-light);color:var(--primary-dark)}
.mx .c1 {background:var(--soft);color:var(--ink-soft)}
.mx .cell.due{box-shadow:0 0 0 2px var(--accent) inset}
/* แถบความคืบหน้ารอบนับ */
.cbar{display:flex;flex-direction:column;gap:9px}
.cbar-r{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;font-size:12.5px}
.cbar-r .cls{font-family:var(--mono);font-weight:700;font-size:12px;color:var(--primary);
background:var(--primary-light);border-radius:6px;padding:3px 0;text-align:center}
.cbar-r .tk{height:7px;background:var(--soft);border-radius:5px;overflow:hidden}
.cbar-r .tk i{display:block;height:100%;background:var(--success);border-radius:5px}
.cbar-r .tk i.part{background:var(--accent)}
.cbar-r .nm{font-size:11.5px;color:var(--muted);margin-bottom:3px}
.cbar-r .pc{font-family:var(--mono);font-weight:700;font-size:12px;white-space:nowrap}
/* แถวนับสต็อก (มือถือ) */
.cnt{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
padding:11px 12px;margin-bottom:8px;box-shadow:var(--sh)}
.cnt.done{border-left:3.5px solid var(--success)}
.cnt.diff{border-left:3.5px solid var(--accent);background:var(--accent-soft)}
.cnt-hd{display:flex;justify-content:space-between;gap:9px;align-items:flex-start}
.cnt-hd b{font-size:13.5px;font-weight:600;line-height:1.35}
.cnt-hd .cd{font-size:11px;font-family:var(--mono);color:var(--muted);margin-top:2px}
.cnt-bk{font-size:11.5px;color:var(--muted);margin:7px 0 0}
.cnt-bk b{font-family:var(--mono);color:var(--ink-soft)}
.cnt-in{display:flex;align-items:center;gap:9px;margin-top:9px}
.cnt-in input{flex:1;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);
padding:10px 12px;font-family:var(--mono);font-size:17px;font-weight:700;text-align:right;
outline:0;min-height:44px}
.cnt-in input:focus{border-color:var(--primary)}
.cnt-in .un{font-size:12.5px;color:var(--muted);flex:none;width:38px}
.cnt-df{font-size:11.5px;font-weight:700;margin-top:7px;font-family:var(--mono)}
.cnt-df.plus{color:var(--success)} .cnt-df.minus{color:var(--danger)}
/* สมการงวด */
.eq{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;
background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.eq .t{flex:1;min-width:112px;padding:13px 12px;text-align:center;position:relative}
.eq .t + .t{border-left:1px solid var(--line)}
.eq .t .lb{font-size:10.5px;color:var(--muted);font-weight:600;margin-bottom:4px}
.eq .t .vl{font-family:var(--mono);font-size:16px;font-weight:700;letter-spacing:-.02em}
.eq .t .op{position:absolute;left:-9px;top:50%;transform:translateY(-50%);
background:var(--bg);width:18px;height:18px;border-radius:50%;display:grid;place-items:center;
font-size:12px;font-weight:700;color:var(--muted);z-index:2}
.eq .t.res{background:var(--primary-light)}
.eq .t.res .vl{color:var(--primary)}
.eq .t.warn{background:var(--warning-bg)} .eq .t.warn .vl{color:var(--warning)}
/* PR (Loop 2) */
.pr-ln{display:flex;justify-content:space-between;gap:9px;font-size:12.5px;padding:4px 0;
color:var(--ink-soft)}
.pr-ln b{font-family:var(--mono);font-weight:600;color:var(--ink);flex:none}
.pr-ln .z{color:var(--danger);font-weight:600;font-size:11px}
.urg{background:var(--danger-bg);border:1px solid #F3C9C9;color:#7F1D1D;border-radius:var(--r-sm);
padding:8px 11px;font-size:11.5px;line-height:1.5;margin:8px 0 0;display:flex;gap:7px}
.flow{display:flex;align-items:center;gap:0;margin:9px 0 0;font-size:10.5px}
.flow .s{
flex:1;min-width:0;text-align:center;color:var(--muted);position:relative;padding-top:16px;
/* 🐛 เดิมข้อความยาวกว่าช่อง (75px) แล้ว overflow:visible ทำให้ล้นไปทับป้ายข้างๆ
— เห็นชัดที่ "หัวหน้าอนุมัติ" ชนกับ "ออก PO" · ทุกภาษาเป็นเหมือนกัน
แก้ให้ตัดบรรทัดในช่องตัวเอง แทนที่จะล้นออกไป */
overflow-wrap:anywhere;word-break:break-word;line-height:1.35;padding-inline:2px
}
@media(max-width:420px){
/* จอแคบจริง ย่อฟอนต์อีกนิดให้คำไม่แตกเป็นบรรทัดยาวเกินไป */
.flow{font-size:9.5px}
}
.flow .s::before{content:'';position:absolute;top:4px;left:50%;transform:translateX(-50%);
width:9px;height:9px;border-radius:50%;background:var(--line-strong)}
.flow .s::after{content:'';position:absolute;top:8px;left:50%;width:100%;height:1.5px;
background:var(--line-strong);z-index:-1}
.flow .s:last-child::after{display:none}
.flow{position:relative;z-index:0}
.flow .s.done{color:var(--success);font-weight:600}
.flow .s.done::before{background:var(--success)}
.flow .s.done::after{background:#BFE3CC}
.flow .s.now{color:var(--accent-dark);font-weight:700}
.flow .s.now::before{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.flow .s.rej{color:var(--danger);font-weight:700}
.flow .s.rej::before{background:var(--danger)}
/* แกน Loop บน toolbar */
.loops{display:flex;gap:6px;background:var(--card);border:1.5px solid var(--line-strong);
border-radius:var(--r-pill);padding:4px;flex-wrap:wrap}
.loops button{padding:7px 14px;border-radius:var(--r-pill);font-size:12.5px;font-weight:600;
color:var(--muted);min-height:34px;white-space:nowrap}
.loops button.on{background:var(--accent);color:#fff}
/* 🔴 ปุ่มแท็บเดิม min-height:34px = แตะพลาดบนมือถือ (เกณฑ์นิ้วโป้งของแอปนี้คือ 44px)
ยกทั้ง .loops เพราะหน้าไหนก็ควรแตะติดเหมือนกัน — ตรวจแล้วใช้ที่หน้า Workflow ที่เดียว */
.loops button{min-height:44px}
/* ===== หน้าล็อกอิน (มือถือ) ===== */
.lg-wrap{
flex:1;display:flex;align-items:center;justify-content:center;padding:18px 15px;
background:linear-gradient(165deg,var(--primary) 0%,var(--primary-dark) 46%,var(--bg) 46%);
overflow-y:auto
}
.lg-card{
width:100%;background:var(--card);border-radius:var(--r-lg);padding:20px 17px 17px;
box-shadow:0 18px 42px rgba(10,23,38,.26)
}
.lg-langrow{display:flex;justify-content:flex-end;margin-bottom:13px}
.lg-lang{
padding:9px 11px;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);
background:var(--card);color:var(--ink);font-size:13.5px;font-weight:600;
min-height:44px;cursor:pointer;max-width:100%;
/* เขมร/พม่า/ไทใหญ่ ตัวสูงกว่าไทย ต้องกว้างและสูงพอ ไม่งั้นตัวอักษรโดนตัด */
min-width:132px;line-height:1.9
}
.lg-lang:focus{outline:2px solid var(--primary);outline-offset:1px}
.lg-logo{
width:52px;height:52px;border-radius:15px;background:var(--primary-light);
display:grid;place-items:center;font-size:26px;margin-bottom:11px
}
.lg-h1{font-size:21px;font-weight:700;letter-spacing:-.01em;margin-bottom:4px}
.lg-sub{margin:0 0 17px;color:var(--muted);font-size:13px;line-height:1.55}
.lg-sso{
width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
padding:14px 15px;border:1.5px solid var(--primary);border-radius:var(--r-sm);
background:var(--primary);color:#fff;font-weight:700;font-size:14.5px;min-height:50px
}
.lg-sso:active{transform:translateY(1px)}
.lg-hint{margin:9px 0 0;text-align:center;color:var(--muted);font-size:11.5px;line-height:1.5}
.lg-or{
display:flex;align-items:center;gap:11px;margin:17px 0 3px;
color:var(--muted);font-size:11.5px
}
.lg-or::before,.lg-or::after{content:'';flex:1;height:1px;background:var(--line)}
.lg-lb{display:block;margin:12px 0 5px;font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.lg-in{
width:100%;padding:12px 13px;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);
background:var(--card);color:var(--ink);font-size:15px;min-height:46px;outline:0
}
.lg-in:focus{border-color:var(--primary)}
.lg-submit{
width:100%;margin-top:15px;padding:14px 15px;border-radius:var(--r-sm);
background:var(--card);color:var(--primary);font-weight:700;font-size:14.5px;min-height:50px;
border:1.5px solid var(--primary)
}
.lg-submit:active{transform:translateY(1px)}
.lg-msg{
margin:11px 0 0;text-align:center;font-size:12.5px;line-height:1.5;
min-height:1.2em;color:var(--muted)
}
.lg-foot{
margin:15px 0 0;text-align:center;color:var(--muted);font-size:12px;
text-decoration:underline;cursor:pointer
}
/* ===== หน้าล็อกอิน (คอม) ===== */
.dlg{
display:flex;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
overflow:hidden;box-shadow:var(--sh-lg);min-height:560px
}
.dlg-left{
width:47%;flex:none;padding:34px 32px;color:#fff;
background:linear-gradient(150deg,var(--primary-dark),var(--primary) 58%,#2f7cb8);
display:flex;flex-direction:column
}
.dlg-logo{
width:54px;height:54px;border-radius:15px;background:rgba(255,255,255,.16);
display:grid;place-items:center;font-size:27px;margin-bottom:15px
}
.dlg-left h2{font-size:26px;font-weight:700;letter-spacing:-.02em}
.dlg-tag{margin:7px 0 26px;opacity:.85;font-size:14px}
.dlg-pts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:17px;flex:1}
.dlg-pts li{padding-left:24px;position:relative;line-height:1.5}
.dlg-pts li::before{
content:'✓';position:absolute;left:0;top:0;width:17px;height:17px;border-radius:50%;
background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:10px;font-weight:700
}
.dlg-pts b{display:block;font-size:14.5px;font-weight:600}
.dlg-pts span{font-size:12.5px;opacity:.78}
.dlg-note{
background:rgba(0,0,0,.18);border-radius:var(--r-sm);padding:12px 14px;
font-size:12px;line-height:1.6;margin-top:22px
}
.dlg-right{flex:1;min-width:0;padding:30px 32px;display:flex;flex-direction:column;justify-content:center}
.dlg-h3{font-size:19px;font-weight:700;margin-bottom:3px}
.dlg-right .lg-sso{max-width:none}
@media(max-width:820px){
.dlg{flex-direction:column;min-height:0}
.dlg-left{width:100%;padding:26px 22px}
.dlg-right{padding:24px 22px}
}
/* แถบผู้ใช้ที่ล็อกอินอยู่ (โชว์ว่า SSO ผูกตัวตนแล้ว) */
.who{
display:flex;align-items:center;gap:9px;background:var(--primary-light);
border-radius:var(--r-sm);padding:9px 12px;margin-bottom:12px;font-size:12px
}
.who .av{
width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;
display:grid;place-items:center;font-weight:700;font-size:12.5px;flex:none
}
.who b{display:block;font-size:13px;color:var(--ink)}
.who span{color:var(--muted);font-size:11px}
.who .out{margin-left:auto;color:var(--primary);font-weight:600;font-size:11.5px;flex:none}
/* ===== สลับ มือถือ / คอม ===== */
.viewsw{display:flex;gap:6px;background:var(--card);border:1.5px solid var(--line-strong);
border-radius:var(--r-pill);padding:4px;margin-left:auto}
.viewsw button{padding:7px 16px;border-radius:var(--r-pill);font-size:13px;font-weight:600;
color:var(--muted);min-height:34px}
.viewsw button.on{background:var(--primary);color:#fff}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0 14px}
.toolbar .roles{margin:0}
/* ===== หน้าจอคอม ===== */
.desk{
background:var(--card);border:1px solid var(--line);border-radius:var(--r);
overflow:hidden;box-shadow:var(--sh-lg);display:flex;min-height:660px
}
.dk-side{
width:216px;background:var(--nav-bg);color:var(--nav-ink);flex:none;
display:flex;flex-direction:column;padding:0 0 12px
}
.dk-brand{
padding:16px 17px;background:var(--nav-hdr);display:flex;align-items:center;gap:10px;
border-bottom:1px solid rgba(255,255,255,.06)
}
.dk-brand .lg{width:30px;height:30px;border-radius:8px;background:var(--primary);
display:grid;place-items:center;font-size:15px;flex:none}
.dk-brand b{color:#fff;font-size:14px;display:block;line-height:1.2}
.dk-brand span{font-size:10.5px;opacity:.6;display:block}
.dk-nav{padding:11px 9px;flex:1}
.dk-nav .gp{font-size:10px;font-weight:700;opacity:.42;letter-spacing:.06em;
text-transform:uppercase;padding:11px 9px 6px}
.dk-nav a{
display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;
font-size:13.5px;color:var(--nav-ink);text-decoration:none;margin-bottom:1px;cursor:pointer
}
.dk-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.dk-nav a.on{background:var(--primary);color:#fff;font-weight:600}
.dk-nav a .n{margin-left:auto;background:rgba(255,255,255,.16);border-radius:var(--r-pill);
font-size:10.5px;padding:1px 7px;font-family:var(--mono);font-weight:600}
.dk-nav a.on .n{background:rgba(255,255,255,.26)}
.dk-user{padding:11px 15px;border-top:1px solid rgba(255,255,255,.07);
display:flex;align-items:center;gap:9px;font-size:12px}
.dk-user .av{width:29px;height:29px;border-radius:50%;background:var(--accent);
display:grid;place-items:center;font-size:12px;color:#fff;font-weight:700;flex:none}
.dk-user b{color:#fff;display:block;font-size:12.5px;line-height:1.25}
.dk-user span{opacity:.55;font-size:10.5px}
.dk-main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg)}
.dk-top{
background:var(--card);border-bottom:1px solid var(--line);padding:13px 20px;
display:flex;align-items:center;gap:13px
}
.dk-top h2{font-size:16.5px;font-weight:700;flex:1}
.dk-top .sb{
display:flex;align-items:center;gap:8px;background:var(--soft);border-radius:var(--r-sm);
padding:8px 13px;width:250px;color:var(--muted);font-size:13px
}
.dk-body{padding:19px 20px;overflow-y:auto;flex:1}
/* KPI */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:19px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
padding:14px 16px;box-shadow:var(--sh)}
.kpi .lb{font-size:11.5px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:5px}
.kpi .vl{font-size:25px;font-weight:700;font-family:var(--mono);margin:6px 0 2px;letter-spacing:-.02em}
.kpi .dt{font-size:11px;color:var(--muted)}
.kpi.warn .vl{color:var(--warning)} .kpi.dang .vl{color:var(--danger)}
.kpi.good .vl{color:var(--success)} .kpi.pri .vl{color:var(--primary)}
.trend{font-size:11px;font-weight:700;padding:1px 6px;border-radius:5px;margin-left:5px}
.t-up{background:var(--danger-bg);color:var(--danger)}
.t-dn{background:var(--success-bg);color:var(--success)}
/* ── หน้าแรกใหม่ (25 ก.ย. 69 Boss: "UI ใหม่จัด layer ใหม่") ── */
.dash-sec{margin-bottom:22px}
.dash-sec-lb{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.06em;
text-transform:uppercase;margin:0 2px 9px;display:flex;align-items:center;gap:8px}
.dash-sec-lb::after{content:'';flex:1;height:1px;background:var(--line)}
/* งานของฉัน — การ์ดเด่นแยกจากพาเนลอื่นด้วยพื้นหลัง ไม่ใช่แค่กรอบสี */
.dash-hero{border-color:var(--primary);background:linear-gradient(180deg,var(--soft) 0%,var(--card) 70px)}
.dash-hero .panel-hd{border-bottom-color:var(--line-strong)}
/* แถบสถิติแนวนอน — แทนกริดกล่องเท่ากันหมด ตัวสำคัญ (dang) เด่นกว่าด้วยขนาด */
.statbar{display:grid;grid-template-columns:1fr 1.3fr 1fr 1fr;gap:12px;margin-bottom:16px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
padding:14px 16px;box-shadow:var(--sh)}
.stat-lb{font-size:11.5px;color:var(--muted);font-weight:600}
.stat-vl{font-size:23px;font-weight:700;font-family:var(--mono);margin:6px 0 2px;letter-spacing:-.02em}
.stat-dt{font-size:11px;color:var(--muted)}
.stat.big{padding:16px 18px}
.stat.big .stat-vl{font-size:29px}
.stat.warn .stat-vl{color:var(--warning)} .stat.dang .stat-vl{color:var(--danger)}
.stat.good .stat-vl{color:var(--success)} .stat.pri .stat-vl{color:var(--primary)}
@media (max-width:640px){
.statbar{grid-template-columns:1fr 1fr;gap:8px}
.stat.big{grid-column:span 2}
.stat-vl{font-size:20px} .stat.big .stat-vl{font-size:24px}
}
/* ตาราง top-diff บนมือถือ — bar chart แนวนอนเทียบสัดส่วน แทนรายการตัวเลขล้วน */
.dbar-list{padding:10px 12px}
.dbar-row{padding:9px 0;border-bottom:1px solid var(--line);cursor:pointer}
.dbar-row:last-child{border-bottom:0}
.dbar-hd{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;margin-bottom:5px}
.dbar-hd b{font-weight:600}
.dbar-hd span{font-family:var(--mono);font-weight:700;font-size:13px}
.dbar-track{height:6px;border-radius:3px;background:var(--soft);overflow:hidden}
.dbar-fill{height:100%;border-radius:3px}
.dbar-fill.bad{background:var(--danger)}
.dbar-fill.ok{background:var(--success)}
.dbar-sub{font-size:11px;color:var(--muted);margin-top:4px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
margin-bottom:16px;box-shadow:var(--sh);overflow:hidden}
.panel-hd{padding:13px 17px;border-bottom:1px solid var(--line);
display:flex;align-items:center;gap:10px}
.panel-hd h3{font-size:14.5px;font-weight:700;flex:1}
.panel-bd{padding:15px 17px}
.grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:start}
/* ตารางคอม */
table.dt{width:100%;border-collapse:collapse;font-size:13px}
table.dt th{
text-align:left;font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.03em;
text-transform:uppercase;padding:9px 12px;border-bottom:1.5px solid var(--line);white-space:nowrap
}
table.dt td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.dt tr:last-child td{border-bottom:0}
table.dt tr:hover td{background:var(--soft)}
table.dt .num{text-align:right;font-family:var(--mono);font-weight:600;white-space:nowrap}
table.dt .doc-no{font-size:12.5px}
table.dt .nm b{display:block;font-weight:600}
table.dt .nm span{font-size:11px;color:var(--muted);font-family:var(--mono)}
/* ตารางกว้างเลื่อนได้ แต่ต้อง "รู้ว่าเลื่อนได้" ไม่งั้นคนนึกว่าข้อมูลขาด
(บทเรียนชิปตัวกรองที่คนไม่รู้ว่าไถได้) — เงาขอบ + แถบบอก + แถบเลื่อนที่มองเห็น
🔴🔴 20 ก.ย. 69 — Boss แจ้ง "ตารางกินออกนอกจอ ไม่มีปุ่มเลื่อนซ้ายขวา"
ต้นเหตุ: ตัวช่วยทั้งหมดอยู่ใน @media(max-width:900px) เท่านั้น
แต่ตารางหน้านับสต็อกมี **7 คอลัมน์** กว้างเกินตั้งแต่ ~901px ขึ้นไป
(วัดจริงที่ 901px: ตารางล้น 41px เลื่อนได้จริง แต่ไม่มีเงา ไม่มีป้าย
และ macOS/Windows ซ่อนแถบเลื่อนตอนไม่ได้ไถ ⇒ คนไม่รู้ว่าไถได้)
⇒ ย้ายตัวช่วยออกมานอก media query ให้ทำงานทุกขนาดจอ
⚠️ ป้ายบอกต้องโผล่ "เฉพาะตอนล้นจริง" — ตารางที่พอดีจอแล้วขึ้นป้ายด้วยคือรบกวนเปล่า
ทำด้วย .is-scrollable ที่ JS ติดให้ (ดู markScrollables() ใน app.html) */
.tbl-wrap{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
background:linear-gradient(to right,var(--card) 30%,transparent),
linear-gradient(to left,var(--card) 30%,transparent) 100% 0,
linear-gradient(to right,rgba(15,32,51,.12),transparent),
linear-gradient(to left,rgba(15,32,51,.12),transparent) 100% 0;
background-repeat:no-repeat;background-size:34px 100%,34px 100%,12px 100%,12px 100%;
background-attachment:local,local,scroll,scroll
}
/* แถบเลื่อนที่ "เห็นตลอด" ไม่ใช่โผล่ตอนไถ — คนถึงจะรู้ว่าตารางยังมีต่อ
⚠️ ใส่เฉพาะตอนล้นจริง ไม่งั้นตารางพอดีจอจะมีรางเปล่า ๆ ค้างอยู่ */
.tbl-wrap.is-scrollable{scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding-bottom:2px}
.tbl-wrap.is-scrollable::-webkit-scrollbar{height:10px}
.tbl-wrap.is-scrollable::-webkit-scrollbar-track{background:var(--soft);border-radius:6px}
.tbl-wrap.is-scrollable::-webkit-scrollbar-thumb{
background:var(--line);border-radius:6px;border:2px solid var(--card)
}
.tbl-wrap.is-scrollable::-webkit-scrollbar-thumb:hover{background:var(--muted)}
/* ป้ายบอก — ข้อความมาจาก data-hint (ผ่าน t() แล้ว) ไม่ฝังไทยใน CSS
🔴 เดิมเขียน content:'← เลื่อนดูคอลัมน์อื่นได้' ตรง ๆ ⇒ สลับภาษาแล้วยังเป็นไทย
⚠️ ป้ายต้องอยู่ "เหนือ" ตาราง — ตารางนับสต็อกยาว 61 แถว
ถ้าอยู่ใต้ตาราง คนต้องเลื่อนลงสุดก่อนถึงจะรู้ว่าเลื่อนข้างได้ = สายเกินไป */
.tbl-wrap.is-scrollable{position:relative}
.tbl-hint{
display:block;text-align:right;font-size:10.5px;color:var(--muted);
padding:0 14px 4px
}
@media(max-width:900px){
.tbl-wrap table.dt{min-width:520px}
}
/* ══ คอลัมน์ "ช่องกรอก" ต้องติดขวาเสมอ ══ (20 ก.ย. 69)
🔴🔴 Boss แจ้งรอบ 2: "มันยังเลื่อนไม่ได้อ่ะ" + ส่งภาพที่ช่อง "ใส่จำนวน" ถูกตัดขวาหาย
ปัญหาจริงไม่ใช่แค่ "เลื่อนไม่ได้" — วัดแล้วที่ 901px ช่องกรอกถูกตัดจริง (inputClipped)
⇒ ต่อให้เลื่อนได้ คนเดินนับสต็อกก็ต้องเลื่อนไป-กลับทุกแถว ใช้งานจริงไม่ไหว
⇒ ตรึงคอลัมน์สุดท้าย (ช่องกรอก) ไว้ขวาเสมอ — เลื่อนดูคอลัมน์อื่นได้
แต่ช่องกรอกอยู่กับที่ ใช้ได้ทุกขนาดจอ/ทุกอุปกรณ์
⚠️ ใส่เฉพาะตารางที่ประกาศ .sticky-last ไม่บังคับทุกตารางในแอป
⚠️ ต้องมีพื้นหลังทึบ ไม่งั้นข้อความคอลัมน์อื่นจะเลื่อนมาทับให้อ่านไม่ออก */
.tbl-wrap table.dt.sticky-last th:last-child,
.tbl-wrap table.dt.sticky-last td:last-child{
position:sticky;right:0;z-index:2;
background:var(--card);
box-shadow:-8px 0 8px -8px rgba(15,32,51,.28)
}
.tbl-wrap table.dt.sticky-last th:last-child{background:var(--soft);z-index:3}
/* แถวที่ hover ต้องเปลี่ยนสีทั้งแถว รวมช่องที่ตรึงไว้ ไม่งั้นดูเหมือนคนละแถว */
.tbl-wrap table.dt.sticky-last tr:hover td:last-child{background:var(--soft)}
/* บาร์แนวนอน */
.bars{display:flex;flex-direction:column;gap:11px}
.bar-r .bl{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px}
.bar-r .bl b{font-family:var(--mono);font-weight:700}
.bar-t{height:8px;background:var(--soft);border-radius:5px;overflow:hidden}
.bar-f{height:100%;border-radius:5px;background:var(--primary)}
.bar-f.a{background:var(--accent)} .bar-f.g{background:var(--success)}
.bar-f.w{background:var(--warning)} .bar-f.d{background:var(--danger)}
/* กราฟแท่ง */
.chart{display:flex;align-items:flex-end;gap:7px;height:132px;padding-top:8px}
.chart .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}
.chart .cb{width:100%;background:var(--primary-light);border-radius:5px 5px 0 0;
position:relative;display:flex;align-items:flex-end;flex:1}
.chart .cf{width:100%;background:var(--primary);border-radius:5px 5px 0 0;transition:.3s}
.chart .cf.a{background:var(--accent)}
.chart .cl{font-size:10.5px;color:var(--muted);white-space:nowrap}
.chart .cv{font-size:10px;font-family:var(--mono);font-weight:700;color:var(--ink-soft)}
.alert{
display:flex;gap:11px;padding:12px 14px;border-radius:var(--r-sm);margin-bottom:9px;
border:1px solid;align-items:flex-start;font-size:13px;line-height:1.5
}
.alert.d{background:var(--danger-bg);border-color:#F3C9C9;color:#7F1D1D}
.alert.w{background:var(--warning-bg);border-color:#F3D9A4;color:#7A4A08}
.alert.i{background:var(--primary-light);border-color:#C5DCF0;color:var(--primary-dark)}
.alert .ai{font-size:16px;flex:none;line-height:1.3}
.alert b{display:block;margin-bottom:2px}
.alert .act{margin-left:auto;flex:none}
.mini-note{font-size:11.5px;color:var(--muted);margin-top:9px;line-height:1.5}
@media(max-width:1100px){
.kpis{grid-template-columns:repeat(2,1fr)}
.grid2{grid-template-columns:1fr}
}
.legend{
margin-top:26px;background:var(--card);border:1px solid var(--line);
border-radius:var(--r);padding:17px 19px;box-shadow:var(--sh)
}
.legend h3{font-size:14.5px;margin-bottom:11px}
.legend ul{margin:0;padding-left:19px;color:var(--ink-soft);font-size:13px;line-height:1.85}
.legend b{color:var(--ink)}
.legend code{
background:var(--soft);padding:1px 6px;border-radius:5px;
font-family:var(--mono);font-size:12px;color:var(--primary)
}
@media(max-width:820px){
/* กรอบมือถือจำลองต้องไม่ดันจอจริงให้ไถแนวนอน
— border 9px สองข้าง + padding ของ .stage รวมแล้วเกิน 360px */
.phone{width:100%;max-width:100%;height:700px}
.phone-wrap{max-width:100%;min-width:0}
.stage{padding:16px 12px 40px}
.phones{gap:18px}
}
@media(max-width:420px){
/* จอแคบจริง (360×780) — ถอดกรอบให้บางลง จะได้เห็นพื้นที่แอปเต็ม 360 */
.phone{border-width:5px;border-radius:18px}
.stage{padding:14px 8px 36px}
}
/* พื้นที่เลื่อนของหน้าจอแอป (ใช้ทั้งในกรอบจำลองและแอปจริง) */
.scr{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.scr::-webkit-scrollbar{width:0}
/* =====================================================================
REWORK UI (12 ก.ย. 69) — "สมุดบัญชีคลัง ไม่ใช่เดโม"
หลักคิด: ตัวเลขคือพระเอก · ที่เหลือเงียบให้หมด
① เลิกใช้เงา+การ์ดซ้อนการ์ด — ลำดับความสำคัญมาจาก "เส้นสถานะซ้ายแถว" อย่างเดียว
② เลขเงินเป็น mono ชิดขวาเสมอ หลักจึงตรงกัน อ่านเทียบกันได้
③ ป้ายกำกับเล็กลง-จางลง ตัวเลขใหญ่ขึ้น
⚠️ ห้ามใส่เงากลับเข้ามาเป็นของตกแต่ง ใช้เส้น --line แทน
===================================================================== */
:root{
--bg:#F7F8FA; /* เดิมอมฟ้า ทำให้การ์ดขาวลอย — เปลี่ยนเป็นเทากลาง */
--sh:none; /* ① */
--sh-lg:0 10px 30px rgba(10,23,38,.14); /* เหลือไว้เฉพาะของที่ลอยจริง (โมดัล/เมนู) */
--r-lg:14px; --r:12px; --r-sm:9px;
}
/* ── ไอคอนเส้น ── */
.ic{flex:none;vertical-align:-.18em}
.rail-nav a .ic{opacity:.72}
.rail-nav a.on .ic,.rail-nav a:hover .ic{opacity:1}
.rail-nav a .lb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-brand .lg{background:rgba(255,255,255,.1)}
/* ── จุดบอกที่มาข้อมูล (แทนแถบเตือนเต็มจอ) ── */
.srcdot{
display:inline-flex;align-items:center;gap:6px;flex:none;
padding:5px 10px;border-radius:var(--r-pill);border:1px solid var(--line);
background:var(--card);font-size:11.5px;font-weight:600;color:var(--ink-soft);
min-height:32px;cursor:pointer
}
.srcdot .d{width:7px;height:7px;border-radius:50%;background:var(--success);flex:none}
.srcdot.s-demo .d{background:var(--accent)}
.srcdot.s-stale .d{background:var(--warning)}
.srcdot.s-demo {color:var(--accent-dark);border-color:#F3D9A4;background:var(--accent-soft)}
.srcdot.s-stale {color:var(--warning);border-color:#F3D9A4;background:var(--warning-bg)}
.srcdot:hover{border-color:var(--line-strong)}
/* ── การ์ด: เลิกเงา ใช้เส้น ── */
.panel,.kpi{box-shadow:none;border:1px solid var(--line);background:var(--card)}
.panel{border-radius:var(--r)}
.panel-hd{padding:12px 16px}
.panel-hd h3{font-size:14px;letter-spacing:-.01em}
.panel-bd{padding:14px 16px}
/* ── KPI: ตัวเลขเป็นพระเอก ── */
.kpis{gap:10px;margin-bottom:16px}
.kpi{border-radius:var(--r);padding:13px 15px}
.kpi .lb{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:0}
.kpi .lb .ic{width:14px;height:14px;opacity:.65}
.kpi .vl{font-size:27px;font-weight:650;margin:5px 0 1px;letter-spacing:-.03em;
font-variant-numeric:tabular-nums}
.kpi .dt{font-size:10.5px;color:var(--muted)}
/* ── ตาราง: แน่นขึ้นแต่แยกชั้นชัดขึ้น ── */
table.dt{font-size:13px}
table.dt th{
font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.04em;
text-transform:uppercase;padding:9px 12px;background:var(--card);
position:sticky;top:0;z-index:2;border-bottom:1px solid var(--line-strong)
}
table.dt td{padding:9px 12px}
table.dt tr:hover td{background:#FBFCFD}
table.dt .num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
table.dt .nm b{font-weight:600;font-size:13.5px;line-height:1.35}
table.dt .nm span{font-size:10.5px;opacity:.8;letter-spacing:.01em}
/* เส้นสถานะซ้ายแถว — อุปกรณ์เดียวที่ใช้บอก "ต้องจัดการ" */
tr.r-bad td:first-child{box-shadow:inset 3px 0 0 var(--danger)}
tr.r-warn td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
tr.r-ok td:first-child{box-shadow:inset 3px 0 0 var(--success)}
/* ── แถบเตือน: เงียบลง เหลือเส้นข้างซ้าย ── */
.alert{
border-radius:var(--r-sm);border:1px solid var(--line);
border-left:3px solid var(--line-strong);background:var(--card);
padding:11px 14px;font-size:12.5px;line-height:1.6
}
.alert.i{background:var(--card);border-left-color:var(--primary);color:var(--ink-soft)}
.alert.w{background:var(--card);border-left-color:var(--accent);color:var(--ink-soft)}
.alert.d{background:var(--danger-bg);border-left-color:var(--danger);color:#7F1D1D}
.alert b{color:var(--ink)}
.alert .ai{font-size:14px;opacity:.9}
/* กล่อง "หน้านี้เป็นข้อมูลจริง" ซ้ำกับจุดบนหัวหน้าแล้ว — ยุบทิ้ง
(เก็บไว้เฉพาะตอนข้อมูลเก่า/ผิดปกติ ซึ่งใช้ .alert.w) */
.alert.i.src-dup{display:none}
/* ── มือถือ ── */
@media(max-width:900px){
.topbar{padding:8px 12px;gap:8px}
.topbar h2{font-size:15px}
.srcdot .tx{display:none} /* แคบ ๆ เหลือแค่จุดสี กดดูข้อความได้ */
/* จุดสีเล็ก แต่พื้นที่แตะต้อง >=44px ตามกฎมือถือ */
.srcdot{padding:0;width:44px;justify-content:center;min-height:44px;
border-color:transparent;background:none}
.srcdot .d{width:9px;height:9px}
.content{padding:12px}
.kpis{grid-template-columns:repeat(2,1fr);gap:8px}
.kpi{padding:11px 12px}
.kpi .vl{font-size:21px}
.panel-bd{padding:12px}
}
/* ── แถวงานค้าง (Dashboard) ──
เดิมเป็นการ์ดซ้อนในการ์ด + วงกลมอีโมจิ = ดูเป็นเดโม และกินที่แนวตั้งมาก
ใหม่: แถวเดียว ยอดชิดขวา เส้นซ้ายบอกความสำคัญ */
.todo{
display:flex;align-items:center;gap:11px;padding:12px 14px;cursor:pointer;
border:1px solid var(--line);border-left:3px solid var(--line-strong);
border-radius:var(--r-sm);background:var(--card);margin-bottom:8px;min-height:56px
}
.todo:last-child{margin-bottom:0}
.todo:hover{border-color:var(--line-strong);background:#FBFCFD}
.todo:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.todo.s-bad {border-left-color:var(--danger)}
.todo.s-warn{border-left-color:var(--accent)}
.todo .ti{color:var(--muted);flex:none;display:grid;place-items:center}
.todo.s-bad .ti{color:var(--danger)} .todo.s-warn .ti{color:var(--accent-dark)}
.todo .tt{flex:1;min-width:0}
.todo .tt b{display:block;font-size:13.5px;font-weight:600;line-height:1.4}
.todo .tt .sub{display:block;font-size:11.5px;color:var(--muted);line-height:1.45;margin-top:1px}
.todo .tv{
font-family:var(--mono);font-weight:600;font-size:16px;flex:none;
font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink)
}
.todo.s-bad .tv{color:var(--danger)}
.todo .tc{color:var(--line-strong);flex:none;display:grid;place-items:center}
@media(max-width:900px){
/* มือถือ: ยอดขึ้นบรรทัดใหม่ชิดขวา ไม่บีบชื่องานจนตัดคำ */
.todo{flex-wrap:wrap;padding:11px 12px;gap:9px}
.todo .tt{flex:1 0 calc(100% - 60px)}
.todo .tv{margin-left:auto;font-size:15px}
.todo .tc{display:none}
}
/* ── ตารางแน่นขึ้นอีกชั้น ──
ชื่อสินค้ากับรหัสเดิมเป็น 2 บรรทัดเต็ม ๆ ทำให้แถวสูง 57-63px
ลดระยะบรรทัดของ 2 ก้อนนี้ (ไม่ใช่ลด padding แถว ซึ่งจะทำให้แตะยากบนมือถือ) */
table.dt .nm b{line-height:1.25;margin:0}
table.dt .nm span{line-height:1.25;display:block;margin-top:1px}
table.dt td{padding:8px 12px}
table.dt tbody tr{border-bottom:1px solid var(--line)}
table.dt tbody tr:last-child{border-bottom:0}
table.dt td{border-bottom:0}
/* แถบค้นหา/ตัวกรองเงียบลง ไม่แย่งสายตากับตาราง */
.search{margin-bottom:10px}
.search .box{border-width:1px;border-radius:var(--r-sm);padding:9px 12px}
/* ── กล่องอธิบาย (พับได้) ──
เนื้อหาจำเป็น (กันคนอ่านผลต่างเป็น "ถูกขโมย") แต่ไม่ควรบังตัวเลข
คอม: เปิดไว้ · มือถือ: พับ กดอ่านได้ */
.explain{
border:1px solid var(--line);border-left:3px solid var(--accent);
border-radius:var(--r-sm);background:var(--card);margin-bottom:12px;font-size:12.5px
}
.explain>summary{
padding:11px 14px;cursor:pointer;font-weight:600;font-size:13px;color:var(--ink);
list-style:none;display:flex;align-items:center;gap:8px;min-height:44px
}
.explain>summary::-webkit-details-marker{display:none}
.explain>summary::after{
content:'';margin-left:auto;width:7px;height:7px;flex:none;
border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);
transform:rotate(45deg);transition:.15s
}
.explain[open]>summary::after{transform:rotate(-135deg)}
.explain>div{padding:0 14px 13px}
.explain .rc-split .v{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* ── การ์ดสโตร์บนมือถือ (กระทบยอด) ──
⚠️ .qty ใช้ร่วมกับช่องกรอกจำนวน (ปุ่ม +/- ต้องคง 44px ตามกฎมือถือ)
จึงย่อเฉพาะ "แถวที่เป็นค่าอ่านอย่างเดียว" คือแถวที่ไม่มี .ctl อยู่ข้างใน */
.item{border-radius:var(--r);box-shadow:none}
.item-ic{background:var(--soft);color:var(--muted);display:grid;place-items:center}
.item .qty:not(:has(.ctl)){
margin-top:0;padding:7px 12px;border-top:1px solid var(--line);min-height:0
}
.item .qty:not(:has(.ctl)) .lb{font-size:12px;color:var(--muted)}
.item .qty:not(:has(.ctl)) b,
.item .qty:not(:has(.ctl)) span:not(.lb){
font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13.5px;letter-spacing:-.01em
}
.item .item-hd{padding:11px 12px 9px}
.item .item-nm b{font-size:14px;line-height:1.3}
.item .item-nm .sub{font-size:11.5px;line-height:1.4;margin-top:2px}
/* ── จุดสถานะ (แทน 🔴🟡🟢 ที่แต่ละเครื่องวาดไม่เหมือนกัน) ── */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none;
vertical-align:.02em;margin-right:2px;background:var(--muted)}
.dot.d-bad{background:var(--danger)} .dot.d-warn{background:var(--accent)}
.dot.d-ok{background:var(--success)}
.item-ic.ic-bad{color:var(--danger);background:var(--danger-bg)}
.item-ic.ic-ok{color:var(--success);background:var(--success-bg)}
/* บรรทัดบอกขอบเขตข้อมูลของหน้า — เดิมเป็นกล่องเต็มความกว้าง ซึ่งซ้ำกับจุดบนหัวหน้า */
.pgmeta{font-size:12px;color:var(--muted);margin:0 2px 12px;line-height:1.5}
.go-sc{display:inline-flex;align-items:center;gap:7px;flex:none}
.go-sc .ic{opacity:.7}
.search .box .si{color:var(--muted);display:grid;place-items:center;flex:none}
.empty .ic{color:var(--line-strong)}
/* =====================================================================
แก้ความคมชัดตัวหนังสือ (12 ก.ย. 69 รอบสอง)
Boss: "text สีกลืนกับพื้นหลังหมดเลย"
วัดจริงแล้ว: ตัวที่ตก **เป็น --muted ตัวเดียวทั้งหมด** (16 จุด · 8 หน้า)
#6E8299 บนขาว = 3.95 : ต่ำกว่าเกณฑ์อ่านออก 4.5
ยิ่งรอบแรกย่อป้ายกำกับเหลือ 10.5-11px + ใช้ muted เยอะขึ้น ยิ่งอ่านไม่ออก
→ #5B7089 = 5.09 บนขาว · 4.79 บนพื้นหน้า · 4.56 บนพื้นเทา (ผ่านทั้ง 3 พื้น)
⚠️ ห้ามแก้ด้วยการ "ทำตัวหนา" แทน — น้ำหนักไม่ได้เพิ่มความคมชัด
⚠️ --accent (#F68A39=2.44) กับ --accent-dark (3.34) ใช้กับ "ตัวหนังสือ" ไม่ได้
เก็บไว้ใช้กับ พื้น/เส้น/จุด เท่านั้น · ตัวหนังสือส้มให้ใช้ --accent-tx
===================================================================== */
:root{
--muted:#5B7089; /* 3.95 → 5.09 */
--accent-tx:#A85A0D; /* ส้มสำหรับตัวหนังสือ 5.08 บนขาว · 4.59 บนพื้นส้มอ่อน */
}
/* ที่เคยใช้ accent-dark เป็นสีตัวอักษร → ย้ายมาใช้ accent-tx */
.srcdot.s-demo{color:var(--accent-tx)}
.todo.s-warn .ti{color:var(--accent-tx)}
.go-sc .ic{opacity:.85}
/* ป้ายกำกับที่เล็กมาก (<=11px) ให้เข้มขึ้นอีกขั้น — ตัวเล็กยิ่งต้องคมชัด */
.kpi .lb,.item .qty:not(:has(.ctl)) .lb,table.dt th{color:#52657A}
table.dt .nm span{color:var(--muted);opacity:1} /* เดิม opacity .8 กดความคมชัดลงอีก */
/* =====================================================================
ยกการ์ดให้ลอย + หัวข้อเด่นขึ้น (12 ก.ย. 69 รอบสาม)
Boss: "หัวข้อสำคัญไหม · ทำให้ลอย ๆ เหมือน pop up · ดูโปร ดูเท่"
⚠️ รอบแรกผมตัดเงาทิ้งหมด (--sh:none) เพราะเงาเทา ๆ เหมือนกันทุกใบ = ดูเป็นเทมเพลต
รอบนี้เอาเงากลับมา แต่เป็น "เงา 2 ชั้นอมสีน้ำเงินเข้ม" ตามสีแบรนด์
ไม่ใช่ rgba(0,0,0,.1) แบบสำเร็จรูป — และ **ไล่ระดับตามความสำคัญ**
(KPI ลอยน้อย · การ์ดงานค้างลอยมาก) ไม่ใช่ลอยเท่ากันหมดซึ่งจะแบนเหมือนเดิม
===================================================================== */
:root{
--e1:0 1px 2px rgba(15,32,51,.05), 0 2px 6px rgba(15,32,51,.05);
--e2:0 1px 2px rgba(15,32,51,.06), 0 6px 16px -4px rgba(15,32,51,.10);
--e3:0 2px 4px rgba(15,32,51,.06), 0 12px 28px -8px rgba(15,32,51,.16);
}
/* ── หัวข้อกลุ่ม: เดิมเป็นข้อความลอย ๆ ไม่รู้ว่าคุมอะไรอยู่ ── */
.panel{
box-shadow:var(--e2);border-color:#E9EFF6;overflow:hidden;
transition:box-shadow .18s ease, transform .18s ease
}
.panel-hd{
background:linear-gradient(180deg,#FCFDFE,#F6F9FC);
border-bottom:1px solid #E4ECF4;padding:13px 16px
}
.panel-hd h3{
font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--ink);
display:flex;align-items:center;gap:9px
}
/* ขีดสั้น ๆ หน้าหัวข้อ = บอกว่าหัวข้อนี้คุมของข้างล่าง (ไม่ใช่ของตกแต่ง) */
.panel-hd h3::before{
content:'';width:3px;height:15px;border-radius:2px;flex:none;
background:var(--primary)
}
/* ── KPI: ลอยน้อย (เป็นตัวเลขสรุป ไม่ใช่ของที่ต้องกด) ── */
.kpi{
box-shadow:var(--e1);border-color:#E9EFF6;
transition:box-shadow .18s ease, transform .18s ease
}
.kpi:hover{box-shadow:var(--e2);transform:translateY(-1px)}
/* ── การ์ดงานค้าง: ลอยมากสุด เพราะเป็นของที่ต้องกดจริง ── */
.todo{
box-shadow:var(--e2);border-color:#E9EFF6;
transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease
}
.todo:hover{box-shadow:var(--e3);transform:translateY(-2px);background:#fff}
.todo:active{transform:translateY(0);box-shadow:var(--e1)}
/* การ์ดในหน้ามือถือ (สโตร์ / รายการ) ── */
.item{box-shadow:var(--e1);border-color:#E9EFF6}
/* ⚠️ เคารพคนที่ตั้งเครื่อง "ลดการเคลื่อนไหว" ไว้ */
@media (prefers-reduced-motion:reduce){
.panel,.kpi,.todo{transition:none}
.kpi:hover,.todo:hover{transform:none}
}
/* ── เก็บรายละเอียดการ์ดงานค้าง ──
มือถือ: ยอดเงินเดิมชิดขอบขวาจนดูอึดอัด + ชื่องานยาวตัดบรรทัดแปลก ๆ */
.todo{padding:13px 15px;gap:12px}
.todo .tt b{letter-spacing:-.005em}
@media(max-width:900px){
.todo{padding:12px 13px}
.todo .tv{padding-right:1px}
.todo .tt{flex:1 0 calc(100% - 56px)}
/* ❌ เคยลองใส่เส้นคั่น + ยอดเต็มบรรทัด — การ์ดสูงขึ้นโดยไม่ได้อ่านง่ายขึ้น เอาออก */
}
/* =====================================================================
รอบสี่ (12 ก.ย. 69) — Boss: "ช่องค้นหา/ปุ่มกรองใหญ่กว่าหัวข้อ · ตัวหนังสือรองยังกลืนพื้นขาว
· แท็บซ้ายทำให้ลอย + ชี้แล้วขยับ"
===================================================================== */
/* ── ① ตัวหนังสือรองยังจาง — "ผ่านเกณฑ์ขั้นต่ำ" ไม่เท่ากับ "อ่านสบาย" ──
รอบก่อนแก้ 3.95 → 5.09 ซึ่งผ่าน 4.5 แบบเฉียดฉิว บนการ์ดขาวยังกลืนอยู่
→ #4E6178 = 6.35 บนขาว · 5.98 บนพื้นเทา (เหลือหัวใจว่ายังเป็น "ตัวรอง" ไม่แย่งพระเอก) */
:root{ --muted:#4E6178; }
.kpi .lb,.item .qty:not(:has(.ctl)) .lb,table.dt th{color:#41536A}
/* ป้ายสถานะเล็ก ๆ บนพื้นสีอ่อน เดิม 4.56-4.66 = เฉียดเกินไปสำหรับตัว 10-11px */
.chip.c-sub{color:#8A4008}
.chip.c-post{color:#126B33}
/* ── ② ช่องค้นหา/ตัวกรอง: เดิมสูง 62px ตัวอักษร 15px = ใหญ่กว่าหัวข้อ (14px) ──
⚠️ ลดขนาด "ตัวอักษร+ระยะขอบ" ได้ แต่ **ความสูงที่นิ้วแตะต้องคง 44px** */
.search .box{padding:0 12px;min-height:44px;border-radius:var(--r-sm)}
.search .box .si{width:16px;height:16px}
.search input{font-size:13.5px}
.search input::placeholder{font-size:13.5px}
.in,.search select{font-size:13.5px}
/* ปุ่มตัวกรอง (ทั้งหมด / รอบก่อนไม่ได้นับ / มีของอยู่ / เคยมีผลต่าง)
เดิม 13px + padding 9/15 ดูหนักกว่าหัวข้อที่มันอยู่ใต้ */
.btn.btn-sm{font-size:12.5px;padding:0 13px;min-height:44px}
[data-ctm]{font-size:12.5px;padding:0 13px}
/* ── ③ หัวข้อต้องเด่นกว่าเครื่องมือรอบตัวมัน ── */
.panel-hd h3{font-size:15px;font-weight:700}
.sec-t{font-size:11.5px;color:#41536A}
/* ── ④ แท็บซ้าย: ลอย + ชี้แล้วขยับ ── */
.rail-nav a{
transition:background .16s ease, transform .16s ease, box-shadow .16s ease;
will-change:transform
}
.rail-nav a:hover{
background:rgba(255,255,255,.10);
transform:translateX(3px);
box-shadow:0 2px 10px rgba(0,0,0,.22)
}
.rail-nav a.on{
box-shadow:0 2px 6px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.07) inset;
transform:none
}
.rail-nav a.on:hover{transform:translateX(3px);box-shadow:0 4px 14px rgba(0,0,0,.34)}
.rail-nav a:active{transform:translateX(1px)}
/* ปุ่ม/การ์ดอื่น ๆ ให้ตอบสนองแบบเดียวกัน (เบากว่า เพราะมีเยอะ) */
.btn:not(:disabled):hover{transform:translateY(-1px)}
.btn{transition:transform .14s ease, box-shadow .14s ease, background .14s ease}
.btn:not(:disabled):active{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
.rail-nav a,.btn{transition:none}
.rail-nav a:hover,.rail-nav a.on:hover,.btn:not(:disabled):hover{transform:none}
}
/* ⚠️ `.box` (ช่องค้นหา) ไม่ได้อยู่ใต้ `.search` ทุกที่ — หน้า count/fsn วางไว้ใน .panel-bd ตรง ๆ
กฎที่ scope ไว้แค่ `.search .box` จึงไม่โดน ต้องจับที่ `.box` เองให้ครบทุกหน้า */
.box{
display:flex;align-items:center;gap:9px;min-height:44px;padding:0 12px;
border-radius:var(--r-sm);background:var(--card);
border:1px solid var(--line-strong)
}
.box input{border:0;outline:0;flex:1;min-width:0;background:none}
.box input,.box input::placeholder{font-size:13.5px}
.box>span,.box .si{flex:none;display:grid;place-items:center;line-height:0}
.box .ic{width:16px;height:16px}
/* ══════════════════════════════════════════════════════════════════════
Loop 2 (ขอซื้อ / รับของ) — 13 ก.ย. 69
⚠️ mobile first: เขียนค่าสำหรับ 360px ก่อน แล้วค่อย @media ขยายขึ้นคอม
══════════════════════════════════════════════════════════════════════ */
/* ปุ่มท้ายใบ — บนมือถือปุ่มต้องเรียงเต็มแถวและสูงพอให้นิ้วแตะ (44px) */
.doc-act{
display:flex;flex-wrap:wrap;gap:7px;margin-top:9px;
padding-top:9px;border-top:1px solid var(--line)
}
.doc-act .btn{flex:1 1 auto;min-height:40px;justify-content:center}
@media(min-width:901px){
.doc-act{border-top:0;padding-top:0;margin-top:0}
.doc-act .btn{flex:0 0 auto;min-height:32px}
}
/* ── ฟอร์ม ── */
.l2-form .fld{margin-bottom:11px}
.l2-form .fld > label{
display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:4px
}
.l2-form .fld .req{color:var(--danger)}
.l2-form input,.l2-form select{
width:100%;min-height:44px;padding:9px 11px;font-size:14px;
border:1px solid var(--line);border-radius:var(--r-sm);
background:var(--card);color:var(--text)
}
.l2-form label.chk{
display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
color:var(--text);min-height:44px;cursor:pointer
}
.l2-form label.chk input{width:auto;min-height:auto;margin:0}
.hint{font-size:12px;color:var(--muted);line-height:1.6;margin:5px 0}
/* ── รายการของที่ค้นเจอ ── */
.l2-found{
max-height:260px;overflow-y:auto;border:1px solid var(--line);
border-radius:var(--r-sm);margin-bottom:10px
}
.l2-found-row{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:9px 11px;border-bottom:1px solid var(--line)
}
.l2-found-row:last-child{border-bottom:0}
.l2-found-row .cd{font-size:11px;color:var(--muted);margin-top:2px}
/* ── บรรทัดในใบ ──
มือถือ: ชื่อของขึ้นบรรทัดเต็ม แล้วช่องตัวเลขอยู่แถวล่าง (ไม่งั้นบีบจนพิมพ์ไม่ได้)
⚠️ บทเรียน bonus: ช่องที่แทรกในแถว flex ต้อง flex-wrap ไม่งั้นล้นออกนอกจอ */
.l2-line{
display:flex;flex-wrap:wrap;align-items:center;gap:7px;
padding:9px 0;border-bottom:1px solid var(--line)
}
.l2-line-nm{flex:1 0 100%;min-width:0}
.l2-line-nm .cd{font-size:11px;color:var(--muted);margin-top:2px}
.l2-line input{
flex:1 1 90px;min-width:0;min-height:44px;padding:8px 10px;text-align:right;
font-size:14px;font-family:var(--mono);
border:1px solid var(--line);border-radius:var(--r-sm);
background:var(--card);color:var(--text)
}
.l2-line .l2-unit{font-size:12px;color:var(--muted);flex:0 0 auto}
.l2-line .btn{flex:0 0 auto;min-height:44px}
@media(min-width:901px){
.l2-line-nm{flex:1 1 auto}
.l2-line input{flex:0 0 110px;min-height:38px}
.l2-line .btn{min-height:38px}
}
/* ── ของที่พิมพ์เอง (3 ต.ค. 69) — ชื่อ/หน่วย/ลิงก์/สเปก เป็นข้อความ ชิดซ้าย ── */
.l2-line input.l2f-in{text-align:left;font-family:inherit;width:100%;flex:1 1 100%}
.l2-free .l2-line-nm{display:flex;gap:7px;flex-wrap:wrap}
.l2-free .l2-line-nm .l2f-in{flex:1 1 200px}
.l2-free .l2-line-nm .l2f-unit{flex:0 1 130px}
.l2f-more{flex:1 0 100%;display:flex;flex-direction:column;gap:7px}
.l2f-more .chk{font-size:13px;display:flex;align-items:center;gap:6px}
.l2f-add{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0 10px;flex-wrap:wrap}
@media(min-width:901px){
.l2-line input.l2f-in{flex:1 1 auto;width:auto}
.l2-free .l2-line-nm{flex:1 1 100%}
}
/* ── กล่องจัดซื้อส่งเข้า Comanche ── */
.l2b-head{display:grid;grid-template-columns:1fr;gap:0 12px}
.l2b-head select{width:100%}
.l2b-line{padding:10px 0;border-bottom:1px solid var(--line)}
.l2b-req .cd{font-size:12px;color:var(--muted);margin-top:2px;word-break:break-all}
.l2b-f{display:grid;grid-template-columns:1fr 1fr;gap:0 8px;margin-top:6px}
.l2b-f .l2b-v{grid-column:1/-1}
.l2b-f input{width:100%;min-width:0}
.l2b .hint{font-size:12px;color:var(--muted)}
.l2b-who{background:var(--bg-soft,rgba(127,127,127,.07));border-radius:var(--r-sm);padding:9px 11px;margin-bottom:12px;font-size:13px;display:flex;flex-direction:column;gap:3px}
.l2b-who .cd{color:var(--muted);font-size:12px;margin-right:4px}
.l2b-urg{color:var(--danger,#c0392b);font-weight:700}
.l2b-step{border:1px solid var(--line);border-radius:var(--r-md,10px);padding:11px 12px;margin-bottom:12px}
.l2b-step.ok{border-color:color-mix(in srgb,var(--success,#11703A) 45%,var(--line))}
.l2b-st{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:14px}
.l2b-n,.l2b-ck{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
font-size:12px;font-weight:800;background:var(--line);color:var(--text)}
.l2b-step.ok .l2b-n,.l2b-line.ok .l2b-ck{background:var(--success,#11703A);color:#fff}
.l2b-nm{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.l2b-nm .cd{font-size:12px;color:var(--muted)}
.l2b-req>.cd{margin-left:31px}
.l2b-pick{margin:4px 0 0 31px;display:inline-block;font-size:12px;font-weight:700;padding:2px 9px;border-radius:6px;
background:var(--warning-bg,#FBEFD6);color:var(--text)}
.l2b-look{font-size:12px;margin-top:4px;color:var(--success,#11703A)}
.l2b-look.bad{color:var(--danger,#c0392b);font-weight:700}
.l2b-sum{font-size:12px;color:var(--muted);text-align:right;margin-top:3px}
.l2b-line:last-of-type{border-bottom:0}
@media(min-width:901px){
.l2b-head{grid-template-columns:1fr 1.4fr .8fr}
.l2b-f{grid-template-columns:150px 1fr 120px}
.l2b-f .l2b-v{grid-column:auto}
}
.l2-total{
display:flex;justify-content:space-between;align-items:center;
padding:11px 0 4px;font-size:14px;font-weight:700
}
.l2-total b{font-family:var(--mono);color:var(--primary)}
.l2-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:13px}
.l2-actions .btn{flex:1 1 140px;min-height:46px;justify-content:center}
.l2-filter select{
min-height:38px;padding:6px 10px;font-size:13px;
border:1px solid var(--line);border-radius:var(--r-sm);
background:var(--card);color:var(--text)
}
/* ตัดข้อความยาวในตาราง ไม่ให้ดันคอลัมน์อื่นหาย */
.tbl .ell{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ── กล่องถาม/ยืนยันของเราเอง ──
🔴🔴 แทน confirm()/prompt() ของเบราว์เซอร์ ซึ่ง **ถูกบล็อกเงียบใน WebView/แอปมือถือ**
(คืน false ทันทีโดยไม่มีกล่องขึ้น = ผู้ใช้กดแล้วไม่มีอะไรเกิดขึ้น) */
.l2-ask{
position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
background:rgba(10,23,38,.5);padding:18px
}
.l2-ask-box{
background:var(--card);border-radius:var(--r-md);padding:18px;
width:100%;max-width:400px;box-shadow:0 18px 48px rgba(10,23,38,.3)
}
.l2-ask-msg{font-size:14px;line-height:1.65;color:var(--text);margin-bottom:14px;white-space:pre-line}
.l2-ask-in{
width:100%;min-height:44px;padding:9px 11px;font-size:14px;margin-bottom:14px;
border:1px solid var(--line);border-radius:var(--r-sm);
background:var(--card);color:var(--text)
}
.l2-ask-act{display:flex;gap:9px}
.l2-ask-act .btn{flex:1;min-height:46px;justify-content:center}
/* ══ กล่องรายละเอียดแบบ pop up (ลอยทับกลางจอ) ══
🔴 เดิมกล่องรายละเอียดถูกวางไว้ "ท้ายสุดของหน้า" (ใต้ตาราง PR แล้วยังใต้ตาราง PO อีก)
บนมือถือหน้ายาว 2,354px แต่จอสูง 717px ⇒ กดดูใบ PR แล้วกล่องไปโผล่ y≈2,326
ผู้ใช้ต้องเลื่อนผ่านกล่อง PO ทั้งกล่อง + เห็นหัวข้อ "ใบสั่งซื้อ (PO)" ค้างบนจอ
= เข้าใจว่าระบบพาไปหน้า PO (Boss แจ้ง 16 ก.ย. 69)
→ ยกขึ้นมาลอยทับกลางจอแทน ใช้ท่าเดียวกับ .l2-ask ที่มีอยู่แล้วในแอป
⚠️ z-index ต้องต่ำกว่า .l2-ask (300) เพราะกล่องยืนยันต้องทับกล่องรายละเอียดได้ */
.x-modal{
position:fixed;inset:0;z-index:280;display:flex;align-items:center;justify-content:center;
padding:14px;overscroll-behavior:contain;
/* ⚠️ ฉากหลังต้องเข้มพอให้ "รู้สึกว่าลอยอยู่ข้างหน้า" — ของเดิม .5 ยังอ่านของข้างหลังออก
กล่องเลยดูเหมือนแปะอยู่กับหน้า ไม่ใช่ลอยขึ้นมา (Boss ทัก 17 ก.ย. 69)
เบลอฉากหลังด้วย ทำให้สายตาไปอยู่ที่กล่องทันที */
background:rgba(8,18,31,.58);
-webkit-backdrop-filter:blur(6px) saturate(.85);
backdrop-filter:blur(6px) saturate(.85);
animation:xmFade .16s ease-out
}
.x-modal > .panel{
width:100%;max-width:640px;margin:0;
/* ⚠️ ต้องจำกัดความสูง ไม่งั้นใบที่มีหลายรายการจะล้นออกนอกจอ กดปุ่มปิดไม่ได้ */
max-height:88dvh;display:flex;flex-direction:column;
/* เงา 2 ชั้น: ชั้นกว้างให้ความสูง ชั้นแคบให้ขอบคม — ของเดิมชั้นเดียวเลยดูแบน
border โปร่งกันกล่องขาวจมหายไปกับฉากหลังในธีมสว่าง */
border:1px solid rgba(255,255,255,.14);
box-shadow:0 24px 64px -12px rgba(8,18,31,.5), 0 8px 20px -8px rgba(8,18,31,.3);
animation:xmRise .19s cubic-bezier(.2,.8,.3,1)
}
@keyframes xmFade{from{opacity:0}to{opacity:1}}
@keyframes xmRise{from{opacity:0;transform:translateY(10px) scale(.985)}
to{opacity:1;transform:none}}
/* หัวกล่องใน pop up ให้ต่างจากพาเนลธรรมดานิดหน่อย — บอกว่านี่คือชั้นที่ลอยอยู่ */
.x-modal > .panel > .panel-hd{background:var(--soft)}
/* เคารพคนที่ตั้งค่าลดการเคลื่อนไหว */
@media (prefers-reduced-motion:reduce){
.x-modal,.x-modal > .panel{animation:none}
}
/* หัวกล่อง (มีปุ่มปิด) ต้องค้างอยู่ตลอด เลื่อนเฉพาะเนื้อใน */
.x-modal > .panel > .panel-hd{flex:none}
.x-modal > .panel > .panel-bd,
.x-modal > .panel > .tbl-wrap{overflow-y:auto;-webkit-overflow-scrolling:touch}
/* 26 ก.ย. 69 (Boss: "อย่าให้เลื่อนซ้ายขวาเลย") — กันไว้ชั้นนอกสุด เผื่อเนื้อในล้นเพราะเหตุอื่น
ในอนาคต จะได้ตัด/หด ไม่ใช่ขึ้นแถบเลื่อนแนวนอนให้เห็น */
.x-modal > .panel > .panel-bd{overflow-x:hidden}
/* มือถือ: ให้เต็มความกว้างกว่านี้ ใช้พื้นที่คุ้มขึ้น */
@media (max-width:640px){
.x-modal{padding:10px}
.x-modal > .panel{max-height:92dvh}
}
/* ══════════════════════════════════════════════════════════════════════════
ปรับ UX/UI รอบเก็บงาน — 17 ก.ย. 69
ดูจากภาพหน้าจอจริงทั้งมือถือ 390px และคอม 1440px แล้วแก้เฉพาะจุดที่อ่านยาก
ไม่รื้อโทนสี/โครงเดิม (น้ำเงิน-ส้ม ใช้มาตลอดทั้งชุดแอป X10 ต้องคงไว้ให้กลมกลืน)
══════════════════════════════════════════════════════════════════════════ */
/* ① ตัวเลข KPI เดิมเป็น monospace ทำให้ "฿2,824" ดูห่างเป็นช่องๆ อ่านยาก
→ ใช้ฟอนต์เนื้อหาปกติ + tabular-nums (ตัวเลขกว้างเท่ากัน คอลัมน์ยังตรง)
ได้ทั้งอ่านง่ายและตัวเลขไม่ขยับตอนอัปเดตสด */
.kpi .vl{
font-family:inherit;
font-variant-numeric:tabular-nums;
font-size:26px;font-weight:700;letter-spacing:-.015em
}
/* ตัวเลขในตาราง/การ์ดก็เหมือนกัน — ตรงคอลัมน์แต่ไม่ดูเป็นโค้ด */
table.dt td.num,.item .qty b,.kpi .dt{font-variant-numeric:tabular-nums}
/* ② ป้ายหัวข้อ KPI เดิม 11.5px เทาอ่อน อ่านยากบนมือถือกลางแดด */
.kpi .lb{font-size:12px;color:var(--ink-soft)}
/* ③ ปุ่มเล็กในหัวกล่อง (เช่น "ปิด") เดิมสูงเท่าปุ่มหลัก เลยดูใหญ่เกินหน้าที่
→ ให้เล็กลงและเบาลง ไม่ไปแย่งสายตาจากเนื้อหา */
.panel-hd .btn-sm{min-height:34px;padding:6px 13px;font-size:13px}
/* ④ การ์ดรายการบนมือถือ: เดิมขอบ+เงาเท่ากันหมดทุกใบ เลยดูแบนเป็นพรืด
→ ลดเงาให้บางลง ใช้เส้นขอบเป็นตัวแบ่งหลัก สายตาจับ "แถบสีสถานะ" ซ้ายมือแทน */
.item{box-shadow:0 1px 2px rgba(15,32,51,.04)}
/* ⑤ ระยะห่างระหว่างกลุ่ม — เดิม 16px เท่ากันหมดทำให้ไม่รู้ว่าอะไรเป็นพวกเดียวกัน
เพิ่มช่องว่างก่อนพาเนลถัดไปให้กลุ่มแยกกันชัด (gestalt: proximity) */
.content > .panel + .panel{margin-top:20px}
/* ⑥ โฟกัสคีย์บอร์ดต้องเห็นชัด — เดิมใช้ outline เริ่มต้นของเบราว์เซอร์ซึ่งจางมาก
จำเป็นสำหรับคนที่ใช้ Tab และเป็นข้อกำหนดการเข้าถึงขั้นพื้นฐาน */
.btn:focus-visible,button:focus-visible,select:focus-visible,
input:focus-visible,[data-act]:focus-visible,[data-go]:focus-visible{
outline:2.5px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)
}
/* ⑦ ปุ่ม "ปิด" ใน pop up — เดิมเป็นปุ่มกรอบเต็มใบ ดูหนักพอๆ กับปุ่มสั่งงานจริง
ทั้งที่หน้าที่มันคือ "ออก" เท่านั้น → ทำเป็นกากบาทกลมเบาๆ มุมขวา
⚠️ ยังต้องกดง่ายบนมือถือ: คุมพื้นที่กด 40px (เกิน 44px ไม่ได้ หัวกล่องจะสูงเกิน) */
/* 🔴 24 ก.ย. 69 (Boss ส่งรูป) — เดิมเลือก "ทุก .btn-sm ในหัว pop up" ⇒ ปุ่ม "ปริ้นใบนี้" โดนด้วย
กลายเป็นวงกลม ✕ กว้าง 40px ตัวหนังสือถูกบีบเรียงลงแนวตั้ง (ปริ/้น/ใบ/นี้) + มีกากบาทติด
→ จำกัดเฉพาะปุ่มปิดจริง (#rcClose #fsClose l2openclose · ปุ่มใหม่ใส่ data-xbtn) */
.x-modal > .panel > .panel-hd :is(#rcClose,#fsClose,[data-act="l2openclose"],[data-xbtn]).btn-sm{
min-height:40px !important;width:40px;padding:0 !important;justify-content:center;
border-radius:var(--r-pill);font-size:0 !important;position:relative;flex:none
}
.x-modal > .panel > .panel-hd :is(#rcClose,#fsClose,[data-act="l2openclose"],[data-xbtn]).btn-sm::after{
content:'✕';font-size:15px;line-height:1;color:var(--ink-soft)
}
.x-modal > .panel > .panel-hd :is(#rcClose,#fsClose,[data-act="l2openclose"],[data-xbtn]).btn-sm:hover::after{color:var(--ink)}
.x-modal > .panel > .panel-hd .btn-sm{ white-space:nowrap; flex:none; }
/* ⑧ หัวข้อใน pop up ให้เด่นขึ้นอีกนิด (เป็นชื่อของสิ่งที่กำลังดูอยู่) */
.x-modal > .panel > .panel-hd h3{font-size:15.5px}
/* ══════════════════════════════════════════════════════════════════════════
ปริ้นเอกสาร — ทำ 19 ก.ย. 69
⚠️ #printArea ซ่อนอยู่ตลอดบนจอ โผล่เฉพาะตอนสั่งพิมพ์
⚠️ ตอนพิมพ์ต้องซ่อน "ทุกอย่างที่ไม่ใช่เอกสาร" — เมนูซ้าย/แถบบน/ปุ่ม/pop up
ไม่งั้นได้กระดาษที่มีเมนูติดมาครึ่งหน้า
⚠️ บังคับสีดำบนขาว: ธีมจอใช้สีอ่อนบนพื้นเทา พิมพ์ออกมาจะจางจนอ่านไม่ออก
══════════════════════════════════════════════════════════════════════════ */
#printArea{display:none}
@media print{
/* ซ่อนหน้าจอปกติทั้งหมด เหลือแต่เอกสาร */
.rail,.topbar,.scrim,.x-modal,.toast,#content,.burger{display:none!important}
/* 🔴 3 ต.ค. 69 — .shell สูง 100dvh ยังกินที่ 1 หน้าเต็มแม้ลูกถูกซ่อนหมด ⇒ ใบพิมพ์ทุกใบได้หน้าแรกว่าง (เป็นมาตั้งแต่ ก.ย.)
#printArea อยู่นอก .shell → ซ่อนทั้งก้อนได้ */
.shell{display:none!important}
#printArea{display:block!important}
html,body{background:#fff!important;color:#000!important;margin:0;padding:0}
/* ตารางห้ามถูกตัดกลางแถว และหัวตารางต้องซ้ำทุกหน้าถ้าเอกสารยาว */
#printArea table{width:100%;border-collapse:collapse}
#printArea thead{display:table-header-group}
#printArea tr{break-inside:avoid}
#printArea th,#printArea td{border:1px solid #000;padding:5px 7px;font-size:12px}
#printArea th{background:#eee!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
/* ช่องเซ็นชื่อต้องไม่ถูกตัดข้ามหน้า */
.pr-sign{break-inside:avoid;margin-top:28px}
@page{margin:12mm}
}
/* ===== คืนซากตอนเบิก (Boss 20 ก.ย. 2569) =====
แถบนี้แทรกใต้บรรทัดของในตะกร้า เฉพาะของที่ต้องคืนซากจริง ๆ
⚠️ ต้องเด่นพอให้เห็นว่า "บรรทัดนี้ไม่เหมือนบรรทัดอื่น" แต่ไม่ตะโกนจนคนกลัว
ของกิน (เคสส่วนใหญ่) จะไม่เห็นแถบนี้เลย */
.scrap-row{
margin:-2px 0 10px 0;padding:9px 11px;border-radius:var(--r-sm);
border:1px solid var(--line-strong);background:var(--soft);
display:flex;flex-direction:column;gap:7px
}
.scrap-need{border-color:var(--warning);background:var(--warning-bg)}
.scrap-declare{border-color:var(--primary-light);background:var(--primary-light)}
.scrap-container{border-color:var(--accent);background:var(--accent-soft)}
.scrap-tag{font-size:11.5px;font-weight:700;display:flex;align-items:center;gap:5px;color:var(--ink)}
.scrap-rule{font-size:12px;color:var(--ink-soft);line-height:1.45}
.scrap-ctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.scrap-lbl{font-size:12px;color:var(--ink-soft)}
/* ⚠️ ปุ่มเลือกต้องสูง 44px — คนกดบนมือถือขณะยืนที่เคาน์เตอร์ ปุ่มเล็กกดพลาดง่าย */
.scrap-opt{
display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;
border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--card);
font-size:12.5px;cursor:pointer;user-select:none
}
.scrap-opt.on{border-color:var(--primary);background:var(--primary-light);font-weight:700}
.scrap-opt input{margin:0;accent-color:var(--primary)}
.scrap-reason{width:100%;font-size:13px}
.scrap-fine{font-size:12.5px;color:var(--danger);font-weight:600}
.scrap-fine b{font-size:14px}
.scrap-basis{color:var(--muted);font-weight:400;font-size:11.5px}
.scrap-fine-warn{color:var(--warning);font-weight:600}
/* ซากที่รับเกินของที่จ่ายจริง — ต้องคืนผู้เบิกที่เคาน์เตอร์ ไม่เก็บเป็นเครดิต */
.scrap-back{color:var(--accent-dark);font-size:12px;font-weight:600}
/* รูปซาก */
.scrap-photos{display:flex;flex-direction:column;gap:8px;padding-top:0}
.scrap-ph-hd{display:flex;justify-content:space-between;align-items:center;gap:10px;
flex-wrap:wrap;font-size:12.5px;font-weight:600}
.scrap-ph-list{display:flex;gap:8px;flex-wrap:wrap}
.scrap-ph{position:relative;width:74px;height:74px;border-radius:var(--r-sm);
overflow:hidden;border:1px solid var(--line-strong);background:var(--soft);display:block}
.scrap-ph img{width:100%;height:100%;object-fit:cover;display:block}
.scrap-ph-x{
position:absolute;top:2px;right:2px;width:24px;height:24px;border:0;border-radius:50%;
background:rgba(15,32,51,.72);color:#fff;font-size:12px;line-height:1;cursor:pointer
}
/* บล็อกซากบนใบที่เปิดดู */
.scrap-doc{
margin-top:8px;padding:8px 10px;border-radius:var(--r-sm);
background:var(--soft);border:1px solid var(--line)
}
.scrap-doc-hd{font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px;
margin-bottom:4px;color:var(--ink)}
/* ป้ายกลุ่มในรายการที่ระบบเสนอ — ชื่อกลุ่มยาว ("ไม้กวาด ไม้ม็อบ สก็อตไบรต์")
⚠️ ถ้าไม่จำกัดความกว้าง ป้ายจะกินพื้นที่จนชื่อของถูกบีบ และตัวอักษรเล็กจนอ่านไม่ออก */
.scrap-sug-g{max-width:120px;white-space:normal;line-height:1.3;text-align:center;flex:none}
/* ══════════════════════════════════════════════════════════════════
กล่อง "หน้านี้ทำอะไร" (21 ก.ย. 69)
🔴 Boss แจ้ง: "ตอนนี้มันยังดูงงอยู่ ผมก็เริ่มงง" — คนแยกไม่ออกว่า
"เบิก" กับ "ขอซื้อ" ต่างกันยังไง ⇒ อธิบายไว้บนสุดของทุกหน้า
⚠️ ห้ามใช้สีเตือน (เหลือง/แดง) — นี่เป็นข้อมูลช่วยเหลือ ไม่ใช่ปัญหา
ถ้าใช้สีเตือน คนจะชินแล้วเลิกอ่านกล่องเตือนจริง
⚠️ ต้องอ่านง่ายกว่าตัวเนื้อหาไม่ได้ — เป็นตัวช่วย ไม่ใช่พระเอกของหน้า
══════════════════════════════════════════════════════════════════ */
.help-box{
display:flex; align-items:flex-start; gap:10px;
background:var(--primary-light); border:1px solid #C5DCF0;
border-radius:10px; padding:11px 12px; margin-bottom:14px;
color:var(--primary-dark); font-size:13px; line-height:1.65;
}
.help-box .help-ico{
flex:none; width:18px; height:18px; border-radius:50%;
background:var(--primary); color:#fff;
font-size:12px; font-weight:700; font-style:italic;
display:flex; align-items:center; justify-content:center;
margin-top:1px;
}
.help-txt{ flex:1; min-width:0; }
/* ในคำอธิบาย = คำสำคัญ ("ใช้เมื่อของหมดคลัง") ต้องเด่นกว่าตัวอื่น */
.help-txt b{ font-weight:700; color:var(--primary-dark); }
/* ปุ่มกากบาท — จางไว้ก่อน ไม่ให้แย่งสายตาจากข้อความ */
.help-x{
flex:none; background:none; border:0; cursor:pointer;
color:var(--primary); opacity:.5;
font-size:19px; line-height:1; padding:0 2px; margin-top:-1px;
}
.help-x:hover{ opacity:1; }
/* ⚠️ มือถือไม่มี hover — ต้องเห็นชัดพอกดได้ตั้งแต่แรก
(บทเรียน feedback_hover_only_affordance_mobile) */
@media(hover:none){ .help-x{ opacity:.75; } }
/* ปิดไปแล้ว — เหลือปุ่มเล็กให้กดอ่านคืนได้ ไม่ใช่หายถาวรจนหาไม่เจอ */
.help-re{ margin-bottom:10px; }
.help-reopen{
background:none; border:1px dashed var(--line-strong); border-radius:6px;
color:var(--muted); font-size:11.5px; cursor:pointer;
padding:3px 11px; font-family:inherit;
}
.help-reopen:hover{ border-color:var(--primary); color:var(--primary); }
@media(max-width:900px){
/* มือถือ: ตัวโตขึ้นนิดเพราะอ่านกลางแดด และปุ่มปิดต้องแตะโดนง่าย */
.help-box{ font-size:13.5px; padding:12px; gap:9px; }
.help-x{ font-size:22px; padding:2px 6px; margin:-2px -4px 0 0; }
}
/* ตัวนับการย้ายมาใช้ inv (23 ก.ย. 69) — 4 คอลัมน์ต้องพอดีจอ 360 ไม่ต้องไถ
คอลัมน์ "ยังใช้ procurement" สำคัญสุด ห้ามหลุดขอบ ⇒ หัวตารางตัดบรรทัดได้ + อีเมลยาวตัดคำ */
.tbl-wrap table.dt.adp{min-width:0}
table.dt.adp th{white-space:normal;padding:8px 8px;line-height:1.3}
table.dt.adp td{padding:9px 8px}
table.dt.adp .nm span{word-break:break-all}
/* 24 ก.ย. 69 — ปุ่ม ? วิธีใช้งานบนแถบหัว + หัวแผงร่างแบบพับ */
.tb-help{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--primary);background:transparent;
color:var(--primary);font-weight:700;font-size:14px;line-height:1;cursor:pointer;padding:0;flex:none;position:relative}
.tb-help[hidden]{display:none}
.tb-help::after{content:'';position:absolute;inset:-8px} /* พื้นที่แตะ ~44px บนมือถือ */
.l1-fold-hd{cursor:pointer;user-select:none}
.l1-fold-car{display:inline-block;transition:transform .15s;color:var(--muted);font-size:12px}
.l1-fold-car.on{transform:rotate(90deg)}
/* ══ หน้าเบิกของ — มือถือ (24 ก.ย. 69 Boss: "ใช้งานยาก") ══ */
.ix-day{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-soft);
background:var(--primary-light);border-radius:var(--r-sm);padding:7px 10px;margin-bottom:10px}
.ix-day.warn{background:var(--warning-bg);color:var(--warning)}
.ix-src{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);
padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--card)}
.ix-src b{color:var(--ink)}
.ix-rows{padding:0 !important}
.ix-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line)}
.ix-nm{flex:1;min-width:0}
.ix-nm>b{display:block;font-size:14px;line-height:1.35;font-weight:600;
overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ix-nm>span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.ix-nm code{font-size:11.5px}
.ix-add{flex:none;text-align:right}
.ix-add .btn{min-height:40px;padding:0 12px;white-space:nowrap}
@media(max-width:900px){
.ix-list .panel-hd{flex-direction:column;align-items:flex-start;gap:2px}
.ix-list .panel-hd h3{white-space:nowrap}
}
/* แถบตะกร้าลอยล่างจอ */
.ix-bar-sp{height:84px}
.ix-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
background:linear-gradient(to top,var(--bg) 70%,transparent)}
.ix-bar-btn{width:100%;display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 14px;
border:0;border-radius:14px;background:var(--primary);color:#fff;text-align:left;cursor:pointer;
box-shadow:0 8px 24px rgba(10,23,38,.28)}
.ix-bar-n{flex:none;min-width:30px;height:30px;border-radius:15px;background:#fff;color:var(--primary);
display:grid;place-items:center;font-weight:700;font-size:14px;padding:0 8px}
.ix-bar-tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.ix-bar-tx b{font-size:13.5px}
.ix-bar-tx span{font-size:12px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ix-bar-go{flex:none;font-weight:700;font-size:13.5px}
/* แผ่นเลื่อนขึ้น */
.ix-sheet-bg{position:fixed;inset:0;z-index:70;background:rgba(10,23,38,.45)}
.ix-sheet{position:fixed;left:0;right:0;bottom:0;z-index:71;max-height:88dvh;overflow:auto;
background:var(--bg);border-radius:18px 18px 0 0;padding:0 10px calc(12px + env(safe-area-inset-bottom));
box-shadow:0 -10px 30px rgba(10,23,38,.25)}
.ix-sheet-hd{position:sticky;top:0;z-index:1;display:flex;justify-content:center;align-items:center;
padding:8px 0 6px;background:var(--bg)}
.ix-grab{width:42px;height:5px;border-radius:3px;background:var(--line-strong)}
.ix-sheet-x{position:absolute;right:4px;top:4px;width:40px;height:40px;border:0;background:none;
font-size:18px;color:var(--muted);cursor:pointer}
.ix-sheet .panel{margin-bottom:0}
.ix-sheet .l1-fold-car{display:none}
@media(max-width:900px){
/* ข้อความเด้งต้องอยู่เหนือแถบตะกร้า (สูง ~76px) ไม่งั้นบังปุ่ม ดู/ส่งใบ */
body .toast{bottom:calc(96px + env(safe-area-inset-bottom))}
.ix-sheet .l1-arrow{display:none}
.ix-sheet .panel-bd>div,.ix-sheet #l1to{min-width:0 !important;flex-basis:100%}
}
/* ── เชื่อม Comanche (cmc-ui.js · 3 ต.ค. 69) ── */
.cmc-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;padding:10px 14px;border:1px solid var(--line);border-left:4px solid var(--muted);border-radius:10px;background:var(--card);font-size:13px}
.cmc-bar.on{border-left-color:var(--success)}
.cmc-dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none}
.cmc-bar.on .cmc-dot{background:var(--success)}
.cmc-tx{flex:1;min-width:200px}
.cmc-sub{display:block;color:var(--muted);font-size:11.5px}
.cmc-doc{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:8px 0}
.cmc-doc .cmc-sub{display:inline}
.cmc-warn{padding:8px 10px;border-radius:8px;background:color-mix(in srgb, var(--warning) 12%, transparent);color:var(--text)}
.cmm-ctrl{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:10px 0;font-size:13px}
.cmm-ctrl label{display:flex;gap:6px;align-items:center}
.cmm-day{margin:14px 0 6px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.cmm-day:first-child{margin-top:0}
/* คู่มือ Comanche ในปุ่ม ? */
.l2-ask-box:has(.cmc-help){max-width:640px;max-height:86vh;overflow:auto}
.cmc-help{white-space:normal;font-size:13.5px;line-height:1.6}
.cmc-hh{font-weight:800;font-size:15px;margin:2px 0 8px}
.cmc-hs{margin:10px 0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.cmc-ht{font-weight:700;margin-bottom:4px}
.cmc-hi{margin:3px 0}
.cmc-hw{margin:10px 0;padding:9px 12px;border-radius:10px;background:color-mix(in srgb, var(--danger) 12%, transparent);color:var(--text)}
.buy-ln{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12.5px;padding:3px 0;border-top:1px dashed var(--line)}
.buy-po{font-size:12.5px;margin:6px 0 4px;color:var(--text)}
/* ป้ายสถานะ Comanche บนใบขอซื้อในแอป + ป้าย "จากแอป" ในหน้าติดตามการซื้อ (3 ต.ค. 69) */
.l2-cmc-tag{display:inline-block;margin-top:3px;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:6px;text-decoration:none;
background:var(--line);color:var(--text)}
.l2-cmc-tag.cam-ok{background:var(--success-bg,#E8F6ED);color:var(--success,#11703A)}
.l2-cmc-tag.cam-warn{background:var(--warning-bg,#FBEFD6);color:var(--text)}
.l2-cmc-tag.cam-bad{background:var(--danger-bg,#F9E3E3);color:var(--danger,#B42318)}
.buy-app{margin-left:6px;font-size:11px;font-weight:700;padding:1px 7px;border-radius:6px;background:var(--line);color:var(--text)}
.buy-gen{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.buy-wait{color:var(--warning,#B7791F);font-weight:700}
.btn.btn-xs{padding:2px 8px;font-size:12px;min-height:26px;margin-left:4px}
.buy-recv{max-width:560px;width:100%}
.buy-recv-ln{max-height:42vh;overflow:auto;margin:8px 0;border-top:1px solid var(--line)}
.buy-recv-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.buy-recv-row>span{display:flex;flex-direction:column;min-width:0}
.buy-recv-row input{flex:0 0 96px;text-align:right}
.buy-recv-f{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.buy-recv-f label,.buy-recv-f1{display:flex;flex-direction:column;font-size:12px;color:var(--muted);gap:3px;margin-top:6px}
@media(max-width:520px){.buy-recv-f{grid-template-columns:1fr}}
/* ── ติดตามการซื้อ: 3 ช่วง PR ฟ้า / PO ม่วง / REC เขียว (3 ต.ค. 69) ── */
:root{--c-pr:#1D4ED8;--c-pr-bg:#EAF1FE;--c-po:#6D28D9;--c-po-bg:#F1EAFE;--c-rec:#047857;--c-rec-bg:#E7F6EF}
html.dk{--c-pr:#7AA7FF;--c-pr-bg:#16233D;--c-po:#B794F6;--c-po-bg:#251A3D;--c-rec:#5CD3A2;--c-rec-bg:#12302A}
.bt-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 10px}
.bt-legend .cmc-sub{flex:1 1 100%}
.bt-steps{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:6px 0 8px}
.bt-step{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:3px 9px 3px 4px;border-radius:6px;border:1px solid var(--line);color:var(--muted);background:var(--card)}
.bt-step b{width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;background:var(--line);color:var(--text)}
.bt-step i{font-style:normal;font-weight:800;font-size:10.5px;opacity:.8}
.bt-step.done{color:var(--text)}
.bt-step.bt-pr.cur,.bt-step.bt-pr.done b{border-color:var(--c-pr)}
.bt-step.cur{font-weight:700}
.bt-step.bt-pr.cur{background:var(--c-pr-bg);color:var(--c-pr);border-color:var(--c-pr)} .bt-step.bt-pr.cur b,.bt-step.bt-pr.done b{background:var(--c-pr);color:#fff}
.bt-step.bt-po.cur{background:var(--c-po-bg);color:var(--c-po);border-color:var(--c-po)} .bt-step.bt-po.cur b,.bt-step.bt-po.done b{background:var(--c-po);color:#fff}
.bt-step.bt-rec.cur{background:var(--c-rec-bg);color:var(--c-rec);border-color:var(--c-rec)} .bt-step.bt-rec.cur b,.bt-step.bt-rec.done b{background:var(--c-rec);color:#fff}
.bt-step.cur.bad{background:var(--danger-bg,#F9E3E3);color:var(--danger,#B42318);border-color:var(--danger,#B42318)}
.bt-arr{color:var(--muted);font-weight:700}
.bt-sec{border-left:4px solid var(--line);padding:6px 0 6px 10px;margin:6px 0;border-radius:2px}
.bt-sec.bt-pr{border-left-color:var(--c-pr)} .bt-sec.bt-pof{border-left-color:var(--c-po)} .bt-sec.bt-rec{border-left-color:var(--c-rec)}
.bt-sh{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13.5px;margin-bottom:2px}
.bt-tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.3px;padding:1px 6px;border-radius:5px;color:#fff;margin-right:4px}
.bt-pr .bt-tag{background:var(--c-pr)} .bt-pof .bt-tag{background:var(--c-po)} .bt-rec .bt-tag{background:var(--c-rec)}
.bt-po{padding:6px 0;border-top:1px dashed var(--line)} .bt-po:first-of-type{border-top:0}
.bt-po .bt-tag{background:var(--c-po)}
.bt-bar{height:6px;border-radius:6px;background:var(--line);overflow:hidden;margin:4px 0 6px;max-width:320px} .bt-bar i{display:block;height:100%;background:var(--c-rec)}
.bt-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
.bt-cg{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:4px 6px;border-radius:10px;border:1px solid var(--line)}
.bt-cgl{font-size:11.5px;font-weight:800;margin:0 4px}
.bt-cg-pr{background:var(--c-pr-bg)} .bt-cg-pr .bt-cgl{color:var(--c-pr)}
.bt-cg-po{background:var(--c-po-bg)} .bt-cg-po .bt-cgl{color:var(--c-po)}
.bt-cg-rec{background:var(--c-rec-bg)} .bt-cg-rec .bt-cgl{color:var(--c-rec)}
.bt-recvbtn{background:var(--c-rec)!important;border-color:var(--c-rec)!important}
/* ── นับสต็อก (3 ต.ค. 69): ป้ายรอบนับ / เลือกสโตร์ / ผลหลังบันทึก ── */
.ct-pl{display:inline-block;font-size:11px;font-weight:700;padding:1px 8px;border-radius:6px;background:var(--line);color:var(--text);white-space:nowrap}
.ct-pl.w{background:var(--c-po-bg,#F1EAFE);color:var(--c-po,#6D28D9)}
.ct-pl.off{background:transparent;color:var(--muted);font-weight:500}
.ct-pick{text-align:center;padding:22px 14px}
.ct-pick-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
.ct-planbar{display:flex;flex-direction:column;gap:3px;font-size:13px;padding-top:0}
.ct-more{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.ct-blind{font-size:13px;display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.tl-diff{font-size:10.5px;color:var(--muted);margin-top:2px}
.tl-diff.bad{color:var(--danger,#B42318);font-weight:700}
/* ── รายการตรวจ (3 ต.ค. 69) ── */
.aud-signs{display:grid;grid-template-columns:1fr;gap:10px;margin:10px 0}
@media(min-width:901px){.aud-signs{grid-template-columns:1fr 1fr}}
.aud-sign{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--card)}
.aud-sign.ok{border-color:var(--success,#11703A);background:var(--success-bg,#E8F6ED)}
.aud-by{font-size:12px;margin-top:4px}
.aud-list{display:flex;flex-direction:column;gap:8px}
.aud-sec{border:1px solid var(--line);border-left:5px solid var(--line);border-radius:10px;background:var(--card);padding:0 12px}
.aud-sec>summary{display:flex;align-items:center;gap:10px;padding:11px 0;cursor:pointer;list-style:none}
.aud-sec>summary::-webkit-details-marker{display:none}
.aud-sec[open]{padding-bottom:10px}
.aud-n{flex:0 0 auto;min-width:34px;height:28px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;background:var(--line);padding:0 8px}
.aud-t{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:13.5px}
.aud-w{font-size:11px;color:var(--muted)}
.aud-ok{border-left-color:var(--success,#11703A)} .aud-ok .aud-n{background:var(--success-bg,#E8F6ED);color:var(--success,#11703A)}
.aud-warn{border-left-color:var(--warning,#B7791F)} .aud-warn .aud-n{background:var(--warning-bg,#FBEFD6);color:var(--text)}
.aud-bad{border-left-color:var(--danger,#B42318)} .aud-bad .aud-n{background:var(--danger-bg,#F9E3E3);color:var(--danger,#B42318)}
.aud-it{display:flex;flex-direction:column;padding:7px 0;border-top:1px dashed var(--line);text-decoration:none;color:var(--text)}
/* ── ของเสีย/ยืม-คืน (3 ต.ค. 69) ── */
.mv-found{max-height:28vh;overflow:auto}
.mv-it{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-bottom:1px dashed var(--line)}
.mv-it>span{display:flex;flex-direction:column;min-width:0}
.mv-ret{display:flex;gap:6px}
.mv-ret label{display:flex;flex-direction:column;font-size:11px;color:var(--muted)}
.mv-ret input{width:72px;text-align:right}
/* ── หน้า "ซื้อของ" รวม PR/PO/รับของ (3 ต.ค. 69) ── */
/* 4 ต.ค. 69 — สลับแหล่ง ใบขอซื้อในแอป | Comanche (ไม่นับปนกัน) */
.pur-src{display:flex;gap:4px;padding:4px;margin:0 0 10px;background:var(--card,#fff);border:1px solid var(--line);border-radius:12px;max-width:520px}
.pur-src-b{flex:1;min-height:40px;border:0;border-radius:9px;background:transparent;color:var(--muted);font:inherit;font-weight:600;font-size:13.5px;cursor:pointer;padding:6px 10px}
.pur-src-b b{font-weight:700;margin-left:4px;opacity:.85}
.pur-src-b.on{background:var(--navy,#1e3a5f);color:#fff}
.pur-note{font-size:12.5px;color:var(--muted);margin:8px 2px 10px}
.pur-sec{margin-bottom:14px}
.pur-sec .panel-hd h3{display:flex;align-items:center;gap:6px}
.ix-step.pur-pr.on .ix-num{background:var(--c-pr)} .ix-step.pur-po.on .ix-num{background:var(--c-po)} .ix-step.pur-rec.on .ix-num{background:var(--c-rec)}
/* ── แถบแท็บของห้อง (rooms-ui.js · 3 ต.ค. 69) ── */
.rm-subs{display:flex;gap:4px;overflow-x:auto;margin:0 0 12px;padding:4px;border-radius:12px;background:var(--card);border:1px solid var(--line);scrollbar-width:none}
.rm-subs::-webkit-scrollbar{display:none}
.rm-sub{flex:0 0 auto;border:0;background:transparent;color:var(--muted);font:inherit;font-size:13.5px;font-weight:600;padding:8px 14px;border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.rm-sub.on{background:var(--primary,#0F2A4A);color:#fff}
.rm-sub:not(.on):hover{background:var(--line)}
.rm-n{font-size:11px;min-width:18px;height:18px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent,#F28C28);color:#fff;padding:0 5px}
@media(max-width:900px){.rm-sub{padding:9px 12px;font-size:13px}}
/* ── AI (3 ต.ค. 69) ── */
.per-ai{margin-top:8px;padding:9px 11px;border-radius:10px;background:var(--c-po-bg,#F1EAFE);border:1px solid color-mix(in srgb,var(--c-po,#6D28D9) 30%,transparent);font-size:13px;display:flex;flex-direction:column;gap:4px}
.per-ai.bad{background:var(--warning-bg,#FBEFD6);border-color:transparent}
.ai-card{border:1px solid color-mix(in srgb,var(--c-po,#6D28D9) 35%,var(--line));background:var(--c-po-bg,#F1EAFE);border-radius:12px;padding:12px;margin:10px 0}
.ai-card ul{margin:6px 0 0 18px;padding:0} .ai-card li{margin:3px 0}
/* ── หน้ายืม-คืน ใหม่ (3 ต.ค. 69 · แบบ borrow-return "รับเรื่องยืม") ── */
.mvf{margin:12px 0}
.mvf-sec{margin-bottom:14px}
.mvf-lb{font-weight:700;font-size:13.5px;margin-bottom:6px}
.mvf-segs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mvf-seg{border:2px solid var(--line);background:var(--card);border-radius:12px;padding:10px 12px;text-align:left;cursor:pointer;font:inherit;display:flex;flex-direction:column;gap:2px;color:var(--text)}
.mvf-seg span{font-size:12px;color:var(--muted)}
.mvf-seg.on{border-color:var(--primary,#0F2A4A);background:var(--primary-light,#DCE8F5)}
.mvf-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.mvf-grid label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted)}
.mvf-grid .in,.mvf-sec>select.in,#mvfQ{width:100%}
.mvf-found{max-height:240px;overflow:auto;margin:6px 0}
.mvf-line{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line)}
.mvf-line>div:first-child{display:flex;flex-direction:column;min-width:0}
.mvf-qty{display:flex;align-items:center;gap:5px}
.mvf-qty input{width:70px;text-align:right}
.mvf-quick{display:flex;gap:6px;flex-wrap:wrap}
.mvf-give{display:flex;gap:8px;align-items:flex-start;font-size:13px;margin:6px 0 10px;padding:9px 11px;border-radius:10px;background:var(--c-rec-bg,#E7F6EF)}
.mv-who{font-size:14px;margin:2px 0}
.mv-due{font-size:12px;font-weight:700;padding:1px 8px;border-radius:6px;background:var(--line);margin-left:4px;white-space:nowrap}
.mv-due.bad{background:var(--danger-bg,#F9E3E3);color:var(--danger,#B42318)} .mv-due.warn{background:var(--warning-bg,#FBEFD6)}
.mv-card.mv-over{border-left:4px solid var(--danger,#B42318)} .mv-card.mv-lent{border-left:4px solid var(--c-po,#6D28D9)} .mv-card.mv-requested{border-left:4px solid var(--warning,#B7791F)} .mv-card.mv-returned{border-left:4px solid var(--success,#11703A)}
.ix-step.mv-over.has .ix-num{background:var(--danger,#B42318);color:#fff}
@media(max-width:600px){.mvf-segs,.mvf-grid{grid-template-columns:1fr}}
.sp-reasons{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.mv-card.sp-pending{border-left:4px solid var(--warning,#B7791F)} .mv-card.sp-done{border-left:4px solid var(--success,#11703A)} .mv-card.sp-rejected{border-left:4px solid var(--muted)}
/* ══ 3 ต.ค. 69 — หน้าปิดงวด: กล่องขั้นกดได้ + แถบ "ขั้นถัดไป" (Boss "ขัดเกลาให้ดูเป็นขั้นตอน") ══ */
button.per-step{font:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none}
button.per-step:hover{border-color:var(--primary)}
button.per-step:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.per-step.sel{box-shadow:inset 0 -3px 0 var(--primary)}
.per-next{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-2px 0 14px;padding:10px 14px;border-radius:12px;
background:var(--card);border:1px solid var(--line);border-left:4px solid #E0741F}
.per-next.done{border-left-color:var(--success)}
.per-next-lb{font-size:11.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#B45309;background:#FFF1E0;border-radius:6px;padding:2px 9px}
.per-next.done .per-next-lb{color:var(--success);background:var(--success-bg)}
html.dk .per-next-lb{background:#3a2a14}
.per-next b{font-size:14px}
.per-next-tx{color:var(--muted);font-size:13px;flex:1 1 200px;min-width:0}
.per-next .btn{margin-left:auto}
.per-back{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.per-back b{font-size:15px}
@media (max-width:640px){
.per-steps{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
.per-step{flex:0 0 46%;scroll-snap-align:start}
.per-next .btn{width:100%;margin-left:0}
}
/* ══ 3 ต.ค. 69 — หน้าเบิก: ขั้นทำใบ ① เลือกของ → ② จำนวน+ปลายทาง → ③ ส่ง ══ */
.l1-mk{display:flex;align-items:center;gap:6px;margin:0 0 12px;padding:10px 12px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.l1-mk-s{display:flex;align-items:center;gap:8px;flex:1 1 0;min-width:0;padding:4px 6px;border-radius:10px;border:0;background:transparent;font:inherit;text-align:left;color:var(--muted)}
button.l1-mk-s{cursor:pointer}
button.l1-mk-s:hover{background:color-mix(in srgb,var(--primary) 8%,transparent)}
.l1-mk-n{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;border:2px solid var(--line-strong,var(--line));color:var(--muted)}
.l1-mk-t{display:flex;flex-direction:column;min-width:0}
.l1-mk-t b{font-size:13.5px;color:inherit}
.l1-mk-t span{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.l1-mk-s.done{color:var(--success)}
.l1-mk-s.done .l1-mk-n{background:var(--success);border-color:var(--success);color:#fff}
.l1-mk-s.cur{color:var(--ink)}
.l1-mk-s.cur .l1-mk-n{border-color:#E0741F;background:#FFF1E0;color:#B45309}
html.dk .l1-mk-s.cur .l1-mk-n{background:#3a2a14}
.l1-mk-s.cur .l1-mk-t span{color:#B45309}
.l1-mk-ln{flex:0 0 18px;height:2px;background:var(--line)}
@media (max-width:640px){
.l1-mk{padding:8px;gap:2px}
.l1-mk-s{flex-direction:column;align-items:center;text-align:center;gap:4px;padding:2px}
.l1-mk-t span{white-space:normal;font-size:11px}
.l1-mk-t b{font-size:12.5px}
.l1-mk-ln{flex:0 0 10px;margin-top:-30px}
}
.per-next .btn{width:auto;min-height:40px;padding:8px 16px}