/* DataTables v2.x Pagination Pure CSS Fix */

/* Pagination Container (Flexbox layout rules) */
.dt-paging nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    /* Buttons ke beech ka gap */
    margin-top: 16px !important;
}

/* Base Buttons State (Numbers & Arrows) */
.dt-paging-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 8px !important;
    border: 1px solid #d1d5db !important;
    /* border-gray-300 */
    border-radius: 6px !important;
    /* rounded-md */
    background-color: #ffffff !important;
    color: #374151 !important;
    /* text-gray-700 */
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

/* Hover State */
.dt-paging-button:hover:not(.disabled):not(.current) {
    background-color: #f3f4f6 !important;
    /* bg-gray-100 */
    border-color: #d1d5db !important;
}

/* Active / Current Page Button */
.dt-paging-button.current {
    background-color: #2563eb !important;
    /* bg-blue-600 */
    color: #ffffff !important;
    border-color: #2563eb !important;
    font-weight: 600 !important;
}

/* Disabled State (First/Last/Prev/Next when inactive) */
.dt-paging-button.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background-color: #f9fafb !important;
    /* bg-gray-50 */
    color: #9ca3af !important;
    /* text-gray-400 */
    border-color: #e5e7eb !important;
}

/* Focus Ring Outline Fix */
.dt-paging-button:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.5) !important;
}

/* ========================================================= */
/* LEFT SIDE: LENGTH MENU & INFO TEXT SEPARATE CSS           */
/* ========================================================= */

/* Left container parent layout setup */
.dt-container div.flex.flex-col > div:first-child,
.dataTables_wrapper .dt-length,
.dataTables_wrapper .dt-info {
    display: inline-flex !important;
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    color: #4b5563 !important;
    /* text-gray-600 */
    font-size: 14px !important;
    float: left !important;
    /* Layout breakdown control */
}

/* Target specifically the dropdown menu layout inside label */
.dt-length label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-weight: 400 !important;
    margin: 0 !important;
}

/* Style the select dropdown box */
select.dt-input,
.dt-length select {
    padding: 4px 28px 4px 10px !important;
    min-width: 65px !important;
    border: 1px solid #d1d5db !important;
    /* border-gray-300 */
    border-radius: 6px !important;
    /* rounded-md */
    background-color: #ffffff !important;
    color: #1f2937 !important;
    /* text-gray-800 */
    font-size: 13px !important;
    outline: none !important;
    cursor: pointer !important;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease !important;
}

/* Dropdown Focus Blue Glow ring effect */
select.dt-input:focus {
    border-color: #2563eb !important;
    /* blue-600 */
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2) !important;
}

/* ========================================================= */
/* FORCE LIGHT THEME FOR DATATABLE COMPONENT OVERRIDES       */
/* ========================================================= */

/* Search Inputs */
.dataTables_filter input,
.dt-search input,
div.dt-search input,
div.dataTables_filter input {
    background-color: #ffffff !important;
    color: #1f2937 !important; /* text-gray-800 */
    border: 1px solid #d1d5db !important; /* border-gray-300 */
}

.dataTables_filter input::placeholder,
.dt-search input::placeholder {
    color: #9ca3af !important; /* text-gray-400 */
}

/* Select Dropdowns */
.dataTables_length select,
.dt-length select,
select.dt-input {
    background-color: #ffffff !important;
    color: #1f2937 !important; /* text-gray-800 */
    border: 1px solid #d1d5db !important; /* border-gray-300 */
    padding: 4px 28px 4px 10px !important;
    min-width: 65px !important;
}

/* Pagination Buttons (Force Light Mode Override) */
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dt-container .dt-paging .dt-paging-button,
.dataTables_paginate a,
.dataTables_paginate span,
.dataTables_paginate button,
.dt-paging nav a,
.dt-paging nav span,
.dt-paging nav button {
    background-color: #ffffff !important;
    color: #374151 !important; /* text-gray-700 */
    border: 1px solid #d1d5db !important; /* border-gray-300 */
}

/* Hover State */
.dataTables_wrapper
    .dataTables_paginate
    .paginate_button:hover:not(.disabled):not(.current):not(.active),
.dt-container
    .dt-paging
    .dt-paging-button:hover:not(.disabled):not(.current):not(.active),
.dataTables_paginate a:hover:not(.disabled):not(.current):not(.active),
.dataTables_paginate span:hover:not(.disabled):not(.current):not(.active),
.dt-paging nav a:hover:not(.disabled):not(.current):not(.active),
.dt-paging nav span:hover:not(.disabled):not(.current):not(.active) {
    background-color: #f3f4f6 !important; /* bg-gray-100 */
    color: #111827 !important; /* text-gray-900 */
    border-color: #d1d5db !important;
}

/* Active State */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.active,
.dt-container .dt-paging .dt-paging-button.current,
.dt-container .dt-paging .dt-paging-button.active,
.dataTables_paginate a.current,
.dataTables_paginate a.active,
.dataTables_paginate span.current,
.dataTables_paginate span.active,
.dt-paging nav a.current,
.dt-paging nav a.active,
.dt-paging nav span.current,
.dt-paging nav span.active {
    background-color: #2563eb !important; /* bg-blue-600 */
    color: #ffffff !important;
    border-color: #2563eb !important;
    font-weight: 600 !important;
}

/* Disabled State */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dt-container .dt-paging .dt-paging-button.disabled,
.dataTables_paginate a.disabled,
.dataTables_paginate span.disabled,
.dt-paging nav a.disabled,
.dt-paging nav span.disabled {
    background-color: #f9fafb !important; /* bg-gray-50 */
    color: #9ca3af !important; /* text-gray-400 */
    border-color: #e5e7eb !important;
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* ========================================================= */
/* GLOBAL DARK MODE OVERRIDES FOR SIDEBAR, HEADER & TABLES   */
/* ========================================================= */

/* Body global background override for jet-black */
.dark,
.dark body,
.dark main,
.dark #main {
    background-color: #09090b !important; /* Premium Matte Jet-Black */
    color: #f4f4f5 !important; /* zinc-100 */
}

/* Header Navbar Dark Styles */
.dark #header {
    background-color: #0c0c0e !important; /* Near-black header */
    border-bottom: 1px solid #1f1f23 !important; /* Subtle dark horizontal border */
    box-shadow: none !important;
}

.dark #header .toggle-sidebar-btn {
    color: #a1a1aa !important; /* text-zinc-400 */
}

.dark #header .toggle-sidebar-btn:hover {
    color: #a855f7 !important; /* purple active hover */
}

.dark #header span {
    color: #f4f4f5 !important;
}

/* User Dropdown */
.dark #header ul.absolute {
    background-color: #0c0c0e !important;
    border: 1px solid #1f1f23 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4) !important;
}

.dark #header ul.absolute a {
    color: #a1a1aa !important;
}

.dark #header ul.absolute a:hover {
    background-color: #1e1b4b !important; /* deep indigo/purple hover */
    color: #ffffff !important;
}

.dark #header ul.absolute hr {
    border-color: #1f1f23 !important;
}

/* Sidebar Drawer Dark Styles */
.dark #sidebar {
    background-color: #0c0c0e !important; /* Near-black sidebar */
    border-right: 1px solid #1f1f23 !important; /* Subtle vertical border separator */
}

.dark #sidebar-nav a,
.dark #sidebar-nav summary {
    color: #a1a1aa !important;
}

.dark #sidebar-nav a:hover,
.dark #sidebar-nav summary:hover {
    background-color: #161618 !important; /* dark slate hover */
    color: #ffffff !important;
}

/* Sidebar Active/Open items (Vercel/Render style purple banner with left line indicator!) */
.dark #sidebar-nav a.bg-blue-50,
.dark #sidebar-nav summary.bg-blue-50 {
    background-color: #2e1065 !important; /* Deep violet-950 background */
    color: #d8b4fe !important; /* Purple-300 text color */
    border-left: 3.5px solid #a855f7 !important; /* Solid purple active indicator */
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    font-weight: 600 !important;
}

.dark #sidebar-nav ul a {
    color: #71717a !important; /* zinc-500 */
}

.dark #sidebar-nav ul a:hover {
    color: #d8b4fe !important;
    background-color: transparent !important;
}

.dark #sidebar-nav ul a.text-blue-700 {
    color: #d8b4fe !important;
    font-weight: 600 !important;
}

/* Dark mode Datatables Controls overrides */
.dark .dataTables_filter input,
.dark .dt-search input,
.dark div.dt-search input,
.dark div.dataTables_filter input {
    background-color: #1e293b !important; /* bg-slate-800 */
    color: #f1f5f9 !important; /* text-slate-100 */
    border: 1px solid #334155 !important; /* border-slate-700 */
}

.dark .dataTables_length select,
.dark .dt-length select,
.dark select.dt-input {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border: 1px solid #334155 !important;
}

/* Pagination Buttons in Dark mode */
.dark .dataTables_wrapper .dataTables_paginate .paginate_button,
.dark .dt-container .dt-paging .dt-paging-button,
.dark .dataTables_paginate a,
.dark .dataTables_paginate span,
.dark .dataTables_paginate button,
.dark .dt-paging nav a,
.dark .dt-paging nav span,
.dark .dt-paging nav button {
    background-color: #1e293b !important;
    color: #cbd5e1 !important; /* text-slate-300 */
    border: 1px solid #334155 !important;
}

.dark
    .dataTables_wrapper
    .dataTables_paginate
    .paginate_button:hover:not(.disabled):not(.current):not(.active),
.dark
    .dt-container
    .dt-paging
    .dt-paging-button:hover:not(.disabled):not(.current):not(.active),
.dark .dataTables_paginate a:hover:not(.disabled):not(.current):not(.active),
.dark .dataTables_paginate span:hover:not(.disabled):not(.current):not(.active),
.dark .dt-paging nav a:hover:not(.disabled):not(.current):not(.active),
.dark .dt-paging nav span:hover:not(.disabled):not(.current):not(.active) {
    background-color: #334155 !important; /* bg-slate-700 */
    color: #ffffff !important;
    border-color: #334155 !important;
}

.dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dark .dt-container .dt-paging .dt-paging-button.disabled,
.dark .dataTables_paginate a.disabled,
.dark .dataTables_paginate span.disabled,
.dark .dt-paging nav a.disabled,
.dark .dt-paging nav span.disabled {
    background-color: #1e293b !important;
    color: #475569 !important; /* text-slate-600 */
    border-color: #334155 !important;
    opacity: 0.5 !important;
}

/* Page titles custom styles overrides (if there are static text elements in dashboards) */
.dark .text-gray-900 {
    color: #fafafa !important; /* zinc-50 */
}

.dark .text-gray-800 {
    color: #f4f4f5 !important; /* zinc-100 */
}

.dark .text-gray-700 {
    color: #e4e4e7 !important; /* zinc-200 */
}

.dark .text-gray-600 {
    color: #a1a1aa !important; /* zinc-400 */
}

.dark .text-gray-500 {
    color: #71717a !important; /* zinc-500 */
}

.dark .text-gray-400 {
    color: #52525b !important; /* zinc-600 */
}

.dark .bg-white {
    background-color: #121214 !important; /* Premium dark-charcoal background */
}

.dark .border-gray-200,
.dark .border-gray-100 {
    border-color: #1f1f23 !important; /* Zinc-850 border */
}

/* Dashboard Card Containers and Sections */
.dark .bg-white.rounded-xl.border.border-gray-100,
.dark .bg-white.rounded-lg.shadow-sm.border.border-gray-200 {
    background-color: #121214 !important;
    border-color: #1f1f23 !important;
}

/* Stat card icon wrappers in dark mode */
.dark .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.15) !important;
}
.dark .bg-green-50 {
    background-color: rgba(16, 185, 129, 0.15) !important;
}
.dark .bg-purple-50 {
    background-color: rgba(139, 92, 246, 0.15) !important;
}
.dark .bg-teal-50 {
    background-color: rgba(20, 184, 166, 0.15) !important;
}
.dark .bg-orange-50 {
    background-color: rgba(249, 115, 22, 0.15) !important;
}
.dark .bg-indigo-50 {
    background-color: rgba(99, 102, 241, 0.15) !important;
}

/* Stat card icon wrapper hovers */
.dark a.group:hover .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.25) !important;
}
.dark a.group:hover .bg-green-50 {
    background-color: rgba(16, 185, 129, 0.25) !important;
}
.dark a.group:hover .bg-purple-50 {
    background-color: rgba(139, 92, 246, 0.25) !important;
}
.dark a.group:hover .bg-teal-50 {
    background-color: rgba(20, 184, 166, 0.25) !important;
}
.dark a.group:hover .bg-orange-50 {
    background-color: rgba(249, 115, 22, 0.25) !important;
}
.dark a.group:hover .bg-indigo-50 {
    background-color: rgba(99, 102, 241, 0.25) !important;
}

/* Hover border changes for cards */
.dark a.group:hover {
    border-color: #3b82f6 !important;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.2),
        0 2px 4px -1px rgba(0, 0, 0, 0.1) !important;
}

/* Announcements elements */
.dark .p-4.rounded-xl.border.border-gray-100.bg-gray-50\/50,
.dark .p-4.rounded-xl.border.border-gray-100.bg-gray-50 {
    background-color: rgba(30, 41, 59, 0.5) !important; /* bg-slate-800/50 */
    border-color: #334155 !important;
}
.dark .p-4.rounded-xl.border.border-gray-100.bg-gray-50\/50:hover,
.dark .p-4.rounded-xl.border.border-gray-100.bg-gray-50:hover {
    background-color: #1e293b !important;
}

/* Dividers and borders */
.dark .border-b.border-gray-100,
.dark .border-t.border-gray-100 {
    border-color: #334155 !important;
}

/* Table elements */
.dark tr.hover\:bg-gray-50:hover,
.dark tbody tr:hover {
    background-color: rgba(39, 39, 42, 0.4) !important; /* zinc hover */
}
.dark .bg-gray-50 {
    background-color: #121214 !important;
}
.dark .bg-gray-50\/50 {
    background-color: rgba(18, 18, 20, 0.5) !important;
}
.dark .divide-y.divide-gray-50 > :not([hidden]) ~ :not([hidden]),
.dark .divide-y.divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: #1f1f23 !important;
}

/* Quick Attendance note text input */
.dark input[name="note"] {
    background-color: #0f172a !important; /* bg-slate-900 */
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}
.dark input[name="note"]::placeholder {
    color: #475569 !important;
}

/* Quick navigation hover links */
.dark a.hover\:bg-blue-50:hover,
.dark a.hover\:bg-purple-50:hover,
.dark a.hover\:bg-teal-50:hover,
.dark a.hover\:bg-orange-50:hover,
.dark a.hover\:bg-indigo-50:hover {
    background-color: #334155 !important;
}
.dark a.group .w-7.h-7.rounded-lg.bg-blue-50,
.dark a.group .w-7.h-7.rounded-lg.bg-purple-50,
.dark a.group .w-7.h-7.rounded-lg.bg-teal-50,
.dark a.group .w-7.h-7.rounded-lg.bg-orange-50,
.dark a.group .w-7.h-7.rounded-lg.bg-indigo-50 {
    background-color: rgba(51, 65, 85, 0.8) !important;
}
.dark a.group:hover .w-7.h-7.rounded-lg.bg-blue-50,
.dark a.group:hover .w-7.h-7.rounded-lg.bg-purple-50,
.dark a.group:hover .w-7.h-7.rounded-lg.bg-teal-50,
.dark a.group:hover .w-7.h-7.rounded-lg.bg-orange-50,
.dark a.group:hover .w-7.h-7.rounded-lg.bg-indigo-50 {
    background-color: #3b82f6 !important;
}
.dark a.group:hover .w-7.h-7.rounded-lg.bg-blue-50 i,
.dark a.group:hover .w-7.h-7.rounded-lg.bg-purple-50 i,
.dark a.group:hover .w-7.h-7.rounded-lg.bg-teal-50 i,
.dark a.group:hover .w-7.h-7.rounded-lg.bg-orange-50 i,
.dark a.group:hover .w-7.h-7.rounded-lg.bg-indigo-50 i {
    color: #ffffff !important;
}
.dark a.group:hover span {
    color: #60a5fa !important;
}
.dark a.group:hover i.fa-chevron-right {
    color: #60a5fa !important;
}
.dark .text-gray-700.hover\:text-blue-700:hover {
    color: #60a5fa !important;
}

/* ========================================================= */
/* GLOBAL FORM INPUTS, TEXTAREAS & SELECTS IN DARK MODE       */
/* ========================================================= */

.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="number"],
.dark input[type="date"],
.dark input[type="tel"],
.dark input[type="url"],
.dark input[type="datetime-local"],
.dark textarea,
.dark select {
    background-color: #09090b !important; /* bg-zinc-950 */
    color: #f4f4f5 !important; /* text-zinc-100 */
    border-color: #1f1f23 !important; /* border-zinc-800 */
}

/* Focused states */
.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="tel"]:focus,
.dark input[type="url"]:focus,
.dark input[type="datetime-local"]:focus,
.dark textarea:focus,
.dark select:focus {
    border-color: #a855f7 !important; /* purple-500 */
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2) !important;
}

/* Input file wrappers */
.dark input[type="file"] {
    background-color: #121214 !important;
    border-color: #1f1f23 !important;
    color: #a1a1aa !important;
}

/* Placeholders */
.dark input::placeholder,
.dark textarea::placeholder {
    color: #52525b !important; /* text-zinc-600 */
}

/* Select options styling */
.dark select option {
    background-color: #0c0c0e !important;
    color: #f4f4f5 !important;
}

/* CKEditor Dark Mode Styles */
.dark .ck.ck-editor__main > .ck-editor__editable {
    background-color: #09090b !important; /* bg-zinc-950 */
    color: #f4f4f5 !important; /* text-zinc-100 */
    border-color: #1f1f23 !important;
}

.dark .ck.ck-toolbar {
    background-color: #1e293b !important; /* bg-slate-800 */
    border-color: #334155 !important;
}

.dark .ck.ck-button {
    color: #cbd5e1 !important; /* text-slate-300 */
    cursor: pointer !important;
}

.dark .ck.ck-button:hover {
    background-color: #334155 !important;
    color: #ffffff !important;
}

.dark .ck.ck-button.ck-on {
    background-color: #0f172a !important;
    color: #3b82f6 !important;
}

.dark .ck.ck-dropdown__panel {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* ========================================================= */
/* DATATABLES EXPORT BUTTONS & BADGES DARK MODE OVERRIDES     */
/* ========================================================= */

/* Force clean dark mode colors for Datatables export buttons */
.dark .dt-buttons .buttons-copy,
.dark div.dt-buttons .buttons-copy {
    background-color: #334155 !important; /* bg-slate-700 */
    color: #f1f5f9 !important; /* text-slate-100 */
    border-color: #475569 !important;
}
.dark .dt-buttons .buttons-excel,
.dark div.dt-buttons .buttons-excel {
    background-color: rgba(16, 185, 129, 0.15) !important; /* bg-green-500/15 */
    color: #34d399 !important; /* text-green-400 */
    border-color: rgba(16, 185, 129, 0.3) !important;
}
.dark .dt-buttons .buttons-pdf,
.dark div.dt-buttons .buttons-pdf {
    background-color: rgba(239, 68, 68, 0.15) !important; /* bg-red-500/15 */
    color: #f87171 !important; /* text-red-400 */
    border-color: rgba(239, 68, 68, 0.3) !important;
}
.dark .dt-buttons .buttons-print,
.dark div.dt-buttons .buttons-print {
    background-color: rgba(59, 130, 246, 0.15) !important; /* bg-blue-500/15 */
    color: #60a5fa !important; /* text-blue-400 */
    border-color: rgba(59, 130, 246, 0.3) !important;
}

/* Hover states for export buttons */
.dark .dt-buttons .buttons-copy:hover,
.dark div.dt-buttons .buttons-copy:hover {
    background-color: #475569 !important;
}
.dark .dt-buttons .buttons-excel:hover,
.dark div.dt-buttons .buttons-excel:hover {
    background-color: rgba(16, 185, 129, 0.3) !important;
}
.dark .dt-buttons .buttons-pdf:hover,
.dark div.dt-buttons .buttons-pdf:hover {
    background-color: rgba(239, 68, 68, 0.3) !important;
}
.dark .dt-buttons .buttons-print:hover,
.dark div.dt-buttons .buttons-print:hover {
    background-color: rgba(59, 130, 246, 0.3) !important;
}

/* Dark Mode Badges Adjustments */
.dark .bg-indigo-50.text-indigo-600 {
    background-color: rgba(99, 102, 241, 0.15) !important;
    color: #818cf8 !important; /* text-indigo-400 */
    border-color: rgba(99, 102, 241, 0.3) !important;
}

.dark .bg-green-50.text-green-700,
.dark .bg-green-50.text-green-600 {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important; /* text-green-400 */
    border-color: rgba(16, 185, 129, 0.3) !important;
}

.dark .bg-yellow-50.text-yellow-700,
.dark .bg-yellow-50.text-yellow-600 {
    background-color: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important; /* text-yellow-400 */
    border-color: rgba(245, 158, 11, 0.3) !important;
}

.dark .bg-red-50.text-red-700,
.dark .bg-red-50.text-red-600 {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important; /* text-red-400 */
    border-color: rgba(239, 68, 68, 0.3) !important;
}

.dark .bg-blue-50.text-blue-700,
.dark .bg-blue-50.text-blue-600 {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important; /* text-blue-400 */
    border-color: rgba(59, 130, 246, 0.3) !important;
}

.dark .bg-purple-50.text-purple-700,
.dark .bg-purple-50.text-purple-600 {
    background-color: rgba(139, 92, 246, 0.15) !important;
    color: #c084fc !important; /* text-purple-400 */
    border-color: rgba(139, 92, 246, 0.3) !important;
}

.dark .bg-gray-50.text-gray-600,
.dark .bg-gray-100.text-gray-700 {
    background-color: rgba(71, 85, 105, 0.2) !important;
    color: #cbd5e1 !important; /* text-slate-300 */
    border-color: rgba(71, 85, 105, 0.4) !important;
}

.dark .bg-amber-50 {
    background-color: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important; /* text-amber-400 */
    border-color: rgba(245, 158, 11, 0.3) !important;
}

.dark .bg-rose-50 {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important; /* text-rose-400 */
    border-color: rgba(239, 68, 68, 0.3) !important;
}

.dark .bg-violet-50 {
    background-color: rgba(139, 92, 246, 0.15) !important;
    color: #c084fc !important; /* text-violet-400 */
    border-color: rgba(139, 92, 246, 0.3) !important;
}

.dark .bg-orange-50 {
    background-color: rgba(249, 115, 22, 0.15) !important;
    color: #fdba74 !important; /* text-orange-350 */
    border-color: rgba(249, 115, 22, 0.3) !important;
}

/* Profile photo upload buttons adjustments */
.dark .bg-blue-50.text-blue-700.border.border-blue-200 {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}
.dark .bg-blue-50.text-blue-700.border.border-blue-200:hover {
    background-color: rgba(59, 130, 246, 0.25) !important;
}

.dark .bg-red-50.text-red-600.border.border-red-200 {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}
.dark .bg-red-50.text-red-600.border.border-red-200:hover {
    background-color: rgba(239, 68, 68, 0.25) !important;
}

/* ========================================================= */
/* ALERT & INFO BOX TEXT COLORS FOR DARK MODE                 */
/* ========================================================= */

.dark .bg-blue-50 .text-blue-900,
.dark .bg-blue-50 .text-blue-800,
.dark [class*="bg-blue-"] .text-blue-900,
.dark [class*="bg-blue-"] .text-blue-800 {
    color: #93c5fd !important; /* text-blue-300 */
}
.dark .bg-blue-50 .text-blue-600,
.dark .bg-blue-50 i.fa-info-circle,
.dark [class*="bg-blue-"] .text-blue-600,
.dark [class*="bg-blue-"] i {
    color: #60a5fa !important; /* text-blue-400 */
}

.dark .bg-green-50 .text-green-900,
.dark .bg-green-50 .text-green-800,
.dark [class*="bg-green-"] .text-green-900,
.dark [class*="bg-green-"] .text-green-800 {
    color: #6ee7b7 !important; /* text-green-300 */
}
.dark .bg-green-50 .text-green-600,
.dark .bg-green-50 i.fa-circle-check,
.dark [class*="bg-green-"] .text-green-600,
.dark [class*="bg-green-"] i {
    color: #34d399 !important; /* text-green-400 */
}

.dark .bg-red-50 .text-red-900,
.dark .bg-red-50 .text-red-800,
.dark [class*="bg-red-"] .text-red-900,
.dark [class*="bg-red-"] .text-red-800 {
    color: #fca5a5 !important; /* text-red-300 */
}
.dark .bg-red-50 .text-red-600,
.dark .bg-red-50 i.fa-triangle-exclamation,
.dark [class*="bg-red-"] .text-red-600,
.dark [class*="bg-red-"] i {
    color: #f87171 !important; /* text-red-400 */
}

.dark .bg-yellow-50 .text-yellow-900,
.dark .bg-yellow-50 .text-yellow-800,
.dark [class*="bg-yellow-"] .text-yellow-900,
.dark [class*="bg-yellow-"] .text-yellow-800 {
    color: #fde047 !important; /* text-yellow-300 */
}
.dark .bg-yellow-50 .text-yellow-600,
.dark .bg-yellow-50 i.fa-exclamation-triangle,
.dark [class*="bg-yellow-"] .text-yellow-600,
.dark [class*="bg-yellow-"] i {
    color: #fbbf24 !important; /* text-yellow-400 */
}

/* ========================================================= */
/* NATIVE CALENDAR/DATEPICKER INDICATOR FIX FOR DARK MODE    */
/* ========================================================= */

.dark input::-webkit-calendar-picker-indicator {
    filter: invert(1) !important;
    opacity: 0.8 !important;
    cursor: pointer !important;
}

.dark input::-webkit-calendar-picker-indicator:hover {
    opacity: 1 !important;
}

/* ========================================================= */
/* SWEETALERT2 DARK MODE COMPATIBILITY OVERRIDES             */
/* ========================================================= */

.dark .swal2-popup {
    background-color: #121214 !important; /* Premium dark charcoal background */
    color: #f4f4f5 !important; /* text-zinc-100 */
    border: 1px solid #1f1f23 !important; /* border-zinc-800 */
    box-shadow:
        0 10px 15px -3px rgba(0, 0, 0, 0.4),
        0 4px 6px -4px rgba(0, 0, 0, 0.4) !important;
}

.dark .swal2-title {
    color: #fafafa !important; /* text-zinc-50 */
}

.dark .swal2-html-container {
    color: #e4e4e7 !important; /* text-zinc-200 */
}

.dark .swal2-validation-message {
    background-color: #09090b !important; /* bg-zinc-950 */
    color: #f87171 !important;
}

.dark .swal2-close {
    color: #a1a1aa !important;
}

.dark .swal2-close:hover {
    color: #ffffff !important;
}

.dark .swal2-deny,
.dark .swal2-cancel {
    background-color: #27272a !important; /* bg-zinc-800 */
    color: #ffffff !important;
    border: 1px solid #3f3f46 !important;
}

.dark .swal2-deny:hover,
.dark .swal2-cancel:hover {
    background-color: #3f3f46 !important;
}

/* ========================================================= */
/* AUTHENTICATION PAGES SPECIFIC DARK OVERRIDES              */
/* ========================================================= */

.dark,
.dark html {
    background-color: #09090b !important;
}

.dark .bg-slate-55,
.dark .bg-slate-50,
.dark .bg-gray-100 {
    background-color: #09090b !important; /* Matte Jet-Black */
}

.dark .border-slate-100,
.dark .border-slate-200,
.dark .border-slate-250 {
    border-color: #1f1f23 !important; /* Zinc-850 border */
}

.dark .text-slate-900 {
    color: #fafafa !important;
}

.dark .text-slate-700 {
    color: #e4e4e7 !important;
}

.dark .text-slate-500 {
    color: #a1a1aa !important;
}

.dark .text-slate-550 {
    color: #a1a1aa !important;
}

.dark .text-slate-550:hover {
    color: #ffffff !important;
}

.dark .bg-indigo-50 {
    background-color: #2e1065 !important; /* Premium deep purple highlight background */
}

.dark .text-indigo-650 {
    color: #d8b4fe !important;
}

.dark input.bg-white,
.dark input[type="email"],
.dark input[type="password"] {
    background-color: #09090b !important;
    border-color: #1f1f23 !important;
    color: #f4f4f5 !important;
}

.dark input:focus {
    border-color: #a855f7 !important;
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2) !important;
}

.dark .bg-emerald-50 {
    background-color: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
}

.dark .text-emerald-800,
.dark .text-emerald-650,
.dark .text-emerald-600 {
    color: #34d399 !important;
}

/* ==========================================
   Select2 Premium Theme - Light & Dark Mode
   ========================================== */

.select2-container {
    width: 100% !important;
}

/* Main Selection Container */
.select2-container--default .select2-selection--single {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.5rem !important; /* rounded-lg */
    height: 42px !important;
    padding-left: 0.5rem;
    display: flex;
    align-items: center;
    transition: all 0.2s ease-in-out;
}

/* Focused & Open state */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #3b82f6 !important; /* ring-blue-500 */
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
    outline: none;
}

/* Selection Rendered text */
.select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    color: #1f2937 !important; /* text-gray-800 */
    font-size: 0.875rem !important; /* text-sm */
    line-height: 42px !important;
    padding-left: 0.5rem !important;
    padding-right: 2rem !important;
}

/* Arrow icon */
.select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    height: 40px !important;
    right: 8px !important;
}

.select2-container--default
    .select2-selection--single
    .select2-selection__arrow
    b {
    border-color: #9ca3af transparent transparent transparent !important;
    border-width: 6px 5px 0 5px !important;
}

.select2-container--default.select2-container--open
    .select2-selection--single
    .select2-selection__arrow
    b {
    border-color: transparent transparent #9ca3af transparent !important;
    border-width: 0 5px 6px 5px !important;
}

/* Dropdown Container */
.select2-dropdown {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    margin-top: 4px;
    overflow: hidden;
    z-index: 9999;
}

/* Search Box Inside Dropdown */
.select2-search--dropdown {
    padding: 8px !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    padding: 6px 12px !important;
    font-size: 0.875rem !important;
    outline: none !important;
    background-color: #ffffff !important;
    color: #1f2937 !important;
}

.select2-container--default
    .select2-search--dropdown
    .select2-search__field:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
}

/* Options/Results */
.select2-results__options {
    max-height: 250px !important;
    padding: 4px !important;
}

.select2-container--default .select2-results__option {
    padding: 8px 12px !important;
    font-size: 0.875rem !important;
    border-radius: 0.375rem !important;
    color: #374151 !important;
    margin-bottom: 2px;
}

/* Highlighted option (hover state) */
.select2-container--default
    .select2-results__option--highlighted[aria-selected],
.select2-container--default
    .select2-results__option--highlighted.select2-results__option--selected {
    background-color: #3b82f6 !important; /* Tailwind blue-500 */
    color: #ffffff !important;
}

/* Selected option background */
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected {
    background-color: #eff6ff !important; /* blue-50 */
    color: #1e40af !important; /* blue-800 */
}

/* ==================== DARK MODE OVERRIDES ==================== */

.dark .select2-container--default .select2-selection--single {
    background-color: #09090b !important;
    border: 1px solid #27272a !important; /* zinc-800 */
}

/* Focused / open in dark mode */
.dark
    .select2-container--default.select2-container--focus
    .select2-selection--single,
.dark
    .select2-container--default.select2-container--open
    .select2-selection--single {
    border-color: #a855f7 !important; /* purple-500 */
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2) !important;
}

/* Rendered text in dark mode */
.dark
    .select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    color: #f4f4f5 !important; /* zinc-100 */
}

.dark
    .select2-container--default
    .select2-selection--single
    .select2-selection__placeholder {
    color: #71717a !important; /* zinc-500 */
}

/* Dropdown Container in dark mode */
.dark .select2-dropdown {
    background-color: #09090b !important;
    border: 1px solid #27272a !important;
    box-shadow:
        0 10px 15px -3px rgba(0, 0, 0, 0.5),
        0 4px 6px -2px rgba(0, 0, 0, 0.5) !important;
}

/* Search Box Inside Dropdown in dark mode */
.dark
    .select2-container--default
    .select2-search--dropdown
    .select2-search__field {
    background-color: #18181b !important; /* zinc-900 */
    border: 1px solid #27272a !important;
    color: #f4f4f5 !important;
}

.dark
    .select2-container--default
    .select2-search--dropdown
    .select2-search__field:focus {
    border-color: #a855f7 !important;
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2) !important;
}

/* Options/Results in dark mode */
.dark .select2-container--default .select2-results__option {
    color: #d4d4d8 !important; /* zinc-300 */
    background-color: transparent !important;
}

/* Highlighted option (hover state) in dark mode */
.dark
    .select2-container--default
    .select2-results__option--highlighted[aria-selected],
.dark
    .select2-container--default
    .select2-results__option--highlighted.select2-results__option--selected {
    background-color: #a855f7 !important; /* purple-500 */
    color: #ffffff !important;
}

/* Selected option background in dark mode */
.dark
    .select2-container--default
    .select2-results__option[aria-selected="true"],
.dark .select2-container--default .select2-results__option--selected {
    background-color: rgba(
        168,
        85,
        247,
        0.25
    ) !important; /* purple transparent */
    color: #e9d5ff !important; /* purple-200 */
}