/* ═══════════════════════════════════════════════════════════════
   shared/styles.css  —  NP Origins · โรงเรียนหนองกี่พิทยาคม
   ───────────────────────────────────────────────────────────────
   TABLE OF CONTENTS
   1.  CSS Variables (Design Tokens)
   2.  Base / Reset
   3.  Layout  — Page wrapper, Content area
   4.  Navbar
   5.  Sidebar
   6.  Components — Loading Overlay
   7.  Components — Card & Stat Card
   8.  Components — Buttons
   9.  Components — Form Inputs
   10. Components — Modal
   11. Components — Toast
   12. Components — Badges & Pills
   13. Components — Tabs & View Toggles
   14. Components — Filter Pills
   15. Components — Table (shared)
   16. Components — Calendar
   17. Components — Upload Area
   18. Components — Charts & Legends
   19. Components — Pagination
   20. Components — Avatar
   21. Components — Empty State
   22. Components — Workflow (Portfolio)
   23. Page — Portfolio (doc chips, status, matrix)
   24. Page — Admin Role (perm rows, staff picker)
   25. Page — Room Admin (booking cards, summary)
   26. Page — Room Request (time slots, equipment)
   27. Page — Food Court (KPI, rec items, amounts)
   28. Page — Staff (group badges)
   29. Utilities
   30. Animations
   ═══════════════════════════════════════════════════════════════ */


/* ── 1. CSS Variables ─────────────────────────────────────────── */
:root {
  /* ── Spacing Tokens ── */
  --gap-card:    16px;   /* ระยะห่างระหว่าง card ใน grid หลัก */
  --gap-section: 18px;   /* margin-bottom ระหว่าง section / card กลุ่ม */
  --gap-item:    10px;   /* ระยะห่างระหว่าง list item / row */
  --gap-tight:    8px;   /* ระยะห่างแคบ (doc chips, badges) */

  /* Brand */
  --blue:        #1d4ed8;
  --blue-dark:   #1e40af;
  --blue-light:  #eff6ff;
  --blue-mid:    #bfdbfe;
  --blue-ring:   rgba(29,78,216,.1);

  --purple:      #0d1b2a;   /* Ink Black */
  --purple-dark: #1b263b;   /* Prussian Blue */
  --purple-light:#e0e1dd;   /* Alabaster Grey */
  --purple-mid:  #415a77;   /* Dusk Blue */
  --purple-accent:#778da9;  /* Lavender Grey */
  --purple-ring: rgba(13,27,42,.1);

  /* ── Navbar Themes ── */
  --navbar-bg:            #1d4ed8;          /* blue  — ผู้ใช้ทั่วไป */
  --navbar-shadow:        rgba(0,0,0,.12);
  --navbar-btn-bg:        rgba(255,255,255,.15);
  --navbar-logo-border:   rgba(255,255,255,.30);
  --navbar-divider:       rgba(255,255,255,.25);
  --navbar-title-color:   #ffffff;
  --navbar-sub-color:     #bfdbfe;          /* blue subtitle */
  --navbar-login-bg:      #ffffff;
  --navbar-login-color:   #1d4ed8;

  /* ── Theme Accent Tokens (เปลี่ยนค่าตาม body.theme-staff / body.theme-blue) ──
     default = theme-blue (สมาชิกทั่วไป) */
  --accent:        #1d4ed8;
  --accent-dark:   #1e40af;
  --accent-mid:    #60a5fa;
  --accent-light:  #93c5fd;
  --accent-tint:   #eff6ff;
  --accent-warn:   #f59e0b;
  --text-heading:  #374151;

  /* Status */
  --green:       #16a34a;
  --green-light: #f0fdf4;
  --green-mid:   #86efac;
  --red:         #dc2626;
  --red-dark:    #b91c1c;
  --red-light:   #fee2e2;
  --red-mid:     #fecaca;
  --amber:       #d97706;
  --amber-light: #fffbeb;
  --amber-mid:   #fde68a;
  --sky:         #0284c7;
  --sky-light:   #e0f2fe;
  --sky-mid:     #7dd3fc;

  /* Neutral */
  --text:        #1e293b;
  --text2:       #64748b;
  --text3:       #94a3b8;
  --border:      #e2e8f0;
  --border-soft: #f1f5f9;
  --bg:          #f8fafc;
  --bg-alt:      #f1f5f9;
  --white:       #ffffff;

  /* ── Role / Group Colors (admin-role) ─────────────────────────
     เปลี่ยนสีได้ที่นี่ที่เดียว — ทุก component จะอัปเดตพร้อมกัน
     ──────────────────────────────────────────────────────────── */

  /* SuperAdmin */
  --role-super-color:   #0d1b2a;
  --role-super-bg:      #e0e1dd;
  --role-super-border:  #778da9;
  --role-super-badge-bg: linear-gradient(135deg,#0d1b2a,#415a77);

  /* กลุ่มบริหารทั่วไป */
  --role-general-color:  #2563eb;
  --role-general-bg:     #dbeafe;
  --role-general-border: #93c5fd;

  /* กลุ่มวิชาการ */
  --role-academic-color:  #16a34a;
  --role-academic-bg:     #dcfce7;
  --role-academic-border: #86efac;

  /* กลุ่มบริหารงานบุคคล */
  --role-hr-color:  #0369a1;
  --role-hr-bg:     #e0f2fe;
  --role-hr-border: #7dd3fc;

  /* หัวหน้ากลุ่มสาระ */
  --role-hog-color:  #d97706;
  --role-hog-bg:     #fef3c7;
  --role-hog-border: #fcd34d;

  /* ผู้ช่วย ผอ.ฝ่ายวิชาการ */
  --role-asst-academic-color:  #0891b2;
  --role-asst-academic-bg:     #cffafe;
  --role-asst-academic-border: #67e8f9;

  /* ผู้ช่วย ผอ.ฝ่ายบริหารงบประมาณ */
  --role-asst-budget-color:  #0e7490;
  --role-asst-budget-bg:     #e0f7fa;
  --role-asst-budget-border: #67e8f9;

  /* ผู้ช่วย ผอ.ฝ่ายบริหารทั่วไป */
  --role-asst-general-color:  #0369a1;
  --role-asst-general-bg:     #e0f2fe;
  --role-asst-general-border: #7dd3fc;

  /* ผู้ช่วย ผอ.ฝ่ายบริหารงานบุคคล */
  --role-asst-personnel-color:  #1d4ed8;
  --role-asst-personnel-bg:     #dbeafe;
  --role-asst-personnel-border: #93c5fd;

  /* ผู้ช่วย ผอ.ฝ่ายกิจการนักเรียน */
  --role-asst-student-color:  #0d1b2a;
  --role-asst-student-bg:     #e0e1dd;
  --role-asst-student-border: #778da9;

  /* รองผู้อำนวยการฝ่ายวิชาการ */
  --role-dep-academic-color:  #7e22ce;
  --role-dep-academic-bg:     #e0e1dd;
  --role-dep-academic-border: #778da9;

  /* รองผู้อำนวยการฝ่ายบริหารงบประมาณ */
  --role-dep-budget-color:  #1b263b;
  --role-dep-budget-bg:     #e0e1dd;
  --role-dep-budget-border: #d8b4fe;

  /* รองผู้อำนวยการฝ่ายบริหารทั่วไป */
  --role-dep-general-color:  #0d1b2a;
  --role-dep-general-bg:     #fdf4ff;
  --role-dep-general-border: #e9d5ff;

  /* รองผู้อำนวยการฝ่ายบริหารงานบุคคล */
  --role-dep-personnel-color:  #0a1622;
  --role-dep-personnel-bg:     #fdf4ff;
  --role-dep-personnel-border: #f0abfc;

  /* ผู้อำนวยการ */
  --role-director-color:  #b45309;
  --role-director-bg:     #fef3c7;
  --role-director-border: #fcd34d;

  /* ยังไม่มีสิทธิ์ */
  --role-none-color:  #94a3b8;
  --role-none-bg:     #f8fafc;
  --role-none-border: #e2e8f0;

  /* Matrix header colors (ตาราง Permissions) */
  --matrix-general-color:       #2563eb;
  --matrix-foodcourt-color:     #0284c7;
  --matrix-academic-color:      #16a34a;
  --matrix-hr-color:            #0369a1;
  --matrix-hog-color:           #d97706;
  --matrix-asst-academic-color: #0891b2;
  --matrix-asst-budget-color:   #0e7490;
  --matrix-asst-general-color:  #0369a1;
  --matrix-asst-personnel-color:#1d4ed8;
  --matrix-asst-student-color:  #0d1b2a;
  --matrix-dep-academic-color:  #7e22ce;
  --matrix-dep-budget-color:    #1b263b;
  --matrix-dep-general-color:   #0d1b2a;
  --matrix-dep-personnel-color: #0a1622;
  --matrix-director-color:      #b45309;
  --matrix-admin-color:         #0d1b2a;
  --matrix-action-color:        #64748b;
}


/* ── body.theme-staff (navTheme: 'dark' — เจ้าหน้าที่) override accent tokens ── */
body.theme-staff {
  /* ── Accent tokens ── */
  --accent:        #0d1b2a;   /* Ink Black */
  --accent-dark:   #1b263b;   /* Prussian Blue */
  --accent-mid:    #415a77;   /* Dusk Blue */
  --accent-light:  #778da9;   /* Lavender Grey */
  --accent-tint:   #e0e1dd;   /* Alabaster Grey */
  --accent-ring:   rgba(13,27,42,.1);

  /* ── Blue tokens → remap to Ink Black palette ── */
  --blue:          #0d1b2a;
  --blue-dark:     #1b263b;
  --blue-light:    #e0e1dd;
  --blue-mid:      #778da9;
  --blue-ring:     rgba(13,27,42,.1);

  /* ── Purple (used by tabs, pagination, etc.) ── */
  --purple:        #0d1b2a;
  --purple-dark:   #1b263b;
  --purple-light:  #e0e1dd;
  --purple-mid:    #415a77;
  --purple-accent: #778da9;
  --purple-ring:   rgba(13,27,42,.1);
}

/* Spinner — follow accent */
body.theme-staff .spinner { border-top-color: #0d1b2a; }

/* Page icon — follow accent */
body.theme-staff .page-icon.blue {
  background: linear-gradient(135deg, #0d1b2a, #415a77);
}

/* Sidebar active — follow accent */
body.theme-staff .sidebar-btn.active {
  background: #0d1b2a;
  box-shadow: 0 8px 15px -3px rgba(13,27,42,.35);
}

/* Section divider — follow accent */
body.theme-staff .section-divider {
  color: #0d1b2a;
  border-bottom-color: #e0e1dd;
}

/* Tabs / view-tabs active — already use --purple ✓ */

/* Calendar: today, selected */
body.theme-staff .cal-day.is-today    { background: #0d1b2a !important; box-shadow: 0 4px 10px rgba(13,27,42,.35); }
body.theme-staff .cal-day.is-selected { border-color: #0d1b2a; background: #e0e1dd; }

/* Multi-date picker */
body.theme-staff .mdp-nav             { color: #0d1b2a; }
body.theme-staff .mdp-nav:hover       { background: #e0e1dd; }
body.theme-staff .mdp-day:hover:not(.mdp-other):not(.mdp-past) { background: #e0e1dd; color: #0d1b2a; }
body.theme-staff .mdp-day.mdp-selected { background: #0d1b2a; }
body.theme-staff .mdp-tag             { background: #e0e1dd; color: #0d1b2a; border-color: #778da9; }
body.theme-staff .mdp-tag button      { color: #0d1b2a; }

/* Time slots */
body.theme-staff .time-slot-btn:hover:not(.ts-blocked) { border-color: #778da9; background: #e0e1dd; color: #0d1b2a; }
body.theme-staff .time-slot-btn.selected  { background: #0d1b2a; border-color: #0d1b2a; }
body.theme-staff .time-slot-btn.in-range  { background: #e0e1dd; border-color: #778da9; color: #0d1b2a; }
body.theme-staff .time-mode-btn.active    { background: #0d1b2a; border-color: #0d1b2a; box-shadow: 0 4px 12px rgba(13,27,42,.25); }

/* Room tab */
body.theme-staff .room-tab:hover  { border-color: #778da9; color: #0d1b2a; }
body.theme-staff .room-tab.active { background: #0d1b2a; border-color: #0d1b2a; }

/* Equipment row */
body.theme-staff .equip-row:hover   { border-color: #778da9; background: #f0f1ef; }
body.theme-staff .equip-row.checked { border-color: #0d1b2a; background: #e0e1dd; }
body.theme-staff .equip-cb          { accent-color: #0d1b2a; }

/* Period tabs (food court) */
body.theme-staff .ptab.active { background: #0d1b2a; border-color: #0d1b2a; }

/* Sub tab active */
body.theme-staff .sub-tab.active { color: #0d1b2a; }

/* Filter pill active */
body.theme-staff .filter-pill.active { background: #0d1b2a; border-color: #0d1b2a; }

/* View btn active */
body.theme-staff .view-btn.active { background: #0d1b2a; border-color: #0d1b2a; }

/* Sem pill active */
body.theme-staff .sem-pill.active { background: #0d1b2a; border-color: #0d1b2a; box-shadow: 0 4px 12px rgba(13,27,42,.25); }

/* Upload area */
body.theme-staff .upload-area { border-color: #778da9; background: #f8f8f7; }
body.theme-staff .upload-area:hover  { border-color: #0d1b2a; background: #e0e1dd; }

/* Stat bar fill */
body.theme-staff .stat-bar-fill { background: #0d1b2a; }

/* HBar percent */
body.theme-staff .hbar-pct { color: #0d1b2a; }

/* Btn blue */
body.theme-staff .btn-blue { background: #0d1b2a; box-shadow: 0 4px 12px rgba(13,27,42,.25); }
body.theme-staff .btn-blue:hover { background: #1b263b; }

/* Rec log btn */
body.theme-staff .rec-log-btn { background: #e0e1dd; color: #0d1b2a; border-color: #778da9; }
body.theme-staff .rec-log-btn:hover { background: #0d1b2a; color: white; }

/* Shop count input focus */
body.theme-staff .shop-count-input:focus { border-color: #0d1b2a; box-shadow: 0 0 0 2px rgba(13,27,42,.1); }

/* Modal type card hover */
body.theme-staff .modal-type-card:hover { border-color: #778da9; background: #e0e1dd; }

/* Doc item hover */
body.theme-staff .doc-item:hover { border-color: #778da9; box-shadow: 0 4px 12px rgba(13,27,42,.06); }

/* Room img placeholder */
body.theme-staff .room-img-placeholder {
  background: linear-gradient(135deg, #e0e1dd 0%, #c8cac6 100%);
}

/* Page btn active/hover */
body.theme-staff .page-btn:hover  { border-color: #415a77; color: #0d1b2a; }
body.theme-staff .page-btn.active { background: #0d1b2a; border-color: #0d1b2a; }

/* Table row hover */
body.theme-staff .data-table tbody tr:hover,
body.theme-staff .staff-table tbody tr:hover,
body.theme-staff tr:hover td { background: #f5f5f3; }

/* Shop count modal preview */
body.theme-staff .shop-count-modal-preview { background: #e0e1dd; border-color: #778da9; }
body.theme-staff .shop-count-modal-preview .preview-amount { color: #0d1b2a; }


/* ── 2. Base / Reset ──────────────────────────────────────────── */
html { height: 100%; }

*, *::before, *::after {
  font-family: 'Sarabun', sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  /* viewport lock — ป้องกัน body scroll */
  height: 100vh;
  overflow: hidden;
}

/* ── 3. Layout ────────────────────────────────────────────────── */

/*
  app-shell: กล่องครอบทั้งหน้า
  navbar อยู่บนสุด (flex-shrink:0)
  main-grid อยู่ล่าง (flex:1, min-h:0)
  ทั้งคู่ไม่ scroll — scroll เกิดในลูกแต่ละตัวแทน
*/
.app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* navbar ใน app-shell จะไม่ sticky อีกต่อไป — ใช้ flex-shrink:0 แทน */
.app-shell > .navbar {
  position: static;
  flex-shrink: 0;
}

/* Main flex wrapper (sidebar + content) */
.main-grid {
  display: flex;
  flex: 1;
  min-height: 0;          /* สำคัญ: ให้ flex child หด/ขยายได้ */
  overflow: hidden;
  /* max-width + centering ทำใน inner wrapper แทน */
}

/* ── Inner wrapper สำหรับ centering ใน desktop ── */
.main-grid-inner {
  display: flex;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

/* Content area next to sidebar */
.content-area {
  flex: 1;
  min-width: 0;
  width: 0;            /* force flex child to shrink properly */
  padding: 28px 24px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

/* Inner content max-width + fade-in */
.page-inner {
  padding: 22px 20px;
  max-width: 1280px;
  margin: 0 auto;
  animation: fadeIn .22s ease;
}

/* Page header row (title + action button) */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
}
.page-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
}
.page-sub {
  font-size: 13px;
  color: var(--text2);
  margin-top: 2px;
}

/* Page title with icon */
.page-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.page-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.page-icon.blue   { background: linear-gradient(135deg, var(--blue),   #3b82f6); }
.page-icon.purple { background: linear-gradient(135deg, var(--purple), #475569); }


/* ── 4. Navbar ────────────────────────────────────────────────── */
.navbar {
  /* ใน app-shell ใช้ flex-shrink:0 แทน sticky
     ถ้าใช้นอก app-shell (legacy) ยังคง sticky ไว้ก่อน */
  position: sticky;
  top: 0;
  z-index: 150;
  background: var(--navbar-bg);
  padding: 12px 20px;
  box-shadow: 0 4px 12px var(--navbar-shadow);
}

/* ── Navbar: Blue (ผู้ใช้ทั่วไป) — default ── */
.navbar.blue {
  --navbar-bg:          var(--accent);
  --navbar-shadow:      rgba(29,78,216,.25);
  --navbar-sub-color:   var(--accent-light);
  --navbar-login-color: var(--accent);
}

/* ── Navbar: Dark (เจ้าหน้าที่/Admin) ── */
.navbar.dark {
  --navbar-bg:          var(--accent);
  --navbar-shadow:      rgba(0,0,0,.35);
  --navbar-btn-bg:      rgba(255,255,255,.10);
  --navbar-logo-border: rgba(255,255,255,.20);
  --navbar-divider:     rgba(255,255,255,.15);
  --navbar-sub-color:   var(--accent-light);
  --navbar-login-bg:    var(--accent-dark);
  --navbar-login-color: var(--accent-tint);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}

/* ── (legacy) Purple theme — ยังรองรับ backward compat ── */
.navbar.purple {
  background: var(--purple);
  box-shadow: 0 4px 16px rgba(124,58,237,.3);
}

/* ── Navbar sub-elements (ใช้ CSS vars แทน hardcode) ── */
.navbar-hamburger {
  padding: 8px;
  background: var(--navbar-btn-bg);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--navbar-title-color);
  display: flex;
}
.navbar-logo {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--navbar-logo-border);
}
.navbar-divider {
  border-left: 1px solid var(--navbar-divider);
  padding-left: 12px;
}
.navbar-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--navbar-title-color);
  line-height: 1.2;
}
.navbar-subtitle {
  font-size: 11px;
  color: var(--navbar-sub-color);
}
.navbar-user-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid var(--navbar-logo-border);
}
.navbar-logout-btn {
  padding: 7px;
  background: var(--navbar-btn-bg);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--navbar-title-color);
  display: flex;
}
.navbar-login-btn {
  padding: 9px 18px;
  background: var(--navbar-login-bg);
  color: var(--navbar-login-color);
  font-weight: 700;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-size: 13px;
}
.navbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}


/* ── 5. Sidebar ───────────────────────────────────────────────── */
.sidebar-wrap {
  width: 272px;
  flex-shrink: 0;
  transition: transform .3s ease;
}
.sidebar-inner {
  background: var(--bg);
  border-right: 1px solid var(--border);
  /* ใน app-shell: ความสูงเต็ม main-grid อัตโนมัติ ไม่ต้อง 100vh */
  height: 100%;
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Sidebar nav button */
.sidebar-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  min-height: 44px;     /* กัน layout ยุบถ้า lucide icon ยังไม่ render เป็น svg */
  border-radius: 14px;
  font-weight: 700;
  color: var(--text2);
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all .2s;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}
/* fallback ก่อน lucide.createIcons() แปลง <i> เป็น <svg>
   (display:inline ไม่รับ width/height — ทำให้แถวยุบบนบางอุปกรณ์/บราวเซอร์) */
.sidebar-inner i[data-lucide] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sidebar-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.sidebar-btn:hover { background: #f1f5f9; }
.sidebar-btn.active {
  background: var(--blue);
  color: white;
  box-shadow: 0 8px 15px -3px rgba(30,64,175,.25);
}

/* Admin variant — ใช้โทนเดียวกับ navbar.dark (#0d1b2a) */
.sidebar-btn.admin-btn { color: #415a77; }
.sidebar-btn.admin-btn:hover { background: #e0e1dd; }
.sidebar-btn.admin-btn.active {
  background: #0d1b2a;
  color: white;
  box-shadow: 0 8px 15px -3px rgba(13,27,42,.35);
}

/* Section label */
.sec-label {
  padding: 14px 16px 8px;
  font-size: 10px;
  font-weight: 800;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Group label / dividers */
.sidebar-group-label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px 3px;
  margin-top: 2px;
}
.sidebar-dev-note {
  padding: 5px 14px 4px 36px;
  font-size: 11px;
  color: #cbd5e1;
  font-style: italic;
}
.sidebar-admin-divider {
  margin: 12px 16px;
  height: 1px;
  background: var(--border);
}
.sidebar-superadmin-label {
  margin: 8px 16px 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Mobile overlay */
#sidebarOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 199;
}
#sidebarOverlay.open { display: block; }

/* Mobile drawer */
@media (max-width: 1023px) {
  .sidebar-wrap {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;        /* mobile drawer ยังคง 100vh เพราะ fixed */
    z-index: 200;
    transform: translateX(-100%);
    box-shadow: 4px 0 24px rgba(0,0,0,.12);
    overflow: hidden;
  }
  .sidebar-wrap.open { transform: translateX(0); }
  /* mobile: content เต็มกว้าง ไม่มี sidebar ขวา */
  .main-grid { flex-direction: column; }
  .main-grid-inner { flex-direction: column; }
  .content-area { width: 100%; }
}

/* ── Mobile padding & layout fixes ──────────────────────────── */
@media (max-width: 768px) {
  .content-area { padding: 14px 12px; }
  .page-header { gap: 10px; margin-bottom: 16px; }
  .page-title { font-size: 18px; }
  .modal-box { max-width: calc(100vw - 32px) !important; margin: 16px auto !important; border-radius: 16px !important; }
  /* Booking form: 2-column grids → 1-column on mobile */
  #bookingForm [style*="grid-template-columns:1fr 1fr"],
  #bookingForm [style*="grid-template-columns: 1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
  }
}
@media (max-width: 480px) {
  .content-area { padding: 10px 8px; }
  .room-tab { font-size: 11px; padding: 5px 10px; }
  #mainBookingTableBody tr td:nth-child(7) {
    max-width: 70px;
  }
}
@media (min-width: 1024px) {
  #hamburgerBtn { display: none !important; }
  .sidebar-inner { border-right: none; }
}


/* ── 6. Loading Overlay ───────────────────────────────────────── */
#loadingOverlay {
  display: flex;
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.96);
  z-index: 9999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.spinner {
  border: 3px solid var(--border);
  border-top: 3px solid var(--blue);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  animation: spin .8s linear infinite;
}
.spinner.purple { border-top-color: var(--purple); }


/* ── 7. Card & Stat Card ──────────────────────────────────────── */
.card {
  background: var(--white);
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  padding: 20px;
}

.stat-card {
  padding: 18px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}


/* ── 8. Buttons ───────────────────────────────────────────────── */

/* Primary — Blue (default) */
.btn-primary {
  background: var(--accent);
  color: white;
  border: none;
  padding: 9px 16px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s;
  font-family: 'Sarabun', sans-serif;
}
.btn-primary:hover { background: var(--accent-dark); }

/* Primary — Purple */
.btn-primary.purple { background: var(--purple); }
.btn-primary.purple:hover { background: var(--purple-dark); }

/* Primary — Amber */
.btn-primary.amber { background: var(--amber); }
.btn-primary.amber:hover { background: #b45309; }

/* Secondary */
.btn-secondary {
  background: var(--bg-alt);
  color: #475569;
  border: none;
  padding: 9px 16px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s;
  font-family: 'Sarabun', sans-serif;
}
.btn-secondary:hover { background: var(--border); }

/* Danger */
.btn-danger {
  background: var(--red);
  color: white;
  border: none;
  padding: 7px 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background .15s;
}
.btn-danger:hover { background: var(--red-dark); }

/* Approve / Reject (room admin) */
.btn-approve {
  background: var(--green);
  color: white;
  border: none;
  padding: 7px 13px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.btn-approve:hover { background: #15803d; }
.btn-reject {
  background: var(--red);
  color: white;
  border: none;
  padding: 7px 13px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.btn-reject:hover { background: var(--red-dark); }

/* Icon button */
.btn-icon {
  background: var(--bg-alt);
  border: none;
  border-radius: 8px;
  padding: 6px 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  color: var(--text2);
  transition: all .15s;
}
.btn-icon:hover { background: var(--border); }
.btn-icon.danger:hover,
.btn-icon.red:hover   { background: var(--red-light); color: var(--red-dark); }

/* Generic .btn (food court style) */
.btn {
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Sarabun', sans-serif;
}
.btn-blue   { background: var(--blue);  color: white; box-shadow: 0 4px 12px rgba(29,78,216,.25); }
.btn-blue:hover { background: var(--blue-dark); }
.btn-green  { background: var(--green); color: white; }
.btn-ghost  { background: var(--bg); color: var(--text2); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--bg-alt); }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-xs { padding: 3px 9px;  font-size: 11px; }


/* ── 9. Form Inputs ───────────────────────────────────────────── */
input[type=text],
input[type=number],
input[type=date],
input[type=month],
input[type=email],
input[type=tel],
select,
textarea {
  border: 1.5px solid var(--border);
  padding: 10px 14px;
  border-radius: 10px;
  outline: none;
  font-size: 14px;
  width: 100%;
  color: var(--text);
  transition: border-color .15s;
  font-family: 'Sarabun', sans-serif;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-ring);
}

/* Purple focus variant */
.input-purple:focus,
.focus-purple:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px var(--purple-ring);
}

.form-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  display: block;
  margin-bottom: 6px;
}
.form-group { margin-bottom: 18px; }

.section-divider {
  font-size: 12px;
  font-weight: 800;
  color: var(--blue);
  margin: 6px 0 14px;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--blue-light);
  display: flex;
  align-items: center;
  gap: 7px;
}

label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text2);
}


/* ── 10. Modal ────────────────────────────────────────────────── */
.modal-bg {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.65);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(4px);
}
.modal-bg.open { display: flex; }

.modal-box {
  background: var(--white);
  border-radius: 20px;
  width: 100%;
  max-width: 480px;
  padding: 26px;
  box-shadow: 0 25px 60px rgba(0,0,0,.2);
  max-height: 90vh;
  overflow-y: auto;
}
.modal-box.wide  { max-width: 620px; }
.modal-box.wider { max-width: 760px; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.modal-title { font-size: 16px; font-weight: 800; }

/* กลุ่ม icon + title (+ subtitle) ฝั่งซ้ายของ modal-header */
.modal-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.modal-title-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Lucide injects <svg> replacing <i> — target both */
.modal-title-icon i,
.modal-title-icon svg {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
}
.modal-title-group h3 { font-size: 16px; font-weight: 800; color: var(--text); margin: 0; }
.modal-title-group p  { font-size: 12px; color: var(--text2); margin: 0; }

/* ปุ่มปิด X ทรงกลม — ใช้กับ modal แบบฟอร์ม/รายการ
   (modal แบบ confirm เช่น อนุมัติ/ลบ ไม่ต้องใช้ เพราะมีปุ่ม "ยกเลิก" อยู่แล้ว) */
.modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--bg-alt);
  color: var(--text2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.modal-close:hover { background: var(--border); color: var(--text); }
.modal-close i,
.modal-close svg { width: 16px; height: 16px; display: block; }

/* File view modal */
#fileViewModal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.75);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(6px);
}
#fileViewModal.open { display: flex; }


/* ── 11. Toast ────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 13px 20px;
  border-radius: 10px;
  color: white;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  z-index: 9999;
  animation: toastIn .3s ease;
}
.toast.hide { animation: toastOut .3s ease forwards; }


/* ── 12. Badges & Pills ───────────────────────────────────────── */
/* Compact status badges */
.badge-g { background: #dcfce7; color: #15803d; padding: 2px 8px; border-radius: 4px; font-size: 9px;  font-weight: 700; }
.badge-a { background: #fef9c3; color: #b45309;  padding: 2px 8px; border-radius: 4px; font-size: 9px;  font-weight: 700; }
.badge-r { background: var(--red-light); color: var(--red-dark); padding: 2px 8px; border-radius: 4px; font-size: 9px;  font-weight: 700; }

/* Booking status (room admin) */
.badge-pending  { background: #fef9c3; color: #b45309; padding: 3px 10px; border-radius: 20px; font-size: 10px; font-weight: 700; }
.badge-approved { background: #dcfce7; color: #15803d; padding: 3px 10px; border-radius: 20px; font-size: 10px; font-weight: 700; }
.badge-rejected { background: var(--red-light); color: var(--red-dark); padding: 3px 10px; border-radius: 20px; font-size: 10px; font-weight: 700; }

/* Generic inline badge */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
}
.badge-in  { background: var(--green-light); color: var(--green); }
.badge-out { background: var(--red-light);   color: var(--red); }

/* Inline status pill (portfolio) */
.status-badge { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 10px; font-weight: 700; }
.status-badge.none           { background: #f1f5f9; color: var(--text3); }
.status-badge.submitted      { background: #dcfce7; color: #15803d; }
.status-badge.head_reviewed  { background: var(--sky-light); color: #0369a1; }
.status-badge.reviewed       { background: #dbeafe; color: #1e40af; }
.status-badge.final_approved { background: var(--purple-light); color: var(--purple-dark); }
.status-badge.revision       { background: #fef9c3; color: #92400e; }


/* ── 13. Tabs & View Toggles ──────────────────────────────────── */
/* Underline tabs */
.tab-btn,
.view-tab {
  padding: 9px 18px;
  border: none;
  background: none;
  font-weight: 700;
  font-size: 13px;
  color: var(--text2);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all .15s;
  white-space: nowrap;
  font-family: 'Sarabun', sans-serif;
}
.tab-btn.active,
.view-tab.active { color: var(--purple); border-bottom-color: var(--purple); }

/* Tab content panels */
.tab-content { display: none; }
.tab-content.active { display: block; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* Pill-style sub tabs (food court) */
.sub-tab-bar {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-alt);
  border-radius: 14px;
  width: fit-content;
  margin-bottom: 20px;
}
.sub-tab {
  padding: 8px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  border: none;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Sarabun', sans-serif;
}
.sub-tab.active { background: var(--white); color: var(--blue); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.sub-tab:hover:not(.active) { background: rgba(255,255,255,.6); color: var(--text); }
.sub-panel { display: none; }
.sub-panel.active { display: block; }

/* View toggle buttons (portfolio) */
.view-btn {
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .15s;
  font-family: 'Sarabun', sans-serif;
}
.view-btn.active { background: var(--purple); border-color: var(--purple); color: white; }

/* Sem pill (portfolio) */
.sem-pill {
  padding: 7px 18px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--text2);
  cursor: pointer;
  transition: all .2s;
  font-family: 'Sarabun', sans-serif;
}
.sem-pill.active {
  background: var(--purple);
  border-color: var(--purple);
  color: white;
  box-shadow: 0 4px 12px rgba(124,58,237,.25);
}


/* ── 14. Filter Pills ─────────────────────────────────────────── */
.filter-pill {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  color: var(--text2);
  cursor: pointer;
  background: var(--white);
  transition: all .15s;
  font-family: 'Sarabun', sans-serif;
}
.filter-pill.active         { background: var(--accent); border-color: var(--accent); color: white; }
.filter-pill.active.blue    { background: var(--blue);   border-color: var(--blue); }


/* ── 15. Table (shared) ───────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 800;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1.5px solid var(--border);
  background: var(--bg);
  white-space: nowrap;
}
.data-table td {
  padding: 12px 14px;
  font-size: 13px;
  color: #334155;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background .12s; }
.data-table tbody tr:hover { background: #f8faff; }

/* Food-court table header */
th {
  background: var(--bg);
  padding: 9px 13px;
  text-align: left;
  font-size: 10px;
  font-weight: 800;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
td { padding: 9px 13px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #fafbfd; }
.td-in  { color: var(--green); font-weight: 700; }
.td-out { color: var(--red);   font-weight: 700; }

.tbl-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--border); }


/* ── 16. Calendar ─────────────────────────────────────────────── */
.cal-day {
  min-width: 0;
  width: 100%;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
  position: relative;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
  overflow: hidden;
  box-sizing: border-box;
}
.cal-day:hover:not(.empty) { background: #f1f5f9; }
.cal-day.has-booking::after { content: ''; position: absolute; bottom: 3px; width: 4px; height: 4px; background: #eab308; border-radius: 50%; }
.cal-day.is-full     { background: var(--red-light) !important; color: var(--red-dark) !important; border-color: var(--red-mid); }
.cal-day.is-today    { background: var(--blue) !important; color: white !important; box-shadow: 0 4px 10px rgba(29,78,216,.35); }
.cal-day.is-today::after { background: white !important; }
.cal-day.is-selected { border: 2px solid var(--blue); background: var(--blue-light); }
.cal-day.empty       { cursor: default; padding: 0; }
.cal-card-body { padding: 13px; }
@media (max-width: 480px) { .cal-card-body { padding: 8px 6px; } }

/* Mobile calendar: ลดขนาดให้พอดีหน้าจอ */
@media (max-width: 480px) {
  .cal-day { font-size: 10px; border-radius: 6px; height: 24px; }
}

/* Multi-date picker */
.mdp-wrap     { border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--white); max-width: 320px; }
.mdp-header   { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--bg); border-bottom: 1px solid var(--border); }
.mdp-nav      { background: none; border: none; cursor: pointer; color: var(--blue); padding: 4px 8px; border-radius: 6px; font-size: 14px; font-weight: 700; }
.mdp-nav:hover { background: var(--blue-light); }
.mdp-dow-row  { display: grid; grid-template-columns: repeat(7,1fr); padding: 6px 8px 2px; }
.mdp-grid     { display: grid; grid-template-columns: repeat(7,1fr); padding: 0 8px 8px; gap: 2px; }
.mdp-dow      { text-align: center; font-size: 9px; font-weight: 800; color: var(--text3); padding: 3px 0 5px; }


/* ── 17. Upload Area ──────────────────────────────────────────── */
.upload-area {
  border: 2px dashed var(--blue-mid);
  border-radius: 12px;
  padding: 20px 16px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
  background: #f8faff;
}
.upload-area:hover             { border-color: var(--blue); background: var(--blue-light); }
.upload-area.has-file          { border-color: var(--green); background: var(--green-light); border-style: solid; }
.upload-area.dragging          { border-color: var(--blue); background: var(--blue-light); transform: scale(1.01); }


/* ── 18. Charts & Legends ─────────────────────────────────────── */
/* Section grid */
.charts-section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--gap-card);
  margin-bottom: 0;
}
@media (max-width:1100px) { .charts-section { grid-template-columns: 1fr 1fr; } }
@media (max-width:640px)  { .charts-section { grid-template-columns: 1fr; } }

.chart-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap-card); margin-bottom: var(--gap-section); }
@media (max-width:900px) { .chart-grid { grid-template-columns: 1fr; } }
.chart-wrap { position: relative; height: 250px; }

.chart-card  { background: var(--white); border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,.04); padding: 18px 20px; }
.chart-title { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.chart-sub   { font-size: 11px; color: var(--text3); margin-bottom: 14px; }
.card-title  { font-size: 11px; font-weight: 800; color: var(--text2); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; }

/* Donut */
.donut-wrap   { position: relative; display: flex; align-items: center; justify-content: center; }
.donut-center { position: absolute; text-align: center; pointer-events: none; }
.donut-big    { font-size: 26px; font-weight: 800; color: #0f172a; line-height: 1; }
.donut-label  { font-size: 10px; color: var(--text3); font-weight: 700; margin-top: 2px; }

/* Legends */
.donut-legend { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.legend-row   { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.legend-dot   { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.legend-label { font-size: 11px; color: #475569; font-weight: 600; flex: 1; }
.legend-val   { font-size: 12px; font-weight: 800; color: #0f172a; }

.legend-list  { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.legend-item  { display: flex; align-items: center; gap: 8px; font-size: 12px; }

/* Horizontal bars */
.hbar-row   { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.hbar-label { display: flex; justify-content: space-between; align-items: center; }
.hbar-name  { font-size: 11px; font-weight: 700; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.hbar-pct   { font-size: 11px; font-weight: 800; color: var(--blue); }
.hbar-track { background: var(--bg-alt); border-radius: 6px; height: 8px; overflow: hidden; }
.hbar-fill  { height: 100%; border-radius: 6px; transition: width .5s ease; }

/* Thin bars (tbar) */
.tbar-row   { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tbar-icon  { width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tbar-label { font-size: 11px; font-weight: 700; color: #334155; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbar-track { width: 80px; background: var(--bg-alt); border-radius: 4px; height: 6px; overflow: hidden; flex-shrink: 0; }
.tbar-fill  { height: 100%; border-radius: 4px; transition: width .5s ease; }
.tbar-num   { font-size: 10px; font-weight: 800; color: var(--text2); min-width: 28px; text-align: right; }

/* Stat bar */
.stat-bar-bg   { background: var(--border); border-radius: 4px; height: 6px; overflow: hidden; }
.stat-bar-fill { height: 100%; border-radius: 4px; background: var(--blue); transition: width .4s ease; }

/* KPI cards (food court) */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: var(--gap-card); margin-bottom: var(--gap-section); }
.kpi {
  background: var(--white);
  border-radius: 14px;
  padding: 18px 18px 16px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
  overflow: hidden;
}
.kpi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.kpi.income::before  { background: var(--green); }
.kpi.expense::before { background: var(--red); }
.kpi.balance::before { background: var(--blue); }
.kpi.avg::before     { background: var(--amber); }
.kpi-label { font-size: 11px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .5px; }
.kpi-value { font-size: 24px; font-weight: 800; color: var(--text); line-height: 1.1; }
.kpi-sub   { font-size: 11px; color: var(--text2); }
.kpi-icon  { position: absolute; right: 14px; top: 14px; font-size: 22px; opacity: .1; }

/* Period tabs (food court) */
.period-tabs { display: flex; gap: 4px; }
.ptab {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text2);
  cursor: pointer;
  transition: all .15s;
  font-family: 'Sarabun', sans-serif;
}
.ptab.active { background: var(--blue); color: white; border-color: var(--blue); }


/* ── 19. Pagination ───────────────────────────────────────────── */
.page-btn {
  padding: 6px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text2);
  cursor: pointer;
  background: var(--white);
  transition: all .15s;
  font-family: 'Sarabun', sans-serif;
}
.page-btn:hover          { border-color: var(--purple-mid); color: var(--purple); }
.page-btn.active         { background: var(--purple); border-color: var(--purple); color: white; }
.page-btn:disabled       { opacity: .4; cursor: not-allowed; }


/* ── 20. Avatar ───────────────────────────────────────────────── */
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border);
  flex-shrink: 0;
}
.avatar-initials {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
}


/* ── 21. Empty State ──────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 52px 20px;
  color: var(--text3);
}
.empty { text-align: center; padding: 36px; color: var(--text2); }
.empty-icon { font-size: 38px; margin-bottom: 8px; }


/* ── 22. Workflow (Portfolio) ─────────────────────────────────── */
.workflow-bar {
  display: flex;
  align-items: stretch;
  margin-top: 8px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.wf-step {
  flex: 1;
  padding: 6px 4px;
  text-align: center;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1.3;
}
.wf-step.done     { background: #16a34a; color: white; }
.wf-step.active   { background: #eab308; color: #713f12; }
.wf-step.revision { background: var(--red); color: white; }
.wf-step.pending  { background: #f1f5f9; color: var(--text3); }
.wf-step.final    { background: var(--purple); color: white; }
.wf-divider       { width: 1px; background: rgba(0,0,0,.08); align-self: stretch; flex-shrink: 0; }


/* ── 23. Page — Portfolio ─────────────────────────────────────── */
/* Doc item card (teacher view) */
.doc-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.doc-item {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: 14px;
}
.doc-item:hover              { border-color: var(--blue-mid); box-shadow: 0 4px 12px rgba(29,78,216,.06); }
.doc-item.submitted          { border-left: 4px solid var(--green); }
.doc-item.pending            { border-left: 4px solid var(--border); }
.doc-item.reviewed           { border-left: 4px solid #3b82f6; }
.doc-item.head_reviewed      { border-left: 4px solid #0ea5e9; }
.doc-item.final_approved     { border-left: 4px solid var(--purple); }
.doc-item.revision           { border-left: 4px solid #f59e0b; }

/* Status dot */
.status-dot         { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-none           { background: #d1d5db; }
.dot-submitted      { background: var(--green); }
.dot-head_reviewed  { background: #0ea5e9; }
.dot-reviewed       { background: #3b82f6; }
.dot-final_approved { background: var(--purple); }
.dot-revision       { background: #f59e0b; }

/* Doc chip (admin grid) */
.doc-chip {
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid;
  cursor: pointer;
  transition: all .15s;
}
.doc-chip:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.08); }
.chip-none           { background: var(--bg); border-color: var(--border); color: var(--text3); }
.chip-submitted      { background: var(--green-light); border-color: var(--green-mid); color: #15803d; }
.chip-head_reviewed  { background: var(--sky-light);   border-color: var(--sky-mid);   color: #0369a1; }
.chip-reviewed       { background: var(--blue-light);  border-color: #93c5fd;          color: #1e40af; }
.chip-assistant_reviewed { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.chip-deputy_reviewed    { background: var(--purple-light); border-color: var(--purple-mid); color: var(--purple-dark); }
.chip-final_approved { background: var(--green-light); border-color: var(--green-mid); color: #065f46; }
.chip-revision       { background: var(--amber-light); border-color: var(--amber-mid); color: #92400e; }

/* Teacher row */
.teacher-row    { background: var(--white); border: 1.5px solid var(--border); border-radius: 14px; overflow: hidden; transition: border-color .15s; }
.teacher-row:hover { border-color: var(--purple-mid); }
.teacher-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; }
.teacher-docs   { display: none; padding: 0 16px 16px; border-top: 1px solid var(--border-soft); }
.teacher-docs.open { display: block; }

/* Doc grid */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(170px,1fr)); gap: var(--gap-tight); margin-top: 12px; }

/* Matrix cell */
.matrix-cell          { width: 22px; height: 22px; border-radius: 6px; margin: 0 auto; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cell-none            { background: #f1f5f9; }
.cell-submitted       { background: #dcfce7; }
.cell-head_reviewed   { background: #bae6fd; }
.cell-reviewed        { background: #dbeafe; }
.cell-final_approved  { background: #e2e8f0; }
.cell-revision        { background: #fef9c3; }


/* ── 24. Page — Admin Role ────────────────────────────────────── */
/* Admin card */
.admin-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  transition: all .2s;
  position: relative;
}
.admin-card:hover    { border-color: #778da9; box-shadow: 0 4px 12px rgba(13,27,42,.08); }
.admin-card.superadmin { border-color: #778da9; background: linear-gradient(135deg,#e0e1dd,#778da9); }

/* Permission badge */
.perm-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Group header card */
.group-header { border-radius: 14px; padding: 16px 20px; margin-bottom: 14px; display: flex; align-items: center; gap: 13px; }

/* Group grid */
.group-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(320px,1fr)); gap: var(--gap-card); }
@media (max-width:640px) { .group-grid { grid-template-columns: 1fr; } }

/* Permission row (modal) */
.perm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s;
}
.perm-row:hover,
.perm-row.active  { border-color: #778da9; background: var(--bg-alt); }
.perm-row.disabled { opacity: .5; cursor: not-allowed; }

/* Staff picker */
.staff-picker-wrap       { position: relative; }
.staff-picker-input {
  border: 1.5px solid var(--border);
  padding: 10px 14px;
  border-radius: 10px;
  outline: none;
  font-size: 14px;
  width: 100%;
  color: var(--text);
  cursor: pointer;
  background: var(--white);
  transition: border-color .15s;
  font-family: 'Sarabun', sans-serif;
}
.staff-picker-input:focus { border-color: #415a77; box-shadow: 0 0 0 3px rgba(13,27,42,.1); }
.staff-picker-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--white);
  border: 1.5px solid #778da9;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 200;
  max-height: 220px;
  overflow-y: auto;
  display: none;
}
.staff-picker-dropdown.open  { display: block; }
.staff-picker-search         { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); position: sticky; top: 0; background: var(--white); }
.staff-picker-search input   { border: 1.5px solid var(--border); padding: 7px 12px; border-radius: 8px; font-size: 13px; width: 100%; font-family: 'Sarabun', sans-serif; outline: none; }
.staff-picker-search input:focus { border-color: var(--purple); }
.staff-picker-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; transition: background .12s; }
.staff-picker-item:hover    { background: var(--bg-alt); }
.staff-picker-item.selected { background: #e0e1dd; }
.staff-picker-empty,
.staff-picker-loading { padding: 16px; text-align: center; font-size: 12px; color: var(--text3); }

/* Head-of-group panel */
#headOfGroupPanel {
  background: var(--amber-light);
  border: 1.5px solid var(--amber-mid);
  border-radius: 12px;
  padding: 14px;
  margin-top: 8px;
  display: none;
}
#headOfGroupPanel.show { display: block; }

/* Search box */
.search-box {
  border: 1.5px solid var(--border);
  padding: 9px 14px;
  border-radius: 10px;
  outline: none;
  font-size: 13px;
  width: 100%;
  color: var(--text);
  font-family: 'Sarabun', sans-serif;
  transition: border-color .15s;
}
.search-box:focus { border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-ring); }


/* ── 25. Page — Room Admin ────────────────────────────────────── */
.booking-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  transition: border-color .15s;
}
.booking-card:hover             { border-color: var(--purple-mid); }
.booking-card.status-pending    { border-left: 4px solid #f59e0b; }
.booking-card.status-approved   { border-left: 4px solid var(--green); }
.booking-card.status-rejected   { border-left: 4px solid var(--red); }

/* List item */
.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  transition: all .15s;
  gap: 12px;
}
.list-item:hover { border-color: var(--purple-mid); background: var(--bg-alt); }

/* Summary room card */
.sum-room-card       { background: var(--white); border: 1.5px solid var(--border); border-radius: 14px; overflow: hidden; transition: border-color .15s; }
.sum-room-card:hover { border-color: var(--purple-mid); }
.sum-room-header     { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--bg-alt); border-bottom: 1px solid var(--border); gap: 10px; flex-wrap: wrap; cursor: pointer; user-select: none; }
.sum-room-title      { font-size: 14px; font-weight: 800; color: var(--text); }
.sum-room-badges     { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sum-room-body       { padding: 14px 18px; }
.sum-badge           { padding: 4px 11px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.sum-badge-total     { background: #e2e8f0; color: var(--purple-dark); }
.sum-badge-approved  { background: #dcfce7; color: #15803d; }
.sum-badge-pending   { background: #fef9c3; color: #b45309; }
.sum-badge-rejected  { background: var(--red-light); color: var(--red-dark); }

/* Summary bars / booking lists / grand totals */
.sum-bar-wrap  { margin-bottom: 8px; }
.sum-bar-label { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; color: #334155; margin-bottom: 3px; }
.sum-bar-track { background: var(--bg-alt); border-radius: 6px; height: 10px; overflow: hidden; }
.sum-bar-fill  { height: 100%; border-radius: 6px; transition: width .5s ease; }
.sum-booking-list { margin-top: 10px; display: flex; flex-direction: column; gap: var(--gap-tight); max-height: 260px; overflow-y: auto; }
.sum-booking-row  { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--bg); border-radius: 9px; font-size: 11px; color: #475569; }
.sum-booking-row .sdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sum-toggle    { font-size: 10px; color: var(--purple); font-weight: 700; cursor: pointer; background: none; border: none; padding: 0; margin-left: auto; }
.sum-grand-card { padding: 16px 18px; border-radius: 14px; display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--border); background: var(--white); }

/* Delete button */
.btn-delete {
  background: var(--bg-alt);
  color: var(--text2);
  border: none;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.btn-delete:hover { background: var(--red-light); color: var(--red-dark); }


/* ── 26. Page — Room Request ──────────────────────────────────── */

/* Room filter tabs (pill style) */
.room-tab {
  padding: 7px 13px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  color: var(--text2);
  cursor: pointer;
  background: var(--white);
  transition: all .15s;
  white-space: nowrap;
  font-family: 'Sarabun', sans-serif;
}
.room-tab:hover  { border-color: #93c5fd; color: var(--blue); }
.room-tab.active { background: var(--blue); border-color: var(--blue); color: white; }

/* Room image wrapper */
.room-img-wrap {
  width: 100%;
  height: 110px;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  position: relative;
}
.room-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.room-img-placeholder {
  width: 100%;
  height: 110px;
  background: linear-gradient(135deg, var(--blue-light) 0%, #dbeafe 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 12px 12px 0 0;
}

/* Two-column layout: calendar sidebar + day detail */
.cal-content-grid {
  display: grid;
  grid-template-columns: 268px 1fr;
  gap: 20px;
  min-width: 0;
  width: 100%;
}
/* ทุก direct child ต้อง min-width:0 เพื่อป้องกัน grid overflow */
.cal-content-grid > * { min-width: 0; }
@media (max-width: 900px) {
  .cal-content-grid { grid-template-columns: 230px 1fr; gap: 12px; }
}
@media (max-width: 768px) {
  .cal-content-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* Multi-date picker day states (missing from above .mdp-dow block) */
.mdp-day {
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  border-radius: 7px;
  cursor: pointer;
  color: var(--text);
  transition: all .12s;
  user-select: none;
}
.mdp-day:hover:not(.mdp-other):not(.mdp-past) { background: var(--blue-light); color: var(--blue); }
.mdp-day.mdp-other    { color: #cbd5e1; cursor: default; }
.mdp-day.mdp-past     { color: #cbd5e1; cursor: not-allowed; }
.mdp-day.mdp-selected { background: var(--blue); color: white; font-weight: 800; }
.mdp-day.mdp-has-booking { position: relative; }
.mdp-day.mdp-has-booking::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f59e0b;
}
.mdp-day.mdp-selected.mdp-has-booking::after { background: white; }

/* Multi-date tag strip */
.mdp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 6px 10px 8px;
  border-top: 1px solid var(--border-soft);
  min-height: 32px;
}
.mdp-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--blue-light);
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid var(--blue-mid);
}
.mdp-tag button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--blue);
  font-size: 13px;
  line-height: 1;
  padding: 0;
  margin: 0;
}

/* Time mode toggle */
.time-mode-btn {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--text2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all .15s;
  font-family: 'Sarabun', sans-serif;
}
.time-mode-btn.active { background: var(--blue); border-color: var(--blue); color: white; box-shadow: 0 4px 12px rgba(29,78,216,.25); }

/* Time slot buttons */
.time-slot-btn {
  padding: 9px 5px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  background: var(--white);
  transition: all .12s;
  text-align: center;
  font-family: 'Sarabun', sans-serif;
}
.time-slot-btn:hover:not(.ts-blocked) { border-color: #93c5fd; background: var(--blue-light); color: var(--blue); }
.time-slot-btn.selected  { background: var(--blue); border-color: var(--blue); color: white; }
.time-slot-btn.in-range  { background: #dbeafe; border-color: #93c5fd; color: var(--blue); }
.time-slot-btn.ts-blocked { background: var(--red-light); border-color: var(--red-mid); color: #fca5a5; cursor: not-allowed; text-decoration: line-through; }

/* Equipment rows */
.equip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}
.equip-row:hover  { border-color: #93c5fd; background: #f8faff; }
.equip-row.checked { border-color: var(--blue); background: var(--blue-light); }
.equip-cb    { width: 16px; height: 16px; accent-color: var(--blue); flex-shrink: 0; cursor: pointer; }
.equip-label { font-size: 13px; font-weight: 600; color: #374151; flex: 1; }
.equip-qty   { width: 76px !important; padding: 5px 8px !important; font-size: 12px !important; border-radius: 7px !important; }


/* ── 27. Page — Food Court ────────────────────────────────────── */
/* Day section */
.day-section { margin-bottom: var(--gap-section); }
.day-header  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; padding: 10px 14px; background: var(--white); border-radius: 12px; border: 1px solid var(--border); }
.day-title   { font-weight: 800; font-size: 14px; }
.day-stats   { display: flex; gap: 14px; font-size: 12px; }
.day-in      { color: var(--green); font-weight: 700; }
.day-out     { color: var(--red); font-weight: 700; }

/* Summary bar */
.sum-bar   { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 12px 18px; display: flex; align-items: center; gap: 20px; margin-bottom: 14px; flex-wrap: wrap; }
.sum-item  { display: flex; flex-direction: column; gap: 1px; }
.sum-label { font-size: 10px; font-weight: 800; color: var(--text2); text-transform: uppercase; letter-spacing: .5px; }
.sum-val   { font-size: 17px; font-weight: 800; }

/* Filter row */
.filter-row { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }

/* Form row (food court) */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-item); margin-bottom: 12px; }
@media (max-width:600px) { .form-row { grid-template-columns: 1fr; } }

/* Booking modal 2-col form rows — collapse on mobile */
.form-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-card); }
@media (max-width: 560px) {
  .form-row-2col {
    grid-template-columns: 1fr !important;
    /* inline style: display:grid ยังคงอยู่ → 1 column grid = OK */
  }
}

/* Type toggle */
.type-toggle { display: flex; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--border); }
.type-btn    { flex: 1; padding: 9px; font-size: 13px; font-weight: 700; border: none; background: var(--white); cursor: pointer; transition: all .15s; color: var(--text2); font-family: 'Sarabun', sans-serif; }
.type-btn.active.income  { background: var(--green); color: white; }
.type-btn.active.expense { background: var(--red); color: white; }

/* Recurring items */
.rec-section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-card); margin-bottom: var(--gap-section); }
@media (max-width:700px) { .rec-section-grid { grid-template-columns: 1fr; } }
.rec-col-label { font-size: 12px; font-weight: 800; margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
.rec-col-ico   { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 14px; }

.rec-item {
  background: #fafbfd;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 8px;
  transition: all .18s;
}
.rec-item:hover             { border-color: var(--blue-mid); box-shadow: 0 3px 10px rgba(29,78,216,.06); }
.rec-item.income-type       { border-left: 3px solid var(--green); }
.rec-item.expense-type      { border-left: 3px solid var(--red); }
.rec-dot  { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dot-in   { background: var(--green); }
.dot-out  { background: var(--red); }
.rec-name { font-weight: 700; font-size: 13px; }
.rec-sub  { font-size: 11px; color: var(--text2); margin-top: 1px; }

/* Quick-log buttons */
.rec-log-btn {
  margin-left: auto;
  flex-shrink: 0;
  background: var(--blue-light);
  color: var(--blue);
  border: 1px solid var(--blue-mid);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  font-family: 'Sarabun', sans-serif;
  white-space: nowrap;
}
.rec-log-btn:hover             { background: var(--blue); color: white; }
.rec-log-btn.expense-btn       { background: var(--red-light); color: var(--red); border-color: var(--red-mid); }
.rec-log-btn.expense-btn:hover { background: var(--red); color: white; }

/* Shop count */
.shop-count-wrap   { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }
.shop-count-input  { width: 52px; padding: 4px 8px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 12px; font-weight: 700; text-align: center; font-family: 'Sarabun', sans-serif; color: var(--text); outline: none; }
.shop-count-input:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(29,78,216,.1); }
.shop-count-preview { font-size: 11px; color: var(--text2); white-space: nowrap; }

/* Amount input */
.amount-input-wrap { position: relative; margin-bottom: 16px; }
.amount-input-wrap .currency { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 800; color: var(--text2); pointer-events: none; }
.amount-big { padding: 14px 14px 14px 42px !important; font-size: 26px !important; font-weight: 800 !important; border-radius: 14px !important; text-align: right; }
.amount-highlight { background: var(--amber-light); border: 1px solid var(--amber-mid); border-radius: 8px; padding: 3px 9px; color: var(--amber); font-weight: 800; font-size: 12px; }

/* Modal type card */
.modal-type-card { flex: 1; border: 2px solid var(--border); border-radius: 14px; padding: 16px 12px; text-align: center; cursor: pointer; transition: all .18s; background: var(--white); }
.modal-type-card:hover { border-color: var(--blue-mid); background: var(--blue-light); }
.modal-type-card.active.income  { border-color: var(--green); background: var(--green-light); }
.modal-type-card.active.expense { border-color: var(--red); background: var(--red-light); }
.modal-type-card .type-ico  { font-size: 28px; margin-bottom: 6px; }
.modal-type-card .type-lbl  { font-size: 13px; font-weight: 800; color: var(--text2); }
.modal-type-card.active.income .type-lbl  { color: var(--green); }
.modal-type-card.active.expense .type-lbl { color: var(--red); }

/* Shop count modal preview */
.shop-count-modal-preview { background: var(--blue-light); border: 1.5px solid var(--blue-mid); border-radius: 12px; padding: 14px 18px; text-align: center; margin: 14px 0; }
.shop-count-modal-preview .preview-amount { font-size: 28px; font-weight: 800; color: var(--blue); }
.shop-count-modal-preview .preview-label  { font-size: 11px; color: var(--text2); margin-top: 2px; }

/* Manage items */
.rec-manage-item { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.rec-manage-item:last-child { border-bottom: none; }
.manage-rec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-item); margin-bottom: var(--gap-section); }
@media (max-width:640px) { .manage-rec-grid { grid-template-columns: 1fr; } }
.manage-rec-card { background: #fafbfd; border: 1.5px solid var(--border); border-radius: 12px; padding: 13px 14px; display: flex; align-items: flex-start; gap: 10px; transition: all .18s; }

/* Divider */
.divider { width: 1px; background: var(--border); align-self: stretch; }


/* ── 28. Page — Staff ─────────────────────────────────────────── */
/* Group badge */
.group-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.group-badge[data-group="วิทยาศาสตร์"]                       { background: #dbeafe; color: #1e40af; }
.group-badge[data-group="เทคโนโลยี"]                         { background: #e0f2fe; color: #0369a1; }
.group-badge[data-group="คณิตศาสตร์"]                        { background: #fef9c3; color: #b45309; }
.group-badge[data-group="ภาษาไทย"]                           { background: var(--red-light); color: var(--red-dark); }
.group-badge[data-group="สังคมศึกษา ศาสนา และวัฒนธรรม"]     { background: #dcfce7; color: #15803d; }
.group-badge[data-group="สุขศึกษาและพลศึกษา"]               { background: #d1fae5; color: #065f46; }
.group-badge[data-group="ภาษาต่างประเทศ"]                   { background: #ede9fe; color: #5b21b6; }
.group-badge[data-group="ศิลปะ"]                             { background: #fce7f3; color: #be185d; }
.group-badge[data-group="การงานอาชีพ"]                       { background: #fef3c7; color: #92400e; }
.group-badge[data-group="แนะแนว"]                            { background: #fff7ed; color: #c2410c; }
.group-badge[data-group="ผู้บริหาร"]                         { background: #fdf4ff; color: #7e22ce; }
.group-badge[data-group="เจ้าหน้าที่"]                       { background: var(--bg-alt); color: #475569; }

/* Position tag */
.pos-tag { background: var(--bg-alt); color: #475569; padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 700; }

/* Staff table alias */
.staff-table        { width: 100%; border-collapse: collapse; }
.staff-table th     { padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 800; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; border-bottom: 1.5px solid var(--border); background: var(--bg); white-space: nowrap; }
.staff-table td     { padding: 12px 14px; font-size: 13px; color: #334155; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.staff-table tr:last-child td { border-bottom: none; }
.staff-table tbody tr { transition: background .12s; }
.staff-table tbody tr:hover { background: #f8faff; }


/* ── 29. Utilities ────────────────────────────────────────────── */
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Stat bar (shared) */
.stat-bar-bg   { background: var(--border); border-radius: 4px; height: 6px; overflow: hidden; }
.stat-bar-fill { height: 100%; border-radius: 4px; background: var(--blue); transition: width .4s ease; }


/* ── 30. Animations ───────────────────────────────────────────── */
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes fadeIn  { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastIn { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut{ from { transform: translateX(0); opacity: 1; } to { transform: translateX(400px); opacity: 0; } }

/* ══ 31. Hide Scrollbar ═══════════════════════════════════════════ */
/* ซ่อนแถบ scroll ทุก element แต่ยังเลื่อนได้เหมือนเดิม */
html, body, *,
*::before, *::after {
  scrollbar-width: none !important;      /* Firefox */
  -ms-overflow-style: none !important;   /* IE / Edge เก่า */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;             /* Chrome, Safari, Edge */
}