/* ═══ สต๊อกโอชิเน่ ขอนแก่น — สไตล์ทั้งระบบ ═══
   สีหลักมาจากโลโก้ร้าน · จอสว่างอย่างเดียว ไม่สลับโหมดมืด
   มือถือเป็นหลัก · คอมพิวเตอร์ขยายเป็นหลายคอลัมน์ตอนมาตรวจงาน */
:root{
  color-scheme:light;
  --navy:#203880;          /* น้ำเงินจากโลโก้ */
  --navy-d:#16295e;
  --navy-m:#3a56a8;
  --navy-s:#eef1fa;
  --navy-l:#c3cdea;

  --paper:#f4f6fa;
  --card:#ffffff;
  --card2:#f8fafd;
  --ink:#161b26;
  --ink2:#3c4658;
  --mut:#6b7488;
  --line:#dfe4ee;
  --line2:#eef1f6;

  --ok:#146c4a;--ok-s:#e6f4ec;--ok-l:#a9d6bf;
  --hot:#b8402a;--hot-s:#fcece8;--hot-l:#eebcae;
  --warn:#8a5d0d;--warn-s:#fbf2dc;--warn-l:#e8d29d;

  --sh:0 1px 2px rgba(22,27,38,.05),0 6px 16px -10px rgba(22,27,38,.22);
  --sh-l:0 2px 6px rgba(22,27,38,.06),0 14px 34px -18px rgba(22,27,38,.3);
  --r:13px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);
 font-family:"Sarabun","Noto Sans Thai",system-ui,sans-serif;font-size:16px;line-height:1.5;
 -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
.num,.m{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* ── ล็อกอิน ── */
.login{min-height:100dvh;display:grid;place-items:center;padding:22px;
 background:linear-gradient(168deg,#f4f6fa 0%,#e6ebf7 100%)}
.lbox{width:100%;max-width:370px;background:var(--card);border-radius:20px;padding:26px 24px 24px;
 box-shadow:var(--sh-l);border:1px solid var(--line);text-align:left}
.lmark{display:block;width:82px;height:82px;margin:0 auto 14px}
.lbox h1{margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em;text-align:center;color:var(--navy)}
.lsub{margin:3px 0 16px;color:var(--mut);font-size:13.5px;text-align:center}
.fl{display:block;font-size:12.5px;color:var(--mut);font-weight:600;margin:12px 0 5px}
.fld{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:10px;
 background:var(--card2);font-size:16px;outline:none}
.fld:focus{border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-s)}
.fld.num{font-family:"IBM Plex Mono",monospace;letter-spacing:.2em;text-align:center;font-size:19px}
select.fld{appearance:none;
 background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);
 background-position:calc(100% - 19px) 52%,calc(100% - 14px) 52%;
 background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:36px}
.lerr{margin-top:12px;background:var(--hot-s);border:1px solid var(--hot-l);color:var(--hot);
 border-radius:9px;padding:9px 12px;font-size:13.5px;font-weight:600}
.lnote{margin:14px 0 0;font-size:11.5px;color:var(--mut);line-height:1.55;text-align:center}

/* ── หัวหน้าจอ ── */
.top{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.top-in{max-width:660px;margin:0 auto;padding:9px 14px;display:flex;align-items:center;gap:11px}
.mark{width:34px;height:34px;flex-shrink:0;border-radius:50%}
.top h1{margin:0;font-size:17px;font-weight:700;flex:1;min-width:0;letter-spacing:-.015em;
 color:var(--navy);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.top .sub{display:block;font-size:11.5px;font-weight:400;color:var(--mut);letter-spacing:0;
 overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bk{background:var(--navy-s);border:1px solid var(--navy-l);color:var(--navy);width:34px;height:34px;
 border-radius:10px;cursor:pointer;font-size:17px;flex-shrink:0;line-height:1}
.hbtn{display:flex;gap:6px;flex-shrink:0}
.hbtn button{font-size:12px;font-weight:600;border-radius:9px;padding:7px 10px;cursor:pointer;
 white-space:nowrap;border:1px solid var(--line);background:var(--card2);color:var(--ink2);
 overflow:hidden;text-overflow:ellipsis;max-width:150px}
.hbtn button.out{border-color:var(--hot-l);background:var(--hot-s);color:var(--hot)}
.app{max-width:660px;margin:0 auto;padding-inline:14px;padding-block:14px 92px}

/* ── แถบแท็บล่าง (มือถือ) ── */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--card);
 border-top:1px solid var(--line);display:flex;padding:5px 6px calc(5px + env(safe-area-inset-bottom));
 box-shadow:0 -2px 14px -8px rgba(22,27,38,.3)}
.tabs button{flex:1;background:none;border:0;cursor:pointer;padding:7px 3px 6px;border-radius:11px;
 font-size:11px;font-weight:600;color:var(--mut);display:flex;flex-direction:column;
 align-items:center;gap:3px;min-width:0}
.tabs button i{font-style:normal;font-size:18px;line-height:1}
.tabs button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.tabs button[aria-selected="true"]{color:var(--navy);background:var(--navy-s)}

/* ── ชิ้นส่วนทั่วไป ── */
.sec{margin-bottom:16px}
.sec h2{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
 margin:0 0 9px;font-size:16px;font-weight:700}
.sec h2 span{font-size:12.5px;color:var(--mut);font-weight:400}
.pane{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;
 box-shadow:var(--sh)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
 overflow:hidden}
.muted{color:var(--mut);font-size:13px}
.empty{text-align:center;color:var(--mut);font-size:14px;padding:34px 14px}
.btn{display:block;width:100%;padding:13px;border-radius:11px;border:1px solid var(--line);
 background:var(--card);font-size:15.5px;font-weight:700;cursor:pointer;margin-top:10px;color:var(--ink)}
.btn.g{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.a{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.d{background:var(--hot);border-color:var(--hot);color:#fff}
.btn.o{background:var(--card);color:var(--navy);border-color:var(--navy-l)}
.btn.sm{font-size:13.5px;padding:9px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.row2 .btn{margin-top:0}
.srch{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:11px;
 background:var(--card);font-size:16px;outline:none}
.srch:focus{border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-s)}
.chip{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:999px;
 vertical-align:2px}
.chip.w{background:var(--warn-s);color:var(--warn);border:1px solid var(--warn-l)}
.chip.o{background:var(--ok-s);color:var(--ok);border:1px solid var(--ok-l)}
.chip.d{background:var(--hot-s);color:var(--hot);border:1px solid var(--hot-l)}
.chip.a{background:var(--navy-s);color:var(--navy);border:1px solid var(--navy-l)}
.note{border-radius:10px;padding:10px 12px;font-size:13px;margin:9px 0;line-height:1.5}
.note.w{background:var(--warn-s);border:1px solid var(--warn-l);color:var(--warn)}
.note.e{background:var(--hot-s);border:1px solid var(--hot-l);color:var(--hot)}
.note.i{background:var(--navy-s);border:1px solid var(--navy-l);color:var(--navy)}
.note.o{background:var(--ok-s);border:1px solid var(--ok-l);color:var(--ok)}
.sumrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;
 border-bottom:1px dashed var(--line2);font-size:14px}
.sumrow:last-child{border-bottom:0}
.sumrow b{font-family:"IBM Plex Mono",monospace;font-size:15px}
.ltag{font-size:11px;color:var(--mut);letter-spacing:.08em;text-transform:uppercase;
 font-weight:700;margin:14px 0 7px}

/* ── จุดนับ ── */
.grp{border:1px solid var(--line);border-radius:var(--r);padding:13px;margin-bottom:14px;background:var(--card2)}
.grp.c{border-left:4px solid var(--navy)}
.grp.d{border-left:4px solid var(--hot)}
.ghd b{display:block;font-size:17px;letter-spacing:-.01em}
.grp.c .ghd b{color:var(--navy)}
.grp.d .ghd b{color:var(--hot)}
.ghd span{display:block;font-size:12.5px;color:var(--mut);margin:2px 0 10px}
.rnd{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:7px}
.rnd button{flex:1 1 auto;font-size:13px;font-weight:600;cursor:pointer;padding:7px 10px;
 border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink2);white-space:nowrap}
.rnd button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.dtr{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);
 border-radius:var(--r);padding:8px 11px;margin-bottom:7px}
.dtr label{font-size:13px;color:var(--mut);flex-shrink:0}
.dtr input{flex:1;min-width:0;font-size:14.5px;font-family:"IBM Plex Mono",monospace;
 border:0;background:transparent;text-align:right;padding:2px 0;outline:none}
.gft{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
 border-top:1px solid var(--line);margin-top:10px;padding-top:9px;font-size:13.5px}
.gft span{color:var(--mut)}
.gft b{font-family:"IBM Plex Mono",monospace;font-size:15px}
.loc{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--card);
 border:1px solid var(--line);border-radius:var(--r);padding:12px 13px;margin-bottom:8px;
 cursor:pointer;box-shadow:var(--sh)}
.loc .dot{width:12px;height:12px;border-radius:4px;flex-shrink:0}
.loc .mid{flex:1;min-width:0}
.loc .n{font-weight:600;font-size:15px;display:block}
.loc .bar{display:block;height:6px;border-radius:3px;background:var(--line2);overflow:hidden;margin-top:6px}
.loc .bar i{display:block;height:100%;background:var(--navy);border-radius:3px}
.loc.full{border-color:var(--ok-l);background:var(--ok-s)}
.loc.full .bar i{background:var(--ok)}
.loc .p{font-size:12px;color:var(--mut);white-space:nowrap;text-align:right;flex-shrink:0}
.loc.full .p{color:var(--ok);font-weight:700}

/* ── แถวสินค้า ── */
.itm{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--card);
 border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;margin-bottom:7px;
 cursor:pointer;box-shadow:var(--sh)}
.itm .mid{flex:1;min-width:0}
.itm .cd{display:block;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--navy);font-weight:600}
.itm .nm{display:block;font-size:14.5px;font-weight:600;line-height:1.35}
.itm .mt{display:block;font-size:11.5px;color:var(--mut);margin-top:2px}
.itm .q{text-align:right;flex-shrink:0}
.itm .q b{display:block;font-family:"IBM Plex Mono",monospace;font-size:17px}
.itm .q i{display:block;font-style:normal;font-size:10.5px;color:var(--mut)}
.itm.done{border-color:var(--ok-l);background:var(--ok-s)}
.mgb{font-size:12px;font-weight:700;padding:7px 11px;border-radius:8px;cursor:pointer;
 border:1px solid var(--navy-l);background:var(--navy-s);color:var(--navy);white-space:nowrap}
.mgb.del{border-color:var(--hot-l);background:var(--hot-s);color:var(--hot)}
.itm.star{border-left:3px solid var(--warn)}

/* ── กรอกจำนวน ── */
.pv{background:var(--navy-s);border:1px solid var(--navy-l);border-radius:11px;padding:11px 12px;
 font-size:13.5px;margin-bottom:11px;line-height:1.6}
.disp{background:var(--navy-d);color:#fff;border-radius:13px;padding:15px;text-align:right;margin-bottom:11px}
.disp .v{font-family:"IBM Plex Mono",monospace;font-size:34px;font-weight:600;line-height:1.1}
.disp .u{font-size:12px;opacity:.82;margin-top:3px}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.pad button{padding:15px 0;border-radius:11px;border:1px solid var(--line);background:var(--card);
 font-family:"IBM Plex Mono",monospace;font-size:20px;font-weight:600;cursor:pointer}
.pad button:active{background:var(--navy-s)}
.mrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line2)}
.mrow .n{flex:1;min-width:0;font-size:14px;font-weight:600}
.mrow input{width:96px;flex-shrink:0;text-align:right;padding:9px 11px;border:1px solid var(--line);
 border-radius:9px;background:var(--card);font-family:"IBM Plex Mono",monospace;font-size:16px;outline:none}
.mrow input.has{border-color:var(--ok);background:var(--ok-s)}
.mtot{display:flex;justify-content:space-between;align-items:baseline;padding-top:11px;margin-top:6px;
 border-top:2px solid var(--ink);font-weight:700;font-size:15px}
.mtot b{font-family:"IBM Plex Mono",monospace;font-size:19px}
.mtot.sm2{border-top:1px dashed var(--line);font-size:13.5px;font-weight:600;color:var(--mut);
 padding-top:8px;margin-top:4px}
.mtot.sm2 b{font-size:16px;color:var(--ink)}
.edb{display:block;width:100%;margin-top:10px;font-size:13.5px;font-weight:700;cursor:pointer;
 padding:9px;border-radius:9px;border:1px solid var(--navy);background:var(--navy);color:#fff}

/* ── ใบเบิก ── */
.rq{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 13px;
 margin-bottom:8px;box-shadow:var(--sh);cursor:pointer;display:block;width:100%;text-align:left}
.rq .hd{display:flex;align-items:baseline;justify-content:space-between;gap:9px;flex-wrap:wrap}
.rq .no{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;color:var(--navy)}
.rq .mt{font-size:12px;color:var(--mut);margin-top:3px}
.rq.pending{border-left:3px solid var(--warn)}
.rq.approved{border-left:3px solid var(--navy)}
.rq.issued{border-left:3px solid var(--ok)}
.rq.rejected,.rq.cancelled{border-left:3px solid var(--hot);opacity:.75}
.lrow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line2)}
.lrow:last-child{border-bottom:0}
.lrow .mid{flex:1;min-width:0}
.lrow .nm{display:block;font-size:14px;font-weight:600;line-height:1.35}
.lrow .mt{display:block;font-size:11.5px;color:var(--mut);margin-top:2px}
.lrow .qt{font-family:"IBM Plex Mono",monospace;font-size:16px;font-weight:600;flex-shrink:0;text-align:right}
.lrow input{width:84px;flex-shrink:0;text-align:right;padding:8px 10px;border:1px solid var(--line);
 border-radius:9px;background:var(--card);font-family:"IBM Plex Mono",monospace;font-size:15px;outline:none}
.cart{position:sticky;bottom:80px;z-index:20;margin-top:12px}

/* ── ตาราง ── */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:12.5px;min-width:460px}
th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line2);white-space:nowrap}
thead th{background:var(--card2);font-weight:700;font-size:11px;color:var(--ink2);position:sticky;top:0}
td.n,th.n{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:0}
tr.warn td{background:var(--warn-s)}
tr.tot td{border-top:2px solid var(--ink);font-weight:700;background:var(--card2)}

/* ── ยอดแยกสองฝั่ง ── */
.two{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:9px}
.two .bx{border:1px solid var(--line);border-radius:var(--r);padding:12px;background:var(--card);
 box-shadow:var(--sh)}
.two .bx.c{border-top:3px solid var(--navy)}
.two .bx.d{border-top:3px solid var(--hot)}
.two .bx h4{margin:0 0 2px;font-size:13px;font-weight:700}
.two .bx.c h4{color:var(--navy)} .two .bx.d h4{color:var(--hot)}
.two .bx .sub{font-size:11.5px;color:var(--mut);display:block;margin-bottom:7px}
.two .bx .big{font-family:"IBM Plex Mono",monospace;font-size:22px;font-weight:600;line-height:1.1;
 letter-spacing:-.02em}
.two .bx .fin{font-size:11.5px;color:var(--mut);margin-top:4px}

/* ── QR ── */
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.qcell{background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 6px;text-align:center;
 color:#000;break-inside:avoid}
.qcell svg,.qcell canvas,.qcell img{width:100%;height:auto;display:block}
.qcell .qc{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;margin-top:4px}
.qcell .qn{font-size:9px;line-height:1.25;margin-top:1px;max-height:2.6em;overflow:hidden}

/* ── สแกน ── */
.scan{position:fixed;inset:0;z-index:80;background:#000;display:grid}
.scan video{width:100%;height:100%;object-fit:cover;grid-area:1/1}
.scan-ui{grid-area:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:16px;padding:22px;position:relative;z-index:2}
.scan-box{width:min(72vw,290px);aspect-ratio:1;position:relative}
.scan-box i{position:absolute;width:34px;height:34px;border:4px solid #fff;border-radius:4px}
.scan-box i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.scan-box i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.scan-box i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.scan-box i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.scan-msg{color:#fff;font-size:14.5px;font-weight:600;text-align:center;margin:0;
 background:rgba(0,0,0,.6);padding:8px 15px;border-radius:999px}
.scan .btn{max-width:280px}

/* ── modal / toast ── */
.mask{position:fixed;inset:0;background:rgba(16,20,30,.5);z-index:60;display:flex;
 align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(2px)}
.modal{background:var(--card);border-radius:17px;padding:20px;width:100%;max-width:410px;
 max-height:86vh;overflow:auto;box-shadow:var(--sh-l)}
.modal h3{margin:0 0 4px;font-size:17px}
.modal p{margin:0 0 6px;font-size:13.5px;color:var(--mut)}
.toast{position:fixed;left:50%;bottom:100px;transform:translateX(-50%);z-index:90;
 background:var(--ink);color:#fff;padding:11px 17px;border-radius:999px;font-size:13.5px;
 font-weight:600;max-width:88vw;text-align:center;box-shadow:var(--sh-l)}

/* ═══ คอมพิวเตอร์ — ตอนมาตรวจงาน ═══ */
@media (min-width:900px){
  body{font-size:15.5px}
  .top-in{max-width:1180px;padding:11px 26px}
  .top h1{font-size:19px}
  .mark{width:40px;height:40px}
  .app{max-width:1180px;padding-inline:26px;padding-block:20px 40px}
  /* แท็บย้ายขึ้นข้างบนเป็นแถวเดียว ไม่ต้องมีแถบล่าง */
  .tabs{position:static;border-top:0;border-bottom:1px solid var(--line);box-shadow:none;
   background:var(--card);padding:0;max-width:none;justify-content:center}
  .tabs button{flex:0 0 auto;flex-direction:row;gap:7px;font-size:14px;padding:12px 20px;
   border-radius:0;border-bottom:3px solid transparent}
  .tabs button i{font-size:16px}
  .tabs button[aria-selected="true"]{background:transparent;border-bottom-color:var(--navy)}
  /* จุดนับเรียงสองคอลัมน์ ไม่ให้เหลือที่ว่างเยอะบนจอกว้าง */
  .grp{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;align-content:start}
  .grp > .ghd,.grp > .rnd,.grp > .dtr,.grp > .ltag,.grp > .gft{grid-column:1/-1}
  .grp > .loc{margin-bottom:9px}
  .cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
  .two{gap:16px}
  .two .bx .big{font-size:30px}
  table{font-size:13.5px;min-width:0}
  th,td{padding:10px 13px}
  .cart{position:static}
  .modal{max-width:520px}
  .toast{bottom:32px}
  .qgrid{grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:10px}
  .pad button{padding:18px 0;font-size:22px}
}

/* ═══ พิมพ์ — มีหัวกระดาษโลโก้ทุกหน้า ═══ */
.phead{display:none}
@media print{
  @page{size:A4;margin:12mm 10mm 10mm}
  body{background:#fff;color:#000;font-size:11px}
  .top,.tabs,.btn,.noprint,.srch,.edb,.rnd,.dtr,.scan,.mask,.toast{display:none!important}
  .app{padding:0;max-width:none}
  .phead{display:flex!important;align-items:center;gap:12px;border-bottom:2px solid #203880;
   padding-bottom:8px;margin-bottom:12px}
  .phead img{width:46px;height:46px;flex-shrink:0}
  .phead .t{flex:1;min-width:0}
  .phead .t b{display:block;font-size:15px;color:#203880;letter-spacing:-.01em}
  .phead .t span{display:block;font-size:10.5px;color:#444;margin-top:1px}
  .phead .d{text-align:right;font-size:10px;color:#444;white-space:nowrap}
  /* ให้หัวกระดาษซ้ำทุกหน้าเวลาพิมพ์ยาว */
  thead{display:table-header-group}
  tr,.qcell,.pane,.card,.rq{break-inside:avoid}
  .card,.pane,.two .bx,.grp{box-shadow:none;border-color:#999}
  .qgrid{grid-template-columns:repeat(4,1fr);gap:4mm}
  .qcell{border:1px dashed #888}
  .psign{display:block!important;margin-top:16px;padding-top:10px;border-top:1px solid #999;
   font-size:10.5px;color:#333}
  .psign .row{display:flex;gap:30px;margin-top:22px}
  .psign .row div{flex:1;border-top:1px solid #555;padding-top:4px;text-align:center}
  a[href]:after{content:""}
}
.psign{display:none}