/**
 * Light Theme Enhancement for LMS
 * This file enhances styling specifically for light theme mode
 * while preserving course identity colors defined in course-colors.json
 */

/* Apply styles only when the light theme is active */
[data-theme="light"] {
  /* Core UI theme colors - these override for light theme */
  --bg-primary: #f5f3e6;
  --bg-secondary: #eae8da;
  --bg-tertiary: #ddd9cc;
  --text-primary: #2c2c2c;
  --text-secondary: #575757;
  --border-color: #c5c2b8;
  --second-border-color: #d8d4c9;
  --shadow-color: rgba(0, 0, 0, 0.15);
  --scrollbar-track: #e8e6d9;
  --code-bg: #e8e6d9;

  /* Note: Course identity colors remain untouched */
}

/* ===== Main Content Section - Ensure light theme is applied ===== */
[data-theme="light"] .main-content {
  background: var(--bg-secondary);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--second-border-color);
}

/* Advertisement area */
[data-theme="light"] .advertisement-area {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
}

/* Video container */
[data-theme="light"] .video-container {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
}

/* Video footer (preserves accent colors but changes base) */
[data-theme="light"] .video-footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
}

[data-theme="light"] .video-title {
  color: var(--text-primary);
}

[data-theme="light"] .video-description {
  color: var(--text-secondary);
}

/* ===== Lesson Content Section ===== */
[data-theme="light"] .lesson-content {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
}

/* Typography in lesson content */
[data-theme="light"] .lesson-content h1,
[data-theme="light"] .lesson-content h2,
[data-theme="light"] .lesson-content h3,
[data-theme="light"] .lesson-content h4,
[data-theme="light"] .lesson-content h5,
[data-theme="light"] .lesson-content h6 {
  color: var(--text-primary);
}

[data-theme="light"] .lesson-content p,
[data-theme="light"] .lesson-content li,
[data-theme="light"] .lesson-content blockquote {
  color: var(--text-secondary);
}

/* Code blocks in lessons */
[data-theme="light"] .lesson-content pre[class*="language-"] {
  background: var(--code-bg);
  border-color: var(--border-color);
}

[data-theme="light"] .lesson-content code:not([class*="language-"]) {
  background: var(--code-bg);
  color: var(--accent-color); /* Preserve accent color for inline code */
}

/* ===== Sidebar Section ===== */
[data-theme="light"] .sidebar {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .course-header {
  border-bottom-color: var(--border-color);
  /* Course title uses course identity colors from gradient - preserved */
}

/* Group headers */
[data-theme="light"] .group-header {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
}

[data-theme="light"] .group-title {
  color: var(--text-primary);
}

[data-theme="light"] .group-icon {
  color: var(--text-secondary);
}

/* Group number - preserve identity color */
[data-theme="light"] .group-number {
  /* No override, keeps identity accent color */
}



/* Active state - preserve identity colors */
[data-theme="light"] .lesson-item.active {
  /* No background override, keeps identity accent color */
  color: white; /* Ensure text is visible against accent background */
}

[data-theme="light"] .lesson-item::before {
  /* No override, keeps identity accent color */
}

/* Content toggle buttons - preserve active state colors */
[data-theme="light"] .content-toggle {
  background: var(--bg-tertiary);
}

[data-theme="light"] .toggle-btn {
  color: var(--text-secondary);
}

[data-theme="light"] .toggle-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-primary);
}

/* Active toggle - preserve identity colors */
[data-theme="light"] .toggle-btn.active {
  /* No background override, keeps identity accent color */
  color: white;
}

/* ===== Important Notes Section ===== */
[data-theme="light"] .important-notes {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
}

[data-theme="light"] .note-card {
  background: var(--bg-secondary);
  border-left-color: var(--accent-color); /* Preserve accent color */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .note-content {
  color: var(--text-secondary);
}

[data-theme="light"] .references-title {
  color: var(--text-secondary);
  border-bottom-color: var(--border-color);
}

[data-theme="light"] .references-title i {
  color: var(--accent-color); /* Preserve accent color */
}

/* Resource links */
[data-theme="light"] .resource-link {
  color: var(--accent-color); /* Preserve accent color */
}

[data-theme="light"] .resource-link:hover {
  background-color: var(--accent-color); /* Preserve accent color */
  color: white;
}

/* ===== Mobile UI Elements ===== */
[data-theme="light"] .mobile-header {
  background: var(--bg-secondary);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .mobile-title {
  color: var(--text-primary);
}

[data-theme="light"] .hamburger-menu span {
  background: var(--text-primary);
}

/* ===== Syntax Highlighting - Light Theme ===== */
[data-theme="light"] .token.comment,
[data-theme="light"] .token.prolog,
[data-theme="light"] .token.doctype,
[data-theme="light"] .token.cdata {
  color: #718096 !important;
}

[data-theme="light"] .token.function {
  color: #3182ce !important;
}

[data-theme="light"] .token.keyword {
  color: #805ad5 !important;
}

[data-theme="light"] .token.string {
  color: #38a169 !important;
}

[data-theme="light"] .token.number {
  color: #dd6b20 !important;
}

[data-theme="light"] .token.boolean {
  color: #dd6b20 !important;
}

[data-theme="light"] .token.operator {
  color: #319795 !important;
}

/* Animation for theme transitions */
.theme-transition,
.theme-transition * {
  transition: all 0.5s ease !important;
}