/* ── SunnyBowl palette ─────────────────────────────────────────────
   น้ำเงินหม่น = ปุ่ม/ลิงก์/เมนู  (สีที่เห็นบ่อยสุด จึงเลือกสีที่สงบตา)
   ส้มอิฐ      = โลโก้ + ตัวเลขพระเอก เท่านั้น  ใช้น้อยเพื่อให้เด่นจริง
   น้ำตาล      = ตัวอักษรและเส้นโครงสร้าง
   มะกอก/เหลือง = สถานะรอดำเนินการ
   ─────────────────────────────────────────────────────────────────── */
:root{
  /* พื้นหลังปรับให้ขาวสะอาดขึ้นตามฟอร์มตัวอย่าง (7 ก.ย. 2569)
     แต่ยังอมอุ่นนิดๆ ไม่ใช่เทาอมฟ้า เพราะต้องอยู่กับส้มอิฐของแบรนด์ให้ได้
     สีเน้น (--brand / --accent) ไม่แตะ — ผู้ใช้เลือก "ผสม" ไม่ใช่เปลี่ยนทั้งชุด */
  --ground:#F5F4F1; --surface:#FFFFFF; --surface-2:#FAF9F6; --surface-3:#EFEDE8;
  --ink:#3D2620; --ink-2:#7A5A50; --ink-3:#9C8880;
  --line:#E6E2DB; --line-2:#D2CCC2;
  --accent:#35618F; --accent-sf:#E4EBF4;      /* น้ำเงินหม่น — ปุ่ม ลิงก์ เมนู */
  --brand:#D14C18;  --brand-sf:#FBE5D8;       /* ส้มอิฐ — โลโก้ ตัวเลขพระเอก */
  --warn:#5F5A16;   --warn-sf:#F7E9BE;
  --danger:#8F2A1C; --danger-sf:#F8DED6;
  --ok:#2F6B34;     --ok-sf:#E4EFDC;          /* เขียว — ใช้ที่เดียวคือสถานะ "ยังปลอดภัย" ของล็อต */
  --on-accent:#FFFFFF;
  --shadow:0 1px 2px rgba(74,42,34,.06), 0 8px 24px -12px rgba(74,42,34,.18);
  --shadow-lg:0 2px 4px rgba(74,42,34,.08), 0 24px 60px -20px rgba(74,42,34,.3);
  --sans:"Sukhumvit Set",-apple-system,BlinkMacSystemFont,"Noto Sans Thai","Helvetica Neue","Thonburi",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
  --r:10px; --r-s:7px;
}

*{box-sizing:border-box}
/* ต้องมาก่อนกฎ display อื่น ไม่งั้น label/div ที่ตั้ง display ไว้จะซ่อนไม่ลง */
[hidden]{display:none !important}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
     font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:600;text-wrap:balance;letter-spacing:-.01em}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.mono{font-family:var(--mono);font-size:.88em;letter-spacing:-.02em}
.num{font-variant-numeric:tabular-nums}

/* ── โครงหน้าจอ ── */
.app{display:grid;grid-template-columns:234px minmax(0,1fr);min-height:100vh}
.rail{background:var(--surface);border-right:1px solid var(--line);display:flex;
      flex-direction:column;gap:2px;padding:18px 12px;position:sticky;top:0;
      height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 18px}
.brand-mark{width:30px;height:30px;border-radius:8px;background:var(--brand);
            display:grid;place-items:center;flex:none;overflow:hidden}
.brand-mark img{width:100%;height:100%;object-fit:cover}
.brand-name{font-weight:650;font-size:15px;letter-spacing:-.02em;line-height:1.2}
.brand-sub{font-size:11px;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase}
.rail-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;
            color:var(--ink-3);padding:14px 10px 5px;font-weight:600}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;
          border-radius:var(--r-s);color:var(--ink-2);text-align:start;
          transition:background .13s ease,color .13s ease;font-size:13.4px}
.nav-item svg{flex:none;opacity:.85}
.nav-item:hover{background:var(--surface-3);color:var(--ink)}
.nav-item.is-on{background:var(--accent-sf);color:var(--accent);font-weight:600}
.nav-count{margin-inline-start:auto;font-size:11px;font-variant-numeric:tabular-nums;
           color:var(--danger);background:var(--danger-sf);padding:1px 6px;
           border-radius:20px;font-weight:600}
.nav-count.md{color:var(--warn);background:var(--warn-sf)}
.rail-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
           display:flex;align-items:center;gap:9px;padding-inline:8px}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--surface-3);
        color:var(--ink-2);display:grid;place-items:center;font-size:11px;
        font-weight:700;flex:none}
.rail-foot-txt b{display:block;font-size:12.5px;font-weight:600}
.rail-foot-txt span{font-size:11px;color:var(--ink-3)}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:14px;padding:14px 26px;
        border-bottom:1px solid var(--line);
        background:color-mix(in srgb,var(--ground) 82%,transparent);
        backdrop-filter:blur(10px);position:sticky;top:0;z-index:20}
.crumb{font-size:12px;color:var(--ink-3)}
.crumb b{color:var(--ink);font-weight:600;font-size:14px}
.search{margin-inline-start:auto;display:flex;align-items:center;gap:7px;
        background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);
        padding:6px 10px;color:var(--ink-3);font-size:13px;min-width:190px}
.search input{border:none;background:none;outline:none;width:100%;font-size:13px}
.net{font-size:11px;padding:3px 8px;border-radius:20px;background:var(--surface-3);
     color:var(--ink-2);white-space:nowrap}
.net.off{background:var(--warn-sf);color:var(--warn);font-weight:600}
.net.upd{border:none;background:var(--accent);color:#fff;font-weight:600;cursor:pointer}
.search.is-off{visibility:hidden}

/* ชวนเพิ่มลงหน้าจอหลัก (js/pwa.js) */
.a2hs{display:flex;align-items:center;gap:12px;margin:12px 14px 0;padding:11px 13px;
      background:var(--accent-sf);border-radius:var(--r);font-size:12.5px;line-height:1.55}
.a2hs[hidden]{display:none}
.a2hs .btn{flex:none}

/* แถบตะกร้าติดขอบล่าง — มีแค่บนมือถือ */
.cart-bar{display:none}

.screen{display:none;padding:24px 26px 64px}
.screen.is-on{display:block}
.page-head{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.page-head h2{font-size:21px;letter-spacing:-.025em}
.page-head p{margin:3px 0 0;font-size:13px;color:var(--ink-3)}
.head-actions{margin-inline-start:auto;display:flex;gap:8px}

/* ── ปุ่ม ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
     background:var(--accent);color:var(--on-accent);padding:8px 14px;
     border-radius:var(--r-s);font-weight:600;font-size:13px;transition:filter .13s ease}
.btn:hover{filter:brightness(1.12)}
.btn:disabled{opacity:.4}
.btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line-2)}
.btn-ghost:hover{background:var(--surface-3);filter:none}
.btn-ghost.is-on{background:var(--accent-sf);border-color:var(--accent);color:var(--accent)}
.btn-brand{background:var(--brand)}
.btn-block{width:100%}
.btn-danger{color:var(--danger)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
      box-shadow:var(--shadow)}
.card-pad{padding:16px 18px}
.card-head{display:flex;align-items:center;gap:10px;padding:13px 16px;
           border-bottom:1px solid var(--line)}
.card-head h3{font-size:13.5px}
.sect{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);
      font-weight:600;margin:18px 0 8px}
.sect:first-child{margin-top:0}

/* ── ฟอร์ม ── */
label{display:block;margin-bottom:13px}
label>span{display:block;font-size:11px;color:var(--ink-3);margin-bottom:4px}
input[type=text],input[type=number],input[type=date],input[type=email],
input[type=password],textarea,select{
  width:100%;padding:7px 10px;border:1px solid var(--line-2);border-radius:var(--r-s);
  background:var(--surface);font-size:13.2px}
/* ช่องหลายบรรทัด (ที่อยู่ · เงื่อนไขการจัดส่ง) — ยืดเองไม่ได้ กันเลย์เอาต์กระโดด */
textarea{font-family:inherit;line-height:1.5;resize:vertical;min-height:52px}
/* Safari ตั้งความสูงของช่องวันที่ตามเนื้อหา ทำให้เตี้ยกว่าช่องอื่นในแถวเดียวกัน */
input[type=date]{min-height:32px}
.row{display:flex;gap:10px}
.row>*{flex:1}
.empty{text-align:center;color:var(--ink-3);font-size:13px;padding:40px 20px;line-height:1.6}

/* ═══ ประตูล็อกอิน (js/cloud.js) ═══════════════════════════════ */
.ag-scrim{position:fixed;inset:0;z-index:200;background:var(--ground);
          display:flex;align-items:center;justify-content:center;padding:20px}
.ag-scrim[hidden]{display:none}
.ag-card{width:min(360px,100%);text-align:center}
.ag-mark{width:44px;height:44px;border-radius:12px;background:var(--brand);
         display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.ag-card h2{font-size:19px;letter-spacing:-.02em}
.ag-sub{margin:4px 0 20px;font-size:12.5px;color:var(--ink-3);line-height:1.6}
.ag-card form{text-align:start}
.ag-card label{margin-bottom:12px}
.ag-err{background:var(--danger-sf,#FBE7E7);color:var(--danger);border-radius:var(--r-s);
        padding:9px 12px;font-size:12.5px;margin-bottom:14px;text-align:start}
.ag-wait{color:var(--ink-3);font-size:13px;padding:30px 0}

/* ── ตัวกรอง ── */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);
      background:var(--surface);border-radius:var(--r-s);padding:5px 10px;
      font-size:12.5px;color:var(--ink-2)}
.chip:hover{background:var(--surface-3)}
.chip.is-on{background:var(--accent-sf);border-color:color-mix(in srgb,var(--accent) 30%,transparent);
            color:var(--accent);font-weight:600}
.chip.danger.is-on{background:var(--danger-sf);
                   border-color:color-mix(in srgb,var(--danger) 30%,transparent);color:var(--danger)}
.chip.warn.is-on{background:var(--warn-sf);
                 border-color:color-mix(in srgb,var(--warn) 30%,transparent);color:var(--warn)}
.chip b{font-variant-numeric:tabular-nums}

/* dropdown กรอง — หน้าตาเหมือน chip แต่ข้างในเป็น select จริง
   รองรับรายการที่ผู้ใช้เพิ่มเองไม่จำกัด โดยไม่ทำให้แถวตัวกรองล้น */
.fsel{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line-2);
      background:var(--surface);border-radius:var(--r-s);padding:4px 8px 4px 10px;
      font-size:12.5px;color:var(--ink-3);margin:0;cursor:pointer}
.fsel:hover{background:var(--surface-3)}
.fsel>span{margin:0;font-size:12.5px;color:inherit;white-space:nowrap}
.fsel>span::after{content:" ·"}
.fsel select{width:auto;border:none;background:none;padding:2px 0;font-size:12.5px;
             font-weight:600;color:var(--ink);cursor:pointer}
.fsel.is-on{background:var(--accent-sf);
            border-color:color-mix(in srgb,var(--accent) 30%,transparent);color:var(--accent)}
.fsel.is-on select{color:var(--accent)}

/* ── ตาราง ── */
.tw{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
    box-shadow:var(--shadow);overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:820px}
thead th{text-align:start;font-size:11px;text-transform:uppercase;letter-spacing:.07em;
         color:var(--ink-3);font-weight:600;padding:10px 14px;
         border-bottom:1px solid var(--line);background:var(--surface-2);
         white-space:nowrap;position:sticky;top:0}
tbody td{padding:11px 14px;border-bottom:1px solid var(--line);font-size:13.2px;
         vertical-align:middle;white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
tbody tr.clickable{cursor:pointer;transition:background .1s ease}
tbody tr.clickable:hover{background:var(--surface-2)}
.ta-e{text-align:end}
.money{font-variant-numeric:tabular-nums;font-weight:550}
.cust{font-weight:550}
.sub{color:var(--ink-3);font-size:12px}
.tfoot-note{display:flex;align-items:center;gap:14px;padding:11px 16px;
            font-size:12.5px;color:var(--ink-3);border-top:1px solid var(--line);
            background:var(--surface-2);flex-wrap:wrap}
.tfoot-note b{color:var(--ink);font-variant-numeric:tabular-nums}

.tag{display:inline-block;font-size:11px;font-weight:600;padding:1.5px 7px;
     border-radius:5px;background:var(--surface-3);color:var(--ink-2)}
.tag.credit{background:var(--accent-sf);color:var(--accent)}
.tag.lot{background:var(--ok-sf);color:var(--ok)}

/* ช่องติ๊กเปิด/ปิด — label ปกติของแอปเป็น block ซ้อนกัน ตัวนี้ต้องเป็นแถวเดียวกัน */
.chk{display:flex;align-items:flex-start;gap:9px;margin-bottom:12px;cursor:pointer}
.chk input{width:16px;height:16px;flex:none;margin:2px 0 0;accent-color:var(--accent)}
.chk>span{display:block;margin:0;font-size:13.2px;color:var(--ink)}
.chk b{font-weight:600}
.chk small{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px;line-height:1.45}

.wh-num{font-variant-numeric:tabular-nums}
.wh-num.low,.low{color:var(--danger);font-weight:650}

/* กระจายตามคลัง — รองรับคลังไม่จำกัด ตารางไม่ต้องแก้โครงสร้าง */
.whs{display:flex;gap:5px;flex-wrap:wrap}
.wh-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;
         background:var(--surface-3);color:var(--ink-2);border-radius:5px;
         padding:2px 7px;white-space:nowrap}
.wh-chip b{font-variant-numeric:tabular-nums;font-weight:650;color:var(--ink)}
.wh-chip.neg{background:var(--danger-sf);color:var(--danger)}
.wh-chip.neg b{color:var(--danger)}
.wh-chip.empty{color:var(--ink-3);font-style:italic;background:none}

.note-bar{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-2);
          background:var(--accent-sf);
          border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);
          border-radius:var(--r);padding:10px 13px;margin-bottom:14px}
.note-bar svg{color:var(--accent);flex:none}
.note-bar b{color:var(--ink)}
.callout{display:flex;gap:10px;background:var(--warn-sf);
         border:1px solid color-mix(in srgb,var(--warn) 22%,transparent);
         border-radius:var(--r);padding:11px 13px;font-size:12.5px;line-height:1.5;
         margin-bottom:14px}
.callout b{color:var(--warn)}

/* ── KPI ── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
      gap:12px;margin-bottom:16px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
     padding:14px 15px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:3px}
.kpi-label{font-size:11.5px;color:var(--ink-3)}
.kpi-val{font-size:25px;font-weight:650;letter-spacing:-.035em;
         font-variant-numeric:tabular-nums;line-height:1.15}
.kpi-val.brand{color:var(--brand)}
.kpi-val.bad{color:var(--danger)}
.kpi-meta{font-size:11.5px;color:var(--ink-3)}

/* ── รายการแบบแถว (ขายดี / บิลล่าสุด) ── */
.item{display:flex;align-items:center;gap:12px;padding:11px 16px;
      border-bottom:1px solid var(--line);width:100%;text-align:start}
.item:last-child{border-bottom:none}
.item .g{flex:1;min-width:0}
.item .g b{display:block;font-size:13.2px;font-weight:600}
.item .g span{font-size:12px;color:var(--ink-3)}
.item .r{text-align:end;font-variant-numeric:tabular-nums;flex:none}
.item .r b{display:block;font-weight:650;font-size:13.2px}
.item .r span{font-size:11.5px;color:var(--ink-3)}
button.item{transition:background .1s ease}
button.item:hover{background:var(--surface-2)}

/* ── POS ── */
.pos{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
      padding:12px 13px;text-align:start;min-height:96px;
      display:flex;flex-direction:column;justify-content:space-between;
      box-shadow:var(--shadow);transition:border-color .13s ease,background .13s ease}
.tile:hover{border-color:var(--accent);background:var(--accent-sf)}
.tile b{font-size:13px;font-weight:600;line-height:1.35}
.tile .p{font-size:16px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.tile .st{font-size:11px;color:var(--ink-3)}
.tile .st.low{color:var(--danger);font-weight:700}

.cart{position:sticky;top:82px}
.citem{display:flex;align-items:center;gap:10px;padding:9px 0;
       border-bottom:1px dashed var(--line)}
.citem:last-of-type{border-bottom:none}
.citem .n{flex:1;min-width:0;font-size:13px}
.citem .n small{display:block;color:var(--ink-3);font-size:11.5px}
.step{display:flex;align-items:center;gap:8px}
.step button{width:26px;height:26px;border-radius:6px;background:var(--surface-3);
             font-size:15px;font-weight:700;line-height:1;display:grid;place-items:center;
             color:var(--ink-2)}
.step button:hover{background:var(--line-2)}
.step b{min-width:20px;text-align:center;font-variant-numeric:tabular-nums}
.citem .amt{width:74px;text-align:end;font-weight:650;
            font-variant-numeric:tabular-nums;font-size:13px}
.total{display:flex;align-items:baseline;gap:10px;margin:12px 0}
.total .l{font-size:12.5px;color:var(--ink-3)}
.total .v{margin-inline-start:auto;font-size:26px;font-weight:750;
          letter-spacing:-.03em;font-variant-numeric:tabular-nums}

/* ── แผงด้านขวา ── */
/* ═══ ลำดับชั้นการซ้อน — แก้ให้ถูกเมื่อ 19 ส.ค. 2569 ═══
   กล่องใหญ่ (mscrim/modal) 60 · แผงขวา (scrim/panel) 70-75 · เมนูลัด 90 · toast 95

   แผงขวา "เปิดซ้อนบนกล่องใหญ่ได้" ตามที่ออกแบบไว้ (Esc ปิดแผงก่อน)
   แต่เดิมตั้ง z-index ไว้ 40/50 ซึ่งต่ำกว่าฉากหลังของกล่องใหญ่ (60)
   → แผงโผล่มาให้เห็นแต่ **คลิกไม่โดน** เพราะฉากหลังบังอยู่
   เจอตอนกด "+ เพิ่มผู้ขายใหม่" จากในใบเอกสาร แล้วกดบันทึกไม่ได้

   บทเรียน: ตอนทดสอบใช้ el.click() ผ่าน JS ซึ่งข้ามการเช็คว่าคลิกโดนจริงไหม
   บั๊กแบบนี้จับได้ด้วยการคลิกจริงเท่านั้น                                    */
.scrim{position:fixed;inset:0;background:rgba(74,42,34,.34);opacity:0;
       pointer-events:none;transition:opacity .22s ease;z-index:70;backdrop-filter:blur(1.5px)}
.scrim.is-on{opacity:1;pointer-events:auto}
.panel{position:fixed;inset-block:0;inset-inline-end:0;width:min(440px,100%);
       background:var(--surface);border-inline-start:1px solid var(--line);
       box-shadow:var(--shadow-lg);transform:translateX(101%);
       transition:transform .26s cubic-bezier(.32,.72,0,1);z-index:75;
       display:flex;flex-direction:column}
.panel.is-on{transform:translateX(0)}
@media(prefers-reduced-motion:reduce){.panel,.scrim{transition:none}}
.panel-head{padding:16px 18px 13px;border-bottom:1px solid var(--line);
            display:flex;align-items:flex-start;gap:10px}
.panel-head h3{font-size:16px;letter-spacing:-.02em}
.panel-body{overflow-y:auto;padding:4px 0 24px;flex:1}
.p-sec{padding:14px 18px;border-bottom:1px solid var(--line)}
.p-sec:last-child{border-bottom:none}
.p-sec-t{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;
         color:var(--ink-3);font-weight:600;margin-bottom:9px}
.panel-foot{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;
            flex-wrap:wrap;background:var(--surface-2)}
.panel-foot .btn{flex:1;justify-content:center}
.icon-btn{width:32px;height:32px;display:grid;place-items:center;
          border-radius:var(--r-s);border:1px solid var(--line);
          background:var(--surface);color:var(--ink-2);transition:background .13s ease}
.icon-btn:hover{background:var(--surface-3)}

.kv{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:13px;margin:0}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0;font-weight:550;font-variant-numeric:tabular-nums;text-align:end}
.li{display:grid;grid-template-columns:1fr auto;gap:1px 12px;padding:8px 0;
    border-bottom:1px dashed var(--line);font-size:13px}
.li:last-child{border-bottom:none}
.li b{font-weight:550}
.li .amt{font-variant-numeric:tabular-nums;font-weight:550}

.stockbox{display:flex;align-items:center;gap:12px;background:var(--surface-2);
          border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.stockbox .l{font-size:11.5px;color:var(--ink-3)}
.stockbox .v{font-size:21px;font-weight:700;letter-spacing:-.025em;
             font-variant-numeric:tabular-nums;margin-top:1px}
.stockbox .v.low{color:var(--danger)}
.stockbox .btn{margin-inline-start:auto;flex:none}

/* ── ช่องเลือกสินค้าแบบพิมพ์ค้นได้ (ชื่อ หรือ รหัส) ── */
.cbx{position:relative}
.cbx-in{width:100%;padding:6px 9px;border:1px solid var(--line-2);border-radius:var(--r-s);
        background:var(--surface);font-size:12.8px}
.cbx-in:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.cbx-list{position:absolute;z-index:5;inset-inline:0;top:calc(100% + 3px);
          background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-s);
          box-shadow:var(--shadow-lg);max-height:260px;overflow-y:auto;padding:3px}
.cbx-item{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:baseline;
          width:100%;text-align:start;padding:7px 9px;border-radius:5px;font-size:12.8px}
.cbx-item:hover,.cbx-item.on{background:var(--accent-sf)}
.cbx-item .s{font-size:11px;color:var(--ink-3);min-width:64px}
.cbx-item.on .s{color:var(--accent)}
.cbx-item .n{font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbx-item .u{font-size:11px;color:var(--ink-3)}
.cbx-empty{padding:10px 10px;font-size:12.5px;color:var(--ink-3)}
@media(max-width:720px){
  /* จอแคบวางรหัสไว้บรรทัดบน ชื่อจะได้ไม่โดนตัดเหลือตัวเดียว */
  .cbx-item{grid-template-columns:1fr auto;gap:2px 8px}
  .cbx-item .s{grid-column:1/-1;min-width:0}
  .cbx-item .n{white-space:normal}
}

/* ═══ กล่องใหญ่กลางจอ ═══
   ใช้กับงานที่ต้องกรอกเยอะจนแผงข้างแคบเกินไป (เช่น ใบแปลงสภาพ) */
.mscrim{position:fixed;inset:0;background:rgba(74,42,34,.45);z-index:60;
        display:none;align-items:flex-start;justify-content:center;
        overflow-y:auto;padding:26px 20px;backdrop-filter:blur(1.5px)}
.mscrim.is-on{display:flex}
/* ห้ามใส่ overflow:hidden ที่นี่ — มันจะทำให้ sticky ของหัว/ท้ายใช้ไม่ได้
   และไปตัดรายการ dropdown ที่ลอยออกมาด้วย ใช้มุมโค้งที่หัวกับท้ายแทน */
.modal{background:var(--ground);border-radius:14px;width:min(1140px,100%);
       box-shadow:var(--shadow-lg);
       animation:mup .2s cubic-bezier(.32,.72,0,1)}
@keyframes mup{from{transform:translateY(10px);opacity:.6}}
@media(prefers-reduced-motion:reduce){.modal{animation:none}}
/* หัวกับท้ายเกาะอยู่กับที่ ส่วนตัวกล่องยืดได้ตามเนื้อหา
   ไม่ให้ modal-body เลื่อนเอง เพราะ overflow จะไปตัดรายการ dropdown ที่ลอยออกมา
   — ให้ทั้งกล่องเลื่อนไปกับฉากหลังแทน */
.modal-head{display:flex;align-items:flex-start;gap:12px;padding:16px 20px;
            background:var(--surface);border-bottom:1px solid var(--line);
            position:sticky;top:0;z-index:3;border-radius:14px 14px 0 0}
.modal-head h3{font-size:17px;letter-spacing:-.02em}
.modal-head p{margin:2px 0 0;font-size:12.5px;color:var(--ink-3)}
.modal-body{padding:18px 20px}
.modal-foot{display:flex;gap:8px;flex-wrap:wrap;padding:12px 20px;
            background:var(--surface);border-top:1px solid var(--line);
            position:sticky;bottom:0;z-index:3;border-radius:0 0 14px 14px}
.modal-foot .spacer{flex:1}
@media(max-width:900px){
  .mscrim{padding:0}
  .modal,.modal-head,.modal-foot{border-radius:0}
  .modal{min-height:100dvh}
}

/* เลือกแบบใบแปลงสภาพ */
.pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.pick button{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);
             padding:16px 16px 15px;text-align:start;transition:border-color .13s ease,background .13s ease}
.pick button:hover{border-color:var(--accent);background:var(--accent-sf)}
.pick .k{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--accent);
         text-transform:uppercase}
.pick b{display:block;font-size:15px;font-weight:650;margin:5px 0 4px}
.pick span{font-size:12.5px;color:var(--ink-3);line-height:1.5;display:block}
.pick .eg{display:block;margin-top:9px;font-size:11.5px;color:var(--ink-2);
          background:var(--surface-2);border-radius:6px;padding:6px 9px}

/* ═══ ใบแปลงสภาพ ═══ */
.doc-wrap{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:14px;align-items:start}
@media(max-width:1080px){.doc-wrap{grid-template-columns:1fr}}
/* overflow:hidden ตรงนี้จะไปตัดรายการ dropdown ของแถวล่างสุด — ใช้มุมโค้งที่ลูกคนแรก/คนสุดท้ายแทน */
.doc{padding:0}
.doc>*:first-child{border-radius:var(--r) var(--r) 0 0}
.doc>*:last-child{border-radius:0 0 var(--r) var(--r)}
.draft-pill{margin-inline-start:auto;font-size:11px;font-weight:700;letter-spacing:.08em;
            text-transform:uppercase;border:1px dashed var(--line-2);color:var(--ink-3);
            padding:3px 9px;border-radius:20px;white-space:nowrap}
.draft-pill.done{border-style:solid;border-color:color-mix(in srgb,var(--accent) 35%,transparent);
                 color:var(--accent);background:var(--accent-sf)}
.draft-pill.void{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,transparent);
                 background:var(--danger-sf)}
.draft-pill.wait{border-style:solid;border-color:color-mix(in srgb,var(--warn) 35%,transparent);
                 color:var(--warn);background:var(--warn-sf)}
.kpi-val.warn{color:var(--warn)}
/* ตัวเลขขั้นตอนในแผงข้าง */
.effect-ic{font-size:12px;font-weight:700}

/* บันไดต้นทุน — วัตถุดิบ + ค่าแปรสภาพ → ยอดรวม */
.ladder{padding:16px 20px}
.lad-group+.lad-group{margin-top:14px}
.lad-t{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);
       font-weight:600;margin-bottom:7px;display:flex;align-items:center;gap:8px}
.lad-t::after{content:"";flex:1;height:1px;background:var(--line)}
.lad-row{display:grid;grid-template-columns:1fr auto auto auto;gap:10px;align-items:center;
         padding:5px 0;font-size:13.2px}
/* แถวที่แก้ได้ — รหัส / สินค้า / จำนวน+หน่วย / ทุน / เป็นเงิน / ลบ
   ช่องจำนวนกว้างขึ้นเพราะมี dropdown หน่วยอยู่ในนั้นด้วย */
.lad-row.edit,.lad-head{grid-template-columns:minmax(0,1fr) 158px 92px 92px 24px}
.lad-row.edit{padding:4px 0}
.lad-row.edit select{width:100%;padding:5px 8px;font-size:12.8px}
.lad-row.edit .inp{width:100%}
.lad-row.edit .a{min-width:0}
/* จำนวน + หน่วย อยู่ติดกันจะได้อ่านเป็นก้อนเดียว · "= 85,000 กรัม" ไปอยู่บรรทัดล่าง */
.qcell{display:flex;align-items:center;gap:5px;width:100%;flex-wrap:wrap}
.qcell .inp{min-width:0;flex:1 1 52px}
.qcell .u{font-size:11.5px;color:var(--ink-3);white-space:nowrap;flex:none}
.qcell select.uomsel{flex:1 1 62px;width:auto;min-width:0}
.qcell .uomeq{flex:1 0 100%;font-size:10.5px;line-height:1.3;white-space:nowrap}

/* "ตัดจากล็อต L-xxx 24 · L-yyy 46" ใต้แถววัตถุดิบ — กินเต็มความกว้างของช่องจำนวน */
.lotuse{flex:1 0 100%;font-size:10.8px;line-height:1.45;color:var(--ink-3);
        white-space:normal;margin-top:2px}
.lotuse b{color:var(--ink);font-weight:650;font-family:var(--mono);font-size:.95em}
.lotuse i{font-style:normal;opacity:.8}
.lotuse.bad{color:var(--danger)}
.lotuse.bad b{color:var(--danger)}
/* ในใบที่บันทึกแล้ว บรรทัดนี้อยู่ใต้ชื่อสินค้า ไม่ได้อยู่ในกล่อง flex */
.lotuse.locked{display:block;margin-top:3px}
.out-tbl .qcell{justify-content:flex-end}
.out-tbl .qcell .inp{width:64px;flex:none}
.out-tbl .qcell select.uomsel{flex:none;width:auto;max-width:84px}
.out-tbl .qcell .uomeq{text-align:end}

.lad-head{display:grid;gap:10px;font-size:10.5px;color:var(--ink-3);
          font-weight:600;padding-bottom:3px}
.lad-head span:nth-child(n+2){text-align:end}

@media(max-width:720px){
  /* จอแคบวางเป็นบรรทัดๆ มีเส้นคั่นให้เห็นว่าแถวไหนจบตรงไหน */
  .lad-row.edit{grid-template-columns:1fr 1fr;gap:6px;
                padding:9px 0;border-bottom:1px dashed var(--line)}
  .lad-row.edit:last-of-type{border-bottom:none}
  .lad-row.edit select,.lad-row.edit .cbx,
  .lad-row.edit .inp.wide{grid-column:1/-1}
  .lad-row.edit .a{text-align:start;align-self:center;font-size:14px}
  .lad-row.edit .x{justify-self:end}
  .lad-head{display:none}
}
.lad-row .q{color:var(--ink-3);font-size:12.5px;font-variant-numeric:tabular-nums;text-align:end}
.lad-row .a{font-variant-numeric:tabular-nums;font-weight:550;min-width:82px;text-align:end}
.lad-row .x{width:22px;height:22px;border-radius:6px;background:var(--surface-3);
            color:var(--ink-3);font-size:11px;line-height:1;display:grid;place-items:center}
.lad-row .x:hover{background:var(--danger-sf);color:var(--danger)}
.lad-sum{display:flex;justify-content:space-between;align-items:baseline;
         border-top:1px solid var(--line);margin-top:10px;padding-top:11px}
.lad-sum .a{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.lad-empty{font-size:12.5px;color:var(--ink-3);padding:4px 0}

/* แถบเลือกวิธีปันส่วน */
.alloc{padding:13px 20px;border-block:1px solid var(--line);background:var(--surface-2);
       display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.alloc .lbl{font-size:12.5px}
.alloc .lbl b{display:block;font-weight:600;font-size:13px}
.alloc .lbl span{color:var(--ink-3)}
.seg{display:inline-flex;background:var(--surface-3);border-radius:var(--r-s);padding:2px;
     gap:2px;flex-wrap:wrap;margin-inline-start:auto}
.seg button{padding:5px 11px;border-radius:5px;font-size:12.5px;color:var(--ink-2);
            transition:background .13s ease}
.seg button.is-on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow)}

.out-tbl{width:100%;border-collapse:collapse;min-width:0}
.out-tbl th{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);
            font-weight:600;padding:9px 20px;text-align:start;
            border-bottom:1px solid var(--line);background:none;position:static;white-space:nowrap}
.out-tbl td{padding:10px 20px;border-bottom:1px solid var(--line);font-size:13.2px;white-space:nowrap}
.out-tbl tr:last-child td{border-bottom:none}
.out-tbl .nm{font-weight:600;white-space:normal}
.out-tbl .n{font-variant-numeric:tabular-nums;text-align:end}
.out-tbl .unit{font-variant-numeric:tabular-nums;text-align:end;font-weight:700;
               color:var(--brand);font-size:14px}

/* ช่องที่ผู้ใช้กรอกเอง */
.inp{width:84px;border:1px solid var(--line-2);border-radius:6px;padding:4px 8px;
     font-family:var(--sans);font-size:12.8px;font-variant-numeric:tabular-nums;
     background:var(--surface);color:var(--ink);text-align:end}
.inp:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.inp.lot{width:118px;text-align:start;font-family:var(--mono);font-size:11.5px}
.inp.wide{width:100%;text-align:start}

.entry{border-block:1px solid var(--line);background:var(--surface-2)}
.entry-head{display:flex;align-items:baseline;gap:9px;padding:12px 20px 0;flex-wrap:wrap}
.entry-head b{font-size:12.8px;font-weight:600}
.entry-head span{font-size:11.5px;color:var(--ink-3)}
.entry-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
            gap:13px;padding:11px 20px 15px}
/* ตารางกรอกแบบล็อกจำนวนคอลัมน์ — auto-fit เปลี่ยนจำนวนคอลัมน์ตามความกว้าง
   ช่องเดียวกันเลยไปโผล่คนละที่ทุกครั้งที่ย่อ/ขยายจอ จำตำแหน่งไม่ได้สักที
   ใบที่มีช่องเยอะและต้องอ่านเป็นลำดับ ให้ใช้ g4 แทน */
.entry-grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){
  .entry-grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .entry-grid.g4 label[style*="span 4"],
  .entry-grid.g4 label[style*="span 2"]{grid-column:span 2 !important}
}
@media(max-width:560px){
  .entry-grid.g4{grid-template-columns:minmax(0,1fr)}
  .entry-grid.g4 label[style*="span 4"],
  .entry-grid.g4 label[style*="span 2"]{grid-column:span 1 !important}
}
.entry-grid label{margin:0}
.entry-grid .inp{width:100%}
.f-label{font-size:11px;color:var(--ink-3);margin-bottom:4px;display:block}

/* ช่องล็อต/EXP ที่ยัดอยู่ในช่อง "ของที่ได้" ของใบแบบ A (ผลิตรอบเดียวได้หลายอย่าง) */
.lot-mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px;
          margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.lot-mini label{margin:0}
.lot-mini .inp,.lot-mini input[type=date]{width:100%}

.derived{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
         background:var(--line);border-top:1px solid var(--line)}
.derived>div{background:var(--surface);padding:12px 20px}
.derived .t{font-size:11px;color:var(--ink-3)}
.derived .v{font-size:17px;font-weight:650;font-variant-numeric:tabular-nums;
            letter-spacing:-.02em;margin-top:1px}
.derived .v.bad{color:var(--danger)}
.derived .d{font-size:11.5px;color:var(--ink-3)}

.out-row{display:flex;align-items:center;gap:13px;padding:15px 20px;background:var(--brand-sf);
         flex-wrap:wrap}
.out-ic{width:34px;height:34px;border-radius:9px;background:var(--brand);
        display:grid;place-items:center;flex:none}
.out-tx{flex:1;min-width:180px}
.out-tx b{font-size:14.5px;font-weight:650;display:block}
.out-tx span{font-size:12.2px;color:var(--ink-2)}
.out-cost{margin-inline-start:auto;text-align:end}
.out-cost .v{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;
             letter-spacing:-.03em;color:var(--brand);display:block}
.out-cost .t{font-size:11px;color:var(--ink-2)}

.doc-foot{padding:12px 20px;border-top:1px solid var(--line);display:flex;gap:8px;
          flex-wrap:wrap;background:var(--surface-2)}

.side-note{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
           box-shadow:var(--shadow);padding:15px 16px}
.side-note h4{font-size:12.5px;margin-bottom:10px}
.effect{display:flex;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line)}
.effect:last-child{border-bottom:none}
.effect-ic{width:26px;height:26px;border-radius:7px;flex:none;display:grid;place-items:center;
           background:var(--surface-3);color:var(--ink-2)}
.effect-tx{font-size:12.5px;line-height:1.45}
.effect-tx b{display:block;font-weight:600;font-size:12.8px}
.effect-tx span{color:var(--ink-3)}
.effect-tx em{font-style:normal;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}

.st{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;white-space:nowrap}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--line-2);flex:none}
.st.done{color:var(--ink-3)}
.st.wait{color:var(--warn)}
.st.wait::before{background:var(--warn)}
.st.void{color:var(--ink-3);text-decoration:line-through}

/* ── ประวัติการเคลื่อนไหวสต๊อก ── */
.mv{display:flex;align-items:baseline;gap:10px;padding:7px 0;
    border-bottom:1px dashed var(--line);font-size:12.5px}
.mv:last-child{border-bottom:none}
.mv .d{color:var(--ink-3);font-size:11.5px;white-space:nowrap}
.mv .t{flex:1;min-width:0}
.mv .q{font-variant-numeric:tabular-nums;font-weight:650;white-space:nowrap}
.mv .q.plus{color:var(--accent)}
.mv .q.minus{color:var(--danger)}

/* ═══ ล็อต & วันหมดอายุ ═══
   ป้ายสถานะใช้สีเดียวกันทุกที่ (ตาราง · แผงข้าง · รายการเลือกตอนตัดของ)
   จะได้จำสีได้จากที่เดียว ไม่ต้องมานั่งแปลว่าสีนี้ในหน้านี้แปลว่าอะไร */
.lvl{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
     padding:2px 9px;border-radius:20px;white-space:nowrap;vertical-align:middle}
.lvl::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.lvl.expired{background:var(--danger);color:#fff}
.lvl.expired::before{background:#fff}
.lvl.red{background:var(--danger-sf);color:var(--danger)}
.lvl.yellow{background:var(--warn-sf);color:var(--warn)}
.lvl.green{background:var(--ok-sf);color:var(--ok)}
.lvl.none{background:var(--surface-3);color:var(--ink-3)}
.page-head .lvl{margin-inline-end:4px}

/* แถวที่หมดอายุแล้วต้องสะดุดตาตั้งแต่ยังไม่ทันอ่านตัวหนังสือ */
tbody tr.lotrow.expired{background:color-mix(in srgb,var(--danger-sf) 50%,transparent)}
tbody tr.lotrow.expired:hover{background:var(--danger-sf)}
tbody tr.gone{opacity:.55}

/* บรรทัดล็อตในแผงสินค้า — เลขล็อต + จำนวนอยู่บรรทัดบน สถานะไปบรรทัดล่างเต็มความกว้าง */
.li.lotli .sub{grid-column:1/-1;margin-top:2px}

/* รายการเลือกล็อตตอนตัดสต๊อก — เรียงตัวใกล้หมดอายุขึ้นก่อน */
.lotpick{display:flex;align-items:center;gap:10px;padding:10px 0;
         border-bottom:1px dashed var(--line)}
.lotpick:last-child{border-bottom:none}
.lotpick .lp-g{flex:1;min-width:0}
.lotpick .lp-g b{font-size:12.8px;font-weight:650}
/* เจาะจงเฉพาะบรรทัดรายละเอียด — ถ้าเขียนเป็น "span" เฉยๆ ป้ายสถานะที่ซ้อนอยู่ข้างใน
   จะโดน display:block ไปด้วย แล้วยืดเต็มบรรทัดจนดูเหมือนแถบสี ไม่ใช่ป้าย */
.lotpick .lp-g > span:not(.lp-first){display:block;font-size:11.5px;color:var(--ink-3);margin-top:3px}
.lotpick .lp-first{font-size:10.5px;font-weight:700;color:var(--accent);
                   background:var(--accent-sf);border-radius:5px;padding:1px 6px;
                   white-space:nowrap}
.lotpick .lp-q{flex:none;display:flex;align-items:center;gap:7px}
.lotpick .lp-q .inp{width:74px}
.lotpick .lp-q .sub{white-space:nowrap}

/* ── จัดการรายการตัวเลือก ── */
.metarow{display:flex;align-items:center;gap:10px;padding:8px 0;
         border-bottom:1px dashed var(--line)}
.metarow:last-of-type{border-bottom:none}
.metarow .mn{flex:1;min-width:0;font-size:13.2px;font-weight:550;
             cursor:pointer;text-align:start}
.metarow .mn:hover{color:var(--accent)}
.metarow .mu{font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.metarow .mx{width:24px;height:24px;border-radius:6px;background:var(--surface-3);
             color:var(--ink-2);font-size:11px;line-height:1;display:grid;
             place-items:center;flex:none}
.metarow .mx:hover{background:var(--danger-sf);color:var(--danger)}
/* สลับว่าประเภทนี้นับสต๊อกหรือไม่ */
.metarow .mt{font-size:10.5px;font-weight:650;padding:2px 8px;border-radius:5px;
             background:var(--surface-3);color:var(--ink-3);white-space:nowrap;flex:none}
.metarow .mt.on{background:var(--accent-sf);color:var(--accent)}
/* ช่องตั้งกฎแปลงหน่วย — "1 หน่วยนี้ = [จำนวน] [หน่วยไหน]" */
.metarow .mg{display:inline-flex;align-items:center;gap:4px;font-size:11px;
             color:var(--ink-3);white-space:nowrap;flex:none}
.metarow .mg .inp{width:58px;padding:3px 6px;font-size:11.5px}
.metarow .mg .mb{width:auto;padding:3px 4px;font-size:11.5px}

/* ── ใบเสร็จ ── */
.receipt{background:#fff;border:1px solid var(--line);border-radius:var(--r);
         padding:16px;color:#3b2019}
.receipt .rh{text-align:center;border-bottom:1px dashed #cbb;padding-bottom:10px;
             margin-bottom:10px}
.receipt .rh b{font-size:15px;display:block}
.receipt .rh span{font-size:11px;color:#7a5d54;display:block;line-height:1.5}
.receipt .rt{font-size:11.5px;color:#7a5d54;display:flex;justify-content:space-between}
.receipt table{width:100%;border-collapse:collapse;margin:9px 0;font-size:12.5px;min-width:0}
.receipt td{padding:3px 0;vertical-align:top;border:none;white-space:normal}
.receipt td.q{text-align:center;width:34px;color:#7a5d54}
.receipt td.a{text-align:end;font-variant-numeric:tabular-nums;width:72px}
.receipt .sum{border-top:1px dashed #cbb;padding-top:9px;display:flex;
              justify-content:space-between;font-size:16px;font-weight:750;
              font-variant-numeric:tabular-nums}
.receipt .foot{text-align:center;font-size:10.5px;color:#7a5d54;margin-top:10px;line-height:1.6}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:95;
       background:var(--ink);color:var(--ground);padding:10px 18px;border-radius:22px;
       font-size:13px;font-weight:600;opacity:0;pointer-events:none;
       transition:opacity .2s;white-space:nowrap;max-width:90vw}
.toast.is-on{opacity:1}

/* ── จอแคบ: เมนูกลายเป็นแถบเลื่อนแนวนอน แผงขวาเต็มจอ ── */
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .rail{position:sticky;top:0;z-index:30;height:auto;flex-direction:row;
        overflow-x:auto;align-items:center;padding:10px 12px;gap:4px;
        border-right:none;border-bottom:1px solid var(--line)}
  .brand{padding:0 12px 0 4px}
  .brand-txt,.rail-label,.rail-foot{display:none}
  .nav-item{padding:7px 11px;white-space:nowrap}
  .nav-count{margin-inline-start:4px}
  .topbar{padding:12px 14px;position:static;flex-wrap:wrap;row-gap:10px}
  /* ช่องค้นหาสินค้าลงไปอยู่แถวของตัวเอง — เดิมซ่อนทิ้ง ทำให้หาสินค้าบนมือถือไม่ได้เลย */
  .search{order:9;flex:1 1 100%;margin-inline-start:0;min-width:0}
  .search input{font-size:16px}   /* ต่ำกว่า 16px แล้ว iPhone ซูมเข้าเองตอนแตะช่อง */
  .search.is-off{display:none}
  .help-btn{margin-inline-start:auto}
  .screen{padding:18px 14px 56px}
  .pos{grid-template-columns:1fr}
  .cart{position:static;scroll-margin-top:72px}
  #s-sell{padding-bottom:96px}
  .cart-bar{display:flex;align-items:center;gap:12px;position:fixed;z-index:25;
            left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));
            padding:13px 16px;border:none;border-radius:var(--r);
            background:var(--ink);color:var(--ground);font-size:14px;
            box-shadow:0 6px 20px rgba(0,0,0,.18);cursor:pointer}
  .cart-bar[hidden]{display:none}
  .cart-bar .go{margin-inline-start:auto;font-weight:600}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom))}   /* ไม่ทับแถบตะกร้า */
  .panel{width:100%}
}

/* ═══ โหมดอธิบาย ═══════════════════════════════════════════════
   ปิดอยู่ = ซ่อนกล่องคำอธิบายทั้งแอป เหลือแต่ตัวเลขกับปุ่ม
   (บล็อกสถานะไม่ถูกซ่อน เพราะนั่นคือข้อมูล ไม่ใช่คำอธิบาย)          */
.help-btn{display:inline-flex;align-items:center;gap:5px;font-size:12px;
          padding:4px 10px;border-radius:20px;color:var(--ink-3);
          background:var(--surface-3);white-space:nowrap;flex:none}
.help-btn:hover{color:var(--ink)}
.help-btn.is-on{background:var(--accent-sf);color:var(--accent);font-weight:600}
body.help-off .callout{display:none}
body.help-off .note-bar{display:none}
/* คอลัมน์ขวาว่าง — ตัวเอกสารกินเต็มความกว้างแทนที่จะเหลือที่ว่าง */
.doc-wrap.solo{grid-template-columns:minmax(0,1fr)}
.doc-wrap.solo>div:last-child{display:none}

.btn-sm{font-size:12px;padding:5px 11px}
@media(max-width:560px){
  .dh-total b{font-size:20px}
}

/* ═══ ฝั่งซื้อ ═══════════════════════════════════════════════════ */

/* ป้ายสถานะแบบจางๆ — ใบที่ยกเลิก/ปิดไปแล้ว ยังต้องอ่านออกแต่ไม่ต้องเด่น */
.tag.soft{background:transparent;color:var(--ink-3);
          box-shadow:inset 0 0 0 1px var(--line)}

/* หัวข้อที่มีปุ่มอยู่ท้ายบรรทัด (ผู้ขาย + เพิ่มผู้ขาย) */
.sect-h{display:flex;align-items:center;gap:8px}
.sect-h .btn{text-transform:none;letter-spacing:0;font-size:12px;padding:4px 10px}

/* แถวเอกสาร = แถวหลัก + บรรทัดเสริมเต็มความกว้างข้างใต้
   ช่องเลขล็อต/EXP ต้องอยู่บรรทัดเสริม ไม่ใช่ในคอลัมน์จำนวนที่กว้างแค่ 158px
   (เคยยัดลงไปแล้ว เหลือที่พิมพ์เลขล็อตแค่ 2 ตัวอักษร) */
/* แถวฝั่งซื้อมี 6 ช่อง — สินค้า / จำนวน / ราคา / ส่วนลด / เป็นเงิน / ลบ */
.lad-row.edit.pu6,.lad-head.pu6{grid-template-columns:minmax(0,1fr) 148px 82px 68px 68px 88px 24px}
.lad-row.pu6{grid-template-columns:minmax(0,1fr) auto auto auto auto}
@media(max-width:900px){
  .lad-row.edit.pu6,.lad-head.pu6{grid-template-columns:minmax(0,1fr) 130px 70px 58px 58px 78px 22px}
}
/* แถวรายการในใบรายจ่าย — รายละเอียด / หมวดหมู่ / จำนวน / หน่วย / ราคาต่อหน่วย / รวม / ลบ */
.lad-row.edit.ex7,.lad-head.ex7{
  grid-template-columns:minmax(0,1fr) 150px 62px 62px 88px 90px 24px}
.lad-row.ex7{grid-template-columns:minmax(0,1fr) auto auto auto auto}
@media(max-width:900px){
  .lad-row.edit.ex7,.lad-head.ex7{
    grid-template-columns:minmax(0,1fr) 120px 54px 54px 74px 78px 22px}
}

/* แถวค่าใช้จ่ายเพิ่มเติมในใบรับสินค้า — ค่าอะไร / ใครเก็บ / จำนวนเงิน / ลบ */
.lad-row.edit.ch4,.lad-head.ch4{grid-template-columns:minmax(0,1fr) 176px 104px 24px}
/* หัวคอลัมน์ "ใครเก็บ" อยู่บน dropdown ที่ชิดซ้าย — ปล่อยชิดขวาตามค่าตั้งต้นแล้วอ่านไม่ตรงคอลัมน์ */
.lad-head.ch4 span:nth-child(2){text-align:start}
@media(max-width:900px){
  .lad-row.edit.ch4,.lad-head.ch4{grid-template-columns:minmax(0,1fr) 138px 84px 22px}
}
.lad-item{padding-bottom:2px}
.lad-item+.lad-item{border-top:1px solid var(--line)}
/* ช่องจำนวนของใบฝั่งซื้อสูงกว่าช่องอื่น (มีบรรทัดล็อต/ค้างรับต่อท้าย)
   ถ้าจัดกึ่งกลางแนวตั้ง ชื่อสินค้าจะไหลลงไปอยู่ใต้ช่องจำนวน อ่านสลับลำดับกัน */
.lad-item .lad-row.edit{align-items:start}
.lad-item .lad-row.edit>.a{padding-top:7px}
.lad-item .lad-row.edit>.x{margin-top:5px}
.rc-sub{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;
        margin:0 0 8px 2px;padding-top:2px}
.rc-sub label{margin:0;flex:0 1 168px}
.rc-sub .f-label{margin-bottom:3px}
.rc-sub .inp,.rc-sub input[type=date]{width:100%;font-size:12.4px;padding:5px 8px}
.rc-cost{flex:1 1 220px;font-size:11.4px;line-height:1.5;color:var(--ink-3);
         padding-bottom:5px}
.rc-cost b{color:var(--ink);font-weight:650}
.rc-cost i{font-style:normal;opacity:.7}

@media(max-width:720px){
  .rc-sub label{flex:1 1 44%}
}

/* บรรทัดยอดย่อย (ก่อน VAT / VAT / ค่าขนส่ง) ในสรุปท้ายตาราง */
.ladder .lad-row .a.sub{font-weight:500}
.ladder .lad-row .sub i{opacity:.75}

/* ═══ ตัวอย่างลายเซ็นในหน้าตั้งค่า ═══════════════════════════════ */
.stamp-prev{display:flex;align-items:center;gap:12px;background:var(--surface-2);
            border:1px solid var(--line);border-radius:var(--r-s);padding:10px 12px}
.stamp-prev img{max-width:130px;max-height:60px;object-fit:contain}
.stamp-prev .btn{margin-inline-start:auto;font-size:12px;padding:4px 10px}

/* ═══ เอกสารสำหรับพิมพ์ / เซฟ PDF ═════════════════════════════════
   ใช้สีดำ–ขาวล้วน ไม่อิงตัวแปรธีมของแอป เพราะกระดาษไม่มีโหมดมืด
   และเครื่องพิมพ์ส่วนใหญ่ตัดสีพื้นหลังทิ้งอยู่แล้ว                    */

#printArea{display:none}

.prn-preview{background:var(--surface-2);border:1px solid var(--line);
             border-radius:var(--r);padding:18px;overflow-x:auto}
.prn-preview .prn-doc{margin:0 auto;box-shadow:0 2px 14px rgba(0,0,0,.09);
                      width:100%;max-width:186mm}

/* ── ตัวอย่างบนจอต้องเป็นกระดาษ A4 ย่อส่วน ไม่ใช่กระดาษแคบลง (9 ก.ย. 2569) ──
   ของเดิมบีบเหลือ 186mm ทำให้เนื้อที่ในบรรทัดน้อยกว่าตอนพิมพ์จริงราว 20%
   ข้อความจึงตัดบรรทัดคนละที่กับกระดาษ — คำโฆษณาในหน้าตัวอย่างที่ว่า
   "หน้าตาที่เห็นคือหน้าตาที่จะออกมาจริง" เลยไม่จริงเท่าที่ควร

   ใช้ zoom ไม่ใช่ transform:scale เพราะ zoom ย่อกล่องจริงๆ ไม่เหลือที่ว่างค้าง
   ข้างใน layout ยังคิดที่ 210mm เต็ม = ตัดบรรทัดตรงกับกระดาษเป๊ะ
   จอแคบ (≤900px) ไม่แตะ ปล่อยให้พับเป็นคอลัมน์เดียวอ่านง่ายเหมือนเดิม */
@media screen and (min-width:901px){
  .prn-preview .prn-doc{width:210mm;max-width:none;zoom:.88}
}

/* ขนาดกระดาษ A4 จริง 210×297mm — ผู้ใช้ขอ (8 ก.ย. 2569)
   ของเดิม 186mm คือ A4 หักขอบไปแล้ว ทำให้ตัวอย่างบนจอไม่เท่ากระดาษจริง
   ตอนนี้ตัวกล่อง = ขนาดกระดาษ · ขอบอยู่ใน padding (box-sizing:border-box) */
.prn-doc{width:210mm;min-height:297mm;background:#fff;color:#111;padding:15mm;
         font-size:12.4px;line-height:1.5;box-sizing:border-box;
         display:flex;flex-direction:column}
.prn-doc *{box-sizing:border-box}

/* ตารางของแอปตั้ง min-width:820px ไว้ (ให้ตารางข้อมูลเลื่อนแนวนอนได้)
   เอกสารพิมพ์ต้องล้างทิ้ง ไม่งั้นตารางดันคอลัมน์ข้างๆ จนยุบเหลือตัวอักษรละบรรทัด */
.prn-doc table{width:auto;min-width:0}

/* ⚠️ แต่ตารางสินค้าต้อง**เต็มความกว้าง** — กฎ .prn-doc table{width:auto} ข้างบน
   จำเพาะกว่า .prn-tbl{width:100%} จึงชนะ แล้วตารางหดตามเนื้อหา
   เหลือช่องว่างด้านขวาครึ่งหน้า (ผู้ใช้ทักว่า "ขยายมาให้เต็ม" 8 ก.ย. 2569)
   ต้องเขียนให้จำเพาะกว่าเพื่อทับกลับ — อย่าลบกฎข้างบน มันแก้บั๊กคนละตัว */
.prn-doc table.prn-tbl{width:100%}

.prn-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;
          border-bottom:2px solid #111;padding-bottom:9px}
.prn-head-l{flex:1 1 auto;min-width:0}
.prn-head-r{flex:none;text-align:end;min-width:0}
.prn-co{display:flex;gap:9px;align-items:center;margin-bottom:5px}
.prn-logo{width:34px;height:34px;object-fit:contain;flex:none}
.prn-co-name{font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.prn-br{font-weight:400;color:#555}

.prn-party-t{font-size:11px;font-weight:700;color:#c02a52;margin-bottom:1px}
.prn-party-n{font-size:12.4px;font-weight:600;line-height:1.4}
.prn-party-b{font-size:11.2px;color:#444;line-height:1.5}

.prn-title-t{font-size:20px;font-weight:700;letter-spacing:.02em;line-height:1.1}
.prn-title-e{font-size:9px;letter-spacing:.16em;color:#777;margin-bottom:5px}
.prn-meta{border-collapse:collapse;margin-inline-start:auto}
.prn-meta td{padding:1px 0 1px 10px;text-align:start;border:none;
             font-size:11.3px;white-space:nowrap;vertical-align:top}
.prn-meta td:first-child{color:#777;padding-inline-start:0;text-align:end}

.prn-mid{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;
         margin:9px 0 11px}
.prn-mid-l{flex:1 1 auto;min-width:0}
.prn-mid-r{flex:none}
.prn-mid-r .prn-meta td{white-space:normal;max-width:150px}
.prn-ship{font-size:11.2px;color:#444;margin-top:5px}
.prn-ship b{color:#111}

.prn-tbl{width:100%;min-width:0;border-collapse:collapse;font-size:11.8px;margin-top:2px}
.prn-tbl th{background:#f2f2f2;border-block:1px solid #999;padding:5px 7px;
            font-size:10.4px;font-weight:700;letter-spacing:.03em;text-align:start;
            white-space:nowrap}
.prn-tbl td{border-bottom:1px solid #e2e2e2;padding:5px 7px;vertical-align:top}
.prn-tbl .n{width:26px;text-align:center;color:#777}
.prn-tbl .q{width:86px;text-align:end;font-variant-numeric:tabular-nums}
.prn-tbl .a{width:84px;text-align:end;font-variant-numeric:tabular-nums}
.prn-tbl th.q,.prn-tbl th.a{text-align:end}
.prn-tbl .prn-u{color:#777;font-size:10.6px}
.prn-tbl tr.blank td{height:21px}
.prn-tbl tbody tr:last-child td{border-bottom:1px solid #999}
.prn-sku{font-size:9.8px;color:#888;font-family:var(--mono)}

.prn-sumwrap{display:flex;justify-content:space-between;align-items:flex-start;
             gap:18px;margin-top:9px}
.prn-baht{font-size:11.4px;color:#333;padding-top:4px;flex:1 1 auto}
.prn-sum{border-collapse:collapse;flex:none;margin-inline-start:auto}
.prn-sum td{padding:2px 0 2px 12px;border:none;font-size:11.6px;white-space:nowrap}
.prn-sum td:first-child{color:#444;text-align:end;padding-inline-start:0}
.prn-sum .a{text-align:end;font-variant-numeric:tabular-nums;min-width:76px}
.prn-sum .cur{color:#777;font-size:10.6px;padding-inline-start:5px}
.prn-sum tr.grand td{font-weight:700;font-size:13px;border-top:1px solid #999;padding-top:5px}
.prn-sum tr.grand td:first-child{color:#111}

.prn-note{margin-top:12px;font-size:11.4px;line-height:1.55;
          border:1px solid #ddd;border-radius:3px;padding:7px 9px;background:#fafafa}
.prn-note b{color:#c02a52;font-size:10.6px}

.prn-signs{display:grid;grid-template-columns:1fr 1fr;gap:46px;margin-top:30px}
.prn-sign{text-align:center}
.prn-sign-org{font-size:11.2px;color:#444;margin-bottom:2px}
.prn-sign-space{height:56px;display:flex;align-items:flex-end;justify-content:center}
.prn-stamp{max-height:56px;max-width:170px;object-fit:contain}
.prn-sign-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:12px}
.prn-sign-line{border-bottom:1px dotted #666;height:1px}
.prn-sign-cap{font-size:10.4px;color:#777;margin-top:3px}
.prn-sign-name{font-size:11.4px;font-weight:600;margin-top:4px}

.prn-foot{margin-top:18px;padding-top:7px;border-top:1px solid #ddd;
          font-size:9.6px;color:#888;text-align:center}

/* ใบรับรองแทนใบเสร็จต้องลงนาม 3 ฝ่าย — ผู้รับเงิน ผู้จ่ายเงิน ผู้อนุมัติ
   ใบสั่งซื้อลงนาม 2 ฝ่ายเลยใช้ตารางเดิมไม่ได้ */
.prn-signs.three{grid-template-columns:repeat(3,1fr);gap:26px}
/* ข้อความรับรองตามแบบที่บัญชีคุ้นเคย — กรอบบางๆ ให้เห็นว่าเป็นคำรับรอง ไม่ใช่หมายเหตุ */
.prn-cert{margin-top:16px;padding:10px 12px;border:1px solid #ddd;border-radius:4px;
          font-size:11.4px;line-height:1.7;color:#333}
.prn-cert b{font-weight:600}

/* ⚠️ ต้องเป็น `screen and` เท่านั้น ห้ามตัดคำว่า screen ออก (แก้ 9 ก.ย. 2569)
   กระดาษ A4 กว้าง 210mm = 793.7px ซึ่ง **น้อยกว่า 900px**
   ถ้าเขียนแค่ (max-width:900px) กฎชุดนี้จะไปมีผลตอนสั่งพิมพ์ด้วย
   หัวเอกสารกับช่องเซ็นจะพับเป็นคอลัมน์เดียว เอกสารสูงขึ้นจาก 297mm เป็น ~326mm
   แล้วล้นไปหน้าที่สองทุกใบ — ผู้ใช้ทักว่า "พอจะบันทึกเป็น pdf มันยาวกว่า A4"
   กฎชุดนี้มีไว้ให้หน้าตัวอย่างบนมือถืออ่านง่ายเท่านั้น ไม่เกี่ยวกับกระดาษ */
@media screen and (max-width:900px){
  .prn-preview{padding:10px}
  .prn-doc{width:100%;padding:14px 12px}
  .prn-head{flex-direction:column;gap:10px}
    .prn-meta{margin-inline-start:0}
  .prn-meta td{text-align:start;padding-inline-start:0;padding-inline-end:12px}
  .prn-signs,.prn-signs.three{grid-template-columns:1fr;gap:24px}
  .prn-head,.prn-mid,.prn-sumwrap{flex-direction:column;gap:10px}
  .prn-head-r{text-align:start}
  .prn-meta,.prn-sum{margin-inline-start:0}
  .prn-meta td:first-child{text-align:start;padding-inline-start:0;min-width:74px}
  .prn-sum{width:100%}
}

/* ── ตอนสั่งพิมพ์: เหลือแต่เอกสาร ซ่อนทั้งแอปทิ้ง ── */
@media print{
  @page{size:A4;margin:0}
  body.printing{background:#fff}
  body.printing .app,
  body.printing .scrim,
  body.printing .mscrim,
  body.printing .panel,
  body.printing .toast{display:none !important}
  body.printing #printArea{display:block}
  /* ══ ความสูง 250mm ไม่ใช่ 297mm ══════════════════════════════
     `@page{margin:0}` ข้างบนขอให้ไม่มีขอบกระดาษ แต่ **เบราว์เซอร์ไม่ได้ทำตามเสมอ**
     บางตัว (โดยเฉพาะ Safari) ใส่ขอบของตัวเองราว 12mm บน-ล่างทับลงไป
     ถ้าตั้งความสูงไว้ 295mm พอโดนขอบเบียดจะเหลือที่จริงแค่ ~272mm → ล้นหน้าทันที

     250mm เผื่อไว้ 22mm พอสำหรับทุกกรณี · ช่องเซ็นยังถูกดันลงไปอยู่ล่างเหมือนเดิม
     เสียแค่มีที่ว่างท้ายหน้าเพิ่มขึ้นหน่อยตอนที่เบราว์เซอร์ไม่ใส่ขอบ
     — แลกกับการรับประกันว่าไม่มีทางล้นหน้าสอง คุ้มกว่ามาก */
  body.printing #printArea .prn-doc{width:auto;box-shadow:none;padding:12mm 11mm;
                                    min-height:250mm}
  /* ══ บังคับผังกระดาษให้เป็น 2 คอลัมน์เสมอ ══════════════════════
     เขียนซ้ำตรงนี้ทั้งที่ข้างบนก็ตั้งไว้แล้ว **โดยตั้งใจ** — อย่าลบทิ้ง

     เหตุผล: กระดาษ A4 กว้าง 210mm = 793.7px ซึ่งน้อยกว่า breakpoint 900px
     กฎ (max-width:900px) ที่มีไว้ให้จอมือถือจึงมีโอกาสไปทำงานบนกระดาษ
     แล้วพับหัวเอกสารกับช่องเซ็นเป็นคอลัมน์เดียว เอกสารล้นไปหน้าสอง

     ข้างบนแก้ด้วยการเติม `screen and` ไปแล้วก็จริง แต่ผูกไว้กับเบราว์เซอร์
     ตีความ media type ถูกต้อง — ถ้าเบราว์เซอร์ไหนตีความต่างออกไป
     หรือมีคนเผลอเพิ่มกฎ max-width ใหม่ทีหลัง เอกสารจะพังอีก
     กฎชุดนี้จำเพาะกว่า (0,3,1) และอยู่ท้ายไฟล์ จึงชนะเสมอไม่ว่าอะไรจะเกิดขึ้น */
  body.printing #printArea .prn-head,
  body.printing #printArea .prn-mid,
  body.printing #printArea .prn-sumwrap{flex-direction:row;gap:22px}
  body.printing #printArea .prn-head-r{flex:0 0 62mm;max-width:62mm;
                                       margin-inline-start:auto;text-align:start}
  body.printing #printArea .prn-signs{grid-template-columns:1fr 1fr;gap:56px}
  body.printing #printArea .prn-signs.three{grid-template-columns:repeat(3,1fr);gap:26px}
  body.printing #printArea .prn-sum{width:auto;margin-inline-start:auto}
  body.printing #printArea .prn-meta{margin-inline-start:auto}
  body.printing #printArea .prn-meta td:first-child{text-align:end}

  /* กันตารางถูกตัดกลางแถวเวลาเอกสารยาวเกินหนึ่งหน้า */
  .prn-tbl tr{break-inside:avoid}
  .prn-signs{break-inside:avoid}
  /* พิมพ์ต้นฉบับ+สำเนาพร้อมกัน = แผ่นที่สองต้องขึ้นหน้าใหม่เสมอ
     ไม่งั้นสำเนาจะไหลต่อท้ายต้นฉบับในหน้าเดียวกัน */
  body.printing #printArea .prn-doc + .prn-doc{break-before:page}
}

/* ═══ เมนูลัดท้ายแถว + จุดสีสถานะ ═══════════════════════════════ */
.rowdots{width:26px;height:26px;border-radius:7px;color:var(--ink-3);
         display:grid;place-items:center;flex:none}
.rowdots:hover{background:var(--surface-3);color:var(--ink)}
td.act{width:34px;text-align:end;padding-inline:6px}

.rowmenu{position:fixed;z-index:90;background:var(--surface);border:1px solid var(--line-2);
         border-radius:var(--r);box-shadow:var(--shadow-lg);padding:5px;min-width:190px;
         display:flex;flex-direction:column;gap:1px}
.rowmenu-item{text-align:start;padding:7px 11px;border-radius:var(--r-s);font-size:13px;
              color:var(--ink);white-space:nowrap}
.rowmenu-item:hover{background:var(--accent-sf);color:var(--accent)}
.rowmenu-item.danger{color:var(--danger)}
.rowmenu-item.danger:hover{background:var(--danger-sf)}

/* จุดสีหน้าเลขที่เอกสาร */
.sdot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-inline-end:6px;
      vertical-align:middle;flex:none}
.sdot.ok{background:var(--ok)}
.sdot.wait{background:var(--warn)}
.sdot.bad{background:var(--danger)}
.sdot.off{background:var(--line-2)}

/* ── ช่องรายละเอียดใต้ชื่อสินค้าในแถวเอกสาร ── */
.pcell{display:flex;flex-direction:column;gap:4px;min-width:0}
.linedesc{width:100%;font-size:12.2px;padding:5px 8px;line-height:1.45;
          min-height:0;resize:none;overflow:hidden;color:var(--ink-2)}
.linedesc::placeholder{font-size:11.5px}
.linedesc-ro{margin-top:2px;line-height:1.45;white-space:normal}
.prn-desc{font-size:10.8px;color:#555;line-height:1.4;margin-top:1px}

/* ═══ แท็บในแผงสินค้า + ความเคลื่อนไหว ═══════════════════════════ */
.ptabs{display:flex;gap:4px;padding:0 0 14px;border-bottom:1px solid var(--line);
       margin-bottom:14px}
.ptab{padding:6px 13px;border-radius:20px;font-size:12.8px;color:var(--ink-2);
      background:var(--surface-3);white-space:nowrap}
.ptab:hover{color:var(--ink)}
.ptab.is-on{background:var(--accent-sf);color:var(--accent);font-weight:600}

.pstats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.pstat{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-s);
       padding:10px 12px}
.pstat b{display:block;font-size:17px;font-weight:700;letter-spacing:-.02em;
         font-variant-numeric:tabular-nums;line-height:1.2}
.pstat span{font-size:11px;color:var(--ink-3)}

/* แถวความเคลื่อนไหว — ทิศทาง / รายละเอียด / คงเหลือสะสม */
.mvrow{display:flex;align-items:flex-start;gap:9px;padding:9px 0;
       border-bottom:1px solid var(--line)}
.mvrow:last-child{border-bottom:none}
.mvdir{flex:none;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:5px;
       margin-top:1px}
.mvdir.in{background:var(--ok-sf);color:var(--ok)}
.mvdir.out{background:var(--danger-sf);color:var(--danger)}
.mvbody{flex:1;min-width:0}
.mvtop{display:flex;align-items:baseline;gap:8px}
.mvtop b{font-size:13px;font-weight:600;flex:1;min-width:0}
.mvqty{font-size:13px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.mvqty.plus{color:var(--ok)}
.mvqty.minus{color:var(--danger)}
.mvsub{font-size:11.2px;color:var(--ink-3);line-height:1.45;margin-top:1px}
.mvbal{flex:none;text-align:end;min-width:56px}
.mvbal b{display:block;font-size:13.5px;font-weight:650;font-variant-numeric:tabular-nums}
.mvbal span{font-size:10px;color:var(--ink-3)}

/* ยอดที่จะจ่ายจริง — ตัวเลขที่ต้องสะดุดตาในบล็อกท้ายบิล */
.paynow-amt{color:var(--accent);font-variant-numeric:tabular-nums}

/* ═══ เอกสารแบบเต็มหน้า ════════════════════════════════════════════
   ใบสั่งซื้อ · ใบรับสินค้า · บิลซื้อ · ใบลดหนี้ · รายจ่าย · โอนย้าย · แปลงสภาพ
   เปิดเต็มจอเหมือนกระดาษจริง แทนกล่องลอยกลางจอ เพราะเอกสารพวกนี้กรอกยาว
   กล่อง 1140px บังคับให้ช่องแคบจนต้องเลื่อนขึ้นลงตลอดเวลาที่กรอก

   วางตามใบที่โปรแกรมบัญชีไทยใช้กัน — คนที่เคยกรอกใบพวกนี้มาก่อนจะรู้ทันทีว่าอะไรอยู่ตรงไหน
     แถวบนสุด  เลขที่เอกสาร (ซ้าย) + ปุ่มปิด/บันทึก (ขวา)  ← เกาะอยู่กับที่ตลอด
     หัวเอกสาร คู่ค้า + ที่อยู่ (ซ้าย) · ยอดรวม + วันที่/เครดิต/ครบกำหนด (ขวา)
     แถบกลาง   ชื่อโปรเจกต์ · เลขที่อ้างอิง · ราคาสินค้า(VAT)
     ตาราง     หัวสีน้ำเงิน มีเลขลำดับหน้าแถว                                */
.mscrim.page{padding:0;background:var(--ground);backdrop-filter:none}
.modal.page{width:100%;min-height:100dvh;border-radius:0;background:var(--ground);
            box-shadow:none;animation:none;display:flex;flex-direction:column}

/* หัวกับปุ่มอยู่แถวเดียวกันและเกาะบนสุด — กดบันทึกได้โดยไม่ต้องเลื่อนลงไปท้ายใบ */
.modal-topbar{position:sticky;top:0;z-index:4;display:flex;align-items:center;
              gap:12px 18px;flex-wrap:wrap;padding:9px 22px;
              background:var(--surface);border-bottom:1px solid var(--line)}
.modal.page .modal-topbar>.modal-head{flex:1 1 260px;min-width:0;padding:0;
              background:none;border:none;position:static;border-radius:0}
.modal.page .modal-topbar>.modal-foot{padding:0;background:none;border:none;
              position:static;border-radius:0;margin-inline-start:auto;
              justify-content:flex-end;align-items:center}
.modal.page .modal-topbar>.modal-foot .spacer{display:none}
.modal.page>.modal-body{padding:16px 22px 90px;width:100%;max-width:1420px;
                        margin-inline:auto}

/* ชื่อเอกสาร — ชนิดใบตัวเล็กอยู่บน เลขที่เอกสารตัวใหญ่อยู่ล่าง */
.dp-kind{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-3);
         line-height:1.3}
.dp-kind svg{opacity:.8;flex:none}
.dp-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;line-height:1.2}
.dp-no{font-family:var(--mono);font-size:19px;font-weight:700;letter-spacing:-.03em;
       color:var(--accent)}
.modal.page .modal-head .dp-sub{margin:0;font-size:12px;color:var(--ink-3)}
.dp-line .draft-pill{margin:0}

/* ── หัวเอกสาร ─────────────────────────────────────────────────── */
.dh{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,330px);
    gap:14px 34px;padding:16px 20px 4px}
.dh-l{min-width:0;max-width:520px}
.dh-r{min-width:0;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.dh-l>label{margin-bottom:10px}
.dh-det>span{display:block;font-size:11px;color:var(--ink-3);margin-bottom:4px}
.dh-box{border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--surface);
        padding:9px 11px;min-height:76px;font-size:12.8px;line-height:1.6;color:var(--ink-2)}
.dh-box b{color:var(--ink);font-weight:600}
.dh-box .none{color:var(--ink-3);font-style:italic}
.dh-box .btn{margin-top:6px}

/* ยอดรวมตัวใหญ่ — ตัวเลขที่คนกวาดตาหาเป็นอันดับแรกเวลากระทบยอดกับใบที่ถืออยู่ */
.dh-total{text-align:end;line-height:1.15;margin-bottom:2px}
.dh-total span{display:block;font-size:11px;color:var(--ink-3);margin-bottom:2px}
.dh-total b{font-size:27px;font-weight:700;letter-spacing:-.035em;
            font-variant-numeric:tabular-nums;color:var(--accent)}
.dh-side{width:100%;max-width:300px}
.dh-side label{display:grid;grid-template-columns:auto minmax(0,164px);
               align-items:center;justify-content:end;gap:4px 10px;margin-bottom:7px}
.dh-side label>span{margin:0;text-align:end;font-size:11.5px;white-space:nowrap}
.dh-side .ro{font-size:12.8px;text-align:end;font-variant-numeric:tabular-nums;
             padding:7px 0}

/* แถบกลาง — ช่องที่ไม่ใช่คู่ค้าและไม่ใช่ยอดเงิน วางเรียงเป็นแถวเดียวคั่นใบกับตาราง */
.dh-strip{grid-column:1/-1;display:grid;gap:10px 16px;padding:10px 0 12px;
          margin-top:2px;border-top:1px solid var(--line);
          grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.dh-strip label{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);
                align-items:center;gap:9px}
.dh-strip label>span{margin:0;white-space:nowrap;font-size:11.5px}
@media(max-width:1080px){
  .dh{grid-template-columns:minmax(0,1fr)}
  .dh-r{align-items:stretch}
  .dh-total{text-align:start}
  .dh-side{max-width:none}
  .dh-side label{justify-content:start;grid-template-columns:130px minmax(0,1fr)}
  .dh-side label>span{text-align:start}
}

/* ── ตารางรายการ — หัวสีน้ำเงินมีเลขลำดับ เหมือนใบที่ปริ๊นออกมา ──
   :has() ใช้เพื่อให้คอลัมน์ "ลำดับ" โผล่เฉพาะตารางที่กรอกได้
   ใบที่บันทึกแล้วแสดงเป็นบรรทัดอ่านอย่างเดียว ไม่มีเลขลำดับ คอลัมน์จึงต้องไม่เพี้ยนตาม */
.lad-group{counter-reset:ln}
.lad-head{background:var(--accent);color:var(--on-accent);font-size:11.5px;
          font-weight:600;padding:7px 10px;border-radius:var(--r-s) var(--r-s) 0 0}
.lad-group:has(.lad-row.edit)>.lad-head::before{content:"ลำดับ";text-align:center}
.lad-row.edit{counter-increment:ln;background:var(--surface);padding:7px 10px;
              border:1px solid var(--line);border-top:none}
.lad-row.edit::before{content:counter(ln);text-align:center;font-size:12.5px;
                      color:var(--ink-3);font-variant-numeric:tabular-nums}
.lad-row.edit:last-of-type{border-radius:0 0 var(--r-s) var(--r-s)}
/* แถวที่มีบรรทัดเสริมข้างใต้ (ล็อต · วันหมดอายุ · ต้นทุนที่ปันเข้า) ถูกห่อไว้อีกชั้น
   กรอบจึงต้องอยู่ที่ตัวห่อ ไม่งั้นบรรทัดเสริมจะหลุดออกไปนอกตาราง */
.lad-item{background:var(--surface);border:1px solid var(--line);border-top:none;
          padding:7px 10px 4px}
.lad-item+.lad-item{border-top:none}
.lad-item:last-of-type{border-radius:0 0 var(--r-s) var(--r-s)}
.lad-item .lad-row.edit{border:none;padding:0;background:none}

.lad-row.edit,.lad-group:has(.lad-row.edit)>.lad-head{
  grid-template-columns:42px minmax(0,1fr) 158px 92px 92px 24px}
.lad-row.edit.pu6,.lad-group:has(.lad-row.edit)>.lad-head.pu6{
  grid-template-columns:42px minmax(0,1fr) 148px 82px 68px 68px 88px 24px}
.lad-row.edit.ex7,.lad-group:has(.lad-row.edit)>.lad-head.ex7{
  grid-template-columns:42px minmax(0,1fr) 150px 62px 62px 88px 90px 24px}
.lad-row.edit.ch4,.lad-group:has(.lad-row.edit)>.lad-head.ch4{
  grid-template-columns:42px minmax(0,1fr) 176px 104px 24px}
/* ช่วง 721–900px ยังเป็นตารางอยู่ แค่บีบคอลัมน์ให้แคบลง
   ต่ำกว่า 721px จะกลายเป็นบรรทัดๆ (กฎถัดไป) จึงต้องกันช่วงล่างออกจากกฎนี้
   ไม่งั้นกฎตารางจะมาทับกฎบรรทัดเพราะเขียนทีหลังในไฟล์ */
@media(min-width:721px) and (max-width:900px){
  .lad-row.edit.pu6,.lad-group:has(.lad-row.edit)>.lad-head.pu6{
    grid-template-columns:34px minmax(0,1fr) 130px 70px 58px 58px 78px 22px}
  .lad-row.edit.ex7,.lad-group:has(.lad-row.edit)>.lad-head.ex7{
    grid-template-columns:34px minmax(0,1fr) 120px 54px 54px 74px 78px 22px}
  .lad-row.edit.ch4,.lad-group:has(.lad-row.edit)>.lad-head.ch4{
    grid-template-columns:34px minmax(0,1fr) 138px 84px 22px}
}
@media(max-width:720px){
  /* จอแคบวางเป็นบรรทัดๆ ไม่ใช่ตาราง — เลขลำดับไม่มีคอลัมน์ให้อยู่ */
  .lad-row.edit,
  .lad-row.edit.pu6,.lad-row.edit.ex7,.lad-row.edit.ch4{
    grid-template-columns:1fr 1fr}
  .lad-row.edit::before{display:none}
  .lad-row.edit{border-inline:none;border-radius:0}
  .lad-item{border-inline:none}
  .lad-group:has(.lad-row.edit)>.lad-head{display:none}
}
@media(max-width:560px){
  .modal-topbar{padding:8px 14px;gap:8px 12px}
  .modal.page>.modal-body{padding:12px 14px 80px}
  .dp-no{font-size:17px}
  .modal.page .modal-topbar>.modal-foot .btn{font-size:12.5px;padding:6px 11px}
  .dh{padding:14px 14px 4px}
}

/* ปุ่มลบท้ายแถว — ถังขยะเหมือนใบในโปรแกรมบัญชี ไม่ใช่กากบาท
   วาดด้วย mask เพื่อให้ไอคอนใช้สีเดียวกับตัวอักษร (currentColor ใช้ใน background-image ไม่ได้)
   ตัว × ในโค้ดยังอยู่ครบ — ซ่อนด้วย font-size:0 เพื่อให้ screen reader ยังอ่านได้จาก aria-label */
.lad-row .x{font-size:0;color:var(--ink-3)}
.lad-row .x::before{
  content:"";display:block;width:13px;height:13px;background:currentColor;
  --trash:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3 4h10M6.4 4V2.6h3.2V4M4.3 4l.6 9.4h6.2L11.7 4M6.6 6.3v5M9.4 6.3v5" fill="none" stroke="black" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  -webkit-mask:var(--trash) center/13px no-repeat;
          mask:var(--trash) center/13px no-repeat}
.lad-row .x:hover{color:var(--danger)}


/* ── หัวกล่องแบบมีตราไอคอน + กล่องกรอกข้อมูลแบบแบ่งหัวข้อ (7 ก.ย. 2569) ──
   ทำตามฟอร์มตัวอย่างที่ผู้ใช้ส่งมา (ดู forms/ui/โซนซื้อ.md)
   ใช้กับกล่อง "เพิ่มสินค้า" และ "เพิ่มผู้ขาย" ที่ย้ายจากแผงขวามาเป็นกล่องกลางจอ */
.mhead{display:flex;align-items:center;gap:11px;min-width:0}
.mhead-ico{width:34px;height:34px;border-radius:9px;flex:none;display:grid;
           place-items:center;background:var(--accent-sf);color:var(--accent)}
.mhead-ico.ok{background:var(--ok-sf);color:var(--ok)}
.mhead h3{font-size:17px;letter-spacing:-.02em}
.mhead p{margin:1px 0 0;font-size:12.5px;color:var(--ink-3)}

/* หัวข้อในฟอร์ม มีแท่งสีนำหน้า อ่านง่ายกว่าตัวพิมพ์เล็กจางๆ แบบเดิม
   เฉพาะในกล่องกลางจอ — ในแผงขวายังใช้แบบเดิม ไม่ต้องไปแก้ของที่ยังใช้ได้ */
.modal .p-sec-t{font-size:13px;text-transform:none;letter-spacing:-.01em;
                font-weight:650;color:var(--ink);display:flex;align-items:center;
                gap:8px;margin-bottom:12px}
.modal .p-sec-t::before{content:"";width:3px;height:14px;border-radius:2px;
                        background:var(--accent);flex:none}
.modal .p-sec{padding:16px 0}
.modal .p-sec:first-child{padding-top:2px}

/* ช่องกรอกในกล่องกว้างกว่าแผงเยอะ — ปล่อยให้ยืดเต็มความกว้างจะอ่านยาก
   จับเป็นตาราง 3 คอลัมน์ตามฟอร์มตัวอย่าง · จอแคบยุบเหลือคอลัมน์เดียวเอง */
@media (min-width:820px){
  .modal .p-sec>.row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
                     align-items:end}
  .modal .p-sec>.row>label[style*="flex:2"]{grid-column:span 2}
}


/* ══ หน้าตาโซนซื้อ ขั้น E+F (7 ก.ย. 2569) — ดู forms/ui/โซนซื้อ.md ══════════
   ทำตามฟอร์มตัวอย่างที่ผู้ใช้ส่งมา แต่ใช้สีของแบรนด์เอง ไม่ได้ลอกสีฟ้า/เขียวมา
   (ผู้ใช้เลือก "ผสม" — พื้นขาวขึ้น แต่คงสีเน้นเดิม) */

/* ── E1. การ์ดตัวเลข มีพื้นสีจาง + ไอคอนมุมขวาบน ── */
.kpi{position:relative}
.kpi-ico{position:absolute;top:12px;inset-inline-end:12px;width:30px;height:30px;
         border-radius:50%;display:grid;place-items:center;opacity:.85}
.kpi-label{padding-inline-end:36px}          /* กันหัวข้อยาวไปชนไอคอน */
.kpi.t-accent{background:var(--accent-sf);border-color:#CFDCEA}
.kpi.t-accent .kpi-ico{background:#D5E1EF;color:var(--accent)}
.kpi.t-ok{background:var(--ok-sf);border-color:#CFE0C6}
.kpi.t-ok .kpi-ico{background:#D6E6CC;color:var(--ok)}
.kpi.t-warn{background:var(--warn-sf);border-color:#E7D79C}
.kpi.t-warn .kpi-ico{background:#EEDFA8;color:var(--warn)}
.kpi.t-danger{background:var(--danger-sf);border-color:#EFC9BE}
.kpi.t-danger .kpi-ico{background:#F2D2C8;color:var(--danger)}
.kpi.t-brand{background:var(--brand-sf);border-color:#F2CDB9}
.kpi.t-brand .kpi-ico{background:#F7D8C6;color:var(--brand)}

/* ── E2. แถบค้นหา + เครื่องมือ เหนือตาราง ── */
.tbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
      padding:10px 12px;border:1px solid var(--line);border-bottom:none;
      border-radius:var(--r) var(--r) 0 0;background:var(--surface)}
.tbar+.tw{border-radius:0 0 var(--r) var(--r);border-top:none}
.tbar-s{position:relative;flex:1 1 260px;min-width:0;display:flex;align-items:center}
.tbar-s svg{position:absolute;inset-inline-start:10px;color:var(--ink-3);pointer-events:none}
.tbar-s input{width:100%;padding:8px 12px 8px 32px;border:1px solid var(--line-2);
              border-radius:var(--r-s);background:var(--surface);font-size:13px}
.tbar-s input::-webkit-search-cancel-button{cursor:pointer}
.tbar-n{font-size:12px;color:var(--ink-3);white-space:nowrap}

/* ── F1. หัวเอกสารเป็นแผงคู่ มีหัวสี ── */
.dh{gap:14px 16px}
.dh-l.dh-p,.dh-r.dh-p{border:1px solid var(--line);border-radius:var(--r);
            background:var(--surface);padding:0 14px 12px}
.dh-l.dh-p{max-width:none}
.dh-r.dh-p{align-items:stretch}
.dh-pt{display:flex;align-items:center;gap:8px;margin:0 -14px 12px;padding:9px 14px;
       font-size:12.5px;font-weight:650;letter-spacing:-.01em;
       border-radius:var(--r) var(--r) 0 0;border-bottom:1px solid var(--line)}
.dh-pt svg{flex:none}
.dh-pt.ok{background:var(--ok-sf);color:var(--ok)}
.dh-pt.ac{background:var(--accent-sf);color:var(--accent)}
.dh-r.dh-p .dh-total{text-align:start}
.dh-r.dh-p .dh-side label>span{text-align:start}
.dh-r.dh-p .dh-side{max-width:none}
.dh-r.dh-p .dh-side .ro{text-align:start}

/* ── F2. กล่องสรุปยอด แจกแจงทีละบรรทัด อยู่มุมขวาล่างของตาราง ── */
.dsum-wrap{display:flex;justify-content:flex-end;margin-top:12px}
.dsum{width:min(340px,100%);border:1px solid var(--line);border-radius:var(--r);
      background:var(--surface-2);overflow:hidden}
.dsum-t{padding:8px 13px;font-size:11.5px;font-weight:650;color:var(--ink-2);
        background:var(--surface-3);border-bottom:1px solid var(--line)}
.dsum-r{display:flex;justify-content:space-between;gap:12px;padding:6px 13px;font-size:13px}
.dsum-r>span:first-child{color:var(--ink-2)}
.dsum-r>span:last-child{font-variant-numeric:tabular-nums;font-weight:550}
.dsum-r.hi>span:last-child{color:var(--accent)}
.dsum-r.tot{border-top:1px solid var(--line-2);margin-top:4px;padding:9px 13px 11px}
.dsum-r.tot>span:first-child{color:var(--ink);font-weight:650}
.dsum-r.tot>span:last-child{font-size:17px;font-weight:700;letter-spacing:-.02em;
                            color:var(--brand)}
.dsum-r .i{font-style:normal;color:var(--ink-3);font-size:11px}


/* ── แผงข้อมูลผู้ขาย / ข้อมูลเอกสาร ให้เหมือนฟอร์มตัวอย่างภาพที่ 3 ──
   ช่องอ่านอย่างเดียว หน้าตาเหมือนช่องกรอกแต่พื้นจางกว่า จะได้รู้ว่าพิมพ์ทับไม่ได้ */
.ro-f{border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface-2);
      padding:8px 10px;font-size:13px;min-height:36px;line-height:1.45;color:var(--ink)}
.ro-f .none{color:var(--ink-3)}
.dh-p label{margin-bottom:10px}
.dh-p label>span{display:block;font-size:11px;color:var(--ink-3);margin-bottom:4px}
.dh-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}

/* ช่องเลือกผู้ขาย + ปุ่มกลม เพิ่ม/แก้ไข วางเรียงกันแบบฟอร์มตัวอย่าง */
.sup-pick{display:flex;gap:6px;align-items:center}
.sup-pick select{flex:1;min-width:0}
.rbtn{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
      border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2)}
.rbtn:hover{border-color:var(--accent);color:var(--accent)}
.rbtn.ok{border-color:#BFD6B3;background:var(--ok-sf);color:var(--ok)}
.rbtn.ok:hover{border-color:var(--ok)}
.rbtn:disabled{opacity:.4;cursor:not-allowed}
.rbtn:disabled:hover{border-color:var(--line-2);color:var(--ink-2)}

/* แผงเอกสารเลิกจัดชิดขวาแล้ว — ช่องกรอกเรียงซ้ายเหมือนแผงผู้ขาย อ่านคู่กันง่ายกว่า */
.dh-r.dh-p .dh-side label{display:block;grid-template-columns:none}
.dh-r.dh-p .dh-side label>span{white-space:normal}
.dh-r.dh-p .dh-total{margin-bottom:10px;padding-bottom:10px;
                     border-bottom:1px solid var(--line)}
.dh-r.dh-p .dh-total b{font-size:23px}


/* ── แถวส่วนลดท้ายบิลในกล่องสรุป — กรอกได้เลย ไม่ต้องกดปุ่มเปิดช่องก่อน ── */
.dsum-r.dd{align-items:center;padding-top:3px;padding-bottom:3px}
.dsum-r.dd>span:last-child{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.dd-in{width:96px;text-align:end;padding:5px 8px;font-size:12.8px}
.dd-v{font-variant-numeric:tabular-nums;font-weight:550;white-space:nowrap}

/* ── ปุ่มเพิ่มสินค้าใหม่จากในเอกสาร (ขั้น C) ── */
.pcell{min-width:0}
.pcell-row{display:flex;gap:6px;align-items:center;min-width:0}
.pcell-row .cbx{flex:1;min-width:0}
.rbtn.sm{width:28px;height:28px}


/* ── ตัวกรองในแถบเครื่องมือ (ช่วงวันที่ ฯลฯ) ── */
.tbar-f{display:flex;align-items:center;gap:6px;margin:0;white-space:nowrap}
.tbar-f>span{font-size:11.5px;color:var(--ink-3);margin:0}
.tbar-f select,.tbar-f input{padding:6px 8px;font-size:12.8px;
  border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--surface)}


/* ── เอกสารฝั่งขาย — จัดตามฟอร์มตัวอย่างที่ผู้ใช้ส่งมา (8 ก.ย. 2569) ──────
   ผู้ใช้บอกว่าของเดิม "ไม่สวย ขอให้ดูสมมาตรมากขึ้น"
   สิ่งที่ทำให้ฟอร์มตัวอย่างดูเป็นระเบียบคือ **ค่าทุกบรรทัดเริ่มที่ตำแหน่งเดียวกัน**
   ไม่ใช่ป้ายชิดขวาแล้วค่าเยื้องไปมาตามความยาวป้าย (ซึ่งเป็นแบบเดิม) */

/* สองคอลัมน์กว้างเท่าๆ กัน — ซ้ายผู้ขาย+ลูกค้า · ขวาชื่อเอกสาร+ตารางข้อมูล */
.prn-doc .prn-head{gap:22px;align-items:flex-start}
.prn-doc .prn-head-l{flex:1 1 54%}
.prn-doc .prn-head-r{flex:0 0 42%;text-align:start}

/* บล็อกลูกค้าอยู่ใต้ผู้ขาย เว้นระยะให้เห็นว่าเป็นคนละก้อน */
.prn-cust{margin-top:13px}
.prn-cust .prn-party-t{color:#c02a52;font-size:11px;font-weight:700;margin-bottom:2px}

/* ชื่อเอกสารชิดขวาเหมือนตัวอย่าง แต่ตารางข้อมูลข้างล่างชิดซ้ายในคอลัมน์ตัวเอง */
.prn-doc .prn-head-r .prn-title-t{text-align:end;font-size:19px}
.prn-doc .prn-head-r .prn-title-e{text-align:end}

/* ตารางข้อมูลเอกสาร — เส้นคั่นบน-ล่าง · ป้ายคอลัมน์กว้างคงที่ ค่าจึงตรงกันทุกบรรทัด */
.prn-box{width:100%;border-collapse:collapse;margin-top:9px}
.prn-box + .prn-box{margin-top:0}
.prn-box:first-of-type{border-top:1px solid #bbb}
.prn-box tr:last-child td{padding-bottom:7px}
.prn-box{border-bottom:1px solid #bbb}
.prn-box td{border:none;padding:2px 0;font-size:11.4px;vertical-align:top}
.prn-box td.k{width:84px;color:#777;white-space:nowrap;padding-inline-end:8px}
.prn-box td.v{color:#111;word-break:break-word}
.prn-box td.v.hi{font-weight:700;font-family:var(--mono);letter-spacing:-.02em}
.prn-box tr:first-child td{padding-top:7px}

/* ตารางสินค้า — ความกว้างคอลัมน์คงที่ ทุกใบจึงหน้าตาเหมือนกันไม่ว่าจะมีกี่บรรทัด */
.prn-doc .prn-tbl{table-layout:fixed}
.prn-doc .prn-tbl .n{width:24px}
.prn-doc .prn-tbl .q{width:80px}
.prn-doc .prn-tbl .a{width:80px}
.prn-doc .prn-tbl td{vertical-align:top}
.prn-doc .prn-tbl th{font-weight:600;font-size:10.8px;letter-spacing:.01em}

/* ยอดรวมกว้างเท่ากับ 2 คอลัมน์ขวาของตาราง จะได้เรียงตรงกับคอลัมน์ยอดรวมพอดี */
.prn-doc .prn-sum{min-width:210px}
.prn-doc .prn-sum td:first-child{white-space:nowrap}
.prn-doc .prn-sum .a{min-width:86px}

/* ช่องเซ็นสองฝั่งกว้างเท่ากัน อยู่กึ่งกลางของครึ่งกระดาษแต่ละข้าง */
.prn-doc .prn-signs{gap:56px;margin-top:26px}

/* สาขาต่อท้ายชื่อบริษัท ตัวเบากว่าชื่อเล็กน้อย ให้อ่านเป็นก้อนเดียวกัน */
.prn-doc .prn-co-name{line-height:1.3}
.prn-doc .prn-co-name .prn-br{font-size:.82em;font-weight:500}
.prn-doc .prn-co{align-items:flex-start;margin-bottom:6px}


/* ── ปรับตามโน้ตที่ผู้ใช้เขียนบนฟอร์ม (8 ก.ย. 2569) ────────────────────
   "ขยับมาด้านขวา ให้ตรงกับ ใบเสนอราคา" · "ขยายมาให้เต็ม" ·
   "เว้นที่ให้รายละเอียดสินค้าด้วยถ้ามี" · "ควรเป็นไซส์ A4" */

/* กล่องข้อมูลเอกสารชิดขวาสุด ให้ขอบขวาตรงกับคำว่า "ใบเสนอราคา" พอดี */
.prn-doc .prn-head-r{flex:0 0 62mm;max-width:62mm;margin-inline-start:auto}
.prn-doc .prn-box{width:100%;margin-inline-start:auto}

/* บรรทัดว่างในตารางสูงขึ้น — เผื่อที่เขียนรายละเอียดสินค้าด้วยมือบนกระดาษ */
.prn-doc .prn-tbl tr.blank td{height:26px}
/* บรรทัดที่มีรายละเอียดจริง เว้นระยะให้อ่านสบาย ไม่ติดบรรทัดถัดไป */
.prn-doc .prn-tbl td{padding-block:7px}
.prn-doc .prn-desc{margin-top:3px;line-height:1.45}

/* เนื้อหาดันท้ายกระดาษลงไปอยู่ล่างสุดของ A4 ไม่ลอยกลางหน้า */
.prn-doc .prn-signs{margin-top:auto;padding-top:26px}
.prn-doc .prn-foot{margin-top:14px}

/* บล็อกบัญชีรับเงินบนเอกสารขาย — วางคู่กับหมายเหตุ ไม่ให้ดันช่องเซ็นลงไป */
.prn-bank{margin-top:10px;font-size:11.4px;line-height:1.55}
.prn-bank b{color:#c02a52;font-size:10.6px;display:block;margin-bottom:2px}
.prn-bank-b{color:#333}

/* หลายบัญชีเรียงข้างกัน — มี 3 บัญชีก็ยังอยู่ในบรรทัดเดียวไม่ดันช่องเซ็นลง */
.prn-banks{display:flex;gap:24px;flex-wrap:wrap}


/* ═══ ต้นฉบับ / สำเนา (9 ก.ย. 2569) ═══════════════════════════════
   เอกสารภาษีต้องระบุเสมอว่าแผ่นไหนเป็นต้นฉบับ แผ่นไหนเป็นสำเนา
   ดู forms/ใบกำกับภาษี-ใบเสร็จรับเงิน.md */
.prn-copybar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}

/* ชื่อเอกสารยาวขึ้น (มีคำว่าต้นฉบับ/สำเนานำหน้า) ลดขนาดลงหน่อยให้อยู่ใน
   คอลัมน์ขวากว้าง 62mm ได้ไม่เกินสองบรรทัด — ยังใหญ่กว่าตัวอื่นทั้งหน้าอยู่ดี */
.prn-doc .prn-head-r .prn-title-t.long{font-size:16px;line-height:1.2}

/* สองแผ่นในหน้าตัวอย่าง ต้องเห็นชัดว่าเป็นคนละแผ่น */
.prn-preview .prn-doc + .prn-doc{margin-top:18px}

/* ═══ ใบวางบิล (9 ก.ย. 2569) ═══════════════════════════════════
   ดู js/billnote.js — ใบปะหน้าที่รวมใบกำกับภาษีหลายใบของลูกค้ารายเดียว */

/* แถวใบกำกับภาษีในใบวางบิล — โครงเดียวกับแถวสินค้า แค่คนละจำนวนคอลัมน์ */
.lad-row.bn4{grid-template-columns:minmax(0,1fr) 108px 108px 58px;align-items:start}
.lad-row.bn4>span:first-child{padding-top:1px}
.lad-row.bn4 .q,.lad-row.bn4 .a{padding-top:2px}
.lad-row.bn4 .a.bad{color:var(--danger)}
.bn-act{display:flex;gap:5px;justify-content:flex-end}

/* รายการติ๊กเลือกใบกำกับภาษีเข้าใบวางบิล */
.pickrow{display:grid;grid-template-columns:20px minmax(0,1fr) 96px;gap:4px 10px;
         align-items:center;border:1px solid var(--line);border-radius:var(--r-s);
         padding:9px 12px;cursor:pointer}
.pickrow:hover{background:var(--surface-2)}
.pickrow.is-on{border-color:color-mix(in srgb,var(--accent) 40%,transparent);
               background:var(--accent-sf)}
.pickrow input{width:16px;height:16px;margin:0;grid-row:1/3;align-self:center}
.pickrow-m{display:flex;align-items:center;gap:7px;min-width:0}
.pickrow-d{grid-column:2;font-size:11.5px;color:var(--ink-3)}
.pickrow-n{grid-column:3;grid-row:1/3;text-align:end;
           font-variant-numeric:tabular-nums;font-weight:600}

/* ตารางใบวางบิลตอนพิมพ์ — 7 คอลัมน์ ช่องวันที่ต้องกว้างพอใส่ "24 ก.ย. 2569" */
.prn-doc .prn-tbl-bn .q{width:88px}
.prn-doc .prn-tbl-bn .a{width:76px}

/* ═══ สถานะ: สีชุดเดียวทั้งแอป + ตัวกรองแบบ dropdown (9 ก.ย. 2569) ═══
   ดู ST_TONE / mountStatusFilter ใน js/core.js */

/* ป้ายแดง — ของเดิมมีแค่เขียว(lot) เหลือง(credit) เทา(soft)
   พอไม่มีแดง สถานะ "เลยกำหนดชำระ" เลยกลมกลืนไปกับสถานะปกติ */
.tag.bad{background:var(--danger-sf);color:var(--danger)}

/* กันคลาสผีที่เคยเขียนไว้ตามหน้าต่างๆ ไม่ให้หายไปเฉยๆ อีก
   (ของเดิม class="dot ok" / class="tag warn" ไม่มีนิยามใน CSS เลย) */
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;
     margin-inline-end:6px;background:var(--line-2);vertical-align:middle}
.dot.ok{background:var(--ok)}
.dot.warn{background:var(--warn)}
.dot.bad{background:var(--danger)}
.tag.ok{background:var(--ok-sf);color:var(--ok)}
.tag.warn{background:var(--accent-sf);color:var(--accent)}

/* แถบตัวกรองสถานะ */
.stbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.stsel{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line-2);
       border-radius:var(--r-s);background:var(--surface);overflow:hidden;
       transition:border-color .12s,background .12s}
.stsel-l{padding:0 10px;font-size:11.5px;font-weight:600;color:var(--ink-3);
         background:var(--surface-2);align-self:stretch;display:flex;align-items:center;
         border-inline-end:1px solid var(--line)}
.stsel select{border:0;background:transparent;padding:7px 10px;font-size:13px;
              font-weight:550;color:var(--ink);min-width:190px;max-width:100%}
.stsel select:focus{outline:none}
.stsel.is-on{border-color:color-mix(in srgb,var(--accent) 42%,transparent)}
.stsel.is-on.ok{border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.stsel.is-on.bad{border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
.stsel.is-on.wait{border-color:color-mix(in srgb,var(--warn) 50%,transparent)}
.stsel-x{border:0;background:transparent;color:var(--ink-3);font-size:12px;
         padding:5px 8px;border-radius:6px;cursor:pointer}
.stsel-x:hover{background:var(--surface-3);color:var(--ink)}

@media screen and (max-width:560px){
  .stsel{width:100%}
  .stsel select{flex:1;min-width:0}
}

/* ปุ่มวางบิลตามใบส่ง ในการ์ด "ใบส่งสินค้าจากใบนี้" ของคำสั่งขาย (9 ก.ย. 2569) */
.so-dn{display:flex;flex-direction:column;gap:4px}
.so-dn-x{align-self:flex-end;font-size:11.5px;padding:3px 9px}
span.so-dn-x{color:var(--ok);font-weight:600}

/* ═══ ใบกำกับภาษีอย่างย่อ — สลิป (9 ก.ย. 2569) ═══════════════════
   ไม่ใช่ A4 · ใช้โครง .receipt ตัวเดียวกับหน้าขายบูธ ดู ivAbbrHtml() */
.prn-slipwrap{background:var(--surface-2);border:1px solid var(--line);
              border-radius:var(--r);padding:20px;display:flex;justify-content:center}
.prn-slipwrap .receipt{width:80mm;max-width:100%;box-shadow:0 2px 14px rgba(0,0,0,.09)}

@media print{
  /* สลิปพิมพ์กลางหน้า A4 — ร้านส่วนใหญ่ยังไม่มีเครื่องพิมพ์สลิปแยก
     ถ้าวันหลังมีเครื่องสลิป ค่อยเปลี่ยน @page ตรงนี้เป็น size:80mm auto */
  body.printing #printArea .prn-slip{display:flex;justify-content:center;padding-top:10mm}
  body.printing #printArea .receipt{width:80mm;border:0;box-shadow:none}
}

/* ═══ สมุดบัญชี: รายการเดินบัญชี + กระทบยอด (11 ก.ย. 2569) ═══════════
   ดู js/ledger.js */
.lg-tbl td.in{color:var(--ok);font-weight:600}
.lg-tbl td.out{color:var(--ink)}
.lg-tbl tr.pre td{color:var(--ink-3)}
.lg-tbl tr.open td{background:var(--surface-2);font-weight:600}
.lg-tbl tr.clk{cursor:pointer}
.lg-tbl tr.clk:hover td{background:var(--surface-2)}
.lg-ok{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;
       font-size:11px;font-weight:700;background:var(--ok-sf);color:var(--ok)}
.acc-bal{text-align:end}
.acc-bal b{font-size:15px;font-variant-numeric:tabular-nums;display:block}
.acc-bal b.neg{color:var(--danger)}

.rcn-row{display:grid;grid-template-columns:20px 84px minmax(0,1fr) 112px;gap:8px;
         align-items:center;padding:7px 4px;border-bottom:1px solid var(--line);cursor:pointer}
.rcn-row:hover{background:var(--surface-2)}
.rcn-row input{width:16px;height:16px;margin:0}
.rcn-row .d{font-size:12px;color:var(--ink-3)}
.rcn-row .t{min-width:0;font-size:13px}
.rcn-row .t .sub{display:block;font-size:11.5px}
.rcn-row .a{text-align:end;font-variant-numeric:tabular-nums;font-weight:600}
.rcn-row .a.in{color:var(--ok)}
.rcn-list{max-height:46vh;overflow:auto;border:1px solid var(--line);border-radius:var(--r-s)}
.rcn-diff{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.rcn-diff.ok{color:var(--ok)}
.rcn-diff.bad{color:var(--danger)}

/* ═══ รายงานการเงิน (11 ก.ย. 2569) ═══════════════════════════════
   ดู js/reports.js · แผนงาน-บัญชี.md */
.fin-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.fin-ctl{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2)}
.fin-ctl input[type=month]{padding:5px 8px}
.fin-chk{cursor:pointer}
.fin-chk input{width:16px;height:16px;margin:0}
.fin-card{margin-bottom:14px}
.fin-card .tw{margin:0;border:0;border-radius:0;box-shadow:none}
.fin-tbl td,.fin-tbl th{white-space:nowrap}
.fin-tbl tfoot td{border-top:2px solid var(--line-2);background:var(--surface-2)}
.fin-tbl tr.clk{cursor:pointer}
.fin-tbl tr.clk:hover td{background:var(--surface-2)}
.fin-tbl tr.fin-sub td{background:var(--surface-2);font-size:12.5px}
.fin-tbl tr.fin-sub td:first-child{padding-inline-start:30px}
.fin-caret{display:inline-block;width:12px;color:var(--ink-3)}
.fin-tbl .fin-late{color:var(--danger)}
.fin-tbl td.fin-tot{background:var(--surface-2);font-weight:600}
.fin-tbl tr.fin-cur td{background:var(--accent-sf)}
.fin-pl tr.fin-h td{font-size:10.5px;letter-spacing:.06em;color:var(--ink-3);
                    background:var(--surface-2);padding-top:10px}
.fin-pl tr.fin-b td{border-top:1px solid var(--line-2)}
.fin-pl tr.fin-net td{border-top:2px solid var(--ink);font-weight:700;background:var(--surface-2)}
.fin-pl tr.fin-pct td{color:var(--ink-3);font-size:12px}
.fin-note{margin-bottom:12px}
.fin-meter{height:12px;border-radius:999px;background:var(--accent-sf);overflow:hidden}
.fin-meter i{display:block;height:100%;border-radius:999px;background:var(--accent)}
.fin-meter.warn{background:var(--warn-sf)}   .fin-meter.warn i{background:var(--warn)}
.fin-meter.bad{background:var(--danger-sf)}  .fin-meter.bad i{background:var(--danger)}
.fin-meter-l{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-3);margin-top:6px}

/* กราฟคาดการณ์ — เส้น 2px · จุดปลาย r4 มีวงพื้นหลัง 2px · กริดเส้นผมทึบ ไม่ใช้เส้นประ
   สีเส้นตั้งที่ --fc-est / --fc-known (ผ่านตัวตรวจสีแล้ว — ดูบันทึกใน process.md) */
.fc-wrap{position:relative;outline:none}
.fc-wrap:focus-visible{box-shadow:0 0 0 2px var(--accent-sf);border-radius:8px}
.fc-svg{width:100%;height:auto;display:block;overflow:visible}
.fc-grid{stroke:var(--line);stroke-width:1}
.fc-grid.zero{stroke:var(--danger);stroke-opacity:.6}
.fc-tick{font-size:11px;fill:var(--ink-3);font-variant-numeric:tabular-nums}
.fc-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.fc-line.est{stroke:var(--fc-est)}
.fc-line.known{stroke:var(--fc-known)}
.fc-line.known.solo{stroke:var(--fc-est)}
.fc-dot{stroke:var(--surface);stroke-width:2}
.fc-dot.est{fill:var(--fc-est)}
.fc-dot.known{fill:var(--fc-known)}
.fc-dot.known.solo{fill:var(--fc-est)}
.fc-lbl{font-size:12px;font-weight:600;fill:var(--ink)}
.fc-cross{stroke:var(--ink-3);stroke-width:1}
.fc-hit{fill:transparent;cursor:crosshair}
.fc-tip{position:absolute;top:6px;min-width:176px;background:var(--surface);border:1px solid var(--line);
        border-radius:8px;box-shadow:var(--shadow);padding:8px 10px;font-size:12px;pointer-events:none}
.fc-tip-h{color:var(--ink-3);margin-bottom:4px}
.fc-tip-r{display:flex;align-items:center;gap:8px;line-height:1.75}
.fc-tip-r b{font-variant-numeric:tabular-nums;color:var(--ink)}
.fc-tip-r span{color:var(--ink-3)}
.fc-key{display:inline-block;width:14px;height:0;border-top:2px solid var(--fc-est);flex:none}
.fc-key.known{border-top-color:var(--fc-known)}
.fc-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);margin-bottom:6px}
.fc-legend span{display:inline-flex;align-items:center;gap:6px}

/* สีเส้นกราฟคาดการณ์ — ตรวจด้วย validate_palette.js แล้ว (11 ก.ย. 2569)
   #2A66C9 ผ่านทุกข้อ · คู่กับ #9A8C82 แยกกันได้ทั้งตาปกติ (ΔE 22.4) และตาบอดสี (ΔE 19.6)
   #9A8C82 ตก "chroma floor" โดยตั้งใจ — เป็นเส้นรองแบบเน้นเส้นเดียว ทำให้อีกเส้นเป็นสีเทา
   มีคำอธิบายเส้น + ป้ายจุดต่ำสุด + ตารางข้อมูลชุดเดียวกัน จึงไม่ได้พึ่งสีอย่างเดียว
   ⚠️ ไม่ใช้ --accent (#35618F) ตรงๆ เพราะตรวจแล้วสีหม่นเกินเกณฑ์สำหรับเส้นข้อมูล */
.fin-card{--fc-est:#2A66C9;--fc-known:#9A8C82}
/* KPI สีเขียว — ใช้กับกำไรสุทธิ/เงินสดสุทธิที่เป็นบวก (รายงานการเงิน 11 ก.ย. 2569) */
.kpi-val.ok{color:var(--ok)}

/* ═══ ช่วงวันที่ + ส่งออก Excel · จัดแท็บรายงานใหม่ (11 ก.ย. 2569) ═══════
   ⚠️ .seg ตัวกลางตั้ง margin-inline-start:auto ไว้ (ให้ชิดขวาในหัวการ์ด)
   ในหน้ารายงานแท็บเลยถูกดันไปขวาสุด — ผู้ใช้วงให้ย้ายมาชิดซ้ายใต้หัวเรื่อง
   ต้องล้างทิ้งเฉพาะที่นี่ ห้ามไปแก้ .seg ตัวกลาง เดี๋ยวหน้าอื่นเพี้ยน */
.fin-tabs{margin-bottom:10px}
.fin-tabs .seg,.fin-ctl-row .seg{margin-inline-start:0}
.fin-ctl-row{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-bottom:14px}
.fin-range{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.fin-ctl-row .fin-export{margin-inline-start:auto}
/* กลุ่มปุ่มส่งออก + ชุดปิดเดือน (17 ก.ย. 2569) — ชิดขวาเป็นก้อนเดียว แถวเต็มแล้วขึ้นบรรทัดใหม่ไปด้วยกัน */
.fin-ctl-row .fin-actions{display:flex;flex-wrap:wrap;gap:8px;margin-inline-start:auto}
.fin-ctl-row .fin-actions .fin-export{margin-inline-start:0}
.fin-ctl-row .tbar-n{font-size:12px;color:var(--ink-3)}
.lg-range{padding:0 0 12px}

/* ═══ รายงานสต๊อก (11 ก.ย. 2569) — ดู js/stockreport.js ═══════════════ */
.fin-tbl tr.stk-grp th{text-align:center;border-bottom:1px solid var(--line);
                       font-size:10.5px;letter-spacing:.05em;color:var(--ink-3)}
.fin-tbl th.stk-l,.fin-tbl td.stk-l{border-inline-start:1px solid var(--line)}
.stk-back{margin-bottom:10px}

/* ช่องคลัง/สินค้าในรายงานสต๊อก = mountMultiPick (ท้ายไฟล์) · วันที่รับ/จ่ายล่าสุดไม่ตัดบรรทัด */
.stk-pick{gap:6px}
.fin-tbl th.stk-dt,.fin-tbl td.stk-dt{white-space:nowrap;font-size:12px}
/* สินค้าคงเหลือแยกกลุ่ม (16 ก.ย. 2569) — ตาราง 2 คอลัมน์ ไม่ต้องกว้างขั้นต่ำ 820px แบบตารางข้อมูล (บรรทัด table{} ด้านบน)
   ไม่งั้นตัวเลขล้นไปขอบขวาจนมองไม่เห็น */
.fin-tbl.stk-inv{min-width:0;max-width:560px}

/* ═══ เงินรับมัดจำ (17 ก.ย. 2569) — js/saleinvoice.js · สเปก forms/ใบกำกับภาษีเงินมัดจำ.md ═══ */
.dep-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;
          border-top:1px solid var(--line);font-size:13.5px}
.lad-t + .dep-line{border-top:0}
.dep-in{display:flex;align-items:center;gap:6px;white-space:nowrap}
.dep-in .inp{width:130px;text-align:end;padding:4px 8px}
.dp-quick{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 4px}

/* ═══ ช่องเลือกหลายรายการ พิมพ์ค้น + ติ๊ก (11 ก.ย. 2569) — mountMultiPick ใน core.js ═══ */
.msel{position:relative}
.msel-bar{display:flex;align-items:center;gap:2px}
.msel-btn{display:inline-flex;align-items:center;gap:8px;min-width:170px;max-width:300px;
          padding:6px 10px;border:1px solid var(--line-2);border-radius:var(--r-s);
          background:var(--surface);font-size:12.8px;color:var(--ink);text-align:start;cursor:pointer}
.msel-btn:hover{border-color:var(--ink-3)}
.msel-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msel-car{color:var(--ink-3);font-size:10px}
.msel-btn.is-on{border-color:color-mix(in srgb,var(--accent) 45%,transparent);
                background:var(--accent-sf);font-weight:600}
.msel.is-open .msel-btn{border-color:var(--accent)}
.msel-x{border:0;background:transparent;color:var(--ink-3);font-size:17px;line-height:1;
        padding:3px 7px;border-radius:6px;cursor:pointer}
.msel-x:hover{background:var(--surface-3);color:var(--ink)}
.msel-pop{position:absolute;z-index:30;top:calc(100% + 4px);inset-inline-start:0;width:400px;max-width:92vw;
          background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
          box-shadow:var(--shadow-lg);padding:10px;display:flex;flex-direction:column;gap:8px;white-space:normal}
.msel-q{width:100%;padding:7px 9px;border:1px solid var(--line-2);border-radius:var(--r-s);font-size:13px}
.msel-acts{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.msel-acts button{border:1px solid var(--line-2);background:var(--surface);border-radius:6px;
                  padding:3px 9px;font-size:12px;color:var(--ink-2);cursor:pointer}
.msel-acts button:hover{background:var(--surface-3);color:var(--ink)}
.msel-only{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-2);
           margin-inline-start:auto;cursor:pointer}
.msel-only input{width:14px;height:14px;margin:0}
.msel-list{max-height:300px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-s)}
.msel-row{display:grid;grid-template-columns:16px 64px minmax(0,1fr);gap:8px;align-items:center;
          padding:6px 9px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--line);margin:0}
.msel-row.nosub{grid-template-columns:16px minmax(0,1fr)}
.msel-row:last-child{border-bottom:0}
.msel-row:hover{background:var(--surface-2)}
.msel-row.on{background:var(--accent-sf)}
.msel-row input{width:15px;height:15px;margin:0}
.msel-row .s{font-size:11px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msel-row .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msel-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--ink-3)}
.stk-card+.stk-card{margin-top:4px}
@media screen and (max-width:560px){
  .stk-pick{width:100%}
  .stk-pick .msel{flex:1}
  .msel-btn{min-width:0;max-width:none;width:100%}
}

/* ═══ หมวดรายจ่ายที่เป็นทรัพย์สินถาวร (14 ก.ย. 2569) — ดู js/assets.js ═══
   ช่องอายุใช้งานอยู่ใต้ dropdown หมวดในช่องเดียวกัน ไม่เพิ่มคอลัมน์ให้ตาราง ex7 แน่นขึ้น */
.ex-cat{display:flex;flex-direction:column;gap:4px;min-width:0}
.ex-life{display:flex;align-items:center;gap:5px;margin:0;font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.lad-row.edit .ex-life .inp{width:58px;padding:3px 6px;font-size:12.5px}
/* วันพร้อมใช้งาน (16 ก.ย. 2569) — ช่องวันที่ต้องกว้างกว่าช่องอายุ ไม่งั้นวันที่ถูกตัด */
.lad-row.edit .ex-life.ex-ready .inp{width:132px}
.ex-asset-note{margin:10px 0 0}
@media screen and (max-width:720px){
  .lad-row.edit .ex-cat{grid-column:1/-1}
}

/* กล่องที่ต้องขึ้นเสมอแม้ปิดปุ่ม "คำอธิบาย" (14 ก.ย. 2569)
   .callout ทั้งหมดถูกซ่อนตอน body.help-off (ตั้งต้นปิด) — คำเตือนจากข้อมูลจริงห้ามหายตามไปด้วย
   ใช้คู่ finWarn() ใน reports.js และกล่องค่าเสื่อมในใบรายจ่าย (assets.js) */
body.help-off .callout.keep{display:flex}

/* ═══ ภาษีหัก ณ ที่จ่าย (15 ก.ย. 2569) — js/wht.js · สเปก forms/หนังสือรับรองการหักภาษี-ณ-ที่จ่าย.md ═══ */
.dsum-r.wht-ctl{align-items:center;padding-top:4px;padding-bottom:4px}
/* ชื่อหมวดขึ้นบรรทัดของตัวเอง — เดิมตัดกลางคำ ("ค่า/ขนส่ง") เมื่อมีช่องเลือก 2 ช่อง */
.dsum-r.wht-ctl>span:first-child{flex-shrink:0;white-space:nowrap}
.dsum-r.wht-ctl>span:first-child .i{display:block;white-space:normal}
.dsum-r.wht-ctl>span:last-child{display:flex;gap:6px;align-items:center;justify-content:flex-end;
                                flex-wrap:wrap;font-weight:500}
.dsum-r.wht-ctl select{padding:3px 6px;font-size:12px;max-width:180px}
.dsum-r.wht-ctl .inp{width:108px;padding:3px 7px;font-size:12.5px;text-align:end}
.dsum-r.tot.wht-net{margin-top:0}
.seg.wht-seg{margin:0 0 12px;margin-inline-start:0;flex-wrap:wrap}
.wht-plan{font-size:12.5px;line-height:1.65;background:var(--surface-2);border:1px solid var(--line);
          border-radius:var(--r-s);padding:8px 10px;margin:-4px 0 12px}
.wht-link{color:var(--accent);text-decoration:underline;cursor:pointer;white-space:nowrap}
.wht-sumline{font-size:12.5px;color:var(--ink-2);border-top:1px solid var(--line)}

/* ── หนังสือรับรอง 50 ทวิ — ผังตามแบบกรมสรรพากร A4 หน้าเดียว ──
   ⚠️ ต้องล้างกฎตารางกลางของแอป (min-width 820px · หัวตารางติดบนจอ · สีพื้นหัวตาราง) */
.wht-doc{width:210mm;min-height:297mm;background:#fff;color:#000;padding:8mm 10mm;box-sizing:border-box;
         font-size:10.4px;line-height:1.3;position:relative}
.wht-doc *{box-sizing:border-box}
.prn-preview .wht-doc{margin:0 auto;box-shadow:0 2px 14px rgba(0,0,0,.09)}
.prn-preview .wht-doc + .wht-doc{margin-top:16px}
@media screen and (min-width:901px){
  .prn-preview .wht-doc{zoom:.88}
}
.wht-copies{font-size:9.8px;margin:0 0 2px 2px;line-height:1.45}
.wht-copies i{font-style:italic}
.wht-mark{display:inline-block;width:13px;font-weight:800}
.wht-frame{border:1.3px solid #000;padding:3px 5px 5px}
.wht-title{position:relative;text-align:center;padding:1px 0 3px;min-height:36px}
.wht-title .t{font-size:16px;font-weight:700;line-height:1.25}
.wht-title .s{font-size:11px}
.wht-bookno{position:absolute;right:0;top:0;text-align:start;font-size:10.4px;line-height:1.75}
.wht-u{display:inline-block;min-width:70px;border-bottom:1px dotted #000;padding:0 4px;font-weight:700;text-align:center}
.wht-box{border:1px solid #000;border-radius:7px;padding:3px 7px 4px;margin-top:4px}
.wht-r{display:flex;align-items:center;gap:6px;min-height:19px}
.wht-lbl{font-weight:700;white-space:nowrap}
.wht-fill{flex:1 1 auto;min-width:0;border-bottom:1px dotted #000;padding:0 4px;font-weight:600;min-height:15px;
          white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wht-idl{display:flex;align-items:center;gap:5px;white-space:nowrap;font-weight:700;margin-inline-start:auto}
.wht-hint{font-size:8.8px;font-style:italic;padding-inline-start:36px;line-height:1.15}
.wht-id{display:inline-flex;align-items:center}
.wht-id b{display:inline-flex;border:1px solid #000;height:15px}
.wht-id i{display:inline-block;width:11px;height:13px;border-inline-end:1px dashed #aaa;font-style:normal;
          font-weight:700;text-align:center;line-height:13px;font-size:9.6px}
.wht-id i:last-child{border-inline-end:none}
.wht-id em{display:inline-block;width:5px;border-top:1px solid #000}
.wht-cb{display:inline-block;width:11px;height:11px;border:1px solid #000;text-align:center;line-height:9px;
        font-size:10px;font-weight:800;vertical-align:-1px;margin-inline-end:4px;font-style:normal}
.wht-seqrow{display:flex;gap:18px;align-items:flex-start;margin-top:3px}
.wht-seqbox{display:inline-block;min-width:56px;height:16px;border:1px solid #000;text-align:center;
            font-weight:700;vertical-align:middle;margin:0 6px;line-height:14px}
.wht-hint2{font-size:8.6px;font-style:italic;line-height:1.15;margin-top:1px}
.wht-pnd{display:grid;grid-template-columns:repeat(4,auto);gap:3px 16px;padding-top:2px}
.wht-doc table.wht-tbl{width:100%;min-width:0;border-collapse:collapse;table-layout:fixed;margin-top:4px;border:1px solid #000}
.wht-doc .wht-tbl thead th{position:static;background:none;color:#000;text-transform:none;letter-spacing:0;
          border:1px solid #000;font-size:10.8px;font-weight:700;padding:2px 3px;text-align:center;
          line-height:1.2;white-space:normal}
.wht-doc .wht-tbl td{padding:0 3px;height:14.2px;border:none;border-inline-start:1px solid #000;font-size:10.2px;
          vertical-align:bottom;white-space:nowrap;line-height:1.25;overflow:hidden}
.wht-doc .wht-tbl td.ty{border-inline-start:none}
.wht-doc .wht-tbl td.s{border-inline-start:1px solid #999}
.wht-doc .wht-tbl td.fill,
.wht-doc .wht-tbl tbody tr:last-child td.fill{border-bottom:1px dotted #888}
.wht-doc .wht-tbl td.b,.wht-doc .wht-tbl td.s{text-align:end;font-weight:700;font-variant-numeric:tabular-nums}
.wht-doc .wht-tbl td.d{text-align:center;font-weight:700}
.wht-doc .wht-tbl .wht-i1{padding-inline-start:14px}
.wht-doc .wht-tbl .wht-i2{padding-inline-start:26px}
.wht-doc .wht-tbl .wht-i3{padding-inline-start:40px}
.wht-doc .wht-tbl .wht-i4{padding-inline-start:64px}
.wht-doc .wht-tbl tfoot td{border-top:1px solid #000;height:18px;font-weight:700}
.wht-doc .wht-tbl tfoot td.tot{text-align:end;padding-inline-end:8px}
.wht-doc .wht-tbl tr.wht-words td{border-inline-start:none;padding:3px 6px;white-space:nowrap}
.wht-grey{display:inline-block;background:#d6d6d6;min-width:66%;padding:1px 10px;margin-inline-start:10px;font-weight:700}
.wht-line1{display:flex;align-items:center;gap:4px;white-space:nowrap;font-size:10px}
.wht-dots{display:inline-block;min-width:54px;border-bottom:1px dotted #000;height:12px;text-align:center;
          font-weight:700;line-height:11px}
.wht-dots.wide{flex:1}
.wht-bottom{display:grid;grid-template-columns:42% 1fr;gap:5px;margin-top:4px}
.wht-bottom .wht-box{margin-top:0}
.wht-warn{display:flex;gap:10px;font-size:10.2px}
.wht-sign{position:relative;text-align:center;padding-inline-end:66px;font-size:10.2px}
.wht-signrow{display:flex;align-items:flex-end;justify-content:center;gap:4px;margin-top:6px}
.wht-sigline{display:inline-flex;align-items:flex-end;justify-content:center;min-width:150px;height:26px;
             border-bottom:1px dotted #000}
.wht-sigimg{max-height:30px;max-width:140px;object-fit:contain;margin-bottom:-3px}
.wht-daterow{margin-top:4px}
.wht-daterow .wht-dots{min-width:42px}
.wht-hint3{font-size:9px;font-style:italic}
.wht-seal{position:absolute;inset-inline-end:8px;top:18px;width:54px;height:54px;border:1px solid #000;border-radius:50%;
          font-size:8.4px;font-style:italic;display:flex;flex-direction:column;align-items:center;
          justify-content:center;line-height:1.15;text-align:center}
.wht-note{display:grid;grid-template-columns:auto 1fr;gap:0 10px;font-size:9.4px;margin-top:3px;line-height:1.4}
.wht-void{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.wht-void span{font-size:84px;font-weight:800;color:rgba(190,0,0,.16);border:6px solid rgba(190,0,0,.16);
               padding:0 26px;transform:rotate(-22deg)}
@media print{
  body.printing #printArea .wht-doc{width:auto;min-height:0;padding:7mm 9mm;box-shadow:none}
  body.printing #printArea .wht-doc + .wht-doc{break-before:page}
}