/* ===== LIGHT THEME CSS ===== */

/* Light Theme CSS Variables */
:root {
    --primary-gradient: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 50%, #90CAF9 100%);
    --secondary-gradient: linear-gradient(45deg, #F5F5F5, #E0E0E0);
    --bg-gradient: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 50%, #90CAF9 100%);
    --bg-primary: #FAFAFA;
    --bg-secondary: #F5F5F5;
    --bg-tertiary: #E0E0E0;
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(74, 144, 226, 0.2);
    --glass-hover: rgba(74, 144, 226, 0.1);
    --glass-shadow: 0 8px 32px rgba(74, 144, 226, 0.1);
    --text-primary: #424242;
    --text-secondary: #616161;
    --text-muted: #9E9E9E;
    --text-code: #424242;
    --text-color: #424242;
    --shadow-light: 0 1px 3px rgba(74, 144, 226, 0.1), 0 1px 2px rgba(74, 144, 226, 0.06);
    --shadow-medium: 0 3px 6px rgba(74, 144, 226, 0.15), 0 3px 6px rgba(74, 144, 226, 0.1);
    --shadow-heavy: 0 10px 20px rgba(74, 144, 226, 0.2), 0 6px 6px rgba(74, 144, 226, 0.15);
    --elevation-1: 0 1px 3px rgba(74, 144, 226, 0.1), 0 1px 2px rgba(74, 144, 226, 0.06);
    --elevation-2: 0 3px 6px rgba(74, 144, 226, 0.15), 0 3px 6px rgba(74, 144, 226, 0.1);
    --elevation-3: 0 10px 20px rgba(74, 144, 226, 0.2), 0 6px 6px rgba(74, 144, 226, 0.15);
    --elevation-4: 0 14px 28px rgba(74, 144, 226, 0.25), 0 10px 10px rgba(74, 144, 226, 0.2);
    --elevation-5: 0 19px 38px rgba(74, 144, 226, 0.3), 0 15px 12px rgba(74, 144, 226, 0.25);
    --code-bg: #F5F5F5;
    --code-border: #E0E0E0;
    --text-bold: #1976D2;
    --border-color: rgba(74, 144, 226, 0.2);
    --border-radius: 12px;
    --transition: all 0.3s ease;
    --backdrop-blur: blur(20px);
    --accent-color: #4183c4;
    --accent-hover: #1976D2;
}

/* Light theme specific styling */
body {
    background-image: url(/static/media/dust_background.png) !important;
    color: rgba(0, 0, 0, 0.95) !important;
}

body .cortex-layout {
    background-image: url(/static/media/dust_background.png) !important;
}

body .main-content {
    background-image: url(/static/media/dust_background.png) !important;
    background-repeat: repeat !important;
}

body .settings-layout {
    background-image: url(/static/media/dust_background.png) !important;
    background-repeat: repeat !important;
}

body .settings-content-area {
    background: white !important;
    color: rgba(0, 0, 0, 0.95) !important;
}

body .topic-title {
    color: #4183c4 !important;
}

body .topic-description {
    color: rgba(0, 0, 0, 0.95) !important;
}

/* Sidebar/Menu specific colors for Light theme */
body .sidebar {
    background: #8abdd0  !important;
}

body .sidebar-header {
    background: inherit !important;
}

body .sidebar-logo {
    color: white !important;
}

body .sidebar-logo i {
    color: white !important;
}

body .sidebar-logo span {
    color: white !important;
}

body .sidebar-menu .item {
    color: white !important;
}

body .sidebar-menu .item:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

body .sidebar-menu .item.active {
    background: rgba(255, 255, 255, 0.3) !important;
    color: white !important;
}

/* Username display in sidebar */
body .sidebar-footer {
    background: inherit !important;
}

body .sidebar-footer .username {
    color: white !important;
}

body .sidebar-footer .user-role {
    color: rgba(255, 255, 255, 0.8) !important;
}

body .sidebar-footer .user-info {
    color: white !important;
}

/* Settings link in sidebar footer */
body .sidebar-footer a {
    color: white !important;
}

body .sidebar-footer a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Main content links */
body a {
    color: #4183c4 !important;
}

body a:hover {
    color: #2c5aa0 !important;
}

/* Component backgrounds */
body .component-menu {
    background: white !important;
}

body .component-header {
    background: white !important;
}

body .component-item {
    background: white !important;
}

body .topic-content {
    background: white !important;
}

/* Settings specific */
body .settings-content-area {
    background: white !important;
}

body .settings-section {
    background: white !important;
}

body .setting-group {
    background: white !important;
}

/* Light theme submenu styling */
body .sidebar-submenu {
    background: white !important;
}

body .submenu-header {
    background: #f5f5f5 !important;
    color: #424242 !important;
}

body .submenu-title {
    color: #616161 !important;
}

body .submenu-link {
    color: #4183c4 !important;
}

body .submenu-link:hover {
    background: #f0f8ff !important;
    color: #2c5aa0 !important;
}

body .submenu-course-item {
    /* No theme-specific overrides needed */
}

body .submenu-course-item:hover {
    background: #f0f8ff !important;
}

body .submenu-course-title {
    color: #424242 !important;
}

body .submenu-course-code {
    color: #9E9E9E !important;
}

/* Light theme page backgrounds */
body .course-layout {
    background: #f5f5f5 !important;
}

body .cortex-layout {
    background: #f5f5f5 !important;
}

body .main-content {
    background: #f5f5f5 !important;
}

body .course-content {
    background: #f5f5f5 !important;
}

body .course-content-area {
    background: transparent !important;
}

body .unit-card {
    background: color-mix(in srgb, var(--accent-color) 5%, transparent);
    border-color: #e0e0e0 !important;
}

body .unit-card:hover {
    background: rgba(65, 131, 196, 0.05) !important;
    opacity: 0.9 !important;
    border-color: #4183c4 !important;
}

/* Light theme menu styling - white icons and text */
body .sidebar-menu .item,
body .sidebar-menu .sidebar-link,
body .sidebar-menu .sidebar-text,
body .sidebar-menu i,
body .sidebar-menu .fas,
body .sidebar-menu .far,
body .sidebar-menu .fab {
    color: white !important;
}

body .sidebar-menu .item:hover,
body .sidebar-menu .sidebar-link:hover,
body .sidebar-menu .item:hover i,
body .sidebar-menu .sidebar-link:hover i {
    color: white !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

body .sidebar-menu .item.active,
body .sidebar-menu .sidebar-link.active {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
}

body .sidebar-menu .item.active i,
body .sidebar-menu .sidebar-link.active i {
    color: white !important;
}

/* Light theme additional styling */
body .breadcrumb-nav {
    color: #424242 !important;
}

body .breadcrumb-link {
    color: #616161 !important;
}

body .breadcrumb-link:hover {
    color: #4183c4 !important;
}

body .breadcrumb-current {
    color: #424242 !important;
}

body .topic-title {
    color: #424242 !important;
}

body .unit-title {
    color: #424242 !important;
}

body .unit-description {
    color: #616161 !important;
}

body .unit-button {
    color: #4183c4 !important;
    border-color: #4183c4 !important;
}

body .unit-button:hover {
    background: #4183c4 !important;
    color: white !important;
}

body .add-class-btn {
    background: transparent !important;
    color: #4183c4 !important;
    border-color: #4183c4 !important;
}

body .add-class-btn:hover {
    background: rgba(65, 131, 196, 0.1) !important;
    color: #2c5aa0 !important;
    border-color: #2c5aa0 !important;
}

body .empty-state-title {
    color: #424242 !important;
}

body .empty-state-description {
    color: #616161 !important;
}

/* Light theme sidebar toggle and other elements */
body .sidebar-toggle {
    color: white !important;
    border-color: #2c5aa0 !important;
}

body .sidebar-toggle:hover {
    background: #2c5aa0 !important;
}

body .sidebar-header {
    background: inherit !important;
}

body .sidebar-title {
    color: white !important;
}

body .sidebar-footer {
    background: inherit !important;
}

body .sidebar-footer .username,
body .sidebar-footer .user-role {
    color: white !important;
}

body .sidebar-footer a {
    color: white !important;
}

/* Theme adjustments for custom icons */
body .topic-menu-icon-img {
    /* Icons look great on light backgrounds - no filter needed */
}

body .topic-menu-card:hover .topic-menu-icon-img {
    transform: scale(1.1);
    filter: brightness(1.1);
}