/**
 * Light Theme CSS
 *
 * Project: Sharing Digital Kommunity (SDK)
 * Developer: KreativeStudio
 */

/* Light mode variables - Updated for Tailwind v4 compatibility */
html[data-theme="light"] {
    --color-background: #f8fafc;
    --color-surface: #ffffff;
    --color-text: #0f172a;
    --color-text-secondary: #475569;
    --color-border: #e2e8f0;
    
    /* Admin variables - matching Tailwind v4 @theme values */
    --color-light: #f9fafb;
    --color-light-surface: #ffffff;
    --color-light-surface2: #f3f4f6;
    --color-light-text-primary: #111827;
    --color-light-text-secondary: #374151;
    
    /* Override dark variables for light mode */
    --color-dark: #f9fafb;
    --color-dark-surface: #ffffff;
    --color-dark-surface2: #f3f4f6;
    --color-text-primary: #111827;
    --color-text-tertiary: #6b7280;
}

/* Light mode overrides - Core elements */
html[data-theme="light"] body {
    background-color: #f8fafc;
    color: #0f172a;
}

/* Sidebar */
html[data-theme="light"] .sidebar {
    background-color: #f1f5f9;
    border-right-color: #e2e8f0;
}

html[data-theme="light"] .sidebar-header {
    border-bottom-color: #e2e8f0;
}

html[data-theme="light"] .sidebar-item {
    color: #475569;
}

/* Sidebar hover styles moved to admin-sidebar.css for consistency */

html[data-theme="light"] .sidebar-item-active {
    background-color: #7c3aed;
    color: #ffffff;
}

/* Navbar */
html[data-theme="light"] .navbar {
    background-color: transparent;
    border-bottom-color: #e2e8f0;
}

/* Cards */
html[data-theme="light"] .card {
    background-color: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .card-header {
    border-bottom-color: #e2e8f0;
}

html[data-theme="light"] .card-footer {
    /* Removed border-top */
}

/* Dropdowns */
html[data-theme="light"] .dropdown-menu {
    background-color: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Header dropdown fixes for light mode */
html[data-theme="light"] #language-dropdown {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] #user-dropdown {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .dropdown-item {
    color: #475569;
}

html[data-theme="light"] .dropdown-item:hover {
    background-color: #7c3aed;
    color: #ffffff !important;
}

/* User dropdown specific styles */
html[data-theme="light"] #user-dropdown {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] #user-dropdown .border-slate-700 {
    border-color: #e2e8f0 !important;
}

html[data-theme="light"] #user-dropdown .text-slate-200 {
    color: #1e293b !important;
}

html[data-theme="light"] #user-dropdown .text-slate-400 {
    color: #64748b !important;
}

html[data-theme="light"] #user-dropdown .dropdown-item {
    color: #475569;
}

html[data-theme="light"] #user-dropdown .dropdown-item:hover {
    background-color: #f8fafc;
    color: #1e293b !important;
}

html[data-theme="light"] #user-dropdown .dropdown-item.text-red-400 {
    color: #dc2626 !important;
}

html[data-theme="light"] #user-dropdown .dropdown-item.text-red-400:hover {
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
}

/* User button styling for light mode */
html[data-theme="light"] .bg-slate-800 {
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0;
}

html[data-theme="light"] .bg-slate-800:hover {
    background-color: #e2e8f0 !important;
}

html[data-theme="light"] .text-slate-300 {
    color: #64748b !important;
}

html[data-theme="light"] .text-slate-300:hover {
    color: #1e293b !important;
}

/* Sidebar user dropdown for light mode */
html[data-theme="light"] .sidebar-user-dropdown {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .sidebar-user-dropdown .border-slate-700 {
    border-color: #e2e8f0 !important;
}

html[data-theme="light"] .sidebar-user-dropdown .text-slate-200 {
    color: #1e293b !important;
}

html[data-theme="light"] .sidebar-user-dropdown .text-slate-400 {
    color: #64748b !important;
}

html[data-theme="light"] .sidebar-dropdown-item {
    color: #475569;
}

html[data-theme="light"] .sidebar-dropdown-item:hover {
    background-color: #f8fafc;
    color: #1e293b !important;
}

html[data-theme="light"] .sidebar-dropdown-item.text-red-400 {
    color: #dc2626 !important;
}

html[data-theme="light"] .sidebar-dropdown-item.text-red-400:hover {
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
}

html[data-theme="light"] .sidebar-user-button {
    background-color: rgba(124, 58, 237, 0.05) !important;
    border-color: rgba(124, 58, 237, 0.15) !important;
}

html[data-theme="light"] .sidebar-user-button:hover {
    background-color: rgba(124, 58, 237, 0.1) !important;
    border-color: rgba(124, 58, 237, 0.25) !important;
}

/* Floating dropdown for collapsed sidebar in light mode */
html[data-theme="light"] .floating-dropdown {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .floating-dropdown .border-slate-700 {
    border-color: #e2e8f0 !important;
}

html[data-theme="light"] .floating-dropdown .text-slate-200 {
    color: #1e293b !important;
}

html[data-theme="light"] .floating-dropdown .text-slate-400 {
    color: #64748b !important;
}

html[data-theme="light"] .floating-dropdown .sidebar-dropdown-item {
    color: #475569 !important;
}

html[data-theme="light"] .floating-dropdown .sidebar-dropdown-item:hover {
    background-color: #f8fafc !important;
    color: #1e293b !important;
}

html[data-theme="light"] .floating-dropdown .sidebar-dropdown-item.text-red-400 {
    color: #dc2626 !important;
}

html[data-theme="light"] .floating-dropdown .sidebar-dropdown-item.text-red-400:hover {
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
}

/* Sidebar user button text colors in light mode */
html[data-theme="light"] .sidebar-user-button .text-slate-200 {
    color: #1e293b !important;
}

html[data-theme="light"] .sidebar-user-button .text-slate-400 {
    color: #64748b !important;
}

/* Buttons */
html[data-theme="light"] .btn {
    border: 1px solid transparent;
}

html[data-theme="light"] .btn-primary {
    background-color: #7c3aed;
    color: #ffffff !important;
}

html[data-theme="light"] .btn-primary:hover {
    background-color: #6d28d9;
    color: #ffffff !important;
}

html[data-theme="light"] .btn-primary:active {
    background-color: #5b21b6;
    color: #ffffff !important;
}

html[data-theme="light"] .btn-secondary {
    background-color: #4c1d95;
    color: #ffffff !important;
}

html[data-theme="light"] .btn-secondary:hover {
    background-color: #5b21b6;
    color: #ffffff !important;
}

html[data-theme="light"] .btn-secondary:active {
    background-color: #4a1d95;
    color: #ffffff !important;
}

html[data-theme="light"] .btn-outline {
    border-color: #7c3aed;
    color: #7c3aed !important;
}

html[data-theme="light"] .btn-outline:hover {
    background-color: #7c3aed;
    color: #ffffff !important;
}

html[data-theme="light"] .btn-outline:active {
    background-color: #6d28d9;
    color: #ffffff !important;
}

/* Forms */
html[data-theme="light"] .form-input,
html[data-theme="light"] .form-select,
html[data-theme="light"] .form-textarea {
    background-color: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
}

html[data-theme="light"] .form-input:focus,
html[data-theme="light"] .form-select:focus,
html[data-theme="light"] .form-textarea:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}

html[data-theme="light"] .form-label {
    color: #475569;
}

/* Tables */
html[data-theme="light"] table {
    border-color: #e2e8f0;
}

html[data-theme="light"] th {
    background-color: #f1f5f9;
    color: #475569;
    border-bottom-color: #e2e8f0;
}

html[data-theme="light"] td {
    border-bottom-color: #e2e8f0;
    color: #0f172a;
}

html[data-theme="light"] tr.border-t.border-slate-700 {
    border-top-color: #e2e8f0;
}

html[data-theme="light"] tr.bg-slate-700 {
    background-color: #f1f5f9;
}

/* Badges */
html[data-theme="light"] .badge {
    font-weight: 500;
}

html[data-theme="light"] .badge-primary {
    background-color: rgba(124, 58, 237, 0.15);
    color: #7c3aed;
    border: 1px solid rgba(124, 58, 237, 0.3);
    text-align: center;
}

html[data-theme="light"] .badge-success {
    background-color: #10b981;
    color: #ffffff;
}

html[data-theme="light"] .badge-free {
    background-color: transparent;
    color: #10b981;
    border-top: 1px solid rgba(16, 185, 129, 0.3);
    padding-top: 8px;
    font-size: 1.25rem;
    font-weight: 700;
}

html[data-theme="light"] .badge-warning {
    background-color: #f59e0b;
    color: #ffffff;
}

html[data-theme="light"] .badge-premium {
    background-color: transparent;
    color: #f59e0b;
    border-top: 1px solid rgba(245, 158, 11, 0.3);
    padding-top: 8px;
    font-size: 1.25rem;
    font-weight: 700;
}

html[data-theme="light"] .badge-danger {
    background-color: #ef4444;
    color: #ffffff;
}

html[data-theme="light"] .badge-info {
    background-color: #3b82f6;
    color: #ffffff;
}

/* Alerts */
html[data-theme="light"] .alert {
    border: 1px solid transparent;
}

html[data-theme="light"] .alert-success {
    background-color: #ecfdf5;
    color: #065f46;
    border-color: #a7f3d0;
}

html[data-theme="light"] .alert-warning {
    background-color: #fffbeb;
    color: #92400e;
    border-color: #fde68a;
}

html[data-theme="light"] .alert-danger {
    background-color: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}

html[data-theme="light"] .alert-info {
    background-color: #eff6ff;
    color: #1e40af;
    border-color: #bfdbfe;
}

/* Theme toggle button */
html[data-theme="light"] #theme-toggle {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
}

html[data-theme="light"] #theme-toggle:hover {
    background-color: #7c3aed;
    color: #ffffff !important;
}

html[data-theme="light"] #theme-toggle:active {
    background-color: #6d28d9;
    color: #ffffff !important;
}

/* Language dropdown button styles moved to unified .language-switcher-btn class */

/* Language dropdown menu in light mode */
html[data-theme="light"] #language-dropdown {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] #language-dropdown .dropdown-item {
    color: #475569;
}

html[data-theme="light"] #language-dropdown .dropdown-item:hover {
    background-color: #f1f5f9;
    color: #7c3aed !important;
}

html[data-theme="light"] #language-dropdown .dropdown-item.bg-slate-700 {
    background-color: #f8fafc;
    color: #7c3aed !important;
}

html[data-theme="light"] #language-dropdown .text-violet-400 {
    color: #7c3aed;
}

/* Footer */
html[data-theme="light"] footer {
    background-color: #f1f5f9;
    border-top-color: #e2e8f0;
    color: #475569;
}

/* Links */
html[data-theme="light"] a {
    color: #7c3aed;
}

html[data-theme="light"] a:hover {
    color: #6d28d9;
}

/* Text colors */
html[data-theme="light"] .text-slate-300 {
    color: #475569;
}

html[data-theme="light"] .text-slate-400 {
    color: #64748b;
}

html[data-theme="light"] .text-violet-400 {
    color: #7c3aed;
}

/* Borders */
html[data-theme="light"] .border-slate-700 {
    border-color: #e2e8f0;
}

html[data-theme="light"] .border-slate-800 {
    border-color: #cbd5e1;
}

/* Admin Dashboard */
html[data-theme="light"] .admin-content-title {
    color: #0f172a;
}

html[data-theme="light"] .admin-content-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Admin Tables */
html[data-theme="light"] .admin-table {
    border-color: #e2e8f0;
}

html[data-theme="light"] .admin-table th {
    background-color: #f1f5f9;
    color: #475569;
    border-bottom-color: #e2e8f0;
}

html[data-theme="light"] .admin-table td {
    border-bottom-color: #e2e8f0;
    color: #0f172a;
}

html[data-theme="light"] .admin-table tr:hover td {
    background-color: #f8fafc;
}

/* Admin Forms */
html[data-theme="light"] .admin-form-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .admin-form-title {
    border-bottom-color: #e2e8f0;
    background: linear-gradient(to right, rgba(241, 245, 249, 0.5), rgba(255, 255, 255, 0.8));
}

html[data-theme="light"] .admin-form-content {
    background-color: #ffffff;
}

html[data-theme="light"] .admin-form-label {
    color: #475569;
}

html[data-theme="light"] .admin-form-input,
html[data-theme="light"] .admin-form-select,
html[data-theme="light"] .admin-form-textarea {
    background-color: #ffffff;
    border-color: #cbd5e1;
    color: #0f172a;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .admin-form-input:hover,
html[data-theme="light"] .admin-form-select:hover,
html[data-theme="light"] .admin-form-textarea:hover {
    border-color: #94a3b8;
    background-color: #ffffff;
}

html[data-theme="light"] .admin-form-input:focus,
html[data-theme="light"] .admin-form-select:focus,
html[data-theme="light"] .admin-form-textarea:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.05);
    background-color: #ffffff;
}

html[data-theme="light"] .admin-form-footer {
    border-top-color: #e2e8f0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(241, 245, 249, 0.5));
}

html[data-theme="light"] .admin-form-help {
    color: #64748b;
}

/* Admin Tabs */
html[data-theme="light"] .admin-tabs {
    background-color: #f1f5f9;
    border-bottom-color: #e2e8f0;
}

html[data-theme="light"] .admin-tab {
    color: #64748b;
}

html[data-theme="light"] .admin-tab:hover {
    color: #0f172a;
    background-color: rgba(124, 58, 237, 0.1);
}

html[data-theme="light"] .admin-tab.active {
    color: #7c3aed;
    border-bottom-color: #7c3aed;
    background-color: #ffffff;
}

/* Admin Stats Cards */
html[data-theme="light"] .admin-stats-grid {
    gap: var(--spacing-lg);
}

html[data-theme="light"] .admin-stat-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .admin-stat-title {
    color: #64748b;
}

html[data-theme="light"] .admin-stat-value {
    color: #0f172a;
}

/* Status Badges */
html[data-theme="light"] .status-badge {
    font-weight: 500;
}

html[data-theme="light"] .status-published {
    background-color: rgba(16, 185, 129, 0.1);
    color: #065f46;
}

html[data-theme="light"] .status-draft {
    background-color: rgba(245, 158, 11, 0.1);
    color: #92400e;
}

html[data-theme="light"] .status-archived {
    background-color: rgba(239, 68, 68, 0.1);
    color: #991b1b;
}

/* Language Badges - Light Mode */
html[data-theme="light"] .language-badge {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .language-badge:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

/* Admin Actions */
html[data-theme="light"] .admin-action-btn {
    background-color: #f1f5f9;
    color: #64748b;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .admin-action-btn:hover {
    background-color: #7c3aed;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .admin-action-btn:active {
    background-color: #6d28d9;
    color: #ffffff !important;
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .admin-action-delete:hover {
    background-color: #ef4444;
    color: #ffffff !important;
}

html[data-theme="light"] .admin-action-delete:active {
    background-color: #dc2626;
    color: #ffffff !important;
}

/* SVG Icon Colors Fix for Admin Action Buttons in Light Mode */
html[data-theme="light"] .admin-action-btn svg,
html[data-theme="light"] .resource-action-btn svg,
html[data-theme="light"] .slider-action-btn svg,
html[data-theme="light"] .purchase-action-btn svg,
html[data-theme="light"] .course-action-btn svg {
    color: #64748b !important;
}

/* Edit button SVG hover color */
html[data-theme="light"] .admin-action-btn-edit:hover svg,
html[data-theme="light"] .resource-action-btn-edit:hover svg,
html[data-theme="light"] .slider-action-btn-edit:hover svg,
html[data-theme="light"] .purchase-action-btn-edit:hover svg,
html[data-theme="light"] .course-action-btn-edit:hover svg {
    color: var(--color-primary) !important;
}

/* Delete button SVG hover color */
html[data-theme="light"] .admin-action-btn-delete:hover svg,
html[data-theme="light"] .resource-action-btn-delete:hover svg,
html[data-theme="light"] .slider-action-btn-delete:hover svg,
html[data-theme="light"] .purchase-action-btn-delete:hover svg,
html[data-theme="light"] .course-action-btn-delete:hover svg {
    color: var(--color-error) !important;
}

/* Activate/View button SVG hover color */
html[data-theme="light"] .admin-action-btn-activate:hover svg,
html[data-theme="light"] .admin-action-btn-view:hover svg,
html[data-theme="light"] .admin-action-btn-preview:hover svg,
html[data-theme="light"] .resource-action-btn-activate:hover svg,
html[data-theme="light"] .resource-action-btn-download:hover svg,
html[data-theme="light"] .slider-action-btn-preview:hover svg,
html[data-theme="light"] .purchase-action-btn-view:hover svg,
html[data-theme="light"] .course-action-btn-lessons:hover svg,
html[data-theme="light"] .admin-action-btn-publish:hover svg,
html[data-theme="light"] .admin-action-btn-promote:hover svg,
html[data-theme="light"] .admin-action-btn-unblock:hover svg {
    color: var(--color-success) !important;
}

/* Warning/Deactivate button SVG hover color */
html[data-theme="light"] .admin-action-btn-deactivate:hover svg,
html[data-theme="light"] .admin-action-btn-unpublish:hover svg,
html[data-theme="light"] .admin-action-btn-feature:hover svg,
html[data-theme="light"] .resource-action-btn-deactivate:hover svg,
html[data-theme="light"] .course-action-btn-videos:hover svg {
    color: var(--color-warning) !important;
}

/* Block button SVG hover color */
html[data-theme="light"] .admin-action-btn-block:hover svg {
    color: var(--color-error) !important;
}

/* Course-specific styles */
html[data-theme="light"] .course-stat-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Removed .course-table th - now using Tailwind classes directly */

html[data-theme="light"] .course-table td {
    border-bottom-color: #e2e8f0;
    color: #0f172a;
}

html[data-theme="light"] .course-table tr:hover td {
    background-color: #f8fafc;
}

html[data-theme="light"] .course-thumbnail-placeholder {
    background-color: #f1f5f9;
}

html[data-theme="light"] .course-thumbnail-placeholder svg {
    color: #94a3b8;
}

html[data-theme="light"] .course-title-text {
    color: #0f172a;
}

html[data-theme="light"] .course-category {
    color: #64748b;
}

html[data-theme="light"] .course-status-published {
    background-color: rgba(16, 185, 129, 0.1);
    color: #065f46;
}

html[data-theme="light"] .course-status-draft {
    background-color: rgba(245, 158, 11, 0.1);
    color: #92400e;
}

html[data-theme="light"] .course-action-btn {
    background-color: #f1f5f9;
    color: #64748b;
}

html[data-theme="light"] .course-action-btn:hover {
    background-color: #7c3aed;
    color: #ffffff !important;
}

html[data-theme="light"] .course-action-btn:active {
    background-color: #6d28d9;
    color: #ffffff !important;
}

html[data-theme="light"] .course-action-btn-tooltip {
    background-color: #0f172a;
    color: #ffffff;
}

/* Search and Filter Fields */
html[data-theme="light"] .search-field {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    color: #0f172a;
}

html[data-theme="light"] .search-field:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

html[data-theme="light"] .filter-dropdown {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    color: #0f172a;
}

html[data-theme="light"] .filter-dropdown:hover {
    border-color: #cbd5e1;
}

/* Hero section */
html[data-theme="light"] .hero {
    position: relative;
    padding: var(--spacing-2xl) var(--spacing-xl);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: var(--spacing-xl);
    background-color: #f1f5f9;
}

html[data-theme="light"] .hero-content {
    position: relative;
    z-index: 10;
    max-width: 600px;
}

html[data-theme="light"] .hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    line-height: 1.2;
    color: #0f172a;
}

html[data-theme="light"] .hero-subtitle {
    font-size: 1.25rem;
    color: #334155;
    margin-bottom: var(--spacing-lg);
}

html[data-theme="light"] .hero-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(135deg, #6d28d9 0%, #4f46e5 100%);
    background-size: cover;
    background-position: center;
    opacity: 0.1;
    z-index: 1;
}

html[data-theme="light"] .hero-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(135deg, rgba(241, 245, 249, 0.9) 0%, rgba(248, 250, 252, 0.9) 100%);
    z-index: 2;
}

/* Category carousel */
html[data-theme="light"] .category-carousel {
    margin-bottom: var(--spacing-xl);
}

html[data-theme="light"] .category-carousel .swiper-slide {
    width: 240px;
    height: 400px;
    margin-right: 15px;
}

html[data-theme="light"] .category-carousel .swiper-button-next,
html[data-theme="light"] .category-carousel .swiper-button-prev {
    color: #7c3aed;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

html[data-theme="light"] .course-card .card-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0) 100%);
}

html[data-theme="light"] .course-card .card-title {
    color: white;
}

html[data-theme="light"] .course-card .card-footer a {
    color: white;
}

html[data-theme="light"] .course-card .card-footer a:hover {
    color: #8b5cf6;
}

html[data-theme="light"] .lock-icon {
    background-color: rgba(255, 255, 255, 0.9);
    color: #f59e0b;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .free-icon {
    background-color: rgba(255, 255, 255, 0.9);
    color: #10b981;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Carousel gradients for light mode */
html[data-theme="light"] .carousel-mask-left {
    background: linear-gradient(to right, #f8fafc, transparent) !important;
}

html[data-theme="light"] .carousel-mask-right {
    background: linear-gradient(to left, #f8fafc, transparent) !important;
}

/* Categories Section */
html[data-theme="light"] .bg-dark-surface {
    background-color: #ffffff;
}

html[data-theme="light"] .bg-dark-surface:hover {
    background-color: #f1f5f9;
}

html[data-theme="light"] .bg-dark-surface2 {
    background-color: #f1f5f9;
}

html[data-theme="light"] .border-gray-800 {
    border-color: #e2e8f0;
}

html[data-theme="light"] .hover\:border-primary-700:hover {
    border-color: #7c3aed;
}

html[data-theme="light"] .text-white {
    color: #0f172a;
}

/* Category Icon */
html[data-theme="light"] .category-icon {
    color: #7c3aed;
}

html[data-theme="light"] .text-gray-400 {
    color: #94a3b8;
}

/* Section titles */
html[data-theme="light"] .section-title {
    color: #0f172a;
}

html[data-theme="light"] .section-title-icon {
    color: #7c3aed;
}

/* Card image placeholder background */
html[data-theme="light"] .card-image.bg-dark-surface2 {
    background-color: #f1f5f9;
}

html[data-theme="light"] .text-gray-600 {
    color: #64748b;
}

/* Footer */
html[data-theme="light"] footer {
    background-color: transparent;
}

html[data-theme="light"] footer .text-white {
    color: #0f172a;
}

html[data-theme="light"] footer .text-gray-400 {
    color: #64748b;
}

html[data-theme="light"] footer .text-gray-500 {
    color: #94a3b8;
}

html[data-theme="light"] footer .border-gray-800 {
    border-color: #e2e8f0;
}

html[data-theme="light"] footer .hover\:text-primary-400:hover {
    color: #7c3aed;
}

/* Auth Modal */
html[data-theme="light"] .bg-slate-900.bg-opacity-75 {
    background-color: rgba(15, 23, 42, 0.85);
}

html[data-theme="light"] .close-modal {
    background-color: #e2e8f0;
    color: #64748b;
}

html[data-theme="light"] .close-modal:hover {
    color: #0f172a;
}

html[data-theme="light"] .auth-welcome-screen,
html[data-theme="light"] .auth-login-screen,
html[data-theme="light"] .auth-register-screen {
    background-color: #ffffff;
    border-left: 4px solid #7c3aed;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

html[data-theme="light"] .auth-welcome-screen h2,
html[data-theme="light"] .auth-login-screen h3,
html[data-theme="light"] .auth-register-screen h3 {
    color: #0f172a;
}

html[data-theme="light"] .auth-welcome-screen p {
    color: #64748b;
}

html[data-theme="light"] .auth-login-screen p,
html[data-theme="light"] .auth-register-screen p {
    color: #64748b;
}

html[data-theme="light"] .text-slate-400 {
    color: #64748b;
}

html[data-theme="light"] .bg-dark-surface2 {
    background-color: #f1f5f9;
}

html[data-theme="light"] .border-gray-700 {
    border-color: #e2e8f0;
}

html[data-theme="light"] .text-gray-500 {
    color: #64748b;
}

html[data-theme="light"] .text-primary-400 {
    color: #7c3aed;
}

html[data-theme="light"] .hover\:text-primary-300:hover {
    color: #8b5cf6;
}

/* Dashboard Cards - Light Mode Override */
html[data-theme="light"] div.card.bg-gradient-to-br.from-violet-900.to-violet-800,
html[data-theme="light"] div.card.bg-gradient-to-br.from-emerald-900.to-emerald-800,
html[data-theme="light"] div.card.bg-gradient-to-br.from-blue-900.to-blue-800,
html[data-theme="light"] div.card.bg-gradient-to-br.from-amber-900.to-amber-800 {
    background: white !important;
    background-image: none !important;
    border: 1px solid #e5e7eb !important;
}

/* Force all text visible with maximum specificity */
html[data-theme="light"] div.card.bg-gradient-to-br p.text-sm.font-medium.text-violet-200 {
    color: #7c3aed !important;
}

html[data-theme="light"] div.card.bg-gradient-to-br p.text-sm.font-medium.text-emerald-200 {
    color: #059669 !important;
}

html[data-theme="light"] div.card.bg-gradient-to-br p.text-sm.font-medium.text-blue-200 {
    color: #1d4ed8 !important;
}

html[data-theme="light"] div.card.bg-gradient-to-br p.text-sm.font-medium.text-amber-200 {
    color: #d97706 !important;
}

html[data-theme="light"] div.card.bg-gradient-to-br h3.text-3xl.font-bold.text-white {
    color: #1e293b !important;
}

/* Links with maximum specificity */
html[data-theme="light"] div.card.bg-gradient-to-br.from-violet-900 a.text-violet-200.hover\:text-white {
    color: #7c3aed !important;
}

html[data-theme="light"] div.card.bg-gradient-to-br.from-emerald-900 a.text-emerald-200.hover\:text-white {
    color: #059669 !important;
}

html[data-theme="light"] div.card.bg-gradient-to-br.from-blue-900 a.text-blue-200.hover\:text-white {
    color: #1d4ed8 !important;
}

html[data-theme="light"] div.card.bg-gradient-to-br.from-amber-900 span.text-amber-200 {
    color: #d97706 !important;
}

/* Fix amber circle being squished */
html[data-theme="light"] .bg-amber-700.bg-opacity-50,
html[data-theme="dark"] .bg-amber-700.bg-opacity-50 {
    min-width: 3rem !important;
    min-height: 3rem !important;
    flex-shrink: 0 !important;
}

/* Contact Modal Light Mode */
html[data-theme="light"] div#contact-modal .auth-login-screen.bg-slate-800 {
    background: white;
    border-left-color: var(--color-primary-500);
}

html[data-theme="light"] div#contact-modal .text-white {
    color: #1f2937;
}

html[data-theme="light"] div#contact-modal .text-slate-400 {
    color: #6b7280;
}

html[data-theme="light"] div#contact-modal button.bg-slate-700 {
    background: #e5e7eb;
}

html[data-theme="light"] div#contact-modal .text-gray-400 {
    color: #4b5563;
}

html[data-theme="light"] div#contact-modal .form-label {
    color: #374151;
}

html[data-theme="light"] div#contact-modal .form-input {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #111827;
}

html[data-theme="light"] div#contact-modal .form-input:focus {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

html[data-theme="light"] div#contact-modal .form-input::placeholder {
    color: #9ca3af;
}

/* Contact modal icon - keep white on gradient background */
html[data-theme="light"] div#contact-modal .relative.rounded-full svg.h-12.w-12 {
    color: white !important;
}

/* Contact modal close button */
html[data-theme="light"] #contact-modal .close-modal.bg-slate-700 {
    background: #e5e7eb;
    color: #374151;
}

html[data-theme="light"] #contact-modal .close-modal.bg-slate-700:hover {
    background: #d1d5db;
    color: #111827;
}

/* For both themes - ensure rotation works */
#contact-modal .close-modal {
    transition: all 0.3s ease !important;
}

#contact-modal .close-modal:hover {
    transform: rotate(90deg) !important;
}