/* public/css/dark.css - Dark Mode CSS Overrides */

/* --- Base & Scrollbar --- */
body {
    background: linear-gradient(-45deg, #7dd3fc, #ffffff, #38bdf8, #ffffff, #7dd3fc) !important;
    background-size: 400% 400% !important;
    animation: gradientBG 10s ease infinite !important;
    background-attachment: fixed !important;
}

html.dark, html.dark body {
    background: linear-gradient(-45deg, #0f172a, #1e1b4b, #3b0764, #0369a1, #0f172a) !important;
    background-size: 400% 400% !important;
    animation: gradientBG 10s ease infinite !important;
    color: #f1f5f9 !important;
    background-attachment: fixed !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(148, 163, 184, 0.3) transparent !important;
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* --- Premium Universal Custom Scrollbars --- */
html, body, * {
    scrollbar-width: thin;
    scrollbar-color: rgba(124, 58, 237, 0.45) transparent;
}

*::-webkit-scrollbar,
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track,
::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.6) 0%, rgba(99, 102, 241, 0.75) 100%);
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: all 0.25s ease;
}

*::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #8b5cf6 0%, #4f46e5 100%);
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.5);
}

*::-webkit-scrollbar-thumb:active,
::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, #7c3aed 0%, #4338ca 100%);
}

*::-webkit-scrollbar-corner,
::-webkit-scrollbar-corner {
    background: transparent;
}

/* Dark Mode Universal Scrollbars */
html.dark, html.dark body, html.dark * {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(167, 139, 250, 0.45) transparent !important;
}

html.dark *::-webkit-scrollbar-thumb,
html.dark::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.45) 0%, rgba(99, 102, 241, 0.55) 100%) !important;
    border-radius: 9999px !important;
    border: 2px solid transparent !important;
    background-clip: padding-box !important;
}

html.dark *::-webkit-scrollbar-thumb:hover,
html.dark::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #a78bfa 0%, #818cf8 100%) !important;
    box-shadow: 0 0 12px rgba(167, 139, 250, 0.6) !important;
}

html.dark *::-webkit-scrollbar-thumb:active,
html.dark::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, #c084fc 0%, #6366f1 100%) !important;
}

html.dark *::-webkit-scrollbar-corner,
html.dark::-webkit-scrollbar-corner {
    background: transparent !important;
}

/* Dark Mode Sidebar Scrollbars */
html.dark .sidebar *::-webkit-scrollbar-thumb,
html.dark .sidebar nav::-webkit-scrollbar-thumb,
html.dark #sidebar-menu-scroll-area::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.18) !important;
}

html.dark .sidebar *::-webkit-scrollbar-thumb:hover,
html.dark .sidebar nav::-webkit-scrollbar-thumb:hover,
html.dark #sidebar-menu-scroll-area::-webkit-scrollbar-thumb:hover {
    background-color: rgba(167, 139, 250, 0.5) !important;
}

html.dark .sidebar, html.dark .sidebar * {
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent !important;
}

/* Dark Mode Utility Classes */
html.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.3) !important;
}

html.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(167, 139, 250, 0.7) !important;
}

/* Welcome Card Dark Mode Gradient Override */
html.dark .welcome-card-gradient {
    background: linear-gradient(135deg, #1e293b, #0f172a, #111827, #1e1b4b) !important;
    background-size: 300% 300% !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.3) !important;
}

/* --- Layout Components --- */

/* Sidebar: Deep premium slate-900 to slate-950 in dark mode */
html.dark .sidebar {
    background-image: linear-gradient(to bottom right, #1e293b, #0f172a) !important;
    border-right-color: #1e293b !important;
}

/* Sidebar hover and active status */
html.dark .sidebar-item:hover,
html.dark .sidebar-item.bg-blue-900 {
    background-color: #334155 !important;
}

html.dark .sidebar div[id$="Dropdown"] {
    background-color: rgba(15, 23, 42, 0.4) !important;
}

/* Header */
html.dark header,
html.dark header.bg-white {
    background-color: #0f172a !important;
    border-bottom: 1px solid #1e293b !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.1) !important;
}

/* --- General Containers & Cards --- */
html.dark .bg-white {
    background-color: #1e293b !important; /* Slate-800 */
    color: #f9fafb !important;
    border-color: #334155 !important;
}

html.dark .bg-gray-50,
html.dark .bg-gray-100,
html.dark .bg-gray-200,
html.dark .bg-slate-50,
html.dark .bg-slate-100,
html.dark .bg-slate-200 {
    background-color: #0f172a !important; /* Slate-900 */
    border-color: #1e293b !important;
}

html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-gray-100:hover,
html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-slate-100:hover,
html.dark .hover\:bg-blue-50:hover {
    background-color: #334155 !important;
}

/* --- Text & Color Overrides --- */
html.dark .text-gray-900, html.dark .text-slate-900 { color: #f9fafb !important; }
html.dark .text-gray-800, html.dark .text-slate-800 { color: #f3f4f6 !important; }
html.dark .text-gray-700, html.dark .text-slate-700 { color: #e5e7eb !important; }
html.dark .text-gray-600, html.dark .text-slate-600 { color: #cbd5e1 !important; }
html.dark .text-gray-500, html.dark .text-slate-500 { color: #9ca3af !important; }
html.dark .text-gray-400, html.dark .text-slate-400 { color: #6b7280 !important; }

/* Keep specific alert or status texts readable */
html.dark .text-blue-600 { color: #60a5fa !important; }
html.dark .text-blue-700 { color: #93c5fd !important; }
html.dark .text-green-600 { color: #34d399 !important; }
html.dark .text-green-700 { color: #a7f3d0 !important; }
html.dark .text-purple-600 { color: #c084fc !important; }
html.dark .text-purple-700 { color: #e9d5ff !important; }
html.dark .text-red-600 { color: #f87171 !important; }
html.dark .text-red-700 { color: #fca5a5 !important; }

/* Global headings */
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 {
    color: #f9fafb !important;
}

/* --- Badges & Status Indicators --- */
html.dark .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.15) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}
html.dark .bg-green-50 {
    background-color: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}
html.dark .bg-purple-50 {
    background-color: rgba(139, 92, 246, 0.15) !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
}
html.dark .bg-yellow-50 {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}
html.dark .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

/* --- Form Fields & Inputs --- */
html.dark input,
html.dark select,
html.dark textarea {
    background-color: #0f172a !important;
    color: #f9fafb !important;
    border-color: #334155 !important;
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: #3b82f6 !important;
    outline: none;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #4b5563 !important;
}

html.dark .locked-input {
    background-color: #1e293b !important;
    color: #6b7280 !important;
    border-color: #334155 !important;
}

/* Custom select triggers & options panels */
html.dark .select-custom {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #f9fafb !important;
}
html.dark .select-custom__trigger {
    color: #cbd5e1 !important;
}
html.dark .select-options {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
html.dark .select-option:hover {
    background-color: #334155 !important;
}
html.dark .select-option.selected {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

/* --- Divider Borders --- */
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300 {
    border-color: #334155 !important;
}

html.dark .divide-gray-100 > * + *,
html.dark .divide-gray-200 > * + * {
    border-color: #334155 !important;
}

/* --- Progress Bars --- */
html.dark .progress-bar-container {
    background-color: #334155 !important;
}
html.dark .progress-segment.unanswered {
    background-color: #475569 !important;
}

/* --- Quiz / Simulation Components --- */
html.dark .option {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e5e7eb !important;
}

html.dark .option:hover:not(.no-click) {
    background-color: #334155 !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
}

html.dark .option-selected {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

html.dark .correct-answer {
    background-color: #059669 !important;
    color: #ffffff !important;
    border-color: #059669 !important;
}

html.dark .wrong-answer {
    background-color: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
}

html.dark .missed-answer {
    background-color: rgba(5, 150, 105, 0.15) !important;
    border-color: #059669 !important;
    color: #34d399 !important;
    border-style: dashed !important;
}

html.dark .clinical-case {
    background-color: #0f172a !important;
    border-left-color: #2563eb !important;
}

html.dark .clinical-case h3 {
    color: #60a5fa !important;
}

html.dark #clinical-case-text {
    color: #e5e7eb !important;
}

/* AI Explanation Box styling */
html.dark .ai-box {
    background: linear-gradient(to right, #1e1b4b, #0f172a) !important;
    border-color: #581c87 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

html.dark .ai-header {
    background-color: #3b0764 !important;
    color: #e9d5ff !important;
    border-bottom: 1px solid #581c87 !important;
}

html.dark .ai-content {
    color: #e2e8f0 !important;
}

/* --- Special Screens --- */
html.dark .loader {
    background-color: #0b0f19 !important;
}

html.dark #pause-overlay {
    background-color: #0b0f19 !important;
    opacity: 0.95;
}

html.dark #user-info-form {
    background-color: rgba(15, 23, 42, 0.8) !important;
}

/* Landing Page testimonial cards quotes */
html.dark .testimonial-card::before {
    color: #1e293b !important;
}

html.dark .pricing-card {
    border-color: #334155 !important;
}

html.dark .pricing-card:hover {
    border-color: #3b82f6 !important;
    box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.1), 0 10px 10px -5px rgba(59, 130, 246, 0.04) !important;
}

/* Glassmorphism nav header on landing page */
html.dark nav.bg-white\/85 {
    background-color: rgba(15, 23, 42, 0.85) !important;
    border-bottom: 1px solid #1e293b !important;
}

/* --- Specific Custom Card Overrides (e.g. Profile & Report Cards) --- */
html.dark .report-card,
html.dark .form-card,
html.dark .profile-card,
html.dark .info-card {
    background-color: #1e293b !important;
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2) !important;
}

html.dark .form-textarea {
    background-color: #0f172a !important;
    color: #f9fafb !important;
    border-color: #334155 !important;
}

/* --- Pomodoro Timer Dark Overrides --- */
html.dark .timer-inner {
    background-color: #1e293b !important;
    background: #1e293b !important;
}

/* --- Color Light highlights in Dark Mode --- */
html.dark .bg-red-light { background-color: rgba(220, 38, 38, 0.15) !important; }
html.dark .bg-blue-light { background-color: rgba(59, 130, 246, 0.15) !important; }
html.dark .bg-green-light { background-color: rgba(16, 185, 129, 0.15) !important; }
html.dark .bg-purple-light { background-color: rgba(139, 92, 246, 0.15) !important; }
html.dark .bg-amber-light { background-color: rgba(245, 158, 11, 0.15) !important; }

html.dark .text-red-custom { color: #f87171 !important; }
html.dark .text-blue-custom { color: #60a5fa !important; }
html.dark .text-green-custom { color: #34d399 !important; }
html.dark .text-purple-custom { color: #a78bfa !important; }
html.dark .text-amber-custom { color: #fbbf24 !important; }

/* --- Dark Mode Sidebar & Header Premium Styling --- */

/* Deep midnight-indigo-violet animated gradient sidebar: Blue/slate on top, Violet at the bottom */
html.dark .sidebar {
    background-image: linear-gradient(180deg, #0f172a 0%, #1e293b 25%, #1e1b4b 60%, #2e1065 90%, #3b0764 100%) !important;
    background-size: 100% 200% !important;
    animation: sidebarGradientShift 15s ease infinite !important;
    border-right: 1px solid rgba(51, 65, 85, 0.4) !important;
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.3) !important;
}

/* Sidebar hover and active status overrides in dark mode */
html.dark .sidebar-item:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark .sidebar-item.bg-blue-900 {
    background-color: rgba(255, 255, 255, 0.15) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    border-left: none !important;
}

/* Violet glowing accent bar for dark mode active items */
html.dark .sidebar-item.bg-blue-900::before {
    background-color: #a78bfa !important;
    box-shadow: 0 0 8px rgba(167, 139, 250, 0.8) !important;
}

html.dark .sidebar div[id$="Dropdown"] {
    background-color: rgba(15, 23, 42, 0.3) !important;
}

html.dark .sidebar div[id$="Dropdown"] a:hover,
html.dark .sidebar div[id$="dropdown"] a:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Disconnect container border top color in dark mode */
html.dark .sidebar > div:last-child {
    border-top-color: rgba(255, 255, 255, 0.05) !important;
}

/* Premium Floating Glassmorphic Header - Dark Mode */
html.dark header,
html.dark header.bg-white {
    background-color: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(51, 65, 85, 0.6) !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.35) !important;
}

/* Dark Mode Header Page Title */
html.dark header h2 {
    color: #f1f5f9 !important;
}

/* Dark Mode Profile Pill Container */
html.dark header .flex.items-center:has(> #headerProfileImage) {
    background-color: rgba(30, 41, 59, 0.5) !important;
    border-color: rgba(51, 65, 85, 0.8) !important;
}

html.dark header .flex.items-center:has(> #headerProfileImage):hover {
    background-color: rgba(30, 41, 59, 0.8) !important;
    border-color: rgba(71, 85, 105, 0.8) !important;
}

/* Dark Mode Profile Status indicator dot border color override */
html.dark header .flex.items-center:has(> #headerProfileImage)::after {
    border-color: #1e293b !important;
}

/* Dark Mode Header Toggle Button */
html.dark header #dark-mode-toggle {
    border-color: rgba(51, 65, 85, 0.8) !important;
    background-color: rgba(30, 41, 59, 0.5) !important;
    color: #cbd5e1 !important;
}

html.dark header #dark-mode-toggle:hover {
    background-color: rgba(30, 41, 59, 0.8) !important;
    border-color: rgba(71, 85, 105, 0.8) !important;
    color: #f1f5f9 !important;
}

/* Notification Badge dark mode theme match */
html.dark #notification-count {
    background: linear-gradient(135deg, #a78bfa, #c084fc) !important;
    color: #0f172a !important;
    box-shadow: 0 0 10px rgba(167, 139, 250, 0.3) !important;
}

/* Dark Mode Dropdown toggle color rotated state */
html.dark .sidebar-item .fa-chevron-down.rotate-180 {
    color: #a78bfa !important;
}

/* Landing Page Animated Gradient Dark Mode Override */
html.dark .animated-gradient {
    background: linear-gradient(135deg, #1e293b, #0f172a, #111827, #1e1b4b) !important;
    background-size: 400% 400% !important;
}

/* --- Selection States (Checkbox & Radio Items) --- */
.module-item:has(input:checked),
.course-item:has(input:checked),
label:has(input:checked) {
    background-color: rgba(239, 246, 255, 0.9);
    border-color: #93c5fd;
}

html.dark .module-item:has(input:checked),
html.dark .course-item:has(input:checked) {
    background-color: rgba(30, 58, 138, 0.35) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
}

/* Checkbox/Radio square when checked (scoped to custom checkbox components) */
.custom-checkbox input:checked + span,
.custom-checkbox input:checked ~ span:first-of-type {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}

html.dark .custom-checkbox input:checked + span,
html.dark .custom-checkbox input:checked ~ span:first-of-type {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

/* Text label when checked */
.custom-checkbox input:checked ~ span:last-of-type {
    color: #1d4ed8 !important;
    font-weight: 600 !important;
}

html.dark .custom-checkbox input:checked ~ span:last-of-type {
    color: #60a5fa !important;
    font-weight: 600 !important;
}