:root {
    --dark-bg-primary: #282e39;
    --dark-bg-secondary: #282e39;
    --dark-bg-tertiary: #282e39;
    --dark-text-primary: #ffffff;
    --dark-text-secondary: #e5e7eb;
    --dark-text-muted: #9ca3af;
    --dark-text-icon: #d1d5db;
    --dark-border: #374151;
    --dark-accent: #6E4FA2;
    --dark-accent-hover: #a855f7;
    --dark-white: #ffffff;
}

body.dark-theme {
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
}


/* Gradient backgrounds in dark mode */

.dark-theme .bg-gradient-to-r.from-blue-50.to-indigo-50 {
    background: linear-gradient(to right, var(--dark-bg-secondary), var(--dark-bg-secondary)) !important;
    border-color: var(--dark-border) !important;
}

.dark-theme .bg-gradient-to-r.from-orange-50.to-red-50 {
    background: linear-gradient(to right, var(--dark-bg-secondary), var(--dark-bg-secondary)) !important;
    border-color: var(--dark-border) !important;
}

.dark-theme .bg-gradient-to-r.from-purple-50.to-blue-50 {
    background: linear-gradient(to right, var(--dark-bg-secondary), var(--dark-bg-secondary)) !important;
    border-color: var(--dark-border) !important;
}

.dark-theme .bg-gradient-to-r.from-green-50.to-teal-50 {
    background: linear-gradient(to right, var(--dark-bg-secondary), var(--dark-bg-secondary)) !important;
    border-color: var(--dark-border) !important;
}

.dark-theme .text-\[#141524\] {
    color: #ffffff !important;
}

.dark-theme,
.dark-theme * {
    scrollbar-color: var(--dark-bg-tertiary) var(--dark-bg-secondary);
}


/* Background colors */

.dark-theme .bg-white {
    background-color: var(--dark-bg-primary) !important;
}

.dark-theme .bg-gray-50 {
    background-color: var(--dark-bg-secondary) !important;
}

.dark-theme .bg-gray-100 {
    background-color: var(--dark-bg-secondary) !important;
}

.dark-theme .bg-gray-200 {
    background-color: var(--dark-bg-secondary) !important;
}

.dark-theme .bg-blue-50,
.dark-theme .bg-indigo-50 {
    background-color: var(--dark-bg-tertiary) !important;
}

.dark-theme .bg-purple-50,
.dark-theme .bg-pink-50 {
    background-color: var(--dark-bg-tertiary) !important;
}

.dark-theme .bg-green-50,
.dark-theme .bg-teal-50,
.dark-theme .bg-emerald-50 {
    background-color: var(--dark-bg-tertiary) !important;
}

.dark-theme .bg-orange-50,
.dark-theme .bg-yellow-50,
.dark-theme .bg-amber-50 {
    background-color: var(--dark-bg-tertiary) !important;
}

.dark-theme .bg-red-50 {
    background-color: var(--dark-bg-tertiary) !important;
}

.dark-theme .border-blue-200,
.dark-theme .border-indigo-200 {
    border-color: var(--dark-border) !important;
}

.dark-theme .border-purple-200 {
    border-color: var(--dark-border) !important;
}

.dark-theme .border-green-200,
.dark-theme .border-teal-200,
.dark-theme .border-emerald-200 {
    border-color: var(--dark-border) !important;
}

.dark-theme .border-orange-200,
.dark-theme .border-yellow-200,
.dark-theme .border-amber-200 {
    border-color: var(--dark-border) !important;
}

.dark-theme .border-red-200 {
    border-color: var(--dark-border) !important;
}


/* Text colors */

.dark-theme .text-black {
    color: var(--dark-text-primary) !important;
}

.dark-theme .text-gray-500 {
    color: var(--dark-text-muted) !important;
}

.dark-theme .text-gray-600 {
    color: var(--dark-text-secondary) !important;
}

.dark-theme .text-gray-700 {
    color: var(--dark-text-primary) !important;
}

.dark-theme .text-gray-800 {
    color: var(--dark-text-primary) !important;
}

.dark-theme .text-gray-900 {
    color: var(--dark-text-primary) !important;
}

body:not(.dark-theme) .text-white {
    color: #ffffff !important;
    /* gray-900 */
}


/* Exception: Keep white text on purple/dark backgrounds - must override the general .text-white rule */

body:not(.dark-theme) [style*="6E4FA2"] .text-white,
body:not(.dark-theme) [style*="822C95"] .text-white,
body:not(.dark-theme) [style*="A256C3"] .text-white,
body:not(.dark-theme) [style*="background-color: #6E4FA2"] .text-white,
body:not(.dark-theme) [style*="background-color:#6E4FA2"] .text-white,
body:not(.dark-theme) [style*="background: #6E4FA2"] .text-white,
body:not(.dark-theme) [style*="background:#6E4FA2"] .text-white,
body:not(.dark-theme) [style*="background-color: #6E4FA2;"] .text-white,
body:not(.dark-theme) [style*="background-color:#6E4FA2;"] .text-white,
body:not(.dark-theme) div[style*="6E4FA2"] h3.text-white,
body:not(.dark-theme) div[style*="6E4FA2"] .text-white,
body:not(.dark-theme) div[style*="822C95"] h3.text-white,
body:not(.dark-theme) div[style*="822C95"] .text-white,
body:not(.dark-theme) div[style*="A256C3"] h3.text-white,
body:not(.dark-theme) div[style*="A256C3"] .text-white,
body:not(.dark-theme) [style*="6E4FA2"] h3.text-white,
body:not(.dark-theme) [style*="6E4FA2"] i.text-white,
body:not(.dark-theme) [style*="6E4FA2"] span.text-white {
    color: #ffffff !important;
}

body:not(.dark-theme) button.text-white[class*="bg-"],
body:not(.dark-theme) a.text-white[class*="bg-"],
body:not(.dark-theme) .btn.text-white,
body:not(.dark-theme) button.text-white.bg-blue-600,
body:not(.dark-theme) button.text-white.bg-blue-700,
body:not(.dark-theme) button.text-white.bg-purple-600,
body:not(.dark-theme) button.text-white.bg-purple-700,
body:not(.dark-theme) button.text-white.bg-red-600,
body:not(.dark-theme) button.text-white.bg-red-700,
body:not(.dark-theme) button.text-white.bg-green-600,
body:not(.dark-theme) button.text-white.bg-green-700,
body:not(.dark-theme) button.text-white.bg-indigo-600,
body:not(.dark-theme) button.text-white.bg-indigo-700,
body:not(.dark-theme) a.text-white.bg-blue-600,
body:not(.dark-theme) a.text-white.bg-blue-700,
body:not(.dark-theme) a.text-white.bg-purple-600,
body:not(.dark-theme) a.text-white.bg-purple-700,
body:not(.dark-theme) a.text-white.bg-red-600,
body:not(.dark-theme) a.text-white.bg-red-700,
body:not(.dark-theme) a.text-white.bg-green-600,
body:not(.dark-theme) a.text-white.bg-green-700,
body:not(.dark-theme) a.text-white.bg-indigo-600,
body:not(.dark-theme) a.text-white.bg-indigo-700 {
    color: #ffffff !important;
}

body:not(.dark-theme) [class*="bg-blue-"] .text-white,
body:not(.dark-theme) [class*="bg-purple-"] .text-white,
body:not(.dark-theme) [class*="bg-red-"] .text-white,
body:not(.dark-theme) [class*="bg-green-"] .text-white,
body:not(.dark-theme) [class*="bg-indigo-"] .text-white,
body:not(.dark-theme) [class*="bg-gray-900"] .text-white,
body:not(.dark-theme) [class*="bg-gray-800"] .text-white,
body:not(.dark-theme) [class*="bg-black"] .text-white {
    color: #ffffff !important;
}

body:not(.dark-theme) .login-page .text-white,
body:not(.dark-theme) .login-page button.text-white,
body:not(.dark-theme) .login-page .left-column .text-white {
    color: #ffffff !important;
}


/* Ensure white text on purple gradient backgrounds - must come after the general .text-white rule */

body:not(.dark-theme) [class*="bg-gradient"][class*="822C95"] .text-white,
body:not(.dark-theme) [class*="bg-gradient"][class*="A256C3"] .text-white,
body:not(.dark-theme) [class*="bg-gradient"][class*="from-purple"] .text-white,
body:not(.dark-theme) [class*="bg-gradient"][class*="to-purple"] .text-white,
body:not(.dark-theme) .text-white[class*="bg-gradient"][class*="822C95"],
body:not(.dark-theme) .text-white[class*="bg-gradient"][class*="A256C3"],
body:not(.dark-theme) .text-white[class*="bg-gradient"][class*="from-purple"],
body:not(.dark-theme) .text-white[class*="bg-gradient"][class*="to-purple"],
body:not(.dark-theme) a.text-white[class*="bg-gradient"][class*="822C95"],
body:not(.dark-theme) a.text-white[class*="bg-gradient"][class*="A256C3"],
body:not(.dark-theme) button.text-white[class*="bg-gradient"][class*="822C95"],
body:not(.dark-theme) button.text-white[class*="bg-gradient"][class*="A256C3"],
body:not(.dark-theme) [class*="bg-gradient-to-r"][class*="822C95"] .text-white,
body:not(.dark-theme) [class*="bg-gradient-to-r"][class*="A256C3"] .text-white,
body:not(.dark-theme) [class*="bg-gradient-to-br"][class*="purple"] .text-white {
    color: #ffffff !important;
}


/* Ensure white text on purple solid backgrounds (including inline styles) */

body:not(.dark-theme) [style*="background-color: #6E4FA2"] .text-white,
body:not(.dark-theme) [style*="background-color:#6E4FA2"] .text-white,
body:not(.dark-theme) [style*="background: #6E4FA2"] .text-white,
body:not(.dark-theme) [style*="background:#6E4FA2"] .text-white,
body:not(.dark-theme) [style*="822C95"] .text-white,
body:not(.dark-theme) [style*="A256C3"] .text-white,
body:not(.dark-theme) [style*="6E4FA2"] .text-white,
body:not(.dark-theme) [style*="background-color: #6E4FA2"].text-white,
body:not(.dark-theme) [style*="background-color:#6E4FA2"].text-white,
body:not(.dark-theme) [style*="background: #6E4FA2"].text-white,
body:not(.dark-theme) [style*="background:#6E4FA2"].text-white,
body:not(.dark-theme) [style*="822C95"].text-white,
body:not(.dark-theme) [style*="A256C3"].text-white,
body:not(.dark-theme) [style*="6E4FA2"].text-white,
body:not(.dark-theme) h3.text-white[style*="6E4FA2"],
body:not(.dark-theme) h3.text-white[style*="822C95"],
body:not(.dark-theme) h3.text-white[style*="A256C3"],
body:not(.dark-theme) [style*="6E4FA2"] h3.text-white,
body:not(.dark-theme) [style*="822C95"] h3.text-white,
body:not(.dark-theme) [style*="A256C3"] h3.text-white,
body:not(.dark-theme) [style*="6E4FA2"] .text-white,
body:not(.dark-theme) [style*="822C95"] .text-white,
body:not(.dark-theme) [style*="A256C3"] .text-white {
    color: #ffffff !important;
}

.dark-theme .text-white {
    color: var(--dark-text-primary) !important;
}


/* Button classes - btn-primary text and icons should be white */

body:not(.dark-theme) .btn-primary,
body:not(.dark-theme) button.btn-primary,
body:not(.dark-theme) a.btn-primary {
    color: #ffffff !important;
}


/* All text elements inside btn-primary should be white in light mode */

body:not(.dark-theme) .btn-primary *:not(.material-symbols-outlined):not(i),
body:not(.dark-theme) button.btn-primary *:not(.material-symbols-outlined):not(i),
body:not(.dark-theme) a.btn-primary *:not(.material-symbols-outlined):not(i) {
    color: #ffffff !important;
}


/* Specific overrides for common text color classes */

body:not(.dark-theme) .btn-primary .text-gray-700,
body:not(.dark-theme) .btn-primary .text-gray-900,
body:not(.dark-theme) .btn-primary .text-gray-600,
body:not(.dark-theme) .btn-primary .text-gray-800,
body:not(.dark-theme) .btn-primary .text-black,
body:not(.dark-theme) button.btn-primary .text-gray-700,
body:not(.dark-theme) button.btn-primary .text-gray-900,
body:not(.dark-theme) button.btn-primary .text-gray-600,
body:not(.dark-theme) button.btn-primary .text-gray-800,
body:not(.dark-theme) button.btn-primary .text-black,
body:not(.dark-theme) a.btn-primary .text-gray-700,
body:not(.dark-theme) a.btn-primary .text-gray-900,
body:not(.dark-theme) a.btn-primary .text-gray-600,
body:not(.dark-theme) a.btn-primary .text-gray-800,
body:not(.dark-theme) a.btn-primary .text-black {
    color: #ffffff !important;
}

.btn-primary .material-symbols-outlined,
.btn-primary i.material-symbols-outlined,
button.btn-primary .material-symbols-outlined,
a.btn-primary .material-symbols-outlined {
    color: #ffffff !important;
}

.btn-secondary .material-symbols-outlined,
.btn-secondary i.material-symbols-outlined,
button.btn-secondary .material-symbols-outlined,
a.btn-secondary .material-symbols-outlined {
    color: #ffffff !important;
}


/* Keep white text on login page sign-in button and left sidebar in both modes */

.dark-theme .login-page button[type="submit"].text-white,
.dark-theme .login-page button.text-white,
.dark-theme .login-page button[type="submit"],
.dark-theme .login-page button[type="submit"].text-gray-900,
.dark-theme .login-page .left-column .text-white,
.dark-theme .login-page .left-column h4.text-white,
.dark-theme .login-page .left-column p.text-white {
    color: #ffffff !important;
}


/* Override text-gray-900 to white in left sidebar even in dark mode */

.dark-theme .login-page .left-column .text-gray-900,
.dark-theme .login-page .left-column h4.text-gray-900,
.dark-theme .login-page .left-column .carousel-slide h4.text-gray-900,
.dark-theme .login-page .left-column .carousel-slide .text-gray-900 {
    color: #ffffff !important;
}


/* Placeholder color consistency */

.dark-theme .placeholder-gray-400::placeholder {
    color: var(--dark-text-muted) !important;
}


/* Consistent dark backgrounds */

.dark-theme .bg-gray-700,
.dark-theme .bg-gray-800,
.dark-theme .bg-gray-900 {
    background-color: var(--dark-bg-secondary) !important;
}


/* Consistent hover backgrounds in dark mode */

.dark-theme .hover\:bg-gray-700:hover,
.dark-theme .hover\:bg-gray-600:hover,
.dark-theme .hover\:bg-gray-100:hover {
    background-color: var(--dark-bg-tertiary) !important;
}


/* Consistent borders in dark mode */

.dark-theme .border-gray-600,
.dark-theme .border-gray-700 {
    border-color: var(--dark-border) !important;
}


/* Headings */

.dark-theme h1,
.dark-theme h2,
.dark-theme h3,
.dark-theme h4,
.dark-theme h5,
.dark-theme h6 {
    color: var(--dark-text-primary) !important;
}


/* Paragraphs */

.dark-theme p {
    color: var(--dark-text-secondary);
}


/* Links */

.dark-theme a:not(.btn):not([class*="bg-"]) {
    color: var(--dark-accent);
}

.dark-theme a:not(.btn):not([class*="bg-"]):hover {
    color: var(--dark-accent-hover);
}


/* Dividers */

.dark-theme hr {
    border-color: var(--dark-border) !important;
}

.dark-theme .divide-gray-200>*+* {
    border-color: var(--dark-border) !important;
}


/* Dark sidebar - sidebar-container */

.dark-theme .sidebar-container {
    background-color: var(--dark-bg-secondary) !important;
    border-right: 1px solid var(--dark-border);
}

[dir="rtl"] .dark-theme .sidebar-container {
    border-right: none;
    border-left: 1px solid var(--dark-border);
}

.dark-theme .sidebar-container .sidebar-button {
    color: #ffffff !important;
    border-color: transparent;
}

.dark-theme .sidebar-container .sidebar-button span {
    color: #ffffff !important;
}

.dark-theme .sidebar-container .sidebar-button:hover {
    background-color: var(--dark-bg-tertiary);
    color: #ffffff !important;
}

.dark-theme .sidebar-container .sidebar-button:hover span {
    color: #ffffff !important;
}

.dark-theme .sidebar-container .sidebar-button.active {
    background-color: var(--dark-accent);
    color: #ffffff !important;
}

.dark-theme .sidebar-container .sidebar-vertical-text {
    color: var(--dark-text-muted);
}

.dark-theme .sidebar-container .community-text {
    color: var(--dark-text-primary);
}

.dark-theme .sidebar-container .community-desc {
    color: var(--dark-text-muted);
}

.dark-theme .sidebar-container .sidebar-horizontal-line {
    border-color: var(--dark-border);
}

.dark-theme .sidebar-container .sidebar-horizontal-line2 {
    border-color: var(--dark-border);
}

.dark-theme .sidebar-container .sidebar-divider {
    border-color: var(--dark-border);
}


/* Legacy dark-sidebar class for backward compatibility */

.dark-sidebar {
    background-color: var(--dark-bg-secondary) !important;
    border-right: 1px solid var(--dark-border);
}

.dark-sidebar .sidebar-button {
    color: #ffffff !important;
    border-color: transparent;
}

.dark-sidebar .sidebar-button span {
    color: #ffffff !important;
}

.dark-sidebar .sidebar-button:hover {
    background-color: var(--dark-bg-secondary);
    color: #ffffff !important;
}

.dark-sidebar .sidebar-button:hover span {
    color: #ffffff !important;
}

.dark-sidebar .sidebar-button.active {
    background-color: var(--dark-accent);
    color: #ffffff !important;
}

.dark-sidebar .sidebar-button.active span {
    color: #ffffff !important;
}

.dark-sidebar .sidebar-vertical-text {
    color: var(--dark-text-muted);
}

.dark-sidebar .community-text {
    color: var(--dark-text-primary);
}

.dark-sidebar .community-desc {
    color: var(--dark-text-muted);
}

.dark-sidebar .sidebar-horizontal-line {
    border-color: var(--dark-border);
}

.dark-sidebar .sidebar-divider {
    border-color: var(--dark-border);
}


/* Dark content area */

.dark-content {
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
}


/* Dark cards */

.dark-theme .card,
.dark-theme .bg-white {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}


/* Dark forms */

.dark-theme input,
.dark-theme textarea,
.dark-theme select {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

.dark-theme input::placeholder,
.dark-theme textarea::placeholder {
    color: var(--dark-text-muted) !important;
}


/* Textarea specific styling */

.dark-theme textarea {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}


/* Form input classes in dark mode */

.dark-theme input[type="text"],
.dark-theme input[type="email"],
.dark-theme input[type="password"],
.dark-theme input[type="number"],
.dark-theme input[type="date"],
.dark-theme input[type="time"],
.dark-theme textarea {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

.dark-theme input[type="text"]:focus,
.dark-theme input[type="email"]:focus,
.dark-theme input[type="password"]:focus,
.dark-theme input[type="number"]:focus,
.dark-theme input[type="date"]:focus,
.dark-theme textarea:focus {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-accent) !important;
}


/* Override any text color classes on textarea in dark mode */

.dark-theme textarea.text-gray-700,
.dark-theme textarea.text-gray-800,
.dark-theme textarea.text-gray-900,
.dark-theme textarea.text-black {
    color: var(--dark-text-primary) !important;
}


/* Ensure specific textarea elements get proper styling */

.dark-theme textarea#overview,
.dark-theme textarea[name="overview"] {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

.dark-theme textarea#overview:focus,
.dark-theme textarea[name="overview"]:focus {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-accent) !important;
}


/* Dark buttons */

.dark-theme .btn-primary {
    background-color: var(--dark-accent) !important;
    border-color: var(--dark-accent) !important;
    color: #ffffff !important;
}

.dark-theme .btn-secondary {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}


/* Dark modals */

.dark-theme .modal-content {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

.dark-theme .modal-header {
    border-bottom-color: var(--dark-border) !important;
}

.dark-theme .modal-footer {
    border-top-color: var(--dark-border) !important;
}


/* Dark tables */

.dark-theme table {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

.dark-theme th {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

.dark-theme td {
    border-color: var(--dark-border) !important;
}

.dark-theme tr:hover {
    background-color: var(--dark-bg-tertiary) !important;
}


/* Dark alerts */

.dark-theme .alert {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}


/* Dark navigation */

.dark-theme nav {
    background-color: var(--dark-bg-secondary) !important;
    border-bottom-color: var(--dark-border) !important;
}


/* Dark search bar */

.dark-theme .search-nav-bar {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
}

.dark-theme .search-nav-bar input {
    background-color: transparent !important;
    color: var(--dark-text-primary) !important;
}

.dark-theme .search-nav-bar input::placeholder {
    color: var(--dark-text-muted) !important;
}


/* Dark profile menu */


/* Profile menu dark mode styling handled by Tailwind dark: classes */


/* Dark dropdown menus */

.dark-theme .dropdown-menu {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

.dark-theme .dropdown-menu button,
.dark-theme .dropdown-menu a {
    color: var(--dark-text-secondary) !important;
}

.dark-theme .dropdown-menu button:hover,
.dark-theme .dropdown-menu a:hover {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
}


/* Dark theme toggle switch */

#theme-switch+label {
    transition: background-color 0.2s ease-in-out;
}

#theme-switch+label span {
    transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

#theme-switch:checked+label {
    background-color: var(--dark-accent) !important;
}

#theme-switch:checked+label span {
    transform: translateX(1rem);
    background-color: var(--dark-white) !important;
}

.dark-theme #theme-switch:checked+label {
    background-color: var(--dark-accent) !important;
}

.dark-theme #theme-switch:checked+label span {
    transform: translateX(1rem);
    background-color: var(--dark-white) !important;
}


/* Dark scrollbars */

.dark-theme ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dark-theme ::-webkit-scrollbar-track {
    background-color: var(--dark-bg-secondary);
}

.dark-theme ::-webkit-scrollbar-thumb {
    background-color: var(--dark-bg-tertiary);
    border-radius: 4px;
}

.dark-theme ::-webkit-scrollbar-thumb:hover {
    background-color: var(--dark-text-muted);
}


/* Dark text colors */

.dark-theme .text-gray-600 {
    color: var(--dark-text-secondary) !important;
}

.dark-theme .text-gray-700 {
    color: var(--dark-text-primary) !important;
}

.dark-theme .text-gray-800 {
    color: var(--dark-text-primary) !important;
}

.dark-theme .text-gray-900 {
    color: var(--dark-text-primary) !important;
}


/* Dark borders */

.dark-theme .border-gray-200 {
    border-color: var(--dark-border) !important;
}

.dark-theme .border-gray-300 {
    border-color: var(--dark-border) !important;
}

.dark-theme input.border-gray-300,
.dark-theme textarea.border-gray-300,
.dark-theme select.border-gray-300 {
    border-color: var(--dark-border) !important;
}


/* Dark backgrounds */

.dark-theme .bg-gray-50 {
    background-color: var(--dark-bg-tertiary) !important;
}

.dark-theme .bg-gray-100 {
    background-color: var(--dark-bg-tertiary) !important;
}


/* Transition for smooth theme switching */

* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}


/* ============================================= */


/* MATERIAL SYMBOLS - UNIVERSAL WHITE IN DARK MODE */


/* ============================================= */


/* Filter buttons container in dark mode */

.dark-theme .bg-\[\#FAF9F8\] {
    background-color: var(--dark-bg-secondary) !important;
    /* gray-800 */
}


/* Dropdown left sections (Category, Status, Language) in dark mode */

.dark-theme .bg-\[\#F8F7F6\] {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}


/* Filter buttons in dark mode - override inline styles */

.dark-theme button[name="enrollment"],
.dark-theme button[type="submit"][name="enrollment"],
.dark-theme button[type="submit"][name="category"],
.dark-theme button[type="submit"][name="status"],
.dark-theme button[type="submit"][name="language"] {
    color: var(--dark-text-secondary) !important;
}


/* Active/selected filter buttons should have dark background */

.dark-theme button[name="enrollment"].smallshadow,
.dark-theme button[name="enrollment"][style*="font-weight: 700"],
.dark-theme #all-btn.smallshadow,
.dark-theme #enrolled-btn.smallshadow,
.dark-theme #assigned-btn.smallshadow {
    background-color: var(--dark-bg-secondary) !important;
    /* gray-700 - slightly lighter than container */
    color: #ffffff !important;
}

.dark-theme button[name="enrollment"]:hover {
    background-color: var(--dark-bg-secondary) !important;
}

.dark-theme .sidebar-button span {
    color: #ffffff !important;
}

.dark-theme .sidebar-button {
    color: #ffffff !important;
}

.dark-theme .sidebar-button.active span {
    color: #ffffff !important;
}

.dark-theme .sidebar-button.active {
    color: #ffffff !important;
}


/* Dark mode specific adjustments for alerts page */

.dark-theme .alert-card {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

.dark-theme .alert-header {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
}

.dark-theme .alert-content {
    color: var(--dark-text-secondary) !important;
}


/* Dark mode for learning paths and CMS */

.dark-theme .learning-path-card {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

.dark-theme .course-card {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}


/* Dark mode for page headers */

.dark-theme .page-header {
    background-color: var(--dark-bg-secondary) !important;
    border-bottom-color: var(--dark-border) !important;
}

.dark-theme .page-header .header-container {
    background-color: var(--dark-bg-secondary) !important;
}

.dark-theme .page-header h1 {
    color: var(--dark-text-primary) !important;
}

.dark-theme .page-header h2,
.dark-theme .page-header h3,
.dark-theme .page-header h4 {
    color: var(--dark-text-primary) !important;
}

.dark-theme .page-header p {
    color: var(--dark-text-secondary) !important;
}

.dark-theme .header-container {
    background-color: var(--dark-bg-secondary) !important;
}

.dark-theme .sidebar-container .sidebar-button span {
    color: #ffffff !important;
}

.dark-theme .sidebar-container .sidebar-button.active span {
    color: #ffffff !important;
}

.dark-theme .sidebar-container .sidebar-button.active {
    color: #ffffff !important;
}

.dark-theme .sidebar-container .collapse-icon {
    color: var(--dark-text-primary) !important;
}

.dark-theme .sidebar-top-section {
    background-color: var(--dark-bg-secondary);
}

.dark-theme .main-logo {
    background-color: var(--dark-bg-secondary);
}


/* Dark mode for organization tab */

.dark-theme #organization-tab {
    background-color: var(--dark-bg-secondary);
}

.dark-theme .page-content .footer,
.dark-theme .content .footer,
.dark-theme .page-content footer,
.dark-theme .content footer {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.dark-theme .footer {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-secondary) !important;
    border-top-color: var(--dark-border) !important;
}

.dark-theme .page-content .footer {
    display: none !important;
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-secondary) !important;
    border-top-color: var(--dark-border) !important;
}

.dark-theme .footer a {
    color: var(--dark-text-secondary) !important;
}

.dark-theme .footer a:hover {
    color: var(--dark-text-primary) !important;
}

.dark-theme .footer .text-primary {
    color: var(--dark-text-secondary) !important;
}


/* Profile menu - ensure dark styling in dark mode */

.dark-theme .profile-menu {
    background-color: var(--dark-bg-primary) !important;
    border-color: var(--dark-border) !important;
}

.dark-theme .profile-menu>div,
.dark-theme .profile-menu .bg-white {
    background-color: var(--dark-bg-primary) !important;
}

.dark-theme .profile-menu .bg-white.dark\:bg-gray-900,
.dark-theme .profile-menu [class*="bg-white"] {
    background-color: var(--dark-bg-primary) !important;
}

.dark-theme .profile-menu .text-gray-700,
.dark-theme .profile-menu .text-gray-800 {
    color: var(--dark-text-primary) !important;
}

.dark-theme .profile-menu .text-gray-600 {
    color: var(--dark-text-secondary) !important;
}

.dark-theme .profile-menu .hover\:bg-gray-50:hover,
.dark-theme .profile-menu .hover\:bg-gray-100:hover {
    background-color: var(--dark-bg-secondary) !important;
}

.dark-theme .profile-menu .border-gray-100,
.dark-theme .profile-menu .border-gray-700 {
    border-color: var(--dark-border) !important;
}

.dark-theme .profile-menu .divide-gray-100,
.dark-theme .profile-menu .divide-gray-700 {
    border-color: var(--dark-border) !important;
}

.dark-theme .profile-menu .footer {
    color: var(--dark-text-secondary) !important;
}

.dark-theme .profile-menu .footer a {
    color: var(--dark-text-secondary) !important;
}

.dark-theme .profile-menu .footer a:hover {
    color: var(--dark-text-primary) !important;
}


/* ========================================= */


/* COMPREHENSIVE DARK MODE FOR ALL ELEMENTS */


/* ========================================= */


/* Lists */

.dark-theme ul,
.dark-theme ol {
    color: var(--dark-text-secondary);
}

.dark-theme li {
    color: var(--dark-text-secondary);
}


/* Badges and labels */

.dark-theme .badge,
.dark-theme .label,
.dark-theme span.bg-gray-100,
.dark-theme span.bg-gray-200 {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}


/* Hover states */

.dark-theme .hover\:bg-gray-50:hover,
.dark-theme .hover\:bg-gray-100:hover {
    background-color: var(--dark-bg-secondary) !important;
}

.dark-theme .hover\:bg-gray-200:hover {
    background-color: var(--dark-bg-secondary) !important;
}

.dark-theme .hover\:text-gray-700:hover,
.dark-theme .hover\:text-gray-800:hover,
.dark-theme .hover\:text-gray-900:hover {
    color: var(--dark-text-primary) !important;
}


/* Focus states */

.dark-theme *:focus {
    outline-color: var(--dark-accent) !important;
}


/* Placeholder text */

.dark-theme ::placeholder {
    color: var(--dark-text-muted) !important;
    opacity: 0.7;
}


/* Selection */

.dark-theme ::selection {
    background-color: var(--dark-accent);
    color: var(--dark-text-primary);
}


/* Code blocks */

.dark-theme code,
.dark-theme pre {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}


/* Blockquotes */

.dark-theme blockquote {
    border-left-color: var(--dark-border) !important;
    color: var(--dark-text-secondary) !important;
}


/* Images with borders */

.dark-theme img.border,
.dark-theme img[class*="border"] {
    border-color: var(--dark-border) !important;
}


/* SVG icons */

.dark-theme svg {
    color: var(--dark-text-primary);
    fill: currentColor;
}


/* SVG icons in buttons */

.dark-theme button svg,
.dark-theme a svg {
    color: var(--dark-text-primary);
}


/* Spinner/Loading indicators */

.dark-theme .spinner,
.dark-theme .loading {
    border-color: var(--dark-border) var(--dark-border) var(--dark-border) var(--dark-accent) !important;
}


/* Loading overlay background - ensure white in light mode, dark in dark mode */

body:not(.dark-theme) #loading-overlay {
    background-color: #ffffff !important;
}

.dark-theme #loading-overlay {
    background-color: #282e39 !important;
}


/* Loading spinners with gray borders - light in light mode, dark in dark mode */


/* Handle common Tailwind spinner patterns: border-b-2 border-gray-900, etc. */


/* Light mode: make dark gray borders lighter - increased specificity */

html body:not(.dark-theme) .animate-spin.border-gray-900,
html body:not(.dark-theme) .animate-spin.border-gray-800,
html body:not(.dark-theme) .animate-spin.border-gray-700,
html body:not(.dark-theme) .animate-spin.border-gray-600,
html body:not(.dark-theme) .animate-spin[class*="border-gray-900"],
html body:not(.dark-theme) .animate-spin[class*="border-gray-800"],
html body:not(.dark-theme) .animate-spin[class*="border-gray-700"],
html body:not(.dark-theme) .animate-spin[class*="border-gray-600"],
html body:not(.dark-theme) [class*="animate-spin"].border-gray-900,
html body:not(.dark-theme) [class*="animate-spin"].border-gray-800,
html body:not(.dark-theme) [class*="animate-spin"].border-gray-700,
html body:not(.dark-theme) [class*="animate-spin"].border-gray-600,
html body:not(.dark-theme) [class*="animate-spin"][class*="border-gray-900"],
html body:not(.dark-theme) [class*="animate-spin"][class*="border-gray-800"],
html body:not(.dark-theme) [class*="animate-spin"][class*="border-gray-700"],
html body:not(.dark-theme) [class*="animate-spin"][class*="border-gray-600"] {
    border-color: #d1d5db !important;
    /* gray-300 for light mode */
    border-bottom-color: #d1d5db !important;
    border-top-color: #d1d5db !important;
    border-left-color: #d1d5db !important;
    border-right-color: #d1d5db !important;
}


/* Dark mode: make gray borders use light color - increased specificity */

html body.dark-theme .animate-spin.border-gray-900,
html body.dark-theme .animate-spin.border-gray-800,
html body.dark-theme .animate-spin.border-gray-700,
html body.dark-theme .animate-spin.border-gray-600,
html body.dark-theme .animate-spin[class*="border-gray-900"],
html body.dark-theme .animate-spin[class*="border-gray-800"],
html body.dark-theme .animate-spin[class*="border-gray-700"],
html body.dark-theme .animate-spin[class*="border-gray-600"],
html body.dark-theme [class*="animate-spin"].border-gray-900,
html body.dark-theme [class*="animate-spin"].border-gray-800,
html body.dark-theme [class*="animate-spin"].border-gray-700,
html body.dark-theme [class*="animate-spin"].border-gray-600,
html body.dark-theme [class*="animate-spin"][class*="border-gray-900"],
html body.dark-theme [class*="animate-spin"][class*="border-gray-800"],
html body.dark-theme [class*="animate-spin"][class*="border-gray-700"],
html body.dark-theme [class*="animate-spin"][class*="border-gray-600"] {
    border-color: var(--dark-text-primary) !important;
    /* white/light for dark mode */
    border-bottom-color: var(--dark-text-primary) !important;
    border-top-color: var(--dark-text-primary) !important;
    border-left-color: var(--dark-text-primary) !important;
    border-right-color: var(--dark-text-primary) !important;
}


/* Tooltips */

.dark-theme .tooltip,
.dark-theme [role="tooltip"] {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}


/* Shadows - reduce shadow intensity in dark mode */

.dark-theme .shadow,
.dark-theme .shadow-sm,
.dark-theme .shadow-md,
.dark-theme .shadow-lg,
.dark-theme .shadow-xl {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}


/* Tabs */

.dark-theme .nav-tab,
.dark-theme [role="tab"] {
    color: var(--dark-text-secondary);
    border-color: var(--dark-border);
}

.dark-theme .nav-tab.active,
.dark-theme .nav-tab.activenav,
.dark-theme [role="tab"][aria-selected="true"] {
    color: var(--dark-text-primary) !important;
    background-color: var(--dark-accent);
    border-color: var(--dark-accent);
}


/* Ensure active tab text is always white in both light and dark mode */

.activenav {
    color: var(--dark-white) !important;
}


/* Progress bars */

.dark-theme .progress {
    background-color: var(--dark-bg-secondary) !important;
}

.dark-theme .progress-bar {
    background-color: var(--dark-accent) !important;
}


/* Breadcrumbs */

.dark-theme .breadcrumb {
    background-color: var(--dark-bg-secondary) !important;
}

.dark-theme .breadcrumb-item {
    color: var(--dark-text-secondary);
}

.dark-theme .breadcrumb-item.active {
    color: var(--dark-text-primary);
}


/* Pagination */

.dark-theme .pagination .page-link {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-secondary) !important;
}

.dark-theme .pagination .page-link:hover {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

.dark-theme .pagination .page-item.active .page-link {
    background-color: var(--dark-accent) !important;
    border-color: var(--dark-accent) !important;
    color: var(--dark-text-primary) !important;
}


/* Accordions */

.dark-theme .accordion-item {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

.dark-theme .accordion-button {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}

.dark-theme .accordion-button:not(.collapsed) {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}


/* List groups */

.dark-theme .list-group-item {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

.dark-theme .list-group-item:hover {
    background-color: var(--dark-bg-secondary) !important;
}

.dark-theme .list-group-item.active {
    background-color: var(--dark-accent) !important;
    border-color: var(--dark-accent) !important;
}


/* Grid and container elements */

.dark-theme .container,
.dark-theme .container-fluid,
.dark-theme .row {
    color: var(--dark-text-primary);
}


/* Specific component styles */

.dark-theme .card-header,
.dark-theme .card-footer {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

.dark-theme .card-body {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
}


/* Empty states */

.dark-theme .empty-state,
.dark-theme .no-results {
    color: var(--dark-text-muted);
}


/* Status indicators */

.dark-theme .status-active {
    color: #10b981 !important;
}

.dark-theme .status-inactive {
    color: #ef4444 !important;
}

.dark-theme .status-pending {
    color: #f59e0b !important;
}


/* User avatars and profile images */

.dark-theme .avatar,
.dark-theme .profile-image {
    border-color: var(--dark-border) !important;
}


/* Icon containers - dark backgrounds */

.dark-theme .icon-container,
.dark-theme [class*="icon-"] {
    background-color: var(--dark-bg-secondary);
}


/* Status badge containers in dark mode */

.dark-theme [class*="bg-\[#"] {
    opacity: 0.9;
}


/* Notification badges */

.dark-theme .notification-badge,
.dark-theme .badge-notification {
    background-color: #ef4444 !important;
    color: var(--dark-text-primary) !important;
}


/* Search components */

.dark-theme .search-results {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

.dark-theme .search-result-item {
    border-color: var(--dark-border) !important;
}

.dark-theme .search-result-item:hover {
    background-color: var(--dark-bg-secondary) !important;
}


/* Date pickers */

.dark-theme .datepicker,
.dark-theme .calendar-popup {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}


/* Tags */

.dark-theme .tag {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}


/* Stats and metrics */

.dark-theme .stat-card,
.dark-theme .metric-card {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

.dark-theme .stat-value,
.dark-theme .metric-value {
    color: var(--dark-text-primary) !important;
}

.dark-theme .stat-label,
.dark-theme .metric-label {
    color: var(--dark-text-muted) !important;
}