/* Dark Mode Styles */


/* Root variables for dark mode */

:root {
    --dark-bg-primary: #111827;
    --dark-bg-secondary: #1f2937;
    --dark-bg-tertiary: #374151;
    --dark-text-primary: #ffffff;
    --dark-text-secondary: #e5e7eb;
    --dark-text-muted: #9ca3af;
    --dark-border: #374151;
    --dark-accent: #822c95;
}


/* Dark theme body */

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-tertiary), var(--dark-bg-tertiary)) !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-tertiary), var(--dark-bg-tertiary)) !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-tertiary), var(--dark-bg-tertiary)) !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-tertiary), var(--dark-bg-tertiary)) !important;
    border-color: var(--dark-border) !important;
}


/* Dark mode text color for specific text classes */

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


/* Universal dark mode classes */

.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-tertiary) !important;
}

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

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


/* Colored backgrounds - light variants become darker in dark mode */

.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;
}


/* Border colors for colored backgrounds */

.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;
}


/* 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: #a855f7;
}


/* 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: var(--dark-text-secondary);
    border-color: transparent;
}

.dark-theme .sidebar-container .sidebar-button:hover {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
}

.dark-theme .sidebar-container .sidebar-button.active {
    background-color: var(--dark-accent);
    color: white;
}

.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: var(--dark-text-secondary);
    border-color: transparent;
}

.dark-sidebar .sidebar-button:hover {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
}

.dark-sidebar .sidebar-button.active {
    background-color: var(--dark-accent);
    color: white;
}

.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-tertiary) !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;
}

.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 */

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

.dark-theme .profile-menu .divide-y>div {
    border-color: var(--dark-border) !important;
}


/* 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: 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: 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;
    /* gray-800 */
    color: #ffffff !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: #e5e7eb !important;
    /* gray-200 */
}


/* 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-tertiary) !important;
    /* gray-700 - slightly lighter than container */
    color: #ffffff !important;
}

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


/* Material Symbols icons with dark mode support */


/* Default Material Symbols icon color in dark mode - use gray-300 for visibility */

.dark-theme .material-symbols-outlined {
    color: #d1d5db;
    /* gray-300 */
}


/* Override color classes to work with dark theme */

.dark-theme .material-symbols-outlined.text-gray-600,
.dark-theme .material-symbols-outlined.text-gray-700,
.dark-theme .material-symbols-outlined.text-gray-800,
.dark-theme .material-symbols-outlined.text-gray-900 {
    color: #d1d5db;
    /* gray-300 */
}

.dark-theme .material-symbols-outlined.text-gray-500,
.dark-theme .material-symbols-outlined.text-gray-400 {
    color: #9ca3af;
    /* gray-400 */
}


/* Colored icons get lighter variants in dark mode */

.dark-theme .material-symbols-outlined.text-blue-600 {
    color: #93c5fd;
    /* blue-300 */
}

.dark-theme .material-symbols-outlined.text-purple-600 {
    color: #c4b5fd;
    /* purple-300 */
}

.dark-theme .material-symbols-outlined.text-green-600 {
    color: #86efac;
    /* green-300 */
}

.dark-theme .material-symbols-outlined.text-yellow-600 {
    color: #fde047;
    /* yellow-300 */
}

.dark-theme .material-symbols-outlined.text-red-600 {
    color: #fca5a5;
    /* red-300 */
}

.dark-theme .material-symbols-outlined.text-orange-600 {
    color: #fdba74;
    /* orange-300 */
}


/* Icon containers hover states */

.dark-theme .material-symbols-outlined:hover {
    opacity: 0.8;
}


/* Sidebar icons */

.dark-theme .sidebar-button .material-symbols-outlined {
    color: #d1d5db;
    /* gray-300 */
}

.dark-theme .sidebar-button.active .material-symbols-outlined {
    color: var(--dark-accent);
    /* Purple accent for active state */
}


/* Notification, calendar, and action icons */

.dark-theme [onclick] .material-symbols-outlined,
.dark-theme [role="button"] .material-symbols-outlined {
    color: #d1d5db;
    /* gray-300 */
}


/* Inline styled icons with specific colors - Course Performance, Awareness Email, etc. */

.dark-theme .material-symbols-outlined[style*="color: #6E4FA2"],
.dark-theme .material-symbols-outlined[style*="color:#6E4FA2"],
.dark-theme .material-symbols-outlined[style*="color: #822c95"] {
    color: #c4b5fd !important;
    /* purple-300 */
}

.dark-theme .material-symbols-outlined[style*="color: #2E7D31"],
.dark-theme .material-symbols-outlined[style*="color:#2E7D31"] {
    color: #86efac !important;
    /* green-300 */
}

.dark-theme .material-symbols-outlined[style*="color: #0362F7"],
.dark-theme .material-symbols-outlined[style*="color:#0362F7"] {
    color: #93c5fd !important;
    /* blue-300 */
}

.dark-theme .material-symbols-outlined[style*="color: #BF2623"],
.dark-theme .material-symbols-outlined[style*="color:#BF2623"] {
    color: #fca5a5 !important;
    /* red-300 */
}

.dark-theme .material-symbols-outlined[style*="color: #FBC02D"],
.dark-theme .material-symbols-outlined[style*="color:#FBC02D"],
.dark-theme .material-symbols-outlined[style*="text-yellow-400"] {
    color: #fde047 !important;
    /* yellow-300 */
}

.dark-theme .material-symbols-outlined[style*="color: #5A3F85"],
.dark-theme .material-symbols-outlined[style*="color:#5A3F85"] {
    color: #a78bfa !important;
    /* purple-400 */
}


/* Icon buttons and containers should have dark backgrounds */

.dark-theme button:has(.material-symbols-outlined):not(.bg-red-600):not(.bg-blue-600):not(.bg-green-600):not(.bg-purple-600) {
    background-color: transparent;
}

.dark-theme button:has(.material-symbols-outlined):hover:not(.bg-red-600):not(.bg-blue-600):not(.bg-green-600):not(.bg-purple-600) {
    background-color: var(--dark-bg-tertiary);
}


/* 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;
}


/* Material Symbols in header-container must be white */

.dark-theme .header-container .material-symbols-outlined {
    color: #ffffff !important;
}

.dark-theme .header-container i.material-symbols-outlined {
    color: #ffffff !important;
}


/* Tab navigation icons in dark mode */

.dark-theme .border-b .material-symbols-outlined,
.dark-theme [class*="border"] .material-symbols-outlined {
    color: #ffffff !important;
}


/* Dark mode for sidebar icons and text */

.dark-theme .sidebar-container .material-symbols-outlined {
    color: #ffffff !important;
}

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

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

.dark-theme .sidebar-container .collapse-icon {
    color: #ffffff !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 #organization-tab .material-symbols-outlined {
    color: #ffffff !important;
}

.dark-theme #organization-tab .material-symbols-outlined:hover {
    color: #ffffff !important;
}


/* Dark mode for footer */

.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 {
    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;
}

.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-tertiary) !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-tertiary) !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: white;
}


/* Code blocks */

.dark-theme code,
.dark-theme pre {
    background-color: var(--dark-bg-tertiary) !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: #ffffff;
    fill: currentColor;
}


/* SVG icons in buttons */

.dark-theme button svg,
.dark-theme a svg {
    color: #ffffff;
}


/* Spinner/Loading indicators */

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


/* Tooltips */

.dark-theme .tooltip,
.dark-theme [role="tooltip"] {
    background-color: var(--dark-bg-tertiary) !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: #ffffff !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: #ffffff !important;
}


/* Progress bars */

.dark-theme .progress {
    background-color: var(--dark-bg-tertiary) !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-tertiary) !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: white !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-tertiary) !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-tertiary) !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-tertiary) !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-tertiary);
}


/* Rounded icon buttons */

.dark-theme .rounded-full:has(.material-symbols-outlined) {
    background-color: transparent;
}

.dark-theme .rounded-full:has(.material-symbols-outlined):hover {
    background-color: var(--dark-bg-tertiary) !important;
}


/* Icon wrappers with hover states */

.dark-theme button:has(> span.material-symbols-outlined):hover,
.dark-theme a:has(> span.material-symbols-outlined):hover {
    background-color: var(--dark-bg-tertiary);
}


/* Tab links and buttons with Material Symbols */

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


/* 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: white !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-tertiary) !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-tertiary) !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;
}