/* ============================================================
   Factory Task — Modern UI Design System
   ============================================================ */

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

:root {
  /* ── Primary Palette ── */
  --primary:       #4f46e5;
  --primary-light: #818cf8;
  --primary-dark:  #3730a3;
  --primary-50:    #eef2ff;
  --primary-100:   #e0e7ff;
  --primary-rgb:   79, 70, 229;

  /* ── Semantic Colors ── */
  --success:       #10b981;
  --success-light: #d1fae5;
  --warning:       #f59e0b;
  --warning-light: #fef3c7;
  --danger:        #ef4444;
  --danger-light:  #fee2e2;
  --info:          #06b6d4;
  --info-light:    #cffafe;

  --status-done-bg:      #d1fae5;
  --status-done-text:    #065f46;
  --status-done-border:  #86efac;
  --status-pending-bg:   #fef3c7;
  --status-pending-text: #92400e;
  --status-pending-border:#fbbf24;
  --status-late-bg:      #ffedd5;
  --status-late-text:    #9a3412;
  --status-late-border:  #fb923c;
  --status-missed-bg:    #fee2e2;
  --status-missed-text:  #991b1b;
  --status-missed-border:#ef4444;
  --status-missed-solid: #dc2626;
  --status-today:        #2563eb;

  /* ── Neutral Palette ── */
  --dark:          #0f172a;
  --gray-50:       #f8fafc;
  --gray-100:      #f1f5f9;
  --gray-200:      #e2e8f0;
  --gray-300:      #cbd5e1;
  --gray-400:      #94a3b8;
  --gray-500:      #64748b;
  --gray-600:      #475569;
  --gray-700:      #334155;
  --gray-800:      #1e293b;
  --gray-900:      #0f172a;

  /* ── Layout ── */
  --header-h:      60px;
  --bottom-h:      68px;
  --radius-sm:     8px;
  --radius:        14px;
  --radius-lg:     20px;
  --radius-xl:     24px;

  /* ── Shadows ── */
  --shadow-xs:     0 1px 2px rgba(0,0,0,.05);
  --shadow:        0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:     0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);
  --shadow-lg:     0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.04);
  --shadow-xl:     0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.04);
  --shadow-glow:   0 0 20px rgba(var(--primary-rgb), .15);

  /* ── Transitions ── */
  --ease-out:      cubic-bezier(.16, 1, .3, 1);
  --ease-spring:   cubic-bezier(.34, 1.56, .64, 1);
  --duration:      .2s;
  --duration-md:   .3s;
  --duration-lg:   .4s;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--gray-50);
  color: var(--gray-800);
  margin: 0;
  padding: 0;
  padding-top: var(--header-h);
  padding-bottom: var(--bottom-h);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  letter-spacing: -0.01em;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* ============================================================
   HEADER
   ============================================================ */
.app-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  z-index: 1000;
  box-shadow: 0 4px 20px rgba(var(--primary-rgb), .25);
}

.app-header__title {
  font-size: 1.05rem;
  font-weight: 700;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.02em;
}

.app-header__right {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Button Icon ── */
.btn-icon {
  background: none;
  border: none;
  color: #fff;
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  cursor: pointer;
  transition: background var(--duration) var(--ease-out), transform var(--duration) var(--ease-spring);
  position: relative;
}
.btn-icon:hover {
  background: rgba(255,255,255,.15);
  transform: scale(1.05);
}
.btn-icon:active { transform: scale(.95); }

/* ── Avatar ── */
.avatar {
  width: 36px; height: 36px;
  border-radius: 12px;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .9rem;
  border: 2px solid rgba(255,255,255,.3);
  transition: transform var(--duration) var(--ease-spring);
}
.avatar:hover { transform: scale(1.08); }

/* ── Badge dot ── */
.badge-dot {
  position: absolute;
  top: 2px; right: 2px;
  background: var(--danger);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  min-width: 18px; height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--primary);
  animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.4); }
  50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15,23,42,.5);
  backdrop-filter: blur(4px);
  z-index: 1100;
  opacity: 0;
  transition: opacity var(--duration-md) var(--ease-out);
}
.sidebar-backdrop.open {
  display: block;
  opacity: 1;
}

.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: 300px; height: 100vh;
  background: #fff;
  z-index: 1200;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  transform: translateX(-100%);
  transition: transform var(--duration-lg) var(--ease-out);
}
.sidebar.open { transform: translateX(0); }

.sidebar__header {
  display: flex;
  align-items: center;
  padding: 20px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  font-size: 1.05rem;
  min-height: var(--header-h);
}
.sidebar__header i { font-size: 1.2rem; }
.sidebar__header .btn-icon { color: rgba(255,255,255,.7); }
.sidebar__header .btn-icon:hover { color: #fff; }

.sidebar__menu {
  list-style: none;
  margin: 0;
  padding: 12px 8px;
}
.sidebar__menu a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  color: var(--gray-600);
  text-decoration: none;
  font-size: .93rem;
  font-weight: 500;
  border-radius: 12px;
  margin-bottom: 2px;
  transition: all var(--duration) var(--ease-out);
}
.sidebar__menu a i {
  font-size: 1.15rem;
  width: 22px;
  text-align: center;
}
.sidebar__menu a:hover {
  background: var(--primary-50);
  color: var(--primary);
}
.sidebar__menu a.active {
  background: var(--primary-50);
  color: var(--primary);
  font-weight: 600;
}
.sidebar__menu a.active i { color: var(--primary); }

.sidebar__parent {
  margin-bottom: 4px;
}
.sidebar__parent > a {
  margin-bottom: 0;
}
.sidebar__submenu {
  list-style: none;
  margin: 2px 0 6px 38px;
  padding: 0 0 0 10px;
  border-left: 1px solid var(--gray-200);
}
.sidebar__submenu a {
  gap: 10px;
  padding: 8px 10px;
  font-size: .84rem;
  color: var(--gray-500);
  border-radius: 10px;
}
.sidebar__submenu a i {
  width: 18px;
  font-size: 1rem;
}

.sidebar__group {
  padding: 16px 16px 6px;
  font-size: .7rem;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.app-main {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px;
}

/* ── Page entrance animation ── */
.app-main > *:nth-child(1) { animation: fadeSlideUp var(--duration-md) var(--ease-out) both; }
.app-main > *:nth-child(2) { animation: fadeSlideUp var(--duration-md) var(--ease-out) .05s both; }
.app-main > *:nth-child(3) { animation: fadeSlideUp var(--duration-md) var(--ease-out) .1s both; }
.app-main > *:nth-child(4) { animation: fadeSlideUp var(--duration-md) var(--ease-out) .15s both; }
.app-main > *:nth-child(5) { animation: fadeSlideUp var(--duration-md) var(--ease-out) .2s both; }
/* ข้ามการ animate เมื่อกลับมาหน้าเดิม (scroll restore) */
.app-main.no-anim > * { animation: none !important; }

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   STAT CARDS
   ============================================================ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.stat-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform var(--duration) var(--ease-spring), box-shadow var(--duration) var(--ease-out);
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--gray-200);
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-card__value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.03em;
}
.stat-card__label {
  font-size: .78rem;
  font-weight: 500;
  color: var(--gray-500);
  letter-spacing: -0.01em;
}

.stat-card--primary::before { background: linear-gradient(90deg, var(--primary), var(--primary-light)); }
.stat-card--primary .stat-card__value { color: var(--primary); }

.stat-card--success::before { background: linear-gradient(90deg, #059669, var(--success)); }
.stat-card--success .stat-card__value { color: var(--success); }

.stat-card--warning::before { background: linear-gradient(90deg, #d97706, var(--warning)); }
.stat-card--warning .stat-card__value { color: var(--warning); }

.stat-card--danger::before { background: linear-gradient(90deg, #dc2626, var(--danger)); }
.stat-card--danger .stat-card__value { color: var(--danger); }

/* การ์ด KPI ที่กดกรองได้ (เช่น หน้า "งานของรถคันนี้") */
button.stat-card.js-atfilter {
  cursor: pointer;
  border: 0;
  width: 100%;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}
button.stat-card.js-atfilter:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.stat-card.js-atfilter.is-active {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  background: #eef1fe;
}
.stat-card.js-atfilter.is-active .stat-card__label { color: var(--primary); }

/* ============================================================
   TASK CARDS
   ============================================================ */
.task-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-left: 4px solid var(--gray-200);
  transition: all var(--duration) var(--ease-out);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.task-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  opacity: 0;
  transition: opacity var(--duration) var(--ease-out);
  pointer-events: none;
}
.task-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.task-card:active {
  transform: translateY(0);
  box-shadow: var(--shadow);
}

.task-card--pending  { border-left-color: var(--warning); }
.task-card--pending::after  { background: linear-gradient(90deg, rgba(245,158,11,.03), transparent); }
.task-card--pending:hover::after { opacity: 1; }

.task-card--on_time  { border-left-color: var(--success); }
.task-card--on_time::after  { background: linear-gradient(90deg, rgba(16,185,129,.03), transparent); }
.task-card--on_time:hover::after { opacity: 1; }

.task-card--early    { border-left-color: var(--info); }
.task-card--early::after    { background: linear-gradient(90deg, rgba(6,182,212,.03), transparent); }
.task-card--early:hover::after { opacity: 1; }

.task-card--late     { border-left-color: var(--status-late-border); }
.task-card--late::after     { background: linear-gradient(90deg, rgba(249,115,22,.04), transparent); }
.task-card--late:hover::after { opacity: 1; }

.task-card--missed   { border-left-color: var(--status-missed-solid); }
.task-card--missed::after   { background: linear-gradient(90deg, rgba(220,38,38,.04), transparent); }
.task-card--missed:hover::after { opacity: 1; }

.task-card__icon {
  font-size: 1.8rem;
  flex-shrink: 0;
  margin-top: 0;
}
.status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45em;
  height: 1.45em;
  border-radius: .45em;
  font-size: .95em;
  line-height: 1;
  vertical-align: -.25em;
  border: 1px solid transparent;
}
.status-icon--pending {
  background: var(--status-pending-bg);
  color: var(--status-pending-text);
  border-color: #fde68a;
}
.status-icon--on_time {
  background: var(--success);
  color: #fff;
  border-color: var(--success);
}
.status-icon--early {
  background: var(--info-light);
  color: #0e7490;
  border-color: #67e8f9;
}
.status-icon--late {
  background: var(--status-late-bg);
  color: var(--status-late-text);
  border-color: var(--status-late-border);
}
.status-icon--missed {
  background: var(--status-missed-solid);
  color: #fff;
  border-color: var(--status-missed-solid);
}
.status-icon i {
  font-size: .9em;
  line-height: 1;
}
.task-card__icon .status-icon,
.record-task-icon .status-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 1rem;
  vertical-align: 0;
}
.task-card__body { flex: 1; min-width: 0; }
.task-card__asset {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 1px;
}
.task-card__asset-code {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--dark);
  letter-spacing: -0.02em;
  line-height: 1;
}
.task-card__asset-sub {
  font-size: .75rem;
  color: var(--gray-500);
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-card__title {
  font-weight: 500;
  font-size: .875rem;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--gray-700);
  letter-spacing: -0.01em;
}
.task-card__meta {
  font-size: .78rem;
  color: var(--gray-500);
  line-height: 1.5;
}
.task-card__meta i { color: var(--gray-400); }
.task-card__usage-box {
  background: var(--status-done-bg);
  border-radius: 8px;
  padding: 6px 10px;
  margin: 6px 0 2px;
}
.task-card__usage-headline {
  font-size: .8rem;
  font-weight: 500;
  color: var(--status-done-text);
}
.task-card__usage-sub {
  font-size: .72rem;
  color: var(--status-done-text);
  opacity: .85;
  margin-top: 1px;
}
.task-card__done-chip {
  display: inline-flex;
  align-items: center;
  font-size: .72rem;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 20px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.task-card__done-chip--on_time,
.task-card__done-chip--early { color: var(--success); background: var(--success-light); }
.task-card__done-chip--late  { color: #d97706;        background: #fffbeb; border-color: #d97706; }
.task-card__action {
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
}
.task-card__days {
  font-size: .7rem;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  line-height: 1;
}

/* ── Week Strip Legend ───────────────────────────────────── */
.strip-legend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  font-size: .55rem;
  font-weight: 900;
  flex-shrink: 0;
}
.strip-legend--due        { background: var(--status-pending-bg); border: 1.5px solid var(--status-pending-border); }
.strip-legend--today      { border: 1.5px solid var(--status-today); color: var(--status-today); }
.strip-legend--done       { background: var(--success); color: #fff; font-size: .65rem; }

/* ── Week Strip ──────────────────────────────────────────── */
.week-strip {
  display: flex;
  gap: 1px;
  margin-top: 8px;
}
.week-strip__day {
  flex: 1;
  text-align: center;
  min-width: 0;
}
.week-strip__lbl {
  font-size: .55rem;
  color: var(--gray-400);
  line-height: 1;
  margin-bottom: 2px;
}
.week-strip__num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  font-weight: 500;
  margin: 0 auto;
  color: var(--gray-400);
  border: 1.5px solid transparent;
  position: relative;
  overflow: hidden;
}
.week-strip__day--past .week-strip__num { color: var(--gray-300); }

/* 1. วันกำหนด — เหลือง = งานที่ต้องทำ/รอทำ */
.week-strip__day--due .week-strip__num {
  background: var(--status-pending-bg);
  border-color: var(--status-pending-border);
  color: var(--status-pending-text);
  font-weight: 700;
}

/* 2. วันนี้ — วงขอบน้ำเงิน */
.week-strip__day--today .week-strip__num {
  background: #fff;
  border-color: var(--status-today);
  box-shadow: none;
  color: var(--status-today);
  font-weight: 700;
}

/* วันกำหนด + วันนี้ตรงกัน → วงนอกน้ำเงินเท่าเดิม + วงในเหลืองเล็กลง */
.week-strip__day--due.week-strip__day--today .week-strip__num {
  background: #fff;
  border-color: var(--status-today);
  color: var(--status-pending-text);
  box-shadow: none;
  font-size: .58rem;
}
.week-strip__day--due.week-strip__day--today .week-strip__num::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--status-pending-bg);
  border: 1px solid var(--status-pending-border);
}

/* 3. วันบันทึกงาน — เขียว + ✓ ด้านใน บังตัวเลขวันที่ */
.week-strip__day--done .week-strip__num {
  background: var(--success);
  border-color: var(--success);
  color: transparent;
  font-weight: 900;
}
.week-strip__day--done.week-strip__day--due .week-strip__num {
  background: var(--success);
  border-color: var(--success);
  color: transparent;
}
.week-strip__day--done .week-strip__num::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .75rem;
  font-weight: 900;
  line-height: 1;
}
.week-strip__day--done.week-strip__day--today .week-strip__num {
  background: #fff;
  border-color: var(--status-today);
  box-shadow: none;
}
.week-strip__day--done.week-strip__day--today .week-strip__num::after {
  inset: 3px;
  border-radius: 50%;
  background: var(--success);
  font-size: .58rem;
}

/* 4. วันที่มีการใช้งานจริง (เช่น รถวิ่ง) สำหรับงานแบบนับวันใช้งานสะสม —
   ใช้สไตล์เดียวกับ --done เพราะสื่อความหมายใกล้กัน (วันนี้ "นับ" แล้ว) */
.week-strip__day--used .week-strip__num {
  background: var(--success);
  border-color: var(--success);
  color: transparent;
  font-weight: 900;
}
.week-strip__day--used .week-strip__num::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .75rem;
  font-weight: 900;
  line-height: 1;
}

/* ── Filter Bar ─────────────────────────────────────────── */
.filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.filter-bar::-webkit-scrollbar { display: none; }
.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 16px;
  border-radius: 20px;
  border: 1.5px solid var(--gray-200);
  background: #fff;
  font-size: .85rem;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  color: var(--gray-600);
  flex-shrink: 0;
}
.filter-btn:hover {
  border-color: var(--primary-light);
  color: var(--primary);
  background: var(--primary-50);
}
.filter-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}
.filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: .65rem;
  font-weight: 700;
  background: rgba(0,0,0,.12);
  color: inherit;
  line-height: 1;
}
.filter-btn.active .filter-badge  { background: rgba(255,255,255,.3); color: #fff; }
.filter-badge--danger              { background: var(--danger-light) !important; color: var(--danger) !important; }
.filter-btn.active .filter-badge--danger { background: rgba(255,255,255,.3) !important; color: #fff !important; }

/* ============================================================
   SECTION HEADER
   ============================================================ */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 10px;
}
.section-header h2 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  color: var(--gray-700);
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: -0.02em;
}
.section-header .badge {
  font-size: .7rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}

/* ============================================================
   FORM CARD
   ============================================================ */
.form-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 14px;
  border: 1px solid rgba(0,0,0,.04);
}

/* ── Form Action Card (2-column layout side panel) ── */
.form-action-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,.04);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.form-action-card__title {
  font-size: .72rem;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gray-100);
}

.form-label {
  font-weight: 600;
  font-size: .875rem;
  color: var(--gray-700);
  margin-bottom: 6px;
}

.form-control, .form-select {
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--gray-200);
  padding: 10px 14px;
  font-size: .9rem;
  transition: border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
  color: var(--gray-800);
}
.form-control:focus, .form-select:focus {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
}
.form-control::placeholder { color: var(--gray-400); }

.form-control-lg {
  padding: 12px 16px;
  font-size: .95rem;
}

.form-check-input {
  width: 20px; height: 20px;
  border: 2px solid var(--gray-300);
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--duration) var(--ease-spring);
}
.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}
.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .15);
}

.input-group-text {
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  color: var(--gray-500);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}

/* ไอคอนลอยในกล่อง textarea แทน input-group (ที่สูงไม่เท่ากันแล้วไอคอนดูลอย) */
.textarea-icon { position: relative; }
.textarea-icon__glyph {
  position: absolute;
  top: 11px;
  left: 14px;
  line-height: 1;
  pointer-events: none;
}
.textarea-icon__field { padding-left: 38px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary-lg {
  display: block;
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--duration) var(--ease-out);
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), .25);
  letter-spacing: -0.01em;
}
.btn-primary-lg:hover {
  background: linear-gradient(135deg, var(--primary-dark) 0%, #2e1065 100%);
  color: #fff;
  box-shadow: 0 6px 20px rgba(var(--primary-rgb), .35);
  transform: translateY(-1px);
}
.btn-primary-lg:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), .2);
}

.btn { border-radius: var(--radius-sm); font-weight: 500; transition: all var(--duration) var(--ease-out); }
.btn:active { transform: scale(.97); }

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
}
.btn-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

.btn-outline-secondary {
  border-color: var(--gray-200);
  color: var(--gray-600);
}
.btn-outline-secondary:hover {
  background: var(--gray-100);
  border-color: var(--gray-300);
  color: var(--gray-700);
}

/* ============================================================
   BOTTOM NAVIGATION
   ============================================================ */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--bottom-h);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(0,0,0,.06);
  display: flex;
  z-index: 1000;
  padding: 0 8px;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--gray-400);
  text-decoration: none;
  font-size: .68rem;
  font-weight: 500;
  transition: color var(--duration) var(--ease-out);
  position: relative;
  padding: 6px 0;
}
.bottom-nav__item i {
  font-size: 1.35rem;
  transition: transform var(--duration) var(--ease-spring);
}
.bottom-nav__item.active,
.bottom-nav__item:hover {
  color: var(--primary);
}
.bottom-nav__item.active i {
  transform: scale(1.1);
}
.bottom-nav__item.active::before {
  content: '';
  position: absolute;
  top: 0;
  width: 24px;
  height: 3px;
  background: var(--primary);
  border-radius: 0 0 3px 3px;
}

/* ============================================================
   TOP LOADING BAR
   ============================================================ */
#top-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 10px rgba(255,255,255,.6), 0 0 4px rgba(255,255,255,.4);
  border-radius: 0 2px 2px 0;
  z-index: 100000;
  pointer-events: none;
  opacity: 1;
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
.alert-toast {
  position: fixed;
  top: calc(var(--header-h) + 12px);
  left: 50%; transform: translateX(-50%);
  padding: 12px 24px;
  border-radius: var(--radius);
  font-size: .9rem;
  font-weight: 600;
  z-index: 9999;
  white-space: nowrap;
  box-shadow: var(--shadow-lg);
  animation: toastIn var(--duration-md) var(--ease-spring);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  gap: 8px;
}
.alert-toast--success {
  background: rgba(16,185,129,.95);
  color: #fff;
}
.alert-toast--danger {
  background: rgba(239,68,68,.95);
  color: #fff;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(.95); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(135deg, #1e1b4b 0%, var(--primary-dark) 40%, var(--primary) 100%);
  position: relative;
  overflow: hidden;
}
.login-wrap::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at 30% 50%, rgba(var(--primary-rgb), .15) 0%, transparent 50%),
              radial-gradient(circle at 70% 80%, rgba(99,102,241,.1) 0%, transparent 40%);
  animation: loginBg 15s ease-in-out infinite alternate;
}
@keyframes loginBg {
  from { transform: rotate(0deg) scale(1); }
  to   { transform: rotate(3deg) scale(1.05); }
}

.login-card {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(20px);
  border-radius: var(--radius-xl);
  padding: 40px 32px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 25px 50px rgba(0,0,0,.25);
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255,255,255,.2);
}
.login-logo {
  text-align: center;
  margin-bottom: 28px;
}
.login-logo i {
  font-size: 3rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.login-logo h1 {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 10px 0 4px;
  color: var(--gray-900);
  letter-spacing: -0.03em;
}
.login-logo p {
  font-size: .9rem;
  color: var(--gray-500);
  margin: 0;
}

/* ============================================================
   FILTER BAR
   ============================================================ */
.filter-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.filter-bar::-webkit-scrollbar { display: none; }
.filter-bar .btn { flex-shrink: 0; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  text-align: center;
  padding: 56px 20px;
  color: var(--gray-400);
}
.empty-state__icon {
  font-size: 3.5rem;
  opacity: .2;
  display: block;
  margin-bottom: 16px;
}
.empty-state__text {
  font-size: .95rem;
  margin-bottom: 16px;
  color: var(--gray-500);
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.progress {
  background: var(--gray-100);
  border-radius: 100px;
  overflow: hidden;
}
.progress-bar {
  border-radius: 100px;
  transition: width .6s var(--ease-out);
}

/* ============================================================
   TABLE
   ============================================================ */
.table { font-size: .875rem; }
.table th {
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gray-500);
  border-bottom-width: 2px;
}
.table td { vertical-align: middle; }
.table-hover tbody tr:hover { background: var(--primary-50); }

/* ============================================================
   BADGES
   ============================================================ */
.badge { font-weight: 600; letter-spacing: -0.01em; border-radius: 6px; }

/* ============================================================
   DROPDOWN
   ============================================================ */
.dropdown-menu {
  border: 1px solid var(--gray-100);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius);
  padding: 8px;
  animation: dropIn var(--duration-md) var(--ease-out);
}
.dropdown-item {
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: .9rem;
  font-weight: 500;
  transition: background var(--duration) var(--ease-out);
}
.dropdown-item:hover { background: var(--gray-50); }

@keyframes dropIn {
  from { opacity: 0; transform: translateY(-8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   PHOTO UPLOAD (used in record_form)
   ============================================================ */
.photo-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--gray-50);
  border: 2px dashed var(--gray-200);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  color: var(--gray-600);
  transition: all var(--duration) var(--ease-out);
  user-select: none;
}
.photo-dropzone:hover,
.photo-dropzone--over {
  border-color: var(--primary-light);
  background: var(--primary-50);
  color: var(--primary);
}
/* legacy — keep for any other usage */
.photo-upload-btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 18px;
  background: var(--gray-50);
  border: 2px dashed var(--gray-200);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: .9rem;
  color: var(--gray-600);
  transition: all var(--duration) var(--ease-out);
}
.photo-upload-btn:hover {
  border-color: var(--primary-light);
  background: var(--primary-50);
  color: var(--primary);
}

/* ── Compact record form ───────────────────────────────────── */
.record-compact-form {
  margin: 0;
}
.record-compact-card {
  padding: 20px;
  margin-bottom: 0;
  border-radius: var(--radius);
}
.record-task-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.record-task-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  line-height: 1;
}
.record-task-body {
  min-width: 0;
}
.record-task-title {
  font-size: .98rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
}
.record-task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1px 10px;
  margin-top: 2px;
  color: var(--gray-500);
  font-size: .74rem;
  line-height: 1.35;
}
.record-task-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 7px;
  margin-top: 5px;
}
.record-task-pills .badge {
  font-size: .72rem;
  padding: 4px 7px;
}
.record-deadline-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 23px;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.record-deadline-pill i {
  font-size: .8rem;
  line-height: 1;
}
.record-deadline-pill strong {
  font-weight: 800;
}
.record-deadline-pill span {
  font-weight: 600;
}
.record-deadline-pill.deadline-summary--open {
  background: var(--info-light);
  color: #155e75;
  border-color: #67e8f9;
}
.record-deadline-pill.deadline-summary--warn,
.record-deadline-pill.deadline-summary--urgent {
  background: var(--status-pending-bg);
  color: var(--status-pending-text);
  border-color: #fde68a;
}
.record-deadline-pill.deadline-summary--late {
  background: var(--status-late-bg);
  color: var(--status-late-text);
  border-color: var(--status-late-border);
}
.record-deadline-pill.deadline-summary--missed {
  background: var(--status-missed-bg);
  color: var(--status-missed-text);
  border-color: #fecaca;
}
.record-section {
  margin-top: 12px;
}
.record-label {
  display: block;
  margin-bottom: 4px;
  font-size: .76rem;
  font-weight: 700;
  color: var(--gray-700);
}
.record-inline-readonly {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 9px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
}
.record-inline-readonly__label {
  color: var(--gray-500);
  font-size: .76rem;
  font-weight: 700;
  white-space: nowrap;
}
.record-inline-readonly strong {
  min-width: 0;
  color: var(--dark);
  font-size: .9rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.record-inline-readonly__lock {
  color: var(--gray-400);
  font-size: .82rem;
}
.record-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.record-note-input {
  min-height: 40px;
  padding: 8px 10px;
  resize: vertical;
}
.record-error {
  margin-top: 6px;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  background: var(--danger-light);
  color: #7f1d1d;
  font-size: .78rem;
  font-weight: 600;
}
.record-photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 7px;
}
.record-thumb-img {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 10px;
  border: 1.5px solid var(--gray-200);
  cursor: pointer;
}
.photo-dropzone--compact {
  flex-direction: row;
  justify-content: flex-start;
  gap: 9px;
  min-height: 58px;
  padding: 8px 10px;
  text-align: left;
  border-radius: var(--radius-sm);
}
.photo-dropzone--compact > i {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #fff;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.photo-dropzone--compact.photo-dropzone--has-files {
  min-height: 52px;
  border-style: solid;
  background: #fff;
}
.photo-dropzone__copy {
  min-width: 0;
}
.photo-dropzone--compact .fw-medium {
  margin: 0;
  font-size: .84rem;
  line-height: 1.25;
}
.photo-dropzone--compact .small {
  margin-top: 2px;
  font-size: .72rem;
  line-height: 1.25;
}
.record-compact-card .loc-chip-grid,
.record-compact-card .note-chip-grid {
  gap: 5px;
}
.record-compact-card .loc-chip {
  padding: 4px 9px;
  border-radius: 16px;
  font-size: .78rem;
}
.record-compact-card .form-control {
  padding: 8px 10px;
  font-size: .86rem;
}
.record-compact-card .input-group .form-control {
  min-height: 40px;
}
.record-compact-warning {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--warning-light);
  color: #78350f;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.35;
}
.record-compact-warning i {
  color: var(--warning);
  margin-top: 1px;
}
.record-compact-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px;
  margin-top: 10px;
}
.record-compact-actions .btn-primary-lg {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: .95rem;
  box-shadow: none;
}
.record-cancel-btn {
  min-width: 84px;
  border-radius: 12px !important;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* ============================================================
   ALERT / CARD VARIANTS
   ============================================================ */
.alert {
  border-radius: var(--radius);
  border: none;
  font-size: .875rem;
}

/* ============================================================
   TRIP DAY ROW
   ============================================================ */
.trip-day-row .form-check {
  border-radius: var(--radius-sm);
  transition: background var(--duration) var(--ease-out);
}
.trip-day-row .form-check:hover {
  background: var(--gray-50);
}

/* ============================================================
   RESPONSIVE — DESKTOP
   ============================================================ */
@media (min-width: 768px) {
  body { padding-bottom: 0; }
  .bottom-nav { display: none; }
  .app-main { padding: 24px; max-width: 960px; }
  .stat-grid { grid-template-columns: repeat(4, 1fr); }

  .stat-card { padding: 22px 20px; }
  .stat-card__value { font-size: 2.2rem; }

  .task-card { padding: 18px 20px; }

  .form-card { padding: 24px; }
}

/* ============================================================
   DESKTOP-FIRST LAYOUT (admin/manager)
   Sidebar ถาวรซ้าย, content เต็มกว้าง, ไม่มี hamburger / bottom-nav
   ============================================================ */
@media (min-width: 992px) {
  body.layout-desktop .sidebar {
    transform: translateX(0);
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    width: 260px;
    box-shadow: 1px 0 0 var(--gray-100);
    z-index: 900;
  }
  body.layout-desktop .sidebar__header {
    display: none;
  }
  body.layout-desktop .sidebar-backdrop {
    display: none !important;
  }
  body.layout-desktop .app-main {
    margin-left: 260px;
    max-width: none;
    padding: 28px 36px;
  }
  body.layout-desktop .app-header [aria-label="Menu"] {
    display: none;
  }
  body.layout-desktop .alert-toast {
    left: calc(50% + 130px); /* center over main area, not whole viewport */
  }
  /* Form card บน desktop กว้างขึ้น แต่ไม่เกิน 900px เพื่อให้อ่านง่าย (ถ้าไม่อยู่ใน form-layout) */
  body.layout-desktop .form-card {
    max-width: 900px;
  }
  /* form-card--wide: ตาราง/ข้อมูลกว้าง ใช้พื้นที่จอเต็ม (เช่น ตารางประวัติใช้รถ) */
  body.layout-desktop .form-card--wide {
    max-width: none;
  }

  /* ── 2-column form layout ──────────────────────────── */
  body.layout-desktop .form-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    max-width: none; /* ไม่จำกัด — ควบคุมด้วย main+side width */
  }
  body.layout-desktop .form-layout__main {
    flex: 1 1 0;
    min-width: 0;
    max-width: 720px; /* form fields อ่านง่ายสุดที่ไม่เกิน 720px */
  }
  body.layout-desktop .form-layout__side {
    flex: 0 0 220px;
    width: 220px;
    position: sticky;
    top: calc(var(--header-h) + 20px);
  }
  /* form-card ใน main column ไม่ต้องจำกัดกว้างซ้ำ */
  body.layout-desktop .form-layout__main .form-card {
    max-width: none;
  }
  /* btn-primary-lg ใน action card ไม่ต้องเป็น block แบบเต็ม (side card จำกัดกว้างแล้ว) */
  body.layout-desktop .form-action-card .btn-primary-lg {
    width: 100%;
  }
}

/* จอกว้างพิเศษ — เพิ่ม padding ให้ content หายใจ */
@media (min-width: 1400px) {
  body.layout-desktop .app-main {
    padding: 32px 48px;
    max-width: 1600px;
  }
}

/* ============================================================
   SORTABLE TABLE HEADERS
   ============================================================ */
th[data-sort] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  position: relative;
}
th[data-sort]::after {
  content: ' ⇅';
  font-size: .65rem;
  opacity: .35;
  vertical-align: middle;
}
th[aria-sort="ascending"]::after  { content: ' ▲'; opacity: 1; color: var(--primary); }
th[aria-sort="descending"]::after { content: ' ▼'; opacity: 1; color: var(--primary); }
th[data-sort]:hover { color: var(--primary); }

/* ============================================================
   PLAN USER CHIP SELECTOR
   ============================================================ */
.pu-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  min-height: 54px;
  align-content: flex-start;
  transition: border-color .15s;
}
.pu-chip-grid:has(.pu-chip--selected) {
  border-color: var(--primary-light);
  background: var(--primary-50);
}
.pu-chip { position: relative; display: inline-flex; align-items: center; }
.pu-chip__body {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--gray-200);
  background: #fff;
  font-size: .82rem;
  font-weight: 500;
  color: var(--gray-600);
  cursor: pointer;
  user-select: none;
  transition: all .15s var(--ease-out);
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
}
.pu-chip__check { display: none; font-weight: 700; }
.pu-chip__body:hover {
  border-color: var(--primary-light);
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(var(--primary-rgb),.12);
}
.pu-chip--selected .pu-chip__body {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  padding-right: 34px;
  box-shadow: 0 2px 10px rgba(var(--primary-rgb),.35);
}
.pu-chip--selected .pu-chip__body:hover { transform: translateY(-1px); }
.pu-chip--selected .pu-chip__check { display: inline; }
.pu-chip__star {
  display: none;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.18);
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: .78rem;
  color: rgba(255,255,255,.65);
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: all .15s;
  align-items: center;
  justify-content: center;
}
.pu-chip--selected .pu-chip__star { display: flex; }
.pu-chip--primary .pu-chip__star  { color: #ffd700; background: rgba(255,255,255,.25); }
.pu-chip__star:hover               { background: rgba(255,255,255,.35) !important; color: #fff !important; }
.pu-chip-empty {
  color: var(--gray-400);
  font-size: .82rem;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Factory / scope chip grids (departments modal, user form) ── */
.factory-chip-grid,
.scope-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  min-height: 46px;
  transition: border-color .15s;
}
.factory-chip-grid:has(input:checked),
.scope-chip-grid:has(input:checked) {
  border-color: var(--primary-light);
  background: var(--primary-50);
}
.fac-chip input[type=checkbox],
.fac-chip input[type=radio],
.scope-item input[type=checkbox] { display: none; }
.fac-chip label,
.scope-item label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--gray-200);
  background: #fff;
  font-size: .82rem;
  font-weight: 500;
  color: var(--gray-600);
  cursor: pointer;
  user-select: none;
  transition: all .15s var(--ease-out);
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
}
.fac-chip label:hover,
.scope-item label:hover {
  border-color: var(--primary-light);
  color: var(--primary);
  transform: translateY(-1px);
}
.fac-chip input:checked + label,
.scope-item input:checked + label {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 2px 10px rgba(var(--primary-rgb),.35);
}
.fac-chip input:checked + label::before,
.scope-item input:checked + label::before {
  content: '✓';
  font-weight: 700;
  margin-right: 2px;
}

/* User-scope: factory group header */
.scope-factory-group {
  width: 100%;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 8px;
}
.scope-factory-group__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--gray-50);
  border-bottom: 1.5px solid var(--gray-200);
  font-weight: 600;
  font-size: .85rem;
  color: var(--gray-700);
}
.scope-factory-group__depts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  background: #fff;
}
.scope-factory-group--all .scope-factory-group__depts {
  opacity: .4;
  pointer-events: none;
}

/* ============================================================
   CONFIRM DIALOG (custom — replaces SweetAlert)
   ============================================================ */
.confirm-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(4px);
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: confirmFadeIn .2s var(--ease-out);
}
.confirm-overlay.closing {
  animation: confirmFadeOut .15s var(--ease-out) forwards;
}

.confirm-box {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 60px rgba(0,0,0,.2);
  width: 100%;
  max-width: 340px;
  overflow: hidden;
  animation: confirmSlideUp .25s var(--ease-spring);
}
.closing .confirm-box {
  animation: confirmSlideDown .15s var(--ease-out) forwards;
}

.confirm-box__icon {
  text-align: center;
  padding: 28px 20px 12px;
  font-size: 2.8rem;
  line-height: 1;
}
.confirm-box__icon--danger { color: var(--danger); }
.confirm-box__icon--warning { color: var(--warning); }
.confirm-box__icon--info { color: var(--primary); }

.confirm-box__body {
  text-align: center;
  padding: 0 24px 20px;
}
.confirm-box__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: 6px;
}
.confirm-box__text {
  font-size: .85rem;
  color: var(--gray-500);
  line-height: 1.6;
}
.confirm-box__refs {
  margin-top: 10px;
  text-align: left;
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: .8rem;
  color: var(--gray-600);
}
.confirm-box__refs li {
  padding: 2px 0;
  list-style: none;
}
.confirm-box__refs li::before {
  content: '🔗 ';
}

.confirm-box__actions {
  display: flex;
  border-top: 1px solid var(--gray-100);
}
.confirm-box__actions button {
  flex: 1;
  padding: 14px;
  border: none;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--duration) var(--ease-out);
}
.confirm-box__btn-cancel {
  background: #fff;
  color: var(--gray-500);
  border-right: 1px solid var(--gray-100) !important;
  border-radius: 0 0 0 var(--radius-lg);
}
.confirm-box__btn-cancel:hover { background: var(--gray-50); }

.confirm-box__btn-ok {
  background: #fff;
  color: var(--danger);
  border-radius: 0 0 var(--radius-lg) 0;
}
.confirm-box__btn-ok:hover { background: var(--danger-light); }

.confirm-box__btn-close {
  flex: 0 0 100%;
  background: var(--primary-50);
  color: var(--primary);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.confirm-box__btn-close:hover { background: var(--primary-100); }

@keyframes confirmFadeIn  { from { opacity:0; } to { opacity:1; } }
@keyframes confirmFadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes confirmSlideUp {
  from { opacity:0; transform: translateY(20px) scale(.95); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}
@keyframes confirmSlideDown {
  from { opacity:1; transform: translateY(0) scale(1); }
  to   { opacity:0; transform: translateY(10px) scale(.97); }
}

/* ── Lock button (undeletable) ── */
.btn-locked {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--gray-200);
  border-radius: 100px;
  background: var(--gray-50);
  color: var(--gray-400);
  font-size: .85rem;
  cursor: pointer;
  transition: all var(--duration) var(--ease-out);
}
.btn-locked:hover {
  background: var(--warning-light);
  border-color: var(--warning);
  color: var(--warning);
}

/* ============================================================
   UTILITY ANIMATIONS
   ============================================================ */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.skeleton {
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-50) 50%, var(--gray-100) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   TIMELINE (B) — manager/timeline
   ============================================================ */

/* Legend */
.tl-legend {
  display: inline-block;
  width: 16px; height: 10px;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 2px;
}
.tl-legend--planned { background: var(--primary); opacity: .3; }
.tl-legend--done    { background: var(--success); border-radius: 50%; width:10px; height:10px; }
.tl-legend--late    { background: var(--status-late-border); border-radius: 50%; width:10px; height:10px; }

/* Day header */
.tl-day-header {
  position: relative;
  height: 22px;
  margin-left: 200px;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 4px;
}
@media (max-width: 767px) { .tl-day-header { margin-left: 0; } }
.tl-day-header span {
  position: absolute;
  transform: translateX(-50%);
  font-size: .7rem;
  color: var(--gray-500);
  font-weight: 500;
}

/* Container */
.tl-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Row */
.tl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
}
@media (max-width: 767px) {
  .tl-row { flex-direction: column; align-items: stretch; }
}

/* Info column */
.tl-info {
  flex: 0 0 192px;
  min-width: 0;
}
@media (max-width: 767px) { .tl-info { flex: auto; } }
.tl-title {
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-meta {
  font-size: .75rem;
  color: var(--gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Track (bar area) */
.tl-track-wrap {
  flex: 1;
  position: relative;
  height: 32px;
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.tl-track-wrap:hover { background: var(--gray-200); }

/* Grid lines */
.tl-gridline {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--gray-300);
  opacity: .5;
}

/* Planned bar */
.tl-bar {
  position: absolute;
  top: 4px; bottom: 4px;
  background: var(--primary);
  opacity: .25;
  border-radius: 3px;
  transition: opacity .2s;
}
.tl-track-wrap:hover .tl-bar { opacity: .4; }

/* Completion dot */
.tl-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  z-index: 2;
}
.tl-dot--done   { background: var(--success); }
.tl-dot--late   { background: var(--status-late-border); }
.tl-dot--missed {
  background: var(--status-missed-solid);
  border-style: dashed;
}

/* Date labels on bar */
.tl-date-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: .65rem;
  color: var(--primary-dark);
  font-weight: 700;
  z-index: 3;
  padding-left: 2px;
  pointer-events: none;
}
.tl-date-label--right {
  padding-left: 0;
  padding-right: 2px;
  transform: translateY(-50%);
}

/* ============================================================
   MONTHLY MATRIX
   ============================================================ */
.mm-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.mm-filter {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.mm-filter--toolbar {
  margin-bottom: 0;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
.mm-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.mm-filter-row .form-select { width: auto; min-width: 130px; flex: 1 1 140px; max-width: 220px; }
.mm-filter-row .form-control { width: auto; flex: 0 0 135px; }
.mm-filter__month { max-width: 170px; }

/* filter bar ลอยติดบนตอนเลื่อนดูตารางยาว (เฉพาะ PC) */
@media (min-width: 992px) {
  body.layout-desktop .matrix-card .mm-filter {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    padding: 10px 18px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--border, #e5e7eb);
  }
}

.mm-filter .form-control,
.mm-filter .form-select {
  min-height: 36px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.mm-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.mm-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}
.mm-pill i { font-size: .9rem; line-height: 1; }
.mm-pill--done { background: var(--status-done-bg); color: var(--status-done-text); border-color: #a7f3d0; }
.mm-pill--pending { background: var(--status-pending-bg); color: var(--status-pending-text); border-color: #fde68a; }
.mm-pill--late { background: var(--status-late-bg); color: var(--status-late-text); border-color: var(--status-late-border); }
.mm-pill--missed { background: var(--status-missed-bg); color: var(--status-missed-text); border-color: #fecaca; }
.mm-pill--plain { background: #f8fafc; color: var(--gray-600); border-color: var(--gray-200); }
.mm-pill--score { background: var(--primary-50); color: var(--primary-dark); border-color: var(--primary-100); }

/* สลับมุมมอง ปฏิทิน / รายการ (ตารางรายเดือน) */
.mm-viewtoggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: #f1f2f7;
  border-radius: 999px;
  flex-shrink: 0;
}
.mm-viewbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--gray-600);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}
.mm-viewbtn:hover { color: var(--primary); text-decoration: none; }
.mm-viewbtn.is-active { background: #fff; color: var(--primary); box-shadow: var(--shadow-xs); }
.mm-viewbtn i { font-size: .9rem; line-height: 1; }

.matrix-card {
  max-width: none !important;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border, #e5e7eb);
}
/* ── Polished table containers ── */
.matrix-card .table-responsive {
  margin: 14px 18px 18px;
  padding: 0;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-sm);
}
.matrix-card .mm-scroll {
  margin: 14px 18px 18px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-sm);
}
.matrix-card .empty-state {
  padding: 40px 18px;
}

/* List table: polished header + no double borders */
.mm-list-table { margin-bottom: 0 !important; }
.mm-list-table thead th {
  background: var(--gray-900) !important;
  color: #fff !important;
  text-transform: none;
  letter-spacing: normal;
  font-size: .8rem;
  border-bottom: none !important;
  white-space: nowrap;
}
.mm-list-table tbody tr:last-child > * {
  border-bottom: none !important;
}

/* Calendar table: no double border at edges */
.mm-table th:last-child,
.mm-table td:last-child { border-right: none; }
.mm-table tbody tr:last-child td { border-bottom: none; }

.mm-scroll {
  overflow-x: auto;
}

.mm-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .78rem;
  line-height: 1.25;
}

.mm-table th,
.mm-table td {
  border-right: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  vertical-align: middle;
}

.mm-table thead th {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--gray-900);
  color: #fff;
  text-align: center;
  font-weight: 700;
  padding: 6px 4px;
}

.mm-table tbody tr:nth-child(even) td { background: #fbfdff; }
.mm-table tbody tr:hover td { background: #f8fafc; }
.mm-table tbody tr:hover td.mm-week-band-0 { background: #f8fafc; }
.mm-table tbody tr:hover td.mm-week-band-1 { background: #e8f0fa; }

.mm-sticky {
  position: sticky;
  z-index: 4;
  background: #fff;
}

.mm-table thead .mm-sticky {
  z-index: 8;
  background: var(--gray-900);
}

.mm-col-group {
  left: 0;
  width: 108px;
  min-width: 108px;
  max-width: 108px;
}

.mm-col-asset {
  left: 108px;
  width: 170px;
  min-width: 170px;
  max-width: 170px;
}

.mm-col-owner {
  left: 278px;
  width: 108px;
  min-width: 108px;
  max-width: 108px;
}

.mm-row-group,
.mm-row-asset,
.mm-row-owner {
  padding: 7px 8px;
}

.mm-group-main,
.mm-row-owner {
  overflow: hidden;
}

.mm-group-type {
  display: block;
  font-weight: 800;
  color: var(--gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mm-group-factory {
  display: inline-flex;
  align-items: center;
  margin-top: 2px;
  padding: 1px 4px;
  border-radius: 5px;
  background: var(--primary-50);
  color: var(--primary-dark);
  font-size: .66rem;
  font-weight: 800;
  vertical-align: 1px;
}

.mm-row-owner {
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mm-row-group small,
.mm-row-asset small {
  display: block;
  color: var(--gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mm-asset-link {
  display: block;
  color: var(--gray-800);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mm-asset-link:hover { color: var(--primary); }

.mm-mini {
  display: inline-flex;
  margin-top: 4px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--gray-100);
  color: var(--gray-500);
  font-size: .68rem;
  font-weight: 700;
}

.mm-day-head {
  width: 30px;
  min-width: 30px;
}
.mm-day-head span {
  display: block;
  line-height: 1;
}
.mm-day-head small {
  display: block;
  margin-top: 2px;
  font-size: .56rem;
  font-weight: 600;
  color: rgba(255,255,255,.66);
}
.mm-weekend { background: var(--gray-800) !important; }
.mm-today { box-shadow: inset 0 -3px 0 var(--warning); }
.mm-table thead th.mm-week-band-0 { background: #0f172a; }
.mm-table thead th.mm-week-band-1 { background: #1f2937; }

.mm-total-head {
  width: 72px;
  min-width: 72px;
}

.mm-day-cell {
  width: 30px;
  min-width: 30px;
  height: 34px;
  padding: 2px;
  text-align: center;
}
.mm-table tbody td.mm-week-band-0 { background: #ffffff; }
.mm-table tbody td.mm-week-band-1 { background: #f4f8fd; }
.mm-table tbody tr:nth-child(even) td.mm-week-band-0 { background: #fbfdff; }
.mm-table tbody tr:nth-child(even) td.mm-week-band-1 { background: #eef4fb; }
.mm-day-cell--today { background: #fffbeb !important; }

.mm-cell {
  width: 26px;
  height: 24px;
  border: 1px solid transparent;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: .62rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--duration) var(--ease-spring), filter var(--duration) var(--ease-out);
}
.mm-cell:hover {
  transform: translateY(-1px);
  filter: brightness(.98);
}
.mm-cell--empty {
  cursor: default;
  background: transparent;
  border-color: transparent;
}
.mm-cell--empty:hover {
  transform: none;
  filter: none;
}
.mm-cell--done { background: var(--status-done-bg); color: var(--status-done-text); border-color: var(--status-done-border); }
.mm-cell--pending { background: var(--status-pending-bg); color: var(--status-pending-text); border-color: var(--status-pending-border); }
.mm-cell--late { background: var(--status-late-bg); color: var(--status-late-text); border-color: var(--status-late-border); }
.mm-cell--missed { background: var(--status-missed-solid); color: #fff; border-color: var(--status-missed-solid); }
.mm-cell--mixed { box-shadow: inset 0 0 0 2px rgba(79,70,229,.38); }
.mm-cell small {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 13px;
  height: 13px;
  border-radius: 7px;
  background: #fff;
  color: var(--gray-800);
  border: 1px solid var(--gray-300);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .52rem;
  font-weight: 800;
}

.mm-row-total {
  min-width: 72px;
  padding: 5px 4px;
  white-space: nowrap;
  background: #fff;
}

.mm-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin: 1px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: .6rem;
  font-weight: 800;
}
.mm-dot--done { background: var(--status-done-bg); color: var(--status-done-text); }
.mm-dot--pending { background: var(--status-pending-bg); color: var(--status-pending-text); }
.mm-dot--late { background: var(--status-late-bg); color: var(--status-late-text); }
.mm-dot--missed { background: var(--status-missed-solid); color: #fff; }

.mm-modal-list {
  display: grid;
  gap: 10px;
}
.mm-modal-item {
  border: 1px solid var(--gray-200);
  border-left-width: 4px;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}
.mm-modal-item--on_time,
.mm-modal-item--early { border-left-color: var(--success); }
.mm-modal-item--pending { border-left-color: var(--warning); }
.mm-modal-item--late { border-left-color: var(--status-late-border); }
.mm-modal-item--missed { border-left-color: var(--status-missed-solid); }

.mm-modal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 8px;
  color: var(--gray-500);
  font-size: .8rem;
}

.mm-status-label {
  border-radius: 999px;
  padding: 3px 8px;
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
}
.mm-status-label--on_time,
.mm-status-label--early { background: var(--status-done-bg); color: var(--status-done-text); }
.mm-status-label--pending { background: var(--status-pending-bg); color: var(--status-pending-text); }
.mm-status-label--late { background: var(--status-late-bg); color: var(--status-late-text); }
.mm-status-label--missed { background: var(--status-missed-solid); color: #fff; }

@media (max-width: 767px) {
  .mm-filter-row .form-select { flex: 1 1 calc(50% - 8px); max-width: none; min-width: 0; }
  .mm-summary .btn {
    width: 100%;
    margin-left: 0 !important;
  }
  .mm-scroll {
    overflow-x: auto;
  }
  .mm-col-group {
    width: 92px;
    min-width: 92px;
    max-width: 92px;
  }
  .mm-col-asset {
    left: 92px;
    width: 138px;
    min-width: 138px;
    max-width: 138px;
  }
  .mm-col-owner {
    left: 230px;
    width: 104px;
    min-width: 104px;
    max-width: 104px;
  }
  .mm-row-group,
  .mm-row-asset,
  .mm-row-owner {
    padding: 7px 8px;
  }
}

/* Table highlight */
.table-danger-soft td { background: rgba(239,68,68,.04) !important; }

/* ── Evidence photo thumbs (record form) ─────────────────────── */
.ev-thumb {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.ev-del-btn {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: 2px solid #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .15s;
  z-index: 10;
}
.ev-del-btn:hover { background: #dc3545; }

/* ── Lightbox nav buttons ─────────────────────────────────────── */
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.18);
  border: none;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.lb-nav:hover { background: rgba(255,255,255,.35); }
.lb-nav--left  { left:  12px; }
.lb-nav--right { right: 12px; }

/* ── Location chip selector (record_form) ───────────────────── */
.loc-chip-grid,
.note-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.note-chip-grid {
  margin-top: 2px;
}
.note-chip {
  background: #fff;
  max-width: 100%;
}
.loc-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: 20px;
  font-size: .875rem;
  cursor: pointer;
  transition: all .15s;
  user-select: none;
  white-space: nowrap;
  color: var(--dark);
  font-family: inherit;
}
.loc-chip:hover {
  border-color: var(--primary-light);
  background: var(--primary-50);
  color: var(--primary);
}
.loc-chip--selected {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff !important;
  font-weight: 600;
}
.loc-chip--selected::before {
  content: '✓\00a0';
  font-weight: 700;
}
.loc-chip--selected:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #fff !important;
}
.loc-chip--new {
  border-style: dashed;
  color: var(--gray-500);
}
.loc-chip--new:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-50);
  border-style: solid;
}

/* ── Deadline summary (record_form) ─────────────────────────── */
.deadline-summary {
  border: 1px solid var(--gray-200);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 10px 12px;
}
.deadline-summary__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.deadline-summary__state {
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.25;
}
.deadline-summary__text {
  font-size: .82rem;
  font-weight: 700;
  color: var(--gray-700);
}
.deadline-summary__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 6px;
  font-size: .76rem;
  color: var(--gray-500);
}
.deadline-summary--open {
  border-left-color: var(--info);
  background: var(--info-light);
}
.deadline-summary--open .deadline-summary__state { color: #155e75; }
.deadline-summary--warn,
.deadline-summary--urgent {
  border-left-color: var(--warning);
  background: var(--status-pending-bg);
}
.deadline-summary--warn .deadline-summary__state,
.deadline-summary--urgent .deadline-summary__state { color: var(--status-pending-text); }
.deadline-summary--late {
  border-left-color: var(--status-late-border);
  background: var(--status-late-bg);
}
.deadline-summary--late .deadline-summary__state { color: var(--status-late-text); }
.deadline-summary--missed {
  border-left-color: var(--status-missed-solid);
  background: var(--status-missed-bg);
}
.deadline-summary--missed .deadline-summary__state { color: var(--status-missed-text); }
.deadline-summary--locked {
  border-left-color: var(--gray-400);
  background: var(--gray-50);
}
.deadline-summary--locked .deadline-summary__state { color: var(--gray-600); }
.deadline-summary--compact {
  margin-top: 10px;
  padding: 8px 10px;
}
.deadline-summary--compact .deadline-summary__head {
  gap: 6px;
}
.deadline-summary--compact .deadline-summary__state {
  font-size: .82rem;
}
.deadline-summary--compact .deadline-summary__text {
  font-size: .76rem;
}
.deadline-summary--compact .deadline-summary__meta {
  margin-top: 2px;
  font-size: .72rem;
}

/* ============================================================
   GRADE BADGE (dashboard — user & manager)
   ============================================================ */
.grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.grade-badge--a    { background: #d1fae5; color: #065f46; }
.grade-badge--b    { background: #dbeafe; color: #1e40af; }
.grade-badge--c    { background: #fef3c7; color: #92400e; }
.grade-badge--d    { background: #fee2e2; color: #991b1b; }
.grade-badge--null { background: var(--gray-100); color: var(--gray-400); }

/* inline (small) variant for table cells */
.grade-badge--sm {
  width: 28px; height: 28px;
  font-size: .82rem;
}

/* ── Time chip (locked time display) ────────────────────────── */
.time-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--primary-50, #eef2ff);
  border: 1.5px solid var(--primary-light, #818cf8);
  border-radius: var(--radius);
}
.time-chip__icon {
  width: 40px; height: 40px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.time-chip__body  { flex: 1; min-width: 0; }
.time-chip__label { font-size: .72rem; color: var(--gray-500); margin-bottom: 2px; }
.time-chip__time  { font-weight: 700; font-size: .95rem; color: var(--dark); }
.time-chip__lock  { color: var(--gray-400); font-size: .9rem; flex-shrink: 0; }
.time-chip--compact {
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
}
.time-chip--compact .time-chip__icon {
  width: 32px;
  height: 32px;
  font-size: .95rem;
}
.time-chip--compact .time-chip__label {
  font-size: .68rem;
  margin-bottom: 0;
}
.time-chip--compact .time-chip__time {
  font-size: .9rem;
}

/* ── Summary calendar (สรุปวัน view) ───────────────────── */

.mm-summary-cal { padding: 14px 18px 18px; }

.mm-sumcal {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  table-layout: fixed;
}
.mm-sumcal thead th {
  text-align: center;
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  padding: 4px 0;
}
.mm-sumcal--weekend { color: var(--text-muted, #9ca3af) !important; }

.mm-sumcal__day {
  vertical-align: top;
  padding: 8px 6px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--gray-100, #f3f4f6);
  background: #fff;
  min-height: 70px;
  cursor: default;
  transition: box-shadow .15s, border-color .15s;
}
.mm-sumcal__day[data-date] { cursor: pointer; }
.mm-sumcal__day[data-date]:hover {
  border-color: var(--primary, #4f46e5);
  box-shadow: 0 2px 8px rgba(79,70,229,.12);
}
.mm-sumcal--out {
  opacity: .35;
  background: var(--gray-50, #f9fafb);
}
.mm-sumcal--today {
  border-color: var(--primary, #4f46e5) !important;
  box-shadow: inset 0 0 0 1px var(--primary, #4f46e5);
}

.mm-sumcal__num {
  font-size: .8rem;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--gray-700, #374151);
}
.mm-sumcal--today .mm-sumcal__num { color: var(--primary, #4f46e5); }

.mm-sumcal__stats {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.mm-sumcal__chip {
  display: inline-block;
  font-size: .6rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  line-height: 1.4;
}
.mm-sumcal__chip--done    { background: #dcfce7; color: #166534; }
.mm-sumcal__chip--pending { background: #fef3c7; color: #92400e; }
.mm-sumcal__chip--bad     { background: #fee2e2; color: #991b1b; }

.mm-sumcal__bar {
  height: 3px;
  background: var(--gray-100, #f3f4f6);
  border-radius: 2px;
  overflow: hidden;
}
.mm-sumcal__bar-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  transition: width .3s;
}

.mm-sumcal__legend {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 12px;
  font-size: .72rem;
  color: var(--text-muted, #6b7280);
}
.mm-sumcal__legend span { display: inline-flex; align-items: center; gap: 4px; }

/* ── Vehicle-data: single-page layout ─────────────────── */

/* Main 2-column: history (left) + sync sidebar (right) */
.vd-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 14px;
  align-items: start;
}
.vd-main { min-width: 0; }
.vd-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 14px;
}
@media (max-width: 1199px) {
  .vd-layout { grid-template-columns: 1fr 300px; }
}
@media (max-width: 991px) {
  .vd-layout { grid-template-columns: 1fr; }
  .vd-sidebar { position: static; }
}

/* Sync Panel — single compact widget */
.vd-sp { padding: 0 !important; overflow: hidden; border: 1px solid var(--border, #e5e7eb); }

/* Header */
.vd-sp__hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--gray-50, #f9fafb);
}
.vd-sp__icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary-50, #eef2ff);
  color: var(--primary, #4f46e5);
  border-radius: 10px; font-size: 1.1rem; flex-shrink: 0;
}
.vd-sp__hdr-body { flex: 1; min-width: 0; }
.vd-sp__name { font-weight: 700; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-sp__meta { font-size: .72rem; color: var(--text-muted, #6b7280); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Config pills (multiple configs) */
.vd-sp__pills {
  display: flex; gap: 6px; padding: 10px 16px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  overflow-x: auto;
}
.vd-sp__pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border: 1px solid var(--border, #e5e7eb);
  border-radius: 20px; background: #fff;
  font-size: .75rem; font-weight: 500; cursor: pointer;
  white-space: nowrap; transition: all .15s;
}
.vd-sp__pill:hover { border-color: var(--primary, #4f46e5); color: var(--primary, #4f46e5); }
.vd-sp__pill.is-active {
  background: var(--primary-50, #eef2ff);
  border-color: var(--primary, #4f46e5);
  color: var(--primary, #4f46e5);
}
.vd-sp__pill-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.vd-sp__pill-dot--ok   { background: #22c55e; }
.vd-sp__pill-dot--warn { background: #f59e0b; }

/* Body — status + sync btn */
.vd-sp__body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }

.vd-sp__status {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--gray-50, #f9fafb);
  border-radius: var(--radius-sm, 8px);
  font-size: .8rem;
}
.vd-sp__dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.vd-sp__dot--ok   { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.vd-sp__dot--warn { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
.vd-sp__dot--none { background: #d1d5db; }
.vd-sp__status-lbl  { font-weight: 600; }
.vd-sp__status-time { margin-left: auto; font-size: .72rem; color: var(--text-muted, #6b7280); }

/* Collapsible log section */
.vd-sp__log-section { border-top: 1px solid var(--border, #e5e7eb); }

.vd-sp__log-toggle {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 10px 16px;
  background: none; border: none;
  font-size: .8rem; font-weight: 600;
  color: var(--text-muted, #6b7280);
  cursor: pointer; transition: color .15s;
}
.vd-sp__log-toggle:hover { color: var(--primary, #4f46e5); }
.vd-sp__chevron { font-size: .65rem; transition: transform .25s ease; }
.vd-sp__log-toggle.is-open .vd-sp__chevron { transform: rotate(90deg); }

.vd-sp__log-count {
  margin-left: auto;
  background: var(--gray-100, #f3f4f6);
  color: var(--text-muted, #6b7280);
  font-size: .65rem; font-weight: 600;
  padding: 1px 8px; border-radius: 10px;
}

.vd-sp__log-wrap {
  max-height: 0; overflow: hidden;
  transition: max-height .35s ease;
}
.vd-sp__log-wrap.is-open { max-height: 600px; }

/* ── Timeline log items ── */
.vd-log__list {
  padding: 14px 16px 6px;
  max-height: 420px;
  overflow-y: auto;
}
.vd-log__empty {
  text-align: center; padding: 20px 0;
  font-size: .8rem; color: var(--text-muted, #6b7280);
}
.vd-log__item {
  display: flex; gap: 10px;
  position: relative;
  padding-bottom: 14px;
}
/* vertical line */
.vd-log__item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 3.5px; top: 14px; bottom: 0;
  width: 1px;
  background: var(--gray-200, #e5e7eb);
}
/* dot */
.vd-log__dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0; margin-top: 4px;
  position: relative; z-index: 1;
  background: #d1d5db;
}
.vd-log__item[data-status="success"] .vd-log__dot { background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.15); }
.vd-log__item[data-status="partial"] .vd-log__dot { background: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,.15); }
.vd-log__item[data-status="error"]   .vd-log__dot { background: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,.15); }
.vd-log__item[data-status="running"] .vd-log__dot { background: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.15); }

.vd-log__body { flex: 1; min-width: 0; }
.vd-log__head { display: flex; align-items: center; gap: 6px; }
.vd-log__time { font-size: .75rem; font-weight: 600; color: var(--gray-700, #374151); }
.vd-log__ico  { font-size: .7rem; }
.vd-log__date { font-size: .7rem; color: var(--text-muted, #6b7280); }
.vd-log__meta { font-size: .68rem; color: var(--text-muted, #6b7280); margin-top: 1px; }
.vd-log__tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.vd-log__tag  {
  font-size: .6rem; font-weight: 500;
  padding: 1px 6px; border-radius: 4px;
  background: #fef3c7; color: #b45309;
}
.vd-log__tag--more { background: var(--gray-100, #f3f4f6); color: var(--text-muted, #6b7280); }

/* flatpickr ให้สูงเท่า form-control-sm */
.flatpickr-input.form-control-sm + .form-control,
input.form-control-sm.js-date {
  background-color: #fff;
}

/* ══════════ Dashboard (ภาพรวมโรงงาน) — รีดีไซน์ตาม design handoff ══════════ */

/* Panel: ภาพรวม (เดือนนี้ + วันนี้) — 2 bands ภายใน panel เดียว */
/* ── KPI Inline Bar ── */
.kpi-inline {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 18px;
  margin-bottom: 14px;
}
.kpi-inline__left {
  display: flex; align-items: center; gap: 8px;
  margin-right: auto;
}
.kpi-inline__dot { width: 9px; height: 9px; border-radius: 99px; background: #4f46e5; flex: 0 0 auto; }
.kpi-inline__label { font-size: .88rem; font-weight: 700; color: #1f2333; white-space: nowrap; }
.kpi-inline__empty { font-size: .82rem; color: #9298ad; }

.kpi-monthnav {
  display: inline-flex; align-items: center; gap: 2px;
  background: #f7f8fb; border: 1px solid #e9ebf2; border-radius: 99px; padding: 3px;
}
.kpi-monthnav__btn {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #5b6075; text-decoration: none; transition: background .12s, color .12s;
}
.kpi-monthnav__btn:hover { background: #fff; color: #4f46e5; box-shadow: var(--shadow-xs); }
.kpi-monthnav__select {
  border: none; background: transparent; font-size: .82rem; font-weight: 600; color: #1f2333;
  padding: 4px 6px; border-radius: 99px; cursor: pointer; max-width: 150px;
}
.kpi-monthnav__select:focus { outline: none; box-shadow: none; }

.kpi-inline__metrics { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kpi-inline__chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 99px; border: 1px solid #e9ebf2;
  font-size: .78rem; font-weight: 500; color: #5b6075;
  text-decoration: none; white-space: nowrap;
  transition: border-color .12s, background .12s;
}
.kpi-inline__chip:hover { border-color: #d8def9; background: #f8f9fc; color: #4f46e5; }
.kpi-inline__chip b { font-weight: 800; font-variant-numeric: tabular-nums; }
.kpi-inline__chip i { font-size: .82rem; }
.kpi-inline__chip--indigo b { color: #4f46e5; }
.kpi-inline__chip--green  b { color: #059669; }
.kpi-inline__chip--slate  b { color: #5b6075; }
.kpi-inline__chip--red    b { color: #dc2626; }
.kpi-inline__chip--red    { border-color: #f9d2d2; }
.kpi-inline__chip--red:hover { background: #fef3f3; }

.kpi-inline__bar {
  display: flex; align-items: center; gap: 8px; min-width: 120px;
}
.kpi-inline__bar-track {
  flex: 1; height: 7px; border-radius: 99px; background: #eef0f6; overflow: hidden;
}
.kpi-inline__bar-fill { display: block; height: 100%; border-radius: 99px; transition: width .3s; }
.kpi-inline__bar-pct { font-size: .82rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Telegram push dots ── */
.tg-dot { display: inline-block; width: 9px; height: 9px; border-radius: 99px; }
.tg-dot--pending { background: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
.tg-dot--overdue { background: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.18); }

/* ── Dashboard 2-column split: รถ&แผน (ซ้าย) + สถานะรายบุคคล (ขวา) ── */
.dash-split {
  display: flex; gap: 16px; align-items: flex-start;
}
.dash-split__left  { flex: 1 1 0; min-width: 0; }
.dash-split__right { flex: 1 1 0; min-width: 0; }
/* ทั้ง 2 ฝั่งไม่ต้อง margin-bottom เพราะ dash-split จัดการ gap เอง */
.dash-split > .plan-panel,
.dash-split > .prl-panel { margin-bottom: 0; }

/* ปรับ grid ลูกให้พอดีกับ half-width (~600px) */
.dash-split .plan-row {
  grid-template-columns: auto 1fr auto 16px;
  gap: 10px; padding: 10px 12px;
}
.dash-split .plan-row__countdown { white-space: nowrap; }
.dash-split .plan-row__vehicle .plan-badge { width: 30px; height: 30px; font-size: .85rem; }
.dash-split .plan-row__code { font-size: .82rem; }
.dash-split .plan-row__type { font-size: .68rem; }
.dash-split .plan-row__title { font-size: .82rem; }
.dash-split .meta-chip { font-size: .72rem; padding: 3px 8px; }
.dash-split .plan-pill { font-size: .72rem; padding: 3px 10px; }
.dash-split .plan-btn { font-size: .72rem; padding: 5px 10px; }

.dash-split .prl-row__main {
  grid-template-columns: 140px 1fr 80px 40px 110px 20px;
  gap: 8px; padding: 8px 10px;
}
.dash-split .prl-row__deduct { display: flex; }
.dash-split .prl-deduct { font-size: .66rem; padding: 2px 7px; }
.dash-split .prl-row__pct { font-size: .88rem; }
.dash-split .prl-row__pct span { font-size: .66rem; }
.dash-split .prl-row__name { font-size: .82rem; }
.dash-split .prl-row__total { font-size: .7rem; }
.dash-split .prl-avatar { width: 30px; height: 30px; font-size: .75rem; }
.dash-split .prl-chip { font-size: .68rem; padding: 2px 8px; }
.dash-split .prl-ghead__title { font-size: .88rem; }
.dash-split .prl-ghead__count { font-size: .72rem; }
.dash-split .prl-ghead__sub { font-size: .72rem; }

/* จอเล็กกว่า 1400px → กลับเป็น stacked 1 คอลัมน์ */
@media (max-width: 1399px) {
  .dash-split { flex-direction: column; }
  .dash-split > .plan-panel,
  .dash-split > .prl-panel { margin-bottom: 14px; }
  .dash-split .plan-row {
    grid-template-columns: auto 1fr auto 16px;
    gap: 16px; padding: 12px 14px;
  }
  .dash-split .plan-row__vehicle .plan-badge { width: 36px; height: 36px; font-size: 1rem; }
  .dash-split .plan-row__code { font-size: inherit; }
  .dash-split .plan-row__type { font-size: inherit; }
  .dash-split .plan-row__title { font-size: inherit; }
  .dash-split .meta-chip { font-size: inherit; padding: revert; }
  .dash-split .plan-pill { font-size: inherit; padding: revert; }
  .dash-split .plan-btn { font-size: inherit; padding: revert; }
  .dash-split .prl-row__main {
    grid-template-columns: 200px 1fr 130px 56px 140px 24px;
    gap: 12px; padding: 10px 14px;
  }
  .dash-split .prl-row__deduct { display: flex; }
  .dash-split .prl-row__name { font-size: inherit; }
  .dash-split .prl-row__total { font-size: inherit; }
  .dash-split .prl-avatar { width: 34px; height: 34px; font-size: .82rem; }
  .dash-split .prl-chip { font-size: inherit; padding: revert; }
  .dash-split .prl-ghead__title { font-size: .95rem; }
  .dash-split .prl-ghead__count { font-size: .8rem; }
  .dash-split .prl-ghead__sub { font-size: inherit; }
}

/* Panel: รถ & แผนที่ต้องทำ — การ์ด PlanRow แทนตาราง */
.plan-panel {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  margin-bottom: 14px;
}
.plan-panel__head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  margin-bottom: 14px;
}
.plan-panel__title { display: flex; align-items: center; gap: 9px; font-size: 1rem; font-weight: 700; color: #1f2333; }
.plan-panel__icon {
  width: 32px; height: 32px; border-radius: 10px; background: #eef1fe; color: #4f46e5;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.plan-panel__count {
  font-size: .76rem; font-weight: 700; color: #5b6075; background: #eef0f6;
  border-radius: 99px; padding: 2px 9px;
}
.plan-empty {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 30px 16px; color: #9298ad; font-size: .86rem; text-align: center;
}
.plan-empty i { font-size: 1.6rem; color: #c2ecd7; }

.plan-rows { display: flex; flex-direction: column; gap: 6px; }
.plan-row {
  display: grid; grid-template-columns: auto 1fr auto 16px;
  align-items: center; gap: 10px; padding: 8px 12px;
  border: 1px solid #e9ebf2; border-radius: 10px; background: #fff;
  transition: border-color .12s, background .12s;
  cursor: pointer; text-decoration: none; color: inherit;
}
.plan-row:hover { border-color: #c7cce8; background: #fafaff; }
.plan-row--overdue { border-left: 3px solid #ef4444; background: #fffcfc; }
.plan-row--overdue:hover { background: #fff7f7; }
.plan-row--today   { border-left: 3px solid #f59e0b; }
.plan-row--future  { border-left: 3px solid #6366f1; }
.plan-row--done    { border-left: 3px solid #10b981; background: #fcfdfb; }
.plan-row--done:hover { background: #f7fdf9; }
.plan-row--idle    { border-left: 3px solid #d1d5db; background: #fafafa; opacity: .7; }
.plan-row--idle:hover { opacity: 1; background: #f5f5f5; }
.plan-row__chev { color: #c0c5d4; font-size: .85rem; transition: color .12s, transform .12s; }
.plan-row:hover .plan-row__chev { color: #6366f1; transform: translateX(2px); }

.plan-row__vehicle { min-width: 0; display: flex; align-items: center; gap: 6px; }
.plan-badge {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; border: 1.5px solid;
}
.plan-badge--fg     { background: #eef1fe; color: #4f46e5; border-color: #d8def9; }
.plan-badge--fd     { background: #fef3f3; color: #dc2626; border-color: #f9d2d2; }
.plan-badge--pickup { background: #fffbeb; color: #d97706; border-color: #fde68a; }
.plan-badge--truck  { background: #f0f4ff; color: #475569; border-color: #cbd5e1; }
.plan-badge--car    { background: #ecfdf5; color: #059669; border-color: #c2ecd7; }
.plan-badge--other  { background: #f3f4f6; color: #6b7280; border-color: #e5e7eb; }
.plan-row__vinfo { min-width: 0; }
.plan-row__code {
  font-size: .84rem; font-weight: 700; color: #1f2333; text-decoration: none; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
a.plan-row__code:hover { color: #4f46e5; }
.plan-row__type { font-size: .68rem; color: #9298ad; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.plan-row__body { min-width: 0; }
.plan-row__title { font-size: .82rem; font-weight: 600; color: #1f2333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-row__meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.meta-chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 600;
  color: #5b6075; white-space: nowrap;
}
.meta-chip i { font-size: .72rem; }
.meta-chip--warn { color: #d97706; text-decoration: none; }
a.meta-chip--warn:hover { text-decoration: underline; }
.meta-chip--done { color: #059669; }

.plan-row__pill { flex: 0 0 auto; }

.filter-bar--sub { gap: 4px; flex-wrap: wrap; overflow-x: visible; }
.filter-btn--sm { font-size: .7rem; padding: 3px 9px; flex-shrink: 0; white-space: nowrap; }
.plan-pill {
  display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700;
  border-radius: 99px; padding: 4px 12px; white-space: nowrap; border: 1px solid;
}
.plan-pill--danger    { color: #dc2626; background: #fef3f3; border-color: #f9d2d2; }
.plan-pill--warning   { color: #d97706; background: #fffaeb; border-color: #fae5b0; }
.plan-pill--secondary { color: #5b6075; background: #eef0f6; border-color: #e3e6ef; }
.plan-pill--done      { color: #059669; background: #ecfdf5; border-color: #c2ecd7; }
.plan-pill--idle      { color: #9ca3af; background: #f3f4f6; border-color: #e5e7eb; font-weight: 600; }
.plan-row__title--muted { color: #9ca3af; font-style: italic; }

/* แถวแบบกางได้ — เมื่อรถ 1 คันมีมากกว่า 1 แผนทำงานพร้อมกัน (เช่น ล้างวันพุธ + วันอาทิตย์) */
.plan-row-group { display: flex; flex-direction: column; }
.plan-row-group.has-other .plan-row { border-radius: 12px 12px 0 0; border-bottom-color: transparent; }
.plan-row-group.has-other.is-open .plan-row { border-color: #d8def9; }

.meta-chip--toggle {
  cursor: pointer; font-family: inherit; color: #4f46e5; background: #eef1fe; border-color: #d8def9;
}
.meta-chip--toggle:hover { background: #e3e8fd; }
.meta-chip--toggle .bi-chevron-down { transition: transform .15s; font-size: .68rem; }
.plan-row-group.is-open .meta-chip--toggle .bi-chevron-down { transform: rotate(180deg); }

.plan-row__detail {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px 14px; margin: 0 0 8px;
  border: 1px solid #d8def9; border-top: none; border-radius: 0 0 12px 12px;
  background: #fafbff;
}
.plan-row__detail-label { font-size: .74rem; color: #9298ad; }
.plan-row__otherplan {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 8px 10px; border: 1px solid #e9ebf2; border-radius: 10px; background: #fff;
}
.plan-row__otherplan-dot { width: 7px; height: 7px; border-radius: 99px; background: #d3d9ec; flex: 0 0 auto; }
.plan-row__otherplan-dot.is-overdue { background: #ef4444; }
.plan-row__otherplan-title { font-size: .82rem; font-weight: 600; color: #1f2333; margin-right: 2px; }
.plan-row__detail-btn {
  align-self: flex-start; border: 1px solid #e9ebf2; background: #fff; color: #4f46e5;
  font-size: .76rem; font-weight: 600; border-radius: 8px; padding: 6px 12px;
  text-decoration: none; transition: background .12s;
}
.plan-row__detail-btn:hover { background: #f8f9fc; color: #4f46e5; }

@media (max-width: 768px) {
  .plan-row__otherplan { flex-direction: column; align-items: flex-start; }
}

.plan-hdr-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .78rem; font-weight: 600; color: #92400e; background: #fffbeb; border: 1px solid #fcd34d;
  border-radius: 99px; padding: 5px 14px; cursor: pointer; transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.plan-hdr-btn:hover { background: #fef3c7; border-color: #f59e0b; }
.plan-hdr-btn:disabled { opacity: .5; cursor: not-allowed; }
.plan-hdr-btn__time { font-weight: 400; font-size: .68rem; color: #78716c; margin-left: 4px; }
.plan-btn {
  display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600;
  border-radius: 99px; padding: 6px 14px; border: 1px solid; text-decoration: none; cursor: pointer;
  background: #fff; font-family: inherit; white-space: nowrap; transition: background .12s;
}
.plan-btn--assign { color: #4f46e5; border-color: #d8def9; }
.plan-btn--assign:hover { background: #eef1fe; }
.plan-btn--remind { color: #d97706; border-color: #fae5b0; }
.plan-btn--remind:hover { background: #fffaeb; }

@media (max-width: 768px) {
  .plan-row { grid-template-columns: auto 1fr auto 16px; gap: 6px; }
  .plan-row__pill { justify-self: end; }
}

/* ── สถานะรายบุคคล: ลิสต์แถวแน่น จัดกลุ่มตามสถานะ (Variant B) ── */
.prl-groups { display: flex; flex-direction: column; gap: 18px; }
.prl-group  { display: flex; flex-direction: column; gap: 8px; }

.prl-ghead { display: flex; align-items: center; gap: 10px; margin: 4px 0 2px; }
.prl-ghead__dot   { width: 9px; height: 9px; border-radius: 99px; flex: 0 0 auto; }
.prl-ghead__title { font-size: .95rem; font-weight: 700; color: #1f2333; }
.prl-ghead__count {
  font-size: .8rem; font-weight: 700; border-radius: 99px; padding: 1px 9px;
  font-variant-numeric: tabular-nums; border: 1px solid;
}
.prl-ghead__count.tone-red   { color: #dc2626; background: #fef3f3; border-color: #f9d2d2; }
.prl-ghead__count.tone-blue  { color: #4f46e5; background: #eef1fe; border-color: #d8def9; }
.prl-ghead__count.tone-green { color: #059669; background: #ecfdf5; border-color: #c2ecd7; }
.prl-ghead__sub  { font-size: .8rem; color: #9298ad; white-space: nowrap; }
.prl-ghead__line { flex: 1; height: 1px; background: #e9ebf2; margin-left: 4px; }

.prl-rows { display: flex; flex-direction: column; gap: 7px; }
.prl-row {
  border: 1px solid #e9ebf2; border-radius: 12px; background: #fff;
  overflow: hidden; transition: background .12s, border-color .12s;
}
.prl-row--problem   { border-left: 3px solid #ef4444; }
.prl-row--normal    { border-left: 3px solid #6366f1; }
.prl-row--excellent { border-left: 3px solid #10b981; }
.prl-row[data-href] { cursor: pointer; transition: background .15s, border-color .15s, transform .1s; }
.prl-row[data-href]:hover { background: #f9f9fc; border-color: #c7cce5; }
.prl-row[data-href]:hover .prl-row__chev { color: #4f46e5; transform: translateX(2px); }
.prl-row[data-href]:active { transform: scale(.995); }

.prl-row__main {
  display: grid; grid-template-columns: 240px 1fr 150px 64px 150px 26px;
  align-items: center; gap: 16px; padding: 10px 14px; cursor: pointer;
}
.prl-row__who  { display: flex; align-items: center; gap: 11px; min-width: 0; }
.prl-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: .82rem; border: 1.5px solid;
}
.prl-avatar--problem   { background: #fef3f3; color: #dc2626; border-color: #f9d2d2; }
.prl-avatar--normal    { background: #eef1fe; color: #4f46e5; border-color: #d8def9; }
.prl-avatar--excellent { background: #ecfdf5; color: #059669; border-color: #c2ecd7; }
.prl-row__id    { min-width: 0; }
.prl-row__name  { font-size: .9rem; font-weight: 600; color: #1f2333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prl-row__total { font-size: .7rem; color: #9298ad; }

.prl-row__seg { padding-right: 6px; }
.prl-segbar {
  display: flex; gap: 2px; width: 100%; height: 9px; border-radius: 99px;
  overflow: hidden; background: #f2f3f8;
}
.prl-segbar__seg--done    { background: #10b981; }
.prl-segbar__seg--pending { background: #d3d9ec; }
.prl-segbar__seg--late    { background: #f59e0b; }
.prl-segbar__seg--absent  { background: #ef4444; }

.prl-row__issues { min-height: 22px; display: flex; align-items: center; gap: 6px; }
.prl-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  border-radius: 99px; border: 1px solid; font-size: .72rem; font-weight: 600; white-space: nowrap;
}
.prl-chip--amber { background: #fffaeb; border-color: #fae5b0; color: #d97706; }
.prl-chip--red   { background: #fef3f3; border-color: #f9d2d2; color: #dc2626; }
.prl-clear { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 600; color: #059669; }
.prl-clear__dot { width: 7px; height: 7px; border-radius: 99px; background: #10b981; flex: 0 0 auto; }

.prl-row__pct { text-align: right; font-size: 1rem; font-weight: 700; color: #1f2333; font-variant-numeric: tabular-nums; }
.prl-row__pct span { font-size: .72rem; font-weight: 600; }
.prl-row__pct--muted { color: #9298ad; }

.prl-row__deduct { display: flex; justify-content: flex-end; }
.prl-deduct {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  border-radius: 99px; border: 1px solid; font-size: .72rem; font-weight: 600; white-space: nowrap;
}
.prl-deduct__dot { width: 6px; height: 6px; border-radius: 99px; flex: 0 0 auto; }
.prl-deduct--amber { background: #fffaeb; border-color: #fae5b0; color: #d97706; }
.prl-deduct--amber .prl-deduct__dot { background: #f59e0b; }
.prl-deduct--red   { background: #fef3f3; border-color: #f9d2d2; color: #dc2626; }
.prl-deduct--red .prl-deduct__dot { background: #ef4444; }

.prl-row__chev { display: flex; justify-content: center; color: #9298ad; transition: color .15s, transform .15s; }

@media (max-width: 1199px) {
  .prl-row__main { grid-template-columns: 200px 1fr 120px 56px 130px 24px; gap: 12px; }
}

/* Panel wrapper: สถานะรายบุคคล (ครอบ .prl-groups เดิมให้เป็นการ์ดขาวสไตล์เดียวกับ panel อื่น) */
.prl-panel {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  margin-bottom: 14px;
}
.prl-panel__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.prl-panel__title { display: flex; align-items: center; gap: 9px; font-size: 1rem; font-weight: 700; color: #1f2333; }
.prl-panel__icon {
  width: 32px; height: 32px; border-radius: 10px; background: #eef1fe; color: #4f46e5;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.prl-panel__hint { font-size: .78rem; color: #9298ad; }

.pen-deduct {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px;
  border: 1px solid; font-size: .72rem; font-weight: 600; white-space: nowrap;
}
.pen-deduct__dot { width: 6px; height: 6px; border-radius: 99px; flex: 0 0 auto; }
.pen-deduct--red   { background: #fef3f3; border-color: #f9d2d2; color: #dc2626; }
.pen-deduct--red .pen-deduct__dot { background: #ef4444; }
.pen-deduct--amber { background: #fffaeb; border-color: #fae5b0; color: #d97706; }
.pen-deduct--amber .pen-deduct__dot { background: #f59e0b; }
.pen-deduct--green { background: #ecfdf5; border-color: #c2ecd7; color: #059669; }
.pen-deduct--green .pen-deduct__dot { background: #10b981; }

/* รวมตาราง "ค่าปรับ & งานช้า/ขาด" เข้า "สถานะรายบุคคล": ยอดรวม/เดือน บนหัวพาเนล + mini-list ในแถวกาง */
.prl-panel__totalpen {
  display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700;
  color: #dc2626; background: #fef3f3; border: 1px solid #f9d2d2; border-radius: 99px; padding: 5px 12px;
  white-space: nowrap;
}


/* ── งานยกเว้น (excused) — โทนเทา: งานยังแสดงอยู่ แต่ไม่ต้องทำ/ไม่คิดค่าปรับ ── */
.task-card--excused { border-left-color: #94a3b8; opacity: .85; }
.task-card__excuse {
  margin-top: 4px;
  font-size: .78rem;
  color: #475569;
  background: #f1f5f9;
  border-radius: 6px;
  padding: 3px 8px;
  display: inline-block;
}
.status-icon--excused { background: #e2e8f0; color: #475569; border-color: #cbd5e1; }
.tl-dot--excused { background: #94a3b8; }
.mm-pill--excused { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.mm-cell--excused { background: #e2e8f0; color: #475569; border-color: #94a3b8; }
.mm-dot--excused { background: #e2e8f0; color: #475569; }
.mm-modal-item--excused { border-left-color: #94a3b8; }
.mm-status-label--excused { background: #e2e8f0; color: #334155; }
.deadline-summary--excused { border-left-color: #94a3b8; background: #f1f5f9; }
.deadline-summary--excused .deadline-summary__state { color: #334155; }
.excuse-box {
  border: 1px solid #cbd5e1;
  border-left: 4px solid #94a3b8;
  background: #f8fafc;
  border-radius: 10px;
  padding: 12px 14px;
}

/* ── บันทึกย้อนหลัง (backdated) — ทำแล้วแต่บันทึกช้า manager อนุมัติ ไม่หักเงิน ── */
.status-icon--backdated { background: #e0e7ff; color: #4338ca; border-color: #a5b4fc; }
.task-card--backdated { border-left-color: #6366f1; }
.mm-modal-item--backdated { border-left-color: #6366f1; }
.mm-status-label--backdated { background: #e0e7ff; color: #3730a3; }
.s-backdated { background: #e0e7ff; color: #3730a3; }

/* ── Lightbox เต็มจอ + ซูม (layout/footer.php) ── */
.lb-content { background: rgba(10,10,12,.96); border: none; border-radius: 0; }
.lb-stage {
  position: absolute; inset: 56px 0 28px 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; touch-action: none; user-select: none;
}
.lb-stage img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  transform-origin: center center; transition: transform .06s linear;
  will-change: transform; cursor: zoom-in;
}
.lb-topbar {
  position: absolute; top: 0; left: 0; right: 0; height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px; color: #fff; z-index: 11;
  background: linear-gradient(rgba(0,0,0,.55), transparent);
}
.lb-tools { display: flex; align-items: center; gap: 6px; }
.lb-tool {
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.16); color: #fff; font-size: 1.05rem;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.lb-tool:hover { background: rgba(255,255,255,.32); color: #fff; }
.lb-zoom-label { min-width: 48px; text-align: center; font-size: .85rem; opacity: .85; }
.lb-hint {
  position: absolute; bottom: 6px; left: 0; right: 0; text-align: center;
  color: rgba(255,255,255,.55); font-size: .75rem; pointer-events: none;
}
@media (max-width: 575px) {
  .lb-zoom-label { display: none; }
  .lb-tool { width: 36px; height: 36px; }
}