@font-face{font-family:'Sarabun';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/sarabun-thai-400.woff2) format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/sarabun-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/sarabun-thai-500.woff2) format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/sarabun-latin-500.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/sarabun-thai-600.woff2) format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/sarabun-latin-600.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/sarabun-thai-700.woff2) format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;}
@font-face{font-family:'Sarabun';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/sarabun-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* FlowExpress POS — โทนสี light/dark */
:root {
  color-scheme: light;
  --page: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #fbfbfa;
  --text: #14181f;
  --text-2: #5b6470;
  --muted: #8b95a3;
  --border: rgba(20, 24, 31, 0.12);
  --brand: #2a78d6;
  --brand-ink: #ffffff;
  --ems: #eb6834;
  --flash: #eda100;
  --kex: #1baf7a;
  --good: #0ca30c;
  --warn: #d03b3b;
  --shadow: 0 1px 3px rgba(20, 24, 31, 0.08), 0 1px 2px rgba(20, 24, 31, 0.04);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: #0d0f13;
    --surface: #1a1d23;
    --surface-2: #21252c;
    --text: #f0f2f5;
    --text-2: #b3bcc9;
    --muted: #7d8896;
    --border: rgba(255, 255, 255, 0.12);
    --brand: #3987e5;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Sarabun', system-ui, -apple-system, "Segoe UI", "Noto Sans Thai", sans-serif;
  background: var(--page);
  color: var(--text);
  font-size: 14px;
}
button, input, select { font: inherit; }

/* ---- topbar ---- */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; background: var(--surface);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20;
}
.topbar h1 { font-size: 16px; margin: 0; font-weight: 700; }
.topbar .spacer { flex: 1; }
.topbar .who { color: var(--text-2); font-size: 13px; }
.btn {
  cursor: pointer; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); padding: 7px 14px;
}
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn.primary:hover { opacity: .92; }

/* ---- layout ---- */
main { max-width: 1180px; margin: 0 auto; padding: 16px 18px 60px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 820px) { .grid2 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px; box-shadow: var(--shadow); margin-bottom: 16px;
}
.card h2 {
  font-size: 13px; margin: 0 0 12px; font-weight: 700; color: var(--text-2);
  text-transform: uppercase; letter-spacing: .04em;
}
.field { margin-bottom: 10px; position: relative; }
.field label { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
.field input, .field select {
  width: 100%; padding: 8px 11px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface-2); color: var(--text);
}
.field input:focus, .field select:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.row { display: flex; gap: 10px; }
.row .field { flex: 1; }

/* autocomplete dropdown */
.ac-list {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow); max-height: 240px; overflow-y: auto; margin-top: 2px;
}
.ac-list div { padding: 8px 11px; cursor: pointer; font-size: 13px; }
.ac-list div:hover, .ac-list div.active { background: color-mix(in srgb, var(--brand) 12%, transparent); }

/* ---- courier buttons ---- */
.couriers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 560px) { .couriers { grid-template-columns: 1fr; } }
.courier {
  position: relative; border: 2px solid var(--border); border-radius: 12px;
  padding: 14px; text-align: center; background: var(--surface-2);
  cursor: pointer; transition: transform .05s, border-color .1s;
}
.courier:hover:not(.disabled) { transform: translateY(-1px); }
.courier.selected { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
.courier.disabled { opacity: .5; cursor: not-allowed; }
.courier .name { font-weight: 700; font-size: 14px; }
.courier .name.ems { color: var(--ems); }
.courier .name.flash { color: var(--flash); }
.courier .name.kex { color: var(--kex); }
.courier .price { font-size: 30px; font-weight: 800; line-height: 1.1; margin: 6px 0; font-variant-numeric: tabular-nums; }
.courier .cost { font-size: 12px; color: var(--text-2); }
.courier .warn { font-size: 12px; color: var(--warn); font-weight: 600; }
.courier .sp { font-size: 11.5px; color: var(--flash); margin-top: 2px; }
.courier .rec {
  position: absolute; top: -9px; right: 8px; background: var(--good); color: #fff;
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px;
}
.courier .user { font-size: 11px; color: var(--muted); margin-top: 3px; }

.hint { color: var(--muted); font-size: 13px; text-align: center; padding: 20px; }
.err { color: var(--warn); font-size: 13px; }

/* ---- POS layout: main + sticky sidebar ---- */
/* ===== Sidebar shell (POS/หน้าร้าน) — เมนูซ้ายแบบ me2plus ===== */
.shell { display: flex; align-items: stretch; min-height: 100vh; }
/* ซ่อน view ที่ไม่ active ให้ชนะ display ของ .pos-layout/.stub-view (UA [hidden] แพ้ author) */
.app-view[hidden] { display: none !important; }
/* ไทม์ไลน์แนวนอน (ติดตามพัสดุ) — จุดเทา=ผ่านมา, เขียว=ปัจจุบัน, ลูกศรเทาเชื่อม */
.htl { display: flex; align-items: flex-start; overflow-x: auto; padding: 12px 4px 6px; }
.htl-step { flex: 0 0 auto; width: 104px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.htl-node { height: 22px; display: flex; align-items: center; justify-content: center; }
.htl-dot { width: 12px; height: 12px; border-radius: 50%; background: #c4ccd6; }
.htl-dot.now { width: 22px; height: 22px; background: var(--good); box-shadow: 0 0 0 5px color-mix(in srgb, var(--good) 28%, transparent); }
.htl-label { margin-top: 10px; font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--text); }
.htl-time { margin-top: 3px; font-size: 11px; color: var(--text-2); line-height: 1.35; font-variant-numeric: tabular-nums; }
.htl-arrow { flex: 1 1 34px; min-width: 38px; height: 22px; position: relative; }
.htl-arrow::before { content: ''; position: absolute; left: 0; right: 9px; top: 50%; height: 3px; transform: translateY(-50%); background: #c4ccd6; border-radius: 2px; }
.htl-arrow::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); border-left: 9px solid #c4ccd6; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.shell-main { flex: 1; min-width: 0; }
.sidebar { flex: 0 0 224px; width: 224px; background: var(--surface);
  border-right: 1px solid var(--border); position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 8px 0 20px; }
.side-brand { margin: 6px 12px 12px; padding: 8px 12px; }
.side-brand img { display: block; width: 100%; height: auto; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 9px 18px; color: var(--text-2);
  text-decoration: none; font-size: 13.5px; font-weight: 500; cursor: pointer; border-left: 3px solid transparent; white-space: nowrap; }
/* ⚠️ display:flex ข้างบนชนะ attribute hidden (UA stylesheet แพ้ author) — เมนูที่ hidden จะโชว์ตลอด
   ถ้าไม่มีกฎนี้ (เจอจริงกับ "พัสดุร้านย่อย" ที่ปิดธงแล้วแต่ยังโผล่ 2026-08-16) */
.nav-item[hidden] { display: none !important; }
.nav-item .ico { width: 20px; flex: 0 0 20px; display: flex; align-items: center; justify-content: center; }
.nav-item .ico svg { width: 19px; height: 19px; }
.nav-item svg { stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-item:hover { background: color-mix(in srgb, #EE7A1F 8%, transparent); color: var(--text); }
.nav-item.active { background: color-mix(in srgb, #EE7A1F 15%, transparent); color: #DC6512; font-weight: 600; border-left-color: #EE7A1F; }
.nav-sep { height: 1px; background: var(--border); margin: 9px 16px; }
.brand-logo-sm { height: 26px; width: auto; vertical-align: middle; }
.only-mobile { display: none; }
.stub-view { max-width: 1180px; margin: 0 auto; padding: 16px 18px 60px; }
@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; top: 0; z-index: 60; transform: translateX(-100%);
    transition: transform .2s ease; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
  .sidebar.open { transform: translateX(0); }
  .nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 55; }
  .only-mobile { display: inline-flex; }
}

.pos-layout { display: grid; grid-template-columns: 1fr 360px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .pos-layout { grid-template-columns: 1fr; } }
.pos-side { position: sticky; top: 70px; }

/* add-parcel bar */
.addbar { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.addbar .btn { padding: 10px 18px; font-weight: 600; }

/* ---- cart ---- */
.cart-list { display: flex; flex-direction: column; gap: 8px; }
/* พัสดุในตะกร้า = 1 บรรทัดยาว (ขนส่ง · ผู้รับ · เลข · ราคา · ลบ) คลิกที่บรรทัดเพื่อดูรายละเอียด */
.cart-item {
  display: flex; gap: 7px; align-items: center;
  padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2);
  font-size: 13px;
}
/* เฉพาะพัสดุที่คลิกเปิดรายละเอียดได้ (สินค้าไม่มีหน้ารายละเอียด) */
.cart-item[data-open-parcel] { cursor: pointer; }
.cart-item[data-open-parcel]:hover { border-color: var(--brand); }
.cart-item .t { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-item .s { color: var(--text-2); font-size: 12px; }
.cart-item .tag { flex: 0 0 auto; font-size: 10.5px; padding: 1px 6px; }
.cart-item .tag.ems { color: var(--ems); border-color: color-mix(in srgb, var(--ems) 45%, transparent); }
.cart-item .tag.flash { color: var(--flash); border-color: color-mix(in srgb, var(--flash) 45%, transparent); }
.cart-item .tag.kex { color: var(--kex); border-color: color-mix(in srgb, var(--kex) 45%, transparent); }

/* รายละเอียดในโมดัล (พัสดุ/Flash Care) — ใช้ prefix ik- (info key/value)
   ⚠️ ห้ามใช้ชื่อ .dt-* ซ้ำกับตารางลูกหนี้ (debtors.js ใช้ `tr.dt-row` เป็นแถวตาราง)
   เคยชนกันแล้วทำให้ทุกแถวในหน้าลูกหนี้กลายเป็น flex คอลัมน์เพี้ยนทั้งตาราง */
.ik-sec { font-size: 11.5px; font-weight: 700; color: var(--text-2); text-transform: uppercase;
  letter-spacing: .04em; margin: 12px 0 5px; border-bottom: 1px solid var(--border); padding-bottom: 3px; }
.ik-sec:first-child { margin-top: 0; }
.ik-row { display: flex; gap: 10px; padding: 2px 0; font-size: 13px; }
.ik-row .k { flex: 0 0 108px; color: var(--text-2); }
.ik-row .v { flex: 1; min-width: 0; word-break: break-word; }
/* เลข tracking ที่ดึงมาแล้ว (EMS ออกเลขตั้งแต่กดปุ่ม) — ตัวพิมพ์เดียวกันหมดเพื่ออ่านเทียบกับสติกเกอร์ง่าย */
.cart-item .trk { font-family: ui-monospace, "Consolas", monospace; font-size: 11px; letter-spacing: .01em;
  color: var(--brand); font-weight: 600; flex: 0 0 auto; }
/* เลขที่กดได้ = พิมพ์ลาเบลใบนั้น — ต้องดูออกว่าคลิกได้ ไม่ใช่ข้อความเฉย ๆ */
.cart-item .trk.print { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.cart-item .trk.print:hover { color: var(--brand-2, var(--brand)); text-decoration-style: solid; }
.cart-item .price { font-variant-numeric: tabular-nums; font-weight: 600; }
.cart-item .x { cursor: pointer; color: var(--muted); border: none; background: none; font-size: 16px; }
.cart-item .x:hover { color: var(--warn); }
.cart-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 12px; }

.tag { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 99px; border: 1px solid var(--border); color: var(--text-2); }

/* summary */
.sum-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.sum-row.total { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 8px; font-size: 20px; font-weight: 800; }
.sum-row .v { font-variant-numeric: tabular-nums; }
.sum-row input { width: 90px; text-align: right; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--text); }

/* ---- modal ---- */
.modal-bg {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal-bg[hidden] { display: none; }
.modal {
  background: var(--surface); border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,.3);
  width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto; padding: 20px;
}
.modal h2 { margin: 0 0 14px; font-size: 16px; }
.modal-close { float: right; cursor: pointer; border: none; background: none; font-size: 20px; color: var(--muted); }

/* product picker grid */
.prod-groups { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.prod-groups .chip { cursor: pointer; padding: 5px 12px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface-2); font-size: 13px; }
.prod-groups .chip.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
/* modal เลือกสินค้า — ขนาดคงที่ ไม่ยืด-หดตามจำนวนสินค้าของกลุ่มที่กด
   (ชิปกลุ่มแสดงครบทุกกลุ่มเสมอ ตัวแปรเดียวคือจำนวนสินค้าในตาราง → ล็อกความสูงตารางแล้วเลื่อนข้างใน) */
#productsModal .modal { width: 640px; max-width: 92vw; }
#productsModal .prod-grid { height: 46vh; min-height: 240px; overflow-y: auto; align-content: start; }
.prod-empty { color: var(--muted); font-size: 13px; padding: 12px 2px; }
.prod-btn {
  cursor: pointer; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
  padding: 10px 6px; text-align: center;
}
.prod-btn:hover { border-color: var(--brand); }
.prod-btn .n { font-weight: 600; font-size: 13px; }
.prod-btn .p { color: var(--brand); font-weight: 700; margin-top: 2px; }

/* payment */
.pay-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.pay-method {
  cursor: pointer; border: 2px solid var(--border); border-radius: 10px; padding: 12px; text-align: center; font-weight: 600;
  background: var(--surface-2);
}
.pay-method.active { border-color: var(--brand); color: var(--brand); }
.pay-total { text-align: center; font-size: 34px; font-weight: 800; margin: 6px 0 14px; font-variant-numeric: tabular-nums; }
.quick { display: flex; gap: 8px; margin: 10px 0; }
.quick button { flex: 1; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); cursor: pointer; font-weight: 600; }
.quick button:hover { border-color: var(--brand); }
.pay-change { font-size: 18px; text-align: center; margin-top: 8px; }
.pay-change b { color: var(--good); }

/* ---- login ---- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card { width: 360px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 28px; box-shadow: var(--shadow); }
.login-card h1 { font-size: 19px; margin: 0 0 4px; }
.login-card .sub { color: var(--text-2); font-size: 13px; margin-bottom: 18px; }
.login-card .btn { width: 100%; margin-top: 16px; padding: 10px; }
.login-card .err { margin-top: 10px; min-height: 18px; }

/* ---------- แจ้งเตือนพัสดุมีปัญหา ---------- */
#btAlerts { position: relative; }
#btAlerts.has-alert { border-color: var(--warn); }
.badge {
  position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--warn); color: #fff; font-size: 11px; line-height: 17px; text-align: center;
  border-radius: 9px; font-weight: 700;
}
.alert-item {
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
  background: var(--surface-2); cursor: pointer; border-left: 3px solid var(--muted);
}
.alert-item.unread { border-left-color: var(--warn); background: rgba(208, 59, 59, 0.06); }
.alert-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.alert-top b { font-size: 15px; }
.alert-item .tag {
  font-size: 11px; padding: 2px 8px; border-radius: 20px; background: var(--warn); color: #fff; white-space: nowrap;
}
.alert-item .sm { color: var(--text-2); font-size: 12px; margin-top: 2px; }
.alert-msg { font-size: 12.5px; margin-top: 6px; color: var(--text); }

/* ---------- หน้า landing / สมัครใช้งาน ---------- */
.landing { max-width: 640px; margin: 0 auto; padding: 28px 16px 60px; }
.landing-hero { text-align: center; margin-bottom: 20px; }
.landing-hero h1 { font-size: 30px; margin: 0 0 6px; }
.landing-hero p { color: var(--text-2); margin: 0 0 14px; font-size: 14px; }
.reg-card { max-width: 560px; margin: 0 auto; }
.reg-card h2 { margin-top: 0; }
.reg-card .field { position: relative; }
.btn.ghost { background: transparent; border: 1px solid var(--border); }
hr.sep { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
.ac-box {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin-top: 3px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow); max-height: 240px; overflow-y: auto;
}
.ac-item { padding: 8px 11px; cursor: pointer; font-size: 13px; }
.ac-item:hover { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.ac-zip { color: var(--muted); font-size: 12px; float: right; }

/* ---------- Admin backoffice ---------- */
.admin-wrap { max-width: 1100px; margin: 0 auto; padding: 16px; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); }
.stat-v { font-size: 26px; font-weight: 700; line-height: 1.1; }
.stat-l { font-size: 12.5px; color: var(--text-2); margin-top: 3px; }
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
table th { text-align: left; color: var(--text-2); font-weight: 600; padding: 7px 9px; border-bottom: 2px solid var(--border); white-space: nowrap; }
table td { padding: 7px 9px; border-bottom: 1px solid var(--border); vertical-align: top; }
table td.empty { text-align: center; color: var(--muted); padding: 18px; }
.btn.sm { padding: 3px 10px; font-size: 12px; }
.pill { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 600; }
.pill.pending { background: color-mix(in srgb, var(--flash) 20%, transparent); color: var(--flash); }
.pill.approved { background: color-mix(in srgb, var(--good) 20%, transparent); color: var(--good); }
.pill.rejected { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }

/* ---- Phase 3: จัดการผู้ใช้ในร้าน ---- */
.chk { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; padding: 3px 0; }
.chk input { width: auto; margin: 0; }
.perm-box { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line, #e2e6ee); border-radius: 10px; background: color-mix(in srgb, var(--brand) 4%, transparent); }
.perm-title { font-weight: 600; margin-bottom: 6px; font-size: 13px; color: var(--text-2); }
.nowrap { white-space: nowrap; }
table tr.inactive td { opacity: .5; }
table code { background: color-mix(in srgb, var(--text) 8%, transparent); padding: 1px 6px; border-radius: 5px; font-size: 12.5px; }

/* ---- รายงาน: กราฟรายวัน (palette ผ่าน validate ทั้ง light/dark) ---- */
:root {
  --viz-ems: #eb6834;
  --viz-kex: #1baf7a;
  --viz-flash: #eda100;
  --viz-other: #8b95a3;
  --viz-grid: rgba(20, 24, 31, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --viz-ems: #df6430;
    --viz-kex: #19a674;
    --viz-flash: #c08300;
    --viz-other: #7d8896;
    --viz-grid: rgba(255, 255, 255, 0.08);
  }
}
.range-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.range-row .btn.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.viz-figure { margin: 14px 0 4px; }
.viz-title { font-size: 13px; color: var(--text-2); margin-bottom: 8px; }
.viz-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; font-size: 12.5px; color: var(--text-2); }
.viz-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.viz-plot { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 170px; padding-top: 6px;
  border-bottom: 1px solid var(--viz-grid); overflow-x: auto; }
.viz-col { flex: 1 1 0; min-width: 14px; max-width: 44px; display: flex; flex-direction: column-reverse; height: 100%;
  justify-content: flex-start; cursor: default; }
.viz-col .seg { width: 100%; margin-top: 2px; }              /* 2px surface gap ระหว่างชั้น */
.viz-col .seg:last-child { border-radius: 4px 4px 0 0; }     /* ปลายข้อมูลโค้ง 4px ชั้นบนสุด */
.viz-col:hover .seg { filter: brightness(1.08); }
.viz-x { display: flex; gap: 3px; margin-top: 4px; }
.viz-x span { flex: 1 1 0; min-width: 14px; max-width: 44px; text-align: center; font-size: 10.5px; color: var(--muted); }
.viz-tip { position: fixed; z-index: 60; background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow); padding: 8px 10px; font-size: 12.5px; pointer-events: none; min-width: 130px; }
.viz-tip b { display: block; margin-bottom: 3px; }
.viz-tip .row-t { display: flex; justify-content: space-between; gap: 12px; color: var(--text-2); }
.viz-empty { padding: 28px; text-align: center; color: var(--muted); font-size: 13px; }

/* ช่องวันที่แบบไทย (thai-date.js): ซ่อนข้อความ native ค.ศ. คง calendar picker + วางป้าย พ.ศ. ทับ */
.tdate-wrap { position: relative; display: block; }
input.tdate { color: transparent; }
input.tdate::-webkit-datetime-edit { color: transparent; }
input.tdate:focus { color: transparent; }
.tdate-lbl { position: absolute; left: 11px; top: 0; height: 100%; display: flex; align-items: center;
  pointer-events: none; color: var(--text); font-variant-numeric: tabular-nums; font-size: 14px; }

/* ตารางแยกร้าน (dashboard) — ตัวเลขชิดขวา */
#dbShopTable th:nth-child(n+2), #dbShopTable td:nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; }

/* แถวรวมต่อขนส่ง (staff summary) — override .sum-row flex (บรรทัด 148) ให้กลับเป็น table-row ตัวเลขจะตรงคอลัมน์ */
table tr.sum-row { display: table-row; }
table tr.sum-row td { font-weight: 700; background: color-mix(in srgb, var(--brand) 7%, transparent); border-top: 1px solid var(--border); }
/* ตัวเลขในตารางสรุป — ชิดขวาให้เรียงหลักตรงกัน (ชิ้น/ยอดขาย/กำไร)
   แถวข้อมูล = คอลัมน์ 3-5 ; แถวรวม = 3 ช่องหลัง label (label เป็น colspan=2 จึงใช้ td+td) */
#shopTable th:nth-child(n+3),
#shopTable tr:not(.sum-row) td:nth-child(n+3),
#shopTable tr.sum-row td + td { text-align: right; font-variant-numeric: tabular-nums; }

/* timeline modal (ติดตามพัสดุ) */
.tn-link { text-decoration: none; }
.tn-link:hover code { text-decoration: underline; }
ul.timeline { list-style: none; margin: 4px 0 0; padding: 0; max-height: 340px; overflow-y: auto; }
ul.timeline li { position: relative; padding: 0 0 14px 22px; }
ul.timeline li::before { content: ''; position: absolute; left: 5px; top: 4px; bottom: -4px; width: 2px; background: var(--border); }
ul.timeline li:last-child::before { display: none; }
ul.timeline .tl-dot { position: absolute; left: 0; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); border: 2px solid var(--surface); }
ul.timeline li.now .tl-dot { background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 25%, transparent); }
ul.timeline li.now .tl-desc { font-weight: 700; }
.tl-desc { font-size: 14px; color: var(--text); }
.tl-meta { font-size: 12px; color: var(--text-2); margin-top: 1px; }

/* พัสดุมีปัญหา (staff) */
.stat-tile.clickable { cursor: pointer; transition: box-shadow .12s, transform .12s; }
.stat-tile.clickable:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.prob-item { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.prob-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 3px; }
.prob-cause { margin-top: 5px; font-size: 13.5px; color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent); border-radius: 6px; padding: 5px 8px; }

/* ---------- แท็บแยกหมวด (หน้า admin / staff) ---------- */
.tabbar { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; border-bottom: 1px solid var(--border); }
.tabbtn {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 10px 16px; font-size: 14.5px; font-weight: 600; color: var(--text-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 8px 8px 0 0;
}
.tabbtn:hover { background: color-mix(in srgb, #EE7A1F 8%, transparent); color: var(--text); }
.tabbtn.active { color: #DC6512; border-bottom-color: #EE7A1F; }
.tabbtn .cnt { font-weight: 700; margin-left: 5px; }

/* ---------- หน้าส่งพัสดุ: บีบให้พอดี 1 หน้าจอ ไม่ต้องเลื่อน ----------
   จอโน้ตบุ๊ก (~660-720px) เดิมต้องเลื่อนลงไปดู "เลือกขนส่ง" ทุกครั้ง
   บีบเฉพาะใน #view-send ไม่กระทบหน้าอื่นที่ใช้ .card/.field ร่วมกัน */
#view-send .card { padding: 10px 12px; margin-bottom: 8px; }
#view-send .card h2 { margin-bottom: 7px; }
#view-send .grid2 { gap: 10px; }
#view-send .field { margin-bottom: 5px; }
#view-send .field label { margin-bottom: 2px; font-size: 11.5px; }
/* สูงขึ้นอีกนิด + line-height 1.5 เพราะสระล่างภาษาไทย (ุ ู) โดนตัดที่ความสูงเดิม */
#view-send .field input, #view-send .field select { padding: 7px 10px; line-height: 1.5; }
#view-send .row { gap: 8px; }

/* การ์ดขนส่ง — ตัวเลขยังอ่านง่ายแต่เตี้ยลง */
#view-send .couriers { gap: 10px; }
#view-send .courier { padding: 9px 10px; }
#view-send .courier .price { font-size: 22px; margin: 2px 0; }
/* การ์ดขนส่งเลือกด้วยคีย์บอร์ดได้ (tabindex) — ต้องเห็นชัดว่าโฟกัสอยู่ใบไหน */
.courier:focus { outline: 2px solid var(--brand); outline-offset: 2px; }
.courier:focus-visible { outline: 3px solid var(--brand); }

/* 🔒 "ล็อก" ตัวเดียวที่หัวการ์ดรายละเอียดพัสดุ = คงค่าทุกช่องไว้หลังเพิ่มพัสดุ */
#view-send .card-parcel > h2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lock-all { display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-2); }
.lock-all input { width: 14px; height: 14px; margin: 0; accent-color: var(--brand); cursor: pointer; }
#view-send .field.locked input, #view-send .field.locked select {
  border-color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, var(--surface));
}

/* ช่องตัวเลข (นน./กว้าง/ยาว/สูง/COD) แคบพอดีค่าที่กรอก
   ที่เหลือไปให้ดรอปดาวน์ + ช่องพื้นที่ ซึ่งข้อความยาวกว่ามาก */
/* 88px = ความกว้างที่ป้าย "น้ำหนัก (กก.)" / "COD (บาท)" อยู่บรรทัดเดียวพอดี
   แคบกว่านี้ป้ายตกบรรทัด แถวสูงขึ้น 15px แล้วหน้าเลยจอ */
#view-send .field.num { flex: 0 0 88px; }
#view-send .field.f-box { flex: 0 0 124px; }   /* ขนาดกล่อง — ชื่อยาวสุด "กำหนดเอง" */
/* สัดส่วนช่องในการ์ดผู้ส่ง/ผู้รับ — เบอร์ 10 หลักพอที่ 104px ที่เหลือแบ่งกัน */
#view-send .row .f-phone { flex: 0 0 104px; }
#view-send .row .f-name  { flex: 1; }
#view-send .row .f-addr  { flex: 1.45; }
#view-send .row .f-loc   { flex: 2.15; }
/* จอแคบ (โน้ตบุ๊ก ~1280) ยกที่ว่างกลับให้ "พื้นที่" เพราะ ตำบล-อำเภอ-จังหวัด-รหัส
   กว้างถึง 266px วัดจริงแล้วสัดส่วนของจอกว้างจะตัดข้อความ */

/* กว้าง/ยาว/สูง แคบกว่าเพราะเป็นเลข ซม. 2-3 หลัก — ที่ที่เหลือยกให้ประเภทพัสดุ
   (ชื่อยาวสุด "กระเป๋า/รองเท้า" ต้องการราว 145px ถึงจะไม่โดนตัด) */
#view-send .field.dim { flex: 0 0 62px; }
#view-send .field.num input, #view-send .field.dim input { padding-left: 7px; padding-right: 4px; }

@media (max-width: 1500px) {
  #view-send .row .f-addr { flex: 1.15; }
  #view-send .row .f-loc  { flex: 2.5; }
  /* แถวรายละเอียดพัสดุมี 7 ช่อง — จอแคบต้องบีบช่องตัวเลขลง ไม่งั้นดรอปดาวน์
     "ประเภทพัสดุ" เหลือ 84px แล้วชื่อยาว ("กระเป๋า/รองเท้า" = 127px) โดนตัด */
  #view-send .field.num { flex: 0 0 76px; }
  #view-send .field.dim { flex: 0 0 56px; }
  #view-send .field.f-box { flex: 0 0 104px; }
}

/* สีพื้นอ่อน ๆ แยกการ์ดผู้ส่ง / ผู้รับ / รายละเอียดพัสดุ
   ใช้ color-mix ผสมกับ --surface → โหมดมืดได้สีเข้มอ่อนเองไม่ต้องเขียนซ้ำ */
#view-send .card-sender   { background: color-mix(in srgb, #EE7A1F 7%, var(--surface)); }
#view-send .card-receiver { background: color-mix(in srgb, #2F80ED 7%, var(--surface)); }
#view-send .card-parcel   { background: color-mix(in srgb, #27AE60 7%, var(--surface)); }
#view-send .card-sender > h2   { color: #C55A0C; }
#view-send .card-receiver > h2 { color: #1B5FBF; }
#view-send .card-parcel > h2   { color: #1E8A4C; }
/* ช่องกรอกยังเป็นพื้นขาว/เข้มตามธีม เพื่อให้เห็นชัดว่าพิมพ์ได้ */
#view-send .card-sender .field input, #view-send .card-sender .field select,
#view-send .card-receiver .field input, #view-send .card-receiver .field select,
#view-send .card-parcel .field input, #view-send .card-parcel .field select { background: var(--surface); }

@media (prefers-color-scheme: dark) {
  #view-send .card-sender > h2   { color: #F5A15C; }
  #view-send .card-receiver > h2 { color: #79AEF5; }
  #view-send .card-parcel > h2   { color: #6FD79B; }
}

/* ---------- บริการเสริม Flash Care (เช็คบ็อกซ์เหนือปุ่ม Flash) ---------- */
.courier-wrap { display: flex; flex-direction: column; gap: 4px; }
.fcare {
  display: flex; align-items: center; gap: 5px; cursor: pointer;
  font-size: 11.5px; font-weight: 600; color: var(--flash);
  padding: 2px 4px; border-radius: 6px; line-height: 1.25;
}
.fcare input { width: 13px; height: 13px; margin: 0; accent-color: var(--flash); cursor: pointer; }
/* ไม่เข้าเงื่อนไข = จางลงและกดไม่ได้ (เมาส์ชี้จะเห็นเหตุผลใน title) */
.fcare.off { color: var(--muted); cursor: not-allowed; }
.fcare.off input { cursor: not-allowed; }

/* การ์ดขนส่งสูงเท่ากันทั้ง 3 ใบ — Flash มี label "Flash Care" อยู่ข้างบน
   จึงต้องให้ .courier-wrap เป็นตัวยืดเต็มแถว แล้วการ์ดข้างในกินที่ที่เหลือ
   (grid row สูงตามใบที่สูงสุดอยู่แล้ว เหลือแค่บังคับ height:100% ให้ทุกใบ) */
.couriers { align-items: stretch; }
.courier-wrap { height: 100%; }
.courier-wrap > .courier { flex: 1; }
.couriers > .courier, .courier-wrap > .courier {
  height: 100%; display: flex; flex-direction: column; justify-content: center;
}
/* label Flash Care สูงคงที่ ไม่ให้การ์ดขยับตอนข้อความยาวขึ้น (โชว์ค่าบริการ)
   และการ์ดที่ไม่มี label ใส่ที่ว่างความสูงเท่ากันไว้ → 3 ใบสูงเท่ากันเป๊ะ */
.fcare, .fcare-space { min-height: 18px; display: block; }
.fcare { display: flex; }

/* ปุ่มที่ปิดใช้งานต้องดูออกว่ากดไม่ได้ (เดิม .btn.primary ยังเป็นสีน้ำเงินเต็ม
   ทำให้ผู้ใช้กดแล้วไม่มีอะไรเกิดขึ้น) */
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- ปุ่มอ่านบัตรประชาชน (หน้าส่งพัสดุ) ---------- */
.field.f-idcard { flex: 0 0 44px; }
.btn.idcard { width: 100%; height: 37px; padding: 0; line-height: 0;
  display: inline-flex; align-items: center; justify-content: center; color: var(--brand); }
.btn.idcard svg { width: 26px; height: 19px; display: inline-block; vertical-align: middle; }
.btn.idcard.busy { opacity: .6; }

/* ===== เมนู "เช็คข้อมูลพัสดุ" — บีบให้เห็นครบใน 1 จอ (เจ้าของระบบสั่ง 2026-08-21)
   บีบเฉพาะใน #view-parcelcheck เหมือนที่ทำกับ #view-send ไม่กระทบหน้าอื่น */
#view-parcelcheck .card { padding: 9px 12px; margin-bottom: 8px; }
#view-parcelcheck .card h2 { margin-bottom: 6px; }
#view-parcelcheck .field { margin-bottom: 0; }
#view-parcelcheck .field label { margin-bottom: 2px; font-size: 11.5px; }
#view-parcelcheck .field input, #view-parcelcheck .field select { padding: 7px 10px; line-height: 1.5; }
#view-parcelcheck .row { gap: 8px; align-items: flex-end; }
#view-parcelcheck .field.num { flex: 0 0 88px; }
#view-parcelcheck .field.dim { flex: 0 0 62px; }
#view-parcelcheck .field.f-box { flex: 0 0 124px; }
#view-parcelcheck .row .f-phone { flex: 0 0 104px; }
#view-parcelcheck .row .f-name  { flex: 1; }
#view-parcelcheck .row .f-addr  { flex: 1.15; }
#view-parcelcheck .row .f-loc   { flex: 2.2; }
/* หัวเรื่อง + สรุปพัสดุ อยู่ขวาของช่องค้นหา (ไม่กินความสูงเพิ่ม) */
#view-parcelcheck .pe-info { flex: 1; min-width: 0; padding-bottom: 2px; }
#view-parcelcheck #pe_head { font-size: 15px; font-weight: 700; }
#view-parcelcheck #pe_sub { font-size: 12px; color: var(--text-2); }
#view-parcelcheck .pe-note { color: var(--text-2); margin-top: 4px; }
#view-parcelcheck #pe_msg:empty, #view-parcelcheck #pe_result:empty { display: none; }
#view-parcelcheck #pe_msg, #view-parcelcheck #pe_result { margin-top: 6px; }
/* แถบปุ่ม: ปุ่ม 2 ตัวกว้างคงที่ ข้อความผลลัพธ์ต่อท้ายในแถวเดียวกัน */
#view-parcelcheck .pe-actions .row { align-items: center; }
#view-parcelcheck .pe-actions .btn { flex: 0 0 190px; padding: 10px; }
#view-parcelcheck .pe-actions .err { flex: 1; margin-top: 0; }

/* ===== เมนู "ส่งเลขให้ลูกค้า" — คอลัมน์ตัวเลขชิดขวา (ธรรมเนียมเดียวกับตารางอื่นในระบบ) */
#st_table th.num, #st_table td.num { text-align: right; font-variant-numeric: tabular-nums; }
#st_table td { vertical-align: middle; }
#view-sendtracking #st_msg:empty { display: none; }

/* แถวตัวกรองของเมนู "ส่งเลขให้ลูกค้า" — ปุ่มค้นหา/ช่องติ๊ก อยู่ระดับเดียวกับช่องกรอก
   (.field มี margin-bottom ทำให้ปุ่มที่ไม่มี margin ดูต่ำกว่า เมื่อ align-items:flex-end) */
#view-sendtracking .field { margin-bottom: 0; }
#view-sendtracking #st_go { height: 38px; }
#view-sendtracking .st-all { display: inline-flex; align-items: center; gap: 6px; height: 38px;
  white-space: nowrap; font-size: 13px; color: var(--text); cursor: pointer; }
#view-sendtracking .st-all input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); cursor: pointer; }
#st_table .tag-guest { font-size: 11px; color: var(--text-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 6px; margin-left: 6px; white-space: nowrap; }

/* ติ๊ก "พิมพ์ใบเสร็จ" ในหน้าชำระเงิน — วางกลางเหนือปุ่มยืนยัน */
.pay-receipt { justify-content: center; margin-top: 12px; font-weight: 600; }
.pay-receipt input { width: 17px; height: 17px; accent-color: var(--brand); cursor: pointer; }

/* ---- หน้าข้อมูลพัสดุ (POS): แถบตัวกรอง ----
   .field กลางมี margin-bottom 10px → ปุ่มที่จัดชิดล่างจะต่ำกว่าช่องกรอก 10px
   บีบเฉพาะแถบนี้ ไม่แตะ .field กลาง เพราะหน้าอื่นใช้ร่วมกัน */
.pi-bar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; }
.pi-bar .field { margin-bottom: 0; }
/* ช่องกรอกสูง 37px (padding 8+8 + border 2 + บรรทัด 19) → ปุ่ม/ตัวเลือกหน้าสูงเท่ากันจึงอยู่ระดับเดียวกัน */
.pi-bar .btn { height: 37px; }
.pi-bar .pager { display: flex; align-items: center; height: 37px; }
.pi-bar .pager .btn.sm { height: auto; }