/* กิ้มเส็ง ค้าข้าว — CRM styling.
   Palette ported from the source design (oklch). */
:root {
  --app-bg:      oklch(0.965 0.008 255);
  --card-bg:     oklch(1 0 0);
  --text:        oklch(0.20 0.02 260);
  --text-2:      oklch(0.30 0.02 260);
  --muted:       oklch(0.48 0.02 255);
  --border:      oklch(0.88 0.012 255);
  --border-row:  oklch(0.90 0.012 255);
  --input-bg:    oklch(0.965 0.008 255);
  --input-border:oklch(0.82 0.02 255);
  --btn-border:  oklch(0.78 0.02 255);
  --primary:     oklch(0.62 0.16 255);
  --on-primary:  oklch(1 0 0);
  --danger:      oklch(0.62 0.19 25);
  --row-hover:   oklch(0.95 0.012 255);
  /* พื้นอ่อนสำหรับไฮไลต์อ่อน ๆ (โทนตามธีมเดิม) */
  --primary-weak:  oklch(0.96 0.04 255);
  --danger-weak:   oklch(0.62 0.19 25 / 0.08);

  /* ===== แถบเมนูซ้าย: ขาว อักษรเทาเข้ม (เมนูที่เลือก = น้ำเงินตามธีม) ===== */
  --sidebar-bg:     oklch(1 0 0);
  --sidebar-tx:     oklch(0.28 0.02 260);
  --sidebar-tx2:    oklch(0.50 0.02 255);
  --sidebar-active: oklch(0.62 0.16 255);
  --sidebar-hover:  oklch(0.95 0.012 255);
}

/* ===== โหมดกลางคืน: สลับเฉพาะชุดสีหลัก (ทุกหน้าจอใช้ตัวแปรชุดนี้อยู่แล้ว) =====
   ป้ายสีต่างๆ (pill / jflag / wms-tag) เป็นพื้นอ่อนตัวหนังสือเข้ม -> อ่านได้ดีบนพื้นมืดอยู่แล้ว จึงไม่แตะ
   เอกสารสำหรับพิมพ์ (ใบเสนอราคา / ป้ายพาเลท) ตั้งพื้นขาวไว้ใน inline style -> ยังขาวเหมือนเดิมทั้งสองโหมด */
html[data-theme="dark"] {
  color-scheme: dark;
  --app-bg:      #0a0a0a;   /* ดำสนิท (เทากลาง ไม่อมสี) */
  --card-bg:     #141414;   /* แผง/การ์ด */
  --text:        #e8e8e8;
  --text-2:      #c9c9c9;
  --muted:       #8a8a8a;
  --border:      #2a2a2a;
  --border-row:  #222222;
  --input-bg:    #161616;
  --input-border:#333333;
  --btn-border:  #3a3a3a;
  --primary:     oklch(0.70 0.15 255);
  --on-primary:  #0a0a0a;
  --danger:      oklch(0.70 0.18 25);
  --row-hover:   #1c1c1c;
  --primary-weak:#1d2634;
  --danger-weak: oklch(0.70 0.18 25 / 0.16);
  --sidebar-bg:     #0f0f0f;
  --sidebar-tx:     #e2e2e2;
  --sidebar-tx2:    #8f8f8f;
  --sidebar-active: oklch(0.58 0.16 255);
  --sidebar-hover:  #1c1c1c;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a3a3a; }
html[data-theme="dark"] img.job-photo, html[data-theme="dark"] .avatar img { filter: brightness(0.88); }
/* แผนที่: ใช้ไทล์เดิม (OpenStreetMap) แล้วกลับสีให้เป็นโทนกลางคืนเข้ม — ไม่ต้องพึ่งผู้ให้บริการแผนที่เจ้าใหม่ */
.ops-map.dark-tiles .leaflet-tile { filter: invert(1) hue-rotate(180deg) brightness(0.70) contrast(0.86) saturate(0.7) grayscale(0.25); }
.ops-map.dark-tiles .leaflet-container { background: #101010; }
/* กดที่พื้นที่จังหวัดแล้วต้องไม่มีกรอบสี่เหลี่ยมค้าง:
     เบราว์เซอร์โฟกัสรูป <path> ที่กดได้ แล้ววาดกรอบโฟกัสรอบกรอบสี่เหลี่ยมของรูปนั้น
     (บนจอสัมผัสยังมีกรอบไฮไลต์ตอนแตะค้าง + เมนูคัดลอกโผล่มาด้วย) — ปิดทั้งชุดเฉพาะในแผนที่
     ปุ่มซูม/ปุ่มอื่นในแผนที่ไม่โดน เพราะเจาะจงเฉพาะรูปทรงที่กดได้กับตัวกล่องแผนที่ */
.ops-map .leaflet-interactive:focus,
.ops-map svg:focus,
.ops-map path:focus { outline: none; }
.ops-map .leaflet-container:focus:not(:focus-visible) { outline: none; }
.ops-map, .ops-map .leaflet-interactive {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none; -webkit-user-select: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { touch-action: manipulation; }   /* ปิดแตะสองครั้งซูม (แผนที่ Leaflet ตั้ง touch-action ของตัวเอง) */
body {
  font-family: 'Noto Sans Thai', 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--text);
  font-size: 15px;
  background: var(--app-bg);
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: oklch(0.75 0.02 255); border-radius: 4px; }

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
a { color: inherit; }

/* ---------- Login ---------- */
.login-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--app-bg);
}
.login-card {
  width: 360px; background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 32px;
}
.login-head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 24px; }
.login-sub { font-size: 12px; color: var(--muted); }
.login-fields { display: flex; flex-direction: column; gap: 12px; }
.login-error { font-size: 12px; color: var(--danger); }

/* โลโก้จริง (ไฟล์รูป) — โลโก้เต็มมีตัวอักษรในรูป */
.brand-logo-lg { display: block; width: 120px; height: 120px; object-fit: contain; }   /* โลโก้ระบบ OPS (สี่เหลี่ยมจัตุรัส) */

/* ---------- App shell ---------- */
.app-shell { display: flex; height: 100vh; overflow: hidden; background: var(--app-bg); }

.sidebar {
  width: 232px; flex-shrink: 0; background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 20px 14px; gap: 24px;
  color: var(--sidebar-tx); min-height: 0;
}
/* เมนูยาวเกินจอ = เลื่อนเฉพาะรายการเมนู · กล่องโปรไฟล์/ออกจากระบบ (.sys-bottom) ปักอยู่ล่างเสมอ */
.sidebar > .nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -6px; padding: 0 6px; }
.sidebar > .nav::-webkit-scrollbar { width: 6px; }
.sidebar > .nav::-webkit-scrollbar-button { display: none; height: 0; }
/* แถบเลื่อนเมนูซ้าย: ซ่อนไว้ · โผล่เฉพาะตอนกำลังเลื่อน (JS ใส่คลาส .scrolling แล้วถอดออกเมื่อหยุดเลื่อน) */
.sidebar > .nav::-webkit-scrollbar-thumb { background: transparent; }
.sidebar > .nav.scrolling::-webkit-scrollbar-thumb { background: oklch(0.75 0.02 255); }
html[data-theme="dark"] .sidebar > .nav::-webkit-scrollbar-thumb { background: transparent; }
html[data-theme="dark"] .sidebar > .nav.scrolling::-webkit-scrollbar-thumb { background: #3a3a3a; }
.sidebar > .sys-bottom { flex: none; }
.nav { display: flex; flex-direction: column; gap: 8px; }
/* กลุ่มเมนูแบบพับ/ขยาย */
.nav-sec { display: flex; flex-direction: column; }
.nav-sec-head {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: transparent; border: none; cursor: pointer; padding: 5px 12px 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--sidebar-tx2);
}
.nav-sec-head:hover { color: var(--sidebar-tx); }
.nav-sec-chev { font-size: 10px; color: var(--sidebar-tx2); margin-left: 8px; }
.nav-sec-body { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 8px; border: none; background: transparent;
  color: var(--sidebar-tx); font-size: 14px; text-align: left; width: 100%;
}
.nav-item .ico { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.9; }
.nav-item:hover { background: var(--sidebar-hover); color: var(--text); }
.nav-item.active { background: var(--sidebar-active); color: oklch(1 0 0); font-weight: 600; }

.sidebar-user {
  margin-top: auto; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px; background: var(--sidebar-hover);
}
.sidebar-user .info { line-height: 1.3; overflow: hidden; flex: 1; display: block; min-width: 0; }
.sidebar-user .info .n { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user .info .r { display: block; font-size: 11px; color: var(--sidebar-tx2); }
/* ส่วนรูป+ชื่อ = ปุ่มเปิดหน้าโปรไฟล์ของฉัน (2026-09-21) */
.sidebar-user .sb-me {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  background: transparent; border: none; padding: 0; margin: 0; cursor: pointer;
  color: inherit; font: inherit; text-align: left;
}
.sidebar-user .sb-me:hover .info .n { text-decoration: underline; }
.sidebar-user .logout { background: transparent; border: none; color: var(--sidebar-tx2); font-size: 11px; padding: 4px; }
.sidebar-user .logout:hover { color: var(--text); }

.avatar {
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 600; color: var(--on-primary); flex-shrink: 0;
}

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar {
  height: 64px; flex-shrink: 0; display: flex; align-items: center;
  justify-content: space-between; padding: 0 28px; border-bottom: 1px solid var(--border);
}
.topbar .title { font-size: 19px; font-weight: 700; }
.topbar .updated { font-size: 12px; color: var(--muted); }
.content { flex: 1; overflow-y: auto; padding: 28px; }

/* Notification bell dropdown */
.notif-panel { position: absolute; top: 34px; right: 0; width: 330px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 28px oklch(0.2 0.03 260 / 0.18); z-index: 150; overflow: hidden; }
.notif-item { padding: 10px 30px 10px 14px; border-bottom: 1px solid var(--border-row); cursor: pointer; }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--row-hover); }
.notif-item.read { opacity: 0.38; filter: grayscale(0.65); transition: opacity 0.12s, filter 0.12s; }
.notif-item.read:hover { opacity: 0.92; filter: none; }
.notif-del { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; line-height: 1; border: none; background: transparent; color: var(--muted); cursor: pointer; border-radius: 5px; font-size: 12px; padding: 0; }
/* Broadcast (2026-10-31) */
.notif-panel .bc-open { padding: 4px 9px; font-size: 11px; margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.bc-h { font-size: 12.5px; font-weight: 700; color: oklch(0.45 0.16 255); }
.bc-body { font-size: 12.5px; margin-top: 4px; line-height: 1.55; overflow-wrap: anywhere; color: var(--text); }
.bc-body a { color: oklch(0.5 0.17 255); text-decoration: underline; }
.bc-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; margin-top: 6px; }
.bc-img { position: relative; display: block; border-radius: 7px; overflow: hidden; border: 1px solid var(--border); background: var(--row-hover); }
.bc-img img { display: block; width: 100%; max-height: 220px; object-fit: cover; }
.bc-imgs.one { grid-template-columns: 1fr; }
.bc-imgs.one .bc-img img { max-height: 320px; object-fit: contain; }
.bc-img-link { position: absolute; right: 5px; bottom: 5px; background: oklch(0.25 0.03 260 / 0.7); color: #fff; border-radius: 5px; padding: 2px 5px; font-size: 11px; line-height: 1; }
.bc-files { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.bc-file { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; color: var(--text); text-decoration: none; min-width: 0; }
.bc-file span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-file em { font-style: normal; color: var(--muted); font-size: 11px; }
.bc-file:hover { background: var(--row-hover); }
.bc-modal .bc-ups { display: flex; flex-direction: column; gap: 6px; }
.bc-up { display: flex; align-items: center; gap: 10px; padding: 7px; border: 1px solid var(--border); border-radius: 9px; }
.bc-up img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; flex: none; }
.bc-up-ic { width: 56px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex: none; color: var(--muted); }
.bc-up-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bc-up-n { font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-up-l { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.bc-up-l .input { padding: 6px 9px; font-size: 12.5px; flex: 1; min-width: 0; width: auto; }
.bc-roles, .bc-when { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.bc-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); cursor: pointer; }
.bc-chk input { width: 15px; height: 15px; }
.bc-chk.all { font-weight: 600; flex-basis: 100%; }
html .pill.bc-sched { background: oklch(0.95 0.07 85); color: oklch(0.45 0.12 70); }
.bc-row { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.bc-row-top { display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.bc-row-top > .btn { margin-left: auto; }
html .pill.bc-mode-pill { background: oklch(0.94 0.04 255); color: oklch(0.42 0.13 255); }
/* Broadcast แบบเด้งกลางหน้าจอ (2026-11-01) — การ์ดรูป + ปุ่ม ✕ มุมขวาบน + ปิดการแจ้งเตือนนี้ */
.bcpop-overlay { position: fixed; inset: 0; z-index: 140; background: oklch(0.2 0.03 260 / 0.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.bcpop { position: relative; width: min(520px, 100%); }
.bcpop-card { max-height: calc(100vh - 110px); overflow-y: auto; border-radius: 14px; background: var(--card-bg); box-shadow: 0 18px 50px oklch(0.15 0.03 260 / 0.45); }
.bcpop-img { display: block; }
.bcpop-img img { display: block; width: 100%; height: auto; }
.bcpop-img + .bcpop-img { border-top: 1px solid var(--border); }
.bcpop-files { padding: 10px 12px; margin-top: 0; }
.bcpop-x { position: absolute; top: -14px; right: -14px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff;
  background: oklch(0.3 0.02 260); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.bcpop-x:hover { background: oklch(0.2 0.02 260); }
.bcpop-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; color: #fff; font-size: 12.5px; }
.bcpop-off { background: transparent; border: 1px solid oklch(1 0 0 / 0.6); color: #fff; border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 12.5px; cursor: pointer; }
.bcpop-off:hover { background: oklch(1 0 0 / 0.15); }
@media (max-width: 600px) { .bcpop-x { top: -12px; right: -6px; } }
.bc-preview { padding: 8px 10px; border-radius: 8px; background: var(--row-hover); margin-bottom: 6px; }
.notif-del:hover { background: oklch(0.9 0.06 25); color: oklch(0.55 0.19 25); }

/* ---------- Cards & generic ---------- */
.card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; }
.card-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.muted { color: var(--muted); }

/* ---------- Dashboard ---------- */
/* Management dashboard */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; } /* แดชบอร์ดต้องจบในหน้าเดียว (จอเปิดทั้งวัน) — ระยะกระชับ */
.kpi { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 16px 9px; }
.kpi-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.kpi-value { font-size: 27px; font-weight: 700; line-height: 1.1; }
.kpi-sub { font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.prov-row { display: grid; grid-template-columns: 1.2fr 1.7fr 66px 70px; gap: 10px; align-items: center; padding: 9px 6px; border-bottom: 1px solid var(--border-row); font-size: 13px; }
.prov-row.clickable { cursor: pointer; border-radius: 6px; }
.prov-row.clickable:hover { background: var(--row-hover); }
.prov-head { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; border-bottom: 1px solid var(--border); }
.range-btn { background: var(--input-bg); border: 1px solid var(--border); border-radius: 7px; padding: 4px 10px; font-size: 11.5px; color: var(--muted); cursor: pointer; font-family: inherit; }
.range-btn.on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); font-weight: 600; }
.card-title.danger { color: var(--danger); }

/* ---------- Toolbar / filters ---------- */
.toolbar { display: flex; gap: 12px; margin-bottom: 18px; align-items: center; flex-wrap: wrap; }
.result-count { font-size: 12px; color: var(--muted); margin-bottom: 10px; }

.input, .select, .textarea {
  background: var(--card-bg); border: 1px solid var(--input-border); border-radius: 8px;
  padding: 10px 14px; color: var(--text); font-size: 13.5px;
}
.input.grow { flex: 1; min-width: 220px; }
.textarea { resize: vertical; }
/* ดรอปดาวน์: ลูกศรชี้ลงแบบกำหนดเอง จัดกึ่งกลางแนวตั้ง สีเทากลางให้บาลานซ์กับข้อความ */
.select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23697079' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px;
}
.select.sm { padding-right: 28px; background-position: right 9px center; background-size: 13px; }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid oklch(0.62 0.16 255 / 0.4); outline-offset: 0; }
/* ช่องที่กรอกค่าซ้ำกับที่อื่น (ใช้กับรหัสสินค้ารายขนาด) */
.input.dup { border-color: var(--danger); background: var(--danger-weak); color: var(--danger); font-weight: 600; }

.btn {
  border: none; border-radius: 8px; padding: 11px 20px;
  color: var(--on-primary); font-weight: 600; font-size: 13.5px; background: var(--primary);
  white-space: nowrap; letter-spacing: 0.01em;
  box-shadow: 0 1px 2px oklch(0.2 0.03 260 / 0.12); transition: filter 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.btn:hover { filter: brightness(1.06); box-shadow: 0 2px 6px oklch(0.2 0.03 260 / 0.16); }
.btn:active { box-shadow: 0 1px 1px oklch(0.2 0.03 260 / 0.14); }
.btn.ghost { background: transparent; border: 1px solid var(--btn-border); color: var(--text-2); font-weight: 500; box-shadow: none; filter: none; }
.btn.ghost:hover { background: var(--row-hover); border-color: var(--muted); box-shadow: none; }
.btn.sm { padding: 6px 12px; font-size: 11.5px; }
.btn.block { display: block; }
.btn.danger { background: var(--danger); color: oklch(1 0 0); }
.btn.danger:hover { filter: brightness(1.05); }
.btn.danger.ghost { background: transparent; border: 1px solid var(--danger); color: var(--danger); box-shadow: none; }
.btn.danger.ghost:hover { background: var(--danger-weak); filter: none; }

/* ---------- Customer table ---------- */
.table-wrap { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; overflow-x: auto; }
.cust-grid {
  display: grid;
  grid-template-columns: 76px minmax(0,1.4fr) 104px minmax(0,1.15fr) minmax(0,0.8fr) 80px 80px 100px 34px;
  gap: 6px; padding: 12px 14px; min-width: 1060px; align-items: center;
}
.cust-head {
  font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--border);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.cust-row { border-bottom: 1px solid var(--border-row); font-size: 12.5px; cursor: pointer; }
.cust-row:hover { background: var(--row-hover); }
.cust-row .row-go { text-align: right; color: var(--muted); font-size: 20px; line-height: 1; }
.cust-row:hover .row-go { color: var(--text); }
.cust-row .id { color: var(--muted); font-size: 11.5px; }
.cust-row .shop { font-weight: 600; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.dim { font-size: 11.5px; color: var(--muted); }
.pill {
  display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; color: var(--on-primary); white-space: nowrap;
}
.pill.lg { padding: 5px 12px; font-size: 12px; }
/* ลูกค้า Inactive: ส่วนที่ทำรายการได้ถูกล็อก (inert) + จาง จนกว่าจะเปลี่ยนเป็น Active */
.cust-locked { opacity: 0.45; pointer-events: none; user-select: none; filter: grayscale(0.6); }
/* ป้ายสถานะ + ป้าย "ติดต่อไม่ได้ครั้งที่ N / ไปเยี่ยมชมลูกค้า" ซ้อนกันในช่องเดียว */
.st-stack { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.st-stack.lg { align-items: flex-end; flex-shrink: 0; }

/* ---------- Detail ---------- */
.back-link { background: transparent; border: none; color: var(--muted); font-size: 13px; margin-bottom: 16px; padding: 0; }
.back-link:hover { color: var(--text); }
.detail-cols { display: grid; grid-template-columns: 1fr 1.3fr; gap: 20px; align-items: start; }
.detail-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.detail-head .shop { font-size: 19px; font-weight: 700; }
.detail-head .sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; font-size: 13px; }
.detail-grid .full { grid-column: 1 / 3; }
.field-label { color: var(--muted); font-size: 11.5px; margin-bottom: 3px; }
.detail-right { display: flex; flex-direction: column; gap: 16px; }
/* หน้ารายละเอียดลูกค้า (จัดใหม่ 2026-10-29): แถวบน ข้อมูลหลัก (1 ส่วน) | บันทึกการติดต่อ (2 ส่วน) สูงเท่ากัน · ใบเสนอราคาเต็มแถว · ประวัติเต็มแถว
   minmax(0, …) = คอลัมน์ไม่ขยายตามเนื้อหา -> ไม่ล้นจอขวา */
.cd-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; align-items: stretch; }
.cd-top.solo { grid-template-columns: minmax(0, 1fr); }
.cd-top > .cust-locked > .card { height: 100%; }
.cd-row { margin-top: 16px; }
.cd-top > *, .cd-row > * { min-width: 0; }
.cd-key { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-row); }
.cd-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.cd-kpi { background: var(--row-hover); border-radius: 9px; padding: 9px 12px; min-width: 0; }
.cd-kpi .v { font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.cd-kpi .v.neg { color: var(--danger); }
.site-photos-wrap { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); }
.site-photos { display: grid; gap: 8px; }
.sp-tile { display: block; position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-row); background: var(--row-hover); padding: 0; min-width: 0; }
.sp-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-more { cursor: pointer; }
.sp-more span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: oklch(0.2 0.02 260 / 0.55); color: #fff; font-size: 22px; font-weight: 700; }
.sp-more:hover span { background: oklch(0.2 0.02 260 / 0.68); }
.sp-nav { padding: 2px 10px; font-size: 15px; line-height: 1.2; }
.qt-tbl .qnote-cell { position: static; min-width: 0; padding: 6px 6px 6px 18px; box-shadow: none; }   /* ห่างจากคอลัมน์ราคา ไม่มีเส้นกั้น */
.qt-head { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.qt-title { margin: 0; display: flex; gap: 8px; align-items: center; cursor: pointer; }
.qt-branch { display: inline-flex; gap: 8px; align-items: center; }
.qt-caret { margin-left: auto; cursor: pointer; padding: 4px 6px; }
.qt-tbl thead th { vertical-align: bottom; padding: 8px 4px; font-size: 11px; font-weight: 600; color: var(--muted); line-height: 1.3; text-align: left; border-bottom: 1px solid var(--border-row); }
.qt-tbl thead th.qt-sz { text-align: right; overflow-wrap: anywhere; }
.qt-sz b { display: block; font-size: 12.5px; font-weight: 700; color: var(--text); }
.qt-sz span { display: block; font-size: 10.5px; font-weight: 400; }
.qt-tbl .input.qnote-in { min-width: 0; }
.qt-tbl .select { min-width: 0; }
@media (max-width: 900px) { .cd-top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .qt-tbl { min-width: 760px; } }

.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tag-btn { border-radius: 999px; padding: 5px 12px; font-size: 12px; border: 1px solid var(--btn-border); background: transparent; color: var(--text-2); }
.tag-btn.on { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }

.collapse-head { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.timeline { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; overflow-y: auto; }
.timeline.contacts { max-height: 420px; }
.timeline.edits { max-height: 280px; gap: 12px; }
.tl-item { border-left: 2px solid var(--primary); padding-left: 12px; }
.tl-item.edit { border-left-color: var(--btn-border); }
.tl-item .when { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.tl-item .result { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.tl-item .note { font-size: 12.5px; color: var(--text-2); }
.tl-item .tags { font-size: 11.5px; color: var(--primary); margin-top: 3px; }
.tl-item .chg { font-size: 12.5px; margin-bottom: 2px; }
/* ประวัติการติดต่อ (แถวเดียว): วันที่·ผู้บันทึก | ผล | เลขที่เอกสาร·น้ำหนัก·ยอด | สถานะ | เหตุผล/โน้ต (ย่อ) | ⋮ — จอแคบให้ตัดบรรทัดเอง */
.timeline.contacts { gap: 0; margin-top: 10px; }
.tl-item.one { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; padding: 7px 0 7px 12px; border-bottom: 1px solid var(--border); font-size: 12.5px; min-width: 0; }
.tl-item.one:last-child { border-bottom: none; }
.tl-item.one .tl-when { color: var(--muted); font-size: 12px; white-space: nowrap; flex: 0 0 auto; }
.tl-item.one .tl-res { font-weight: 600; font-size: 13px; white-space: nowrap; flex: 0 0 auto; }
.tl-item.one .tl-res .pill.void { vertical-align: middle; }
.tl-item.one .tl-doc { display: inline-block; white-space: nowrap; flex: 0 1 auto; min-width: 60px; overflow: hidden; text-overflow: ellipsis; }
.tl-item.one .tl-doc .doc-no { font-weight: 600; }
.tl-item.one .tl-doc .ci { vertical-align: -0.15em; }
.tl-item.one .pill.tl-st { display: inline-block; flex: 0 1 auto; min-width: 48px; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; }
.tl-item.one .tl-extra { flex: 1 3 40px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-item.one .tl-spacer { flex: 1 1 0; min-width: 0; }
@media (max-width: 900px) { .tl-item.one { flex-wrap: wrap; gap: 4px 10px; } .tl-item.one .tl-spacer { display: none; } }
.tl-item.void { opacity: 0.62; border-left-color: var(--btn-border); }
.tl-item.void .tl-res { color: var(--muted); }
.tl-item.void .tl-doc { color: var(--muted) !important; }
.tl-item.void .doc-no { text-decoration: line-through; }
.pill.void { background: oklch(0.86 0.01 260); color: oklch(0.38 0.02 260); letter-spacing: 0.04em; }
.tl-menu-btn { width: 26px; height: 26px; font-size: 16px; margin-left: auto; flex-shrink: 0; } /* ปุ่ม ⋮ เปิดหน้าต่างตัวเลือก (สไตล์เดียวกับ .ord-menu-btn ในจัดการออเดอร์) */
.modal-title .pill.void { vertical-align: middle; margin-left: 4px; }
/* หน้าต่าง "ข้อมูลการจัดส่ง" */
.di-row { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.di-row .di-k { flex: 0 0 150px; color: var(--muted); font-size: 12px; }
.di-row .di-v { flex: 1; min-width: 0; word-break: break-word; }
.di-photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 6px; }
.di-photos .job-photo { margin-top: 0; max-height: 200px; }

/* ---------- Users ---------- */
.users-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.lock-note { font-size: 11.5px; color: var(--muted); }
.users-wrap { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 24px; }
.users-grid { display: grid; grid-template-columns: 1fr 0.9fr 0.9fr 0.8fr 1.3fr 150px; gap: 8px; padding: 13px 16px; align-items: center; font-size: 13px; }
.users-grid.fl-grid { grid-template-columns: 1fr 0.9fr 0.9fr 1.2fr 150px; }
.users-grid.wh-grid { grid-template-columns: 1.3fr 1fr 0.8fr 0.8fr 150px; }
.wh-sub { font-size: 12px; font-weight: 600; color: var(--muted); border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; }
.users-head { font-size: 11.5px; color: var(--muted); border-bottom: 1px solid var(--border); text-transform: uppercase; padding: 12px 16px; }
.users-row { border-bottom: 1px solid var(--border-row); }
.users-row .who { display: flex; align-items: center; gap: 10px; }
.section-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
/* หัวข้อ + แถบเครื่องมือ (โน้ต+ปุ่ม) อยู่บรรทัดเดียวกัน */
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin: 24px 0 12px; }
.section-head .section-title { margin: 0; }
.section-head .users-toolbar { margin: 0; }
@media (max-width: 700px) { .section-head .users-toolbar { width: 100%; justify-content: flex-start; } }
.audit-wrap { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.audit-grid { display: grid; grid-template-columns: 150px 1fr 1.4fr 1.4fr; gap: 8px; padding: 12px 16px; font-size: 12.5px; }
.audit-head { font-size: 11.5px; color: var(--muted); border-bottom: 1px solid var(--border); text-transform: uppercase; }
.audit-row { border-bottom: 1px solid var(--border-row); }

/* ---------- Modal / forms ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: oklch(0.25 0.05 255 / 0.45);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.modal { background: var(--card-bg); border: 1px solid var(--input-border); border-radius: 12px; padding: 26px; max-height: 85vh; overflow-y: auto; }
.modal.wide { width: 640px; }
.modal.narrow { width: 520px; }
.modal-title { font-size: 16px; font-weight: 700; margin-bottom: 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-col { display: flex; flex-direction: column; gap: 12px; }
.field { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 5px; }
.field.full { grid-column: 1 / 3; }
.field .input, .field .select, .field .textarea { font-size: 13px; padding: 9px 11px; }
.field-hint { font-size: 11px; color: var(--muted); margin-top: -1px; line-height: 1.4; }
/* หัวหมวดในฟอร์มลูกค้า (แก้ไขข้อมูลลูกค้า: ข้อมูลทั่วไป / ที่อยู่ / บัญชี / การติดตาม) */
.form-sec { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--text); padding-bottom: 7px; border-bottom: 1px solid var(--border); margin-top: 10px; }
.form-sec:first-child { margin-top: 0; }
.form-sec .no { width: 22px; height: 22px; border-radius: 50%; background: var(--primary-weak); color: var(--primary); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; }
.perm-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.perm-item:hover { background: var(--input-bg); }
.perm-item input { width: 16px; height: 16px; accent-color: var(--primary); }
.checkbox { width: 16px; height: 16px; accent-color: var(--primary); }

@media (max-width: 900px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-cols { grid-template-columns: 1fr; }
}

/* ---------- เรียลไทม์: แถบคนที่กำลังดูหน้านี้ ---------- */
.rt-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 8px 12px; border-radius: 10px;
  background: oklch(0.96 0.03 255); border: 1px solid oklch(0.88 0.04 255);
  font-size: 12.5px;
}
.rt-live {
  width: 8px; height: 8px; border-radius: 50%; background: oklch(0.68 0.17 145);
  box-shadow: 0 0 0 0 oklch(0.68 0.17 145 / 0.7); animation: rt-pulse 2s infinite; flex: none;
}
@keyframes rt-pulse {
  0%   { box-shadow: 0 0 0 0 oklch(0.68 0.17 145 / 0.6); }
  70%  { box-shadow: 0 0 0 7px oklch(0.68 0.17 145 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.68 0.17 145 / 0); }
}
.rt-label { color: oklch(0.45 0.03 260); font-weight: 500; }
.rt-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card, #fff); border: 1px solid oklch(0.88 0.03 255);
  border-radius: 999px; padding: 3px 10px 3px 3px; font-weight: 600;
  color: oklch(0.32 0.02 260);
}
.rt-av {
  width: 20px; height: 20px; border-radius: 50%; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; flex: none;
}
.rt-typing { color: oklch(0.55 0.15 255); font-weight: 500; margin-left: 2px; }
.rt-typing i {
  display: inline-block; width: 3px; height: 3px; border-radius: 50%; margin-left: 2px;
  background: oklch(0.55 0.15 255); animation: rt-dot 1.2s infinite;
}
.rt-typing i:nth-child(2) { animation-delay: 0.2s; }
.rt-typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes rt-dot { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }

/* ---------- เรียลไทม์: รูปคนที่กำลังดู ในแถวรายชื่อลูกค้า ---------- */
.rt-watch {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 8px;
  vertical-align: middle; padding: 2px 7px 2px 6px; border-radius: 999px;
  background: oklch(0.95 0.04 145); border: 1px solid oklch(0.85 0.07 145);
}
.rt-live.sm { width: 6px; height: 6px; margin-right: 2px; }
.rt-av.sm { width: 17px; height: 17px; font-size: 9px; border: 1.5px solid #fff; margin-left: -5px; }
.rt-av.sm:first-of-type { margin-left: 0; }
.rt-av.sm.typing { box-shadow: 0 0 0 2px oklch(0.65 0.16 255 / 0.55); }
.rt-more { font-size: 10px; font-weight: 700; color: oklch(0.42 0.06 145); margin-left: 2px; }

/* ================================================================
   รองรับมือถือ / แท็บเล็ต
   จอคอม (กว้างเกิน 900px) ใช้เลย์เอาต์เดิมทุกอย่าง ไม่กระทบ
   ================================================================ */

/* ปุ่ม ☰ และฉากหลังของลิ้นชัก — ซ่อนไว้บนจอคอม */
.nav-toggle { display: none; background: transparent; border: none; font-size: 22px; line-height: 1; padding: 4px 6px; cursor: pointer; color: var(--text); }
.nav-scrim { display: none; }

@media (max-width: 900px) {
  /* ---------- เมนูซ้าย -> ลิ้นชักเลื่อนออกจากขอบซ้าย ---------- */
  .app-shell { position: relative; }
  .nav-toggle { display: block; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 120; width: 250px;
    transform: translateX(-100%); transition: transform 0.22s ease;
    overflow: hidden;
  }
  .app-shell.nav-open .sidebar { transform: translateX(0); box-shadow: 0 0 40px oklch(0.2 0.05 260 / 0.35); }
  .nav-scrim { display: block; position: fixed; inset: 0; z-index: 110; background: oklch(0.25 0.05 255 / 0.45); }
  .nav-item { padding: 13px 12px; }          /* แตะง่ายขึ้น */

  /* ---------- แถบบน ---------- */
  .topbar { height: 56px; padding: 0 14px; gap: 10px; }
  .topbar .title { font-size: 16px; }
  .topbar .updated { display: none; }        /* ประหยัดที่ */
  .content { padding: 16px 14px 28px; }
  .notif-panel { position: fixed; top: 56px; left: 10px; right: 10px; width: auto; }

  /* ---------- แดชบอร์ด ---------- */
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* ---------- ตารางที่กว้างเกินจอ: ให้เลื่อนในกรอบตัวเอง ---------- */
  .users-wrap, .audit-wrap, .table-wrap { -webkit-overflow-scrolling: touch; }

  /* ---------- ฟอร์ม / กล่องโต้ตอบ ---------- */
  .modal-overlay { align-items: flex-end; }   /* เด้งขึ้นจากขอบล่างแบบแอป */
  .modal, .modal.wide, .modal.narrow {
    width: 100%; max-width: 100%; max-height: 92vh;
    border-radius: 16px 16px 0 0; padding: 20px 16px 24px;
  }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: 1 / 2; }
  .modal-actions { position: sticky; bottom: -24px; background: var(--card-bg); padding: 12px 0 0; margin-top: 16px; }
  .modal-actions .btn { flex: 1; }            /* ปุ่มเต็มความกว้าง กดง่าย */

  /* ---------- หน้ารายละเอียดลูกค้า ---------- */
  .detail-grid { grid-template-columns: 1fr; }
  .detail-grid .full { grid-column: 1 / 2; }

  /* ---------- แถบค้นหา/ตัวกรอง ---------- */
  .toolbar { gap: 8px; }
  .toolbar .input.grow { min-width: 100%; }
  .toolbar .select, .toolbar .btn { flex: 1; min-width: 140px; }

  /* ---------- นิ้วกดได้ถนัด ---------- */
  .btn { min-height: 40px; }
  .input, .select, .textarea { font-size: 16px; }  /* 16px กันไม่ให้ iOS ซูมเองตอนโฟกัส */
}

/* ---------- รายชื่อลูกค้า: ตาราง -> การ์ดใบละราย ---------- */
@media (max-width: 760px) {
  .table-wrap { border: none; background: transparent; overflow-x: visible; }
  .cust-head { display: none; }
  .cust-grid { min-width: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 0; }
  .cust-row {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
    padding: 13px 14px; margin-bottom: 10px; font-size: 13px;
  }
  /* จัดตำแหน่งลูกทั้ง 9 ช่องใหม่เป็นการ์ด
     ลำดับช่องต้องตรงกับ customersView: 1 รหัส · 2 ชื่อกิจการ · 3 ประเภทกิจการ · 4 พื้นที่
     · 5 ผู้รับผิดชอบ · 6 ติดต่อล่าสุด · 7 ครบกำหนด · 8 สถานะ · 9 ลูกศร
     (ถ้าเพิ่ม/ย้ายคอลัมน์ในตาราง ต้องแก้เลขที่นี่ด้วย ไม่งั้นการ์ดบนมือถือจะเพี้ยน) */
  .cust-row > *:nth-child(2) { grid-column: 1; grid-row: 1; }            /* ชื่อกิจการ + ชื่อลูกค้า */
  .cust-row > *:nth-child(8) { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; }  /* สถานะ */
  .cust-row > *:nth-child(1) { grid-column: 1 / -1; grid-row: 2; }       /* รหัส */
  .cust-row > *:nth-child(3) { grid-column: 1 / -1; grid-row: 3; }       /* ประเภทกิจการ */
  .cust-row > *:nth-child(4) { grid-column: 1 / -1; grid-row: 4; }       /* พื้นที่ */
  .cust-row > *:nth-child(5) { grid-column: 1 / -1; grid-row: 5; }       /* ผู้รับผิดชอบ */
  .cust-row > *:nth-child(6) { grid-column: 1; grid-row: 6; }            /* ติดต่อล่าสุด */
  .cust-row > *:nth-child(7) { grid-column: 2; grid-row: 6; justify-self: end; }  /* ครบกำหนด */
  .cust-row > *:nth-child(9) { display: none; }  /* ลูกศร › — ทั้งการ์ดแตะได้อยู่แล้ว ไม่ต้องโชว์ */
  /* ชื่อยาวให้ตกบรรทัดได้ และปลดการตัดข้อความ ไม่งั้นป้ายเคลมจะโดนเฉือนที่ขอบการ์ด */
  .cust-row .shop { font-size: 14px; white-space: normal; overflow: visible; text-overflow: clip; }
  .cust-row .shop .pill { white-space: normal; margin-left: 0; margin-top: 4px; }
  .cust-row .id { font-size: 11px; }
  /* แถบ "กำลังดูหน้านี้อยู่ด้วย" ให้ตกบรรทัดได้ ไม่ชนขอบจอ */
  .rt-bar { padding: 8px 10px; }
  .rt-chip { max-width: 100%; flex-wrap: wrap; }

  .cust-row > *:nth-child(5)::before { content: "ผู้รับผิดชอบ: "; color: var(--muted); }
  .cust-row > *:nth-child(6)::before { content: "ติดต่อล่าสุด "; }
  .cust-row > *:nth-child(7)::before { content: "ครบกำหนด "; }
}

/* ---------- จอเล็กมาก (iPhone SE ฯลฯ) ---------- */
@media (max-width: 400px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .toolbar .select { min-width: calc(50% - 4px); }  /* ตัวกรอง 2 ช่องเรียงคู่กัน */
  .toolbar .btn { min-width: 100%; }
  .rt-bar { font-size: 11.5px; }
}

/* ---------- หน้าล็อกอินบนมือถือ ---------- */
@media (max-width: 420px) {
  .login-card { width: 100%; max-width: 100%; padding: 26px 20px; border-radius: 0; border-left: none; border-right: none; }
  .login-screen { align-items: flex-start; padding-top: 40px; }
}

/* ---------- จัดการสิทธิ์ + ประวัติแก้ไข + ตารางจังหวัด -> การ์ด ---------- */
@media (max-width: 760px) {
  .users-wrap, .audit-wrap { background: transparent; border: none; overflow: visible; }
  .users-head, .audit-head { display: none; }
  .users-grid, .audit-grid { grid-template-columns: 1fr; gap: 4px; padding: 0; }
  .users-row, .audit-row {
    background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
    padding: 13px 14px; margin-bottom: 10px;
  }
  .users-row .who { font-weight: 600; font-size: 14px; }
    .users-row > *:nth-child(6) { margin-top: 9px; }
  .users-row > *:nth-child(6) .btn { flex: 1; }
  /* จัดการรถยกสินค้า (5 คอลัมน์) */
  .users-grid.fl-grid, .users-grid.wh-grid { grid-template-columns: 1fr; }
  .fl-grid.users-row > *:nth-child(2)::before { content: "คนขับ: "; color: var(--muted); }
  .fl-grid.users-row > *:nth-child(3)::before { content: "สาขา: "; color: var(--muted); }
  .fl-grid.users-row > *:nth-child(5) { margin-top: 9px; }
  .fl-grid.users-row > *:nth-child(5) .btn { flex: 1; }
  .audit-row > *:nth-child(3) { font-weight: 600; }

  /* ตารางจังหวัดในแดชบอร์ด: ยุบแถบกราฟลงบรรทัดใหม่ */
  .prov-head { display: none; }
  .prov-row { grid-template-columns: 1fr auto auto; gap: 6px 10px; }
  .prov-row > *:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- ห้องควบคุมขนส่ง (dispatcher) ---------- */
.dispatch-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
/* VRP + ASN (2026-11-09): [คิวรอจ่ายรถ + คิวรับเข้าสินค้า] | รถ | รถยก */
/*   กว้างเท่ากันทั้ง 3 คอลัมน์ · ความสูงตั้งจาก vrpFit() = ถึงล่างจอ · กรอบยืดเต็ม รายการเลื่อนในกรอบ · กรอบซ้ายสลับคิวด้วย dropdown */
.dispatch-cols.vrp3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.dispatch-cols.vrp3 > .card { display: flex; flex-direction: column; min-height: 0; }
.dispatch-cols.vrp3 > .card > .t-list, .dispatch-cols.vrp3 > .card > .q-list { flex: 1 1 auto; max-height: none; min-height: 0; }
.dispatch-head.vrp-qhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; padding-top: 8px; padding-bottom: 8px; min-height: 45px; }
.vrp-qhead > .btn { flex: none; margin-left: auto; }   /* แคบ = ปุ่มลงบรรทัดใหม่ ไม่ทับ dropdown */
.vrp-qpick { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.vrp-qpick .vrp-qsel { min-width: 0; max-width: 100%; }
.select.sm.vrp-qsel { width: auto; font-weight: 700; font-size: 13.5px; color: var(--text); padding: 6px 30px 6px 10px; background-position: right 10px center; }   /* เว้นขวาให้ลูกศร ไม่ทับเลขจำนวน (.select.sm ทับ padding-right เหลือ 9px) */
/* การ์ดรถยก: งานหยิบ (แบบรอบของการ์ดรถ) · ไม่มีงานรับ = ซ่อนกล่องงานรับ · กดปุ่มหยิบบนการ์ดรถ = กระพริบการ์ดรถยก */
.t-trip.fl-rcv-none { display: none; }
.t-card.fl-flash { animation: fl-flash 1.6s ease-out; }
@keyframes fl-flash { 0%, 55% { box-shadow: 0 0 0 3px oklch(0.65 0.15 145); } 100% { box-shadow: 0 0 0 0 transparent; } }
.dispatch-head { padding: 12px 16px; font-weight: 700; font-size: 13.5px; border-bottom: 1px solid var(--border); background: oklch(0.97 0.008 255); }
.input.sm, .select.sm { padding: 6px 9px; font-size: 12.5px; }

/* แถบตัวกรองพื้นที่คิวรอจ่ายรถ (VRP) — คาสเคด wrap สวยทุกจอมือถือ */
.q-areafilter { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--row-hover); }
.q-filter-lbl { font-size: 11px; font-weight: 700; color: var(--muted); flex: 0 0 auto; }
.q-areafilter .vrpq-sel { flex: 1 1 108px; min-width: 92px; max-width: 210px; padding: 6px 8px; font-size: 12px; height: auto; }
.q-areafilter .vrpq-clear { flex: 0 0 auto; padding: 6px 10px; font-size: 12px; }

/* หัวคอลัมน์เรียง — จัดตรงคอลัมกับแถวออเดอร์ (.q-row = 20px 1fr 90px) */
.q-colhead { display: grid; grid-template-columns: 20px 1fr 90px; gap: 8px; align-items: center; padding: 7px 14px; border-bottom: 1px solid var(--border); background: oklch(0.98 0.006 255); }
.q-colhead .qc-wt { display: flex; justify-content: flex-end; }
.qc-sort { background: none; border: 0; padding: 2px 0; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.qc-sort:hover { color: var(--text); }
.qc-sort.on { color: var(--primary); }
.qc-sort .vrpq-arw { font-size: 9px; }

/* คิวออเดอร์ (ซ้าย) */
/* กล่องคิว/รถยาวลงมาเกือบสุดจอ (ถอดแถบ KPI ด้านบนออกแล้ว 2026-09-04) — จอเตี้ยยังมีความสูงขั้นต่ำให้ใช้งานได้ */
.q-list { max-height: calc(100vh - 220px); min-height: 420px; overflow-y: auto; }
.q-row { display: grid; grid-template-columns: 20px 1fr 90px; gap: 8px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border-row); }
.q-row[draggable] { cursor: grab; }
.q-row[draggable]:active { cursor: grabbing; }
.q-row:hover { background: oklch(0.97 0.03 255); }
.q-row.dragging { opacity: 0.4; }
/* ASN: แถวคิวรับเข้าสินค้า = หน้าตาเดียวกับ .q-row ของ VRP แต่แยกคลาส (ตัวจับการลากของ VRP จะได้ไม่แตะ) */
.asn-qrow { display: grid; grid-template-columns: 20px 1fr 90px; gap: 8px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border-row); }
.asn-qrow[draggable] { cursor: grab; }
.asn-qrow[draggable]:active { cursor: grabbing; }
.asn-qrow:hover { background: oklch(0.97 0.03 255); }
.asn-qrow.dragging { opacity: 0.4; }
.asn-qrow.sel { background: oklch(0.93 0.06 255); box-shadow: inset 3px 0 0 var(--primary); border-radius: 6px; }
html[data-theme="dark"] .asn-qrow:hover, html[data-theme="dark"] .asn-qrow.sel { background: #1f2a3a; }
.vrp-group { border-bottom: 1px solid var(--border-row); }
.vrp-group:last-child { border-bottom: none; }
.vrp-group-head { display: flex; align-items: center; gap: 6px; padding: 9px 14px; font-size: 12.5px; font-weight: 700; background: var(--card-bg); border-bottom: 1px solid var(--border-row); cursor: pointer; user-select: none; position: sticky; top: 0; z-index: 1; }
.vrp-group-head:hover { background: var(--row-hover); }
.vrp-group-head .vrp-chev { color: var(--muted); font-size: 11px; width: 12px; }
.q-row.q-blocked { background: oklch(0.98 0.02 25); cursor: not-allowed; }
.q-row.q-blocked:hover { background: oklch(0.96 0.04 25); }
.q-grip { color: oklch(0.72 0.02 260); font-size: 13px; line-height: 1; user-select: none; text-align: center; }
.q-info { min-width: 0; }
.q-shop { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-wt-txt { text-align: right; font-size: 12.5px; font-weight: 600; white-space: nowrap; }

/* รถเป็นจุดวาง (drop zone) */
.t-card[data-drop-gps] { transition: outline 0.1s, background 0.1s; }
.t-card.drop-hot { outline: 2px dashed var(--primary); outline-offset: 2px; background: oklch(0.96 0.04 255); }

/* รถ (ขวา) */
.t-list { max-height: calc(100vh - 220px); min-height: 420px; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.t-card { border: 1px solid var(--border); border-radius: 9px; padding: 11px 13px; }
.t-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.t-head-toggle { cursor: pointer; }
.t-head.pk-drag { cursor: grab; }
.t-trip-badge.pk-drag { cursor: grab; }
.t-card.dragging { opacity: .55; }
.t-card.collapsed { padding: 9px 13px; background: oklch(0.985 0.005 255); }
.t-card.collapsed .t-head { align-items: center; }
.t-chev { color: var(--muted); font-size: 11px; width: 12px; flex: 0 0 auto; line-height: 1; }
.t-name { font-weight: 700; font-size: 13.5px; }
.t-cap { font-size: 12px; color: var(--muted); white-space: nowrap; }
.t-cap b { color: var(--text); font-size: 15px; }
/* คนขับ "ตามวัน" บนการ์ดรถ (VRP) — dropdown เล็กในหัวการ์ด + ป้ายบอกว่าเลือกไว้เฉพาะวัน */
.t-driver-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
/* ไม่ล็อกความสูง — สระบน/ล่างและวรรณยุกต์ไทยต้องมีที่พอ (line-height สูง) ไม่งั้นตัวหนังสือโดนตัดบน-ล่าง
   selector ต้องชนะ .input.sm, .select.sm (ที่ตั้ง font-size/padding ไว้) จึงต้องระบุ .select.sm นำหน้า */
.select.sm.t-driver-sel { padding: 3px 24px 3px 8px; font-size: 11.5px; line-height: 1.8; height: auto; min-height: 0; max-width: min(260px, 100%); min-width: 0; background-position: right 7px center; background-size: 12px; color: var(--text); cursor: pointer; }
.select.sm.t-driver-sel.ovr { border-color: oklch(0.78 0.13 80); background-color: oklch(0.975 0.04 85); font-weight: 600; }
.t-driver-ovr { font-size: 10px; font-weight: 700; line-height: 1.6; padding: 1px 7px; border-radius: 6px; background: oklch(0.93 0.09 85); color: oklch(0.45 0.12 70); white-space: nowrap; }
.t-bar { height: 8px; border-radius: 5px; background: oklch(0.92 0.012 255); overflow: hidden; margin: 8px 0 5px; }
.t-bar > div { height: 100%; border-radius: 5px; transition: width 0.25s; }
.t-load { display: flex; justify-content: space-between; font-size: 11.5px; margin-bottom: 4px; }
.t-orders { border-top: 1px dashed var(--border); margin-top: 7px; padding-top: 7px; display: flex; flex-direction: column; gap: 3px; }
/* ปุ่มสถานะเอกสารต่อรอบ: จัดเอกสารแล้ว (เขียว) / รอแก้เอกสาร (ส้ม) */
.t-hold-note { margin-top: 6px; padding: 7px 10px; background: oklch(0.96 0.04 60); border: 1px solid oklch(0.85 0.09 60); border-radius: 7px; font-size: 12px; line-height: 1.5; color: oklch(0.42 0.13 55); word-break: break-word; }
/* โน๊ตชั่วคราวต่อออเดอร์ (VRP) — ป้ายเหลืองอำพันต่อท้ายชื่อลูกค้า อยู่จนกว่าจะส่งสำเร็จ */
/* กล่องบันทึกชั่วคราวในหน้ารายละเอียดลูกค้า CRM (อ่านอย่างเดียว — แก้ที่ VRP) */
.tmp-note-box { margin-top: 10px; border: 1px solid oklch(0.88 0.09 85); background: oklch(0.96 0.07 85); color: oklch(0.42 0.12 70); border-radius: 8px; padding: 8px 11px; font-size: 12.5px; display: flex; flex-direction: column; gap: 5px; }
.tmp-note-box .tn-row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.tmp-note-box .tn-row b { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.tmp-note-box .tn-meta { font-size: 11px; opacity: 0.85; white-space: nowrap; }
.ord-note { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; margin-left: 4px; padding: 1px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 600; background: oklch(0.96 0.07 85); color: oklch(0.42 0.12 70); border: 1px solid oklch(0.88 0.09 85); }
/* หน้าต่าง Checklist ก่อนจ่ายรถ — ตารางเอกสารเรียงตามลำดับส่ง + ช่องติ๊ก */
.dsp-wrap { max-height: 52vh; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.dsp-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dsp-table th, .dsp-table td { padding: 7px 9px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.dsp-table th { position: sticky; top: 0; background: oklch(0.97 0.008 255); font-size: 11.5px; font-weight: 700; color: var(--muted); z-index: 1; }
.dsp-table .num { text-align: right; white-space: nowrap; }
.dsp-table tbody tr.on { background: oklch(0.96 0.04 145); }
.dsp-table tbody tr.on td { color: oklch(0.38 0.08 145); }
.dsp-table tfoot td { border-bottom: none; border-top: 1px solid var(--border); background: oklch(0.985 0.005 255); position: sticky; bottom: 0; }
/* ปุ่มยืนยันจ่ายรถตอนยังติ๊กไม่ครบ = ต้องเห็นชัดว่ากดไม่ได้ (ระบบไม่มีสไตล์ :disabled กลาง — จำกัดเฉพาะปุ่มนี้ ไม่กระทบปุ่มอื่น) */
.btn.dsp-ok:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.4); box-shadow: none; }
/* งานของรถคันนี้ในรอบวันอื่น (กระดานแยกตามวัน) — ป้ายกดสลับไปดูวันนั้น */
.t-otherdays { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 4px; font-size: 11.5px; }
.t-otherday { font: inherit; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid oklch(0.85 0.05 255); background: oklch(0.97 0.02 255); color: oklch(0.40 0.12 255); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.t-otherday:hover { background: oklch(0.93 0.04 255); }

/* 3 ขั้นตอนจ่ายรถ: 1) จัดเส้นทาง (แดง)  2) เอกสาร (เหลือง)  3) จ่ายรถ (น้ำเงิน) */
.t-steps { display: flex; gap: 6px; margin-top: 8px; align-items: flex-start; }
.t-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.t-stepbtn { width: 100%; font-weight: 600; font-size: 11px; padding: 6px 4px; line-height: 1.25; white-space: normal; }
/* step 1 — แดง */
.t-s1 { background: var(--card-bg); border: 1px solid oklch(0.72 0.16 25); color: oklch(0.52 0.19 25); }
.t-s1:hover { border-color: oklch(0.6 0.19 25); }
.t-s1.done { background: oklch(0.6 0.19 25); border-color: oklch(0.6 0.19 25); color: #fff; }
/* step 2 — เหลือง */
.t-s2 { background: var(--card-bg); border: 1px solid oklch(0.78 0.14 85); color: oklch(0.5 0.13 75); }
.t-s2:hover { border-color: oklch(0.68 0.15 80); }
.t-s2.done { background: oklch(0.82 0.14 88); border-color: oklch(0.82 0.14 88); color: oklch(0.32 0.08 75); }
.t-editbtn { background: var(--card-bg); border: 1px solid oklch(0.72 0.16 55); color: oklch(0.5 0.15 50); font-weight: 600; }
.t-editbtn:hover { border-color: oklch(0.62 0.17 50); }
.t-holdbtn { background: oklch(0.62 0.19 25); border-color: oklch(0.62 0.19 25); color: #fff; font-weight: 600; }
.t-ord { display: flex; align-items: center; gap: 7px; font-size: 12px; padding: 2px 0; }
.t-ord[draggable] { cursor: grab; }
.t-ord[draggable]:active { cursor: grabbing; }
.t-ord.dragging { opacity: 0.4; }
.t-ord.seq-hot { box-shadow: inset 0 2px 0 var(--primary); }
/* เลือกหลายออเดอร์บนกระดาน VRP (คลิก / Shift+คลิก / ลากคลุม) แล้วลากทั้งกลุ่ม */
.t-ord.sel, .q-row.sel { background: oklch(0.93 0.06 255); box-shadow: inset 3px 0 0 var(--primary); border-radius: 6px; }
.t-ord.sel-pre, .q-row.sel-pre { outline: 2px dashed var(--primary); outline-offset: -2px; border-radius: 6px; }
.vrp-marquee { position: fixed; z-index: 9999; border: 1.5px dashed var(--primary); background: oklch(0.62 0.16 255 / 0.12); pointer-events: none; border-radius: 4px; }
body.vrp-marquee-on, body.vrp-marquee-on * { user-select: none !important; cursor: crosshair !important; }
.vrpsel-bar { margin-top: 10px; }
.t-ord .ellipsis { min-width: 0; }
.t-ord-info { flex: 1; min-width: 0; }
.t-ord-info .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-seq { font-weight: 700; color: var(--primary); font-size: 12px; min-width: 16px; }
/* ธงรายออเดอร์ในรถ (VRP): COD / จ่ายแล้ว / ส่งด่วน */
.ord-flags { display: flex; gap: 4px; margin-top: 3px; flex-wrap: wrap; }
.oflag { font-size: 10px; font-weight: 700; line-height: 1.6; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap; }
button.oflag:hover { border-color: var(--muted); color: var(--text); }
.oflag.on.cod { background: oklch(0.92 0.09 62); color: oklch(0.42 0.14 55); border-color: oklch(0.80 0.12 60); }
.oflag.on.paid { background: oklch(0.92 0.08 150); color: oklch(0.36 0.11 150); border-color: oklch(0.78 0.11 150); }
.oflag.on.urg { background: oklch(0.90 0.10 25); color: oklch(0.46 0.19 25); border-color: oklch(0.75 0.15 25); }
span.oflag { cursor: default; }
.t-x { background: transparent; border: none; color: oklch(0.62 0.16 25); font-size: 12px; padding: 2px 5px; border-radius: 4px; flex: none; }
.t-x:hover { background: oklch(0.94 0.05 25); }

@media (max-width: 860px) {
  .dispatch-cols { grid-template-columns: 1fr; }
  .dispatch-cols.vrp3 { grid-template-columns: 1fr; }
  .q-list, .t-list { max-height: none; min-height: 0; }
}

/* ---------- หน้าคนขับ: บันทึกจัดส่ง ---------- */
.job-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 15px 16px; margin-bottom: 12px; }
/* ePOD: ธงจากห้องควบคุมขนส่ง (ส่งด่วน / COD / จ่ายแล้ว) */
.job-card.job-urgent { border-color: oklch(0.70 0.17 25); border-left-width: 4px; }
.job-flags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 9px; }
.jflag { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 7px; white-space: nowrap; }
.jflag.urg { background: oklch(0.60 0.20 25); color: #fff; }
.jflag.cod { background: oklch(0.92 0.09 62); color: oklch(0.40 0.14 55); }
.jflag.paid { background: oklch(0.92 0.08 150); color: oklch(0.34 0.11 150); }
.job-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.job-shop { font-weight: 700; font-size: 15px; }
.job-photo { width: 100%; max-height: 320px; object-fit: cover; border-radius: 10px; margin-top: 10px; border: 1px solid var(--border); }
.job-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
/* ตารางรูปหลักฐาน (โมดัลส่งสำเร็จ ถ่ายได้หลายรูป) */
.dphoto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.dphoto { position: relative; aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.dphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dphoto-x { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border: none; border-radius: 50%; background: rgba(0,0,0,0.62); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.dphoto-add { aspect-ratio: 1/1; border: 1.5px dashed var(--border); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; color: var(--muted); font-size: 11.5px; background: var(--row-hover); }
.dphoto-add:hover { border-color: var(--accent, #2563eb); color: var(--text); }
/* VRP: แถบสรุป KPI — เลือกสาขาจาก dropdown */
.vrp-kpi-label { font-weight: 700; font-size: 13px; }
/* จัดการออเดอร์: แถบเลือกสาขา + รูปหลักฐานทุกใบ */
.ord-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
/* VRP: รอบส่งในรถ 1 คัน (รอบเช้า/รอบบ่าย) — รอบเดียวจะไม่มีกรอบ ให้หน้าตาเหมือนเดิม */
.t-trip.multi { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin-top: 8px; background: var(--row-hover); }
.t-trip.drop-hot { outline: 2px dashed var(--primary); outline-offset: 2px; border-radius: 10px; background: var(--primary-weak); }
.t-trip.multi.drop-hot { border-color: var(--primary); background: var(--primary-weak); }
.t-trip-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.t-trip-badge { font-size: 11.5px; font-weight: 700; color: var(--on-primary); background: var(--primary);
  padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.t-trip-x { margin-left: auto; border: 1px solid var(--border); background: var(--card-bg); color: var(--muted);
  cursor: pointer; border-radius: 7px; padding: 2px 7px; font-size: 11px; line-height: 1.4; }
.t-trip-x:hover { border-color: var(--danger); color: var(--danger); }
/* จ่ายรถแล้ว (ล็อก) — ออเดอร์ในรอบนี้แก้ไข/ลากไม่ได้ */
.t-trip.locked { border-color: var(--primary); background: var(--primary-weak); }
.t-lock-badge { font-size: 11px; font-weight: 700; color: var(--primary); display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.t-ord.locked { cursor: default; }
.t-ord.locked .t-seq { color: var(--primary); }
/* ส่งแล้ว — จางไว้ดูเส้นทาง (หายทั้งรอบเมื่อส่งครบ) */
.t-ord.done { opacity: 0.55; }
.t-ord.done .t-seq { color: oklch(0.55 0.13 145); }

/* จัดการออเดอร์: แท็บย่อย (ออเดอร์ · ลูกหนี้การค้า · จัดการเช็ค · ปิดยอด) */
.ord-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.ord-tab { border: 1px solid var(--border); background: var(--card-bg); color: var(--text-2); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; padding: 7px 15px; border-radius: 999px; white-space: nowrap; }
.ord-tab:hover { background: var(--row-hover); }
.ord-tab.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

/* จัดการออเดอร์: เลือกหลายบิลเพื่อรับชำระรวม */
.pay-pick { font-size: 11.5px; font-weight: 600; color: var(--primary); cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; }
.pay-pick input { accent-color: var(--primary); cursor: pointer; }
/* กล่องครอบ "ชุดรับชำระรวม" — ใบที่ลูกค้าจ่ายเงินก้อนเดียวกันอยู่ในกรอบเดียว */
.pay-group { border: 2px solid var(--primary); border-radius: 14px; padding: 10px; margin-bottom: 12px; background: var(--primary-weak); }
.pay-group .card { margin-bottom: 8px; }
.pay-group .card:last-child { margin-bottom: 0; }

/* ---------- ปิดยอด: ตารางรายการรับชำระรวมทุกคน (ทุกวิธีเป็นแถวแนวนอน · เรียงได้ทุกคอลัมน์ · ⋮ เปิดหน้าต่างหลักฐาน) ---------- */
.clo-tbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; margin-top: 8px; background: var(--card-bg); }
.clo-tbl { min-width: 1210px; }
/* วิธี · SI · POD · ลูกค้า · ผู้รับเงิน · จำนวนเงิน · เวลา · วันที่เงินเข้าธนาคาร · ตรวจสอบ · ⋮ */
.clo-tbl-head, .clo-tbl-row { display: grid; grid-template-columns: 74px 150px 150px minmax(150px, 1fr) 135px 105px 52px 135px 125px 36px; gap: 8px; align-items: center; padding: 7px 12px; }
.clo-tbl-head { font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--row-hover); border-bottom: 1px solid var(--border); }
.clo-tbl-row { font-size: 12.5px; border-top: 1px solid var(--border-row); }
.clo-tbl-row:hover, .clo-tbl-row.open { background: var(--row-hover); }
.clo-th { display: flex; align-items: center; gap: 4px; user-select: none; white-space: nowrap; }
.clo-th[data-action] { cursor: pointer; }
.clo-th.r { justify-content: flex-end; }
.clo-td { min-width: 0; }
.clo-td.r { text-align: right; }
.clo-td.ell, .clo-td .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ปิดยอด: สรุปผู้รับเงิน (ใครรับเงินเท่าไหร่ แยกตามวิธี) */
.clo-recv-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); }
.clo-recv { min-width: 760px; }
/* 6 คอลัมน์: ผู้รับเงิน · เงินสด · เงินโอน · เช็ค · รวม · ปุ่มพิมพ์สลิป (หัวตาราง/แถว/แถวรวม ต้องมีจำนวนช่องเท่ากันเสมอ) */
.clo-recv-head, .clo-recv-row, .clo-recv-total { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(115px, 1fr)) 34px; gap: 8px; align-items: center; padding: 8px 12px; }
.clo-slip-btn { border: 1px solid var(--border); background: var(--card-bg); color: var(--muted); border-radius: 7px; width: 28px; height: 26px; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.clo-slip-btn:hover { background: var(--row-hover); color: var(--primary); border-color: var(--primary); }
.clo-recv-head { font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--row-hover); border-bottom: 1px solid var(--border); }
.clo-recv-row { font-size: 12.5px; border-top: 1px solid var(--border-row); }
.clo-recv-row.me { background: oklch(0.62 0.16 255 / 0.07); }
.clo-recv-total { font-weight: 700; border-top: 2px solid var(--border); background: var(--row-hover); }
.clo-recv-c { text-align: right; font-variant-numeric: tabular-nums; }
.clo-recv .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* ปิดยอด: หน้าต่าง ⋮ (หลักฐาน + ข้อมูลรายการ + ตรวจสอบ) */
.modal.clo-evid { width: 660px; }
.clo-evid-body { display: grid; grid-template-columns: 200px 1fr; gap: 16px; }
.clo-evid-img { display: flex; align-items: center; justify-content: center; width: 200px; height: 250px; border-radius: 10px; border: 1px solid var(--border); overflow: hidden; background: var(--row-hover); }
.clo-evid-img img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.clo-kv { display: grid; grid-template-columns: 105px 1fr; gap: 6px 10px; font-size: 12.5px; align-content: start; }
.clo-kv-k { color: var(--muted); }
.clo-kv-v { min-width: 0; word-break: break-word; }
.clo-bank-pick { display: flex; gap: 6px; }
.clo-bank-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); color: var(--text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.clo-bank-btn:hover { background: var(--row-hover); }
.clo-bank-btn.on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-weak); background: var(--primary-weak); }
.clo-evid-audit { grid-column: 1 / -1; border-top: 1px dashed var(--border); padding-top: 12px; display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
@media (max-width: 640px) { .clo-evid-body { grid-template-columns: 1fr; } .clo-evid-img { width: 100%; height: 220px; } }
.paysel-bar { position: sticky; bottom: 12px; z-index: 40; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 11px 15px; border-radius: 12px;
  background: var(--card-bg); border: 1px solid var(--primary); box-shadow: 0 8px 24px oklch(0.25 0.05 255 / 0.18); }

/* ปิดยอด: การ์ดหลักฐาน (สลิปโอน / หน้าเช็ค / ใบนำฝาก) */
.clo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.clo-slip { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card-bg); }
.clo-slip img { width: 100%; height: 130px; object-fit: cover; display: block; cursor: zoom-in; }
.clo-slip-info { padding: 8px 10px; font-size: 12.5px; }
.clo-slip.ok { border-color: oklch(0.72 0.14 145); box-shadow: inset 0 0 0 1px oklch(0.72 0.14 145 / 0.35); }
/* สแกน QR ปิดการขาย */
.qr-cam { position: relative; width: 100%; max-width: 340px; margin: 0 auto 4px; border-radius: 12px; overflow: hidden; background: #000; }
.qr-cam video { width: 100%; display: block; }
.qr-frame { position: absolute; inset: 14%; border: 3px solid oklch(0.85 0.18 145); border-radius: 12px; pointer-events: none; }
/* หัวหน้าต่างสแกน QR: ปุ่มปิดมุมขวาบน กดออกได้เสมอแม้กล้องจะสูงจนล้นจอ */
.modal-title.qr-head { display: flex; align-items: center; gap: 8px; }
.modal-title.qr-head > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-x { margin-left: auto; flex: none; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 10px;
  background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.qr-x:hover { background: var(--row-hover); color: var(--text); }
.qr-x .ci { width: 19px; height: 19px; }
.qr-fields { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.qr-fields > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 12px; background: var(--card-bg); font-size: 13px; }
.qr-fields span { color: var(--muted); font-size: 12px; }

/* Dashboard: การ์ดสรุปการรับชำระเงินวันนี้ */
.pay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 10px; }
.paybox { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); }
.paybox-l { font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.paybox-v { font-size: 19px; font-weight: 700; line-height: 1.2; }
.paybox-u { font-size: 12px; font-weight: 400; color: var(--muted); }

/* จัดการออเดอร์: ปฏิทินเลือกช่วงวันที่ (กดวันเริ่ม -> กดวันสิ้นสุด ในปฏิทินเดียว) */
/* ตารางออเดอร์ (คอลัมน์ตรงกัน + หัวตารางกดเรียงได้) */
.ord-tbl { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--card-bg); margin-bottom: 12px; }
.ord-tbl-scroll { overflow-x: auto; }
.ord-tbl-inner { min-width: 1372px; }
.ord-tbl-head, .ord-tbl-row { display: grid; grid-template-columns: 34px 150px minmax(190px, 1fr) 100px 112px 100px 100px 96px 96px 120px 128px 42px; gap: 10px; align-items: center; padding: 9px 14px; }
.ord-tbl-head { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--row-hover); border-bottom: 1px solid var(--border); }
.ord-tbl-row { font-size: 13px; cursor: pointer; }
/* แท็บ "ปิดบิลแล้ว": แทรกคอลัมน์ "เอกสาร POD" เป็นคอลัมน์ที่ 3 (ซ้ายของลูกค้า) — แท็บอื่นไม่ใส่คลาส .pod จึงใช้ผังเดิม */
.ord-tbl-inner.pod { min-width: 1588px; }
.ord-tbl-head.pod, .ord-tbl-row.pod { grid-template-columns: 34px 150px 168px minmax(190px, 1fr) 100px 112px 100px 100px 96px 96px 120px 128px 42px; }
.ord-tbl-unit { border-bottom: 1px solid var(--border); }
.ord-tbl-unit:last-child { border-bottom: none; }
.ord-tbl-unit.open > .ord-tbl-row, .ord-tbl-row:hover { background: var(--row-hover); }
.ord-tbl-detail { padding: 6px 16px 16px; background: var(--row-hover); border-top: 1px dashed var(--border); }
.ord-th { display: flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; }
.ord-th:not([data-key]) { cursor: default; }
.ord-th.r { justify-content: flex-end; }
.ord-td { min-width: 0; }
.ord-td.r { text-align: right; }
.ord-td.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* จัดการเช็ค — ตารางแถวเดียวหน้าตาเดียวกับแท็บออเดอร์ (ใช้ .ord-tbl* ร่วม) แต่คอลัมน์ต่างกัน: เลขที่เอกสาร · ลูกค้า · วันที่รับเช็ค · วันที่ขึ้นเช็ค · จำนวนเงิน · สถานะ · ปุ่ม · ⋮ */
.cq-tbl-inner { min-width: 1060px; }
.cq-tbl-head, .cq-tbl-row { grid-template-columns: 150px minmax(190px, 1fr) 104px 120px 110px 140px 150px 42px; }
.cq-tbl-row { cursor: default; }
.ord-menu-btn { border: 1px solid var(--border); background: var(--card-bg); color: var(--muted); border-radius: 8px; width: 30px; height: 30px; line-height: 1; font-size: 18px; font-weight: 700; cursor: pointer; padding: 0; }
.ord-menu-btn:hover { background: var(--row-hover); color: var(--text); border-color: var(--primary); }
.cn-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--border); background: var(--card-bg); border-radius: 10px; cursor: pointer; font-size: 13.5px; color: var(--text); }
.cn-menu-item:hover { background: var(--row-hover); border-color: var(--primary); }
.cn-menu-item.danger { color: oklch(0.55 0.19 25); }
.cn-menu-item.danger:hover { border-color: oklch(0.6 0.19 25); background: oklch(0.97 0.03 25); }
.cn-menu-ic { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 8px; background: var(--row-hover); flex-shrink: 0; }
/* ตัวเลือกวันที่รวม (หน้าตาเดียวกันทั้งระบบ) — dropdown ยึดกับปุ่ม (fixed จึงไม่โดนขอบโมดัลตัด) */
.dp-wrap { display: inline-block; }
.dp-scrim { position: fixed; inset: 0; z-index: 199; }
.dp-pop { position: fixed; z-index: 200; background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px; width: auto; min-width: min(94vw, 300px); max-width: min(94vw, 380px);
  box-shadow: 0 14px 36px oklch(0.2 0.05 255 / 0.26); }
.ordcal-btn.on { border-color: var(--primary); color: var(--primary); font-weight: 600; }
.ord-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ord-photos a { display: block; width: 76px; height: 76px; border-radius: 9px; overflow: hidden; border: 1px solid var(--border); flex: none; }
.ord-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.btn.disabled { opacity: 0.55; pointer-events: none; }
/* จอเล็ก: ปุ่มถ่ายรูป/ส่งไม่สำเร็จ เรียงลงเต็มความกว้าง กันปุ่มล้นขอบ */
@media (max-width: 480px) { .job-actions { flex-direction: column; } .job-actions > * { width: 100%; } }

/* ---------- แผนที่ติดตามการขนส่ง ---------- */
.track-side { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; overflow-y: auto; max-height: 66vh; }
.track-map { height: 66vh; border-radius: 10px; border: 1px solid var(--border); overflow: hidden; z-index: 0; }
.track-item { padding: 11px 13px; border-bottom: 1px solid var(--border-row); cursor: pointer; }
.track-item:hover { background: var(--row-hover); }
.track-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px oklch(1 0 0), 0 0 0 3px oklch(0.85 0.02 260); }
/* Leaflet controls above content */
.leaflet-pane, .leaflet-top, .leaflet-bottom { z-index: 1; }
@media (max-width: 860px) {
    .track-side { max-height: 240px; }
  .track-map { height: 52vh; }
}

/* ปุ่มลิงก์ลูกค้าในออเดอร์ใต้รถ */
.t-link { background: transparent; border: none; color: var(--primary); font-size: 12px; padding: 2px 5px; border-radius: 4px; flex: none; }
.t-link:hover { background: oklch(0.95 0.04 255); }

.perm-grid-role { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.perm-grid-role .perm-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; cursor: pointer; }
/* ตารางผู้ใช้ (ชื่อ / ไอดี / ตำแหน่ง / จัดการ) */
/* ชื่อคอลัมน์: รหัสพนักงาน / ชื่อ / ไอดี / ตำแหน่ง / สาขา / สถานะ / ปุ่ม */
.urole-grid { display: grid; grid-template-columns: 96px minmax(150px, 1.4fr) minmax(110px, 1fr) 120px minmax(150px, 1.3fr) 96px 132px; gap: 14px; padding: 11px 16px; align-items: center; }
.urole-head { font-size: 11.5px; color: var(--muted); border-bottom: 1px solid var(--border); text-transform: uppercase; }
.urole-row { border-bottom: 1px solid var(--border-row); font-size: 13px; }
.urole-row.is-off { opacity: 0.62; }
.urole-row .who { display: flex; align-items: center; gap: 10px; font-weight: 600; min-width: 0; }
.urole-row > * { min-width: 0; }
.ucell-code { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
/* ปุ่มท้ายแถว: ชิดขวา ไม่ตัดบรรทัด ขนาดเท่ากันทุกแถว */
.urole-actions { display: flex; gap: 8px; justify-content: flex-end; }
.urole-actions .btn { white-space: nowrap; padding: 5px 12px; }
/* จอกลาง: ตารางกว้างเกิน -> เลื่อนในกรอบตัวเอง ไม่บีบคอลัมน์จนอ่านไม่ออก */
@media (max-width: 1100px) and (min-width: 761px) {
  .users-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .urole-grid { min-width: 940px; }
}
@media (max-width: 760px) {
  /* มือถือ: แถวละการ์ด — ชื่อ+สถานะบรรทัดบน แล้วรายละเอียด แล้วปุ่มเต็มความกว้าง */
  .urole-grid { grid-template-columns: 1fr auto; gap: 4px 10px; padding: 0; }
  .urole-head { display: none; }
  .urole-row { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; align-items: start; }
  .urole-row > *:nth-child(1) { grid-column: 1 / -1; order: 0; }            /* รหัสพนักงาน */
  .urole-row > *:nth-child(2) { order: 1; }                                 /* ชื่อ */
  .urole-row > *:nth-child(6) { order: 2; justify-self: end; }              /* สถานะ (คู่กับชื่อ) */
  .urole-row > *:nth-child(3) { grid-column: 1 / -1; order: 3; }            /* ไอดี */
  .urole-row > *:nth-child(4) { grid-column: 1 / -1; order: 4; }            /* ตำแหน่ง */
  .urole-row > *:nth-child(5) { grid-column: 1 / -1; order: 5; }            /* สาขา */
  .urole-row > *:nth-child(7) { grid-column: 1 / -1; order: 6; margin-top: 10px; }
  .urole-actions { justify-content: stretch; }
  .urole-actions .btn { flex: 1; }
}

/* ---------- ตำแหน่งแบบ accordion (กะทัดรัด รองรับ 100+) ---------- */
.racc-list { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--card-bg); margin-bottom: 8px; }
.racc { border-bottom: 1px solid var(--border-row); }
.racc:last-child { border-bottom: none; }
.racc-head { display: flex; align-items: center; gap: 9px; padding: 11px 14px; cursor: pointer; }
.racc-head:hover { background: var(--row-hover); }
.racc-head b { font-size: 13.5px; }
.racc-chev { color: var(--muted); font-size: 11px; width: 12px; flex: none; }
.racc-meta { margin-left: auto; font-size: 11.5px; white-space: nowrap; }
.racc.open .racc-head { background: oklch(0.97 0.01 255); }
.racc-body { padding: 6px 14px 14px 35px; }
.racc-body .perm-grid-role { grid-template-columns: 1fr 1fr; }
/* ตารางสิทธิ์ (แถว = สิ่งที่จัดการ · คอลัมน์ = การกระทำ) ในหน้าจัดการสิทธิ์ */
.pm { display: flex; flex-direction: column; gap: 10px; }
.pm-group { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; overflow-x: auto; background: var(--card-bg); }
.pm-head, .pm-row { display: grid; align-items: center; gap: 0 8px; padding: 0 12px; }
.pm-head { background: oklch(0.965 0.015 255); min-height: 40px; }
.pm-head .pm-col { text-align: center; font-weight: 600; font-size: 12px; color: var(--muted); white-space: nowrap; }
.pm-glabel, .pm-rlabel { display: flex; align-items: center; gap: 10px; cursor: pointer; min-width: 0; padding: 8px 0; }
.pm-glabel b { font-size: 13px; color: var(--text); }
.pm-glabel .dim { font-size: 11px; }
.pm-rlabel span { font-size: 13px; color: var(--text); }
.pm-row { border-top: 1px solid var(--border-row); min-height: 40px; }
.pm-row:hover { background: var(--row-hover); }
.pm-cell { display: flex; justify-content: center; align-items: center; }
.pm-cell label { display: inline-flex; padding: 6px; cursor: pointer; border-radius: 6px; }
.pm-cell label:hover { background: var(--input-bg); }
.pm-dash { color: var(--border); user-select: none; }
.pm-nocb { width: 16px; height: 16px; flex: none; }
.pm .checkbox { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; margin: 0; }
.pm .checkbox:disabled { cursor: default; }
.pm-chev { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 4px; justify-self: end; }
.pm-chev:hover { color: var(--text); }
.pm-group .perm-item { padding: 6px 0; }
@media (max-width: 760px) {
  .racc-body { padding-left: 14px; }
  .racc-body .perm-grid-role { grid-template-columns: 1fr; }
  .racc-meta { display: none; }
}

/* ---------- แผนที่เส้นทางต่อรถ (ในแพลนงานส่ง) ---------- */
.tmap { height: 300px; border-radius: 9px; border: 1px solid var(--border); overflow: hidden; margin-top: 8px; z-index: 0; }
/* ตัวเลือกรอบบนแผนที่เส้นทาง (รถหลายรอบ) */
.tmap-trips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tmap-tripbtn { border: 1px solid var(--border); background: var(--card-bg); padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--muted); border-radius: 999px; cursor: pointer; }
.tmap-tripbtn:hover { border-color: var(--primary); color: var(--text); }
.tmap-tripbtn.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.tmap-pin { width: 24px; height: 24px; border-radius: 50%; background: oklch(0.55 0.17 255); color: #fff; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.tmap-depot { min-width: 34px; height: 22px; padding: 0 6px; border-radius: 11px; background: oklch(0.62 0.17 145); color: #fff; font-weight: 700; font-size: 11px; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); white-space: nowrap; }
.tmap-dist { background: rgba(255,255,255,0.94); border: 1px solid oklch(0.85 0.02 255); border-radius: 8px; padding: 5px 11px; font-size: 12px; font-weight: 700; color: oklch(0.3 0.02 260); box-shadow: 0 1px 5px rgba(0,0,0,.22); white-space: nowrap; }
.tmap-legsel { display: flex; gap: 0; background: #fff; border: 1px solid oklch(0.82 0.02 255); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 5px rgba(0,0,0,.22); }
.tmap-legbtn { border: none; background: #fff; padding: 6px 10px; font-size: 12px; font-weight: 600; color: oklch(0.4 0.02 260); cursor: pointer; border-left: 1px solid oklch(0.9 0.01 255); }
.tmap-legbtn:first-child { border-left: none; }
.tmap-legbtn.on { background: oklch(0.55 0.17 255); color: #fff; }

/* ---------- ไอคอนโทนเดียว (ขาว–ดำ มืออาชีพ) ---------- */
:root { --accent-ico: oklch(0.45 0 0); }            /* เทาเข้ม บนแถบเมนูขาว */
.nav-item .ico { width: 20px; height: 20px; background: none; display: flex; align-items: center; justify-content: center; color: var(--accent-ico); opacity: 0.9; }
.nav-item .ico .nav-svg { width: 19px; height: 19px; }
.nav-item:hover .ico { color: var(--text); opacity: 1; }
.nav-item.active .ico { color: oklch(1 0 0); opacity: 1; }   /* ขาวบนพื้นแดง */
.bell-btn { position: relative; background: transparent; border: none; cursor: pointer; padding: 3px 4px; line-height: 1; color: var(--muted); transition: color 0.15s; }
.bell-btn:hover { color: var(--primary); }
.bell-svg { width: 21px; height: 21px; display: block; }
/* อัปเดตระบบใหม่ (2026-10-28): กระดิ่งสีส้มแดง สั่นทุก ~6 วิ + วงแสงกระพริบรอบปุ่ม จนกว่าจะรีเฟรช */
.bell-btn.sys-upd { color: oklch(0.60 0.21 35); }
.bell-btn.sys-upd .bell-svg { transform-origin: 50% 10%; animation: bell-ring 6s ease-in-out infinite; }
.bell-btn.sys-upd::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none; animation: bell-halo 2.4s ease-out infinite; }
@keyframes bell-ring {
  0%, 80%, 100% { transform: rotate(0); }
  82% { transform: rotate(18deg); } 84% { transform: rotate(-16deg); } 86% { transform: rotate(13deg); }
  88% { transform: rotate(-10deg); } 90% { transform: rotate(6deg); } 92% { transform: rotate(-3deg); } 94% { transform: rotate(0); }
}
@keyframes bell-halo { 0% { box-shadow: 0 0 0 0 oklch(0.65 0.20 35 / 0.55); } 70%, 100% { box-shadow: 0 0 0 9px oklch(0.65 0.20 35 / 0); } }
@media (prefers-reduced-motion: reduce) { .bell-btn.sys-upd .bell-svg, .bell-btn.sys-upd::after { animation: none; } }
.notif-sys { padding: 12px 14px; border-bottom: 1px solid var(--border); border-left: 4px solid oklch(0.60 0.21 35); border-radius: 10px 10px 0 0;
  background: linear-gradient(135deg, oklch(0.96 0.06 55), oklch(0.94 0.08 35)); color: oklch(0.30 0.08 40); }
.notif-sys-h { font-size: 13.5px; font-weight: 800; color: oklch(0.50 0.20 35); display: flex; align-items: center; gap: 6px; }
.notif-sys-t { font-size: 12px; line-height: 1.6; margin-top: 4px; }
.notif-sys-a { display: flex; gap: 6px; margin-top: 9px; }
html[data-theme="dark"] .notif-sys { background: linear-gradient(135deg, oklch(0.32 0.07 50), oklch(0.30 0.09 35)); color: oklch(0.92 0.03 60); }
html[data-theme="dark"] .notif-sys-h { color: oklch(0.80 0.15 50); }

/* ---------- ไอคอน SVG ในเนื้อหา (โทนเทาเข้ม เข้าชุดตัวอักษร) ---------- */
.ci { width: 1em; height: 1em; vertical-align: -0.16em; display: inline-block; }
.ci-gold { color: oklch(0.42 0 0); display: inline-flex; vertical-align: -0.16em; }  /* เทาเข้ม อ่านง่ายบนพื้นขาว */
.ci-gold .ci { width: 1.05em; height: 1.05em; vertical-align: 0; }
.ci-w { color: #fff; display: inline-flex; }
.ci-w .ci { width: 16px; height: 16px; }
.pill .ci { width: 0.95em; height: 0.95em; }

/* ---------- บัญชี · สรุปรายงาน ---------- */
.rep-controls { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.rep-fld { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.rep-fld .input, .rep-fld .select { font-size: 13.5px; }

.rep-head { text-align: center; margin-bottom: 8px; }
.rep-title { font-size: 19px; font-weight: 700; color: var(--text); }
.rep-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.rep-table { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-top: 18px; }
.rep-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--border-row); font-size: 13px; }
.rep-row:last-child { border-bottom: none; }
.rep-th { background: var(--row-hover); font-weight: 600; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; }
.rep-tf { font-weight: 700; background: var(--row-hover); }
.rep-foot { text-align: right; font-size: 11px; color: var(--muted); margin-top: 12px; }
/* จอเล็ก: ตารางรายงานกลายเป็นการ์ดเรียงลง (ไม่ต้องเลื่อนซ้าย-ขวา) */
@media (max-width: 560px) {
  .rep-table .rep-row { display: block !important; padding: 11px 14px; }
  .rep-table .rep-th { display: none !important; }
  .rep-table .rep-row > div { display: flex; justify-content: space-between; text-align: left !important; padding: 3px 0; }
  .rep-table .rep-row > div[data-l]::before { content: attr(data-l) " (กก.)"; color: var(--muted); font-weight: 400; }
  .rep-table .rep-row > div.rep-c-branch { display: block; font-weight: 700; font-size: 14px; padding: 0 0 5px; margin-bottom: 3px; border-bottom: 1px solid var(--border-row); }
  .rep-table .rep-row > div.rep-empty { display: block; text-align: center !important; }
  /* คอลัมน์ที่ไม่ใช่น้ำหนัก (สาขา / Point) ไม่ต่อท้าย "(กก.)" · ช่องว่างใต้คอลัมน์สาขาในแถวรวมซ่อนไป */
  .rep-table .rep-row > div[data-l].rep-lbl::before { content: attr(data-l) ": "; }
  .rep-table .rep-row > div.rep-blank { display: none; }
  /* รายงานส่งไม่สำเร็จ: ป้ายกำกับไม่ใช่ "(กก.)" + ชื่อร้านเป็นหัวการ์ด */
  .rep-fail .rep-row > div[data-l]::before { content: attr(data-l) ": "; }
  .rep-fail .rep-row > div.rep-c-title { display: block; font-weight: 700; font-size: 14px; padding: 0 0 5px; margin-bottom: 3px; border-bottom: 1px solid var(--border-row); }
}

/* ---------- โหมดพิมพ์ A4 ---------- */
.no-print { }
@media print {
  @page { size: A4; margin: 14mm; }
  html, body { background: #fff !important; }
  .sidebar, .topbar, .nav-scrim, .no-print, .flash-banner { display: none !important; }
  .app-shell { display: block !important; height: auto !important; overflow: visible !important; }
  .main { min-height: 0 !important; overflow: visible !important; }
  .content { overflow: visible !important; padding: 0 !important; }
  .report-print { border: none !important; box-shadow: none !important; padding: 0 !important; }
  .report-print, .report-print * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rep-row { break-inside: avoid; }
  .rep-table { border-color: #999 !important; }
}

/* ---------- รองรับมือถือจอเล็กสุด (กันเนื้อหาล้นขอบขวา) ---------- */
.content { overflow-x: hidden; }               /* หน้าหลักไม่เลื่อนแนวนอน — ตารางกว้างเลื่อนในกรอบตัวเอง */
/* grid/flex item ต้อง min-width:0 ไม่งั้นเนื้อหากว้าง (ตารางเลื่อนได้) จะดันคอลัมน์จนล้นจอ */
.area-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) {
  .area-scroll .prov-row { min-width: 460px; }          /* ตารางโฟกัส 6 คอลัมน์: เลื่อนในกรอบแทนล้นจอ */
  .area-scroll .prov-head { display: grid; }            /* ตารางเลื่อนได้อยู่แล้ว -> คงหัวคอลัมน์ไว้ให้อ่านออก */
}
@media (max-width: 400px) {
  .content { padding: 14px 10px 26px; }
  .card { padding: 15px 13px; }
  .rep-controls { gap: 10px; }
  .rep-fld { width: 100%; }
  .rep-fld .input, .rep-fld .select { width: 100%; }
}

/* จัดการต้นทุน — ตารางราคา (ระดับราคา × ขนาด): คอลัมน์สินค้าตรึงซ้าย + ไฮไลต์ทั้งแถวเมื่อชี้ */
.prod-matrix th.pcol, .prod-matrix td.pcol { position: sticky; left: 0; box-shadow: 1px 0 0 var(--border); }
.prod-matrix thead th.pcol { z-index: 3; background: var(--row-hover); }
.prod-matrix tbody td.pcol { z-index: 2; background: var(--card-bg); }
.prod-matrix tbody tr.prow:hover td { background: var(--row-hover); }
/* สินค้าที่ปิดการใช้งาน (2026-10-22): พื้นเทาทึบ + เนื้อหาจาง — ไม่ใช้ opacity ทั้งแถว (ช่องชื่อที่ตรึงซ้ายจะโปร่งจนเห็นช่องที่เลื่อนผ่าน) */
.prod-matrix tbody tr.prow.poff td, .prod-matrix tbody tr.prow.poff:hover td { background: color-mix(in oklch, var(--card-bg), var(--muted) 12%); }
.prod-matrix tbody tr.prow.poff td > *:not([data-action="prod-disable"]) { opacity: 0.5; }   /* ปุ่ม "เปิดการใช้งาน" ไม่จาง */

/* ตั้งค่าราคา — ตรึงหัวตาราง (แถวระดับราคา + แถวขนาด) ไว้บนสุดขณะเลื่อนดูสินค้า
   กล่องตารางเลื่อนในตัวเอง (แนวตั้ง+แนวนอน) เพื่อให้ sticky ยึดกับกรอบตาราง ไม่ใช่ทั้งหน้า */
.prod-scroll { max-height: calc(100vh - 234px); }
.prod-matrix thead th { position: sticky; top: 0; z-index: 4; background: var(--row-hover); }
.prod-matrix thead tr:first-child th { height: 31px; }
.prod-matrix thead tr:nth-child(2) th { top: 31px; height: 27px; box-shadow: inset 0 -1px 0 var(--border); }
.prod-matrix thead th.pcol { z-index: 6; box-shadow: 1px 0 0 var(--border), inset 0 -1px 0 var(--border); }
/* หมวดสินค้า (ข้าวเหนียว ฯลฯ) ตรึงใต้หัวตาราง — เห็นว่ากำลังดูหมวดไหนขณะเลื่อน */
.prod-matrix tbody tr.catrow td { position: sticky; top: 58px; z-index: 3; }
@media (max-width: 640px) { .prod-scroll { max-height: calc(100vh - 200px); } }

/* ================================================================
   มือถือทุกขนาด: กันเนื้อหาดันหน้ากว้างกว่าจอ (2026-09-09)
   ต้นเหตุที่เจอ (แดชบอร์ดบนมือถือ การ์ดขวาโดนตัด): เบราว์เซอร์มือถือบางเครื่อง (ตั้งฟอนต์ระบบใหญ่ + ตัดคำไทยไม่ได้)
   ทำให้ข้อความไทยยาวๆ ไม่ตัดบรรทัด -> ช่อง grid แบบ 1fr (ค่าต่ำสุด = min-content) ถูกดันจนกว้างกว่าจอ
   แก้แบบไม่แตะจอคอม: เฉพาะจอ ≤ 900px ให้ลูกของ grid/การ์ดหดได้ + ตัดกลางคำได้เมื่อไม่มีที่ตัดจริงๆ
   ตารางกว้าง (.ord-tbl, .clo-tbl, .prod-scroll ฯลฯ) เลื่อนในกรอบตัวเองอยู่แล้ว ไม่กระทบ
   ================================================================ */
@media (max-width: 900px) {
  /* ข้อความยาวที่ไม่มีช่องว่าง (ชื่อร้าน/ป้าย/เลขเอกสาร) ตัดกลางคำได้เป็นทางเลือกสุดท้าย — สืบทอดถึงทุกลูก
     (white-space:nowrap ยังชนะ = เซลล์ตาราง/ป้ายที่ตั้งใจไม่ตัดบรรทัด ไม่เปลี่ยน) */
  .content, .modal, .topbar { overflow-wrap: anywhere; }
  /* ลูกของ grid ทุกชุดในหน้า: min-width:0 (ค่าเริ่มต้น auto = คอลัมน์กว้างอย่างน้อยเท่าคำที่ยาวสุด -> ล้นจอ) */
  .kpi-grid > *, .detail-grid > *, .detail-cols > *, .form-grid > *,
  .dispatch-cols > *, .perm-grid-role > *, .clo-grid > *, .pay-grid > *, .qr-fields > *,
  .di-photos > *, .dphoto-grid > *, .prov-row > *, .rep-row > *,
  .kpi, .card { min-width: 0; }
  .kpi, .card { max-width: 100%; }
  /* หัวเรื่องแถบบน: ชื่อหน้ายาว/ฟอนต์ใหญ่ ไม่ดันกระดิ่งตกขอบจอ */
  .topbar .title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 900px) {
  /* แถวหัวสาขา/ตำแหน่ง (ตั้งค่าคลังสินค้า / จัดการสิทธิ์): ชื่อ + ข้อมูลย่อ + ปุ่มหลายปุ่ม ตกบรรทัดได้ ไม่ดันออกนอกจอ */
  .racc-head { flex-wrap: wrap; }
  .racc-meta { white-space: normal; margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 900px) {
  /* ePOD: หัวการ์ดงานส่ง (ชื่อร้านยาว + ป้ายสถานะ) ป้ายตกบรรทัดได้ ไม่โดนดันออกนอกจอ */
  .job-head { flex-wrap: wrap; }
  /* กล่องเลือก (สาขา/ตัวกรอง) กว้างตามข้อความในตัวเลือกที่ยาวสุด -> จำกัดไม่ให้เกินกรอบ (ข้อความในกล่องถูกตัดแทน) */
  .content select, .modal select { max-width: 100% !important; }  /* !important: บาง select ตั้ง max-width ไว้ใน inline style */
}

/* ---------- ดึงลงเพื่อรีเฟรช (มือถือ): ป้ายบอกสถานะระหว่างลาก ---------- */
.ptr-hint { display: none; position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 300; background: var(--card-bg); color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 7px 15px; font-size: 12.5px; font-weight: 600; box-shadow: 0 4px 14px oklch(0.2 0.03 260 / 0.18); pointer-events: none; white-space: nowrap; }
.ptr-hint.ready { color: var(--primary); border-color: var(--primary); }

/* ---------- แดชบอร์ด: พื้นที่ที่ต้องโฟกัส แบบการ์ดย่อรายจังหวัด (จบในหน้าเดียว · เปิดค้างบนจอทั้งวัน) ---------- */

/* แดชบอร์ด: แถบเลือกสาขา (บาง ไม่กินที่ — ทั้งหน้าต้องจบในจอเดียว) */
.dash-branch-bar { margin-bottom: 10px; gap: 8px; }
.dash-branch-bar .select.sm { padding: 5px 28px 5px 9px; }  /* ต้องเว้นขวาให้ลูกศรดรอปดาวน์ (28px) — ใช้ shorthand padding เฉย ๆ จะทับข้อความ */

/* ---------- แดชบอร์ดผู้บริหาร (2026-09-09): แถว KPI 5 ใบ · Sales Funnel · Management Alerts — ดีไซน์เดิม (การ์ด/ป้าย/สี) ---------- */
.alert-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 6px; }  /* การ์ดเต็มความกว้าง: 2 คอลัมน์บนจอคอม · min(...,100%) กันล้นจอมือถือ */
.alert-row { display: flex; align-items: center; gap: 9px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg); cursor: pointer; font-size: 12.5px; min-width: 0; }
.alert-row:hover { background: var(--row-hover); border-color: var(--primary); }
.alert-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.alert-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.alert-dot.danger { background: oklch(0.62 0.19 25); }
.alert-dot.warn { background: oklch(0.78 0.15 80); }
.alert-dot.info { background: oklch(0.62 0.16 255); }
.alert-item { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 11px; border-bottom: 1px solid var(--border-row); font-size: 12.5px; background: var(--card-bg); }
.alert-item:last-child { border-bottom: none; }
.alert-item.click { cursor: pointer; }
.alert-item.click:hover { background: var(--row-hover); }
.dash-branch-bar .vrp-kpi-label { margin-left: 4px; }
/* เลือกหลายสาขา (2026-10-28) */
.dash-br { position: relative; display: inline-block; }
.dash-br-btn { min-width: 150px; max-width: 260px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.dash-br-scrim { position: fixed; inset: 0; z-index: 60; }
.dash-br-pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 61; min-width: 240px; max-height: 320px; overflow-y: auto; padding: 6px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 28px oklch(0.2 0.03 260 / 0.22); }
.dash-br-opt { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 7px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.dash-br-opt:hover { background: var(--row-hover); }
.dash-br-opt:first-child { border-bottom: 1px solid var(--border-row); border-radius: 7px 7px 0 0; margin-bottom: 2px; font-weight: 600; }
.dash-br-opt input { width: 15px; height: 15px; }
/* โหมดจอทีวี (2026-09-16): เฉพาะหน้าแดชบอร์ด — ซ่อนเมนูซ้าย/แถบบน ให้เนื้อหาเต็มจอ */
.dash-tv-btn { margin-left: auto; }
.app-shell.tv-mode .sidebar, .app-shell.tv-mode .topbar, .app-shell.tv-mode .nav-scrim { display: none !important; }
.app-shell.tv-mode .content { padding: 16px 20px; }
@media (max-width: 900px) { .dash-tv-btn { display: none; } }
@media (max-width: 900px) {
  .alert-list { grid-template-columns: 1fr; }
}

/* เมนูซ้าย: ปุ่มล่างสุด + กล่องผู้ใช้ติดกันล่างสุด (ย้ายออกมาจากบล็อก WMS เดิม — ระบบ WMS ถูกลบแล้ว 2026-09-14) */
.sys-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sys-bottom > * { min-width: 0; max-width: 100%; }
.sys-bottom .sidebar-user { margin-top: 0; }

/* ================= ตารางกะพนักงาน (2026-09-14) — คลาสใหม่ขึ้นต้น .sh- ทั้งหมด ไม่แตะหน้าอื่น ================= */
.sh-page { display: flex; flex-direction: column; gap: 12px; }
.sh-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.sh-toolbar .field { margin: 0; }
.sh-f { min-width: 150px; }
.sh-f .select, .sh-f .input { min-width: 150px; }
.sh-f-branch .select { min-width: 250px; }  /* ชื่อสาขายาว เช่น "00000 สาขาสำนักงานใหญ่" — มือถือถูกล้างเป็น 0 ใน @media ด้านล่าง */
.sh-quick { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 2px; }
.sh-acts { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.sh-acts .btn { display: inline-flex; align-items: center; gap: 6px; }
.sh-alert { border-radius: 10px; padding: 10px 13px; font-size: 13px; display: flex; flex-direction: column; gap: 7px; }
.sh-alert.ok { background: oklch(0.95 0.05 150); color: oklch(0.36 0.10 150); flex-direction: row; align-items: center; gap: 6px; }
.sh-alert.info { background: var(--row-hover); color: var(--text-2); flex-direction: row; align-items: center; gap: 6px; }
.sh-alert.bad { background: oklch(0.96 0.03 25); border: 1px solid oklch(0.85 0.08 25); color: oklch(0.45 0.17 25); }
.sh-alert-head { font-weight: 700; display: flex; align-items: center; gap: 6px; }
.sh-alert-list { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-short { background: #fff; border: 1px solid oklch(0.85 0.08 25); border-radius: 999px; padding: 2px 10px; font-size: 12px; white-space: nowrap; }
.sh-short.more { color: var(--muted); border-color: var(--border); }
.sh-brushbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sh-brush-lbl { font-size: 12.5px; color: var(--text-2); margin-right: 4px; }
.sh-brush {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--input-border); background: var(--card-bg); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.sh-brush i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.sh-brush:hover { background: var(--row-hover); }
.sh-brush.on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-weak); background: var(--primary-weak); }
.sh-card { padding: 0; overflow: hidden; }
.sh-scroll { overflow-x: auto; max-width: 100%; }
.sh-tbl { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 640px; font-size: 12.5px; }
.sh-tbl th, .sh-tbl td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.sh-tbl .sh-name { position: sticky; left: 0; z-index: 2; background: var(--card-bg); text-align: left; min-width: 170px; max-width: 220px; padding: 7px 10px; }
.sh-tbl thead th { background: var(--row-hover); position: sticky; top: 0; }
.sh-tbl thead .sh-name { z-index: 3; background: var(--row-hover); font-size: 12px; color: var(--text-2); }
.sh-day { min-width: 88px; padding: 6px 4px; text-align: center; font-weight: 500; color: var(--text-2); font-size: 11.5px; line-height: 1.25; }
.sh-day b { display: block; font-size: 16px; color: var(--text); }
.sh-mon { font-size: 10.5px; color: var(--muted); }
.sh-day.wknd { background: oklch(0.94 0.012 255) !important; }
.sh-day.today { background: var(--primary-weak) !important; box-shadow: inset 0 -3px 0 var(--primary); }
.sh-day.today b { color: var(--primary); }
.sh-grp td { background: oklch(0.975 0.006 255); }
.sh-grp .sh-name { background: oklch(0.975 0.006 255); }
.sh-grp .sh-name b { font-size: 13px; }
.sh-min { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
.sh-cnt { text-align: center; font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 4px; }
.sh-cnt.ok { color: oklch(0.45 0.12 150); }
.sh-cnt.short { color: oklch(0.50 0.19 25); background: oklch(0.95 0.04 25) !important; }
.sh-cell { padding: 3px; height: 46px; text-align: center; vertical-align: middle; }
.sh-cell.edit { cursor: pointer; }
.sh-cell.edit:hover { background: var(--row-hover); }
.sh-cell.today, .sh-cnt.today { box-shadow: inset 2px 0 0 var(--primary-weak), inset -2px 0 0 var(--primary-weak); }
.sh-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; border-radius: 7px; padding: 3px 4px; min-height: 38px; font-size: 11px; line-height: 1.25; }
.sh-chip b { font-size: 11.5px; font-weight: 700; }
.sh-chip span { font-size: 10.5px; opacity: 0.9; white-space: nowrap; }
.sh-chip.off { background: #ececef; color: #52525b; font-weight: 600; }
.sh-person { display: block; width: 100%; text-align: left; background: none; border: none; padding: 0; font: inherit; font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.sh-person { cursor: pointer; color: var(--primary); }
button.sh-person:hover { text-decoration: underline; }
.sh-set-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.sh-set-body { display: flex; flex-direction: column; gap: 8px; max-height: 58vh; overflow-y: auto; }
.sh-time { width: 104px; padding: 7px 8px; }
/* ปุ่มบันทึกขึ้นเฉพาะเมื่อแก้แล้ว — [data-dirty].is-dirty (dirtyRefresh ใน app.js) */
[data-dirty] .dirty-only { display: none; }
[data-dirty].is-dirty .dirty-only { display: inline-flex; }
/* ตารางกะทำงาน · สถานะการทำงาน: แถวเดียวต่อสถานะ (2026-10-30) */
.sh-st-list { border: 1px solid var(--border); border-radius: 10px; overflow-x: auto; }
.sh-st-head, .sh-st-row { min-width: 760px; }
.sh-st-head, .sh-st-row { display: grid; grid-template-columns: 30px minmax(130px, 1fr) 236px 84px 96px 128px; align-items: center; gap: 10px; padding: 8px 12px; }
.sh-st-head { background: var(--row-hover); border-radius: 10px 10px 0 0; font-size: 12px; font-weight: 600; color: var(--text-2); }
.sh-st-head span:nth-child(4), .sh-st-head span:nth-child(5) { text-align: center; }
.sh-st-row { border-top: 1px solid var(--border); }
.sh-st-row.is-new { background: oklch(0.62 0.13 255 / 0.07); }
.sh-st-row .input { min-width: 0; }
.sh-st-empty { padding: 12px; font-size: 12.5px; border-top: 1px solid var(--border); }
.sh-times { display: flex; align-items: center; gap: 6px; }
.sh-times-off { display: none; padding-left: 4px; }
.sh-st-row.notime .sh-times { display: none; }
.sh-st-row.notime .sh-times-off { display: block; }
.sh-ck { display: flex; justify-content: center; align-items: center; height: 34px; cursor: pointer; }
.sh-ck input { width: 17px; height: 17px; cursor: pointer; accent-color: oklch(0.62 0.13 255); }
.sh-st-acts { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.sh-st-acts .btn { white-space: nowrap; }
.sh-pal-wrap { position: relative; }
.sh-dot-btn { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 8px; background: transparent; cursor: pointer; }
.sh-dot-btn:hover { background: var(--row-hover); }
.sh-dot-btn i { width: 14px; height: 14px; border-radius: 4px; display: block; }
.sh-pal { display: none; position: absolute; left: 36px; top: -3px; z-index: 5; gap: 5px; padding: 6px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 22px oklch(0.2 0.03 260 / 0.25); }
.sh-pal-wrap.open .sh-pal { display: flex; }
.sh-swatch { width: 22px; height: 22px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.sh-swatch.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--card-bg) inset; }
@media (max-width: 900px) {
  .sh-acts { margin-left: 0; width: 100%; }
  .sh-acts .btn { flex: 1 1 140px; justify-content: center; }
  .sh-f { flex: 1 1 140px; min-width: 0; }
  .sh-f .select, .sh-f .input { min-width: 0; width: 100%; }
  .sh-tbl .sh-name { min-width: 120px; max-width: 140px; }
  .sh-day { min-width: 76px; }
  /* เลือกทั้งเดือนแล้วขาดหลายจุด: รายการขาดคนเลื่อนในกล่องตัวเอง ตารางจะได้ไม่ถูกดันลงไปไกล */
  .sh-alert-list { max-height: 132px; overflow-y: auto; }
}
.sh-min-save { position: sticky; bottom: 0; display: flex; justify-content: space-between; gap: 8px; padding-top: 8px; background: var(--card-bg); }
/* ตารางกะ · ขั้นต่ำต่อกะใน 1 วัน (ตำแหน่ง × กะ) */
.sh-min-note { font-size: 12.5px; color: var(--text-2); margin-bottom: 2px; }
.sh-min-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.sh-min-tbl { border-collapse: collapse; width: 100%; font-size: 13px; }
.sh-min-tbl th, .sh-min-tbl td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: center; vertical-align: middle; }
.sh-min-tbl tr:last-child td { border-bottom: none; }
.sh-min-tbl th:first-child, .sh-min-tbl td:first-child { text-align: left; min-width: 150px; }
.sh-min-tbl thead th { background: var(--row-hover); font-weight: 600; white-space: nowrap; }
.sh-min-tbl td .dim, .sh-min-tbl th .dim { font-size: 11px; font-weight: 400; }
.sh-min-tbl .input { width: 70px; padding: 7px 8px; text-align: center; }
/* ลำดับตำแหน่ง: ลูกศรขึ้น/ลงคอลัมน์ขวาสุดของตาราง (2026-10-30) */
.sh-min-tbl th.sh-ord-col, .sh-min-tbl td.sh-ord-col { width: 1%; padding-left: 4px; text-align: right; white-space: nowrap; }
.sh-ord { display: inline-flex; gap: 6px; flex-shrink: 0; }
.sh-ord-btn { width: 30px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.sh-ord-btn svg { width: 15px; height: 15px; }
.sh-ord-btn:hover:not(:disabled) { background: var(--row-hover); border-color: var(--text-2); }
.sh-ord-btn:disabled { opacity: 0.25; cursor: default; }
.sh-min-type { display: inline-flex; align-items: center; gap: 5px; }
.sh-min-type i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
/* กลุ่มตำแหน่งทดแทนกัน (2026-09-21) — แถวในตารางขั้นต่ำ + ฟอร์มเลือกตำแหน่ง */
.sh-min-tbl .sh-min-g td { background: oklch(0.97 0.018 255); }
.sh-min-tbl .sh-min-g td:first-child { border-left: 3px solid oklch(0.62 0.13 255); }
.sh-min-gacts { display: flex; gap: 6px; margin-top: 6px; }
.sh-min-gacts .btn { padding: 4px 9px; font-size: 11.5px; }
.sh-groles { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 2px; }
.sh-grole { display: inline-flex; align-items: center; gap: 4px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text-2); font-size: 12.5px; cursor: pointer; }
.sh-grole:hover { border-color: oklch(0.72 0.09 255); }
.sh-grole.on { background: oklch(0.95 0.035 255); border-color: oklch(0.62 0.13 255); color: oklch(0.38 0.12 255); font-weight: 600; }
.sh-grp.sh-grp-sub td { background: oklch(0.965 0.02 255); }
.sh-grp.sh-grp-sub .sh-name { background: oklch(0.965 0.02 255); border-left: 3px solid oklch(0.62 0.13 255); }
.sh-cnt-line { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 11px; line-height: 1.45; white-space: nowrap; }
.sh-cnt-line i { width: 7px; height: 7px; border-radius: 2px; display: inline-block; flex: none; }
.sh-cnt-line.ok { color: oklch(0.45 0.12 150); }
.sh-cnt-line.short { color: oklch(0.50 0.19 25); font-weight: 700; }
.sh-cnt.ok { color: inherit; }

/* ================= หน้าที่ใช้ได้เฉพาะบนคอมพิวเตอร์ (2026-09-14) =================
   VRP · จัดการรถขนส่ง · ตั้งค่าคลังสินค้า · ตั้งค่าราคา · ตารางกะ — ไม่ได้ปิดสิทธิ์ แค่ซ่อนเมนูบนมือถือ + ขึ้นข้อความแทนหน้า
   เกณฑ์ "มือถือ" ต้องตรงกับ PHONE_MQ ใน app.js */
.desk-only-note { max-width: 460px; margin: 40px auto; padding: 30px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.desk-only-ico { width: 56px; height: 56px; border-radius: 16px; background: var(--primary-weak); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.desk-only-svg { width: 28px; height: 28px; }
.desk-only-title { font-size: 16px; font-weight: 700; color: var(--text); }
.desk-only-sub { font-size: 13px; color: var(--text-2); line-height: 1.6; }
@media (max-width: 900px), (pointer: coarse) and (max-height: 520px) {
  .nav-item.desk-only { display: none; }
}

/* ================= ตารางกะ: จบในหน้าจอเดียว ไม่ต้องเลื่อนซ้าย-ขวา (2026-09-14) =================
   คอลัมน์วันแบ่งความกว้างเท่ากันเต็มการ์ด (table-layout: fixed) · ช่วงวันที่ยาว = ย่อเนื้อหาในช่องแทนการขยายตาราง
   dense (> 10 วัน): ซ่อนเวลาในชิป/เดือนในหัวตาราง · xdense (> 21 วัน): ย่อตัวอักษรอีกขั้น — ชี้ที่ชิปเห็นชื่อ+เวลาเต็ม */
.sh-tbl { table-layout: fixed; min-width: 0; width: 100%; }
.sh-tbl .sh-name { width: 200px; min-width: 0; max-width: none; overflow: hidden; }
.sh-day { min-width: 0; overflow: hidden; }
.sh-cell, .sh-cnt { overflow: hidden; }
.sh-chip b, .sh-chip span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-scroll { overflow-x: visible; }
.sh-tbl.dense .sh-name { width: 170px; }
.sh-tbl.dense .sh-mon { display: none; }
.sh-tbl.dense .sh-day { padding: 5px 2px; }
.sh-tbl.dense .sh-day b { font-size: 14px; }
.sh-tbl.dense .sh-chip { min-height: 32px; padding: 2px 3px; }
.sh-tbl.dense .sh-chip span { display: none; }
.sh-tbl.dense .sh-chip b { font-size: 10.5px; }
.sh-tbl.dense .sh-cell { height: 40px; padding: 2px; }
.sh-tbl.xdense .sh-name { width: 150px; padding: 6px 8px; }
.sh-tbl.xdense .sh-person { font-size: 11.5px; }
.sh-tbl.xdense .sh-day { font-size: 9.5px; padding: 4px 1px; }
.sh-tbl.xdense .sh-day b { font-size: 12px; }
.sh-tbl.xdense .sh-chip { min-height: 28px; padding: 1px 2px; border-radius: 5px; }
.sh-tbl.xdense .sh-chip b { font-size: 9.5px; font-weight: 600; }
.sh-tbl.xdense .sh-cell { height: 34px; padding: 2px 1px; }
.sh-tbl.xdense .sh-cnt { font-size: 9.5px; padding: 3px 1px; }
.sh-tbl.xdense .sh-cnt-line { font-size: 9.5px; gap: 2px; }
.sh-tbl.xdense .sh-cnt-line i { display: none; }
.sh-tbl.xdense .sh-min { font-size: 10px; }

/* ตารางกะ: วันปิด = พนักงานหยุดทุกคน (ไม่นับขาดคน) */
.sh-day.closed { background: oklch(0.90 0.006 260) !important; color: var(--muted); }
.sh-cnt.closed { background: oklch(0.94 0.004 260) !important; color: var(--muted); font-weight: 600; }

/* ================= ระบบ WMS (คลังพาเลท, 2026-09-17) — คลาสขึ้นต้น .wms- / .sys- เท่านั้น ไม่แตะหน้า OPS ================= */
/* เมนูซ้ายของ WMS */
/* ช่องสแกนกลาง */
.wms-scanbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px 16px; margin-bottom: 14px; }
.wms-scan-in { flex: 1 1 240px; min-width: 0; font-size: 17px; padding: 11px 12px; letter-spacing: 0.03em; }
.wms-scan-hint { flex-basis: 100%; font-size: 12px; line-height: 1.5; }
/* ตาราง */
.wms-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wms-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.wms-table th { text-align: left; padding: 8px; border-bottom: 1px solid var(--border); color: var(--muted); font-weight: 600; font-size: 12px; white-space: nowrap; }
.wms-table td { padding: 9px 8px; border-bottom: 1px solid var(--border-row); vertical-align: middle; }
.wms-table td.num, .wms-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wms-table tr.wms-done td { color: var(--muted); }
.wms-table tr.wms-click { cursor: pointer; }
.wms-table tr.wms-click:hover td { background: var(--row-hover); }
/* รายการพาเลท (เป็นหมื่นใบได้): บนคอมใช้แถวแบบกริดแทนแถวตาราง — แถวตารางใช้ content-visibility ไม่ได้ ทำให้ต้องวาดครบทุกแถว (วัดที่ 10,000 ใบ: 2.6 วิ)
   หน้าตาเหมือนตารางเดิม · สัดส่วนคอลัมน์มาจาก --cols บนแท็ก table */
@media (min-width: 901px) {
  .wms-table.wms-gridrows, .wms-table.wms-gridrows thead, .wms-table.wms-gridrows tbody { display: block; }
  .wms-table.wms-gridrows tr { display: grid; grid-template-columns: var(--cols); border-bottom: 1px solid var(--border-row); }
  .wms-table.wms-gridrows thead tr { border-bottom-color: var(--border); }
  .wms-table.wms-gridrows tbody tr { content-visibility: auto; contain-intrinsic-size: auto 42px; }
  .wms-table.wms-gridrows th, .wms-table.wms-gridrows td { display: flex; align-items: center; min-width: 0; border-bottom: 0; overflow: hidden; white-space: nowrap; }
  .wms-table.wms-gridrows th.num, .wms-table.wms-gridrows td.num { justify-content: flex-end; }
}
.wms-qty { width: 96px; text-align: right; font-size: 15px; padding: 7px 9px; }
/* การ์ด/หัวเรื่อง */
.wms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.wms-kv span { display: block; font-size: 11.5px; color: var(--muted); }
.wms-kv b { font-size: 14px; overflow-wrap: anywhere; }
.wms-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.wms-title { font-size: 17px; font-weight: 800; }
.wms-code { font-family: ui-monospace, Consolas, "Courier New", monospace; font-weight: 700; }
.wms-tag { display: inline-block; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.wms-tag.ok { background: oklch(0.95 0.05 150); color: oklch(0.4 0.1 150); }
.wms-tag.warn { background: oklch(0.95 0.06 80); color: oklch(0.4 0.1 70); }
.wms-tag.bad { background: oklch(0.95 0.05 25); color: oklch(0.45 0.15 25); }
.wms-tag.gray { background: oklch(0.94 0.01 255); color: var(--muted); }
.wms-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; align-items: center; }
/* มือถือ: ไม่มีตัวเลือกดูมุมมองตำแหน่งอื่น (ผู้ใช้ 2026-11-11) — เกณฑ์ "มือถือ" เดียวกับ PHONE_MQ ใน app.js
   ถ้ากำลังดูมุมมองอยู่ ยังกลับได้จากปุ่ม "กลับมุมมองของฉัน" บนแถบเตือน */
@media (max-width: 900px), (pointer: coarse) and (max-height: 520px) { .viewas-pick { display: none !important; } }
/* ---------- จัดการพาเลท: การ์ด (2026-11-11) ---------- */
.pal-head { justify-content: flex-end; gap: 6px; }
.pal-btn-close { color: var(--danger); border-color: oklch(0.62 0.19 25 / 0.45); }
.pal-btn-close:hover { background: var(--danger-weak); border-color: var(--danger); }
.pal-detail { max-width: none; }   /* หน้ารายละเอียดพาเลท: กว้างเต็มคอลัมน์เหมือนเดิม (ผู้ใช้ 2026-11-11 · ยกเลิกกรอบแคบแบบ ePOD) */
.pal-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.pal-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; font: inherit; color: var(--text);
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; cursor: pointer; min-width: 0; }
.pal-stat:hover { background: var(--row-hover); }
.pal-stat span { font-size: 12.5px; color: var(--muted); }
.pal-stat b { font-size: 22px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pal-stat small { font-size: 11.5px; color: var(--muted); }
.pal-stat.on { border-color: var(--primary); background: var(--primary-weak); box-shadow: inset 0 0 0 1px var(--primary); }
.pal-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.pal-tools .pal-q { flex: 1 1 240px; min-width: 0; }
.pal-all { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.pal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.pal-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; cursor: pointer; min-width: 0;
  background: var(--card-bg); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 10px;
  transition: border-color .12s, box-shadow .12s; content-visibility: auto; contain-intrinsic-size: auto 92px; }
.pal-card.has { border-left-color: oklch(0.66 0.13 150); }
.pal-card:hover { border-color: var(--primary); box-shadow: 0 2px 10px oklch(0.4 0.05 255 / 0.12); }
.pal-card.sel { border-color: var(--primary); background: var(--primary-weak); }
.pal-card.closed { opacity: 0.72; }
.pal-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pal-cbw { display: inline-flex; padding: 6px; margin: -6px -2px -6px -6px; cursor: pointer; }
.pal-no { flex: 1; min-width: 0; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-bc { font-size: 11px; font-weight: 600; color: var(--muted); }
.pal-mid { font-size: 13px; color: var(--text-2); }
.pal-mid b { font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums; }
.pal-mid.empty { color: var(--muted); }
.pal-mid.off { color: var(--danger); font-weight: 600; }
.pal-foot { font-size: 11.5px; color: var(--muted); }
.pal-more { display: block; margin: 12px auto 0; padding: 10px; text-align: center; }
.pal-none { padding: 18px 4px; }
@media (max-width: 600px) {
  .pal-stats { gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pal-stat { padding: 8px 10px; }
  .pal-stat b { font-size: 18px; }
  .pal-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .pal-ftag { display: none; }   /* จอแคบ: ขอบซ้ายสีเขียว + บรรทัดกลางการ์ด (ไม่มีสินค้า / ปิดใช้งานแล้ว) บอกอยู่แล้ว ให้เลขพาเลทเต็มบรรทัด */
}
/* ---------- แผงสรุปพื้นที่ (เลื่อนเข้าจากขวา — แบบแผงสรุปรายประเทศของจอเฝ้าระวัง) ---------- */
.brief-scrim { position: fixed; inset: 0; background: oklch(0.15 0.02 260 / 0.45); z-index: 130; }
.brief { position: fixed; top: 0; right: 0; bottom: 0; z-index: 131; width: min(460px, 100vw); display: flex; flex-direction: column;
  background: var(--card-bg); border-left: 1px solid var(--border); box-shadow: -18px 0 44px oklch(0.15 0.03 260 / 0.28); }
/* เลื่อนเข้าเฉพาะตอนเปิดแผงครั้งแรก (คลาส anim) — ไม่เล่นซ้ำตอนข้อมูลโหลด/รีเฟรช */
.brief.anim { animation: brief-in 0.18s ease-out; }
@keyframes brief-in { from { transform: translateX(28px); opacity: 0.4; } to { transform: none; opacity: 1; } }
.brief-head { padding: 14px 18px 0; border-bottom: 1px solid var(--border); position: relative; }
.brief-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); }
.brief-title { font-size: 26px; font-weight: 800; margin: 4px 0 10px; letter-spacing: -0.01em; }
.brief-x { position: absolute; top: 12px; right: 14px; border: 1px solid var(--btn-border); background: transparent; color: var(--muted); font-size: 12px; line-height: 1; padding: 4px 8px; border-radius: 6px; cursor: pointer; }
.brief-x:hover { color: var(--danger); border-color: var(--danger); }
.brief-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.brief-tabs { display: flex; gap: 2px; }
.brief-tab { font: inherit; font-size: 12px; font-weight: 600; padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); cursor: pointer; }
.brief-tab.on { color: var(--text); border-bottom-color: var(--primary); }
.brief-body { flex: 1; overflow-y: auto; padding: 14px 18px 22px; }
.brief-sec { margin-bottom: 18px; }
.brief-sec-h { font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.brief-lead { font-size: 13px; line-height: 1.75; }
.brief-score { display: flex; align-items: center; gap: 14px; margin: 4px 0 12px; }
.brief-score-n { font-family: Consolas, "Courier New", monospace; font-size: 42px; font-weight: 800; line-height: 1; }
.brief-score-n span { font-size: 15px; color: var(--muted); font-weight: 600; }
.brief-score-l { font-size: 13px; font-weight: 700; }
.brief-score-l .dim { font-size: 11px; font-weight: 400; }
.brief-bar { display: grid; grid-template-columns: minmax(96px, 1.1fr) minmax(70px, 1.4fr) auto; align-items: center; gap: 9px; font-size: 12px; padding: 4px 0; }
.brief-bar-l { color: var(--text-2); }
.brief-bar-t { height: 7px; border-radius: 99px; background: var(--border-row); overflow: hidden; }
.brief-bar-t i { display: block; height: 100%; border-radius: 99px; }
.brief-bar-v { font-family: Consolas, "Courier New", monospace; font-size: 11px; color: var(--muted); white-space: nowrap; text-align: right; }
.brief-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 4px 0; border-bottom: 1px solid var(--border-row); }
.brief-row:last-child { border-bottom: 0; }
.brief .area-scroll { max-height: none; overflow-x: auto; }
/* ตารางอำเภอ/ตำบลในแผงแคบกว่าบนแดชบอร์ด — บีบคอลัมน์ให้พอดี (ต้นฉบับตั้ง grid ไว้ใน inline style) */
.brief .prov-row { grid-template-columns: minmax(92px, 1.6fr) 42px 54px 44px 42px 58px !important; font-size: 11.5px; }
@media (max-width: 560px) { .brief { width: 100vw; } .brief-title { font-size: 22px; } }

/* ---------- แดชบอร์ด: ผังตายตัว 2 คอลัมน์ (ซ้าย = ตัวเลข+กราฟ · ขวา = แจ้งเตือน + แผนที่เต็มจอ) ---------- */
.dash-ops { display: grid; grid-template-columns: minmax(300px, 0.85fr) minmax(0, 2fr); gap: 12px; align-items: start; }
.dash-col-l, .dash-col-r { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* คอลัมน์ขวาสูงเท่าหน้าจอ: แจ้งเตือนสูงตามเนื้อหา · แผนที่กินที่เหลือทั้งหมด */
.dash-col-r { height: calc(100vh - 168px); min-height: 520px; }
.app-shell.tv-mode .dash-col-r { height: calc(100vh - 96px); }
.dash-p { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.dash-p-head { display: flex; align-items: center; gap: 8px; padding: 7px 11px; border-bottom: 1px solid var(--border); background: var(--row-hover); flex: none; }
.dash-p-title { font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.dash-p-meta { font-size: 11px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; margin-left: auto; }
.dash-p-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.dash-p-dot.live { background: oklch(0.70 0.18 145); animation: live-blink 2.2s ease-in-out infinite; }
.dash-p-body { min-width: 0; }
.dash-p-map { flex: 1; min-height: 0; }
.dash-p-map .dash-p-body { flex: 1; min-height: 0; display: flex; }
.ops-clock { font-family: Consolas, "Courier New", monospace; letter-spacing: 0.02em; }
/* เนื้อในแผงใช้กรอบของแผงแทนกรอบการ์ดเดิม + ซ่อนหัวการ์ดที่ซ้ำกับหัวแผง */
.dash-p-body > .card, .dash-p-body > div > .card { border: 0; border-radius: 0; background: transparent; margin: 0 !important; }
.dash-p-body > .card > .card-title, .dash-p-body > .card > div > .card-title { display: none !important; }
.dash-p-body .kpi-grid:last-child { margin-bottom: 0; }
/* คอลัมน์ซ้ายแคบ: การ์ดตัวเลขเรียง 2 ช่องต่อแถว (ไม่ใช่เรียงยาวลงมาช่องเดียว) */
.dash-col-l .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dash-col-l .kpi { padding: 9px 12px 8px; }
.dash-col-l .kpi-value { font-size: 22px; }
@media (max-width: 1200px) { .dash-col-l .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
@media (max-width: 1200px) {
  .dash-ops { grid-template-columns: 1fr; }
  .dash-col-r { height: auto; min-height: 0; }
  .dash-p-map { min-height: 460px; }
}

/* ---------- แดชบอร์ด: ยืดเต็มความกว้าง/ความสูงของจอที่ใช้จริง ---------- */
.kpi-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
@media (min-width: 1700px) { .content { padding: 28px 36px; } .kpi-grid { gap: 14px; } }

/* ---------- การเคลื่อนไหวบนแดชบอร์ด (จอเปิดค้างทั้งวัน — ต้องสะดุดตาแต่ไม่กวน) ---------- */
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: oklch(0.65 0.18 145); margin-right: 7px; vertical-align: middle; animation: live-blink 2.2s ease-in-out infinite; }
@keyframes live-blink { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 oklch(0.65 0.18 145 / 0.5); } 50% { opacity: 0.45; box-shadow: 0 0 0 5px oklch(0.65 0.18 145 / 0); } }
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none !important; }
}

/* ---------- แผนที่ปฏิบัติการ (แดชบอร์ด) ---------- */
.ops-map-wrap { flex: 1; min-height: 0; display: flex; }
/* แผนที่ร้านในหน้ารายละเอียดลูกค้า (2026-11-06) */
.cust-map-slot { position: relative; z-index: 0; isolation: isolate; height: 200px; margin-top: 8px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.cust-map { width: 100%; height: 100%; }
.cust-map.dark-tiles .leaflet-tile { filter: invert(1) hue-rotate(180deg) brightness(0.70) contrast(0.86) saturate(0.7) grayscale(0.25); }
.cust-map-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
/* แผนที่ลูกค้าเหนือรายชื่อ CRM (2026-11-06) */
.crm-map-card { margin: 4px 0 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); overflow: hidden; }
.crm-map-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; }
.crm-map-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; white-space: nowrap; }
.crm-map-title .dim { font-weight: 500; font-size: 12px; }
.crm-map-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; }
.crm-map-lg { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.crm-map-lg i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 0 1px oklch(0.6 0.02 260 / 0.5); }
.crm-map-lg b { font-weight: 600; color: var(--muted); }
.crm-map-slot { position: relative; z-index: 0; isolation: isolate; height: 380px; border-top: 1px solid var(--border); }
.crm-map { width: 100%; height: 100%; }
.crm-map.dark-tiles .leaflet-tile { filter: invert(1) hue-rotate(180deg) brightness(0.70) contrast(0.86) saturate(0.7) grayscale(0.25); }
.crm-map-empty { position: absolute; z-index: 500; top: 10px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; background: oklch(1 0 0 / 0.92); color: oklch(0.4 0.02 260); font-size: 12px; pointer-events: none; }
@media (max-width: 700px) { .crm-map-slot { height: 280px; } }
.crm-pop { font-family: inherit; font-size: 12.5px; line-height: 1.45; }
.crm-pop-id { font-size: 11px; color: oklch(0.55 0.02 260); }
.crm-pop-shop { font-weight: 700; font-size: 13.5px; }
.crm-pop-name { color: oklch(0.5 0.02 260); }
.crm-pop-tel { display: flex; align-items: center; gap: 5px; margin-top: 4px; }
.crm-pop-tel svg { width: 13px; height: 13px; }
.crm-pop-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.crm-pop-acts .btn { text-decoration: none; }
/* ของที่หยิบไว้แล้วแต่ใบออกจากงาน (2026-11-11) */
.pkd-doc { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.pkd-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.pkd-opt { display: flex; align-items: flex-start; gap: 8px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; margin-top: 6px; cursor: pointer; }
.pkd-opt.on { border-color: var(--primary); background: var(--primary-weak); }
.pkd-opt input { margin-top: 3px; }
.pkd-opt > span { display: flex; flex-direction: column; gap: 1px; }
.pkd-opt .dim { font-size: 11.5px; }
.pkd-pal { margin-top: 4px; width: 100%; }
.pkd-retlbl { font-size: 12.5px; font-weight: 700; }
.pkd-err { margin: 4px 0 2px; padding: 8px 10px; border-radius: 8px; background: oklch(0.95 0.04 25); color: oklch(0.45 0.18 25); font-size: 12.5px; }
.pkd-warn { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: oklch(0.95 0.05 60); color: oklch(0.42 0.13 55); font-size: 12.5px; }
html[data-theme="dark"] .pkd-err { background: oklch(0.3 0.06 25); color: oklch(0.85 0.08 25); }
html[data-theme="dark"] .pkd-warn { background: oklch(0.3 0.05 60); color: oklch(0.86 0.08 70); }
.pkd-ret { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; }
.pkd-ret .input { flex: 1; min-width: 200px; max-width: 320px; }
.pkd-ret-need { color: oklch(0.5 0.18 25); font-weight: 700; }
tr.pk-doc-out td { opacity: 0.75; }
/* เปิดงานหยิบแบบ ePOD — ใบละการ์ด + สินค้าทีละบรรทัด (2026-11-11) */
.pk-stop { margin-bottom: 12px; }
.pk-stop.cur { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-weak); }
.pk-stop.out { opacity: 0.7; }
.pk-stop-head { display: flex; align-items: flex-start; gap: 10px; }
.pk-stop-info { flex: 1; min-width: 0; }
.pk-stop-info .dim { font-size: 12px; margin-top: 2px; }
.pk-stop-n { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }
.pk-stop-n svg { width: 16px; height: 16px; }
.pk-stop.done .pk-stop-n { background: oklch(0.6 0.15 150); }
.pk-stop.out .pk-stop-n { background: var(--muted); }
.pk-items { margin-top: 10px; border-top: 1px dashed var(--border); }
.pk-item { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px dashed var(--border); }
.pk-item:last-child { border-bottom: none; }
.pk-chk { flex: none; width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; color: #fff; }
.pk-chk svg { width: 15px; height: 15px; }
.pk-item.done .pk-chk { background: oklch(0.6 0.15 150); border-color: oklch(0.6 0.15 150); }
.pk-item-main { flex: 1; min-width: 0; }
.pk-item-name { font-weight: 700; font-size: 14.5px; line-height: 1.35; }
.pk-item.done .pk-item-name { color: var(--muted); text-decoration: line-through; }
.pk-item-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.pk-pal { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: var(--primary-weak); color: var(--primary); font-weight: 700; }
.pk-pal span { font-weight: 500; opacity: 0.85; }
/* หน้าหยิบสินค้า (2026-11-11): ทะเบียนรถหัวงาน · สต็อกไม่พอ (ส้ม) · แตะสินค้า = ดูพาเลท · หน้าต่างรายการพาเลท */
.pk-plate { font-size: 20px; font-weight: 800; }
.pk-pal.low { background: oklch(0.95 0.06 70); color: oklch(0.45 0.13 60); }
.pk-item-tap { cursor: pointer; border-radius: 8px; }
.pk-item-tap:hover { background: var(--row-hover); }
.pkpal-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; max-height: 60vh; overflow-y: auto; }
.pkpal-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border-row); }
.pkpal-row:last-child { border-bottom: none; }
.pkpal-row b { font-size: 16px; }
.pkpal-row span { color: var(--muted); font-size: 13px; }
.pk-pal svg { width: 12px; height: 12px; }
.pk-pal.none { background: oklch(0.94 0.04 25); color: oklch(0.5 0.17 25); }
html[data-theme="dark"] .pk-pal.none { background: oklch(0.3 0.06 25); color: oklch(0.85 0.08 25); }
html[data-theme="dark"] .pk-pal.low { background: oklch(0.32 0.06 70); color: oklch(0.88 0.09 75); }
.pk-item-qty { flex: none; text-align: right; white-space: nowrap; font-size: 13px; }
.pk-item-qty b { font-size: 22px; line-height: 1; }
.pk-item.done .pk-item-qty b { font-size: 16px; color: var(--muted); }
.pk-item-qty .dim { font-size: 11.5px; }
.pk-noitems { padding: 10px 2px; color: var(--muted); font-size: 12.5px; }
.pk-scan { margin-top: 10px; padding-top: 12px; border-top: 2px solid var(--primary-weak); }
tr.pk-doc-out td:last-child { opacity: 1; }
/* เส้นทางขาย (2026-11-06) — สีเส้นทาง = #6d28d9 (CRM_RT_COLOR ใน app.js) */
.crm-rt-num span { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #6d28d9; color: #fff; font-size: 11.5px; font-weight: 700; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.35); box-sizing: border-box; }
.crm-rt-no { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--rc, #6d28d9); color: #fff; font-size: 11px; font-weight: 700; margin-right: 5px; vertical-align: middle; box-sizing: border-box; }
.crm-rt-bar { position: absolute; z-index: 1001; right: 10px; bottom: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding: 6px 6px 6px 10px; max-width: calc(100% - 20px); border-radius: 12px; background: var(--card-bg); border: 1px solid var(--border); box-shadow: 0 4px 16px rgba(0,0,0,0.18); }
.crm-rt-bar-n, .crm-rt-title { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.crm-rt-bar-n i, .crm-rt-title i { width: 14px; height: 4px; border-radius: 2px; background: var(--rc, #6d28d9); }
.crm-rt-go { background: var(--rc, #6d28d9); border-color: var(--rc, #6d28d9); color: #fff; }
.crm-rt-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.crm-rt-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.crm-rt-chip { --rc: #6d28d9; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--card-bg); color: var(--text); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.crm-rt-chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--rc); }
.crm-rt-chip b { font-weight: 600; color: var(--muted); font-size: 11px; }
.crm-rt-chip.on { border-color: var(--rc); background: color-mix(in oklab, var(--rc) 12%, var(--card-bg)); }
.crm-rt-chip.pinned i { box-shadow: 0 0 0 2px var(--card-bg), 0 0 0 3.5px var(--rc); }
.crm-rt-chip.add { color: var(--muted); font-weight: 600; border-style: dashed; }
.crm-rt-box { margin: 8px; border: 2px solid var(--rc, #6d28d9); border-radius: 10px; overflow: hidden; background: color-mix(in oklab, var(--rc, #6d28d9) 4%, var(--card-bg)); }
.crm-rt-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid color-mix(in oklab, var(--rc, #6d28d9) 30%, var(--border)); }
.crm-rt-head .crm-rt-title { margin-right: auto; color: var(--rc, #6d28d9); }
html[data-theme="dark"] .crm-rt-head .crm-rt-title { color: color-mix(in oklab, var(--rc, #6d28d9) 55%, white); }
.crm-rt-box .crm-rt-row:last-child { border-bottom: none; }
.crm-rt-ctl { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.crm-rt-btn { width: 24px; height: 20px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg); color: var(--text); cursor: pointer; font-size: 11px; line-height: 1; }
.crm-rt-btn svg { width: 12px; height: 12px; }
.crm-rt-btn:hover { border-color: var(--rc, #6d28d9); color: var(--rc, #6d28d9); }
.crm-rt-btn.off { opacity: 0.3; cursor: default; }
.crm-rt-btn.off:hover { border-color: var(--border); color: var(--text); }
.crm-rt-btn.del:hover { border-color: oklch(0.6 0.2 25); color: oklch(0.55 0.2 25); }
.crm-pop-rt { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--rc, #6d28d9); }
.crm-pop-rt .crm-rt-no { margin-right: 2px; }
.crm-pop-rt-del { margin-left: auto; border: none; background: none; color: oklch(0.55 0.2 25); font: inherit; font-size: 11.5px; cursor: pointer; padding: 0 2px; }
html[data-theme="dark"] .crm-pop-rt { color: color-mix(in oklab, var(--rc, #6d28d9) 55%, white); }
@media (max-width: 760px) {
  .crm-rt-box { margin: 0 0 10px; padding: 8px 8px 0; }
  .crm-rt-head { padding: 0 4px 8px; border-bottom: none; }
  .crm-rt-row > *:nth-child(9) { display: flex; grid-column: 1 / -1; grid-row: 7; justify-self: end; }
  .crm-rt-ctl { flex-direction: row; gap: 6px; }
  .crm-rt-btn { width: 34px; height: 30px; }
  .crm-rt-bar { left: 10px; right: 10px; align-items: stretch; }
}
html[data-theme="dark"] .crm-map .leaflet-popup-content-wrapper, html[data-theme="dark"] .crm-map .leaflet-popup-tip { background: var(--card-bg); color: var(--text); box-shadow: 0 3px 14px rgba(0,0,0,0.6); }
html[data-theme="dark"] .crm-map .leaflet-popup-close-button { color: var(--muted); }
html[data-theme="dark"] .crm-pop-id, html[data-theme="dark"] .crm-pop-name { color: var(--muted); }
.cust-map-pin span { display: block; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: oklch(0.6 0.21 25); border: 2px solid #fff; box-shadow: 0 2px 6px oklch(0.2 0.03 260 / 0.4); }
/* z-index: 0 + isolate = ขังชั้นของ Leaflet ไว้ในกล่องตัวเอง (leaflet.css ถูกโหลดทีหลัง styles.css
   และตั้ง .leaflet-pane เป็น z-index 400 — ถ้าไม่ขังไว้ แผนที่จะลอยทับหน้าต่าง/โมดัลที่ z-index 100) */
.ops-map-slot { flex: 1; min-height: 0; position: relative; z-index: 0; isolation: isolate; overflow: hidden; }
.ops-map { width: 100%; height: 100%; z-index: 0; }
@media (max-width: 1200px) { .ops-map-slot { min-height: 420px; } }

/* ป้ายลอยบนแผนที่ (ชี้เมาส์) — กดที่จังหวัดคือเปิดแผงสรุปด้านขวาเลย ไม่มีกล่องให้ปิดเอง */
.leaflet-tooltip.ops-tip { background: var(--card-bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  font-family: 'Noto Sans Thai', Inter, sans-serif; font-size: 12px; font-weight: 400; line-height: 1.75; padding: 8px 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.leaflet-tooltip.ops-tip::before { border-top-color: var(--border); }
.ops-tip-hint { color: var(--primary); font-weight: 600; }

/* ---------- ยอดขายรายตำบล (วงบนแผนที่ + แผงด้านขวา · 2026-10-16) ---------- */
.ar-up { color: oklch(0.55 0.16 150); font-weight: 700; }
.ar-down { color: oklch(0.58 0.21 25); font-weight: 700; }
.brief.brief-wide { width: min(620px, 100vw); }
.ar-sub { font-size: 12.5px; color: var(--text-2); margin: -6px 0 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ar-trend { color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.ar-trend span { color: #fff !important; }
.ar-trend.light { color: var(--text-2); border: 1px solid var(--border); }
.ar-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ar-tile { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; min-width: 0; }
.ar-tile-l { font-size: 11px; color: var(--muted); }
.ar-tile-v { font-size: 18px; font-weight: 800; line-height: 1.35; font-variant-numeric: tabular-nums; }
.ar-tile-v small { font-size: 11px; font-weight: 600; color: var(--muted); }
.ar-tile-s { font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.ar-scroll { overflow-x: auto; }
.ar-tbl { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.ar-tbl th { font-size: 10.5px; font-weight: 700; color: var(--muted); text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; background: var(--card-bg); }
.ar-tbl td { padding: 5px 6px; border-bottom: 1px solid var(--border-row); white-space: nowrap; }
.ar-tbl .n { text-align: right; }
.ar-tbl tr.ar-today td { background: oklch(0.95 0.06 95 / 0.5); }
.ar-tbl tr.ar-click { cursor: pointer; }
.ar-tbl tr.ar-click:hover td { background: var(--row-hover); }
.ar-st { font-size: 10.5px; color: var(--muted); }
.ar-st-stop, .ar-st-risk { color: oklch(0.58 0.21 25); font-weight: 600; }
.ar-st-buy { color: oklch(0.55 0.16 150); font-weight: 600; }
.ar-ch-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ar-pill { background: oklch(0.95 0.13 95); color: oklch(0.42 0.12 80); font-size: 11.5px; }
/* กราฟแท่งในแผง (หน้าตาเดียวกับกราฟแนวโน้มบนแดชบอร์ด) */
.ab { display: flex; align-items: flex-end; height: 126px; }
.ab-c { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; }
.ab-top { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; width: 100%; }
.ab-v { font-size: 10.5px; font-weight: 700; margin-bottom: 3px; white-space: nowrap; }
.ab-b { min-width: 3px; max-width: 46px; border-radius: 4px 4px 0 0; }
.ab-b.today { outline: 2px solid oklch(0.75 0.15 80); outline-offset: 1px; }
.ab-l { font-size: 10px; color: var(--muted); margin-top: 4px; white-space: nowrap; min-height: 13px; }
.ab-s { font-size: 9px; color: var(--muted); opacity: 0.85; white-space: nowrap; }
@media (max-width: 560px) { .ar-grid { grid-template-columns: 1fr; } }

/* ป้ายศูนย์กระจายสินค้าบนแผนที่ — บรรทัดเดียวเสมอ ลอยเหนือจุดพิกัด
   (กล่องไอคอนของ Leaflet ต้องกว้างตามเนื้อหา ไม่งั้นข้อความตัดคำเป็นหลายบรรทัด) */
.ops-br-icon { background: none; border: 0; width: max-content !important; height: auto !important; transform: translate(-50%, calc(-100% - 7px)); }
.ops-br { display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 1px solid oklch(0.55 0.15 255); color: oklch(0.34 0.12 255);
  font-family: 'Noto Sans Thai', Inter, sans-serif; font-size: 11px; font-weight: 600; line-height: 1.35; padding: 3px 9px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22); }
.ops-br-dot { width: 6px; height: 6px; border-radius: 50%; background: oklch(0.55 0.15 255); flex: none; }
.ops-br-nm { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.ops-br-n { font-family: Consolas, "Courier New", monospace; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; opacity: 0.9; }
.ops-br.bad { border-color: oklch(0.6 0.19 25); color: oklch(0.48 0.19 25); }
.ops-br.bad .ops-br-dot { background: oklch(0.6 0.19 25); }

/* แผงเลเยอร์ลอย — มุมซ้ายล่างของแผนที่ */
.ops-layers { position: absolute; left: 10px; bottom: 10px; z-index: 2; width: 196px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 7px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); }
.ops-ly-head { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 2px 4px 6px; }
.ops-ly-row { display: flex; align-items: center; gap: 7px; width: 100%; font: inherit; font-size: 11.5px; text-align: left; padding: 4px 5px; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); cursor: pointer; }
.ops-ly-row:hover { background: var(--row-hover); }
.ops-ly-row.on { color: var(--text); font-weight: 600; }
.ops-ly-box { width: 13px; height: 13px; border-radius: 3px; border: 1px solid var(--btn-border); display: flex; align-items: center; justify-content: center; font-size: 9px; line-height: 1; flex: none; }
.ops-ly-row.on .ops-ly-box { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.ops-ly-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ops-ly-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-ly-n { font-family: Consolas, "Courier New", monospace; font-size: 10.5px; color: var(--muted); }
.ar-grp-h { font-size: 12.5px; font-weight: 800; color: var(--text); margin: 16px 0 8px; padding-top: 12px; border-top: 1px solid var(--border-row); }
@media (max-width: 900px) { .ops-layers { width: 158px; left: 8px; bottom: 8px; font-size: 11px; } }
/* รายการบิลบนการ์ดงานหยิบ (หน้าตาเดียวกับบรรทัดงานส่งใน ePOD) */
.pk-doclist { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.pk-docline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.pk-docline .n { color: var(--muted); min-width: 18px; }
.pk-docline .c { font-weight: 600; }
.pk-docline .s { margin-left: auto; }
.pk-prog { height: 8px; background: var(--border-row); border-radius: 99px; overflow: hidden; }
.pk-prog i { display: block; height: 100%; background: oklch(0.55 0.15 150); }
.wms-table tr.pk-doc-cur td { background: var(--primary-weak); }
.pk-fl { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.pk-fl.sel { border: 2px solid var(--primary); background: var(--primary-weak); padding: 11px 13px; }
.pk-fl.off { opacity: 0.55; cursor: not-allowed; }
.wms-embed { min-width: 0; }
@media (max-width: 900px) {
    .wms-shell.wms-embed .card { padding: 14px; }
}
/* ท้ายรายการพาเลท: "แสดง X จาก Y" + ปุ่มดูเพิ่ม */
.wms-list-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
/* แถวประวัติที่ถูกยกเลิก: ขีดฆ่าทั้งแถว แต่ป้าย "ยกเลิกแล้ว" ต้องอ่านออก */
.wms-undone { text-decoration: none !important; display: inline-block; white-space: nowrap; }
/* งานที่ทำกับพาเลทใบนี้ (โอน / นับ) — ปุ่มใหญ่เต็มความกว้างบนมือถือ */
.wms-jobs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.wms-jobs .btn { flex: 1 1 160px; justify-content: center; font-size: 14.5px; padding: 11px 14px; }
.wms-tabs { display: flex; gap: 6px; margin: 10px 0; flex-wrap: wrap; }
.btn.ghost.sm.on { background: var(--sidebar-active); color: #fff; border-color: transparent; }
.wms-hist-qty.plus { color: oklch(0.45 0.13 150); font-weight: 700; }
.wms-hist-qty.minus { color: oklch(0.5 0.17 25); font-weight: 700; }
/* ใบปะหน้าพาเลท แนวนอน (ตัวอย่างในหน้าต่าง — ฉบับพิมพ์จริงเปิดหน้าต่างใหม่ขนาด 150 × 100 มม.) */
.wms-label-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 360px)); gap: 12px; justify-content: center; }
.wms-label { border: 1px dashed var(--border); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 16px; background: #fff; color: #111; aspect-ratio: 3 / 2; min-width: 0; }
.wms-label-qr { flex: none; }
.wms-label-qr svg { width: 120px; height: 120px; display: block; }
.wms-label-txt { flex: 0 1 auto; min-width: 0; text-align: left; }
/* ตัวอย่างบนจอ = สัดส่วนเดียวกับที่พิมพ์: เลขพาเลทตัวใหญ่ · "PALLET No." ตัวอักษรชิดปกติ */
.wms-label-code { font-family: ui-monospace, Consolas, "Courier New", monospace; font-weight: 800; font-size: 42px; margin: 1px 0 6px; letter-spacing: 0.01em; white-space: nowrap; line-height: 1.05; }
.wms-label-cap { font-size: 11px; letter-spacing: 0.06em; color: #666; }
.wms-label-top, .wms-label-meta { font-size: 11px; color: #555; line-height: 1.35; }
.wms-label-top { margin-bottom: 8px; }
/* ตัวอย่างบนจอ · แบบเล็กคู่ (กระดาษ 150 × 100 มีป้าย 50 × 70 มม. 2 ใบ) — สัดส่วนเดียวกับที่พิมพ์ (~2.4 px ต่อ มม.) */
.wms-sheet { border: 1px dashed var(--border); border-radius: 8px; background: #fff; color: #111; aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; gap: 24px; min-width: 0; }
.wms-mini { width: 120px; height: 168px; box-sizing: border-box; border: 1px dashed #bbb; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.wms-mini-qr svg { width: 101px; height: 101px; display: block; }
.wms-mini-no { font-family: ui-monospace, Consolas, "Courier New", monospace; font-weight: 800; font-size: 14px; margin-top: 7px; white-space: nowrap; }
.wms-mini-big { font-family: ui-monospace, Consolas, "Courier New", monospace; font-weight: 800; font-size: 34px; line-height: 1; white-space: nowrap; }
.wms-fmt { margin: 0 0 12px; }
/* ตัวอย่างบนจอ · แผ่น A3 ส่งร้านป้าย (420 × 297 มม. · ป้าย 50 × 70 มม. 8 × 4 = 32 ดวง)
   ย่อตามความกว้างที่มีจริง: 1 มม. = 100/420 cqw — สูตรขนาดเหมือน wmsA3PrintCss() ใน app.js ทุกตัว */
.wms-a3-wrap { container-type: inline-size; width: 100%; display: grid; gap: 14px; }
.wms-a3 { --mm: 0.2381cqw; position: relative; box-sizing: border-box; width: calc(var(--mm) * 420); height: calc(var(--mm) * 297); padding: calc(var(--mm) * 4) calc(var(--mm) * 10) calc(var(--mm) * 13); background: #fff; color: #111; border: 1px solid var(--border); border-radius: 6px; }
.wms-a3-grid { display: grid; grid-template-columns: repeat(8, calc(var(--mm) * 50)); grid-template-rows: repeat(4, calc(var(--mm) * 70)); border-top: 1px solid #b4b4b4; border-left: 1px solid #b4b4b4; }
.wms-a3 .wms-mini { width: auto; height: auto; border: 0; border-right: 1px solid #b4b4b4; border-bottom: 1px solid #b4b4b4; }
.wms-a3 .wms-mini-qr svg { width: calc(var(--mm) * 42); height: calc(var(--mm) * 42); }
.wms-a3 .wms-mini-no { font-size: calc(var(--mm) * 5.6); margin-top: calc(var(--mm) * 3); }
.wms-a3 .wms-mini-big { font-size: calc(var(--mm) * 15); }
.wms-a3-foot { position: absolute; left: calc(var(--mm) * 10); right: calc(var(--mm) * 10); bottom: calc(var(--mm) * 4.5); display: flex; justify-content: space-between; gap: calc(var(--mm) * 6); font-size: calc(var(--mm) * 3.4); color: #666; }
@media (max-width: 900px) {
  .wms-qty { width: 78px; font-size: 14px; }
  .wms-table { font-size: 12.5px; }
  .wms-table td, .wms-table th { padding: 7px 6px; }
  .wms-scanbar .btn { flex: 1 1 auto; }
}

/* ---------- WMS บนมือถือ (จอ ≤ 900px) — ใช้เป็นหลัก: ตัวหนังสือใหญ่ขึ้น · ตารางกลายเป็นการ์ด · แถบเมนูล่าง ---------- */
@media (max-width: 900px) {
  .wms-shell .content { padding: 12px 12px 24px; font-size: 15px; }
  .wms-shell .card { padding: 14px; }
  .wms-shell .topbar .title { font-size: 18px; }
  .wms-shell .wms-title { font-size: 20px; }
    .wms-shell .wms-kv span { font-size: 12px; }
  .wms-shell .wms-kv b { font-size: 16px; }
  .wms-shell .wms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .wms-shell .wms-tag { font-size: 12.5px; }
  .wms-shell .dim { font-size: 12.5px; }
  .wms-shell .btn { font-size: 15px; padding: 12px 14px; }
  .wms-shell .btn.sm { font-size: 13.5px; padding: 9px 12px; }
  .wms-shell .wms-actions .btn:not(.sm) { flex: 1 1 100%; }
  .wms-shell .wms-scanbar { padding: 12px; }
  .wms-shell .wms-scan-in { font-size: 18px; padding: 13px 12px; flex-basis: 100%; }
  .wms-shell .wms-scanbar .btn { flex: 1 1 40%; }
  .wms-shell .wms-scan-hint { font-size: 12.5px; }
  /* ตาราง -> การ์ด: ซ่อนหัวตาราง แต่ละแถว = กริด 2 คอลัมน์ ป้ายชื่อคอลัมน์เล็ก ๆ เหนือค่า */
  .wms-shell .wms-scroll { overflow: visible; }
  .wms-shell .wms-table, .wms-shell .wms-table tbody, .wms-shell .wms-table tfoot { display: block; width: 100%; }
  .wms-shell .wms-table thead { display: none; }
  .wms-shell .wms-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; padding: 12px 2px; border-bottom: 1px solid var(--border-row); }
  .wms-shell .wms-table tr:last-child { border-bottom: none; }
  .wms-shell .wms-table td { display: block; padding: 0; border: 0; font-size: 15.5px; min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
  .wms-shell .wms-table td.num { text-align: left; }
  .wms-shell .wms-table td[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 2px; font-weight: 500; }
  .wms-shell .wms-table td.full, .wms-shell .wms-table td:last-child:not([data-label]) { grid-column: 1 / -1; }
  .wms-shell .wms-table td:empty { display: none; }
  .wms-shell .wms-table tr.wms-click { border-radius: 8px; }
  .wms-shell .wms-table tr.wms-click:hover td { background: transparent; }
  /* รายการแบบ "1 รายการ = 1 บรรทัด" (ดูสต็อก · จัดการพาเลท): ไม่แตกเป็นการ์ดหลายบรรทัด กวาดตาทีเดียวจบ
     คอลัมน์ที่ไม่จำเป็นบนจอเล็ก = .p-hide (กดเข้าไปในรายการดูได้ครบ) · ช่องที่ยืดได้/ตัดท้าย = .p-grow */
  .wms-shell .wms-table.wms-row1 tr { display: flex; flex-wrap: nowrap; align-items: center; gap: 9px; padding: 11px 2px; }
  /* แถวที่อยู่นอกจอ ข้ามการวาด — รายการพาเลทเป็นหมื่นใบเลื่อนได้ลื่น (เบราว์เซอร์ที่ไม่รู้จักจะข้ามบรรทัดนี้ไปเอง) */
  .wms-shell .wms-table.wms-row1 tbody tr { content-visibility: auto; contain-intrinsic-size: auto 58px; }
  .wms-shell .wms-table.wms-row1 td { display: block; flex: 0 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14.5px; }
  .wms-shell .wms-table.wms-row1 td::before { display: none !important; }
  .wms-shell .wms-table.wms-row1 td.p-grow, .wms-shell .wms-table.wms-row1 td.full { flex: 1 1 auto; min-width: 0; }
  .wms-shell .wms-table.wms-row1 td.p-hide, .wms-shell .wms-table.wms-row1 .p-hide-btn { display: none; }
  .wms-shell .wms-table.wms-row1 td.num { text-align: right; }
  .wms-shell .wms-table.wms-row1 .btn.sm { padding: 7px 9px; font-size: 13px; }
  .wms-shell .wms-table.wms-row1 .wms-tag { font-size: 11.5px; padding: 3px 7px; }
  .wms-shell .wms-qty { width: 100%; max-width: 170px; font-size: 19px; padding: 10px 12px; }
  .wms-shell .wms-code { font-size: 1.02em; }
  .wms-shell .wms-tabs .btn { flex: 1; }
  .wms-shell .sidebar .nav-item { font-size: 15px; }
}

/* WMS แถบขั้นตอน (2026-09-18): ขั้นที่ผ่านแล้วพับเหลือสรุปบรรทัดเดียว · ขั้นที่ทำอยู่เด่น · ขั้นถัดไปจาง */
.wms-stepper { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.wms-stp { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--card-bg); min-width: 0; }
.wms-stp .a { display: flex; gap: 6px; flex: none; margin-left: auto; }
.wms-stp .n { width: 24px; height: 24px; border-radius: 50%; background: oklch(0.55 0.15 255); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: none; }
.wms-stp .n .ci { width: 14px; height: 14px; }
.wms-stp.done .n { background: oklch(0.6 0.15 150); }
.wms-stp.todo { opacity: 0.5; }
.wms-stp.todo .n { background: oklch(0.8 0.01 255); color: var(--text); }
.wms-stp.active { border-color: oklch(0.55 0.15 255); box-shadow: 0 0 0 2px oklch(0.55 0.15 255 / 0.14); }
.wms-stp .t { flex: 1 1 160px; min-width: 0; }
.wms-stp .l { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.wms-stp .s { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; line-height: 1.35; }
.wms-stp.done .l { font-size: 11px; }
.wms-stp .btn.sm { padding: 6px 10px; }
.wms-stp.has-b { flex-wrap: wrap; }
.wms-stp .b { flex-basis: 100%; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-left: 34px; }
.pk-need { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 5px 0; border-top: 1px dashed var(--border); }
.pk-need span { min-width: 0; overflow-wrap: anywhere; }
.pk-need b { flex: none; white-space: nowrap; }
@media (max-width: 900px) {
  .wms-shell .wms-stp { padding: 9px 10px; }
  .wms-shell .wms-stp .s { font-size: 15px; }
  .wms-shell .wms-stp.todo { display: none; }   /* มือถือ: ซ่อนขั้นที่ยังไม่ถึง เหลือแค่ที่ผ่านแล้ว + ที่ทำอยู่ */
}

/* แถบ "โหลดเพิ่ม" ของรายการยาว (จัดการออเดอร์ / CRM) — แสดงทีละหน้าเพื่อให้กดแล้วขึ้นทันที (2026-09-18) */
.ord-more { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 12px 0 4px; }
@media (max-width: 900px) { .ord-more .btn { flex: 1 1 100%; padding: 12px; font-size: 15px; } }

/* แถบซูมกล้องสแกน (2026-09-18) — ใช้ซูมของกล้องจริงถ้ารองรับ ไม่งั้นครอปภาพ · จีบสองนิ้วบนภาพก็ซูมได้ */
.qr-cam { overflow: hidden; touch-action: none; }
.qr-cam video { transform-origin: center center; transition: transform 0.08s linear; }
.qr-zoom { display: flex; align-items: center; gap: 10px; max-width: 340px; margin: 10px auto 0; }
.qr-zoom input[type="range"] { flex: 1; min-width: 0; accent-color: var(--primary); height: 28px; }
.qr-zoom-btn { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--border); background: var(--card-bg); font-size: 22px; font-weight: 700; line-height: 1; color: var(--text); }
.qr-zoom-btn:active { background: var(--row-hover); }
.qr-zoom-x { font-size: 13px; font-weight: 700; width: 42px; text-align: right; font-variant-numeric: tabular-nums; }

/* ================= โปรไฟล์ของฉัน (2026-09-21) — คลาสขึ้นต้น .pf- ทั้งหมด ไม่แตะหน้าอื่น ================= */
.pf-page { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.pf-head { display: flex; align-items: center; gap: 18px; padding: 20px 22px; flex-wrap: wrap; }
.pf-head .pf-ava { box-shadow: 0 2px 10px oklch(0.2 0.05 255 / 0.18); }
.pf-who { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pf-name { font-size: 18px; font-weight: 700; }
.pf-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.pf-card { padding: 20px 22px; }
.pf-card .form-grid { margin-top: 12px; }
.pf-save { display: flex; justify-content: flex-end; margin-top: 16px; }
/* เมนูหมวด: กดแล้วเข้าไปหน้าของหมวดนั้น */
.pf-menu { padding: 6px 8px; }
.pf-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: transparent; border: none; border-radius: 9px; padding: 14px 12px;
  font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.pf-item + .pf-item { border-top: 1px solid var(--border-row); border-radius: 0 0 9px 9px; }
.pf-item:hover { background: var(--row-hover); }
.pf-item b { flex: 1; font-size: 14px; font-weight: 600; min-width: 0; }
.pf-item-ic { display: flex; width: 34px; height: 34px; border-radius: 50%; background: var(--row-hover); color: var(--text-2); align-items: center; justify-content: center; flex: none; }
.pf-item-go { color: var(--muted); font-size: 20px; line-height: 1; flex: none; }
.pf-back { background: transparent; border: none; padding: 0; font: inherit; font-size: 13px; color: var(--primary); cursor: pointer; align-self: flex-start; }
.pf-sec-title { font-size: 16px; font-weight: 700; margin: -6px 0 -2px; }
.pf-lock { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--text-2); font-size: 13.5px; padding: 30px 22px; }
.pf-lock-day { font-weight: 700; color: var(--text); }
/* กรอบ Point รวม (กดเพื่อดูที่มา) */
.pf-point {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 16px 18px; border: 1px solid var(--border); border-left: 4px solid oklch(0.72 0.15 55);
  font: inherit; color: var(--text); text-align: left; cursor: pointer;
}
.pf-point:hover { background: var(--row-hover); }
.pf-point-l { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.pf-point-v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pf-pt-sum { display: flex; align-items: center; gap: 12px; border-left: 4px solid oklch(0.72 0.15 55); }
.pf-src-list { padding: 6px 8px; }
.pf-src { display: flex; align-items: center; gap: 12px; padding: 12px; }
.pf-src b { flex: 1; font-size: 14px; font-weight: 600; }
.pf-src-v { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .pf-head { gap: 14px; }
  .pf-card .form-grid { grid-template-columns: 1fr; }
  .pf-save .btn { width: 100%; }
}

/* ===================== โหมดกลางคืน: พื้นผิวที่ตั้งสีอ่อนไว้ตายตัว =====================
   ป้ายสี (pill / jflag / oflag / wms-tag สี) ไม่แตะ — พื้นอ่อนตัวอักษรเข้ม อ่านได้ดีบนพื้นมืดอยู่แล้ว
   ที่ต้องแก้คือ "พื้นผิวสีเทาอ่อน" ที่ใช้วางตัวหนังสือปกติ (หัวคอลัมน์ / แถบ / แถวไฮไลต์ / กล่องหมายเหตุ)
   ทุกค่าเป็นเทากลาง (ไม่อมน้ำเงิน) ไล่ระดับ #141414 -> #1c1c1c -> #222 -> #2a2a2a ตามโทนจอเฝ้าระวัง */
html[data-theme="dark"] .dispatch-head,
html[data-theme="dark"] .q-colhead,
html[data-theme="dark"] .dsp-table th,
html[data-theme="dark"] .dsp-table tfoot td,
html[data-theme="dark"] .racc.open .racc-head,
html[data-theme="dark"] .pm-head,
html[data-theme="dark"] .t-card.collapsed { background: #1a1a1a; }
html[data-theme="dark"] .q-row:hover,
html[data-theme="dark"] .t-link:hover,
html[data-theme="dark"] .cn-menu-item.danger:hover { background: #202020; }
html[data-theme="dark"] .t-bar,
html[data-theme="dark"] .pk-prog { background: #2a2a2a; }
html[data-theme="dark"] .t-ord.sel,
html[data-theme="dark"] .q-row.sel,
html[data-theme="dark"] .t-card.drop-hot { background: #1f2a3a; }
html[data-theme="dark"] .t-otherday { background: #1b2432; border-color: #2f3d52; color: #bcd0ee; }
html[data-theme="dark"] .t-otherday:hover { background: #22303f; }
html[data-theme="dark"] .q-row.q-blocked { background: #2a1717; }
html[data-theme="dark"] .q-row.q-blocked:hover { background: #331b1b; }
html[data-theme="dark"] .t-x:hover { background: #331b1b; }
html[data-theme="dark"] .dsp-table tbody tr.on { background: #16281d; }
/* กล่องหมายเหตุ/เตือน — พื้นเข้มมีสีอ่อนๆ ตัวอักษรสว่าง */
html[data-theme="dark"] .t-hold-note { background: #2a2116; border-color: #443a24; color: #e6cfa5; }
html[data-theme="dark"] .tmp-note-box,
html[data-theme="dark"] .ord-note { background: #2a2416; border-color: #4a4024; color: #e8d8a6; }
html[data-theme="dark"] .sh-alert.ok { background: #16281d; color: #a8e3bf; }
html[data-theme="dark"] .sh-alert.bad { background: #2a1717; border-color: #4a2626; color: #f0b4b4; }
/* ตารางกะ (พื้นเทาอ่อนหลายระดับ + ใช้ !important ในต้นฉบับ) */
html[data-theme="dark"] .sh-day.wknd { background: #171717 !important; }
html[data-theme="dark"] .sh-day.closed { background: #121212 !important; }
html[data-theme="dark"] .sh-cnt.closed { background: #171717 !important; }
html[data-theme="dark"] .sh-cnt.short { background: #2e1a1a !important; color: #f0b4b4; }
html[data-theme="dark"] .sh-grp td,
html[data-theme="dark"] .sh-grp .sh-name,
html[data-theme="dark"] .sh-min-tbl .sh-min-g td { background: #1a1a1a; }
html[data-theme="dark"] .sh-grp.sh-grp-sub td,
html[data-theme="dark"] .sh-grp.sh-grp-sub .sh-name { background: #1b2432; }
html[data-theme="dark"] .sh-grole.on { background: #1f2a3a; color: #bcd0ee; }
html[data-theme="dark"] .wms-tag.gray { background: #242424; color: #c2c2c2; }
html[data-theme="dark"] .pill.void { background: #262626; color: #cfcfcf; }
html[data-theme="dark"] .select.sm.t-driver-sel.ovr { background-color: #2a2416; border-color: #5a4c28; }
/* หมุดสาขาบนแผนที่ (พื้นขาว) ให้เข้ากับแผนที่โทนมืด */
html[data-theme="dark"] .ops-br { background: #141414; border-color: oklch(0.58 0.14 255); color: #cfe0f7; }
html[data-theme="dark"] .ops-br .ops-br-dot { background: oklch(0.66 0.14 255); }
html[data-theme="dark"] .ops-br.bad { border-color: oklch(0.65 0.18 25); color: #f5c2c2; }
html[data-theme="dark"] .ops-br.bad .ops-br-dot { background: oklch(0.68 0.18 25); }
/* เงาการ์ด/หน้าต่างบนพื้นดำ: เข้มจัดให้เห็นระยะ */
html[data-theme="dark"] .modal { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.72); }
html[data-theme="dark"] .notif-panel, html[data-theme="dark"] .dp-pop { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.66); }
html[data-theme="dark"] .modal-overlay, html[data-theme="dark"] .brief-scrim { background: rgba(0, 0, 0, 0.66); }
html[data-theme="dark"] .brief { box-shadow: -18px 0 44px rgba(0, 0, 0, 0.6); }
html[data-theme="dark"] .ops-layers { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55); }
/* หน้าต่าง/แถบค้นหา/กล่องกรองที่ตั้งพื้นอ่อนไว้ */
html[data-theme="dark"] .ord-bar { color: var(--text); }

/* ================= VRP บนมือถือ (2026-10-03) =================
   คอม: เหมือนเดิมทุกอย่าง (ลาก/ลากคลุม) — ซ่อนแท็บ/ปุ่มเลื่อนลำดับ/คำแนะนำมือถือ
   มือถือ (เกณฑ์เดียวกับ PHONE_MQ): แท็บ คิว | รถ · แตะเพื่อเลือก → "ย้ายไปรถ…" · ▲▼ จัดลำดับ */
.vrp-mtabs, .t-mv, .vrp-mob-hint, .vrp-mob-only { display: none; }
.vmv-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.vmv-branch { font-size: 11.5px; font-weight: 700; color: var(--muted); margin-top: 4px; }
.vmv-truck { border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; }
.vmv-tname { font-weight: 700; font-size: 13.5px; margin-bottom: 7px; }
.vmv-tname .dim { font-weight: 400; font-size: 12px; }
.vmv-rounds { display: flex; flex-wrap: wrap; gap: 6px; }
.vmv-round { flex: 1 1 120px; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 11px; border-radius: 9px; border: 1px solid oklch(0.80 0.08 255); background: oklch(0.97 0.02 255); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.vmv-round span { font-size: 11.5px; color: var(--muted); }
.vmv-round:hover:not(:disabled) { border-color: var(--primary); background: oklch(0.94 0.04 255); }
.vmv-round.new { border-style: dashed; background: transparent; }
.vmv-round.over span { color: oklch(0.55 0.19 25); font-weight: 600; }
.vmv-round:disabled { opacity: 0.5; cursor: not-allowed; }
html[data-theme="dark"] .vmv-round { background: #1b2432; border-color: #2f3d52; }
html[data-theme="dark"] .vmv-round:hover:not(:disabled) { background: #22303f; }
html[data-theme="dark"] .vmv-round.new { background: transparent; }
/* การ์ดรถยกใน VRP: ดูวันล่วงหน้า = จ่ายงานไม่ได้ (สีแดง · 2026-11-11) */
.fl-future { display: flex; align-items: center; gap: 6px; padding: 7px 10px; margin: 4px 0; border-radius: 8px; font-size: 12px; font-weight: 700; background: var(--danger-weak); color: var(--danger); }
/* จอสัมผัส: ปุ่ม "สั่งหยิบรอบนี้" ใต้แถบขั้นตอน + หน้าต่างเลือกรถยก (2026-11-11 — แทนการลากรอบไปรถยก) */
.pk-mob-btn { width: 100%; justify-content: center; margin-top: 8px; padding: 10px; border-style: dashed; color: var(--primary); border-color: var(--primary); }
.pkfl-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.pkfl-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.pkfl-row:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-weak); }
.pkfl-row:disabled { opacity: 0.55; cursor: not-allowed; }
.pkfl-ic { flex: none; font-size: 18px; }
.pkfl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pkfl-main b { font-size: 15px; }
.pkfl-main .dim { font-size: 12px; }
.pkfl-st { flex: none; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: oklch(0.95 0.05 150); color: oklch(0.4 0.1 150); }
.pkfl-st.busy { background: oklch(0.95 0.06 80); color: oklch(0.4 0.1 70); max-width: 50%; white-space: normal; text-align: right; }

@media (max-width: 900px), (pointer: coarse) and (max-height: 520px) {
  .vrp-mob-hint { display: block; }
  .vrp-mob-only { display: inline-flex; }
  .vrp-desk-hint { display: none; }
  /* แถบบน: วันที่ + ปุ่มจัดอัตโนมัติ เต็มบรรทัด */
  .vrp-top .vrp-date { margin-left: 0 !important; flex: 1 1 100%; }
  .vrp-top .vrp-date .input { flex: 1; min-width: 0; }
  /* แท็บ คิว | รถ — ติดบนสุดตอนเลื่อน */
  .vrp-mtabs { display: flex; gap: 6px; position: sticky; top: 0; z-index: 5; padding: 6px 0; margin-bottom: 8px; background: var(--app-bg); }
  .vrp-mtab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--card-bg); color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
  .vrp-mtab b { background: var(--row-hover); color: var(--text); border-radius: 999px; padding: 0 8px; font-size: 12px; }
  .vrp-mtab.on { border-color: var(--primary); background: var(--primary); color: #fff; }
  .vrp-mtab.on b { background: rgba(255,255,255,0.25); color: #fff; }
  .dispatch-cols.vrp3 { grid-template-columns: 1fr; height: auto !important; }   /* มือถือ: แท็บ คิว | รถ | รถยก ทีละคอลัมน์ (ไม่ยืดเต็มจอ) */
  .dispatch-cols .dispatch-head.vrp-qhead { display: flex; }   /* dropdown เลือกคิวต้องเห็นบนมือถือด้วย */
  .dispatch-cols.mt-queue > :not(:nth-child(1)), .dispatch-cols.mt-trucks > :not(:nth-child(2)), .dispatch-cols.mt-fl > :not(:nth-child(3)) { display: none; }
  .dispatch-cols .dispatch-head { display: none; }
  /* แถวกดง่าย (แตะ = เลือก) */
  .q-row { padding: 12px; grid-template-columns: 16px 1fr auto; }
  .q-colhead { grid-template-columns: 16px 1fr auto; padding: 7px 12px; }
  .q-row:hover { background: transparent; }
  .q-row.sel, .q-row.sel:hover { background: oklch(0.93 0.06 255); }
  .q-areafilter .vrpq-sel { max-width: none; }
  .t-list { padding: 8px; }
  .t-card { padding: 10px 11px; }
  .t-ord { padding: 6px 2px; font-size: 12.5px; }
  .t-x { padding: 8px 9px; font-size: 14px; }
  .t-link { padding: 8px 7px; }
  .t-link-txt { display: none; }
  .t-mv { display: inline-flex; flex-direction: column; gap: 2px; flex: none; }
  .t-mvbtn { width: 34px; height: 24px; border: 1px solid var(--border); border-radius: 6px; background: var(--card-bg); color: var(--primary); font-size: 11px; line-height: 1; padding: 0; cursor: pointer; }
  .t-mvbtn:disabled { opacity: 0.3; }
  .t-steps { flex-wrap: wrap; }
  .t-step { flex: 1 1 calc(50% - 6px); }
  .t-stepbtn { padding: 9px 6px; font-size: 12px; }
  .tmap { height: 260px; }
  /* แถบเลือก: ปุ่มเต็มความกว้าง */
  .vrpsel-bar { bottom: 8px; padding: 10px 12px; }
  .vrpsel-acts { width: 100%; flex-wrap: wrap; }
  .vrpsel-acts .btn { flex: 1 1 auto; justify-content: center; padding: 10px; }
  .vmv-list { max-height: none; }
  .vmv-round { padding: 11px 12px; }
}

/* ใบวางบิล: เลือกลูกค้าที่จะลงเอกสารจากคอลัมน์ลูกค้า (2026-10-05) */
/*   ดูเหมือนชื่อร้านธรรมดา (ไม่มีกรอบ) + ลูกศรเล็ก — โผล่กรอบตอนชี้/โฟกัส */
.select.sm.ord-billcust { width: auto; max-width: 100%; min-width: 0; margin-left: -6px; padding: 1px 18px 1px 6px; font: inherit; line-height: 1.7; height: auto; cursor: pointer;
  color: var(--text); background-color: transparent; border-color: transparent; box-shadow: none; background-position: right 4px center; background-size: 10px; text-overflow: ellipsis; }
.select.sm.ord-billcust:hover, .select.sm.ord-billcust:focus { border-color: var(--border); background-color: var(--card-bg); }

/* ================= แท็กกลุ่มลูกค้า (CRM · migrate-134 · 2026-10-05) =================
   สีกำหนดด้วย hue (--h) — ชื่อสีต้องตรงกับ CTAG_COLORS ใน app.js และ TAG_COLORS ใน functions/_lib/tags.js */
.ctag { --h: 250; --k: 1; display: inline-flex; align-items: center; gap: 3px; margin-left: 5px; padding: 1px 8px; border-radius: 999px; vertical-align: middle;
  font-size: 10.5px; font-weight: 700; line-height: 1.6; white-space: nowrap; font-family: inherit;
  background: oklch(0.94 calc(0.05 * var(--k)) var(--h)); color: oklch(0.42 calc(0.14 * var(--k)) var(--h)); border: 1px solid oklch(0.85 calc(0.08 * var(--k)) var(--h)); }
.c-red { --h: 25; } .c-orange { --h: 50; } .c-amber { --h: 85; } .c-green { --h: 150; } .c-teal { --h: 190; }
.c-blue { --h: 250; } .c-indigo { --h: 280; } .c-purple { --h: 310; } .c-pink { --h: 350; } .c-gray { --h: 260; --k: 0.15; }
html[data-theme="dark"] .ctag { background: oklch(0.30 calc(0.06 * var(--k)) var(--h)); color: oklch(0.88 calc(0.09 * var(--k)) var(--h)); border-color: oklch(0.42 calc(0.08 * var(--k)) var(--h)); }
.ctag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 7px; }
.ctag-row .ctag { margin-left: 0; font-size: 11.5px; padding: 2px 10px; }
.ctag-row .ctag-add { padding: 3px 10px; font-size: 12px; }
/* หน้าต่างแท็ก */
.ctag-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.ctag-btn { margin: 0; cursor: pointer; font-size: 12px; padding: 4px 11px; opacity: 0.55; }
.ctag-btn.on { opacity: 1; box-shadow: 0 0 0 2px oklch(0.62 calc(0.14 * var(--k)) var(--h)) inset; }
.ctag-btn:hover { opacity: 1; }
.ctag-list { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.ctag-li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; }
.ctag-li .ctag { margin-left: 0; font-size: 12px; }
.ctag-li.editing { border-color: var(--primary); }
.ctag-form { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.ctag-sws { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 9px; }
.ctag-sw { width: 24px; height: 24px; border-radius: 50%; padding: 0; cursor: pointer; border: 2px solid var(--card-bg);
  background: oklch(0.68 calc(0.15 * var(--k, 1)) var(--h, 250)); box-shadow: 0 0 0 1px var(--border); }
.ctag-sw.on { box-shadow: 0 0 0 2px var(--text); }
.ctag-preview { margin-left: auto; }

/* รายงานกลุ่มลูกค้า: หัวกลุ่ม (สาขา · แท็ก · จำนวน) คั่นระหว่างแถว */
.rep-cg-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 8px 6px; margin-top: 6px; border-bottom: 1.5px solid var(--text); font-size: 13px; }
.rep-cg-head .ctag { margin-left: 0; font-size: 11.5px; }

/* ใบเสนอราคา: คอลัมน์หมายเหตุติดขวาของตาราง (เลื่อนดูขนาดอื่นแล้วยังเห็น) — ไม่ลง PDF */
.qnote-cell { position: sticky; right: 0; z-index: 1; padding: 6px 8px; min-width: 180px; background: var(--card-bg); box-shadow: -1px 0 0 var(--border-row); }
.qnote-cell.on { background-image: linear-gradient(oklch(0.62 0.16 255 / 0.06), oklch(0.62 0.16 255 / 0.06)); }
.input.qnote-in { padding: 4px 8px; font-size: 12px; height: auto; width: 100%; min-width: 160px; }

/* ---- ตั้งค่าราคา: ตัวกรองแถวเดียว (สาขา / ระดับราคา / ขนาด) — ปุ่มสรุป + แผงชิปใต้ปุ่ม ---- */
.pflt-bar { justify-content: space-between; }
.pflt-group { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pflt { position: relative; }
.pflt-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 5px 10px 5px 12px; border: 1px solid var(--btn-border); border-radius: 8px; background: var(--card-bg); color: var(--text); font-family: inherit; font-size: 12.5px; cursor: pointer; }
.pflt-btn:hover { background: var(--row-hover); }
.pflt.open .pflt-btn { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-weak); }
.pflt-lbl { color: var(--muted); }
.pflt-val { font-weight: 700; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pflt-car { color: var(--muted); font-size: 9px; }
.pflt-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: max-content; min-width: 220px; max-width: min(560px, 92vw); background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 28px oklch(0.2 0.03 260 / 0.18); padding: 10px 12px; }
.pflt-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pflt-sep { height: 1px; background: var(--border); margin: 9px 0; }
.pflt-note { font-size: 11px; color: var(--muted); margin-top: 8px; }

/* ---- ตั้งค่าราคา 3 แท็บ (2026-10-07): แถบเครื่องมือติดด้านบน · แท็บอนุมัติ · เปรียบเทียบสาขา · ตั้งค่า ---- */
.price-toolbar { position: sticky; top: -28px; z-index: 45; background: var(--app-bg); margin: 0 -28px 12px; padding: 4px 28px 10px; }
.pe-acts { align-items: center; gap: 8px; padding-left: 12px; border-left: 1px solid var(--border); }
.prq-badge { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px; border-radius: 99px; background: oklch(0.62 0.15 70); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.ord-tab.on .prq-badge { background: #fff; color: oklch(0.5 0.14 70); }
.prq-st { display: inline-block; font-size: 11.5px; padding: 3px 9px; border-radius: 6px; white-space: nowrap; font-weight: 600; }
.prq-st.ok { background: oklch(0.62 0.16 145 / 0.14); color: oklch(0.42 0.13 150); }
.prq-st.wt { background: oklch(0.75 0.14 75 / 0.18); color: oklch(0.48 0.13 65); }
.prq-st.no { background: var(--danger-weak); color: var(--danger); }
.cmp-note { font-size: 12.5px; background: var(--primary-weak); border: 1px solid oklch(0.85 0.06 255); color: var(--text-2); border-radius: 8px; padding: 7px 12px; margin-bottom: 10px; }
.cmp-l { display: flex; justify-content: space-between; gap: 6px; line-height: 1.55; font-size: 12.5px; white-space: nowrap; }
.cmp-b { font-size: 10.5px; color: var(--muted); font-weight: 500; }
.cmp-l small { font-size: 10px; font-weight: 600; }
.cmp-tag { display: inline-block; margin-top: 3px; font-size: 10.5px; font-weight: 600; color: oklch(0.48 0.13 65); background: oklch(0.75 0.14 75 / 0.18); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.pset-it { padding: 9px 12px; border-radius: 8px; font-size: 13.5px; cursor: pointer; color: var(--text-2); }
.pset-it:hover { background: var(--row-hover); }
.pset-it.on { background: var(--primary-weak); color: var(--primary); font-weight: 600; }

/* ---------- รายการอัพเดตระบบ (2026-10-30 · เฉพาะ Admin บนคอม) ---------- */
.rel-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rel-stat { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; min-width: 0; }
.rel-stat-v { font-size: 22px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.rel-grid { display: grid; grid-template-columns: 96px 140px minmax(220px, 1fr) 190px 150px 200px; gap: 14px; padding: 12px 16px; align-items: start; }
.rel-head { font-size: 11.5px; color: var(--muted); border-bottom: 1px solid var(--border); }
.rel-row { border-bottom: 1px solid var(--border-row); font-size: 13px; }
.rel-row:last-child { border-bottom: 0; }
.rel-row > * { min-width: 0; }
.rel-row.is-live { background: oklch(0.6 0.12 145 / 0.06); }
.rel-ver { font-weight: 700; font-variant-numeric: tabular-nums; }
.rel-notes { margin: 0; padding-left: 18px; line-height: 1.6; }
.rel-acts { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.rel-acts .btn { white-space: nowrap; }
@media (max-width: 1100px) { .users-wrap:has(.rel-grid) { overflow-x: auto; } .rel-grid { min-width: 960px; } }

/* ---------- หน้าต่างดูรูป (2026-10-30) — แทนการเปิดรูปเป็นหน้าใหม่ (แอปบนหน้าจอโฮม iPhone ย้อนกลับไม่ได้) ---------- */
.lb { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: rgba(0, 0, 0, 0.94); color: #fff; touch-action: none; user-select: none; -webkit-user-select: none; }
.lb-top { display: flex; align-items: center; gap: 12px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 10px 16px; }
.lb-cap { flex: 1; min-width: 0; font-size: 13px; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-n { font-size: 13px; opacity: 0.7; white-space: nowrap; }
.lb-x, .lb-open { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.14); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.lb-x:hover, .lb-open:hover { background: rgba(255, 255, 255, 0.24); }
.lb-stage { flex: 1; min-height: 0; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding-bottom: env(safe-area-inset-bottom, 0px); }
.lb-img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center; will-change: transform; -webkit-touch-callout: default; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 32px; line-height: 1; cursor: pointer; padding: 0; }
.lb-nav:hover { background: rgba(255, 255, 255, 0.22); }
.lb-prev { left: 10px; }
.lb-next { right: 10px; }
@media (max-width: 900px) { .lb-nav { width: 36px; height: 52px; font-size: 26px; background: rgba(255, 255, 255, 0.08); } }
/* หน้า Picking List: ไม่มีงาน / สลับงาน (2026-11-11) */
.pk-empty { text-align: center; padding: 36px 20px; }
.pk-empty > svg { width: 34px; height: 34px; color: var(--muted); }
.pk-empty-t { font-size: 17px; font-weight: 800; margin: 8px 0 4px; }
.pk-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.pk-sw { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pk-sw span { color: var(--muted); font-weight: 500; font-size: 11.5px; }
.pk-sw.on { border-color: var(--primary); background: var(--primary-weak); color: var(--primary); }
/* งานหยิบรอจ่ายงาน (2026-11-11) */
.pk-draft-badge { background: oklch(0.93 0.08 80) !important; color: oklch(0.42 0.12 70) !important; }
html[data-theme="dark"] .pk-draft-badge { background: oklch(0.32 0.07 75) !important; color: oklch(0.88 0.1 80) !important; }
.pk-scan-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.pk-scan-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; margin-right: auto; }
.pk-scan-title svg { width: 16px; height: 16px; }
.pk-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; justify-content: flex-end; }
.pk-acts .btn { min-height: 32px; width: auto; }
/* รอบรถที่ลากไปรถยกแล้ว = ล็อกแก้เส้นทาง (2026-11-11) */
.t-pk-lock-note { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: oklch(0.95 0.05 80); color: oklch(0.42 0.12 70); font-size: 12px; font-weight: 600; line-height: 1.45; }
.t-pk-lock-note svg { flex: none; width: 14px; height: 14px; margin-top: 2px; }
html[data-theme="dark"] .t-pk-lock-note { background: oklch(0.3 0.05 75); color: oklch(0.88 0.1 80); }
.t-lock-badge.pk-lock { background: oklch(0.93 0.08 80); color: oklch(0.42 0.12 70); }
html[data-theme="dark"] .t-lock-badge.pk-lock { background: oklch(0.32 0.07 75); color: oklch(0.88 0.1 80); }