/* ============================================
   Prototype Base Design System
   Template สำหรับสร้าง Prototype ใหม่
   
   วิธีใช้: 
   1. Copy ทั้งโฟลเดอร์ prototype-base/ ไปยังโปรเจคใหม่
   2. แก้ไข Design Tokens (:root) ตามธีมของโปรเจค
   3. แก้ไข Font (Google Fonts import) ตามต้องการ
   
   ธีมตัวอย่าง:
   - 🟢 Emerald Green (ฟาร์ม/เกษตร)
   - 🔵 Blue (ธุรกิจ/ทั่วไป)
   - 🟠 Orange (ร้านอาหาร/Retail)
   - 🟣 Purple (สุขภาพ/การศึกษา)
   ============================================ */

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

/* --- Design Tokens (แก้ไขส่วนนี้ตามธีมโปรเจค) --- */
:root {
  /* Primary Color — เปลี่ยนตามธีม */
  --primary-50: #E3F6FE;
  --primary-100: #BDE9FC;
  --primary-200: #90DAFB;
  --primary-300: #5FCBFA;
  --primary-400: #33BEF8;
  --primary-500: #04A9F5;
  --primary-600: #039BE5;
  --primary-700: #0288D1;
  --primary-800: #0277BD;
  --primary-900: #01579B;
  --primary: #04A9F5;

  /* Accent Color — สีเสริม */
  --accent-50: #FFFBEB;
  --accent-100: #FEF3C7;
  --accent-200: #FDE68A;
  --accent-300: #FCD34D;
  --accent-400: #FBBF24;
  --accent-500: #F59E0B;
  --accent-600: #D97706;
  --accent-700: #B45309;

  /* Status Colors — ไม่ต้องเปลี่ยน */
  --success-50: #ECFDF5; --success-500: #10B981; --success-600: #059669;
  --danger-50: #FEF2F2; --danger-500: #EF4444; --danger-600: #DC2626;
  --warning-50: #FFFBEB; --warning-500: #F59E0B; --warning-600: #D97706;
  --info-50: #EFF6FF; --info-500: #3B82F6; --info-600: #2563EB;

  /* Neutrals — ไม่ต้องเปลี่ยน */
  --gray-50: #F9FAFB; --gray-100: #F3F4F6; --gray-200: #E5E7EB;
  --gray-300: #D1D5DB; --gray-400: #9CA3AF; --gray-500: #6B7280;
  --gray-600: #4B5563; --gray-700: #374151; --gray-800: #1F2937;
  --gray-900: #111827;

  /* Layout — ปรับได้ตามต้องการ */
  --sidebar-width: 260px;
  --header-height: 64px;
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 18px;
  --shadow-sm: 0 1px 3px rgba(43,48,64,0.04);
  --shadow-md: 0 2px 14px rgba(43,48,64,0.07);
  --shadow-lg: 0 8px 24px rgba(43,48,64,0.10);
  --shadow-xl: 0 18px 40px rgba(43,48,64,0.12);
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'IBM Plex Sans Thai', -apple-system, sans-serif;
  color: var(--gray-800); background: var(--gray-50);
  line-height: 1.6; -webkit-font-smoothing: antialiased;
  font-size: 0.9375rem;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; border: none; }
input, select, textarea { font-family: inherit; }

/* --- Typography --- */
h1 { font-size: 1.875rem; font-weight: 700; }
h2 { font-size: 1.5rem; font-weight: 600; }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1.125rem; font-weight: 600; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-lg { font-size: 1.125rem; }
.text-muted { color: var(--gray-500); }
.text-primary { color: var(--primary-600); }
.text-success { color: var(--success-600); }
.text-danger { color: var(--danger-600); }
.text-warning { color: var(--warning-600); }
.font-medium { font-weight: 500; }
.font-bold { font-weight: 700; }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: var(--radius-md);
  font-size: 0.875rem; font-weight: 600;
  transition: all var(--transition-fast); border: none; outline: none;
}
.btn-primary {
  background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
  color: #fff; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4); transform: translateY(-1px);
}
.btn-accent {
  background: linear-gradient(135deg, var(--accent-500), var(--accent-600));
  color: #fff; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}
.btn-accent:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4); }
.btn-success { background: linear-gradient(135deg, var(--success-500), var(--success-600)); color: #fff; }
.btn-danger { background: linear-gradient(135deg, var(--danger-500), var(--danger-600)); color: #fff; }
.btn-outline { background: #fff; border: 1.5px solid var(--gray-300); color: var(--gray-700); }
.btn-outline:hover { border-color: var(--primary-400); color: var(--primary-600); background: var(--primary-50); }
.btn-sm { padding: 6px 14px; font-size: 0.8125rem; }
.btn-lg { padding: 14px 28px; font-size: 1rem; }
.btn-icon { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: var(--radius-sm); }
.btn-ghost { background: none; color: var(--gray-600); padding: 6px 12px; }
.btn-ghost:hover { background: var(--gray-100); color: var(--gray-800); }

/* --- Cards --- */
.card {
  background: #fff; border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base);
}
.card:hover { box-shadow: var(--shadow-md); }
.card-body { padding: 24px; }
.card-header {
  padding: 20px 24px; border-bottom: 1px solid var(--gray-100);
  display: flex; align-items: center; justify-content: space-between;
}
.card-header h3 { font-size: 1rem; }

/* --- Stat Cards --- */
.stat-card {
  background: #fff; border-radius: var(--radius-lg); padding: 20px;
  border: 1px solid var(--gray-200); position: relative; overflow: hidden;
  transition: all var(--transition-base);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.stat-card .stat-icon {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
}
.stat-card .stat-value { font-size: 1.75rem; font-weight: 700; margin: 6px 0 2px; line-height: 1.2; }
.stat-card .stat-label { font-size: 0.875rem; color: var(--gray-500); }
.stat-card .stat-change { font-size: 0.75rem; font-weight: 600; }
.stat-card .stat-change.up { color: var(--success-600); }
.stat-card .stat-change.down { color: var(--danger-600); }
.stat-card::after {
  content: ''; position: absolute; top: 0; right: 0;
  width: 100px; height: 100px; border-radius: 50%;
  opacity: 0.06; transform: translate(30%, -30%);
}

/* --- Forms --- */
.form-group { margin-bottom: 20px; }
.form-label {
  display: block; font-size: 0.875rem; font-weight: 600;
  color: var(--gray-700); margin-bottom: 6px;
}
.form-input, .form-select {
  width: 100%; padding: 10px 14px;
  border: 1.5px solid var(--gray-300); border-radius: var(--radius-md);
  font-size: 0.9375rem; color: var(--gray-800); background: #fff;
  transition: all var(--transition-fast);
}
.form-input:focus, .form-select:focus {
  outline: none; border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.form-input::placeholder { color: var(--gray-400); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.form-hint { font-size: 0.75rem; color: var(--gray-400); margin-top: 4px; }

/* --- Tables --- */
.table-wrapper {
  overflow-x: auto; border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200); background: #fff;
}
table { width: 100%; border-collapse: collapse; }
thead { background: var(--gray-50); }
th {
  padding: 12px 16px; text-align: left; font-size: 0.8125rem;
  font-weight: 600; color: var(--gray-600); text-transform: uppercase;
  letter-spacing: 0.05em; border-bottom: 1px solid var(--gray-200);
}
td {
  padding: 14px 16px; font-size: 0.875rem;
  border-bottom: 1px solid var(--gray-100); color: var(--gray-700);
}
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--primary-50); }

/* --- Badges --- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600;
}
.badge-success { background: var(--success-50); color: var(--success-600); }
.badge-warning { background: var(--warning-50); color: var(--accent-700); }
.badge-danger { background: var(--danger-50); color: var(--danger-600); }
.badge-primary { background: var(--primary-50); color: var(--primary-700); }
.badge-info { background: var(--info-50); color: var(--info-600); }
.badge-gray { background: var(--gray-100); color: var(--gray-600); }

/* --- Alert Banners --- */
.alert {
  padding: 14px 18px; border-radius: var(--radius-md);
  font-size: 0.875rem; font-weight: 500; display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.alert-success { background: var(--success-50); color: var(--success-600); border: 1px solid #A7F3D0; }
.alert-warning { background: var(--warning-50); color: var(--accent-700); border: 1px solid #FDE68A; }
.alert-danger { background: var(--danger-50); color: var(--danger-600); border: 1px solid #FECACA; }
.alert-info { background: var(--info-50); color: var(--info-600); border: 1px solid #BFDBFE; }

/* --- Layout: Sidebar --- */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-width); background: #fff;
  border-right: 1px solid var(--gray-200);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 40;
  transition: transform var(--transition-base);
}
.sidebar-brand {
  padding: 16px 20px; border-bottom: 1px solid var(--gray-100);
  display: flex; align-items: center; gap: 12px;
}
.sidebar-brand .brand-logo {
  width: 42px; height: 42px;
  background: linear-gradient(135deg, var(--primary-600), var(--primary-400));
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.375rem;
}
.sidebar-brand .brand-name { font-size: 1rem; font-weight: 700; color: var(--gray-900); }
.sidebar-brand .brand-sub { font-size: 0.6875rem; color: var(--gray-400); }

.sidebar-nav { flex: 1; padding: 16px 12px; overflow-y: auto; }
.nav-group { margin-bottom: 20px; }
.nav-group-title {
  padding: 0 12px; margin-bottom: 6px; font-size: 0.6875rem;
  font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.08em;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-md);
  font-size: 0.875rem; font-weight: 500; color: var(--gray-600);
  transition: all var(--transition-fast);
}
.nav-item:hover { background: var(--primary-50); color: var(--primary-700); }
.nav-item.active {
  background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
  color: #fff; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}
.nav-item .nav-icon { width: 20px; text-align: center; font-size: 1rem; }
.nav-item .nav-badge {
  margin-left: auto; background: var(--danger-500); color: #fff;
  font-size: 0.6875rem; padding: 2px 7px; border-radius: 999px; font-weight: 700;
}

/* Main Content */
.main-content { flex: 1; margin-left: var(--sidebar-width); min-height: 100vh; }
.header {
  height: var(--header-height); background: #fff;
  border-bottom: 1px solid var(--gray-200);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; position: sticky; top: 0; z-index: 30;
}
.header-title h2 { font-size: 1.25rem; color: var(--gray-900); display: flex; align-items: center; gap: 8px; }
.header-title .header-date { font-size: 0.8125rem; color: var(--gray-400); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.page-content { padding: 24px; }

/* --- Quick Action Grid --- */
.quick-actions {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px;
}
.quick-action {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 12px; border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200); background: #fff;
  cursor: pointer; transition: all var(--transition-fast);
  text-align: center; font-size: 0.8125rem; font-weight: 500; color: var(--gray-700);
}
.quick-action:hover {
  border-color: var(--primary-400); background: var(--primary-50);
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.quick-action .qa-icon { font-size: 1.75rem; }

/* --- Progress Bar --- */
.progress-bar {
  height: 8px; background: var(--gray-200); border-radius: 999px; overflow: hidden;
}
.progress-bar .progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--primary-500), var(--primary-400));
  transition: width var(--transition-slow);
}
.progress-bar .progress-fill.warning { background: linear-gradient(90deg, var(--accent-500), var(--accent-400)); }
.progress-bar .progress-fill.danger { background: linear-gradient(90deg, var(--danger-500), var(--danger-600)); }

/* --- Timeline --- */
.timeline { position: relative; padding-left: 28px; }
.timeline::before {
  content: ''; position: absolute; left: 10px; top: 0; bottom: 0;
  width: 2px; background: var(--gray-200);
}
.timeline-item { position: relative; padding-bottom: 20px; }
.timeline-item::before {
  content: ''; position: absolute; left: -22px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--primary-500); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--primary-200);
}

/* --- Utilities --- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.grid { display: grid; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }
.p-4 { padding: 16px; } .p-6 { padding: 24px; }
.w-full { width: 100%; }
.text-center { text-align: center; } .text-right { text-align: right; }
.hidden { display: none; }

/* Hamburger */
.hamburger {
  display: none; background: none; border: none;
  font-size: 1.5rem; padding: 4px; cursor: pointer; color: var(--gray-700);
}

/* Sidebar overlay */
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.4); z-index: 39;
}
.sidebar-overlay.show { display: block; }

/* --- Dark Mode Toggle --- */
.dark-toggle {
  width: 100%; padding: 10px; border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm); background: var(--gray-50);
  cursor: pointer; font-size: 0.8125rem; display: flex; align-items: center;
  justify-content: center; gap: 6px; transition: all 0.2s;
}

/* --- Responsive --- */
/* Tablet / iPad — off-canvas sidebar (เน้นใช้หน้างาน) + KPI 2 คอลัมน์ */
@media (max-width: 1024px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); z-index: 100; }
  .main-content { margin-left: 0; }
  .hamburger { display: block; }
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); z-index: 100; }
  .main-content { margin-left: 0; }
  .hamburger { display: block; }
  html, body { overflow-x: hidden; max-width: 100vw; }
  .header { padding: 0 12px; }
  .header-title h2 { font-size: 1rem; }
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .grid-3 { grid-template-columns: 1fr !important; }
  .grid-2 { grid-template-columns: 1fr !important; }
  .page-content { padding: 12px; }
  .card-body { padding: 16px; }
  .stat-card { padding: 14px; }
  .stat-card .stat-value { font-size: 1.25rem; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .search-input { width: 100% !important; }
  .form-row { grid-template-columns: 1fr !important; }
  .quick-actions { grid-template-columns: repeat(2, 1fr); }
  table { min-width: 600px; }
}
@media (max-width: 480px) {
  .grid-4 { grid-template-columns: 1fr !important; }
  .header-title h2 { font-size: 0.9rem; }
  .stat-card .stat-value { font-size: 1.125rem; }
  .page-content { padding: 10px; }
}

/* --- Animations --- */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
.animate-fadeIn { animation: fadeIn 0.4s ease-out; }
.animate-slideUp { animation: slideUp 0.5s ease-out; }

/* === Dark Mode === */
html.dark-mode {
  --bg: #111827; --bg-card: #1F2937; --bg-hover: #374151;
  --text: #F9FAFB; --text-muted: #9CA3AF;
  --gray-50: #1F2937; --gray-100: #374151; --gray-200: #4B5563;
  --gray-300: #6B7280; --gray-400: #9CA3AF; --gray-500: #D1D5DB;
  --gray-600: #E5E7EB; --gray-700: #F3F4F6; --gray-800: #F9FAFB;
}
html.dark-mode body { background: var(--bg); color: var(--text); }
html.dark-mode .sidebar { background: #0F172A; border-color: #1E293B; }
html.dark-mode .sidebar .nav-item { color: #94A3B8; }
html.dark-mode .sidebar .nav-item:hover,
html.dark-mode .sidebar .nav-item.active { background: #1E293B; color: #F1F5F9; }
html.dark-mode .sidebar .nav-item.active { background: linear-gradient(135deg, var(--primary-600), var(--primary-500)); color: #fff; }
html.dark-mode .main-content { background: #111827; }
html.dark-mode .header { background: #1F2937; border-color: #374151; }
html.dark-mode .header h2 { color: #F1F5F9; }
html.dark-mode .card, html.dark-mode .stat-card { background: #1F2937; border-color: #374151; color: #F1F5F9; }
html.dark-mode table { background: #1F2937; }
html.dark-mode table thead { background: #111827; }
html.dark-mode table th { color: #9CA3AF; border-color: #374151; }
html.dark-mode table td { color: #E5E7EB; border-color: #374151; }
html.dark-mode tbody tr:hover td { background: #374151; }
html.dark-mode .form-input, html.dark-mode .form-select, html.dark-mode select, html.dark-mode textarea {
  background: #374151; border-color: #4B5563; color: #F1F5F9;
}
html.dark-mode .btn-outline { border-color: #4B5563; color: #D1D5DB; }
html.dark-mode .quick-action { background: #1F2937; border-color: #374151; color: #E5E7EB; }
html.dark-mode .quick-action:hover { background: #374151; border-color: var(--primary-400); }

/* Print */
@media print {
  .sidebar, .sidebar-overlay, .header, .hamburger, .dark-toggle { display: none !important; }
  .layout { display: block !important; }
  .main-content { margin: 0 !important; }
  .page-content { padding: 0 !important; }
}

/* ============================================================
   AdminDek-style Premium Theme (light)
   ============================================================ */
:root{ --ink:#2b3040; --soft:#5b6b79; }
html:not(.dark-mode) body{ background:#f4f7fa; color:var(--ink); }

/* Cards — soft, borderless, rounded */
html:not(.dark-mode) .card{ border:none; box-shadow:var(--shadow-md); border-radius:var(--radius-lg); }
html:not(.dark-mode) .card:hover{ box-shadow:var(--shadow-lg); }
html:not(.dark-mode) .card-header{ border-bottom:1px solid #eef1f6; }
html:not(.dark-mode) .table-wrapper{ border:none; box-shadow:var(--shadow-md); }
html:not(.dark-mode) .acct{ border:none; box-shadow:var(--shadow-sm); }

/* Header — white with soft shadow */
html:not(.dark-mode) .header{ border-bottom:none; box-shadow:0 1px 10px rgba(43,48,64,.05); }
html:not(.dark-mode) .header-title h2{ color:var(--ink); font-weight:600; }

/* Tables — airy */
html:not(.dark-mode) thead{ background:#fbfcfe; }
html:not(.dark-mode) th{ color:#8a96a3; border-bottom:1px solid #eef1f6; }
html:not(.dark-mode) td{ border-bottom:1px solid #f2f4f8; color:#48515f; }
html:not(.dark-mode) tbody tr:hover td{ background:#f6fbff; }

/* === Sidebar — dark slate navy (AdminDek) === */
.sidebar{ background:#1d2635 !important; border-right:none !important; box-shadow:1px 0 18px rgba(0,0,0,.14); }
.sidebar-brand{ border-bottom:1px solid rgba(255,255,255,.07) !important; }
.sidebar-brand .brand-logo{ background:linear-gradient(135deg,#4680ff,#33BEF8) !important; box-shadow:0 4px 14px rgba(70,128,255,.45); }
.sidebar-brand .brand-name{ color:#fff !important; }
.sidebar-brand .brand-sub{ color:#7c8aa0 !important; }
.sidebar .nav-group-title{ color:#5d6b80 !important; letter-spacing:.09em; }
.sidebar .nav-item{ color:#9aa7b8 !important; font-weight:500; border-radius:8px; }
.sidebar .nav-item:hover{ background:rgba(255,255,255,.05) !important; color:#fff !important; }
.sidebar .nav-item.active{ background:rgba(70,128,255,.14) !important; color:#5b9dff !important; font-weight:600; box-shadow:none !important; position:relative; }
.sidebar .nav-item.active::before{ content:''; position:absolute; left:-12px; top:7px; bottom:7px; width:4px; border-radius:0 4px 4px 0; background:#4680ff; }
.sidebar .nav-item .nav-icon{ filter:none; }
.sidebar .dark-toggle{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.12) !important; color:#9aa7b8 !important; }

/* === KPI stat-cards — solid color blocks, white text (AdminDek) === */
.grid-4 > .stat-card{ position:relative; overflow:hidden; border:none !important; color:#fff; }
.grid-4 > .stat-card::before{ display:none; }
.grid-4 > .stat-card .stat-value{ color:#fff !important; font-weight:700; font-size:2rem; }
.grid-4 > .stat-card .stat-label{ color:rgba(255,255,255,.88) !important; }
.grid-4 > .stat-card .stat-change,
.grid-4 > .stat-card .stat-change.up,
.grid-4 > .stat-card .stat-change.down{ color:rgba(255,255,255,.92) !important; }
.grid-4 > .stat-card:nth-child(4n+1){ background:linear-gradient(135deg,#4680ff,#6a8df5) !important; box-shadow:0 8px 22px rgba(70,128,255,.30); }
.grid-4 > .stat-card:nth-child(4n+2){ background:linear-gradient(135deg,#2dce98,#27b48a) !important; box-shadow:0 8px 22px rgba(45,206,152,.30); }
.grid-4 > .stat-card:nth-child(4n+3){ background:linear-gradient(135deg,#f5a623,#ef8e09) !important; box-shadow:0 8px 22px rgba(245,166,35,.30); }
.grid-4 > .stat-card:nth-child(4n+4){ background:linear-gradient(135deg,#42a5f5,#56b9ec) !important; box-shadow:0 8px 22px rgba(66,165,245,.30); }
.grid-4 > .stat-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.18); }
/* soft decorative circle like AdminDek */
.grid-4 > .stat-card::after{ content:''; position:absolute; right:-26px; bottom:-26px; width:110px; height:110px; border-radius:50%; background:rgba(255,255,255,.12); }

/* Buttons — sky gradient already via tokens; soften outline */
html:not(.dark-mode) .btn-outline{ border-color:#e3e8ef; color:#5b6b79; }
html:not(.dark-mode) .btn-outline:hover{ background:var(--primary-50); border-color:var(--primary-300); color:var(--primary-700); }

/* Quick actions */
html:not(.dark-mode) .quick-action{ border:1px solid #eef1f6; box-shadow:var(--shadow-sm); }

/* ============================================================
   Phase indicators — บอกว่าแต่ละเมนู/หน้า อยู่เฟสไหน
   เฟส 1 = ฟ้า · เฟส 2 = เขียว · เฟส 3 = ม่วง
   ============================================================ */
/* จุดสีท้ายเมนู (sidebar เป็นพื้นกรมท่าเข้ม → ใช้สีสด) */
.sidebar .nav-item .ph-dot{
  width:9px; height:9px; border-radius:50%; margin-left:auto; flex-shrink:0;
  box-shadow:0 0 0 2px rgba(255,255,255,.06);
}
.sidebar .nav-item .nav-badge + .ph-dot{ margin-left:8px; }
.ph-dot.ph1{ background:#4F9CFF; } .ph-dot.ph2{ background:#2DCE98; } .ph-dot.ph3{ background:#B68CFF; }

/* กล่องคำอธิบายสี (legend) ท้าย sidebar */
.nav-legend{
  margin:8px 4px 2px; padding:11px 12px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:10px;
}
.nav-legend-title{
  font-size:.625rem; font-weight:700; color:#6b7a90; text-transform:uppercase;
  letter-spacing:.08em; margin-bottom:8px;
}
.nav-legend-row{ display:flex; align-items:center; gap:9px; font-size:.72rem; color:#9aa7b8; padding:3px 0; }
.nav-legend-row .ph-swatch{ width:11px; height:11px; border-radius:3px; flex-shrink:0; }
.ph-swatch.ph1{ background:#4F9CFF; } .ph-swatch.ph2{ background:#2DCE98; } .ph-swatch.ph3{ background:#B68CFF; }

/* แถบบอกเฟสบนหัวแต่ละหน้า */
.header-title{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.phase-ribbon{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-size:.72rem; font-weight:700; line-height:1.7; padding:3px 11px; border-radius:999px;
}
.phase-ribbon .pr-dot{ width:8px; height:8px; border-radius:50%; background:currentColor; }
.phase-ribbon .pr-name{ font-weight:500; opacity:.85; }
.phase-ribbon.ph1{ background:#EAF2FF; color:#2563EB; }
.phase-ribbon.ph2{ background:#E7FAF0; color:#15A06B; }
.phase-ribbon.ph3{ background:#F3ECFF; color:#7C3AED; }
@media (max-width:640px){ .phase-ribbon .pr-name{ display:none; } }

/* dark mode: หัวหน้าเป็นสีเข้ม → ใช้พื้นโปร่งแสง */
html.dark-mode .phase-ribbon.ph1{ background:rgba(79,156,255,.16); color:#7FB4FF; }
html.dark-mode .phase-ribbon.ph2{ background:rgba(45,206,152,.16); color:#5FE0B0; }
html.dark-mode .phase-ribbon.ph3{ background:rgba(182,140,255,.18); color:#C7A8FF; }

/* ============================================================
   🆕 จุดสีที่ 4 — "งานเพิ่มเติม" (ข้อมูลลูกค้าใหม่ 15/7/69 / 260715)
   ส้มอำพัน — แยกชัดจาก เฟส1 ฟ้า / เฟส2 เขียว / เฟส3 ม่วง
   ============================================================ */
.ph-dot.ph4{ background:#FF8A3D; }
.ph-swatch.ph4{ background:#FF8A3D; }
.phase-ribbon.ph4{ background:#FFF1E6; color:#C2410C; }
html.dark-mode .phase-ribbon.ph4{ background:rgba(255,138,61,.18); color:#FDBA74; }

/* ป้าย "งานเพิ่มเติม" ใช้ในเนื้อหาหน้า */
.tag-new{ display:inline-flex; align-items:center; gap:5px; font-size:.68rem; font-weight:700;
  padding:2px 9px; border-radius:999px; background:#FFF1E6; color:#C2410C; border:1px solid #FFD8B8; }
html.dark-mode .tag-new{ background:rgba(255,138,61,.18); color:#FDBA74; border-color:rgba(255,138,61,.35); }

/* ═══ DEMO MODAL — ตัวอย่างหน้าจอสำหรับทุกปุ่มใน prototype ═══ */
.demo-overlay{ position:fixed; inset:0; z-index:10000; background:rgba(15,23,42,.55);
  backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; padding:24px; }
.demo-modal{ background:var(--white,#fff); border-radius:var(--radius-lg,14px); width:100%; max-width:680px;
  max-height:88vh; display:flex; flex-direction:column; box-shadow:0 24px 70px rgba(0,0,0,.32);
  animation:demoIn .18s ease-out; }
.demo-modal.wide{ max-width:1020px; }
@keyframes demoIn{ from{ opacity:0; transform:translateY(14px) scale(.98);} to{ opacity:1; transform:none;} }
.demo-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:18px 22px; border-bottom:1px solid var(--gray-200,#eef1f6); }
.demo-title{ font-size:1.05rem; font-weight:700; color:var(--gray-800,#1f2937); }
.demo-sub{ font-size:.8rem; color:var(--gray-500,#8a96a3); margin-top:3px; }
.demo-x{ background:none; border:none; font-size:1.05rem; cursor:pointer; color:var(--gray-500,#8a96a3);
  padding:4px 8px; border-radius:8px; line-height:1; }
.demo-x:hover{ background:var(--gray-100,#f3f4f6); color:var(--gray-800,#1f2937); }
.demo-body{ padding:20px 22px; overflow:auto; flex:1; }
.demo-body table{ font-size:.84rem; }
.demo-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:14px 22px; border-top:1px solid var(--gray-200,#eef1f6); background:var(--gray-50,#f9fafb);
  border-radius:0 0 var(--radius-lg,14px) var(--radius-lg,14px); }
.demo-note{ font-size:.74rem; color:var(--gray-500,#8a96a3); }
.demo-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.demo-drop{ display:block; border:2px dashed var(--gray-300,#d1d5db); border-radius:12px; padding:26px 18px;
  text-align:center; cursor:pointer; transition:.15s; background:var(--gray-50,#f9fafb); }
.demo-drop:hover{ border-color:#04A9F5; background:#f6fbff; }
.demo-drop .dz-ic{ font-size:1.9rem; }
.demo-drop .dz-t{ font-weight:600; margin-top:6px; color:var(--gray-700,#374151); }
.demo-drop .dz-s{ font-size:.76rem; color:var(--gray-500,#8a96a3); margin-top:3px; }
.dz-list{ margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.dz-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.8rem;
  background:#fff; border:1px solid var(--gray-200,#eef1f6); border-radius:8px; padding:7px 10px; text-align:left; }

.demo-kv{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; margin-bottom:16px; }
.demo-kv > div{ background:var(--gray-50,#f9fafb); border:1px solid var(--gray-200,#eef1f6);
  border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:2px; }
.demo-kv span{ font-size:.74rem; color:var(--gray-500,#8a96a3); }
.demo-kv b{ font-size:.95rem; color:var(--gray-800,#1f2937); }

.demo-steps{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.demo-steps .st{ display:flex; align-items:center; gap:7px; font-size:.8rem; font-weight:600;
  padding:7px 13px; border-radius:999px; background:var(--gray-100,#f3f4f6); color:var(--gray-500,#8a96a3); }
.demo-steps .st .n{ width:20px; height:20px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:.7rem; background:var(--gray-300,#d1d5db); color:#fff; }
.demo-steps .st.now{ background:#E3F6FE; color:#0277BD; } .demo-steps .st.now .n{ background:#04A9F5; }
.demo-steps .st.done{ background:#E7F7F0; color:#1aa37a; } .demo-steps .st.done .n{ background:#1aa37a; }

@media (max-width:640px){
  .demo-overlay{ padding:0; align-items:flex-end; }
  .demo-modal, .demo-modal.wide{ max-width:100%; max-height:94vh; border-radius:16px 16px 0 0; }
  .demo-foot{ border-radius:0; }
}
html.dark-mode .demo-modal{ background:#1e293b; }
html.dark-mode .demo-title, html.dark-mode .demo-kv b{ color:#e2e8f0; }
html.dark-mode .demo-foot, html.dark-mode .demo-drop, html.dark-mode .demo-kv > div{ background:#0f172a; }
html.dark-mode .dz-row{ background:#1e293b; }

/* ============================================================
   🧩 เฟส 5 — "ระบบพื้นฐาน" (Core System)
   ผู้ใช้ · สิทธิ์ · หมวดหมู่ · ตั้งค่า · ความปลอดภัย
   สีชมพูกุหลาบ — แยกชัดจาก เฟส1 ฟ้า / เฟส2 เขียว / เฟส3 ม่วง / เฟส4 ส้ม
   ============================================================ */
.ph-dot.ph5{ background:#F472B6; }
.ph-swatch.ph5{ background:#F472B6; }
.phase-ribbon.ph5{ background:#FCE7F3; color:#BE185D; }
html.dark-mode .phase-ribbon.ph5{ background:rgba(244,114,182,.18); color:#F9A8D4; }

/* ป้าย "ระบบพื้นฐาน" ใช้ในเนื้อหาหน้า */
.tag-core{ display:inline-flex; align-items:center; gap:5px; font-size:.68rem; font-weight:700;
  padding:2px 9px; border-radius:999px; background:#FCE7F3; color:#BE185D; border:1px solid #FBCFE8; }
html.dark-mode .tag-core{ background:rgba(244,114,182,.18); color:#F9A8D4; border-color:rgba(244,114,182,.35); }

/* แถบแนะนำโมดูลระบบพื้นฐาน (คล้าย .newbar ของเฟส 4) */
.corebar{ display:flex; align-items:center; gap:10px; background:linear-gradient(90deg,#FDF2F8,#FFFDFE);
  border:1px solid #FBCFE8; border-left:4px solid #F472B6; border-radius:12px; padding:12px 16px; margin-bottom:18px; }
.corebar .ic{ font-size:1.3rem; } .corebar b{ color:#BE185D; }
html.dark-mode .corebar{ background:rgba(244,114,182,.10); border-color:rgba(244,114,182,.35); }

/* ============================================================
   🧩 COMPONENT ร่วม — ใช้ซ้ำได้ทุกหน้า (แท็บ / สวิตช์ / แถวตั้งค่า / เมทริกซ์สิทธิ์)
   ============================================================ */

/* ── แท็บ ── */
.tabs{ display:flex; gap:4px; flex-wrap:wrap; border-bottom:2px solid var(--gray-200); margin-bottom:20px; }
.tabs .tab{ padding:9px 16px; border:none; background:none; font-family:inherit; font-size:.875rem;
  font-weight:600; color:var(--gray-500); cursor:pointer; border-bottom:2px solid transparent;
  margin-bottom:-2px; border-radius:8px 8px 0 0; transition:.15s; white-space:nowrap; }
.tabs .tab:hover{ color:var(--primary-600); background:var(--primary-50); }
.tabs .tab.active{ color:var(--primary-700); border-bottom-color:var(--primary-500); background:var(--primary-50); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation:fadeIn .25s ease; }
html.dark-mode .tabs{ border-bottom-color:#374151; }
html.dark-mode .tabs .tab{ color:#9CA3AF; }
html.dark-mode .tabs .tab:hover, html.dark-mode .tabs .tab.active{ background:#1E293B; color:#7FB4FF; }

/* ── สวิตช์ เปิด/ปิด ── */
.switch{ position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; }
.switch .sl{ position:absolute; inset:0; background:var(--gray-300); border-radius:999px; transition:.2s; cursor:pointer; }
.switch .sl::before{ content:''; position:absolute; height:18px; width:18px; left:3px; top:3px;
  background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.switch input:checked + .sl{ background:var(--primary-500); }
.switch input:checked + .sl::before{ transform:translateX(18px); }
html.dark-mode .switch .sl{ background:#4B5563; }

/* ── แถวรายการตั้งค่า (ชื่อ + คำอธิบาย + ตัวควบคุมด้านขวา) ── */
.set-row{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 0; border-bottom:1px solid var(--gray-100); }
.set-row:last-child{ border-bottom:none; }
.set-row .st{ font-weight:600; font-size:.9rem; }
.set-row .sd{ font-size:.78rem; color:var(--gray-500); margin-top:3px; max-width:660px; line-height:1.55; }
.set-row .sc{ flex-shrink:0; display:flex; align-items:center; gap:8px; }
html.dark-mode .set-row{ border-bottom-color:#374151; }
@media(max-width:640px){ .set-row{ flex-direction:column; align-items:flex-start; } }

/* ── แถบค้นหา/กรอง (ใช้ซ้ำจากหน้า Master Data) ── */
.filter-bar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.search-input{ flex:1; min-width:200px; padding:10px 14px; border:1.5px solid var(--gray-300);
  border-radius:var(--radius-md); font-size:.9rem; font-family:inherit; }
.search-input:focus{ outline:none; border-color:var(--primary-500); box-shadow:0 0 0 3px rgba(4,169,245,.12); }
html.dark-mode .search-input{ background:#111827; border-color:#4B5563; color:#E5E7EB; }

/* ── อวาตาร์ + เซลล์ผู้ใช้ในตาราง ── */
.uav{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.76rem; color:#fff; flex-shrink:0; }
.uav.lg{ width:76px; height:76px; font-size:1.5rem; }
.uav.sm{ width:26px; height:26px; font-size:.66rem; }
.uav.c1{ background:linear-gradient(135deg,#04A9F5,#33BEF8); }
.uav.c2{ background:linear-gradient(135deg,#2DCE98,#27B48A); }
.uav.c3{ background:linear-gradient(135deg,#F5A623,#EF8E09); }
.uav.c4{ background:linear-gradient(135deg,#B68CFF,#8B5CF6); }
.uav.c5{ background:linear-gradient(135deg,#F472B6,#DB2777); }
.uav.c6{ background:linear-gradient(135deg,#64748B,#475569); }
.ucell{ display:flex; align-items:center; gap:10px; }
.ucell .un{ font-weight:600; line-height:1.3; }
.ucell .ue{ font-size:.74rem; color:var(--gray-500); }

/* ── สถานะออนไลน์ ── */
.dot-on,.dot-off{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; }
.dot-on{ background:#22C55E; box-shadow:0 0 0 3px rgba(34,197,94,.18); }
.dot-off{ background:var(--gray-300); }

/* ── เมทริกซ์สิทธิ์ ── */
.perm-wrap{ overflow-x:auto; }
.perm-table{ width:100%; border-collapse:collapse; min-width:760px; }
.perm-table th, .perm-table td{ padding:10px 12px; font-size:.82rem; }
.perm-table thead th{ position:sticky; top:0; }
.perm-table th.mod, .perm-table td.mod{ text-align:left; font-weight:600; white-space:nowrap; }
.perm-table td.chk, .perm-table th.chk{ text-align:center; width:78px; }
.perm-table input[type=checkbox]{ width:17px; height:17px; cursor:pointer; accent-color:#04A9F5; }
.perm-yes{ color:#16A34A; font-weight:700; }
.perm-no{ color:var(--gray-300); }
.perm-table tbody tr.grp td{ background:var(--gray-50); font-weight:700; color:var(--gray-600);
  font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; }
html.dark-mode .perm-table tbody tr.grp td{ background:#111827; color:#9CA3AF; }

/* ── ชิปหมวดหมู่ (แก้ไข/ลบ ได้) ── */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:999px;
  background:var(--gray-100); color:var(--gray-700); font-size:.8rem; font-weight:500; border:1px solid var(--gray-200); }
.chip .x{ cursor:pointer; color:var(--gray-400); font-weight:700; }
.chip .x:hover{ color:var(--danger-600); }
.chip.add{ background:var(--primary-50); color:var(--primary-700); border:1px dashed var(--primary-300); cursor:pointer; }
.chip.add:hover{ background:var(--primary-100); }
html.dark-mode .chip{ background:#374151; color:#E5E7EB; border-color:#4B5563; }

/* ── การ์ดเลือกกลุ่มหมวดหมู่ ── */
.cat-list{ display:flex; flex-direction:column; gap:2px; }
.cat-item{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px;
  cursor:pointer; font-size:.875rem; transition:.15s; border:1px solid transparent; }
.cat-item:hover{ background:var(--primary-50); }
.cat-item.active{ background:var(--primary-50); border-color:var(--primary-200); color:var(--primary-700); font-weight:600; }
.cat-item .n{ margin-left:auto; font-size:.72rem; color:var(--gray-400); }
html.dark-mode .cat-item:hover, html.dark-mode .cat-item.active{ background:#1E293B; color:#7FB4FF; }

/* ── ขั้นตอนสายอนุมัติ ── */
.flow{ display:flex; align-items:stretch; gap:0; flex-wrap:wrap; }
.flow .fs{ flex:1; min-width:150px; background:#fff; border:1px solid var(--gray-200);
  border-radius:12px; padding:14px; position:relative; }
.flow .arw{ display:flex; align-items:center; padding:0 10px; color:var(--gray-300); font-size:1.3rem; }
.flow .fs .lv{ font-size:.68rem; font-weight:700; color:var(--primary-600); text-transform:uppercase; letter-spacing:.05em; }
.flow .fs .who{ font-weight:600; font-size:.9rem; margin-top:4px; }
.flow .fs .cond{ font-size:.74rem; color:var(--gray-500); margin-top:4px; }
html.dark-mode .flow .fs{ background:#1F2937; border-color:#374151; }
@media(max-width:760px){ .flow{ flex-direction:column; } .flow .arw{ transform:rotate(90deg); justify-content:center; padding:6px 0; } }

/* ── กล่องอ่านง่ายสำหรับข้อความอธิบายยาว ── */
.readable{ max-width:820px; line-height:1.75; }

/* ============================================================
   👤 เมนูบัญชีผู้ใช้ มุมขวาบน (สร้างจาก app.js อัตโนมัติทุกหน้า)
   ============================================================ */
.user-menu-wrap{ position:relative; }
.user-menu{
  position:absolute; right:0; top:calc(100% + 10px); width:290px; z-index:9000;
  background:#fff; border:1px solid var(--gray-200); border-radius:14px; box-shadow:0 14px 40px rgba(15,23,42,.16);
  padding:8px; display:none; text-align:left;
}
.user-menu.open{ display:block; animation:fadeIn .16s ease; }
.um-head{ display:flex; gap:11px; align-items:center; padding:10px 10px 12px; border-bottom:1px solid var(--gray-100); margin-bottom:6px; }
.um-head b{ display:block; font-size:.9rem; color:var(--gray-800); }
.um-head i{ display:block; font-style:normal; font-size:.74rem; color:var(--gray-500); }
.um-head i.em{ font-size:.7rem; color:var(--gray-400); margin-top:1px; }
.um-item{ display:block; padding:9px 11px; border-radius:9px; font-size:.85rem; color:var(--gray-700);
  text-decoration:none; transition:.13s; }
.um-item:hover{ background:var(--primary-50); color:var(--primary-700); }
.um-item.danger:hover{ background:var(--danger-50); color:var(--danger-600); }
.um-sep{ height:1px; background:var(--gray-100); margin:6px 4px; }
.um-label{ font-size:.68rem; font-weight:700; color:var(--gray-500); text-transform:uppercase;
  letter-spacing:.05em; padding:6px 11px 5px; }
.um-label span{ font-weight:500; text-transform:none; letter-spacing:0; color:var(--gray-400); }
.um-role{ display:flex; align-items:center; gap:9px; width:100%; padding:7px 11px; border:none;
  background:none; font-family:inherit; text-align:left; border-radius:9px; cursor:pointer; transition:.13s; }
.um-role:hover{ background:var(--primary-50); }
.um-role.on{ background:var(--primary-50); }
.um-role b{ display:block; font-size:.82rem; color:var(--gray-800); font-weight:600; }
.um-role i{ display:block; font-style:normal; font-size:.7rem; color:var(--gray-500); }
.um-role .tick{ margin-left:auto; color:var(--primary-600); font-weight:700; }
.um-note{ font-size:.72rem; color:var(--gray-500); background:var(--gray-50); border-radius:9px;
  padding:8px 11px; margin:6px 4px 2px; line-height:1.5; }
html.dark-mode .user-menu{ background:#1F2937; border-color:#374151; }
html.dark-mode .um-head{ border-bottom-color:#374151; }
html.dark-mode .um-head b, html.dark-mode .um-role b{ color:#F1F5F9; }
html.dark-mode .um-item{ color:#D1D5DB; }
html.dark-mode .um-item:hover, html.dark-mode .um-role:hover, html.dark-mode .um-role.on{ background:#374151; color:#7FB4FF; }
html.dark-mode .um-sep{ background:#374151; }
html.dark-mode .um-note{ background:#111827; }

/* ============================================================
   🩹 กันหน้าเว็บเลื่อนแนวนอนทั้งหน้า
   .main-content เป็น flex item — ค่าเริ่มต้น min-width:auto ทำให้ตารางกว้าง ๆ
   ดันทั้งหน้าให้กว้างตาม · ตั้ง min-width:0 แล้วตารางจะเลื่อนอยู่ใน .table-wrapper เอง
   ============================================================ */
.main-content { min-width: 0; }
.card, .card-body, .table-wrapper { min-width: 0; }

/* === Searchable Select (แบบ select2) === */
.ss-wrap { position: relative; }
.ss-wrap .ss-native { position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: -1; }
.ss-display { width: 100%; text-align: left; cursor: pointer; background-color: #fff; position: relative; padding-right: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-display::after { content: '▾'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--gray-400); font-size: .8rem; pointer-events: none; }
.ss-display.ss-invalid { border-color: #EF4444; }
.ss-drop { display: none; position: absolute; z-index: 300; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1.5px solid var(--gray-300); border-radius: var(--radius-md); box-shadow: 0 12px 32px rgba(0,0,0,.14); overflow: hidden; }
.ss-wrap.open .ss-drop { display: block; }
.ss-search { width: 100%; border: 0; border-bottom: 1px solid var(--gray-200); padding: 10px 14px; font-size: .88rem; outline: none; background: transparent; color: inherit; }
.ss-list { max-height: 260px; overflow-y: auto; padding: 4px 0; }
.ss-item { padding: 8px 14px; font-size: .88rem; cursor: pointer; }
.ss-item:hover, .ss-item.hover { background: var(--primary-50); color: var(--primary-700); }
.ss-item.selected { background: var(--primary-50); color: var(--primary-700); font-weight: 600; }
.ss-item.disabled { color: var(--gray-400); cursor: default; }
.ss-group { padding: 8px 14px 4px; font-size: .72rem; font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .4px; }
.ss-empty { padding: 14px; text-align: center; color: var(--gray-400); font-size: .85rem; }
html.dark-mode .ss-display, html.dark-mode .ss-drop { background: #374151; border-color: #4B5563; color: #F1F5F9; }
html.dark-mode .ss-search { border-color: #4B5563; color: #F1F5F9; }
html.dark-mode .ss-item:hover, html.dark-mode .ss-item.hover, html.dark-mode .ss-item.selected { background: #1E293B; color: #E3F6FE; }