/* ระบบดีไซน์ของสต็อกร้าน — Modern Enterprise
   ================================================================
   หลักที่ยึดทั้งไฟล์:

   1) ระนาบเดียว  ไม่มีเงา ไม่มีการ์ดซ้อนการ์ด แบ่งพื้นที่ด้วยเส้น hairline
      กับระยะห่างเท่านั้น หน้าที่เป็นกล่องเรียงลงมาทั้งหน้าอ่านยากกว่าที่คิด
      เพราะขอบกล่องทุกใบแย่งสายตาไปจากตัวเลขที่อยู่ข้างใน
   2) สีมีความหมายเสมอ  เขียว = ได้/กำไร  แดง = เสีย/ติดลบ  เหลือง = ต้องสั่งของ
      นอกนั้นเป็นเทา ไม่มีสีตกแต่ง ไม่มี gradient
   3) ตัวเลขคือเนื้อหา  ทุกตัวเลขเป็น tabular-nums ชิดขวา หลักตรงกันทุกแถว
      ไล่สายตาลงคอลัมน์แล้วเห็นความต่างทันทีโดยไม่ต้องอ่านทีละตัว
   4) นิ้วโป้งอยู่ล่าง  บนแท็บเล็ตของที่ต้องกดบ่อยอยู่ครึ่งล่างของจอเสมอ
      เมนูหลักเป็นแถบล่าง ปุ่มคิดเงินติดขอบล่าง ช่องยิงบาร์โค้ดไม่ต้องกดจึงอยู่บนได้
   ================================================================ */

:root{
  /* พื้นและเส้น */
  --bg:#f6f7f9;
  --surface:#fff;
  --surface-2:#fafbfc;      /* หัวตาราง แถบสรุป */
  --line:#dde1e6;           /* เส้นขอบหลัก */
  --line-soft:#eceff2;      /* เส้นคั่นในตาราง */

  /* ตัวอักษร ไล่จากเข้มสุดไปจางสุด */
  --ink:#11161c;            /* หัวข้อและตัวเลขสำคัญ */
  --ink-2:#39424c;          /* เนื้อความ */
  --ink-3:#69737d;          /* ป้ายกำกับ ข้อมูลรอง */
  --ink-4:#98a1aa;          /* จางสุด ใช้กับหน่วยและ placeholder */

  /* สีหลัก — น้ำเงินหม่นเข้ม ใช้กับปุ่มหลักและสถานะ active เท่านั้น */
  --accent:#1c4f82;
  --accent-ink:#16416c;
  --accent-weak:#eaf1f8;
  --accent-line:#c3d7e9;

  /* สีความหมาย */
  --pos:#136c43;  --pos-weak:#e8f4ee;
  --neg:#a72b1e;  --neg-weak:#fcefed;
  --warn:#8a6100; --warn-weak:#fdf5e4;

  --rail-w:15rem;
  --tabbar-h:4.25rem;
  --radius:6px;
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink-2);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Thai","Sarabun",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{color:var(--ink);margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.num{font-variant-numeric:tabular-nums}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ================= โครงหน้า =================
   จอแคบ: แถบชื่อบน + เนื้อหา + แถบเมนูล่าง
   จอกว้าง: แถบข้างซ้ายค้างไว้ + เนื้อหา (แถบล่างหายไป) */
.app{min-height:100vh}
.main{min-width:0}

.page{max-width:80rem;margin:0 auto;padding:1rem 1rem calc(var(--tabbar-h) + 1.5rem)}

/* ---------- แถบชื่อบน (เฉพาะจอแคบ) ---------- */
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:.75rem;
  min-height:3.25rem;padding:.5rem .9rem;
  background:var(--surface);border-bottom:1px solid var(--line)}
.topbar .brand{font-weight:650;color:var(--ink);font-size:.95rem;letter-spacing:-.01em}
.topbar .who{margin-left:auto;font-size:.8rem;color:var(--ink-3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:11rem}

/* ---------- แถบข้างซ้าย (เฉพาะจอกว้าง) ---------- */
.rail{display:none}
.rail-brand{display:flex;align-items:center;gap:.6rem;padding:1.1rem 1.15rem .9rem;
  font-weight:650;color:var(--ink);font-size:1rem;letter-spacing:-.01em}
.rail-brand .mark{display:flex;align-items:center;justify-content:center;
  width:1.75rem;height:1.75rem;border-radius:var(--radius);
  background:var(--accent);color:#fff;flex:0 0 auto}
.rail-brand .mark .ic{width:16px;height:16px}
.rail nav{display:flex;flex-direction:column;gap:1px;padding:.25rem .6rem;flex:1 1 auto;overflow-y:auto}
.rail nav a{display:flex;align-items:center;gap:.65rem;min-height:2.3rem;padding:.4rem .6rem;
  border-radius:var(--radius);color:var(--ink-2);font-size:.9rem;text-decoration:none}
.rail nav a:hover{background:var(--surface-2);color:var(--ink)}
.rail nav a.on{background:var(--accent-weak);color:var(--accent-ink);font-weight:600}
.rail nav .ic{width:18px;height:18px;flex:0 0 auto;color:var(--ink-4)}
.rail nav a.on .ic{color:var(--accent)}
.rail nav a span{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-foot{border-top:1px solid var(--line);padding:.7rem .85rem;display:flex;align-items:center;gap:.6rem}
.rail-foot .id{flex:1 1 auto;min-width:0}
.rail-foot .id b{display:block;font-size:.85rem;color:var(--ink);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-foot .id span{font-size:.74rem;color:var(--ink-4)}
.rail-foot button{background:none;border:1px solid var(--line);border-radius:var(--radius);
  padding:.3rem .6rem;font:inherit;font-size:.78rem;color:var(--ink-3);cursor:pointer;white-space:nowrap}
.rail-foot button:hover{border-color:var(--neg);color:var(--neg)}

/* ---------- แถบเมนูล่าง — บริเวณที่นิ้วโป้งเอื้อมถึงตอนถือแท็บเล็ตมือเดียว ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  background:var(--surface);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)}
.tabbar a,.tabbar summary{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.18rem;
  min-height:var(--tabbar-h);padding:.5rem .25rem;
  color:var(--ink-3);font-size:.7rem;text-decoration:none;cursor:pointer;
  list-style:none;-webkit-tap-highlight-color:transparent;position:relative}
.tabbar summary::-webkit-details-marker{display:none}
.tabbar .ic{width:22px;height:22px}
.tabbar a.on{color:var(--accent);font-weight:600}
.tabbar a.on .ic{stroke-width:2}
.tabbar a:hover{text-decoration:none}
/* ขีดบาง ๆ เหนือรายการที่เปิดอยู่ แทนการถมสีทั้งช่อง */
.tabbar a.on::before{content:"";position:absolute;top:0;left:22%;right:22%;height:2px;
  background:var(--accent);border-radius:0 0 2px 2px}

/* แผ่นเมนูที่เหลือ เปิดขึ้นมาจากด้านล่าง ปิดโดยแตะที่ไหนก็ได้ ทั้งหมดนี้ไม่ใช้ JS */
.moremenu{position:static}
.moremenu[open]>summary{color:var(--accent)}
.moremenu[open]>summary::after{content:"";position:fixed;inset:0;
  background:rgba(12,18,24,.42);z-index:-1}
.more-panel{
  position:fixed;left:0;right:0;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  background:var(--surface);border-top:1px solid var(--line);
  box-shadow:0 -14px 32px rgba(12,18,24,.16);
  padding:.5rem .6rem .7rem;max-height:60vh;overflow-y:auto;overscroll-behavior:contain;
  animation:sheet .16s ease-out}
.more-panel a{display:flex;align-items:center;gap:.75rem;min-height:3rem;padding:.55rem .75rem;
  border-radius:var(--radius);color:var(--ink-2);font-size:.95rem;text-decoration:none}
.more-panel a.on{background:var(--accent-weak);color:var(--accent-ink);font-weight:600}
.more-panel .ic{width:20px;height:20px;color:var(--ink-4)}
.more-panel form{margin-top:.35rem;padding-top:.6rem;border-top:1px solid var(--line-soft)}
.more-panel form button{width:100%;min-height:2.9rem;background:none;border:1px solid var(--line);
  border-radius:var(--radius);font:inherit;font-size:.9rem;color:var(--ink-3);cursor:pointer}
@keyframes sheet{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.more-panel{animation:none}}

/* ================= หัวหน้าและ section ================= */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;padding:.5rem 0 1rem}
.page-head h1{font-size:1.35rem;font-weight:650;letter-spacing:-.02em}
.page-head .lead{color:var(--ink-3);font-size:.88rem;margin:.15rem 0 0}
.page-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}

/* section คั่นด้วยเส้นบาง ๆ ไม่ใช่กล่อง — ทั้งหน้าจึงอ่านเป็นแผ่นเดียวต่อเนื่อง */
.section{padding-top:1.5rem;margin-top:1.5rem;border-top:1px solid var(--line)}
.section:first-of-type{padding-top:0;margin-top:0;border-top:none}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;
  flex-wrap:wrap;margin-bottom:.85rem}
.section-head h2{font-size:.95rem;font-weight:650;letter-spacing:-.01em}
.section-head .hint{font-size:.8rem;color:var(--ink-4)}
.note{font-size:.82rem;color:var(--ink-4);margin:.6rem 0 0;max-width:56rem}
.muted{color:var(--ink-3)}
.small{font-size:.85rem}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.88em;letter-spacing:-.01em}

/* ================= แถบตัวเลขสรุป =================
   แถบเดียวแบ่งช่องด้วยเส้น ไม่ใช่การ์ดหลายใบ
   ตัวเลขชุดนี้ต้องอ่านเทียบกันเป็นชุด การใส่ขอบให้แต่ละใบทำให้มันอ่านเป็นของแยกกัน */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;margin-bottom:1.25rem}
.metric{padding:.8rem 1rem;border-left:1px solid var(--line-soft)}
.metric:first-child{border-left:none}
.metric span{display:block;font-size:.76rem;color:var(--ink-3);margin-bottom:.15rem;
  letter-spacing:.01em}
.metric b{display:block;font-size:1.45rem;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.2}
.metric b.pos{color:var(--pos)}
.metric b.neg{color:var(--neg)}
.metric b.warn{color:var(--warn)}
.metric em{font-style:normal;font-size:.76rem;color:var(--ink-4);font-weight:400}

/* ================= ตาราง =================
   ขอบเดียวรอบตาราง เส้นในบางกว่าขอบนอก หัวตารางค้างไว้ตอนเลื่อน */
.table{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:auto;max-height:none}
table{width:100%;border-collapse:collapse;font-size:.9rem}
thead th{position:sticky;top:0;z-index:1;background:var(--surface-2);
  padding:.6rem .85rem;text-align:left;white-space:nowrap;
  font-size:.72rem;font-weight:650;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase;
  border-bottom:1px solid var(--line)}
tbody td{padding:.7rem .85rem;text-align:left;white-space:nowrap;
  border-bottom:1px solid var(--line-soft);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface-2)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
td.wrap{white-space:normal;min-width:11rem}
tfoot td{padding:.7rem .85rem;background:var(--surface-2);font-weight:650;color:var(--ink);
  border-top:1px solid var(--line);white-space:nowrap}
tfoot td.n{text-align:right;font-variant-numeric:tabular-nums}
tr.dim{color:var(--ink-4)}
tr.dim .pname{color:var(--ink-4)}

/* ชื่อสินค้าเป็นตัวหลักของแถว รหัส/รายละเอียดรองลงมาอยู่บรรทัดล่าง */
.pname{color:var(--ink);font-weight:600;text-decoration:none}
tbody tr:hover .pname{color:var(--accent-ink)}
.sub{display:block;font-size:.76rem;color:var(--ink-4);font-weight:400;
  font-variant-numeric:tabular-nums;margin-top:.1rem}
.unit{font-size:.78rem;color:var(--ink-4);font-weight:400}
.pos{color:var(--pos)}
.neg{color:var(--neg)}
.warnc{color:var(--warn)}

.tag{display:inline-flex;align-items:center;padding:.08rem .4rem;border-radius:3px;
  font-size:.72rem;font-weight:650;letter-spacing:.01em;white-space:nowrap}
.tag.pos{background:var(--pos-weak);color:var(--pos)}
.tag.neg{background:var(--neg-weak);color:var(--neg)}
.tag.warn{background:var(--warn-weak);color:var(--warn)}
.tag.flat{background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line)}

/* ================= ปุ่ม ================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:2.5rem;padding:.45rem .85rem;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);color:var(--ink-2);font:inherit;font-size:.88rem;font-weight:500;
  cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--surface-2);border-color:#cbd2d9;color:var(--ink);text-decoration:none}
.btn .ic{width:16px;height:16px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.primary:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
.btn.danger{color:var(--neg);border-color:var(--line)}
.btn.danger:hover{background:var(--neg-weak);border-color:var(--neg);color:var(--neg)}
.btn.quiet{border-color:transparent;background:none;color:var(--ink-3)}
.btn.quiet:hover{background:var(--surface-2);color:var(--ink)}
.btn.sm{min-height:2.05rem;padding:.25rem .6rem;font-size:.82rem}
.btn.icon{padding:.3rem;min-width:2.05rem}
.btn.block{width:100%}
.btn.lg{min-height:3.1rem;font-size:1rem;padding:.6rem 1.2rem}

/* ================= ฟอร์ม ================= */
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:0 1.1rem}
.fld{display:block;margin-bottom:1rem}
.fld>span{display:block;font-size:.8rem;font-weight:600;color:var(--ink-3);margin-bottom:.3rem}
.fld>span i{color:var(--neg);font-style:normal}
.fld input,.fld select,.fld textarea{
  width:100%;min-height:2.6rem;padding:.5rem .65rem;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);font:inherit;font-size:.95rem;color:var(--ink)}
.fld input::placeholder{color:var(--ink-4)}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.fld input.money{text-align:right;font-variant-numeric:tabular-nums;font-size:1.05rem}
.fld small{display:block;font-size:.78rem;color:var(--ink-4);margin-top:.3rem}
.fld.tight{margin-bottom:.6rem}
.formrow{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end}
.formrow .fld{margin-bottom:0}
.formrow .grow{flex:1 1 12rem}
.formrow .btn{min-height:2.6rem}
.actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-top:1rem}
.err{color:var(--neg);font-size:.88rem;margin:0 0 .9rem}

/* ================= ช่องยิงบาร์โค้ด =================
   ช่องเดียวของทั้งหน้าที่ต้องโฟกัสค้างไว้ จึงเป็นของชิ้นเดียวที่มีขอบเข้ม
   คนขายเหลือบมาแล้วต้องรู้ทันทีว่าเคอร์เซอร์ยังอยู่ตรงนี้ ไม่ได้หลุดไปช่องอื่น */
.scan{display:flex;gap:.6rem;margin-bottom:1.1rem}
.scan .grow{flex:1 1 auto;min-width:0;position:relative}
.scan .ic-lead{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);
  width:20px;height:20px;color:var(--ink-4);pointer-events:none}
.scan input{width:100%;min-height:3.25rem;padding:.6rem .9rem .6rem 2.7rem;
  border:1.5px solid var(--accent);border-radius:var(--radius);
  background:var(--surface);font:inherit;font-size:1.05rem;color:var(--ink)}
.scan input::placeholder{color:var(--ink-4);font-size:.98rem}
.scan input:focus{outline:none;box-shadow:0 0 0 3px var(--accent-weak)}
.scan .btn{min-height:3.25rem;padding:.5rem 1.1rem}

/* ================= ตัวปรับจำนวน −/+ =================
   คลิกเดียวเปลี่ยนจำนวน ไม่ต้องพิมพ์แล้วกดยืนยัน
   ปุ่มกว้าง 2.5rem ขึ้นไปเพื่อให้กดโดนด้วยนิ้วโป้งโดยไม่ต้องเล็ง */
.stepper{display:inline-flex;align-items:stretch;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.stepper button{width:2.6rem;border:none;background:var(--surface);color:var(--ink-2);
  font:inherit;font-size:1.15rem;line-height:1;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.stepper button:hover{background:var(--accent-weak);color:var(--accent-ink)}
.stepper button:active{background:var(--accent-line)}
.stepper input{width:3.6rem;min-height:2.5rem;border:none;border-left:1px solid var(--line);
  border-right:1px solid var(--line);text-align:center;font:inherit;font-size:.95rem;
  font-variant-numeric:tabular-nums;color:var(--ink);background:var(--surface);padding:.3rem .2rem}
.stepper input:focus{outline:none;background:var(--accent-weak)}
/* ปุ่มยืนยันจำนวนที่พิมพ์เอง ซ่อนไว้ให้คีย์บอร์ด/สกรีนรีดเดอร์ยังใช้ได้
   คนพิมพ์เองกด Enter ในช่องก็ submit ได้อยู่แล้ว */
.stepper .apply{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.qtycell{display:flex;align-items:center;justify-content:flex-end;gap:.5rem}

/* ================= หน้าขาย ================= */
/* จอกว้าง: ตะกร้าซ้าย สรุปยอดขวาค้างไว้ ไม่ต้องเลื่อนหาปุ่มคิดเงิน
   จอแคบ: เรียงลงมา แล้วแถบคิดเงินไปติดขอบล่างแทน */
.till{display:grid;gap:1.1rem}
.cart-total{display:none}

/* แถบคิดเงินติดขอบล่าง เหนือแถบเมนู — อยู่ในระยะนิ้วโป้งพอดี */
.paybar{
  position:fixed;left:0;right:0;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  z-index:20;background:var(--surface);border-top:1px solid var(--line);
  padding:.7rem .9rem;box-shadow:0 -6px 20px rgba(12,18,24,.06)}
.paybar-in{max-width:80rem;margin:0 auto;display:flex;align-items:center;gap:.75rem}
.paybar .sum{flex:1 1 auto;min-width:0}
.paybar .sum span{display:block;font-size:.74rem;color:var(--ink-3)}
.paybar .sum b{display:block;font-size:1.6rem;font-weight:650;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.15}
.paybar .btn{flex:0 0 auto}

.paypick{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-bottom:.9rem}
.paypick label{display:flex;align-items:center;justify-content:center;min-height:2.7rem;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  font-size:.9rem;font-weight:600;color:var(--ink-3);cursor:pointer}
.paypick input{position:absolute;opacity:0;pointer-events:none}
.paypick label:has(input:checked){background:var(--accent-weak);border-color:var(--accent);
  color:var(--accent-ink)}

/* ปุ่มเลือกสินค้าที่ไม่มีบาร์โค้ด — เป้ากดใหญ่ ไม่ต้องเล็ง */
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.5rem}
.picks form{margin:0}
.pick{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;width:100%;
  min-height:3.5rem;padding:.6rem .8rem;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);font:inherit;text-align:left;cursor:pointer}
.pick:hover{border-color:var(--accent);background:var(--accent-weak)}
.pick b{color:var(--ink);font-size:.92rem;font-weight:600}
.pick span{color:var(--ink-3);font-size:.78rem;font-variant-numeric:tabular-nums}

/* ================= สถานะว่างและข้อความแจ้ง ================= */
.empty{padding:2.75rem 1.25rem;text-align:center;background:var(--surface);
  border:1px dashed var(--line);border-radius:var(--radius);color:var(--ink-3)}
.empty p{margin:0 0 .35rem}
.empty .btn{margin-top:1rem}

.msg{display:flex;align-items:flex-start;gap:.6rem;padding:.7rem .9rem;margin:0 0 1rem;
  border:1px solid var(--line);border-left-width:3px;border-radius:var(--radius);
  font-size:.9rem;background:var(--surface)}
.msg.ok{border-left-color:var(--pos);background:var(--pos-weak);color:var(--pos)}
.msg.bad{border-left-color:var(--neg);background:var(--neg-weak);color:var(--neg)}
.msg.warn{border-left-color:var(--warn);background:var(--warn-weak);color:var(--warn)}
.msg .btn{margin-left:auto;flex:0 0 auto}

/* ================= ตัวกรองช่วงเวลา ================= */
.segmented{display:inline-flex;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;max-width:100%;overflow-x:auto;
  scrollbar-width:none}
.segmented::-webkit-scrollbar{display:none}
.segmented a{flex:0 0 auto;padding:.5rem .85rem;font-size:.85rem;color:var(--ink-3);
  border-left:1px solid var(--line);text-decoration:none;white-space:nowrap}
.segmented a:first-child{border-left:none}
.segmented a:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
.segmented a.on{background:var(--accent);color:#fff;font-weight:600}

.toolbar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem}
.toolbar .search{flex:1 1 18rem;min-width:0;position:relative}
.toolbar .search .ic-lead{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--ink-4);pointer-events:none}
.toolbar .search input{width:100%;min-height:2.6rem;padding:.5rem .7rem .5rem 2.4rem;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  font:inherit;font-size:.95rem;color:var(--ink)}
.toolbar .search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.toolbar select{min-height:2.6rem;padding:.5rem 2rem .5rem .7rem;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface);font:inherit;font-size:.9rem;color:var(--ink)}
.toolbar input[type=date]{min-height:2.6rem;padding:.5rem .7rem;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface);font:inherit;font-size:.9rem;color:var(--ink)}
.toolbar .check{display:inline-flex;align-items:center;gap:.45rem;font-size:.88rem;color:var(--ink-2);
  padding:.5rem .2rem}
.toolbar .check input{width:1.05rem;height:1.05rem;accent-color:var(--accent)}

/* ================= กราฟ ================= */
.chart{overflow-x:auto;padding:.25rem 0 0}
.bars{height:11rem;min-width:100%;display:block}
.bar-sales{fill:var(--accent-line)}
.bar-profit{fill:var(--pos)}
.bar-label{font-size:10px;fill:var(--ink-4)}
.legend{display:flex;gap:1.1rem;margin-top:.5rem;font-size:.78rem;color:var(--ink-3)}
.legend i{display:inline-block;width:.9rem;height:.55rem;border-radius:2px;margin-right:.35rem;
  vertical-align:1px}
.legend i.sales{background:var(--accent-line)}
.legend i.profit{background:var(--pos)}

/* ================= รายละเอียดแบบคู่คีย์-ค่า ================= */
.kv{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.25rem;margin:0;font-size:.9rem}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums}

/* กล่องเดี่ยว ใช้เฉพาะหน้าที่ยืนอยู่ลำพังจริง ๆ เช่นหน้าเข้าสู่ระบบ */
.solo{max-width:23rem;margin:9vh auto 0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.6rem 1.5rem}
.solo h1{font-size:1.2rem;font-weight:650;margin-bottom:.2rem}
.solo .lead{color:var(--ink-3);font-size:.88rem;margin:0 0 1.4rem}

/* ================= จอกว้าง ================= */
@media (min-width:1024px){
  .app{display:grid;grid-template-columns:var(--rail-w) 1fr}
  .rail{display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
    background:var(--surface);border-right:1px solid var(--line)}
  .topbar{display:none}
  .tabbar{display:none}
  .page{padding:1.5rem 1.75rem 3rem}
  .page-head{padding:.25rem 0 1.25rem}
  .page-head h1{font-size:1.5rem}

  /* จอกว้างพอให้สรุปยอดอยู่ข้างตะกร้า ไม่ต้องมีแถบล่าง */
  .till{grid-template-columns:minmax(0,1fr) 20rem;align-items:start}
  .paybar{display:none}
  .cart-total{display:block;position:sticky;top:1.5rem;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    padding:1.1rem 1.15rem}
  .cart-total .grand{padding-bottom:.9rem;margin-bottom:.9rem;border-bottom:1px solid var(--line)}
  .cart-total .grand span{display:block;font-size:.78rem;color:var(--ink-3)}
  .cart-total .grand b{display:block;font-size:1.9rem;font-weight:650;color:var(--ink);
    font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.15}
}

@media (min-width:1440px){
  .page{padding-left:2.25rem;padding-right:2.25rem}
}

/* ================= พิมพ์ ================= */
@media print{
  .rail,.topbar,.tabbar,.paybar,.page-actions,.btn,form{display:none!important}
  body{background:#fff}
  .page{padding:0;max-width:none}
  .table,.metrics{border:none}
  thead th{position:static}
}