:root {
  color-scheme: light only;   /* กันเบราว์เซอร์/มือถือบังคับ dark mode ทับธีมของเราเอง */
  --ink: #ffffff;           /* พื้นหลังหน้าเว็บ */
  --panel: #ffffff;         /* แถบบน / กล่อง popup — ธีม CarPAS ใช้ขาวสะอาด */
  --panel-raised: #f5f3ff;  /* ช่องกรอก / การ์ด — ม่วงอ่อนมาก (lavender wash) */
  --line: #e5e1f5;
  --text: #1e1b2e;
  --text-dim: #6b7280;
  --navy: #4c1d95;          /* สีหัวข้อ — เปลี่ยนจากกรมท่าเป็นม่วงเข้มแบบ CarPAS */
  --brand: #7c3aed;         /* สีหลักของธีม (ปุ่ม/focus/accent) */
  --brand-dim: #c4b5fd;
  --brand-grad: linear-gradient(90deg, #3b82f6, #8b5cf6);  /* ไล่เฉดแบบคำว่า "Portal" ใน CarPAS */
  --amber: #f0a63a;         /* คงไว้เฉพาะสถานะ "คิว/กำลังทำ" เท่านั้น ไม่ใช่สีธีมหลักแล้ว */
  --amber-dim: #e3b567;
  --green: #166534;
  --red: #b42318;
  --mono: "SF Mono", "Consolas", "Courier New", monospace;
}
* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--text);
  font-family: -apple-system, "Segoe UI", "Noto Sans Thai", sans-serif;
  min-height: 100vh;
}

/* ---- Top bar ---- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--brand-grad);
  color: #ffffff;
  font-size: 15px;
  flex: 0 0 auto;
}
/* โลโก้ "โกดังบาร์โค้ด" (SVG ใน index.html) เต็มกล่อง พื้นไล่เฉดมาจาก .brand-mark */
.brand-mark svg { display: block; width: 100%; height: 100%; }
.brand-name {
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 15px;
  color: var(--navy);
}
.status-cluster { display: flex; gap: 8px; }
.badge {
  font-size: 13px;
  font-weight: 600;
}
.badge--ok { background: rgba(63, 180, 99, 0.18); color: var(--green); }
.badge--muted { background: rgba(147, 160, 179, 0.15); color: var(--text-dim); }
.badge--offline { background: rgba(226, 86, 79, 0.18); color: var(--red); }

/* ป้ายขั้นตอนมุมขวาบน (แทนคำว่า "ออนไลน์") — จุดเขียวนำหน้า = ออนไลน์อยู่ */
.badge--mode { color: #ffffff; display: inline-flex; align-items: center; gap: 6px; }
.badge--mode::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; }
.badge--receive           { background: #4338ca; }
.badge--internal-transfer { background: #5b21b6; }
.badge--pick              { background: #7c3aed; }
.badge--pack              { background: #9333ea; }
.badge--deliver           { background: #a21caf; }

/* ---- Screens ---- */
main {
  max-width: 480px;
  margin: 0 auto;
}
.screen { display: none; }
.screen--active { display: block; }
.screen-title { font-size: 26px; margin: 4px 0 4px; font-weight: 700; color: var(--navy); }
.screen-sub { color: var(--text-dim); margin: 0 0 20px; font-size: 14px; }

/* ---- Fields ---- */
.field {
  display: block;
  margin-bottom: 16px;
}
.field span {
  display: block;
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.field input, .field select {
  width: 100%;
  padding: 14px 16px;
  font-size: 18px;
  background: var(--panel-raised);
  color: var(--text);
  font-family: var(--mono);
}

.field input:disabled { opacity: 0.4; }
.field--scan input {
  border-left: 4px solid var(--brand);
}
.field--location.field--armed input {
  border-left-color: var(--green);
}

/* ---- Buttons ---- */
.btn {
  display: block;
  width: 100%;
  padding: 16px;
  font-size: 16px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  margin-bottom: 10px;
  letter-spacing: 0.01em;
}

.btn--primary { background: var(--brand-grad); color: #ffffff; }
.btn--primary:disabled { background: var(--panel-raised); color: var(--text-dim); cursor: not-allowed; }
.btn--ghost {
  color: var(--text-dim);
  border: 1px solid var(--line);
}
.btn--danger { background: var(--red); color: #ffffff; }

.qty-adjust {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  margin-bottom: 16px;
  background: var(--panel-raised);
  border-radius: 6px;
  font-size: 18px;
  font-weight: 700;
}

.qty-adjust--full {
  background: rgba(63, 180, 99, 0.15);
}

.hint { color: var(--text-dim); font-size: 13px; }

/* ---- Log feed ---- */
.log {
  margin-top: 20px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
}

/* ประวัติการทำงาน: ล็อกหน้าให้พอดีจอ เลื่อนได้เฉพาะรายการประวัติ ปุ่มกลับอยู่ล่างเสมอ */
#screen-history.screen--active {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 80px);
  height: calc(100dvh - 80px);
}
#historyContainer {
  flex: 1 1 auto;
  min-height: 0;          /* จำเป็น ไม่งั้น flex ไม่ยอมให้หดจนเกิดสกอลบาร์ */
  max-height: none;
  overflow-y: auto;
  padding-right: 4px;
  margin-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
#screen-history .btn { flex: 0 0 auto; margin-bottom: 0; }
#historyContainer::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 3px;
}

.log-entry {
  padding: 10px 12px;
  font-size: 13px;
  font-family: var(--mono);
}
.log-entry--ok { background: rgba(63, 180, 99, 0.12); border-left: 3px solid var(--green); }
.log-entry--rejected { background: rgba(226, 86, 79, 0.12); border-left: 3px solid var(--red); }
.log-entry--queued { background: rgba(240, 166, 58, 0.12); border-left: 3px solid var(--amber); }

/* ---- Product card (หน้าเลือกสินค้า Pick/Pack/Deliver/รับเข้า/ย้าย Stock) ---- */
.product-card {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
}

.product-card--ok {
  border-left: 3px solid var(--green);
}
.product-card--rejected {
  border-left: 3px solid var(--red);
}
.product-card--progress { background: rgba(240, 166, 58, 0.16); border-left: 3px solid var(--amber); }

/* ---- Modal ---- */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}
.modal[hidden] { display: none; }
.modal-box {
  max-width: 380px;
  width: 100%;
}
.modal-box h2 { margin-top: 0; color: var(--navy); }
.modal-actions {
  display: flex;
}
.modal-actions .btn { margin-bottom: 0; }

/* ช่องสแกน Location บนหน้าเลือกสินค้า ใช้เฉพาะ Pick — ให้ซ่อนจริงในโหมดอื่น (เดิม .field ทับ hidden ไว้) */
#pickListLocationField[hidden] { display: none; }

/* ---- โชว์ Location จาก → ไปที่ บนหน้าสแกน ---- */
.where-box {
  margin: -8px 0 20px;
  padding: 10px 12px;
  background: var(--panel-raised);
  border-left: 4px solid var(--navy);
  border-radius: 6px;
}
.where-row { display: flex; gap: 10px; align-items: baseline; font-size: 14px; color: var(--text-dim); }
.where-row + .where-row { margin-top: 4px; }
.where-tag { flex: 0 0 auto; min-width: 36px; font-weight: 700; }
.where-val { word-break: break-word; font-family: var(--mono); }
.where-row--strong { color: var(--navy); font-size: 16px; font-weight: 700; }

.product-card { flex-wrap: wrap; }

/* ลิสต์สินค้า: ไม่ให้มีสกอลบาร์ของตัวเอง ใช้สกอลบาร์เดียวของทั้งหน้าจอ (เดิม .log จำกัดสูง 280px มีสกอลซ้อน) */
#productListContainer { max-height: none; overflow: visible; }

/* ปุ่มบันทึก 5 ขั้นตอน: ยิงสแกน/กด Enter อย่างเดียว ไม่ใช้ปุ่มกดแล้ว */
#btnReceiveSubmit[hidden],
#btnPickSubmit[hidden],
#btnTransferSubmit[hidden],
#btnPackSubmit[hidden],
#btnDeliverSubmit[hidden] {
  display: none;
}

/* ---- ปุ่ม Validate + กลับ ปักติดขอบล่างจอตลอดเวลา ไม่ต้องเลื่อนหาเลย (ร้านต้องส่งไวภายใน 30 นาที) ---- */
/* แถบล่างแถวเดียว: [← กลับ] [Validate ปิดใบ] สูงประมาณ 48px */
.sticky-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 480px;
  margin: 0 auto; /* ให้แถบปุ่มกว้างเท่าเนื้อหา (main กว้างสูงสุด 480px) ไม่ยืดเต็มจอบนหน้าจอกว้าง */
  display: flex;
  gap: 8px;
  align-items: stretch;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
  z-index: 20;
}
.sticky-actions .btn { flex: 1 1 0; width: auto; margin-bottom: 0; display: flex; align-items: center; justify-content: center; text-align: center; min-width: 0; }

.btn--compact { padding: 8px 10px; font-size: 14px; line-height: 1.2; }

/* ซ่อนช่อง Serial เดิมของขั้นรับเข้า (ไม่ใช้แล้ว ตัดสต็อกด้วยบาร์โค้ดอย่างเดียว) */
#receiveSerialField {
  display: none !important;
}

/* เอาปุ่ม +/- ปรับจำนวนมือออกทั้งหมด (รับเข้า, Pick) -- บังคับให้ยิงสแกนทีละชิ้นเพื่อความแม่นยำ */
#receiveNoTrackAdjust,
#pickNoTrackAdjust {
  display: none !important;
}

/* popup แจ้งเตือนกลางจอ */
.modal-box--alert {
  text-align: center;
}
.modal-box--alert h2 {
  color: var(--red);
}
.modal-box--alert p { font-size: 17px; font-weight: 600; white-space: pre-line; }
/* .btn ตั้ง display:block ทับ attribute hidden จึงต้องสั่งซ่อนเอง */
#btnAlertCancel[hidden] { display: none; }
/* popup สำเร็จ = เขียว */
.modal-box--success { border-color: #16a34a; }

/* popup ล้มเหลว/แจ้งเตือน = ส้ม */
.modal-box--warn { border-color: #f97316; }

/* การ์ดที่กะพริบตอนสแกนสำเร็จ */
.product-card--flash {
  outline-offset: -3px;
}

/* การ์ดสินค้าแบบกะทัดรัด (เหมือนระบบเดิมบน iData) */
.product-card {
  display: block;
  padding: 8px 10px;
  margin-bottom: 6px;
  line-height: 1.25;
}
.pc-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.pc-code { font-size: 16px; font-weight: 800; color: var(--text); word-break: break-all; }
.pc-qty  { font-size: 16px; font-weight: 800; font-family: var(--mono); white-space: nowrap; }
.pc-name {
  font-size: 14px;
  color: var(--text-dim);
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* ชื่อสินค้าแสดงสูงสุด 3 บรรทัด */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== หน้าสแกน/เลือกสินค้า: บีบให้พอดีจอเดียว ไม่ต้องเลื่อน ===== */
.topbar { padding: 8px 14px; }
main { padding: 12px 14px 16px; }
.screen--scan { padding-bottom: 56px; }   /* เว้นที่ให้แถบปุ่มล่าง (สูงราว 48px) */

.screen--scan .screen-title { font-size: 18px; margin: 0 0 2px; }
.screen--scan .screen-sub {
  font-size: 13px; margin: 0 0 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.screen--scan .where-box { margin: 0 0 8px; padding: 6px 10px; }
.screen--scan .where-row { font-size: 13px; }
.screen--scan .where-row--strong { font-size: 14px; }

.screen--scan .field { margin-bottom: 8px; }
.screen--scan .field span { font-size: 12px; margin-bottom: 3px; }
.screen--scan .field input,
.screen--scan .field select { padding: 9px 12px; font-size: 17px; }

.screen--scan .qty-summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
}
.screen--scan .qty-adjust { padding: 4px 8px; margin-bottom: 8px; min-height: 8px; }
.screen--scan .qty-adjust__notrack:not([hidden]) { display: flex; gap: 8px; width: 100%; }
.screen--scan .qty-adjust .btn { flex: 1 1 0; width: auto; padding: 6px 10px; margin: 0; }
.screen--scan .hint { margin: 0 0 6px; }

.screen--scan .log { margin-top: 6px; padding-top: 6px; max-height: 96px; }
.screen--scan .log:empty { display: none; }

/* หน้าเลือกสินค้า: ย่อส่วนหัวให้เห็นการ์ดสินค้าเยอะขึ้น */
#screen-pick-products .screen-title { display: none; }
#screen-pick-products .field > span { display: none; }      /* placeholder ในช่องบอกอยู่แล้ว */
#screen-pick-products .screen-sub { margin: 0 0 4px; font-size: 12px; }
#screen-pick-products .field input { padding: 6px 10px; font-size: 15px; }
#screen-pick-products #productListContainer { margin-top: 4px; padding-top: 4px; border-top: 0; }
#screen-pick-products .sticky-actions { padding-top: 4px; }
#screen-pick-products .sticky-actions .btn { padding: 6px 8px; font-size: 13px; }
#screen-pick-products #btnBackFromProductList { flex: 1 1 0; }
#screen-pick-products #btnValidatePicking { flex: 1 1 0; }

/* ===== ตัวนับจำนวนที่สแกน: ใหญ่ ชัด ใช้พื้นที่น้อย (ทุกขั้นตอน) ===== */
.screen .qty-summary {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 4px 0 6px;
  padding: 4px 10px 8px;
  background: #f1f5f9;
  color: #475569;
  font-size: 13px;
  overflow: hidden;
}
.screen .qty-summary > span:first-child { font-size: 13px; font-weight: 600; }
.screen .qty-summary strong { font-size: 30px; line-height: 1; font-weight: 800; }
.screen .qty-summary > span:first-child > span { font-size: 22px; font-weight: 700; }
.screen .qty-summary .hint { margin: 0; font-size: 14px; font-weight: 700; }
/* แถบความคืบหน้าบางๆ ล่างสุด */
.screen .qty-summary::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 5px;
  width: var(--pct, 0%); background: #94a3b8; transition: width .2s;
}
.screen .qty-summary--progress { background: #fff7ed; color: #c2410c; }
.screen .qty-summary--progress::after { background: #f97316; }
.screen .qty-summary--full { background: #dcfce7; color: #15803d; }
.screen .qty-summary--full::after { background: #16a34a; }
/* ลบแถบว่างใต้ตัวนับ (ปุ่ม +/- ยังโชว์ปกติเมื่อสินค้าไม่ติด Serial) */
.screen .qty-adjust { padding: 0; min-height: 0; margin: 0 0 4px; background: none; border: none; }

/* ============================================================
   ธีมหลัก: มุมโค้ง เงานุ่ม แถบกระจก (ทับค่าพื้นฐานด้านบน — ลำดับในไฟล์มีผล ห้ามย้ายขึ้นไปข้างบน)
   ============================================================ */
:root {
  --r-sm: 10px;
  --r-md: 14px;
  --shadow-sm: 0 1px 2px rgba(76, 29, 149, .06), 0 2px 8px rgba(76, 29, 149, .06);
  --shadow-md: 0 4px 14px rgba(76, 29, 149, .10), 0 1px 3px rgba(76, 29, 149, .08);
}

/* พื้นหลังไล่เฉดอ่อนมาก แทนสีขาวล้วน */
body {
  background: linear-gradient(180deg, #faf9ff 0%, #ffffff 220px);
  -webkit-font-smoothing: antialiased;
}

/* แถบบน: โปร่งแบบกระจก ติดขอบบนตอนเลื่อน */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgba(229, 225, 245, .8);
  box-shadow: none;
}
.brand-mark { border-radius: 9px; box-shadow: 0 2px 8px rgba(124, 58, 237, .35); }

/* ป้ายสถานะมุมขวาบน: แคปซูล */
.badge { border-radius: 999px; padding: 6px 14px; letter-spacing: .02em; box-shadow: var(--shadow-sm); }
.badge--mode::before { box-shadow: 0 0 0 3px rgba(74, 222, 128, .25); }

/* ช่องสแกน: มุมโค้ง โฟกัสแล้วมีแสงเรือง */
.field input, .field select {
  border-radius: var(--r-md);
  border: 1.5px solid var(--line);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .14);
}

/* การ์ดสินค้า: ลอย มีเงา มุมโค้ง กดแล้วยุบ (ไม่ใช้ขอบซ้ายหนาแบบเดิม ใช้แถบสีโค้งแทน) */
.product-card {
  border-radius: var(--r-md);
  border-left-width: 8px;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease;
  cursor: pointer;
}
.product-card:hover  { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.product-card:active { transform: scale(.985); box-shadow: var(--shadow-sm); }
.pc-qty {
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .75);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
  font-variant-numeric: tabular-nums;
}
.pc-code { letter-spacing: .01em; }

/* รายการ log */
.log-entry { border-radius: var(--r-sm); box-shadow: var(--shadow-sm); }

/* ปุ่ม: มุมโค้ง เงานุ่ม กดแล้วยุบ */
.btn {
  border-radius: var(--r-md);
  transition: transform .1s ease, box-shadow .15s ease, filter .15s ease;
}
.btn--primary { box-shadow: 0 4px 14px rgba(124, 58, 237, .30); }
.btn--primary:hover  { filter: brightness(1.05); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn--ghost { border-radius: var(--r-md); background: #fff; }

/* แถบปุ่มล่าง (กลับ / Validate): กระจกโปร่ง ลอยเหนือเนื้อหา */
.sticky-actions {
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid rgba(229, 225, 245, .9);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -6px 20px rgba(76, 29, 149, .08);
}

/* ตัวนับยอด: การ์ดมน มีแถบความคืบหน้าโค้ง */
.screen .qty-summary { border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.screen .qty-summary::after { border-radius: 0 4px 4px 0; }

.modal-box--alert { border-width: 2px; }

/* การ์ดที่กะพริบตอนสแกนสำเร็จ: เรืองแสงแทนกรอบทึบ */
.product-card--flash {
  outline: none;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, .35), var(--shadow-md);
}

/* ลดการเคลื่อนไหวสำหรับคนที่ปิดแอนิเมชันในเครื่อง */
@media (prefers-reduced-motion: reduce) {
  .product-card, .btn { transition: none; }
}

/* การ์ดสินค้า: ยังไม่เริ่ม = ม่วงอ่อนเข้าธีม (เดิมเป็นแดงอมชมพู) */
.product-card--rejected {
  background: #f5f3ff;
  border-left-color: #a78bfa;
}

/* ============================================================
   Popup: alertModal (สำเร็จ/เตือน/ผิดพลาด), backorderModal, duplicateModal
   ============================================================ */

/* พื้นหลังมัว + เบลอ */
.modal {
  background: rgba(30, 27, 46, .55);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.modal--alert { background: rgba(30, 27, 46, .65); }

/* ตัวการ์ด: มุมโค้งมาก เงาลึก เด้งเข้า แถบสีด้านบน */
.modal-box,
.modal-box--alert {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 24px;
  padding: 30px 24px 22px;
  background: linear-gradient(180deg, var(--tint, #f5f3ff) 0, #ffffff 120px);
  box-shadow: 0 28px 70px rgba(30, 27, 46, .40), 0 2px 6px rgba(30, 27, 46, .10);
  animation: popup-in .2s cubic-bezier(.2, .9, .3, 1.15);
}
.modal-box::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 7px;
  background: var(--accent, linear-gradient(90deg, #3b82f6, #8b5cf6));
}
@keyframes popup-in {
  from { opacity: 0; transform: translateY(14px) scale(.95); }
  to   { opacity: 1; transform: none; }
}

/* สีตามประเภท */
.modal-box--success { --tint: #f0fdf4; --accent: linear-gradient(90deg, #22c55e, #16a34a); }
.modal-box--warn    { --tint: #fff7ed; --accent: linear-gradient(90deg, #fb923c, #f97316); }
#backorderModal .modal-box,
#duplicateModal .modal-box { --tint: #f5f3ff; --accent: linear-gradient(90deg, #3b82f6, #8b5cf6); }

/* หัวข้อ + ข้อความ (ขนาดเดิม) */
.modal-box h2 { margin: 4px 0 10px; text-align: center; letter-spacing: .01em; }
.modal-box--alert h2 { font-size: 22px; }
.modal-box--success h2 { color: #15803d; }
.modal-box--warn h2    { color: #c2410c; }
.modal-box > p {
  text-align: center;
  line-height: 1.55;
  color: var(--text);
}

/* ปุ่มใน popup: ใหญ่ มุมโค้ง กดแล้วยุบ */
.modal-actions { gap: 10px; margin-top: 20px; }
.modal-actions .btn,
#btnAlertOk {
  border-radius: 14px;
  padding: 14px 16px;
  font-weight: 700;
  transition: transform .1s ease, box-shadow .15s ease, filter .15s ease;
}
.modal-actions .btn:active { transform: scale(.97); }

/* ปุ่มหลักของ popup แจ้งเตือนตามสี */
.modal-box--success #btnAlertOk {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 16px rgba(22, 163, 74, .35);
}
.modal-box--warn #btnAlertOk {
  background: linear-gradient(135deg, #fb923c, #f97316);
  border-color: transparent; color: #fff;
  box-shadow: 0 6px 16px rgba(249, 115, 22, .35);
}
/* ปุ่มรอง (ปิด/ยกเลิก) ขอบบาง พื้นขาว */
.modal-actions .btn--ghost {
  background: #fff;
  border: 1.5px solid var(--line);
  color: var(--text-dim);
}
/* ปุ่มหลักม่วง (ยืนยัน/สร้าง Backorder) */
.modal-actions .btn--primary { box-shadow: 0 6px 16px rgba(124, 58, 237, .30); }

/* ปุ่มอันตราย (เช่น ยกเลิกรับซ้ำ) ใช้สีแดงเดิมแต่พื้นอ่อน */
.modal-actions .btn--danger { box-shadow: 0 6px 16px rgba(180, 35, 24, .25); }

/* popup Backorder: ปุ่มเรียงลงมา เต็มความกว้าง */
#backorderModal .modal-actions { flex-direction: column; }
#backorderModal .modal-actions .btn { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .modal-box, .modal-box--alert { animation: none; }
}

/* การ์ดที่สแกนครบแล้ว: เขียวชัด */
.product-card--ok {
  background: #dcfce7;              /* พื้นเขียวอ่อนชัด */
  border-left-color: #16a34a;       /* แถบซ้ายเขียวสด */
  box-shadow: 0 0 0 1.5px rgba(22, 163, 74, .35), 0 2px 8px rgba(22, 163, 74, .18);
}
.product-card--ok .pc-code { color: #14532d; }

/* ป้ายตัวเลข 2/2 เป็นเขียวเข้ม ตัวอักษรขาว + เครื่องหมายถูก */
.product-card--ok .pc-qty {
  background: #16a34a;
  color: #ffffff;
  box-shadow: none;
}
.product-card--ok .pc-qty::after {
  content: " ✓";
  font-weight: 800;
}

/* ===== ประวัติการทำงานรายใบ ===== */
.hist-filters input {
  flex: 1 1 0; min-width: 0; padding: 9px 12px; font-size: 15px;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--panel-raised);
}
.hist-filters input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(124,58,237,.14); }

.hist-card {
  background: #fff;
  border-radius: 14px;
  cursor: pointer;
  border: 1px solid var(--line);
  border-left: 6px solid #94a3b8;
  box-shadow: 0 1px 2px rgba(76,29,149,.06), 0 2px 8px rgba(76,29,149,.06);
}
.hist-card--ok      { border-left-color: #16a34a; }
.hist-card--partial { border-left-color: #f59e0b; }
.hist-card--none    { border-left-color: #dc2626; }

.hist-title {
  font-weight: 800;
  color: var(--navy);
}
.hist-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.hist-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0 6px; }
.hist-stat {
  padding: 4px 8px;
  text-align: center;
}
.hist-stat__label { display: block; font-size: 11px; color: var(--text-dim); }
.hist-stat__value {
  font-variant-numeric: tabular-nums;
}

.hist-items { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.hist-items[hidden] { display: none; }
.hist-item {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  padding: 7px 10px; border-radius: 10px; font-size: 13px;
}
.hist-item__name { overflow: hidden; text-overflow: ellipsis; }
.hist-item__qty { font-variant-numeric: tabular-nums; }
.hist-item--ok      { background: #dcfce7; color: #14532d; }
.hist-item--partial { background: #fef3c7; color: #92400e; }
.hist-item--none    { background: #fee2e2; color: #991b1b; }

/* ===== ประวัติ: แถบตัวกรอง / การ์ด ===== */
.hist-filters {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(76,29,149,.06), 0 4px 14px rgba(76,29,149,.08);
}
.hist-filters input[type="search"] { border-radius: 12px; }

/* ปุ่มเลือกวันที่: ไล่เฉดแบรนด์ ดูรู้ว่ากดได้ */
.hist-date {
  position: relative; flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px;
  padding: 0 12px; border-radius: 12px;
  background: var(--brand-grad); color: #fff;
  font-weight: 700; font-size: 14px; white-space: nowrap; cursor: pointer;
  box-shadow: 0 4px 12px rgba(124,58,237,.30);
  transition: transform .1s ease, filter .15s ease;
}
.hist-date:hover  { filter: brightness(1.06); }
.hist-date:active { transform: scale(.97); }

.hist-filters .hist-date input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; padding: 0; border: 0; background: transparent;
}
.hist-filters .hist-date input::-webkit-calendar-picker-indicator {
  position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer;
}

/* หัวกลุ่มวันที่ */
.hist-day {
  position: sticky; top: 0; z-index: 2; align-self: flex-start;
  margin: 6px 0 2px; padding: 3px 12px;
  font-size: 12px; font-weight: 800; color: var(--navy);
  background: #ede9fe; border-radius: 999px;
  box-shadow: 0 1px 4px rgba(76,29,149,.10);
}

/* การ์ดใบงาน */
.hist-card { transition: transform .12s ease, box-shadow .12s ease; }
.hist-card:active { transform: scale(.99); }
.hist-top { display: flex; align-items: center; gap: 8px; }
.hist-top .hist-title { flex: 1; min-width: 0; }
.hist-pill { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.hist-pill--ok      { background: #dcfce7; color: #15803d; }
.hist-pill--partial { background: #fef3c7; color: #b45309; }
.hist-pill--none    { background: #fee2e2; color: #b91c1c; }
.hist-chev { color: var(--text-dim); transition: transform .15s ease; }
.hist-card--open .hist-chev { transform: rotate(180deg); }

/* ป้ายขั้นตอน สีตามธีมของป้ายมุมขวาบน */
.hist-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.hist-mode {
  display: inline-block; padding: 1px 9px; border-radius: 999px;
  color: #fff; font-size: 11px; font-weight: 700; background: #7c3aed;
}
.hist-mode[data-mode="receive"]           { background: #4338ca; }
.hist-mode[data-mode="internal-transfer"] { background: #5b21b6; }
.hist-mode[data-mode="pick"]              { background: #7c3aed; }
.hist-mode[data-mode="pack"]              { background: #9333ea; }
.hist-mode[data-mode="deliver"]           { background: #a21caf; }

.hist-stat { border-radius: 12px; background: linear-gradient(180deg, #f5f3ff, #ede9fe); }

/* แถบเลื่อนบางและสีม่วง */
#historyContainer { scrollbar-width: thin; scrollbar-color: #c4b5fd transparent; padding-bottom: 8px; }

#historySearch {
  background: var(--brand-grad, var(--brand));
  color: #fff;
  border: 0;
  border-radius: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
#historySearch:active { transform: translateY(1px); }

.hist-date input[type="date"] {
  position: static;
  opacity: 1;
  width: auto;
  height: auto;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 700;
}

/* ===== ประวัติการทำงาน: ปรับให้พอดีจอเล็ก (iData) ===== */
#screen-history.screen--active { height: calc(100dvh - 64px); }
#screen-history .screen-title { font-size: 18px; margin: 0 0 2px; }
#screen-history .screen-sub { margin: 0 0 6px; font-size: 12px; }

.hist-filters {
  grid-template-columns: 1fr auto auto;
  margin: 0 0 6px;
  border-radius: 12px;
}
.hist-filters .hist-date {
  min-height: 36px;
  overflow: hidden;
}
.hist-filters .hist-date input[type="date"] {
  min-width: 0;
}
/* ซ่อนไอคอนปฏิทินสีดำ แต่ให้แตะตรงไหนของปุ่มวันที่ก็เปิดปฏิทินได้ */
.hist-filters .hist-date input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

/* การ์ดรายการให้กระชับขึ้น */
.hist-card { padding: 8px 10px; }
.hist-title { font-size: 14px; }
.hist-stat__value { font-size: 15px; }

@media (max-width: 420px) {
  main { padding: 10px 10px 56px; }
  .topbar { padding: 8px 12px; }
}

/* ===== ประวัติ: ให้ 4 อย่างอยู่แถวเดียว (PO | วันที่ | ค้นหา | ล้าง) ===== */
.hist-filters {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 4px;
  padding: 4px;
}
.hist-filters #historyPo {
  grid-column: auto;
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 8px;
  font-size: 13px;
}
.hist-filters .hist-date {
  grid-column: auto;
  flex: 0 0 auto;
  padding: 0 8px;
  gap: 3px;
  font-size: 12px;
}
.hist-filters .hist-date input[type="date"] {
  font-size: 12px;
}
.hist-filters .btn,
#historySearch {
  flex: 0 0 auto;
  width: auto;
  min-height: 36px;
  padding: 0 8px;
  font-size: 12px;
  outline: none;
}

/* ปุ่มวันที่: โชว์ข้อความ วัน/เดือน/ปี ของเรา ส่วนช่อง date จริงโปร่งใสวางทับไว้ให้แตะเปิดปฏิทิน */
.hist-filters .hist-date input[type="date"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
}
#historyDateText { white-space: nowrap; font-weight: 700; font-size: 12px; }

/* วงกลมหมุนตอนกำลังค้นหา */
.hist-loading {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 36px 0; color: var(--text-dim); font-size: 13px;
}
.hist-loading p { margin: 0; }
.hist-spinner {
  width: 36px; height: 36px;
  border: 4px solid #ede9fe; border-top-color: var(--brand);
  border-radius: 50%;
  animation: hist-spin .8s linear infinite;
}
@keyframes hist-spin { to { transform: rotate(360deg); } }

/* ข้อความ "ยังไม่มีรายการ" */
.hist-empty {
  margin: 0; padding: 36px 0; text-align: center;
  color: var(--text-dim); font-size: 15px; font-weight: 600;
}

/* ปุ่มออกจากระบบที่แถบบน: แคปซูลสีแดงอ่อน */
.status-cluster { align-items: center; }
.badge--logout {
  border: 0;
  font-family: inherit;
  cursor: pointer;
  background: rgba(226, 86, 79, 0.14);
  color: #b42318;
  box-shadow: none;
  padding: 6px 12px;
  white-space: nowrap;
}
.badge--logout:active { background: rgba(226, 86, 79, 0.28); }
.badge--logout[hidden] { display: none; }

/* ข้อความผิดพลาดหน้า login (รหัสผ่านผิด / บัญชีถูกใช้งานอยู่) = แดง */
#loginError {
  color: var(--red);
  background: rgba(226, 86, 79, 0.10);
  border: 1px solid rgba(226, 86, 79, 0.35);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  margin: 8px 0 12px;
}
#loginError[hidden] { display: none; }

/* ตัวเลขยอดสแกนบนหน้าสแกน */
.screen--scan .qty-summary strong { font-size: 26px; }

/* ยอดสแกน: อยู่เหนือช่องสแกน ตรึงไว้ใต้แถบบน ไม่ให้ถูกบัง */
.screen--scan .qty-summary {
  position: sticky;
  top: 58px;            /* ความสูงแถบบน (WAREHOUSE SCAN) */
  z-index: 10;
  margin: 0 0 8px;
}

/* ===== กันหน้าเลื่อนไปด้านข้าง + บีบแถบบนให้พอดีจอ iData ===== */
html { overflow-x: hidden; }
body { max-width: 100%; }
main { width: 100%; }

@media (max-width: 480px) {
  .topbar { padding: 6px 8px; gap: 6px; }
  .brand { gap: 6px; min-width: 0; }
  .brand-mark { width: 24px; height: 24px; font-size: 12px; }
  .brand-name { font-size: 11px; letter-spacing: 0; white-space: nowrap; }
  .status-cluster { gap: 4px; flex: 0 0 auto; }
  .badge, .badge--logout { padding: 4px 8px; font-size: 11px; }
}

/* ===== หน้าประวัติ: ทั้งหน้าไม่เลื่อน เลื่อนเฉพาะรายการประวัติ + ปุ่มกลับเล็ก ===== */
body.no-page-scroll { overflow: hidden; }
body.no-page-scroll main { padding-bottom: 8px; }
body.no-page-scroll #screen-history.screen--active {
  height: calc(100vh - 76px);    /* สำรองสำหรับเบราว์เซอร์เก่า */
  height: calc(100dvh - 76px);   /* 76px = แถบบน + ระยะขอบ */
}
#btnBackFromHistory {
  padding: 6px 10px;
  font-size: 13px;
  min-height: 34px;
}

/* รายการสินค้าที่ขาดใน popup Backorder */
.backorder-items { list-style: none; margin: 8px 0 12px; padding: 0; max-height: 40vh; overflow-y: auto; text-align: left; }
.backorder-items:empty { display: none; }
.backorder-items li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 4px; border-radius: 8px; background: #fef2f2; font-size: 13px; }
.backorder-items .bo-name { flex: 1; min-width: 0; word-break: break-word; }
.backorder-items .bo-qty { color: #b91c1c; white-space: nowrap; }

/* ประวัติแบบรวมตามเลขอ้างอิง: แต่ละขั้นตอนเป็นปุ่มกดเปิดดูรายการ */
.hist-modeblock { margin-top: 10px; }
.hist-modeblock__head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: #f1edff;
  border: 1px solid #c4b5fd;
  border-left: 4px solid #7c3aed;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.12);
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.hist-modeblock__head:active { background: #e4dbff; box-shadow: none; }
.hist-modeblock--open > .hist-modeblock__head { background: #e9e2ff; border-color: #a78bfa; }
.hist-modeblock__meta { flex: 1; font-size: 13px; color: #5b21b6; font-weight: 600; }
.hist-modeblock__head .hist-chev { color: #7c3aed; font-size: 16px; transition: transform .2s; }
.hist-modeblock--open > .hist-modeblock__head .hist-chev { transform: rotate(180deg); }
.hist-modeblock__body { margin: 6px 4px 0; }
.hist-picking { margin: 8px 0 4px; font-size: 13px; font-weight: 600; color: #475569; }

/* ===== ภาพรวมทุกสาขา (Dashboard) — กระชับให้พอดีจอเครื่อง iData ===== */
#screen-dashboard { padding-bottom: 52px; }   /* เว้นที่ให้ปุ่มกลับที่ลอยติดล่างจอ */
#screen-dashboard .screen-title { font-size: 20px; margin: 0 0 2px; }
#screen-dashboard .screen-sub { font-size: 12px; margin: 0 0 8px; }

/* แถบเลือกช่วงวันที่: [ตั้งแต่] → [ถึง] [↻] / แถวล่าง = ช่วงสำเร็จรูป */
.dash-filters {
  display: flex; flex-direction: column; gap: 6px;
  padding: 6px; margin-bottom: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(76, 29, 149, .06), 0 4px 14px rgba(76, 29, 149, .08);
}
.dash-range { display: flex; align-items: stretch; gap: 4px; }
.dash-range__sep { align-self: center; color: var(--text-dim); font-weight: 700; }
.dash-date {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 44px; padding: 3px 10px; border-radius: 10px;
  background: var(--brand-grad); color: #fff; cursor: pointer;
  box-shadow: 0 3px 10px rgba(124, 58, 237, .25);
}
.dash-date:active { transform: scale(.97); }
.dash-date__label { font-size: 11px; opacity: .9; line-height: 1.2; }
.dash-date__value { font-size: 15px; font-weight: 700; line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* ช่องวันที่จริงซ่อนทับทั้งปุ่ม แตะตรงไหนก็เปิดปฏิทิน */
.dash-date input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer;
}
.dash-date input::-webkit-calendar-picker-indicator {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer;
}
.dash-refresh {
  flex: 0 0 44px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-raised); color: var(--brand);
  font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer;
}
.dash-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.dash-preset {
  padding: 7px 0; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; color: var(--navy); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.dash-preset--active { background: #ede9fe; border-color: var(--brand-dim); color: var(--brand); font-weight: 800; }
.dash-refresh:active, .dash-preset:active { transform: scale(.96); }

/* ยอดรวมทุกสาขา */
.dash-totals .hist-stats { margin: 0 0 8px; gap: 4px; }
.dash-totals .hist-stat { background: var(--brand-grad); color: #fff; padding: 4px 6px; border-radius: 10px; }
.dash-totals .hist-stat__label { color: rgba(255, 255, 255, .88); font-size: 11px; }
.dash-totals .hist-stat__value { font-size: 18px; }

/* การ์ดสาขา: หัว / ตัวเลขสรุปแบบชิป / 5 ขั้นตอน / ผู้ใช้ล่าสุด */
.dash-list { display: flex; flex-direction: column; gap: 8px; }
.dash-card { padding: 8px 10px; }
.dash-card .hist-title { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-pill--idle { background: #f1f5f9; color: var(--text-dim); }
.dash-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.dash-chip {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 2px 9px; border-radius: 999px; background: var(--panel-raised);
  font-size: 12px; color: var(--text-dim);
}
.dash-chip__value { font-size: 14px; color: var(--navy); font-variant-numeric: tabular-nums; }
.dash-chip--done .dash-chip__value { color: #15803d; }
.dash-chip--bad { background: #fee2e2; color: #991b1b; }
.dash-chip--bad .dash-chip__value { color: #b91c1c; }
.dash-modes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.dash-mode {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 4px 1px; border-radius: 8px; background: #faf8ff; font-size: 11px; line-height: 1.3;
}
.dash-mode .hist-mode { padding: 0 6px; font-size: 10px; white-space: nowrap; }
.dash-mode__num { color: #15803d; font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-mode__num--pending { color: var(--navy); font-weight: 600; }
.dash-foot { margin-top: 5px; font-size: 11px; color: var(--text-dim); line-height: 1.4; }

/* ปุ่มกลับเล็กๆ ลอยติดล่างจอเสมอ ไม่ต้องเลื่อนลงไปหา */
.dash-backbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .94); border-top: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.dash-backbar .btn { max-width: 440px; margin: 0 auto; padding: 7px 12px; font-size: 14px; }

/* ===== หน้าเข้าสู่ระบบ: ฟอร์มในการ์ด + ปุ่มภาพรวมแบบการ์ดลอยมีเงา (ออกแบบให้พอดีจอ iData 360x640) ===== */
#screen-login.screen--active { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.login-head .screen-title { font-size: 24px; line-height: 1.25; margin: 0; }
.login-sub { margin: 2px 0 0; font-size: 13px; color: var(--text-dim); }

.login-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(76, 29, 149, .06), 0 8px 24px rgba(76, 29, 149, .10);
}
.login-card .field { margin: 0; }
.login-card .field span { margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--navy); }
.login-card .field select,
.login-card .field input {
  min-height: 48px;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 16px;
}
.login-card .field--scan input { border-left-width: 1.5px; }   /* ช่องรหัสผ่านไม่ต้องมีแถบสแกนด้านซ้าย */
.login-card .field input::placeholder { color: #9ca3af; }
/* ช่องเลือกสาขา: ลูกศรของเราเอง แทนลูกศรของระบบ */
.login-card .field select,
.login-card .field select:focus {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%237c3aed' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
.login-card #loginError { margin: 0; }
.login-card #btnLogin {
  margin: 2px 0 0;
  min-height: 50px;
  font-size: 17px;
  box-shadow: 0 8px 20px rgba(124, 58, 237, .32);
}
.login-card #btnLogin:disabled { box-shadow: none; }

.menu-card {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(76, 29, 149, .06), 0 10px 24px rgba(76, 29, 149, .14);
  transition: transform .1s ease, box-shadow .15s ease;
}
.menu-card:hover { box-shadow: 0 2px 4px rgba(76, 29, 149, .08), 0 14px 30px rgba(76, 29, 149, .20); }
.menu-card:active { transform: scale(.98); box-shadow: 0 1px 3px rgba(76, 29, 149, .14); }
.menu-card:focus-visible { outline: 3px solid var(--brand-dim); outline-offset: 2px; }
.menu-card__icon {
  flex: 0 0 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--brand-grad);
  box-shadow: 0 4px 10px rgba(124, 58, 237, .30);
}
.menu-card__icon svg { width: 22px; height: 22px; fill: #fff; }
.menu-card__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.menu-card__text strong { font-size: 16px; color: var(--navy); }
.menu-card__text small { font-size: 12px; color: var(--text-dim); }
.menu-card__chev { font-size: 26px; line-height: 1; color: var(--brand); }
@media (prefers-reduced-motion: reduce) {
  .menu-card { transition: none; }
}

/* ===== หน้าสแกนใบงาน: การ์ดสแกน + เมนูประวัติ (ออกแบบให้พอดีจอ iData 360x640) ===== */
#screen-mode.screen--active { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.page-head .screen-title { font-size: 24px; line-height: 1.25; margin: 0; }
#labelBranchUser {
  display: inline-block;
  margin: 4px 0 0;
  padding: 2px 10px;
  border-radius: 999px;
  background: #ede9fe;
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
}

.scan-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(76, 29, 149, .06), 0 8px 24px rgba(76, 29, 149, .10);
}
.scan-card__top { display: flex; align-items: center; gap: 12px; }
.scan-card__visual {
  position: relative;
  flex: 0 0 64px; height: 64px;
  border-radius: 14px;
  background: #f1edff;
  overflow: hidden;
}
.scan-card__visual svg { display: block; width: 100%; height: 100%; fill: #6d28d9; stroke: var(--brand); }
.scan-card__laser {
  position: absolute; left: 10px; right: 10px; top: 18px;
  height: 2px; border-radius: 2px;
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, .8);
  animation: scan-laser 1.8s ease-in-out infinite alternate;
}
@keyframes scan-laser { from { transform: translateY(0); } to { transform: translateY(26px); } }
.scan-card__intro { min-width: 0; }
.scan-card__intro p { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: var(--text-dim); }
.scan-ready {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-size: 12px;
  font-weight: 700;
}
.scan-ready__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #16a34a;
  animation: scan-ready-pulse 1.6s ease-out infinite;
}
@keyframes scan-ready-pulse {
  from { box-shadow: 0 0 0 0 rgba(22, 163, 74, .55); }
  to   { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); }
}

.scan-card .field { margin: 0; }
.scan-card .field span { margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--navy); }
.scan-card .field input {
  min-height: 56px;
  padding: 12px 14px;
  font-size: 18px;
  letter-spacing: .02em;
}
.scan-card .field input::placeholder { color: #9ca3af; }
#docScanError {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid rgba(226, 86, 79, .35);
  border-radius: 10px;
  background: rgba(226, 86, 79, .10);
  color: var(--red);
  font-size: 14px;
  font-weight: 600;
}

.scan-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.scan-steps .hist-mode { padding: 2px 8px; font-size: 11px; }
.scan-steps__arrow { color: var(--text-dim); font-size: 13px; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  .scan-card__laser, .scan-ready__dot { animation: none; }
}

/* ===== หน้ารายการสินค้าในใบ (รับเข้า / ย้าย Stock / Pick / Pack / Ship): กระชับ อ่านง่ายบนจอ iData ===== */
/* หัวใบงาน: ป้ายขั้นตอน + เลขใบ แถวเดียว */
#screen-pick-products .doc-card {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  margin: 0 0 6px;
}
#docModeChip { flex: 0 0 auto; padding: 1px 8px; font-size: 11px; }
#docModeChip[hidden] { display: none; }
#screen-pick-products #labelSelectedPicking {
  margin: 0;
  min-width: 0;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
  word-break: break-word;
}

/* ช่องสแกนบนหน้ารายการ: เตี้ยลง */
#screen-pick-products #pickListLocationField { margin-bottom: 6px; }
#screen-pick-products #pickListLocationQr { min-height: 0; padding: 6px 10px; font-size: 14px; }

/* การ์ดสินค้า: แถบสีซ้าย + ป้ายสถานะเป็นคำ (เนื้อหาเท่าเดิม แต่กระชับ) */
#productListContainer { gap: 6px; }
#productListContainer .product-card {
  margin: 0;
  padding: 6px 10px 6px 11px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 5px solid #a78bfa;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  line-height: 1.25;
}
#productListContainer .product-card--progress { background: #fff7ed; border-color: #fed7aa; border-left-color: #f97316; }
#productListContainer .product-card--ok { background: #f0fdf4; border-color: #bbf7d0; border-left-color: #16a34a; }
#productListContainer .product-card--flash { box-shadow: 0 0 0 4px rgba(124, 58, 237, .35), var(--shadow-md); }
#productListContainer .pc-head { align-items: center; }
#productListContainer .pc-code { font-size: 15px; }
#productListContainer .pc-qty {
  padding: 1px 8px;
  border-radius: 999px;
  background: #ede9fe;
  color: var(--navy);
  font-size: 15px;
  box-shadow: none;
}
#productListContainer .product-card--progress .pc-qty { background: #ffedd5; color: #c2410c; }
#productListContainer .product-card--ok .pc-qty { background: #16a34a; color: #fff; }
#productListContainer .pc-name { margin-top: 1px; font-size: 12px; line-height: 1.3; -webkit-line-clamp: 2; }

.pc-loc { display: flex; align-items: baseline; gap: 5px; margin-top: 3px; }
.pc-loc__tag {
  flex: 0 0 auto;
  padding: 0 6px;
  border-radius: 5px;
  background: var(--navy);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.6;
}
.pc-loc__val { min-width: 0; font-size: 13px; font-weight: 700; color: var(--text); word-break: break-word; }
.pc-loc--empty { font-size: 11px; color: var(--text-dim); }
.pc-foot { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
/* อีกฝั่งของ Location: บรรทัดเดียว ถ้ายาวเกินให้ตัดด้านหน้า (เห็นชื่อ Bin ท้ายสุดเสมอ) */
.pc-sub {
  flex: 1; min-width: 0;
  font-size: 11px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  direction: rtl; text-align: left;
}
.pc-sub > span { direction: ltr; unicode-bidi: isolate; }
.pc-badge {
  flex: 0 0 auto;
  padding: 0 7px;
  border-radius: 999px;
  background: #ede9fe;
  color: var(--navy);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.7;
}
.product-card--progress .pc-badge { background: #ffedd5; color: #c2410c; }
.product-card--ok .pc-badge { background: #dcfce7; color: #15803d; }

/* ปุ่มล่าง (กลับ / Validate): เตี้ย กินพื้นที่น้อย */
#screen-pick-products.screen--scan { padding-bottom: 36px; }   /* เว้นที่ให้แถบปุ่มล่างที่เตี้ยลง */
#screen-pick-products .sticky-actions {
  gap: 6px;
  padding: 3px 10px calc(3px + env(safe-area-inset-bottom, 0px));
  border-radius: 12px 12px 0 0;
}
#screen-pick-products .sticky-actions .btn {
  min-height: 26px;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 12px;
}
#screen-pick-products .sticky-actions .btn--primary { box-shadow: 0 2px 8px rgba(124, 58, 237, .25); }

/* ===== popup Backorder: สรุป 4 ช่องแถวเดียว (ทำแล้ว / Backorder / SKU ทั้งหมด / SKU Backorder) + ย่อทั้ง popup ===== */
.bo-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 2px 0 8px; }
.bo-stat {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 2px;
  min-width: 0;
  padding: 4px 2px;
  border-radius: 8px;
  background: #f5f3ff;
  text-align: center;
}
.bo-stat__label { flex-basis: 100%; font-size: 10px; font-weight: 600; line-height: 1.25; color: var(--text-dim); }
.bo-stat__value { font-size: 17px; line-height: 1.2; font-weight: 800; color: #111827; font-variant-numeric: tabular-nums; }
.bo-stat__unit { font-size: 9px; color: var(--text-dim); }
.bo-stat--done { background: #f0fdf4; }
.bo-stat--done .bo-stat__value { color: #15803d; }
.bo-stat--back { background: #fef2f2; }
.bo-stat--back .bo-stat__value { color: #dc2626; }
#backorderModal .modal-box { padding: 20px 14px 14px; }
#backorderModal .modal-box h2 { margin: 0 0 4px; font-size: 18px; }
#backorderModal #backorderMessage { margin: 0 0 8px; font-size: 13px; line-height: 1.4; }
#backorderModal .backorder-items { margin: 0 0 8px; max-height: 32vh; }
#backorderModal .backorder-items li { padding: 4px 8px; margin-bottom: 3px; font-size: 12px; line-height: 1.3; }
#backorderModal .backorder-items .bo-qty { font-size: 11px; }
#backorderModal .modal-actions { gap: 6px; margin-top: 4px; }
#backorderModal .modal-actions .btn { padding: 9px 12px; font-size: 14px; border-radius: 12px; }
.backorder-items li { flex-direction: column; align-items: flex-start; gap: 2px; }
.backorder-items .bo-qty { white-space: normal; font-size: 12px; }

/* ===== รูปทะเบียนรถ (หน้ารายการใบรับเข้า + popup ถ่ายรูป) ===== */
.plate-bar {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 6px;
  padding: 5px 8px;
  border: 1.5px dashed #fdba74;
  border-radius: 12px;
  background: #fff7ed;
}
.plate-bar[hidden] { display: none; }
.plate-bar--done { border-style: solid; border-color: #bbf7d0; background: #f0fdf4; }
.plate-bar__thumb { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: #e5e7eb; }
.plate-bar__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.plate-bar__text strong { font-size: 13px; color: #c2410c; }
.plate-bar--done .plate-bar__text strong { color: #15803d; }
.plate-bar__text small { font-size: 11px; color: var(--text-dim); }
.plate-bar__btn {
  flex: 0 0 auto;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--brand-grad);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(124, 58, 237, .28);
}
.plate-bar__btn:active { transform: scale(.96); }
#plateModal .modal-actions { flex-direction: column; }
#plateModal .modal-actions .btn { width: 100%; }
#plateModal .modal-box { --tint: #fff7ed; --accent: linear-gradient(90deg, #fb923c, #f97316); }
.plate-preview { display: block; width: 100%; max-height: 38vh; margin: 4px 0 0; border-radius: 12px; object-fit: contain; background: #111827; }
.plate-preview[hidden] { display: none; }
.plate-error {
  margin: 8px 0 0;
  padding: 8px 12px;
  border: 1px solid rgba(226, 86, 79, .35);
  border-radius: 10px;
  background: rgba(226, 86, 79, .10);
  color: var(--red);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}
.plate-error[hidden] { display: none; }
.dash-chip--truck { background: #e0f2fe; color: #075985; }
.dash-chip--truck .dash-chip__value { color: #0369a1; }

/* ===== ประวัติ: เวลารายชิ้น (แตะเพื่อเปิด) ===== */
.hist-times { margin: -2px 0 4px; padding: 0 10px; font-size: 12px; }
.hist-times__summary { cursor: pointer; padding: 3px 0; color: var(--brand); font-weight: 600; }
.hist-times__summary:focus-visible { outline: 2px solid var(--brand-dim); outline-offset: 2px; border-radius: 4px; }
.hist-times__list { list-style: none; margin: 2px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.hist-times__list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: baseline;
  padding: 3px 8px;
  border-radius: 6px;
  background: #faf8ff;
}
.hist-times__n { min-width: 0; font-weight: 600; color: var(--text); }
.hist-times__ts { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--navy); white-space: nowrap; }
.hist-times__user { color: var(--text-dim); white-space: nowrap; }
.hist-times__adjust { background: #fff7ed !important; }
.hist-times__adjust .hist-times__n { color: #c2410c; }
li.hist-times__outside { display: block; background: #f1f5f9; color: var(--text-dim); font-style: italic; }

/* ===== หน้ารายการสินค้า: แถบสรุปทั้งใบแถวเดียว SKU / ทั้งหมด = ดำ / เสร็จ = เขียว / Backorder = แดง ===== */
.list-sum {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 6px;
  padding: 3px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.list-sum[hidden] { display: none; }
.list-sum__cell { display: flex; flex-direction: column; align-items: center; min-width: 0; line-height: 1.15; }
.list-sum__cell + .list-sum__cell { border-left: 1px solid var(--line); }
.list-sum__cell span { font-size: 10px; font-weight: 700; color: var(--text-dim); }
.list-sum__cell strong { font-size: 18px; font-weight: 800; color: #111827; font-variant-numeric: tabular-nums; }
.list-sum__cell--done strong { color: #15803d; }
.list-sum__cell--back strong { color: #dc2626; }

/* ===== การ์ดประวัติ: สรุป 5 ช่อง SKU + ชิ้นทั้งหมด (ดำ) / ทำแล้ว (เขียว) / Backorder ชิ้น + SKU (แดง) ===== */
.hist-stats--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.hist-stats--5 .hist-stat {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 2px;
  min-width: 0;
  padding: 3px 2px;
}
.hist-stats--5 .hist-stat__label { flex-basis: 100%; font-size: 10px; line-height: 1.25; }
.hist-stats--5 .hist-stat__value { font-size: 16px; color: #111827; }
.hist-stat__unit { font-size: 9px; color: var(--text-dim); }
.hist-stats--5 .hist-stat--done { background: #f0fdf4; }
.hist-stats--5 .hist-stat--done .hist-stat__value { color: #15803d; }
.hist-stats--5 .hist-stat--back { background: #fef2f2; }
.hist-stats--5 .hist-stat--back .hist-stat__value { color: #dc2626; }
/* ประวัติ: สแกนแล้วแต่ยังไม่ Validate (ยังไม่นับว่าทำครบ) */
.hist-item--pending { background: #ede9fe; color: var(--navy); }
/* ประวัติ: แถวที่ยอดสแกนถูกล้างเพราะออกจากใบโดยยังไม่ Validate */
.hist-times__discard { background: #f1f5f9 !important; }
.hist-times__discard .hist-times__n { color: #b91c1c; }

/* ===== ประวัติ: ก้อนใบ Backorder (ยังไม่ได้ทำ) ใต้ใบที่ทำแล้วในขั้นเดียวกัน ===== */
.hist-backorder {
  margin: 10px 0 2px;
  padding: 6px 8px 4px;
  border: 1.5px dashed #fca5a5;
  border-radius: 12px;
  background: #fff5f5;
}
.hist-backorder__title { font-size: 13px; font-weight: 800; color: #b91c1c; }
.hist-backorder .hist-picking { margin-top: 6px; }