:root{
  --mint:#0ac2a8; --mint-dark:#08a791; --mint-soft:#eafffd; --mint-tint:#f7fefd; --mint-wash:#bdf3ea;
  --bg:#eefbfa; --line:#dff4f3; --line-soft:#f0fbfa; --ink:#124742; --ink-soft:#5b9e99; --ink-dim:#77ada9;
  --green:#1c7a4d; --red:#b03a3a; --amber:#b7791f;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff}
body{font-family:"Noto Sans Thai","Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;color:var(--ink)}
input,select,button,textarea{font-family:inherit;font-size:14px;color:var(--ink);box-sizing:border-box}
a{color:var(--mint);text-decoration:none}
a:hover{color:var(--mint-dark);text-decoration:underline}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}

.shell{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh}
aside.side{background:linear-gradient(180deg,var(--mint-wash) 0%,#ffffff 100%);border-right:1px solid #dbf4f3;padding:20px 14px;display:flex;flex-direction:column;gap:4px;
  position:sticky;top:0;min-height:100vh;max-height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:11px;padding:4px 8px 18px}
.brand i{width:38px;height:38px;border-radius:11px;background:linear-gradient(160deg,#38f5d5,#0ac2a8);display:flex;
  align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:17px;font-style:normal;flex:none}
.brand b{display:block;font-size:14.5px;letter-spacing:-.2px;line-height:1.25}
.brand span{font-size:11.5px;color:var(--ink-dim)}
.fontctl{flex:none;display:flex;gap:6px;padding:5px;
  background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:0 6px 18px rgba(16,64,102,.12)}
.fontctl button{padding:6px 10px;border:1px solid var(--line);background:#fff;border-radius:8px;
  font-weight:700;font-size:12.5px;color:#3c837d;cursor:pointer}
.fontctl button:first-child{font-size:11px}
.fontctl button:hover{background:#f1fdfc;border-color:#9eece1}
.side a.nav{display:flex;flex:none;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;font-size:13.5px;
  font-weight:500;color:#3c837d;text-decoration:none}
.side a.nav:hover{background:#f1fdfc;text-decoration:none}
.side a.nav.on{background:var(--mint);color:#fff}
.side a.nav em{font-family:"IBM Plex Mono",monospace;font-size:11px;width:18px;text-align:center;color:#8bcdc7;font-style:normal}
.side a.nav.on em{color:#cffbf6}
.side .nav-group{display:flex;flex-direction:column}
.side .chev{margin-left:auto;flex:none;font-size:9px;opacity:.55;padding:4px 6px;border-radius:6px;cursor:pointer;transition:transform .2s ease,opacity .15s,background .15s}
.side .chev:hover{opacity:1;background:rgba(255,255,255,.18)}
.side a.nav:not(.on) .chev:hover{background:#e4faf7}
.side .nav-group.open .chev{transform:rotate(180deg)}
.side .subnav{max-height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column;gap:2px;
  margin-left:15px;padding-left:15px;border-left:2px solid #e6faf8;
  transition:max-height .25s ease,opacity .2s ease,margin .25s ease,padding .25s ease}
.side .nav-group.open .subnav{max-height:420px;opacity:1;margin:5px 0 8px 15px;padding:7px 0 7px 15px}
.side .subnav a{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:9px;font-size:12px;
  line-height:1.3;color:#5c9c97;text-decoration:none;font-weight:500}
.side .subnav a:hover{background:#f1fdfc;color:#2b7a72;text-decoration:none}
.side .subnav a.on{background:var(--mint-soft);color:#0aa891;font-weight:700}
.side .subnav a .n{flex:none;width:18px;height:18px;border-radius:50%;background:#eafbfa;color:#7bb6b1;
  font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
.side .subnav a.on .n{background:var(--mint);color:#fff}
/* --- กลุ่มมุมขวาบน (ข้อมูลผู้ใช้ + ปุ่มขยาย/ย่อตัวอักษร) อยู่ในโฟลว์ปกติ ไม่ใช้ fixed
   (เคยลอยทับปุ่ม/ข้อความของแต่ละหน้ามาแล้ว — อยู่ในโฟลว์ชนไม่ได้อีก แค่เลื่อนตามเนื้อหาแทน) --- */
.top-right-bar{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-bottom:14px}

.me{display:flex;flex-wrap:wrap;align-items:center;gap:5px 10px;padding:9px 14px;border-radius:11px;
  background:#fff;border:1px solid var(--line);box-shadow:0 6px 18px rgba(16,64,102,.12);
  font-size:12.5px;font-weight:500;white-space:nowrap}
.me .dim{font-size:11.5px;color:var(--ink-dim);font-weight:400}

/* --- แถบบนสำหรับจอแคบ + ปุ่มเปิดลิ้นชักเมนู (ซ่อนไว้บนจอกว้าง เปิดใน media query ด้านล่าง) --- */
.topbar{display:none;position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid #dbf4f3;
  align-items:center;gap:12px;padding:10px 14px}
.topbar .hamburger{border:1px solid var(--line);background:#fff;border-radius:9px;width:38px;height:38px;
  font-size:18px;line-height:1;cursor:pointer;flex:none;color:#2b7a72}
.topbar .hamburger:hover{background:#f4fffe}
.topbar .topbar-brand{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700}
.topbar .topbar-brand i{width:28px;height:28px;border-radius:8px;background:linear-gradient(160deg,#38f5d5,#0ac2a8);
  display:flex;align-items:center;justify-content:center;color:#fff;font-style:normal;font-size:13px;flex:none}

.drawer-backdrop{display:none;position:fixed;inset:0;background:rgba(18,48,71,.42);opacity:0;pointer-events:none;
  transition:opacity .2s ease;z-index:45}
.drawer-backdrop.open{opacity:1;pointer-events:auto}

main.page{padding:26px 30px 60px;max-width:1420px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.crumb{font-size:12px;color:var(--ink-dim);margin-bottom:5px}
h1{margin:0;font-size:25px;font-weight:700;letter-spacing:-.5px}
h2{margin:0;font-size:14px;font-weight:600}

.btn{padding:9px 15px;border:1px solid #cff1ee;background:#fff;border-radius:9px;font-size:13px;font-weight:500;
  color:#2b7a72;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{background:#f4fffe;text-decoration:none}
.btn.pri{border:none;background:var(--mint);color:#fff;font-weight:600}
.btn.pri:hover{background:var(--mint-dark);color:#fff}
.btn.ok{border:none;background:var(--green);color:#fff;font-weight:600}
.btn.ok:hover{background:#155f3c;color:#fff}
.btn.danger{border:none;background:var(--red);color:#fff;font-weight:600}
.btn.danger:hover{background:#943030;color:#fff}
.btn.sm{padding:7px 12px;font-size:12.5px}
.tools{display:flex;gap:9px;flex-wrap:wrap}

.card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.card .ch{padding:15px 18px;border-bottom:1px solid #edfaf9;display:flex;justify-content:space-between;
  align-items:center;gap:12px;flex-wrap:wrap}
.card .cb{padding:18px}
.grid{display:grid;gap:16px}
.k4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.k2{grid-template-columns:repeat(auto-fit,minmax(430px,1fr));align-items:start}
.f3{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:13px}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:16px;align-items:start}
/* ฟอร์มบันทึก + กล่องสรุปยอด 280px ด้านขวา (receipt_new / nonstock_new / issue_new) — minmax(0,…) ให้ตารางกว้างๆ เลื่อนในกล่องตัวเอง
   แทนที่จะดันกล่องสรุปยอดตกขอบจอ · จอแคบกลับเป็นคอลัมน์เดียว (ดู @media ด้านล่าง) */
.two.side-sum{grid-template-columns:minmax(0,1fr) 280px}

.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:17px 18px}
.kpi small{font-size:12.5px;color:var(--ink-dim);font-weight:500}
.kpi b{display:block;font-size:25px;font-weight:700;letter-spacing:-.8px;margin:7px 0 3px;color:#0e5e55;white-space:nowrap}
.kpi span{font-size:11.5px;color:#8bbfbb}

label.fld{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--ink-soft);font-weight:500;min-width:0}
label.fld input,label.fld select,label.fld textarea{min-width:0;width:100%;padding:9px 12px;border:1px solid #d3f0ee;
  border-radius:9px;background:var(--mint-tint)}
input[type=date],input[type=month]{max-width:100%}

.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;min-width:680px}
thead tr{background:var(--mint-tint)}
th{text-align:left;padding:10px 14px;font-size:11.5px;font-weight:600;color:#6ba7a2;white-space:nowrap}
td{padding:11px 14px;font-size:13.5px;border-top:1px solid var(--line-soft);vertical-align:middle}
td.r,th.r{text-align:right}
tbody tr:hover{background:#fafefe}
tfoot td{border-top:2px solid var(--line);background:var(--mint-tint);font-weight:700}
td input,td select{padding:6px 9px;border:1px solid #d3f0ee;border-radius:7px;font-size:12.5px}

.tag{padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:600;background:#f0f8f8;color:#4a8e88;
  display:inline-block;white-space:nowrap}
.tag.b{background:var(--mint-soft);color:#0aa891}
.tag.g{background:#eafaf1;color:var(--green)}
.tag.r{background:#fdeeee;color:var(--red)}
.tag.a{background:#fdf5e6;color:var(--amber)}
/* แถวรายการไม่ผ่านคลังในทะเบียนรับเข้าคลัง (receiving_register.php) */
tr.nonstock>td{background:#fff6d9}
tr.nonstock:hover>td{background:#ffefc2}
.neg{color:#c62828!important;font-weight:700}

.tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.tabs a{padding:9px 16px;border-radius:9px;font-size:13.5px;font-weight:600;background:#fff;border:1px solid var(--line);color:#3c837d}
.tabs a:hover{text-decoration:none;background:#f4fffe}
.tabs a.on{background:var(--mint);color:#fff;border-color:var(--mint)}

.filters{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-bottom:16px;
  display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.note{font-size:12.5px;color:var(--ink-soft);line-height:1.65;background:var(--mint-tint);border-radius:10px;padding:11px}
.alert{padding:12px 15px;border-radius:11px;font-size:13px;font-weight:500;margin-bottom:16px}
.alert.ok{background:#eefaf3;border:1px solid #cceadb;color:#146b42}
.alert.err{background:#fdf2f2;border:1px solid #f4d3d3;color:var(--red)}
.alert.warn{background:#fdf8ec;border:1px solid #f0e0bd;color:#8a5d12}
.empty{padding:30px;text-align:center;color:var(--ink-dim);font-size:13px}
.sum{display:flex;justify-content:space-between;font-size:13.5px;padding:7px 0}
.sum.tot{font-size:17px;font-weight:700;padding:12px 0;border-top:1px solid #e8f8f6;margin-top:6px}
.ac{position:relative}
.ac .list{position:absolute;top:46px;left:0;right:0;background:#fff;border:1px solid #cff1ee;border-radius:11px;
  box-shadow:0 14px 34px rgba(16,64,102,.13);overflow:hidden;z-index:9;max-height:280px;overflow-y:auto}
.ac .list div{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;cursor:pointer;border-bottom:1px solid #f2fbfa}
.ac .list div:hover,.ac .list div.active{background:#f4fffe}

.thd{position:relative;display:block;width:100%}
.thd .thd-txt{padding-right:30px}
.thd-txt.err{border-color:var(--red)!important;background:#fdf2f2!important}
.thd-ic{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:12.5px;opacity:.6;pointer-events:none}
.thd-cal{position:fixed;background:#fff;border:1px solid #cff1ee;border-radius:11px;
  box-shadow:0 14px 34px rgba(16,64,102,.13);z-index:60;padding:10px;width:236px}
.thd-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.thd-hd button{border:none;background:none;cursor:pointer;color:#3c837d;font-size:13px;padding:2px 7px;border-radius:6px}
.thd-hd button:hover{background:#f4fffe}
.thd-lbl{font-size:12.5px;font-weight:700;color:#0e5e55}
.thd-wd{display:grid;grid-template-columns:repeat(7,1fr);font-size:10.5px;color:#8bbfbb;text-align:center;margin-bottom:4px}
.thd-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.thd-grid button{border:none;background:none;padding:6px 0;font-size:12px;border-radius:7px;cursor:pointer;color:#1c3d3a}
.thd-grid button:empty{cursor:default}
.thd-grid button:hover{background:#f4fffe}
.thd-grid button.today{font-weight:700;color:#0aa891}
.thd-grid button.sel{background:var(--mint);color:#fff}
.thd-mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.thd-mgrid button{border:none;background:none;padding:9px 0;font-size:12.5px;border-radius:7px;cursor:pointer;color:#1c3d3a}
.thd-mgrid button:hover{background:#f4fffe}
.thd-mgrid button.today{font-weight:700;color:#0aa891}
.thd-mgrid button.sel{background:var(--mint);color:#fff}
.login{max-width:380px;margin:9vh auto;background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px}

.confirm-overlay{position:fixed;inset:0;background:rgba(18,48,71,.42);display:flex;align-items:center;justify-content:center;
  padding:16px;z-index:100;opacity:0;pointer-events:none;transition:opacity .18s ease;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.confirm-overlay.show{opacity:1;pointer-events:auto}
.confirm-box{position:relative;overflow:hidden;background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(16,64,102,.28);width:100%;max-width:380px;
  padding:28px 24px 20px;text-align:center;transform:scale(.92) translateY(8px);transition:transform .22s cubic-bezier(.2,.9,.3,1.25)}
.confirm-overlay.show .confirm-box{transform:scale(1) translateY(0)}
.confirm-box .ico{width:58px;height:58px;border-radius:50%;background:#fdf2f2;color:var(--red);display:flex;
  align-items:center;justify-content:center;font-size:26px;font-weight:700;margin:0 auto 14px;box-shadow:0 0 0 7px #fdf2f280}
.confirm-box .ico svg{width:30px;height:30px}
.confirm-box h3{font-size:16.5px;font-weight:700;color:var(--ink);margin:0 0 6px}
.confirm-box p{font-size:13.5px;color:var(--ink-soft);line-height:1.65;margin:0 0 22px;white-space:pre-line}
.confirm-box .row{display:flex;gap:9px}
.confirm-box .row .btn{flex:1;text-align:center;padding:11px 14px}
/* โทนสี: danger = ลบ/ยกเลิก (ค่าเริ่มต้น) · save = ยืนยันบันทึก · ok/warn/err = แจ้งผลหลังบันทึก */
.confirm-box.tone-save .ico,.confirm-box.tone-info .ico{background:var(--mint-soft);color:var(--mint-dark);box-shadow:0 0 0 7px #eafffd99}
.confirm-box.tone-ok .ico{background:#eafaf1;color:var(--green);box-shadow:0 0 0 7px #eafaf199}
.confirm-box.tone-warn .ico{background:#fdf5e6;color:var(--amber);box-shadow:0 0 0 7px #fdf5e699}
.confirm-box.tone-ok .ico svg path{stroke-dasharray:30;stroke-dashoffset:30;animation:ckDraw .45s .12s ease-out forwards}
.confirm-overlay.show .confirm-box.tone-ok .ico{animation:ckPop .4s ease-out}
@keyframes ckDraw{to{stroke-dashoffset:0}}
@keyframes ckPop{0%{transform:scale(.6)}70%{transform:scale(1.08)}100%{transform:scale(1)}}
.confirm-box .bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--green);transform-origin:left;display:none}
.confirm-box.tone-ok .bar.run{display:block;animation:ckBar linear forwards}
@keyframes ckBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.confirm-box,.confirm-box *{animation:none!important;transition:none!important}
  .confirm-box.tone-ok .ico svg path{stroke-dashoffset:0}}
/* --- จอแคบ (มือถือ + iPad แนวตั้งทุกรุ่น รวม 12.9" ที่กว้างสุด 1024px) --- */
@media (max-width:1024px){
  .shell{grid-template-columns:minmax(0,1fr)} /* ต้องมี minmax(0,..) ไม่งั้น track จะยืดตามเนื้อหากว้างสุด (เช่นตารางฟอร์ม) ดันทั้งหน้าล้น */
  .topbar{display:flex}
  .drawer-backdrop{display:block}
  aside.side{position:fixed;left:0;top:0;height:100vh;width:270px;z-index:50;
    box-shadow:0 14px 34px rgba(16,64,102,.22);transform:translateX(-100%);transition:transform .25s ease}
  aside.side.open{transform:translateX(0)}
  main.page{padding:14px 14px 40px}
  h1{font-size:20px}
  /* .k2/.two ตั้ง minmax ไว้ 420-430px (เผื่อจอเดสก์ท็อป) กว้างเกินจอมือถือทุกรุ่นแม้จะเหลือคอลัมน์เดียว
     บนจอแคบเลยบังคับคอลัมน์เดียวจริงๆ ไม่ยึดค่า minmax เดิม */
  .grid.k2, .two, .two.side-sum{grid-template-columns:minmax(0,1fr)}
}

@media print{aside.side,.tools,.tabs,.filters,.btn,.grid.k4,.topbar,.drawer-backdrop,.top-right-bar{display:none!important}.shell{grid-template-columns:1fr}main.page{padding:0}}

/* ช่องเลือกแบบพิมพ์ค้นหาได้ (assets/combo.js — select[data-combo]) */
.cbx{position:relative;display:block;width:100%}
.cbx .cbx-txt{padding-right:30px;cursor:pointer}
.cbx.open .cbx-txt{cursor:text;border-color:var(--mint)}
.cbx-txt.err{border-color:var(--red)!important;background:#fdf2f2!important}
.cbx .cbx-sel{position:absolute;left:0;bottom:0;width:100%;height:100%;opacity:0;pointer-events:none}
.cbx-ic{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-size:12px;color:#5b9e99;cursor:pointer;transition:transform .15s}
.cbx.open .cbx-ic{transform:translateY(-50%) rotate(180deg)}
.cbx-list{position:fixed;display:none;overflow-y:auto;background:#fff;border:1px solid #cff1ee;border-radius:11px;
  box-shadow:0 14px 34px rgba(16,64,102,.13);z-index:60;padding:5px}
.cbx-opt{padding:8px 11px;border-radius:7px;font-size:14px;color:var(--ink);cursor:pointer}
.cbx-opt.on{background:var(--mint-soft)}
.cbx-opt.cur{font-weight:600;color:var(--mint-dark)}
.cbx-empty{padding:10px 11px;font-size:13px;color:#8bbfbb}