/* ธีมสไตล์ OneUI โทนดำถ่านกับทองของโลโก้ (โหมดมืด) เขียนเองทั้งไฟล์ ไม่ได้คัดลอกไฟล์ของ OneUI ซึ่งเป็นธีมเสียเงิน
   ชื่อคลาสเดิมทั้งหมด (glass-card, btn-bbq, station-tab ...) ยังอยู่ เทมเพลต 13 หน้าจึงไม่ต้องแก้
   ชื่อตัวแปร --flame-* ยังอยู่เพราะ style ในเทมเพลตอ้างถึง แต่ค่าเป็นสีหลักของธีมใหม่แล้ว */

/* ฟอนต์เก็บในเครื่องร้านเอง เดิมดึงจาก Google Fonts ซึ่งต้องต่ออีกสองโดเมนก่อนตัวหนังสือจะขึ้น
   ไฟล์แบบ variable ไฟล์เดียวครบทุกน้ำหนัก 400-700 มาจาก @fontsource-variable 5.2.5 (OFL ดู vendor/fonts/OFL.txt)
   unicode-range แบ่งให้เบราว์เซอร์โหลดเฉพาะไฟล์ของอักษรที่หน้านั้นใช้จริง */
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../vendor/fonts/noto-sans-thai-thai-wght.38c339dc1fe0.woff2") format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../vendor/fonts/inter-latin-wght.8e433c0592f7.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ทองมาจากวงแหวนในโลโก้ร้าน (#f29f24) พื้นกับตัวหนังสืออิงพาเลต Colorhunt
     #222831 #393E46 #FFD369 #EEEEEE ดำถ่านที่สว่างกว่าดำสนิท อ่านง่ายกว่าในครัว */
  --page-bg: #222831;
  --block-bg: #2d333c;
  --block-head-bg: #393e46;
  --block-foot-bg: #333942;
  --sidebar-bg: #1b2027;
  --sidebar-head-bg: #171b21;
  --header-h: 64px;
  --sidebar-w: 250px;

  --primary: #f29f24;
  --primary-hover: #e08c12;
  --primary-light: #ffd369;
  --primary-soft: rgba(242, 159, 36, 0.16);
  /* ตัวหนังสือบนพื้นทอง ขาวบนทองอ่านไม่ออก (contrast ราว 2:1) จึงใช้ดำแบบโลโก้ */
  --on-primary: #1b2027;

  --cream: #eeeeee;
  --text-heading: #eeeeee;
  --text-body: #d4d7dc;
  --text-faint: #9aa1ab;
  --text-nav-heading: #7d8590;
  --line: #3d434c;
  --line-strong: #4b525c;

  /* ทึบเกือบเต็ม ไม่ใช้ backdrop-filter blur เพราะมือถือรุ่นกลางกระตุกตอนเลื่อนและเปิดเมนู */
  --glass: rgba(45, 51, 60, 0.97);

  /* ชื่อเดิมที่เทมเพลตยังอ้างถึง */
  --bg-main: var(--page-bg);
  --bg-elevated: var(--block-head-bg);
  --bg-card: var(--block-bg);
  --bg-card-hover: var(--block-bg);
  --bg-input: var(--page-bg);
  --border-color: var(--line);
  --border-color-hover: var(--line-strong);
  --border-flame: var(--primary-light);
  --flame-orange: var(--primary-light);
  --flame-dark: var(--primary);
  --flame-gradient: var(--primary);
  --flame-glow: none;
  --text-primary: var(--text-heading);
  --text-secondary: var(--text-body);
  --text-muted: var(--text-faint);

  --status-ok: #22c55e;
  --status-ok-bg: rgba(34, 197, 94, 0.15);
  --status-warn: #f59e0b;
  --status-warn-bg: rgba(245, 158, 11, 0.15);
  --status-danger: #ef4444;
  --status-danger-bg: rgba(239, 68, 68, 0.15);
  --status-none: #64748b;
  --status-none-bg: rgba(100, 116, 139, 0.18);

  --font-family: 'Inter', 'Noto Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius: 8px;
  --radius-sm: 6px;
}

/* ให้คลาสของ Bootstrap ที่ใช้ทั่วเทมเพลต (text-secondary, bg-dark, border-secondary ...) เข้าชุดกับธีม */
[data-bs-theme=dark] {
  --bs-body-bg: var(--page-bg);
  --bs-body-bg-rgb: 34, 40, 49;
  --bs-body-color: var(--text-body);
  --bs-body-color-rgb: 212, 215, 220;
  --bs-emphasis-color: var(--cream);
  --bs-heading-color: var(--text-heading);
  --bs-secondary-color: var(--text-faint);
  --bs-secondary-rgb: 154, 161, 171;
  --bs-tertiary-bg: var(--block-head-bg);
  --bs-dark-rgb: 34, 40, 49;
  --bs-border-color: var(--line);
  --bs-border-color-translucent: rgba(238, 238, 238, 0.12);
  --bs-primary: var(--primary);
  --bs-primary-rgb: 242, 159, 36;
  --bs-link-color: var(--primary-light);
  --bs-link-color-rgb: 255, 211, 105;
  --bs-link-hover-color: #ffe199;
  --bs-link-hover-color-rgb: 255, 225, 153;
  --bs-warning-rgb: 255, 211, 105;
  --bs-info-rgb: 142, 202, 230;
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-lg: var(--radius);
  --bs-font-sans-serif: var(--font-family);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background-color: var(--page-bg);
  color: var(--text-body);
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  font-size: 0.95rem;
  line-height: 1.55;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--text-heading); font-weight: 700; }
/* เทมเพลตใช้ text-white เป็นสีตัวหนังสือหลัก ให้เป็นครีมเข้าชุดกับพื้นน้ำตาลแทนขาวล้วน */
.text-white { color: var(--cream) !important; }
.text-muted { color: var(--text-faint) !important; }
a { color: var(--primary-light); }

.app-container, .check-wrap, .summary-wrap {
  width: 100% !important;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}
/* หน้านับสต๊อกกับสรุปสั่งซื้อเป็นรายการยาวแถวเดียว กว้างเกินไปอ่านยาก */
.check-wrap, .summary-wrap { max-width: 820px !important; }

.row { margin-left: -0.5rem; margin-right: -0.5rem; }
.row > [class*="col-"] { padding-left: 0.5rem; padding-right: 0.5rem; }

/* Block (การ์ด) */
.glass-card, .stat-card, .supplier-card, .product-card {
  background: var(--block-bg);
  border: 0 !important;
  border-radius: var(--radius);
  box-shadow: none;
  overflow: hidden;
  width: 100%;
}
.glass-card:hover { box-shadow: none; }
.stat-card { padding: 1.25rem; }
.supplier-card { padding: 1.25rem; }
.product-card { margin-bottom: 0.75rem; transition: box-shadow 0.15s ease; }
.product-card.dirty-card { box-shadow: inset 3px 0 0 var(--primary-light); }

.stat-num {
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1.15;
}

/* กล่องย่อยด้านในการ์ด (bg-dark) เป็นสีพื้นหน้า แบบช่องลึกของ OneUI */
.bg-dark { background-color: var(--page-bg) !important; }
.glass-card .bg-dark { border-color: transparent !important; }

/* ปุ่ม */
.btn { border-radius: var(--radius-sm); font-weight: 600; }

.btn-bbq {
  background: var(--primary);
  border: 1px solid var(--primary);
  color: var(--on-primary);
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 0.6rem 1.2rem;
  transition: background 0.15s ease;
}
.btn-bbq:hover:not(:disabled), .btn-bbq:focus:not(:disabled) {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--on-primary);
}
.btn-bbq:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-outline-bbq {
  background: transparent;
  border: 1px solid var(--primary-light);
  color: var(--primary-light);
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 0.55rem 1.1rem;
}
.btn-outline-bbq:hover { background: var(--primary-soft); color: var(--primary-light); }

.btn-outline-slate, .btn-fullscreen {
  background: var(--block-head-bg);
  border: 1px solid var(--block-head-bg);
  color: var(--text-heading);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: background 0.15s ease;
}
.btn-outline-slate:hover, .btn-fullscreen:hover {
  background: var(--line-strong);
  border-color: var(--line-strong);
  color: #fff;
}
.btn-fullscreen { padding: 0.35rem 0.75rem; font-size: 0.85rem; cursor: pointer; }

/* ฟอร์ม */
.form-control, .form-select {
  background-color: var(--page-bg) !important;
  border: 1px solid var(--line) !important;
  color: var(--text-heading) !important;
  border-radius: var(--radius-sm) !important;
  max-width: 100%;
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary-light) !important;
  box-shadow: 0 0 0 0.2rem var(--primary-soft) !important;
}
.form-control::placeholder { color: var(--text-faint) !important; }
.form-label { color: var(--text-heading); font-weight: 600; font-size: 0.875rem; }

.search-box-wrap { position: relative; width: 100%; }
.search-box-wrap input {
  padding-left: 2.6rem;
  min-height: 46px;
  font-size: 1rem;
  background-color: var(--block-bg) !important;
  border-color: var(--block-bg) !important;
  width: 100%;
}
.search-box-wrap .search-icon {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  pointer-events: none;
}

.counted-input {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  text-align: center;
  min-height: 50px;
  background-color: var(--page-bg) !important;
  border: 2px solid var(--line-strong) !important;
  border-radius: var(--radius-sm) !important;
  width: 100%;
}
.counted-input:focus { border-color: var(--primary-light) !important; }

.form-check-input {
  width: 2.5em !important;
  height: 1.3em !important;
  cursor: pointer;
  background-color: var(--block-head-bg) !important;
  border-color: var(--line-strong) !important;
}
.form-check-input:checked {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* แท็บตำแหน่งในหน้านับสต๊อก (nav pills) */
.station-tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 6px;
  gap: 0.4rem !important;
  width: 100%;
}
.station-tabs::-webkit-scrollbar { display: none; }
.station-tab {
  white-space: nowrap;
  border-radius: var(--radius-sm);
  border: 0;
  background: var(--block-bg);
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-body);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
.station-tab:hover { background: var(--block-head-bg); color: #fff; }
.station-tab.active { background: var(--primary); color: var(--on-primary); }
.station-tab .badge-count {
  font-size: 0.75rem;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
}
.station-tab.active .badge-count { background: rgba(0, 0, 0, 0.18); color: var(--on-primary); }

/* ป้ายสถานะ */
.status-badge {
  font-size: 0.78rem;
  padding: 0.3em 0.7em;
  border-radius: 4px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}
.st-none { background: var(--status-none-bg); color: #cbd5e1; }
.st-ok { background: var(--status-ok-bg); color: #4ade80; }
.st-mismatch { background: var(--status-danger-bg); color: #f87171; }
.st-warn { background: var(--status-warn-bg); color: #fbbf24; }
.badge.rounded-pill { border-radius: 4px !important; }

/* ตาราง */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-body);
  --bs-table-border-color: var(--line);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.03);
}
.table > thead th {
  color: var(--text-faint);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.table-dark { --bs-table-bg: transparent; }

.alert { border-radius: var(--radius); border: 0; }

/* แถบบันทึกด้านล่างหน้านับสต๊อก */
.save-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--block-bg);
  border-top: 1px solid var(--line);
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  z-index: 1020;
}

.toast-msg {
  position: fixed;
  top: calc(var(--header-h) + 12px); left: 50%;
  transform: translateX(-50%);
  background: var(--block-head-bg);
  color: #fff;
  padding: 0.65rem 1.4rem;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--primary-light);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  z-index: 2000;
  font-size: 0.92rem;
  font-weight: 600;
}

.modal-content { border-radius: var(--radius); }

[x-cloak] { display: none !important; }

/* โครงหน้า
   จอใหญ่ (>= 992px): header + sidebar แบบ OneUI เนื้อหาเต็มความกว้างจอ
   มือถือ: แถบหัวเรื่องกลางจอ + แท็บล่าง + แผ่นเมนูเลื่อนขึ้น แบบแอป iOS */
.bbq-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--block-bg);
}
.bbq-header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  height: 38px;
  min-width: 38px;
  padding: 0 0.65rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--block-head-bg);
  color: var(--text-heading);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
.bbq-header-btn:hover { background: var(--line-strong); color: #fff; }
.bbq-header-title {
  color: var(--text-heading);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bbq-role-chip {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  background: var(--primary-soft);
  color: var(--primary-light);
}
.bbq-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 220px;
  background: var(--block-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.bbq-dropdown-head { padding: 0.85rem 1rem; background: var(--block-head-bg); }
.bbq-dropdown-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  border: 0;
  background: none;
  color: var(--text-body);
  font-size: 0.9rem;
  text-align: left;
  text-decoration: none;
}
.bbq-dropdown-item:hover { background: var(--block-head-bg); color: #fff; }
.bbq-dropdown-item.is-danger { color: #f87171; }

.bbq-avatar {
  width: 28px; height: 28px; flex: none;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 0.85rem;
}

.bbq-sidebar {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: var(--sidebar-w);
  display: none;
  flex-direction: column;
  background: var(--sidebar-bg);
  z-index: 1040;
}
.bbq-sidebar-head {
  height: var(--header-h);
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  background: var(--sidebar-head-bg);
}
.bbq-brand {
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.bbq-brand span { color: var(--primary-light); }
.bbq-brand:hover { color: #fff; }

.bbq-sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.25rem 0 1.25rem;
  /* แถบเลื่อนของเบราว์เซอร์สีเทามีลูกศรดูหลุดธีม ทำให้บางและจางจนกว่าจะชี้ */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.bbq-sidebar-body:hover { scrollbar-color: rgba(238, 238, 238, 0.18) transparent; }
.bbq-sidebar-body::-webkit-scrollbar { width: 6px; }
.bbq-sidebar-body::-webkit-scrollbar-button { display: none; height: 0; }
.bbq-sidebar-body::-webkit-scrollbar-track { background: transparent; }
.bbq-sidebar-body::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.bbq-sidebar-body:hover::-webkit-scrollbar-thumb { background: rgba(238, 238, 238, 0.18); }
/* สวิตช์เลือกฝ่ายของเจ้าของ แถบสามช่องแบบ segmented control ใช้ทั้งใน sidebar และแผ่นเมนูมือถือ */
.bbq-area {
  display: flex; gap: 2px; padding: 3px; margin: 0.9rem 1rem 0.25rem;
  background: var(--page-bg); border-radius: 10px;
}
.bbq-sheet-body .bbq-area { margin: 1.1rem 0 0; background: var(--block-bg); }
.bbq-area-opt {
  flex: 1; min-height: 34px; padding: 0.3rem 0.4rem; border: 0; border-radius: 8px;
  background: transparent; color: var(--text-faint);
  font-size: 0.82rem; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.bbq-area-opt:hover { color: var(--cream); }
.bbq-area-opt.is-active { background: var(--primary); color: var(--on-primary); }
.bbq-sheet-body .bbq-area-opt { min-height: 40px; font-size: 0.95rem; }
.bbq-side-label {
  padding: 1.1rem 1.25rem 0.35rem;
  color: var(--text-nav-heading);
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.bbq-side-link {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 1.25rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem; font-weight: 500;
  text-decoration: none;
  transition: color 0.12s ease, background 0.12s ease;
}
.bbq-side-link i { font-size: 1rem; width: 1.1rem; text-align: center; color: var(--text-nav-heading); }
.bbq-side-link:hover { color: #fff; background: rgba(255, 255, 255, 0.04); }
.bbq-side-link:hover i { color: var(--text-body); }
.bbq-side-link.is-active { color: #fff; font-weight: 600; background: rgba(255, 255, 255, 0.06); }
.bbq-side-link.is-active i { color: var(--primary-light); }
.bbq-side-badge {
  margin-left: auto; padding: 0.05rem 0.45rem; border-radius: 4px;
  font-size: 0.7rem; background: var(--status-ok-bg); color: #4ade80;
}

.bbq-desk-only { display: none !important; }

/* ---------- จอใหญ่ ---------- */
@media (min-width: 992px) {
  .bbq-desk-only { display: inline-flex !important; }
  .bbq-tabbar, .bbq-sheet, .bbq-sheet-backdrop { display: none !important; }

  .bbq-sidebar { display: flex; transform: translateX(-100%); transition: transform 0.25s ease; }
  body.sidebar-open .bbq-sidebar { transform: none; }

  .bbq-header { height: var(--header-h); padding: 0 1.75rem; transition: left 0.25s ease; }
  .bbq-header-title { font-size: 1rem; }
  body.has-sidebar .bbq-main { padding-top: calc(var(--header-h) + 1.25rem); transition: margin-left 0.25s ease; }
  body.has-sidebar.sidebar-open .bbq-header,
  body.has-sidebar.sidebar-open .save-bar { left: var(--sidebar-w); }
  body.has-sidebar.sidebar-open .bbq-main { margin-left: var(--sidebar-w); }

  /* เต็มความกว้างจอ เหลือขอบซ้ายขวาแบบ OneUI */
  body.has-sidebar .app-container,
  body.has-sidebar .check-wrap,
  body.has-sidebar .summary-wrap {
    max-width: none !important;
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important;
  }
}

/* ---------- มือถือแบบแอป ---------- */
@media (max-width: 991.98px) {
  :root {
    --nav-h: 50px;
    --tabbar-h: 54px;
    --radius: 14px;
    --radius-sm: 10px;
  }
  html { -webkit-tap-highlight-color: transparent; }
  body { overscroll-behavior-y: none; }
  body.sheet-open { overflow: hidden; }

  .bbq-header {
    justify-content: center;
    height: calc(var(--nav-h) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 1rem 0;
    background: var(--glass);
    border-bottom: 0.5px solid rgba(238, 238, 238, 0.08);
  }
  .bbq-header-title { font-size: 17px; text-align: center; max-width: 70%; }

  body.has-sidebar .bbq-main {
    padding-top: calc(var(--nav-h) + env(safe-area-inset-top) + 0.75rem);
    padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 1rem);
  }
  body.has-sidebar .save-bar {
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom: 0.75rem;
    background: var(--glass);
  }
  .toast-msg { top: calc(var(--nav-h) + env(safe-area-inset-top) + 10px); }

  .app-container, .check-wrap, .summary-wrap {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* iOS ซูมหน้าเองเมื่อแตะช่องที่ตัวอักษรเล็กกว่า 16px */
  .form-control, .form-select, .form-control-sm, .form-select-sm { font-size: 16px !important; }
  .btn, .station-tab, .bbq-tab, .ios-row { touch-action: manipulation; }
  .btn:not(.btn-sm) { min-height: 44px; }
  .modal-dialog { margin: 0.75rem; }
}

/* แท็บล่าง */
.bbq-tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1030;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--glass);
  border-top: 0.5px solid rgba(238, 238, 238, 0.1);
}
.bbq-tab {
  flex: 1;
  height: var(--tabbar-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  background: none;
  color: var(--text-faint);
  font-size: 10.5px;
  font-weight: 500;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
}
.bbq-tab i { font-size: 23px; line-height: 1; }
.bbq-tab.is-active { color: var(--primary-light); }
.bbq-tab:active i { transform: scale(0.92); }

/* แผ่นเมนูเลื่อนขึ้น */
.bbq-sheet-backdrop {
  position: fixed; inset: 0; z-index: 1045;
  background: rgba(0, 0, 0, 0.45);
}
.bbq-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  top: calc(env(safe-area-inset-top) + 12px);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  background: #1b2027;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
}
.bbq-sheet-grabber {
  width: 36px; height: 5px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.25);
  margin: 6px auto 0;
  flex: none;
}
.bbq-sheet-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0.35rem 1rem 0.6rem;
  flex: none;
}
.bbq-sheet-head h2 { margin: 0; font-size: 17px; font-weight: 600; color: var(--cream); }
.bbq-sheet-head button {
  justify-self: end;
  border: 0; background: none;
  color: var(--primary-light);
  font-size: 17px; font-weight: 600;
  padding: 0.25rem 0;
}
.bbq-sheet-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
}

.bbq-sheet { animation: bbq-sheet-up 0.24s cubic-bezier(0.32, 0.72, 0, 1); }
.bbq-sheet-backdrop { animation: bbq-fade-in 0.2s ease; }
@keyframes bbq-sheet-up { from { transform: translateY(100%); } }
@keyframes bbq-fade-in { from { opacity: 0; } }

/* รายการแบบ inset grouped ของ iOS */
.ios-list-label {
  margin: 1.4rem 0 0.4rem 1rem;
  color: var(--text-faint);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.ios-list {
  background: var(--block-bg);
  border-radius: 12px;
  overflow: hidden;
}
.ios-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  min-height: 48px;
  padding: 0.55rem 1rem;
  border: 0;
  background: none;
  color: var(--cream);
  font-size: 16px;
  text-align: left;
  text-decoration: none;
}
.ios-row + .ios-row::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  left: calc(1rem + 30px + 0.85rem);
  border-top: 0.5px solid rgba(255, 255, 255, 0.1);
}
.ios-row:active { background: rgba(255, 255, 255, 0.08); color: #fff; }
.ios-row.is-active .ios-row-title { color: var(--primary-light); font-weight: 600; }
.ios-icon {
  width: 30px; height: 30px; flex: none;
  border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 16px;
}
.ios-row-title { flex: 1; }
.ios-chevron { color: rgba(255, 255, 255, 0.3); font-size: 14px; }
.ios-row-text { display: flex; flex-direction: column; flex: 1; line-height: 1.3; }
.ios-row-sub { color: var(--text-faint); font-size: 14px; }
.ios-profile { padding: 0.85rem 1rem; }
.ios-avatar {
  width: 52px; height: 52px; flex: none;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #ffd369, #f29f24);
  color: var(--on-primary);
  font-size: 26px;
}
.ios-profile .ios-row-title { font-size: 19px; font-weight: 600; }
.ios-note { color: var(--text-faint); font-size: 14px; display: block; line-height: 1.6; }
.ios-danger { justify-content: center; color: #ff453a; }
.ios-danger:active { color: #ff453a; }

/* แบ่งหน้า (templates/partials/pagination.html) */
.bbq-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 1rem 0 1.25rem;
}
.bbq-pager-info { color: var(--text-faint); font-size: 0.85rem; }
.bbq-pager-links { display: flex; align-items: center; gap: 0.35rem; }
.bbq-pager-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--block-bg);
  color: var(--text-body);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}
.bbq-pager-btn:hover { background: var(--block-head-bg); color: var(--text-heading); }
.bbq-pager-btn.is-current { background: var(--primary); color: var(--on-primary); }
.bbq-pager-btn.is-disabled { opacity: 0.35; pointer-events: none; }
.bbq-pager-gap { color: var(--text-faint); padding: 0 0.15rem; }
.bbq-pager-compact { display: none; color: var(--text-heading); font-weight: 600; min-width: 4.5rem; text-align: center; }

@media (max-width: 575.98px) {
  /* จอแคบ: เหลือแค่ ‹ 2 / 9 › ปุ่มใหญ่กดง่าย */
  .bbq-pager { justify-content: center; }
  .bbq-pager-info { width: 100%; text-align: center; }
  .bbq-pager-num, .bbq-pager-gap { display: none; }
  .bbq-pager-compact { display: inline-block; }
  .bbq-pager-btn { min-width: 48px; height: 44px; }
}

/* หน้าแจ้งลา ก่อนยืนยันตัว (templates/rostering/pick.html) */
.lv-page { width: 100%; max-width: 1200px; margin: 0 auto; padding: 1.25rem 1rem 1.5rem; }
.lv-grid { display: grid; gap: 1rem; }
@media (min-width: 992px) {
  .lv-page { padding: 1.5rem 1.75rem; }
  .lv-grid { grid-template-columns: minmax(320px, 380px) 1fr; align-items: start; }
  .lv-side { position: sticky; top: calc(var(--header-h) + 1.25rem); }
}
.lv-side { display: grid; gap: 1rem; }
.lv-card { padding: 1.25rem; }

.lv-hero { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.1rem; }
.lv-hero-icon {
  width: 48px; height: 48px; flex: none;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-soft); color: var(--primary);
  font-size: 1.4rem;
}
.lv-title { font-size: 1.35rem; margin: 0; }
.lv-sub { color: var(--text-faint); font-size: 0.875rem; margin: 0; }

.lv-hint { color: var(--text-faint); font-size: 0.85rem; margin: 0.25rem 0 0; }
.lv-names {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  max-height: 232px; overflow-y: auto;
  padding: 0.15rem 0.1rem;
  scrollbar-width: thin; scrollbar-color: rgba(238, 238, 238, 0.18) transparent;
}
.lv-name {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--page-bg); color: var(--text-heading);
  font-size: 0.9rem; font-weight: 500;
  touch-action: manipulation;
}
.lv-name i { color: var(--text-faint); font-size: 0.7rem; }
.lv-name:hover { border-color: var(--primary); color: var(--primary-light); }

.lv-picked {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem; border-radius: var(--radius);
  background: var(--primary-soft); border: 1px solid rgba(242, 159, 36, 0.35);
}
.lv-picked-name { color: var(--text-heading); font-weight: 700; font-size: 1.05rem; }
.lv-picked-hint { color: var(--text-faint); font-size: 0.8rem; }
.lv-change {
  border: 0; background: none; color: var(--primary-light);
  font-weight: 600; font-size: 0.875rem; padding: 0.25rem 0.5rem;
}
.lv-avatar {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: var(--on-primary);
  font-weight: 700; font-size: 1.05rem;
}
.lv-avatar.is-small { width: 32px; height: 32px; font-size: 0.85rem; background: var(--block-head-bg); color: var(--text-heading); }
.lv-pin { font-size: 1.25rem !important; letter-spacing: 0.4em; text-align: center; }
.lv-submit { padding: 0.75rem 1rem; font-size: 1rem; }
.lv-foot { color: var(--text-faint); font-size: 0.8rem; margin: 0.85rem 0 0; text-align: center; }

.lv-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.6rem; }
.lv-card-title { font-size: 1rem; margin: 0; }
.lv-count {
  font-size: 0.75rem; font-weight: 700; padding: 0.2rem 0.55rem; border-radius: 999px;
  background: var(--block-head-bg); color: var(--text-body);
}
.lv-count.is-mid { background: rgba(255, 211, 105, 0.18); color: var(--primary-light); }
.lv-count.is-high { background: var(--status-danger-bg); color: #f87171; }
.lv-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0; border-top: 1px solid var(--line); }
.lv-card-head + .lv-row { border-top: 0; }
.lv-row-name { color: var(--text-heading); font-weight: 600; font-size: 0.92rem; }
.lv-row-sub { color: var(--text-faint); font-size: 0.8rem; }
.lv-empty { color: var(--text-faint); font-size: 0.9rem; margin: 0.25rem 0 0; }

.lv-cal-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.lv-month { color: var(--text-heading); font-weight: 700; font-size: 1.15rem; }
.lv-nav {
  min-width: 40px; height: 40px; padding: 0 0.6rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--block-head-bg); color: var(--text-heading);
  text-decoration: none; font-weight: 600; font-size: 0.85rem;
}
.lv-nav:hover { background: var(--line-strong); color: #fff; }

.lv-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.lv-dow { text-align: center; color: var(--text-faint); font-size: 0.8rem; font-weight: 600; padding-bottom: 0.25rem; }
.lv-dow.is-weekend { color: var(--primary-light); }
.lv-day {
  position: relative;
  min-height: 74px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  padding: 0.45rem 0.55rem;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: var(--page-bg); color: var(--text-body);
  text-align: left;
  transition: transform 0.1s ease, border-color 0.15s ease;
}
.lv-day:disabled { cursor: default; color: var(--text-faint); }
.lv-day:not(:disabled):hover { border-color: var(--line-strong); }
.lv-day:not(:disabled):active { transform: scale(0.97); }
.lv-day.is-out { opacity: 0.3; }
.lv-day.is-past:not(.is-today) { opacity: 0.7; }
.lv-day-num { font-weight: 600; font-size: 0.95rem; line-height: 1; }
.lv-day-count { align-self: flex-end; font-weight: 700; font-size: 1rem; line-height: 1; }
.lv-day-count small { font-size: 0.65rem; font-weight: 500; opacity: 0.8; }
.lv-day.heat-1 { background: rgba(238, 238, 238, 0.06); }
.lv-day.heat-2 { background: rgba(255, 211, 105, 0.16); }
.lv-day.heat-2 .lv-day-count { color: var(--primary-light); }
.lv-day.heat-3 { background: rgba(239, 68, 68, 0.18); }
.lv-day.heat-3 .lv-day-count { color: #f87171; }
.lv-day.is-today { border-color: var(--primary); }
.lv-day.is-today .lv-day-num {
  background: var(--primary); color: var(--on-primary);
  border-radius: 999px; padding: 0.2rem 0.45rem; margin: -0.2rem 0 0 -0.25rem;
}
.lv-day.is-selected { border-color: var(--primary-light); box-shadow: 0 0 0 2px rgba(255, 211, 105, 0.25); }

.lv-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem;
  margin-top: 0.85rem; color: var(--text-faint); font-size: 0.78rem;
}
.lv-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 0.35rem; vertical-align: -1px; }
.lv-dot.heat-1 { background: rgba(238, 238, 238, 0.25); }
.lv-dot.heat-2 { background: var(--primary-light); }
.lv-dot.heat-3 { background: #ef4444; }

.lv-detail { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }

@media (max-width: 575.98px) {
  .lv-card { padding: 1rem; }
  .lv-days { gap: 4px; }
  .lv-day { min-height: 56px; padding: 0.35rem; align-items: center; }
  .lv-day-count { align-self: center; font-size: 0.85rem; }
  .lv-day-count small { display: none; }
  .lv-day.is-today .lv-day-num { margin: -0.15rem 0 0; }
}

/* แถบบนสำหรับคนที่ยังไม่ล็อกอิน มีแค่โลโก้กับปุ่มเข้าสู่ระบบ */
.bbq-guest {
  position: sticky; top: 0; z-index: 1030;
  display: flex; align-items: center;
  min-height: calc(56px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 1rem 0;
  background: var(--glass);
  border-bottom: 0.5px solid rgba(238, 238, 238, 0.08);
}
@media (min-width: 992px) { .bbq-guest { padding: 0 1.75rem; min-height: var(--header-h); } }
.d-contents { display: contents; }
.bbq-pager-btn.bbq-pager-gap { background: none; min-width: auto; padding: 0 0.15rem; color: var(--text-faint); }

/* หน้าแรก (templates/accounts/home.html) */
.hm-guest {
  width: 100%; max-width: 480px; margin: 0 auto;
  padding: 2.5rem 1rem 2rem;
  display: flex; flex-direction: column; gap: 0.85rem;
}
.hm-brand { text-align: center; margin-bottom: 0.75rem; }
.hm-logo { border-radius: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.hm-title { font-size: 1.75rem; margin: 0.85rem 0 0.15rem; }
.hm-date { color: var(--text-faint); font-size: 0.9rem; margin: 0; }

.hm-action {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 1.1rem 1.15rem;
  border-radius: var(--radius);
  background: var(--block-bg);
  border: 1px solid transparent;
  color: var(--text-heading);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.hm-action:hover { border-color: var(--line-strong); color: var(--text-heading); }
.hm-action:active { transform: scale(0.99); }
.hm-action.is-primary { border-color: rgba(242, 159, 36, 0.45); background: linear-gradient(135deg, rgba(242, 159, 36, 0.16), var(--block-bg) 70%); }
.hm-action-icon {
  width: 48px; height: 48px; flex: none; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--block-head-bg); color: var(--text-heading); font-size: 1.35rem;
}
.hm-action.is-primary .hm-action-icon { background: var(--primary); color: var(--on-primary); }
.hm-action-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.hm-action-title { font-weight: 700; font-size: 1.05rem; }
.hm-action-sub { color: var(--text-faint); font-size: 0.85rem; }
.hm-chip {
  flex: none; font-size: 0.72rem; font-weight: 700; padding: 0.25rem 0.55rem; border-radius: 999px;
  background: var(--status-ok-bg); color: #4ade80;
}
.hm-chevron { color: var(--text-faint); }
.hm-foot { color: var(--text-faint); font-size: 0.8rem; text-align: center; margin: 0.75rem 0 0; }

.hm-home { padding-bottom: 1.5rem; }
.hm-greet { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.hm-hello { font-size: 1.5rem; margin: 0; }
.hm-group {
  color: var(--text-nav-heading); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; margin: 1.5rem 0 0.6rem;
}
.hm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; }
.hm-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem;
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--block-bg);
  border: 1px solid transparent;
  color: var(--text-heading);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.hm-tile:hover { border-color: var(--line-strong); color: var(--text-heading); }
.hm-tile:active { transform: scale(0.98); }
.hm-tile-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.15rem;
}
.hm-tile-label { font-weight: 600; font-size: 0.95rem; }
@media (max-width: 575.98px) {
  .hm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-hello { font-size: 1.3rem; }
}
.hm-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: 1.5rem; }
.hm-groups .hm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* หน้าเข้าสู่ระบบ (templates/accounts/login.html) */
.lg-wrap {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem calc(2rem + env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(242, 159, 36, 0.16), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255, 211, 105, 0.05), transparent 70%);
}
.lg-stack { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 1.25rem; }
.lg-brand { position: relative; text-align: center; }
.lg-logo-glow {
  position: absolute; left: 50%; top: 42px; width: 170px; height: 170px;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(242, 159, 36, 0.35), transparent 68%);
  filter: blur(14px);
}
.lg-logo { position: relative; border-radius: 22px; }
.lg-title { font-size: 1.6rem; letter-spacing: 0.01em; margin: 1rem 0 0.2rem; }
.lg-sub { color: var(--text-faint); font-size: 0.9rem; margin: 0; }
.lg-card {
  padding: 1.75rem 1.5rem 1.5rem;
  border-top: 3px solid var(--primary) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
}
.lg-heading { font-size: 1.1rem; margin: 0 0 1.25rem; }
.lg-error {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 1rem; padding: 0.6rem 0.8rem; font-size: 0.875rem;
  border-radius: var(--radius-sm); color: #fca5a5;
  background: var(--status-danger-bg); border: 1px solid rgba(239, 68, 68, 0.35);
}
.lg-field { position: relative; }
.lg-field-icon {
  position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%);
  color: var(--text-faint); font-size: 1.1rem; pointer-events: none;
  transition: color 0.15s ease;
}
.lg-field:focus-within .lg-field-icon { color: var(--primary-light); }
.lg-input { min-height: 52px; padding-left: 2.8rem; font-size: 1.05rem; }
.lg-input-pin { padding-right: 3rem; letter-spacing: 0.3em; }
.lg-input-pin::placeholder { letter-spacing: 0.3em; }
.lg-eye {
  position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
  color: var(--text-faint); font-size: 1.15rem; border-radius: var(--radius-sm);
}
.lg-eye:hover, .lg-eye:focus-visible { color: var(--primary-light); background: var(--primary-soft); outline: 0; }
/* Chrome เติมช่องอัตโนมัติด้วยสีฟ้าเทา กลืนไม่เข้าธีม ทับด้วยเงาใน */
.lg-input:-webkit-autofill,
.lg-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-heading);
  caret-color: var(--text-heading);
  box-shadow: 0 0 0 1000px var(--page-bg) inset !important;
  transition: background-color 9999s ease-out;
}
.lg-submit {
  padding: 0.85rem 1rem; font-size: 1.05rem;
  box-shadow: 0 6px 18px rgba(242, 159, 36, 0.25);
}
.lg-submit:disabled { opacity: 0.8; cursor: progress; }
.lg-alt {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.75rem 1rem; border-radius: var(--radius);
  background: rgba(255, 211, 105, 0.06); border: 1px dashed rgba(255, 211, 105, 0.45);
  color: var(--primary-light); text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.lg-alt:hover, .lg-alt:focus-visible { background: var(--primary-soft); border-color: var(--primary-light); color: var(--primary-light); }
.lg-alt-icon {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; background: var(--primary-soft); font-size: 1.2rem;
}
.lg-alt-text { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.lg-alt-text strong { font-size: 0.98rem; }
.lg-alt-text small { color: var(--text-faint); font-size: 0.82rem; }
.lg-alt-go { color: var(--text-faint); }

/* ประกาศบนหัวหน้า (templates/partials/announcements.html) */
.bbq-notice {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0 0 0.75rem; padding: 0.65rem 1rem; font-size: 0.92rem; font-weight: 500;
  border-radius: var(--radius-sm);
  background: var(--primary-soft); color: var(--primary-light);
  border: 1px solid rgba(255, 211, 105, 0.35);
}
.bbq-notice.is-warning {
  background: var(--status-warn-bg); color: #fcd34d; border-color: rgba(245, 158, 11, 0.45);
}
.bbq-notice i { flex: none; }

/* หน้าต่าง "กำลังพัฒนา" ของส่วนที่ปิด (templates/controls/closed.html) */
.cl-backdrop {
  min-height: 70vh; min-height: 70dvh;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem 1rem;
}
.cl-modal {
  width: 100%; max-width: 420px; padding: 2rem 1.5rem 1.5rem; text-align: center;
  background: var(--block-bg); border-radius: var(--radius);
  border-top: 3px solid var(--primary);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
.cl-icon {
  width: 64px; height: 64px; margin-bottom: 1rem; display: inline-grid; place-items: center;
  border-radius: 50%; background: var(--primary-soft); color: var(--primary-light); font-size: 1.9rem;
}
.cl-title { font-size: 1.4rem; margin: 0 0 0.6rem; }
.cl-badge {
  display: inline-block; margin: 0 0 1rem; padding: 0.15rem 0.8rem; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary-light); font-size: 0.85rem; font-weight: 600;
}
.cl-msg { color: var(--text-body); margin: 0 0 1.5rem; }
.cl-btn { padding: 0.75rem 1rem; }

/* หน้าตรวจสอบการลาของเจ้าของ (templates/rostering/audit.html) */
.au-stat {
  display: flex; flex-direction: column; gap: 0.25rem; height: 100%;
  padding: 1rem; border-radius: var(--radius);
  background: var(--block-bg); border: 1px solid transparent;
  color: var(--text-body); text-decoration: none;
}
.au-stat:hover { border-color: var(--line-strong); color: var(--text-body); }
.au-stat.is-active { border-color: var(--primary); }
.au-stat-num { font-size: 1.75rem; font-weight: 700; color: var(--text-heading); line-height: 1.1; }
.au-stat-label { font-size: 0.82rem; color: var(--text-faint); }
.au-pill {
  display: inline-flex; gap: 0.4rem; align-items: center;
  padding: 0.3rem 0.75rem; border-radius: 999px;
  background: var(--page-bg); color: var(--text-heading); text-decoration: none; font-size: 0.88rem;
}
.au-pill b { color: var(--primary-light); }
.au-row { display: flex; gap: 1rem; padding: 0.9rem 1rem; border-top: 1px solid var(--line); }
.au-row:first-child { border-top: 0; }
.au-when { width: 64px; flex: none; text-align: center; }
.min-w-0 { min-width: 0; }
.au-action {
  font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 4px;
  background: var(--status-ok-bg); color: #4ade80;
}
.au-action.is-update { background: rgba(255, 211, 105, 0.16); color: var(--primary-light); }
.au-action.is-delete { background: var(--status-danger-bg); color: #f87171; }
.au-flag {
  font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 999px;
  background: var(--block-head-bg); color: var(--text-body);
}
.au-flag.is-warn { background: rgba(255, 211, 105, 0.16); color: var(--primary-light); }
.au-flag.is-bad { background: var(--status-danger-bg); color: #f87171; }
.au-meta { color: var(--text-faint); background: var(--page-bg); border-radius: 4px; padding: 0.05rem 0.45rem; }
.au-meta.is-ok { color: #4ade80; }
.au-meta.is-bad { color: #f87171; }

/* หน้าสรุปการลา (templates/rostering/report.html) */
.rp-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem; }
.rp-month { display: flex; align-items: center; gap: 0.4rem; }
.rp-select { width: auto; min-width: 120px; }
.rp-label { color: var(--primary-light); font-size: 1.1rem; margin: 1rem 0 0.75rem; }
.rp-kpi { display: flex; flex-direction: column; gap: 0.2rem; padding: 1rem; height: 100%; }
.rp-kpi-label { color: var(--text-faint); font-size: 0.82rem; }
.rp-kpi-num { font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--text-heading); }
.rp-delta { font-size: 0.78rem; font-weight: 600; color: var(--text-faint); }
.rp-delta small { font-weight: 400; margin-left: 0.25rem; }
.rp-delta.is-bad { color: #f87171; }
.rp-delta.is-good { color: #4ade80; }

.rp-alerts { display: grid; gap: 0.5rem; }
.rp-alert {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.75rem 1rem; border-radius: var(--radius);
  background: var(--block-bg); color: var(--text-body); text-decoration: none; font-size: 0.9rem;
}
.rp-alert i { color: var(--primary-light); font-size: 1.1rem; }
.rp-alert.is-warn { background: rgba(255, 211, 105, 0.12); }
.rp-alert.is-warn:hover { color: var(--text-heading); }
.rp-alert b { color: var(--text-heading); }

.rp-title { font-size: 1rem; margin-bottom: 0.75rem; }
.rp-bars { display: flex; align-items: flex-end; gap: 3px; height: 170px; }
.rp-bar { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; }
.rp-bar-fill { width: 100%; border-radius: 3px 3px 0 0; background: var(--line); min-height: 2px; max-height: calc(100% - 30px); }
.rp-bar-fill.heat-1 { background: #8a94a3; }
.rp-bar-fill.heat-2 { background: var(--primary-light); }
.rp-bar-fill.heat-3 { background: #ef4444; }
.rp-bar-num { font-size: 0.62rem; color: var(--text-faint); }
.rp-bar-day { font-size: 0.6rem; color: var(--text-faint); }
.rp-bar.is-today .rp-bar-day { color: var(--on-primary); background: var(--primary); border-radius: 999px; padding: 0 0.25rem; font-weight: 700; }

.rp-rank { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0; }
.rp-rank-name { width: 34%; flex: none; font-size: 0.88rem; color: var(--text-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-rank-name.is-short { width: 56px; color: var(--text-faint); }
.rp-track { flex: 1; height: 8px; border-radius: 999px; background: var(--page-bg); overflow: hidden; }
.rp-fill { height: 100%; border-radius: 999px; background: var(--primary); }
.rp-fill.is-sub { background: #2f9e6b; }
.rp-fill.is-weekend { background: var(--primary-light); }
.rp-fill.is-ahead { background: #2f9e6b; }
.rp-fill.is-soon { background: #8a94a3; }
.rp-fill.is-same { background: var(--primary-light); }
.rp-fill.is-late { background: #ef4444; }
.rp-rank-num { width: 26px; text-align: right; font-weight: 700; font-size: 0.9rem; color: var(--text-heading); }
.rp-tag {
  flex: none; font-size: 0.7rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 999px;
  background: var(--page-bg); color: var(--text-faint);
}
.rp-tag.is-warn { background: rgba(255, 211, 105, 0.16); color: var(--primary-light); }
.rp-day { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-top: 1px solid var(--line); }
.rp-title + .rp-day { border-top: 0; }
@media (max-width: 575.98px) {
  .rp-bars { gap: 1px; height: 140px; }
  .rp-bar-num { display: none; }
  .rp-kpi-num { font-size: 1.6rem; }
}
.lv-count { white-space: nowrap; flex: none; }
.au-people { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.15rem 0.4rem; margin: 0; }
.au-person-label { font-size: 0.8rem; color: var(--text-faint); }
.au-person-name { font-size: 1rem; color: var(--text-heading); }

/* ช่องกรอกในการ์ดต้องลึกกว่าพื้นการ์ด ไม่งั้นกลืนกันจนมองไม่เห็นว่าเป็นช่อง */
.glass-card .form-control,
.glass-card .search-box-wrap input {
  background-color: var(--page-bg) !important;
  border-color: var(--line-strong) !important;
}

/* ฟอร์มยื่นลา (templates/rostering/leave.html) */
.lf-card { padding: 1.25rem; }
.lf-title { font-size: 1.15rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.lf-title i { color: var(--primary); }
.lf-step {
  padding: 0.9rem; margin-bottom: 0.75rem;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.12);
}
.lf-step.is-missing { border-color: rgba(242, 159, 36, 0.55); }
.lf-step-head { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.65rem; }
.lf-num {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: var(--on-primary); font-size: 0.8rem; font-weight: 700;
}
.lf-step-title { font-weight: 700; color: var(--text-heading); }
.lf-chip {
  font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 999px;
  background: var(--block-head-bg); color: var(--text-faint);
}
.lf-chip.is-required { background: rgba(242, 159, 36, 0.18); color: var(--primary-light); }
.lf-chip.is-done { background: var(--status-ok-bg); color: #4ade80; }
.lf-link { border: 0; background: none; color: var(--text-faint); font-size: 0.82rem; padding: 0; }
.lf-link:hover { color: var(--text-heading); }
.lf-date {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.4rem 0.35rem 0.75rem; border-radius: 999px;
  background: var(--primary-soft); border: 1px solid rgba(242, 159, 36, 0.4);
  color: var(--text-heading); font-weight: 600; font-size: 0.9rem;
}
.lf-date button {
  width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, 0.25); color: var(--text-heading); line-height: 1; padding: 0;
}
.lf-search input { min-height: 48px; }
.lf-submit { padding: 0.8rem 1rem; font-size: 1.02rem; }

/* เพิ่มชื่อตัวเองในหน้าแจ้งลา */
.lv-add-link, .lv-add-toggle {
  border: 0; background: none; padding: 0;
  color: var(--primary-light); font-weight: 600;
}
.lv-add-toggle {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  width: 100%; margin-top: 0.85rem; padding: 0.6rem; border-radius: var(--radius-sm);
  border: 1px dashed var(--line-strong); font-size: 0.9rem;
}
.lv-add-toggle:hover { border-color: var(--primary); }
.lv-add {
  margin-top: 1rem; padding: 1rem; border-radius: var(--radius);
  border: 1px solid rgba(242, 159, 36, 0.45); background: rgba(0, 0, 0, 0.12);
}

/* หน้าพนักงาน */
.st-self { background: rgba(255, 211, 105, 0.16); color: var(--primary-light); border: 1px solid rgba(255, 211, 105, 0.35); }
.st-confirm {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin-top: 0.6rem; padding: 0.6rem 0.75rem; border-radius: var(--radius-sm);
  background: rgba(255, 211, 105, 0.08); color: var(--text-body);
}
.st-edit {
  margin-top: 0.75rem; padding: 0.9rem; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: rgba(0, 0, 0, 0.12);
}
.st-probation { background: rgba(167, 139, 250, 0.2); color: #c4b5fd; border: 1px solid rgba(167, 139, 250, 0.4); }

/* ---------- ตารางงาน ---------- */
.sc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.sc-week { display: flex; gap: 0.4rem; }
.lv-nav.is-text { width: auto; padding: 0 0.85rem; font-size: 0.85rem; font-weight: 600; }
.sc-shops { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.sc-shops .station-tab { text-decoration: none; }

.sc-empty { padding: 2rem 1.25rem; text-align: center; }
.sc-empty-icon { font-size: 2.2rem; color: var(--primary); }
.sc-empty-actions { display: grid; gap: 0.6rem; max-width: 360px; margin: 1rem auto 0; }

/* ตาราง: ช่องที่มีคนเด่น ช่องว่างจาง ตาไปหาคนก่อน */
.sc-table-wrap { padding: 0; overflow-x: auto; }
.sc-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; min-width: 920px; }
.sc-table th, .sc-table td { padding: 3px 4px; vertical-align: middle; }
.sc-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--block-head-bg); text-align: center; font-weight: 600;
  color: var(--text-heading); padding: 0.55rem 0.4rem 0.5rem; border-bottom: 1px solid var(--line);
}
.sc-table thead th.is-today { color: var(--primary-light); }
.sc-table td.is-today { background: rgba(242, 159, 36, 0.05); }
.sc-day { font-size: 0.8rem; font-weight: 500; color: var(--text-faint); }
.sc-day b { font-size: 1.05rem; color: inherit; margin-left: 2px; }
.sc-table thead th:not(.is-today) .sc-day b { color: var(--text-heading); }
.sc-meter { height: 4px; border-radius: 4px; background: var(--status-warn-bg); margin: 0.35rem auto 0.25rem; max-width: 90px; overflow: hidden; }
.sc-meter i { display: block; height: 100%; background: var(--status-ok); border-radius: 4px; }
.sc-day-stat { font-size: 0.7rem; color: var(--text-faint); font-weight: 400; }
.sc-day-stat .is-open { color: var(--status-warn); }

.sc-table tr.is-group > * { border-top: 1px solid var(--line); }
.sc-table tbody tr:first-child > * { border-top: 0; }
.sc-table th.sc-pos { width: 140px; text-align: left; padding-left: 0.85rem; vertical-align: middle; }
.sc-table thead th.sc-pos { text-align: left; color: var(--text-faint); font-size: 0.78rem; font-weight: 500; }
.sc-pos-name { display: block; color: var(--text-heading); font-weight: 600; font-size: 0.85rem; line-height: 1.2; }
.sc-pos-meta { display: block; color: var(--text-faint); font-size: 0.7rem; font-weight: 400; }

.sc-cell {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  width: 100%; min-height: 40px; padding: 0.3rem 0.55rem;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  background: var(--block-head-bg); color: var(--text-heading); text-align: left; line-height: 1.2;
  transition: border-color 0.12s, background 0.12s;
}
button.sc-cell:hover { border-color: var(--primary); }
.sc-cell.is-picking { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.sc-cell.is-open { background: transparent; border: 1px dashed var(--line-strong); }
button.sc-cell.is-open:hover { border-color: var(--primary); background: var(--primary-soft); }
.sc-cell.is-leave { background: var(--status-danger-bg); border-color: rgba(239, 68, 68, 0.45); }
.sc-cell.is-leave .sc-name { text-decoration: line-through; color: var(--text-faint); }
.sc-name { font-weight: 600; font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.sc-add { color: var(--text-nav-heading); font-size: 0.78rem; }
button.sc-cell.is-open:hover .sc-add { color: var(--primary-light); }
.sc-note { color: #fca5a5; font-size: 0.7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sc-time { color: var(--primary-light); font-size: 0.68rem; }

/* มือถือ ทีละวัน */
.sc-daytabs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3rem; margin-bottom: 0.75rem; }
.sc-daytab {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 0.4rem 0; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--block-bg); color: var(--text-body); font-size: 0.72rem;
}
.sc-daytab b { font-size: 1rem; color: var(--text-heading); }
.sc-daytab.is-active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.sc-daytab.is-active b { color: var(--on-primary); }
.sc-dot { position: absolute; top: 4px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--status-warn); }
.sc-daylist { padding: 0.35rem 0.75rem; }
.sc-line { display: grid; grid-template-columns: 104px 1fr; gap: 0.6rem; align-items: center; padding: 0.3rem 0; border-bottom: 1px solid var(--line); }
.sc-line:last-child { border-bottom: 0; }
.sc-line-pos { font-size: 0.82rem; color: var(--text-heading); line-height: 1.2; }
.sc-line-pos small { display: block; color: var(--text-faint); font-size: 0.7rem; }

/* เทียบกับพนักงาน */
.sc-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.6rem; }
.sc-person-day { padding: 0.7rem 0.8rem; }
.sc-person-day.is-today { border-color: var(--primary); }
.sc-person-day summary { cursor: pointer; }
.sc-chip {
  display: inline-block; margin: 0.15rem 0.2rem 0 0; padding: 0.1rem 0.5rem;
  border-radius: 999px; background: var(--block-head-bg); color: var(--text-heading); font-size: 0.75rem;
}
.sc-chip.is-leave { background: var(--status-danger-bg); color: #fca5a5; }

/* แผงเลือกคน: ด้านขวาบนคอม แผ่นล่างบนมือถือ */
.sc-drawer-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1060; }
.sc-drawer {
  position: fixed; z-index: 1061; top: 0; right: 0; bottom: 0;
  width: min(380px, 100vw); display: flex; flex-direction: column;
  background: var(--block-bg); border-left: 1px solid var(--line-strong);
  box-shadow: -12px 0 32px rgba(0, 0, 0, 0.35);
  animation: sc-slide-in 0.18s ease-out;
}
.sc-drawer-backdrop { animation: sc-fade-in 0.18s ease-out; }
@keyframes sc-slide-in { from { transform: translateX(100%); } }
@keyframes sc-fade-in { from { opacity: 0; } }
.sc-drawer-head {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 1rem 1rem 0.85rem; background: var(--block-head-bg); border-bottom: 1px solid var(--line);
}
.sc-drawer-head > div { flex: 1; min-width: 0; }
.sc-drawer-kicker { font-size: 0.72rem; color: var(--primary-light); font-weight: 600; letter-spacing: 0.02em; }
.sc-drawer-title { font-size: 1.15rem; font-weight: 700; color: var(--text-heading); margin: 0.1rem 0 0.15rem; }
.sc-drawer-sub { font-size: 0.8rem; color: var(--text-faint); }
.sc-drawer-close {
  width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: var(--block-bg); color: var(--text-body);
}
.sc-drawer-close:hover { color: #fff; background: var(--line-strong); }
.sc-drawer-body { flex: 1; overflow-y: auto; padding: 0.9rem 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }

.sc-avatar {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--block-head-bg); color: var(--text-heading); font-weight: 700; font-size: 0.85rem;
}
.sc-current {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.7rem;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--page-bg);
}
.sc-current .sc-avatar { background: var(--primary); color: var(--on-primary); }
.sc-current-label { font-size: 0.7rem; color: var(--text-faint); }
.sc-current-name { font-weight: 700; color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-current-reason { width: auto; flex: none; }
.min-w-0 { min-width: 0; }

.sc-suggest {
  display: flex; align-items: center; gap: 0.7rem; width: 100%;
  padding: 0.65rem 0.8rem; border-radius: var(--radius);
  border: 1px solid rgba(242, 159, 36, 0.45); background: var(--primary-soft);
  color: var(--text-heading); text-align: left;
}
.sc-suggest > i:first-child { color: var(--primary); font-size: 1.1rem; }
.sc-suggest small { display: block; font-size: 0.7rem; color: var(--primary-light); }
.sc-suggest:hover { border-color: var(--primary); }

.sc-list-head { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-faint); margin-bottom: -0.35rem; }
.sc-list-head b { color: var(--text-heading); }
.sc-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.sc-list form + form .sc-person { border-top: 1px solid var(--line); }
.sc-person {
  display: flex; align-items: center; gap: 0.65rem; width: 100%;
  padding: 0.5rem 0.75rem; border: 0; background: var(--page-bg); color: var(--text-heading); text-align: left;
}
.sc-person:hover:not(:disabled) { background: var(--primary-soft); }
.sc-person:hover:not(:disabled) .sc-avatar { background: var(--primary); color: var(--on-primary); }
.sc-person:disabled { opacity: 0.5; cursor: not-allowed; }
.sc-person-name { flex: 1; font-weight: 500; font-size: 0.92rem; }
.sc-tag { font-size: 0.68rem; padding: 0.1rem 0.5rem; border-radius: 999px; }
.sc-tag.is-free { background: var(--status-ok-bg); color: #86efac; }
.sc-tag.is-busy { background: var(--status-none-bg); color: var(--text-faint); }
.sc-tag.is-leave { background: var(--status-danger-bg); color: #fca5a5; }
.sc-list-empty { margin: 0; padding: 1rem; text-align: center; color: var(--text-faint); font-size: 0.85rem; }

@media (max-width: 575.98px) {
  .sc-drawer {
    top: auto; left: 0; width: 100vw; max-height: 85vh;
    border-left: 0; border-top: 1px solid var(--line-strong); border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.35);
  }
  .sc-drawer { animation-name: sc-slide-up; }
  .sc-drawer-head { border-radius: 16px 16px 0 0; }
}

@keyframes sc-slide-up { from { transform: translateY(100%); } }

/* ส่งออกข้อความ */
.sc-export { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.6rem; }
.sc-export-day { padding: 0.75rem 0.85rem; display: flex; flex-direction: column; gap: 0.5rem; }
.sc-export-day.is-today { border-color: var(--primary); }
.sc-export-day pre {
  margin: 0; white-space: pre-wrap; word-break: break-word;
  font-family: var(--font-family); font-size: 0.82rem; color: var(--text-body); line-height: 1.5;
}
.sc-export-day .lv-change { align-self: flex-start; }

/* แผงตำแหน่ง: เพิ่มช่องและปรับเวลา */
.sc-shops { align-items: center; }
.sc-pos-name { display: flex; align-items: center; gap: 0.3rem; }
.sc-pos-edit {
  border: 0; background: transparent; color: var(--text-faint);
  width: 24px; height: 24px; border-radius: 6px; font-size: 0.8rem; line-height: 1;
}
.sc-pos-edit:hover { color: var(--primary-light); background: var(--primary-soft); }
.sc-section { display: flex; flex-direction: column; gap: 0.55rem; padding-top: 0.85rem; border-top: 1px solid var(--line); }
.sc-section-title { font-size: 0.82rem; font-weight: 600; color: var(--text-heading); }
.sc-hint { margin: -0.3rem 0 0; font-size: 0.75rem; color: var(--text-faint); }
.sc-time-form { display: flex; align-items: flex-end; gap: 0.5rem; flex-wrap: wrap; }
.sc-time-form label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.72rem; color: var(--text-faint); flex: 1; min-width: 100px; }
.sc-time-form .btn { flex: none; }
.sc-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; }
.sc-daychip input { position: absolute; opacity: 0; pointer-events: none; }
.sc-daychip span {
  display: flex; flex-direction: column; align-items: center; padding: 0.3rem 0;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--page-bg);
  font-size: 0.68rem; color: var(--text-faint); cursor: pointer; user-select: none;
}
.sc-daychip b { font-size: 0.9rem; color: var(--text-body); }
.sc-daychip input:checked + span { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-light); }
.sc-daychip input:checked + span b { color: var(--text-heading); }
.sc-daychip input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 1px; }
.sc-remove { border: 0; background: transparent; color: #fca5a5; font-size: 0.82rem; padding: 0; }
.sc-remove:hover { color: var(--status-danger); text-decoration: underline; }
.sc-type-hint { margin: -0.25rem 0 0; font-size: 0.78rem; color: var(--text-faint); }
.sc-type-hint b { color: var(--status-ok); }

/* แจ้งผลแบบลอย หลังใส่คนโดยไม่โหลดหน้า */
.sc-toasts { position: fixed; z-index: 1070; top: 76px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 0.4rem; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.sc-toast { padding: 0.55rem 0.85rem; border-radius: var(--radius); font-size: 0.85rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); background: var(--block-head-bg); color: var(--text-heading); border: 1px solid var(--line-strong); }
.sc-toast.is-ok { border-color: rgba(34, 197, 94, 0.5); }
.sc-toast.is-warn { border-color: rgba(245, 158, 11, 0.6); color: #fcd34d; }
.sc-toast.is-error { border-color: rgba(239, 68, 68, 0.6); color: #fca5a5; }
.sc-drawer-body.is-busy { opacity: 0.6; pointer-events: none; }
.sc-pos-mobile { display: none; }

/* มือถือ: ตารางเดียวกับจอคอม เหลือคอลัมน์ของวันที่เลือก แถวที่วันนั้นไม่มีช่องถูกซ่อน */
@media (max-width: 991.98px) {
  .sc-table-wrap { padding: 0.25rem 0.5rem; overflow: visible; }
  .sc-table { min-width: 0; table-layout: auto; }
  .sc-table thead { display: none; }
  .sc-table th.sc-pos { width: 112px; padding-left: 0.35rem; }
  .sc-pos-name, .sc-pos-meta { display: none !important; }
  .sc-pos-mobile { display: block; color: var(--text-heading); font-size: 0.82rem; font-weight: 500; }
  .sc-table tr.is-group > * { border-top: 0; }
  .sc-table tbody tr > * { border-bottom: 1px solid var(--line); }
  .sc-table td.is-today { background: transparent; }
  .sc-table-wrap.day-0 tbody td:not(:nth-child(2)),
  .sc-table-wrap.day-1 tbody td:not(:nth-child(3)),
  .sc-table-wrap.day-2 tbody td:not(:nth-child(4)),
  .sc-table-wrap.day-3 tbody td:not(:nth-child(5)),
  .sc-table-wrap.day-4 tbody td:not(:nth-child(6)),
  .sc-table-wrap.day-5 tbody td:not(:nth-child(7)),
  .sc-table-wrap.day-6 tbody td:not(:nth-child(8)) { display: none; }
  .sc-table-wrap.day-0 tbody tr:has(> td:nth-child(2).is-blank),
  .sc-table-wrap.day-1 tbody tr:has(> td:nth-child(3).is-blank),
  .sc-table-wrap.day-2 tbody tr:has(> td:nth-child(4).is-blank),
  .sc-table-wrap.day-3 tbody tr:has(> td:nth-child(5).is-blank),
  .sc-table-wrap.day-4 tbody tr:has(> td:nth-child(6).is-blank),
  .sc-table-wrap.day-5 tbody tr:has(> td:nth-child(7).is-blank),
  .sc-table-wrap.day-6 tbody tr:has(> td:nth-child(8).is-blank) { display: none; }
}

/* ---------- สินค้าและร้านค้า ---------- */
.pd-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); }
.pd-tabs a { padding: 6px 14px; border-radius: 9px; font-size: 0.85rem; color: var(--text-faint, #8a919c); text-decoration: none; text-align: center; }
.pd-tabs a.is-active { background: var(--flame-orange, #f29f24); color: #1b2027; font-weight: 600; }
.pd-progress { padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); }
.pd-progress b { font-size: 1.05rem; }
.pd-bar { height: 6px; margin-top: 6px; border-radius: 3px; background: rgba(0, 0, 0, 0.35); overflow: hidden; }
.pd-bar span { display: block; height: 100%; background: #f2b024; }
.pd-bar span.is-done { background: #2f9e6b; }
.pd-suppliers { max-height: 60vh; overflow-y: auto; }
.pd-supplier { display: flex; align-items: center; gap: 8px; padding: 12px 16px; min-height: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05); text-decoration: none; color: #fff; }
.pd-supplier:hover { background: rgba(255, 255, 255, 0.04); }
.pd-supplier.is-active { background: rgba(212, 160, 23, 0.14); box-shadow: inset 3px 0 0 var(--primary-light, #ffd369); }
.pd-supplier-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-count { color: var(--text-faint, #8a919c); font-size: 0.85rem; min-width: 1.5rem; text-align: right; }
.pd-warn { padding: 1px 8px; border-radius: 999px; font-size: 0.72rem; background: rgba(242, 176, 36, 0.18); color: #fbbf24; white-space: nowrap; }
.pd-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 10px; color: var(--text-faint, #8a919c);
  text-decoration: none; font-size: 0.9rem; padding: 4px 0; }
.pd-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-left: -2px; padding: 2px; }
.pd-chips::-webkit-scrollbar { display: none; }
.pd-chips a { flex: none; padding: 6px 12px; border-radius: 999px; font-size: 0.82rem; text-decoration: none;
  color: #cfd4db; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); }
.pd-chips a b { margin-left: 4px; color: var(--text-faint, #8a919c); font-weight: 600; }
.pd-chips a.is-active { background: var(--flame-orange, #f29f24); border-color: transparent; color: #1b2027; }
.pd-chips a.is-active b { color: #1b2027; }
.pd-row { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.pd-row:last-child { border-bottom: 0; }
.pd-row.is-off { opacity: 0.55; }
.pd-row-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; border: 0;
  background: none; color: inherit; text-align: left; }
.pd-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pd-row-name { font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-row-sub { font-size: 0.78rem; color: var(--text-faint, #8a919c); }
.pd-row-sub b { color: #e5e7eb; font-weight: 600; }
.pd-row-sub b.is-missing { color: #fbbf24; font-weight: 500; }
.pd-row-caret { color: var(--text-faint, #8a919c); transition: transform 0.15s; }
.pd-row-head[aria-expanded="true"] .pd-row-caret { transform: rotate(180deg); }
.pd-edit { padding: 0 16px 14px; }
.pd-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pd-fields label { display: flex; flex-direction: column; gap: 3px; margin: 0; min-width: 0; }
.pd-fields label > span { font-size: 0.72rem; color: var(--text-faint, #8a919c); }
.pd-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 1080;
  padding: 8px 16px; border-radius: 999px; background: var(--block-head-bg, #2d333c); border: 1px solid #2a3040;
  max-width: calc(100% - 32px); text-align: center; font-size: 0.9rem; }
@media (max-width: 991.98px) {
  .pd-tabs { width: 100%; }
  .pd-tabs a { flex: 1; padding: 8px 10px; }
  .pd-suppliers { max-height: none; }
  .pd-toast { bottom: calc(var(--tabbar-h, 54px) + env(safe-area-inset-bottom) + 12px); }
  .pd-page .form-control, .pd-page .form-select { font-size: 16px; }
}
@media (min-width: 992px) {
  /* จอใหญ่กางช่องแก้ไว้เสมอ ไล่ตั้งค่าหลายแถวได้โดยไม่ต้องแตะทีละแถว */
  .pd-edit { display: block !important; }
  .pd-row-caret { display: none; }
  .pd-row-head { pointer-events: none; padding-bottom: 8px; }
  .pd-fields { grid-template-columns: 1fr 1fr 120px 120px; }
}
.st-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.st-grid input { display: none; }
.st-grid span { display: inline-block; padding: 7px 14px; border-radius: 999px; border: 1px solid #3a4250;
  color: #aab1bc; font-size: .85rem; cursor: pointer; user-select: none; }
.st-grid input:checked + span { background: rgba(212, 160, 23, 0.18); border-color: #d4a017; color: #fff; }

/* ความถนัดในตารางงาน */
.sc-tag.is-skilled { background: rgba(47, 158, 107, 0.18); color: #6ee7b7; }
.sc-unskilled { display: block; color: #fbbf24; font-size: 0.72rem; }
.sc-pos-tabs { flex: none; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.sc-pos-tabs a { flex: 1; white-space: nowrap; padding: 8px 10px; }
.sc-holders label { margin: 0; }
.sc-sticky-save { position: sticky; bottom: 0; box-shadow: 0 -8px 16px var(--glass, rgba(45, 51, 60, 0.97)); }
.sc-drawer .search-box-wrap input { background-color: var(--page-bg) !important; border-color: var(--line) !important; }
.sc-quick { display: flex; flex-direction: column; gap: 0.5rem; }
.sc-quick-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.82rem; font-weight: 600; color: var(--text-heading); }
.sc-quick-head i { color: #6ee7b7; }
.sc-count { min-width: 1.6rem; padding: 0 0.45rem; border-radius: 999px; text-align: center; font-size: 0.75rem;
  background: rgba(47, 158, 107, 0.18); color: #6ee7b7; }
.sc-quick-empty { margin: 0; padding: 0.75rem; border: 1px dashed var(--line); border-radius: var(--radius-sm, 10px);
  font-size: 0.8rem; color: var(--text-faint); text-align: center; }
.sc-unskilled i { margin-right: 2px; }
.sc-swap-from { display: block; font-size: 0.72rem; color: var(--text-faint); font-weight: 400; }
.sc-tag.is-warn { background: rgba(242, 176, 36, 0.18); color: #fbbf24; }

/* ---------- ใบสั่งซื้อ ---------- */
.od-status { flex: none; padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; white-space: nowrap;
  background: rgba(255, 255, 255, 0.06); color: #cfd4db; }
.od-status.is-pending { background: rgba(59, 130, 196, 0.2); color: #93c5fd; }
.od-status.is-approved { background: rgba(242, 176, 36, 0.18); color: #fbbf24; }
.od-status.is-sent { background: rgba(217, 119, 6, 0.2); color: #fdba74; }
.od-status.is-received { background: rgba(47, 158, 107, 0.18); color: #6ee7b7; }
.od-status.is-rejected, .od-status.is-cancelled { background: rgba(239, 68, 68, 0.14); color: #fca5a5; }
.od-line { display: grid; grid-template-columns: 1fr 96px 96px; gap: 8px; align-items: end; padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.od-line:last-child { border-bottom: 0; }
.od-line.is-due { background: rgba(242, 176, 36, 0.05); }
.od-line-main { min-width: 0; align-self: center; }
.od-in { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.od-in > span { font-size: 0.7rem; color: var(--text-faint, #8a919c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.od-items { border-radius: 10px; background: var(--page-bg, #222831); overflow: hidden; }
.od-row { display: flex; gap: 8px; padding: 6px 12px; font-size: 0.88rem; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.od-qty { color: var(--primary-light, #ffd369); }
.od-total { font-weight: 600; border-bottom: 0; }
.od-review { font-size: 0.82rem; padding: 6px 10px; border-radius: 8px; background: rgba(59, 130, 196, 0.12); color: #bfdbfe; }
/* fixed ไม่ใช่ sticky เพราะ body ตั้ง overflow-x: hidden ซึ่งทำให้ sticky ไม่ติดจอ */
.od-form { padding-bottom: 88px; }
.od-bar { position: fixed; z-index: 1030; right: 24px; bottom: 24px; width: min(440px, calc(100% - 48px));
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px;
  background: var(--glass, rgba(45, 51, 60, 0.97)); border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
@media (max-width: 991.98px) {
  .od-bar { left: 12px; right: 12px; width: auto; bottom: calc(var(--tabbar-h, 54px) + env(safe-area-inset-bottom) + 8px); }
}
@media (max-width: 575.98px) {
  .od-line { grid-template-columns: 1fr 1fr; }
  .od-line-main { grid-column: 1 / -1; }
}

/* ---------- สรุปสต๊อก ---------- */
.sk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sk-stats > div { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); }
.sk-stats b { display: block; font-size: 1.15rem; color: #fff; }
.sk-stats span { font-size: 0.72rem; color: var(--text-faint, #8a919c); }
.sk-stats .is-bad b { color: #fca5a5; }
.sk-stats .is-low b { color: #fbbf24; }
.sk-section { border-radius: 14px; overflow: hidden; background: var(--block-bg, #2d333c); border: 1px solid rgba(255, 255, 255, 0.06); }
.sk-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06); color: #cbd5e1; }
.sk-head > div { flex: 1; min-width: 0; }
.sk-head i { color: #6ee7b7; }
.sk-progress { flex: none; font-size: 0.75rem; padding: 2px 10px; border-radius: 999px; background: rgba(242, 176, 36, 0.16); color: #fbbf24; }
.sk-progress.is-done { background: rgba(47, 158, 107, 0.16); color: #6ee7b7; }
.sk-cols { display: none; }
.sk-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "main num" "main state";
  column-gap: 12px; row-gap: 2px; align-items: center; padding: 10px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.sk-row:last-child { border-bottom: 0; }
.sk-main { grid-area: main; min-width: 0; }
.sk-num { grid-area: num; text-align: right; font-size: 1.2rem; font-weight: 700; color: #fff; line-height: 1.1; white-space: nowrap; }
.sk-num small { font-size: 0.72rem; font-weight: 400; color: var(--text-faint, #8a919c); }
.sk-num.is-low { color: #fbbf24; }
.sk-state { grid-area: state; text-align: right; }
.sk-cell { display: none; }
.sk-in { color: #6ee7b7 !important; }
.sk-out { color: #fca5a5 !important; }
.sk-tag { padding: 1px 8px; border-radius: 999px; font-size: 0.7rem; background: rgba(255, 255, 255, 0.06); color: var(--text-faint, #8a919c); white-space: nowrap; }
.sk-tag.is-ok { background: rgba(47, 158, 107, 0.16); color: #6ee7b7; }
.sk-tag.is-bad { background: rgba(239, 68, 68, 0.16); color: #fca5a5; }
.sk-tag.is-low { background: rgba(242, 176, 36, 0.18); color: #fbbf24; }
@media (max-width: 575.98px) {
  .sk-stats { grid-template-columns: repeat(2, 1fr); }
}
/* จอใหญ่เป็นตาราง ที่มาของยอดแยกคอลัมน์ อ่านไล่แนวตั้งได้ */
@media (min-width: 768px) {
  .sk-cols, .sk-row { display: grid; grid-template-columns: minmax(0, 2.4fr) repeat(4, 0.7fr) 1fr 0.9fr;
    grid-template-areas: none; column-gap: 12px; align-items: center; }
  .sk-cols { padding: 6px 16px; font-size: 0.72rem; color: var(--text-faint, #8a919c); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
  .sk-cols span:not(:first-child) { text-align: right; }
  .sk-main, .sk-num, .sk-state { grid-area: auto; }
  .sk-cell { display: block; text-align: right; font-size: 0.9rem; color: #cbd5e1; }
  .sk-mobile { display: none; }
  .sk-num { font-size: 1.05rem; }
}

/* ---------- หน้าตรวจนับ ---------- */
.ck-guide { padding: 12px 14px; border-radius: 12px; background: rgba(59, 130, 196, 0.1);
  border: 1px solid rgba(59, 130, 196, 0.3); font-size: 0.85rem; color: #cbd5e1; }
.ck-guide ol { padding-left: 1.2rem; }
.ck-guide li { margin-bottom: 4px; }
.ck-chip { display: inline-block; padding: 0 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 0.8rem; }
.ck-count { display: flex; flex-direction: column; align-items: center; gap: 1px; margin: 0; width: 104px; }
.ck-count > span { font-size: 0.66rem; color: var(--text-faint, #8a919c); }
.ck-count input { width: 104px; font-size: 1.15rem; }
.ck-diff { margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: 0.7rem; }
.ck-diff.is-ok { background: rgba(47, 158, 107, 0.16); color: #6ee7b7; }
.ck-diff.is-bad { background: rgba(239, 68, 68, 0.16); color: #fca5a5; }
.ck-calc { font-size: 0.8rem; color: #e5e7eb; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); }
.ck-tab-duty { font-size: 0.66rem; font-weight: 400; opacity: 0.75; max-width: 140px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.ck-duty { display: block; padding: 8px 12px; border-radius: 10px;
  background: rgba(47, 158, 107, 0.1); border: 1px solid rgba(47, 158, 107, 0.25); font-size: 0.85rem; color: #cbd5e1; }
.ck-duty i { color: #6ee7b7; }
.st-map-row { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.st-map-row:last-child { border-bottom: 0; }
.st-map { display: flex; align-items: center; gap: 10px; padding: 8px 14px; }
.st-map-login { display: flex; gap: 6px; padding: 0 14px 10px; }
.st-map-name { flex: 1; min-width: 0; }
.st-map select { width: 55%; }
.ck-me { padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(110, 231, 183, 0.35); background: transparent;
  color: #e5e7eb; font-size: 0.9rem; }
.ck-me.is-me { background: #2f9e6b; border-color: #2f9e6b; color: #fff; font-weight: 600; }
.sc-login { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px;
  background: var(--page-bg, #222831); margin-bottom: 8px; }
.sc-login-name { display: flex; align-items: baseline; gap: 8px; }
.sc-login-name b { font-size: 1.05rem; color: #fff; }
.ck-login { font-size: 0.8rem; color: var(--text-faint, #8a919c); padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.ck-login b { color: #fff; }
.ck-me.is-other { border-style: dashed; }
.pd-shops a { flex: 1; }
.pd-count small { font-size: 0.68rem; opacity: 0.7; }
.st-bulk { position: sticky; top: 8px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 12px; background: var(--glass, rgba(45, 51, 60, 0.97)); border: 1px solid rgba(242, 176, 36, 0.4); }
.st-bulk select { width: auto; }
.ck-before { display: flex; flex-direction: column; align-items: center; min-width: 56px; }
.ck-before span { font-size: 0.66rem; color: var(--text-faint, #8a919c); }
.ck-before b { font-size: 1.15rem; color: #cbd5e1; line-height: 38px; }
.ck-expand { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-faint, #8a919c); cursor: pointer; }