/* ==========================================================================
   GMP - Worker Profile, CV & Payroll System (Design System & Styles)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Battambang:wght@400;700;900&family=Inter:wght@300;400;500;600;700;800&family=Kantumruy+Pro:wght@400;500;600;700&family=Moul&family=Noto+Sans+Khmer:wght@300;400;500;600;700;800&family=Noto+Sans+Thai:wght@400;600;700&family=Noto+Serif+Khmer:wght@400;600;700&family=Siemreap&display=swap');

:root {
  /* Color Tokens */
  --bg-main: #070d19;
  --bg-card: #111a2e;
  --bg-card-hover: #192642;
  --bg-input: #0b1326;
  --bg-sidebar: #050a14;
  
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-sub: #cbd5e1;

  --accent-cyan: #06b6d4;
  --accent-cyan-glow: rgba(6, 182, 212, 0.3);
  --accent-emerald: #10b981;
  --accent-emerald-glow: rgba(16, 185, 129, 0.25);
  --accent-indigo: #6366f1;
  --accent-amber: #f59e0b;
  --accent-rose: #f43f5e;

  --border-color: rgba(255, 255, 255, 0.08);
  --border-light: rgba(255, 255, 255, 0.15);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.4);

  --font-family: 'Inter', 'Noto Sans Khmer', -apple-system, sans-serif;
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light Mode Overrides */
body.light-mode {
  --bg-main: #f8fafc;
  --bg-card: #ffffff;
  --bg-card-hover: #f1f5f9;
  --bg-input: #ffffff;
  --bg-sidebar: #ffffff;
  
  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-sub: #334155;

  --accent-cyan: #0284c7;
  --accent-cyan-glow: rgba(2, 132, 199, 0.18);
  --accent-emerald: #059669;
  --accent-emerald-glow: rgba(5, 150, 105, 0.18);
  --accent-indigo: #4f46e5;
  --accent-amber: #d97706;
  --accent-rose: #e11d48;

  --border-color: #e2e8f0;
  --border-light: #cbd5e1;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* Reset & Base Setup */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-main);
  color: var(--text-main);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

a {
  color: var(--accent-cyan);
  text-decoration: none;
}

/* App Layout Structure */
.app-container {
  display: flex;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Sidebar Styles */
.sidebar {
  width: 280px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  position: fixed;
  height: 100vh;
  z-index: 50;
  transition: var(--transition);
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px 24px 12px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 24px;
}

.brand-icon {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-indigo));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  box-shadow: 0 4px 14px var(--accent-cyan-glow);
}

.brand-title h2 {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.brand-title p {
  font-size: 11px;
  color: var(--accent-cyan);
  font-weight: 500;
}

.nav-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  color: #94a3b8;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #f8fafc;
}

.nav-item.active {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(99, 102, 241, 0.15));
  color: var(--accent-cyan);
  border-left: 4px solid var(--accent-cyan);
}

.nav-item i {
  font-size: 18px;
}

.sidebar-footer {
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Sidebar & Top Bar Hide on Home Portal Page */
body.is-home-page .sidebar {
  display: none !important;
}

body.is-home-page .top-bar {
  display: none !important;
}

body.is-home-page .main-wrapper {
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
}

body.is-home-page .content-area {
  padding: 12px 24px 36px 24px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   ADMIN MODE (ផ្ទាំងការងាររដ្ឋបាល - HIDES ALL COMPANY WORKER LISTS)
   ========================================================================== */
body.is-admin-mode .sidebar-company-section {
  display: none !important;
}

body.is-admin-mode .sidebar-admin-back-btn {
  display: flex !important;
}

/* Hide administration suite navigation when NOT in admin mode */
body:not(.is-admin-mode) .sidebar-admin-suite-section {
  display: none !important;
}

body.is-admin-mode .sidebar-admin-suite-section {
  display: block !important;
}

/* Hero Company Name Branding Styles */
.hero-brand-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 24px;
}

/* Hero Brand Logo - Luminous Full Moon Aesthetic (មូលហាក់ដូចព្រះចន្ទ) */
.hero-brand-logo-box {
  width: 130px;
  height: 130px;
  min-width: 130px;
  min-height: 130px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  padding: 4px;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #f0f9ff 60%, #e0f2fe 100%);
  border: 3.5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 
    0 0 0 2.5px rgba(186, 230, 253, 0.8),
    0 10px 30px rgba(2, 132, 199, 0.22),
    0 0 45px rgba(56, 189, 248, 0.38),
    0 0 75px rgba(186, 230, 253, 0.55),
    inset 0 3px 8px rgba(255, 255, 255, 1),
    inset 0 -3px 8px rgba(2, 132, 199, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px auto;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  animation: moonGlowPulse 4s ease-in-out infinite alternate;
}

@keyframes moonGlowPulse {
  0% {
    box-shadow: 
      0 0 0 2px rgba(186, 230, 253, 0.7),
      0 8px 25px rgba(2, 132, 199, 0.2),
      0 0 35px rgba(56, 189, 248, 0.3),
      0 0 60px rgba(186, 230, 253, 0.45),
      inset 0 2px 6px rgba(255, 255, 255, 0.95),
      inset 0 -3px 8px rgba(2, 132, 199, 0.1);
    transform: translateY(0);
  }
  100% {
    box-shadow: 
      0 0 0 3.5px rgba(255, 255, 255, 1),
      0 14px 36px rgba(2, 132, 199, 0.3),
      0 0 55px rgba(56, 189, 248, 0.48),
      0 0 90px rgba(186, 230, 253, 0.7),
      inset 0 4px 10px rgba(255, 255, 255, 1),
      inset 0 -4px 10px rgba(2, 132, 199, 0.16);
    transform: translateY(-4px);
  }
}

.hero-brand-logo-box:hover {
  transform: scale(1.07) translateY(-6px);
  box-shadow: 
    0 0 0 4px #ffffff,
    0 18px 45px rgba(2, 132, 199, 0.38),
    0 0 65px rgba(56, 189, 248, 0.6),
    0 0 100px rgba(186, 230, 253, 0.85);
}

.hero-gmp-logo-img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(2, 132, 199, 0.22));
  transition: transform 0.3s ease;
}

.brand-icon-box,
.header-logo-box {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  overflow: hidden;
}

.sidebar-gmp-logo-img,
.header-gmp-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.hero-company-name {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #ffffff 0%, var(--accent-cyan) 50%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
  text-shadow: 0 4px 24px rgba(6, 182, 212, 0.35);
  line-height: 1.25;
}

.hero-company-sub {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 8px;
  max-width: 680px;
}

/* Main Content Area */
.main-wrapper {
  margin-left: 280px;
  width: calc(100% - 280px);
  max-width: calc(100% - 280px);
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--bg-main);
  transition: var(--transition);
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Top Header Bar */
.top-bar {
  height: 72px;
  padding: 0 24px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(12px);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  gap: 12px;
}

.header-left-group {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1 1 auto;
}

/* Sidebar Mobile/Tablet Toggle Button */
.btn-sidebar-toggle {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition);
}

.btn-sidebar-toggle:hover {
  background: var(--bg-card-hover);
  color: var(--accent-cyan);
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  z-index: 45;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.sidebar-backdrop.active {
  display: block;
  opacity: 1;
}

.header-brand-logo {
  display: none;
  align-items: center;
  gap: 10px;
  padding-right: 16px;
  border-right: 1px solid var(--border-color);
  flex-shrink: 0;
}

body.is-home-page .header-brand-logo {
  display: flex;
}

.header-brand-logo .brand-icon {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-indigo));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  box-shadow: 0 4px 14px var(--accent-cyan-glow);
}

.header-brand-logo .brand-title h2 {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.home-quick-nav {
  display: none;
  align-items: center;
  gap: 8px;
  margin-right: 8px;
  flex-wrap: wrap;
}

body.is-home-page .home-quick-nav {
  display: flex;
}

.btn-sm {
  padding: 6px 14px;
  font-size: 13px;
}

.header-title {
  min-width: 0;
  overflow: hidden;
}

.header-title h1 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-title p {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.btn-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}

.btn-icon:hover {
  background: var(--bg-card-hover);
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
}

/* Buttons System */
.btn {
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-cyan), #0284c7);
  color: #ffffff;
  box-shadow: 0 4px 14px var(--accent-cyan-glow);
}

.btn-primary:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--accent-cyan-glow);
}

.btn-success {
  background: linear-gradient(135deg, var(--accent-emerald), #059669);
  color: #ffffff;
  box-shadow: 0 4px 14px var(--accent-emerald-glow);
}

.btn-secondary {
  background: var(--bg-card-hover);
  color: var(--text-main);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
}

.btn-danger {
  background: rgba(244, 63, 94, 0.15);
  color: var(--accent-rose);
  border: 1px solid rgba(244, 63, 94, 0.3);
}

.btn-danger:hover {
  background: var(--accent-rose);
  color: #ffffff;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: var(--radius-sm);
}

/* Controls Bar, Search Box & Form Controls */
.controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 240px;
  min-width: 200px;
  max-width: 440px;
}

.controls-filter-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  flex: 1 1 auto;
  max-width: 100%;
}

.controls-filter-group .select-control {
  flex: 1 1 150px;
  min-width: 130px;
  max-width: 100%;
}

.search-box i {
  position: absolute;
  left: 14px;
  color: var(--text-muted);
  font-size: 14px;
  pointer-events: none;
}

.input-control {
  width: 100%;
  height: 42px;
  padding: 8px 16px 8px 40px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-main);
  font-size: 13.5px;
  font-family: inherit;
  transition: var(--transition);
  outline: none;
}

.input-control:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px var(--accent-cyan-glow);
  background: var(--bg-card);
}

.select-control {
  height: 42px;
  padding: 8px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-main);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: var(--transition);
}

.select-control:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px var(--accent-cyan-glow);
}

.select-control option {
  background: var(--bg-card);
  color: var(--text-main);
  padding: 8px;
}

/* Card Box & Dashboard Components */
.card-box {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  transition: var(--transition);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Dashboard Country Stats Cards */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}

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

@media (max-width: 640px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

.stat-card.country-card-box {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.stat-card.country-card-box:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-cyan);
}

.country-flag-badge {
  width: 56px;
  height: 40px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  border: 1px solid var(--border-light);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.country-flag-badge svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.country-title-large h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
}

.country-title-large p {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 2px;
}

/* Content Container */
.content-area {
  padding: 24px;
  flex: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Tab Sections */
.tab-content {
  display: none;
  animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.tab-content.active {
  display: block;
}

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

/* ==========================================================================
   LANDING / PORTAL HOME PAGE STYLES (MATCHING SCREENSHOT)
   ========================================================================== */
.portal-hero-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 8px 30px 8px;
  background: radial-gradient(circle at 50% 10%, rgba(6, 182, 212, 0.15), transparent 70%);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.portal-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.4);
  color: #38bdf8;
  padding: 6px 20px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.2);
  margin-bottom: 20px;
}

.portal-title {
  font-size: 28px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.5px;
  line-height: 1.3;
}

.portal-subtitle {
  font-size: 13.5px;
  color: var(--text-muted);
  margin-top: 8px;
  max-width: 720px;
}

/* Front Page Category Heading & Action Buttons (Separated, Never Overlapping) */
.portal-category-bar {
  width: 100%;
  max-width: 100%;
  position: static !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 18px;
  margin-bottom: 22px;
  gap: 14px;
  box-sizing: border-box;
}

.portal-heading-group {
  max-width: 820px;
  margin: 0 auto;
}

.portal-corner-create-action {
  position: static !important;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 6px;
}

.btn-portal-create {
  padding: 9px 18px;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 30px;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25);
  letter-spacing: 0.3px;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.btn-portal-create:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 22px rgba(2, 132, 199, 0.35);
}

.portal-corner-actions {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.portal-services-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Responsive Grid Across All Displays */
@media (max-width: 1400px) {
  .portal-services-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
  }
}

@media (max-width: 860px) {
  .portal-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (max-width: 560px) {
  .portal-services-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.portal-service-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.portal-service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(6, 182, 212, 0.5);
  box-shadow: 0 20px 48px rgba(6, 182, 212, 0.2);
}

.portal-card-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.portal-flag-badge-large {
  width: 60px;
  height: 42px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-light);
  flex-shrink: 0;
  position: relative;
  background: #0f172a;
}

.portal-card-heading-large {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.country-title-huge {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  letter-spacing: 0.3px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.country-subtitle-bold {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.portal-flag-badge {
  width: 52px;
  height: 36px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-light);
  flex-shrink: 0;
  position: relative;
  background: #0f172a;
}

.portal-flag-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.portal-flag-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flag-emoji {
  font-size: 20px;
  margin-right: 6px;
  vertical-align: middle;
}

/* Country Registered Stat Badge & Mini Bar Graph Styles */
.country-registered-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-bottom: 18px;
}

.stat-count-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

.stat-count-pill i {
  font-size: 15px;
}

.stat-count-pill.emerald i { color: var(--accent-emerald); }
.stat-count-pill.cyan i { color: var(--accent-cyan); }
.stat-count-pill.indigo i { color: var(--accent-indigo); }
.stat-count-pill.amber i { color: var(--accent-amber); }

.stat-count-pill strong {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
}

.stat-status-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-emerald);
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.12);
  padding: 4px 10px;
  border-radius: 20px;
}

.dot-indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-emerald);
  box-shadow: 0 0 8px var(--accent-emerald-glow);
  display: inline-block;
}

.job-graph-container {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px 14px;
  margin-bottom: 20px;
}

.graph-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.graph-title i {
  color: var(--accent-cyan);
}

.job-bar-item {
  margin-bottom: 12px;
}

.job-bar-item:last-child {
  margin-bottom: 0;
}

.job-bar-info {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-sub);
  margin-bottom: 6px;
}

.job-bar-info i {
  margin-right: 4px;
  font-size: 11px;
  opacity: 0.85;
}

.job-bar-val {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-main);
}

.job-bar-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.job-bar-fill {
  height: 100%;
  border-radius: 10px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.job-bar-fill.emerald { background: linear-gradient(90deg, #10b981, #34d399); }
.job-bar-fill.cyan { background: linear-gradient(90deg, #06b6d4, #38bdf8); }
.job-bar-fill.indigo { background: linear-gradient(90deg, #6366f1, #818cf8); }
.job-bar-fill.amber { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.job-bar-fill.rose { background: linear-gradient(90deg, #f43f5e, #fb7185); }

.portal-icon-box {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 20px;
}

.portal-icon-box.emerald { background: rgba(16, 185, 129, 0.15); color: var(--accent-emerald); }
.portal-icon-box.indigo { background: rgba(99, 102, 241, 0.15); color: var(--accent-indigo); }
.portal-icon-box.cyan { background: rgba(6, 182, 212, 0.15); color: var(--accent-cyan); }
.portal-icon-box.amber { background: rgba(245, 158, 11, 0.15); color: var(--accent-amber); }

.portal-card-heading h3 {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
}

.portal-card-heading span {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.portal-card-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: 12px 0 20px 0;
  line-height: 1.5;
}

.portal-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}

.portal-checklist li {
  font-size: 13px;
  color: var(--text-sub);
  display: flex;
  align-items: center;
  gap: 10px;
}

.portal-checklist li i {
  color: var(--accent-emerald);
  font-size: 14px;
}

.portal-btn-launch {
  width: 100%;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 14px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: var(--transition);
  text-transform: none;
}

.portal-btn-launch.emerald {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.portal-btn-launch.indigo {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
}

.portal-btn-launch.cyan {
  background: linear-gradient(135deg, #06b6d4, #0284c7);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(6, 182, 212, 0.3);
}

.portal-btn-launch.amber {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
}

.portal-btn-launch:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

/* Country Card Actions & Separate Add Worker Buttons */
.portal-card-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}

.portal-btn-add {
  display: none !important;
  width: 100%;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--transition);
  border: 1.5px solid transparent;
  background: #ffffff;
}

.portal-btn-add.emerald {
  color: #059669;
  border-color: #10b981;
  background: #ecfdf5;
}
.portal-btn-add.emerald:hover {
  background: #10b981;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
  transform: translateY(-1px);
}

.portal-btn-add.cyan {
  color: #0284c7;
  border-color: #06b6d4;
  background: #f0fdfa;
}
.portal-btn-add.cyan:hover {
  background: #0284c7;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.25);
  transform: translateY(-1px);
}

.portal-btn-add.indigo {
  color: #4f46e5;
  border-color: #6366f1;
  background: #eef2ff;
}
.portal-btn-add.indigo:hover {
  background: #4f46e5;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
  transform: translateY(-1px);
}

.portal-btn-add.amber {
  color: #b45309;
  border-color: #f59e0b;
  background: #fffbeb;
}
.portal-btn-add.amber:hover {
  background: #f59e0b;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
  transform: translateY(-1px);
}

/* Country Tabs Navigation Bar (Separate Workers By Country) */
.country-tabs-navigation {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.country-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  color: #334155;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

.country-tab-btn .flag {
  font-size: 18px;
  line-height: 1;
}

.country-tab-btn .badge-count {
  font-size: 11.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 12px;
  background: #f1f5f9;
  color: #64748b;
  transition: all 0.2s ease;
}

.country-tab-btn:hover {
  border-color: #94a3b8;
  background: #f8fafc;
  transform: translateY(-1px);
}

.country-tab-btn.active[data-country="ប្រទេសជប៉ុន"] {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border-color: #10b981;
  color: #065f46;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}
.country-tab-btn.active[data-country="ប្រទេសជប៉ុន"] .badge-count {
  background: #10b981;
  color: #ffffff;
}

.country-tab-btn.active[data-country="ប្រទេសសិង្ហបុរី"] {
  background: linear-gradient(135deg, #f0fdfa, #cffafe);
  border-color: #06b6d4;
  color: #0e7490;
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.2);
}
.country-tab-btn.active[data-country="ប្រទេសសិង្ហបុរី"] .badge-count {
  background: #06b6d4;
  color: #ffffff;
}

.country-tab-btn.active[data-country="ប្រទេសវៀតណាម"] {
  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
  border-color: #6366f1;
  color: #3730a3;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}
.country-tab-btn.active[data-country="ប្រទេសវៀតណាម"] .badge-count {
  background: #6366f1;
  color: #ffffff;
}

.country-tab-btn.active[data-country="ប្រទេសថៃ"] {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border-color: #f59e0b;
  color: #92400e;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}
.country-tab-btn.active[data-country="ប្រទេសថៃ"] .badge-count {
  background: #f59e0b;
  color: #ffffff;
}

body.dark-mode .country-tab-btn {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}
body.dark-mode .country-tab-btn .badge-count {
  background: #0f172a;
  color: #94a3b8;
}
body.dark-mode .country-tab-btn.active[data-country="ប្រទេសជប៉ុន"] {
  background: rgba(16, 185, 129, 0.25);
  border-color: #10b981;
  color: #34d399;
}
body.dark-mode .country-tab-btn.active[data-country="ប្រទេសសិង្ហបុរី"] {
  background: rgba(6, 182, 212, 0.25);
  border-color: #06b6d4;
  color: #38bdf8;
}
body.dark-mode .country-tab-btn.active[data-country="ប្រទេសវៀតណាម"] {
  background: rgba(99, 102, 241, 0.25);
  border-color: #6366f1;
  color: #818cf8;
}
body.dark-mode .country-tab-btn.active[data-country="ប្រទេសថៃ"] {
  background: rgba(245, 158, 11, 0.25);
  border-color: #f59e0b;
  color: #fbbf24;
}

/* Custom Table & Badges */
.table-responsive {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  display: block;
  box-sizing: border-box;
}

.custom-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
}

.custom-table th {
  background: rgba(0, 0, 0, 0.2);
  color: var(--text-muted);
  font-weight: 600;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.custom-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-sub);
  vertical-align: middle;
}

.custom-table tbody tr {
  transition: var(--transition);
}

.custom-table tbody tr:hover {
  background: var(--bg-card-hover);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.badge-success {
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent-emerald);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-warning {
  background: rgba(245, 158, 11, 0.15);
  color: var(--accent-amber);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-danger {
  background: rgba(244, 63, 94, 0.15);
  color: var(--accent-rose);
  border: 1px solid rgba(244, 63, 94, 0.3);
}

.badge-info {
  background: rgba(6, 182, 212, 0.15);
  color: var(--accent-cyan);
  border: 1px solid rgba(6, 182, 212, 0.3);
}

.worker-pill {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-indigo));
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border: 2px solid var(--border-light);
}

.worker-details h5 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}

.worker-details p {
  font-size: 12px;
  color: var(--text-muted);
}

.action-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Modal Overlay & Card */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
  animation: fadeIn 0.2s ease-out;
}

.modal-overlay.active {
  display: flex;
}

.modal-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  width: 95vw;
  max-width: 1240px;
  max-height: 94vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-card.is-fullscreen {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
}

.modal-header,
body.light-mode .modal-header {
  padding: 14px 24px;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, #0284c7 0%, #7c3aed 50%, #10b981 100%) 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f0fdf4 100%);
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* Modal Title with Colorful Icon Badge */
.modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.modal-title-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
  flex-shrink: 0;
}

.modal-title-wrap h3 {
  font-size: 15.5px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
  margin: 0;
  white-space: nowrap;
}

.modal-title-sub {
  font-size: 10.5px;
  font-weight: 600;
  color: #64748b;
  display: block;
  margin-top: 1px;
}

/* Modal Header 3 Vibrant Information Tabs (Personal, Education/Work, Employer/Workplace) */
.modal-header-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);
  flex-shrink: 0;
}

.header-tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid transparent;
  background: #ffffff;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  font-family: inherit;
}

.tab-icon-wrap {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.tab-text-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  line-height: 1.15;
}

.tab-step-num {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.8;
}

.tab-main-label {
  font-size: 12px;
  font-weight: 700;
}

/* Tab 1: Personal (Cyan / Sky Blue Theme) */
.header-tab-btn.tab-btn-personal {
  color: #0369a1;
  background: #f0f9ff;
  border-color: #bae6fd;
}
.header-tab-btn.tab-btn-personal .tab-icon-wrap {
  background: #e0f2fe;
  color: #0284c7;
}
.header-tab-btn.tab-btn-personal:hover {
  background: #e0f2fe;
  border-color: #7dd3fc;
  transform: translateY(-1px);
}
.header-tab-btn.tab-btn-personal.active {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.4) !important;
  transform: translateY(-1px);
}
.header-tab-btn.tab-btn-personal.active .tab-icon-wrap {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}
.header-tab-btn.tab-btn-personal.active .tab-step-num {
  color: #e0f2fe !important;
}

/* Tab 2: Education & Work (Purple / Violet Theme) */
.header-tab-btn.tab-btn-education {
  color: #6d28d9;
  background: #faf5ff;
  border-color: #ddd6fe;
}
.header-tab-btn.tab-btn-education .tab-icon-wrap {
  background: #ede9fe;
  color: #7c3aed;
}
.header-tab-btn.tab-btn-education:hover {
  background: #ede9fe;
  border-color: #c4b5fd;
  transform: translateY(-1px);
}
.header-tab-btn.tab-btn-education.active {
  background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.4) !important;
  transform: translateY(-1px);
}
.header-tab-btn.tab-btn-education.active .tab-icon-wrap {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}
.header-tab-btn.tab-btn-education.active .tab-step-num {
  color: #ede9fe !important;
}

/* Tab 3: Workplace & Employer (Emerald / Green Theme) */
.header-tab-btn.tab-btn-workplace {
  color: #047857;
  background: #f0fdf4;
  border-color: #a7f3d0;
}
.header-tab-btn.tab-btn-workplace .tab-icon-wrap {
  background: #dcfce7;
  color: #059669;
}
.header-tab-btn.tab-btn-workplace:hover {
  background: #dcfce7;
  border-color: #86efac;
  transform: translateY(-1px);
}
.header-tab-btn.tab-btn-workplace.active {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.4) !important;
  transform: translateY(-1px);
}
.header-tab-btn.tab-btn-workplace.active .tab-icon-wrap {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}
.header-tab-btn.tab-btn-workplace.active .tab-step-num {
  color: #d1fae5 !important;
}

/* Action Buttons (Fullscreen & Close) */
.btn-icon-fullscreen {
  background: #f0f9ff !important;
  color: #0284c7 !important;
  border: 1px solid #bae6fd !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}

.btn-icon-fullscreen:hover {
  background: #0284c7 !important;
  color: #ffffff !important;
  transform: scale(1.08) !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3) !important;
}

.btn-icon-close {
  background: #fef2f2 !important;
  color: #ef4444 !important;
  border: 1px solid #fecaca !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}

.btn-icon-close:hover {
  background: #ef4444 !important;
  color: #ffffff !important;
  transform: scale(1.08) !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

@media (max-width: 768px) {
  .modal-header {
    flex-wrap: wrap;
    gap: 12px;
  }
  .modal-header-tabs {
    order: 3;
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
  }
}

.modal-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-body {
  padding: 24px 28px;
  flex: 1;
}

.form-tab-panel {
  animation: fadeIn 0.2s ease-out;
}

.modal-footer {
  padding: 16px 28px;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-card);
  position: sticky;
  bottom: 0;
  z-index: 30;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.05);
}

.tab-indicator-pill {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-input);
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border-light);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.25s ease;
}

.tab-indicator-pill.indicator-personal {
  background: #f0f9ff;
  color: #0284c7;
  border-color: #bae6fd;
}

.tab-indicator-pill.indicator-education {
  background: #faf5ff;
  color: #7c3aed;
  border-color: #ddd6fe;
}

.tab-indicator-pill.indicator-workplace {
  background: #f0fdf4;
  color: #059669;
  border-color: #a7f3d0;
}

/* Form Layout Grid - 3 columns for spacious modern look */
.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group.span-2 {
  grid-column: span 2;
}

.address-pob-group {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 20px;
}

.address-builder-card,
.pob-builder-card {
  grid-column: 1 / -1;
  width: 100%;
}

.pob-horizontal-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 768px) {
  .pob-horizontal-row {
    grid-template-columns: 1fr;
  }
}

.address-horizontal-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 900px) {
  .address-horizontal-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 550px) {
  .address-horizontal-row {
    grid-template-columns: 1fr;
  }
}

.btn-quick-add {
  flex-shrink: 0;
  width: 32px;
  height: 38px;
  border: 1.5px solid #0284c7;
  background: #f0f9ff;
  color: #0284c7;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: all 0.15s ease;
}

.btn-quick-add:hover {
  background: #0284c7;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(2, 132, 199, 0.25);
}

/* Quick Add Location Centered Modal */
#quick-add-location-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(15, 23, 42, 0.7) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  z-index: 999999 !important;
  margin: 0 !important;
  padding: 16px !important;
}

#quick-add-location-modal.active,
#quick-add-location-modal[style*="display: flex"] {
  display: flex !important;
}

#quick-add-location-modal .modal-card {
  max-width: 480px !important;
  width: 95% !important;
  background: #ffffff !important;
  border-radius: 14px !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35) !important;
  overflow: hidden !important;
  border: 2px solid #0284c7 !important;
  margin: auto !important;
  animation: modalPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes modalPopIn {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(-12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Photo Upload Component in Modal (Reserved Top-Right Corner - Standard 4x6 Frame) */
.photo-upload-group {
  grid-column: 3;
  grid-row: 1 / span 3;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.photo-upload-group > label {
  text-align: center;
  width: 100%;
  margin-bottom: 8px;
}

.photo-dropzone {
  width: 160px;
  height: 240px; /* Exact 4x6 Aspect Ratio (160 x 240) */
  background: var(--bg-input);
  border: 2px dashed var(--border-light);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.photo-dropzone:hover {
  border-color: var(--accent-cyan);
  background: rgba(2, 132, 199, 0.04);
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.12);
}

.photo-dropzone.dragover {
  border-color: var(--accent-cyan);
  background: rgba(2, 132, 199, 0.08);
  transform: scale(1.02);
}

.photo-dropzone.has-photo {
  border-style: solid;
  border-color: var(--accent-cyan);
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.18);
}

.photo-preview-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.worker-photo-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  background: #ffffff;
}

.photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 16px 10px;
  box-sizing: border-box;
  background: transparent;
  border: none;
}

.photo-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(2, 132, 199, 0.1);
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: var(--transition);
}

.photo-dropzone:hover .photo-icon-circle {
  transform: scale(1.08);
  background: var(--accent-cyan);
  color: #ffffff;
}

.photo-prompt-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.3;
}

.photo-hint-text {
  font-size: 11px;
  color: var(--text-muted);
}

.photo-actions-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  width: 100%;
}

.photo-actions-bar .btn {
  padding: 6px 11px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.btn-download {
  background: #10b981;
  color: #ffffff;
  border: 1px solid #059669;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
  cursor: pointer;
  transition: var(--transition);
}

.btn-download:hover {
  background: #059669;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.35);
  transform: translateY(-1px);
}

/* Floating quick-download badge on photo preview */
.photo-float-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.75);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  transition: var(--transition);
  z-index: 10;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.photo-float-btn:hover {
  background: #10b981;
  color: #ffffff;
  transform: scale(1.12);
  border-color: #ffffff;
}

/* CV Profile Photo Image */
.cv-profile-img {
  width: 90px;
  height: 135px; /* 4x6 ratio */
  border-radius: 6px;
  object-fit: cover;
  border: 3px solid var(--accent-cyan);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body.light-mode .photo-dropzone {
  background: #f8fafc;
  border-color: #cbd5e1;
}

body.light-mode .photo-dropzone:hover {
  background: #f0f9ff;
  border-color: #0284c7;
}

/* Worker Documents Storage Component (Tab 2 - Reserved Top-Right Corner) */
.docs-storage-group {
  grid-column: 3;
  grid-row: 1 / span 4;
  display: flex;
  flex-direction: column;
}

.docs-storage-group > label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13.5px;
  color: #5b21b6;
  margin-bottom: 8px;
}

.docs-storage-card {
  background: #fdfcff;
  border: 1.5px solid #ddd6fe;
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.05);
  flex: 1;
}

.doc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 11px;
  border-radius: 9px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  gap: 10px;
}

.doc-item:hover {
  border-color: #cbd5e1;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

.doc-item.has-doc {
  border-color: #a7f3d0;
  background: #f0fdf4;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08);
}

.doc-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.doc-icon-badge {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.doc-icon-cyan { background: #e0f2fe; color: #0284c7; }
.doc-icon-violet { background: #ede9fe; color: #7c3aed; }
.doc-icon-amber { background: #fef3c7; color: #d97706; }
.doc-icon-rose { background: #ffe4e6; color: #e11d48; }

.doc-info {
  min-width: 0;
  flex: 1;
}

.doc-title {
  font-size: 12.5px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.doc-meta {
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.doc-item.has-doc .doc-meta {
  color: #059669;
  font-weight: 500;
}

.doc-item-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.btn-doc-action {
  border: none;
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 11.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.2s ease;
  font-family: inherit;
  font-weight: 500;
}

.btn-doc-upload {
  background: #f5f3ff;
  color: #7c3aed;
  border: 1px dashed #c4b5fd;
}

.btn-doc-upload:hover {
  background: #ede9fe;
  color: #6d28d9;
  border-color: #a78bfa;
}

.btn-doc-view {
  background: #ede9fe;
  color: #7c3aed;
}

.btn-doc-view:hover {
  background: #ddd6fe;
  transform: scale(1.06);
}

.btn-doc-download {
  background: #ecfdf5;
  color: #059669;
}

.btn-doc-download:hover {
  background: #d1fae5;
  transform: scale(1.06);
}

.btn-doc-remove {
  background: #fff1f2;
  color: #e11d48;
}

.btn-doc-remove:hover {
  background: #ffe4e6;
  transform: scale(1.06);
}

/* CV Documents Grid */
.cv-docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.cv-doc-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  transition: var(--transition);
}

.cv-doc-card:hover {
  border-color: #cbd5e1;
  background: #f1f5f9;
}

@media (max-width: 1100px) {
  .photo-upload-group,
  .docs-storage-group {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
}

@media (max-width: 1100px) {
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .form-group.span-2 {
    grid-column: span 2;
  }
}

@media (max-width: 680px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-group.span-2 {
    grid-column: span 1;
  }
  .form-group.full-width {
    grid-column: span 1;
  }
  .address-pob-group {
    grid-template-columns: 1fr;
  }
}

.form-group label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-sub);
}

.form-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-main);
  font-size: 14px;
  font-family: inherit;
  outline: none;
}

.form-input:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 0 3px var(--accent-cyan-glow);
}

/* Printable CV Profile View */
.cv-document {
  background: #ffffff;
  color: #1e293b;
  border-radius: var(--radius-lg);
  padding: 32px;
  font-family: 'Inter', 'Noto Sans Khmer', sans-serif;
  box-shadow: var(--shadow-md);
}

.cv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #06b6d4;
  padding-bottom: 20px;
  margin-bottom: 24px;
}

.cv-profile-photo {
  width: 90px;
  height: 135px; /* 4x6 ratio */
  border-radius: 6px;
  background: #0f172a;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  border: 3px solid #06b6d4;
  overflow: hidden;
}

.cv-main-info h2 {
  font-size: 22px;
  color: #0f172a;
  font-weight: 700;
}

.cv-main-info h4 {
  font-size: 14px;
  color: #06b6d4;
  font-weight: 600;
  margin-top: 2px;
}

.cv-section {
  margin-bottom: 20px;
}

.cv-section-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 6px;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  font-size: 13px;
}

.cv-item strong {
  color: #64748b;
  display: block;
  font-size: 11px;
}

.cv-skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cv-skill-tag {
  background: #e0f2fe;
  color: #0369a1;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

/* Payslip Printable Layout */
.payslip-box {
  background: #ffffff;
  color: #0f172a;
  padding: 32px;
  border-radius: var(--radius-lg);
  font-family: 'Inter', 'Noto Sans Khmer', sans-serif;
  border: 1px solid #e2e8f0;
}

.payslip-header {
  text-align: center;
  border-bottom: 2px solid #0f172a;
  padding-bottom: 16px;
  margin-bottom: 20px;
}

.payslip-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
}

.payslip-header p {
  font-size: 12px;
  color: #64748b;
}

.payslip-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
  font-size: 13px;
  background: #f8fafc;
  padding: 16px;
  border-radius: 8px;
}

.payslip-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
  font-size: 13px;
}

.payslip-table th, .payslip-table td {
  border: 1px solid #cbd5e1;
  padding: 8px 12px;
}

.payslip-table th {
  background: #e2e8f0;
  font-weight: 600;
}

.payslip-total {
  font-size: 16px;
  font-weight: 700;
  color: #059669;
  text-align: right;
  padding: 12px;
  background: #ecfdf5;
  border-radius: 8px;
  border: 1px solid #a7f3d0;
}

.payslip-footer-signatures {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  text-align: center;
  font-size: 12px;
  color: #64748b;
}

.signature-line {
  margin-top: 40px;
  border-top: 1px solid #94a3b8;
  width: 160px;
}

/* Print CSS */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
  }

  .sidebar, .top-bar, .controls-bar, .modal-header, .modal-footer, .btn, .no-print {
    display: none !important;
  }

  .main-wrapper {
    margin-left: 0 !important;
  }

  .modal-overlay {
    position: static !important;
    background: none !important;
    padding: 0 !important;
    display: block !important;
  }

  .modal-card {
    border: none !important;
    box-shadow: none !important;
    max-width: 100% !important;
  }

  .cv-document, .payslip-box {
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
  }
}

/* ==========================================================================
   Comprehensive Light Mode Design System (White Background / ផ្ទៃពណ៌ស)
   ========================================================================== */
body.light-mode {
  background-color: #f8fafc;
  color: #0f172a;
}

body.light-mode .main-wrapper {
  background-color: #f8fafc;
}

/* Sidebar in Light Mode */
body.light-mode .sidebar {
  background: #ffffff;
  border-right: 1px solid #e2e8f0;
  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.03);
}

body.light-mode .brand-logo {
  border-bottom: 1px solid #f1f5f9;
}

body.light-mode .brand-title h2 {
  color: #0f172a;
}

body.light-mode .brand-title p {
  color: #0284c7;
}

body.light-mode .brand-icon-box {
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
}

body.light-mode .nav-item {
  color: #475569;
}

body.light-mode .nav-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}

body.light-mode .nav-item.active {
  background: #f0f9ff;
  color: #0284c7;
  border-left-color: #0284c7;
}

body.light-mode .sidebar-footer {
  border-top: 1px solid #f1f5f9;
}

/* Top Bar in Light Mode */
body.light-mode .top-bar {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

body.light-mode .header-brand-logo {
  border-right: 1px solid #e2e8f0;
}

body.light-mode .header-brand-logo .brand-title h2 {
  color: #0f172a;
}

body.light-mode .header-logo-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

body.light-mode .btn-icon {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #334155;
}

body.light-mode .btn-icon:hover {
  background: #e0f2fe;
  color: #0284c7;
  border-color: #0284c7;
}

/* Buttons in Light Mode */
body.light-mode .btn-secondary {
  background: #ffffff;
  color: #334155;
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

body.light-mode .btn-secondary:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #94a3b8;
}

body.light-mode .btn-danger {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fca5a5;
}

body.light-mode .btn-danger:hover {
  background: #dc2626;
  color: #ffffff;
}

/* Inputs & Form Controls in Light Mode */
body.light-mode .input-control,
body.light-mode .select-control,
body.light-mode .form-input {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}

body.light-mode .input-control:focus,
body.light-mode .select-control:focus,
body.light-mode .form-input:focus {
  background: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.16);
}

body.light-mode .select-control option {
  background: #ffffff;
  color: #0f172a;
}

/* Tables in Light Mode */
body.light-mode .custom-table th {
  background: #f8fafc;
  color: #475569;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 700;
}

body.light-mode .custom-table td {
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
}

body.light-mode .custom-table tbody tr:hover {
  background: #f8fafc;
}

body.light-mode .avatar {
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Badges in Light Mode */
body.light-mode .badge-info {
  background: #e0f2fe;
  color: #0369a1;
  border-color: #bae6fd;
}

body.light-mode .badge-success {
  background: #dcfce7;
  color: #15803d;
  border-color: #bbf7d0;
}

body.light-mode .badge-warning {
  background: #fef3c7;
  color: #b45309;
  border-color: #fde68a;
}

body.light-mode .badge-danger {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fecaca;
}

/* Card Box & Dashboard in Light Mode */
body.light-mode .card-box {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body.light-mode .card-header {
  border-bottom-color: #f1f5f9;
}

body.light-mode .stat-card.country-card-box {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body.light-mode .stat-card.country-card-box:hover {
  border-color: #0284c7;
  box-shadow: 0 8px 20px rgba(2, 132, 199, 0.12);
}

/* Home Portal Landing in Light Mode */
body.light-mode .portal-hero-container {
  background: radial-gradient(circle at 50% 10%, rgba(2, 132, 199, 0.08), transparent 70%);
}

body.light-mode .hero-brand-logo-box {
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #f0f9ff 60%, #e0f2fe 100%);
  border: 3.5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 
    0 0 0 2.5px rgba(186, 230, 253, 0.8),
    0 10px 30px rgba(2, 132, 199, 0.22),
    0 0 45px rgba(56, 189, 248, 0.38),
    0 0 75px rgba(186, 230, 253, 0.55),
    inset 0 3px 8px rgba(255, 255, 255, 1),
    inset 0 -3px 8px rgba(2, 132, 199, 0.12);
}

body.light-mode .hero-company-name {
  background: linear-gradient(135deg, #0f172a 0%, #0369a1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

body.light-mode .hero-company-sub {
  color: #64748b;
}

body.light-mode .portal-title {
  color: #0f172a;
}

body.light-mode .portal-badge {
  background: #e0f2fe;
  border-color: #7dd3fc;
  color: #0284c7;
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.1);
}

body.light-mode .portal-service-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}

body.light-mode .portal-service-card:hover {
  border-color: #0284c7;
  box-shadow: 0 12px 32px rgba(2, 132, 199, 0.14);
}

body.light-mode .country-title-huge {
  color: #0f172a;
  text-shadow: none;
}

body.light-mode .country-registered-stat {
  background: #f8fafc;
  border-color: #e2e8f0;
}

body.light-mode .stat-count-pill strong {
  color: #0f172a;
}

body.light-mode .job-graph-container {
  background: #f8fafc;
  border-color: #e2e8f0;
}

body.light-mode .job-bar-track {
  background: #e2e8f0;
}

body.light-mode .portal-flag-badge,
body.light-mode .portal-flag-badge-large {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Modals in Light Mode */
body.light-mode .modal-overlay {
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(6px);
}

body.light-mode .modal-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.16);
}

body.light-mode .modal-footer {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

/* Responsive Breakpoints & Device Scaling */
@media (max-width: 1280px) {
  .sidebar {
    width: 250px;
  }
  .main-wrapper {
    margin-left: 250px;
    width: calc(100% - 250px);
    max-width: calc(100% - 250px);
  }
  .content-area {
    padding: 20px;
  }
  .portal-corner-actions {
    position: static;
    justify-content: flex-end;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }
}

@media (max-width: 1024px) {
  .btn-sidebar-toggle {
    display: inline-flex;
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100vh;
    z-index: 50;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
  }
  .sidebar.mobile-open {
    left: 0;
  }
  .main-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .content-area {
    padding: 16px;
  }
  .top-bar {
    padding: 0 16px;
    height: 64px;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .top-bar {
    padding: 0 12px;
    height: 58px;
  }
  .header-title h1 {
    font-size: 15px;
  }
  .header-title p {
    display: none;
  }
  .btn-header-profile .user-info-text {
    display: none;
  }
  .btn-header-profile {
    padding: 3px 6px;
  }
  .content-area {
    padding: 12px;
  }
  .portal-services-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .controls-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .controls-bar .search-box {
    max-width: 100%;
    width: 100%;
  }
  .controls-filter-group {
    width: 100%;
  }
  .controls-filter-group .select-control {
    width: 100%;
    flex: 1 1 100%;
  }
  .ocwc-table-topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .ocwc-table-tools {
    width: 100%;
    justify-content: flex-start;
  }
  .ocwc-search-input-wrap {
    width: 100%;
  }
  .ocwc-search-input {
    width: 100%;
  }
  .btn-tool-compact {
    flex: 1 1 auto;
    justify-content: center;
  }
  .modal-overlay {
    padding: 8px;
  }
  .modal-card {
    width: 98vw;
    max-width: 98vw;
    max-height: 96vh;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-group.full-width {
    grid-column: span 1;
  }
}

@media (max-width: 480px) {
  .top-bar {
    padding: 0 8px;
  }
  .content-area {
    padding: 8px;
  }
  .hero-company-name {
    font-size: 18px !important;
  }
  .hero-company-sub {
    font-size: 11.5px !important;
  }
  .portal-corner-actions {
    justify-content: center;
    gap: 6px;
  }
  .portal-corner-actions .btn {
    font-size: 11.5px;
    padding: 5px 8px;
  }
}

/* ==========================================================================
   MoLVT / Singapore Official 3-Page Application Form Styles
   ========================================================================== */
.app-form-sheet {
  background: #ffffff;
  color: #1e293b;
  width: 100%;
  max-width: 840px;
  min-height: 1120px;
  margin: 0 auto 30px auto;
  padding: 32px 36px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
  border-radius: 4px;
  font-family: 'Inter', 'Noto Sans Khmer', -apple-system, sans-serif;
  font-size: 11.5px;
  line-height: 1.4;
  box-sizing: border-box;
  position: relative;
}

.app-form-sheet:last-child {
  margin-bottom: 0;
}

.app-form-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  border-bottom: 2px solid #244b7a;
  padding-bottom: 10px;
  gap: 16px;
}

.app-form-header-title {
  font-size: 17px;
  font-weight: 800;
  color: #244b7a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.app-form-header-title small {
  font-size: 13.5px;
  font-weight: 700;
  display: block;
  margin-top: 2px;
}

.app-form-header-sub {
  font-size: 11px;
  color: #475569;
  margin-top: 6px;
  line-height: 1.5;
}

.app-form-photo-frame {
  width: 105px;
  height: 140px; /* Exact 4x6 Aspect Ratio */
  border: 1px dashed #94a3b8;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 4px;
}

.app-form-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-section-banner {
  background: #244b7a;
  color: #ffffff;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 12px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  margin-bottom: 6px;
}

.app-table th,
.app-table td {
  border: 1px solid #cbd5e1;
  padding: 5.5px 8px;
  vertical-align: middle;
}

.app-table th {
  background: #f1f5f9;
  color: #1e293b;
  font-weight: 600;
  text-align: left;
}

.app-field-label {
  font-weight: 600;
  color: #334155;
  display: block;
  font-size: 10.5px;
  margin-bottom: 1px;
}

.app-field-val {
  color: #0f172a;
  font-size: 11.5px;
  font-weight: 500;
}

.app-tip-box {
  background: #f8fafc;
  border-left: 3px solid #0284c7;
  padding: 4px 10px;
  font-size: 10px;
  color: #475569;
  font-style: italic;
  margin: 4px 0 8px 0;
}

.app-declaration-text {
  font-size: 10.5px;
  line-height: 1.6;
  color: #334155;
  text-align: justify;
  margin: 8px 0 16px 0;
}

.app-signatures-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
}

.app-sig-block {
  width: 46%;
}

.app-sig-line {
  border-bottom: 1px solid #475569;
  height: 48px;
  margin-bottom: 6px;
  display: flex;
  align-items: flex-end;
  padding-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #1e3a8a;
  font-style: italic;
}

.app-sig-label {
  font-size: 10.5px;
  color: #64748b;
  line-height: 1.3;
}

.app-stamp-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-footer-note {
  font-size: 9.5px;
  color: #94a3b8;
  font-style: italic;
  margin-top: 20px;
  border-top: 1px dashed #cbd5e1;
  padding-top: 6px;
  text-align: center;
}

@media print {
  body * {
    visibility: hidden;
  }
  #printable-cv, #printable-cv *,
  #printable-app-form, #printable-app-form *,
  #printable-invoice, #printable-invoice *,
  #printable-khmer-app, #printable-khmer-app *,
  #printable-ocwc-letter, #printable-ocwc-letter *,
  #printable-modal-ocwc-letter, #printable-modal-ocwc-letter *,
  #printable-ocwc-worker-list, #printable-ocwc-worker-list *,
  #printable-modal-ocwc-worker-list, #printable-modal-ocwc-worker-list *,
  #modal-ocwc-letter-paper, #modal-ocwc-letter-paper *,
  #modal-ocwc-worker-list-paper, #modal-ocwc-worker-list-paper *,
  .ocwc-letter-sheet, .ocwc-letter-sheet *,
  .ocwc-worker-sheet, .ocwc-worker-sheet * {
    visibility: visible !important;
  }
  #printable-cv {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 20px;
    box-shadow: none;
    border: none;
  }
  #printable-app-form {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  #printable-invoice {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10mm 15mm !important;
    box-shadow: none !important;
    border: none !important;
    background: #ffffff !important;
    color: #1e293b !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  #printable-khmer-app {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 15mm 20mm !important;
    box-shadow: none !important;
    border: none !important;
    background: #ffffff !important;
    color: #000000 !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .app-form-sheet {
    page-break-after: always;
    break-after: page;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 10mm 14mm !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
  }
  .app-form-sheet:last-child {
    page-break-after: auto;
    break-after: auto;
  }
  #printable-cv .cv-profile-photo span {
    display: none !important;
  }
  .modal-overlay {
    position: static;
    background: transparent;
    padding: 0;
    display: block !important;
  }
  .modal-card {
    box-shadow: none;
    border: none;
    max-width: 100%;
  }
  .modal-header, .modal-footer {
    display: none !important;
  }
}

/* ==========================================================================
   OFFICIAL INVOICE & RECEIPT STYLING
   ========================================================================== */
.invoice-workspace {
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 1200px) {
  .invoice-workspace {
    grid-template-columns: 1fr;
  }
}

.invoice-preview-wrapper {
  background: #475569;
  border-radius: var(--radius-md);
  padding: 24px;
  overflow-x: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 580px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
}

body.light-mode .invoice-preview-wrapper {
  background: #cbd5e1;
}

/* The Official Invoice Document Sheet */
.official-invoice-sheet {
  background: #ffffff !important;
  color: #1e293b !important;
  font-family: 'Inter', 'Noto Sans Khmer', -apple-system, BlinkMacSystemFont, sans-serif;
  width: 860px;
  min-width: 840px;
  padding: 30px 36px 36px 36px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  position: relative;
}

/* Header */
.inv-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 12px;
}

.inv-company-brand {
  flex: 1;
}

.inv-kh-name {
  font-family: 'Kantumruy Pro', 'Noto Sans Khmer', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: #0284c7;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.inv-en-name {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 8px 0;
  letter-spacing: 0.3px;
  line-height: 1.2;
}

.inv-meta-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #475569;
  margin-top: 3px;
  font-family: 'Kantumruy Pro', 'Noto Sans Khmer', sans-serif;
}

.inv-meta-pin,
.inv-meta-phone {
  color: #ef4444;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
}

.inv-title-area {
  text-align: right;
  flex-shrink: 0;
}

.inv-sub-title {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.inv-main-title {
  font-size: 21px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: 0.6px;
  margin: 2px 0 6px 0;
}

.inv-no-badge {
  font-size: 16px;
}

.inv-no-label {
  font-weight: 800;
  color: #0284c7;
}

.inv-no-val {
  font-weight: 800;
  color: #0284c7;
  margin-left: 4px;
}

/* Meta Card */
.inv-meta-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 12px 20px;
  margin: 16px 0 16px 0;
  font-size: 13.5px;
}

.inv-meta-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inv-meta-right {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: right;
}

.inv-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.inv-meta-item.justify-end {
  justify-content: flex-end;
}

.inv-meta-lbl {
  font-weight: 700;
  color: #0f172a;
}

.inv-meta-v {
  color: #334155;
  font-weight: 500;
}

.inv-meta-v.strong {
  font-weight: 700;
  color: #0f172a;
}

.inv-rate-pill {
  border: 1.5px dashed #0284c7;
  background: #f0f9ff;
  color: #0284c7;
  font-weight: 800;
  padding: 2px 12px;
  border-radius: 6px;
  font-size: 13.5px;
  display: inline-block;
  letter-spacing: 0.2px;
}

/* Table */
.inv-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
  font-size: 13.5px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
}

.inv-table thead th {
  background: #0284c7 !important;
  color: #ffffff !important;
  padding: 10px 8px;
  font-weight: 700;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 13.5px;
  letter-spacing: 0.2px;
}

.inv-table thead th:last-child {
  border-right: none;
}

.inv-table tbody tr {
  border-bottom: 1px solid #cbd5e1;
}

.inv-table tbody tr:last-child {
  border-bottom: none;
}

.inv-table tbody td {
  border-right: 1px solid #cbd5e1;
  vertical-align: middle;
}

.inv-table tbody td:last-child {
  border-right: none;
}

/* Bottom Layout */
.inv-bottom-layout {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-top: 6px;
}

.inv-bank-box {
  flex: 1.25;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  background: #ffffff;
}

.inv-bank-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  line-height: 1.4;
}

.inv-bank-row {
  display: flex;
  gap: 6px;
}

.inv-bank-lbl {
  font-weight: 700;
  color: #0f172a;
}

.inv-bank-name.aba {
  font-weight: 800;
  color: #0284c7;
}

.inv-bank-name.scb {
  font-weight: 800;
  color: #4f46e5;
  font-family: 'Noto Sans Thai', sans-serif;
}

.inv-bank-acc {
  font-weight: 700;
  color: #0f172a;
}

.inv-bank-holder {
  font-weight: 700;
  color: #0f172a;
}

/* Totals Box */
.inv-totals-box {
  flex: 0.95;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.inv-total-pax-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14.5px;
  font-weight: 700;
  color: #0f172a;
  padding: 0 4px 6px 4px;
}

.inv-pax-val {
  font-weight: 800;
}

.inv-grand-total-card {
  background: #e0f2fe;
  border-radius: 8px;
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.inv-grand-lbl {
  font-size: 15.5px;
  font-weight: 800;
  color: #0284c7;
  letter-spacing: 0.5px;
}

.inv-grand-val {
  font-size: 19px;
  font-weight: 800;
  color: #0284c7;
}

.inv-baht-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 4px 0 4px;
  font-size: 14.5px;
}

.inv-baht-lbl {
  font-weight: 700;
  color: #0284c7;
}

.inv-baht-val {
  font-weight: 800;
  color: #0284c7;
  font-size: 16px;
}

/* Saved Invoices Sidebar */
.saved-invoices-box {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 20px;
}

.saved-invoice-item {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: var(--transition);
}

.saved-invoice-item:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-cyan);
}

.saved-invoice-item.active {
  border-color: var(--accent-cyan);
  background: rgba(6, 182, 212, 0.1);
}

.modal-header-actions .btn {
  white-space: nowrap;
}

/* ==========================================================================
   OFFICIAL 1-PAGE KHMER APPLICATION LETTER (SINGAPORE WORK PERMIT)
   Faithful reproduction of Official Document Template
   ========================================================================== */
.khmer-application-doc {
  background: #ffffff !important;
  color: #000000 !important;
  font-family: 'Siemreap', 'Noto Serif Khmer', 'Kantumruy Pro', 'Khmer OS Siemreap', serif;
  width: 794px !important;
  min-width: 794px !important;
  max-width: 794px !important;
  flex-shrink: 0;
  min-height: 1123px;
  padding: 68px 64px 64px 64px;
  box-sizing: border-box;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  line-height: 2.25;
  font-size: 15px;
  position: relative;
  letter-spacing: 0.1px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.kh-doc-header {
  text-align: center !important;
  margin-bottom: 8px;
}

.kh-doc-title {
  font-family: 'Moul', 'Khmer OS Muol Light', serif;
  font-size: 22px;
  font-weight: normal;
  color: #000000;
  margin: 0 0 8px 0;
  line-height: 1.45;
  letter-spacing: 0.5px;
  text-align: center;
}

.kh-doc-subtitle {
  font-family: 'Moul', 'Khmer OS Muol Light', serif;
  font-size: 17.5px;
  font-weight: normal;
  color: #000000;
  margin: 0 0 6px 0;
  line-height: 1.45;
  letter-spacing: 0.3px;
  text-align: center;
}

.kh-doc-ornament {
  margin-top: 6px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.kh-ornament-img {
  height: 20px;
  width: auto;
  display: inline-block;
  object-fit: contain;
}

.kh-doc-particulars {
  margin-bottom: 8px;
  font-size: 14.8px;
}

.kh-doc-line {
  display: flex;
  align-items: baseline;
  width: 100%;
  margin-bottom: 6px;
  line-height: 2.3;
}

.kh-lbl {
  color: #000000;
  margin-right: 2px;
  font-weight: 600;
  white-space: nowrap;
}

.kh-dotted-field {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  border-bottom: 1.5px dotted #000000;
  min-height: 23px;
  position: relative;
  margin: 0 3px;
  padding: 0 4px;
}

.kh-field-name { min-width: 170px; flex: 1.2; }
.kh-field-gender { min-width: 55px; }
.kh-field-age { min-width: 42px; }
.kh-field-race { min-width: 55px; }
.kh-field-nat { min-width: 55px; }
.kh-field-house { min-width: 85px; flex: 0.8; }
.kh-field-street { min-width: 85px; flex: 0.8; }
.kh-field-group { min-width: 85px; flex: 0.8; }
.kh-field-village { min-width: 130px; flex: 1.2; }
.kh-field-commune { min-width: 110px; flex: 1; }
.kh-field-district { min-width: 110px; flex: 1; }
.kh-field-province { min-width: 110px; flex: 1; }
.kh-field-sector { min-width: 250px; flex: 1; }

.kh-field-val {
  color: #000000 !important;
  font-weight: 700;
  outline: none;
  white-space: nowrap;
}

/* Blank form mode (Shows pure dotted template for manual writing) */
.khmer-application-doc.mode-blank .kh-field-val {
  visibility: hidden !important;
}

.kh-doc-salutation {
  text-align: center !important;
  margin: 10px 0 10px 0;
  width: 100%;
  display: block;
}

.kh-salut-lead {
  font-weight: 700;
  font-size: 15.5px;
  margin-bottom: 4px;
  text-align: center !important;
  display: block;
}

.kh-salut-target {
  font-weight: 700;
  font-size: 16.5px;
  color: #000000;
  text-align: center !important;
  display: block;
}

.kh-doc-subject {
  font-size: 14.8px;
  margin-bottom: 8px;
  font-weight: 600;
  display: flex;
  align-items: baseline;
  width: 100%;
}

.kh-subj-label {
  font-weight: 700;
  margin-right: 4px;
  white-space: nowrap;
}

.kh-subj-text {
  white-space: nowrap;
}

.kh-doc-body {
  font-size: 14.8px;
  text-align: left;
  line-height: 2.2;
  margin-bottom: 8px;
  word-spacing: normal;
  letter-spacing: normal;
}

.kh-doc-p {
  text-indent: 48px;
  margin: 0 0 12px 0;
  text-align: left;
  word-spacing: normal;
}

.kh-doc-closing {
  text-align: center !important;
  margin: 8px 0 8px 0;
  font-weight: 600;
  font-size: 14.8px;
  width: 100%;
  display: block;
}

.kh-doc-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 10px;
  font-size: 14.2px;
}

.kh-doc-attach {
  flex: 1.1;
  line-height: 2.1;
}

.kh-attach-title {
  font-weight: 700;
  margin-bottom: 6px;
}

.kh-attach-item {
  color: #000000;
}

.kh-doc-sig {
  flex: 0.9;
  text-align: center !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.kh-sig-date {
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 14.2px;
  white-space: nowrap;
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.kh-sig-thumb-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
  text-align: center;
}

.kh-sig-thumb-space {
  width: 90px;
  height: 80px; /* Clean thumbprint gap, NO BORDER matching original paper */
  margin: 0 auto 6px auto;
  background: transparent;
}

.kh-sig-name {
  margin-top: 4px;
  font-weight: 600;
  font-size: 14.8px;
  text-align: center;
  display: flex;
  align-items: baseline;
  justify-content: center;
}

/* Print Styles for Perfect 1-Page A4 Output */
@media print {
  body {
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .standalone-nav,
  .modal-header,
  .modal-footer,
  .no-print,
  #invoice-img-modal,
  .sidebar,
  .header,
  .modal-overlay:not(#khmer-app-modal) {
    display: none !important;
  }
  .modal-overlay#khmer-app-modal {
    position: static !important;
    display: block !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  .modal-overlay#khmer-app-modal .modal-card {
    box-shadow: none !important;
    border: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }
  .modal-overlay#khmer-app-modal .modal-body {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .khmer-application-doc {
    box-shadow: none !important;
    border: none !important;
    margin: 0 auto !important;
    padding: 16mm 18mm 16mm 18mm !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 265mm !important;
    height: 265mm !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    page-break-after: avoid !important;
    page-break-inside: avoid !important;
    box-sizing: border-box !important;
  }
  @page {
    size: A4 portrait;
    margin: 8mm 10mm;
  }
}

/* ==========================================================================
   Singapore Work Permit Application Form (3 Pages) - Faithful Replica
   ========================================================================== */
.sg-form-document {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  background: transparent;
  font-family: 'Inter', 'Kantumruy Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #000000;
  width: 100%;
}

.sg-page-sheet {
  background: #ffffff;
  width: 794px; /* Standard A4 at 96dpi */
  min-height: 1120px;
  box-sizing: border-box;
  padding: 34px 38px 28px 38px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
  border: 1px solid #d1d5db;
  position: relative;
  page-break-after: always;
  display: flex;
  flex-direction: column;
}

.sg-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid #2b5797;
  gap: 16px;
}

.sg-header-left {
  flex: 1;
}

.sg-title {
  font-size: 19px;
  font-weight: 800;
  color: #2b5797;
  margin: 0 0 2px 0;
  letter-spacing: 0.5px;
  line-height: 1.15;
}

.sg-subtitle {
  font-size: 15px;
  font-weight: 700;
  color: #2b5797;
  margin: 0 0 8px 0;
  line-height: 1.2;
}

.sg-meta-block {
  font-size: 10px;
  color: #64748b;
  line-height: 1.35;
}

.sg-km-meta {
  font-family: 'Kantumruy Pro', sans-serif;
  font-size: 9.5px;
  color: #64748b;
}

.sg-photo-box {
  width: 115px;
  height: 150px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.sg-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sg-photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 10px;
  font-weight: 600;
  gap: 6px;
}

.sg-banner {
  background: #2b5797;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 4px 10px;
  margin-top: 10px;
  margin-bottom: 0;
  line-height: 1.25;
}

.sg-banner-km {
  font-family: 'Kantumruy Pro', sans-serif;
  font-size: 11px;
  font-weight: 600;
}

.sg-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 6px;
  table-layout: fixed;
}

.sg-table td, .sg-table th {
  border: 1px solid #cbd5e1;
  padding: 4.5px 8px;
  vertical-align: middle;
}

.sg-th-row th {
  background: #2b5797 !important;
  color: #ffffff !important;
  font-weight: 700;
  padding: 5px 8px;
  vertical-align: middle;
}

.sg-th-row th .sg-en-lbl {
  color: #ffffff !important;
  font-size: 11px;
  font-weight: 700;
}

.sg-th-row th .sg-km-lbl {
  color: #e0f2fe !important;
  font-size: 10px;
  font-weight: 600;
}

.sg-th-cell {
  background: #2b5797;
  color: #ffffff;
  font-weight: 700;
  font-size: 11px;
  text-align: left;
  padding: 5px 8px;
  line-height: 1.25;
}

.sg-table-center th,
.sg-table-center td {
  text-align: center;
}

.sg-table-center th:first-child,
.sg-table-center td:first-child {
  text-align: left;
}

.sg-lbl-td {
  background: #f8fafc;
  color: #334155;
  width: 28%;
}

.sg-en-lbl {
  font-size: 11px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.2;
}

.sg-km-lbl {
  font-family: 'Kantumruy Pro', sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: #475569;
  line-height: 1.2;
  margin-top: 1px;
}

.sg-val-td {
  background: #ffffff;
  color: #000000;
  font-size: 11.5px;
  font-weight: 500;
  padding: 4.5px 8px;
  word-break: break-word;
  outline: none;
}

.sg-val-em {
  font-style: italic;
  font-weight: 600;
}

.sg-val-bold {
  font-weight: 600;
}

.sg-tip-note {
  font-size: 9.5px;
  color: #64748b;
  font-style: italic;
  margin: 3px 0 8px 0;
  line-height: 1.35;
}

.sg-declaration-box {
  border: 1px solid #cbd5e1;
  border-top: none;
  padding: 8px 10px;
  background: #ffffff;
  font-size: 10px;
  line-height: 1.45;
  text-align: justify;
}

.sg-decl-en {
  margin: 0 0 5px 0;
  color: #1e293b;
}

.sg-decl-km {
  margin: 0;
  color: #334155;
  font-family: 'Kantumruy Pro', sans-serif;
  font-size: 9.5px;
}

.sg-signatures-grid {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  gap: 40px;
}

.sg-sig-col {
  flex: 1;
}

.sg-sig-space {
  height: 120px;
}

.sg-sig-border-line {
  display: none;
}

.sg-sig-lbl-main {
  font-size: 11px;
  font-weight: 700;
  color: #1e293b;
}

.sg-sig-lbl-sub {
  font-family: 'Kantumruy Pro', sans-serif;
  font-size: 10px;
  color: #64748b;
}

.sg-stamp-space {
  height: 120px;
}

.sg-seal-wrapper {
  position: absolute;
  top: -24px;
  right: 25px;
  width: 170px;
  pointer-events: none;
}

.sg-seal-svg {
  width: 100%;
  height: auto;
}

.sg-footnote {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed #cbd5e1;
  font-size: 9px;
  color: #64748b;
  font-style: italic;
  text-align: center;
  line-height: 1.35;
}

/* ==========================================================================
   2-PAGE BALANCED LAYOUT OPTIMIZATIONS (Eliminating bottom dead gaps)
   ========================================================================== */
.sg-layout-2pages .sg-page-sheet {
  padding: 26px 36px 22px 36px;
  min-height: 1120px;
}

.sg-layout-2pages .sg-header {
  margin-bottom: 8px;
  padding-bottom: 7px;
}

.sg-layout-2pages .sg-photo-box {
  width: 110px;
  height: 142px;
}

.sg-layout-2pages .sg-banner {
  padding: 4px 10px;
  font-size: 11.5px;
  margin-top: 9px;
  margin-bottom: 0;
}

.sg-layout-2pages .sg-table {
  margin-bottom: 5px;
}

.sg-layout-2pages .sg-table td,
.sg-layout-2pages .sg-table th {
  padding: 4.2px 8px;
  font-size: 11px;
}

.sg-layout-2pages .sg-declaration-box {
  padding: 7px 10px;
  font-size: 9.8px;
  line-height: 1.4;
}

.sg-layout-2pages .sg-signatures-grid {
  margin-top: 16px;
  gap: 36px;
}

.sg-layout-2pages .sg-sig-space,
.sg-layout-2pages .sg-stamp-space {
  height: 100px;
}

.sg-layout-2pages .sg-footnote {
  padding-top: 10px;
  font-size: 8.8px;
}

/* Print Rules for Singapore Application Form (2-Page and 3-Page) */
@media print {
  .modal-overlay#sg-app-modal {
    position: static !important;
    display: block !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  .modal-overlay#sg-app-modal .modal-card {
    box-shadow: none !important;
    border: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }
  .modal-overlay#sg-app-modal .modal-body {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .sg-form-document {
    gap: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  .sg-page-sheet {
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    width: 100% !important;
    min-height: 297mm !important;
    height: 297mm !important;
    max-height: 297mm !important;
    padding: 10mm 14mm 8mm 14mm !important;
    page-break-after: always !important;
    break-after: page !important;
    page-break-inside: avoid !important;
    box-sizing: border-box !important;
  }
  .sg-page-sheet:last-child {
    page-break-after: avoid !important;
    break-after: avoid !important;
  }
}

/* ==========================================================================
   OFFICIAL 1-PAGE ENGLISH APPLICATION FORM (JAPAN / SINGAPORE)
   Faithful reproduction of Official Letterhead Document
   ========================================================================== */
.english-application-doc {
  background: #ffffff !important;
  color: #0f172a !important;
  font-family: 'Times New Roman', 'Liberation Serif', 'Georgia', serif;
  width: 794px !important;
  min-width: 794px !important;
  max-width: 794px !important;
  flex-shrink: 0;
  min-height: 1123px;
  padding: 36px 54px 30px 54px;
  box-sizing: border-box;
  margin: 0 auto;
  box-shadow: 0 16px 44px rgba(15, 23, 42, 0.3);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  line-height: 1.85;
}

.en-doc-header {
  margin-bottom: 10px;
}

.en-header-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
  width: 100%;
}

.en-logo-wrap {
  flex-shrink: 0;
}

.en-logo-img {
  height: 56px;
  width: auto;
  object-fit: contain;
  display: block;
}

.en-company-names {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.en-company-km {
  font-family: 'Moul', 'Khmer OS Muol Light', serif;
  font-size: 22.5px;
  color: #1e3a8a;
  margin-bottom: 2px;
  line-height: 1.35;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.en-company-en {
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: #dc2626;
  letter-spacing: 2px;
  line-height: 1.25;
  white-space: nowrap;
}

.en-header-blue-bar {
  height: 4.5px;
  background: #1e40af;
  width: 100%;
  border-radius: 1px;
}

.en-doc-titles {
  text-align: center;
  margin: 16px 0 14px 0;
}

.en-title-company {
  font-family: 'Times New Roman', serif;
  font-weight: 700;
  font-size: 15px;
  color: #0f172a;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.en-title-form {
  font-family: 'Times New Roman', serif;
  font-weight: 800;
  font-size: 15.5px;
  color: #0f172a;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  line-height: 1.35;
  outline: none;
}

.en-doc-particulars {
  font-size: 13.5px;
  line-height: 2.25;
  margin-bottom: 8px;
  font-family: 'Times New Roman', serif;
}

.en-doc-line {
  display: flex;
  align-items: baseline;
  margin-bottom: 6px;
  line-height: 2.25;
  width: 100%;
}

.en-lbl {
  font-weight: 700;
  color: #0f172a;
  margin-right: 4px;
  white-space: nowrap;
  font-size: 13.5px;
}

.en-dotted-field {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  border-bottom: 1.3px dotted #475569;
  min-height: 21px;
  margin: 0 3px;
  padding: 0 4px;
}

.en-dotted-subfield {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  border-bottom: 1.3px dotted #475569;
  min-height: 21px;
  margin: 0 3px;
  padding: 0 3px;
}

.en-field-name { min-width: 140px; flex: 1.2; }
.en-field-gender { min-width: 42px; }
.en-field-age { min-width: 42px; }
.en-field-nat { min-width: 110px; }
.en-field-cit { min-width: 80px; }
.en-field-house { min-width: 50px; }
.en-field-street { min-width: 50px; }
.en-field-group { min-width: 50px; }
.en-field-village { min-width: 110px; flex: 1; }
.en-field-commune { min-width: 120px; flex: 1; }
.en-field-district { min-width: 110px; flex: 1; }
.en-field-province { min-width: 200px; width: 260px; flex: none; }
.en-field-sector { min-width: 220px; flex: 1; }
.en-field-signame { min-width: 160px; }

.en-field-val {
  font-family: 'Times New Roman', Times, serif;
  font-weight: 700;
  font-size: 14.5px;
  white-space: nowrap;
  outline: none;
}

/* Ink color styles */
.english-application-doc.ink-black .en-field-val {
  color: #000000 !important;
}

.english-application-doc.ink-blue .en-field-val {
  color: #1e40af !important;
}

.english-application-doc.mode-blank .en-field-val {
  visibility: hidden !important;
}

.en-doc-salutation {
  margin: 14px 0 10px 0;
  font-size: 14px;
  line-height: 1.5;
}

.en-salut-lead {
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 2px;
}

.en-salut-target {
  font-size: 14.2px;
  color: #0f172a;
}

.en-doc-objective {
  font-size: 14px;
  margin: 12px 0 14px 0;
  display: flex;
  align-items: baseline;
  line-height: 2.1;
}

.en-obj-lbl {
  font-weight: 800;
  color: #0f172a;
  margin-right: 5px;
  white-space: nowrap;
}

.en-obj-desc {
  margin-right: 5px;
  white-space: nowrap;
  color: #0f172a;
}

.en-doc-body {
  font-size: 13.8px;
  line-height: 1.95;
  margin-bottom: 12px;
  text-align: justify;
}

.en-doc-p {
  text-indent: 40px;
  margin: 0 0 11px 0;
  text-align: justify;
  color: #0f172a;
}

.en-doc-closing-respect {
  margin: 12px 0 0 0;
  font-weight: 700;
  color: #0f172a;
}

.en-doc-footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 12px;
  font-size: 13.5px;
}

.en-doc-attach {
  flex: 1.1;
  line-height: 1.95;
}

.en-attach-title {
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 5px;
  font-size: 14px;
}

.en-attach-item {
  color: #1e293b;
}

.en-doc-sig {
  flex: 0.9;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.en-sig-date {
  font-size: 13.2px;
  white-space: nowrap;
  margin-bottom: 4px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  color: #0f172a;
}

.en-sig-thumb-title {
  font-weight: 700;
  font-size: 14px;
  margin-top: 6px;
  margin-bottom: 4px;
  color: #0f172a;
}

.en-sig-thumb-space {
  height: 65px;
  width: 90px;
  margin: 0 auto;
}

.en-sig-name-line {
  margin-top: 4px;
  font-size: 14px;
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.en-doc-company-footer {
  margin-top: 14px;
}

.en-footer-blue-bar {
  height: 3px;
  background: #1e40af;
  width: 100%;
  margin-bottom: 6px;
}

.en-footer-km-addr {
  font-family: 'Kantumruy Pro', sans-serif;
  font-size: 11px;
  color: #1e3a8a;
  text-align: center;
  margin-bottom: 2px;
  font-weight: 600;
}

.en-footer-en-addr {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 10.5px;
  color: #334155;
  text-align: center;
  line-height: 1.35;
}

/* Print Rules for 1-Page English Application Form */
@media print {
  .modal-overlay#english-app-modal {
    position: static !important;
    display: block !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  .modal-overlay#english-app-modal .modal-card {
    box-shadow: none !important;
    border: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }
  .modal-overlay#english-app-modal .modal-body {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .english-application-doc {
    box-shadow: none !important;
    border: none !important;
    margin: 0 auto !important;
    padding: 10mm 14mm 8mm 14mm !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 275mm !important;
    height: 275mm !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    page-break-after: avoid !important;
    page-break-inside: avoid !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   Full Application Package Module (All-in-One Form: 3 Docs in 1)
   ========================================================================== */
.full-package-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  width: 100%;
  padding-bottom: 40px;
}

.fullpkg-sheet-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: relative;
}

.fullpkg-page-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #1e293b;
  color: #f8fafc;
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.fullpkg-badge-num {
  background: #2563eb;
  color: #ffffff;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fullpkg-badge-title {
  color: #e2e8f0;
}

.fullpkg-tabs-group {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 3px;
  gap: 4px;
}

.fullpkg-tab-btn {
  background: transparent;
  border: none;
  color: #e2e8f0;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fullpkg-tab-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.fullpkg-tab-btn.active {
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

body.light-mode .standalone-nav .fullpkg-tabs-group {
  background: #e2e8f0;
}

body.light-mode .standalone-nav .fullpkg-tab-btn {
  color: #334155;
}

body.light-mode .standalone-nav .fullpkg-tab-btn.active {
  background: #2563eb;
  color: #ffffff;
}

body.light-mode .standalone-nav .fullpkg-tab-btn:hover:not(.active) {
  background: rgba(0, 0, 0, 0.08);
  color: #0f172a;
}

/* Print styling for Full Application Package */
@media print {
  body:has(#full-package-modal.active) * {
    visibility: hidden;
  }
  body:has(#full-package-modal.active) #full-package-modal,
  body:has(#full-package-modal.active) #full-package-modal .modal-card,
  body:has(#full-package-modal.active) #full-package-modal .modal-body,
  body:has(#full-package-modal.active) #full-package-preview-container,
  body:has(#full-package-modal.active) .full-package-container,
  body:has(#full-package-modal.active) .fullpkg-sheet-wrapper,
  body:has(#full-package-modal.active) .fullpkg-sheet-content,
  body:has(#full-package-modal.active) .khmer-application-doc,
  body:has(#full-package-modal.active) .english-application-doc,
  body:has(#full-package-modal.active) .sg-page-sheet,
  body:has(#full-package-modal.active) .full-package-doc,
  body.standalone-fullpkg-print * {
    visibility: visible;
  }

  .fullpkg-page-badge,
  .modal-overlay#full-package-modal .modal-header,
  .modal-overlay#full-package-modal .modal-footer {
    display: none !important;
  }

  .modal-overlay#full-package-modal {
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .modal-overlay#full-package-modal .modal-card {
    box-shadow: none !important;
    border: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  .modal-overlay#full-package-modal .modal-body {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .full-package-container {
    gap: 0 !important;
    padding: 0 !important;
  }

  .fullpkg-sheet-wrapper {
    page-break-after: always !important;
    break-after: page !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .fullpkg-sheet-wrapper:last-child {
    page-break-after: avoid !important;
    break-after: avoid !important;
  }

  .khmer-application-doc,
  .english-application-doc,
  .sg-page-sheet {
    box-shadow: none !important;
    border: none !important;
    margin: 0 auto !important;
    page-break-inside: avoid !important;
  }

  @page {
    size: A4 portrait;
    margin: 8mm 10mm;
  }
}

/* ==========================================================================
   Worker Table Bulk Checkbox & Group Assignment Styling
   ========================================================================== */
.custom-table tr.row-selected {
  background-color: rgba(37, 99, 235, 0.08) !important;
}

.custom-table tr.row-selected td {
  background-color: rgba(37, 99, 235, 0.08) !important;
}

.worker-row-checkbox, #worker-select-all {
  cursor: pointer;
  accent-color: #2563eb;
  width: 18px;
  height: 18px;
  transition: transform 0.15s ease;
}

.worker-row-checkbox:hover, #worker-select-all:hover {
  transform: scale(1.15);
}

.bulk-actions-bar {
  animation: slideDownBulk 0.22s ease-out;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

@keyframes slideDownBulk {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mini-workers-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 160px;
  overflow-y: auto;
  padding: 10px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 16px;
}

.mini-worker-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  padding: 4px 10px 4px 5px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.mini-worker-tag img, .mini-worker-tag .tag-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  background: #2563eb;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: bold;
}

.group-presets-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  margin-bottom: 14px;
}

.group-preset-tag {
  background: #f1f5f9;
  border: 1.5px solid #cbd5e1;
  color: #334155;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.group-preset-tag:hover {
  background: #e0f2fe;
  border-color: #0284c7;
  color: #0369a1;
  transform: translateY(-1px);
}

.group-preset-tag.active {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}

/* Toast message for instant notifications */
.gmp-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #1e293b;
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 99999;
  animation: toastFadeIn 0.3s ease-out;
  border-left: 4px solid #10b981;
}

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

/* ==========================================================================
   SIDEBAR 6-LIST NAVIGATION & PILLS DESIGN SYSTEM
   ========================================================================== */
.nav-num-badge {
  display: none !important;
}

.nav-badge {
  display: none !important;
}

.badge-warning-subtle {
  background: #fef3c7;
  color: #b45309;
}

.badge-info-subtle {
  background: #e0f2fe;
  color: #0369a1;
}

.badge-success-subtle {
  background: #dcfce7;
  color: #15803d;
}

.badge-neutral-subtle {
  background: #f1f5f9;
  color: #475569;
}

.sidebar-section-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 12px 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.sidebar-section-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

/* In-Page View Switcher Pills */
.workers-view-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border-radius: 10px;
}

.view-preset-pill {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.view-preset-pill:hover {
  background: #f1f5f9;
  color: #1e293b;
  border-color: #94a3b8;
  transform: translateY(-1px);
}

.view-preset-pill.active {
  background: #2563eb;
  color: #ffffff;
  border-color: #1d4ed8;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35);
}

.view-preset-pill.active .pill-count {
  background: #ffffff;
  color: #2563eb;
}

.pill-count {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  background: #e2e8f0;
  color: #475569;
}

/* ========================================================
   OCWC EXACT WORKER TABLE DESIGN SYSTEM (MATCHING SCREENSHOT)
   ======================================================== */
.ocwc-table-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  margin-top: 14px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
}

.ocwc-table-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid #f1f5f9;
  background: #ffffff;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.ocwc-table-count-info {
  font-size: 13.5px;
  font-weight: 700;
  color: #1e3a8a;
}

.ocwc-table-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Guest Category Mode Group: ឈ្មោះពលករ & គ្រុប */
.guest-category-mode-group {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 9px;
  border: 1.5px solid #cbd5e1;
  gap: 4px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
}

.guest-category-mode-group .btn-mode-toggle {
  padding: 6px 18px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.guest-category-mode-group .btn-mode-toggle:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.guest-category-mode-group .btn-mode-toggle.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35) !important;
}

/* Payroll View Mode Toggle Group (គ្រុបប្រាក់ខែប្រចាំខែ & បញ្ជីឈ្មោះបុគ្គលិក) */
.payroll-view-mode-group {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 9px;
  border: 1.5px solid #cbd5e1;
  gap: 4px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
}

.payroll-view-mode-group .payroll-mode-toggle {
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  white-space: nowrap;
}

.payroll-view-mode-group .payroll-mode-toggle:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.payroll-view-mode-group .payroll-mode-toggle.active {
  background: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35) !important;
}

body.dark-mode .payroll-view-mode-group {
  background: #1e293b;
  border-color: #334155;
}

body.dark-mode .payroll-view-mode-group .payroll-mode-toggle {
  color: #94a3b8;
}

body.dark-mode .payroll-view-mode-group .payroll-mode-toggle:hover {
  background: #334155;
  color: #f8fafc;
}

body.dark-mode .payroll-view-mode-group .payroll-mode-toggle.active {
  background: #0284c7 !important;
  color: #ffffff !important;
}

.ocwc-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.ocwc-search-icon {
  position: absolute;
  left: 9px;
  font-size: 11.5px;
  color: #94a3b8;
  pointer-events: none;
}

.ocwc-search-input {
  width: 170px;
  height: 31px;
  padding: 4px 10px 4px 28px;
  font-size: 12px;
  font-family: inherit;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  color: #1e293b;
  outline: none;
  transition: all 0.2s ease;
}

.ocwc-search-input:focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
  width: 200px;
}

.btn-tool-compact {
  height: 31px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  padding: 0 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}

.btn-ocwc-icon {
  height: 31px;
  width: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  border-radius: 6px;
  color: #64748b;
  font-size: 12.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-ocwc-icon:hover {
  background: #f8fafc;
  color: #1e293b;
  border-color: #94a3b8;
}

/* OCWC TABLE STYLING */
.ocwc-custom-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
  background: #ffffff;
}

.ocwc-custom-table th {
  background: #ffffff;
  color: #1e293b;
  font-weight: 700;
  font-size: 12.5px;
  padding: 12px 14px;
  border-bottom: 1.5px solid #e2e8f0;
  user-select: none;
  line-height: 1.3;
}

.ocwc-custom-table th.th-sortable {
  cursor: pointer;
}

.ocwc-custom-table th.th-sortable:hover {
  background: #f8fafc;
  color: #2563eb;
}

.ocwc-custom-table th .sort-caret {
  color: #94a3b8;
  font-size: 11px;
  margin-left: 3px;
  display: inline-block;
  font-family: inherit;
}

.ocwc-custom-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  font-size: 12.5px;
  vertical-align: middle;
  background: #ffffff;
  transition: background 0.15s ease;
}

.ocwc-custom-table tbody tr:hover td {
  background: #f8fafc;
}

.ocwc-custom-table tbody tr.row-selected td {
  background: #f0f7ff !important;
}

/* 3-dots Action Button */
.btn-dots-action {
  background: transparent;
  border: none;
  color: #2563eb;
  font-size: 17px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.15s ease;
}

.btn-dots-action:hover {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
  transform: scale(1.1);
}

/* Checkbox */
.ocwc-checkbox {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1.5px solid #cbd5e1;
  cursor: pointer;
  accent-color: #2563eb;
  vertical-align: middle;
}

/* Photo Thumbnail */
.ocwc-photo-box {
  width: 36px;
  height: 44px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: all 0.2s ease;
}

.ocwc-photo-box:hover {
  transform: scale(1.08);
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  border-color: #2563eb;
}

.ocwc-photo-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Specific Cells */
.ocwc-custom-table .cell-worker-code {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  letter-spacing: 0.2px;
  font-variant-numeric: normal;
}

.ocwc-custom-table .cell-ocwc-code {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  white-space: nowrap;
  letter-spacing: 0.2px;
  font-variant-numeric: normal;
}

.ocwc-custom-table .cell-khmer-name {
  font-family: 'Siemreap', 'Kantumruy Pro', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
}

.ocwc-custom-table .cell-latin-name {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

.ocwc-custom-table .clickable-cell {
  cursor: pointer;
  transition: color 0.15s ease;
}

.ocwc-custom-table .clickable-cell:hover {
  color: #2563eb;
  text-decoration: underline;
}

.ocwc-custom-table .cell-dob {
  color: #475569;
  font-size: 12.5px;
  white-space: nowrap;
}

.ocwc-custom-table .th-col-age {
  text-align: center;
}

.ocwc-custom-table .cell-age {
  text-align: center;
  font-size: 12.5px;
  font-weight: 500;
  color: #334155;
  white-space: nowrap;
}

.ocwc-custom-table .cell-gender {
  color: #334155;
  font-size: 12.5px;
  white-space: nowrap;
}

.ocwc-custom-table .cell-country {
  color: #334155;
  font-size: 12.5px;
  white-space: nowrap;
}

.ocwc-custom-table .cell-province {
  font-family: 'Siemreap', 'Kantumruy Pro', sans-serif;
  color: #1e293b;
  font-size: 13px;
  white-space: nowrap;
}

.ocwc-custom-table .cell-dept {
  font-family: 'Siemreap', 'Kantumruy Pro', sans-serif;
  color: #0284c7;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.ocwc-custom-table .cell-employer {
  font-size: 12px;
  font-weight: 500;
  color: #334155;
  white-space: nowrap;
}

.ocwc-custom-table th.th-col-agency,
.ocwc-custom-table td.cell-agency {
  white-space: nowrap;
  width: 1%;
  padding-left: 6px;
  padding-right: 4px;
  text-align: center;
  vertical-align: middle;
  color: #334155;
  font-weight: 600;
  font-size: 12.5px;
}

.ocwc-custom-table th.th-col-dept,
.ocwc-custom-table td.cell-dept {
  white-space: nowrap;
  width: 1%;
  padding-left: 4px;
  padding-right: 6px;
  text-align: center;
  vertical-align: middle;
  color: #0284c7;
  font-weight: 600;
  font-size: 12.5px;
}

.badge-agency,
.ocwc-custom-table td.cell-agency .badge-agency {
  display: inline-block;
  background: transparent !important;
  color: #334155 !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-weight: 600;
  font-size: 12.5px;
  white-space: nowrap;
}

.badge-dept,
.ocwc-custom-table td.cell-dept .badge-dept {
  display: inline-block;
  background: transparent !important;
  color: #0284c7 !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-weight: 600;
  font-size: 12.5px;
  white-space: nowrap;
}

.btn-group-agency-dept {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.btn-group-agency-dept .btn {
  background: transparent !important;
  border-radius: 6px !important;
}

.btn-group-agency-dept .btn.btn-primary {
  background: transparent !important;
  color: #0284c7 !important;
  border: 1.5px solid #0284c7 !important;
  font-weight: 700 !important;
}

.btn-group-agency-dept .btn.btn-outline-primary {
  background: transparent !important;
  color: #64748b !important;
  border: 1.5px solid #cbd5e1 !important;
  font-weight: 500 !important;
}

.btn-group-agency-dept .btn:hover {
  background: rgba(2, 132, 199, 0.08) !important;
}

.ocwc-custom-table .cell-created-at {
  font-size: 12px;
  color: #475569;
  white-space: nowrap;
}

/* Floating Action Dropdown Menu */
.row-action-dropdown-menu {
  position: fixed;
  z-index: 99999;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  border: 1px solid #cbd5e1;
  min-width: 250px;
  padding: 6px 0;
  animation: fadeInDown 0.15s ease-out;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.row-action-menu-header {
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #f1f5f9;
  background: #f8fafc;
  margin-top: -6px;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}

.row-action-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: transparent;
  border: none;
  font-size: 12.5px;
  font-family: inherit;
  font-weight: 500;
  color: #1e293b;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.row-action-item:hover {
  background: #eff6ff;
  color: #2563eb;
}

.row-action-item.text-danger:hover {
  background: #fef2f2;
  color: #dc2626;
}

.row-action-item i {
  width: 16px;
  font-size: 13px;
  text-align: center;
}

.row-action-divider {
  height: 1px;
  background: #f1f5f9;
  margin: 5px 0;
}

/* ==================== WORKER GROUPS / BATCH CARDS VIEW ==================== */
.btn-mode-toggle {
  border: none;
  background: transparent;
  padding: 5px 12px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 600;
  border-radius: 5px;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-mode-toggle:hover {
  color: #0284c7;
}

.btn-mode-toggle.active {
  background: #ffffff;
  color: #0284c7;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  font-weight: 700;
}

.btn-group-chip {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-family: inherit;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-group-chip:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
}

.group-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
}

.group-batch-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.group-batch-card:hover {
  border-color: #0284c7;
  box-shadow: 0 10px 25px rgba(2, 132, 199, 0.12);
  transform: translateY(-2px);
}

.group-card-header {
  padding: 14px 16px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8fafc;
}

.group-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #e0f2fe;
  color: #0284c7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.group-header-text {
  flex: 1;
  min-width: 0;
}

.group-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 3px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-dest-badge {
  font-size: 11.5px;
  color: #0369a1;
  background: #e0f2fe;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.group-count-pill {
  background: #0284c7;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.group-card-body {
  padding: 14px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.group-avatar-stack {
  display: flex;
  align-items: center;
  padding: 4px 0;
}

.group-avatar-thumb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2.5px solid #ffffff;
  margin-right: -10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  background: #cbd5e1;
}

.group-avatar-more {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0f172a;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2.5px solid #ffffff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.group-names-summary {
  font-size: 12.5px;
  color: #475569;
  line-height: 1.45;
  background: #f8fafc;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #f1f5f9;
}

.group-meta-row {
  font-size: 11.5px;
  color: #64748b;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px dashed #e2e8f0;
  padding-top: 8px;
  margin-top: auto;
}

.group-card-footer {
  padding: 10px 16px;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.group-card-footer .btn-open-group {
  flex: 1;
  font-weight: 700;
  font-size: 12.5px;
  background: #0284c7;
  border-color: #0284c7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
}

.group-card-footer .btn-open-group:hover {
  background: #0369a1;
  border-color: #0369a1;
}

/* ==================== GROUP HORIZONTAL TABLE STYLES ==================== */
.group-table-card {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  overflow: hidden;
}

.group-horizontal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.group-horizontal-table thead th {
  background: #f8fafc;
  color: #475569;
  font-weight: 700;
  font-size: 12.5px;
  padding: 11px 14px;
  border-bottom: 1.5px solid #cbd5e1;
  white-space: nowrap;
}

.group-horizontal-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.group-table-row {
  transition: background-color 0.15s ease;
  cursor: pointer;
}

.group-table-row:hover {
  background-color: #f0f9ff !important;
}

.group-table-row:hover .group-row-title {
  color: #0284c7 !important;
}

/* ==================== OFFICIAL GROUP DISPATCH ROSTER PAPER ==================== */
.group-roster-paper {
  width: 980px;
  min-height: 680px;
  background: #ffffff;
  padding: 32px 36px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  font-family: 'Kantumruy Pro', 'Siemreap', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #1e293b;
  position: relative;
  box-sizing: border-box;
}

.roster-doc-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
  font-size: 11.5px;
}

.roster-doc-table th {
  background: #f1f5f9;
  border: 1px solid #94a3b8;
  padding: 6px 8px;
  text-align: center;
  font-weight: 700;
  color: #0f172a;
}

.roster-doc-table td {
  border: 1px solid #cbd5e1;
  padding: 6px 8px;
  vertical-align: middle;
  color: #1e293b;
}

/* Printing optimization for Group Roster Document */
@media print {
  body.printing-group-roster * {
    visibility: hidden !important;
  }
  body.printing-group-roster #group-roster-modal,
  body.printing-group-roster #group-roster-paper,
  body.printing-group-roster #group-roster-paper * {
    visibility: visible !important;
  }
  body.printing-group-roster #group-roster-paper {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
    padding: 15px 20px !important;
    margin: 0 !important;
  }
}

/* ==========================================================================
   Hybrid Date Picker Component (2 Options: វាយបញ្ចូល & ជ្រើសរើស)
   ========================================================================== */
.date-hybrid-field {
  position: relative;
}

.date-field-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  gap: 6px;
}

.date-field-header label,
.date-field-label {
  margin-bottom: 0 !important;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.date-mode-pills {
  display: inline-flex;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
  flex-shrink: 0;
}

.btn-date-pill {
  border: none;
  background: transparent;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-family: inherit;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
  line-height: 1.4;
  outline: none;
}

.btn-date-pill:hover {
  color: #0f172a;
  background: rgba(0, 0, 0, 0.04);
}

.btn-date-pill.active {
  background: #0284c7;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.25);
}

.date-mode-panel {
  width: 100%;
}

.date-type-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.date-type-input-wrap .form-input {
  width: 100%;
  padding-right: 36px !important;
}

.date-type-input-wrap .btn-calendar-inside {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 4px 6px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
}

.date-type-input-wrap .btn-calendar-inside:hover {
  color: #0284c7;
}

.date-select-grid {
  display: grid;
  grid-template-columns: 66px 1fr 76px 34px;
  gap: 4px;
  align-items: center;
  width: 100%;
}

.date-select-item {
  padding: 6px 3px !important;
  font-size: 11.5px !important;
  height: 38px;
  border-radius: 6px;
  border: 1.5px solid #cbd5e1;
  background-color: #ffffff;
  cursor: pointer;
  width: 100%;
}

.date-select-item:focus {
  border-color: #0284c7;
  outline: none;
}

.btn-date-picker-icon {
  width: 34px;
  height: 38px;
  border-radius: 6px;
  border: 1.5px solid #cbd5e1;
  background: #f8fafc;
  color: #0284c7;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.btn-date-picker-icon:hover {
  background: #e0f2fe;
  border-color: #0284c7;
  color: #0369a1;
  transform: translateY(-1px);
}

.date-native-picker-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  bottom: 0 !important;
  left: 0 !important;
}

/* ==========================================================================
   AUTHENTICATION & LOGIN SYSTEM (ប្រព័ន្ធគ្រប់គ្រងគណនី និងឡុកអ៊ីន)
   ========================================================================== */

#login-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 20% 20%, rgba(2, 132, 199, 0.25), transparent 40%),
              radial-gradient(circle at 80% 80%, rgba(30, 58, 138, 0.4), transparent 45%),
              linear-gradient(135deg, #090e17 0%, #0f172a 50%, #1e293b 100%);
  padding: 20px;
  overflow-y: auto;
  backdrop-filter: blur(10px);
}

.auth-wrapper {
  width: 100%;
  max-width: 440px;
  margin: auto;
  animation: authPopIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes authPopIn {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(-16px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.auth-card {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 20px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
}

.auth-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #0284c7, #2563eb, #38bdf8);
}

.auth-header {
  text-align: center;
  margin-bottom: 24px;
}

.auth-logo-box {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  overflow: hidden;
  margin: 0 auto 12px;
  box-shadow: 0 8px 20px rgba(2, 132, 199, 0.25);
  border: 2px solid #e0f2fe;
}

.auth-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.auth-title {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
  letter-spacing: -0.3px;
}

.auth-subtitle {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
  line-height: 1.4;
}

.auth-tabs {
  display: flex;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 20px;
  gap: 4px;
}

.btn-auth-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-family: inherit;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-auth-tab.active {
  background: #ffffff;
  color: #0284c7;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.auth-field-group {
  margin-bottom: 16px;
}

.auth-field-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
}

.auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-input-wrap .auth-icon {
  position: absolute;
  left: 14px;
  color: #94a3b8;
  font-size: 14px;
  pointer-events: none;
}

.auth-input {
  width: 100%;
  padding: 10px 14px 10px 40px;
  font-size: 13.5px;
  font-family: inherit;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  color: #0f172a;
  transition: all 0.2s ease;
}

.auth-input:focus {
  outline: none;
  border-color: #0284c7;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.auth-eye-btn {
  position: absolute;
  right: 12px;
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
  font-size: 14px;
}

.auth-eye-btn:hover {
  color: #0284c7;
}

.auth-row-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 12px;
}

.auth-remember-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #475569;
  cursor: pointer;
  font-weight: 500;
}

.btn-auth-submit {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
  transition: all 0.2s ease;
}

.btn-auth-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.45);
  background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
}

.btn-auth-submit:active {
  transform: translateY(0);
}

.auth-error-box {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12px;
  margin-bottom: 14px;
  display: none;
  text-align: center;
  font-weight: 600;
}

/* Quick Demo Accounts */
.auth-demo-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed #e2e8f0;
}

.auth-demo-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auth-demo-pills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.btn-demo-pill {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 8px;
  padding: 8px 4px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.btn-demo-pill span.sub {
  font-size: 9.5px;
  color: #94a3b8;
  font-weight: 500;
}

.btn-demo-pill:hover {
  background: #e0f2fe;
  border-color: #0284c7;
  color: #0369a1;
  transform: translateY(-1px);
}

/* Header User Profile Widget */
.header-user-profile-wrap {
  position: relative;
  display: inline-block;
}

.btn-header-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 6px;
  border-radius: 30px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.btn-header-profile:hover {
  background: #f8fafc;
  border-color: #0284c7;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.15);
}

.user-avatar-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0284c7, #2563eb);
  color: #ffffff;
  font-weight: 800;
  font-size: 11.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.user-info-text {
  text-align: left;
  line-height: 1.2;
}

.user-display-name {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  background: #e0f2fe;
  color: #0284c7;
  border: 1px solid transparent;
}

.user-role-badge.role-admin {
  background: #fef3c7;
  color: #b45309;
  border-color: #fde68a;
}

.user-role-badge.role-accountant {
  background: #d1fae5;
  color: #047857;
  border-color: #a7f3d0;
}

.user-role-badge.role-staff {
  background: #e0f2fe;
  color: #0284c7;
  border-color: #bae6fd;
}

.user-role-badge.role-viewer {
  background: #ede9fe;
  color: #6d28d9;
  border-color: #ddd6fe;
}

.user-role-badge.role-recruiter {
  background: #f3e8ff;
  color: #7e22ce;
  border-color: #e9d5ff;
}

/* User Account & Role Management Enhanced Styles */
.role-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.role-info-card {
  background: #ffffff;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  padding: 10px 12px;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.role-info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.role-info-card.card-admin { border-left: 4px solid #f59e0b; background: linear-gradient(to right, #fffbeb 0%, #ffffff 40%); }
.role-info-card.card-accountant { border-left: 4px solid #10b981; background: linear-gradient(to right, #ecfdf5 0%, #ffffff 40%); }
.role-info-card.card-staff { border-left: 4px solid #0ea5e9; background: linear-gradient(to right, #f0f9ff 0%, #ffffff 40%); }
.role-info-card.card-viewer { border-left: 4px solid #8b5cf6; background: linear-gradient(to right, #f5f3ff 0%, #ffffff 40%); }

.role-info-card .card-title {
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

.role-info-card .card-desc {
  font-size: 11px;
  color: #64748b;
  line-height: 1.35;
}

.role-filter-btn {
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.role-filter-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.role-filter-btn.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
}

.permission-preview-box {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 10px;
}

.perm-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  margin: 2px 4px 2px 0;
  font-weight: 600;
}
.perm-tag.allowed {
  background: #dcfce7;
  color: #15803d;
}
.perm-tag.denied {
  background: #fee2e2;
  color: #b91c1c;
  text-decoration: line-through;
  opacity: 0.75;
}

.profile-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 230px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
  padding: 6px;
  display: none;
  z-index: 99999;
  animation: authPopIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.profile-dropdown-menu.active {
  display: block;
}

.profile-menu-header {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 4px;
}

.profile-menu-header .name {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.profile-menu-header .email {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

.profile-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.profile-menu-item:hover {
  background: #f1f5f9;
  color: #0284c7;
}

.profile-menu-item.logout {
  color: #dc2626;
  border-top: 1px solid #f1f5f9;
  margin-top: 4px;
  padding-top: 10px;
}

.profile-menu-item.logout:hover {
  background: #fef2f2;
  color: #b91c1c;
}

/* ============================================================================
   SEARCHABLE SELECT COMPONENT (ប្រព័ន្ធជ្រើសរើស និងស្វែងរកឈ្មោះ)
   ============================================================================ */

.searchable-select-native-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.searchable-select-container {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  width: 100%;
  font-family: inherit;
  box-sizing: border-box;
}

.searchable-select-container.is-open {
  z-index: 1050;
}

.searchable-select-trigger {
  width: 100%;
  height: 38px;
  min-height: 38px;
  padding: 0 10px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  color: #1e293b;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
  text-align: left;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.searchable-select-trigger:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}

.searchable-select-trigger:focus,
.searchable-select-container.is-open .searchable-select-trigger {
  border-color: #0284c7;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.16);
}

.searchable-select-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: #0f172a;
}

.searchable-select-label.is-placeholder {
  font-weight: 500;
  color: #94a3b8;
}

.searchable-select-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.searchable-select-btn-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #94a3b8;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.searchable-select-btn-clear:hover {
  background: #fee2e2;
  color: #ef4444;
}

.searchable-select-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 11px;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.searchable-select-container.is-open .searchable-select-arrow {
  transform: rotate(180deg);
  color: #0284c7;
}

/* Dropdown Menu Panel */
.searchable-select-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 260px;
  background: #ffffff;
  border: 1.5px solid #0284c7;
  border-radius: 8px;
  box-shadow: 0 12px 30px -4px rgba(15, 23, 42, 0.2), 0 4px 10px -2px rgba(15, 23, 42, 0.08);
  z-index: 1060;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: searchableSelectSlideDown 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.searchable-select-container.open-upward .searchable-select-dropdown {
  top: auto;
  bottom: calc(100% + 4px);
  animation: searchableSelectSlideUp 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes searchableSelectSlideDown {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes searchableSelectSlideUp {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Search Box in Header */
.searchable-select-search-box {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 10px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.searchable-select-search-icon {
  position: absolute;
  left: 20px;
  color: #0284c7;
  font-size: 13px;
  pointer-events: none;
}

.searchable-select-search-input {
  width: 100%;
  height: 34px;
  padding: 0 30px 0 32px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12.5px;
  color: #0f172a;
  outline: none;
  transition: all 0.15s ease;
}

.searchable-select-search-input:focus {
  border-color: #0284c7;
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2);
}

.searchable-select-search-input::placeholder {
  color: #94a3b8;
  font-size: 11.5px;
}

.searchable-select-search-clear {
  position: absolute;
  right: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease;
}

.searchable-select-search-clear:hover {
  color: #ef4444;
}

/* Info Count Bar */
.searchable-select-info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 12px;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}

/* Options List */
.searchable-select-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 230px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.searchable-select-list::-webkit-scrollbar {
  width: 6px;
}

.searchable-select-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.searchable-select-list::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Option Item */
.searchable-select-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12.5px;
  color: #1e293b;
  transition: background 0.12s ease, color 0.12s ease;
  user-select: none;
}

.searchable-select-item:hover,
.searchable-select-item.is-highlighted {
  background: #f0f9ff;
  color: #0284c7;
}

.searchable-select-item.is-selected {
  background: #e0f2fe;
  color: #0369a1;
  font-weight: 700;
}

.searchable-select-item-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.searchable-select-item-khmer {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.searchable-select-item-en {
  font-size: 10.5px;
  color: #64748b;
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  font-family: inherit;
  font-weight: normal;
  white-space: nowrap;
}

.searchable-select-item.is-selected .searchable-select-item-en {
  background: #bae6fd;
  color: #0369a1;
  border-color: #7dd3fc;
}

.searchable-select-check-icon {
  color: #0284c7;
  font-size: 12px;
  font-weight: bold;
}

/* Highlighted Match Text */
mark.search-match {
  background: #fef08a;
  color: #854d0e;
  font-weight: 700;
  padding: 0 1px;
  border-radius: 2px;
}

/* Empty State */
.searchable-select-empty {
  padding: 18px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.searchable-select-empty-icon {
  font-size: 24px;
  color: #94a3b8;
  margin-bottom: 2px;
}

.searchable-select-empty-title {
  font-size: 13px;
  font-weight: 700;
  color: #475569;
}

.searchable-select-empty-sub {
  font-size: 11.5px;
  color: #94a3b8;
}

.btn-searchable-quick-add {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  background: #0284c7;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 4px rgba(2, 132, 199, 0.25);
}

.btn-searchable-quick-add:hover {
  background: #0369a1;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(2, 132, 199, 0.3);
}

/* Dark Mode Overrides */
body.dark-mode .searchable-select-trigger {
  background: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}

body.dark-mode .searchable-select-trigger:hover {
  background: #334155;
}

body.dark-mode .searchable-select-label {
  color: #f1f5f9;
}

body.dark-mode .searchable-select-dropdown {
  background: #1e293b;
  border-color: #38bdf8;
  box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.6);
}

body.dark-mode .searchable-select-search-box {
  background: #0f172a;
  border-color: #334155;
}

body.dark-mode .searchable-select-search-input {
  background: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}

body.dark-mode .searchable-select-info-bar {
  background: #0f172a;
  border-color: #334155;
  color: #94a3b8;
}

body.dark-mode .searchable-select-item {
  color: #e2e8f0;
}

body.dark-mode .searchable-select-item:hover,
body.dark-mode .searchable-select-item.is-highlighted {
  background: #0f172a;
  color: #38bdf8;
}

body.dark-mode .searchable-select-item.is-selected {
  background: #0369a1;
  color: #ffffff;
}

body.dark-mode .searchable-select-item-en {
  background: #334155;
  color: #94a3b8;
  border-color: #475569;
}

/* ==========================================================================
   GMP Company Finance & Cash Flow Styles
   ========================================================================== */
.finance-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.finance-kpi-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 16px 18px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
}

.finance-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.finance-kpi-card.kpi-income { border-top: 4px solid #10b981; }
.finance-kpi-card.kpi-expense { border-top: 4px solid #f43f5e; }
.finance-kpi-card.kpi-balance { border-top: 4px solid #0ea5e9; }
.finance-kpi-card.kpi-accounts { border-top: 4px solid #8b5cf6; }

.finance-filter-type-btn {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.finance-filter-type-btn:hover {
  background: #f1f5f9;
}

.finance-filter-type-btn.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
}

body.dark-mode .finance-kpi-card {
  background: #111a2e;
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .finance-filter-type-btn {
  background: #0b1326;
  border-color: #334155;
  color: #94a3b8;
}

body.dark-mode .finance-filter-type-btn.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
}

/* ==========================================================================
   FINANCE SUB-TAB SWITCHER BUTTONS (RICH COLOR PALETTES & GRADIENTS)
   ========================================================================== */
.finance-subtab-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  background: #f8fafc;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1.5px solid #e2e8f0;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02);
  flex-wrap: wrap;
}

.finance-subtab-btn {
  padding: 10px 20px;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-width: 1.5px;
  border-style: solid;
  position: relative;
  user-select: none;
}

/* 1. Worker Breakdown Tab (Emerald Green Palette) */
.finance-subtab-btn.subtab-workers {
  background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%);
  border-color: #a7f3d0;
  color: #065f46;
  box-shadow: 0 2px 5px rgba(5, 150, 105, 0.08);
}
.finance-subtab-btn.subtab-workers i {
  color: #10b981;
  font-size: 14px;
  transition: transform 0.2s ease;
}
.finance-subtab-btn.subtab-workers:hover {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: #6ee7b7;
  color: #047857;
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(16, 185, 129, 0.2);
}
.finance-subtab-btn.subtab-workers.active {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  border-color: #047857 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.4) !important;
  transform: translateY(-1px);
}
.finance-subtab-btn.subtab-workers.active i {
  color: #ffffff !important;
  transform: scale(1.1);
}

/* 2. Daily Expenses Tab (Sky & Royal Blue Palette) */
.finance-subtab-btn.subtab-daily {
  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
  border-color: #bae6fd;
  color: #075985;
  box-shadow: 0 2px 5px rgba(2, 132, 199, 0.08);
}
.finance-subtab-btn.subtab-daily i {
  color: #0284c7;
  font-size: 14px;
  transition: transform 0.2s ease;
}
.finance-subtab-btn.subtab-daily:hover {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-color: #7dd3fc;
  color: #0369a1;
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(14, 165, 233, 0.2);
}
.finance-subtab-btn.subtab-daily.active {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%) !important;
  border-color: #0369a1 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(14, 165, 233, 0.4) !important;
  transform: translateY(-1px);
}
.finance-subtab-btn.subtab-daily.active i {
  color: #ffffff !important;
  transform: scale(1.1);
}

/* 3. Monthly Expenses & Staff Payroll Tab (Royal Purple & Violet Palette) */
.finance-subtab-btn.subtab-monthly {
  background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%);
  border-color: #e9d5ff;
  color: #581c87;
  box-shadow: 0 2px 5px rgba(147, 51, 234, 0.08);
}
.finance-subtab-btn.subtab-monthly i {
  color: #9333ea;
  font-size: 14px;
  transition: transform 0.2s ease;
}
.finance-subtab-btn.subtab-monthly:hover {
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
  border-color: #d8b4fe;
  color: #6b21a8;
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(168, 85, 247, 0.2);
}
.finance-subtab-btn.subtab-monthly.active {
  background: linear-gradient(135deg, #7c3aed 0%, #9333ea 100%) !important;
  border-color: #6d28d9 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(147, 51, 234, 0.4) !important;
  transform: translateY(-1px);
}
.finance-subtab-btn.subtab-monthly.active i {
  color: #ffffff !important;
  transform: scale(1.1);
}

/* Dark Mode Overrides */
body.dark-mode .finance-subtab-bar {
  background: #0f172a;
  border-color: #334155;
}
body.dark-mode .finance-subtab-btn.subtab-workers {
  background: #064e3b;
  border-color: #059669;
  color: #a7f3d0;
}
body.dark-mode .finance-subtab-btn.subtab-daily {
  background: #0c4a6e;
  border-color: #0284c7;
  color: #bae6fd;
}
body.dark-mode .finance-subtab-btn.subtab-monthly {
  background: #4c1d95;
  border-color: #7c3aed;
  color: #e9d5ff;
}
body.dark-mode .finance-subtab-btn.active {
  color: #ffffff !important;
}

/* ==========================================================================
   GMP Official Ministry Submission Letter (OCWC Request Letter)
   លិខិតស្នើសុំការឯកភាពបញ្ជូនឈ្មោះពលករ ដើម្បីសុំធ្វើប័ណ្ណពលករកម្ពុជា (OCWC)
   ========================================================================== */

.ocwc-muol {
  font-family: 'Moul', 'Khmer OS Muol Light', 'Khmer OS Muol', serif !important;
  font-weight: normal !important;
}

.ocwc-letter-sheet {
  background: #ffffff !important;
  color: #000000 !important;
  width: 210mm;
  height: 297mm;
  max-height: 297mm;
  min-height: 297mm;
  box-sizing: border-box;
  padding: 10mm 18mm 8mm 18mm;
  margin: 0 auto;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.25);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  font-family: 'Battambang', 'Khmer OS Battambang', 'Siemreap', sans-serif;
  font-size: 14.8px;
  line-height: 1.95;
  page-break-after: avoid !important;
  page-break-inside: avoid !important;
  overflow: hidden !important;
}

/* Header Section */
.ocwc-header {
  margin-bottom: 4px;
}

.ocwc-header-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
  width: 100%;
}

.ocwc-logo-box {
  flex-shrink: 0;
}

.ocwc-logo-img {
  height: 54px;
  width: auto;
  object-fit: contain;
  display: block;
}

.ocwc-company-titles {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ocwc-company-km {
  font-family: 'Moul', 'Khmer OS Muol Light', 'Khmer OS Muol', serif;
  font-size: 20.5px;
  color: #004b9b;
  margin-bottom: 2px;
  line-height: 1.35;
  letter-spacing: 0.3px;
  white-space: nowrap;
  outline: none;
}

.ocwc-company-en {
  font-family: 'Arial Black', Arial, 'Inter', sans-serif;
  font-weight: 900;
  font-size: 13.2px;
  color: #df4726;
  letter-spacing: 0.5px;
  line-height: 1.25;
  white-space: nowrap;
}

.ocwc-blue-bar-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 4px;
}

.ocwc-blue-bar {
  height: 2.8px;
  background: #004b9b;
  flex: 1;
}

.ocwc-blue-bar-end {
  width: 15px;
  height: 7px;
  background: #004b9b;
  margin-left: 2px;
}

/* Letter Meta Row */
.ocwc-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 5px;
  margin-bottom: 10px;
  font-size: 14.5px;
  line-height: 1.6;
}

.ocwc-meta-left {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-weight: 500;
}

.ocwc-meta-label {
  font-weight: 700;
  color: #000000;
}

.ocwc-letter-num {
  font-family: 'Battambang', 'Khmer OS Battambang', sans-serif;
  font-weight: 700;
  font-size: 14.8px;
  min-width: 110px;
  outline: none;
}

.ocwc-meta-right {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 14.2px;
  line-height: 1.6;
}

.ocwc-lunar-date {
  font-size: 13.8px;
  outline: none;
}

.ocwc-solar-date {
  font-size: 14.2px;
  font-weight: 500;
  outline: none;
}

/* Salutation */
.ocwc-salutation-section {
  text-align: center;
  margin: 6px 0 12px 0;
}

.ocwc-sender-title {
  font-family: 'Moul', 'Khmer OS Muol Light', 'Khmer OS Muol', serif;
  font-size: 14.5px;
  color: #000000;
  line-height: 1.6;
  outline: none;
}

.ocwc-respect-word {
  font-size: 14.2px;
  font-weight: 500;
  margin: 2px 0 3px 0;
  color: #000000;
}

.ocwc-recipient-title {
  font-family: 'Moul', 'Khmer OS Muol Light', 'Khmer OS Muol', serif;
  font-size: 15.5px;
  color: #000000;
  line-height: 1.6;
  letter-spacing: 0.3px;
  outline: none;
}

/* Block Section (Objective & Reference) */
.ocwc-block-section {
  margin: 8px 0 10px 0;
  font-size: 14.8px;
}

.ocwc-item-row {
  display: flex;
  align-items: baseline;
  line-height: 1.95;
  margin-bottom: 6px;
}

.ocwc-item-label {
  font-family: 'Moul', 'Khmer OS Muol Light', 'Khmer OS Muol', serif;
  font-size: 14.8px;
  min-width: 90px;
  flex-shrink: 0;
  color: #000000;
}

.ocwc-item-content {
  flex: 1;
  text-align: left;
  word-spacing: normal;
  outline: none;
}

.ocwc-inline-highlight {
  font-weight: 700;
  outline: none;
}

/* Body Text */
.ocwc-body-text {
  font-size: 14.8px;
  line-height: 1.95;
  text-align: left;
  word-spacing: normal;
}

.ocwc-paragraph {
  text-indent: 48px;
  margin: 0 0 8px 0;
  color: #000000;
  text-align: left;
  word-spacing: normal;
}

.ocwc-foreign-company-box {
  margin: 6px 0 10px 50px;
  font-size: 14.2px;
}

.ocwc-fc-line {
  display: flex;
  align-items: baseline;
  line-height: 1.88;
  margin-bottom: 4px;
}

.ocwc-fc-label {
  font-family: 'Moul', 'Khmer OS Muol Light', 'Khmer OS Muol', serif;
  font-size: 14px;
  min-width: 92px;
  flex-shrink: 0;
  color: #000000;
}

.ocwc-fc-colon {
  margin-right: 8px;
  font-weight: 700;
}

.ocwc-fc-val {
  font-weight: 700;
  color: #000000;
  outline: none;
}

.ocwc-closing-respect {
  margin: 8px 0 6px 0;
  text-indent: 60px;
  text-align: left;
  font-size: 14.8px;
  line-height: 1.95;
  color: #000000;
}

/* Footer Grid: Attachments & Signoff */
.ocwc-footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 12px;
  font-size: 13.5px;
}

.ocwc-attachments-box {
  flex: 1.1;
  line-height: 1.88;
}

.ocwc-att-item {
  color: #000000;
  margin-bottom: 3px;
  outline: none;
}

.ocwc-signoff-box {
  flex: 0.9;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 220px;
}

.ocwc-director-role {
  font-family: 'Moul', 'Khmer OS Muol Light', 'Khmer OS Muol', serif;
  font-size: 15.5px;
  color: #000000;
  margin-bottom: 2px;
  outline: none;
}

.ocwc-seal-wrapper {
  height: 90px;
  width: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0 auto;
}

.ocwc-seal-img {
  height: 88px;
  width: auto;
  object-fit: contain;
  transform: rotate(-1deg);
  display: block;
}

.ocwc-seal-placeholder {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Bottom Company Footer */
.ocwc-company-footer {
  margin-top: auto;
  padding-top: 4px;
}

.ocwc-footer-blue-bar {
  height: 2px;
  background: #004b9b;
  width: 100%;
  margin-bottom: 3px;
}

.ocwc-footer-km-addr {
  font-family: 'Battambang', 'Khmer OS Battambang', sans-serif;
  font-size: 11.2px;
  color: #004b9b;
  text-align: center;
  margin-bottom: 2px;
  font-weight: 700;
  line-height: 1.45;
}

.ocwc-footer-en-addr {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 10px;
  color: #334155;
  text-align: center;
  line-height: 1.35;
}

/* Editable Focus Feedback in Screen Mode */
@media screen {
  .ocwc-letter-sheet [contenteditable="true"]:hover {
    background-color: rgba(2, 132, 199, 0.08);
    border-radius: 2px;
    cursor: text;
  }
  .ocwc-letter-sheet [contenteditable="true"]:focus {
    background-color: rgba(2, 132, 199, 0.15);
    outline: 1px dashed #0284c7;
    border-radius: 3px;
  }
}

/* Print Rules */
@media print {
  @page {
    size: A4 portrait;
    margin: 0 !important;
  }
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 210mm !important;
    height: 297mm !important;
    max-height: 297mm !important;
    background: #ffffff !important;
    color: #000000 !important;
    overflow: hidden !important;
  }
  .no-print,
  .standalone-nav,
  header,
  footer,
  .btn,
  .modal-overlay:not(#ocwc-letter-modal):not(#ocwc-worker-list-modal),
  .modal-header,
  .modal-footer,
  #btn-theme {
    display: none !important;
  }
  .standalone-container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 210mm !important;
    height: 297mm !important;
    max-height: 297mm !important;
    overflow: hidden !important;
  }
  .app-doc-preview-wrapper,
  .preview-board {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    width: 210mm !important;
    height: 297mm !important;
    max-height: 297mm !important;
    overflow: hidden !important;
  }
  .ocwc-letter-sheet {
    box-shadow: none !important;
    border: none !important;
    margin: 0 auto !important;
    padding: 10mm 18mm 8mm 18mm !important;
    width: 210mm !important;
    max-width: 210mm !important;
    min-height: 297mm !important;
    height: 297mm !important;
    max-height: 297mm !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    page-break-after: avoid !important;
    page-break-inside: avoid !important;
    overflow: hidden !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* ==========================================================================
   GMP Official Ministry Worker List (OCWC Attached Worker List)
   បញ្ជីរាយនាមពលករខ្មែរដែលត្រូវធ្វើប័ណ្ណពលករកម្ពុជា (OCWC)
   ========================================================================== */

.ocwc-worker-sheet {
  background: #ffffff;
  color: #000000;
  width: 210mm;
  min-height: 297mm;
  padding: 14mm 14mm 12mm 14mm;
  box-sizing: border-box;
  box-shadow: 0 16px 44px rgba(15, 23, 42, 0.3);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  font-family: 'Battambang', 'Khmer OS Battambang', Arial, sans-serif;
  line-height: 1.5;
}

.ocwc-list-title-wrap {
  text-align: center;
  margin-bottom: 8px;
}

.ocwc-list-title {
  font-family: 'Battambang', 'Khmer OS Battambang', serif;
  font-weight: 900;
  font-size: 16.5px;
  color: #000000;
  margin: 0;
  line-height: 1.55;
  letter-spacing: 0.3px;
  outline: none;
}

.ocwc-table-responsive {
  width: 100%;
  overflow-x: hidden;
}

.ocwc-worker-table {
  width: 100%;
  border-collapse: collapse;
  border: 1.5px solid #64748b;
  font-size: 11.5px;
  table-layout: fixed;
}

.ocwc-worker-table thead th {
  background: #e0f2fe;
  color: #0369a1;
  font-family: 'Battambang', 'Inter', Arial, sans-serif;
  font-weight: 700;
  font-size: 11px;
  text-align: center;
  padding: 6px 3px;
  border: 1px solid #94a3b8;
  vertical-align: middle;
  word-wrap: break-word;
}

.ocwc-worker-table tbody tr {
  transition: background 0.15s ease;
}

.ocwc-worker-table tbody tr:hover {
  background: #f8fafc;
}

.ocwc-worker-table tbody td {
  border: 1px solid #cbd5e1;
  padding: 5px 3px;
  vertical-align: middle;
  color: #0f172a;
  overflow: hidden;
}

.ocwc-tb-no {
  text-align: center;
  font-weight: 700;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 11.5px;
}

.ocwc-tb-khmer {
  font-family: 'Battambang', 'Khmer OS Battambang', sans-serif;
  font-weight: 900;
  font-size: 13.5px;
  color: #000000;
  white-space: nowrap;
  outline: none;
}

.ocwc-tb-english {
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 700;
  font-size: 10px;
  color: #000000;
  text-transform: uppercase;
  white-space: nowrap;
  outline: none;
}

.ocwc-tb-sex {
  text-align: center;
  font-size: 10.5px;
  white-space: nowrap;
  outline: none;
}

.ocwc-tb-dob {
  text-align: center;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 11px;
  white-space: nowrap;
  outline: none;
}

.ocwc-tb-passport {
  text-align: center;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  outline: none;
}

.ocwc-tb-ocwc {
  text-align: center;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 11px;
  outline: none;
}

.ocwc-tb-pob {
  text-align: left;
  font-family: 'Battambang', 'Inter', Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  outline: none;
}

.ocwc-tb-act {
  text-align: center;
  padding: 2px !important;
}

.btn-tb-del {
  background: transparent;
  border: none;
  color: #ef4444;
  cursor: pointer;
  padding: 3px 5px;
  border-radius: 4px;
  font-size: 11px;
  transition: all 0.2s ease;
}

.btn-tb-del:hover {
  background: #fee2e2;
  transform: scale(1.1);
}

/* Signoff section */
.ocwc-list-signoff-wrap {
  margin-top: 14px;
  align-self: flex-end;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 260px;
}

.ocwc-list-date-line {
  font-family: 'Battambang', 'Khmer OS Battambang', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #000000;
  margin-bottom: 4px;
  white-space: nowrap;
}

.ocwc-list-role {
  font-family: 'Moul', 'Khmer OS Muol Light', serif;
  font-size: 15px;
  color: #000000;
  margin-bottom: 4px;
  outline: none;
}

.ocwc-list-seal-box {
  height: 92px;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0 auto;
}

.ocwc-list-seal-img {
  height: 92px;
  width: auto;
  object-fit: contain;
  transform: rotate(-1deg);
  display: block;
}

.ocwc-list-seal-placeholder {
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ocwc-list-name {
  font-family: 'Moul', 'Khmer OS Muol Light', serif;
  font-size: 15.5px;
  color: #000000;
  margin-top: 4px;
  letter-spacing: 0.5px;
  outline: none;
}

/* Print Rules for OCWC Worker List */
@media print {
  .ocwc-worker-sheet {
    box-shadow: none !important;
    border: none !important;
    margin: 0 auto !important;
    padding: 12mm 12mm 8mm 12mm !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 275mm !important;
    height: 275mm !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    page-break-after: avoid !important;
    page-break-inside: avoid !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .ocwc-worker-table thead th {
    background: #e0f2fe !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Modal Print Isolation: OCWC Submission Letter */
  body.printing-ocwc-letter * {
    visibility: hidden !important;
  }
  body.printing-ocwc-letter #ocwc-letter-modal,
  body.printing-ocwc-letter #ocwc-letter-modal .modal-card,
  body.printing-ocwc-letter #ocwc-letter-modal .modal-body,
  body.printing-ocwc-letter #modal-ocwc-letter-paper,
  body.printing-ocwc-letter #modal-ocwc-letter-paper *,
  body.printing-ocwc-letter #printable-ocwc-letter,
  body.printing-ocwc-letter #printable-ocwc-letter * {
    visibility: visible !important;
  }
  body.printing-ocwc-letter #ocwc-letter-modal {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 210mm !important;
    height: 297mm !important;
    max-height: 297mm !important;
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    z-index: 99999999 !important;
  }
  body.printing-ocwc-letter #ocwc-letter-modal .modal-card {
    box-shadow: none !important;
    border: none !important;
    width: 210mm !important;
    max-width: 210mm !important;
    height: 297mm !important;
    max-height: 297mm !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    overflow: hidden !important;
  }
  body.printing-ocwc-letter #ocwc-letter-modal .modal-header,
  body.printing-ocwc-letter #ocwc-letter-modal .modal-footer,
  body.printing-ocwc-letter #ocwc-letter-modal .no-print {
    display: none !important;
  }
  body.printing-ocwc-letter #ocwc-letter-modal .modal-body {
    padding: 0 !important;
    margin: 0 !important;
    width: 210mm !important;
    height: 297mm !important;
    max-height: 297mm !important;
    overflow: hidden !important;
    background: #ffffff !important;
  }
  body.printing-ocwc-letter #modal-ocwc-letter-paper {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 210mm !important;
    height: 297mm !important;
    max-height: 297mm !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Modal Print Isolation: OCWC Worker List */
  body.printing-ocwc-worker-list * {
    visibility: hidden !important;
  }
  body.printing-ocwc-worker-list #ocwc-worker-list-modal,
  body.printing-ocwc-worker-list #ocwc-worker-list-modal .modal-card,
  body.printing-ocwc-worker-list #ocwc-worker-list-modal .modal-body,
  body.printing-ocwc-worker-list #modal-ocwc-worker-list-paper,
  body.printing-ocwc-worker-list #modal-ocwc-worker-list-paper *,
  body.printing-ocwc-worker-list #printable-ocwc-worker-list,
  body.printing-ocwc-worker-list #printable-ocwc-worker-list * {
    visibility: visible !important;
  }
  body.printing-ocwc-worker-list #ocwc-worker-list-modal {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 210mm !important;
    height: 297mm !important;
    max-height: 297mm !important;
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    z-index: 99999999 !important;
  }
  body.printing-ocwc-worker-list #ocwc-worker-list-modal .modal-card {
    box-shadow: none !important;
    border: none !important;
    width: 210mm !important;
    max-width: 210mm !important;
    height: 297mm !important;
    max-height: 297mm !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    overflow: hidden !important;
  }
  body.printing-ocwc-worker-list #ocwc-worker-list-modal .modal-header,
  body.printing-ocwc-worker-list #ocwc-worker-list-modal .modal-footer,
  body.printing-ocwc-worker-list #ocwc-worker-list-modal .no-print {
    display: none !important;
  }
  body.printing-ocwc-worker-list #ocwc-worker-list-modal .modal-body {
    padding: 0 !important;
    margin: 0 !important;
    width: 210mm !important;
    height: 297mm !important;
    max-height: 297mm !important;
    overflow: hidden !important;
    background: #ffffff !important;
  }
  body.printing-ocwc-worker-list #modal-ocwc-worker-list-paper {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 210mm !important;
    height: 297mm !important;
    max-height: 297mm !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
}

/* ============================================================================
   ADMIN MODE STYLES (ISOLATION OF ADMINISTRATION & GUESTS FROM WORKER LISTS)
   ============================================================================ */
body.is-admin-mode .sidebar-company-section {
  display: none !important;
}

body.is-admin-mode .sidebar-admin-back-btn {
  display: flex !important;
}

body:not(.is-admin-mode) .sidebar-admin-suite-section {
  display: none !important;
}

body.is-admin-mode .sidebar-admin-suite-section {
  display: block !important;
}

/* Tab admin specific styling */
#tab-admin .card-box {
  transition: all 0.2s ease;
}

body.dark-mode #tab-admin .card-box {
  background: var(--bg-card);
  border-color: var(--border-color);
}

/* ============================================================================
   ADMIN VIRTUAL PC WORKSTATION (IN-APP DESKTOP OS)
   ============================================================================ */
.admin-pc-wrapper {
  position: relative;
  width: 100%;
  height: 640px;
  background: linear-gradient(135deg, #090d16 0%, #111827 50%, #0369a1 100%);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  user-select: none;
}

.admin-pc-wrapper.pc-fullscreen-mode {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
  border-radius: 0 !important;
}

.admin-pc-desktop-area {
  flex: 1;
  position: relative;
  padding: 24px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fill, 94px);
  grid-auto-rows: 98px;
  gap: 16px;
  align-content: flex-start;
}

.pc-desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  color: #ffffff;
}

.pc-desktop-icon:hover {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
}

.pc-desktop-icon:active {
  background: rgba(255, 255, 255, 0.25);
}

.pc-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.pc-icon-label {
  font-size: 11.5px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  line-height: 1.2;
}

/* Windows inside Virtual PC */
.pc-window {
  position: absolute;
  top: 20px;
  left: 30px;
  right: 30px;
  bottom: 50px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  display: none;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.pc-window.maximized {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 44px !important;
  border-radius: 0 !important;
}

.pc-window-titlebar {
  height: 38px;
  background: #0f172a;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
}

.pc-window-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pc-win-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
}

.pc-win-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.pc-win-btn.close:hover {
  background: #ef4444;
}

.pc-window-body {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
}

/* Taskbar */
.admin-pc-taskbar {
  height: 44px;
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  z-index: 9999;
}

/* ==========================================================================
   THAILAND PASSPORT / TRAVEL DOCUMENT RENEWAL OFFICIAL DOCUMENT STYLES
   ========================================================================== */
.passport-doc-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.passport-sheet {
  background: #ffffff !important;
  color: #000000 !important;
  width: 210mm;
  min-height: 297mm;
  max-width: 210mm;
  margin: 0 auto 30px auto;
  padding: 18mm 14mm 16mm 14mm;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
  border-radius: 2px;
  box-sizing: border-box;
  font-family: 'Times New Roman', Times, Cambria, 'Kantumruy Pro', serif;
  font-size: 13.5pt;
  line-height: 1.45;
  position: relative;
  display: flex;
  flex-direction: column;
}

.passport-sheet.passport-page-appendix {
  padding: 16mm 12mm 16mm 12mm;
}

.passport-sheet:last-child {
  margin-bottom: 0;
}

@media screen {
  .passport-editable-box:hover,
  .passport-letter-company:hover,
  .passport-table-row td[contenteditable="true"]:hover {
    background-color: rgba(2, 132, 199, 0.08);
    border-radius: 2px;
    cursor: text;
  }
  .passport-editable-box:focus,
  .passport-letter-company:focus,
  .passport-table-row td[contenteditable="true"]:focus {
    background-color: rgba(2, 132, 199, 0.15);
    outline: 1.5px dashed #0284c7;
    border-radius: 2px;
  }
}

.passport-letter-date {
  font-size: 13.5pt;
  margin-bottom: 22px;
}

.passport-letter-company {
  font-size: 13.5pt;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.passport-letter-to {
  font-size: 13.5pt;
  margin-bottom: 22px;
}

.passport-letter-subject {
  font-size: 14pt;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 20px;
}

.passport-letter-salutation {
  font-size: 13.5pt;
  margin-bottom: 18px;
}

.passport-letter-body-p {
  font-size: 13pt;
  text-align: justify;
  line-height: 1.55;
  margin-bottom: 18px;
}

.passport-letter-appendix-mention {
  font-size: 13pt;
  font-weight: 700;
  margin-top: 14px;
  margin-bottom: 22px;
}

.passport-letter-closing {
  font-size: 13pt;
  line-height: 1.5;
  margin-bottom: 26px;
}

.passport-letter-signature-block {
  margin-top: 20px;
}

.sign-stamp-label {
  font-size: 13.5pt;
  font-weight: 700;
  margin-bottom: 50px;
}

.signer-name-row {
  font-size: 13.5pt;
}

.signer-underline {
  display: inline-block;
  min-width: 220px;
  border-bottom: 1px solid #000000;
  padding: 0 8px;
}

/* Appendix Page Styles */
.passport-appendix-header {
  margin-bottom: 18px;
}

.appendix-title-main {
  font-size: 14pt;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.appendix-title-small {
  font-size: 12.5pt;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.appendix-subtitle {
  font-size: 14pt;
  font-weight: 800;
  text-transform: uppercase;
  margin-top: 4px;
  margin-bottom: 14px;
  letter-spacing: 0.3px;
}

.appendix-meta-companies {
  font-size: 13pt;
  line-height: 1.6;
}

.meta-company-row {
  display: flex;
  gap: 8px;
}

/* Workers Table in Appendix */
.passport-renewal-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
  font-family: inherit;
  font-size: 11.5pt;
  table-layout: auto;
}

.passport-renewal-table th,
.passport-renewal-table td {
  border: 1px solid #000000;
  padding: 6px 6px;
  vertical-align: middle;
}

.passport-renewal-table th {
  font-weight: 700;
  text-align: center;
  background: #ffffff;
  padding: 9px 5px;
  font-size: 11pt;
}

.passport-renewal-table .cell-no {
  text-align: center;
  font-weight: 600;
  width: 40px;
}

.passport-renewal-table .cell-name {
  text-align: left;
  font-weight: 700;
  text-transform: uppercase;
  padding-left: 10px;
  padding-right: 6px;
  white-space: nowrap; /* Worker name stays strictly on one line */
}

.passport-renewal-table .cell-dob {
  text-align: center;
  font-weight: 500;
  white-space: nowrap;
  width: 125px;
}

.passport-renewal-table .cell-passport {
  text-align: center;
  font-weight: 700;
  white-space: nowrap;
  width: 120px;
}

.passport-renewal-table .cell-fingerprint {
  width: 130px;
  height: 50px;
  min-height: 50px;
  background: #ffffff;
}

.btn-del-row {
  background: none;
  border: none;
  color: #dc2626;
  font-size: 13px;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 4px;
}
.btn-del-row:hover {
  background: #fee2e2;
}

/* Print Rules for Passport Renewal */
@media print {
  @page {
    size: A4 portrait;
    margin: 10mm 10mm !important;
  }
  
  #thailand-passport-modal,
  #thailand-passport-modal *,
  .passport-doc-container,
  .passport-doc-container * {
    visibility: visible !important;
  }
  
  #thailand-passport-modal {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    overflow: visible !important;
    z-index: 999999 !important;
  }
  
  #thailand-passport-modal .modal-card {
    box-shadow: none !important;
    border: none !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    overflow: visible !important;
  }
  
  #thailand-passport-modal .modal-header,
  #thailand-passport-modal .modal-header-actions,
  #thailand-passport-modal .no-print,
  .no-print {
    display: none !important;
  }

  #thailand-passport-modal .modal-body {
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  
  .passport-sheet {
    box-shadow: none !important;
    border: none !important;
    margin: 0 auto !important;
    padding: 6mm 4mm 6mm 4mm !important;
    width: 100% !important;
    max-width: 100% !important;
    page-break-after: always !important;
    break-after: page !important;
    box-sizing: border-box !important;
  }
  
  .passport-sheet:last-child {
    page-break-after: avoid !important;
    break-after: avoid !important;
  }
  
  .passport-renewal-table tr {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
}

/* ==========================================================================
   BOSS NOTIFICATIONS & APPROVAL SYSTEM
   ========================================================================== */
.header-notification-wrap {
  position: relative;
}

.notification-count-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: #ef4444;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 5px rgba(239, 68, 68, 0.4);
  animation: pulseNotif 2s infinite;
}

@keyframes pulseNotif {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

#btn-notification-bell.has-unread {
  color: #0284c7;
  border-color: #7dd3fc;
  background: #f0f9ff;
}

.boss-notification-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 420px;
  max-width: 90vw;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
  z-index: 10000;
  overflow: hidden;
  animation: dropdownFadeIn 0.2s ease-out forwards;
}

@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.boss-notif-header {
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.boss-notif-item {
  cursor: pointer;
}

.boss-notif-item:hover {
  background: #f1f5f9 !important;
}

.boss-notif-item.unread {
  background: #f0fdf4 !important;
  border-left: 3px solid #10b981;
}

@keyframes bossToastSlideIn {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

body.light-mode .boss-notification-dropdown {
  background: #ffffff;
  border-color: #cbd5e1;
}

/* Official GMP Payroll Report Print Styling */
@media print {
  body.printing-payroll-report {
    background: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.printing-payroll-report * {
    visibility: hidden !important;
  }
  body.printing-payroll-report #official-payroll-report-modal,
  body.printing-payroll-report #official-payroll-report-modal *,
  body.printing-payroll-report #official-payroll-report-paper,
  body.printing-payroll-report #official-payroll-report-paper * {
    visibility: visible !important;
  }
  body.printing-payroll-report #official-payroll-report-modal {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    display: block !important;
  }
  body.printing-payroll-report #official-payroll-report-modal .modal-header,
  body.printing-payroll-report #official-payroll-report-modal .modal-footer,
  body.printing-payroll-report #official-payroll-report-modal .btn,
  body.printing-payroll-report #official-payroll-report-modal .btn-icon {
    display: none !important;
  }
  body.printing-payroll-report #official-payroll-report-modal .modal-card {
    border: none !important;
    box-shadow: none !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
  }
  body.printing-payroll-report #official-payroll-report-modal .modal-body {
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
  }
  body.printing-payroll-report #official-payroll-report-paper {
    box-shadow: none !important;
    border: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  @page {
    size: A4 landscape;
    margin: 8mm 10mm;
  }
}





/* ===== Group Members Popup Animation ===== */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}