:root {
  --primary: #7C5CFF;
  --primary-rgb: 124, 92, 255;
  --primary-light: #A78BFA;
  --primary-lighter: #C4B5FD;
  --primary-lightest: #E9D5FF;
  --primary-wash: #F5F3FF;

  --background: #f2f5ff;
  --surface: #FFFFFF;

  --text-primary: #1F2937;
  --text-secondary: #6B7280;
  --text-tertiary: #9CA3AF;

  --border-soft: #ECECF3;

  --success: #22C55E;
  --warning: #F59E0B;
  --danger: #EF4444;
  --info: #3B82F6;

  --panel-bg: rgba(255, 255, 255, 0.8);
  --panel-bg-solid: rgba(255, 255, 255, 1);
  --panel-border: rgba(255, 255, 255, 0.4);
  --panel-border-solid: #ECECF3;

  --sidebar-width: 280px;
  --sidebar-collapsed-width: 104px;
}

.dark {
  --primary: #9b7fff;
  --primary-rgb: 155, 127, 255;
  --primary-light: #b39dfa;
  --primary-lighter: #c4b5fd;
  --primary-lightest: rgba(155, 127, 255, 0.22);
  --primary-wash: rgba(155, 127, 255, 0.12);

  /* Slightly lifted backgrounds for better layer separation */
  --background: #0c0d18;
  --surface: #1c1c22;

  /* Significantly higher contrast text — fixes tiny-label readability */
  --text-primary: #f0f0f6;
  --text-secondary: #c2c2ce;   /* was #a1a1aa  → +35% brightness */
  --text-tertiary: #8e8e9e;    /* was #71717a  → +25% brightness */

  /* Much more visible borders — was nearly invisible #27272a */
  --border-soft: #3e3e4a;

  --success: #4ade80;
  --warning: #fbbf24;
  --danger: #f87171;
  --info: #60a5fa;

  --panel-bg: rgba(28, 28, 34, 0.78);
  --panel-bg-solid: rgba(28, 28, 34, 1);
  --panel-border: rgba(255, 255, 255, 0.14);
  --panel-border-solid: #4c4c5a;
}

body {
  background-color: var(--background);
  color: var(--text-primary);
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Glassmorphism utilities */
.glass {
  background-color: var(--panel-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--panel-border);
}

.glass-panel {
  background-color: var(--panel-bg);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid var(--panel-border-solid);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
}

.dark .glass-panel {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.text-gradient {
  background: linear-gradient(to right, var(--primary), var(--primary-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Sidebar Specific Styles */
#sidebar {
  width: var(--sidebar-width);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#sidebar.collapsed {
  width: var(--sidebar-collapsed-width) !important;
}

#sidebar.collapsed .glass-panel,

#sidebar.collapsed .flex-1,
#sidebar.collapsed .sidebar-group {
  overflow: visible !important;
}

#sidebar.collapsed .flex-1.overflow-y-auto {
  overflow: visible !important;
  scrollbar-width: none;
}


.sidebar-item-text {
  transition: opacity 0.2s ease, visibility 0.2s ease;
}


.collapsed .sidebar-item-text,
.collapsed .sidebar-header-text,
.collapsed .sidebar-item-chevron {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  width: 0;
  margin: 0;
  display: none !important;
}


#sidebar.collapsed .glass-panel header,
#sidebar.collapsed .sidebar-footer-btn {
  justify-content: center !important;
}

#sidebar.collapsed .sidebar-footer-btn {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Flip chevron when collapsed.
   Must be CSS (not just JS) because lucide.createIcons() replaces the <i>
   with a fresh <svg> after main.js sets the inline transform, discarding it. */
#sidebar:not(.collapsed) #toggle-icon { transform: rotate(0deg); }
#sidebar.collapsed        #toggle-icon { transform: rotate(180deg); }

#sidebar.collapsed .sidebar-header-container {
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.collapsed .sidebar-item {
  justify-content: center;
  padding-left: 0 !important;
  padding-right: 0 !important;
}


.collapsed .sidebar-item i {
  margin: 0;
}

/* Flyout Submenu for Collapsed Sidebar */
@media (min-width: 1024px) {
  .collapsed .sidebar-group {
    position: relative;
  }

  .collapsed .sidebar-group:hover > .submenu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) translateY(0) !important;
    pointer-events: auto !important;
  }

  .collapsed .submenu {
    position: absolute !important;
    left: 100% !important;
    top: 0 !important;
    margin-left: 20px !important; /* Overlap slightly to ensure hover continuity */
    width: 220px !important;
    background-color: var(--panel-bg-solid) !important;
    border: 1px solid var(--panel-border-solid) !important;
    border-radius: 1.25rem !important;
    padding: 0.75rem !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 9999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-10px) translateY(0) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    backdrop-filter: blur(24px) !important;
    pointer-events: none !important;
  }

  /* Hover Bridge: Expanded to cover the entire path from icon to menu */
  .collapsed .submenu::before {
    content: '';
    position: absolute;
    left: -30px;
    top: -20px;
    bottom: -20px;
    width: 40px;
    background: transparent;
    z-index: -1;
  }


  /* Arrow design for the flyout */
  .collapsed .submenu::after {
    content: '';
    position: absolute;
    left: -6px;
    top: 20px;
    width: 12px;
    height: 12px;
    background-color: var(--panel-bg-solid);
    border-left: 1px solid var(--panel-border-solid);
    border-bottom: 1px solid var(--panel-border-solid);
    transform: rotate(45deg);
    z-index: -1;
  }


  .collapsed .sidebar-group:hover .submenu {
    pointer-events: auto;
  }


  .collapsed .submenu a {
    padding: 0.625rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    transition: all 0.2s;
  }

  .collapsed .submenu a:hover {
    background-color: var(--primary-wash);
    color: var(--primary);
  }
}

/* Dropdown Menus */
.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  width: 280px;
  background-color: var(--panel-bg-solid);
  border: 1px solid var(--panel-border-solid);
  border-radius: 1.25rem;
  padding: 0.75rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  display: none;
  flex-direction: column;
  z-index: 2000;
  backdrop-filter: blur(24px);
  animation: slideDown 0.2s ease-out;
}

.dropdown-menu.show {
  display: flex;
}

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

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  transition: all 0.2s;
}

.dropdown-item:hover {
  background-color: var(--primary-wash);
  color: var(--primary);
}

.dropdown-item i {
  width: 1.25rem;
  height: 1.25rem;
}

/* Lucide Icons weight fix */


.lucide {
  stroke-width: 2px;
}

/* Transitions */
.fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}

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

/* Mobile Drawer View */
@media (max-width: 1023px) {
  #sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    transform: translateX(-100%);
    z-index: 100 !important;
    width: 280px !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 1rem !important;
  }

  #sidebar .glass-panel {
    border-radius: 1.5rem !important; /* matches 3xl */
    height: 100% !important;
  }

  #sidebar.mobile-open,
  #sidebar.mobile-open.collapsed {
    transform: translateX(0) !important;
    width: 280px !important;
  }

  /* Force expanded mode content on mobile */
  #sidebar.mobile-open .sidebar-item-text,
  #sidebar.mobile-open .sidebar-header-text,
  #sidebar.mobile-open .sidebar-item-chevron {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    width: auto !important;
    pointer-events: auto !important;
  }

  #sidebar.mobile-open .sidebar-item {
    justify-content: flex-start !important;
    padding-left: 1rem !important;
  }
}

/* ── Premium Modern UI Components (Bootstrap Replacements) ─────────────────── */

/* 1. Global Custom Theme Settings */
.dark .filter_border,
.dark select,
.dark input,
.dark textarea,
.dark table,
.dark th,
.dark td,
.dark .border-border-soft {
  border-color: var(--border-soft) !important;
}

/* 2. Custom Modern Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px !important; /* Premium Pill style */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: 1px solid transparent;
  outline: none;
}
.btn-primary {
  background-color: var(--primary) !important;
  color: white !important;
  box-shadow: 0 4px 14px rgba(124, 92, 255, 0.15);
}
.btn-primary:hover {
  background-color: var(--primary-light) !important;
  box-shadow: 0 6px 20px rgba(124, 92, 255, 0.3);
  transform: translateY(-1px);
}
.btn-light {
  background-color: var(--surface) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-primary) !important;
}
.btn-light:hover {
  background-color: var(--primary-wash) !important;
  color: var(--primary) !important;
  border-color: var(--primary-light) !important;
}
.btn-outline-primary {
  background-color: transparent !important;
  border: 1.5px solid var(--primary) !important;
  color: var(--primary) !important;
}
.btn-outline-primary:hover {
  background-color: var(--primary) !important;
  color: white !important;
}
.btn-outline-danger {
  background-color: transparent !important;
  border: 1.5px solid var(--danger) !important;
  color: var(--danger) !important;
}
.btn-outline-danger:hover {
  background-color: var(--danger) !important;
  color: white !important;
}
.btn-sm {
  padding: 0.5rem 1rem !important;
  font-size: 0.75rem !important;
}

/* 3. Custom Modal Architecture (Glassmorphic) */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1050;
  display: none;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
  background-color: rgba(9, 9, 11, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s ease;
}
.modal.show {
  display: flex !important;
  align-items: flex-start;
  padding: 1.5rem;
}
.modal-dialog {
  position: relative;
  width: 100%;
  margin: 0 auto;
  pointer-events: none;
  max-width: 550px;
  transform: scale(0.95) translateY(10px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal.show .modal-dialog {
  transform: scale(1) translateY(0);
}
/* Vertically center very short modals (confirm/alert type) */
.modal.show .modal-dialog-sm-centered {
  margin-top: auto;
  margin-bottom: auto;
}
.modal-dialog.modal-lg {
  max-width: 850px;
}
.modal-dialog.modal-xl {
  max-width: 1180px;
}
.modal-dialog.modal-sm {
  max-width: 350px;
}
.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 2.5rem !important;  /* match Tailwind rounded-[2.5rem] */
  outline: 0;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  overflow: hidden !important;       /* guarantee child clipping to rounded corners */
}
.dark .modal-content {
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.6);
  border-color: var(--border-soft);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
  /* Always clip to parent modal-content's rounded top corners */
  border-radius: 2.5rem 2.5rem 0 0;
  overflow: hidden;
}
.modal-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.btn-close {
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
  margin: -0.5rem;
  opacity: 0.6;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-close:hover {
  opacity: 1;
  color: var(--text-primary);
  transform: rotate(90deg);
}
.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 2rem;
  background: var(--surface);
  overflow-y: auto;
  max-height: calc(100dvh - 12rem); /* ensure body scrolls, not outer page */
}
.modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 2rem 1.5rem;
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
}

/* 3b. Form control fallbacks (used by legacy code, Summernote, etc.) */
.form-control,
.form-select {
  display: block;
  width: 100%;
  background: var(--background);
  border: 1px solid var(--border-soft);
  border-radius: 0.75rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: var(--text-primary);
  outline: none;
  transition: border-color .2s;
  box-sizing: border-box;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(124,92,255,0.12);
}
.form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}
.form-group,
.form-group.mb-4 { margin-bottom: 1rem; }

/* 4. Tab Navigation System (Premium Attendance Dashboard Alignment) */
.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
  border-bottom: none !important;
}
.nav-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  color: var(--text-secondary) !important;
  background-color: var(--surface) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 1rem !important;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}
.nav-tabs .nav-link:hover {
  background-color: var(--primary-wash) !important;
  color: var(--primary) !important;
  border-color: var(--primary-light) !important;
}
.nav-tabs .nav-link.active {
  color: white !important;
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 4px 12px rgba(124, 92, 255, 0.2);
}
.nav-tabs .nav-link.active .count-badge,
.stage-pill.active .count-badge,
.nav-link.active .count-badge {
  background-color: rgba(255, 255, 255, 0.25) !important;
  color: white !important;
}
.tab-content > .tab-pane {
  display: none;
}
.tab-content > .tab-pane.active {
  display: block !important;
}

/* 5. Custom Dropdown Components */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  min-width: 12rem;
  padding: 0.5rem;
  margin: 0.25rem 0 0;
  background-color: var(--surface) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 1.25rem !important;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: dropdownSlide 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.dropdown-menu.show {
  display: block !important;
}
.dropdown-menu-end {
  right: 0 !important;
  left: auto !important;
}
.dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  width: 100%;
  padding: 0.625rem 1rem !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  color: var(--text-secondary) !important;
  border-radius: 0.875rem !important;
  transition: all 0.2s !important;
  background: transparent !important;
}
.dropdown-item:hover {
  color: var(--primary) !important;
  background-color: var(--primary-wash) !important;
}
@keyframes dropdownSlide {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 6. Layout Grid Fallbacks */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -0.75rem;
  margin-left: -0.75rem;
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}
@media (min-width: 768px) {
  .col-md-6 {
    flex: 0 0 auto;
    width: 50% !important;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100% !important;
  }
}
@media (min-width: 1200px) {
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.66666667% !important;
  }
}
.mb-5 { margin-bottom: 1.25rem !important; }
.mt-5 { margin-top: 1.25rem !important; }
.my-5 { margin-top: 1.25rem !important; margin-bottom: 1.25rem !important; }

/* ── Bootstrap Colors / Utilities (Protection System) ───────────────────── */
.text-primary { color: var(--primary) !important; }
.bg-primary { background-color: var(--primary) !important; }
.border-primary { border-color: var(--primary) !important; }
.text-success { color: var(--success) !important; }
.bg-success { background-color: var(--success) !important; }
.border-success { border-color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.bg-warning { background-color: var(--warning) !important; }
.border-warning { border-color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }
.bg-danger { background-color: var(--danger) !important; }
.border-danger { border-color: var(--danger) !important; }
.text-info { color: var(--info) !important; }
.bg-info { background-color: var(--info) !important; }
.border-info { border-color: var(--info) !important; }

/* ── Select2 Dropdown Premium Redesign ────────────────────────────────────── */
.select2-container--default .select2-selection--single {
  background-color: var(--surface) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 1rem !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;
  padding: 0 0.5rem !important;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.15) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-primary) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  padding-left: 0.5rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px !important;
  right: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--text-secondary) transparent transparent transparent !important;
  border-width: 6px 5px 0 5px !important;
  transition: transform 0.25s ease !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  transform: rotate(180deg) !important;
  border-color: var(--primary) transparent transparent transparent !important;
}

/* Multiple select elements design */
.select2-container--default .select2-selection--multiple {
  background-color: var(--surface) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 1rem !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  padding: 4px 8px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.15) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--primary-wash) !important;
  border: 1px solid var(--primary-light) !important;
  color: var(--primary) !important;
  border-radius: 0.5rem !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  margin: 2px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--primary) !important;
  font-weight: 800 !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: color 0.2s !important;
  margin-right: 2px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: var(--danger) !important;
  background: transparent !important;
}

/* Dropdown Menu styling */
.select2-dropdown {
  background-color: var(--surface) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 1.25rem !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
  z-index: 9999 !important;
  overflow: hidden !important;
  margin-top: 4px !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

.dark .select2-dropdown {
  box-shadow: 0 25px 55px rgba(0, 0, 0, 0.5) !important;
}

.select2-search--dropdown {
  padding: 10px !important;
  background-color: var(--surface) !important;
}

.select2-search--dropdown .select2-search__field {
  background-color: var(--background) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 0.75rem !important;
  padding: 8px 12px !important;
  color: var(--text-primary) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  outline: none !important;
  transition: all 0.2s !important;
}

.select2-search--dropdown .select2-search__field:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.1) !important;
}

.select2-results__options {
  max-height: 250px !important;
  padding: 6px !important;
  background-color: var(--surface) !important;
}

.select2-results__option {
  padding: 10px 14px !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  border-radius: 0.75rem !important;
  transition: none !important;
  margin-bottom: 2px !important;
  cursor: pointer !important;
  background-color: transparent !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--primary) !important;
  color: white !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
  opacity: 0.85 !important;
}

.select2-results__option--disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* ── Global Premium Scrollbar System (Dark & Light Theme Harmony) ────────── */
* {
  scrollbar-width: thin !important;
  scrollbar-color: var(--border-soft) transparent !important;
}

::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
}

::-webkit-scrollbar-thumb {
  background-color: var(--border-soft) !important;
  border-radius: 9999px !important;
  border: 1px solid transparent !important;
  background-clip: padding-box !important;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--text-secondary) !important;
}

/* ── Custom Login Tab Switcher Styling ────────────────────────────────────── */
#login-container .flex.p-1\.5 {
  background-color: var(--surface) !important;
  border: 1px solid var(--border-soft) !important;
  box-shadow: none !important;
}

#login-container button.flex-1 {
  color: var(--text-secondary) !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 1px solid transparent !important;
  outline: none !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

#login-container button.flex-1:hover {
  color: var(--text-primary) !important;
}

#login-container button.flex-1:focus,
#login-container button.flex-1:focus-visible,
#login-container button.flex-1:active {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

#login-container button.flex-1.bg-white {
  background-color: var(--background) !important;
  color: var(--primary) !important;
  box-shadow: 0 4px 12px rgba(124, 92, 255, 0.08) !important;
  border: 1px solid var(--border-soft) !important;
}

#login-container button.flex-1.bg-white:focus,
#login-container button.flex-1.bg-white:active {
  border-color: var(--border-soft) !important;
  outline: none !important;
}

/* Dark Mode Overrides */
.dark #login-container .flex.p-1\.5 {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark #login-container button.flex-1.bg-white {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--primary) !important;
}

.dark #login-container button.flex-1.bg-white:focus,
.dark #login-container button.flex-1.bg-white:active {
  border-color: rgba(255, 255, 255, 0.12) !important;
  outline: none !important;
}

.dark #login-container button.flex-1:focus,
.dark #login-container button.flex-1:focus-visible,
.dark #login-container button.flex-1:active {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Remove outlines and borders on action/submit buttons inside the login forms */
#pwdForm button,
#otpForm button,
#pwdForm #loginWithPassBtn,
#otpForm #sendOTPbtn,
#otpForm #otpLoginBtn {
  border: none !important;
  outline: none !important;
}

#pwdForm button:focus,
#pwdForm button:active,
#otpForm button:focus,
#otpForm button:active,
#pwdForm #loginWithPassBtn:focus,
#pwdForm #loginWithPassBtn:active,
#otpForm #sendOTPbtn:focus,
#otpForm #sendOTPbtn:active,
#otpForm #otpLoginBtn:focus,
#otpForm #otpLoginBtn:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}
}

/* SweetAlert2 Global Modern & Dark Mode Overrides */
.swal2-popup {
  border-radius: 1.5rem !important;
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid var(--border-soft) !important;
}

.swal2-confirm, .swal2-cancel {
  border-radius: 0.75rem !important;
  font-weight: 600 !important;
  padding: 0.625rem 1.5rem !important;
}

.swal2-confirm {
  background-color: var(--primary) !important;
}

/* Dark Mode SweetAlert */
.dark .swal2-popup {
  background-color: #18181b !important; /* Surface color in dark mode */
  color: #f4f4f5 !important; /* Text primary */
  border-color: #27272a !important; /* Border soft */
  box-shadow: 0 20px 40px rgba(0,0,0,0.5) !important;
}

.dark .swal2-title,
.dark .swal2-html-container {
  color: #f4f4f5 !important;
}

/* Fix the white backgrounds behind animated success icons */
.dark .swal2-success-circular-line-left,
.dark .swal2-success-circular-line-right,
.dark .swal2-success-fix {
  background-color: #18181b !important;
}

.dark .swal2-icon.swal2-success [class^=swal2-success-line] {
  background-color: #34D399 !important; /* var(--success) */
}

.dark .swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(52, 211, 153, 0.3) !important;
}

.dark .swal2-icon.swal2-error [class^=swal2-x-mark-line] {
  background-color: #F87171 !important; /* var(--danger) */
}

.dark .swal2-icon.swal2-error {
  border-color: rgba(248, 113, 113, 0.3) !important;
}

.dark .swal2-confirm {
  background-color: #9b7fff !important;
  color: white !important;
}

.dark .swal2-cancel {
  background-color: #3e3e4a !important;
  color: #f0f0f6 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE CONTRAST & ELEVATION SYSTEM
   Fixes: invisible borders, unreadable tiny labels, flat grid cells
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Info grid cells inside modals — elevated surface so cells stand out ── */
.dark .modal-content .bg-surface,
.dark .modal-body .bg-surface {
  background-color: #242430 !important;
}

/* ── 2. Snapshot sidebar inside modals ── */
.dark .modal-body .bg-surface\/40,
.dark .modal-body [class*="bg-surface"] {
  background-color: #20202c !important;
}

/* ── 3. Label text at ultra-small sizes (9-10px) — boost to near-primary ── */
.dark [class*="text-text-secondary"] {
  color: var(--text-secondary) !important;
}
.dark .text-\[9px\].font-black.text-text-secondary,
.dark .text-\[10px\].font-black.text-text-secondary,
.dark .text-xs.font-black.text-text-secondary,
.dark [class~="text-[9px]"][class~="text-text-secondary"],
.dark [class~="text-[10px]"][class~="text-text-secondary"] {
  color: #d0d0dc !important;
}

/* ── 4. Table cells — readable in dark mode ── */
.dark table.dataTable thead th {
  background-color: #1c1c22 !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border-soft) !important;
}
.dark table.dataTable tbody tr td {
  background-color: #1c1c22 !important;
  color: var(--text-primary) !important;
  border-color: var(--border-soft) !important;
}
.dark table.dataTable tbody tr:hover td {
  background-color: #242430 !important;
}

/* ── 5. Stat cards — legible numbers and labels ── */
.dark .stat-card {
  background-color: var(--surface) !important;
  border-color: var(--border-soft) !important;
}
.dark .stat-card p,
.dark .stat-card span {
  color: var(--text-secondary) !important;
}
.dark .stat-card h2,
.dark .stat-card .text-2xl,
.dark .stat-card .text-3xl {
  color: var(--text-primary) !important;
}

/* ── 6. Glass panel border visibility ── */
.dark .glass-panel {
  border-color: var(--border-soft) !important;
  background-color: var(--surface) !important;
}

/* ── 7. Form inputs — visible bg & border ── */
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.dark select,
.dark textarea {
  background-color: #0d0d11 !important;
  border-color: var(--border-soft) !important;
  color: var(--text-primary) !important;
}
.dark input::placeholder,
.dark textarea::placeholder {
  color: var(--text-tertiary) !important;
}

/* ── 8. Modal header and footer bands ── */
.dark .modal-header,
.dark .modal-footer {
  background-color: var(--surface) !important;
  border-color: var(--border-soft) !important;
}

/* ── 9. Navigation tab buttons inside modals ── */
.dark .em-tab-btn {
  color: var(--text-secondary) !important;
}
.dark .em-tab-btn.border-primary {
  color: var(--primary) !important;
}

/* ── 10. Divide lines & border utility classes ── */
.dark .divide-border-soft > * + * {
  border-color: var(--border-soft) !important;
}
.dark [class*="border-border-soft"] {
  border-color: var(--border-soft) !important;
}

/* ── 11. Active / status badges in table ── */
.dark .text-success { color: #4ade80 !important; }
.dark .text-danger  { color: #f87171 !important; }
.dark .text-warning { color: #fbbf24 !important; }
.dark .text-info    { color: #60a5fa !important; }

/* ── 12. DataTable pagination & length controls ── */
.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--text-secondary) !important;
  border-color: var(--border-soft) !important;
  background: var(--surface) !important;
}
.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}
.dark .dataTables_wrapper .dataTables_info,
.dark .dataTables_wrapper .dataTables_length,
.dark .dataTables_wrapper .dataTables_filter {
  color: var(--text-secondary) !important;
}
.dark .dataTables_wrapper .dataTables_length select,
.dark .dataTables_wrapper .dataTables_filter input {
  background-color: var(--surface) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-primary) !important;
}

/* ============================================================
   Premium Length Picker — JS-generated custom dropdown that
   replaces the native select[data-length]. The native select
   stays in the DOM (DataTable binds change events to it) but
   is visually hidden via the rules below.
   ============================================================ */
select[data-length] {
  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;
  border: 0 !important; opacity: 0 !important;
  pointer-events: none !important;
}

.hrx-length-picker { position: relative; display: inline-flex; }

.hrx-length-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px;
  background: var(--background);
  border: 1.5px solid var(--border-soft);
  border-radius: 14px;
  font-size: 12px; font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer; outline: none; white-space: nowrap;
  font-family: inherit;
  transition: border-color .18s, color .18s, background .18s, box-shadow .18s;
}
.hrx-length-trigger:hover {
  border-color: var(--primary); color: var(--primary);
  background: color-mix(in srgb, var(--primary) 5%, var(--background));
}
.hrx-length-trigger.open {
  border-color: var(--primary); color: var(--primary);
  background: color-mix(in srgb, var(--primary) 5%, var(--background));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}
.hrx-length-trigger .hrx-lt-chevron {
  opacity: .55; transition: transform .18s cubic-bezier(.4,0,.2,1), opacity .18s;
}
.hrx-length-trigger.open .hrx-lt-chevron { transform: rotate(180deg); opacity: 1; }

.hrx-length-menu {
  display: none;
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 88px;
  background: var(--surface);
  border: 1.5px solid var(--border-soft);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
  padding: 4px; z-index: 9999;
  animation: hrx-lm-in .15s cubic-bezier(.4,0,.2,1);
}
.hrx-length-menu.open { display: block; }
@keyframes hrx-lm-in {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.hrx-length-menu button {
  display: block; width: 100%; padding: 7px 11px;
  text-align: left; font-size: 12px; font-weight: 700;
  color: var(--text-secondary); background: transparent;
  border: none; border-radius: 10px; cursor: pointer;
  font-family: inherit;
  transition: background .12s, color .12s;
}
.hrx-length-menu button:hover { background: var(--background); color: var(--text-primary); }
.hrx-length-menu button.active {
  color: var(--primary); font-weight: 800;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.dark .hrx-length-trigger { background: var(--surface); }
.dark .hrx-length-trigger:hover,
.dark .hrx-length-trigger.open {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}
.dark .hrx-length-menu { box-shadow: 0 8px 32px rgba(0,0,0,0.35); }

/* Table header search input — unified rounded-2xl sizing */
input[data-search] {
  border-radius: 0.875rem !important;
  min-width: 180px;
  padding-left: 2.25rem !important;
}

/* ── Roles & Permissions modals — light-mode colour swap ──────
   Modal panel = solid white
   Inner sections, accordions, inputs = light grey (#fFFFFF)
   ────────────────────────────────────────────────────────────── */

/* 1. Modal panel: opaque white, no glass blur */
#empPermission .glass-panel,
#empAppPermission .glass-panel {
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.10), 0 4px 16px rgba(0,0,0,0.06) !important;
}

/* 2. Header row (role select + search bar) → light grey */
#empPermission .premium-modal-section,
#empAppPermission .premium-modal-section {
  background: #ffffff !important;
  border: 1px solid #E5E7EB !important;
}

/* 3. Scrollable body canvas → light grey */
#empPermission .premium-modal-body-bg,
#empAppPermission .premium-modal-body-bg {
  background-color: #fFFFFF !important;
}

/* 4. Accordion cards → light grey */
#customModalBody .accordion-item,
#appCustomModalBody .accordion-item {
  background: #fFFFFF !important;
  border-color: #E5E7EB !important;
}

/* 5. Expanded accordion area → white so permission rows pop */
#customModalBody .premium-accordion-content,
#appCustomModalBody .premium-accordion-content {
  background-color: #FFFFFF !important;
  border-top-color: #E5E7EB !important;
}

/* 6. Individual permission rows → white */
#customModalBody .menu-item-row,
#appCustomModalBody .menu-item-row {
  background: #FFFFFF !important;
}

/* 7. Search input → light grey */
#menuSearch {
  background: #fFFFFF !important;
  border-color: #E5E7EB !important;
}

/* 8. Select2 trigger inside these modals → light grey */
#empPermission .select2-container--default .select2-selection--single,
#empPermission .select2-container--default .select2-selection--multiple,
#empAppPermission .select2-container--default .select2-selection--single,
#empAppPermission .select2-container--default .select2-selection--multiple {
  background: #fFFFFF !important;
  border-color: #E5E7EB !important;
}

/* 9. Modal footer → white */
#empPermission .premium-modal-footer,
#empAppPermission .premium-modal-footer {
  background-color: #FFFFFF !important;
  border-top: 1px solid #E5E7EB !important;
}

/* ── Dark mode overrides ────────────────────────────────────── */
.dark #empPermission .glass-panel,
.dark #empAppPermission .glass-panel {
  background: var(--surface) !important;
  backdrop-filter: blur(40px) !important;
  -webkit-backdrop-filter: blur(40px) !important;
  border: 1px solid var(--border-soft) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important;
}
.dark #empPermission .premium-modal-section,
.dark #empAppPermission .premium-modal-section {
  background: color-mix(in srgb, var(--primary) 10%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--primary) 15%, var(--surface)) !important;
}
.dark #empPermission .premium-modal-body-bg,
.dark #empAppPermission .premium-modal-body-bg {
  background-color: var(--background) !important;
}
.dark #customModalBody .accordion-item,
.dark #appCustomModalBody .accordion-item {
  background: var(--surface) !important;
  border-color: var(--border-soft) !important;
}
.dark #customModalBody .premium-accordion-content,
.dark #appCustomModalBody .premium-accordion-content {
  background-color: color-mix(in srgb, var(--primary) 4%, var(--surface)) !important;
}
.dark #customModalBody .menu-item-row,
.dark #appCustomModalBody .menu-item-row {
  background: var(--surface) !important;
}
.dark #menuSearch {
  background: var(--background) !important;
  border-color: var(--border-soft) !important;
}
.dark #empPermission .select2-container--default .select2-selection--single,
.dark #empPermission .select2-container--default .select2-selection--multiple,
.dark #empAppPermission .select2-container--default .select2-selection--single,
.dark #empAppPermission .select2-container--default .select2-selection--multiple {
  background: var(--background) !important;
  border-color: var(--border-soft) !important;
}
.dark #empPermission .premium-modal-footer,
.dark #empAppPermission .premium-modal-footer {
  background-color: color-mix(in srgb, var(--primary) 8%, var(--surface)) !important;
  border-top: 1px solid var(--border-soft) !important;
}

/* ================================================================
   CARD-ROW TABLE STYLE — Global upgrade for all DataTable pages
   Matches the employee page (x-table component) card-row design.
   ================================================================ */

/* ── 1. Card-row layout: separate rows with vertical spacing ── */
table.dataTable {
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
  margin-top: -10px !important;
}

/* ── 2. Header: transparent, small-caps, heavy weight ── */
table.dataTable thead tr {
  background: transparent !important;
  border: none !important;
}

table.dataTable thead th {
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.075em !important;
  color: var(--text-secondary) !important;
  padding: 0 16px 10px !important;
  white-space: nowrap;
}

/* ── 3. Body rows: card background per row, no dividers ── */
table.dataTable tbody tr {
  border: none !important;
}

table.dataTable tbody tr td {
  background-color: var(--surface) !important;
  border: none !important;
  border-top: none !important;
  padding: 13px 16px !important;
  font-size: 12px !important;
  transition: background-color 0.2s ease;
}

/* Rounded left edge on first cell */
table.dataTable tbody tr td:first-child {
  border-radius: 14px 0 0 14px !important;
}

/* Rounded right edge on last cell */
table.dataTable tbody tr td:last-child {
  border-radius: 0 14px 14px 0 !important;
}

/* Hover state */
table.dataTable tbody tr:hover td {
  background-color: color-mix(in srgb, var(--surface) 93%, var(--primary) 7%) !important;
}

/* ── 4. Dark mode overrides ── */
.dark table.dataTable thead th {
  background: transparent !important;
  border: none !important;
  color: var(--text-secondary) !important;
}

.dark table.dataTable tbody tr td {
  background-color: #1c1c22 !important;
  border: none !important;
}

.dark table.dataTable tbody tr:hover td {
  background-color: #242430 !important;
}

/* ── 5. Old table container: strip plain border, use glass look ── */
.overflow-x-auto.rounded-2xl.border.border-border-soft.bg-surface:has(table.dataTable) {
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* ── 6. Old separator lines on tbody rows: hide them ── */
table.dataTable tbody .divide-y > * + * {
  border-top: none !important;
}


/* ================================================================
   EF-* REPORT COMPONENT SYSTEM
   Global styles for all report Livewire views (attendance, payroll,
   employee, loan, gatepass, salary reports).
   Maps onto the project's existing CSS variable tokens.
   ================================================================ */

/* ── Token bridge: map ef-* vars → project design system ── */
:root {
  --ef-bg:        var(--surface);
  --ef-surface:   var(--surface);
  --ef-surface2:  var(--background);
  --ef-border:    var(--border-soft);
  --ef-text:      var(--text-primary);
  --ef-muted:     var(--text-secondary);
  --ef-accent:    var(--primary, #6366f1);
  --ef-accent2:   var(--primary-light, #818cf8);
  --ef-radius:    10px;
  --ef-input-h:   38px;
  --ef-font-sm:   12px;
  --ef-shadow:    0 2px 8px rgba(0,0,0,0.06);
  --ef-shadow-lg: 0 8px 32px rgba(0,0,0,0.10);
  --ef-badge-bg:    rgba(99,102,241,0.10);
  --ef-badge-bdr:   rgba(99,102,241,0.28);
  --ef-badge-text:  var(--primary, #6366f1);
}
.dark {
  --ef-shadow:    0 2px 8px rgba(0,0,0,0.35);
  --ef-shadow-lg: 0 8px 32px rgba(0,0,0,0.50);
}

/* ── Wrapper ── */
.ef-wrapper { min-height: 60vh; }

/* ── Panel card ── */
.ef-panel {
  background: var(--ef-bg);
  border: 1px solid var(--ef-border);
  border-radius: 20px;
  padding: 36px 40px 32px;
  box-shadow: var(--ef-shadow-lg);
}

/* ── Grid shrink when filter panel is open ── */
.ef-fields-grid { transition: padding-right 0.3s ease; padding-right: 0; }
.ef-fields-grid.ef-grid-shrink { padding-right: 252px; }

/* ── Panel header ── */
.ef-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.ef-panel-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ef-muted);
}

/* ── Filter toggle button ── */
.ef-filter-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--ef-surface2);
  border: 1px solid var(--ef-border);
  border-radius: 8px;
  padding: 6px 12px;
  color: var(--ef-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .2s, color .2s;
  white-space: nowrap;
}
.ef-filter-toggle-btn:hover { border-color: var(--ef-accent); color: var(--ef-accent); }
.ef-filter-toggle-btn svg   { width: 13px; height: 13px; flex-shrink: 0; }

/* ── Floating filter dropdown panel ── */
.ef-filter-panel-wrap { position: relative; }
.ef-filter-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 232px;
  z-index: 1055;
  background: var(--ef-bg);
  border: 1px solid var(--ef-border);
  border-radius: var(--ef-radius);
  box-shadow: var(--ef-shadow-lg);
  padding: 14px 16px;
  animation: efFadeDown .18s ease both;
}
@keyframes efFadeDown {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}
.ef-fp-heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ef-muted);
  margin-bottom: 10px;
}
.ef-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid var(--ef-border);
}
.ef-switch-row:last-child { border-bottom: none; }
.ef-switch-row label { font-size: 12px; color: var(--ef-text); margin: 0; cursor: pointer; }

/* ── Inputs & selects ── */
.ef-input-wrap { position: relative; }
.ef-control {
  width: 100%;
  height: var(--ef-input-h);
  background: var(--ef-surface2);
  border: 1px solid var(--ef-border);
  border-radius: var(--ef-radius);
  padding: 0 34px 0 12px;
  color: var(--ef-text);
  font-size: var(--ef-font-sm);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  appearance: none;
  -webkit-appearance: none;
}
.ef-control::placeholder { color: var(--ef-muted); }
.ef-control:focus {
  border-color: var(--ef-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ef-accent) 15%, transparent);
}
.ef-input-wrap .ef-icon {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ef-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
}
.ef-input-wrap .ef-icon svg { width: 13px; height: 13px; }

/* ── Field label ── */
.ef-field-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ef-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

/* ── Autocomplete results dropdown ── */
.ef-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  z-index: 1060;
  background: var(--ef-bg);
  border: 1px solid var(--ef-border);
  border-radius: var(--ef-radius);
  box-shadow: var(--ef-shadow-lg);
  max-height: 200px;
  overflow-y: auto;
  padding: 4px 0;
  list-style: none;
  margin: 0;
}
.ef-results li {
  font-size: var(--ef-font-sm);
  padding: 7px 14px;
  cursor: pointer;
  color: var(--ef-text);
  transition: background .15s;
}
.ef-results li:hover { background: var(--ef-surface2); }
.ef-results li.ef-no-result { color: var(--ef-muted); cursor: default; }

/* ── Badge ── */
.ef-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--ef-badge-bg);
  border: 1px solid var(--ef-badge-bdr);
  color: var(--ef-badge-text);
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 20px;
  margin-top: 5px;
}
.ef-badge-remove {
  background: none; border: none; color: inherit;
  cursor: pointer; display: flex; align-items: center;
  padding: 0; opacity: .7; line-height: 1; transition: opacity .2s;
}
.ef-badge-remove:hover { opacity: 1; }

/* ── Divider ── */
.ef-divider { height: 1px; background: var(--ef-border); margin: 8px 0; }

/* ── Export button ── */
.ef-btn-export {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--ef-accent), var(--ef-accent2));
  border: none;
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  padding: 11px 24px;
  border-radius: var(--ef-radius);
  cursor: pointer;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--ef-accent) 35%, transparent);
  transition: opacity .2s, transform .15s, box-shadow .2s;
}
.ef-btn-export:hover {
  opacity: .92;
  transform: translateY(-1px);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--ef-accent) 45%, transparent);
}
.ef-btn-export:active  { transform: scale(.98); }
.ef-btn-export:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.ef-btn-export svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ── Reset button ── */
.ef-btn-reset {
  background: none; border: none;
  color: var(--ef-muted); font-size: 13px;
  cursor: pointer; padding: 0;
  transition: color .2s;
}
.ef-btn-reset:hover { color: var(--ef-text); }

/* ── Alert & close button ── */
.ef-alert { border-radius: var(--ef-radius); font-size: var(--ef-font-sm); }
.custom-close-button {
  background: transparent; border: none;
  font-size: 1.25rem; font-weight: bold;
  color: inherit; cursor: pointer;
  padding: 0; margin-left: 1rem; transition: opacity .2s;
}
.custom-close-button:hover   { opacity: .6; }
.custom-close-button::before { content: '×'; }

/* ── Additional-details toggle ── */
.ef-additional {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; color: var(--ef-muted);
  font-size: 12.5px; font-weight: 500;
  user-select: none; transition: color .2s; padding: 4px 0;
}
.ef-additional:hover { color: var(--ef-text); }
.ef-additional .ef-chevron {
  width: 16px; height: 16px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: transform .3s;
}
.ef-additional.open .ef-chevron { transform: rotate(180deg); }

/* ── Accordion trigger ── */
.ef-acc-trigger {
  background: var(--ef-surface2) !important;
  border: 1px solid var(--ef-border) !important;
  border-radius: var(--ef-radius) !important;
  color: var(--ef-text) !important;
  font-size: var(--ef-font-sm) !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
}
.ef-acc-trigger:not(.collapsed) { border-radius: var(--ef-radius) var(--ef-radius) 0 0 !important; }

/* ── Accordion body ── */
.ef-acc-body {
  background: var(--ef-surface);
  border: 1px solid var(--ef-border);
  border-top: none;
  border-radius: 0 0 var(--ef-radius) var(--ef-radius);
  padding: 14px 16px;
}
.ef-acc-body .form-check-label { font-size: var(--ef-font-sm); color: var(--ef-text); }

/* ── Sort row ── */
.ef-sort-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ef-sort-label { font-size: var(--ef-font-sm); font-weight: 600; color: var(--ef-muted); }
.ef-sort-row .form-check-label { font-size: var(--ef-font-sm); color: var(--ef-text); }

/* ── Toggle row (round-off switch) ── */
.ef-toggle-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px; padding: 6px 0;
}
.ef-toggle-info {
  font-size: 11px;
  color: var(--ef-muted);
  background: var(--ef-surface2);
  border: 1px solid var(--ef-border);
  border-radius: 6px;
  padding: 5px 10px;
  margin: 0;
}

/* ── Round-off row ── */
.ef-roundoff-row {
  display: flex; flex-direction: column; gap: 6px; padding: 4px 0;
}
.ef-roundoff-note {
  font-size: 11px;
  color: var(--ef-muted);
  margin: 0;
  display: flex; align-items: center; gap: 4px;
}

/* ── Multi-select box ── */
.ef-multi-select-box {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--ef-input-h);
  background: var(--ef-surface2);
  border: 1px solid var(--ef-border);
  border-radius: var(--ef-radius);
  padding: 0 12px;
  cursor: pointer;
  font-size: var(--ef-font-sm);
  color: var(--ef-text);
  transition: border-color .2s;
  user-select: none;
}
.ef-multi-select-box:hover,
.ef-multi-select-box.open { border-color: var(--ef-accent); }
.ef-multi-select-box svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--ef-muted); }

/* ── Multi-select dropdown ── */
.ef-multi-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 1060;
  background: var(--ef-bg);
  border: 1px solid var(--ef-border);
  border-radius: var(--ef-radius);
  box-shadow: var(--ef-shadow-lg);
  max-height: 240px;
  overflow-y: auto;
  padding: 6px 0;
}
.ef-multi-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background .15s;
}
.ef-multi-item:hover { background: var(--ef-surface2); }
.ef-multi-divider  { height: 1px; background: var(--ef-border); margin: 4px 0; }
.ef-multi-count {
  font-size: 11px; color: var(--ef-muted);
  margin-top: 4px; text-align: right;
}

/* ── Progress overlay (full-screen modal) ── */
.ef-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.ef-progress-card {
  position: relative;
  background: var(--ef-bg);
  border: 1px solid var(--ef-border);
  border-radius: 20px;
  box-shadow: var(--ef-shadow-lg);
  width: 100%;
  max-width: 420px;
  overflow: hidden;
}
.ef-card-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none;
  font-size: 1.4rem; line-height: 1;
  color: var(--ef-muted); cursor: pointer;
  transition: color .2s; padding: 0;
}
.ef-card-close:hover { color: var(--ef-text); }

/* ── Progress bar ── */
.ef-progress-bar-track {
  height: 6px;
  background: var(--ef-surface2);
  border-radius: 99px;
  overflow: hidden;
}
.ef-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ef-accent), var(--ef-accent2));
  border-radius: 99px;
  transition: width .5s ease;
}

/* ── Spinner ── */
.ef-spinner {
  width: 22px; height: 22px;
  border: 3px solid var(--ef-border);
  border-top-color: var(--ef-accent);
  border-radius: 50%;
  animation: efSpin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes efSpin { to { transform: rotate(360deg); } }

/* ── Progress steps ── */
.ef-step {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ef-border);
}
.ef-step:last-of-type { border-bottom: none; }
.ef-step-icon {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
  background: var(--ef-surface2);
  color: var(--ef-muted);
  border: 1.5px solid var(--ef-border);
  transition: all .3s;
}
.ef-step-icon.active {
  background: color-mix(in srgb, var(--ef-accent) 12%, transparent);
  border-color: var(--ef-accent);
  color: var(--ef-accent);
}
.ef-step-icon.completed {
  background: var(--ef-accent);
  border-color: var(--ef-accent);
  color: #fff;
}
.ef-step-title {
  font-size: 13px; font-weight: 600;
  color: var(--ef-text); line-height: 1.3;
}
.ef-step-desc {
  font-size: 11.5px; color: var(--ef-muted); margin-top: 2px;
}

/* ── Cancel button (inside overlay) ── */
.ef-cancel-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 16px;
  background: none;
  border: 1px solid var(--ef-border);
  border-radius: var(--ef-radius);
  padding: 9px 16px;
  color: var(--ef-muted);
  font-size: 13px; font-weight: 500;
  cursor: pointer; transition: border-color .2s, color .2s;
}
.ef-cancel-btn:hover { border-color: #ef4444; color: #ef4444; }
.ef-cancel-btn svg   { width: 14px; height: 14px; flex-shrink: 0; }
.ef-cancel-note {
  text-align: center; font-size: 11px;
  color: var(--ef-muted); margin-top: 6px;
}

/* ── Resume banner (floating bottom strip) ── */
.ef-resume-banner {
  display: none;
  position: fixed;
  bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 1999;
  background: var(--ef-accent);
  color: #fff;
  border-radius: 14px;
  padding: 12px 20px;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--ef-accent) 45%, transparent);
  cursor: pointer;
  min-width: 280px; max-width: 380px;
  animation: efSlideUp .3s ease both;
}
.ef-resume-banner.visible { display: block; }
@keyframes efSlideUp {
  from { opacity:0; transform: translateX(-50%) translateY(12px); }
  to   { opacity:1; transform: translateX(-50%) translateY(0); }
}
.ef-resume-banner-close {
  background: none; border: none;
  color: rgba(255,255,255,.75);
  font-size: 1.3rem; line-height: 1;
  cursor: pointer; padding: 0;
  transition: color .2s; flex-shrink: 0;
}
.ef-resume-banner-close:hover { color: #fff; }