/* Ticket Flow Management: Header Gradient Fix for Dark Mode */
.dark .bg-gradient-to-r.from-indigo-50.to-purple-50,
body.dark .bg-gradient-to-r.from-indigo-50.to-purple-50 {
    background-image: linear-gradient(to right, #232b36 0%, #312e81 100%) !important;
}
/* Ticket System: Assigned/Unassigned Badges for Dark Mode */
.dark .bg-gray-200, body.dark .bg-gray-200 { background-color: #4b5563 !important; }
.dark .text-gray-800, body.dark .text-gray-800 { color: #e5e7eb !important; }
.dark .bg-indigo-100, body.dark .bg-indigo-100 { background-color: #312e81 !important; }
.dark .text-indigo-800, body.dark .text-indigo-800 { color: #a5b4fc !important; }
.dark .bg-gray-300, body.dark .bg-gray-300 { background-color: #374151 !important; }
.dark .text-gray-700, body.dark .text-gray-700 { color: #d1d5db !important; }
/* Ticket System: Status, Type, Priority Badges for Dark Mode */
.dark .bg-blue-100, body.dark .bg-blue-100 { background-color: #1e40af !important; }
.dark .text-blue-800, body.dark .text-blue-800 { color: #93c5fd !important; }
.dark .bg-pink-100, body.dark .bg-pink-100 { background-color: #831843 !important; }
.dark .text-pink-800, body.dark .text-pink-800 { color: #f9a8d4 !important; }
.dark .bg-green-100, body.dark .bg-green-100 { background-color: #065f46 !important; }
.dark .text-green-800, body.dark .text-green-800 { color: #6ee7b7 !important; }
.dark .bg-yellow-100, body.dark .bg-yellow-100 { background-color: #78350f !important; }
.dark .text-yellow-800, body.dark .text-yellow-800 { color: #fde68a !important; }
.dark .bg-orange-100, body.dark .bg-orange-100 { background-color: #7c2d12 !important; }
.dark .text-orange-800, body.dark .text-orange-800 { color: #fdba74 !important; }
.dark .bg-red-100, body.dark .bg-red-100 { background-color: #7f1d1d !important; }
.dark .text-red-800, body.dark .text-red-800 { color: #fca5a5 !important; }
.dark .bg-gray-100, body.dark .bg-gray-100 { background-color: #374151 !important; }
.dark .text-gray-900, body.dark .text-gray-900 { color: #f3f4f6 !important; }
.dark .bg-purple-100, body.dark .bg-purple-100 { background-color: #581c87 !important; }
.dark .text-purple-800, body.dark .text-purple-800 { color: #c4b5fd !important; }
/* Dark Mode CSS Overrides */

/* Global Body and HTML */
.dark, 
body.dark {
    background-color: #111827 !important; /* gray-900 */
    color: #f9fafb !important; /* gray-50 */
}

.dark .user-item label,
body.dark .user-item label {
    color: #f9fafb !important; 
} 

/* Header and Navigation Enhanced Styling */
.dark nav,
body.dark nav {
    border-bottom: 1px solid #4b5563 !important; /* gray-600 */
}

/* Dropdown menus - Fix white text on white background */
.dark .dropdown-menu,
body.dark .dropdown-menu,
.dark .category-dropdown-menu,
body.dark .category-dropdown-menu {
    background-color: #1f2937 !important; /* gray-800 */
    border: 1px solid #374151 !important; /* gray-700 */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.15) !important;
}

.dark .dropdown-menu a,
body.dark .dropdown-menu a,
.dark .category-dropdown-menu a,
body.dark .category-dropdown-menu a {
    color: #e5e7eb !important; /* gray-200 */
    background-color: transparent !important;
}

.dark .dropdown-menu a:hover,
body.dark .dropdown-menu a:hover,
.dark .category-dropdown-menu a:hover,
body.dark .category-dropdown-menu a:hover {
    background-color: #374151 !important; /* gray-700 */
    color: #ffffff !important; /* white */
}

/* Navigation buttons */
.dark .mobile-menu-button button,
body.dark .mobile-menu-button button {
    background-color: #374151 !important; /* gray-700 */
    color: #d1d5db !important; /* gray-300 */
}

.dark .mobile-menu-button button:hover,
body.dark .mobile-menu-button button:hover {
    background-color: #4b5563 !important; /* gray-600 */
    color: #ffffff !important;
}

/* Form Elements */
.dark input,
body.dark input,
.dark textarea,
body.dark textarea,
.dark select,
body.dark select {
    background-color: #1f2937 !important; /* gray-800 */
    border: 1px solid #374151 !important; /* gray-700 */
    color: #f9fafb !important; /* gray-50 */
}

.dark input:focus,
body.dark input:focus,
.dark textarea:focus,
body.dark textarea:focus,
.dark select:focus,
body.dark select:focus {
    border-color: #6366f1 !important; /* indigo-500 */
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}

.dark input::placeholder,
body.dark input::placeholder,
.dark textarea::placeholder,
body.dark textarea::placeholder {
    color: #9ca3af !important; /* gray-400 */
}

/* Buttons */


.dark .btn-primary,
body.dark .btn-primary {
    background-color: #4f46e5 !important; /* indigo-600 */
    border-color: #4f46e5 !important;
}

.dark .btn-primary:hover,
body.dark .btn-primary:hover {
    background-color: #4338ca !important; /* indigo-700 */
    border-color: #4338ca !important;
}


.dark .btn-danger,
body.dark .btn-danger {
    background-color: #dc2626 !important; /* red-600 */
    border-color: #dc2626 !important;
}

.dark .btn-danger:hover,
body.dark .btn-danger:hover {
    background-color: #b91c1c !important; /* red-700 */
    border-color: #b91c1c !important;
}

.dark .btn-success,
body.dark .btn-success {
    background-color: #059669 !important; /* emerald-600 */
    border-color: #059669 !important;
}

.dark .btn-success:hover,
body.dark .btn-success:hover {
    background-color: #047857 !important; /* emerald-700 */
    border-color: #047857 !important;
}

/* Cards and Containers */
.dark .card,
body.dark .card,
.dark .content-wrapper,
body.dark .content-wrapper,
.dark .main-content,
body.dark .main-content {
    background-color: #1f2937 !important; /* gray-800 */
    border: 1px solid #374151 !important; /* gray-700 */
    color: #f9fafb !important; /* gray-50 */
}

.dark .card-header,
body.dark .card-header {
    background-color: #374151 !important; /* gray-700 */
    border-bottom: 1px solid #4b5563 !important; /* gray-600 */
    color: #f9fafb !important;
}

.dark .card-body,
body.dark .card-body {
    background-color: #1f2937 !important; /* gray-800 */
    color: #f9fafb !important;
}

.dark .card-footer,
body.dark .card-footer {
    background-color: #374151 !important; /* gray-700 */
    border-top: 1px solid #4b5563 !important; /* gray-600 */
    color: #f9fafb !important;
}

/* Tables */
.dark table,
body.dark table {
    background-color: #1f2937 !important; /* gray-800 */
    color: #f9fafb !important;
}

.dark table thead,
body.dark table thead {
    background-color: #374151 !important; /* gray-700 */

}

.dark table thead th,
body.dark table thead th {
    background-color: #374151 !important; /* gray-700 */
    color: #f9fafb !important;
    border-bottom: 1px solid #4b5563 !important; /* gray-600 */
}

.dark table tbody tr,
body.dark table tbody tr {
    background-color: #1f2937 !important; /* gray-800 */
    border-bottom: 1px solid #374151 !important; /* gray-700 */
}

.dark table tbody tr:nth-child(even),
body.dark table tbody tr:nth-child(even) {
    background-color: #111827 !important; /* gray-900 */
}

.dark table tbody tr:hover,
body.dark table tbody tr:hover {
    background-color: #374151 !important; /* gray-700 */
}

.dark table td,
body.dark table td,
.dark table th,
body.dark table th {
    color: #f9fafb !important;
    border-color: #374151 !important; /* gray-700 */
}

/* DataTables specific */
.dark .dataTables_wrapper,
body.dark .dataTables_wrapper {
    color: #f9fafb !important;
}

.dark .dataTables_wrapper .dataTables_length,
body.dark .dataTables_wrapper .dataTables_length,
.dark .dataTables_wrapper .dataTables_filter,
body.dark .dataTables_wrapper .dataTables_filter,
.dark .dataTables_wrapper .dataTables_info,
body.dark .dataTables_wrapper .dataTables_info,
.dark .dataTables_wrapper .dataTables_paginate,
body.dark .dataTables_wrapper .dataTables_paginate {
    color: #f9fafb !important;
}

/* Catch-all: convert .bg-white to dark background in dark mode */
.dark .bg-white,
body.dark .bg-white {
    background-color: #1f2937 !important; /* gray-800 */
}

/* Also convert bg-gray-50 sidebar/section backgrounds */
.dark .bg-gray-50,
body.dark .bg-gray-50 {
    background-color: #111827 !important; /* gray-900 */
}

/* Dark mode text fixes for elements inside bg-white containers */
.dark .text-gray-700,
body.dark .text-gray-700 {
    color: #d1d5db !important; /* gray-300 */
}

.dark .text-gray-600,
body.dark .text-gray-600 {
    color: #9ca3af !important; /* gray-400 */
}

.dark .text-gray-800,
body.dark .text-gray-800 {
    color: #e5e7eb !important; /* gray-200 */
}

.dark .text-gray-900,
body.dark .text-gray-900 {
    color: #f3f4f6 !important; /* gray-100 */
}

/* Dark mode borders */
.dark .border-gray-200,
body.dark .border-gray-200 {
    border-color: #374151 !important; /* gray-700 */
}

.dark .border-gray-300,
body.dark .border-gray-300 {
    border-color: #4b5563 !important; /* gray-600 */
}

.dark .divide-gray-200 > * + *,
body.dark .divide-gray-200 > * + * {
    border-color: #374151 !important; /* gray-700 */
}

.flex.bg-purple-100.dark\:bg-gray-800,
.flex.bg-white.mytickets,
.flex.pendingApprovals {
    max-height: calc(100vh - 4.1rem) !important;
    min-height: calc(100vh - 3.7rem) !important;
}

.dark #recordingsCount {
    color: #f9fafb !important; 
}

.dark .file-upload,
body.dark .file-upload {
    border: 2px dashed #4b5563 !important; 
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%) !important;
} 
#payroll .space-y-2 {
    background-color: unset !important;
}

#payroll .space-y-2 div {
    background-color: unset !important;
}
.dark .detail-section div,
body.dark .detail-section div {
    background-color: unset !important;
}

.dark ::-webkit-scrollbar,
body.dark ::-webkit-scrollbar {
    width: 12px;
}

.dark ::-webkit-scrollbar-track,
body.dark ::-webkit-scrollbar-track {
    background: #1f2937; /* gray-800 */
}

.dark ::-webkit-scrollbar-thumb,
body.dark ::-webkit-scrollbar-thumb {
    background-color: #4b5563; /* gray-600 */
    border-radius: 6px;
    border: 3px solid #1f2937; /* gray-800 */
}

.dark .table-scroll,
body.dark .table-scroll {
    background-color: #1f2937 !important; /* gray-800 */
    overflow-x: auto !important; /* Changed from hidden to auto for mobile table scrolling */
    scrollbar-width: thin;
    scrollbar-color: #4b5563 #1f2937; /* gray-600 thumb, gray-800 track */
}


.dark td div,
body.dark td div {
    background-color: transparent !important;
}

.dark .bg-gray-50,
body.dark .bg-gray-50 {
    background-color: #111827 !important; /* gray-900 */
}



/* Links */
.dark a,
body.dark a {
    color: #818cf8 !important; /* indigo-400 */
}

.dark a:hover,
body.dark a:hover {
    color: #a5b4fc !important; /* indigo-300 */
}

/* Status Badges - Fix for Employee Page and All Pages */
.dark .bg-green-50,
body.dark .bg-green-50 {
    background-color: #065f46 !important; /* emerald-800 */
}

.dark .text-green-700,
body.dark .text-green-700 {
    color: #34d399 !important; /* emerald-400 */
}

.dark .ring-green-600\/20,
body.dark .ring-green-600\/20,
.dark .ring-green-600,
body.dark .ring-green-600 {
    border-color: #047857 !important; /* emerald-700 */
}

.dark .bg-red-50,
body.dark .bg-red-50 {
    background-color: #7f1d1d !important; /* red-800 */
}

.dark .text-red-700,
body.dark .text-red-700 {
    color: #f87171 !important; /* red-400 */
}

.dark .ring-red-600\/20,
body.dark .ring-red-600\/20,
.dark .ring-red-600,
body.dark .ring-red-600 {
    border-color: #b91c1c !important; /* red-700 */
}

/* Additional Status Badge Colors */
.dark .bg-blue-50,
body.dark .bg-blue-50 {
    background-color: #1e3a8a !important; /* blue-800 */
}

.dark .text-blue-700,
body.dark .text-blue-700 {
    color: #60a5fa !important; /* blue-400 */
}

/* Punch Page - Fingerprint Status Badge */
.dark .bg-cyan-100,
body.dark .bg-cyan-100 {
    background-color: #155e75 !important; /* cyan-800 */
}

.dark .text-cyan-800,
body.dark .text-cyan-800 {
    color: #67e8f9 !important; /* cyan-300 */
}

/* GLPI Assets - Tab buttons and badges */
.dark .tab-button,
body.dark .tab-button {
    color: #d1d5db !important; /* gray-300 */
    background-color: transparent !important;
    border: 1px solid #374151 !important; /* gray-700 */
}

.dark .tab-button.active,
body.dark .tab-button.active {
    background-color: #4f46e5 !important; /* indigo-600 for better visibility */
    color: #ffffff !important; /* white text */
    border: 1px solid #4f46e5 !important; /* indigo-600 border */
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important; /* subtle glow */
}

.dark .tab-button:hover,
body.dark .tab-button:hover {
    background-color: #374151 !important; /* gray-700 */
    color: #f9fafb !important; /* gray-50 */
    border: 1px solid #4b5563 !important; /* gray-600 */
}

.dark .tab-button .w-8.h-8,
body.dark .tab-button .w-8.h-8 {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.dark .tab-button.active .w-8.h-8,
body.dark .tab-button.active .w-8.h-8 {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.dark .text-cyan-600,
body.dark .text-cyan-600 {
    color: #22d3ee !important; /* cyan-400 */
}

/* GLPI Assets - Badge styles for software types */
.dark .badge-blue,
body.dark .badge-blue {
    background-color: #1e40af !important; /* blue-800 */
    color: #93c5fd !important; /* blue-300 */
}

.dark .badge-green,
body.dark .badge-green {
    background-color: #065f46 !important; /* emerald-800 */
    color: #6ee7b7 !important; /* emerald-300 */
}

.dark .badge-red,
body.dark .badge-red {
    background-color: #7f1d1d !important; /* red-800 */
    color: #fca5a5 !important; /* red-300 */
}

.dark .badge-yellow,
body.dark .badge-yellow {
    background-color: #78350f !important; /* amber-800 */
    color: #fcd34d !important; /* amber-300 */
}

/* GLPI Assets - Stat card background colors */
.dark .bg-emerald-100,
body.dark .bg-emerald-100 {
    background-color: #065f46 !important; /* emerald-800 */
}

.dark .text-emerald-600,
body.dark .text-emerald-600 {
    color: #34d399 !important; /* emerald-400 */
}

.dark .bg-orange-100,
body.dark .bg-orange-100 {
    background-color: #9a3412 !important; /* orange-800 */
}

.dark .text-orange-600,
body.dark .text-orange-600 {
    color: #fb923c !important; /* orange-400 */
}

.dark .text-red-600,
body.dark .text-red-600 {
    color: #f87171 !important; /* red-400 */
}

.dark .text-purple-600,
body.dark .text-purple-600 {
    color: #c084fc !important; /* purple-400 */
}

.dark .text-blue-600,
body.dark .text-blue-600 {
    color: #60a5fa !important; /* blue-400 */
}

.dark .bg-yellow-50,
body.dark .bg-yellow-50 {
    background-color: #78350f !important; /* amber-800 */
}

.dark .text-yellow-700,
body.dark .text-yellow-700 {
    color: #fbbf24 !important; /* amber-400 */
}

/* Admin dashboard - Unassigned badge in recent activity */
.dark .bg-amber-100,
body.dark .bg-amber-100 {
    background-color: #92400e !important; /* amber-800 */
}

.dark .text-amber-800,
body.dark .text-amber-800 {
    color: #fbbf24 !important; /* amber-400 */
}

/* ELY page - AccountingPlus group badge */
.dark .bg-orange-50,
body.dark .bg-orange-50 {
    background-color: #9a3412 !important; /* orange-800 */
}

.dark .text-orange-700,
body.dark .text-orange-700 {
    color: #fb923c !important; /* orange-400 */
}

/* ELY page - SuperAdmin group badge */
.dark .bg-rose-50,
body.dark .bg-rose-50 {
    background-color: #881337 !important; /* rose-800 */
}

.dark .text-rose-700,
body.dark .text-rose-700 {
    color: #fda4af !important; /* rose-300 */
}

/* ELY page - Admin Coordinator group badge */
.dark .bg-teal-50,
body.dark .bg-teal-50 {
    background-color: #115e59 !important; /* teal-800 */
}

.dark .text-teal-700,
body.dark .text-teal-700 {
    color: #5eead4 !important; /* teal-300 */
}

/* Entity Management - Status badge overrides */
.dark .badge-success,
body.dark .badge-success {
    background-color: #065f46 !important; /* emerald-800 */
    color: #6ee7b7 !important; /* emerald-300 */
}

.dark .badge-danger,
body.dark .badge-danger {
    background-color: #7f1d1d !important; /* red-800 */
    color: #fca5a5 !important; /* red-300 */
}

/* Additional background colors that need dark mode support */
.dark .bg-amber-50,
body.dark .bg-amber-50 {
    background-color: #78350f !important; /* amber-800 */
}

.dark .text-amber-700,
body.dark .text-amber-700 {
    color: #fbbf24 !important; /* amber-400 */
}

.dark .bg-yellow-200,
body.dark .bg-yellow-200 {
    background-color: #a16207 !important; /* amber-700 */
}

.dark .bg-orange-200,
body.dark .bg-orange-200 {
    background-color: #ea580c !important; /* orange-600 */
}

.dark .bg-gray-50,
body.dark .bg-gray-50 {
    background-color: #111827 !important; /* gray-900 */
}

/* Toast notifications - AD computers */
.dark .bg-blue-200,
body.dark .bg-blue-200 {
    background-color: #1e40af !important; /* blue-800 */
}

.dark .border-green-200,
body.dark .border-green-200 {
    border-color: #047857 !important; /* emerald-700 */
}

.dark .border-red-200,
body.dark .border-red-200 {
    border-color: #b91c1c !important; /* red-700 */
}

.dark .border-blue-200,
body.dark .border-blue-200 {
    border-color: #1d4ed8 !important; /* blue-700 */
}

.dark .border-blue-100,
body.dark .border-blue-100 {
    border-color: #1e40af !important; /* blue-800 */
}

/* Hover colors */
.dark .hover\:bg-gray-50:hover,
body.dark .hover\:bg-gray-50:hover {
    background-color: #374151 !important; /* gray-700 */
}

.dark .hover\:bg-gray-100:hover,
body.dark .hover\:bg-gray-100:hover {
    background-color: #374151 !important; /* gray-700 */
}

.dark .hover\:text-gray-900:hover,
body.dark .hover\:text-gray-900:hover {
    color: #f9fafb !important; /* gray-50 */
}

/* Gradients for ticket flow management */
.dark .from-orange-50,
body.dark .from-orange-50 {
    --tw-gradient-from: #78350f !important; /* amber-800 */
}

.dark .to-red-50,
body.dark .to-red-50 {
    --tw-gradient-to: #7f1d1d !important; /* red-800 */
}

.dark .from-blue-50,
body.dark .from-blue-50 {
    --tw-gradient-from: #1e3a8a !important; /* blue-800 */
}

.dark .to-indigo-50,
body.dark .to-indigo-50 {
    --tw-gradient-to: #312e81 !important; /* indigo-800 */
}

/* Active DR page - Position/Account Manager text visibility */
.dark .member-position,
body.dark .member-position {
    color: #d1d5db !important; /* gray-300 for better visibility */
}

/* Notifications page - Filter & Search header */
.dark .from-gray-50,
body.dark .from-gray-50 {
    --tw-gradient-from: #374151 !important; /* gray-700 */
}

.dark .to-slate-50,
body.dark .to-slate-50 {
    --tw-gradient-to: #475569 !important; /* slate-600 */
}

/* .dark .bg-gray-50,
body.dark .bg-gray-50 {
    background-color: #374151 !important; 
} */

.dark .hover\:bg-gray-100:hover,
body.dark .hover\:bg-gray-100:hover {
    background-color: #374151 !important; /* gray-700 */
}

.dark .bg-purple-50,
body.dark .bg-purple-50 {
    background-color: #581c87 !important; /* purple-800 */
}

.dark .text-purple-700,
body.dark .text-purple-700 {
    color: #c084fc !important; /* purple-400 */
}

.dark .bg-pink-50,
body.dark .bg-pink-50 {
    background-color: #831843 !important; /* pink-800 */
}

.dark .text-pink-700,
body.dark .text-pink-700 {
    color: #f472b6 !important; /* pink-400 */
}

.dark .bg-indigo-50,
body.dark .bg-indigo-50 {
    background-color: #312e81 !important; /* indigo-800 */
}

.dark .text-indigo-700,
body.dark .text-indigo-700 {
    color: #818cf8 !important; /* indigo-400 */
}

.dark .text-gray-400,
body.dark .text-gray-400 {
    color: #9ca3af !important; /* gray-400 */
}

/* Active Directory page - text color fixes */
.dark .text-gray-600,
body.dark .text-gray-600 {
    color: #d1d5db !important; /* gray-300 */
}

.dark .text-gray-500,
body.dark .text-gray-500 {
    color: #9ca3af !important; /* gray-400 */
}

/* Borders */
.dark .border-gray-200,
.dark .border-gray-300,
body.dark .border-gray-200,
body.dark .border-gray-300 {
    border-color: #4b5563 !important; /* gray-600 */
}

.dark .border-gray-100,
body.dark .border-gray-100 {
    border-color: #374151 !important; /* gray-700 */
}

/* Cards and panels */
.dark .shadow,
.dark .shadow-sm,
.dark .shadow-md,
.dark .shadow-lg,
body.dark .shadow,
body.dark .shadow-sm,
body.dark .shadow-md,
body.dark .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2) !important;
}

/* DataTables dark mode support */
body.dark table.dataTable,
.dark table.dataTable {
  background-color: #1f2937 !important;
  color: #f3f4f6 !important;
}

body.dark table.dataTable thead th,
.dark table.dataTable thead th {
  background-color: #374151 !important;
  color: #f3f4f6 !important;
  border-bottom-color: #4b5563 !important;
}

body.dark table.dataTable tbody tr,
.dark table.dataTable tbody tr {
  background-color: #1f2937 !important;
}

body.dark table.dataTable tbody tr:hover,
.dark table.dataTable tbody tr:hover {
  background-color: #374151 !important;
}

body.dark table.dataTable tbody tr.odd,
.dark table.dataTable tbody tr.odd {
  background-color: #1f2937 !important;
}

body.dark table.dataTable tbody tr.even,
.dark table.dataTable tbody tr.even {
  background-color: #111827 !important;
}

body.dark table.dataTable tbody td,
.dark table.dataTable tbody td {
  border-top-color: #4b5563 !important;
  color: #f3f4f6 !important;
}

/* Forms */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="number"],
.dark input[type="date"],
.dark input[type="datetime-local"],
.dark input[type="search"],
.dark textarea,
.dark select,
body.dark input[type="text"],
body.dark input[type="email"],
body.dark input[type="password"],
body.dark input[type="number"],
body.dark input[type="date"],
body.dark input[type="datetime-local"],
body.dark input[type="search"],
body.dark textarea,
body.dark select {
    background-color: #374151 !important; /* gray-700 */
    border-color: #4b5563 !important; /* gray-600 */
    color: #f9fafb !important; /* gray-50 */
}

.dark input[type="text"]:focus,
.dark input[type="email"]:focus,
.dark input[type="password"]:focus,
.dark input[type="number"]:focus,
.dark input[type="date"]:focus,
.dark input[type="datetime-local"]:focus,
.dark input[type="search"]:focus,
.dark textarea:focus,
.dark select:focus,
body.dark input[type="text"]:focus,
body.dark input[type="email"]:focus,
body.dark input[type="password"]:focus,
body.dark input[type="number"]:focus,
body.dark input[type="date"]:focus,
body.dark input[type="datetime-local"]:focus,
body.dark input[type="search"]:focus,
body.dark textarea:focus,
body.dark select:focus {
    background-color: #374151 !important; /* gray-700 */
    border-color: #6366f1 !important; /* indigo-500 */
    color: #f9fafb !important; /* gray-50 */
}

/* Tables */
.dark table,
.dark .table,
body.dark table,
body.dark .table {
    background-color: #1f2937 !important; /* gray-800 */
    color: #f9fafb !important; /* gray-50 */
}

.dark th,
.dark .table th,
body.dark th,
body.dark .table th {
    background-color: #374151 !important; /* gray-700 */
    border-color: #4b5563 !important; /* gray-600 */
    color: #f9fafb !important; /* gray-50 */
    
}

.dark td,
.dark .table td,
body.dark td,
body.dark .table td {
    border-color: #4b5563 !important; /* gray-600 */
    color: #f9fafb !important; /* gray-50 */
}

.dark tr:nth-child(even),
.dark .table tr:nth-child(even),
body.dark tr:nth-child(even),
body.dark .table tr:nth-child(even) {
    background-color: #374151 !important; /* gray-700 */
}

.dark tr:hover,
.dark .table tr:hover,
body.dark tr:hover,
body.dark .table tr:hover {
    background-color: #4b5563 !important; /* gray-600 */
}

/* DataTables specific */
.dark .dataTables_wrapper,
body.dark .dataTables_wrapper {
    color: #f9fafb !important; /* gray-50 */
}

.dark .dataTables_filter input,
.dark .dataTables_length select,
body.dark .dataTables_filter input,
body.dark .dataTables_length select {
    background-color: #374151 !important; /* gray-700 */
    border-color: #4b5563 !important; /* gray-600 */
    color: #f9fafb !important; /* gray-50 */
}

.dark .dataTables_info,
.dark .dataTables_paginate,
body.dark .dataTables_info,
body.dark .dataTables_paginate {
    color: #d1d5db !important; /* gray-300 */
}

.dark .paginate_button,
body.dark .paginate_button {
    background-color: #374151 !important; /* gray-700 */
    border-color: #4b5563 !important; /* gray-600 */
    color: #f9fafb !important; /* gray-50 */
}

.dark .paginate_button:hover,
body.dark .paginate_button:hover {
    background-color: #4b5563 !important; /* gray-600 */
}

.dark .paginate_button.current,
body.dark .paginate_button.current {
    background-color: #6366f1 !important; /* indigo-500 */
    border-color: #6366f1 !important; /* indigo-500 */
}

/* Modals */
.dark .modal,
.dark .modal-content,
body.dark .modal,
body.dark .modal-content {
    background-color: #1f2937 !important; /* gray-800 */
    color: #f9fafb !important; /* gray-50 */
}

.dark .modal-header,
.dark .modal-footer,
body.dark .modal-header,
body.dark .modal-footer {
    border-color: #4b5563 !important; /* gray-600 */
}

/* Exchange page - Modal overlay transparency fix */
.dark .bg-gray-500\/75,
body.dark .bg-gray-500\/75 {
    background-color: rgba(107, 114, 128, 0.75) !important; /* gray-500 with 75% opacity */
}

/* Dropdowns */
.dark .dropdown-menu,
body.dark .dropdown-menu {
    background-color: #1f2937 !important; /* gray-800 */
    border-color: #4b5563 !important; /* gray-600 */
}

.dark .dropdown-item,
body.dark .dropdown-item {
    color: #f9fafb !important; /* gray-50 */
}

.dark .dropdown-item:hover,
body.dark .dropdown-item:hover {
    background-color: #374151 !important; /* gray-700 */
    color: #f9fafb !important; /* gray-50 */
}

/* Cards and panels */
.dark .card,
.dark .panel,
body.dark .card,
body.dark .panel {
    background-color: #1f2937 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

/* Override any remaining white backgrounds */
.dark [style*="background-color: white"],
.dark [style*="background-color: #fff"],
.dark [style*="background-color: #ffffff"],
body.dark [style*="background-color: white"],
body.dark [style*="background-color: #fff"],
body.dark [style*="background-color: #ffffff"] {
    background-color: #1f2937 !important; /* gray-800 */
    color: #f9fafb !important; /* gray-50 */
}

.dark [style*="background-color: #f9fafb"],
.dark [style*="background-color: #f3f4f6"],
body.dark [style*="background-color: #f9fafb"],
body.dark [style*="background-color: #f3f4f6"] {
    background-color: #374151 !important; /* gray-700 */
}
 
/* Ticket Flow Management: Card and Header Fixes for Dark Mode */
.dark .bg-white, body.dark .bg-white,
.dark .card-enhanced, body.dark .card-enhanced {
    color: #f9fafb !important; /* gray-50 */
}

/* Form groups and labels */
.dark .form-group label,
.dark .form-label,
body.dark .form-group label,
body.dark .form-label {
    color: #f9fafb !important; /* gray-50 */
}

.dark .form-text,
body.dark .form-text {
    color: #d1d5db !important; /* gray-300 */
}

/* Scrollbar dark mode */
.dark::-webkit-scrollbar-track,
body.dark::-webkit-scrollbar-track {
  background: #1f2937 !important;
}

.dark::-webkit-scrollbar-thumb,
body.dark::-webkit-scrollbar-thumb {
  background: #4b5563 !important;
}

.dark::-webkit-scrollbar-thumb:hover,
body.dark::-webkit-scrollbar-thumb:hover {
  background: #6b7280 !important;
}

/* Custom toggle switch dark mode */
.dark .slider,
body.dark .slider {
  background-color: #4b5563 !important;
}

.dark input:checked + .slider,
body.dark input:checked + .slider {
  background-color: #4f46e5 !important;
}

/* Entity management specific */
.dark .entity-card,
body.dark .entity-card {
  background-color: #1f2937 !important;
  border-color: #4b5563 !important;
}

.dark .entity-card:hover,
body.dark .entity-card:hover {
  background-color: #374151 !important;
}

.dark .team-item:hover,
body.dark .team-item:hover {
  background-color: #374151 !important;
  border-left-color: #3b82f6 !important;
}

/* Additional overrides for common elements */
.dark .flex,
.dark .container,
.dark .max-w-4xl,
.dark .py-8,
body.dark .flex,
body.dark .container,
body.dark .max-w-4xl,
body.dark .py-8 {
    color: #f9fafb;
}

/* Statistics and dashboard cards */
.dark .stat-card,
.dark .dashboard-card,
body.dark .stat-card,
body.dark .dashboard-card {
    background: #1f2937 !important;
    border-color: #4b5563 !important;
    color: #f9fafb !important;
}

/* Search bars and filters */
.dark .search-container,
.dark .filter-container,
body.dark .search-container, 
body.dark .filter-container {
    background-color: #1f2937 !important;
    border-color: #4b5563 !important;
}

/* Ensure any divs with inline styles get overridden */
.dark div[style*="background"],
body.dark div[style*="background"] {
    background-color: #1f2937 !important;
    color: #f9fafb !important;
}

/* Fix for pending-offboard page specific CSS rules */
.dark .table-modern,
body.dark .table-modern {
    background: #374151 !important;
}

.dark .filter-modern,
body.dark .filter-modern {
    background: #374151 !important;
    border: 2px solid #4b5563 !important;
    color: #e5e7eb !important;
}

.dark .search-modern input,
body.dark .search-modern input {
    background: #374151 !important;
    border: 2px solid #4b5563 !important;
    color: #e5e7eb !important;
}

.dark .card-modern,
body.dark .card-modern {
    background: #374151 !important;
    border: 1px solid #4b5563 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2) !important;
}

.dark .modal-content,
body.dark .modal-content {
    background: #374151 !important;
    border: 1px solid #4b5563 !important;
}

/* Recent onboard page - Process type labels enhancement */
.dark .process-type-label.it,
body.dark .process-type-label.it {
    background: linear-gradient(135deg, #1e3a8a, #1d4ed8) !important; /* blue-800 to blue-700 */
    color: #bfdbfe !important; /* blue-200 */
    border: 1px solid #3b82f6 !important; /* blue-500 */
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3) !important;
}

.dark .process-type-label.hr,
body.dark .process-type-label.hr {
    background: linear-gradient(135deg, #92400e, #d97706) !important; /* amber-800 to amber-600 */
    color: #fde68a !important; /* amber-200 */
    border: 1px solid #f59e0b !important; /* amber-500 */
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3) !important;
}

/* Dashboard: Assigned To Badges and View Buttons for Dark Mode */
.dark .bg-blue-200, body.dark .bg-blue-200 { background-color: #1e40af !important; }
.dark .text-blue-900, body.dark .text-blue-900 { color: #dbeafe !important; }
.dark .bg-indigo-200, body.dark .bg-indigo-200 { background-color: #3730a3 !important; }
.dark .text-indigo-900, body.dark .text-indigo-900 { color: #c7d2fe !important; }
.dark .bg-gray-200, body.dark .bg-gray-200 { background-color: #4b5563 !important; }
.dark .text-gray-900, body.dark .text-gray-900 { color: #f3f4f6 !important; }
.dark .assigned-badge, body.dark .assigned-badge { background-color: #2563eb !important; color: #dbeafe !important; }

/* View/View All Buttons */
.dark .btn-view, body.dark .btn-view,
.dark .btn-view-all, body.dark .btn-view-all {
    color: #f9fafb !important;
    background: linear-gradient(135deg, #2563eb, #1e40af) !important;
    border: 1px solid #2563eb !important;
}
.dark .btn-view:hover, body.dark .btn-view:hover,
.dark .btn-view-all:hover, body.dark .btn-view-all:hover {
    background: linear-gradient(135deg, #1e40af, #2563eb) !important;
    color: #fff !important;
}

/* Assigned-to-me page: filter/action card gradient */
.dark .bg-gradient-to-r.from-gray-50.to-gray-100 {
    background-image: linear-gradient(to right, #23272f 0%, #23272f 100%) !important;
    background-color: #23272f !important;
    border-color: #23272f !important;
}

/* Assigned-to-me page: pagination footer gradient */
.dark .bg-gradient-to-r.from-white.to-gray-50 {
    background-image: linear-gradient(to right, #23272f 0%, #23272f 100%) !important;
    background-color: #23272f !important;
    border-color: #23272f !important;
}

/* Additional text color fixes for better dark mode readability */
.dark .text-gray-500,
body.dark .text-gray-500 {
    color: rgb(156 163 175) !important; /* Light gray for dark mode */
}

.dark .text-gray-600,
body.dark .text-gray-600 {
    color: rgb(209 213 219) !important; /* Lighter gray for dark mode */
}

.dark .text-gray-700,
body.dark .text-gray-700 {
    color: rgb(229 231 235) !important; /* Even lighter for better contrast */
}

/* Background color fixes for JavaScript-generated content */
.dark .bg-indigo-50,
body.dark .bg-indigo-50 {
    background-color: rgb(30 41 59) !important; /* Dark slate for indigo-50 */
    border-color: rgb(59 130 246) !important; /* Keep border blue */
}

.dark .hover\\:bg-indigo-50:hover,
body.dark .hover\\:bg-indigo-50:hover {
    background-color: rgb(51 65 85) !important; /* Slightly lighter on hover */
}

/* Exchange page specific dark mode fixes */
.dark .border-indigo-200,
body.dark .border-indigo-200 {
    border-color: rgb(79 70 229) !important; /* Darker indigo border */
}

/* Approval page specific fixes - content blocks */
.dark .text-gray-600.bg-gray-50,
.dark .text-sm.text-gray-600.bg-gray-50,
body.dark .text-gray-600.bg-gray-50,
body.dark .text-sm.text-gray-600.bg-gray-50 {
    background-color: rgb(31 41 55) !important; /* Dark background for content blocks */
    color: rgb(209 213 219) !important; /* Light text */
}

/* Cancel button fixes */
.dark .bg-gray-200.text-gray-700,
body.dark .bg-gray-200.text-gray-700 {
    background-color: rgb(55 65 81) !important; /* gray-700 */
    color: rgb(243 244 246) !important; /* gray-100 */
}

.dark .hover\\:bg-gray-300:hover,
body.dark .hover\\:bg-gray-300:hover {
    background-color: rgb(75 85 99) !important; /* gray-600 */
}

/* Dark mode support for tab buttons - Fix for primary-light colors */
.dark .text-primary-light,
body.dark .text-primary-light {
    color: #60a5fa !important; /* blue-400 - better contrast in dark mode */
}

.dark .border-primary-light,
body.dark .border-primary-light {
    border-color: #60a5fa !important; /* blue-400 - better contrast in dark mode */
}

/* Ensure tab buttons have proper styling in dark mode */
.dark .tab-btn,
body.dark .tab-btn {
    color: #9ca3af !important; /* gray-400 for inactive tabs */
    background-color: transparent !important; /* No background for tabs */
    border: none !important; /* Remove all borders except bottom */
    border-bottom: 2px solid transparent !important; /* Only bottom border for tabs */
}

.dark .tab-btn.active,
body.dark .tab-btn.active {
    color: #60a5fa !important; /* blue-400 for active tab text */
    border-bottom-color: #60a5fa !important; /* blue-400 for active tab border */
    background-color: transparent !important; /* Keep transparent background */
}

/* Fix hover states for tab buttons in dark mode */
.dark .tab-btn:hover:not(.active),
body.dark .tab-btn:hover:not(.active) {
    color: #d1d5db !important; /* gray-300 on hover */
    border-bottom-color: #6b7280 !important; /* gray-500 border on hover */
    background-color: transparent !important; /* Keep transparent background */
}

.dark .tab-btn.active:hover,
body.dark .tab-btn.active:hover {
    color: #93c5fd !important; /* blue-300 for active tab hover */
    border-bottom-color: #93c5fd !important; /* blue-300 border for active tab hover */
    background-color: transparent !important; /* Keep transparent background */
}

.dark #tabContainer,
body.dark #tabContainer {
    border-bottom-color: #4b5563 !important; /* gray-600 */
}


.dark .btn-modern.btn-secondary.view-details-btn,
body.dark .btn-modern.btn-secondary.view-details-btn {
    background-color: #6b7280 !important; /* gray-500 */
    border: 1px solid #6b7280 !important; /* gray-500 */
    color: #1f2937 !important; /* gray-50 */
    padding: 0.5rem 1rem !important;
    border-radius: 0.375rem !important; /* rounded-md */
    font-weight: 500 !important;
    transition: all 0.2s ease-in-out !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.dark .btn-modern.btn-secondary.view-details-btn:hover,
body.dark .btn-modern.btn-secondary.view-details-btn:hover {
    background-color: #374151 !important; /* gray-700 */
    border-color: #374151 !important; /* gray-700 */
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Steps List - Dark mode styling for li elements */
.dark .steps-list li,
body.dark .steps-list li {
    display: flex !important;
    align-items: center !important;
    padding: 0.75rem 1rem !important; /* py-3 px-4 */
    background-color: #1f2937 !important; /* gray-800 */
    border: 1px solid #374151 !important; /* gray-700 */
    border-radius: 0.5rem !important; /* rounded-lg */
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
    gap: 0.75rem !important; /* space between icon and text */
}

.dark .steps-list li:hover,
body.dark .steps-list li:hover {
    background-color: #374151 !important; /* gray-700 */
    border-color: #4b5563 !important; /* gray-600 */
    transform: translateX(4px) !important; /* subtle slide effect */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Icon styling within steps list */
.dark .steps-list li i.fas.fa-circle,
body.dark .steps-list li i.fas.fa-circle {
    color: #6b7280 !important; /* gray-500 - inactive state */
    font-size: 0.75rem !important; /* text-xs */
    min-width: 0.75rem !important; /* prevent shrinking */
}

/* Active/completed step styling */
.dark .steps-list li.active,
body.dark .steps-list li.active,
.dark .steps-list li.completed,
body.dark .steps-list li.completed {
    background-color: #312e81 !important; /* indigo-800 */
    border-color: #4f46e5 !important; /* indigo-600 */
}

.dark .steps-list li.active i.fas.fa-circle,
body.dark .steps-list li.active i.fas.fa-circle {
    color: #818cf8 !important; /* indigo-400 - active state */
}

.dark .steps-list li.completed i.fas.fa-circle,
body.dark .steps-list li.completed i.fas.fa-circle {
    color: #34d399 !important; /* emerald-400 - completed state */
}

/* Current step styling */
.dark .steps-list li.current,
body.dark .steps-list li.current {
    background-color: #1e40af !important; /* blue-800 */
    border-color: #3b82f6 !important; /* blue-500 */
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important; /* blue glow */
}

.dark .steps-list li.current i.fas.fa-circle,
body.dark .steps-list li.current i.fas.fa-circle {
    color: #60a5fa !important; /* blue-400 - current step */
}

.dark .steps-list li.current span,
body.dark .steps-list li.current span {
    color: #dbeafe !important; /* blue-200 for better contrast */
    font-weight: 600 !important; /* semibold */
}

/* Text color overrides for active states */
.dark .steps-list li.active span,
body.dark .steps-list li.active span {
    color: #c7d2fe !important; /* indigo-200 */
}

.dark .steps-list li.completed span,
body.dark .steps-list li.completed span {
    color: #6ee7b7 !important; /* emerald-300 */
}

/* Container styling */
.dark .steps-list,
body.dark .steps-list {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Scrollbar styling for the container */
.dark div[style*="overflow-x: auto"],
body.dark div[style*="overflow-x: auto"] {
    scrollbar-width: thin !important;
    scrollbar-color: #4b5563 #1f2937 !important; /* gray-600 thumb, gray-800 track */
}

.dark div[style*="overflow-x: auto"]::-webkit-scrollbar,
body.dark div[style*="overflow-x: auto"]::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

.dark div[style*="overflow-x: auto"]::-webkit-scrollbar-track,
body.dark div[style*="overflow-x: auto"]::-webkit-scrollbar-track {
    background: #1f2937 !important; /* gray-800 */
}

.dark div[style*="overflow-x: auto"]::-webkit-scrollbar-thumb,
body.dark div[style*="overflow-x: auto"]::-webkit-scrollbar-thumb {
    background-color: #4b5563 !important; /* gray-600 */
    border-radius: 4px !important;
}

.dark div[style*="overflow-x: auto"]::-webkit-scrollbar-thumb:hover,
body.dark div[style*="overflow-x: auto"]::-webkit-scrollbar-thumb:hover {
    background-color: #6b7280 !important; /* gray-500 */
}

/* Specific styling for Cancel Offboard button */
.dark #cancelOffboard.btn-modern.btn-secondary,
body.dark #cancelOffboard.btn-modern.btn-secondary {
    background-color: #1f2937 !important; /* gray-800 - specific color requested */
    border: 1px solid #1f2937 !important; /* gray-800 border */
    color: #1f2937  !important; /* White text for good contrast */
    padding: 0.5rem 1rem !important;
    border-radius: 0.375rem !important; /* rounded-md */
    font-weight: 500 !important;
    transition: all 0.2s ease-in-out !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.dark #cancelOffboard.btn-modern.btn-secondary:hover,
body.dark #cancelOffboard.btn-modern.btn-secondary:hover {
    background-color: #111827 !important; /* Darker gray-900 on hover */
    border-color: #111827 !important; /* gray-900 border */
    color: #1f2937  !important; /* Keep white text on hover */
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(31, 41, 55, 0.4) !important; /* Shadow with the same color */
}

.dark #cancelOffboard.btn-modern.btn-secondary:active,
body.dark #cancelOffboard.btn-modern.btn-secondary:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(31, 41, 55, 0.3) !important;
}

/* Ensure the icon also has good contrast */
.dark #cancelOffboard.btn-modern.btn-secondary i.fas.fa-times,
body.dark #cancelOffboard.btn-modern.btn-secondary i.fas.fa-times {
    color: #1f2937  !important; /* White icon */
    font-size: 0.875rem !important; /* text-sm */
}

/* Focus state for accessibility */
.dark #cancelOffboard.btn-modern.btn-secondary:focus,
body.dark #cancelOffboard.btn-modern.btn-secondary:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.5) !important; /* Focus ring with the same color */
}

/* Employee Action Buttons Container - Dark Mode */
.dark .-mt-px.flex.divide-x.divide-gray-200,
body.dark .-mt-px.flex.divide-x.divide-gray-200 {
    border-color: #4b5563 !important; /* gray-600 for divider */
}

/* Offboard Button - Dark Mode */
.dark .offboard-btn,
body.dark .offboard-btn {
    background-color: #1f2937 !important; /* gray-800 */
    border-color: #4b5563 !important; /* gray-600 */
    color: #f9fafb !important; /* gray-50 */
    transition: all 0.2s ease-in-out !important;
}

.dark .offboard-btn:hover,
body.dark .offboard-btn:hover {
    background-color: #7f1d1d !important; /* red-800 for hover instead of red-50 */
    color: #fca5a5 !important; /* red-300 for better text contrast */
    border-color: #b91c1c !important; /* red-700 */
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(127, 29, 29, 0.3) !important; /* red shadow */
}

.dark .offboard-btn:active,
body.dark .offboard-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(127, 29, 29, 0.2) !important;
}

/* Offboard Button SVG Icon */
.dark .offboard-btn svg.text-red-400,
body.dark .offboard-btn svg.text-red-400 {
    color: #f87171 !important; /* red-400 - keep as is for good contrast */
}

.dark .offboard-btn:hover svg.text-red-400,
body.dark .offboard-btn:hover svg.text-red-400 {
    color: #fca5a5 !important; /* red-300 on hover for better visibility */
}

/* Change Entity Button - Dark Mode */
.dark .change-entity-btn,
body.dark .change-entity-btn {
    background-color: #1f2937 !important; /* gray-800 */
    border-color: #4b5563 !important; /* gray-600 */
    color: #f9fafb !important; /* gray-50 */
    transition: all 0.2s ease-in-out !important;
}

.dark .change-entity-btn:hover,
body.dark .change-entity-btn:hover {
    background-color: #065f46 !important; /* emerald-800 for hover instead of green-50 */
    color: #6ee7b7 !important; /* emerald-300 for better text contrast */
    border-color: #047857 !important; /* emerald-700 */
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(6, 95, 70, 0.3) !important; /* emerald shadow */
}

.dark .change-entity-btn:active,
body.dark .change-entity-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(6, 95, 70, 0.2) !important;
}

/* Change Entity Button SVG Icon */
.dark .change-entity-btn svg.text-green-400,
body.dark .change-entity-btn svg.text-green-400 {
    color: #34d399 !important; /* emerald-400 - keep as is for good contrast */
}

.dark .change-entity-btn:hover svg.text-green-400,
body.dark .change-entity-btn:hover svg.text-green-400 {
    color: #6ee7b7 !important; /* emerald-300 on hover for better visibility */
}

/* Container div styling */
.dark .-ml-px.flex.w-0.flex-1,
body.dark .-ml-px.flex.w-0.flex-1 {
    background-color: transparent !important;
}

/* Focus states for accessibility */
.dark .offboard-btn:focus,
body.dark .offboard-btn:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.5) !important; /* red focus ring */
}

.dark .change-entity-btn:focus,
body.dark .change-entity-btn:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.5) !important; /* emerald focus ring */
}

/* Ensure proper border radius for the container */
.dark .offboard-btn.rounded-bl-lg,
body.dark .offboard-btn.rounded-bl-lg {
    border-bottom-left-radius: 0.5rem !important; /* lg radius */
}

.dark .change-entity-btn.rounded-br-lg,
body.dark .change-entity-btn.rounded-br-lg {
    border-bottom-right-radius: 0.5rem !important; /* lg radius */
}

/* SVG sizing consistency */
.dark .offboard-btn svg.size-5,
body.dark .offboard-btn svg.size-5,
.dark .change-entity-btn svg.size-5,
body.dark .change-entity-btn svg.size-5 {
    width: 1.25rem !important; /* 20px */
    height: 1.25rem !important; /* 20px */
}

/* Pagination Container - Dark Mode Styling */
.dark .pagination-container,
body.dark .pagination-container {
    background-color: #374151 !important; /* gray-700 */
    border-top: 1px solid #4b5563 !important; /* gray-600 */
    color: #f9fafb !important; /* gray-50 */
}

/* Pagination text styling */
.dark .pagination-container .text-gray-700,
body.dark .pagination-container .text-gray-700 {
    color: #d1d5db !important; /* gray-300 */
}

/* Blue accent numbers in pagination info */
.dark .pagination-container .text-blue-600,
body.dark .pagination-container .text-blue-600 {
    color: #60a5fa !important; /* blue-400 for better contrast */
}

/* Pagination buttons - base styling */
.dark .pagination-btn,
body.dark .pagination-btn {
    background-color: #1f2937 !important; /* gray-800 */
    border: 1px solid #4b5563 !important; /* gray-600 */
    color: #d1d5db !important; /* gray-300 */
    transition: all 0.2s ease-in-out !important;
    font-weight: 500 !important;
}

/* Pagination buttons hover state */
.dark .pagination-btn:hover:not(.active):not([disabled]),
body.dark .pagination-btn:hover:not(.active):not([disabled]) {
    background-color: #374151 !important; /* gray-700 */
    border-color: #6b7280 !important; /* gray-500 */
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Active pagination button */
.dark .pagination-btn.active,
body.dark .pagination-btn.active {
    background-color: #3b82f6 !important; /* blue-500 */
    border-color: #3b82f6 !important; /* blue-500 */
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4) !important;
}

.dark .pagination-btn.active:hover,
body.dark .pagination-btn.active:hover {
    background-color: #2563eb !important; /* blue-600 */
    border-color: #2563eb !important; /* blue-600 */
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.5) !important;
}

/* Disabled pagination buttons */
.dark .pagination-btn[disabled],
body.dark .pagination-btn[disabled],
.dark .pagination-btn.opacity-50,
body.dark .pagination-btn.opacity-50 {
    background-color: #1f2937 !important; /* gray-800 */
    border-color: #374151 !important; /* gray-700 */
    color: #6b7280 !important; /* gray-500 */
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.dark .pagination-btn[disabled]:hover,
body.dark .pagination-btn[disabled]:hover,
.dark .pagination-btn.opacity-50:hover,
body.dark .pagination-btn.opacity-50:hover {
    background-color: #1f2937 !important; /* gray-800 */
    border-color: #374151 !important; /* gray-700 */
    color: #6b7280 !important; /* gray-500 */
    transform: none !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

/* Ellipsis (...) styling */
.dark .pagination-container .text-gray-500,
body.dark .pagination-container .text-gray-500 {
    color: #9ca3af !important; /* gray-400 */
}

/* Focus states for accessibility */
.dark .pagination-btn:focus,
body.dark .pagination-btn:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5) !important; /* blue focus ring */
}

.dark .pagination-btn.active:focus,
body.dark .pagination-btn.active:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5), 0 2px 8px rgba(59, 130, 246, 0.4) !important;
}

/* Container spacing and layout */
.dark .pagination-container,
body.dark .pagination-container {
    padding: 0.4rem 0.75rem !important; /* match compact light theme */
    border-bottom-left-radius: 0.5rem !important;
    border-bottom-right-radius: 0.5rem !important;
}

/* Match compact button sizing in dark mode */
.dark .pagination-btn,
body.dark .pagination-btn {
    padding: 0.25rem 0.55rem !important;
    font-size: 0.75rem !important;
    min-width: 1.75rem !important;
    height: 1.75rem !important;
    border-radius: 0.35rem !important;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .dark .pagination-container,
    body.dark .pagination-container {
        padding: 0.75rem 1rem !important; /* Smaller padding on mobile */
    }
    
    .dark .pagination-container .flex.items-center.justify-between,
    body.dark .pagination-container .flex.items-center.justify-between {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: center !important;
    }
    
    .dark .pagination-btn,
    body.dark .pagination-btn {
        padding: 0.25rem 0.55rem !important;
        font-size: 0.75rem !important;
    }
}

/* Previous/Next button specific styling */
.dark .pagination-btn:first-of-type,
.dark .pagination-btn:last-of-type,
body.dark .pagination-btn:first-of-type,
body.dark .pagination-btn:last-of-type {
    font-weight: 600 !important;
}

/* Animation for button interactions */
.dark .pagination-btn,
body.dark .pagination-btn {
    transform: translateY(0) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Hover animation for non-disabled buttons */
.dark .pagination-btn:hover:not([disabled]):not(.opacity-50),
body.dark .pagination-btn:hover:not([disabled]):not(.opacity-50) {
    transform: translateY(-2px) !important;
}

/* Active state pressed effect */
.dark .pagination-btn:active:not([disabled]):not(.opacity-50),
body.dark .pagination-btn:active:not([disabled]):not(.opacity-50) {
    transform: translateY(0) !important;
    transition: all 0.1s ease !important;
}

/* Ensure proper spacing between pagination elements */
.dark .pagination-container .space-x-2 > *:not(:first-child),
body.dark .pagination-container .space-x-2 > *:not(:first-child) {
    margin-left: 0.5rem !important; /* space-x-2 */
}

/* Font weight adjustments for better readability */
.dark .pagination-container .font-bold,
body.dark .pagination-container .font-bold {
    font-weight: 700 !important;
}

.dark .pagination-container .font-medium,
body.dark .pagination-container .font-medium {
    font-weight: 500 !important;
}

/* Ensure container has proper border radius consistency */
.dark .pagination-container.rounded-b-2xl,
body.dark .pagination-container.rounded-b-2xl {
    border-bottom-left-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* Loading state (if needed) */
.dark .pagination-btn.loading,
body.dark .pagination-btn.loading {
    position: relative !important;
    color: transparent !important;
    pointer-events: none !important;
}

.dark .pagination-btn.loading::after,
body.dark .pagination-btn.loading::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 1rem !important;
    height: 1rem !important;
    margin: -0.5rem 0 0 -0.5rem !important;
    border: 2px solid #6b7280 !important;
    border-top-color: #ffffff !important;
    border-radius: 50% !important;
    animation: pagination-spin 1s linear infinite !important;
}

@keyframes pagination-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Enhanced visual hierarchy */
.dark .pagination-container .text-sm,
body.dark .pagination-container .text-sm {
    font-size: 0.875rem !important; /* text-sm */
    line-height: 1.25rem !important;
}

/* Ensure proper contrast for all text elements */
.dark .pagination-container span,
body.dark .pagination-container span {
    color: inherit !important;
}

/* Better visual separation for the pagination info */
.dark .pagination-container .text-sm.text-gray-700.font-medium,
body.dark .pagination-container .text-sm.text-gray-700.font-medium {
    background-color: rgba(75, 85, 99, 0.3) !important; /* gray-600 with opacity */
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.375rem !important; /* rounded-md */
    border: 1px solid rgba(75, 85, 99, 0.2) !important;
}

/* Calendar Weekend Cells - Dark Mode */
.dark .calendar-cell.weekend,
body.dark .calendar-cell.weekend {
    background: #312e40 !important;
    border-color: #6d5f8a !important;
}

.dark .calendar-cell.weekend.selectable:hover,
body.dark .calendar-cell.weekend.selectable:hover {
    background: #3d3654 !important;
    border-color: #8b7aad !important;
}

/* Calendar Holiday Cells - Dark Mode (warm rose instead of blue) */
.dark .calendar-cell.holiday,
body.dark .calendar-cell.holiday {
    background: #3b1a20 !important;
    border-color: #9f1239 !important;
    color: #fecdd3 !important;
}

.dark .calendar-cell.holiday.selectable:hover,
body.dark .calendar-cell.holiday.selectable:hover {
    background: #4c1d2a !important;
    border-color: #e11d48 !important;
}

/* Profile Picture Upload Area - Dark Mode */
.dark .upload-area,
body.dark .upload-area {
    z-index: 10 !important; /* Ensure it's above other elements */
}

/* Upload label/button styling */
.dark .upload-area label,
body.dark .upload-area label {
    background-color: rgba(31, 41, 55, 0.9) !important; /* gray-800 with 90% opacity */
    border: 2px solid #4b5563 !important; /* gray-600 border */
    color: #f9fafb !important; /* gray-50 */
    transition: all 0.2s ease-in-out !important;
    backdrop-filter: blur(4px) !important; /* Add blur effect */
}

.dark .upload-area label:hover,
body.dark .upload-area label:hover {
    background-color: rgba(31, 41, 55, 0.95) !important; /* More opaque on hover */
    border-color: #60a5fa !important; /* blue-400 border on hover */
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(96, 165, 250, 0.2) !important; /* Shadow + blue glow */
}

/* Camera icon styling */
.dark .upload-area .fas.fa-camera,
body.dark .upload-area .fas.fa-camera {
    color: #d1d5db !important; /* gray-300 */
    font-size: 0.875rem !important; /* text-sm */
    transition: color 0.2s ease-in-out !important;
}

.dark .upload-area label:hover .fas.fa-camera,
body.dark .upload-area label:hover .fas.fa-camera {
    color: #60a5fa !important; /* blue-400 on hover */
}

/* Focus state for accessibility */
.dark .upload-area label:focus,
body.dark .upload-area label:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.5) !important; /* Blue focus ring */
    border-color: #60a5fa !important; /* blue-400 */
}

/* Active/pressed state */
.dark .upload-area label:active,
body.dark .upload-area label:active {
    transform: scale(1.05) !important;
    transition: all 0.1s ease !important;
}

/* Hidden file input remains hidden */
.dark .upload-area input[type="file"].hidden,
body.dark .upload-area input[type="file"].hidden {
    display: none !important;
}

/* Screen reader text styling */
.dark .upload-area .sr-only,
body.dark .upload-area .sr-only {
    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;
}

/* Ensure proper positioning */
.dark .upload-area.absolute.bottom-2.right-2,
body.dark .upload-area.absolute.bottom-2.right-2 {
    position: absolute !important;
    bottom: 0.5rem !important; /* bottom-2 */
    right: 0.5rem !important; /* right-2 */
}

/* Enhanced styling with better visual feedback */
.dark .upload-area label.cursor-pointer,
body.dark .upload-area label.cursor-pointer {
    cursor: pointer !important;
    padding: 0.5rem !important; /* p-2 */
    border-radius: 9999px !important; /* rounded-full */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.5rem !important; /* w-10 */
    height: 2.5rem !important; /* h-10 */
    position: relative !important;
}

/* Add a subtle pulse animation on hover for better UX */
.dark .upload-area label:hover,
body.dark .upload-area label:hover {
    animation: upload-pulse 2s infinite !important;
}

@keyframes upload-pulse {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(96, 165, 250, 0.2);
    }
    50% {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 4px rgba(96, 165, 250, 0.3);
    }
}

/* Alternative styling with gradient background */
.dark .upload-area label.gradient-style,
body.dark .upload-area label.gradient-style {
    background: linear-gradient(135deg, rgba(31, 41, 55, 0.9), rgba(55, 65, 81, 0.9)) !important;
    border: 2px solid transparent !important;
    background-clip: padding-box !important;
}

.dark .upload-area label.gradient-style:hover,
body.dark .upload-area label.gradient-style:hover {
    background: linear-gradient(135deg, rgba(31, 41, 55, 0.95), rgba(55, 65, 81, 0.95)) !important;
    border-color: #60a5fa !important;
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
    .dark .upload-area label,
    body.dark .upload-area label {
        width: 2.25rem !important; /* Slightly smaller on mobile */
        height: 2.25rem !important;
        padding: 0.375rem !important; /* p-1.5 */
    }
    
    .dark .upload-area .fas.fa-camera,
    body.dark .upload-area .fas.fa-camera {
        font-size: 0.75rem !important; /* text-xs on mobile */
    }
}

/* Ensure proper stacking context */
.dark .upload-area,
body.dark .upload-area {
    z-index: 20 !important; /* Higher z-index to ensure it's clickable */
}

/* Loading state (optional) */
.dark .upload-area.loading label,
body.dark .upload-area.loading label {
    pointer-events: none !important;
    opacity: 0.7 !important;
}

.dark .upload-area.loading .fas.fa-camera,
body.dark .upload-area.loading .fas.fa-camera {
    animation: upload-spin 1s linear infinite !important;
}

@keyframes upload-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Entity Buttons - Dark Mode */
.dark #entityButtons button,
body.dark #entityButtons button {
    background-color: #374151 !important; /* gray-700 instead of #f0f0f0 */
    color: #f9fafb !important; /* gray-50 instead of #333 */
    border: 1px solid #4b5563 !important; /* gray-600 instead of #ddd */
    padding: 10px 20px !important;
    margin: 5px !important;
    cursor: pointer !important;
    border-radius: 5px !important;
    transition: all 0.3s ease !important;
}

/* Entity Buttons Hover State - Dark Mode */
.dark #entityButtons button:hover:not(.active-entity),
body.dark #entityButtons button:hover:not(.active-entity) {
    background-color: #4b5563 !important; /* gray-600 */
    border-color: #6b7280 !important; /* gray-500 */
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Active Entity Button - Dark Mode (matches #357abd) */
.dark #entityButtons button.active-entity,
body.dark #entityButtons button.active-entity {
    background-color: #357abd !important; /* Keep the same blue as light mode */
    color: #ffffff !important; /* Keep white text */
    border-color: #357abd !important; /* Keep the same blue border */
    box-shadow: 0 2px 8px rgba(53, 122, 189, 0.3) !important; /* Add subtle shadow */
}

/* Active Entity Button Hover State - Dark Mode */
.dark #entityButtons button.active-entity:hover,
body.dark #entityButtons button.active-entity:hover {
    background-color: #2563eb !important; /* Slightly brighter blue on hover */
    border-color: #2563eb !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(53, 122, 189, 0.4) !important;
}

/* Entity Buttons Active/Pressed State - Dark Mode (for :active pseudo-class) */
.dark #entityButtons button:active:not(.active-entity),
body.dark #entityButtons button:active:not(.active-entity) {
    background-color: #4b5563 !important; /* gray-600 */
    border-color: #4b5563 !important;
    color: #ffffff !important;
    transform: translateY(1px) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Active Entity Button Pressed State */
.dark #entityButtons button.active-entity:active,
body.dark #entityButtons button.active-entity:active {
    background-color: #1d4ed8 !important; /* Darker blue when pressed */
    border-color: #1d4ed8 !important;
    transform: translateY(1px) !important;
    box-shadow: 0 1px 4px rgba(53, 122, 189, 0.3) !important;
}

/* Entity Buttons Focus State - Dark Mode */
.dark #entityButtons button:focus,
body.dark #entityButtons button:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5) !important; /* Blue focus ring */
    border-color: #60a5fa !important; /* blue-400 */
}

/* Active Entity Button Focus State */
.dark #entityButtons button.active-entity:focus,
body.dark #entityButtons button.active-entity:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(53, 122, 189, 0.5), 0 2px 8px rgba(53, 122, 189, 0.3) !important;
    border-color: #357abd !important;
}

/* Entity Buttons Disabled State - Dark Mode */
.dark #entityButtons button:disabled,
body.dark #entityButtons button:disabled {
    background-color: #1f2937 !important; /* gray-800 */
    color: #6b7280 !important; /* gray-500 */
    border-color: #374151 !important; /* gray-700 */
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    transform: none !important;
    box-shadow: none !important;
}

.dark #entityButtons button:disabled:hover,
body.dark #entityButtons button:disabled:hover {
    background-color: #1f2937 !important;
    color: #6b7280 !important;
    border-color: #374151 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Disabled Active Entity Button */
.dark #entityButtons button.active-entity:disabled,
body.dark #entityButtons button.active-entity:disabled {
    background-color: #1f2937 !important;
    color: #6b7280 !important;
    border-color: #374151 !important;
    opacity: 0.6 !important;
}

/* Entity Buttons Container - Dark Mode */
.dark #entityButtons,
body.dark #entityButtons {
    background-color: transparent !important;
    padding: 0.5rem !important;
    border-radius: 0.5rem !important;
}

/* Enhanced button styling with better spacing */
.dark #entityButtons button,
body.dark #entityButtons button {
    font-weight: 500 !important;
    font-size: 0.875rem !important; /* text-sm */
    line-height: 1.25rem !important;
    min-width: auto !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Add a subtle animation effect for non-active buttons */
.dark #entityButtons button:not(.active-entity)::before,
body.dark #entityButtons button:not(.active-entity)::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    transition: width 0.3s ease, height 0.3s ease !important;
    transform: translate(-50%, -50%) !important;
    z-index: 0 !important;
}

.dark #entityButtons button:not(.active-entity):hover::before,
body.dark #entityButtons button:not(.active-entity):hover::before {
    width: 120% !important;
    height: 120% !important;
}

/* Active entity button animation effect */
.dark #entityButtons button.active-entity::before,
body.dark #entityButtons button.active-entity::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-radius: 50% !important;
    transition: width 0.3s ease, height 0.3s ease !important;
    transform: translate(-50%, -50%) !important;
    z-index: 0 !important;
}

.dark #entityButtons button.active-entity:hover::before,
body.dark #entityButtons button.active-entity:hover::before {
    width: 120% !important;
    height: 120% !important;
}

.dark #entityButtons button > *,
body.dark #entityButtons button > * {
    position: relative !important;
    z-index: 1 !important;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .dark #entityButtons button,
    body.dark #entityButtons button {
        padding: 8px 16px !important;
        margin: 3px !important;
        font-size: 0.8125rem !important; /* text-xs */
    }
}

/* Loading state */
.dark #entityButtons button.loading,
body.dark #entityButtons button.loading {
    pointer-events: none !important;
    position: relative !important;
}

.dark #entityButtons button.loading::after,
body.dark #entityButtons button.loading::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 1rem !important;
    height: 1rem !important;
    margin: -0.5rem 0 0 -0.5rem !important;
    border: 2px solid transparent !important;
    border-top-color: currentColor !important;
    border-radius: 50% !important;
    animation: entity-button-spin 1s linear infinite !important;
}

@keyframes entity-button-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}