/* Dark Mode Variables */
:root {
    --bg-primary-light: #ffffff;
    --bg-secondary-light: #f8fafc;
    --text-primary-light: #0f172a;
    --text-secondary-light: #475569;
    --border-light: #e2e8f0;

    --bg-primary-dark: #0f172a;
    --bg-secondary-dark: #1e293b;
    --text-primary-dark: #e2e8f0;
    /* Soft off-white */
    --text-secondary-dark: #94a3b8;
    /* Muted grey */
    --border-dark: #334155;
}

/* Default Dark Mode Styles (applied via .dark-mode class) */
.dark-mode {
    --bg: var(--bg-primary-dark);
    --text: var(--text-primary-dark);
    --muted: var(--text-secondary-dark);
    --border: var(--border-dark);
    background-color: var(--bg-primary-dark);
    color: var(--text-primary-dark);
}

.dark-mode body {
    background: linear-gradient(to bottom, #0f172a, #1e293b);
    color: var(--text-primary-dark);
}

.dark-mode nav {
    background-color: rgba(15, 23, 42, 0.85);
    /* Dark background for nav */
    border-bottom-color: var(--border-dark);
}

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

.dark-mode .bg-slate-50 {
    background-color: var(--bg-primary-dark) !important;
}

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

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

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

/* Cards and Containers in Dark Mode */
.dark-mode .shadow-sm,
.dark-mode .shadow-lg {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;
}

/* Inputs and Forms */
.dark-mode input,
.dark-mode textarea,
.dark-mode select {
    background-color: var(--bg-primary-dark);
    border-color: var(--border-dark);
    color: var(--text-primary-dark);
}

/* Sidebar Specifics */
.dark-mode #videoList .video-item:hover,
.dark-mode .hover\:bg-gray-50:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.dark-mode .difficulty-filter-btn {
    background-color: transparent;
    border-color: var(--border-dark);
    color: var(--text-secondary-dark);
}

/* Explicit text overrides for Tailwind classes */
.dark-mode .text-slate-900,
.dark-mode .text-gray-900,
.dark-mode .text-gray-800,
.dark-mode .text-gray-950 {
    color: var(--text-primary-dark) !important;
}

.dark-mode .text-slate-600,
.dark-mode .text-gray-600,
.dark-mode .text-gray-500,
.dark-mode .text-gray-400,
.dark-mode .text-gray-300,
.dark-mode .text-gray-200,
.dark-mode .text-gray-700 {
    color: var(--text-secondary-dark) !important;
}

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

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

/* Smooth Transition for major layout elements only to avoid lag */
body,
nav,
main,
section,
article,
.card,
.card-hover {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* --- Dark Mode Patch for Dynamic Content --- */

/* Metadata Sections (Lesson Details) */
.dark-mode .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.15) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

.dark-mode .bg-orange-50 {
    background-color: rgba(249, 115, 22, 0.15) !important;
    border-color: rgba(249, 115, 22, 0.3) !important;
}

.dark-mode .bg-purple-50 {
    background-color: rgba(168, 85, 247, 0.15) !important;
    border-color: rgba(168, 85, 247, 0.3) !important;
}

.dark-mode .bg-green-50 {
    background-color: rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

/* Metadata Text Colors */
.dark-mode .text-blue-900,
.dark-mode .text-blue-800 {
    color: #93c5fd !important;
}

.dark-mode .text-orange-900,
.dark-mode .text-orange-800 {
    color: #fdba74 !important;
}

.dark-mode .text-purple-900,
.dark-mode .text-purple-800 {
    color: #d8b4fe !important;
}

.dark-mode .text-green-900,
.dark-mode .text-green-800 {
    color: #86efac !important;
}

/* General Gray Backgrounds (Sidebar headers, filters) */
.dark-mode .bg-gray-50 {
    background-color: var(--bg-secondary-dark) !important;
    border-color: var(--border-dark) !important;
}

/* Ensure body gradient is overridden correctly */
.dark-mode body {
    background: var(--bg-primary-dark) !important;
    /* Force flat dark background or gradient if preferred */
    background: linear-gradient(to bottom, #0f172a, #1e293b) !important;
}

/* Difficulty Tags (Video List) - Accessibility Polish */
.dark-mode .bg-green-100 {
    background-color: rgba(6, 78, 59, 0.4) !important;
    color: #34d399 !important;
    border: 1px solid rgba(52, 211, 153, 0.3) !important;
}

.dark-mode .bg-yellow-100 {
    background-color: rgba(120, 53, 15, 0.4) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(251, 191, 36, 0.3) !important;
}

.dark-mode .bg-red-100 {
    background-color: rgba(127, 29, 29, 0.4) !important;
    color: #f87171 !important;
    border: 1px solid rgba(248, 113, 113, 0.3) !important;
}

.dark-mode .bg-blue-100 {
    background-color: rgba(30, 58, 138, 0.4) !important;
    color: #60a5fa !important;
    border: 1px solid rgba(96, 165, 250, 0.3) !important;
}

.dark-mode .bg-gray-100 {
    background-color: rgba(30, 41, 59, 0.6) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(203, 213, 225, 0.2) !important;
}

/* Sidebar Active Item Focus */
.dark-mode .bg-blue-50.border-blue-600 {
    background-color: rgba(30, 58, 138, 0.15) !important;
    border-left-color: #3b82f6 !important;
}

.dark-mode .bg-blue-50.border-blue-600 .text-blue-700 {
    color: #93c5fd !important;
    font-weight: 700 !important;
}


.dark-mode .category-tab:not(.active) {
    background-color: var(--bg-secondary-dark) !important;
    border-color: var(--border-dark) !important;
    color: var(--text-secondary-dark) !important;
    box-shadow: none !important;
}

/* Shadow & Card Polish */
.dark-mode .shadow-sm,
.dark-mode .shadow,
.dark-mode .shadow-md,
.dark-mode .shadow-lg,
.dark-mode .shadow-xl,
.dark-mode .shadow-2xl {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.25) !important;
}

.dark-mode .border-gray-200,
.dark-mode .border-gray-100,
.dark-mode .border-slate-200 {
    border-color: var(--border-dark) !important;
}

.dark-mode .category-tab:not(.active):hover {
    background-color: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #34d399 !important;
}

/* --- Landing Page Light Gradient Overrides --- */

/* Hero & Library Sections: Remove light gradients and force dark bg */
.dark-mode .from-blue-50,
.dark-mode .from-slate-50,
.dark-mode .via-white,
.dark-mode .to-white,
.dark-mode .to-blue-50 {
    background-image: none !important;
    background-color: var(--bg-primary-dark) !important;
    --tw-gradient-stops: var(--bg-primary-dark), var(--bg-secondary-dark) !important;
}

/* Ensure background decoration blobs are subtle in dark mode */
.dark-mode .blur-3xl {
    opacity: 0.2;
}

/* Bottom Banner (Designed for teams) */
.dark-mode .border-slate-200 {
    border-color: var(--border-dark) !important;
}

/* --- Blog Post Specific Overrides --- */

/* Article Header & Body Backgrounds */
.dark-mode #postContent .bg-white {
    background-color: var(--bg-primary-dark) !important;
    border-color: var(--border-dark) !important;
}

/* Share Buttons */
.dark-mode #copyLinkBtn {
    background-color: var(--bg-secondary-dark) !important;
    color: var(--text-primary-dark) !important;
    border: 1px solid var(--border-dark);
}

.dark-mode #copyLinkBtn:hover {
    background-color: #334155 !important;
}

/* Category Badge (Blog Post) */
.dark-mode #categoryBadge.bg-blue-100 {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #93c5fd !important;
}

/* Loading Skeletons */
.dark-mode .bg-gray-200 {
    background-color: var(--border-dark) !important;
}

/* Cover Image Gradients */
.dark-mode #coverImageContainer.bg-gradient-to-br {
    background: linear-gradient(to bottom right, #1e293b, #0f172a) !important;
}

/* Back Link */
.dark-mode a.text-blue-600:hover {
    color: #60a5fa !important;
}

/* --- Blog Prose Content Readability (CRITICAL FIX) --- */
.dark-mode .prose {
    color: var(--text-primary-dark) !important;
}

.dark-mode .prose h1,
.dark-mode .prose h2,
.dark-mode .prose h3,
.dark-mode .prose h4,
.dark-mode .prose strong,
.dark-mode .prose em,
.dark-mode .prose i {
    color: #ffffff !important;
}

.dark-mode .prose p,
.dark-mode .prose li {
    color: var(--text-primary-dark) !important;
    opacity: 0.9;
}

.dark-mode .prose blockquote {
    color: var(--text-secondary-dark) !important;
    background: linear-gradient(to right, rgba(16, 185, 129, 0.1), transparent) !important;
    border-left-color: #10b981 !important;
}

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

.dark-mode .prose code {
    background-color: rgba(30, 41, 59, 0.9) !important;
    color: #34d399 !important;
    padding: 0.15rem 0.35rem !important;
    border-radius: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.dark-mode .prose a {
    color: #34d399 !important;
}

.dark-mode .prose a:hover {
    color: #6ee7b7 !important;
}

/* HIGH-QUALITY BLOG LAYOUT & READABILITY FIX */
.prose {
    color: #1a1a1a !important;
    /* Rich Dark Gray for Light Mode */
    max-width: 100% !important;
    width: 100% !important;
}

.dark-mode .prose {
    color: #f8fafc !important;
    /* Crisp White for Dark Mode */
}

.prose p {
    margin-bottom: 2rem !important;
    line-height: 1.8 !important;
    font-size: 1.125rem !important;
}

.prose h1,
.prose h2,
.prose h3 {
    font-weight: 800 !important;
    margin-top: 3rem !important;
    margin-bottom: 1.5rem !important;
    line-height: 1.3 !important;
}

.prose h1 {
    font-size: 2.5rem !important;
}

.prose h2 {
    font-size: 2rem !important;
}

.prose h3 {
    font-size: 1.5rem !important;
}

/* Global Selection Design for all modes - remove hard color */
::selection {
    background-color: rgba(59, 130, 246, 0.4);
    color: inherit;
}

/* Premium Selection Design - Fixes readability in dark mode */
.dark-mode ::selection {
    background-color: rgba(16, 185, 129, 0.45) !important;
    color: #ffffff !important;
}

/* NUCLEAR FIX: Force any light backgrounds inside prose to be dark/transparent in Dark Mode */
/* This handles text pasted from documentation with hardcoded white backgrounds */
.dark-mode .prose,
.dark-mode .prose *,
.dark-mode .prose div,
.dark-mode .prose p,
.dark-mode .prose span {
    background-color: transparent !important;
}

/* Except for code blocks which need their own specific background */
.dark-mode .prose pre,
.dark-mode .prose pre * {
    background-color: #1e293b !important;
}