@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
  --ink: #16202a;
  --ink-soft: #3a4552;
  --muted: #6b7280;
  --line: #e2e5e9;
  --bg: #f2f3f5;
  --panel: #ffffff;
  --amber: #f2a900;
  --amber-dark: #c8890a;
  --ok: #1a8a5f;
  --danger: #c73b3b;
  /* ---------- สีหลักของแบรนด์ (ปุ่มหลัก, แถบเมนู, แถบบน, badge, toast) ----------
     ใช้เฉพาะพื้นผิว UI ที่เดิมเป็นสีดำ/กรมท่าล้วนเท่านั้น — ไม่ใช้แทน --ink ที่เป็น
     สีตัวหนังสือทั่วเว็บ กันไม่ให้ตัวหนังสือทั้งเว็บกลายเป็นสีเขียวไปด้วยตอน
     เปลี่ยนธีม (ดูคอมเมนต์ที่จุดใช้งานแต่ละจุดประกอบ)

     ค่าที่ตั้งไว้ตรงนี้เป็นแค่ "ค่าตั้งต้นสำรอง" เผื่อกรณีฉุกเฉิน — ค่าจริงที่ใช้
     งานจริงมาจากหน้า Settings > ธีมสี (แก้ได้เองไม่ต้องแก้โค้ด/restart) แต่ละหน้า
     จะมี <style>:root{--brand-dark:...}</style> ฉีดทับค่านี้อีกที (ดู
     app.py _theme_color()/_theme_color_hover() + จุด include ในแต่ละ template) */
  --brand-dark: #1f5c3c;
  --brand-dark-hover: #18472e;
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14.5px;
}

/* ---------- Topbar ---------- */
.topbar {
  background: var(--brand-dark);
  color: #fff;
  border-bottom: 3px solid var(--amber);
}

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--brand-dark);
  color: #fff;
  display: flex;
  flex-direction: column;
  border-right: 3px solid var(--amber);
  transition: width 0.18s ease;
  overflow: hidden;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.brand-text { min-width: 0; }

.sidebar-collapse-btn {
  margin-left: auto;
  background: transparent;
  border: none;
  color: #cbd3db;
  padding: 4px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}
.sidebar-collapse-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }

.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 12px 8px;
  gap: 2px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: #cbd3db;
  text-decoration: none;
  white-space: nowrap;
}

.sidebar-link i {
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-link:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.sidebar-link.active {
  background: var(--amber);
  color: var(--ink);
}

/* ---------- Sidebar: แบดจ์ตัวเลข (ใช้กับ "ใบสั่งซื้อ" โชว์จำนวนของในตะกร้า) ---------- */
.sidebar-badge {
  margin-left: auto;
  background: var(--amber);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}
.sidebar-link.active .sidebar-badge {
  background: var(--brand-dark);
  color: #fff;
}

/* ---------- Sidebar: กลุ่มเมนู "Master" (พับ/กางได้ เหมือนกล่องเวลาข้อมูลล่าสุด) ---------- */
.sidebar-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: #cbd3db;
  background: transparent;
  border: none;
  text-align: left;
}
.sidebar-group-toggle i:first-child { width: 18px; text-align: center; flex-shrink: 0; }
.sidebar-group-toggle:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sidebar-group-toggle .sidebar-group-chevron {
  margin-left: auto;
  font-size: 10px;
  transition: transform 0.15s ease;
}
.sidebar-group-toggle.expanded .sidebar-group-chevron { transform: rotate(180deg); }

.sidebar-submenu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 14px;
}
.sidebar-submenu .sidebar-link { font-size: 13px; }

/* ---------- Sidebar ย่อ (เก็บแค่ไอคอน) ---------- */
.app-shell.sidebar-collapsed .sidebar { width: 60px; }
.app-shell.sidebar-collapsed .sidebar-link-text,
.app-shell.sidebar-collapsed .brand-text { display: none; }
.app-shell.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 18px 8px; }
.app-shell.sidebar-collapsed .sidebar-collapse-btn { margin-left: 0; }
.app-shell.sidebar-collapsed .sidebar-link { justify-content: center; padding: 10px 6px; }
.app-shell.sidebar-collapsed .sidebar-badge { display: none; }
.app-shell.sidebar-collapsed .sidebar-group-toggle .sidebar-link-text,
.app-shell.sidebar-collapsed .sidebar-group-toggle .sidebar-group-chevron,
.app-shell.sidebar-collapsed .sidebar-submenu { display: none; }
.app-shell.sidebar-collapsed .sidebar-group-toggle { justify-content: center; }

.app-content {
  flex: 1;
  min-width: 0;
  background: var(--bg);
}

.content-topbar {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.content-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.time-slot-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.time-slot-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.time-slot-row input[type="time"] {
  width: 140px;
}

/* ---------- แถบ "Sync ข้อมูลด่วน (รายตัว)" หน้า Settings ---------- */
.sync-jobs-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sync-job-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.sync-job-row:last-child { border-bottom: none; }

.sync-job-label {
  flex: 1 1 200px;
  font-weight: 500;
}

.sync-job-interval {
  font-weight: 400;
  font-size: 12px;
  color: var(--muted);
  margin-left: 4px;
}

.sync-job-status {
  white-space: nowrap;
}

.sync-job-btn {
  white-space: nowrap;
}

@media (max-width: 480px) {
  .sync-job-row { padding: 8px 2px; }
  .sync-job-status { flex: 1 1 100%; order: 3; }
}

/* ---------- Account section (ชื่อผู้ใช้งาน + ออกจากระบบ) ---------- */
.sidebar-account {
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 10px 8px;
}

.sidebar-account-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 13px;
  color: #cbd3db;
  font-weight: 600;
}

.sidebar-logout-form { margin: 0; }

.sidebar-logout-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: #cbd3db;
  background: transparent;
  border: none;
  text-align: left;
}
.sidebar-logout-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* ปุ่มเปิด/ปิดการแชร์พิกัด GPS ของตัวเอง (Live Activity) — เห็นเฉพาะ user ที่
   มีสิทธิ์ live_activity.location_optout (ดู templates/_nav.html) หน้าตาเหมือน
   .sidebar-logout-btn ทุกประการ (ปุ่มแถวเดียวกันใน sidebar-account) ต่างกันแค่
   สี icon ตอน "เปิดแชร์" (เขียว) กับ "ปิดแชร์" (เทา) — ดู
   static/js/live_activity_heartbeat.js */
.sidebar-location-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: #cbd3db;
  background: transparent;
  border: none;
  text-align: left;
}
.sidebar-location-toggle:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sidebar-location-toggle.is-sharing i { color: #52d68a; }
.sidebar-location-toggle.is-off i { color: #8a94a3; }

.app-shell.sidebar-collapsed .sidebar-account-info .sidebar-link-text,
.app-shell.sidebar-collapsed .sidebar-logout-btn .sidebar-link-text,
.app-shell.sidebar-collapsed .sidebar-location-toggle .sidebar-link-text { display: none; }
.app-shell.sidebar-collapsed .sidebar-account-info,
.app-shell.sidebar-collapsed .sidebar-logout-btn,
.app-shell.sidebar-collapsed .sidebar-location-toggle { justify-content: center; }

/* ---------- มือถือ: hamburger + off-canvas sidebar ---------- */
.mobile-menu-toggle {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 99999 !important; /* ดันสูงสุดเป็นพิเศษ กัน element อื่นในหน้ามาบัง/ทับปุ่มนี้โดยไม่ตั้งใจ */
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--brand-dark);
  color: #fff;
  border: none;
  font-size: 20px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  pointer-events: auto !important;
  touch-action: manipulation; /* กันดีเลย์ 300ms ของบางเบราว์เซอร์มือถือ + กันท่าทาง zoom/scroll แย่งการแตะ */
}

.sidebar-close-btn {
  display: none;
  background: transparent;
  border: none;
  color: #cbd3db;
  padding: 4px 8px;
  border-radius: 6px;
  margin-left: 8px;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 99990 !important;
}

@media (max-width: 768px) {
  .app-shell {
    flex-direction: row; /* ไม่ stack แนวตั้งอีกต่อไป — sidebar เป็น off-canvas ทับหน้าจอแทน */
  }

  .mobile-menu-toggle {
    display: flex !important;
  }

  .sidebar-close-btn {
    display: inline-flex;
  }

  .sidebar-collapse-btn {
    display: none; /* ปุ่มย่อ/ขยายแบบ desktop ไม่จำเป็นบนมือถือ ใช้ hamburger แทน */
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    max-width: 82vw;
    z-index: 99995 !important;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,0.3);
    /* แก้บั๊กที่เจอจริง: sidebar สืบทอด overflow:hidden มาจากกฎ desktop ด้านบน
       (ตั้งไว้กันข้อความล้นตอน animation ย่อ/ขยายเมนู) พอเมนูทั้งหมด (รวมกลุ่ม
       ที่กางไว้ + ส่วนบัญชีผู้ใช้ด้านล่างสุด) สูงเกินจอมือถือ ส่วนที่เกินจะโดน
       ตัดทิ้งเงียบๆ กดไม่ถึง — เปิดให้เลื่อนแนวตั้งได้เฉพาะโหมดมือถือ ไม่กระทบ
       Desktop เลย */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .app-shell.mobile-sidebar-open .sidebar {
    transform: translateX(0) !important;
  }

  .app-shell.mobile-sidebar-open .sidebar-overlay {
    display: block !important;
  }

  /* บนมือถือให้ label ตัวอักษรโชว์เต็มเสมอ (ไม่ใช้โหมดย่อไอคอนอย่างเดียวแบบ
     desktop) เพราะ sidebar ทับเต็มจออยู่แล้ว มีพื้นที่พอ */
  .app-shell.sidebar-collapsed .sidebar-link-text,
  .app-shell.sidebar-collapsed .brand-text,
  .app-shell.sidebar-collapsed .sidebar-account-info .sidebar-link-text,
  .app-shell.sidebar-collapsed .sidebar-logout-btn .sidebar-link-text {
    display: inline;
  }
  .app-shell.sidebar-collapsed .sidebar { width: 260px; }

  /* แก้บั๊กที่เจอจริง (2026-09): ถ้าเคยกด "ย่อเมนู" ไว้ตอนใช้งานบนจอ desktop
     ค่านี้จะถูกจำไว้ (localStorage) แล้วติดมาด้วยตอนเปิดบนมือถือ (ดู
     static/js/layout.js) — กฎ 4 บรรทัดด้านบนแก้ให้ label ของลิงก์เมนูปกติ/
     บัญชีผู้ใช้/ปุ่มออกจากระบบ โชว์กลับมาแล้ว แต่ "ปุ่มหัวข้อกลุ่มเมนู" (EXP,
     คลังสินค้า, รายงานขาย, ฯลฯ — .sidebar-group-toggle) มีกฎเฉพาะฝั่ง desktop
     (บรรทัด ~174 ด้านบน) ที่ specificity สูงกว่ากฎ 4 บรรทัดนั้น เลยชนะอยู่
     ตลอด ทำให้เหลือแต่ไอคอนไม่มีตัวอักษร/ลูกศร — ต้องเขียน selector ให้ตรงกับ
     ตัวที่ specificity เท่ากัน (4 คลาส) แล้วให้ชนะด้วยลำดับ media query ที่มา
     ทีหลังแทน */
  .app-shell.sidebar-collapsed .sidebar-group-toggle .sidebar-link-text,
  .app-shell.sidebar-collapsed .sidebar-group-toggle .sidebar-group-chevron {
    display: inline-block;
  }
  .app-shell.sidebar-collapsed .sidebar-group-toggle {
    justify-content: flex-start;
  }
  /* กลุ่มเมนูที่ "กางอยู่" (เพราะเป็นหน้าที่ใช้งานอยู่ตอนนี้) ก็ควรเห็น
     รายการย่อยด้วยเช่นกัน — ไม่ใช้ !important เพราะปุ่มกด expand/collapse
     ของ JS (layout.js) ตั้งค่า inline style ตรงๆ อยู่แล้วซึ่ง specificity
     สูงกว่ากฎ class เสมอ ไม่ชนกัน */
  .app-shell.sidebar-collapsed .sidebar-submenu {
    display: flex;
  }
  /* จุดที่ตกหล่นไปรอบที่แล้ว: กฎฝั่ง desktop ที่สั่งให้ "ลิงก์เมนูธรรมดา" (ไม่ใช่
     ปุ่มหัวข้อกลุ่มเมนู) จัดกึ่งกลางแถว+ลดระยะขอบตอนย่อเมนู
     (.app-shell.sidebar-collapsed .sidebar-link — บรรทัด ~172 ด้านบน) ยังไม่มี
     ใครสั่งคืนค่าให้โหมดมือถือ เลยทำให้ลิงก์ธรรมดา (Dashboard, POS, ค้นหา
     Stock, Stock Alert ฯลฯ) เห็นเป็นแถวจัดกึ่งกลางคล้ายปุ่ม ในขณะที่ปุ่มหัวข้อ
     กลุ่มเมนูที่แก้ไปแล้วชิดซ้ายปกติ — คืนค่าให้เหมือนปกติ (flex-start +
     padding เดิม) เฉพาะโหมดมือถือ */
  .app-shell.sidebar-collapsed .sidebar-link {
    justify-content: flex-start;
    padding: 10px 12px;
  }

  .sidebar-nav {
    flex-direction: column;
    padding: 12px 8px;
  }

  .sidebar-brand {
    padding: 16px;
  }

  .app-content {
    width: 100%;
    padding-top: 56px; /* กันเนื้อหาโดนปุ่ม hamburger ทับ */
  }

  .content-topbar {
    padding: 12px 16px 12px 60px; /* เผื่อพื้นที่ปุ่ม hamburger ที่ลอยอยู่มุมซ้ายบน */
  }
}

.brand-mark {
  width: 34px; height: 34px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  /* พื้นขาว + padding บางๆ ให้โลโก้จริง (ไฟล์พื้นขาว ไม่โปร่งใส) ดูเป็น
     "สติกเกอร์" วางบนแถบเมนูสีเขียว แทนที่จะเห็นเป็นกรอบขาวทึบแข็งๆ */
  background: #fff;
  color: var(--ink);
  border-radius: 6px;
  padding: 3px;
  font-size: 15px;
}

.brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-title {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.2px;
  line-height: 1.1;
}

.brand-sub {
  font-size: 11px;
  color: #9aa5b1;
  letter-spacing: 0.3px;
}

.conn-status {
  font-size: 12px;
  color: #cbd3db;
  display: flex; align-items: center; gap: 6px;
}

.dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
}
.dot-pending { background: #9aa5b1; }
.dot-ok { background: #33c481; }
.dot-fail { background: #e2534d; }

/* ---------- Panels ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
}

.field-label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-soft);
  margin-bottom: 6px;
  display: block;
}

.field-hint {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 4px;
}

/* ---------- Settings: ธีมสี ---------- */
.theme-color-swatch {
  width: 48px;
  height: 38px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  background: none;
}

.select-multi {
  font-size: 13.5px;
}

.warehouse-dropdown {
  position: relative;
}

.warehouse-toggle-btn {
  background: #fff;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.warehouse-toggle-btn::after {
  margin-left: auto;
}

.warehouse-menu {
  width: 100%;
  min-width: 260px;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.warehouse-check-list {
  max-height: 220px;
  overflow-y: auto;
  border-top: 1px solid var(--line);
  padding-top: 4px;
  margin-top: 2px;
}

.warehouse-check-list .form-check,
.warehouse-select-all {
  padding: 8px 8px;
  padding-left: 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.warehouse-check-list .form-check-input,
.warehouse-select-all .form-check-input {
  width: 18px;
  height: 18px;
  margin-top: 0;
  margin-left: 0 !important;
  margin-right: 10px;
  flex-shrink: 0;
  cursor: pointer;
  float: none;
}

.warehouse-check-list .form-check label,
.warehouse-select-all label {
  cursor: pointer;
  width: 100%;
  font-size: 14px;
  padding-top: 1px;
}

.warehouse-check-list .form-check:hover {
  background: #f5f6f8;
}

.warehouse-menu-footer {
  border-top: 1px solid var(--line);
  margin-top: 6px;
  padding-top: 8px;
  text-align: right;
}

#warehouseSearchInput {
  border-color: var(--line);
}
#warehouseSearchInput:focus {
  border-color: var(--amber-dark);
  box-shadow: 0 0 0 0.2rem rgba(242, 169, 0, 0.2);
}

/* ---------- flatpickr theme override ---------- */
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}
.flatpickr-day.today {
  border-color: var(--amber-dark);
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months {
  color: var(--ink);
}

.date-group {
  background: #fafbfc;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
}

.date-group-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 6px;
  white-space: nowrap;
}

.print-count {
  min-width: 90px;
}

.form-control, .form-select {
  border-color: var(--line);
}
.form-control:focus, .form-select:focus {
  border-color: var(--amber-dark);
  box-shadow: 0 0 0 0.2rem rgba(242, 169, 0, 0.2);
}

/* ---------- Buttons ---------- */
.btn-search {
  background: var(--brand-dark);
  color: #fff;
  border: none;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 6px;
}
.btn-search:hover { background: var(--brand-dark-hover); color: #fff; }

.btn-export {
  background: var(--amber);
  color: var(--ink);
  border: none;
  font-weight: 600;
  font-size: 13px;
  padding: 7px 12px;
  border-radius: 6px;
}
.btn-export:hover:not(:disabled) { background: var(--amber-dark); color: #fff; }
.btn-export:disabled { opacity: 0.4; }

.btn-export-outline {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  font-weight: 600;
  font-size: 13px;
  padding: 7px 12px;
  border-radius: 6px;
}
.btn-export-outline:hover:not(:disabled) { border-color: var(--ink); }
.btn-export-outline:disabled { opacity: 0.4; }

.btn-page {
  background: #fff;
  border: 1px solid var(--line);
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 6px;
  color: var(--ink-soft);
}
.btn-page:hover { border-color: var(--ink); color: var(--ink); }
.btn-page:disabled { opacity: 0.35; }

/* ---------- Result header ---------- */
.result-header {
  padding-bottom: 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.result-count {
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 600;
}

/* ---------- Table ---------- */
.table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 70vh;
}

.stock-table {
  margin-bottom: 0;
}

.stock-table thead th {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
  user-select: none;
  padding-top: 12px;
  padding-bottom: 12px;
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
}

.stock-table th.sortable { cursor: pointer; }
.sort-icon { font-size: 11px; color: var(--muted); margin-left: 4px; }
.sort-icon.active { color: var(--amber-dark); }

.stock-table td {
  font-size: 14.5px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.stock-table th.text-end {
  text-align: right;
}

.stock-table td.num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  font-weight: 600;
  text-align: right;
}

.item-name-link {
  cursor: pointer;
  text-decoration: underline dotted;
  text-decoration-color: var(--muted);
  text-underline-offset: 2px;
}
.item-name-link:hover {
  color: var(--amber-dark);
  text-decoration-color: var(--amber-dark);
}

.stock-table tbody tr:hover {
  background: #fafbfc;
}

.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--muted);
  font-size: 14px;
}
.empty-state i { font-size: 26px; color: #c7ccd3; margin-bottom: 8px; }

/* ---------- Pagination ---------- */
.pagination-bar {
  padding-top: 14px;
  margin-top: 8px;
  border-top: 1px solid var(--line);
}

.page-info {
  font-size: 12.5px;
  color: var(--muted);
}

/* ---------- Loading overlay ---------- */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(22, 32, 42, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.spinner-box {
  background: #fff;
  padding: 24px 32px;
  border-radius: 10px;
  text-align: center;
  color: var(--ink);
  font-size: 13.5px;
}

/* ---------- Toasts ---------- */
.toast-stack {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast-msg {
  background: var(--brand-dark);
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  border-left: 4px solid var(--amber);
  min-width: 220px;
  animation: slidein 0.2s ease-out;
}
.toast-msg.error { border-left-color: var(--danger); }
.toast-msg.success { border-left-color: var(--ok); }

@keyframes slidein {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 992px) {
  .panel { padding: 14px; }
}

/* ---------- ชื่อ/รหัสสินค้าที่คลิกได้ (เปิด popup รายละเอียดสินค้า) — ใช้ร่วมกัน
   หน้า Receipt/Adjust/Move/Inventory on Hand/Transaction (ดู item-name-link ใน
   static/js ของแต่ละหน้า) ---------- */
.item-name-link {
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.12s ease;
}
.item-name-link:hover {
  color: var(--amber-dark);
  text-decoration-color: var(--amber-dark);
}

/* ---------- popup รายละเอียดสินค้า: รูปสินค้า + ราคาขาย ---------- */
.item-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.item-detail-image {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  flex-shrink: 0;
  background: #f7f8fa;
  transition: opacity 0.15s ease;
}

.item-detail-image:hover {
  opacity: 0.85;
}

.item-detail-header-info {
  flex: 1;
  min-width: 0;
}

/* ---------- popup รายละเอียดสินค้า: ปุ่มถ่าย/อัปโหลดรูป + แกลเลอรีรูปที่เพิ่มเอง
   (แยกจากรูปเดี่ยวจาก Google Drive ด้านบน — ดู renderPhotoGallery ใน
   static/js/item_detail_modal.js) ---------- */
.item-detail-photo-block {
  position: relative;
  flex-shrink: 0;
}

.item-detail-photo-btns {
  position: absolute;
  bottom: -6px;
  right: -6px;
  display: flex;
  gap: 4px;
}

.item-detail-photo-btns .btn {
  width: 26px;
  height: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 11px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.item-detail-photo-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.photo-thumb-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  flex-shrink: 0;
}

.photo-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  display: block;
}

.photo-cover-badge {
  position: absolute;
  top: 3px;
  left: 3px;
  background: var(--amber);
  color: var(--ink);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
}

.photo-thumb-actions {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  gap: 2px;
  padding: 3px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);
  opacity: 0;
  transition: opacity 0.12s ease;
}

.photo-thumb-wrap:hover .photo-thumb-actions,
.photo-thumb-wrap:focus-within .photo-thumb-actions {
  opacity: 1;
}

.photo-thumb-btn {
  flex: 1;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  border-radius: 4px;
  font-size: 10px;
  padding: 3px 0;
  cursor: pointer;
}

.photo-thumb-btn:disabled {
  color: var(--amber-dark);
  cursor: default;
}

.photo-thumb-btn.photo-delete-btn:hover {
  background: var(--danger);
  color: #fff;
}

@media (max-width: 480px) {
  /* มือถือ: โชว์ปุ่มลบ/ตั้งรูปหลักค้างไว้เลย (ไม่มี hover บนมือถือ) */
  .photo-thumb-actions {
    opacity: 1;
  }
}

.item-detail-prices {
  margin-top: 8px;
  max-width: 360px;
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.price-table th,
.price-table td {
  padding: 5px 10px;
  border: 1px solid var(--line);
  text-align: center;
}

.price-table thead th {
  background: #eef2f7;
  color: var(--ink);
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.3;
}

.price-table tbody td:first-child {
  font-weight: 700;
  color: var(--ink);
}

.price-table tbody td:not(:first-child) {
  font-weight: 700;
  color: #1a8a5f;
}

/* ---------- Lightbox: คลิกรูปสินค้าเพื่อขยายดูเต็มจอ ---------- */
.image-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 100000;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

.image-lightbox.open {
  display: flex;
}

.image-lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  cursor: default;
}

.image-lightbox-close {
  position: absolute;
  top: 16px;
  right: 24px;
  color: #fff;
  font-size: 36px;
  line-height: 1;
  font-weight: 300;
  cursor: pointer;
}

/* ปุ่ม "ส่งไปจอ 2" — เครื่อง POS ที่มี 2 จอ ส่งรูปที่กำลังดูอยู่ไปแสดงที่จอ
   ลูกค้า (จอที่ 2) ดูรายละเอียดฟีเจอร์เต็มๆ ที่ static/js/item_detail_modal.js
   ฟังก์ชัน sendImageToScreen2 — วางไว้มุมซ้ายบนของ lightbox (ตรงข้ามปุ่มปิด) */
.image-lightbox-send-btn {
  position: absolute;
  top: 16px;
  left: 24px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  z-index: 1;
}
.image-lightbox-send-btn:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* ---------- Thumbnail รูป Lot ในตาราง "รายล็อต" ของ popup EXP/LOT ----------
   โชว์ค้างไว้เลยถ้า Lot นั้นมีรูป (ไม่ต้องคลิกก่อนถึงจะเห็น) — ทั้งรูปที่พนักงาน
   เพิ่มเองและรูปอัตโนมัติจาก Google Drive ห่อด้วยปุ่มเดียวกันเสมอ (.exp-lot-
   photo-btn) คลิกแล้วเปิด popup "รูป LOT" (#lotPhotoModal) ให้ถ่าย/อัปโหลด/ลบ/
   ตั้งรูปหลักได้ — ถ้าล็อตนั้นไม่มีรูปเลยทั้ง 2 แหล่ง จะโชว์ไอคอนกล้องแทนที่จะ
   ว่างเปล่า กดเพิ่มรูปแรกได้ทันที (ดู lotThumbnailHtml ใน item_detail_modal.js) */
.exp-lot-photo-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: #f7f8fa;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.exp-lot-photo-btn-empty {
  color: var(--muted, #888);
  font-size: 12px;
}

.exp-lot-photo-btn-empty:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.exp-lot-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Wrap ของรูป Lot ที่มีรูปแล้ว: กดที่รูปเพื่อดูเต็มจอ (lightbox)
   ส่วนปุ่มดินสอเล็กมุมขวาบน (โผล่ตอน hover/focus) ไว้กดจัดการรูป (ลบ/ตั้งรูปหลัก/
   เพิ่มรูปอื่น) แยกจากการดูรูปตรงๆ ---------- */
.exp-lot-photo-wrap {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.exp-lot-photo-view-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: #f7f8fa;
  cursor: zoom-in;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.exp-lot-photo-manage-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted, #888);
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.exp-lot-photo-wrap:hover .exp-lot-photo-manage-btn,
.exp-lot-photo-wrap:focus-within .exp-lot-photo-manage-btn {
  opacity: 1;
}

.exp-lot-photo-manage-btn:hover {
  color: var(--ink);
  border-color: var(--ink);
}

@media (max-width: 480px) {
  /* มือถือ: โชว์ปุ่มดินสอค้างไว้เลย (ไม่มี hover บนมือถือ) */
  .exp-lot-photo-manage-btn {
    opacity: 1;
  }
}

/* ---------- ป็อปอัป "เพิ่มลงตะกร้า" (static/js/cart.js — ใช้ร่วมกันทุกหน้า) ---------- */
.cart-add-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100010;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.cart-add-overlay.open { display: flex; }

.cart-add-box {
  background: #fff;
  border-radius: 10px;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.cart-add-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
}
.cart-add-title { font-weight: 700; font-size: 15px; }
.cart-add-item { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.cart-add-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 18px;
  padding: 2px 6px;
  flex-shrink: 0;
}
.cart-add-close:hover { color: var(--ink); }

.cart-add-body { padding: 16px 18px; }
.cart-add-row { margin-bottom: 10px; }

/* ---------- ช่องค้นหา Supplier แบบพิมพ์แล้วขึ้นรายการให้เลือก (ดึงจาก ERP
   จริง) — ใช้ร่วมกันทั้งใน popup "เพิ่มลงตะกร้า" (cart.js) และ modal "สร้าง
   ใบสั่งซื้อใหม่" (purchase_orders.js) ---------- */
.cart-supplier-search-wrap { position: relative; }
.cart-supplier-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin-top: 2px;
  background: #fff;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
/* ทำสไตล์แถวผลลัพธ์เองซ้ำแบบย่อ (ไม่พึ่ง .item-search-row จาก
   purchase_order.css) เพราะ popup "เพิ่มลงตะกร้า" ถูกใช้ในหลายหน้าที่ไม่ได้
   โหลด purchase_order.css ไว้ (เช่นหน้าค้นหา Stock/Stock Alert/Price Alert/EXP) */
.cart-supplier-results .item-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  cursor: pointer;
}
.cart-supplier-results .item-search-row:last-child { border-bottom: none; }
.cart-supplier-results .item-search-row:hover { background: #f5f6f8; }

.cart-line-total {
  font-weight: 700;
  color: var(--ink);
  padding: 6px 0;
  font-size: 15px;
}

.cart-add-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--line);
}

.cart-prefill-hint {
  font-size: 12px;
  color: var(--muted);
  margin: -4px 0 10px;
  min-height: 15px;
}
.cart-prefill-hint:empty { margin: 0; min-height: 0; }

/* ---------- ปุ่มตะกร้าลอย (มุมล่างขวา ทุกหน้า ไม่ผูกกับเมนู — static/js/layout.js) ---------- */
.floating-cart-btn {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--ink, #16202a);
  color: #fff;
  border: none;
  font-size: 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  z-index: 99980;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.floating-cart-btn:hover { background: #263544; }
.floating-cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--danger, #d64545);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid #fff;
}

@media print {
  .floating-cart-btn { display: none !important; }
}

/* ---------- ป๊อปอัพ "ตะกร้าลอย" — ดู/แก้ไข/ลบ/ยืนยันคำสั่งซื้อได้จบในหน้าเดียว ---------- */
.mini-cart-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100005;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.mini-cart-overlay.open { display: flex; }

@media (max-width: 480px) {
  .mini-cart-overlay { padding: 0; align-items: flex-end; }
  .mini-cart-box { max-width: 100%; max-height: 92vh; border-radius: 12px 12px 0 0; }
}

.mini-cart-box {
  background: #fff;
  border-radius: 10px;
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.mini-cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: #fff;
}
.mini-cart-title { font-weight: 700; font-size: 15px; }
.mini-cart-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 18px;
  padding: 2px 6px;
}
.mini-cart-close:hover { color: var(--ink); }

.mini-cart-body { padding: 10px 14px 16px; }

/* ---------- ตะกร้าว่าง — โชว์มาสคอตของร้านแทนข้อความเปล่าๆ ธรรมดา ---------- */
.mini-cart-empty {
  text-align: center;
  padding: 16px 20px 24px;
}
.mini-cart-empty-img {
  height: 100px;
  width: auto;
  margin-bottom: 10px;
}

.mini-cart-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
}
.mini-cart-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: #fafbfc;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.mini-cart-items { padding: 4px 10px; }
.mini-cart-item {
  padding: 8px 2px;
  border-bottom: 1px dashed var(--line);
  font-size: 12.5px;
}
.mini-cart-item:last-child { border-bottom: none; }
.mini-cart-item-name { margin-bottom: 4px; }
/* flex-wrap (ไม่ใช่ grid คอลัมน์ตายตัว) — บนจอแคบจะพับลงบรรทัดใหม่แทนการล้น
   ขอบ กันปุ่มลบ/บันทึกถูกดันตกขอบจนมองไม่เห็น (ปัญหาที่เจอบนมือถือ) ปุ่มใช้
   flex: 0 0 auto เสมอ ไม่ถูกบีบเล็กจนหาย */
.mini-cart-item-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.mini-cart-item-fields .mc-qty { flex: 0 0 58px; width: 58px; }
.mini-cart-item-fields .mc-price { flex: 0 0 76px; width: 76px; }
.mini-cart-item-fields .mc-save,
.mini-cart-item-fields .mc-delete { flex: 0 0 auto; }
.mini-cart-uom { font-size: 12px; color: var(--muted); flex: 0 0 auto; }
.mini-cart-line-total { font-weight: 700; text-align: right; white-space: nowrap; flex: 1 1 70px; min-width: 60px; }

.mini-cart-group-footer {
  padding: 10px 12px;
  background: #fafbfc;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
}
.mini-cart-discount-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.mini-cart-discount-row label { flex: 0 0 auto; white-space: nowrap; }
.mini-cart-discount-row .mc-disc-val { flex: 1 1 70px; min-width: 60px; }
.mini-cart-discount-row .mc-disc-type { flex: 0 0 80px; }
.mini-cart-discount-row .mc-disc-save { flex: 0 0 auto; }
.mini-cart-totals-row {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12.5px;
  padding: 2px 0;
}
.mini-cart-grand-row {
  display: flex;
  justify-content: space-between;
  font-size: 14.5px;
  padding: 6px 0 2px;
  border-top: 1px dashed var(--line);
  margin-top: 4px;
}
.mini-cart-preview-note {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
  line-height: 1.5;
}
.mini-cart-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
}

@media (max-width: 480px) {
  .item-detail-image {
    width: 64px;
    height: 64px;
  }
  .item-detail-prices {
    max-width: 100%;
  }
  .price-table {
    font-size: 12px;
  }
  .price-table th,
  .price-table td {
    padding: 4px 6px;
  }
}

/* ---------- มือถือ: popup รายละเอียดสินค้า แท็บ EXP/LOT — กันตารางล้นจอ ----------
   แก้บั๊กที่เจอจริง: ตาราง EXP/LOT (สรุปตามเดือน/ปี + รายล็อต) ไม่เคยถูกครอบ
   ด้วยกล่องเลื่อนเหมือนตารางอื่นในระบบ พอคอลัมน์เยอะ+จอแคบ Bootstrap เลยบีบ
   ให้ข้อความตัดขึ้นบรรทัดใหม่แทนที่จะให้เลื่อนดู — ครอบด้วย .table-wrap (เลื่อน
   แนวนอน/แนวตั้งได้) แล้วลดขนาดตัวอักษร/padding ลงอีกนิดบนจอมือถือ พร้อมกัน
   ข้อความตัดบรรทัด (nowrap) เพื่อให้เห็นข้อมูลในหน้าเดียวมากที่สุดตามที่ขอไว้ */
.exp-lot-table-wrap {
  max-height: 45vh;
}
/* คอลัมน์ Supplier/วันที่รับเข้าในตาราง "รายล็อต" อาจมีหลายบรรทัด (1 Supplier
   ต่อ 1 บรรทัด — ดู receivingHistoryCells ใน item_detail_modal.js/exp.js) จัด
   ให้ทุกคอลัมน์ในแถวเดียวกันชิดขอบบนแทน "กึ่งกลางแนวตั้ง" (ค่าเริ่มต้นของ
   ตาราง) เทียบบรรทัดต่อบรรทัดได้ง่ายขึ้นเมื่อแถวสูงไม่เท่ากัน */
.exp-lot-table-wrap td {
  vertical-align: top;
}
/* แต่ละรายการ Supplier/วันที่รับเข้า (ดู receivingHistoryCells) ต้องเป็น "1
   บรรทัดจริงๆ" เสมอ ห้ามตัดขึ้นบรรทัดใหม่กลางรายการเด็ดขาด — ไม่งั้นชื่อ
   Supplier ยาวๆ จะตัดเป็น 2+ บรรทัดเอง ทำให้จุดตัดกับคอลัมน์วันที่รับเข้า (สั้น
   ไม่ตัด) เหลื่อมกัน เทียบแถวไม่ตรงอีกรอบ ยอมให้ล้นแล้วเลื่อนดูแนวนอนแทน (อยู่
   ใน .table-wrap ที่เลื่อนแนวนอนได้อยู่แล้ว) ดีกว่าให้ตัดจนบรรทัดไม่ตรงกัน */
.exp-receiving-line {
  white-space: nowrap;
}
@media (max-width: 576px) {
  .exp-lot-table-wrap table {
    font-size: 12px;
  }
  .exp-lot-table-wrap th,
  .exp-lot-table-wrap td {
    padding: 4px 6px;
    white-space: nowrap;
  }
}

/* ---------- มือถือ: popup รายละเอียดสินค้า — แท็บเลื่อนแนวนอนแทนตกบรรทัด ---------- */
@media (max-width: 576px) {
  #itemDetailTabs.nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox: ซ่อน scrollbar ให้ดูสะอาดตา ยังปัดนิ้วเลื่อนได้ปกติ */
  }
  #itemDetailTabs.nav-tabs::-webkit-scrollbar {
    display: none; /* Chrome/Safari: ซ่อน scrollbar เหมือนกัน */
  }
  #itemDetailTabs.nav-tabs .nav-item {
    flex-shrink: 0; /* กันแท็บถูกบีบเล็กจนตัวหนังสือชนกัน ให้ล้นออกไปแล้วเลื่อนดูแทน */
  }
  #itemDetailTabs.nav-tabs .nav-link {
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 13.5px;
  }
}

/* ---------- มือถือ: การ์ดแบบย่อ/ขยาย แทนตาราง Stock (เฉพาะหน้าค้นหา Stock เท่านั้น) ---------- */
.mobile-cards-wrap {
  display: none; /* เห็นเฉพาะจอมือถือ (เปิดใน media query ด้านล่าง) */
}

@media (max-width: 768px) {
  /* แก้บั๊กที่เจอจริง: เดิมใช้ ".table-wrap" (class ชื่อกลางๆ) ในการซ่อนตาราง
     แต่ ".table-wrap" ถูกใช้ร่วมกันหลายหน้า (Master Data, Price Alert,
     Settings, PO, และแท็บประวัติรับเข้าในป๊อปอัปที่ใช้ตัวเรนเดอร์ตารางร่วมกับ
     หน้า PO) — การซ่อนแบบ global แบบนี้ไปซ่อนตารางของหน้าอื่นด้วยโดยไม่ตั้งใจ
     ทั้งที่หน้าเหล่านั้นไม่มีการ์ดสำรองมาแทนเลย (ตารางหายไปเฉยๆ ไม่มีอะไรมา
     แทนที่) — เปลี่ยนมาเจาะจงด้วย ".stock-search-table-wrap" (class เฉพาะที่
     ใส่เพิ่มไว้ในหน้าค้นหา Stock เท่านั้น) แทน ไม่กระทบหน้าอื่นอีกต่อไป */
  .stock-search-table-wrap {
    display: none;
  }
  .mobile-cards-wrap {
    display: block;
  }
}

.mobile-stock-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
  background: #fff;
}

.mobile-stock-card-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
}

.mobile-stock-card-icon {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--muted);
  transition: transform 0.15s ease;
}

.mobile-stock-card.expanded .mobile-stock-card-icon {
  transform: rotate(90deg);
}

.mobile-stock-card-title {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-stock-card-qty {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.mobile-stock-card-detail {
  display: none;
  border-top: 1px solid var(--line);
  background: #fafbfc;
  padding: 8px 12px;
}

.mobile-stock-card.expanded .mobile-stock-card-detail {
  display: block;
}

.mobile-stock-card-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 12.5px;
}

.mobile-stock-card-detail-row span:first-child {
  color: var(--muted);
}

.mobile-stock-card-detail-row span:last-child {
  font-weight: 600;
  color: var(--ink);
}

/* ---------- สถานะสีของ "ยอดคงเหลือสุทธิ" (เทียบกับ Min Stock) ---------- */
/* แดง = ต่ำกว่า Min Stock ที่ตั้งไว้ (ต้องสั่งซื้อ) */
/* เขียว = ไม่ต่ำกว่า Min Stock ที่ตั้งไว้ (ปกติดี) */
/* ส้ม = ยังไม่ได้ตั้ง Min Stock ไว้เลย และของหมด (ควรไปตั้งค่า) */
.stock-status-danger {
  color: #c23434 !important;
  font-weight: 700;
}

.stock-status-success {
  color: #1a8a5f !important;
  font-weight: 700;
}

.stock-status-warning {
  color: #d18a1f !important;
  font-weight: 700;
}

/* ---------- popup รายละเอียดสินค้า: สรุปยอดจอง/สุทธิรวมทุกคลัง ---------- */
.warehouse-total-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 13px;
  color: var(--muted);
  background: #f7f8fa;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
}

.warehouse-total-summary strong {
  color: var(--ink);
  font-weight: 700;
}

/* ---------- Master Data: ชิปแสดงรายชื่อแผนก/คำค้นหาทั้งหมด ---------- */
.dept-master-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 12px;
  border-radius: 999px;
  background: #eef2f7;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
}

.dept-master-chip .dept-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
}

.dept-master-chip .dept-chip-remove:hover {
  background: #dfe4ea;
  color: var(--danger);
}

/* ---------- Sidebar: สรุปเวลาข้อมูลล่าสุดของทุก cache ---------- */
.sidebar-cache-status {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 6px 8px;
}

.sidebar-cache-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #cbd3db;
  background: transparent;
  border: none;
  text-align: left;
}
.sidebar-cache-toggle:hover { background: rgba(255,255,255,0.08); color: #fff; }
.sidebar-cache-toggle .sidebar-cache-chevron {
  margin-left: auto;
  font-size: 10px;
  transition: transform 0.15s ease;
}
.sidebar-cache-toggle.expanded .sidebar-cache-chevron {
  transform: rotate(180deg);
}

.sidebar-cache-list {
  max-height: 260px;
  overflow-y: auto;
  padding: 4px 4px 4px 12px;
}

.sidebar-cache-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px;
  font-size: 11.5px;
  color: #aab4c0;
}

.sidebar-cache-item span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell.sidebar-collapsed .sidebar-cache-toggle .sidebar-link-text,
.app-shell.sidebar-collapsed .sidebar-cache-toggle .sidebar-cache-chevron,
.app-shell.sidebar-collapsed .sidebar-cache-list {
  display: none;
}
.app-shell.sidebar-collapsed .sidebar-cache-toggle { justify-content: center; }

/* สีตามความสดของข้อมูล — ใช้ร่วมกันทั้ง sidebar และ badge บนสุดแต่ละหน้า */
.freshness-fresh { color: #7fd99a; font-weight: 600; }
.freshness-stale { color: #f0ad4e; font-weight: 600; }
.freshness-never { color: #e57373; font-weight: 600; }

/* ป้ายสถานะ/แหล่งข้อมูลของเมนู EXP — อยู่ในไฟล์กลาง (ไม่ใช่ CSS เฉพาะหน้า
   exp.html) เพราะ popup "รายละเอียดสินค้า" (_item_detail_modal.html) ใช้ป้าย
   ชุดเดียวกันนี้ในแท็บ "EXP/LOT" ด้วย ซึ่ง include ได้จากหลายหน้า (หน้าค้นหา
   Stock, Stock Alert, Price Alert, EXP) ไม่ใช่แค่หน้า EXP เอง */
.exp-status-badge {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 10px; white-space: nowrap;
  background: #f1f5f9; color: #475569; /* สีกลาง ใช้ตอนไม่รู้ลำดับสถานะ (เช่น popup รายละเอียดสินค้า) */
}
/* ผูกกับชื่อสถานะตรงๆ (ดู STATUS_SLUG_MAP ใน exp.js) ไม่ใช่ตำแหน่ง index ใน
   list อีกต่อไป — ทนทานต่อการเพิ่ม/ลบ/สลับลำดับสถานะฝั่ง backend ในอนาคต
   (แก้บั๊กที่เจอจริง: ของเดิมอิงตำแหน่ง ลบสถานะกลางลิสต์ไปแล้วสีของสถานะที่
   อยู่หลังจากนั้นเลื่อนผิดเพี้ยนไปหมด) */
.exp-status-normal { background:#e8f5e9; color:#2e7d32; }        /* ปกติ */
.exp-status-near { background:#fff4e0; color:#b5720a; }          /* ใกล้หมดอายุ */
.exp-status-urgent { background:#fde3e3; color:#b91c1c; }        /* ต้องดำเนินการ */
.exp-status-notified { background:#e0eefe; color:#1d4ed8; }      /* แจ้ง Supplier แล้ว */
.exp-status-waiting { background:#ede9fe; color:#6d28d9; }       /* รอผลตอบกลับ */
.exp-status-replaceable { background:#e8f5e9; color:#2e7d32; }   /* เปลี่ยนสินค้าได้ */
.exp-status-not-replaceable { background:#f1f5f9; color:#475569; } /* เปลี่ยนสินค้าไม่ได้ */
.exp-status-returned { background:#374151; color:#fff; }         /* คืน Supplier แล้ว */
.exp-status-closed { background:#111827; color:#fff; }           /* ปิดงาน */
.exp-source-badge {
  display:inline-block; font-size:10.5px; font-weight:600;
  padding:2px 8px; border-radius:10px; margin-right:4px;
}
.exp-source-main_wh { background:#eef2f7; color:#475569; }
.exp-source-shop_f { background:#fff4e0; color:#b5720a; }
.exp-days-danger { color:#b91c1c; font-weight:700; }
.exp-days-warn { color:#b5720a; font-weight:600; }