/* TEGH นัดหมาย — ธีมเจ้าหน้าที่: app shell เต็มจอ โทนน้ำเงินทันสมัย + responsive
   โทนสว่างอย่างเดียว — ตามภาษาดีไซน์ Trackado */
body.staff {
  /* รับ token กลางจาก :root (style.css) — ทับเฉพาะ alias ที่หน้าอื่นเรียกใช้ */
  --card: var(--card-bg);
  --soft: var(--field-bg);
  --line: var(--card-border);
  --muted: var(--text-faint);
}

/* รีเซ็ต layout ของ base (เดิม center column) → full-width app */
body.staff {
  display: block;
  padding: 0;
  max-width: none;
  background: var(--canvas);
}
body.staff .topbar,
body.staff .footnote { display: none; }   /* sidebar มี brand แล้ว */

/* flash → toast ลอยด้านบน กึ่งกลางจอ */
body.staff .alert[data-flash] {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 50;
  max-width: 460px; width: auto; box-shadow: var(--shadow);
  animation: toastIn .25s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(-10px); } }
body.staff .alert[data-flash].alert-hide { transform: translateX(-50%) translateY(-10px); }

/* ===== App shell ===== */
.shell { display: grid; grid-template-columns: var(--side-w) 1fr; min-height: 100vh;
  transition: grid-template-columns .22s cubic-bezier(.4,0,.2,1); }

/* ----- Sidebar (Trackado navy) ----- */
.side {
  background: var(--side-bg);
  border-right: 1px solid rgba(0,0,0,.18);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.side-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 18px 18px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.side-brand .logo {
  width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto;
  background: linear-gradient(135deg, #54c08a, #46a876);
  display: grid; place-items: center; color: #fff; font-size: 1.3rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.side-brand .nm { font-weight: 800; font-size: 1.1rem; color: #fff; line-height: 1.1; }
.side-brand .nm small { display: block; font-weight: 500; font-size: .68rem; color: var(--side-text-faint); margin-top: 2px; }
/* ปุ่มย่อ/ขยายเมนู (chevron) */
.side-collapse { margin-left: auto; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.14); background: transparent; color: var(--side-text-faint);
  cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s, transform .15s; }
.side-collapse::before { content: "«"; font-size: 1.05rem; font-weight: 700; line-height: 1; }
.side-collapse:hover { background: rgba(255,255,255,.08); color: #fff; }

.side-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 12px 8px; display: flex; flex-direction: column; gap: 2px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.side-nav::-webkit-scrollbar { width: 6px; }
.side-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 6px; }
.side-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); }
.side-nav::-webkit-scrollbar-track { background: transparent; }
.side-nav .grp { font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--side-text-faint); padding: 14px 12px 6px; }
.side-nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 8px;
  color: var(--side-text); text-decoration: none; font-weight: 600; font-size: .92rem;
  transition: background .14s, color .14s;
}
.side-nav a .ic { font-size: 1.1rem; width: 26px; height: 26px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 7px; background: rgba(255,255,255,.07); color: #fff; }
.side-nav a:hover { background: var(--side-hover); color: #fff; }
.side-nav a.on { background: var(--side-active); color: #fff; font-weight: 700; box-shadow: inset 3px 0 0 var(--primary); }
.side-nav a.on .ic { background: var(--primary); }

.side-foot { padding: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.side-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px; }
.side-user .av { width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 800; flex: 0 0 auto; }
.side-user .who { font-size: .85rem; font-weight: 700; line-height: 1.15; color: #fff; }
.side-user .who small { display: block; font-weight: 500; color: var(--side-text-faint); font-size: .72rem; }
.side-foot .logout { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: var(--side-text); }
.side-foot .logout:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.22); }

/* ===== สถานะย่อเมนู (เหลือไอคอน) — ใช้ปุ่ม chevron ในแถบข้าง ===== */
body.staff.nav-collapsed { --side-w: 78px; }
body.staff.nav-collapsed .side-brand { flex-direction: column; gap: 10px; padding: 16px 8px; }
body.staff.nav-collapsed .side-brand .nm { display: none; }
body.staff.nav-collapsed .side-collapse { margin-left: 0; }
body.staff.nav-collapsed .side-collapse::before { content: "»"; }
body.staff.nav-collapsed .side-nav { padding: 12px 10px; align-items: center; }
/* หมวด → เส้นคั่นบาง ๆ แทนข้อความ (กันเมนูติดกันเป็นพรืด) */
body.staff.nav-collapsed .side-nav .grp { height: 0; padding: 0; margin: 9px 12px; border-top: 1px solid rgba(255,255,255,.1);
  font-size: 0; text-indent: -9999px; overflow: hidden; }
body.staff.nav-collapsed .side-nav .grp:first-child { display: none; }
body.staff.nav-collapsed .side-nav a { justify-content: center; width: 48px; padding: 12px 0; position: relative; }
body.staff.nav-collapsed .side-nav a .lbl { display: none; }
body.staff.nav-collapsed .side-nav a .ic { font-size: 1.35rem; }
/* ป้ายชื่อลอย (tooltip) ตอนย่อเมนู */
body.staff.nav-collapsed .side-nav a:hover::after {
  content: attr(title); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  background: #35404f; color: #fff; padding: 6px 11px; border-radius: 8px;
  font-size: .8rem; font-weight: 600; white-space: nowrap; z-index: 80; pointer-events: none;
  box-shadow: 0 8px 20px rgba(16,29,53,.28); }
body.staff.nav-collapsed .side-user { justify-content: center; }
body.staff.nav-collapsed .side-user .who { display: none; }
body.staff.nav-collapsed .side-foot .logout .lbl { display: none; }

/* ----- Main work area ----- */
.work { display: flex; flex-direction: column; min-width: 0; }
.work-head {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 28px; background: rgba(250,244,234,.82); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--card-border);
}
.work-head h1 { font-size: 1.35rem; font-weight: 800; color: var(--text); margin: 0; }
.work-head .sub { font-size: .82rem; color: var(--text-faint); margin-top: 2px; }
.work-body { padding: 24px 28px 48px; width: 100%; }
/* ฟอร์ม/การ์ดเดี่ยว (ตั้งค่า/เพิ่มข้อมูล) ไม่ให้ยืดเต็มจอกว้างจนอ่านยาก — ส่วนกริด/toolbar ใช้เต็มกว้าง */
.work-body > .bk,
.work-body > form:not(.toolbar) { max-width: none; }
/* การ์ดที่ต้องการเต็มกว้าง (พื้นหลังเต็มจอ แต่จัดช่องกรอกด้านในเอง) */
.work-body > .bk.panel-wide { max-width: none; }
/* กริดช่องกรอก (เช่น ราคายางหลายประเภท) — เติมความกว้างหลายคอลัมน์ */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 4px 28px; }
/* ฟอร์มตั้งค่าเต็มกว้าง + จัดการ์ดเป็นกริด */
.work-body > form.panel-wide { max-width: none; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; align-items: start; }
.settings-grid .bk { margin-bottom: 0 !important; }

/* ===== component restyle (เขียว ทันสมัย) ===== */
body.staff .card { box-shadow: none; border: none; background: transparent; padding: 0; max-width: none; }

/* toolbar = แถบกรองทรงการ์ด */
body.staff .toolbar {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius);
  padding: 14px; box-shadow: var(--shadow-sm); margin-bottom: 18px; align-items: center;
}
body.staff input, body.staff select, body.staff textarea {
  border-radius: 10px; border: 1.5px solid var(--field-border); background-color: var(--field-bg);
  padding: 10px 12px; transition: border-color .14s, box-shadow .14s;
}
body.staff input:focus, body.staff select:focus, body.staff textarea:focus { box-shadow: 0 0 0 3px var(--info-soft); border-color: var(--info); }

/* ปุ่ม — Trackado: หลัก=เขียวทึบ, มุมมนเล็ก */
body.staff .btn-sm { border-radius: 6px; padding: 9px 14px; font-size: .85rem; transition: filter .14s, transform .05s; }
/* <a class="btn-sm"> ติดขีดเส้นใต้จาก default ของเบราว์เซอร์ ทำให้ดูเป็นลิงก์ปนปุ่ม
   (ปุ่มที่เป็น <button> ไม่เป็น) — บังคับให้ทุกปุ่มหน้าตาเหมือนกันทั้งระบบ */
body.staff a.btn-sm { text-decoration: none; }
body.staff .btn-sm:hover { filter: brightness(.98); }
body.staff .btn-sm:active { transform: translateY(1px); }
body.staff .btn-sm.primary { background: var(--primary); border-color: transparent; color: #fff; box-shadow: 0 2px 6px rgba(84,192,138,.25); }
body.staff .btn-sm.info { background: var(--info); border-color: transparent; color: #fff; box-shadow: 0 2px 6px rgba(63,130,196,.25); }
body.staff .btn-primary { background: var(--primary); box-shadow: 0 2px 6px rgba(84,192,138,.25); }

/* การ์ดรายการ (booking / member / user / audit / queue) */
body.staff .bk {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow-sm); transition: box-shadow .16s, transform .16s, border-color .16s;
}
body.staff .bk:hover { box-shadow: var(--shadow); border-color: #cdd5e0; }
body.staff .bk-store { font-size: 1.05rem; }
body.staff .bk-code { color: var(--primary); }
body.staff .bk-grid { gap: 7px 18px; font-size: .85rem; }

/* รายการ booking แสดงเป็นกริดหลายคอลัมน์บนจอใหญ่ */
.list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }

/* ===== ตารางมาตรฐาน (data table) ===== */
.tbl-wrap {
  width: 100%; overflow-x: auto;
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
table.tbl { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.tbl thead th {
  background: var(--field-bg); color: var(--text-soft);
  text-align: left; font-weight: 700; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  padding: 13px 14px; white-space: nowrap; border-bottom: 1px solid var(--card-border);
  position: sticky; top: 0; z-index: 2;
}
table.tbl tbody td { padding: 12px 14px; border-bottom: 1px solid var(--card-border); vertical-align: middle; }
table.tbl tbody tr:last-child td { border-bottom: none; }
table.tbl tbody tr:hover { background: var(--field-bg); }
.tbl .t-main { font-weight: 700; color: var(--text); }
.tbl .t-code { color: var(--info); font-weight: 700; font-size: .82rem; }
.tbl .t-sub { color: var(--text-faint); font-size: .8rem; }
.tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl td.nowrap { white-space: nowrap; }
.tbl .t-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tbl .t-actions form { display: inline; }
.tbl details.rs { margin: 0; }
.tbl details.rs > summary { margin: 0; }
.tbl .mono { font-family: ui-monospace, "Cascadia Code", monospace; font-size: .82rem; }
.tbl-empty { padding: 36px 14px; text-align: center; color: var(--text-faint); }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }

/* typeahead ค้นหาร้าน (ฟอร์มสมาชิก) */
.comp-results { border: 1px solid var(--card-border); border-radius: 10px; margin-top: 4px; max-height: 240px; overflow-y: auto; background: var(--card-bg); box-shadow: var(--shadow-sm); }
.comp-item { padding: 9px 12px; cursor: pointer; font-size: .9rem; border-bottom: 1px solid var(--card-border); }
.comp-item:last-child { border-bottom: none; }
.comp-item:hover { background: var(--primary-soft); }
.comp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.comp-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--primary-soft); color: var(--primary-dark); border-radius: 999px; padding: 5px 12px; font-size: .85rem; font-weight: 600; }
.comp-chip b { cursor: pointer; font-weight: 800; opacity: .7; }
.comp-chip b:hover { opacity: 1; }

/* status badge */
body.staff .st { font-size: .72rem; padding: 4px 11px; }

/* ===== Dashboard ทันสมัย: KPI + กราฟแท่ง ===== */
/* ทั้งสองหน้ารายงานมีการ์ดละ 6 ใบพอดี — auto-fit เดิมได้ 5+1 ทิ้งใบสุดท้ายโดดอีกแถว
   จึงกำหนดจำนวนคอลัมน์ให้หาร 6 ลงตัวเสมอ
   จอเล็กกว่า 1024px มีกฎ !important ของ responsive คุมอยู่แล้ว (2 คอลัมน์ / 1 คอลัมน์)
   ตรงนี้จึงดูแลเฉพาะจอ ≥1024px: 3 คอลัมน์ (3+3) และ 6 คอลัมน์เมื่อกว้างพอจริง */
.kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
@media (min-width: 1750px) { .kpi-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kpi {
  display: flex; align-items: center; gap: 15px;
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow-sm);
  transition: box-shadow .16s, transform .16s;
}
.kpi:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
/* Trackado: ไอคอนวงกลมสีทึบ + สัญลักษณ์ขาว */
.kpi-ic { width: 54px; height: 54px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-size: 1.6rem; color: #fff; }
.kpi-ic .ic-svg { color: #fff; }
.kpi-ic.ic-green  { background: #54c08a; color: #fff; }
.kpi-ic.ic-blue   { background: #638ca5; color: #fff; }
.kpi-ic.ic-amber  { background: #e8b71a; color: #fff; }
.kpi-ic.ic-sky    { background: #6dc6cd; color: #fff; }
.kpi-ic.ic-violet { background: #ae84a4; color: #fff; }
.kpi-ic.ic-orange { background: #f46800; color: #fff; }
.kpi-val { font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--text); }
.kpi-lbl { font-size: .8rem; color: var(--text-faint); margin-top: 5px; text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }

/* หัวข้อ section + เมนูลัด (nav cards) */
.dash-sec { font-size: 1rem; font-weight: 800; color: var(--text); margin: 22px 0 12px; }
.navcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.navcard {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px;
  padding: 14px 16px; text-decoration: none; color: var(--text); box-shadow: var(--shadow-sm);
  transition: box-shadow .14s, transform .14s, border-color .14s;
}
.navcard:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: #cdd5e0; }
.navcard .ic { font-size: 1.7rem; }
.navcard .nv-t { font-weight: 800; color: var(--primary-dark); margin-top: 4px; }
.navcard .nv-s { font-size: .76rem; color: var(--text-faint); }

.dash-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; align-items: start; }
.dash-panels .panel { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); }
/* หัว section แบบ Trackado — แถบสีเทา-น้ำเงิน ตัวอักษรขาว (ใช้ทั้ง .panel-h และ .card-h) */
.panel-h, .bk .card-h {
  display: flex; align-items: center; gap: 10px;
  background: var(--panelhead); color: #fff;
  font-size: .92rem; font-weight: 700; letter-spacing: .01em;
  margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-sm); border: none;
}
.panel-h strong, .bk .card-h strong { color: #fff; font-weight: 700; }
.panel-h .ic-svg, .bk .card-h .ic-svg { color: #fff; }
.bar-row { margin-bottom: 13px; }
.bar-row:last-child { margin-bottom: 0; }
.bar-top { display: flex; justify-content: space-between; gap: 12px; font-size: .86rem; margin-bottom: 5px; }
.bar-top span { color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-top b { color: var(--primary-dark); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.bar-track { height: 9px; background: #e8edf5; border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, #54c08a, #46a876); border-radius: 999px; min-width: 4px; transition: width .5s ease; }

/* dashboard cards (เก่า — เผื่อ template อื่นยังใช้) */
body.staff .dash-cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
body.staff .dash-card {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow-sm);
}
body.staff .dash-card .val { font-size: 2rem; }
body.staff .dash-card .lbl { font-size: .8rem; margin-bottom: 6px; }
body.staff .dash-row { padding: 7px 0; }

/* wallboard tiles (เก่า) */
body.staff .wall-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
body.staff .wall-tile { box-shadow: var(--shadow-sm); }

/* ===== จอคิว: จัดกลุ่มตามช่วงเวลา ===== */
.slot-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.slot-block { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); }
.slot-head { display: flex; align-items: center; justify-content: space-between;
  background: var(--primary-soft); color: var(--primary-dark); padding: 12px 16px; font-weight: 800; }
.slot-head .slot-time { font-size: 1.05rem; }
.slot-head .slot-cnt { background: #fff; border-radius: 999px; padding: 2px 12px; font-size: .82rem; }
.slot-items { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.qrow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 11px; background: var(--field-bg); border-left: 5px solid var(--card-border); }
.qrow.s-pending   { border-left-color: #e8b71a; }
.qrow.s-confirmed { border-left-color: #638ca5; }
.qrow.s-arrived   { border-left-color: var(--success); background: var(--success-soft); }
.qrow.s-completed { border-left-color: #7d8c81; opacity: .72; }
.qrow.s-cancelled { border-left-color: var(--danger); opacity: .55; }
.qrow-no { font-size: 1.7rem; font-weight: 800; color: var(--primary-dark); min-width: 1.4em; text-align: center; font-variant-numeric: tabular-nums; }
.qrow-mid { min-width: 0; display: flex; flex-direction: column; }
.qrow-store { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qrow-sub { font-size: .78rem; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* details (เลื่อนนัด / export) */
body.staff details.rs > summary { color: var(--primary-dark); }

/* ===== หน้า login (ไม่มี sidebar) ===== */
body.auth {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px;
  background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, rgba(255,255,255,0) 55%),
              linear-gradient(165deg, var(--bg-grad-1), var(--bg-grad-2)) fixed;
}
.auth-card {
  width: 100%; max-width: 400px; background: var(--card-bg);
  border: 1px solid var(--card-border); border-radius: 20px;
  box-shadow: 0 16px 40px rgba(84,192,138,.16); padding: 0; overflow: hidden;
}
.auth-head {
   color: #fff;
  padding: 26px 24px; text-align: center;
}
.auth-head .logo { font-size: 2.2rem; }
.auth-head h1 { font-size: 1.3rem; font-weight: 800; margin: 8px 0 2px; color: #fff; }
.auth-head p { font-size: .85rem; opacity: .92; margin: 0; }
.auth-body { padding: 24px 24px 26px; }
/* ช่องรหัสผ่าน + ปุ่มแสดง/ซ่อน (👁) */
.pw-wrap { position: relative; }
.pw-wrap input { width: 100%; padding-right: 46px; }
.pw-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; background: transparent; cursor: pointer;
  font-size: 1.05rem; line-height: 1; border-radius: 8px; padding: 0;
  display: grid; place-items: center; opacity: .75; transition: opacity .14s, background .14s;
}
.pw-toggle:hover { opacity: 1; background: var(--field-bg); }
/* จดจำการเข้าสู่ระบบ */
.auth-body .remember { display: flex; align-items: center; gap: 9px; margin: 4px 0 16px;
  font-size: .9rem; font-weight: 600; color: var(--text-soft); cursor: pointer; user-select: none; }
.auth-body .remember input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); cursor: pointer; flex: 0 0 auto; }

/* ===================================================================== *
 * Admin polish — กันล้น (overflow) + ทันสมัยสม่ำเสมอทุกหน้า
 * ===================================================================== */
/* input/select/textarea ไม่มีทางล้นคอนเทนเนอร์ */
body.staff input, body.staff select, body.staff textarea { max-width: 100%; }
body.staff textarea { resize: vertical; min-height: 80px; }

/* ฟอร์มแนวนอน (rs-inline) — ห่อบรรทัด + ช่องยุบได้ ไม่ดันขอบ */
body.staff .rs-inline { flex-wrap: wrap; align-items: center; }
body.staff .rs-inline input,
body.staff .rs-inline select { min-width: 0; }

/* การ์ด .bk: หัวข้อ (strong ตัวแรก) ให้เป็นหัวเรื่องชัดเจน + เส้นคั่นบาง */
body.staff .bk > strong:first-child {
  display: block; font-size: 1rem; font-weight: 800; color: var(--text);
  padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--card-border);
}

/* ตาราง: ข้อความยาวตัดบรรทัดได้ (กันดันตารางกว้างเกิน) */
.tbl td { word-break: break-word; }
.tbl .t-actions { row-gap: 6px; }
.tbl .t-actions .rs-inline { flex-wrap: nowrap; }   /* ปุ่ม inline ในตารางอยู่บรรทัดเดียว */
/* input ในเซลล์ตาราง (แก้ชื่อร้าน ฯลฯ) — ยืดเต็มเซลล์แต่ยุบได้ */
.tbl td input[type="text"], .tbl td input[type="password"] { width: 100%; min-width: 0; }

/* แถบกรอง/toolbar: ห่อบรรทัดเมื่อแคบ */
body.staff .toolbar { flex-wrap: wrap; }

/* ปุ่มหลัก/รอง: เงา + โฟกัสชัด (เข้าถึงง่าย) */
body.staff .btn-sm:focus-visible,
body.staff input:focus-visible,
body.staff select:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

/* การ์ด/แผงทั้งหมด: มุมมน + เงานุ่มสม่ำเสมอ (ทันสมัย) */
body.staff .bk { border-radius: var(--radius); }

/* ===== รายการนัด: คอลัมน์สถานะ + จัดการ ให้กะทัดรัด เป็นระเบียบ ===== */
.tbl .st { white-space: nowrap; display: inline-block; }
.tbl .t-actions { gap: 6px; align-items: flex-start; }
.tbl .t-actions form { display: inline-flex; margin: 0; }
.tbl .t-actions .btn-sm { padding: 7px 11px; font-size: .78rem; white-space: nowrap; border-radius: 9px; }
/* ปุ่ม "เลื่อน" (details) ให้หน้าตาเหมือนปุ่มอื่น */
.tbl .t-actions details.rs { display: inline-block; }
.tbl .t-actions details.rs > summary {
  list-style: none; cursor: pointer; padding: 7px 11px; border-radius: 9px; margin: 0;
  border: 1.5px solid var(--card-border); background: var(--field-bg);
  color: var(--primary-dark); font-size: .78rem; font-weight: 700; white-space: nowrap;
}
.tbl .t-actions details.rs > summary::-webkit-details-marker { display: none; }
.tbl .t-actions details.rs[open] > summary { background: var(--primary-soft); border-color: var(--primary); }
.tbl .t-actions details.rs[open] { display: block; flex-basis: 100%; }
.tbl .t-actions details.rs .rs-inline { margin-top: 8px; }

/* ===== Responsive: มือถือ → sidebar เป็นแถบบนเลื่อนแนวนอน ===== */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .side {
    position: sticky; top: 0; height: auto; width: 100%;
    flex-direction: row; align-items: center; gap: 6px;
    border-right: none; border-bottom: 1px solid var(--card-border);
    padding: 8px 10px; overflow-x: auto; z-index: 20;
  }
  .side-brand { border: none; padding: 6px 8px; flex: 0 0 auto; }
  .side-brand .nm small { display: none; }
  .side-collapse { display: none; }   /* มือถือ: แถบแนวนอน ไม่ต้องย่อ */
  .side-nav { flex-direction: row; padding: 0; gap: 4px; overflow: visible; }
  .side-nav .grp { display: none; }
  .side-nav a { padding: 9px 11px; white-space: nowrap; font-size: .85rem; }
  .side-nav a .lbl { display: none; }     /* มือถือโชว์เฉพาะไอคอน ประหยัดที่ */
  .side-nav a .ic { font-size: 1.25rem; }
  .side-foot { display: flex; align-items: center; border: none; padding: 6px; margin-left: auto; flex: 0 0 auto; }
  .side-user { display: none; }
  .work-head { padding: 14px 16px; }
  .work-head h1 { font-size: 1.15rem; }
  .nav-toggle { display: none; }   /* มือถือ: sidebar เป็นแถบบนอยู่แล้ว ไม่ต้องยุบ */
  .work-body { padding: 16px 14px 40px; }
  body.staff .toolbar { align-items: stretch; }   /* คง row+wrap — ไม่ใช้ column (กัน flex-basis ไปยืดความสูง) */
  .list-grid { grid-template-columns: 1fr; }
}

/* แถบแจ้ง "มีข้อมูลใหม่" (อัปเดตอัตโนมัติ — แสดงเมื่อรีเฟรชไม่ได้ทันที เช่นกำลังพิมพ์/เปิดแผง) */
.live-banner {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 9999; border: 0; cursor: pointer;
  background: var(--primary); color: #fff; font-weight: 700; font-size: .9rem;
  padding: 10px 18px; border-radius: 999px;
  box-shadow: 0 6px 20px rgba(84,192,138, .35);
  animation: liveIn .25s ease-out;
}
.live-banner:hover { background: var(--primary-dark); }
@keyframes liveIn { from { opacity: 0; transform: translate(-50%, 10px); } }

/* ============================================================
   Data-dense admin polish — สำหรับหน้าจัดการ/ข้อมูลเยอะ ๆ
   ============================================================ */
/* เลื่อนแนวนอนลื่น + สกรอลล์บาร์โทนเอิร์ธ */
.tbl-wrap { position: relative; scrollbar-width: thin; scrollbar-color: #cdd5e0 transparent; }
.tbl-wrap::-webkit-scrollbar { height: 10px; }
.tbl-wrap::-webkit-scrollbar-thumb { background: #cdd5e0; border-radius: 999px; border: 2px solid var(--card-bg); }
.tbl-wrap::-webkit-scrollbar-track { background: transparent; }

/* บรรทัดนับผลลัพธ์เหนือตาราง */
.tbl-count { font-size: .82rem; color: var(--text-faint); font-weight: 600; margin: 0 2px 10px; }

/* pager แบบปุ่ม (ใช้ได้กับ <a>/<span class="pg"> ใน .pager) */
.pager { gap: 10px; flex-wrap: wrap; }
.pager a, .pager .pg {
  display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px;
  padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--card-border);
  background: var(--card-bg); color: var(--text); font-weight: 700; font-size: .85rem;
  text-decoration: none; box-shadow: var(--shadow-sm); transition: all .14s;
}
.pager a:hover { border-color: var(--primary); color: var(--primary-dark); transform: translateY(-1px); }
.pager .pg.cur {  color: #fff; border-color: transparent; }
.pager .pg.muted, .pager a.muted { opacity: .45; pointer-events: none; }

/* ความหนาแน่นกระชับ (ใส่ class .dense ที่ table.tbl เมื่อข้อมูลเยอะมาก) */
table.tbl.dense thead th { padding: 8px 12px; }
table.tbl.dense tbody td { padding: 7px 12px; font-size: .84rem; }

/* แถบกรอง/เครื่องมือ: ติดใต้หัวเพจเมื่อเลื่อน (ตารางยาว ๆ ยังกรองได้สะดวก) */
body.staff .toolbar.sticky { position: sticky; top: 64px; z-index: 9; box-shadow: var(--shadow); }

/* หัวข้อย่อยคั่นส่วน (จัดกลุ่มการจัดการ) */
.sec-title { display: flex; align-items: center; gap: 10px; font-size: .95rem; font-weight: 800;
  color: var(--text); margin: 22px 0 12px; }
.sec-title::after { content: ""; flex: 1; height: 1px; background: var(--card-border); }

/* ป้ายแท็กในตาราง (ดินเผา) */
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; background: var(--brown-soft); color: var(--brown); }
.tag.amber { background: var(--accent-soft); color: #9a6b16; }
.tag.green { background: var(--success-soft); color: var(--success-dark); }

/* จอกว้างมาก: ใช้เต็มความกว้างจอ (ไม่จำกัดเพดาน) */

/* รูป/วิดีโอ/iframe ไม่ล้นกรอบ — กันล้นแนวนอนทั้งระบบ */
body.staff img, body.staff video, body.staff iframe { max-width: 100%; }

/* มือถือ: padding กระชับ + ตารางเลื่อนแนวนอน */
@media (max-width: 640px) {
  .work-head { padding: 12px 16px; }
  .work-body { padding: 16px 14px 40px; }
  table.tbl { font-size: .82rem; }
  /* แถบลิงก์จอ/เรียกคิว: ปุ่ม + ช่องลิงก์เต็มแถว แตะง่าย */
  body.staff .rs-inline > .btn-sm,
  body.staff .rs-inline > input[type="text"] { flex: 1 1 100%; }
}

/* ============================================================
   Shell refresh — หัวเพจมาตรฐาน + นำทางสะอาด (รื้อใหม่ให้เป็นระบบเดียว)
   ============================================================ */
.wh-titles { flex: 1; min-width: 0; }
.work-head .eyebrow {
  font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brown); margin-bottom: 3px;
}
.work-head h1 { font-size: 1.4rem; letter-spacing: -.01em; }
.work-head .sub { font-size: .82rem; color: var(--text-faint); margin-top: 3px; line-height: 1.45; }
.head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* group label คั่นชัด + เว้นช่วงเป็นระบบ */
.side-nav .grp { margin-top: 10px; }
.side-nav .grp:first-child { margin-top: 0; }

/* ลิงก์ที่เปิดแท็บใหม่ (จอแสดงผล) — มีลูกศร ↗ ชิดขวา */
.side-nav a .ext { margin-left: auto; font-size: .82rem; color: var(--text-faint); flex: 0 0 auto; }
.side-nav a:hover .ext { color: var(--text-soft); }
.side-nav a.on .ext { color: var(--primary); opacity: .9; }
body.staff.nav-collapsed .side-nav a .ext { display: none; }
/* badge แจ้งเตือนจำนวน (เช่น นัดรอยืนยัน) */
.side-nav a .nav-badge { margin-left: auto; flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
  background: #e3a019; color: #fff; font-size: .72rem; font-weight: 800; line-height: 1; }
body.staff.nav-collapsed .side-nav a .nav-badge { position: absolute; top: 5px; right: 7px; margin: 0;
  min-width: 16px; height: 16px; padding: 0 3px; font-size: .6rem; box-shadow: 0 0 0 2px #fff; }

/* แบรนด์ในแถบข้าง: โลโก้เด่นขึ้นนิด */
.side-brand .logo { box-shadow: 0 6px 16px rgba(16,29,53,.18); }

/* ===== ตั้งค่าจอ/เสียง: ตาราง 2×2 แถวสูงเท่ากัน + กล่องข้อความยืดเต็มการ์ด ===== */
.ds-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.ds-grid > .bk { display: flex; flex-direction: column; }
.ds-grid > .bk strong { font-size: 1rem; }
.ds-switch { font-weight: 600; display: flex; gap: 8px; align-items: center; }
/* การ์ดที่มีกล่องข้อความ (ไม่ใช่การ์ดเสียง) → textarea ยืดเต็มความสูง ขอบล่างเสมอกัน */
.ds-grid > .bk:not(.ds-voice) .field { flex: 1; display: flex; flex-direction: column; }
.ds-grid > .bk:not(.ds-voice) textarea { flex: 1; min-height: 80px; resize: vertical; }

/* เปิดจอทีวี — รวมไว้ในการ์ดสื่อ (ปักไว้ล่างสุดของการ์ด) */
.ds-tvlink { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--card-border); }
.ds-tvlink .tv-open {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 8px 16px;
  border-radius: 10px; background: var(--primary); border: 1px solid var(--primary);
  color: #fff; font-weight: 700; font-size: .85rem; text-decoration: none;
  box-shadow: 0 4px 12px rgba(84,192,138,.25);
}
.ds-tvlink .tv-open:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
/* หัวข้อ + ปุ่มบรรทัดเดียว ไม่ให้ปุ่มไปติดกับตัวหนังสือ */
.ds-tvlink strong { display: block; margin-bottom: 2px; }
/* การ์ดในหน้านี้เป็น flex column → ลูกทุกตัวถูกยืดเต็มความกว้าง
   ปุ่ม/ลิงก์ไม่ควรยืด ให้ชิดซ้ายตามความกว้างเนื้อหา */
.ds-grid > .bk > .btn-sm, .ds-grid > .bk > button.btn-sm { align-self: flex-start; }

@media (max-width: 1000px) {
  .ds-grid { grid-template-columns: 1fr; }
  .ds-grid > .bk:not(.ds-voice) textarea { min-height: 90px; }
}

/* ===== ตั้งค่าระบบ: 2 คอลัมน์สูงเท่ากัน (โควต้าซ้าย · น้ำหนัก+จุดบริการ ขวา) ===== */
.set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.set-grid > .bk { display: flex; flex-direction: column; }
.set-grid > .bk strong { font-size: 1rem; }
/* ฟิลด์สุดท้ายของแต่ละการ์ด (โควต้าช่วง / จุดบริการ) ยืดเต็มความสูง → 2 การ์ดขอบล่างเสมอกัน */
.set-grid > .bk > .field:last-child { flex: 1; display: flex; flex-direction: column; }
.set-grid #lanes { flex: 1; min-height: 150px; resize: vertical; }
@media (max-width: 1000px) {
  .set-grid { grid-template-columns: 1fr; }
  .set-grid > .bk > .field:last-child { flex: 0 0 auto; }
  .set-grid #lanes { flex: 0 0 auto; }
}

/* ===== CCTV / ANPR — หน้าทดสอบ 3 กล้อง realtime ===== */
.cctv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 18px; }
.cctv-pane { background: #11160f; border: 1px solid var(--card-border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); }
.cctv-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--card-bg); border-bottom: 1px solid var(--card-border); }
.cctv-head strong { font-size: .92rem; }
.cctv-head .tag { margin-left: auto; }
.cctv-video { position: relative; aspect-ratio: 16/9; background: #000; }
.cctv-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cctv-id { padding: 6px 12px; font-size: .72rem; color: var(--text-faint); font-family: ui-monospace, monospace; background: var(--card-bg); }
.cctv-shots { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.cctv-shots a { display: block; }
.cctv-shots img { width: 200px; height: 120px; object-fit: cover; border-radius: 10px; border: 1px solid var(--card-border); background: #000; }
@media (max-width: 1100px) { .cctv-grid { grid-template-columns: 1fr; } }

/* ===== ANPR review (ตรวจสอบ/แก้ไขผลอ่านป้าย) ===== */
.anpr-review-list { display: flex; flex-direction: column; gap: 10px; }
.anpr-review { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--card-border); border-left: 4px solid var(--accent); border-radius: 12px; background: var(--field-bg); }
.anpr-review img, .anpr-review .rv-noimg { width: 110px; height: 68px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; background: #000; }
.anpr-review .rv-noimg { display: grid; place-items: center; font-size: 1.7rem; background: var(--brown-soft); }
.anpr-review .rv-body { flex: 1; min-width: 0; }
.anpr-review .rv-meta { font-size: .82rem; color: var(--text-soft); margin-bottom: 6px; }
.anpr-review .rv-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.anpr-review .rv-plate { max-width: 200px; }
.anpr-review .rv-result { font-size: .82rem; margin-top: 5px; }

/* ANPR ภาพตรวจจับสด (Ground Truth Boxes) */
.anpr-live-wrap { margin-top: 12px; }
.anpr-live { display: none; max-width: 100%; width: 720px; border-radius: 12px; border: 1px solid var(--card-border); background: #000; }

/* =====================================================================
   LANDIFY v2 — โฉมใหม่ทั้งระบบ (ชั้น override บนสุด · คงทุก selector เดิม)
   โทนน้ำเงิน #54c08a · การ์ดสะอาด · ตาราง/พิลล์/ท็อปบาร์สไตล์ Landify
   ===================================================================== */
body.staff { --soft:#f4f6fa; --line:#e8ebf1; --muted:#7f8ca3; }

/* ---- Top bar ---- */
body.staff .work-head{
  justify-content:flex-start; gap:14px; padding:12px 24px;
  background:#ffffff; border-bottom:1px solid var(--card-border);
  box-shadow:0 1px 2px rgba(16,29,53,.03);
}
.work-head .wh-titles{ flex:0 1 auto; }
.work-head h1{ font-size:1.22rem; }
.topsearch{
  display:flex; align-items:center; gap:8px; margin-left:auto;
  background:var(--soft); border:1px solid var(--card-border);
  border-radius:11px; padding:9px 13px; flex:0 1 360px; min-width:160px;
}
.topsearch:focus-within{ border-color:var(--primary); background:#fff; box-shadow:0 0 0 3px var(--primary-soft); }
.topsearch .ts-ic{ color:var(--text-faint); font-size:.95rem; flex:0 0 auto; }
.topsearch input{ border:0!important; background:transparent!important; padding:0!important; box-shadow:none!important; font-size:.9rem; width:100%; }
.topbar-tools{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.topbar-tools .icon-btn{
  position:relative; width:40px; height:40px; border-radius:11px;
  border:1px solid var(--card-border); background:#fff; color:var(--text-soft);
  display:grid; place-items:center; font-size:1.05rem; text-decoration:none;
}
.topbar-tools .icon-btn:hover{ background:var(--soft); color:var(--text); }
.topbar-tools .icon-btn::after{ content:""; position:absolute; top:8px; right:8px; width:8px; height:8px; border-radius:50%; background:var(--danger); border:2px solid #fff; }
.topuser{ display:flex; align-items:center; gap:9px; padding:5px 12px 5px 6px; border:1px solid var(--card-border); border-radius:999px; background:#fff; }
.topuser .av{ width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; display:grid; place-items:center; font-weight:800; font-size:.82rem; flex:0 0 auto; }
.topuser .who{ font-size:.82rem; font-weight:700; line-height:1.12; }
.topuser .who small{ display:block; font-weight:500; color:var(--text-faint); font-size:.7rem; }
@media (max-width:1180px){ .topsearch{ display:none; } }
@media (max-width:900px){ .topbar-tools{ display:none; } }

/* ---- Sidebar refine ---- */
.side{ box-shadow:1px 0 0 rgba(16,29,53,.03); }
.side-brand .nm{ color:var(--text); }
.side-nav a{ padding:10px 12px; border-radius:10px; font-size:.88rem; }
.side-nav .grp{ font-size:.64rem; letter-spacing:.09em; }

/* ---- KPI cards: ไอคอนชิปบน → ป้าย → ตัวเลขใหญ่ (แนวตั้งแบบ Landify) ---- */
.kpi{ flex-direction:column; align-items:flex-start; gap:0; padding:16px 18px; border-radius:14px; box-shadow:0 1px 3px rgba(16,29,53,.06); }
.kpi:hover{ box-shadow:0 8px 24px rgba(16,29,53,.10); }
.kpi-ic{ width:46px; height:46px; border-radius:50%; font-size:1.25rem; margin-bottom:0; }
.kpi-body{ width:100%; }
.kpi-val{ font-size:1.8rem; letter-spacing:-.02em; }
.kpi-lbl{ font-size:.8rem; color:var(--muted); margin-top:5px; }

/* ---- Panels / cards ---- */
.dash-panels .panel{ border-radius:14px; box-shadow:0 1px 3px rgba(16,29,53,.06); }
.panel-h{ border-bottom:0; font-weight:600; }
body.staff .bk{ box-shadow:0 1px 3px rgba(16,29,53,.06); }
body.staff .bk:hover{ border-color:var(--primary); box-shadow:0 8px 24px rgba(16,29,53,.10); }
.bar-track{ background:var(--soft); height:8px; }

/* ---- Tables (Landify: หัวขาว/เทาอ่อน, ไม่ซีบรา, hover นุ่ม) ---- */
.tbl-wrap{ border-radius:14px; box-shadow:0 1px 3px rgba(16,29,53,.06); }
table.tbl thead th{
  background:var(--soft); color:var(--muted);
  text-transform:none; letter-spacing:0; font-size:.78rem; font-weight:700;
  border-bottom:1px solid var(--card-border); box-shadow:none;
}
table.tbl tbody tr:nth-child(even){ background:transparent; }
table.tbl tbody tr:hover, table.tbl tbody tr:nth-child(even):hover{ background:var(--soft); }
table.tbl tbody td{ border-bottom:1px solid var(--line); }

/* ---- Buttons ---- */
body.staff .btn-sm{ border-radius:9px; font-weight:700; }
body.staff .btn-sm.primary, body.staff .btn-primary{ background:var(--primary); box-shadow:0 1px 2px rgba(84,192,138,.30); }
body.staff .btn-sm.primary:hover, body.staff .btn-primary:hover{ background:var(--primary-dark); filter:none; }
body.staff .btn-sm:not(.primary):not(.danger):not(.info):not(.logout):not(.on-dark){ background:#fff; }
body.staff .work-head .btn-sm:not(.primary):not(.danger):not(.info):not(.logout):not(.on-dark){ background:transparent; color:#fff; border-color:rgba(255,255,255,.22); }

/* ---- ป้ายสถานะ (Trackado) — แท่งสีทึบ ตัวอักษรขาว มุมเหลี่ยม ---- */
body.staff .st, .tbl .st{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border-radius:var(--radius-btn); border:1px solid transparent; white-space:nowrap;
  font-weight:600; font-size:.74rem; padding:4px 12px; color:#fff;
}
body.staff .st-pending{   background:var(--warn);      color:#fff; }
body.staff .st-confirmed{ background:var(--info);      color:#fff; }
body.staff .st-arrived{   background:var(--accent);    color:#fff; }
body.staff .st-completed{ background:var(--success);   color:#fff; }
body.staff .st-cancelled{ background:var(--text-faint);color:#fff; }
body.staff .st-late, body.staff .st-overdue{ background:var(--orange); color:#fff; }

/* ---- Pager ---- */
.pager a:hover{ border-color:var(--primary); color:var(--primary); }
.pager .pg.cur{ background:var(--primary); border-color:var(--primary); color:#fff; }

/* ---- Toolbar filter bar ---- */
body.staff .toolbar{ border-radius:14px; box-shadow:0 1px 3px rgba(16,29,53,.05); }

/* =====================================================================
   LANDIFY — หน้า Login (auth) · การ์ดขาวสะอาด แบรนด์น้ำเงิน
   ===================================================================== */
body.auth{ background:#f5f8fb; }
.auth-card{ border-radius:18px; border:1px solid var(--card-border); box-shadow:0 22px 55px rgba(16,29,53,.16); }

.auth-body .btn-primary{ background:var(--primary); box-shadow:0 2px 8px rgba(84,192,138,.3); }
.auth-body .btn-primary:hover{ background:var(--primary-dark); filter:none; }
.auth-body input{ border-radius:11px; }

/* =====================================================================
   LANDIFY — Dashboard components: โดนัทสถานะ + กริด 2 คอลัมน์ + รายการราคา
   ===================================================================== */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; margin-top:18px; }
@media(max-width:1080px){ .grid-2, .dash-panels{ grid-template-columns:1fr; } }
.grid-2 > .panel{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; padding:18px 20px; box-shadow:0 1px 3px rgba(16,29,53,.06); }
.panel-h{ display:flex; align-items:center; gap:8px; }
.panel-h .hi{ display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.22); color:#fff; font-size:.95rem; }
.panel-h .upd{ margin-left:auto; font-weight:400; font-size:.76rem; color:rgba(255,255,255,.85); }
.price-line{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px dashed var(--card-border); }
.price-line:last-child{ border-bottom:0; }
.price-line > span{ color:var(--text-soft); font-weight:600; }
.price-line b{ font-size:1.1rem; color:var(--text); }
.price-line b small{ font-weight:500; color:var(--text-faint); font-size:.72rem; }
/* donut */
.donut-wrap{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding-top:4px; }
.donut-wrap svg{ flex:0 0 auto; }
.legend{ display:flex; flex-direction:column; gap:10px; flex:1; min-width:160px; }
.legend .lg{ display:flex; align-items:center; gap:9px; font-size:.88rem; }
.legend .lg .dot{ width:11px; height:11px; border-radius:4px; flex:0 0 auto; }
.legend .lg .nm{ color:var(--text-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.legend .lg .pct{ margin-left:auto; color:var(--text-faint); font-size:.8rem; }
.legend .lg b{ font-variant-numeric:tabular-nums; min-width:1.6em; text-align:right; color:var(--text); }
/* KPI icon variations */
.kpi-ic.ic-sky{ background:var(--accent); color:#fff; }
.kpi-ic.ic-violet{ background:var(--ic-system); color:#fff; }

/* =====================================================================
   LANDIFY — ค้นหา/ตัวกรองโฉมใหม่ · Search เด่น + ชิปตัวกรองที่ใช้อยู่
   ===================================================================== */
/* แถบกรอง: search เด่น (โต/ยืด) ปุ่มไม่ยืด */
body.staff .toolbar{ gap:10px; }
body.staff .toolbar > *{ min-width:0; }
body.staff .toolbar input[type="search"]{
  flex:2 1 240px; height:44px; padding:10px 14px 10px 40px; border-radius:11px; background:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2378889b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:14px center; font-size:.95rem;
}
body.staff .toolbar input[type="date"],
body.staff .toolbar select{ flex:0 1 190px; height:44px; border-radius:11px; background-color:#fff; font-size:.92rem; }
body.staff .toolbar input[type="text"]{ height:44px; border-radius:11px; background-color:#fff; }
body.staff .toolbar .btn-sm{ flex:0 0 auto; height:44px; border-radius:11px; padding:0 20px; }
body.staff .toolbar a.btn-sm{ display:inline-flex; align-items:center; }

/* ชิปตัวกรองที่ใช้อยู่ (กด ✕ เพื่อลบทีละตัว) */
.filter-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:-6px 0 18px; }
.filter-chips .fc-label{ font-size:.8rem; font-weight:700; color:var(--text-faint); }
.fchip{ display:inline-flex; align-items:center; gap:8px; background:var(--primary-soft); color:var(--primary-dark);
  border:1px solid #c3d3de; border-radius:999px; padding:6px 12px; font-size:.82rem; font-weight:600; text-decoration:none; transition:background .14s; }
.fchip b{ font-weight:800; opacity:.55; font-size:.9rem; line-height:1; }
.fchip:hover{ background:#dde9ff; } .fchip:hover b{ opacity:1; }
.fc-clear{ font-size:.8rem; font-weight:700; color:var(--danger); text-decoration:none; margin-left:4px; }
.fc-clear:hover{ text-decoration:underline; }
/* แท็บเล็ต/มือถือ: ฟิลเตอร์เต็มความกว้าง — คง row+wrap (flex-basis = ความกว้าง ไม่ใช่ความสูง) สูง 44px คงที่ */
@media (max-width:900px){
  body.staff .toolbar input[type="search"],
  body.staff .toolbar input[type="text"],
  body.staff .toolbar .btn-sm,
  body.staff .toolbar a.btn-sm{ flex:1 1 100%; }
  body.staff .toolbar input[type="date"],
  body.staff .toolbar select{ flex:1 1 calc(50% - 5px); }   /* วันที่/ร้าน 2 คอลัมน์ ประหยัดที่ */
}
@media (max-width:480px){
  body.staff .toolbar input[type="date"],
  body.staff .toolbar select{ flex:1 1 100%; }   /* จอเล็ก: เรียงเดี่ยวเต็มแถว */
}

/* แผง Dashboard: ทุกแผงกว้างเท่ากัน (2x2 ตรงแนว บน-ล่าง) */
.work-body .dash-panels{ grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:1080px){ .work-body .dash-panels{ grid-template-columns:1fr; } }

/* ===== Dashboard เพิ่มเติม: ประสิทธิภาพคิว + โหลดโควต้า ===== */
.qperf{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:16px; }
.qperf .qp{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px; padding:16px 18px; box-shadow:0 1px 3px rgba(16,29,53,.06); }
.qperf .qp .v{ font-size:1.8rem; font-weight:800; letter-spacing:-.02em; line-height:1; color:var(--text); }
.qperf .qp .k{ font-size:.8rem; color:var(--text-faint); margin-top:6px; }
.qperf .qp.ok .v{ color:#54c08a; }
.qperf .qp.bad .v{ color:var(--danger); }
.bar-fill.full{ background:linear-gradient(90deg,#e8b71a,#c31414); }
@media (max-width:760px){ .qperf{ grid-template-columns:repeat(2,1fr); } }

/* ===== นัดล่วงหน้า (รายวัน) — การ์ดเหมือนหัวข้ออื่น + แถวกระชับ รองรับหลายวัน + เลื่อนในแผง ===== */
.up-card{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:14px;
  padding:18px 20px; box-shadow:0 1px 3px rgba(16,29,53,.06); }
.up-scroll{ max-height:360px; overflow-y:auto; padding-right:4px; margin-top:4px;
  scrollbar-width:thin; scrollbar-color:var(--card-border) transparent; }
.up-scroll::-webkit-scrollbar{ width:7px } .up-scroll::-webkit-scrollbar-thumb{ background:var(--card-border); border-radius:99px }
.up-row{ padding:9px 0; border-bottom:1px solid var(--card-border); }
.up-row:last-child{ border-bottom:0; }
.up-main{ display:grid; grid-template-columns:66px 1fr 76px; align-items:center; gap:12px; }
.up-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; padding-left:78px; }
.up-chip{ font-size:.72rem; font-weight:700; padding:2px 9px; border-radius:999px; white-space:nowrap; }
.up-chip.total{ background:var(--primary-soft); color:var(--primary-dark); }
.up-chip.pending{ background:#fcf4d9; color:#b4790b; }
.up-chip.confirmed{ background:#eaf0f4; color:#638ca5; }
.up-chip.arrived{ background:#e7f1ff; color:#638ca5; }
.up-chip.completed{ background:#e8f6ef; color:#54c08a; }
.up-chip.cancelled{ background:#fdecea; color:#c31414; }
@media (max-width:560px){ .up-chips{ padding-left:0; } }
.up-date{ font-size:.84rem; font-weight:700; color:var(--text-soft); white-space:nowrap; }
.up-date small{ color:var(--text-faint); font-weight:600; margin-left:5px; font-size:.74rem; }
.up-bar{ height:10px; background:rgba(127,143,164,.22); border-radius:999px; overflow:hidden; }
.up-bar .bar-fill{ height:100%; background:linear-gradient(90deg,#54c08a,#46a876); border-radius:999px; min-width:3px; transition:width .5s ease; }
.up-bar .bar-fill.full{ background:linear-gradient(90deg,#e8b71a,#c31414); }
.up-num{ font-size:.84rem; font-weight:800; color:var(--text); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.up-num small{ color:var(--text-faint); font-weight:600; }
.up-num.is-full{ color:var(--danger); }

/* ===== วิธีใช้งานหน้านี้ (modal รวมศูนย์ ใช้ทุกหน้าเจ้าหน้าที่) ===== */
body.staff .help-modal{ position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px; background:rgba(8,12,20,.5); }
body.staff .help-modal.hide{ display:none; }
body.staff .help-card{ width:min(640px,96vw); max-height:88vh; overflow:auto; background:var(--card-bg); border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.4); }
body.staff .help-head{ position:sticky; top:0; background:var(--card-bg); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 20px; border-bottom:1px solid var(--card-border); font-size:1.05rem; font-weight:800; color:var(--text); }
body.staff .help-x{ width:34px; height:34px; flex:0 0 auto; border-radius:50%; border:1px solid var(--card-border); background:var(--field-bg); color:var(--text-soft); font-size:1rem; cursor:pointer; }
body.staff .help-x:hover{ filter:brightness(.96); }
body.staff .help-body{ padding:6px 20px 22px; }
body.staff .help-body h4{ margin:18px 0 6px; font-size:.95rem; color:var(--primary-dark); }
body.staff .help-item{ display:flex; gap:12px; padding:8px 0; border-bottom:1px dashed var(--card-border); font-size:.9rem; }
body.staff .help-item:last-child{ border-bottom:0; }
body.staff .help-item .hi-k{ flex:0 0 140px; font-weight:700; color:var(--text); }
body.staff .help-item .hi-v{ color:var(--text-soft); line-height:1.5; }
@media(max-width:560px){ body.staff .help-item{ flex-direction:column; gap:2px; } body.staff .help-item .hi-k{ flex:none; } }
/* badge หมายเลขขั้นตอน (วงกลมน้ำเงิน) — ใช้ในคู่มือ/หน้าตั้งค่า */
body.staff .step-no{ display:inline-grid; place-items:center; width:21px; height:21px; border-radius:50%;
  background:var(--primary); color:#fff; font-size:.78rem; font-weight:800; line-height:1; vertical-align:middle;
  margin:0 2px; font-variant-numeric:tabular-nums; box-shadow:0 1px 3px rgba(84,192,138,.35); }

/* ===== Dashboard: จำกัดความสูงแผง ถ้าข้อมูลเยอะให้เลื่อนขึ้น-ลง (หัวการ์ดติดบน) ===== */
.grid-2 > .panel, .dash-panels .panel{ max-height:420px; overflow-y:auto; padding-top:0; }
.grid-2 > .panel > .panel-h, .dash-panels .panel > .panel-h{
  position:sticky; top:0; z-index:3;
  background:var(--panelhead); color:#fff; box-shadow:none;
}
.grid-2 > .panel::-webkit-scrollbar, .dash-panels .panel::-webkit-scrollbar{ width:8px; }
.grid-2 > .panel::-webkit-scrollbar-thumb, .dash-panels .panel::-webkit-scrollbar-thumb{ background:#d6dbe4; border-radius:99px; }
.grid-2 > .panel, .dash-panels .panel{ scrollbar-width:thin; scrollbar-color:#d6dbe4 transparent; }

/* ===== Dashboard: ป้ายขอบเขตข้อมูล (วันนี้ / ตามตัวกรอง / รวม) ===== */
.dash-sec{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.scope-tag{ display:inline-flex; align-items:center; gap:5px; font-size:.7rem; font-weight:700; padding:3px 10px; border-radius:999px; }
.scope-tag::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto; }
.scope-tag.today{ background:#e8f6ef; color:#54c08a; }
.scope-tag.range{ background:var(--primary-soft); color:var(--primary); }
.scope-tag.now{ background:var(--accent-soft); color:#b4790b; }
.panel-h .scope-tag{ font-weight:700; background:rgba(255,255,255,.2)!important; color:#fff!important; }
/* KPI: แถบสีบอกขอบเขตข้อมูล */
.kpi.sc-today, .kpi.sc-range, .kpi.sc-all{ position:relative; overflow:hidden; }
.kpi.sc-today::before, .kpi.sc-range::before, .kpi.sc-all::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; }
.kpi.sc-today::before{ background:#54c08a; }
.kpi.sc-range::before{ background:var(--primary); }
.kpi.sc-all::before{ background:#94a1b8; }
.kpi-legend{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; font-size:.78rem; color:var(--text-faint); margin:0 0 12px; }
.kpi-legend .lg{ display:inline-flex; align-items:center; gap:6px; }
.kpi-legend .d{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.kpi-legend .d.today{ background:#54c08a; }
.kpi-legend .d.range{ background:var(--primary); }
.kpi-legend .d.all{ background:#94a1b8; }

/* ===== ฟอร์มเพิ่ม/แก้ไขสมาชิก (Landify) ===== */
.mf-head{ display:flex; align-items:center; gap:12px; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--card-border); }
.mf-head strong{ font-size:1rem; font-weight:800; }
.mf-ic{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; font-size:1.2rem; background:var(--primary-soft); color:var(--primary); flex:0 0 auto; }
.member-form.editing{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
.member-form.editing .mf-ic{ background:#fff4e3; color:#b4790b; }
.mf-actions{ display:flex; gap:10px; align-items:center; margin-top:16px; padding-top:14px; border-top:1px solid var(--card-border); }

/* ===== จัดการร้าน: แก้ชื่อ inline เนียน + โชว์ปุ่มบันทึกเฉพาะแถวที่แก้ ===== */
body.staff .inline-edit{ border:1.5px solid transparent; background:transparent; }
body.staff .inline-edit:hover{ border-color:var(--card-border); background:var(--field-bg); }
body.staff .inline-edit:focus{ border-color:var(--primary); background:#fff; box-shadow:0 0 0 3px var(--primary-soft); }
.row-edit .save{ display:none; }
.row-edit.changed .save{ display:inline-flex; }
.row-edit.changed .inline-edit{ border-color:var(--primary); background:#fff; }

/* ===== ราคารับซื้อยาง: การ์ดราคาแบบ tile ===== */
.price-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:14px; }
.price-tile{ background:var(--field-bg); border:1px solid var(--card-border); border-radius:12px; padding:12px 14px; }
.price-tile > label{ display:block; font-size:.82rem; font-weight:700; color:var(--text-soft); margin-bottom:8px; }
.price-input{ display:flex; align-items:center; gap:8px; background:#fff; border:1.5px solid var(--field-border); border-radius:10px; padding:0 12px; }
.price-input:focus-within{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
.price-input .cur{ color:var(--primary); font-weight:800; flex:0 0 auto; }
body.staff .price-input input{ border:0; background:transparent; box-shadow:none; padding:11px 0; flex:1; min-width:0; max-width:none; font-size:1.05rem; font-weight:700; }
.price-input .unit{ color:var(--text-faint); font-size:.8rem; white-space:nowrap; flex:0 0 auto; }

/* ===== ราคายาง: แถวแก้ชื่อ/ลบประเภท ===== */
.price-tile .pt-row{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.price-tile .pt-name{ flex:1; min-width:0; font-weight:700; font-size:.9rem; }
.price-tile .pt-del{ flex:0 0 auto; color:#b4231f; border-color:#e7c9c7; padding:6px 10px; }
.price-tile .pt-del:hover{ background:#fbeceb; }

/* ===== Modal ยืนยัน (แทน confirm เดิม) ===== */
.fd-modal{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; padding:20px;
  background:rgba(16,29,53,.45); backdrop-filter:blur(2px); animation:fdfade .15s ease; }
.fd-modal[hidden]{ display:none; }
.fd-modal-card{ width:100%; max-width:380px; background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:18px; box-shadow:0 24px 60px rgba(16,29,53,.32); padding:26px 24px; text-align:center;
  animation:fdpop .18s cubic-bezier(.2,.8,.2,1); }
.fd-modal-ic{ width:56px; height:56px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center;
  font-size:1.7rem; background:var(--danger-soft); color:var(--danger); }
.fd-modal-title{ font-size:1.15rem; font-weight:800; color:var(--text); margin-bottom:6px; }
.fd-modal-msg{ font-size:.9rem; color:var(--text-soft); line-height:1.55; margin-bottom:22px; white-space:pre-line; overflow-wrap:anywhere; }
.fd-modal-actions{ display:flex; gap:10px; }
.fd-modal-actions .btn-sm{ flex:1; justify-content:center; padding:11px; font-size:.92rem; }
.fd-modal-actions .fd-ok{ background:var(--danger) !important; color:#fff !important; border-color:var(--danger) !important; }
/* tone="safe" = งานที่ไม่ใช่การลบ (เปิดไม้กั้น ฯลฯ) — สีแดงกับถังขยะทำให้เข้าใจผิดว่าเป็นการลบ */
.fd-modal.fd-safe .fd-modal-ic{ background:var(--primary-soft); color:var(--primary-dark); }
.fd-modal.fd-safe .fd-modal-actions .fd-ok{ background:var(--primary) !important; border-color:var(--primary) !important; }
.fd-modal-actions .fd-ok:hover{ filter:brightness(.95); }
@keyframes fdpop{ from{ transform:scale(.94); opacity:.4; } }
@keyframes fdfade{ from{ opacity:0; } }

/* ไอคอนหัวการ์ดหลายสี (reusable) */
.mf-ic.ic-violet{ background:#f2e9f0; color:#ae84a4; }
.mf-ic.ic-sky{ background:#e4f5f6; color:#6dc6cd; }
.mf-ic.ic-amber{ background:#fff4e3; color:#b4790b; }

/* ===== แท็บกรอง — Trackado underline tabs (เรียบ ขีดเส้นใต้เขียวตอน active) ===== */
.status-tabs{ display:flex; flex-wrap:wrap; gap:2px; margin:2px 0 16px;
  border-bottom:1px solid var(--card-border); }
.status-tabs .stab{
  display:inline-flex; align-items:center; gap:8px;
  border:0; background:transparent; color:var(--text-soft); border-radius:0;
  padding:9px 15px; font-size:.88rem; font-weight:600; cursor:pointer; white-space:nowrap;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .12s, border-color .12s;
}
.status-tabs .stab:hover{ color:var(--text); }
/* โลโก้ LINE (static/line.png · RGBA มุมโค้งมาในไฟล์แล้ว ไม่ต้อง border-radius)
   ขนาดมาจาก width/height ที่ line_icon() ใส่ไว้ — ตรึง max-width ไม่ให้กฎรวมของ img ย่อรูป */
.ico-line,
body.staff .ico-line{
  flex:0 0 auto; display:inline-block; vertical-align:-2px;
  max-width:none; object-fit:contain;
}
/* จำนวน = ตัวเลขเทากลม subtle (ไม่ใช่พิลล์สี) */
.status-tabs .stab .n{ background:var(--field-bg); color:var(--text-faint); border-radius:999px;
  padding:0 8px; font-size:.72rem; font-weight:700; line-height:1.7; }
/* แท็บที่เลือก = ตัวอักษรเขียว + ขีดเส้นใต้เขียว (ลุค Trackado) */
.status-tabs .stab.on{ color:var(--primary); border-bottom-color:var(--primary); font-weight:700; }
.status-tabs .stab.on .n{ background:var(--primary-soft); color:var(--primary-dark); }
/* แท็บที่ไม่มีรายการ → จางลง (ยังกดได้) */
.status-tabs .stab.is-empty{ opacity:.5; }
.status-tabs .stab.is-empty.on{ opacity:1; }

/* =====================================================================
   TEGH นัดหมาย — Brand refresh (โลโก้ + ไอคอนใหม่)
   วาง/แปะต่อท้าย  app/static/style.css  และ  app/static/staff.css
   (หรือสร้างไฟล์นี้แล้ว <link> ต่อหลัง style.css / staff.css ใน base)
   ===================================================================== */

/* ---- 1) ไทล์โลโก้ทุกที่ใช้สีแบรนด์เดียวกัน (น้ำเงินเข้ม) ----
   เดิมไล่เฉด #54c08a→#46a876 / มี slate ปน — รวมให้เป็นน้ำเงินแบรนด์ */
.brand .logo,
.side-brand .logo,
.tv-head .logo,
.wb-head .logo,
.yard-bar .logo,
.doc-logo {
  background: linear-gradient(140deg, #54c08a, #46a876) !important;
  color: #fff;
}

/* ---- 2) มาร์กโลโก้ (SVG) เต็มไทล์พอดี ----
   logo_mark() ออก SVG ขนาด 1em → คุมขนาดด้วย font-size ของ .logo เดิมได้เลย
   ปรับ font-size เล็กน้อยให้หยดน้ำเต็มไทล์สวยงาม */
.brand .logo .logo-mark,
.side-brand .logo .logo-mark,
.tv-head .logo .logo-mark,
.wb-head .logo .logo-mark,
.yard-bar .logo .logo-mark,
.doc-logo .logo-mark { width: 64%; height: 64%; }

/* auth-head (หน้า login): โลโก้ใหญ่บนหัวการ์ดน้ำเงิน — ไม่มีไทล์ */
.auth-head .logo { font-size: 56px; }
.auth-head .logo .logo-mark { width: 56px !important; height: 56px !important; margin: 0 auto 6px; }

/* สลิป/พิมพ์: ใช้โทนขาวดำ (เรียก {{ logo_mark('mono') }}) */
.s-logo .logo-mark { width: 9mm; height: 9mm; margin: 0 auto; }

/* ---- 3) ไอคอนเส้น (icon()) ----
   ออก SVG ขนาด 1em รับสี currentColor — แทนอิโมจิในข้อความได้ทันที */
.ic-svg { vertical-align: -0.16em; }

/* เมนูข้าง: ช่องไอคอน .ic ให้ไอคอนพอดีกลาง */
.side-nav .ic { display: inline-grid; place-items: center; width: 22px; }
.side-nav .ic .ic-svg { width: 19px; height: 19px; vertical-align: 0; }

/* การ์ด KPI: ไอคอนรับสีของชิป (ic-green/ic-blue/...) ผ่าน currentColor */
.kpi-ic { color: #54c08a; }
.kpi-ic .ic-svg { width: 22px; height: 22px; vertical-align: 0; }
.kpi-ic.ic-green  { color: #54c08a; }
.kpi-ic.ic-blue   { color: #54c08a; }
.kpi-ic.ic-amber  { color: #e8b71a; }
.kpi-ic.ic-sky    { color: #6dc6cd; }
.kpi-ic.ic-violet { color: #ae84a4; }

/* หัวพาเนล / ปุ่มเล็ก: จัดไอคอนให้ชิดข้อความ */
.panel-h .ic-svg,
.btn-sm .ic-svg,
.btn .ic-svg { margin-right: 2px; }

/* หมายเหตุ: เงา/เส้นขอบ ใช้ token กลางจาก style.css (Trackado) — ไม่ทับซ้ำที่นี่ */

/* =====================================================================
   TEGH นัดหมาย — Responsive (PC · Tablet · Mobile)  [ฝั่งเจ้าหน้าที่]
   แปะต่อท้าย  app/static/staff.css
   ใช้คู่กับ  responsive-nav.js  (สร้างปุ่ม ☰ + backdrop ให้อัตโนมัติ)

   จุดตัด (breakpoints):
     PC      ≥ 1024px  → ไซด์บาร์เต็ม (ของเดิม)
     Tablet  768–1023  → ไซด์บาร์ไอคอน (rail 74px)
     Mobile  < 768px   → เมนู drawer (เลื่อนจากซ้าย) + ปุ่ม ☰
   ===================================================================== */

/* ---------- ปุ่ม ☰ (สร้างโดย responsive-nav.js) ---------- */
.nav-open-btn{
  display:none; width:42px; height:42px; flex:0 0 auto;
  border:1px solid var(--card-border); border-radius:11px; background:var(--card-bg);
  color:var(--text); cursor:pointer; place-items:center; padding:0; margin-right:4px;
}
.nav-open-btn svg{ width:22px; height:22px; }
.nav-backdrop{
  position:fixed; inset:0; background:rgba(11,18,32,.5); z-index:55;
  opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
}
body.nav-open .nav-backdrop{ opacity:1; visibility:visible; }

/* =====================================================================
   TABLET · 768–1023px — ไซด์บาร์ไอคอน (rail)
   ===================================================================== */
@media (min-width:768px) and (max-width:1023.98px){
  body.staff .shell{ grid-template-columns:74px 1fr !important; }
  body.staff .side{
    position:sticky !important; top:0; height:100vh !important; width:74px !important;
    flex-direction:column !important; align-items:center !important; gap:4px;
    border-right:1px solid var(--card-border) !important; border-bottom:none !important;
    padding:14px 0 !important; overflow:visible !important;
  }
  body.staff .side-brand{ padding:6px 0 14px !important; border:none !important; justify-content:center; }
  body.staff .side-brand .nm,
  body.staff .side-collapse{ display:none !important; }
  body.staff .side-nav{ flex-direction:column !important; align-items:center; gap:4px; padding:6px 0 !important; overflow:visible !important; width:100%; }
  body.staff .side-nav .grp{ display:none !important; }
  body.staff .side-nav a{ width:48px !important; height:46px; justify-content:center !important; padding:0 !important; position:relative; white-space:nowrap; }
  body.staff .side-nav a .lbl,
  body.staff .side-nav a .ext{ display:none !important; }
  body.staff .side-nav a .nav-badge{ position:absolute; top:5px; right:7px; }
  /* ป้ายชื่อเมนูตอนชี้ (tooltip) */
  body.staff .side-nav a:hover::after{
    content:attr(title); position:absolute; left:56px; top:50%; transform:translateY(-50%);
    background:#0B1220; color:#fff; font-size:12px; font-weight:600; padding:6px 10px;
    border-radius:8px; white-space:nowrap; z-index:50; box-shadow:0 8px 20px rgba(0,0,0,.25);
  }
  body.staff .side-foot{ border:none !important; padding:8px 0 !important; }
  body.staff .side-user{ display:none !important; }
  body.staff .side-foot .logout .lbl{ display:none !important; }
  body.staff .side-foot .logout{ width:48px; padding:12px 0; }

  /* เนื้อหา: ลดความหนาแน่นลงเล็กน้อย */
  body.staff .kpi-grid{ grid-template-columns:repeat(2,1fr) !important; }
  body.staff .grid-2,
  body.staff .dash-panels,
  body.staff .work-body .dash-panels{ grid-template-columns:1fr !important; }
  body.staff .work-body{ padding:18px 20px 40px !important; }
}

/* =====================================================================
   MOBILE · < 768px — เมนู drawer
   ===================================================================== */
@media (max-width:767.98px){
  body.staff .shell{ grid-template-columns:1fr !important; }

  /* ไซด์บาร์ = drawer เลื่อนจากซ้าย (ของเดิมเป็นแถบบน — เขียนทับ) */
  body.staff .side{
    position:fixed !important; top:0; left:0; bottom:0; height:100vh !important;
    width:min(86vw,300px) !important; flex-direction:column !important; align-items:stretch !important;
    gap:0 !important; padding:0 !important; z-index:60;
    border:none !important; border-right:1px solid var(--card-border) !important;
    overflow-y:auto !important; transform:translateX(-100%); transition:transform .26s ease;
    box-shadow:14px 0 40px rgba(11,18,32,.22);
  }
  body.nav-open .side{ transform:none; }

  /* คืนเมนูเต็ม (ป้ายกำกับ + กลุ่ม) ใน drawer */
  body.staff .side-brand{ padding:18px 16px !important; border-bottom:1px solid var(--card-border) !important; justify-content:flex-start; }
  body.staff .side-brand .nm{ display:block !important; }
  body.staff .side-brand .nm small{ display:block !important; }
  body.staff .side-collapse{ display:none !important; }
  body.staff .side-nav{ flex-direction:column !important; align-items:stretch; gap:2px; padding:12px !important; overflow:visible !important; }
  body.staff .side-nav .grp{ display:block !important; }
  body.staff .side-nav a{ width:auto !important; justify-content:flex-start !important; padding:12px 12px !important; font-size:.95rem !important; white-space:nowrap; }
  body.staff .side-nav a .lbl{ display:inline !important; }
  body.staff .side-foot{ display:flex !important; border-top:1px solid var(--card-border) !important; padding:12px 14px !important; margin:0 !important; }
  body.staff .side-user{ display:flex !important; }
  body.staff .side-foot .logout .lbl{ display:inline !important; }

  /* ปุ่ม ☰ โผล่ + หัวเรื่องติดบน */
  body.staff .nav-open-btn{ display:grid; }
  body.staff .work-head{ position:sticky; top:0; z-index:30; }

  /* KPI / กราฟ */
  body.staff .kpi-grid{ grid-template-columns:repeat(2,1fr) !important; gap:11px !important; }
  body.staff .grid-2,
  body.staff .dash-panels,
  body.staff .work-body .dash-panels,
  body.staff .qperf{ grid-template-columns:1fr !important; }
  body.staff .work-body{ padding:14px 13px 80px !important; }

  /* toolbar กรอง: เรียงเต็มความกว้าง แตะง่าย */
  body.staff .toolbar{ flex-wrap:wrap; }
  body.staff .toolbar > *{ flex:1 1 calc(50% - 8px); min-width:0; min-height:44px; }

  /* ตารางกว้าง → เลื่อนแนวนอนแทนล้นจอ */
  body.staff .work-body table{ display:block; width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; }

  /* ปุ่มหลัก/แตะ: เป้าหมายอย่างน้อย 44px */
  body.staff .btn-sm{ min-height:40px; }
}

/* จอเล็กมาก (< 380px): KPI คอลัมน์เดียว */
@media (max-width:379.98px){
  body.staff .kpi-grid{ grid-template-columns:1fr !important; }
}

/* แท็บเล็ต + มือถือ: ซ่อนปุ่มวิธีใช้งานหน้านี้ ทุกหน้า
   - จอแคบ < 1024px  · และ  อุปกรณ์สัมผัส (iPad ทุกแนว รวมแนวนอน 1180px) — ไม่กระทบ PC/โน้ตบุ๊กที่ใช้เมาส์ */
@media (max-width:1023.98px){
  body.staff #helpBtn{ display:none !important; }
}
@media (hover:none) and (pointer:coarse){
  body.staff #helpBtn{ display:none !important; }
}

/* =====================================================================
   TEGH นัดหมาย — หน้า "รายการนัด": ตาราง → การ์ด บนมือถือ
   ---------------------------------------------------------------------
   ทำให้แต่ละแถวของตารางกลายเป็น "การ์ด" อ่านง่ายบนจอเล็ก
   ไม่ต้องเลื่อนแนวนอน (แทนพฤติกรรมเดิมที่ตารางล้น/เลื่อนซ้าย-ขวา)

   ใช้เฉพาะหน้า "รายการนัด" เท่านั้น — ผูกกับ class .tbl-cards ที่ครอบตาราง
   (ป้ายชื่อคอลัมน์ใน ::before อิงลำดับคอลัมน์ของหน้านี้ จึงต้องสโคปเฉพาะ)

   จุดตัด: < 768px (โทรศัพท์)  ·  ≥ 768px ใช้ตารางปกติ (rail/drawer ของเดิม)
   พึ่งพา: ตัวแปรสีจาก staff.css (--card-bg, --card-border, --text-faint, ฯลฯ)
   รองรับโหมดมืดอัตโนมัติ เพราะใช้ตัวแปรเดียวกับธีม
   ===================================================================== */

@media (max-width: 1023.98px), (hover: none) and (pointer: coarse) {

  /* ----- ปลดพฤติกรรม "เลื่อนแนวนอน" ของกฎตารางรวม เฉพาะตารางนัด ----- */
  body.staff .tbl-cards { overflow: visible; border: 0; box-shadow: none; background: transparent; }
  body.staff .tbl-cards table.tbl {
    display: block; width: 100%; max-width: 100%;
    white-space: normal; overflow: visible;
    border: 0; background: transparent; font-size: .92rem;
  }
  body.staff .tbl-cards table.tbl thead { display: none; }      /* หัวตารางไม่ต้องใช้ — ใช้ป้ายในแต่ละการ์ดแทน */
  body.staff .tbl-cards table.tbl tbody { display: block; }

  /* ----- แต่ละแถว = การ์ด ----- */
  body.staff .tbl-cards table.tbl tbody tr {
    display: block; position: relative;
    background: var(--card-bg); border: 1px solid var(--card-border);
    border-radius: 16px; padding: 14px 14px 12px; margin-bottom: 12px;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(16,29,53,.08));
  }
  /* ล้างลายสลับสี/hover ของตารางเดิม (ในการ์ดไม่ต้องการ) */
  body.staff .tbl-cards table.tbl tbody tr:nth-child(even),
  body.staff .tbl-cards table.tbl tbody tr:hover,
  body.staff .tbl-cards table.tbl tbody tr:nth-child(even):hover { background: var(--card-bg); }

  body.staff .tbl-cards table.tbl tbody td {
    display: block; width: auto; padding: 0; border: 0 !important;
    white-space: normal; vertical-align: top;
  }

  /* (1) คิว — ป้ายมุมซ้ายบนของการ์ด */
  body.staff .tbl-cards table.tbl td.q-cell {
    position: absolute; top: 14px; left: 14px; width: auto; text-align: left;
  }
  body.staff .tbl-cards .q-badge { min-width: 44px; height: 40px; font-size: 1.2rem; }

  /* (2) ร้าน / รหัส — หัวการ์ด เว้นที่ให้ป้ายคิว(ซ้าย) และสถานะ(ขวา) */
  body.staff .tbl-cards table.tbl td:nth-of-type(2) {
    min-height: 42px; padding-left: 52px; padding-right: 92px;
  }
  body.staff .tbl-cards table.tbl td:nth-of-type(2) .t-main { font-size: 1rem; font-weight: 700; line-height: 1.3; }
  body.staff .tbl-cards table.tbl td:nth-of-type(2) .t-code { margin-top: 2px; }

  /* (7) สถานะ — ป้ายมุมขวาบน */
  body.staff .tbl-cards table.tbl td:nth-of-type(7) {
    position: absolute; top: 14px; right: 14px; width: auto;
  }

  /* (3-6) รายละเอียด: ป้ายชื่อคอลัมน์ (::before) + ค่า เรียงเป็นแถว key/value */
  body.staff .tbl-cards table.tbl td:nth-of-type(3),
  body.staff .tbl-cards table.tbl td:nth-of-type(4),
  body.staff .tbl-cards table.tbl td:nth-of-type(5),
  body.staff .tbl-cards table.tbl td:nth-of-type(6) {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 8px 0; border-top: 1px dashed var(--card-border) !important;
  }
  body.staff .tbl-cards table.tbl td:nth-of-type(3) { margin-top: 11px; }   /* เส้นคั่นเส้นแรกใต้หัวการ์ด */

  body.staff .tbl-cards table.tbl td:nth-of-type(3)::before { content: "วัน / เวลา"; }
  body.staff .tbl-cards table.tbl td:nth-of-type(4)::before { content: "ผู้ติดต่อ"; }
  body.staff .tbl-cards table.tbl td:nth-of-type(5)::before { content: "สินค้า / เส้นทาง"; }
  body.staff .tbl-cards table.tbl td:nth-of-type(6)::before { content: "รถ"; }
  body.staff .tbl-cards table.tbl td:nth-of-type(3)::before,
  body.staff .tbl-cards table.tbl td:nth-of-type(4)::before,
  body.staff .tbl-cards table.tbl td:nth-of-type(5)::before,
  body.staff .tbl-cards table.tbl td:nth-of-type(6)::before {
    flex: 0 0 84px; padding-top: 1px;
    color: var(--text-faint); font-size: .76rem; font-weight: 700; line-height: 1.4;
  }
  /* ค่าในแต่ละช่อง (ฝั่งขวาของป้าย) */
  body.staff .tbl-cards table.tbl td:nth-of-type(3) > *,
  body.staff .tbl-cards table.tbl td:nth-of-type(4) > *,
  body.staff .tbl-cards table.tbl td:nth-of-type(5) > *,
  body.staff .tbl-cards table.tbl td:nth-of-type(6) > * { min-width: 0; }
  /* ก้อนค่าฝั่งขวาให้ชิดเป็นบล็อกเดียว (text + .t-sub ที่อยู่หลังป้าย) */
  body.staff .tbl-cards table.tbl td:nth-of-type(3),
  body.staff .tbl-cards table.tbl td:nth-of-type(4),
  body.staff .tbl-cards table.tbl td:nth-of-type(5),
  body.staff .tbl-cards table.tbl td:nth-of-type(6) { flex-wrap: wrap; }
  body.staff .tbl-cards table.tbl td:nth-of-type(3) > :not(.x),
  body.staff .tbl-cards table.tbl td:nth-of-type(4) > :not(.x),
  body.staff .tbl-cards table.tbl td:nth-of-type(5) > :not(.x),
  body.staff .tbl-cards table.tbl td:nth-of-type(6) > :not(.x) { flex: 1 1 100%; }

  /* (8) จัดการ — เต็มกว้าง ล่างสุดของการ์ด ปุ่มหลักกดง่าย */
  body.staff .tbl-cards table.tbl td:nth-of-type(8) {
    margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--card-border) !important;
  }
  body.staff .tbl-cards table.tbl td:nth-of-type(8) .t-actions { width: 100%; align-items: stretch; }
  body.staff .tbl-cards table.tbl td:nth-of-type(8) .t-actions > form { flex: 1 1 auto; }
  body.staff .tbl-cards table.tbl td:nth-of-type(8) .t-actions .btn-sm { width: 100%; min-height: 44px; justify-content: center; }
  body.staff .tbl-cards table.tbl td:nth-of-type(8) .act-menu > summary { height: 44px; min-width: 44px; }

  /* แถว "ไม่พบรายการ" (colspan) */
  body.staff .tbl-cards table.tbl td.tbl-empty {
    text-align: center; padding: 26px 8px; color: var(--text-faint);
    border: 1px dashed var(--card-border) !important; border-radius: 14px;
  }
}

/* =====================================================================
   ตาราง → การ์ดบนมือถือ (auto-label) — ใช้กับทุกหน้าที่ครอบด้วย .tbl-cards-auto
   (เรียกคิว/สมาชิก/ร้าน/บัญชี LINE/ผู้ใช้/บันทึกการใช้งาน) · คู่กับ responsive-table.js
   ===================================================================== */
@media (max-width: 1023.98px), (hover: none) and (pointer: coarse){
  body.staff .tbl-cards-auto{ overflow:visible; border:0; box-shadow:none; background:transparent; }
  body.staff .tbl-cards-auto table.tbl{ display:block; width:100%; max-width:100%; white-space:normal; overflow:visible; border:0; background:transparent; font-size:.92rem; }
  body.staff .tbl-cards-auto table.tbl thead{ display:none; }
  body.staff .tbl-cards-auto table.tbl tbody{ display:block; }
  body.staff .tbl-cards-auto table.tbl tbody tr{ display:block; background:var(--card-bg); border:1px solid var(--card-border);
    border-radius:16px; padding:12px 14px; margin-bottom:12px; box-shadow:var(--shadow-sm, 0 1px 3px rgba(16,29,53,.08)); }
  body.staff .tbl-cards-auto table.tbl tbody tr:nth-child(even),
  body.staff .tbl-cards-auto table.tbl tbody tr:hover{ background:var(--card-bg); }
  body.staff .tbl-cards-auto table.tbl td{ display:flex; flex-wrap:wrap; gap:6px 10px; align-items:flex-start; width:auto;
    padding:7px 0; border:0; border-top:1px dashed var(--card-border) !important; white-space:normal; }
  body.staff .tbl-cards-auto table.tbl td:first-child{ border-top:0 !important; }
  body.staff .tbl-cards-auto table.tbl td::before{ content:attr(data-label); flex:0 0 92px;
    color:var(--text-faint); font-size:.76rem; font-weight:700; line-height:1.45; padding-top:2px; }
  body.staff .tbl-cards-auto table.tbl td > *{ min-width:0; }
  body.staff .tbl-cards-auto table.tbl td > :first-child{ flex:1 1 calc(100% - 102px); }
  body.staff .tbl-cards-auto table.tbl td > :not(:first-child){ flex:1 1 100%; }
  /* ปุ่ม/ฟอร์มจัดการ: เต็มกว้าง แตะง่าย */
  body.staff .tbl-cards-auto table.tbl td .t-actions,
  body.staff .tbl-cards-auto table.tbl td .rs-inline{ flex:1 1 100%; flex-wrap:wrap; gap:6px; }
  body.staff .tbl-cards-auto table.tbl td .btn-sm{ min-height:40px; }
  body.staff .tbl-cards-auto table.tbl td input[type="text"],
  body.staff .tbl-cards-auto table.tbl td input[type="password"],
  body.staff .tbl-cards-auto table.tbl td select{ flex:1 1 100%; min-height:40px; }
  /* แถว "ไม่พบรายการ" */
  body.staff .tbl-cards-auto table.tbl td.tbl-empty{ display:block; text-align:center; padding:24px 8px;
    color:var(--text-faint); border:1px dashed var(--card-border) !important; border-radius:14px; }
  body.staff .tbl-cards-auto table.tbl td.tbl-empty::before{ content:none; }
}

/* =====================================================================
   TRACKADO DATA LAYER — รูปแบบการแสดงข้อมูล/ฟอร์ม (ชั้นบนสุด · ครอบทั้งระบบ)
   ตาราง = การ์ดหัวแถบเทา-น้ำเงิน · ฟอร์ม = ป้ายเทาเล็ก + กริดโปร่ง · pill สถานะ
   ===================================================================== */

/* ---- 1) การ์ดตาราง: หัวแถบ section (slate) + ปุ่มแอ็กชันมุมขวา ---- */
.tbl-card { background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 18px; }
.tbl-card .tbl-head {
  display: flex; align-items: center; gap: 10px;
  background: var(--panelhead); color: #fff; padding: 12px 16px;
  font-weight: 700; font-size: .95rem; letter-spacing: .01em;
}
.tbl-card .tbl-head .ic-svg { color: #fff; }
.tbl-card .tbl-head .th-count { font-weight: 500; opacity: .82; font-size: .84rem; }
.tbl-card .tbl-head .th-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.tbl-card .tbl-wrap { border: 0; border-radius: 0; box-shadow: none; }
.tbl-card .tbl-head .btn-sm { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); color: #fff; }
.tbl-card .tbl-head .btn-sm:hover { background: rgba(255,255,255,.24); }
.tbl-card .tbl-head .btn-sm.primary { background: var(--primary); border-color: var(--primary); }

/* ---- 2) ตาราง: จุดนำ/ไอคอนหน้าแถว + คอลัมน์แรกเด่น ---- */
.tbl-wrap { border-radius: var(--radius); }
table.tbl thead th { font-family: inherit; }
.tbl .lead { display: inline-flex; align-items: center; gap: 9px; }
.tbl .lead .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-faint); flex: 0 0 auto; }
.tbl .lead .dot.g { background: var(--primary); } .tbl .lead .dot.b { background: var(--info); }
.tbl .lead .dot.a { background: var(--warn); } .tbl .lead .dot.t { background: var(--accent); }
.tbl .lead .dot.o { background: var(--orange); } .tbl .lead .dot.x { background: #9aa5b1; }
.tbl .lead .ric { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
  display: grid; place-items: center; background: var(--field-bg); color: var(--text-soft); font-size: 1rem; }
.tbl td .t-num { font-weight: 800; font-size: 1.05rem; color: var(--text); font-variant-numeric: tabular-nums; }

/* ---- 3) chip/badge หลากสีทรง Trackado (ประเภท/หมวด) ---- */
.chip, .job-badge { display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; line-height: 1.7;
  background: var(--field-bg); color: var(--text-soft); border: 1px solid var(--card-border); }
.chip.c-green { background: var(--success-soft); color: var(--success-dark); border-color: transparent; }
.chip.c-blue  { background: var(--info-soft); color: var(--info-dark); border-color: transparent; }
.chip.c-teal  { background: var(--accent-soft); color: #0d7c76; border-color: transparent; }
.chip.c-amber { background: var(--warn-soft); color: #a9770a; border-color: transparent; }
.chip.c-orange{ background: var(--orange-soft); color: #c14a24; border-color: transparent; }

/* pill สถานะแบบ Trackado (ทึบ ตัวอักษรขาว) — สำหรับ tag-* ที่ใช้ในหน้า HR/ร้าน ฯลฯ */
.tag-ok, .tag-wait, .tag-info, .tag-warn, .tag-block, .tag-danger { display: inline-block; padding: 4px 11px;
  border-radius: 5px; font-size: .74rem; font-weight: 700; color: #fff; white-space: nowrap; }
.tag-ok { background: var(--success); } .tag-wait { background: var(--warn); }
.tag-info { background: var(--info); } .tag-warn { background: var(--orange); }
.tag-block, .tag-danger { background: var(--danger); }

/* ---- 4) ฟอร์มกรอกข้อมูล: ป้ายเทาเล็ก + กริดโปร่ง (Trackado) ---- */
.pk-form { display: block; }
.pk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px 16px; }
.pk-form label, .pk-grid > label {
  display: flex; flex-direction: column; gap: 6px; margin: 0;
  font-size: .76rem; font-weight: 600; color: var(--text-soft); letter-spacing: .02em;
}
.pk-form label > input, .pk-form label > select, .pk-form label > textarea,
.pk-grid > label > input, .pk-grid > label > select, .pk-grid > label > textarea {
  font-weight: 400; font-size: .92rem; color: var(--text);
}
.pk-form .rs-inline { margin-top: 14px; }

/* หัวข้อกลุ่มฟิลด์ในฟอร์ม (เลขวงกลม + ชื่อหมวด) — โทน Trackado */
.form-section .sec-head { display: flex; align-items: center; gap: 9px; font-weight: 700;
  color: var(--text); font-size: .92rem; margin: 4px 0 12px; padding-bottom: 9px;
  border-bottom: 1px solid var(--card-border); }
.form-section .sec-head .n { width: 24px; height: 24px; border-radius: 50%; background: var(--primary);
  color: #fff; display: grid; place-items: center; font-size: .8rem; font-weight: 800; flex: 0 0 auto; }

/* ---- 5) label ทั่วไป (field เดี่ยว) ให้เป็นโทนเทาเล็กแบบ Trackado ---- */
body.staff .field > label, body.staff label.fld { font-size: .78rem; font-weight: 600;
  color: var(--text-soft); letter-spacing: .02em; margin-bottom: 6px; }


/* =====================================================================
   TRACKADO SHELL — โครงหน้าเจ้าหน้าที่ตามภาษาดีไซน์ app.trackado.com
   (ต่อท้ายไฟล์ — ทับกฎเดิมทั้งหมด)
   ===================================================================== */
body.staff { font-size: 14px; }

/* ---------- แถบข้าง 300px ---------- */
.side { background: var(--side-bg); border-right: 0; }
.side-brand {
  height: var(--topbar-h); padding: 0 20px; gap: 12px;
  border-bottom: 1px solid var(--side-line);
}
.side-brand .logo { width: 42px; height: 42px; border-radius: var(--radius-btn); box-shadow: none; }
.side-brand .nm { font-size: 1.05rem; font-weight: 700; }
.side-brand .nm small { color: var(--side-text-faint); }
.side-collapse { border-radius: var(--radius-btn); border-color: rgba(255,255,255,.16); }

.side-nav { padding: 0; gap: 0; }
.side-nav .grp {
  font-size: .62rem; font-weight: 700; letter-spacing: .12em;
  padding: 18px 20px 8px; color: var(--side-text-faint);
}
.side-nav a {
  min-height: 70px; padding: 0 20px; gap: 14px; border-radius: 0;
  border-bottom: 1px solid var(--side-line);
  font-size: .95rem; font-weight: 600; color: var(--side-text);
}
/* ไอคอน = วงกลมสีทึบ สัญลักษณ์ขาว (ลายเซ็น Trackado) */
.side-nav a .ic {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  background: var(--ic-ops); color: #fff;
}
.side-nav a .ic .ic-svg { width: 17px; height: 17px; }
.side-nav a[data-g="hr"]      .ic { background: var(--ic-alert); }
.side-nav a[data-g="system"]  .ic { background: var(--ic-system); }
.side-nav a[data-g="eqr"]     .ic { background: var(--ic-eqr); }
.side-nav a:hover { background: var(--side-hover); color: #fff; }
.side-nav a.on { background: var(--side-active); color: #fff; font-weight: 700; box-shadow: none; }
.side-nav a .ext { margin-left: auto; color: var(--side-text-faint); font-size: .8rem; }
.side-nav a .nav-badge { background: var(--orange); color: #fff; border-radius: var(--radius-pill); }

.side-foot { border-top: 1px solid var(--side-line); }
.side-user .av { border-radius: 50%; background: var(--primary); }
.side-foot .logout { border-radius: var(--radius-btn); }

/* ---------- แถบบน 90px สีเดียวกับแถบข้าง ---------- */
body.staff .work-head {
  min-height: var(--topbar-h); padding: 0 24px; gap: 18px;
  background: var(--side-bg); backdrop-filter: none;
  border-bottom: 0; box-shadow: 0 1px 4px rgba(0,0,0,.10);
  color: #fff;
  /* จอแคบ: ให้ปุ่มตกลงบรรทัดใหม่ได้ ดีกว่าดันจนหน้าเลื่อนแนวนอน */
  flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px;
}
/* ยอมให้บล็อกชื่อเรื่องหดได้ (เดิม 0 0 auto = ไม่หดเลย หน้าที่คำอธิบายยาวจึงดันจอ) */
.work-head .wh-titles { flex: 1 1 auto; min-width: 0; }
.work-head .sub, .work-head .eyebrow { overflow-wrap: anywhere; }
.work-head h1 { color: #fff; font-size: 1.2rem; font-weight: 700; }
.work-head .eyebrow { color: var(--side-text-faint); background: transparent; padding: 0; border: 0; }
.work-head .sub { color: var(--side-text-faint); }

/* ช่องค้นหา: โปร่งบนพื้นกรมท่า ตัวอักษรเอียง (เหมือน Trackado) */
.topsearch {
  flex: 1 1 auto; max-width: none; background: transparent; border: 0;
  border-radius: 0; padding: 0; box-shadow: none;
}
.topsearch:focus-within { background: transparent; border: 0; box-shadow: none; }
.topsearch .ts-ic { color: var(--side-text-faint); }
.topsearch input { color: #fff !important; font-style: italic; font-size: .95rem; }
.topsearch input::placeholder { color: var(--side-text-faint); font-style: italic; opacity: 1; }

.work-head .head-actions { flex: 0 1 auto; min-width: 0; }   /* จอแคบ: ปุ่มหดแล้วตัดบรรทัดได้ (เดิมห้ามหด ดันจอล้น) */
.work-head .head-actions .btn-sm {
  background: transparent; border: 1px solid rgba(255,255,255,.22); color: #fff;
}
.work-head .head-actions .btn-sm:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.4); }
.work-head .head-actions .btn-sm.primary { background: var(--primary); border-color: var(--primary); }

.work-body { padding: 24px; background: var(--canvas); }

/* ---------- การ์ด / แผง: flat เหลี่ยม เงาบาง ---------- */
body.staff .bk,
body.staff .toolbar,
.dash-panels .panel,
.tbl-wrap,
.slot-block,
.navcard,
.kpi {
  border-radius: 0; box-shadow: var(--shadow-sm); border: 1px solid var(--card-border);
}
body.staff .bk:hover,
.navcard:hover,
.kpi:hover { box-shadow: var(--shadow-sm); transform: none; border-color: var(--card-border); }

/* ---------- KPI card แบบ Trackado ----------
   ไอคอนวงกลมซ้าย · ป้ายชื่อ (ตัวพิมพ์ใหญ่) บนขวา · ตัวเลขใหญ่สีเดียวกับไอคอนใต้ป้าย

   flex-direction:row สำคัญ — กฎ .kpi ที่บรรทัด ~631 ตั้ง column ไว้
   บล็อกนี้เดิมตั้งแค่ align-items:center แต่ไม่ได้รีเซ็ตทิศทาง
   การ์ดเลยยังเรียงลงมาแนวตั้ง (ไอคอนลอยอยู่กลางด้านบน) ไม่เหมือนต้นแบบ */
.kpi {
  flex-direction: row; align-items: center;
  padding: 15px 16px; gap: 14px;
}
.kpi-ic { width: 46px; height: 46px; }
.kpi-ic .ic-svg { width: 20px; height: 20px; color: #fff !important; }
/* markup เรียง val ก่อน lbl — reverse ให้ป้ายชื่ออยู่บนตามต้นแบบ
   min-width:0 กันป้ายชื่อยาว ๆ ดันการ์ดจนล้นกริด */
.kpi-body { display: flex; flex-direction: column-reverse; min-width: 0; flex: 1 1 auto; }
.kpi-lbl {
  font-size: .7rem; font-weight: 700; letter-spacing: .02em; line-height: 1.35;
  color: var(--text); text-transform: uppercase; margin: 0 0 4px;
  overflow-wrap: anywhere;
}
.kpi-val { font-size: 1.7rem; font-weight: 700; line-height: 1; }
.kpi-ic.ic-green  { background: var(--success); }
.kpi-ic.ic-blue   { background: var(--info); }
.kpi-ic.ic-amber  { background: var(--warn); }
.kpi-ic.ic-sky    { background: var(--accent); }
.kpi-ic.ic-violet { background: var(--ic-system); }
.kpi-ic.ic-orange { background: var(--orange); }
/* ตัวเลขรับสีจากไอคอน (Trackado ใช้สีเดียวกัน) */
.kpi:has(.ic-green)  .kpi-val { color: var(--success); }
.kpi:has(.ic-blue)   .kpi-val { color: var(--info); }
.kpi:has(.ic-amber)  .kpi-val { color: var(--warn); }
.kpi:has(.ic-sky)    .kpi-val { color: var(--accent); }
.kpi:has(.ic-violet) .kpi-val { color: var(--ic-system); }
.kpi:has(.ic-orange) .kpi-val { color: var(--orange); }
.kpi-ic.ic-red    { background: var(--danger); }
.kpi:has(.ic-red)    .kpi-val { color: var(--danger); }

/* ---------- ชุดสีแบบใหม่: ใส่คลาสสีที่ตัว .kpi ใบเดียว คุมทั้งไอคอนและตัวเลข ----------
   แบบเดิม (.kpi-ic.ic-*) ต้องพึ่ง :has() ซึ่งเบราว์เซอร์เก่าไม่รองรับ
   แบบนี้ตรงไปตรงมากว่าและใช้กับการ์ดที่กดได้ด้วย · ของเดิมยังใช้ได้อยู่ ไม่ต้องแก้หน้ารายงาน */
.kpi.k-blue   .kpi-ic { background: var(--info); }      .kpi.k-blue   .kpi-val { color: var(--info); }
.kpi.k-green  .kpi-ic { background: var(--success); }   .kpi.k-green  .kpi-val { color: var(--success); }
.kpi.k-warn   .kpi-ic { background: var(--warn); }      .kpi.k-warn   .kpi-val { color: var(--warn); }
.kpi.k-orange .kpi-ic { background: var(--orange); }    .kpi.k-orange .kpi-val { color: var(--orange); }
.kpi.k-red    .kpi-ic { background: var(--danger); }    .kpi.k-red    .kpi-val { color: var(--danger); }
.kpi.k-sky    .kpi-ic { background: var(--accent); }    .kpi.k-sky    .kpi-val { color: var(--accent); }
.kpi.k-violet .kpi-ic { background: var(--ic-system); } .kpi.k-violet .kpi-val { color: var(--ic-system); }
/* ไม่มีงานค้าง — เทาจาง ไม่ให้เลข 0 แย่งสายตาจากใบที่มีงานจริง */
.kpi.k-mute   .kpi-ic { background: #c3ccd4; }          .kpi.k-mute   .kpi-val { color: var(--text-faint); }

/* การ์ดที่กดได้ (แถบ "ต้องดำเนินการ" บนภาพรวม) */
a.kpi-link { text-decoration: none; color: inherit; }
a.kpi-link:hover { border-color: var(--info); box-shadow: var(--shadow); }
a.kpi-link:hover .kpi-go { color: var(--info); }
/* อยู่ใน .kpi-body ที่เป็น column-reverse → บรรทัดนี้แสดงล่างสุด
   จึงต้องเว้นระยะด้าน bottom (ซึ่งอยู่ "เหนือ" ตัวมันเมื่อกลับด้าน) */
.kpi-go {
  font-size: .72rem; font-weight: 600; color: var(--text-faint); margin-bottom: 0; margin-top: 5px;
  overflow-wrap: anywhere; order: -1;
}
/* การ์ดที่มีบรรทัดที่สาม สูงกว่าใบธรรมดา — ให้ทุกใบในกริดเดียวกันสูงเท่ากัน */
.kpi-grid > .kpi { align-items: center; }
/* กริด 4 ใบ (ภาพรวม) — หาร 4 ลงตัวทุกช่วงจอ ไม่ให้เหลือใบโดด */
@media (min-width: 1024px) { .kpi-grid.kpi-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1750px) { .kpi-grid.kpi-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- หัวแผง: แถบ #638ca5 เต็มกว้าง + ไอคอนวงกลม ---------- */
.dash-panels .panel, body.staff .bk { padding-top: 0; overflow: hidden; }
.panel-h, .bk .card-h {
  background: var(--panelhead); color: #fff;
  border-radius: 0; margin: 0 -1px 16px; padding: 14px 18px;
  font-size: 1.05rem; font-weight: 600; letter-spacing: 0;
}
.panel-h .hi, .bk .card-h .hi {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(255,255,255,.22); display: grid; place-items: center;
}
.panel-h .hi .ic-svg, .bk .card-h .hi .ic-svg { width: 16px; height: 16px; }
.panel-h .upd, .bk .card-h .upd { margin-left: auto; font-size: .78rem; font-weight: 400; opacity: .85; }

.dash-sec { font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 24px 0 12px; }

/* ---------- ตาราง ---------- */
table.tbl { font-size: .84rem; }
table.tbl thead th {
  background: var(--field-bg); color: var(--text);
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  padding: 12px 14px; border-bottom: 1px solid var(--card-border);
}
table.tbl tbody td { padding: 14px; font-weight: 500; color: var(--text); }
table.tbl tbody tr:hover { background: var(--field-bg); }
.tbl .t-main { font-weight: 700; }
.tbl .t-code { color: var(--info); }
/* ป้ายสถานะในตาราง = แท่งสีเต็มคอลัมน์ (Trackado) */
/* แท่งสถานะในตาราง — เต็มคอลัมน์แต่จำกัดความกว้าง กันกลายเป็นแถบยาวเกินจำเป็น */
.tbl td .st { display: block; width: 100%; max-width: 170px; padding: 6px 10px; font-size: .72rem; }
.tbl .t-actions .btn-sm,
.tbl .t-actions details.rs > summary { border-radius: var(--radius-btn); }

/* ---------- ปุ่ม / ช่องกรอก ---------- */
body.staff input, body.staff select, body.staff textarea {
  border-radius: var(--radius-btn); border: 1px solid var(--field-border); background-color: #fff; padding: 10px 12px;
}
body.staff input:focus, body.staff select:focus, body.staff textarea:focus {
  border-color: var(--info); box-shadow: 0 0 0 2px var(--info-soft);
}
body.staff .btn-sm { border-radius: var(--radius-btn); font-weight: 600; padding: 8px 14px; }
body.staff .btn-sm:hover { filter: none; border-color: var(--info); }
body.staff .btn-sm.primary { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: none; }
body.staff .btn-sm.primary:hover { filter: brightness(.95); border-color: var(--primary); }
body.staff .btn-sm.info { background: var(--info); border-color: var(--info); color: #fff; box-shadow: none; }
body.staff .btn-sm.danger { background: #fff; border-color: var(--danger); color: var(--danger); }
body.staff .btn-primary { box-shadow: none; }

/* ---------- กลุ่มคิว / แถบหัวช่วงเวลา ---------- */
.slot-block { border-radius: 0; }
.slot-head { background: var(--panelhead); color: #fff; }
.slot-head .slot-time { color: #fff; }
.slot-head .slot-cnt { background: rgba(255,255,255,.22); color: #fff; }
.qrow { border-radius: 0; }

/* ---------- การ์ดเมนูลัด ---------- */
.navcard { border-radius: 0; }
.navcard .nv-t { color: var(--text); font-weight: 700; }

/* ---------- pager / chip ---------- */
.pager a, .pager .pg { border-radius: var(--radius-btn); border-width: 1px; box-shadow: none; }
.pager a:hover { transform: none; border-color: var(--info); color: var(--info-dark); }
.pager .pg.cur { background: var(--primary); border-color: var(--primary); color: #fff; }
.comp-chip, .fchip { border-radius: var(--radius-btn); }

/* ---------- หน้าเข้าสู่ระบบ ---------- */
body.auth { background: var(--canvas); }
.auth-card { border-radius: 0; box-shadow: var(--shadow); border: 1px solid var(--card-border); }
.auth-head { background: var(--side-bg); }
.auth-head h1 { font-weight: 700; }

.live-banner { border-radius: var(--radius-btn); box-shadow: var(--shadow); }

/* ---------- เมนูย่อ ---------- */
body.staff.nav-collapsed { --side-w: 86px; }
body.staff.nav-collapsed .side-nav a { width: auto; padding: 0; justify-content: center; }

/* ---------- มือถือ ---------- */
@media (max-width: 900px) {
  .side-nav a { min-height: 0; padding: 9px 11px; border-bottom: 0; }
  .side-nav a .ic { width: 30px; height: 30px; }
  body.staff .work-head { min-height: 64px; padding: 12px 16px; }
  .work-head h1 { font-size: 1.05rem; }
  .work-body { padding: 16px 14px 40px; }
}


/* =====================================================================
   โลโก้ TEGH — static/logo-tegh.png (lockup แนวนอน: มาร์กแดง + อักษรน้ำเงิน)
   อักษรเป็นสีน้ำเงินเข้ม จึงอ่านไม่ออกบนแถบกรมท่า → ใส่ "แผ่นขาว" รองให้
   ===================================================================== */
.logo-img { display: block; height: 28px; width: auto; max-width: 100%; }

/* ล้างไทล์สี่เหลี่ยมสีเขียวเดิมของทุกจุดที่วางโลโก้ */
.brand .logo,
.side-brand .logo,
.face-bar .logo,
.tv-head .logo,
.wb-head .logo,
.yard-bar .logo,
.doc-logo,
.auth-head .logo,
.s-logo {
  width: auto !important; height: auto !important;
  background: transparent !important; box-shadow: none !important;
  border-radius: 0; font-size: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- บนพื้นสว่าง: วางโลโก้ตรง ๆ ---------- */
.brand .logo .logo-img { height: 30px; }
.face-bar .logo .logo-img { height: 26px; }
.yard-bar .logo .logo-img { height: 28px; }
.doc-logo .logo-img { height: 34px; }
.s-logo .logo-img { height: 11mm; width: auto; margin: 0 auto; }

/* ---------- บนพื้นเข้ม: แผ่นขาวรองให้อ่านออก ---------- */
.side-brand .logo,
.auth-head .logo,
.wb-head .logo,
.tv-head .logo {
  background: #fff !important;
  padding: 7px 11px;
  border-radius: var(--radius-btn);
}
.side-brand .logo .logo-img { height: 26px; }
.auth-head .logo .logo-img { height: 44px; }
.wb-head .logo .logo-img,
.tv-head .logo .logo-img { height: 30px; }

/* แถบข้าง: แสดงชื่อระบบบรรทัดเดียว */
.side-brand .nm { font-size: .95rem; line-height: 1.25; font-weight: 700; color: #fff; }

/* เมนูย่อ (86px): ครอปเหลือเฉพาะสัญลักษณ์ด้านซ้าย */
body.staff.nav-collapsed .side-brand .logo { padding: 6px; }
body.staff.nav-collapsed .side-brand .logo .logo-img {
  width: 34px; height: 30px; object-fit: cover; object-position: left center;
}

/* หน้า login: โลโก้อยู่กลางหัวการ์ด */
.auth-head .logo { margin: 0 auto 10px; }

/* สลิป/เอกสารพิมพ์: บังคับพื้นขาว ไม่ให้เปลืองหมึก */
@media print {
  .logo-img { height: 11mm; }
  .side-brand .logo, .auth-head .logo, .wb-head .logo, .tv-head .logo {
    background: transparent !important; padding: 0;
  }
}


/* =====================================================================
   แถบข้าง: เมนูหลัก + เมนูย่อยพับได้ (โครงเดียวกับ Trackado)
   หัวข้อหมวด (ปฏิบัติงาน / งานบุคคล / จอแสดงผล / ข้อมูล / ตั้งค่าระบบ)
   = เมนูหลัก · กดที่แถวหรือปุ่ม + เพื่อกาง/พับเมนูย่อย
   ===================================================================== */
.side-nav { padding: 0; gap: 0; display: block; }

/* ---------- เมนูหลัก (แถวหมวด) ---------- */
.grp-head {
  width: 100%; display: flex; align-items: center; gap: 14px;
  min-height: 70px; padding: 0 20px; margin: 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--side-line);
  color: var(--side-text); font-family: inherit; font-size: .95rem; font-weight: 600;
  text-align: left; cursor: pointer;
  transition: background .14s;
}
.grp-head:hover { background: var(--side-hover); }
.grp-block.open > .grp-head { background: var(--side-active); }

/* ไอคอนวงกลมสีประจำหมวด */
.grp-head .ic {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; color: #fff;
}
.grp-head .ic .ic-svg { width: 17px; height: 17px; }
.grp-block[data-g="hr"]      > .grp-head .ic { background: var(--ic-alert); }
.grp-block[data-g="system"]  > .grp-head .ic { background: var(--ic-system); }
.grp-block[data-g="eqr"]     > .grp-head .ic { background: var(--ic-eqr); }

.grp-head .lbl { flex: 1 1 auto; min-width: 0; }
.grp-head .grp-badge { flex: 0 0 auto; margin-right: 2px; }

/* ปุ่ม + / − ด้านขวา */
.grp-head .tw {
  position: relative; flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.12);
}
.grp-head .tw::before,
.grp-head .tw::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: #fff; transform: translate(-50%,-50%);
}
.grp-head .tw::before { width: 11px; height: 2px; }
.grp-head .tw::after  { width: 2px; height: 11px; transition: transform .2s ease; }
.grp-block.open > .grp-head .tw::after { transform: translate(-50%,-50%) scaleY(0); }

/* ---------- เมนูย่อย ---------- */
.grp-sub {
  /* แกน x ของเส้นลำต้น — หัวข้อ จุด และเส้น อ้างค่านี้ตัวเดียวกันหมด
     จอที่เยื้องไม่เท่ากันแค่ทับค่านี้ค่าเดียว ไม่ต้องไล่แก้ทีละ ::before/::after
     (เดิมแก้ไม่ครบ หัวข้ออยู่ x=36 แต่รายการบางจอ x=32 → เส้นเหลื่อมกัน 4px) */
  --tree-x: 36px;
  background: #2e3846;
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease-out);
}
.grp-sub-in { overflow: hidden; min-height: 0; }
.grp-block.open > .grp-sub { grid-template-rows: 1fr; }

.side-nav .grp-sub a {
  position: relative; display: flex; align-items: center; gap: 8px;
  min-height: 0; padding: 10px 18px 10px 62px;
  border-bottom: 0; border-radius: 0;
  font-size: .88rem; font-weight: 500; color: var(--side-text-faint);
}
/* เส้นลำต้นแนวตั้ง */
.side-nav .grp-sub a::before {
  content: ""; position: absolute; left: var(--tree-x); top: 0; bottom: 0;
  width: 1px; background: rgba(255,255,255,.3);
}
.side-nav .grp-sub a:first-child::before { top: 50%; }
.side-nav .grp-sub a:last-child::before  { bottom: 50%; }
.side-nav .grp-sub a:first-child:last-child::before { display: none; }
/* จุดหน้าเมนู */
.side-nav .grp-sub a::after {
  content: ""; position: absolute; left: calc(var(--tree-x) - 4px); top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: #2e3846; border: 2px solid rgba(255,255,255,.3);
}
.side-nav .grp-sub a:hover { background: var(--side-hover); color: #fff; }
.side-nav .grp-sub a:hover::after { border-color: rgba(255,255,255,.6); }
.side-nav .grp-sub a.on { color: #fff; font-weight: 700; background: transparent; box-shadow: none; }
.side-nav .grp-sub a.on::after { background: var(--primary); border-color: var(--primary); }
.side-nav .grp-sub a .ic { display: none; }   /* เมนูย่อยใช้จุด timeline เท่านั้น ไม่มีไอคอน */
.side-nav .grp-sub a .ext { margin-left: auto; color: var(--side-text-faint); font-size: .78rem; }
.side-nav .grp-sub a .nav-badge {
  margin-left: auto; flex: 0 0 auto; background: var(--orange); color: #fff;
  border-radius: var(--radius-pill); min-width: 20px; height: 20px; padding: 0 7px;
  display: inline-grid; place-items: center; font-size: .7rem; font-weight: 700;
}
/* ---------- หัวข้อย่อยในหมวด (นัดหมายส่งยาง · หน้างาน · จอคิว …) ----------
   แบบเดิม: แท่งหนา "|" + ตัวหนาใหญ่สีขาว เยื้อง 48px ขณะที่รายการเริ่ม 62px
   → หัวข้อลอยอยู่คนละแนวกับเส้น/จุดของรายการ ดูเป็นตัวอักษร "|" มากกว่าส่วนหนึ่งของเมนู

   แบบใหม่: "ป้ายหัวกิ่ง" (chip) วางบนเส้นลำต้นเดียวกับจุดของรายการ
   · จุดทึบในป้ายอยู่ตรงแกน --tree-x พอดี (จุดรายการเป็นวงกลวง) → หัวข้อ = ต้นกิ่ง รายการ = ลูกบนกิ่ง
   · เส้นลำต้นลากจากใต้ป้ายลงไปต่อกับรายการแรก ไม่มีรอยขาด
   · ตัวอักษรเล็กแต่สว่างกว่ารายการ + กรอบป้าย → อ่านเป็นหัวข้อ ไม่ใช่เมนูที่กดได้ และไม่แย่งสายตาจากเมนูที่เปิดอยู่
   ไม่ใช้ --primary (สงวนไว้บอกเมนูที่เปิดอยู่) · ไม่ใช้ uppercase (ไม่มีผลกับภาษาไทย) */
.side-nav .grp-sub .sub-sep {
  position: relative; width: fit-content; max-width: calc(100% - var(--tree-x) - 8px);
  margin: 16px 18px 5px calc(var(--tree-x) - 10px);        /* ขอบซ้ายป้าย = แกน - 10px → จุดในป้ายตรงแกนพอดี */
  padding: 4px 12px 4px 21px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 14px; background: rgba(255,255,255,.07);
  font-size: .78rem; font-weight: 700; letter-spacing: .02em; line-height: 1.4;
  color: rgba(255,255,255,.86);           /* ชื่อยาวในเมนูลอยแคบ ๆ ขึ้นบรรทัดใหม่ ไม่ตัดเป็น "…" */
}
/* หัวข้อแรกของหมวดชิดใต้ชื่อหมวด */
.side-nav .grp-sub-in > .sub-sep:first-child { margin-top: 10px; }
/* จุดทึบในป้าย — กลางจุดอยู่ที่แกนเส้นลำต้น (padding-box เริ่มที่ แกน - 9px) */
.side-nav .grp-sub .sub-sep::after {
  content: ""; position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.75);
}
/* เส้นลำต้นจากใต้ป้ายลงไปบรรจบรายการแรก (ขอบล่าง 1px + ระยะห่าง 5px) */
.side-nav .grp-sub .sub-sep::before {
  content: ""; position: absolute; left: 9px; top: 100%; height: 6px;
  width: 1px; background: rgba(255,255,255,.3);
}
/* รายการสุดท้ายของกลุ่ม — จบเส้นที่จุดสุดท้าย ไม่ห้อยลงไปในช่องว่างระหว่างกลุ่ม
   (:has ไม่รองรับในเบราว์เซอร์เก่า → เส้นยาวเกินนิดเดียว ไม่ใช่ปัญหา) */
.side-nav .grp-sub a:has(+ .sub-sep)::before { bottom: 50%; }

/* ---------- เมนูย่อ (rail) : เหลือเฉพาะไอคอนหมวด ---------- */
body.staff.nav-collapsed .grp-head { justify-content: center; padding: 0; }
body.staff.nav-collapsed .grp-head .lbl,
body.staff.nav-collapsed .grp-head .tw,
body.staff.nav-collapsed .grp-head .grp-badge { display: none; }
body.staff.nav-collapsed .grp-sub { grid-template-rows: 0fr !important; }
body.staff.nav-collapsed .grp-head .ic { width: 38px; height: 38px; }

/* ---------- มือถือ: แถบบนเลื่อนแนวนอน ---------- */
@media (max-width: 900px) {
  .side-nav { display: flex; flex-direction: row; align-items: center; }
  .grp-block { flex: 0 0 auto; }
  .grp-head { min-height: 0; padding: 8px 10px; border-bottom: 0; gap: 8px; font-size: .85rem; }
  .grp-head .tw { display: none; }
  .grp-sub {
    position: absolute; top: 100%; left: 0; z-index: 60;
    min-width: 220px; background: var(--side-bg-2);
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
  }
  .grp-block { position: relative; }
  /* หมวดยาวบนมือถือ — เมนูย่อยดรอปดาวน์ต้องเลื่อนได้ ไม่ทะลุพ้นจอ */
  .grp-block.open > .grp-sub > .grp-sub-in{
    max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain;
  }
  .side-nav .grp-sub { --tree-x: 20px; }
  .side-nav .grp-sub a { padding: 11px 16px 11px 40px; }
}

/* หัวแผงเต็มขอบการ์ด (ดึงลบเท่ากับ padding ของการ์ดแต่ละชนิด) */
.dash-panels .panel > .panel-h { margin: 0 -20px 16px; }
.grid-2 > .panel > .panel-h    { margin: 0 -20px 16px; }
body.staff .bk > .card-h       { margin: 0 -18px 16px; }
.panel.up-card > .panel-h      { margin: 0 -20px 16px; }

/* หัวการ์ด .bk ที่เขียนเป็น <strong> ตัวแรก → แถบ #638ca5 เต็มขอบ เหมือนหัวแผงอื่น */
body.staff .bk > strong:first-child {
  display: flex; align-items: center; gap: 10px;
  margin: 0 -18px 16px; padding: 14px 18px;
  background: var(--panelhead); color: #fff;
  font-size: 1.05rem; font-weight: 600;
  border-bottom: 0;
}
body.staff .bk > strong:first-child .ic-svg { color: #fff; }
body.staff .bk > strong:first-child + .muted,
body.staff .bk > strong:first-child + span.muted { color: var(--text-soft); }
/* การ์ด .bk ที่มีหัวแถบ ต้องไม่มี padding บน (แถบชิดขอบ) */
body.staff .bk { padding-top: 0; overflow: hidden; }
/* การ์ดที่ไม่มีหัวแถบ ให้คง padding บนไว้ */
body.staff .bk:not(:has(> strong:first-child)):not(:has(> .card-h)):not(:has(> .mf-head)) { padding-top: 16px; }

/* หัวการ์ดแบบ .mf-head (ราคายาง/ฟอร์มสมาชิก) → แถบ #638ca5 เต็มขอบ */
body.staff .bk > .mf-head {
  display: flex; align-items: center; gap: 12px;
  margin: 0 -18px 16px; padding: 12px 18px;
  background: var(--panelhead); color: #fff; border-bottom: 0;
}
body.staff .bk > .mf-head strong { color: #fff; font-weight: 600; font-size: 1.05rem; }
body.staff .bk > .mf-head .muted { color: rgba(255,255,255,.85) !important; }
body.staff .bk > .mf-head .mf-ic {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(255,255,255,.22); color: #fff; display: grid; place-items: center;
}
body.staff .bk > .mf-head .mf-ic .ic-svg { width: 16px; height: 16px; color: #fff; }

/* ลิงก์บนแถบหัวกรมท่า ต้องเป็นสีขาว */
body.staff .work-head a,
body.staff .work-head a.btn-sm { color: #fff; }
body.staff .work-head a.btn-sm:hover { background: rgba(255,255,255,.10); }


/* =====================================================================
   เมนูหลัก/เมนูย่อย — รองรับ rail (แท็บเล็ต) และ drawer (มือถือ)
   วางท้ายสุดเพื่อทับกฎ responsive เดิมที่ยังอ้างโครงเมนูแบบเก่า
   ===================================================================== */

/* ---------- TABLET 768–1023px : rail 74px + เมนูย่อยเป็นแผงลอยด้านขวา ---------- */
@media (min-width:768px) and (max-width:1023.98px){
  body.staff .side-nav{ display:block !important; }
  body.staff .grp-block{ position:relative; width:100%; display:flex; justify-content:center; }

  body.staff .grp-head{
    width:48px !important; min-height:46px; height:46px;
    padding:0 !important; justify-content:center !important;
    border-bottom:0; margin:3px 0;
  }
  body.staff .grp-head .lbl,
  body.staff .grp-head .tw{ display:none !important; }
  body.staff .grp-head .ic{ width:38px; height:38px; }
  body.staff .grp-head .grp-badge{ position:absolute; top:2px; right:6px; margin:0; }

  /* ชี้/กางแล้วให้เมนูย่อยลอยออกมาทางขวา (rail แคบเกินกว่าจะกางในตัว) */
  body.staff .grp-sub{
    position:absolute; left:100%; top:0; z-index:70;
    min-width:220px; grid-template-rows:0fr;
    background:var(--side-bg-2); box-shadow:14px 0 40px rgba(11,18,32,.28);
  }
  body.staff .grp-block:hover > .grp-sub,
  body.staff .grp-block:focus-within > .grp-sub{ grid-template-rows:1fr; }
  body.staff .side-nav .grp-sub a{ padding:11px 16px 11px 40px !important; width:auto !important; justify-content:flex-start !important; }
  body.staff .side-nav .grp-sub{ --tree-x:20px; }
  body.staff .side-nav .grp-sub a .lbl{ display:inline !important; }
}

/* ---------- MOBILE < 768px : drawer เต็มความกว้าง — กางในตัวตามปกติ ---------- */
@media (max-width:767.98px){
  body.staff .side-nav{ display:block !important; padding:0 !important; }
  body.staff .grp-block{ position:static; }
  body.staff .grp-head{
    width:100% !important; min-height:58px; padding:0 16px !important;
    justify-content:flex-start !important; border-bottom:1px solid var(--side-line);
  }
  body.staff .grp-head .lbl{ display:block !important; }
  body.staff .grp-head .tw{ display:block !important; }
  body.staff .grp-sub{ position:static; box-shadow:none; background:#2e3846; }
  body.staff .side-nav .grp-sub a{
    width:auto !important; justify-content:flex-start !important;
    padding:12px 16px 12px 56px !important; font-size:.92rem !important; white-space:normal;
  }
  body.staff .side-nav .grp-sub{ --tree-x:32px; }
  /* จอนี้รายการโตเป็น .92rem — ป้ายหัวข้อโตตามเล็กน้อย (ยังเป็นป้าย ไม่แย่งสายตาจากรายการ) */
  body.staff .side-nav .grp-sub .sub-sep{ font-size:.8rem; }
  body.staff .side-nav .grp-sub a .lbl{ display:inline !important; }
}

/* ---------- เมนูย่อ (rail 86px) บนจอใหญ่ : เมนูย่อยลอยออกด้านขวาเช่นกัน ---------- */
@media (min-width:1024px){
  body.staff.nav-collapsed .grp-block{ position:relative; }
  body.staff.nav-collapsed .grp-sub{
    position:absolute; left:100%; top:0; z-index:70;
    min-width:230px; background:var(--side-bg-2);
    box-shadow:14px 0 40px rgba(11,18,32,.28);
  }
  body.staff.nav-collapsed .grp-block:hover > .grp-sub{ grid-template-rows:1fr !important; }
  /* หมวดยาว (งานบริษัท EQR) — กันเมนูย่อยที่ลอยออกมาล้นจอจนกดตัวล่างไม่ได้ */
  body.staff.nav-collapsed .grp-block:hover > .grp-sub > .grp-sub-in{
    max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain;
  }
  body.staff.nav-collapsed .side-nav .grp-sub a{ padding:11px 16px 11px 40px; }
  body.staff.nav-collapsed .side-nav .grp-sub{ --tree-x:20px; }
}

/* ไอคอนในหัวแถบ: บังคับเป็นวงกลมโปร่งขาว แม้เทมเพลตกำหนดสีมาแบบ inline */
body.staff .bk > .mf-head .mf-ic { background: rgba(255,255,255,.22) !important; color: #fff !important; }
/* การ์ดที่กำหนด max-width เอง (เช่น บล็อกร้าน) — หัวแถบยังต้องชิดขอบบน */
body.staff .bk.block-panel { padding-top: 0; }

/* =====================================================================
   แท็บกรองสถานะ — ใช้ชื่อคลาส st-* ซ้ำกับ "ป้ายสถานะ" ในตาราง
   จึงต้องกันไม่ให้แท็บรับพื้นสีทึบ · คงลุค underline tab แบบ Trackado
   แล้วบอกสถานะด้วย "จุดสี" หน้าแท็บแทน
   ===================================================================== */
/* กฎหลักของแท็บอยู่ที่ ".status-tabs .stab" ด้านบนแล้ว — ตรงนี้แก้เฉพาะ 2 จุดที่หลุด
   1) แท็บที่เป็น <a> ติดขีดเส้นใต้จาก default ของเบราว์เซอร์ (แท็บที่เป็น <button> ไม่เป็น)
      จึงทำให้บางหน้าดูเป็นลิงก์ ไม่ใช่แท็บ
   2) คลาส st-* ใช้ชื่อซ้ำกับ "ป้ายสถานะ" ที่มีกฎ body.staff .st-xxx (น้ำหนักสูงกว่า)
      แท็บจึงถูกเติมพื้นสีทึบ — ต้องยกน้ำหนักด้วย body.staff ให้ชนะ */
body.staff .status-tabs .stab {
  text-decoration: none; background: transparent; color: var(--text-soft);
}
body.staff .status-tabs .stab:hover { color: var(--text); }
body.staff .status-tabs .stab.on { color: var(--primary); }

/* จุดสีบอกสถานะหน้าแท็บ */
.status-tabs .stab[class*="st-"]::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
}
/* นัดส่งยาง */
.status-tabs .stab.st-pending::before   { background: var(--warn); }
.status-tabs .stab.st-confirmed::before { background: var(--info); }
.status-tabs .stab.st-arrived::before   { background: var(--accent); }
.status-tabs .stab.st-completed::before { background: var(--success); }
.status-tabs .stab.st-cancelled::before { background: var(--text-faint); }
/* ผู้มาติดต่อ (HR) */
.status-tabs .stab.st-booked::before      { background: var(--warn); }
.status-tabs .stab.st-checked_in::before  { background: var(--orange); }
.status-tabs .stab.st-hr_received::before { background: var(--info); }
.status-tabs .stab.st-done::before        { background: var(--success); }
.status-tabs .stab.st-checked_out::before { background: var(--accent); }
/* การเข้ารับสินค้า */
.status-tabs .stab.st-waiting::before  { background: var(--warn); }
.status-tabs .stab.st-ready::before    { background: var(--accent); }
.status-tabs .stab.st-arrived2::before { background: var(--orange); }
.status-tabs .stab.st-loaded::before   { background: var(--primary); }
.status-tabs .stab.st-blocked::before  { background: var(--danger); }

/* ชิปตัวกรองที่ใช้อยู่ + ปุ่มล้าง */
.fchip { background: var(--field-bg); color: var(--text); border: 1px solid var(--card-border); }
.fchip:hover { background: var(--primary-soft); border-color: var(--primary); }
.fc-clear { color: var(--info); }          /* เดิมเป็นสีแดง — "ล้างตัวกรอง" ไม่ใช่การกระทำอันตราย */
.fc-clear:hover { color: var(--info-dark); }

/* =====================================================================
   นัดผู้มาติดต่อหลายวัน — ป้ายบอกวันที่เท่าไรในชุด + การ์ดวันอื่นในชุด
   ===================================================================== */
/* ป้าย "2/4" ในตาราง — บอกว่าแถวนี้เป็นวันหนึ่งของนัดชุดเดียวกัน */
.vgrp {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  background: var(--info-soft); color: var(--info-dark);
  border: 1px solid var(--card-border); border-radius: var(--radius-pill);
  font-size: .68rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

.vd-span { display: grid; gap: 8px; padding: 4px 0 2px; }
@media (min-width: 520px) { .vd-span { grid-template-columns: repeat(2, 1fr); } }
.vsp {
  display: flex; align-items: center; gap: 9px; padding: 9px 11px;
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius-btn); text-decoration: none; font-size: .86rem;
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.vsp:hover { border-color: var(--primary); background: var(--primary-soft); }
.vsp.on { border-color: var(--primary); background: var(--primary-soft); font-weight: 700; }
.vsp-n {
  flex: 0 0 22px; height: 22px; display: grid; place-items: center;
  background: var(--primary); color: #fff; border-radius: 50%;
  font-size: .72rem; font-weight: 700;
}
.vsp-d { flex: 1 1 auto; color: var(--text); white-space: nowrap; }
.vsp-s { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--text-faint); }
.vsp-l { flex: 0 0 auto; font-size: .74rem; color: var(--text-faint); white-space: nowrap; }
/* จุดสีตามสถานะ — ชุดเดียวกับแท็บกรองสถานะ จะได้อ่านเป็นภาษาเดียวกัน */
.vsp-s.st-booked      { background: var(--warn); }
.vsp-s.st-checked_in  { background: var(--orange); }
.vsp-s.st-hr_received { background: var(--info); }
.vsp-s.st-done        { background: var(--success); }
.vsp-s.st-checked_out { background: var(--accent); }
.vsp-s.st-cancelled   { background: var(--text-faint); }

/* ลำดับในตาราง — นับตอนแสดงผล ไม่ใช่ "เลขคิว" ที่ใช้เรียก จึงทำให้จางกว่าข้อมูลจริง */
.tbl .t-seq { color: var(--text-faint); font-weight: 600; font-variant-numeric: tabular-nums; }

/* =====================================================================
   บัญชี LINE ผู้มาติดต่อ (HR) — หน้ารวม + การ์ดบนหน้ารายละเอียด
   ===================================================================== */
/* แถบสรุปด้านบน — โครงเดียวกับ .today-strip ของภาพรวม จะได้อ่านแบบเดียวกัน */
.vl-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-bottom: 14px;
  background: var(--card-border); border: 1px solid var(--card-border);
  border-radius: var(--radius); overflow: hidden;
}
.vl-s {
  background: var(--card-bg); padding: 13px 14px; text-align: center;
  text-decoration: none; color: inherit; display: block;
  transition: background var(--dur) var(--ease-out);
}
a.vl-s:hover { background: var(--field-bg); }
/* ช่องที่กำลังกรองอยู่ — ขีดใต้หนาบอกว่าตารางข้างล่างถูกกรองด้วยอันนี้ */
a.vl-s.on { background: var(--field-bg); box-shadow: inset 0 -3px 0 var(--info); }
.vl-s b { display: block; font-size: 1.5rem; font-weight: 800; color: var(--text); line-height: 1.1; }
.vl-s span { font-size: .76rem; color: var(--text-faint); font-weight: 600; }
.vl-s.ok b   { color: var(--success); }
.vl-s.warn b { color: var(--warn-text, #8a5a00); }   /* เหลืองอ่อนบนพื้นขาวอ่านยาก → อำพันเข้ม */
.vl-s.bad b  { color: var(--danger); }

/* แถบเตือน "ควรตรวจสอบ" — โทนเดียวกับ .dq-warn ของภาพรวม */
.vl-alert {
  display: flex; gap: 14px; margin-bottom: 14px; padding: 14px 16px;
  background: #fff8e6; border: 1px solid var(--warn); border-radius: var(--radius);
}
.vl-alert .vl-a-ic { flex: 0 0 auto; color: var(--warn); }
.vl-alert strong { display: block; color: #8a6a08; font-size: .92rem; }
.vl-alert p { margin: 4px 0 0; font-size: .84rem; color: var(--text-soft); line-height: 1.5; }

/* ป้าย "ใช้หลายชื่อ" ต่อท้ายชื่อในตาราง */
.vl-flag {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  background: var(--warn); color: #fff; border-radius: var(--radius-pill);
  font-size: .68rem; font-weight: 700; vertical-align: middle;
}
.vl-mismatch { color: var(--danger); font-weight: 600; }

/* ป้ายสถานะในตาราง — กว้างเท่าข้อความเสมอ ไม่ยืดเต็มช่อง */
.tbl td > .st { width: auto; max-width: max-content; }

/* เครื่องมือที่ใช้นาน ๆ ครั้ง — พับเก็บ ไม่ให้เป็นบล็อกใหญ่แย่งสายตาจากตาราง */
.vp-tools { margin-top: 16px; }
.vp-tools > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; font-size: .85rem; font-weight: 600; color: var(--info);
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius-btn);
}
.vp-tools > summary::-webkit-details-marker { display: none; }
.vp-tools > summary:hover { border-color: var(--info); }
.vp-tools[open] > summary { margin-bottom: 10px; }
.vp-tools .vp-merge { margin-bottom: 0; }
.vp-tools .vp-merge label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .84rem; color: var(--text-soft); font-weight: 600;
}
.vp-tools .vp-merge input { width: 90px; }
.vp-tip { font-size: .78rem; flex: 1 1 220px; }

/* ทะเบียนรถของผู้มาติดต่อในตาราง — ป้อมยามกวาดตาหาคันที่ตรงได้เร็ว */
.vveh { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.vveh-t { color: var(--text-faint); font-size: .72rem; }

/* ทะเบียนผู้มาติดต่อ */
.vp-id {
  display: inline-block; margin-right: 6px; padding: 1px 6px;
  background: var(--field-bg); color: var(--text-faint);
  border-radius: var(--radius-btn); font-size: .68rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.vp-note { color: var(--info-dark); }
.vp-acct { display: flex; align-items: center; gap: 5px; font-size: .8rem; color: var(--text-soft); padding: 1px 0; }
.vp-kind {
  display: inline-block; padding: 1px 7px; background: var(--accent); color: #fff;
  border-radius: var(--radius-pill); font-size: .66rem; font-weight: 700;
}
/* ชิปประเภทบัญชี — วางท้ายชื่อบัญชี ต้องเว้นจากชื่อและไม่ดันบรรทัด */
.t-main + .vp-kind, .t-main + .vl-type { margin-left: 6px; vertical-align: middle; }
/* คนในบัญชี LINE — ชื่อ + เบอร์ + สถานะตรวจบัตร บรรทัดเดียวต่อคน */
.vp-person { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 3px 0; }
.vp-person + .vp-person { border-top: 1px dashed var(--card-border); }
.vp-nm { font-weight: 600; color: var(--text); }
.vp-ok { color: var(--success); font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.vp-no { color: var(--warn); font-size: .72rem; font-weight: 700; }

/* ชิปบอก "ประเภทผู้มาติดต่อ" — ไม่ใช่สถานะ จึงไม่ยืมคลาส st-* (สีจะสื่อผิด) */
.vl-type {
  display: inline-block; margin: 1px 3px 1px 0; padding: 3px 9px;
  background: var(--info-soft); color: var(--info-dark);
  border: 1px solid var(--card-border); border-radius: var(--radius-pill);
  font-size: .72rem; font-weight: 700; white-space: nowrap;
}

/* การ์ดบัญชี LINE บนหน้ารายละเอียดผู้มาติดต่อ */
.vl-id { padding: 10px 12px; background: var(--field-bg); border-radius: var(--radius-btn); margin-bottom: 10px; }
.vl-id .vl-nm { font-weight: 700; color: var(--text); }
.vl-state { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.vl-state > .st { flex: 0 0 auto; }
.vl-state .vl-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.vl-mismatch-box {
  margin-top: 10px; padding: 10px 12px; line-height: 1.5;
  background: var(--danger-soft, #fdecec); border: 1px solid var(--danger);
  border-radius: var(--radius-btn); font-size: .84rem; color: var(--text);
}

@media (max-width: 620px) { .vl-strip { grid-template-columns: repeat(2, 1fr); } }

/* ผู้ร่วมคณะ (ผู้มาติดต่อ/ผู้รับเหมาที่มาหลายคน) */
/* +N ต่อท้ายชื่อผู้ติดต่อหลักในตาราง — บอกว่ามากันกี่คนโดยไม่กินพื้นที่แถว */
.vm-plusn {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  border-radius: var(--radius-pill); background: var(--info); color: #fff;
  font-size: .7rem; font-weight: 700; vertical-align: middle; cursor: help;
}
/* แถวผู้ติดต่อหลักในหน้ารายละเอียด */
.vm-lead-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 10px;
  background: var(--info-soft); border: 1px solid var(--card-border);
  border-radius: var(--radius-btn);
}
/* แถวลูกทีมที่แก้ไขได้ */
.vm-row {
  display: grid; grid-template-columns: 28px 1fr 140px 1fr 38px;
  gap: 8px; align-items: center; margin-bottom: 8px;
}
.vm-row input { margin: 0; }
.vm-row-ro {
  display: grid; grid-template-columns: 28px 1fr 140px 1fr;
  gap: 8px; align-items: center; padding: 7px 0;
  border-top: 1px solid var(--card-border); font-size: .9rem;
}
.vm-del {
  width: 38px; height: 40px; cursor: pointer; font-family: inherit;
  background: #fff; color: var(--danger); border: 1px solid var(--card-border);
  border-radius: var(--radius-btn); font-size: 1.25rem; line-height: 1;
}
.vm-del:hover { background: #fdecea; border-color: var(--danger); }
.vm-plus {
  display: inline-grid; place-items: center; width: 17px; height: 17px;
  background: var(--primary); color: #fff; border-radius: 50%;
  font-size: .85rem; line-height: 1; font-weight: 700; margin-right: 4px;
}
@media (max-width: 900px) {
  .vm-row, .vm-row-ro { grid-template-columns: 28px 1fr 38px; }
  .vm-row input[name="member_phone"], .vm-row input[name="member_note"],
  .vm-row-ro > *:nth-child(3), .vm-row-ro > *:nth-child(4) { grid-column: 2 / -1; }
}
.vm-tag {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  border-radius: var(--radius-btn); background: var(--info); color: #fff;
  font-size: .68rem; font-weight: 700;
}

/* =====================================================================
   การเคลื่อนไหว — ระยะ 1: การกดใช้งาน
   ยึด token กลางจาก style.css (--dur / --ease-*) เพื่อให้ทั้งระบบจังหวะเดียวกัน
   ทุกอย่างใช้ transform/opacity เท่านั้น (การ์ดจอ GPU) ไม่ animate width/shadow
   ===================================================================== */

/* ---- เมนูข้าง: จุดไฮไลต์เลื่อนตาม + ไอคอนขยับรับการชี้ ---- */
.side-nav .grp-sub a { transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.side-nav .grp-sub a::after {
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-spring);
}
.side-nav .grp-sub a.on::after { transform: translateY(-50%) scale(1.15); }
.side-nav .grp-sub a:active { transform: translateX(2px); }

.grp-head { transition: background var(--dur-fast) var(--ease-out); }
.grp-head .ic { transition: transform var(--dur) var(--ease-spring); }
.grp-head:hover .ic { transform: scale(1.08); }
.grp-block.open > .grp-head .ic { transform: scale(1.04); }

/* เครื่องหมาย +/− หมุนเล็กน้อยตอนกาง — บอกสถานะโดยไม่ต้องอ่าน */
.grp-head .tw { transition: transform var(--dur) var(--ease-out); }
.grp-block.open > .grp-head .tw { transform: rotate(180deg); }

/* ---- ปุ่ม: ยุบตอนกด = รู้ทันทีว่าโดนแล้ว ---- */
body.staff .btn-sm, body.staff .btn {
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
body.staff .btn-sm:active, body.staff .btn:active { transform: scale(.97); }

/* ---- แท็บกรอง: เส้นใต้ไหลตาม ---- */
body.staff .status-tabs .stab {
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
body.staff .status-tabs .stab[class*="st-"]::before { transition: transform var(--dur) var(--ease-spring); }
body.staff .status-tabs .stab.on[class*="st-"]::before { transform: scale(1.25); }

/* ---- การ์ด/แถวตาราง: ยกขึ้นเล็กน้อยตอนชี้ ---- */
body.staff .kpi { transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
body.staff .kpi:hover { transform: translateY(-2px); }
body.staff .tbl tbody tr { transition: background var(--dur-fast) var(--ease-out); }

/* =====================================================================
   ระยะ 2 · เปลี่ยนหน้า
   เคยลองใช้ View Transitions API แต่ถอดออกแล้ว — วิธีนั้นถ่ายภาพหน้าเก่ามาซ้อนหน้าใหม่
   พอเนื้อหาสองหน้าสูงไม่เท่ากัน (และภาพเก่ายังติดแถบโหลดสีเขียวค้างอยู่)
   จะเห็นการซ้อน/กระตุกซึ่งคุมได้ยาก
   เหลือแค่ "จางเข้า" ที่เนื้อหาอย่างเดียว — ไม่มีการซ้อนภาพ จึงกระพริบไม่ได้
   ใช้ opacity ล้วน ไม่ใช้ transform เพราะการเลื่อนกล่องใหญ่ทำให้เกิดเลเยอร์ใหม่
   ซึ่งบางเครื่องจะเห็นเป็นแฟลชตอนสร้าง/ทิ้งเลเยอร์
   ===================================================================== */
body.staff .work-body { animation: pageIn 220ms var(--ease-out) backwards; }
@keyframes pageIn { from { opacity: 0; } }

/* ระหว่างคืนสถานะเมนูตอนโหลดหน้า ห้ามมี transition (กันเมนูขยับแก้ตัวเอง) */
body.nav-boot .grp-sub,
body.nav-boot .grp-sub-in,
body.nav-boot .grp-head .tw { transition: none !important; }

/* เนื้อในเมนูย่อยจางตามตอนกาง — ทำให้รู้สึกไหลกว่าการยืดความสูงอย่างเดียว */
.grp-sub-in { opacity: 0; transition: opacity var(--dur) var(--ease-out); }
.grp-block.open > .grp-sub > .grp-sub-in,
.grp-block:hover > .grp-sub > .grp-sub-in,
.grp-block:focus-within > .grp-sub > .grp-sub-in { opacity: 1; }

/* =====================================================================
   ระยะ 3 · บอกสถานะตอนโหลด
   ===================================================================== */
/* .nav-progress + ปุ่มกำลังส่ง ย้ายไป style.css แล้ว (ใช้ทุกหน้า ไม่ใช่แค่หลังบ้าน) */

/* =====================================================================
   ระยะ 5 · แถวตาราง — จางเข้าไล่ลงมา (แค่ 8 แถวแรก ที่เหลือขึ้นทันที)
   ตารางร้อยแถวถ้าไล่ทุกแถวจะรอนานจนน่ารำคาญ
   ===================================================================== */
/* หมายเหตุ: เดิมมีอนิเมชันไล่แถวตาราง + การ์ด KPI ตรงนี้
   แต่ซ้อนกับการเปลี่ยนหน้า (view transition) ที่ขยับเนื้อหาอยู่แล้ว กลายเป็นขยับสองชั้น
   ดูเหมือนกระพริบ จึงเหลือไว้เฉพาะการเปลี่ยนหน้าอย่างเดียว */

/* ปุ่มย้อนกลับบนหัวหน้า (หน้าที่ไม่มีเมนูข้างของตัวเอง เช่น หน้าสรุปย้อนหลัง) */
body.staff .head-actions .back-btn, body.staff .back-btn{ border-color:var(--info); color:var(--info); font-weight:700; }
body.staff .back-btn:hover{ background:var(--info-soft); }
body.staff .back-btn .ic-svg{ transform:rotate(180deg); }

/* ===== popup กลางจอ (.um) — ใช้ร่วม: ผู้ใช้ · เพิ่มจากโดเมน · การเข้ารับสินค้า ===== */
.um{ position:fixed; inset:0; z-index:9000; display:grid; place-items:center; padding:24px;
  background:rgba(16,29,53,.5); backdrop-filter:blur(2px); animation:umfade .14s ease; }
.um[hidden]{ display:none; }
.um-card{ width:100%; background:var(--card-bg); border:1px solid var(--card-border); border-radius:16px;
  box-shadow:0 24px 60px rgba(16,29,53,.34); display:flex; flex-direction:column;
  max-height:min(88vh, 900px); overflow:hidden; animation:umpop .18s cubic-bezier(.2,.8,.2,1); }
.um-card.wide{ max-width:1020px; }
.um-card.mid{ max-width:820px; }
.um-head{ display:flex; align-items:center; gap:12px; padding:15px 20px; flex:0 0 auto;
  border-bottom:1px solid var(--card-border); background:var(--panelhead); color:#fff; }
.um-head .ic{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:rgba(255,255,255,.2); flex:0 0 auto; }
.um-head .ic .ic-svg{ color:#fff; }
.um-head strong{ font-size:1rem; font-weight:800; display:block; }
.um-head .sub{ font-size:.8rem; opacity:.9; margin-top:2px; line-height:1.4; }
.um-head .x{ margin-left:auto; flex:0 0 auto; border:0; cursor:pointer; width:34px; height:34px; border-radius:9px;
  background:rgba(255,255,255,.16); color:#fff; font-size:1.1rem; line-height:1; display:grid; place-items:center; }
.um-head .x:hover{ background:rgba(255,255,255,.3); }
.um-body{ padding:18px 20px; overflow:auto; flex:1 1 auto; }
.um-foot{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; flex:0 0 auto;
  padding:13px 20px; border-top:1px solid var(--card-border); background:var(--field-bg); }
.um-foot .muted{ margin-left:auto; font-size:.76rem; text-align:right; }
body.um-open{ overflow:hidden; }
@keyframes umpop{ from{ transform:scale(.96) translateY(6px); opacity:.5; } }
@keyframes umfade{ from{ opacity:0; } }
@media (max-width:820px){
  .um{ padding:0; place-items:stretch; }
  .um-card{ max-width:none; max-height:100vh; height:100vh; border-radius:0; border:0; }
}

/* ===== วิธีทำงาน (อินโฟกราฟิก) ในหน้าต่าง "วิธีใช้งานหน้านี้" — staff/_helpflow.html ===== */
body.staff .help-card.wide, .help-card.wide{ width:min(940px,96vw); }
.hf{ margin:12px 0 4px; padding:12px 13px; border:1px solid var(--card-border); border-radius:var(--radius); background:var(--field-bg); }
.hf-h{ display:flex; align-items:center; gap:7px; font-weight:800; font-size:.9rem; color:var(--text); margin-bottom:9px; }
.hf-row{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:10px; align-items:stretch; margin-bottom:8px; }
.hf-name{ display:grid; place-items:center; font-size:.76rem; font-weight:800; padding:5px 8px; border-radius:var(--radius-btn);
  text-align:center; color:#fff; background:var(--panelhead); line-height:1.3; }
.hf-name.hf-rb{ background:var(--primary); } .hf-name.hf-pk{ background:var(--info); }
.hf-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
.hf-steps li{ display:flex; flex-direction:column; gap:1px; padding:6px 7px 7px; border-radius:8px; background:var(--card-bg);
  border:1px solid var(--card-border); min-width:0; opacity:.7; }
.hf-steps li .n{ font-size:.62rem; font-weight:800; color:var(--text-faint); }
.hf-steps li b{ font-size:.72rem; line-height:1.25; color:var(--text); }
.hf-steps li small{ font-size:.63rem; color:var(--text-faint); line-height:1.25; }
.hf-steps li.here{ opacity:1; background:var(--panelhead); border-color:var(--panelhead); box-shadow:0 2px 8px rgba(16,29,53,.18); }
.hf-steps li.here b, .hf-steps li.here small, .hf-steps li.here .n{ color:#fff; }
.hf-note{ display:flex; align-items:center; gap:6px; font-size:.72rem; color:var(--text-faint); }
.hf-note i{ width:12px; height:12px; border-radius:3px; background:var(--panelhead); display:inline-block; flex:0 0 auto; }
.hr-roles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:8px; }
.hr-role{ display:flex; flex-direction:column; gap:3px; padding:9px 11px; border-radius:var(--radius); border:1px solid var(--card-border);
  border-left:4px solid var(--panelhead); background:var(--card-bg); }
.hr-role b{ font-size:.84rem; color:var(--text); }
.hr-role span{ font-size:.8rem; color:var(--text-soft); line-height:1.45; }
.hf-guide{ display:inline-flex; align-items:center; gap:7px; margin-top:14px; padding:8px 13px; border-radius:var(--radius-btn);
  background:var(--primary-soft); color:var(--primary-dark); font-weight:700; font-size:.86rem; text-decoration:none; }
.hf-guide:hover{ filter:brightness(.97); }
@media(max-width:720px){ .hf-row{ grid-template-columns:1fr; } .hf-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* =====================================================================
   เมนูแบบ rail (แท็บเล็ต 768–1023 · เมนูย่อบนจอใหญ่) — แผงเมนูย่อยลอยออกเฉพาะตอนชี้ / แตะหัวหมวด
   เดิม: หมวดของหน้าปัจจุบัน (.open = สถานะกางของเมนูเต็ม) เปิดแผงลอยค้างทับเนื้อหาทุกหน้า
   แตะบนจอสัมผัส = .fly (สคริปต์ใน _sbase) · แตะนอกเมนู / Esc = ปิด · หมวดปัจจุบันยังไฮไลต์ไอคอน
   ===================================================================== */
@media (min-width:768px) and (max-width:1023.98px){
  body.staff .grp-block.open > .grp-sub{ grid-template-rows:0fr; }
  body.staff .grp-block:hover > .grp-sub,
  body.staff .grp-block:focus-within > .grp-sub,
  body.staff .grp-block.fly > .grp-sub{ grid-template-rows:1fr; }
  body.staff .grp-block:hover > .grp-sub > .grp-sub-in,
  body.staff .grp-block:focus-within > .grp-sub > .grp-sub-in,
  body.staff .grp-block.fly > .grp-sub > .grp-sub-in{ opacity:1; max-height:calc(100vh - 240px); overflow-y:auto; overscroll-behavior:contain; }
}
/* จอสัมผัส: ไม่มีเมาส์ชี้ — :hover/:focus ค้างหลังแตะ ทำให้แตะซ้ำปิดไม่ได้ → ใช้ .fly อย่างเดียว */
@media (min-width:768px) and (max-width:1023.98px) and (hover:none){
  body.staff .grp-block:hover > .grp-sub,
  body.staff .grp-block:focus-within > .grp-sub{ grid-template-rows:0fr; }
  body.staff .grp-block.fly > .grp-sub{ grid-template-rows:1fr; }
}
@media (min-width:1024px){
  body.staff.nav-collapsed .grp-block.open > .grp-sub{ grid-template-rows:0fr; }
}


/* =====================================================================
   ค้นหาอัตโนมัติขณะพิมพ์ (static/live-search.js)
   ===================================================================== */
.live-results { display: block; }
.live-dim { opacity: .55; transition: opacity .12s ease; }
/* กำลังโหลดผลใหม่ = แถบวิ่งบางๆ ที่ขอบบนของแถบค้นหา */
body.staff form.live-busy { position: relative; overflow: hidden; }
body.staff form.live-busy::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 35%;
  background: var(--primary); animation: liveBar .9s ease-in-out infinite; }
@keyframes liveBar { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { body.staff form.live-busy::before { animation: none; width: 100%; opacity: .5; } }

/* ช่องค้นหาบนหัวหน้า → รายการนัดให้เลือก */
.topsearch { position: relative; }
.qs-pop { position: absolute; left: 0; top: calc(100% + 8px); z-index: 80; width: min(560px, 70vw);
  background: var(--card-bg, #fff); border: 1px solid var(--card-border); border-radius: 12px;
  box-shadow: 0 18px 44px rgba(16,29,53,.24); padding: 6px; }
.qs-pop[hidden] { display: none; }
.qs-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--text); }
.qs-item:hover, .qs-item.on { background: var(--primary-soft); }
.qs-item .qs-q { flex: 0 0 34px; height: 30px; display: grid; place-items: center; border-radius: 6px; background: var(--primary-soft);
  color: var(--primary-dark); font-weight: 800; font-size: .92rem; }
.qs-item .qs-main { flex: 1 1 auto; min-width: 0; }
.qs-item .qs-main b { display: block; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-item .qs-main small { display: block; font-size: .74rem; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-item .st { flex: 0 0 auto; }
.qs-empty { padding: 12px; text-align: center; font-size: .86rem; color: var(--text-faint); }
.qs-all { display: block; margin-top: 4px; padding: 9px 10px; border-top: 1px solid var(--card-border); text-align: center;
  font-size: .84rem; font-weight: 700; color: var(--info); text-decoration: none; }
.qs-all:hover { background: var(--field-bg); }

/* =====================================================================
   อินโฟกราฟิกในหน้าต่าง "วิธีใช้งานหน้านี้" (ต่อ) — staff/_helpflow.html
   แผนผังหน้าจอ (.hm) · เส้นสถานะผู้มาติดต่อ (.hs) · 3 ประเภทผู้มาติดต่อ (.ht) · เลขกำกับในคำอธิบาย
   ===================================================================== */
.hf-name.hf-vs{ background:#8e6bb0; }
.hm, .hs, .ht{ margin:12px 0 4px; padding:12px 13px; border:1px solid var(--card-border); border-radius:var(--radius); background:var(--field-bg); }
.hm-h{ display:flex; align-items:center; gap:7px; font-weight:800; font-size:.9rem; color:var(--text); margin-bottom:9px; }
.hm-frame{ display:flex; border:1px solid #cfd8e2; border-radius:8px; overflow:hidden; background:#f4f7fa; min-height:150px; box-shadow:0 2px 10px rgba(16,29,53,.06); }
.hm-side{ flex:0 0 58px; background:#35404f; padding:8px 7px; display:flex; flex-direction:column; gap:6px; }
.hm-side i{ display:block; height:7px; border-radius:3px; background:#56647a; }
.hm-side i.lg{ height:14px; background:#fff; opacity:.9; margin-bottom:4px; }
.hm-side i.on{ background:#54c08a; }
.hm-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px; padding:0 0 9px; }
.hm-top{ display:flex; align-items:center; gap:6px; height:22px; background:#35404f; padding:0 9px; }
.hm-top span{ width:70px; height:6px; border-radius:3px; background:#8190a5; margin-right:auto; }
.hm-top em{ width:34px; height:10px; border-radius:3px; border:1px solid #6d7b90; }
.hm-row{ display:flex; gap:6px; padding:0 9px; }
.hm-b{ position:relative; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:4px; min-height:30px;
  padding:5px 8px 5px 30px; background:#fff; border:1px solid #d5dde5; border-radius:5px; }
.hm-l{ font-size:.7rem; font-weight:700; color:var(--text); line-height:1.25; overflow:hidden; text-overflow:ellipsis; }
.hm-n{ position:absolute; left:6px; top:50%; transform:translateY(-50%); width:19px; height:19px; border-radius:50%;
  display:grid; place-items:center; background:#e24c4c; color:#fff; font-size:.66rem; font-weight:800; box-shadow:0 0 0 2px #fff; }
.hm-b.k-pri{ background:var(--primary); border-color:var(--primary); }
.hm-b.k-pri .hm-l{ color:#fff; }
.hm-b.k-btn{ background:#fff; border-color:#b9c5d1; }
.hm-b.k-bar{ background:#fff; border-style:solid; }
.hm-b.k-bar::after{ content:""; position:absolute; right:8px; top:50%; width:34px; height:10px; margin-top:-5px; border-radius:3px; background:var(--primary); opacity:.8; }
.hm-b.k-tbl, .hm-b.k-card, .hm-b.k-side{ min-height:64px; justify-content:flex-start; padding-top:7px; }
.hm-b.k-tbl .hm-n, .hm-b.k-card .hm-n, .hm-b.k-side .hm-n, .hm-b.k-cam .hm-n, .hm-b.k-kpi .hm-n{ top:6px; transform:none; }
.hm-lines{ display:flex; flex-direction:column; gap:5px; margin-top:2px; }
.hm-lines i{ display:block; height:6px; border-radius:3px; background:#e3e9ef; }
.hm-lines i:nth-child(2){ width:86%; } .hm-lines i:nth-child(3){ width:70%; }
.hm-b.k-kpi{ min-height:46px; justify-content:flex-start; padding-top:6px; }
.hm-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.hm-kpis i{ display:block; height:13px; border-radius:3px; background:#e8eef4; border-left:3px solid var(--info); }
.hm-kpis i:nth-child(2){ border-color:var(--warn); } .hm-kpis i:nth-child(3){ border-color:var(--orange); } .hm-kpis i:nth-child(4){ border-color:var(--primary); }
.hm-tabs{ display:flex; gap:4px; }
.hm-tabs i{ display:block; flex:1; height:6px; border-radius:3px; background:#e3e9ef; }
.hm-tabs i.on{ background:var(--primary); }
.hm-b.k-cam{ min-height:70px; background:#0d1522; border-color:#0d1522; justify-content:flex-start; padding-top:7px; }
.hm-b.k-cam .hm-l{ color:#b9c8dd; }
.hm-b.k-pop{ border:1.5px dashed var(--info); background:var(--info-soft); }
.hm-b.k-side{ background:#fbfcfd; }
/* เลขกำกับหน้าคำอธิบาย (ตรงกับเลขบนแผนผัง) */
body.staff .help-item .hi-k .hm-n2{ display:inline-grid; place-items:center; width:19px; height:19px; margin-right:7px; border-radius:50%;
  background:#e24c4c; color:#fff; font-size:.66rem; font-weight:800; vertical-align:1px; }
/* เส้นสถานะ */
.hs-line{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; }
.hs-line li{ position:relative; display:flex; flex-direction:column; gap:2px; padding:8px 8px 9px; background:var(--card-bg);
  border:1px solid var(--card-border); border-top:4px solid var(--c, var(--info)); border-radius:8px; min-width:0; }
.hs-line li::after{ content:"›"; position:absolute; right:-9px; top:50%; transform:translateY(-50%); z-index:1;
  color:var(--text-faint); font-weight:800; font-size:1rem; }
.hs-line li:last-child::after{ display:none; }
.hs-line .d{ width:18px; height:18px; border-radius:50%; display:grid; place-items:center; background:var(--c, var(--info)); color:#fff; font-size:.64rem; font-weight:800; }
.hs-line b{ font-size:.76rem; color:var(--text); line-height:1.25; }
.hs-line small{ font-size:.66rem; color:var(--text-faint); line-height:1.3; }
.hs-line li.here{ box-shadow:0 0 0 2px var(--c, var(--info)); }
.hs-booked{ --c:var(--warn); } .hs-checked_in{ --c:var(--orange); } .hs-hr_received{ --c:var(--info); }
.hs-done{ --c:var(--success); } .hs-checked_out{ --c:#3aa7b0; }
.hs-foot{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.hs-chip{ font-size:.7rem; font-weight:600; padding:3px 9px; border-radius:var(--radius-pill); background:var(--card-bg); border:1px solid var(--card-border); color:var(--text-soft); }
.hs-chip.in{ border-color:#f6c19c; background:var(--orange-soft); color:#a04600; }
.hs-chip.cx{ color:var(--text-faint); }
/* 3 ประเภท */
.ht-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.ht-c{ display:flex; flex-direction:column; gap:4px; padding:10px 11px; background:var(--card-bg); border:1px solid var(--card-border);
  border-top:4px solid var(--c); border-radius:8px; min-width:0; }
.ht-c.t-applicant{ --c:var(--info); } .ht-c.t-contact{ --c:var(--accent); } .ht-c.t-contractor{ --c:var(--warn); }
.ht-ic{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; background:var(--c); color:#fff; }
.ht-ic .ic-svg{ color:#fff; width:16px; height:16px; }
.ht-c b{ font-size:.86rem; color:var(--text); }
.ht-c ul{ margin:0; padding-left:16px; font-size:.74rem; color:var(--text-soft); line-height:1.5; }
.ht-c em{ font-style:normal; font-weight:700; color:var(--text); }
.ht-foot{ margin-top:8px; font-size:.72rem; color:var(--text-faint); }
@media(max-width:720px){
  .hs-line{ grid-template-columns:repeat(2,minmax(0,1fr)); } .hs-line li::after{ display:none; }
  .ht-grid{ grid-template-columns:1fr; }
  .hm-side{ flex-basis:34px; } .hm-row{ flex-wrap:wrap; } .hm-b{ flex-basis:40% !important; }
}
body.staff .help-card.wide .help-item .hi-k{ flex-basis:190px; }
/* ห่วงโซ่เหตุ-ผล (help_chain) — ตั้งค่านี้แล้วไปมีผลที่ไหน */
.hc{ margin:12px 0 4px; padding:12px 13px; border:1px solid var(--card-border); border-radius:var(--radius); background:var(--field-bg); }
.hc-line{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); gap:14px; }
.hc-line li{ position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center; padding:10px 8px 11px;
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:10px; min-width:0; }
.hc-line li::after{ content:"→"; position:absolute; right:-13px; top:22px; color:var(--info); font-weight:800; font-size:1rem; }
.hc-line li:last-child::after{ display:none; }
.hc-ic{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--info-soft); color:var(--info-dark); margin-bottom:2px; }
.hc-ic .ic-svg{ width:17px; height:17px; }
.hc-line li:first-child .hc-ic{ background:var(--primary); color:#fff; }
.hc-line b{ font-size:.78rem; color:var(--text); line-height:1.3; }
.hc-line small{ font-size:.68rem; color:var(--text-faint); line-height:1.35; }
@media(max-width:720px){ .hc-line{ grid-template-columns:repeat(2,minmax(0,1fr)); } .hc-line li::after{ display:none; } }

/* =====================================================================
   ช่องค้นหานัดในแถบข้าง — เหนือหมวด "งานบริษัท EQR" · ใช้ได้ทุกหน้า
   (ย้ายมาจากแถบบน · ผลลัพธ์ .qs-pop ลอยกว้างออกไปทางขวาทับพื้นที่ทำงาน)
   ===================================================================== */
body.staff .side-search {
  position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 9px;
  margin: 14px 16px 8px; padding: 0 12px; height: 40px; border-radius: 10px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
body.staff .side-search:hover { background: rgba(255, 255, 255, .19); }
body.staff .side-search .ts-ic { flex: 0 0 auto; display: inline-flex; color: rgba(255, 255, 255, .82); font-size: 1rem; }
body.staff .side-search input {
  flex: 1 1 auto; min-width: 0; width: 100%; height: 100%; margin: 0;
  border: 0 !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; outline: 0;
  color: #fff !important; font: inherit; font-size: .88rem; font-style: normal;
}
body.staff .side-search input::placeholder { color: rgba(255, 255, 255, .74); font-style: normal; opacity: 1; }
body.staff .side-search input::-webkit-search-cancel-button { filter: invert(1); opacity: .7; cursor: pointer; }
body.staff .side-search:focus-within { background: #fff; border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .30); }
body.staff .side-search:focus-within .ts-ic { color: var(--text-faint); }
body.staff .side-search:focus-within input { color: var(--text) !important; }
body.staff .side-search:focus-within input::placeholder { color: var(--text-faint); }
body.staff .side-search:focus-within input::-webkit-search-cancel-button { filter: none; }
body.staff .side-search .qs-pop { width: min(500px, calc(100vw - 32px)); top: calc(100% + 6px); }
/* คอม: ให้ผลค้นหาที่ลอยออกนอกแถบข้างอยู่เหนือเนื้อหาในหน้า (แถบข้างเป็น sticky = ชั้นซ้อนของตัวเอง) */
@media (min-width: 1024px) { body.staff .side { z-index: 35; } }
/* แท็บเล็ต (แถบไอคอน 74px) ไม่มีที่วางช่องค้นหา */
@media (min-width: 768px) and (max-width: 1023.98px) { body.staff .side-search { display: none !important; } }
/* มือถือ (เมนูเลื่อนจากซ้าย): ผลค้นหากว้างเท่าช่องค้นหา ไม่ล้นเมนู */
@media (max-width: 767.98px) {
  body.staff .side-search { margin: 12px 14px 6px; }
  body.staff .side-search .qs-pop { width: 100%; }
}

/* =====================================================================
   เมนู "คู่มือการใช้งาน" — ล่างสุดของแถบข้าง เหนือชื่อผู้ใช้ (เห็นเมื่อมีสิทธิ์ manual.view)
   ===================================================================== */
body.staff .side-manual {
  display: flex; align-items: center; gap: 11px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px;
  color: #fff; text-decoration: none; font-weight: 700; font-size: .92rem;
  background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .18);
  transition: background .15s, border-color .15s;
}
body.staff .side-manual:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .32); color: #fff; }
body.staff .side-manual.on { background: #fff; border-color: #fff; color: var(--primary-dark, #22379a); }
body.staff .side-manual .ic {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: #fff; color: var(--primary, #2e48c0); box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
body.staff .side-manual.on .ic { background: var(--primary, #2e48c0); color: #fff; }
body.staff .side-manual .ic .ic-svg { width: 16px; height: 16px; }
body.staff .side-manual .lbl { flex: 1 1 auto; min-width: 0; line-height: 1.2; }
body.staff .side-manual .lbl small { display: block; font-size: .72rem; font-weight: 500; opacity: .8; margin-top: 1px; }
/* แท็บเล็ต (แถบไอคอน 74px): ไอคอนอย่างเดียว */
@media (min-width: 768px) and (max-width: 1023.98px) {
  body.staff .side-manual { width: 48px; height: 46px; padding: 0; justify-content: center; margin: 0 auto 8px; }
  body.staff .side-manual .lbl { display: none; }
}

/* จุดเตือนสถานะระบบบนเมนูคู่มือ (มีส่วนที่ใช้ไม่ได้ = แดง · ควรตรวจ = เหลือง) */
body.staff .side-manual .side-hb { flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center;
  font-size: .74rem; font-weight: 800; color: #fff; background: #d0202f; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
body.staff .side-manual .side-hb.warn { background: #e8a317; color: #3b2600; }
@media (min-width: 768px) and (max-width: 1023.98px) {
  body.staff .side-manual { position: relative; }
  body.staff .side-manual .side-hb { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; font-size: .66rem; }
}