/* Improved Dark Mode Styles for UniLearn */

/* Dark mode color variables - True Dark Theme */
:root.dark {
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --bg-tertiary: #151515;
    --bg-card: #1a1a1a;
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --text-muted: #a0a0a0;
    --border-color: #2a2a2a;
    --accent-blue: #3b82f6;
    --accent-blue-hover: #60a5fa;
    --accent-purple: #818cf8;
}

/* Smooth color transitions for dark mode */
.dark {
    color-scheme: dark;
}

/* Body background - softer dark */
.dark body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Card backgrounds - true dark cards */
.dark .bg-white {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

/* Secondary backgrounds */
.dark .bg-gray-50,
.dark .bg-gray-100 {
    background-color: var(--bg-secondary) !important;
}

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

/* Text colors - softer whites */
.dark .text-gray-900,
.dark .text-gray-800 {
    color: var(--text-primary) !important;
}

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

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

/* Borders - subtle */
.dark .border-gray-200,
.dark .border-gray-300 {
    border-color: var(--border-color) !important;
}

/* Navigation - true black with slight transparency */
.dark nav {
    background-color: rgba(0, 0, 0, 0.95) !important;
    border-bottom-color: var(--border-color) !important;
    backdrop-filter: blur(10px) !important;
}

/* Buttons - toned down blues */
.dark .bg-blue-600 {
    background-color: var(--accent-blue) !important;
}

.dark .bg-blue-600:hover {
    background-color: var(--accent-blue-hover) !important;
}

/* Links and interactive elements - exclude navigation and footer links */
.dark a:not(.bg-blue-600):not(.nav-link):not([href="/cart"]):not(#dashboard-button):not(#logout-button):not([href="/payment"]):not(footer a) {
    color: var(--accent-blue) !important;
}

.dark a:not(.bg-blue-600):not(.nav-link):not([href="/cart"]):not(#dashboard-button):not(#logout-button):not([href="/payment"]):not(footer a):hover {
    color: var(--accent-blue-hover) !important;
}

/* Footer links - ensure proper dark mode colors */
.dark footer a {
    color: inherit !important;
}

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

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

/* Hover states - subtle */
.dark .hover\:bg-gray-50:hover,
.dark .hover\:bg-gray-100:hover {
    background-color: var(--bg-tertiary) !important;
}

/* Cards with shadow - reduce intensity */
.dark .shadow-lg,
.dark .shadow-xl {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}

/* Banner and hero sections - pure black gradient */
.dark .dark-blue-gradient {
    background: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #151515 100%) !important;
}

/* Featured sections with subtle accents */
.dark .featured-banner {
    background-color: #0a0a0a !important;
}

.dark .featured-banner::after {
    background: linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 100%) !important;
}

/* Badge and tag colors - muted */
.dark .bg-blue-50 {
    background-color: rgba(99, 102, 241, 0.15) !important;
    color: #a5b4fc !important;
}

.dark .bg-blue-100 {
    background-color: rgba(99, 102, 241, 0.2) !important;
}

.dark .text-blue-600 {
    color: #a5b4fc !important;
}

/* Status colors - softer versions */
.dark .bg-green-50 {
    background-color: rgba(34, 197, 94, 0.15) !important;
    color: #86efac !important;
}

.dark .bg-yellow-50 {
    background-color: rgba(245, 158, 11, 0.15) !important;
    color: #fcd34d !important;
}

.dark .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #fca5a5 !important;
}

/* Progress bars */
.dark .progress-bar-container {
    background-color: var(--bg-tertiary) !important;
}

/* Leaderboard and stats cards */
.dark .bg-gradient-to-r {
    opacity: 0.9;
}

/* Modal and dropdown backgrounds */
.dark .modal,
.dark .dropdown-menu {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Code blocks */
.dark pre,
.dark code {
    background-color: var(--bg-tertiary) !important;
    color: #e2e8f0 !important;
}

/* Tables */
.dark table {
    border-color: var(--border-color) !important;
}

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

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

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

/* Reduce neon glow effects in dark mode */
.dark .neon-glow {
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3) !important;
}

/* Footer */
.dark footer {
    background-color: var(--bg-primary) !important;
    border-top-color: var(--border-color) !important;
}