/* =====================================================
   LIGHT THEME - Portal
   Complete overrides for light theme consistency
   ===================================================== */

/* ==================== VARIABLES ==================== */
html.light {
  --bg-primary: #ffffff;
  --bg-secondary: #f9faf9;
  --bg-tertiary: #f1f6f4;
  --text-primary: #0e1c0f;
  --text-secondary: #4c584c;
  --text-muted: #6a7769;
  --border-color: #e4e9e3;
  --card-bg: #ffffff;
  --navbar-bg: rgba(255, 255, 255, 0.95);
  --sidebar-bg: #f9faf9;
  --input-bg: #ffffff;
  --modal-bg: #ffffff;
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --hero-bg: linear-gradient(135deg, #f9faf9 0%, #e4e9e3 100%);
}

/* ==================== BASE ELEMENTS ==================== */
html.light body { background-color: var(--bg-primary); color: var(--text-primary); }
html.light .card { background: var(--card-bg); border-color: var(--border-color); color: var(--text-primary); }
html.light .card-header { background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%); border-bottom-color: var(--border-color); color: var(--text-primary); }
html.light .card-header.title-card { background: var(--bg-secondary); }
html.light .dropdown-menu { background-color: var(--card-bg); border-color: var(--border-color); }
html.light .dropdown-item { color: var(--text-primary); }
html.light .dropdown-item:hover { background-color: var(--bg-secondary); }
html.light .table { color: var(--text-primary); }
html.light .table > :not(caption) > * > * { background: transparent; border-color: var(--border-color); color: var(--text-primary); }

/* ==================== HEADER / NAVBAR ==================== */
html.light .modern-header { background: rgba(255, 255, 255, 0.85) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
html.light .modern-header.scrolled { background: rgba(255, 255, 255, 0.95) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
html.light .modern-header .navbar-brand,
html.light .modern-header .brand-text { color: #063d2b !important; }
html.light .modern-header .nav-link { color: #063d2b !important; }
html.light .modern-header .nav-link:hover { background: rgba(6, 61, 43,0.08); color: #063d2b !important; }
html.light .modern-header .navbar-toggler { color: #063d2b; }
html.light .modern-header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2830, 64, 175, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
html.light .modern-header .navbar-auth .btn-outline-light,
html.light .modern-header .navbar-auth .btn-outline-primary { color: #063d2b; border-color: #063d2b; background: transparent; }
html.light .modern-header .navbar-auth .btn-outline-light:hover,
html.light .modern-header .navbar-auth .btn-outline-primary:hover { background: #063d2b; color: #fff; }

/* Authenticated navbar */
html.light .navbar-auth { background-color: var(--navbar-bg) !important; border-bottom: 1px solid var(--border-color); }
html.light .navbar-auth .navbar-brand,
html.light .navbar-auth .nav-link { color: var(--text-primary) !important; }
html.light .navbar-auth .nav-link:hover { color: var(--primary) !important; background: var(--bg-secondary); }

/* ==================== HERO SECTION ==================== */
html.light .hero-section { background: var(--hero-bg) !important; }
html.light .hero-bg { background: radial-gradient(1200px 600px at -10% -20%, rgba(0, 201, 120,0.08), transparent 60%), linear-gradient(180deg, rgba(0, 201, 120,0.04), transparent 55%); }
html.light .hero-title { color: #202d20 !important; }
html.light .hero-subtitle { color: #6a7769 !important; }
html.light .feature-item { color: #3a433a !important; }

/* Hero Stats Cards */
html.light .hero-stat-card { background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06); }
html.light .hero-stat-card:hover { box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1); }
html.light .hero-stat-icon { background: linear-gradient(135deg, #00c978, #063d2b); color: #001b10; box-shadow: none; }
html.light .hero-stat-number { color: #063d2b !important; }
html.light .hero-stat-label { color: #4c584c !important; }

/* Dashboard Preview */
html.light .dashboard-preview { background: #ffffff !important; box-shadow: 0 20px 40px rgba(0,0,0,0.08); }
html.light .preview-header { background: #f9faf9 !important; border-bottom: 1px solid #e4e9e3; }
html.light .preview-title { color: #3a433a !important; }
html.light .chart-container { background: linear-gradient(135deg, #f1f6f4, #e4e9e3); }
html.light .metric-card { background: #f9faf9 !important; }
html.light .metric-value { color: #063d2b !important; }
html.light .metric-label { color: #6a7769 !important; }

/* ==================== FEATURES SECTION ==================== */
html.light .features-section { background: #ffffff; }
html.light .features-section .section-title { color: #063d2b; }
html.light .features-section .section-title::after { background: linear-gradient(90deg, #00c978, #063d2b); }
html.light .features-section .section-subtitle { color: #6a7769; }
html.light .feature-card { background: #ffffff; border: 1px solid #e4e9e3; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
html.light .feature-card::before { background: linear-gradient(90deg, #00c978, #063d2b); }
html.light .feature-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); border-color: #ced7ce; }
html.light .feature-title { color: #063d2b; }
html.light .feature-card:hover .feature-title { color: #00c978; }
html.light .feature-description { color: #6a7769; }
html.light .feature-icon { background: linear-gradient(135deg, #00c978, #063d2b); color: #001b10; box-shadow: none; }

/* ==================== STATISTICS SECTION ==================== */
html.light .statistics-section { background: linear-gradient(135deg, #00c978 0%, #063d2b 100%); }
html.light .statistics-section .section-title { color: #ffffff; }
html.light .statistics-section .section-subtitle { color: rgba(255, 255, 255, 0.9); }
html.light .stat-card { background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.2); }
html.light .stat-card:hover { background: rgba(255, 255, 255, 0.2); }

/* ==================== CTA SECTION ==================== */
html.light .cta-card { background: linear-gradient(135deg, #063d2b 0%, #00c978 100%) !important; }
html.light .cta-section .card { background: linear-gradient(135deg, #063d2b 0%, #00c978 100%) !important; }
html.light .cta-section .card-body { color: #202d20 !important; }
html.light .cta-title { color: #202d20 !important; text-shadow: none; font-weight: 700; }
html.light .cta-text { color: #202d20 !important; text-shadow: none; font-weight: 500; }
html.light .cta-section h2,
html.light .cta-section .h3 { color: #202d20 !important; text-shadow: none; font-weight: 700; }
html.light .cta-section p,
html.light .cta-section .lead { color: #202d20 !important; text-shadow: none; font-weight: 500; }
html.light .cta-section .btn-light { background: #202d20; color: #ffffff; border-color: #202d20; font-weight: 700; }
html.light .cta-section .btn-light:hover { background: #0e1c0f; color: #ffffff; }
html.light .final-cta-section { background: linear-gradient(135deg, #063d2b 0%, #00c978 100%); }
html.light .cta-buttons .btn-light { background: #ffffff; color: #063d2b; border-color: #ffffff; }
html.light .cta-buttons .btn-light:hover { background: #f0fdfa; }
html.light .cta-buttons .btn-outline-light { color: #ffffff; border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.1); }

/* ==================== FOOTER ==================== */
html.light footer,
html.light .app-footer { background: var(--bg-secondary); color: var(--text-secondary) !important; border-top: 1px solid var(--border-color); }
html.light .app-footer .nav-link { color: var(--text-secondary); }
html.light .app-footer .nav-link:hover { color: var(--text-primary); }

/* ==================== FORMS ==================== */
html.light .form-control,
html.light .form-select { background-color: var(--input-bg); border-color: var(--border-color); color: var(--text-primary); }
html.light .form-control:focus,
html.light .form-select:focus { background-color: var(--input-bg); border-color: var(--primary); color: var(--text-primary); }
html.light .form-control::placeholder { color: var(--text-muted); }
html.light .form-label { color: var(--text-primary); }
html.light .input-group-text { background-color: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-secondary); }

/* ==================== MODALS ==================== */
html.light .modal-content { background-color: var(--modal-bg); border-color: var(--border-color); color: var(--text-primary); }
html.light .modal-header { background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%); border-bottom-color: var(--border-color); }
html.light .modal-footer { background-color: var(--bg-secondary); border-top-color: var(--border-color); }
html.light .btn-close { filter: none; }

/* ==================== TOOLTIPS ==================== */
html.light .tooltip .tooltip-inner { background: rgba(24, 28, 24, 0.92); color: #fff; }
html.light .tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: rgba(24, 28, 24,0.92) !important; }
html.light .tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: rgba(24, 28, 24,0.92) !important; }
html.light .tooltip.bs-tooltip-start .tooltip-arrow::before { border-left-color: rgba(24, 28, 24,0.92) !important; }
html.light .tooltip.bs-tooltip-end .tooltip-arrow::before { border-right-color: rgba(24, 28, 24,0.92) !important; }

/* ==================== MEDIA BADGES ==================== */
html.light .media-percentage { border-color: rgba(0,0,0,0.1); }
html.light .media-percentage.positive { color: #00c978; border-color: rgba(0, 201, 120, 0.3); }
html.light .media-percentage.negative { color: #dc2626; border-color: rgba(220, 38, 38, 0.3); }
html.light .media-percentage.neutral { color: #6c757d; border-color: rgba(108,117,125,0.3); }

/* ==================== BUTTONS ==================== */
html.light .btn-terminal-signin { 
  background-color: var(--bg-primary); 
  color: var(--text-primary); 
  border: 2px solid #000000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}
html.light .btn-terminal-signin:hover { 
  background-color: #f5f5f5;
  border-color: #333333;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}
html.light .theme-toggle-btn { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-primary); }
html.light .theme-toggle-btn:hover { background: var(--bg-tertiary); }

/* ==================== OFFCANVAS (Mobile) ==================== */
html.light .offcanvas { background-color: var(--modal-bg); color: var(--text-primary); }
html.light .offcanvas .nav-link { color: var(--text-primary); }
html.light .offcanvas .nav-link:hover { background-color: var(--bg-tertiary); }

/* ==================== PROFILE PAGE ==================== */
html.light .profile-page .card-header { background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); }
html.light .profile-page .card { box-shadow: 0 10px 24px rgba(0,0,0,0.06); }
html.light .profile-page .btn-outline-primary { color: var(--primary); border-color: var(--primary); }

/* ==================== FAQ SECTION ==================== */
html.light .faq-section { background: #f9faf9; }
html.light .faq-section .title_login { color: var(--text-primary); }
html.light .faq-section .accordion-item { background: var(--card-bg); border-color: var(--border-color); }
html.light .faq-section .accordion-button { background: var(--bg-secondary); color: var(--text-primary); }
html.light .faq-section .accordion-button:not(.collapsed) { background: var(--bg-tertiary); color: var(--text-primary); }
html.light .faq-section .accordion-body { background: var(--card-bg); color: var(--text-secondary); }
html.light .faq-section .accordion-button::after { filter: none; }

/* ==================== ALERTS ==================== */
html.light .alert { border-color: var(--border-color); }
html.light .alert-danger { background: rgba(220,53,69,0.08); color: #991b1b; }
html.light .alert-success { background: rgba(25,135,84,0.08); color: #009157; }
html.light .alert-warning { background: rgba(255,193,7,0.12); color: #92400e; }
html.light .alert-info { background: rgba(13, 148, 136,0.08); color: #3c765e; }

/* ==================== LESSON LIST ==================== */
html.light .lesson-list .list-group-item { background-color: var(--card-bg) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; }
html.light .lesson-list .list-group-item:hover { background-color: var(--bg-secondary) !important; }
html.light .lesson-list .list-group-item.active { background-color: var(--bg-tertiary) !important; border-color: var(--border-color) !important; }

/* ==================== TEXT UTILITIES ==================== */
html.light .text-muted { color: var(--text-muted) !important; }
html.light .text-secondary { color: var(--text-secondary) !important; }
html.light .text-neutral { color: var(--text-primary) !important; }

/* ==================== MISC COMPONENTS ==================== */
html.light .tv-glass { background: transparent; }
html.light .progress { background-color: var(--bg-secondary); }
html.light .border { border-color: var(--border-color) !important; }

/* ==================== RESPONSIVE OVERRIDES ==================== */
@media (max-width: 991.98px) {
  html.light .modern-header .navbar-collapse { background: rgba(255, 255, 255, 0.98); border: 1px solid #e5e8e5; }
}

@media (max-width: 575.98px) {
  html.light .hero-stats { flex-wrap: wrap; }
  html.light .hero-stat-card { min-width: auto; width: calc(50% - .5rem); }
}