/* ==========================================
   DARK MODE - Global & Student Dashboard
   Triggered by html.dark-mode class
   Color palette matches /materials page:
     bg-primary:   #1a1a1a
     bg-secondary:  #242424
     text-primary:  #f5f5f5
     text-secondary: #a0a0a0
     text-tertiary:  #707070
     border:        rgba(255,255,255,0.1)
     hover:         rgba(255,255,255,0.05)
   ========================================== */

/* ---- Global Overrides ---- */
html.dark-mode body {
  background-color: #1a1a1a !important;
  color: #f5f5f5;
}

/* Dashboard page wrapper */
.dashboard-page-wrapper {
  background: white;
}

html.dark-mode .dashboard-page-wrapper {
  background: #1a1a1a !important;
}

/* Breadcrumb section */
html.dark-mode .breadcrumb-section {
  background: #1a1a1a !important;
}

/* bg-main-25 used as page section background */
html.dark-mode .bg-main-25 {
  background: #1a1a1a !important;
}

/* Tailwind bg utilities */
html.dark-mode .bg-gray-50 {
  background-color: #1a1a1a !important;
}

/* Footer */
html.dark-mode footer,
html.dark-mode .footer {
  background: #111111 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

html.dark-mode .footer a,
html.dark-mode footer a {
  color: #a0a0a0 !important;
}

html.dark-mode .footer a:hover,
html.dark-mode footer a:hover {
  color: #fff !important;
}

/* ---- White Backgrounds → Dark ---- */
html.dark-mode .bg-white,
html.dark-mode .stat-card-enhanced,
html.dark-mode .courses-management-section,
html.dark-mode .progress-course-card,
html.dark-mode .suggested-course-card,
html.dark-mode .quiz-score-card,
html.dark-mode .course-card-enhanced,
html.dark-mode .ai-feature-item,
html.dark-mode .empty-state-enhanced,
html.dark-mode .card,
html.dark-mode .rounded-16[style*="background"],
html.dark-mode .rounded-16.bg-white {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Catch inline white backgrounds */
html.dark-mode [style*="background: white"],
html.dark-mode [style*="background-color: white"],
html.dark-mode [style*="background: rgb(255, 255, 255)"],
html.dark-mode [style*="background-color: rgb(255, 255, 255)"],
html.dark-mode [style*="background:#fff"],
html.dark-mode [style*="background: #fff"] {
  background: #242424 !important;
}

/* Page-level wrappers with inline white bg → use page bg not card bg */
html.dark-mode [style*="min-height: 100vh"][style*="background: white"],
html.dark-mode [style*="min-height:100vh"][style*="background:white"] {
  background: #1a1a1a !important;
}

/* ---- Student Sidebar ---- */
html.dark-mode .dashboard-sidebar {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .dashboard-sidebar .sidebar-header {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .dashboard-sidebar .sidebar-user-name,
html.dark-mode .nav-menu-list__link span {
  color: #f5f5f5 !important;
}

html.dark-mode .dashboard-sidebar .sidebar-user-role {
  color: #a0a0a0 !important;
}

html.dark-mode .nav-menu-list__header span {
  color: #707070 !important;
}

html.dark-mode .nav-menu-list__link {
  color: #a0a0a0 !important;
}

html.dark-mode .nav-menu-list__link:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #f5f5f5 !important;
}

html.dark-mode .nav-menu-list__link.active {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #3b82f6 !important;
}

html.dark-mode .nav-menu-list__link i {
  color: #707070 !important;
}

html.dark-mode .nav-menu-list__link:hover i,
html.dark-mode .nav-menu-list__link.active i {
  color: #3b82f6 !important;
}

html.dark-mode .sidebar-logout {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* ---- Stats Cards ---- */
html.dark-mode .stat-card-enhanced {
  background: #242424 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .stat-card-enhanced:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .stat-card-enhanced h6 {
  color: #f5f5f5 !important;
}

html.dark-mode .text-neutral-400,
html.dark-mode .text-neutral-500 {
  color: #a0a0a0 !important;
}

/* ---- AI Showcase Section ---- */
html.dark-mode .ai-showcase {
  background: #1e1e1e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .ai-feature-item {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .ai-feature-item:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .ai-feature-item h3 {
  color: #f5f5f5 !important;
}

html.dark-mode .ai-feature-item p {
  color: #a0a0a0 !important;
}

html.dark-mode .ai-feature-large {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  color: #f5f5f5 !important;
}

html.dark-mode .ai-feature-large h3,
html.dark-mode .ai-feature-large p {
  color: white !important;
}

/* AI badges in dark mode */
html.dark-mode .ai-badge {
  opacity: 0.9;
}

/* Suggested course thumbnail dark */
html.dark-mode .suggested-thumb {
  background: #1a1a1a !important;
}

/* Progress course thumbnail dark */
html.dark-mode .progress-thumb {
  background: #1a1a1a !important;
}

/* Empty state backgrounds */
html.dark-mode .empty-state-enhanced {
  background: #1e1e1e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Quiz grade badge dark bg */
html.dark-mode .quiz-grade-badge {
  background: #242424 !important;
}

/* ---- Section Headers ---- */
html.dark-mode .section-title,
html.dark-mode .courses-management-section h3 {
  color: #f5f5f5 !important;
}

html.dark-mode .section-subtitle {
  color: #a0a0a0 !important;
}

/* ---- Course Cards ---- */
html.dark-mode .suggested-course-card {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .suggested-course-card:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark-mode .suggested-course-card h4 {
  color: #f5f5f5 !important;
}

html.dark-mode .suggested-course-card p {
  color: #a0a0a0 !important;
}

/* ---- Progress Course Cards ---- */
html.dark-mode .progress-course-card {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .progress-course-card:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark-mode .progress-course-card h4 {
  color: #f5f5f5 !important;
}

html.dark-mode .progress-course-card .progress-info p {
  color: #a0a0a0 !important;
}

html.dark-mode .course-tag {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #a0a0a0 !important;
}

/* Progress bar background */
html.dark-mode .progress-course-card div[style*="background: #e2e8f0"],
html.dark-mode .progress-course-card div[style*="background: rgb(226, 232, 240)"] {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* ---- Quiz Score Cards ---- */
html.dark-mode .quiz-score-card {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .quiz-score-card:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark-mode .quiz-score-card h4 {
  color: #f5f5f5 !important;
}

/* ---- Meeting Cards ---- */
html.dark-mode .course-card {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .course-card:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Thumbnail placeholders */
html.dark-mode .thumbnail-placeholder {
  background: rgba(255, 255, 255, 0.05) !important;
}

html.dark-mode .course-card__title {
  color: #f5f5f5 !important;
}

html.dark-mode .course-card__description {
  color: #a0a0a0 !important;
}

html.dark-mode .course-card__meta-item {
  color: #a0a0a0 !important;
}

/* ---- Empty State Containers ---- */
html.dark-mode .suggested-courses-empty-content h3,
html.dark-mode .in-progress-empty-content h3,
html.dark-mode .quiz-results-empty-content h3,
html.dark-mode .meetings-empty-content h3 {
  color: #f5f5f5 !important;
}

html.dark-mode .suggested-courses-empty-content p,
html.dark-mode .in-progress-empty-content p,
html.dark-mode .quiz-results-empty-content p,
html.dark-mode .meetings-empty-content p {
  color: #a0a0a0 !important;
}

/* Empty state illustration cards */
html.dark-mode .suggested-courses-empty-icon,
html.dark-mode .in-progress-empty-icon,
html.dark-mode .quiz-results-empty-icon,
html.dark-mode .meetings-empty-icon {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .suggested-courses-empty-icon-2,
html.dark-mode .suggested-courses-empty-icon-3,
html.dark-mode .in-progress-empty-icon-2,
html.dark-mode .in-progress-empty-icon-3,
html.dark-mode .quiz-results-empty-icon-2,
html.dark-mode .quiz-results-empty-icon-3,
html.dark-mode .meetings-empty-icon-2,
html.dark-mode .meetings-empty-icon-3 {
  background: #242424 !important;
  color: #a0a0a0 !important;
}

/* Empty state bg shapes */
html.dark-mode .suggested-courses-empty-bg-shape,
html.dark-mode .in-progress-empty-bg-shape,
html.dark-mode .quiz-results-empty-bg-shape,
html.dark-mode .meetings-empty-bg-shape {
  opacity: 0.2 !important;
}

/* Live meeting card badge dark */
html.dark-mode .live-badge-pulse {
  background: rgba(255, 255, 255, 0.15) !important;
  color: white !important;
}

html.dark-mode .live-dot {
  background: white !important;
}

/* ---- Course Tags dark ---- */
html.dark-mode .course-tag-videos {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #3b82f6 !important;
  border-color: rgba(59, 130, 246, 0.2) !important;
}

html.dark-mode .course-tag-duration {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #f59e0b !important;
  border-color: rgba(245, 158, 11, 0.2) !important;
}

/* Progress bar track dark */
html.dark-mode div[style*="background: #e2e8f0"],
html.dark-mode div[style*="background: rgb(226, 232, 240)"] {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Border separators dark */
html.dark-mode [style*="border-top: 1px solid #e2e8f0"],
html.dark-mode [style*="border-bottom: 1px solid #e2e8f0"],
html.dark-mode [style*="border-top: 1px solid rgb(226, 232, 240)"],
html.dark-mode [style*="border-bottom: 1px solid rgb(226, 232, 240)"] {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ---- Loading Skeleton ---- */
html.dark-mode .rounded-16 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Skeleton shimmer dark bg */
html.dark-mode .bg-white.rounded-16 {
  background: #242424 !important;
}

html.dark-mode .stat-card.bg-white {
  background: #242424 !important;
}

/* ---- Scrollbar ---- */
html.dark-mode ::-webkit-scrollbar {
  width: 8px;
}

html.dark-mode ::-webkit-scrollbar-track {
  background: #1a1a1a;
}

html.dark-mode ::-webkit-scrollbar-thumb {
  background: #3a3a3a;
  border-radius: 4px;
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #4a4a4a;
}

/* ---- Text Color Overrides ---- */
html.dark-mode [style*="color: #1e293b"],
html.dark-mode [style*="color: rgb(30, 41, 59)"] {
  color: #f5f5f5 !important;
}

html.dark-mode [style*="color: #64748b"],
html.dark-mode [style*="color: rgb(100, 116, 139)"] {
  color: #a0a0a0 !important;
}

html.dark-mode [style*="color: #94a3b8"],
html.dark-mode [style*="color: rgb(148, 163, 184)"] {
  color: #a0a0a0 !important;
}

/* ---- Border overrides ---- */
html.dark-mode [style*="border-bottom: 1px solid #e2e8f0"],
html.dark-mode [style*="border-top: 1px solid #e2e8f0"],
html.dark-mode [style*="border-bottom: 1px solid rgb(226, 232, 240)"],
html.dark-mode [style*="border-top: 1px solid rgb(226, 232, 240)"] {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode [style*="border: 1px solid #f1f5f9"],
html.dark-mode [style*="border: 1px solid rgb(241, 245, 249)"] {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode [style*="border-top: 1px solid #f1f5f9"],
html.dark-mode [style*="border-bottom: 1px solid #f1f5f9"] {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ---- Skeleton shimmer for dark mode ---- */
html.dark-mode [style*="animation: shimmer"],
html.dark-mode [style*="animation: skeleton-shimmer"] {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 25%, rgba(255, 255, 255, 0.12) 37%, rgba(255, 255, 255, 0.06) 63%) !important;
  background-size: 200% 100% !important;
}

/* Skeleton card borders in dark mode */
html.dark-mode [style*="border: 1px solid #f1f5f9"],
html.dark-mode [style*="border: 1px solid rgb(241, 245, 249)"] {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Skeleton progress bar bg */
html.dark-mode [style*="background: #e5e7eb"],
html.dark-mode [style*="background: rgb(229, 231, 235)"] {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Skeleton border separators */
html.dark-mode [style*="borderBottom: 1px solid #f1f5f9"],
html.dark-mode [style*="border-bottom: 1px solid #f1f5f9"] {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode [style*="borderTop: 1px solid #f1f5f9"],
html.dark-mode [style*="border-top: 1px solid #f1f5f9"] {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* ---- Header User Dropdown Dark Mode Toggle ---- */
.dark-mode-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-radius: 10px;
  transition: all 0.2s ease;
}

.dark-mode-toggle-row:hover {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}

.dark-mode-toggle-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.dark-mode-toggle-label i {
  font-size: 18px;
  width: 22px;
  text-align: center;
  color: #6b7280;
}

/* Toggle Switch */
.theme-toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.theme-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.theme-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #d1d5db;
  border-radius: 24px;
  transition: all 0.3s ease;
}

.theme-toggle-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.theme-toggle-switch input:checked + .theme-toggle-slider {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
}

.theme-toggle-switch input:checked + .theme-toggle-slider::before {
  transform: translateX(20px);
}

/* Dark mode adjustments for the toggle row itself */
html.dark-mode .dark-mode-toggle-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

html.dark-mode .dark-mode-toggle-label {
  color: #f5f5f5;
}

html.dark-mode .dark-mode-toggle-label i {
  color: #f59e0b;
}

/* ---- Header Dropdown in Dark Mode ---- */
html.dark-mode .header-user-dropdown {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .user-dropdown-header .user-name {
  color: #f5f5f5 !important;
}

html.dark-mode .user-dropdown-header .user-role {
  color: #a0a0a0 !important;
}

html.dark-mode .user-dropdown-divider {
  background: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .user-dropdown-item {
  color: #d1d5db !important;
}

html.dark-mode .user-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #f5f5f5 !important;
}

html.dark-mode .user-dropdown-item i {
  color: #9ca3af !important;
}

html.dark-mode .user-dropdown-item:hover i {
  color: #3b82f6 !important;
}

html.dark-mode .user-dropdown-item.text-danger {
  color: #f87171 !important;
}

html.dark-mode .user-dropdown-item.text-danger:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #f87171 !important;
}

html.dark-mode .user-dropdown-item.text-danger i {
  color: #f87171 !important;
}

/* Notification dropdown dark mode */
html.dark-mode .notif-tabs-nav {
  background: rgba(255, 255, 255, 0.05) !important;
}

html.dark-mode .notif-tab-btn {
  color: #d1d5db !important;
}

html.dark-mode .notif-tab-btn:hover {
  color: #f5f5f5 !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

html.dark-mode .notif-tab-btn.active {
  color: #f5f5f5 !important;
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
}

html.dark-mode .notif-empty i {
  color: #9ca3af !important;
}

html.dark-mode .notif-empty p {
  color: #e5e7eb !important;
}

html.dark-mode .notif-empty-sub {
  color: #9ca3af !important;
}

/* Modern dropdown dark mode */
html.dark-mode .modern-dropdown {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .dropdown-item-modern {
  color: #d1d5db !important;
}

html.dark-mode .dropdown-item-modern:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #f5f5f5 !important;
}

html.dark-mode .dropdown-item-modern i {
  color: #9ca3af !important;
}

html.dark-mode .dropdown-item-modern:hover i {
  color: #3b82f6 !important;
}

/* ==============================================
   FORM INPUTS, SELECTS, TEXTAREAS (Profile page)
   ============================================== */
html.dark-mode .form-control,
html.dark-mode .form-select,
html.dark-mode input[type="text"],
html.dark-mode input[type="email"],
html.dark-mode input[type="password"],
html.dark-mode input[type="tel"],
html.dark-mode input[type="number"],
html.dark-mode input[type="url"],
html.dark-mode input[type="search"],
html.dark-mode textarea,
html.dark-mode select {
  background: #242424 !important;
  color: #f5f5f5 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .form-control:focus,
html.dark-mode .form-select:focus,
html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus {
  background: #2a2a2a !important;
  color: #f5f5f5 !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

html.dark-mode .form-control::placeholder,
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
  color: #707070 !important;
}

/* Bootstrap utility class overrides for inputs */
html.dark-mode .bg-neutral-20,
html.dark-mode [class*="bg-neutral-2"] {
  background: #242424 !important;
}

html.dark-mode .border-neutral-30,
html.dark-mode [class*="border-neutral-3"] {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .text-neutral-700 {
  color: #f5f5f5 !important;
}

html.dark-mode .text-neutral-600 {
  color: #a0a0a0 !important;
}

/* Form labels */
html.dark-mode label,
html.dark-mode .form-label {
  color: #f5f5f5 !important;
}

/* Form helper text */
html.dark-mode .form-text,
html.dark-mode small.text-muted {
  color: #707070 !important;
}

/* ---- Tabs (Profile page) ---- */
html.dark-mode [style*="backgroundColor: '#f8fafc'"],
html.dark-mode [style*="background-color: #f8fafc"],
html.dark-mode [style*="background: #f8fafc"] {
  background: #1a1a1a !important;
}

html.dark-mode [style*="borderBottom: '1px solid #e5e7eb'"],
html.dark-mode [style*="border-bottom: 1px solid #e5e7eb"] {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

/* Tab buttons in dark mode */
html.dark-mode [style*="backgroundColor: '#ffffff'"][style*="color: '#1e40af'"] {
  background: #242424 !important;
  color: #3b82f6 !important;
}

html.dark-mode [style*="backgroundColor: 'transparent'"][style*="color: '#6b7280'"] {
  color: #a0a0a0 !important;
}

/* Nav tabs / nav pills generic */
html.dark-mode .nav-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .nav-tabs .nav-link {
  color: #a0a0a0 !important;
}

html.dark-mode .nav-tabs .nav-link:hover {
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #f5f5f5 !important;
}

html.dark-mode .nav-tabs .nav-link.active {
  background: #242424 !important;
  color: #3b82f6 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  border-bottom-color: #242424 !important;
}

/* ---- Profile Cards & Sections ---- */
html.dark-mode .bg-neutral-25,
html.dark-mode [class*="bg-neutral-25"] {
  background: #1e1e1e !important;
}

html.dark-mode .bg-success-25 {
  background: rgba(34, 197, 94, 0.1) !important;
}

html.dark-mode .bg-warning-25 {
  background: rgba(245, 158, 11, 0.1) !important;
}

html.dark-mode .bg-danger-25 {
  background: rgba(239, 68, 68, 0.1) !important;
}

html.dark-mode .shadow-sm {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Rounded cards with white bg */
html.dark-mode .rounded-10.bg-white,
html.dark-mode .rounded-14.bg-white,
html.dark-mode .rounded-16.bg-white {
  background: #242424 !important;
}

/* Profile page specific inline bg overrides */
html.dark-mode [style*="background: '#f8fafc'"],
html.dark-mode [style*="background: #f8fafc"],
html.dark-mode [style*="backgroundColor: '#f8fafc'"] {
  background: #1a1a1a !important;
}

html.dark-mode [style*="background: '#f1f5f9'"],
html.dark-mode [style*="background: #f1f5f9"],
html.dark-mode [style*="backgroundColor: '#f1f5f9'"] {
  background: #1e1e1e !important;
}

/* Table styling for dark mode */
html.dark-mode .table {
  color: #f5f5f5 !important;
}

html.dark-mode .table th {
  color: #a0a0a0 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .table td {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* ---- Border color overrides ---- */
html.dark-mode [style*="border: 1px solid #e5e7eb"],
html.dark-mode [style*="border: 1px solid rgb(229, 231, 235)"] {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode [style*="borderBottom: '1px solid #e5e7eb'"],
html.dark-mode [style*="borderTop: '1px solid #e5e7eb'"] {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ==============================================
   NOTES LISTING PAGE
   ============================================== */

/* Override notes CSS custom properties */
html.dark-mode {
  --notes-bg: #1a1a1a;
  --notes-bg-secondary: #242424;
  --notes-bg-hover: #2a2a2a;
  --notes-border: rgba(255, 255, 255, 0.1);
  --notes-text: #f5f5f5;
  --notes-text-secondary: #a0a0a0;
  --notes-text-tertiary: #707070;
}

html.dark-mode .notes-card,
html.dark-mode .note-item {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .notes-card:hover,
html.dark-mode .note-item:hover {
  background: #2a2a2a !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

html.dark-mode .notes-card h3,
html.dark-mode .notes-card h4,
html.dark-mode .note-item h3,
html.dark-mode .note-item h4,
html.dark-mode .note-item-title {
  color: #f5f5f5 !important;
}

html.dark-mode .notes-card p,
html.dark-mode .note-item p,
html.dark-mode .note-item-preview {
  color: #a0a0a0 !important;
}

html.dark-mode .note-item-date,
html.dark-mode .note-item-meta {
  color: #707070 !important;
}

/* Notes search input */
html.dark-mode .search-input,
html.dark-mode .notes-search-input {
  background: #242424 !important;
  color: #f5f5f5 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .search-input:focus,
html.dark-mode .notes-search-input:focus {
  background: #2a2a2a !important;
  border-color: #3b82f6 !important;
}

html.dark-mode .search-input::placeholder,
html.dark-mode .notes-search-input::placeholder {
  color: #707070 !important;
}

/* Notes filter/sort buttons */
html.dark-mode .notes-filter-btn,
html.dark-mode .notes-sort-btn {
  background: #242424 !important;
  color: #a0a0a0 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .notes-filter-btn:hover,
html.dark-mode .notes-sort-btn:hover {
  background: #2a2a2a !important;
  color: #f5f5f5 !important;
}

/* Notes page container */
html.dark-mode .notes-page-container,
html.dark-mode .notes-container {
  background: #1a1a1a !important;
}

/* Notes badges */
html.dark-mode .note-badge,
html.dark-mode .notes-badge {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #a0a0a0 !important;
}

/* Notes header section */
html.dark-mode .notes-header {
  background: #1a1a1a !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .notes-header h1,
html.dark-mode .notes-header h2 {
  color: #f5f5f5 !important;
}

/* Notes empty state */
html.dark-mode .notes-empty-state {
  color: #a0a0a0 !important;
}

/* ==============================================
   NOTES EDITOR PAGE
   ============================================== */
html.dark-mode .notes-editor-container {
  background: #1a1a1a !important;
}

html.dark-mode .notes-top-bar {
  background: #242424 !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .notes-title-input {
  color: #f5f5f5 !important;
  background: transparent !important;
}

html.dark-mode .notes-title-input::placeholder {
  color: #707070 !important;
}

html.dark-mode .notes-editor {
  color: #f5f5f5 !important;
}

/* Status indicator */
html.dark-mode .notes-status-indicator {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #707070 !important;
}

/* Action groups */
html.dark-mode .notes-action-group {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Notes buttons */
html.dark-mode .notes-btn {
  color: #f5f5f5 !important;
}

html.dark-mode .notes-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .notes-btn-ghost {
  color: #a0a0a0 !important;
}

html.dark-mode .notes-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #f5f5f5 !important;
}

html.dark-mode .notes-btn-toggle {
  background: #242424 !important;
  color: #a0a0a0 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .notes-btn-toggle.active {
  background: #3b82f6 !important;
  color: white !important;
}

/* Notes dropdown */
html.dark-mode .notes-dropdown-menu {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .notes-dropdown-item {
  color: #f5f5f5 !important;
}

html.dark-mode .notes-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

html.dark-mode .notes-dropdown-item i {
  color: #707070 !important;
}

html.dark-mode .notes-dropdown-divider {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ---- Editor.js (CodeX Editor) dark mode ---- */
html.dark-mode .codex-editor,
html.dark-mode .ce-block__content {
  color: #f5f5f5 !important;
}

html.dark-mode .ce-toolbar__plus,
html.dark-mode .ce-toolbar__settings-btn {
  background: #242424 !important;
  color: #a0a0a0 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .ce-toolbar__plus:hover,
html.dark-mode .ce-toolbar__settings-btn:hover {
  background: #2a2a2a !important;
  color: #f5f5f5 !important;
}

html.dark-mode .ce-inline-toolbar,
html.dark-mode .ce-conversion-toolbar,
html.dark-mode .ce-popover {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .ce-inline-toolbar__buttons .ce-inline-tool {
  color: #a0a0a0 !important;
}

html.dark-mode .ce-inline-toolbar__buttons .ce-inline-tool:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #f5f5f5 !important;
}

html.dark-mode .ce-popover__item {
  color: #f5f5f5 !important;
}

html.dark-mode .ce-popover__item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

html.dark-mode .ce-popover__item-icon {
  background: #1a1a1a !important;
  color: #a0a0a0 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .ce-popover__item-label {
  color: #f5f5f5 !important;
}

html.dark-mode .ce-popover__item-description {
  color: #707070 !important;
}

/* Editor.js content elements */
html.dark-mode .ce-paragraph {
  color: #f5f5f5 !important;
}

html.dark-mode .ce-header {
  color: #f5f5f5 !important;
}

html.dark-mode .ce-delimiter::before {
  color: #707070 !important;
}

html.dark-mode .ce-code__textarea {
  background: #1a1a1a !important;
  color: #f5f5f5 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .cdx-quote__text,
html.dark-mode .cdx-quote__caption {
  color: #a0a0a0 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ---- Notes Modals ---- */
html.dark-mode .new-note-modal,
html.dark-mode .share-note-modal-content {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}

html.dark-mode .new-note-modal h2,
html.dark-mode .new-note-modal h3,
html.dark-mode .share-note-modal-content h2,
html.dark-mode .share-note-modal-content h3 {
  color: #f5f5f5 !important;
}

html.dark-mode .new-note-modal p,
html.dark-mode .share-note-modal-content p {
  color: #a0a0a0 !important;
}

html.dark-mode .note-option-card {
  background: #1a1a1a !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .note-option-card:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: #1e1e1e !important;
}

html.dark-mode .note-option-card.selected {
  border-color: #3b82f6 !important;
  background: rgba(59, 130, 246, 0.1) !important;
}

html.dark-mode .note-option-card h4 {
  color: #f5f5f5 !important;
}

html.dark-mode .note-option-card p {
  color: #a0a0a0 !important;
}

/* Modal overlay */
html.dark-mode .modal-overlay,
html.dark-mode .notes-modal-overlay {
  background: rgba(0, 0, 0, 0.7) !important;
}

/* ---- Note meta bar ---- */
html.dark-mode .note-meta-bar {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .note-meta-bar span,
html.dark-mode .note-meta-bar p {
  color: #a0a0a0 !important;
}

/* ---- Voice block / Recording elements ---- */
html.dark-mode .vb-box {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .vb-transcript-body {
  background: #1a1a1a !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #f5f5f5 !important;
}

html.dark-mode .recording-btn-cancel {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #a0a0a0 !important;
}

html.dark-mode .recording-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #f5f5f5 !important;
}

/* ---- Generic dark text overrides ---- */
html.dark-mode [style*="color: '#1e293b'"],
html.dark-mode [style*="color: '#374151'"],
html.dark-mode [style*="color: '#1f2937'"] {
  color: #f5f5f5 !important;
}

html.dark-mode [style*="color: '#6b7280'"],
html.dark-mode [style*="color: '#64748b'"],
html.dark-mode [style*="color: '#9ca3af'"] {
  color: #a0a0a0 !important;
}

/* ---- Generic light background overrides ---- */
html.dark-mode [style*="background: '#ffffff'"],
html.dark-mode [style*="backgroundColor: '#ffffff'"],
html.dark-mode [style*="background: '#fff'"],
html.dark-mode [style*="backgroundColor: '#fff'"] {
  background: #242424 !important;
}

html.dark-mode [style*="background: '#f9fafb'"],
html.dark-mode [style*="backgroundColor: '#f9fafb'"],
html.dark-mode [style*="background: '#f3f4f6'"],
html.dark-mode [style*="backgroundColor: '#f3f4f6'"] {
  background: #1e1e1e !important;
}

/* ---- Modal close button ---- */
html.dark-mode .modal-close-btn,
html.dark-mode .notes-modal-close {
  color: #a0a0a0 !important;
}

html.dark-mode .modal-close-btn:hover,
html.dark-mode .notes-modal-close:hover {
  color: #f5f5f5 !important;
}

/* ==============================================
   HELP PAGE (Student & Teacher)
   ============================================== */

/* Help sidebar nav */
html.dark-mode .help-nav {
  background: #242424 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .help-nav h6 {
  color: #f5f5f5 !important;
}

html.dark-mode .help-nav-link {
  color: #a0a0a0 !important;
}

html.dark-mode .help-nav-link:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #3b82f6 !important;
}

html.dark-mode .help-nav-link.active {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
  color: white !important;
}

/* Help section cards */
html.dark-mode .help-section {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .help-section:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .help-section h3 {
  color: #f5f5f5 !important;
}

html.dark-mode .help-section p {
  color: #a0a0a0 !important;
}

/* FAQ items */
html.dark-mode .faq-item {
  background: #1e1e1e !important;
  border-left-color: #3b82f6 !important;
}

html.dark-mode [dir="rtl"] .faq-item {
  border-right-color: #3b82f6 !important;
}

html.dark-mode .faq-item:hover {
  background: #2a2a2a !important;
}

html.dark-mode .faq-question {
  color: #f5f5f5 !important;
}

html.dark-mode .faq-answer-content {
  color: #a0a0a0 !important;
}

/* ==============================================
   TERMS & PRIVACY PAGES
   ============================================== */

/* Terms/Privacy sidebar nav */
html.dark-mode .terms-nav {
  background: #242424 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .terms-nav h6 {
  color: #f5f5f5 !important;
}

html.dark-mode .terms-nav-link {
  color: #a0a0a0 !important;
}

html.dark-mode .terms-nav-link:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #3b82f6 !important;
}

html.dark-mode .terms-nav-link.active {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
  color: white !important;
}

/* Terms/Privacy section cards */
html.dark-mode .terms-section {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .terms-section:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .terms-section h3 {
  color: #f5f5f5 !important;
}

html.dark-mode .terms-section p {
  color: #a0a0a0 !important;
}

html.dark-mode .terms-section li {
  color: #a0a0a0 !important;
}

html.dark-mode .terms-section strong {
  color: #f5f5f5 !important;
}

/* Terms card (info boxes with left border) */
html.dark-mode .terms-card {
  background: #1e1e1e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  border-left-color: #3b82f6 !important;
}

html.dark-mode [dir="rtl"] .terms-card {
  border-right-color: #3b82f6 !important;
}

html.dark-mode .terms-card p {
  color: #a0a0a0 !important;
}

/* Colored content boxes (dark-friendly) */
html.dark-mode .success-box {
  background: rgba(16, 185, 129, 0.1) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}

html.dark-mode .danger-box {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

html.dark-mode .warning-box {
  background: rgba(251, 191, 36, 0.1) !important;
  border-color: rgba(251, 191, 36, 0.3) !important;
}

html.dark-mode .success-box h6 {
  color: #34d399 !important;
}

html.dark-mode .danger-box h6 {
  color: #f87171 !important;
}

html.dark-mode .warning-box h6 {
  color: #fbbf24 !important;
}

html.dark-mode .check-list li {
  color: #a0a0a0 !important;
}

html.dark-mode .x-list li {
  color: #a0a0a0 !important;
}

/* ==============================================
   CONTACT PAGE
   ============================================== */

/* Auth CSS variables override for dark mode */
html.dark-mode {
  --auth-text-primary: #f5f5f5;
  --auth-text-secondary: #a0a0a0;
  --auth-text-muted: #707070;
  --auth-border: rgba(255, 255, 255, 0.1);
  --auth-bg: #242424;
  --auth-bg-secondary: #1e1e1e;
  --auth-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --auth-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
}

/* Auth container */
html.dark-mode .auth-container {
  background: #1a1a1a !important;
}

/* Auth card */
html.dark-mode .auth-card {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .auth-title {
  color: #f5f5f5 !important;
}

html.dark-mode .auth-subtitle {
  color: #a0a0a0 !important;
}

/* Form inputs (auth.css) */
html.dark-mode .form-input {
  background: #1e1e1e !important;
  color: #f5f5f5 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .form-input:focus {
  background: #1e1e1e !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

html.dark-mode .form-input::placeholder {
  color: #707070 !important;
}

html.dark-mode .form-input[readonly] {
  background: #1a1a1a !important;
  color: #707070 !important;
}

html.dark-mode .form-label-static {
  color: #f5f5f5 !important;
}

html.dark-mode .form-label {
  color: #f5f5f5 !important;
}

/* Password toggle button */
html.dark-mode .password-toggle {
  color: #a0a0a0 !important;
}

html.dark-mode .password-toggle:hover {
  color: #f5f5f5 !important;
}

/* Input icons */
html.dark-mode .input-icon {
  color: #707070 !important;
}

/* Form buttons */
html.dark-mode .auth-btn {
  background: #3b82f6 !important;
  color: white !important;
  border-color: #3b82f6 !important;
}

html.dark-mode .auth-btn:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
}

html.dark-mode .google-btn,
html.dark-mode .btn-google {
  background: #242424 !important;
  color: #f5f5f5 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .google-btn:hover,
html.dark-mode .btn-google:hover {
  background: #2a2a2a !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

html.dark-mode .btn-submit,
html.dark-mode .auth-btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  color: white !important;
  border: none !important;
}

html.dark-mode .btn-submit:hover,
html.dark-mode .auth-btn-primary:hover {
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4) !important;
}

/* Divider */
html.dark-mode .divider {
  color: #707070 !important;
}

html.dark-mode .divider::before,
html.dark-mode .divider::after {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Links */
html.dark-mode .forgot-link,
html.dark-mode .signup-link,
html.dark-mode .signin-link {
  color: #60a5fa !important;
}

html.dark-mode .forgot-link:hover,
html.dark-mode .signup-link:hover,
html.dark-mode .signin-link:hover {
  color: #93bbfd !important;
}

/* Register split layout */
html:not(.dark-mode) .register-split__design {
  background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%) !important;
}

html.dark-mode .register-split__design {
  background: #161616 !important;
}

html.dark-mode .register-split__design-badge {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

html.dark-mode .register-split__design-title {
  color: #f5f5f5 !important;
}

html.dark-mode .register-split__design-subtitle {
  color: rgba(255, 255, 255, 0.6) !important;
}

html.dark-mode .register-split__feature {
  color: rgba(255, 255, 255, 0.85) !important;
}

html.dark-mode .register-split__form {
  background: #1a1a1a !important;
}

html.dark-mode .register-split__form-inner {
  background: transparent !important;
}

/* Register type toggle */
html.dark-mode .register-type-toggle {
  background: #1e1e1e !important;
}

html.dark-mode .register-type-btn {
  background: transparent !important;
  color: #a0a0a0 !important;
  border-color: transparent !important;
}

html.dark-mode .register-type-btn:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #f5f5f5 !important;
}

html.dark-mode .register-type-btn.active {
  background: #3b82f6 !important;
  color: white !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}

/* Register terms text */
html.dark-mode .register-terms-text {
  color: #a0a0a0 !important;
}

html.dark-mode .register-terms-text a {
  color: #60a5fa !important;
}

/* ==========================================
   TEACHER DASHBOARD - Dark Mode
   ========================================== */

/* Stat cards */
html.dark-mode .stat-card {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .stat-card:hover {
  border-color: #3b82f6 !important;
  box-shadow: 0 12px 24px rgba(59, 130, 246, 0.2) !important;
}

html.dark-mode .stat-card-value {
  color: #f5f5f5 !important;
}

html.dark-mode .stat-card-label {
  color: #a0a0a0 !important;
}

/* Teaching showcase */
html.dark-mode .teaching-showcase {
  background: linear-gradient(135deg, #1e1e1e 0%, #242424 100%) !important;
}

html.dark-mode .teaching-feature-item {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .teaching-feature-item:hover {
  border-color: #3b82f6 !important;
  box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2) !important;
}

html.dark-mode .teaching-feature-item h3,
html.dark-mode .teaching-feature-item p {
  color: #f5f5f5 !important;
}

html.dark-mode .teaching-feature-item p {
  color: #a0a0a0 !important;
}

/* Teaching feature large (gradient card) - keep gradient but adjust */
html.dark-mode .teaching-feature-large {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
}

/* Quick action cards */
html.dark-mode .quick-action-card {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .quick-action-card:hover {
  background: #2a2a2a !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 12px 24px rgba(59, 130, 246, 0.2) !important;
}

html.dark-mode .quick-action-title {
  color: #f5f5f5 !important;
}

html.dark-mode .quick-action-desc {
  color: #a0a0a0 !important;
}

/* Activity feed */
html.dark-mode .activity-feed {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .activity-feed:hover {
  border-color: #3b82f6 !important;
  box-shadow: 0 8px 16px rgba(59, 130, 246, 0.15) !important;
}

html.dark-mode .activity-item {
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

html.dark-mode .activity-item:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}

html.dark-mode .activity-title {
  color: #f5f5f5 !important;
}

html.dark-mode .activity-desc {
  color: #a0a0a0 !important;
}

html.dark-mode .activity-time {
  color: #707070 !important;
}

/* Chart cards */
html.dark-mode .chart-card {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .chart-card:hover {
  border-color: #3b82f6 !important;
  box-shadow: 0 8px 16px rgba(59, 130, 246, 0.15) !important;
}

html.dark-mode .chart-title {
  color: #f5f5f5 !important;
}

html.dark-mode .chart-subtitle {
  color: #a0a0a0 !important;
}

/* Courses management section */
html.dark-mode .courses-management-section .bg-white {
  background: #242424 !important;
}

html.dark-mode .courses-management-section .text-neutral-700 {
  color: #f5f5f5 !important;
}

html.dark-mode .courses-management-section .text-neutral-500 {
  color: #a0a0a0 !important;
}

/* Video cards */
html.dark-mode .video-card {
  background: #242424 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .video-card:hover {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .video-card h3 {
  color: #f5f5f5 !important;
}

html.dark-mode .video-card p {
  color: #a0a0a0 !important;
}

html.dark-mode .video-card > div:last-child {
  background: #1e1e1e !important;
  border-top-color: rgba(255, 255, 255, 0.05) !important;
}

/* Dropdown menus in dashboard */
html.dark-mode .dropdown-menu {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .dropdown-item {
  color: #f5f5f5 !important;
}

html.dark-mode .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

/* Actions button */
html.dark-mode .actions-btn {
  background: rgba(36, 36, 36, 0.95) !important;
  color: #a0a0a0 !important;
}

html.dark-mode .actions-btn:hover {
  background: #242424 !important;
  color: #f5f5f5 !important;
}

/* Stats badges */
html.dark-mode .video-card span[style*="background: #f1f5f9"] {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #a0a0a0 !important;
}

/* Loading skeleton */
html.dark-mode .bg-white.rounded-16 {
  background: #242424 !important;
}

/* ==========================================
   TEACHER EARNINGS - Dark Mode
   ========================================== */

/* Withdrawal modal - handled via isDark in component inline styles */

/* Payment method badge in table */
html.dark-mode .badge.bg-main-100.text-main-600 {
  background: rgba(59, 130, 246, 0.15) !important;
  color: #60a5fa !important;
}

/* Withdrawals table */
html.dark-mode table th {
  color: #f5f5f5 !important;
  background: #1e1e1e !important;
}

html.dark-mode table td {
  color: #a0a0a0 !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
}

html.dark-mode table tbody tr {
  background: #242424 !important;
}

html.dark-mode table tbody tr:hover {
  background: #2a2a2a !important;
}

/* ==========================================
   TEACHER PROFILE - Dark Mode
   ========================================== */

/* Tab section container */
html.dark-mode .bg-white.rounded-10 {
  background: #242424 !important;
}

/* Tab navigation header container - override inline background */
html.dark-mode .bg-white.rounded-10 > div[style*="background-color"] {
  background-color: #1e1e1e !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

/* Tab buttons - override all inline styles */
html.dark-mode .modern-tab-button[style*="font-weight: 600"] {
  /* Active tab */
  background-color: #242424 !important;
  color: #60a5fa !important;
  border-color: rgba(255, 255, 255, 0.1) rgba(255, 255, 255, 0.1) #242424 !important;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2) !important;
}

html.dark-mode .modern-tab-button[style*="font-weight: 500"] {
  /* Inactive tabs */
  color: #a0a0a0 !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

html.dark-mode .modern-tab-button[style*="font-weight: 500"]:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #f5f5f5 !important;
}

html.dark-mode .register-terms-text a:hover {
  color: #93bbfd !important;
}

/* Alert messages */
html.dark-mode .alert-success {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #4ade80 !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}

html.dark-mode .alert-error {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

/* Field errors */
html.dark-mode .field-error,
html.dark-mode .input-error-message {
  color: #f87171 !important;
}

html.dark-mode .form-input.error,
html.dark-mode .form-input.input-error {
  border-color: #ef4444 !important;
}

html.dark-mode .form-input.error:focus,
html.dark-mode .form-input.input-error:focus {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

/* Checkbox */
html.dark-mode .checkbox-label {
  color: #a0a0a0 !important;
}

html.dark-mode .checkbox-input {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: #1e1e1e !important;
}

html.dark-mode .checkbox-input:checked {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
}

/* Divider text */
html.dark-mode .divider-text {
  color: #707070 !important;
  background: #242424 !important;
}

/* Contact tabs */
html.dark-mode .contact-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .contact-tab {
  color: #a0a0a0 !important;
}

html.dark-mode .contact-tab:hover {
  color: #6366f1 !important;
  background: rgba(99, 102, 241, 0.1) !important;
}

html.dark-mode .contact-tab.active {
  color: #6366f1 !important;
  background: rgba(99, 102, 241, 0.15) !important;
}

/* Radio buttons (contact form) */
html.dark-mode .radio-label {
  background: #1e1e1e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .radio-label:hover {
  border-color: #6366f1 !important;
  background: #2a2a2a !important;
}

html.dark-mode .radio-input:checked + .radio-label {
  border-color: #6366f1 !important;
  background: rgba(99, 102, 241, 0.15) !important;
}

html.dark-mode .radio-label::before {
  border-color: #707070 !important;
  background: #1e1e1e !important;
}

html.dark-mode .radio-input:checked + .radio-label::before {
  border-color: #6366f1 !important;
  background: #6366f1 !important;
}

html.dark-mode .radio-text {
  color: #a0a0a0 !important;
}

html.dark-mode .radio-input:checked + .radio-label .radio-text {
  color: #6366f1 !important;
}

/* AI Chat container */
html.dark-mode .ai-chat-container {
  background: #1e1e1e !important;
}

html.dark-mode .ai-chat-messages::-webkit-scrollbar-thumb {
  background: #3a3a3a !important;
}

html.dark-mode .ai-chat-messages::-webkit-scrollbar-thumb:hover {
  background: #4a4a4a !important;
}

/* AI Chat bubbles */
html.dark-mode .ai-chat-message-assistant .ai-chat-bubble {
  background: #242424 !important;
  color: #f5f5f5 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* AI Chat input area */
html.dark-mode .ai-chat-input-area {
  background: #242424 !important;
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .ai-chat-input {
  background: #1e1e1e !important;
  color: #f5f5f5 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .ai-chat-input:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

html.dark-mode .ai-chat-input:disabled {
  background: #1a1a1a !important;
}

/* AI Chat predefined questions */
html.dark-mode .ai-chat-predefined {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .ai-chat-predefined-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #a0a0a0 !important;
}

html.dark-mode .ai-chat-predefined-btn:hover {
  background: #6366f1 !important;
  color: white !important;
}

html.dark-mode .ai-chat-predefined-toggle {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #a0a0a0 !important;
}

html.dark-mode .ai-chat-predefined-toggle:hover,
html.dark-mode .ai-chat-predefined-toggle.active {
  background: #6366f1 !important;
  color: white !important;
}

/* AI Chat loading & typing */
html.dark-mode .ai-chat-loading {
  color: #a0a0a0 !important;
}

html.dark-mode .ai-chat-spinner {
  border-color: rgba(255, 255, 255, 0.1) !important;
  border-top-color: #6366f1 !important;
}

html.dark-mode .ai-chat-typing-dots span {
  background: #707070 !important;
}

/* AI Chat code blocks */
html.dark-mode .ai-chat-content code {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Contact page heading & text */
html.dark-mode .contact-form-section h2 {
  color: #f5f5f5 !important;
}

html.dark-mode .contact-form-section h5 {
  color: #3b82f6 !important;
}

/* Submit button in dark mode */
html.dark-mode .btn-submit {
  color: white !important;
}

/* Password toggle */
html.dark-mode .password-toggle {
  color: #707070 !important;
}

html.dark-mode .password-toggle:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #a0a0a0 !important;
}

/* CTA sections in help/terms pages */
html.dark-mode .cta-section {
  background: linear-gradient(135deg, #1a1a1a 0%, #242424 100%) !important;
}

/* General h2/h3 headings color override */
html.dark-mode h2,
html.dark-mode h3 {
  color: #f5f5f5;
}

/* Text utility classes used across these pages */
html.dark-mode .text-neutral-900,
html.dark-mode .text-neutral-800 {
  color: #f5f5f5 !important;
}

html.dark-mode .text-neutral-600 {
  color: #a0a0a0 !important;
}

/* Lists inside dark mode */
html.dark-mode ul li,
html.dark-mode ol li {
  color: #a0a0a0;
}

/* Alert messages in dark mode */
html.dark-mode .alert-warning {
  background: rgba(251, 191, 36, 0.1) !important;
  border-color: rgba(251, 191, 36, 0.3) !important;
  color: #fbbf24 !important;
}

html.dark-mode .alert-success {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
  color: #34d399 !important;
}

html.dark-mode .alert-danger {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #f87171 !important;
}

/* ==============================================
   COURSE PLAYER PAGE
   ============================================== */

/* ---- Video Meta Bar ---- */
html.dark-mode .video-meta-bar {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .instructor-name-text {
  color: #f5f5f5 !important;
}

html.dark-mode .instructor-role {
  color: #707070 !important;
}

html.dark-mode .instructor-photo {
  border-color: #242424 !important;
}

html.dark-mode .course-pill {
  color: #a0a0a0 !important;
}

html.dark-mode .course-pill i {
  color: #60a5fa !important;
}

html.dark-mode .course-pill::before {
  color: #707070 !important;
}

html.dark-mode .course-pill:hover {
  color: #f5f5f5 !important;
}

html.dark-mode .course-pill:hover i {
  color: #3b82f6 !important;
}

/* Mobile course pills get a background in responsive CSS */
@media (max-width: 768px) {
  html.dark-mode .course-pill {
    background: rgba(255, 255, 255, 0.05) !important;
  }
}

/* ---- Course Player Page ---- */
html.dark-mode .course-player-wrapper {
  background: #1a1a1a !important;
}

/* ---- Course Details Card ---- */
html.dark-mode .course-details-card {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .video-title-display {
  color: #f5f5f5 !important;
}

html.dark-mode .description-block {
  background: #252934 !important;
  color: #a0a0a0 !important;
  padding: 1.5rem;
  border-radius: 12px;
}

html.dark-mode .desc-content {
  color: #a0a0a0 !important;
}

html.dark-mode .desc-content--clamped {
  color: #a0a0a0 !important;
}

html.dark-mode .expand-btn {
  background: none !important;
  color: #a0a0a0 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .expand-btn:hover {
  background: none !important;
  color: #f5f5f5 !important;
}

html.dark-mode .desc-content p,
html.dark-mode .desc-content ul,
html.dark-mode .desc-content ol,
html.dark-mode .desc-content li,
html.dark-mode .desc-content span,
html.dark-mode .desc-content blockquote {
  color: inherit !important;
}

html.dark-mode .desc-content h1,
html.dark-mode .desc-content h2,
html.dark-mode .desc-content h3,
html.dark-mode .desc-content h4,
html.dark-mode .desc-content h5,
html.dark-mode .desc-content h6 {
  color: #f5f5f5 !important;
}

html.dark-mode .desc-content a {
  color: #60a5fa !important;
}

html.dark-mode .desc-content code {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #f5f5f5 !important;
}

html.dark-mode .content-text {
  color: #a0a0a0 !important;
}

html.dark-mode .content-heading {
  color: #f5f5f5 !important;
}

/* Learning outcomes */
html.dark-mode .learning-outcomes {
  background: rgba(59, 130, 246, 0.08) !important;
  border-color: rgba(59, 130, 246, 0.2) !important;
}

html.dark-mode .outcomes-icon-wrapper {
  background: #242424 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .outcomes-header h3 {
  color: #f5f5f5 !important;
}

html.dark-mode .outcomes-list {
  color: #a0a0a0 !important;
}

html.dark-mode .outcomes-list p,
html.dark-mode .outcomes-list ul,
html.dark-mode .outcomes-list ol,
html.dark-mode .outcomes-list li {
  color: inherit !important;
}

/* Section divider */
html.dark-mode .section-divider {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

/* ---- Fresh Tabs ---- */
html.dark-mode .fresh-tabs-container {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .fresh-tabs-list {
  background: #242424 !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .fresh-tab {
  background: transparent !important;
  color: #a0a0a0 !important;
}

html.dark-mode .fresh-tab:hover {
  color: #f5f5f5 !important;
}

html.dark-mode .fresh-tab.active {
  color: #60a5fa !important;
  border-bottom-color: #60a5fa !important;
}

/* Modern tabs (deprecated but may still be used) */
html.dark-mode .modern-tabs {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .modern-tabs-list {
  background: #1e1e1e !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .modern-tab {
  color: #a0a0a0 !important;
}

html.dark-mode .modern-tab:hover {
  color: #f5f5f5 !important;
}

html.dark-mode .modern-tab.active {
  color: #3b82f6 !important;
  background: #242424 !important;
}

/* ---- Info Panels (tab content) ---- */
html.dark-mode .info-panel {
  background: #1e1e1e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .info-panel-title {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .info-panel-title h4 {
  color: #f5f5f5 !important;
}

html.dark-mode .info-panel-body {
  color: #a0a0a0 !important;
}

/* Empty panel */
html.dark-mode .empty-panel {
  background: #1e1e1e !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

html.dark-mode .empty-icon {
  background: #242424 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .empty-icon i {
  color: #707070 !important;
}

html.dark-mode .empty-panel h4 {
  color: #f5f5f5 !important;
}

html.dark-mode .empty-panel p {
  color: #a0a0a0 !important;
}

/* Empty state (quiz/general) */
html.dark-mode .empty-state {
  background: rgba(59, 130, 246, 0.05) !important;
  border-color: rgba(59, 130, 246, 0.15) !important;
}

html.dark-mode .empty-state h3 {
  color: #f5f5f5 !important;
}

html.dark-mode .empty-state p {
  color: #a0a0a0 !important;
}

/* ---- Sidebar Card ---- */
html.dark-mode .sidebar-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

html.dark-mode .sidebar-header {
  border-bottom-color: rgba(255, 255, 255, 0.15) !important;
  background: transparent !important;
}

html.dark-mode .sidebar-header h2 {
  color: #f5f5f5 !important;
}

html.dark-mode .progress-bar {
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
}

html.dark-mode .progress-fill {
  background: #f5f5f5 !important;
  box-shadow: none !important;
}

html.dark-mode .progress-text {
  color: #a0a0a0 !important;
}

html.dark-mode .sidebar-content::-webkit-scrollbar-track {
  background: transparent !important;
}

html.dark-mode .sidebar-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2) !important;
}

html.dark-mode .sidebar-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}

/* ---- Accordion (lesson sections) ---- */
html.dark-mode .accordion-item {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark-mode .accordion-item:hover {
  background: transparent !important;
}

html.dark-mode .accordion-trigger {
  color: #a0a0a0 !important;
  border-bottom-color: rgba(255, 255, 255, 0.15) !important;
  background: transparent !important;
}

html.dark-mode .accordion-trigger:hover {
  background: transparent !important;
  color: #f5f5f5 !important;
  border-bottom-color: #f5f5f5 !important;
}

html.dark-mode .accordion-trigger.active {
  background: transparent !important;
  color: #f5f5f5 !important;
  border-bottom-color: #f5f5f5 !important;
}

html.dark-mode .accordion-trigger-content .title {
  color: inherit !important;
}

html.dark-mode .accordion-trigger-content .subtitle {
  color: #9ca3af !important;
}

html.dark-mode .accordion-icon {
  color: #a0a0a0 !important;
}

html.dark-mode .accordion-content {
  background: transparent !important;
}

/* ---- Lesson Items ---- */
html.dark-mode .lesson-item {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .lesson-item:hover {
  background: #242424 !important;
  border-color: #f5f5f5 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .lesson-item.active {
  background: #2a2a2a !important;
  border-color: #f5f5f5 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .lesson-thumbnail {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
}

html.dark-mode .lesson-item:hover .lesson-thumbnail {
  box-shadow: none !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .lesson-item.active .lesson-thumbnail {
  box-shadow: none !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .lesson-thumbnail-placeholder {
  background: #2a2a2a !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
  color: #707070 !important;
}

html.dark-mode .lesson-item:hover .lesson-thumbnail-placeholder {
  background: #2a2a2a !important;
  color: #a0a0a0 !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .lesson-item.active .lesson-thumbnail-placeholder {
  background: #333333 !important;
  color: #a0a0a0 !important;
}

html.dark-mode .lesson-title {
  color: #f5f5f5 !important;
}

html.dark-mode .lesson-item.active .lesson-title {
  color: #f5f5f5 !important;
}

html.dark-mode .lesson-meta {
  color: #a0a0a0 !important;
}

html.dark-mode .lesson-meta i {
  color: #a0a0a0 !important;
}

html.dark-mode .lesson-item.active .lesson-meta {
  color: #a0a0a0 !important;
}

html.dark-mode .lesson-item.active .lesson-meta i {
  color: #a0a0a0 !important;
}

html.dark-mode .badge.free {
  background: #f5f5f5 !important;
  color: #0f0f0f !important;
  box-shadow: none !important;
}

html.dark-mode .lesson-item.active {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #1e40af 100%) !important;
}

html.dark-mode .lesson-title {
  color: #f5f5f5 !important;
}

html.dark-mode .lesson-meta {
  color: #707070 !important;
}

html.dark-mode .lesson-thumbnail-placeholder {
  background: #1e1e1e !important;
}

/* ---- Quiz Items ---- */
html.dark-mode .quiz-item {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

html.dark-mode .quiz-item:hover {
  border-color: #3b82f6 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .quiz-content h4 {
  color: #f5f5f5 !important;
}

html.dark-mode .quiz-content p {
  color: #a0a0a0 !important;
}

/* ---- Progress & Certificate Section ---- */
html.dark-mode .progress-certificate-section {
  background: #242424 !important;
  border-color: rgba(59, 130, 246, 0.15) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .progress-header-content h3 {
  color: #f5f5f5 !important;
}

html.dark-mode .progress-label {
  color: #a0a0a0 !important;
}

html.dark-mode .progress-value .separator {
  color: #707070 !important;
}

html.dark-mode .progress-value .total {
  color: #707070 !important;
}

html.dark-mode .progress-value .lessons-text {
  color: #a0a0a0 !important;
}

html.dark-mode .progress-percentage-large {
  color: #f5f5f5 !important;
}

/* Course progress bar in dark */
html.dark-mode .course-progress-bar {
  background: rgba(59, 130, 246, 0.05) !important;
  border-color: rgba(59, 130, 246, 0.1) !important;
}

/* ---- Video Toast ---- */
html.dark-mode .video-toast {
  background: #242424 !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .toast-title {
  color: #f5f5f5 !important;
}

html.dark-mode .toast-message {
  color: #a0a0a0 !important;
}

html.dark-mode .toast-progress-bar {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* ---- Course Info Cards ---- */
html.dark-mode .course-info-card {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

html.dark-mode .course-info-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .course-info-card .info-icon {
  background: #1e1e1e !important;
}

html.dark-mode .course-info-card .info-label {
  color: #707070 !important;
}

html.dark-mode .course-info-card .info-value {
  color: #f5f5f5 !important;
}

/* ---- Video Player Section header ---- */
html.dark-mode .player-title {
  color: #f5f5f5 !important;
}

html.dark-mode .player-close-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #a0a0a0 !important;
}

html.dark-mode .player-close-btn:hover {
  background: #ef4444 !important;
  color: white !important;
}

/* ---- Button overrides in dark mode ---- */
html.dark-mode .btn-primary:hover {
  background: #242424 !important;
}

/* ================================================
   AI QUIZ GENERATION MODAL
   ================================================ */
html.dark-mode .ai-quiz-modal-content {
  background: #242424 !important;
}

html.dark-mode .video-modal-header.ai-quiz-header {
  background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%) !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .modal-icon-wrapper {
  background: rgba(255, 255, 255, 0.15) !important;
}

html.dark-mode .modal-title-wrapper h4,
html.dark-mode .modal-subtitle {
  color: white !important;
}

html.dark-mode .video-modal-close {
  background: rgba(255, 255, 255, 0.15) !important;
  color: white !important;
}

html.dark-mode .video-modal-close:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}

/* Info Section */
html.dark-mode .ai-quiz-info {
  background: linear-gradient(135deg, rgba(30, 64, 175, 0.15) 0%, rgba(30, 58, 138, 0.15) 100%) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

html.dark-mode .info-icon {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  color: white !important;
}

html.dark-mode .info-content h5 {
  color: #f5f5f5 !important;
}

html.dark-mode .info-content p {
  color: #a0a0a0 !important;
}

html.dark-mode .length-item {
  color: #d1d5db !important;
}

html.dark-mode .length-item i {
  color: #60a5fa !important;
}

/* Video Selection */
html.dark-mode .video-selection-header h5 {
  color: #f5f5f5 !important;
}

html.dark-mode .stat-item {
  color: #a0a0a0 !important;
}

html.dark-mode .stat-item i {
  color: #10b981 !important;
}

html.dark-mode .video-selection-list {
  background: #1a1a1a !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .video-selection-item {
  background: #2a2a2a !important;
}

html.dark-mode .video-selection-item.disabled {
  background: #1e1e1e !important;
  opacity: 0.5;
}

html.dark-mode .video-number {
  color: #60a5fa !important;
  background: rgba(59, 130, 246, 0.2) !important;
}

html.dark-mode .video-selection-title {
  color: #f5f5f5 !important;
}

html.dark-mode .video-selection-badge.transcript-ready {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #6ee7b7 !important;
}

html.dark-mode .video-selection-badge.transcript-processing {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #93c5fd !important;
}

html.dark-mode .video-selection-badge.no-transcript {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #fca5a5 !important;
}

html.dark-mode .meta-item {
  color: #9ca3af !important;
}

/* Language Selection */
html.dark-mode .language-selection-header h5 {
  color: #f5f5f5 !important;
}

html.dark-mode .language-selection-header p {
  color: #a0a0a0 !important;
}

html.dark-mode .language-option-card {
  background: #2a2a2a !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .language-option-card:hover {
  background: #333333 !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

html.dark-mode .language-option-card.active {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: #3b82f6 !important;
}

html.dark-mode .language-name {
  color: #f5f5f5 !important;
}

html.dark-mode .language-icon {
  color: #60a5fa !important;
}

/* Footer */
html.dark-mode .video-modal-footer {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .btn-secondary {
  background: #242424 !important;
}

/* Mobile course pills in dark */
@media (max-width: 768px) {
  html.dark-mode .course-pill {
    background: rgba(255, 255, 255, 0.05) !important;
  }
}

/* ==============================================
   SKELETON LOADING (all pages)
   ============================================== */
html.dark-mode .skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.06) 25%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.06) 75%
  ) !important;
  background-size: 200% 100% !important;
}

html.dark-mode [dir="rtl"] .skeleton {
  background: linear-gradient(
    270deg,
    rgba(255, 255, 255, 0.06) 25%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.06) 75%
  ) !important;
  background-size: 200% 100% !important;
}

html.dark-mode .blog-card-skeleton,
html.dark-mode .course-card-skeleton,
html.dark-mode .stats-card-skeleton,
html.dark-mode .activity-item-skeleton,
html.dark-mode .ai-feature-skeleton {
  background: #242424 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .progress-course-skeleton,
html.dark-mode .quiz-result-skeleton {
  background: #1e1e1e !important;
}

html.dark-mode .sidebar-skeleton {
  background: #242424 !important;
}

html.dark-mode .course-preview-skeleton {
  background: #1a1a1a !important;
}

/* Global shimmer override — "shimmer" only appears in animation names,
   so [style*="shimmer"] safely catches ALL skeleton shimmer elements */
html.dark-mode [style*="shimmer"] {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.06) 25%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.06) 75%
  ) !important;
  background-size: 200% 100% !important;
}

/* Static gray/light backgrounds in skeletons */
html.dark-mode [style*="background: #e5e7eb"],
html.dark-mode [style*="background: rgb(229, 231, 235)"],
html.dark-mode [style*="background-color: #e5e7eb"],
html.dark-mode [style*="background-color: rgb(229, 231, 235)"] {
  background: rgba(255, 255, 255, 0.08) !important;
}

html.dark-mode [style*="background: #f8fafc"],
html.dark-mode [style*="background: rgb(248, 250, 252)"] {
  background: #1e1e1e !important;
}

html.dark-mode [style*="background: #f1f5f9"],
html.dark-mode [style*="background: rgb(241, 245, 249)"] {
  background: #1e1e1e !important;
}

/* Light borders in skeletons (#f1f5f9, #e2e8f0, #e5e5e5) */
html.dark-mode [style*="solid #f1f5f9"],
html.dark-mode [style*="solid rgb(241, 245, 249)"],
html.dark-mode [style*="solid #e2e8f0"],
html.dark-mode [style*="solid rgb(226, 232, 240)"],
html.dark-mode [style*="solid #e5e5e5"],
html.dark-mode [style*="solid rgb(229, 229, 229)"] {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Light gray input backgrounds (#f5f5f5) */
html.dark-mode [style*="background-color: #f5f5f5"],
html.dark-mode [style*="background-color: rgb(245, 245, 245)"] {
  background-color: #2a2a2a !important;
  color: #f5f5f5 !important;
}

/* Scoped skeleton helpers for dashboard-type skeletons */

/* Skeleton card borders within dashboard-skeleton sections */
html.dark-mode .dashboard-skeleton [style*="border"] {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ==============================================
   SKELETON CSS CLASSES (used across pages)
   ============================================== */
html.dark-mode .skel-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.06) 25%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.06) 75%
  ) !important;
  background-size: 200% 100% !important;
}

html.dark-mode .skel-border {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark-mode .skel-footer {
  background: #1e1e1e !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ==============================================
   COURSES LISTING PAGE (/courses)
   ============================================== */

/* Course cards (.video-card) */
html.dark-mode .video-card {
  background: #242424 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Category badge in course cards */
html.dark-mode .video-card [style*="linear-gradient(135deg, #dbeafe"],
html.dark-mode .video-card [style*="linear-gradient(135deg, rgb(219"] {
  background: rgba(59, 130, 246, 0.15) !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

/* Teacher avatar fallback */
html.dark-mode [style*="background: #dbeafe"],
html.dark-mode [style*="background: rgb(219, 234, 254)"] {
  background: rgba(59, 130, 246, 0.2) !important;
}

/* Course filter sections */
html.dark-mode .courses-browse-section .bg-white,
html.dark-mode .px-40.py-40.bg-white {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ---- Notes Page Skeleton ---- */
html.dark-mode .note-card-skeleton {
  background: #1e1e1e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .note-card-skeleton [style*="border-top"] {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ==============================================
   BLOG PAGE
   ============================================== */

/* ---- Blog Listing Cards ---- */
html.dark-mode .blog-card {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .blog-card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .blog-card__title {
  color: #f5f5f5 !important;
}

html.dark-mode .blog-card__description {
  color: #a0a0a0 !important;
}

html.dark-mode .blog-card__date {
  color: #707070 !important;
}

html.dark-mode .blog-card__meta {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .blog-card__author {
  color: #a0a0a0 !important;
}

html.dark-mode .reaction-item.inspire {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
}

html.dark-mode .reaction-item.disappoint {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
}

html.dark-mode .thumbnail-placeholder {
  background: rgba(72, 127, 255, 0.1) !important;
}

/* ---- Blog Skeleton (card bg already in skeleton section above) ---- */
html.dark-mode .pagination-skeleton .skeleton-page {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* ---- Blog Detail - Article ---- */
html.dark-mode .blog-article-header {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .blog-article-title {
  color: #f5f5f5 !important;
}

html.dark-mode .blog-article-content {
  color: #a0a0a0 !important;
}

html.dark-mode .blog-article-content h1,
html.dark-mode .blog-article-content h2,
html.dark-mode .blog-article-content h3,
html.dark-mode .blog-article-content h4,
html.dark-mode .blog-article-content h5,
html.dark-mode .blog-article-content h6 {
  color: #f5f5f5 !important;
}

html.dark-mode .blog-article-content h2 {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .blog-article-content p,
html.dark-mode .blog-article-content li {
  color: inherit !important;
}

html.dark-mode .blog-article-content strong {
  color: #f5f5f5 !important;
}

html.dark-mode .blog-article-content em {
  color: #a0a0a0 !important;
}

html.dark-mode .blog-article-content a {
  color: #60a5fa !important;
}

html.dark-mode .blog-article-content a:hover {
  color: #93bbfd !important;
}

html.dark-mode .blog-article-content blockquote {
  background: rgba(59, 130, 246, 0.08) !important;
  border-left-color: #60a5fa !important;
  color: #a0a0a0 !important;
}

html.dark-mode .blog-article-content code {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #f87171 !important;
}

html.dark-mode .blog-article-content table th {
  background: #1e1e1e !important;
  color: #f5f5f5 !important;
}

html.dark-mode .blog-article-content table td {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .blog-article-content table th {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .blog-article-content table tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.03) !important;
}

html.dark-mode .blog-article-content hr {
  border-top-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .blog-article-content li::marker {
  color: #60a5fa !important;
}

html.dark-mode figcaption {
  color: #707070 !important;
}

/* ---- Blog Detail - Sidebar ---- */
html.dark-mode .blog-info-item {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark-mode .blog-info-item i {
  color: #818cf8 !important;
}

html.dark-mode .info-label {
  color: #707070 !important;
}

html.dark-mode .info-value {
  color: #f5f5f5 !important;
}

/* Feedback buttons */
html.dark-mode .blog-feedback-btn {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #a0a0a0 !important;
}

html.dark-mode .blog-feedback-btn--inspire:hover,
html.dark-mode .blog-feedback-btn--inspire.active {
  border-color: #10b981 !important;
  background: rgba(16, 185, 129, 0.15) !important;
}

html.dark-mode .blog-feedback-btn--disappoint:hover,
html.dark-mode .blog-feedback-btn--disappoint.active {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.15) !important;
}

/* Related posts */
html.dark-mode .blog-related-card {
  background: #1e1e1e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .blog-related-card:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .blog-related-title {
  color: #f5f5f5 !important;
}

html.dark-mode .blog-related-date {
  color: #707070 !important;
}

html.dark-mode .blog-related-thumb {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Share section */
html.dark-mode .blog-share-description {
  color: #707070 !important;
}

html.dark-mode .blog-url-copy-input {
  background: #1e1e1e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #a0a0a0 !important;
}

html.dark-mode .image-zoom-button {
  background: rgba(0, 0, 0, 0.7) !important;
}

html.dark-mode .image-zoom-button i {
  color: #f5f5f5 !important;
}

/* Language switcher */
html.dark-mode .blog-language-segmented-control {
  background: #1e1e1e !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .blog-segment-btn {
  color: #707070 !important;
}

html.dark-mode .blog-segment-btn:hover {
  color: #a0a0a0 !important;
}

html.dark-mode .blog-segment-btn.active {
  background: #242424 !important;
  color: #f5f5f5 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* ==============================================
   QUIZ PAGES (Take, Results, Locked)
   ============================================== */

/* ---- Quiz Take Page ---- */
html.dark-mode .quiz-timer-modern {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .quiz-timer-modern.warning {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

html.dark-mode .timer-time {
  color: #f5f5f5 !important;
}

html.dark-mode .timer-label,
html.dark-mode .timer-title,
html.dark-mode .timer-subtitle {
  color: #a0a0a0 !important;
}

html.dark-mode .timer-warning {
  color: #f87171 !important;
}

html.dark-mode .question-card-modern {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .question-header-modern {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark-mode .question-text-modern {
  color: #f5f5f5 !important;
}

html.dark-mode .question-points-modern {
  color: #a0a0a0 !important;
}

html.dark-mode .option-card {
  background: #1e1e1e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .option-card:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(59, 130, 246, 0.5) !important;
}

html.dark-mode .option-input:checked + .option-indicator + .option-text {
  color: #f5f5f5 !important;
}

html.dark-mode .option-input:checked ~ .option-indicator {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
}

html.dark-mode .option-text {
  color: #a0a0a0 !important;
}

html.dark-mode .option-letter {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #a0a0a0 !important;
}

html.dark-mode .tf-card {
  background: #1e1e1e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .tf-input:checked ~ .tf-card {
  border-color: #3b82f6 !important;
  background: rgba(59, 130, 246, 0.1) !important;
}

html.dark-mode .tf-text {
  color: #a0a0a0 !important;
}

html.dark-mode .answer-textarea {
  background: #1e1e1e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #f5f5f5 !important;
}

html.dark-mode .answer-textarea::placeholder {
  color: #707070 !important;
}

html.dark-mode .char-count {
  color: #707070 !important;
}

html.dark-mode .quiz-submit-section {
  background: rgba(59, 130, 246, 0.08) !important;
  border-color: rgba(59, 130, 246, 0.2) !important;
}

html.dark-mode .submit-card h4 {
  color: #f5f5f5 !important;
}

html.dark-mode .submit-card p {
  color: #a0a0a0 !important;
}

/* Sidebar */
html.dark-mode .progress-card-modern,
html.dark-mode .quiz-info-modern {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .progress-header {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .progress-header h3,
html.dark-mode .quiz-info-modern h3 {
  color: #f5f5f5 !important;
}

html.dark-mode .circle-bg {
  stroke: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .circle {
  stroke: #3b82f6 !important;
}

html.dark-mode .percentage {
  color: #60a5fa !important;
}

html.dark-mode .progress-stat {
  background: #1e1e1e !important;
}

html.dark-mode .stat-label,
html.dark-mode .info-label {
  color: #a0a0a0 !important;
}

html.dark-mode .stat-value,
html.dark-mode .info-value {
  color: #60a5fa !important;
}

html.dark-mode .question-nav-btn {
  background: #1e1e1e !important;
  color: #a0a0a0 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .question-nav-btn:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

html.dark-mode .question-nav-btn.answered {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #60a5fa !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
}

html.dark-mode .info-item {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* ---- Quiz Results Page ---- */
html.dark-mode .quiz-result-hero {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .hero-bg-pattern {
  opacity: 0.03 !important;
}

html.dark-mode .quiz-title-hero {
  color: #f5f5f5 !important;
}

html.dark-mode .quiz-subtitle {
  color: #a0a0a0 !important;
}

html.dark-mode .score-subtitle {
  color: #707070 !important;
}

html.dark-mode .passing-indicator {
  background: rgba(255, 255, 255, 0.05) !important;
}

html.dark-mode .passing-indicator-text,
html.dark-mode .passing-score {
  color: #a0a0a0 !important;
}

html.dark-mode .stat-card-mini {
  background: #1e1e1e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .stat-mini-label {
  color: #707070 !important;
}

html.dark-mode .stat-mini-value {
  color: #f5f5f5 !important;
}

html.dark-mode .success-banner,
html.dark-mode .retry-banner {
  background: rgba(59, 130, 246, 0.08) !important;
  border-color: rgba(59, 130, 246, 0.2) !important;
}

html.dark-mode .banner-content h3 {
  color: #f5f5f5 !important;
}

html.dark-mode .banner-content p {
  color: #a0a0a0 !important;
}

/* ---- Quiz Locked Page ---- */
html.dark-mode .locked-alert-banner {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .locked-alert-banner.warning {
  background: rgba(251, 146, 60, 0.1) !important;
  border-color: rgba(251, 146, 60, 0.3) !important;
}

html.dark-mode .locked-alert-banner.success {
  background: rgba(34, 197, 94, 0.1) !important;
  border-color: rgba(34, 197, 94, 0.3) !important;
}

html.dark-mode .alert-content h2 {
  color: #f5f5f5 !important;
}

html.dark-mode .alert-content p {
  color: #a0a0a0 !important;
}

html.dark-mode .stat-card-locked {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .stat-card-label {
  color: #707070 !important;
}

html.dark-mode .stat-card-value {
  color: #f5f5f5 !important;
}

html.dark-mode .attempts-history-section {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .section-header h3 {
  color: #f5f5f5 !important;
}

html.dark-mode .attempt-count-badge {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #a0a0a0 !important;
}

html.dark-mode .attempt-card {
  background: #1e1e1e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .attempt-card.passed {
  border-left-color: #22c55e !important;
}

html.dark-mode .attempt-card.failed {
  border-left-color: #ef4444 !important;
}

html.dark-mode .attempt-label {
  color: #a0a0a0 !important;
}

html.dark-mode .meta-item {
  color: #707070 !important;
}

html.dark-mode .sidebar-card {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .sidebar-card-title {
  color: #f5f5f5 !important;
}

html.dark-mode .detail-label {
  color: #707070 !important;
}

html.dark-mode .detail-value {
  color: #f5f5f5 !important;
}

html.dark-mode .detail-item-row {
  background: rgba(255, 255, 255, 0.03) !important;
}

html.dark-mode .next-step-box {
  background: #1e1e1e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .step-content h4 {
  color: #f5f5f5 !important;
}

html.dark-mode .step-content p {
  color: #a0a0a0 !important;
}

/* ==============================================
   COURSE PLAYER SIDEBAR (Modern YouTube Style)
   ============================================== */

html.dark-mode .sidebar {
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

html.dark-mode .sidebar-card {
  background: #242424 !important;
  box-shadow: none !important;
}

html.dark-mode .sidebar-header {
  background: #242424 !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .sidebar-header h2 {
  color: #f5f5f5 !important;
}

html.dark-mode .sidebar-header h2 i {
  color: #aaa !important;
}

html.dark-mode .progress-bar {
  background: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .progress-fill {
  background: #3ea6ff !important;
}

html.dark-mode .progress-text {
  color: #aaa !important;
}

html.dark-mode .accordion-item {
  background: #242424 !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .accordion-item:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}

html.dark-mode .accordion-trigger {
  color: #f5f5f5 !important;
}

html.dark-mode .accordion-trigger:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

html.dark-mode .accordion-trigger.active {
  background: rgba(255, 255, 255, 0.06) !important;
}

html.dark-mode .accordion-trigger-content .title {
  color: #f5f5f5 !important;
}

html.dark-mode .accordion-trigger-content .subtitle {
  color: #aaa !important;
}

html.dark-mode .accordion-icon {
  color: #aaa !important;
}

html.dark-mode .accordion-content {
  background: #242424 !important;
}

html.dark-mode .lesson-item {
  background: transparent !important;
}

html.dark-mode .lesson-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

html.dark-mode .lesson-item.active {
  background: rgba(255, 255, 255, 0.12) !important;
  border-left-color: #3ea6ff !important;
}

html.dark-mode .lesson-thumbnail-placeholder {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #aaa !important;
}

html.dark-mode .lesson-title {
  color: #f5f5f5 !important;
}

html.dark-mode .lesson-meta {
  color: #aaa !important;
}

html.dark-mode .badge.free {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #aaa !important;
}

html.dark-mode .badge.completed {
  background: rgba(34, 197, 94, 0.2) !important;
  color: #4ade80 !important;
}

/* ==============================================
   MEETINGS PAGES (List & Detail)
   ============================================== */

/* Tabs */
html.dark-mode .meet-tabs-wrapper {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .meet-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .meet-tab {
  color: #a0a0a0 !important;
}

html.dark-mode .meet-tab:hover {
  background: rgba(59, 130, 246, 0.1) !important;
  color: #60a5fa !important;
}

html.dark-mode .meet-tab.active {
  color: #60a5fa !important;
  border-bottom-color: #60a5fa !important;
}

html.dark-mode .meet-tab.active::after {
  background: #60a5fa !important;
}

/* Meeting Cards */
html.dark-mode .meeting-card {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .meeting-card:hover {
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15) !important;
}

html.dark-mode .meeting-icon.past {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #a0a0a0 !important;
}

html.dark-mode .meeting-title {
  color: #f5f5f5 !important;
}

html.dark-mode .meeting-meta {
  color: #a0a0a0 !important;
}

html.dark-mode .meeting-description {
  color: #a0a0a0 !important;
}

/* Meeting Show Page */
html.dark-mode .meeting-show-header {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .meeting-show-title {
  color: #f5f5f5 !important;
}

html.dark-mode .meeting-show-description {
  color: #a0a0a0 !important;
}

html.dark-mode .meeting-status-badge.live {
  background: #ea4335 !important;
  color: white !important;
}

html.dark-mode .meeting-status-badge.upcoming {
  background: #1a73e8 !important;
  color: white !important;
}

html.dark-mode .meeting-status-badge.ended {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #a0a0a0 !important;
}

/* Buttons */
html.dark-mode .btn-meet-primary {
  background: #1a73e8 !important;
  color: white !important;
}

html.dark-mode .btn-meet-primary:hover {
  background: #1765cc !important;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15) !important;
}

html.dark-mode .btn-meet-outline {
  background: #242424 !important;
  color: #60a5fa !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .btn-meet-outline:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: #60a5fa !important;
}

html.dark-mode .btn-meet-live {
  background: #ea4335 !important;
  color: white !important;
}

html.dark-mode .btn-meet-live:hover {
  background: #d33426 !important;
}

/* Info Cards */
html.dark-mode .info-card {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .info-card:hover {
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15) !important;
}

html.dark-mode .info-card-icon.time {
  background: rgba(26, 115, 232, 0.2) !important;
  color: #60a5fa !important;
}

html.dark-mode .info-card-icon.duration {
  background: rgba(249, 171, 0, 0.2) !important;
  color: #fbbf24 !important;
}

html.dark-mode .info-card-icon.course {
  background: rgba(52, 168, 83, 0.2) !important;
  color: #4ade80 !important;
}

html.dark-mode .info-card-icon.participants {
  background: rgba(234, 67, 53, 0.2) !important;
  color: #f87171 !important;
}

html.dark-mode .info-card-title {
  color: #a0a0a0 !important;
}

html.dark-mode .info-card-value {
  color: #f5f5f5 !important;
}

html.dark-mode .info-card-subtitle {
  color: #a0a0a0 !important;
}

/* Content Section */
html.dark-mode .content-section {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .section-title {
  color: #f5f5f5 !important;
}

html.dark-mode .section-title i {
  color: #a0a0a0 !important;
}

/* Detail Items */
html.dark-mode .detail-item {
  background: #1e1e1e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .detail-icon {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #60a5fa !important;
}

html.dark-mode .detail-label {
  color: #a0a0a0 !important;
}

html.dark-mode .detail-value {
  color: #f5f5f5 !important;
}

html.dark-mode .detail-text {
  color: #a0a0a0 !important;
}

/* Meeting participants list */
html.dark-mode .participants-list {
  background: #1e1e1e !important;
}

html.dark-mode .participant-item {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark-mode .participant-name {
  color: #f5f5f5 !important;
}

html.dark-mode .participant-role {
  color: #a0a0a0 !important;
}

/* Empty state */
html.dark-mode .empty-state {
  background: #242424 !important;
}

html.dark-mode .empty-state-title {
  color: #f5f5f5 !important;
}

html.dark-mode .empty-state-text {
  color: #a0a0a0 !important;
}

html.dark-mode .empty-state-icon {
  color: #707070 !important;
}

/* Share link section */
html.dark-mode .share-link-section {
  background: #1e1e1e !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-mode .share-link-input {
  background: #242424 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #f5f5f5 !important;
}

html.dark-mode .share-link-btn {
  background: #3b82f6 !important;
  color: white !important;
}

html.dark-mode .share-link-btn:hover {
  background: #2563eb !important;
}

/* Empty state illustration circles */
html.dark-mode .courses-empty-icon-2,
html.dark-mode .courses-empty-icon-3 {
  background: #2a2a2a !important;
}

/* Empty state circle bg */
html.dark-mode [style*="linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%)"][style*="border-radius: 50%"],
html.dark-mode [style*="border-radius"][style*="50%"][style*="dbeafe"] {
  background: rgba(59, 130, 246, 0.15) !important;
}