/* Light Theme CSS Variables and Components */
:root[data-theme="light"] {
  /* Base Colors - Vibrant and Eye-Popping */
  --bg: #fafbff;
  --surface: #ffffff;
  --muted: #f0f4ff;
  --text: #0f172a;
  --subtext: #475569;
  --accent: #2563eb;
  --accent-contrast: #ffffff;
  --accent-secondary: #1d4ed8;
  --warning: #ff6b35;
  --error: #ef4444;
  --success: #10b981;
  --border: #cbd5e1;
  --card: #ffffff;
  --hover-bg: #e2e8f0;
  --focus-ring: #3b82f6;

  /* Enhanced Gradients for Light Mode */
  --gradient-primary: linear-gradient(
    135deg,
    #2563eb 0%,
    #3b82f6 50%,
    #1d4ed8 100%
  );
  --gradient-secondary: linear-gradient(
    135deg,
    #1e40af 0%,
    #2563eb 50%,
    #1d4ed8 100%
  );
  --gradient-accent: linear-gradient(
    135deg,
    #ff6b35 0%,
    #fbbf24 50%,
    #ff6b35 100%
  );

  /* Shadows and Effects */
  --shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.12);
  --shadow-lg: 0 8px 25px rgba(15, 23, 42, 0.15);
  --shadow-xl: 0 12px 35px rgba(15, 23, 42, 0.18);

  /* Interactive States */
  --hover-accent: #3b82f6;
  --active-accent: #1e40af;

  /* Special Effects */
  --glow-accent: 0 0 20px rgba(37, 99, 235, 0.4);
  --glow-secondary: 0 0 20px rgba(59, 130, 246, 0.3);
  --glow-warning: 0 0 20px rgba(255, 107, 53, 0.3);
}

/* Light Theme Body Overrides */
:root[data-theme="light"] body {
  background: var(--bg);
  color: var(--text);
}

/* Light Theme Header Enhancements */
:root[data-theme="light"] #site-header {
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #3b82f6 100%);
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.25);
}

:root[data-theme="light"] #hdr-container {
  background: transparent;
}

:root[data-theme="light"] #hdr-container::before {
  display: none;
}

:root[data-theme="light"] #logo-box span {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important;
  font-size: clamp(24px, 3.5vw, 42px) !important;
  margin: -15px 0 0 20px !important;
  font-weight: 300 !important;
  font-family: "Josefin Sans", sans-serif !important;
}

/* Ensure consistent mobile responsive behavior */
@media screen and (max-width: 430px) {
  :root[data-theme="light"] #logo-box span {
    margin: 0 !important;
  }
}

:root[data-theme="light"] .user-info span {
  color: #ffffff !important;
}

:root[data-theme="light"] .msg-discount {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Light Theme Navigation */
:root[data-theme="light"] .top-nav a {
  color: var(--text);
  font-weight: 600;
  transition: all 0.3s ease;
}

:root[data-theme="light"] .top-nav a:hover {
  color: var(--accent);
  text-shadow: var(--glow-accent);
  transform: translateY(-1px);
}

/* Light Theme Section Backgrounds */
:root[data-theme="light"] #section-one {
  background: linear-gradient(135deg, #fafbff 0%, #f0f4ff 50%, #e2e8f0 100%);
  border-bottom: 3px solid var(--accent);
  box-shadow: inset 0 0 50px rgba(37, 99, 235, 0.1);
}

:root[data-theme="light"] #section-two {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%);
  border-bottom: 3px solid var(--accent);
}

:root[data-theme="light"] #section-three {
  background: linear-gradient(135deg, #f0f4ff 0%, #e2e8f0 50%, #cbd5e1 100%);
  border-bottom: 3px solid var(--accent);
}

/* Light Theme Titles and Headers */
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3 {
  color: var(--text);
}

:root[data-theme="light"] #section-one-inner h1 {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 8px rgba(37, 99, 235, 0.3));
}

:root[data-theme="light"] #section-two-inner h1,
:root[data-theme="light"] #section-three-inner h1 {
  color: var(--text);
  text-shadow: 0 2px 4px rgba(15, 23, 42, 0.1);
}

/* Light Theme Cards and Components */
:root[data-theme="light"] .pool-stats-card {
  background: var(--card);
  border: 2px solid var(--border);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
}

:root[data-theme="light"] .pool-stats-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-xl), var(--glow-accent);
  transform: translateY(-4px);
}

:root[data-theme="light"] .stat-box {
  background: linear-gradient(135deg, var(--surface) 0%, var(--muted) 100%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

:root[data-theme="light"] .stat-box:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md), 0 0 15px rgba(37, 99, 235, 0.2);
  background: linear-gradient(
    135deg,
    var(--card) 0%,
    rgba(37, 99, 235, 0.05) 100%
  );
}

:root[data-theme="light"] .stat-box.accent {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.2) !important;
}

:root[data-theme="light"] .stat-box.accent .stat-value {
  color: #ffffff !important;
}

:root[data-theme="light"] .stat-box.accent .stat-label {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Light Theme News Cards */
:root[data-theme="light"] .news-card {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
}

:root[data-theme="light"] .news-card:hover {
  background: var(--surface);
  box-shadow: var(--shadow-xl);
  transform: translateY(-6px);
  border-color: var(--accent);
}

/* Light Theme Buttons - Eye-Popping */
:root[data-theme="light"] .btn-primary,
:root[data-theme="light"] .signup-btn,
:root[data-theme="light"] .beta-cta-primary,
:root[data-theme="light"] .welcome-cta {
  background: var(--gradient-primary) !important;
  color: #ffffff !important;
  border: 2px solid var(--accent) !important;
  box-shadow: var(--shadow-lg), var(--glow-accent) !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

:root[data-theme="light"] .btn-primary:hover,
:root[data-theme="light"] .signup-btn:hover,
:root[data-theme="light"] .beta-cta-primary:hover,
:root[data-theme="light"] .welcome-cta:hover {
  background: linear-gradient(
    135deg,
    var(--hover-accent) 0%,
    var(--accent) 50%,
    var(--hover-accent) 100%
  ) !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: var(--shadow-xl), 0 0 30px rgba(37, 99, 235, 0.6) !important;
  border-color: var(--hover-accent) !important;
}

/* Light Theme Secondary Buttons */
:root[data-theme="light"] .btn-secondary {
  background: var(--gradient-secondary) !important;
  color: white !important;
  border: 2px solid #3b82f6 !important;
  box-shadow: var(--shadow-md), var(--glow-secondary) !important;
}

:root[data-theme="light"] .btn-secondary:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-lg), 0 0 25px rgba(59, 130, 246, 0.5) !important;
}

/* Light Theme Action Buttons */
:root[data-theme="light"] .action-btn {
  background: linear-gradient(
    135deg,
    var(--surface) 0%,
    var(--muted) 100%
  ) !important;
  border: 2px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-sm) !important;
}

:root[data-theme="light"] .action-btn:hover {
  border-color: var(--accent) !important;
  background: linear-gradient(
    135deg,
    var(--card) 0%,
    rgba(37, 99, 235, 0.1) 100%
  ) !important;
  box-shadow: var(--shadow-md), 0 0 15px rgba(37, 99, 235, 0.2) !important;
  transform: translateY(-2px) !important;
}

/* Light Theme Forms */
:root[data-theme="light"] .form-input,
:root[data-theme="light"] .form-select,
:root[data-theme="light"] .search-input,
:root[data-theme="light"] .setting-select {
  background: var(--surface) !important;
  border: 2px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-sm) !important;
}

:root[data-theme="light"] .form-input:focus,
:root[data-theme="light"] .form-select:focus,
:root[data-theme="light"] .search-input:focus,
:root[data-theme="light"] .setting-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15), var(--shadow-md) !important;
  background: var(--card) !important;
}

/* Light Theme Toggle Switches */
:root[data-theme="light"] .toggle-slider {
  background: var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}

:root[data-theme="light"] .toggle-switch input:checked + .toggle-slider {
  background: var(--gradient-primary) !important;
  box-shadow: var(--glow-accent) !important;
}

:root[data-theme="light"] .toggle-slider:before {
  background: var(--card) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Light Theme Modals and Overlays */
:root[data-theme="light"] .modal-container,
:root[data-theme="light"] .rankings-preview,
:root[data-theme="light"] .news-container {
  background: var(--card) !important;
  border: 2px solid var(--border) !important;
  box-shadow: var(--shadow-xl) !important;
  backdrop-filter: blur(15px) !important;
}

/* Light Theme Tabs */
:root[data-theme="light"] .tab-button,
:root[data-theme="light"] .modal-tab {
  background: var(--surface) !important;
  color: var(--subtext) !important;
  border: 1px solid var(--border) !important;
}

:root[data-theme="light"] .tab-button.active,
:root[data-theme="light"] .modal-tab.active,
:root[data-theme="light"] .tab-button:hover,
:root[data-theme="light"] .modal-tab:hover {
  background: var(--gradient-primary) !important;
  color: var(--accent-contrast) !important;
  border-color: var(--accent) !important;
  box-shadow: var(--glow-accent) !important;
}

/* Light Theme Tables */
:root[data-theme="light"] .rankings-table th,
:root[data-theme="light"] .modal-rankings-table th {
  background: linear-gradient(
    135deg,
    var(--muted) 0%,
    var(--surface) 100%
  ) !important;
  color: var(--text) !important;
  border-bottom: 2px solid var(--accent) !important;
}

:root[data-theme="light"] .rankings-table td,
:root[data-theme="light"] .modal-rankings-table td {
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
}

:root[data-theme="light"] .ranking-row:hover {
  background: linear-gradient(
    135deg,
    var(--surface) 0%,
    rgba(37, 99, 235, 0.05) 100%
  ) !important;
}

/* Light Theme Special Elements */
:root[data-theme="light"] .rank-cell {
  color: var(--accent) !important;
  font-weight: 700 !important;
  text-shadow: 0 0 8px rgba(37, 99, 235, 0.3) !important;
}

:root[data-theme="light"] .streak-cell.positive {
  color: var(--success) !important;
  font-weight: 600 !important;
}

:root[data-theme="light"] .streak-cell.negative {
  color: var(--warning) !important;
  font-weight: 600 !important;
}

/* Light Theme Beta Elements */
:root[data-theme="light"] .beta-hero {
  background: linear-gradient(
    135deg,
    var(--bg) 0%,
    var(--muted) 50%,
    var(--surface) 100%
  ) !important;
  border-bottom: 3px solid var(--accent) !important;
}

:root[data-theme="light"] .beta-hero-title {
  background: var(--gradient-primary) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 4px 8px rgba(37, 99, 235, 0.3)) !important;
}

:root[data-theme="light"] .feature-card {
  background: var(--card) !important;
  border: 2px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}

:root[data-theme="light"] .feature-card:hover {
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-xl), var(--glow-accent) !important;
  transform: translateY(-8px) scale(1.02) !important;
}

/* Light Theme Construction Banner */
:root[data-theme="light"] .construction-banner {
  background: linear-gradient(
    135deg,
    var(--warning) 0%,
    #fbbf24 50%,
    var(--warning) 100%
  ) !important;
  color: white !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Light Theme Enhanced Highlighting */
:root[data-theme="light"] .highlight-text {
  background: rgba(0, 0, 0, 0.8) !important;
  color: #ffffff !important;
  text-shadow: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

:root[data-theme="light"] .contact-text {
  background: rgba(0, 0, 0, 0.7) !important;
  color: #ffffff !important;
  text-shadow: none !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3) !important;
}

:root[data-theme="light"] .construction-text strong {
  text-shadow: 0 3px 10px rgba(0, 0, 0, 0.7) !important;
}

:root[data-theme="light"] .banner-button {
  background: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.5) !important;
}

:root[data-theme="light"] .banner-button:hover {
  background: #1d4ed8 !important;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.7) !important;
}

/* Light Theme Animations and Effects */
:root[data-theme="light"] .digital-globe {
  border: 3px solid var(--accent) !important;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(37, 99, 235, 0.2),
    rgba(37, 99, 235, 0.05),
    transparent
  ) !important;
  box-shadow: var(--glow-accent) !important;
}

/* Light Theme Video Elements */
:root[data-theme="light"] .video-card {
  background: var(--card) !important;
  border: 2px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}

:root[data-theme="light"] .video-card:hover {
  box-shadow: var(--shadow-xl) !important;
  transform: translateY(-6px) !important;
  border-color: var(--accent) !important;
}

/* Light Theme Responsive Enhancements */
@media (max-width: 768px) {
  :root[data-theme="light"] .pool-stats-card,
  :root[data-theme="light"] .news-card,
  :root[data-theme="light"] .feature-card {
    box-shadow: var(--shadow-md) !important;
  }

  :root[data-theme="light"] .pool-stats-card:hover,
  :root[data-theme="light"] .news-card:hover,
  :root[data-theme="light"] .feature-card:hover {
    transform: translateY(-3px) !important;
  }
}

/* Light Theme High Contrast Elements for Accessibility */
:root[data-theme="light"] .high-contrast {
  border: 3px solid var(--text) !important;
  background: var(--accent-contrast) !important;
  color: var(--text) !important;
}

/* Light Theme Loading States */
:root[data-theme="light"] .loading {
  background: linear-gradient(
    135deg,
    var(--surface) 0%,
    var(--muted) 50%,
    var(--surface) 100%
  ) !important;
  background-size: 200% 200% !important;
  animation: shimmer 2s ease-in-out infinite !important;
}

@keyframes shimmer {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* ========================================
   DASHBOARD COMPONENT LIGHT THEME OVERRIDES
   ======================================== */

/* Dashboard Widgets Base Styling */
:root[data-theme="light"] .user-profile-widget,
:root[data-theme="light"] .dashboard-welcome,
:root[data-theme="light"] .quick-actions-widget,
:root[data-theme="light"] .recent-activity-widget,
:root[data-theme="light"] .account-billing-widget,
:root[data-theme="light"] .user-stats-widget,
:root[data-theme="light"] .recent-videos-card,
:root[data-theme="light"] .match-history-card,
:root[data-theme="light"] .pool-stats-card,
:root[data-theme="light"] .king-of-hill-card,
:root[data-theme="light"] .trophies-titles-card,
:root[data-theme="light"] .news-preview-card {
  background: var(--card) !important;
  border: 2px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Widget Headers */
:root[data-theme="light"] .widget-header,
:root[data-theme="light"] .profile-header {
  border-bottom: 1px solid var(--border) !important;
  background: linear-gradient(135deg, var(--surface), var(--muted)) !important;
}

/* Widget Titles and Text */
:root[data-theme="light"] .widget-title,
:root[data-theme="light"] .profile-name h2,
:root[data-theme="light"] .welcome-title,
:root[data-theme="light"] .card-title,
:root[data-theme="light"] .section-title {
  color: var(--text) !important;
}

:root[data-theme="light"] .section-title {
  color: var(--accent) !important;
}

/* Subtitles and Secondary Text */
:root[data-theme="light"] .widget-subtitle,
:root[data-theme="light"] .welcome-subtitle,
:root[data-theme="light"] .username,
:root[data-theme="light"] .stat-label,
:root[data-theme="light"] .detail-label,
:root[data-theme="light"] .progress-label,
:root[data-theme="light"] .btn-desc,
:root[data-theme="light"] .signup-note,
:root[data-theme="light"] .activity-time,
:root[data-theme="light"] .card-subtitle {
  color: var(--subtext) !important;
}

/* Accent Colors */
:root[data-theme="light"] .stat-value,
:root[data-theme="light"] .progress-value,
:root[data-theme="light"] .stat-number,
:root[data-theme="light"] .avatar-image {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* Button Styling */
:root[data-theme="light"] .action-btn,
:root[data-theme="light"] .edit-profile-btn,
:root[data-theme="light"] .welcome-secondary {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

:root[data-theme="light"] .action-btn:hover,
:root[data-theme="light"] .edit-profile-btn:hover,
:root[data-theme="light"] .welcome-secondary:hover {
  border-color: var(--accent) !important;
  background: var(--hover-bg) !important;
}

/* Primary Buttons */
:root[data-theme="light"] .action-btn.primary,
:root[data-theme="light"] .beta-signup-btn,
:root[data-theme="light"] .welcome-cta {
  background: linear-gradient(
    135deg,
    var(--accent),
    var(--accent-secondary)
  ) !important;
  color: #ffffff !important;
  border-color: var(--accent) !important;
}

:root[data-theme="light"] .action-btn.primary:hover,
:root[data-theme="light"] .beta-signup-btn:hover,
:root[data-theme="light"] .welcome-cta:hover {
  background: linear-gradient(
    135deg,
    var(--hover-accent),
    var(--accent)
  ) !important;
}

/* Stats and Progress Bars */
:root[data-theme="light"] .profile-stats-row,
:root[data-theme="light"] .progress-bar,
:root[data-theme="light"] .stat-box {
  background: var(--muted) !important;
}

/* Activity Items and List Elements */
:root[data-theme="light"] .activity-item,
:root[data-theme="light"] .history-item,
:root[data-theme="light"] .video-item {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}

:root[data-theme="light"] .activity-item:hover,
:root[data-theme="light"] .history-item:hover,
:root[data-theme="light"] .video-item:hover {
  background: var(--hover-bg) !important;
  border-color: var(--accent) !important;
}

/* Borders and Dividers */
:root[data-theme="light"] .welcome-stats-preview {
  border-left: 1px solid var(--border) !important;
}

:root[data-theme="light"] .detail-row {
  border-bottom: 1px solid var(--border) !important;
}

/* Avatar Status Indicators */
:root[data-theme="light"] .avatar-status {
  border: 2px solid var(--surface) !important;
}

/* Beta Widget Specific */
:root[data-theme="light"] .beta-signup-widget {
  background: var(--card) !important;
  border: 2px solid var(--border) !important;
}

:root[data-theme="light"] .beta-signup-widget:hover {
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-xl) !important;
}

:root[data-theme="light"] .benefit-item {
  color: var(--text) !important;
}

/* Dashboard Sidebar and Navigation */
:root[data-theme="light"] .dashboard-sidebar {
  background: var(--surface) !important;
  border-right: 1px solid var(--border) !important;
}

/* Card Hover Effects */
:root[data-theme="light"] .user-profile-widget:hover,
:root[data-theme="light"] .quick-actions-widget:hover,
:root[data-theme="light"] .recent-activity-widget:hover,
:root[data-theme="light"] .user-stats-widget:hover,
:root[data-theme="light"] .recent-videos-card:hover,
:root[data-theme="light"] .match-history-card:hover,
:root[data-theme="light"] .pool-stats-card:hover,
:root[data-theme="light"] .trophies-titles-card:hover,
:root[data-theme="light"] .news-preview-card:hover {
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-xl), var(--glow-accent) !important;
  transform: translateY(-2px) !important;
}

/* ========================================
   BETA ANNOUNCEMENT LIGHT THEME OVERRIDES
   ======================================== */

/* Beta Announcement Section */
:root[data-theme="light"] .beta-announcement {
  background: linear-gradient(
    135deg,
    var(--bg) 0%,
    var(--muted) 50%,
    var(--surface) 100%
  ) !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Beta Content Text */
:root[data-theme="light"] .beta-content {
  color: var(--text) !important;
}

:root[data-theme="light"] .beta-title {
  color: var(--text) !important;
}

:root[data-theme="light"] .beta-description {
  color: var(--subtext) !important;
}

/* Beta Badge */
:root[data-theme="light"] .beta-badge-main {
  background: var(--card) !important;
  border: 2px solid var(--accent) !important;
  box-shadow: var(--shadow-md), var(--glow-accent) !important;
}

:root[data-theme="light"] .beta-badge-title {
  color: var(--accent) !important;
}

:root[data-theme="light"] .beta-badge-subtitle {
  color: var(--subtext) !important;
}

/* Beta CTA Primary Button */
:root[data-theme="light"] .beta-cta-primary {
  background: linear-gradient(
    135deg,
    var(--accent),
    var(--accent-secondary)
  ) !important;
  color: var(--accent-contrast) !important;
  border: 2px solid var(--accent) !important;
  box-shadow: var(--shadow-lg), var(--glow-accent) !important;
}

:root[data-theme="light"] .beta-cta-primary:hover {
  background: linear-gradient(
    135deg,
    var(--hover-accent),
    var(--accent)
  ) !important;
  box-shadow: var(--shadow-xl), var(--glow-accent) !important;
  transform: translateY(-3px) !important;
}

:root[data-theme="light"] .beta-cta-primary .cta-text {
  color: var(--accent-contrast) !important;
}

:root[data-theme="light"] .beta-cta-primary .cta-arrow {
  color: var(--accent-contrast) !important;
}

/* Beta Features List */
:root[data-theme="light"] .beta-features .feature-item {
  color: var(--accent) !important;
}

/* Beta Visual Elements */
:root[data-theme="light"] .beta-visual {
  color: var(--text) !important;
}

:root[data-theme="light"] .video-play-button {
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
  border: 2px solid var(--accent) !important;
}

/* Beta Countdown */
:root[data-theme="light"] .beta-countdown .time-value {
  color: var(--accent) !important;
}

:root[data-theme="light"] .beta-countdown .time-label {
  color: var(--subtext) !important;
}

:root[data-theme="light"] .coming-soon-message {
  color: var(--accent) !important;
}

/* ========================================
   COMPREHENSIVE COMPONENT OVERRIDES
   ======================================== */

/* Headers and Titles - All Components */
:root[data-theme="light"] .card-header,
:root[data-theme="light"] .video-header,
:root[data-theme="light"] .match-header,
:root[data-theme="light"] .stats-header,
:root[data-theme="light"] .news-header,
:root[data-theme="light"] .achievement-header,
:root[data-theme="light"] .koth-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* All Button Overrides */
:root[data-theme="light"] .view-all-btn,
:root[data-theme="light"] .upload-match-btn,
:root[data-theme="light"] .refresh-btn,
:root[data-theme="light"] .widget-refresh,
:root[data-theme="light"] .notification-btn,
:root[data-theme="light"] .quick-action-btn,
:root[data-theme="light"] .card-btn,
:root[data-theme="light"] .stats-btn {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

:root[data-theme="light"] .view-all-btn:hover,
:root[data-theme="light"] .upload-match-btn:hover,
:root[data-theme="light"] .refresh-btn:hover,
:root[data-theme="light"] .widget-refresh:hover,
:root[data-theme="light"] .notification-btn:hover,
:root[data-theme="light"] .quick-action-btn:hover,
:root[data-theme="light"] .card-btn:hover,
:root[data-theme="light"] .stats-btn:hover {
  border-color: var(--accent) !important;
  background: var(--hover-bg) !important;
  color: var(--accent) !important;
}

/* Stat Cards and Values */
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .elo-rating,
:root[data-theme="light"] .runouts-count,
:root[data-theme="light"] .performance-stat {
  background: var(--muted) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

:root[data-theme="light"] .elo-value,
:root[data-theme="light"] .runouts-value,
:root[data-theme="light"] .stat-value,
:root[data-theme="light"] .performance-value {
  color: var(--accent) !important;
}

/* Footers - All Components */
:root[data-theme="light"] .card-footer,
:root[data-theme="light"] .widget-footer,
:root[data-theme="light"] .stats-footer,
:root[data-theme="light"] .video-footer,
:root[data-theme="light"] .match-footer {
  background: var(--muted) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--subtext) !important;
}

/* Achievement Areas */
:root[data-theme="light"] .achievements-container,
:root[data-theme="light"] .achievement-item,
:root[data-theme="light"] .achievement-card,
:root[data-theme="light"] .trophy-item,
:root[data-theme="light"] .badge-item {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

:root[data-theme="light"] .achievement-title,
:root[data-theme="light"] .trophy-name,
:root[data-theme="light"] .badge-title {
  color: var(--text) !important;
}

:root[data-theme="light"] .achievement-points,
:root[data-theme="light"] .trophy-points,
:root[data-theme="light"] .badge-points {
  color: var(--accent) !important;
}

/* King of the Hill Areas */
:root[data-theme="light"] .king-of-hill-card,
:root[data-theme="light"] .koth-container,
:root[data-theme="light"] .koth-content,
:root[data-theme="light"] .koth-player,
:root[data-theme="light"] .koth-stats {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

:root[data-theme="light"] .koth-title,
:root[data-theme="light"] .koth-crown {
  color: var(--accent) !important;
}

/* News Articles */
:root[data-theme="light"] .news-article,
:root[data-theme="light"] .news-item,
:root[data-theme="light"] .article-card,
:root[data-theme="light"] .news-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

:root[data-theme="light"] .news-article:hover,
:root[data-theme="light"] .news-item:hover,
:root[data-theme="light"] .article-card:hover,
:root[data-theme="light"] .news-card:hover {
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-lg) !important;
}

:root[data-theme="light"] .news-title,
:root[data-theme="light"] .article-title {
  color: var(--text) !important;
}

:root[data-theme="light"] .news-excerpt,
:root[data-theme="light"] .article-excerpt {
  color: var(--subtext) !important;
}

:root[data-theme="light"] .news-date,
:root[data-theme="light"] .article-date {
  color: var(--subtext) !important;
}

/* Video Components */
:root[data-theme="light"] .video-card,
:root[data-theme="light"] .video-item,
:root[data-theme="light"] .match-video {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
}

:root[data-theme="light"] .match-title {
  color: var(--text) !important;
}

/* Navigation and Links */
:root[data-theme="light"] .view-detailed,
:root[data-theme="light"] .see-more,
:root[data-theme="light"] .read-more {
  color: var(--accent) !important;
}

:root[data-theme="light"] .view-detailed:hover,
:root[data-theme="light"] .see-more:hover,
:root[data-theme="light"] .read-more:hover {
  color: var(--hover-accent) !important;
}

/* Rank and Badge Elements */
:root[data-theme="light"] .rank-badge,
:root[data-theme="light"] .level-badge,
:root[data-theme="light"] .status-badge {
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
}

/* Comprehensive Header Overrides */
:root[data-theme="light"] .card-header,
:root[data-theme="light"] .widget-header,
:root[data-theme="light"] .sidebar-header,
:root[data-theme="light"] .dashboard-header {
  background: linear-gradient(135deg, var(--surface), var(--muted)) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}

/* All Card Backgrounds */
/* Ensure all dashboard cards have consistent borders */
:root[data-theme="light"] .recent-videos-card,
:root[data-theme="light"] .pool-stats-card,
:root[data-theme="light"] .koth-card,
:root[data-theme="light"] .match-history-card,
:root[data-theme="light"] .trophies-card,
:root[data-theme="light"] .achievements-card,
:root[data-theme="light"] .video-card,
:root[data-theme="light"] .stats-card,
:root[data-theme="light"] .history-item,
:root[data-theme="light"] .match-item,
:root[data-theme="light"] .trophy-item,
:root[data-theme="light"] .achievement-item {
  background: var(--card) !important;
  border: 2px solid var(--border) !important;
}

/* Dashboard Header Full Width Fix */
[data-theme="light"] .dashboard-header .dashboard-header-container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 1rem !important;
}

/* Match History Card Styling - Ensure visible border */
[data-theme="light"] .match-history-card {
  overflow: hidden !important;
  border: 2px solid var(--border) !important;
  border-radius: 12px !important;
}

[data-theme="light"] .match-history-card .matches-list {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: 350px !important;
  margin: 0 !important;
  padding: 0 !important;
}

[data-theme="light"] .match-history-card .matches-list::-webkit-scrollbar {
  width: 6px !important;
}

[data-theme="light"]
  .match-history-card
  .matches-list::-webkit-scrollbar-track {
  background: var(--muted) !important;
  border-radius: 3px !important;
}

[data-theme="light"]
  .match-history-card
  .matches-list::-webkit-scrollbar-thumb {
  background: var(--border) !important;
  border-radius: 3px !important;
}

[data-theme="light"]
  .match-history-card
  .matches-list::-webkit-scrollbar-thumb:hover {
  background: var(--subtext) !important;
}

[data-theme="light"] .match-history-card .match-card {
  margin: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  padding: 1rem 1.5rem !important;
  border-bottom: 1px solid var(--border) !important;
  transition: all 0.2s ease !important;
}

[data-theme="light"] .match-history-card .match-card:hover {
  background: var(--hover-bg) !important;
  border-left: 3px solid var(--accent) !important;
  padding-left: calc(1.5rem - 3px) !important;
}

[data-theme="light"] .match-history-card .card-header {
  padding: 1.5rem 1.5rem 1rem 1.5rem !important;
}

[data-theme="light"] .match-history-card .card-footer {
  padding: 1rem 1.5rem 1.5rem 1.5rem !important;
}

/* All Button Backgrounds */
:root[data-theme="light"] .view-all-btn,
:root[data-theme="light"] .upload-btn,
:root[data-theme="light"] .refresh-btn,
:root[data-theme="light"] .action-button,
:root[data-theme="light"] .challenge-btn,
:root[data-theme="light"] .view-detailed,
:root[data-theme="light"] .view-more,
:root[data-theme="light"] .widget-refresh {
  background: var(--muted) !important;
  border: 1px solid var(--border) !important;
  color: var(--accent) !important;
}

:root[data-theme="light"] .view-all-btn:hover,
:root[data-theme="light"] .upload-btn:hover,
:root[data-theme="light"] .refresh-btn:hover,
:root[data-theme="light"] .action-button:hover,
:root[data-theme="light"] .challenge-btn:hover,
:root[data-theme="light"] .view-detailed:hover,
:root[data-theme="light"] .view-more:hover,
:root[data-theme="light"] .widget-refresh:hover {
  background: var(--hover-bg) !important;
  border-color: var(--accent) !important;
}

/* All Text Colors */
:root[data-theme="light"] .card-title,
:root[data-theme="light"] .achievement-title,
:root[data-theme="light"] .match-title,
:root[data-theme="light"] .trophy-title,
:root[data-theme="light"] .koth-title,
:root[data-theme="light"] .history-title {
  color: var(--text) !important;
}

/* All Stat Values and Numbers */
:root[data-theme="light"] .elo-rating,
:root[data-theme="light"] .runout-count,
:root[data-theme="light"] .match-score,
:root[data-theme="light"] .trophy-count,
:root[data-theme="light"] .achievement-points,
:root[data-theme="light"] .koth-streak,
:root[data-theme="light"] .stat-number,
:root[data-theme="light"] .match-result,
:root[data-theme="light"] .win-percentage {
  color: var(--accent) !important;
}

/* All Secondary Text */
:root[data-theme="light"] .match-date,
:root[data-theme="light"] .achievement-desc,
:root[data-theme="light"] .trophy-desc,
:root[data-theme="light"] .koth-date,
:root[data-theme="light"] .history-meta,
:root[data-theme="light"] .card-subtitle,
:root[data-theme="light"] .global-rank,
:root[data-theme="light"] .matches-count {
  color: var(--subtext) !important;
}

/* Footer Areas */
:root[data-theme="light"] .card-footer,
:root[data-theme="light"] .widget-footer,
:root[data-theme="light"] .stats-footer,
:root[data-theme="light"] .history-footer {
  background: var(--muted) !important;
  border-top: 1px solid var(--border) !important;
}

/* Beta Announcement Additional Overrides */
:root[data-theme="light"] .beta-badge-pulse,
:root[data-theme="light"] .beta-graphic,
:root[data-theme="light"] .video-message-placeholder,
:root[data-theme="light"] .beta-video-container {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}

:root[data-theme="light"] .beta-features {
  background: var(--muted) !important;
}

/* Combined Beta Hero Layout - Light Theme */
:root[data-theme="light"] .beta-hero-combined {
  background: linear-gradient(
    135deg,
    var(--surface) 0%,
    #f1f5f9 100%
  ) !important;
}

:root[data-theme="light"] .beta-features-section {
  border-left: 1px solid var(--border) !important;
}

:root[data-theme="light"] .beta-features-section .feature-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
}

:root[data-theme="light"] .beta-features-section .feature-card:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 8px 25px rgba(37, 99, 235, 0.15) !important;
}

@media (max-width: 1024px) {
  :root[data-theme="light"] .beta-features-section {
    border-left: none !important;
    border-top: 1px solid var(--border) !important;
  }
}

/* Beta Submit Button - Light Theme */
:root[data-theme="light"] .beta-submit-btn {
  background: #000000 !important;
  border: 1px solid #333333 !important;
  color: #ffffff !important;
}

:root[data-theme="light"] .beta-submit-btn:hover {
  background: #1a1a1a !important;
  border-color: #555555 !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
}

:root[data-theme="light"] .beta-submit-btn:active {
  background: #000000 !important;
}

/* Additional Dark Color Overrides - Catch remaining hardcoded colors */

:root[data-theme="light"] *[style*="background: #0f0f0f"],
:root[data-theme="light"] *[style*="background: #1a1a1a"],
:root[data-theme="light"] *[style*="background: #111"],
:root[data-theme="light"] *[style*="background: #222"] {
  background: var(--surface) !important;
}

:root[data-theme="light"] *[style*="color: #e5e5e5"],
:root[data-theme="light"] *[style*="color: #fff"],
:root[data-theme="light"] *[style*="color: #ccc"] {
  color: var(--text) !important;
}

:root[data-theme="light"] *[style*="color: #888"],
:root[data-theme="light"] *[style*="color: #666"] {
  color: var(--subtext) !important;
}

/* Target specific hardcoded colors */
:root[data-theme="light"] *[style*="background: #0f0f0f"],
:root[data-theme="light"] *[style*="background: #1a1a1a"],
:root[data-theme="light"] *[style*="background: #222"] {
  background: var(--surface) !important;
}

:root[data-theme="light"] *[style*="color: #e5e5e5"],
:root[data-theme="light"] *[style*="color: #ccc"],
:root[data-theme="light"] *[style*="color: #fff"] {
  color: var(--text) !important;
}

:root[data-theme="light"] *[style*="color: #888"],
:root[data-theme="light"] *[style*="color: #666"] {
  color: var(--subtext) !important;
}

:root[data-theme="light"] *[style*="color: #32d399"],
:root[data-theme="light"] *[style*="background: #32d399"] {
  color: var(--accent) !important;
  background: var(--accent) !important;
}

/* ========================================
   INNER ELEMENTS & SECTIONS OVERRIDES
   ======================================== */

/* All Sections Inside Cards */
:root[data-theme="light"] .trophy-stats-section,
:root[data-theme="light"] .recent-trophies-section,
:root[data-theme="light"] .active-trophies-section,
:root[data-theme="light"] .koth-stats-section,
:root[data-theme="light"] .leaderboard-section,
:root[data-theme="light"] .achievements-section,
:root[data-theme="light"] .news-section,
:root[data-theme="light"] .history-section {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* All Inner Cards and Items */
:root[data-theme="light"] .trophy-card,
:root[data-theme="light"] .achievement-card,
:root[data-theme="light"] .match-card,
:root[data-theme="light"] .news-card,
:root[data-theme="light"] .leaderboard-item,
:root[data-theme="light"] .stat-item,
:root[data-theme="light"] .history-item,
:root[data-theme="light"] .video-item,
:root[data-theme="light"] .opponent-avatar {
  background: var(--muted) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

:root[data-theme="light"] .trophy-card:hover,
:root[data-theme="light"] .achievement-card:hover,
:root[data-theme="light"] .match-card:hover,
:root[data-theme="light"] .news-card:hover,
:root[data-theme="light"] .leaderboard-item:hover,
:root[data-theme="light"] .stat-item:hover,
:root[data-theme="light"] .history-item:hover {
  background: var(--hover-bg) !important;
  border-color: var(--accent) !important;
}

/* All Names, Titles, and Labels */
:root[data-theme="light"] .opponent-name,
:root[data-theme="light"] .trophy-name,
:root[data-theme="light"] .achievement-name,
:root[data-theme="light"] .news-title,
:root[data-theme="light"] .leaderboard-name,
:root[data-theme="light"] .player-name {
  color: var(--text) !important;
}

/* All Meta Information */
:root[data-theme="light"] .match-meta,
:root[data-theme="light"] .trophy-meta,
:root[data-theme="light"] .achievement-meta,
:root[data-theme="light"] .news-meta,
:root[data-theme="light"] .leaderboard-meta,
:root[data-theme="light"] .queue-info {
  color: var(--subtext) !important;
}

/* All Action Buttons and Interactive Elements */
:root[data-theme="light"] .action-btn,
:root[data-theme="light"] .challenge-btn,
:root[data-theme="light"] .upload-btn,
:root[data-theme="light"] .watch-btn,
:root[data-theme="light"] .details-btn {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

:root[data-theme="light"] .action-btn:hover,
:root[data-theme="light"] .challenge-btn:hover,
:root[data-theme="light"] .upload-btn:hover,
:root[data-theme="light"] .watch-btn:hover,
:root[data-theme="light"] .details-btn:hover {
  background: var(--hover-bg) !important;
  border-color: var(--accent) !important;
}

/* Stats Highlights and Special Elements */
:root[data-theme="light"] .stat-highlight {
  background: linear-gradient(
    135deg,
    rgba(37, 99, 235, 0.1),
    rgba(0, 181, 116, 0.05)
  ) !important;
  border: 1px solid rgba(37, 99, 235, 0.3) !important;
}

/* Footer Elements */
:root[data-theme="light"] .footer-stats,
:root[data-theme="light"] .footer-stat {
  color: var(--text) !important;
}

:root[data-theme="light"] .footer-stat .stat-value {
  color: var(--accent) !important;
}

:root[data-theme="light"] .footer-stat .stat-label {
  color: var(--subtext) !important;
}

/* =============================================================================
   KING OF THE HILL SPECIFIC FIXES
   ============================================================================= */

/* KOTH Stat Rows - The detailed stats with labels and values */
:root[data-theme="light"] .stat-row {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}

:root[data-theme="light"] .stat-row .stat-label {
  color: var(--subtext) !important;
}

:root[data-theme="light"] .stat-row .stat-value {
  color: var(--text) !important;
}

:root[data-theme="light"] .stat-row .stat-value.highlight {
  color: var(--accent) !important;
}

:root[data-theme="light"] .stat-row .stat-value.elo {
  color: var(--accent) !important;
}

/* KOTH Leaderboard Items */
:root[data-theme="light"] .leaderboard-item {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}

:root[data-theme="light"] .leaderboard-item:hover {
  background: var(--hover-bg) !important;
  border-color: var(--accent) !important;
}

/* =============================================================================
   RECENT ACHIEVEMENTS SPECIFIC FIXES
   ============================================================================= */

/* Recent Achievement Items */
:root[data-theme="light"] .recent-item {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}

:root[data-theme="light"] .recent-item:hover {
  background: var(--hover-bg) !important;
  border-color: var(--accent) !important;
}

:root[data-theme="light"] .recent-title {
  color: var(--text) !important;
}

:root[data-theme="light"] .recent-date {
  color: var(--subtext) !important;
}

:root[data-theme="light"] .recent-status {
  color: var(--subtext) !important;
}

:root[data-theme="light"] .recent-status.active {
  color: var(--accent) !important;
}

:root[data-theme="light"] .recent-status.expired {
  color: var(--subtext) !important;
}

/* Trophy Stats Section Stat Items */
:root[data-theme="light"] .trophy-stats-section .stat-item {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}

:root[data-theme="light"] .trophy-stats-section .stat-item:hover {
  background: var(--hover-bg) !important;
  border-color: var(--accent) !important;
}

:root[data-theme="light"] .trophy-stats-section .stat-value {
  color: var(--text) !important;
}

:root[data-theme="light"] .trophy-stats-section .stat-label {
  color: var(--subtext) !important;
}

/* =============================================================================
   POOL STATISTICS CARDS FIXES
   ============================================================================= */

/* ELO Rating and Runouts Info Boxes */
:root[data-theme="light"] .info-box,
:root[data-theme="light"] .elo-box,
:root[data-theme="light"] .runouts-box {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}

:root[data-theme="light"] .info-box:hover {
  background: var(--hover-bg) !important;
  border-color: var(--accent) !important;
}

/* Box Header Elements */
:root[data-theme="light"] .box-title {
  color: var(--text) !important;
}

/* Primary Stats (Large numbers like ELO ratings) */
:root[data-theme="light"] .primary-value {
  color: var(--accent) !important;
}

:root[data-theme="light"] .primary-label {
  color: var(--subtext) !important;
}

/* Secondary Stats (Rank, Tier, Streaks) */
:root[data-theme="light"] .rank-number,
:root[data-theme="light"] .tier-name,
:root[data-theme="light"] .streak-value {
  color: var(--text) !important;
}

:root[data-theme="light"] .rank-label,
:root[data-theme="light"] .tier-label,
:root[data-theme="light"] .streak-label {
  color: var(--subtext) !important;
}

/* Additional Stats Grid */
:root[data-theme="light"] .additional-stats .stat-box {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}

:root[data-theme="light"] .additional-stats .stat-value {
  color: var(--accent) !important;
}

:root[data-theme="light"] .additional-stats .stat-label {
  color: var(--subtext) !important;
}

/* =============================================================================
   UPLOAD VIDEO BUTTON FIXES
   ============================================================================= */

/* Upload Match Video Button */
:root[data-theme="light"] .upload-video-btn {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

:root[data-theme="light"] .upload-video-btn:hover {
  background: var(--hover-bg) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* =============================================================================
   DASHBOARD SIDEBAR BORDER FIX
   ============================================================================= */

/* Remove any potential dark borders or shadows on sidebar */
:root[data-theme="light"] .dashboard-sidebar {
  border-right: none !important;
  box-shadow: none !important;
  border: none !important;
}

:root[data-theme="light"] .dashboard-sidebar-container {
  border-right: none !important;
  box-shadow: none !important;
  border: none !important;
}

:root[data-theme="light"] .dashboard-sidebar::before,
:root[data-theme="light"] .dashboard-sidebar::after {
  display: none !important;
}

:root[data-theme="light"] .dashboard-sidebar-container::before,
:root[data-theme="light"] .dashboard-sidebar-container::after {
  display: none !important;
}

/* Dashboard Container */
:root[data-theme="light"] .dashboard-container {
  gap: 0 !important;
  background: var(--bg) !important;
}

:root[data-theme="light"] .dashboard-page {
  background: var(--bg) !important;
}

/* =============================================================================
   SCROLLBAR FIXES FOR LIGHT THEME
   ============================================================================= */

/* Dashboard Sidebar Scrollbar */
:root[data-theme="light"] .dashboard-sidebar {
  scrollbar-width: thin !important;
  scrollbar-color: var(--border) var(--surface) !important;
}

:root[data-theme="light"] .dashboard-sidebar::-webkit-scrollbar {
  width: 6px !important;
}

:root[data-theme="light"] .dashboard-sidebar::-webkit-scrollbar-track {
  background: var(--surface) !important;
}

:root[data-theme="light"] .dashboard-sidebar::-webkit-scrollbar-thumb {
  background: var(--border) !important;
  border-radius: 3px !important;
}

:root[data-theme="light"] .dashboard-sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--accent) !important;
}

/* Match History Scrollbar */
:root[data-theme="light"] .matches-list::-webkit-scrollbar {
  width: 6px !important;
}

:root[data-theme="light"] .matches-list::-webkit-scrollbar-track {
  background: var(--surface) !important;
}

:root[data-theme="light"] .matches-list::-webkit-scrollbar-thumb {
  background: var(--border) !important;
  border-radius: 3px !important;
}

:root[data-theme="light"] .matches-list::-webkit-scrollbar-thumb:hover {
  background: var(--accent) !important;
}

/* =============================================================================
   VIDEO OVERLAY ELEMENTS - MAINTAIN DARK MODE STYLING FOR CONTRAST
   ============================================================================= */

/* Video Duration Overlay - Keep dark mode white text for readability */
:root[data-theme="light"] .video-thumbnail .video-duration {
  background: rgba(0, 0, 0, 0.8) !important;
  color: #fff !important;
}

/* Result Badge Overlay - Keep dark mode white text */
:root[data-theme="light"] .video-thumbnail .result-badge.win {
  background: rgba(34, 197, 94, 0.9) !important;
  color: #fff !important;
}

:root[data-theme="light"] .video-thumbnail .result-badge.loss {
  background: rgba(239, 68, 68, 0.9) !important;
  color: #fff !important;
}

/* Play Button - Keep dark mode styling with white icon */
:root[data-theme="light"] .play-button {
  background: rgba(50, 211, 153, 0.9) !important;
}

:root[data-theme="light"] .play-button:hover {
  background: #32d399 !important;
}

:root[data-theme="light"] .play-icon {
  color: #000 !important;
}

/* Video Overlay Background - Keep dark mode overlay */
:root[data-theme="light"] .video-overlay {
  background: rgba(0, 0, 0, 0.4) !important;
}

/* Video Info Section - Keep original dark mode colors for readability */
/* No overrides needed - let original colors remain */

/* =============================================================================
   USER DROPDOWN MENU FIXES
   ============================================================================= */

/* User Menu Trigger */
:root[data-theme="light"] .user-menu-trigger {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(37, 99, 235, 0.2) !important;
  color: #1e293b !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

:root[data-theme="light"] .user-menu-trigger:hover {
  background: #ffffff !important;
  border-color: #2563eb !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* User Menu Dropdown */
:root[data-theme="light"] .user-menu-dropdown {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
}

/* User Info in Trigger - All text elements */
:root[data-theme="light"] .user-menu-trigger .user-name {
  color: #1e293b !important;
}

:root[data-theme="light"] .user-menu-trigger .user-role {
  color: #64748b !important;
}

:root[data-theme="light"] .user-menu-trigger .menu-arrow {
  color: #64748b !important;
}

:root[data-theme="light"] .user-menu-trigger .user-info {
  color: #1e293b !important;
}

:root[data-theme="light"] .user-menu-trigger .user-info span {
  color: #64748b !important;
}

:root[data-theme="light"] .user-menu-trigger * {
  color: inherit !important;
}

/* User Avatar Text */
:root[data-theme="light"] .user-menu-trigger .default-avatar {
  background: linear-gradient(45deg, #2563eb, #3b82f6) !important;
  color: #ffffff !important;
}

/* Menu Header in Dropdown */
:root[data-theme="light"] .menu-user-info strong {
  color: #1e293b !important;
}

:root[data-theme="light"] .menu-user-info span {
  color: #64748b !important;
}

/* Menu Divider */
:root[data-theme="light"] .menu-divider {
  background: #e2e8f0 !important;
}

/* Menu Items in Dropdown */
:root[data-theme="light"] .menu-item {
  color: #475569 !important;
}

:root[data-theme="light"] .menu-item:hover {
  background: #f1f5f9 !important;
  color: #2563eb !important;
}

:root[data-theme="light"] .menu-item.active {
  background: rgba(37, 99, 235, 0.1) !important;
  color: var(--accent) !important;
}

:root[data-theme="light"] .menu-item.logout-btn:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #ef4444 !important;
}

/* =============================================================================
   MATCH HISTORY VISIBILITY IMPROVEMENTS
   ============================================================================= */

/* Enhanced Match Cards */
:root[data-theme="light"] .match-card {
  border: 1px solid transparent !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  margin-bottom: 0.5rem !important;
  border-radius: 8px !important;
}

:root[data-theme="light"] .match-card:hover {
  background: var(--hover-bg) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15) !important;
  transform: translateY(-1px) !important;
}

/* Match Content Enhancement */
:root[data-theme="light"] .opponent-name {
  color: var(--text) !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] .match-meta .game-type {
  background: rgba(37, 99, 235, 0.15) !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
}

:root[data-theme="light"] .match-date {
  color: var(--subtext) !important;
  font-weight: 500 !important;
}

/* Result Badges - Only affect match cards, not video overlays */
:root[data-theme="light"] .match-card .result-badge.win {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  color: white !important;
  font-weight: bold !important;
}

:root[data-theme="light"] .match-card .result-badge.loss {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: white !important;
  font-weight: bold !important;
}

/* Match Score */
:root[data-theme="light"] .match-score {
  color: var(--text) !important;
  font-weight: 600 !important;
}

/* Stat Values Enhancement */
:root[data-theme="light"] .stat-value.positive {
  color: #22c55e !important;
  font-weight: bold !important;
}

:root[data-theme="light"] .stat-value.negative {
  color: #ef4444 !important;
  font-weight: bold !important;
}

:root[data-theme="light"] .stat-label {
  color: var(--subtext) !important;
  font-weight: 600 !important;
}

/* Action Buttons */
:root[data-theme="light"] .action-btn {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}

:root[data-theme="light"] .action-btn:hover {
  background: var(--hover-bg) !important;
  border-color: var(--accent) !important;
}

/* =============================================================================
   REMOVE ANY DARK BORDERS FROM MATCH HISTORY
   ============================================================================= */

:root[data-theme="light"] .match-history-card::before,
:root[data-theme="light"] .match-history-card::after {
  display: none !important;
}

/* Matches List Container */
:root[data-theme="light"] .matches-list {
  border-right: none !important;
  box-shadow: none !important;
}

:root[data-theme="light"] .matches-list::before,
:root[data-theme="light"] .matches-list::after {
  display: none !important;
}

/* =============================================================================
   HOME TIMELINE LIGHT THEME FIXES - Remove white text and drop shadows
   ============================================================================= */

/* Beta Timeline Title */
:root[data-theme="light"] .home-timeline-title {
  color: var(--text) !important;
  text-shadow: none !important;
}

/* Beta Timeline Content */
:root[data-theme="light"] .home-timeline-content h5 {
  color: var(--text) !important;
  text-shadow: none !important;
}

:root[data-theme="light"] .home-timeline-content p {
  color: var(--subtext) !important;
  text-shadow: none !important;
}

/* =============================================================================
   HEADER DROP SHADOW FIXES - Remove blurry effects in light theme
   ============================================================================= */

:root[data-theme="light"] .header-title,
:root[data-theme="light"] .logo-text {
  text-shadow: none !important;
}

/* =============================================================================
   BETA SECTION TEXT FIXES - Improve readability in light theme
   ============================================================================= */

/* Beta Badge Text */
:root[data-theme="light"] .beta-badge-title {
  color: var(--text) !important;
  text-shadow: none !important;
}

:root[data-theme="light"] .beta-badge-subtitle {
  color: var(--subtext) !important;
  text-shadow: none !important;
}

/* Beta Main Content - Remove drop shadows and fix readability */
:root[data-theme="light"] .beta-title {
  color: var(--text) !important;
  text-shadow: none !important;
}

:root[data-theme="light"] .beta-description {
  color: var(--subtext) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Video Info Text */
:root[data-theme="light"] .video-title {
  color: var(--text) !important;
  text-shadow: none !important;
}

:root[data-theme="light"] .video-duration {
  color: var(--subtext) !important;
  text-shadow: none !important;
}

/* Countdown Text */
:root[data-theme="light"] .time-label {
  color: var(--subtext) !important;
  text-shadow: none !important;
}

:root[data-theme="light"] .time-value {
  color: var(--text) !important;
  text-shadow: none !important;
}

:root[data-theme="light"] .coming-soon-message {
  color: var(--subtext) !important;
  text-shadow: none !important;
}

/* =============================================================================
   BETA TIMELINE MARKERS - Improve visibility in light theme
   ============================================================================= */

/* Make inactive timeline markers more visible */
[data-theme="light"] .home-timeline-marker {
  background: rgba(37, 99, 235, 0.15) !important;
  border: 2px solid rgba(37, 99, 235, 0.4) !important;
  backdrop-filter: blur(10px) !important;
}

/* Keep active marker highly visible */
[data-theme="light"] .home-timeline-item.active .home-timeline-marker {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4) !important;
}

/* Timeline marker dots */
[data-theme="light"] .home-timeline-marker::after {
  background: rgba(37, 99, 235, 0.8) !important;
}

[data-theme="light"] .home-timeline-item.active .home-timeline-marker::after {
  background: white !important;
}

/* Timeline connecting line */
[data-theme="light"] .home-timeline-track::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(37, 99, 235, 0.3),
    transparent
  ) !important;
}

/* =============================================================================
   VIDEO INFO TEXT - Make video overlay text readable
   ============================================================================= */

/* Video overlay text should stay white for readability over video */
[data-theme="light"] .video-info .video-title {
  color: white !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

[data-theme="light"] .video-info .video-duration {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

/* =============================================================================
   LOGIN PAGE LIGHT THEME OVERRIDES - Fix login form visibility
   ============================================================================= */

/* Login Container */
[data-theme="light"] .login-form-container {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.1) !important;
}

/* Form Labels */
[data-theme="light"] .form-label {
  color: var(--text) !important;
}

/* Form Inputs */
[data-theme="light"] .form-input {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

[data-theme="light"] .form-input:focus {
  border-color: var(--accent) !important;
  background: white !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
}

[data-theme="light"] .form-input::placeholder {
  color: var(--subtext) !important;
}

/* Password Toggle */
[data-theme="light"] .password-toggle {
  color: var(--subtext) !important;
}

[data-theme="light"] .password-toggle:hover {
  color: var(--accent) !important;
}

/* Checkbox and Links */
[data-theme="light"] .checkbox-container {
  color: var(--text) !important;
}

[data-theme="light"] .forgot-link {
  color: var(--accent) !important;
}

[data-theme="light"] .forgot-link:hover {
  color: var(--hover-accent) !important;
}

/* Login Button - Keep gradient but ensure visibility */
[data-theme="light"] .login-btn {
  background: linear-gradient(
    45deg,
    var(--accent),
    var(--accent-secondary)
  ) !important;
  color: white !important;
  border: 1px solid var(--accent) !important;
}

[data-theme="light"] .login-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(37, 99, 235, 0.3) !important;
}

/* Divider */
[data-theme="light"] .login-divider {
  color: var(--subtext) !important;
}

[data-theme="light"] .login-divider::before {
  background: var(--border) !important;
}

[data-theme="light"] .login-divider span {
  background: var(--surface) !important;
}

/* Demo Notice */
[data-theme="light"] .demo-notice {
  background: rgba(37, 99, 235, 0.1) !important;
  border: 1px solid var(--accent) !important;
}

[data-theme="light"] .demo-badge {
  background: var(--accent) !important;
  color: white !important;
  border: 1px solid var(--accent) !important;
}

[data-theme="light"] .demo-notice p {
  color: var(--subtext) !important;
}

/* Alert Messages */
[data-theme="light"] .alert-error {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid #ef4444 !important;
  color: #dc2626 !important;
}

[data-theme="light"] .alert-success {
  background: rgba(34, 197, 94, 0.1) !important;
  border: 1px solid #22c55e !important;
  color: #16a34a !important;
}

/* Login Page Background and Content */
[data-theme="light"] .login-container {
  background: var(--bg) !important;
}

[data-theme="light"] .login-wrapper {
  background: var(--surface) !important;
}

[data-theme="light"] .login-header h1 {
  color: var(--text) !important;
}

[data-theme="light"] .login-header p {
  color: var(--subtext) !important;
}

[data-theme="light"] .login-footer p {
  color: var(--text) !important;
}

[data-theme="light"] .signup-link {
  color: var(--accent) !important;
}

[data-theme="light"] .signup-link:hover {
  color: var(--hover-accent) !important;
}

[data-theme="light"] .feature-item {
  color: var(--text) !important;
}

/* =============================================================================
   FOOTER LIGHT THEME FIXES - Make footer links visible
   ============================================================================= */

/* Footer link colors */
[data-theme="light"] #footer-links ul li a {
  color: var(--text) !important;
}

[data-theme="light"] #footer-links ul li a:hover {
  color: var(--accent) !important;
}

[data-theme="light"] #footer-links h2 {
  color: var(--text) !important;
}

/* =============================================================================
   DASHBOARD HOVER EFFECTS - Light theme shadows
   ============================================================================= */

[data-theme="light"] .recent-videos-card:hover,
[data-theme="light"] .pool-stats-card:hover,
[data-theme="light"] .match-history-card:hover,
[data-theme="light"] .news-preview-card:hover,
/* Light Mode Dashboard Card Hover - Border Only (Override Everything) */
:root[data-theme="light"] .recent-videos-card:hover,
:root[data-theme="light"] .pool-stats-card:hover,
:root[data-theme="light"] .match-history-card:hover,
:root[data-theme="light"] .news-preview-card:hover,
:root[data-theme="light"] .achievements-card:hover,
:root[data-theme="light"] .video-card:hover,
:root[data-theme="light"] .stats-card:hover,
:root[data-theme="light"] .trophies-card:hover {
  border-color: var(--accent) !important;
  transform: none !important;
  box-shadow: none !important;
  transition: border-color 0.3s ease !important;
}

/* King of the Hill Border Fixes */
[data-theme="light"] .koth-card .koth-stats-section {
  border-bottom: none !important;
  padding-bottom: 1.5rem !important;
}

[data-theme="light"] .koth-card .current-king-section {
  border-bottom: none !important;
  padding-bottom: 1.5rem !important;
}

[data-theme="light"] .koth-card .leaderboard-section {
  padding-top: 0.5rem !important;
}

/* Community Stats Widget Light Theme */
[data-theme="light"] .community-stats-widget {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

[data-theme="light"] .community-stats-widget:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.1) !important;
}

[data-theme="light"] .widget-title {
  color: var(--text) !important;
}

[data-theme="light"] .community-stats-widget .stat-item {
  background: var(--hover-bg) !important;
  border: 1px solid var(--border) !important;
}

[data-theme="light"] .community-stats-widget .stat-number {
  color: var(--accent) !important;
}

[data-theme="light"] .community-stats-widget .stat-label {
  color: var(--subtext) !important;
}

[data-theme="light"] .refresh-indicator {
  color: var(--accent) !important;
}

/* Home News Grid Article Tiles Light Theme */
[data-theme="light"] .home-article-tile {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

[data-theme="light"] .home-article-tile:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.1) !important;
}

[data-theme="light"] .featured-ribbon {
  background: var(--accent) !important;
  color: white !important;
}

[data-theme="light"] .tile-title a {
  color: var(--text) !important;
}

[data-theme="light"] .tile-title a:hover {
  color: var(--accent) !important;
}

[data-theme="light"] .tile-excerpt {
  color: var(--subtext) !important;
}

[data-theme="light"] .tile-footer {
  border-top: 1px solid var(--border) !important;
}

[data-theme="light"] .tile-author {
  color: var(--accent) !important;
}

[data-theme="light"] .tile-stats {
  color: var(--subtext) !important;
}

[data-theme="light"] .tile-date {
  color: var(--subtext) !important;
}

[data-theme="light"] .stats-separator {
  color: var(--border) !important;
}

/* Remove the tile-category override to preserve individual category colors */

/* Home News Grid Light Theme */
[data-theme="light"] .home-content-section {
  background: var(--bg) !important;
  color: var(--text) !important;
}

[data-theme="light"] .home-news-title {
  color: var(--accent) !important;
}

[data-theme="light"] .view-all-news {
  color: var(--text) !important;
  border-color: var(--accent) !important;
}

[data-theme="light"] .view-all-news:hover {
  background: var(--accent) !important;
  color: white !important;
}

[data-theme="light"] .filter-btn {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--subtext) !important;
}

[data-theme="light"] .filter-btn:hover {
  border-color: var(--category-color, var(--accent)) !important;
  color: var(--category-color, var(--accent)) !important;
}

[data-theme="light"] .filter-btn.active {
  background: var(--category-color, var(--accent)) !important;
  border-color: var(--category-color, var(--accent)) !important;
  color: white !important;
}

[data-theme="light"] .filter-btn[data-category=""]:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

[data-theme="light"] .filter-btn[data-category=""].active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

[data-theme="light"] .news-grid {
  background: transparent !important;
}

[data-theme="light"] .news-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

[data-theme="light"] .news-card:hover {
  border-color: var(--accent) !important;
  background: var(--hover-bg) !important;
}

[data-theme="light"] .news-card .news-title {
  color: var(--text) !important;
}

[data-theme="light"] .news-card .news-excerpt {
  color: var(--subtext) !important;
}

[data-theme="light"] .news-card .news-meta {
  color: var(--subtext) !important;
}

[data-theme="light"] .news-card .news-category {
  background: var(--accent) !important;
  color: white !important;
}

[data-theme="light"] .news-card .news-author {
  color: var(--subtext) !important;
}

[data-theme="light"] .news-card .news-date {
  color: var(--subtext) !important;
}

[data-theme="light"] .news-card .read-more {
  color: var(--accent) !important;
}

[data-theme="light"] .news-card .read-more:hover {
  color: var(--hover-accent) !important;
}

/* News Preview Card Light Theme */
[data-theme="light"] .news-preview-card {
  background: var(--card) !important;
  border: 2px solid var(--border) !important;
  color: var(--text) !important;
}

[data-theme="light"] .news-preview-card .card-title {
  color: var(--text) !important;
}

[data-theme="light"] .news-preview-card .view-all {
  color: var(--accent) !important;
}

[data-theme="light"] .news-item {
  background: var(--hover-bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

[data-theme="light"] .news-item:hover {
  border-color: var(--accent) !important;
  background: var(--card) !important;
}

[data-theme="light"] .news-thumbnail {
  background: var(--muted) !important;
}

[data-theme="light"] .news-category {
  background: var(--accent) !important;
  color: white !important;
}

[data-theme="light"] .news-title {
  color: var(--text) !important;
}

[data-theme="light"] .news-excerpt {
  color: var(--subtext) !important;
}

[data-theme="light"] .news-date {
  color: var(--subtext) !important;
}

[data-theme="light"] .news-overlay {
  background: var(--muted) !important;
  color: var(--subtext) !important;
}

/* King of the Hill - Leaderboard Text Contrast Fix */
[data-theme="light"] .koth-card .leaderboard-item {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .koth-card .leaderboard-item .rank {
  color: #f59e0b !important;
}

[data-theme="light"] .koth-card .leaderboard-item .player {
  color: #1e293b !important;
}

[data-theme="light"] .koth-card .leaderboard-item .titles {
  color: #64748b !important;
}

[data-theme="light"] .koth-card .leaderboard-item.top-player {
  background: rgba(245, 158, 11, 0.1) !important;
  border-color: #f59e0b !important;
}

[data-theme="light"] .koth-card .leaderboard-item.user-position {
  background: rgba(37, 99, 235, 0.1) !important;
  border-color: #2563eb !important;
}

[data-theme="light"] .koth-card .section-title {
  color: var(--text) !important;
}

[data-theme="light"] .koth-card .view-full {
  color: var(--accent) !important;
}

:root[data-theme="light"] .koth-card:hover {
  border-color: #fbbf24 !important;
  transform: none !important;
  box-shadow: none !important;
  transition: border-color 0.3s ease !important;
}

/* =============================================================================
   KOTH COMPONENT FIXES - Remove unwanted borders and restore hover effects
   ============================================================================= */

/* Remove the border above the stats grid */
[data-theme="light"] .koth-card .card-header {
  border-bottom: none !important;
}

/* KOTH stat box hover effects - keep gold theme for top boxes */
[data-theme="light"] .koth-card .stat-highlight:hover,
[data-theme="light"] .koth-card .stat-item:hover {
  border-color: #f59e0b !important;
  background: rgba(245, 158, 11, 0.1) !important;
  transition: all 0.3s ease !important;
}

/* KOTH detailed stat rows - add hover effects */
[data-theme="light"] .koth-card .stat-row:hover {
  border-color: #f59e0b !important;
  background: rgba(245, 158, 11, 0.05) !important;
  transition: all 0.3s ease !important;
}

/* KOTH challenge button maintains its own hover effect */
[data-theme="light"] .koth-card .challenge-btn:hover,
[data-theme="light"] .trophies-card .trophy-card:hover {
  transform: scale(1.05) !important;
  transition: all 0.3s ease !important;
}

/* =============================================================================
   BUTTON TEXT COLORS - Ensure all blue buttons have white text
   ============================================================================= */

/* Primary buttons with blue backgrounds need white text */
[data-theme="light"] .beta-cta-primary,
[data-theme="light"] .login-btn,
[data-theme="light"] .action-btn.primary,
[data-theme="light"] .beta-signup-btn,
[data-theme="light"] .welcome-cta,
[data-theme="light"] .signup-btn,
[data-theme="light"] .join-now-btn a,
[data-theme="light"] .view-all-btn {
  color: white !important;
}

/* Specific fix for welcome button that has fallback to black */
:root[data-theme="light"] .welcome-cta {
  color: white !important;
}

:root[data-theme="light"] .welcome-cta:hover {
  color: white !important;
}

/* Fix for welcome button text spans */
:root[data-theme="light"] .welcome-cta .cta-text,
:root[data-theme="light"] .welcome-cta .cta-icon {
  color: white !important;
}

/* =============================================================================
   DASHBOARD CARD BUTTON FIXES - Make all buttons readable with blue theme
   ============================================================================= */

/* Trophies card buttons - subtle gray tones */
[data-theme="light"] .trophies-btn.primary,
[data-theme="light"] .trophies-btn.secondary {
  background: linear-gradient(135deg, #64748b, #475569) !important;
  color: white !important;
  border: 1px solid #64748b !important;
}

[data-theme="light"] .trophies-btn.primary:hover,
[data-theme="light"] .trophies-btn.secondary:hover {
  background: linear-gradient(135deg, #475569, #334155) !important;
}

[data-theme="light"] .trophies-btn-text,
[data-theme="light"] .trophies-btn-icon {
  color: white !important;
}

/* KOTH card buttons - subtle gray tones */
[data-theme="light"] .koth-btn.primary,
[data-theme="light"] .koth-btn.secondary {
  background: linear-gradient(135deg, #64748b, #475569) !important;
  color: white !important;
  border: 1px solid #64748b !important;
}

[data-theme="light"] .koth-btn.primary:hover,
[data-theme="light"] .koth-btn.secondary:hover {
  background: linear-gradient(135deg, #475569, #334155) !important;
}

[data-theme="light"] .koth-btn-text,
[data-theme="light"] .koth-btn-icon {
  color: white !important;
}

/* News card View All button - subtle gray tones */
[data-theme="light"] .view-all-link {
  background: linear-gradient(135deg, #64748b, #475569) !important;
  color: white !important;
  border: 1px solid #64748b !important;
  text-decoration: none !important;
  padding: 0.5rem 1rem !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  display: inline-block !important;
}

[data-theme="light"] .view-all-link:hover {
  background: linear-gradient(135deg, #475569, #334155) !important;
  transform: translateY(-1px) !important;
}

/* Button text and arrows */
[data-theme="light"] .beta-cta-primary .cta-text,
[data-theme="light"] .beta-cta-primary .cta-arrow,
[data-theme="light"] .login-btn .btn-text,
[data-theme="light"] .signup-btn .btn-text,
[data-theme="light"] .beta-signup-btn .btn-text,
[data-theme="light"] .beta-signup-btn .btn-arrow,
[data-theme="light"] .view-all-btn .btn-text,
[data-theme="light"] .view-all-btn .btn-arrow {
  color: white !important;
}

/* 33Pool Beta Call to Action Section - Eye-Catching Background */
:root[data-theme="light"] #section-beta {
  background: linear-gradient(
    135deg,
    #1e40af 0%,
    #2563eb 25%,
    #3b82f6 50%,
    #60a5fa 75%,
    #93c5fd 100%
  ) !important;
  color: #ffffff !important;
  border-bottom: 3px solid #1e40af !important;
  position: relative;
  box-shadow: 0 8px 32px rgba(37, 99, 235, 0.3) !important;
}

:root[data-theme="light"] #section-beta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    transparent 20%,
    rgba(255, 255, 255, 0.1) 40%,
    transparent 60%,
    rgba(255, 255, 255, 0.05) 80%,
    transparent 100%
  );
  pointer-events: none;
}

:root[data-theme="light"] #section-beta .beta-text h1 {
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

:root[data-theme="light"] #section-beta .beta-text p {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* =============================================================================
   LOGO BACKGROUND FIXES FOR LIGHT MODE
   ============================================================================= */

/* Dashboard Logo */
:root[data-theme="light"] .dashboard-logo {
  background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
  padding: 0.5rem !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2) !important;
  transition: all 0.3s ease !important;
}

:root[data-theme="light"] .dashboard-logo:hover {
  background: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* Footer Logo */
:root[data-theme="light"] #footer-logo {
  background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
  padding: 1rem !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.2) !important;
  display: inline-block !important;
}

:root[data-theme="light"] #footer-logo:hover {
  background: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3) !important;
  transform: translateY(-2px) !important;
  transition: all 0.3s ease !important;
}

/* Ensure logo images stay properly sized */
:root[data-theme="light"] .logo-img,
:root[data-theme="light"] #footer-logo img {
  filter: brightness(1.1) contrast(1.1) !important;
}

/* =============================================================================
   INLINE BETA TIMELINE LIGHT THEME STYLES
   ============================================================================= */

/* Inline Beta Timeline Light Theme */
:root[data-theme="light"] .beta-timeline-inline {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
}

:root[data-theme="light"] .beta-timeline-inline .timeline::before {
  background: #e5e7eb !important;
}

:root[data-theme="light"] .beta-timeline-inline .timeline-marker {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
}

/* Progressive Timeline Design - Light Theme */
:root[data-theme="light"] .beta-timeline-inline {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
}

:root[data-theme="light"] .beta-timeline-inline .timeline::before {
  background: linear-gradient(
    180deg,
    #2563eb 0%,
    #2563eb 33%,
    #d1d5db 33%,
    #d1d5db 100%
  ) !important;
}

:root[data-theme="light"] .beta-timeline-inline .timeline-marker {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  color: #6b7280 !important;
}

:root[data-theme="light"]
  .beta-timeline-inline
  .timeline-item.active
  .timeline-marker {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.4) !important;
}

:root[data-theme="light"]
  .beta-timeline-inline
  .timeline-item.active
  .timeline-content {
  background: rgba(37, 99, 235, 0.05) !important;
  border: 1px solid rgba(37, 99, 235, 0.2) !important;
}

:root[data-theme="light"] .feature-tag {
  background: rgba(37, 99, 235, 0.1) !important;
  color: #2563eb !important;
  border-color: rgba(37, 99, 235, 0.3) !important;
}

:root[data-theme="light"]
  .beta-timeline-inline
  .timeline-item.active
  .feature-tag {
  background: rgba(37, 99, 235, 0.15) !important;
  color: #2563eb !important;
  border-color: rgba(37, 99, 235, 0.4) !important;
}

/* Section Separator - Light Theme */
:root[data-theme="light"] .section-separator {
  background: linear-gradient(
    90deg,
    transparent 0%,
    #2563eb 25%,
    #2563eb 75%,
    transparent 100%
  ) !important;
}

:root[data-theme="light"] .section-separator::before {
  background: #2563eb !important;
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.6) !important;
}

/* Beta Section Background Variations - Light Theme */
:root[data-theme="light"] .beta-signup-section {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%) !important;
}

:root[data-theme="light"] .beta-signup-section::before {
  background: radial-gradient(
    circle at 20% 80%,
    rgba(37, 99, 235, 0.05) 0%,
    transparent 50%
  ) !important;
}

/* Remove timeline arrows from inline vertical timeline - Light Theme */
:root[data-theme="light"]
  .beta-timeline-inline
  .timeline-item:not(:last-child)::after {
  display: none !important;
}

/* Category styles for light theme - High contrast text on colored backgrounds */
:root[data-theme="light"] .category-tournament-news {
  background-color: #32d399 !important;
  color: #000000 !important;
  text-shadow: none !important;
}

:root[data-theme="light"] .category-tips-strategy {
  background-color: #f59e0b !important;
  color: #000000 !important;
  text-shadow: none !important;
}

:root[data-theme="light"] .category-player-profiles {
  background-color: #3b82f6 !important;
  color: white !important;
}

:root[data-theme="light"] .category-industry-news {
  background-color: #ef4444 !important;
  color: white !important;
}

:root[data-theme="light"] .category-equipment-reviews {
  background-color: #8b5cf6 !important;
  color: white !important;
}

:root[data-theme="light"] .category-recording-setup {
  background-color: #10b981 !important;
  color: white !important;
}

:root[data-theme="light"] .category-game-rules {
  background-color: #6366f1 !important;
  color: white !important;
}

:root[data-theme="light"] .category-beta-updates {
  background-color: #f97316 !important;
  color: white !important;
}

:root[data-theme="light"] .category-training-mental {
  background-color: #14b8a6 !important;
  color: white !important;
}

:root[data-theme="light"] .category-platform-vision {
  background-color: #66500a !important;
  color: white !important;
}

:root[data-theme="light"] .category-default {
  background-color: #666 !important;
  color: white !important;
}