/**
 * Elite+ Comprehensive Fixes v2.0
 * Light mode, scroll issues, alignments, AI planner scroll
 */

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT MODE THEME OVERRIDES
   Make light mode actually look good with proper contrast and shadows
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] {
  /* Core backgrounds */
  --bg-primary: #f0f2f5;
  --bg-secondary: #ffffff;
  --bg-tertiary: #e4e6eb;
  
  /* Text with proper contrast */
  color-scheme: light;
}

[data-theme="light"] body,
[data-theme="light"] .app {
  background: linear-gradient(180deg, #f0f2f5 0%, #e8eaed 100%);
  color: #1a1a2e;
}

[data-theme="light"] .sidebar {
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .sidebar .logo-name,
[data-theme="light"] .sidebar .logo-sub {
  color: #1a1a2e;
}

[data-theme="light"] .sidebar .logo-sub {
  opacity: 0.6;
}

[data-theme="light"] .nav-link {
  color: rgba(26, 26, 46, 0.7);
}

[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link.active {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
}

[data-theme="light"] .nav-link.active {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1));
}

/* Cards in light mode */
[data-theme="light"] .card,
[data-theme="light"] .stat-card,
[data-theme="light"] .dashboard-card,
[data-theme="light"] .metric-card,
[data-theme="light"] .widget,
[data-theme="light"] .panel,
[data-theme="light"] .glass-card,
[data-theme="light"] [class*="card"] {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .card:hover,
[data-theme="light"] .stat-card:hover,
[data-theme="light"] .dashboard-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 8px 32px rgba(0, 0, 0, 0.04);
  border-color: rgba(99, 102, 241, 0.2);
}

/* Home page specific */
[data-theme="light"] .home-v2 {
  background: linear-gradient(180deg, #f0f2f5 0%, #e4e6eb 100%);
}

[data-theme="light"] .home-v2-bg,
[data-theme="light"] .bg-mesh,
[data-theme="light"] .bg-glow,
[data-theme="light"] .bg-grid {
  opacity: 0.3;
}

[data-theme="light"] .home-v2-hero {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .hero-gradient-orb {
  opacity: 0.2;
}

/* Stats row */
[data-theme="light"] .home-stats-row .stat-card,
[data-theme="light"] .stats-row .stat-item,
[data-theme="light"] .quick-stat {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .stat-value,
[data-theme="light"] .stat-number,
[data-theme="light"] .metric-value {
  color: #1a1a2e;
}

[data-theme="light"] .stat-label,
[data-theme="light"] .stat-title,
[data-theme="light"] .metric-label {
  color: rgba(26, 26, 46, 0.6);
}

/* Section headers */
[data-theme="light"] .section-header h2,
[data-theme="light"] .section-title,
[data-theme="light"] .card-header h3,
[data-theme="light"] .widget-title,
[data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3 {
  color: #1a1a2e;
}

/* Inputs */
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
  background: #f8f9fa;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #1a1a2e;
}

[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: rgba(26, 26, 46, 0.4);
}

/* Buttons */
[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-ghost {
  background: rgba(0, 0, 0, 0.05);
  color: #1a1a2e;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .btn-secondary:hover,
[data-theme="light"] .btn-ghost:hover {
  background: rgba(0, 0, 0, 0.1);
}

/* Modals */
[data-theme="light"] .modal-content,
[data-theme="light"] .modal-body,
[data-theme="light"] .overlay-content {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* Tables */
[data-theme="light"] table th {
  background: #f0f2f5;
  color: rgba(26, 26, 46, 0.7);
}

[data-theme="light"] table td {
  color: #1a1a2e;
  border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] table tr:hover td {
  background: rgba(99, 102, 241, 0.05);
}

/* Charts */
[data-theme="light"] .chart-container {
  background: #ffffff;
}

/* Skill Profile / Radar chart */
[data-theme="light"] .skill-profile,
[data-theme="light"] .radar-chart-container {
  background: #ffffff;
}

/* Recent matches */
[data-theme="light"] .match-item,
[data-theme="light"] .match-card,
[data-theme="light"] .training-item {
  background: #f8f9fa;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .match-item:hover,
[data-theme="light"] .match-card:hover {
  background: #ffffff;
  border-color: rgba(99, 102, 241, 0.2);
}

/* Journal */
[data-theme="light"] .journal-entry,
[data-theme="light"] .entry-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Tags/Badges */
[data-theme="light"] .tag,
[data-theme="light"] .badge,
[data-theme="light"] .chip {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
}

/* Pro badge */
[data-theme="light"] .pro-badge {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
}

/* Scrollbars in light mode */
[data-theme="light"] ::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* Dividers */
[data-theme="light"] hr,
[data-theme="light"] .divider {
  border-color: rgba(0, 0, 0, 0.08);
}

/* Quick actions */
[data-theme="light"] .quick-action,
[data-theme="light"] .action-btn {
  background: #f8f9fa;
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: #1a1a2e;
}

[data-theme="light"] .quick-action:hover,
[data-theme="light"] .action-btn:hover {
  background: #ffffff;
  border-color: rgba(99, 102, 241, 0.3);
  color: #6366f1;
}

/* Community */
[data-theme="light"] .post-card,
[data-theme="light"] .community-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .post-content,
[data-theme="light"] .comment-text {
  color: #1a1a2e;
}

/* Guides header */
[data-theme="light"] .guides-header {
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
}

[data-theme="light"] .guides-header h1,
[data-theme="light"] .guides-header p {
  color: #312e81;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPREHENSIVE LIGHT MODE - Full Coverage
   Ensuring consistent light theme across ALL pages and components
   ═══════════════════════════════════════════════════════════════════════════ */

/* Main app container */
[data-theme="light"] .main-content,
[data-theme="light"] .content,
[data-theme="light"] .app-content {
  background: linear-gradient(180deg, #f5f7fa 0%, #eef1f5 100%);
}

/* Page headers */
[data-theme="light"] .page-header,
[data-theme="light"] .revamp-hero,
[data-theme="light"] .hero-section {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fc 100%);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .page-header h1,
[data-theme="light"] .page-header h2,
[data-theme="light"] .revamp-hero h1,
[data-theme="light"] .hero-section h1 {
  color: #1a1a2e;
}

[data-theme="light"] .page-header p,
[data-theme="light"] .page-subtitle,
[data-theme="light"] .revamp-hero p {
  color: rgba(26, 26, 46, 0.7);
}

/* Recovery page */
[data-theme="light"] .recovery-score-card,
[data-theme="light"] .recovery-metric-card,
[data-theme="light"] .recovery-section {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .score-ring-bg {
  stroke: #e5e7eb;
}

[data-theme="light"] .score-value,
[data-theme="light"] .recovery-score-card h3 {
  color: #1a1a2e;
}

[data-theme="light"] .score-status,
[data-theme="light"] .metric-label {
  color: rgba(26, 26, 46, 0.6);
}

[data-theme="light"] .score-recommendation {
  background: #f3f4f6;
}

[data-theme="light"] .rec-text {
  color: rgba(26, 26, 46, 0.7);
}

[data-theme="light"] .metric-bar {
  background: #e5e7eb;
}

[data-theme="light"] .recovery-chart {
  background: #ffffff;
}

[data-theme="light"] .chart-bar-group .chart-date {
  color: rgba(26, 26, 46, 0.6);
}

/* Journal page */
[data-theme="light"] .journal-enhanced-layout,
[data-theme="light"] .journal-container {
  background: transparent;
}

[data-theme="light"] .journal-stats-bar {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .journal-stat-item .stat-value {
  color: #1a1a2e;
}

[data-theme="light"] .journal-stat-item .stat-label {
  color: rgba(26, 26, 46, 0.6);
}

[data-theme="light"] .journal-actions-bar {
  background: transparent;
}

[data-theme="light"] .journal-search {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .journal-search input {
  color: #1a1a2e;
  background: transparent;
}

[data-theme="light"] .journal-filter-select {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #1a1a2e;
}

[data-theme="light"] .journal-templates-bar {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .template-btn {
  background: #f3f4f6;
  color: #1a1a2e;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .template-btn:hover {
  background: #e5e7eb;
  border-color: rgba(99, 102, 241, 0.3);
}

[data-theme="light"] .journal-entry-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .journal-entry-card:hover {
  border-color: rgba(99, 102, 241, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .entry-title {
  color: #1a1a2e;
}

[data-theme="light"] .entry-preview {
  color: rgba(26, 26, 46, 0.7);
}

[data-theme="light"] .entry-date .date-day {
  color: #1a1a2e;
}

[data-theme="light"] .entry-date .date-month {
  color: rgba(26, 26, 46, 0.6);
}

[data-theme="light"] .entry-tag {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
}

[data-theme="light"] .entry-time {
  color: rgba(26, 26, 46, 0.5);
}

[data-theme="light"] .journal-modal-content {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .mood-option {
  background: #f3f4f6;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .mood-option:hover,
[data-theme="light"] .mood-option.selected {
  background: #e5e7eb;
}

/* Career Intelligence */
[data-theme="light"] .ci-container,
[data-theme="light"] .career-intelligence {
  background: transparent;
}

[data-theme="light"] .ci-score-section,
[data-theme="light"] .ci-card,
[data-theme="light"] .ci-section {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .ci-score-ring .ring-bg {
  stroke: #e5e7eb;
}

[data-theme="light"] .ci-score-value,
[data-theme="light"] .ci-card h3,
[data-theme="light"] .ci-section-title {
  color: #1a1a2e;
}

[data-theme="light"] .ci-player-radar-container {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .ci-radar-header h4 {
  color: #1a1a2e;
}

[data-theme="light"] .ci-radar-subtitle {
  color: rgba(26, 26, 46, 0.6);
}

[data-theme="light"] .ci-radar-legend .radar-legend-item {
  color: rgba(26, 26, 46, 0.7);
}

[data-theme="light"] .ci-archetype-card {
  background: linear-gradient(135deg, #f8f9fc 0%, #f0f2f5 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .ci-milestone-card {
  background: #f8f9fc;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .ci-milestone-title {
  color: #1a1a2e;
}

[data-theme="light"] .ci-milestone-desc {
  color: rgba(26, 26, 46, 0.6);
}

/* Community page v3.0 */
[data-theme="light"] .community-hero-section {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.06) 50%, rgba(236, 72, 153, 0.04) 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .community-hero-section::before {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
}

[data-theme="light"] .community-hero-section::after {
  background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, transparent 70%);
}

[data-theme="light"] .hero-content h1 {
  background: linear-gradient(135deg, #1a1a2e 0%, #6366f1 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

[data-theme="light"] .hero-content p {
  color: rgba(26, 26, 46, 0.7);
}

[data-theme="light"] .feed-mode-bar {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .feed-mode-toggles {
  background: #f3f4f6;
}

[data-theme="light"] .feed-mode-btn {
  color: rgba(26, 26, 46, 0.6);
}

[data-theme="light"] .feed-mode-btn:hover {
  color: #1a1a2e;
  background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .discover-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .discover-card h3 {
  color: #1a1a2e;
}

[data-theme="light"] .trending-item {
  background: #f8f9fc;
}

[data-theme="light"] .trending-item:hover {
  background: rgba(99, 102, 241, 0.08);
}

[data-theme="light"] .trending-content p {
  color: #1a1a2e;
}

[data-theme="light"] .trending-meta {
  color: rgba(26, 26, 46, 0.6);
}

[data-theme="light"] .weekly-challenge {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.08) 100%);
  border-color: rgba(245, 158, 11, 0.2);
}

[data-theme="light"] .suggested-user {
  background: #f8f9fc;
}

[data-theme="light"] .suggested-user:hover {
  background: rgba(99, 102, 241, 0.08);
}

[data-theme="light"] .suggested-info strong {
  color: #1a1a2e;
}

[data-theme="light"] .suggested-info span {
  color: rgba(26, 26, 46, 0.6);
}

[data-theme="light"] .topic-tag {
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.2);
  color: #6366f1;
}

[data-theme="light"] .leaderboard-list {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .leaderboard-row {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .leaderboard-row:hover {
  background: rgba(99, 102, 241, 0.05);
}

[data-theme="light"] .leaderboard-row.current-user {
  background: rgba(99, 102, 241, 0.1);
}

[data-theme="light"] .rank-num {
  color: rgba(26, 26, 46, 0.6);
}

[data-theme="light"] .user-cell strong {
  color: #1a1a2e;
}

[data-theme="light"] .podium-spot {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .podium-spot.first {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.15) 0%, #ffffff 100%);
  border-color: rgba(251, 191, 36, 0.3);
}

[data-theme="light"] .podium-spot.second {
  background: linear-gradient(180deg, rgba(156, 163, 175, 0.1) 0%, #ffffff 100%);
  border-color: rgba(156, 163, 175, 0.2);
}

[data-theme="light"] .podium-spot.third {
  background: linear-gradient(180deg, rgba(180, 83, 9, 0.1) 0%, #ffffff 100%);
  border-color: rgba(180, 83, 9, 0.2);
}

[data-theme="light"] .podium-name {
  color: #1a1a2e;
}

[data-theme="light"] .xp-breakdown {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .xp-breakdown h3 {
  color: #1a1a2e;
}

[data-theme="light"] .xp-rule {
  background: #f8f9fc;
}

[data-theme="light"] .xp-rule .xp-action {
  color: rgba(26, 26, 46, 0.7);
}

[data-theme="light"] .level-card {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(99, 102, 241, 0.08) 100%);
  border: 1px solid rgba(139, 92, 246, 0.2);
}

[data-theme="light"] .level-info h3 {
  color: #1a1a2e;
}

[data-theme="light"] .level-info span {
  color: rgba(26, 26, 46, 0.6);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT MODE - GUIDES PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .guide-content,
[data-theme="light"] .article-body {
  color: #1a1a2e;
}

[data-theme="light"] .guide-content p,
[data-theme="light"] .article-body p,
[data-theme="light"] .guide-text-body {
  color: rgba(26, 26, 46, 0.84);
}

[data-theme="light"] .guide-content h1,
[data-theme="light"] .guide-content h2,
[data-theme="light"] .guide-content h3,
[data-theme="light"] .guide-content h4,
[data-theme="light"] .article-body h1,
[data-theme="light"] .article-body h2,
[data-theme="light"] .article-body h3,
[data-theme="light"] .article-body h4 {
  color: #1a1a2e;
}

[data-theme="light"] .guide-content .lead,
[data-theme="light"] .article-body .lead {
  color: rgba(26, 26, 46, 0.9);
}

[data-theme="light"] .guide-content ul li,
[data-theme="light"] .guide-content ol li,
[data-theme="light"] .article-body ul li,
[data-theme="light"] .article-body ol li {
  color: rgba(26, 26, 46, 0.84);
}

[data-theme="light"] .guide-content blockquote,
[data-theme="light"] .article-body blockquote {
  background: rgba(168, 85, 247, 0.06);
  border-left-color: #a855f7;
  color: rgba(26, 26, 46, 0.9);
}

[data-theme="light"] .guide-content code,
[data-theme="light"] .article-body code {
  background: rgba(0, 0, 0, 0.06);
  color: #6366f1;
}

[data-theme="light"] .guide-content pre,
[data-theme="light"] .article-body pre {
  background: #1a1a2e;
  color: #fafafa;
}

/* Callouts in light mode */
[data-theme="light"] .callout,
[data-theme="light"] .guide-callout {
  background: #f8f9fc;
  border-color: rgba(0, 0, 0, 0.1);
  color: #1a1a2e;
}

[data-theme="light"] .callout-tip {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
  border-color: rgba(34, 197, 94, 0.3);
}

[data-theme="light"] .callout-note {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(99, 102, 241, 0.04) 100%);
  border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="light"] .callout-warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(234, 179, 8, 0.04) 100%);
  border-color: rgba(245, 158, 11, 0.3);
}

[data-theme="light"] .callout-key {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.08) 0%, rgba(139, 92, 246, 0.04) 100%);
  border-color: rgba(168, 85, 247, 0.3);
}

[data-theme="light"] .callout-title,
[data-theme="light"] .callout h4 {
  color: #1a1a2e;
}

[data-theme="light"] .callout p,
[data-theme="light"] .callout-content {
  color: rgba(26, 26, 46, 0.8);
}

/* Guide Cards/Panels */
[data-theme="light"] .guide-card,
[data-theme="light"] .guide-panel,
[data-theme="light"] .guide-section,
[data-theme="light"] .content-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #1a1a2e;
}

[data-theme="light"] .guide-card:hover,
[data-theme="light"] .guide-panel:hover {
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Guide Headers */
[data-theme="light"] .guide-header,
[data-theme="light"] .guide-hero,
[data-theme="light"] .article-header {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.08) 0%, rgba(99, 102, 241, 0.04) 100%);
  border-color: rgba(168, 85, 247, 0.15);
}

[data-theme="light"] .guide-meta,
[data-theme="light"] .article-meta {
  color: rgba(26, 26, 46, 0.6);
}

[data-theme="light"] .guide-author,
[data-theme="light"] .article-author {
  color: rgba(26, 26, 46, 0.7);
}

[data-theme="light"] .guide-date,
[data-theme="light"] .article-date {
  color: rgba(26, 26, 46, 0.5);
}

/* Guide Tags */
[data-theme="light"] .guide-tag,
[data-theme="light"] .article-tag,
[data-theme="light"] .content-tag {
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.2);
  color: #8b5cf6;
}

/* Table of Contents */
[data-theme="light"] .toc,
[data-theme="light"] .table-of-contents {
  background: #f8f9fc;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .toc-title {
  color: #1a1a2e;
}

[data-theme="light"] .toc-link,
[data-theme="light"] .toc a {
  color: rgba(26, 26, 46, 0.7);
}

[data-theme="light"] .toc-link:hover,
[data-theme="light"] .toc a:hover {
  color: #6366f1;
}

[data-theme="light"] .toc-link.active,
[data-theme="light"] .toc a.active {
  color: #8b5cf6;
  border-left-color: #8b5cf6;
}

/* Guides List Page */
[data-theme="light"] .guides-grid,
[data-theme="light"] .articles-grid {
  background: transparent;
}

[data-theme="light"] .guide-list-item,
[data-theme="light"] .article-list-item,
[data-theme="light"] .guide-preview-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .guide-list-item:hover,
[data-theme="light"] .article-list-item:hover,
[data-theme="light"] .guide-preview-card:hover {
  border-color: rgba(168, 85, 247, 0.3);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .guide-list-title,
[data-theme="light"] .article-list-title {
  color: #1a1a2e;
}

[data-theme="light"] .guide-list-excerpt,
[data-theme="light"] .article-list-excerpt {
  color: rgba(26, 26, 46, 0.7);
}

[data-theme="light"] .guide-difficulty,
[data-theme="light"] .difficulty-badge {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
}

[data-theme="light"] .guide-reading-time,
[data-theme="light"] .reading-time {
  color: rgba(26, 26, 46, 0.5);
}

/* Guide Sidebar */
[data-theme="light"] .guide-sidebar {
  background: #f8f9fc;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .sidebar-section-title {
  color: #1a1a2e;
}

[data-theme="light"] .related-guide,
[data-theme="light"] .related-article {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .related-guide:hover,
[data-theme="light"] .related-article:hover {
  border-color: rgba(168, 85, 247, 0.2);
}

/* Drill/Exercise Cards */
[data-theme="light"] .drill-card,
[data-theme="light"] .exercise-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .drill-card:hover,
[data-theme="light"] .exercise-card:hover {
  border-color: rgba(34, 197, 94, 0.3);
}

[data-theme="light"] .drill-title,
[data-theme="light"] .exercise-title {
  color: #1a1a2e;
}

[data-theme="light"] .drill-description,
[data-theme="light"] .exercise-description {
  color: rgba(26, 26, 46, 0.7);
}

[data-theme="light"] .drill-duration,
[data-theme="light"] .drill-intensity {
  color: rgba(26, 26, 46, 0.6);
}

/* Guide Navigation */
[data-theme="light"] .guide-nav,
[data-theme="light"] .article-nav {
  background: #f8f9fc;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .guide-nav-link,
[data-theme="light"] .article-nav-link {
  color: rgba(26, 26, 46, 0.7);
}

[data-theme="light"] .guide-nav-link:hover,
[data-theme="light"] .article-nav-link:hover {
  color: #6366f1;
  background: rgba(99, 102, 241, 0.08);
}

[data-theme="light"] .guide-nav-title {
  color: #1a1a2e;
}

/* Video Embed Containers */
[data-theme="light"] .video-container,
[data-theme="light"] .video-embed {
  background: #f0f0f5;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Coaching Tips */
[data-theme="light"] .coaching-tip,
[data-theme="light"] .pro-tip {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
  border: 1px solid rgba(251, 191, 36, 0.3);
}

[data-theme="light"] .coaching-tip-title,
[data-theme="light"] .pro-tip-title {
  color: #b45309;
}

[data-theme="light"] .coaching-tip p,
[data-theme="light"] .pro-tip p {
  color: rgba(26, 26, 46, 0.8);
}

/* Guide Progress */
[data-theme="light"] .progress-indicator,
[data-theme="light"] .guide-progress {
  background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .progress-bar-fill {
  background: linear-gradient(90deg, #8b5cf6, #6366f1);
}

/* Key Takeaways Section */
[data-theme="light"] .key-takeaways,
[data-theme="light"] .summary-box {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(34, 197, 94, 0.04) 100%);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

[data-theme="light"] .key-takeaways h4,
[data-theme="light"] .summary-box h4 {
  color: #047857;
}

[data-theme="light"] .key-takeaways li,
[data-theme="light"] .summary-box li {
  color: rgba(26, 26, 46, 0.85);
}

[data-theme="light"] .progress-bar {
  background: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .badges-section {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .badge-item {
  background: #f8f9fc;
}

[data-theme="light"] .badge-item:hover {
  background: rgba(99, 102, 241, 0.1);
}

[data-theme="light"] .badge-item .badge-name {
  color: rgba(26, 26, 46, 0.7);
}

/* Reports page */
[data-theme="light"] .reports-content,
[data-theme="light"] .report-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .report-card h3 {
  color: #1a1a2e;
}

/* Analytics page */
[data-theme="light"] .analytics-card,
[data-theme="light"] .chart-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Goals page */
[data-theme="light"] .goal-card,
[data-theme="light"] .goals-container {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .goal-title {
  color: #1a1a2e;
}

[data-theme="light"] .goal-progress-bar {
  background: #e5e7eb;
}

/* Settings page */
[data-theme="light"] .settings-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .settings-section-title {
  color: #1a1a2e;
}

[data-theme="light"] .settings-label {
  color: #1a1a2e;
}

[data-theme="light"] .settings-desc {
  color: rgba(26, 26, 46, 0.6);
}

[data-theme="light"] .settings-toggle-slider {
  background: #d1d5db;
}

[data-theme="light"] .settings-toggle input:checked + .settings-toggle-slider {
  background: #6366f1;
}

/* Training page */
[data-theme="light"] .training-card,
[data-theme="light"] .training-log-item {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .training-title {
  color: #1a1a2e;
}

/* Matches page */
[data-theme="light"] .match-card,
[data-theme="light"] .match-log-item {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .match-card:hover {
  border-color: rgba(99, 102, 241, 0.2);
}

/* Tactics page */
[data-theme="light"] .tactics-board,
[data-theme="light"] .tactics-container {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* AI Chat */
[data-theme="light"] .ai-chat-container,
[data-theme="light"] .ai-message {
  background: #ffffff;
}

[data-theme="light"] .ai-message.user {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #ffffff;
}

[data-theme="light"] .ai-message.assistant {
  background: #f3f4f6;
  color: #1a1a2e;
}

[data-theme="light"] .ai-input-container {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .ai-input {
  color: #1a1a2e;
}

/* Dropdown menus */
[data-theme="light"] .dropdown-menu,
[data-theme="light"] .context-menu,
[data-theme="light"] .popover {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .dropdown-item:hover {
  background: #f3f4f6;
}

/* Tooltips */
[data-theme="light"] .tooltip {
  background: #1a1a2e;
  color: #ffffff;
}

/* Empty states */
[data-theme="light"] .empty-state,
[data-theme="light"] .no-data {
  color: rgba(26, 26, 46, 0.6);
}

[data-theme="light"] .empty-state h3 {
  color: #1a1a2e;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SINGLE VERTICAL SCROLL FIX
   Ensure only one scrollbar for the main page
   ═══════════════════════════════════════════════════════════════════════════ */

html, body {
  overflow-x: hidden;
}

body {
  overflow-y: auto;
  height: 100%;
}

.app {
  min-height: 100vh;
  overflow: visible;
}

.content {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* CRITICAL: Ensure only active page is visible - fixes overlapping pages */
.page {
  display: none !important;
  overflow: visible !important;
  height: auto !important;
}

.page.active {
  display: block !important;
  overflow: visible !important;
}

/* Blogs page needs flex display for its layout */
.page.active[data-page="blogs"] {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  overflow: hidden !important;
}

/* Home page v2 scroll fix */
.home-v2 {
  overflow: visible !important;
  height: auto !important;
  min-height: auto;
}

/* Prevent nested scrolls */
.home-v2-container,
.dashboard-container,
.page-container {
  overflow: visible !important;
  height: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AI TRAINING PLANNER SCROLL FIX
   Give it its own scroll without affecting other panels
   ═══════════════════════════════════════════════════════════════════════════ */

.ai-training-planner,
.training-planner-container,
.training-plan-content,
[class*="training-planner"] {
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
}

.training-plan-week,
.training-plan-days {
  max-height: 400px;
  overflow-y: auto;
}

/* Ensure planner doesn't stretch parent */
.ai-training-planner {
  flex-shrink: 0;
  contain: layout;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CLIPPING & ALIGNMENT FIXES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Form text (WDWWW) overflow fix */
.form-display,
.form-indicator,
.match-form,
[class*="form"] span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Season overview card alignment */
.season-overview,
.season-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  align-items: stretch;
}

.season-overview .stat-item,
.season-stats .stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100px;
}

/* Stats row alignment */
.home-stats-row,
.stats-row {
  display: flex;
  gap: 1rem;
  align-items: stretch;
}

.home-stats-row > *,
.stats-row > * {
  flex: 1;
  min-width: 0; /* Prevent overflow */
}

/* Skill profile radar chart centering */
.skill-profile .chart-container,
.radar-chart-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Recent matches alignment */
.recent-matches .match-item,
.matches-list .match-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.match-result {
  flex-shrink: 0;
  min-width: 50px;
  text-align: center;
}

.match-rating {
  flex-shrink: 0;
  min-width: 60px;
  text-align: right;
}

/* Quick actions grid */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.quick-actions .action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  min-height: 80px;
}

/* Journal stats alignment */
.journal-stats,
.streak-stats {
  display: flex;
  gap: 1rem;
  align-items: stretch;
}

.journal-stats > *,
.streak-stats > * {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Career intelligence radar alignment */
.career-radar-chart,
.career-chart-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

/* Blog cards alignment */
.blog-card,
.guide-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.blog-card .card-content,
.guide-card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Mind & Readiness alignment */
.mind-readiness-card,
.readiness-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.readiness-progress {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}

/* Match day ritual alignment */
.ritual-item,
.checklist-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ritual-item .progress-circle,
.checklist-item .item-progress {
  flex-shrink: 0;
}

/* Trophy icon fix (prevent clipping) */
.trophy-icon,
.achievement-icon,
.stat-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMMUNITY PAGE PERFORMANCE OPTIMIZATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Use GPU acceleration for smooth scrolling */
.community-feed,
.posts-container,
.messages-container {
  will-change: scroll-position;
  transform: translateZ(0);
}

/* Reduce paint complexity */
.post-card,
.message-bubble {
  contain: layout style;
}

/* Lazy load images */
.post-card img,
.avatar-img,
.user-avatar img {
  content-visibility: auto;
}

/* Simplify animations for community */
.community-page .post-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Reduce hover effects complexity */
.community-page .post-card:hover {
  transform: translateY(-2px);
}

/* Disable expensive effects on scroll */
.community-feed.scrolling .post-card {
  transition: none !important;
}

/* Virtual scrolling container styles */
.virtual-scroll-container {
  contain: strict;
  overflow-anchor: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE FIXES
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .home-stats-row,
  .stats-row {
    flex-wrap: wrap;
  }
  
  .home-stats-row > *,
  .stats-row > * {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: calc(50% - 0.5rem);
  }
  
  .season-overview {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .quick-actions {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .ai-training-planner,
  .training-planner-container {
    max-height: 400px;
  }
}

@media (max-width: 480px) {
  .home-stats-row > *,
  .stats-row > * {
    flex: 1 1 100%;
  }
  
  .season-overview {
    grid-template-columns: 1fr 1fr;
  }
}