/* Theme System - CSS Variables for Light/Dark Modes */

:root {
  /* Light Theme (default) - Comprehensive Theme Tokens */
  --color-bg-primary: #f9fafb; /* gray-50 - main background */
  --color-bg-secondary: #ffffff; /* white - cards, surfaces */
  --color-bg-elevated: #ffffff; /* white - elevated surfaces */
  --color-bg-card: #ffffff; /* white - card backgrounds */
  --color-surface: #ffffff; /* white - general surface */
  
  --color-text-primary: #111827; /* gray-900 - primary text */
  --color-text-secondary: #6b7280; /* gray-500 - secondary text */
  --color-text-muted: #9ca3af; /* gray-400 - muted text */
  
  --color-border: #e5e7eb; /* gray-200 - borders */
  --color-border-subtle: #f3f4f6; /* gray-100 - subtle borders */
  
  --color-navbar-bg: #ffffff; /* white - navbar background */
  --color-navbar-border: #e5e7eb; /* gray-300 - navbar border */
  --color-footer-bg: #f9fafb; /* gray-50 - footer background */
  
  --color-button-primary-bg: #2563eb; /* blue-600 - primary button */
  --color-button-primary-hover: #1d4ed8; /* blue-700 - primary hover */
  --color-button-primary-text: #ffffff; /* white - button text */
  
  --color-link: #2563eb; /* blue-600 - links */
  --color-link-hover: #1d4ed8; /* blue-700 - link hover */
  --color-brand: #2563eb; /* blue-600 - brand color */
  
  --color-badge-bg: #1f2937; /* gray-800 - badge background */
  --color-badge-text: #ffffff; /* white - badge text */
  
  /* Highlight colors for team builder */
  --color-highlight-bg: #f5f5f5; /* whitesmoke - highlighted team rows */
  --color-rostered-bg: #b7f1c9; /* green-50 - rostered player rows (for table rows) */
  --color-rostered-badge: #16a34a; /* green-600 - rostered badges/cards (darker green for white text) */
  --color-faded-bg: #e5e7eb; /* gray-200 - faded player background (light mode) */
  --color-faded-text: #6b7280; /* gray-500 - faded player text (light mode) */
  
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  
  /* Transitions - optimized for smooth, fast theme changes */
  --transition-theme: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

[data-theme="dark"] {
  /* Dark Theme - Midnight Blue/Grey - Modern SaaS Aesthetic */
  --color-bg-primary: #0f172a; /* slate-900 - deep charcoal navy base */
  --color-bg-secondary: #1e293b; /* slate-800 - cards, slightly lighter */
  --color-bg-elevated: #1e293b; /* slate-800 - elevated surfaces */
  --color-bg-card: #1e293b; /* slate-800 - card backgrounds */
  --color-surface: #1e293b; /* slate-800 - general surface */
  
  --color-text-primary: #f1f5f9; /* slate-100 - off-white primary */
  --color-text-secondary: #cbd5e1; /* slate-300 - muted gray-blue */
  --color-text-muted: #94a3b8; /* slate-400 - desaturated slate */
  
  --color-border: #334155; /* slate-700 - soft slate tone */
  --color-border-subtle: #1e293b; /* slate-800 - subtle borders */
  
  /* Navbar: Slightly darker than base for visual hierarchy */
  --color-navbar-bg: #0c1220; /* slightly darker than base (2-3% darker) */
  --color-navbar-border: #1e293b; /* slate-800 - subtle separation */
  --color-footer-bg: #0c1220; /* slightly darker - provides closure */
  
  --color-button-primary-bg: #2563eb; /* blue-600 - maintain brand */
  --color-button-primary-hover: #3b82f6; /* blue-500 - lighter for dark bg */
  --color-button-primary-text: #ffffff; /* white */
  
  --color-link: #60a5fa; /* blue-400 - brighter for contrast */
  --color-link-hover: #93c5fd; /* blue-300 - hover state */
  --color-brand: #2563eb; /* blue-600 - brand color */
  
  --color-badge-bg: #334155; /* slate-700 - lighter for visibility */
  --color-badge-text: #f1f5f9; /* slate-100 */
  
  /* Highlight colors for team builder - dark mode */
  --color-highlight-bg: #475569; /* slate-600 - highlighted team rows (lighter than background, clearly visible) */
  --color-rostered-bg: #059669; /* green-600 - rostered player rows (bright green with good contrast) */
  --color-rostered-badge: #059669; /* green-600 - rostered badges/cards (same as rows in dark mode) */
  --color-faded-bg: #0f172a; /* slate-900 - faded player background (darker than normal cards, clearly grayed out) */
  --color-faded-text: #64748b; /* slate-500 - faded player text (muted gray, clearly grayed out) */
  
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Global theme transitions - unified, fast, smooth
   Only animate color properties, not layout or shadows */
html {
  transition: background-color 150ms ease, color 150ms ease;
}

/* Apply transitions to all elements and pseudo-elements
   Only animate color-related properties for performance */
*,
*::before,
*::after {
  transition:
    background-color 150ms ease,
    color 150ms ease,
    border-color 150ms ease,
    fill 150ms ease,
    stroke 150ms ease;
}

/* Disable transitions during initial page load and until theme is ready
   This prevents flash and weird first-render animation */
html:not([data-theme-initialized]) *,
html:not([data-theme-initialized]) *::before,
html:not([data-theme-initialized]) *::after,
html:not(.theme-ready) *,
html:not(.theme-ready) *::before,
html:not(.theme-ready) *::after {
  transition: none !important;
}

/* Optimize transitions during theme toggle - temporarily disable to prevent repaint lag */
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
  transition: none !important;
}

/* Base background and text colors */
body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

/* Navbar - Enhanced visual hierarchy */
header.bg-white,
header[class*="bg-white"] {
  background-color: var(--color-navbar-bg) !important;
  border-bottom-color: var(--color-navbar-border) !important;
}

/* Footer */
footer.bg-white,
footer[class*="bg-white"],
footer[class*="border-t"] {
  background-color: var(--color-footer-bg) !important;
  border-top-color: var(--color-border) !important;
}

/* Cards and elevated surfaces - Comprehensive coverage */
.bg-white,
[class*="bg-white"] {
  background-color: var(--color-bg-secondary) !important;
}

.bg-gray-50,
[class*="bg-gray-50"] {
  background-color: var(--color-bg-primary) !important;
}

/* Additional background utilities */
.bg-gray-100 {
  background-color: var(--color-bg-elevated) !important;
}

.bg-gray-200 {
  background-color: var(--color-border) !important;
}

/* Text colors - Comprehensive coverage */
/* Exclude badges from general dark mode text color rules */
.text-gray-800:not(.position-badge):not(.team-badge):not([class*="-modalPosition"]):not([class*="-modalTeam"]),
.text-gray-900:not(.position-badge):not(.team-badge):not([class*="-modalPosition"]):not([class*="-modalTeam"]),
[class*="text-gray-800"]:not(.position-badge):not(.team-badge):not([class*="-modalPosition"]):not([class*="-modalTeam"]),
[class*="text-gray-900"]:not(.position-badge):not(.team-badge):not([class*="-modalPosition"]):not([class*="-modalTeam"]) {
  color: var(--color-text-primary) !important;
}

.text-gray-700:not(.position-badge):not(.team-badge):not([class*="-modalPosition"]):not([class*="-modalTeam"]),
[class*="text-gray-700"]:not(.position-badge):not(.team-badge):not([class*="-modalPosition"]):not([class*="-modalTeam"]) {
  color: var(--color-text-primary) !important;
}

.text-gray-500,
[class*="text-gray-500"] {
  color: var(--color-text-secondary) !important;
}

.text-gray-400,
[class*="text-gray-400"] {
  color: var(--color-text-muted) !important;
}

.text-gray-600 {
  color: var(--color-text-secondary) !important;
}

/* Borders - Comprehensive coverage */
.border-gray-200,
.border-gray-300,
[class*="border-gray-200"],
[class*="border-gray-300"] {
  border-color: var(--color-border) !important;
}

.border-gray-100 {
  border-color: var(--color-border-subtle) !important;
}

/* Nav links - CRITICAL: Use default text color, NOT blue by default
   Only turn blue on hover OR when nav-active class is present */
nav a[class*="hover:text-blue"]:not(.nav-active),
header nav a[class*="hover:text-blue"]:not(.nav-active),
nav a[class*="hover:text-blue-600"]:not(.nav-active),
header nav a[class*="hover:text-blue-600"]:not(.nav-active),
nav a[class*="hover:text-blue-500"]:not(.nav-active),
header nav a[class*="hover:text-blue-500"]:not(.nav-active),
header > div > nav a[class*="hover:text-blue"]:not(.nav-active) {
  color: var(--color-text-primary) !important;
}

/* Nav links on hover - turn blue */
nav a[class*="hover:text-blue"]:hover:not(.nav-active),
header nav a[class*="hover:text-blue"]:hover:not(.nav-active),
nav a[class*="hover:text-blue-600"]:hover:not(.nav-active),
header nav a[class*="hover:text-blue-600"]:hover:not(.nav-active),
nav a[class*="hover:text-blue-500"]:hover:not(.nav-active),
header nav a[class*="hover:text-blue-500"]:hover:not(.nav-active),
header > div > nav a[class*="hover:text-blue"]:hover:not(.nav-active) {
  color: var(--color-link-hover) !important;
}

/* Active nav links always use link color (highest priority) */
nav .nav-active,
header nav .nav-active,
header > div > nav .nav-active,
.nav-active {
  color: var(--color-link) !important;
}

/* Dropdown buttons in nav - use default text color unless active */
nav button[class*="hover:text-blue"]:not(.nav-active),
header nav button[class*="hover:text-blue"]:not(.nav-active),
header > div > nav button[class*="hover:text-blue"]:not(.nav-active) {
  color: var(--color-text-primary) !important;
}

nav button[class*="hover:text-blue"]:hover:not(.nav-active),
header nav button[class*="hover:text-blue"]:hover:not(.nav-active),
header > div > nav button[class*="hover:text-blue"]:hover:not(.nav-active) {
  color: var(--color-link-hover) !important;
}

nav button.nav-active,
header nav button.nav-active,
header > div > nav button.nav-active {
  color: var(--color-link) !important;
}

/* Player name links - Use theme text color by default, change on hover (like navbar) */
/* Build drawer roster list player names */
#rosterList .w-\[52\%\],
#rosterList div[class*="w-\[52%\]"] {
  color: var(--color-text-primary) !important;
}

#rosterList .w-\[52\%\]:hover,
#rosterList div[class*="w-\[52%\]"]:hover {
  color: var(--color-link-hover) !important;
}

/* Player modal player name links */
.player-name-modal,
#teamModal .player-name-modal,
#teamModal #modalContent .player-name-modal {
  color: var(--color-text-primary) !important;
}

.player-name-modal:hover,
#teamModal .player-name-modal:hover,
#teamModal #modalContent .player-name-modal:hover {
  color: var(--color-link-hover) !important;
}

/* Non-nav links (content links in body/footer) use link color */
body a[class*="hover:text-blue"]:not(nav a):not(header nav a),
footer a[class*="hover:text-blue"],
main a[class*="hover:text-blue"],
a[class*="text-blue"]:not(nav a):not(header nav a) {
  color: var(--color-link) !important;
}

body a[class*="hover:text-blue"]:not(nav a):not(header nav a):hover,
footer a[class*="hover:text-blue"]:hover,
main a[class*="hover:text-blue"]:hover,
a[class*="text-blue"]:not(nav a):not(header nav a):hover {
  color: var(--color-link-hover) !important;
}

/* Inputs and form elements */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
textarea,
select {
  background-color: var(--color-bg-secondary) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: var(--color-brand) !important;
  outline-color: var(--color-brand) !important;
}

/* Buttons */
.bg-blue-600 {
  background-color: var(--color-button-primary-bg) !important;
}

.hover\:bg-blue-700:hover {
  background-color: var(--color-button-primary-hover) !important;
}

/* Badges - ensure visibility in dark mode */
/* Exclude position and team badges with specific colors (they have their own color classes) */
/* Only apply to badges that don't have color-specific classes */
.team-badge:not([class*="modalTeam"]),
.position-badge:not([class*="modalPosition"]),
.badge-tier-elite,
.badge-tier-good,
.badge-tier-mid,
.badge-tier-poor {
  background-color: var(--color-badge-bg) !important;
  color: var(--color-badge-text) !important;
}

/* Dropdown menus */
.rounded-xl.border.border-gray-200.bg-white {
  background-color: var(--color-bg-elevated) !important;
  border-color: var(--color-border) !important;
}

.hover\:bg-gray-50:hover {
  background-color: var(--color-bg-elevated) !important;
}

/* Mobile menu */
.hover\:bg-gray-100:hover {
  background-color: var(--color-bg-elevated) !important;
}

/* Theme toggle button hover */
#theme-toggle-desktop:hover {
  background-color: var(--color-bg-elevated) !important;
}

/* Mobile theme toggle switch */
#theme-toggle-mobile + div {
  background-color: var(--color-border) !important;
}

[data-theme="dark"] #theme-toggle-mobile + div {
  background-color: #475569 !important; /* slate-600 */
}

#theme-toggle-mobile:checked + div {
  background-color: var(--color-button-primary-bg) !important;
}

/* Mobile menu divider */
.border-t.border-gray-200 {
  border-color: var(--color-border) !important;
}

/* Shadows - reduce in dark mode */
[data-theme="dark"] .shadow-lg,
[data-theme="dark"] .shadow-md {
  box-shadow: var(--shadow-md) !important;
}

/* Table styles */
.portfolio-table-card,
.portfolio-table {
  background-color: var(--color-bg-secondary) !important;
}

.portfolio-table thead {
  background-color: var(--color-bg-elevated) !important;
  border-bottom-color: var(--color-border) !important;
}

.portfolio-row:hover {
  background-color: var(--color-bg-elevated) !important;
}

/* Article cards and content */
.article-note {
  background-color: var(--color-bg-elevated) !important;
  border-left-color: var(--color-border) !important;
  color: var(--color-text-secondary) !important;
}

/* Matchup cards */
.matchup-card {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-border) !important;
}

/* Matchup card text - ensure readability in dark mode */
[data-theme="dark"] .matchup-body {
  color: var(--color-text-primary) !important; /* Use primary text color for better readability */
}

[data-theme="dark"] .matchup-header {
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .matchup-header span:not(.team-badge) {
  color: var(--color-text-secondary) !important; /* Slightly lighter for "vs" text */
}

[data-theme="dark"] .summary-leadin {
  color: var(--color-text-primary) !important;
}

/* Perfect lineup cards */
.perfect-wrap {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-border) !important;
}

.perfect-head {
  border-bottom-color: var(--color-border) !important;
}

.perfect-cell {
  background-color: var(--color-bg-elevated) !important;
  border-color: var(--color-border) !important;
}

/* Desktop only: Player cards use neutral background colors (no position-based tints) */
/* Target player cards inside desktop-only containers (actual structure on perfect lineups page) */
@media (min-width: 768px) {
  /* Light mode: neutral white background for all player cards */
  .desktop-only .bg-purple-100,
  .desktop-only div.bg-purple-100,
  .desktop-only .bg-green-100,
  .desktop-only div.bg-green-100,
  .desktop-only .bg-orange-100,
  .desktop-only div.bg-orange-100,
  .desktop-only .bg-blue-100,
  .desktop-only div.bg-blue-100 {
    background-color: #ffffff !important; /* white - neutral surface */
  }
  
  /* Dark mode: neutral dark surface for all player cards */
  [data-theme="dark"] .desktop-only .bg-purple-100,
  [data-theme="dark"] .desktop-only div.bg-purple-100,
  [data-theme="dark"] .desktop-only .bg-green-100,
  [data-theme="dark"] .desktop-only div.bg-green-100,
  [data-theme="dark"] .desktop-only .bg-orange-100,
  [data-theme="dark"] .desktop-only div.bg-orange-100,
  [data-theme="dark"] .desktop-only .bg-blue-100,
  [data-theme="dark"] .desktop-only div.bg-blue-100 {
    background-color: #1f2937 !important; /* gray-800 - neutral dark surface */
  }
  
  /* Force position tint borders to light mode colors */
  [data-theme="dark"] .desktop-only .border-purple-300,
  [data-theme="dark"] .desktop-only div.border-purple-300 {
    border-color: #c084fc !important; /* purple-300 */
  }
  
  [data-theme="dark"] .desktop-only .border-green-300,
  [data-theme="dark"] .desktop-only div.border-green-300 {
    border-color: #86efac !important; /* green-300 */
  }
  
  [data-theme="dark"] .desktop-only .border-orange-300,
  [data-theme="dark"] .desktop-only div.border-orange-300 {
    border-color: #fdba74 !important; /* orange-300 */
  }
  
  [data-theme="dark"] .desktop-only .border-blue-300,
  [data-theme="dark"] .desktop-only div.border-blue-300 {
    border-color: #93c5fd !important; /* blue-300 */
  }
  
  /* Also handle perfect-cell for any other uses */
  /* Light mode: neutral white background */
  .perfect-cell > div.bg-purple-100,
  .perfect-cell div.bg-purple-100,
  .perfect-cell > div.bg-green-100,
  .perfect-cell div.bg-green-100,
  .perfect-cell > div.bg-orange-100,
  .perfect-cell div.bg-orange-100,
  .perfect-cell > div.bg-blue-100,
  .perfect-cell div.bg-blue-100 {
    background-color: #ffffff !important; /* white - neutral surface */
  }

  /* Dark mode: neutral dark surface */
  [data-theme="dark"] .perfect-cell {
    background-color: #fafafa !important;
    border-color: #e5e7eb !important;
  }

  [data-theme="dark"] .perfect-cell > div.bg-purple-100,
  [data-theme="dark"] .perfect-cell div.bg-purple-100,
  [data-theme="dark"] .perfect-cell > div.bg-green-100,
  [data-theme="dark"] .perfect-cell div.bg-green-100,
  [data-theme="dark"] .perfect-cell > div.bg-orange-100,
  [data-theme="dark"] .perfect-cell div.bg-orange-100,
  [data-theme="dark"] .perfect-cell > div.bg-blue-100,
  [data-theme="dark"] .perfect-cell div.bg-blue-100 {
    background-color: #1f2937 !important; /* gray-800 - neutral dark surface */
  }
  
  [data-theme="dark"] .perfect-cell > div.border-purple-300,
  [data-theme="dark"] .perfect-cell div.border-purple-300 {
    border-color: #c084fc !important;
  }
  
  [data-theme="dark"] .perfect-cell > div.border-green-300,
  [data-theme="dark"] .perfect-cell div.border-green-300 {
    border-color: #86efac !important;
  }
  
  [data-theme="dark"] .perfect-cell > div.border-orange-300,
  [data-theme="dark"] .perfect-cell div.border-orange-300 {
    border-color: #fdba74 !important;
  }
  
  [data-theme="dark"] .perfect-cell > div.border-blue-300,
  [data-theme="dark"] .perfect-cell div.border-blue-300 {
    border-color: #93c5fd !important;
  }
  
  /* Text colors in desktop-only player cards - light text on dark background in dark mode */
  [data-theme="dark"] .desktop-only div.bg-purple-100 .text-gray-900,
  [data-theme="dark"] .desktop-only div.bg-green-100 .text-gray-900,
  [data-theme="dark"] .desktop-only div.bg-orange-100 .text-gray-900,
  [data-theme="dark"] .desktop-only div.bg-blue-100 .text-gray-900,
  [data-theme="dark"] .desktop-only div.bg-purple-100 div.text-gray-900,
  [data-theme="dark"] .desktop-only div.bg-green-100 div.text-gray-900,
  [data-theme="dark"] .desktop-only div.bg-orange-100 div.text-gray-900,
  [data-theme="dark"] .desktop-only div.bg-blue-100 div.text-gray-900 {
    color: #f1f5f9 !important; /* slate-100 - light text for dark background */
  }
  
  [data-theme="dark"] .desktop-only div.bg-purple-100 .text-gray-700,
  [data-theme="dark"] .desktop-only div.bg-green-100 .text-gray-700,
  [data-theme="dark"] .desktop-only div.bg-orange-100 .text-gray-700,
  [data-theme="dark"] .desktop-only div.bg-blue-100 .text-gray-700,
  [data-theme="dark"] .desktop-only div.bg-purple-100 div.text-gray-700,
  [data-theme="dark"] .desktop-only div.bg-green-100 div.text-gray-700,
  [data-theme="dark"] .desktop-only div.bg-orange-100 div.text-gray-700,
  [data-theme="dark"] .desktop-only div.bg-blue-100 div.text-gray-700 {
    color: #cbd5e1 !important; /* slate-300 - slightly muted light text */
  }
  
  [data-theme="dark"] .desktop-only div.bg-purple-100 .text-xs,
  [data-theme="dark"] .desktop-only div.bg-green-100 .text-xs,
  [data-theme="dark"] .desktop-only div.bg-orange-100 .text-xs,
  [data-theme="dark"] .desktop-only div.bg-blue-100 .text-xs,
  [data-theme="dark"] .desktop-only div.bg-purple-100 .text-\[11px\],
  [data-theme="dark"] .desktop-only div.bg-green-100 .text-\[11px\],
  [data-theme="dark"] .desktop-only div.bg-orange-100 .text-\[11px\],
  [data-theme="dark"] .desktop-only div.bg-blue-100 .text-\[11px\] {
    color: #f1f5f9 !important; /* slate-100 - light text for dark background */
  }
  
  [data-theme="dark"] .desktop-only div.bg-purple-100 .font-semibold,
  [data-theme="dark"] .desktop-only div.bg-green-100 .font-semibold,
  [data-theme="dark"] .desktop-only div.bg-orange-100 .font-semibold,
  [data-theme="dark"] .desktop-only div.bg-blue-100 .font-semibold,
  [data-theme="dark"] .desktop-only div.bg-purple-100 .font-bold,
  [data-theme="dark"] .desktop-only div.bg-green-100 .font-bold,
  [data-theme="dark"] .desktop-only div.bg-orange-100 .font-bold,
  [data-theme="dark"] .desktop-only div.bg-blue-100 .font-bold {
    color: #f1f5f9 !important; /* slate-100 - light text for dark background */
  }
  
  /* Text colors for desktop-only player cards - light text on dark background in dark mode */
  /* Light mode: black text on white background (default, no override needed) */
  /* Dark mode: light text on dark background */
  [data-theme="dark"] .desktop-only div.bg-purple-100,
  [data-theme="dark"] .desktop-only div.bg-green-100,
  [data-theme="dark"] .desktop-only div.bg-orange-100,
  [data-theme="dark"] .desktop-only div.bg-blue-100 {
    color: #f1f5f9 !important; /* slate-100 - light text for dark background */
  }
  
  /* Text colors for children EXCEPT badges - light text on dark background in dark mode */
  [data-theme="dark"] .desktop-only div.bg-purple-100 > div:not(.position-badge):not(.team-badge):not([class*="-modalPosition"]):not([class*="-modalTeam"]),
  [data-theme="dark"] .desktop-only div.bg-green-100 > div:not(.position-badge):not(.team-badge):not([class*="-modalPosition"]):not([class*="-modalTeam"]),
  [data-theme="dark"] .desktop-only div.bg-orange-100 > div:not(.position-badge):not(.team-badge):not([class*="-modalPosition"]):not([class*="-modalTeam"]),
  [data-theme="dark"] .desktop-only div.bg-blue-100 > div:not(.position-badge):not(.team-badge):not([class*="-modalPosition"]):not([class*="-modalTeam"]),
  [data-theme="dark"] .desktop-only div.bg-purple-100 div:not(.position-badge):not(.team-badge):not([class*="-modalPosition"]):not([class*="-modalTeam"]):not(.flex),
  [data-theme="dark"] .desktop-only div.bg-green-100 div:not(.position-badge):not(.team-badge):not([class*="-modalPosition"]):not([class*="-modalTeam"]):not(.flex),
  [data-theme="dark"] .desktop-only div.bg-orange-100 div:not(.position-badge):not(.team-badge):not([class*="-modalPosition"]):not([class*="-modalTeam"]):not(.flex),
  [data-theme="dark"] .desktop-only div.bg-blue-100 div:not(.position-badge):not(.team-badge):not([class*="-modalPosition"]):not([class*="-modalTeam"]):not(.flex) {
    color: #f1f5f9 !important; /* slate-100 - light text for dark background */
  }
  
  /* Ensure position badges keep white text - MUST come after blanket rules, highest specificity */
  [data-theme="dark"] .desktop-only div.bg-purple-100 .position-badge,
  [data-theme="dark"] .desktop-only div.bg-green-100 .position-badge,
  [data-theme="dark"] .desktop-only div.bg-orange-100 .position-badge,
  [data-theme="dark"] .desktop-only div.bg-blue-100 .position-badge,
  [data-theme="dark"] .desktop-only div.bg-purple-100 .qb-modalPosition,
  [data-theme="dark"] .desktop-only div.bg-purple-100 .rb-modalPosition,
  [data-theme="dark"] .desktop-only div.bg-purple-100 .wr-modalPosition,
  [data-theme="dark"] .desktop-only div.bg-purple-100 .te-modalPosition,
  [data-theme="dark"] .desktop-only div.bg-green-100 .qb-modalPosition,
  [data-theme="dark"] .desktop-only div.bg-green-100 .rb-modalPosition,
  [data-theme="dark"] .desktop-only div.bg-green-100 .wr-modalPosition,
  [data-theme="dark"] .desktop-only div.bg-green-100 .te-modalPosition,
  [data-theme="dark"] .desktop-only div.bg-orange-100 .qb-modalPosition,
  [data-theme="dark"] .desktop-only div.bg-orange-100 .rb-modalPosition,
  [data-theme="dark"] .desktop-only div.bg-orange-100 .wr-modalPosition,
  [data-theme="dark"] .desktop-only div.bg-orange-100 .te-modalPosition,
  [data-theme="dark"] .desktop-only div.bg-blue-100 .qb-modalPosition,
  [data-theme="dark"] .desktop-only div.bg-blue-100 .rb-modalPosition,
  [data-theme="dark"] .desktop-only div.bg-blue-100 .wr-modalPosition,
  [data-theme="dark"] .desktop-only div.bg-blue-100 .te-modalPosition,
  [data-theme="dark"] .desktop-only div.bg-purple-100 [class*="-modalPosition"],
  [data-theme="dark"] .desktop-only div.bg-green-100 [class*="-modalPosition"],
  [data-theme="dark"] .desktop-only div.bg-orange-100 [class*="-modalPosition"],
  [data-theme="dark"] .desktop-only div.bg-blue-100 [class*="-modalPosition"],
  [data-theme="dark"] .desktop-only div.bg-purple-100 span[class*="-modalPosition"],
  [data-theme="dark"] .desktop-only div.bg-green-100 span[class*="-modalPosition"],
  [data-theme="dark"] .desktop-only div.bg-orange-100 span[class*="-modalPosition"],
  [data-theme="dark"] .desktop-only div.bg-blue-100 span[class*="-modalPosition"] {
    color: white !important; /* Position badges always white text */
  }
  
  /* Ensure team badges keep their custom team colors - MUST override blanket rules */
  /* Team badge classes in styles.css have specific colors with !important */
  /* But we need even higher specificity to override our desktop-only blanket rules */
  [data-theme="dark"] .desktop-only div.bg-purple-100 .team-badge[class*="-modalTeam"],
  [data-theme="dark"] .desktop-only div.bg-green-100 .team-badge[class*="-modalTeam"],
  [data-theme="dark"] .desktop-only div.bg-orange-100 .team-badge[class*="-modalTeam"],
  [data-theme="dark"] .desktop-only div.bg-blue-100 .team-badge[class*="-modalTeam"],
  [data-theme="dark"] .desktop-only div.bg-purple-100 span.team-badge[class*="-modalTeam"],
  [data-theme="dark"] .desktop-only div.bg-green-100 span.team-badge[class*="-modalTeam"],
  [data-theme="dark"] .desktop-only div.bg-orange-100 span.team-badge[class*="-modalTeam"],
  [data-theme="dark"] .desktop-only div.bg-blue-100 span.team-badge[class*="-modalTeam"] {
    /* Don't set color here - let styles.css team badge color classes work */
    /* The team badge classes (.sf-modalTeam, etc.) already have !important with their colors */
    /* This rule just ensures they're not affected by our blanket black text rules */
    /* By having higher specificity, we prevent the blanket rules from applying */
  }
  
  /* Remove white borders from badges in desktop-only player cards */
  [data-theme="dark"] .desktop-only div.bg-purple-100 .position-badge,
  [data-theme="dark"] .desktop-only div.bg-green-100 .position-badge,
  [data-theme="dark"] .desktop-only div.bg-orange-100 .position-badge,
  [data-theme="dark"] .desktop-only div.bg-blue-100 .position-badge,
  [data-theme="dark"] .desktop-only div.bg-purple-100 .team-badge,
  [data-theme="dark"] .desktop-only div.bg-green-100 .team-badge,
  [data-theme="dark"] .desktop-only div.bg-orange-100 .team-badge,
  [data-theme="dark"] .desktop-only div.bg-blue-100 .team-badge {
    border: none !important; /* No white borders in player cards on desktop */
  }
  
  /* Force text colors in the card divs - override general dark mode text rules */
  [data-theme="dark"] .perfect-cell > div .text-gray-900,
  [data-theme="dark"] .perfect-cell > div div.text-gray-900,
  [data-theme="dark"] .perfect-cell > div span.text-gray-900,
  [data-theme="dark"] .perfect-cell > div [class*="text-gray-900"] {
    color: #111827 !important; /* gray-900 - black text */
  }
  
  [data-theme="dark"] .perfect-cell > div .text-gray-700,
  [data-theme="dark"] .perfect-cell > div div.text-gray-700,
  [data-theme="dark"] .perfect-cell > div span.text-gray-700,
  [data-theme="dark"] .perfect-cell > div [class*="text-gray-700"] {
    color: #374151 !important; /* gray-700 - dark gray text */
  }
  
  [data-theme="dark"] .perfect-cell > div .text-xs,
  [data-theme="dark"] .perfect-cell > div .text-\[11px\],
  [data-theme="dark"] .perfect-cell > div div.text-xs,
  [data-theme="dark"] .perfect-cell > div div.text-\[11px\] {
    color: #111827 !important; /* Force black text */
  }
  
  [data-theme="dark"] .perfect-cell > div .font-semibold,
  [data-theme="dark"] .perfect-cell > div .font-bold,
  [data-theme="dark"] .perfect-cell > div div.font-semibold,
  [data-theme="dark"] .perfect-cell > div div.font-bold {
    color: #111827 !important; /* Force black text */
  }
  
  /* Override ALL text inside card divs to be black - catch any remaining white text */
  [data-theme="dark"] .perfect-cell > div,
  [data-theme="dark"] .perfect-cell > div * {
    color: #111827 !important; /* Force black text for everything */
  }
  
  /* But allow badges to keep their white text */
  [data-theme="dark"] .perfect-cell > div .position-badge,
  [data-theme="dark"] .perfect-cell > div .team-badge,
  [data-theme="dark"] .perfect-cell > div [class*="-modalPosition"],
  [data-theme="dark"] .perfect-cell > div [class*="-modalTeam"] {
    color: inherit !important; /* Let badge colors work */
  }
  
  /* Force ALL text inside perfect-cell to be black (light mode colors) - highest specificity */
  [data-theme="dark"] .perfect-cell .text-gray-900,
  [data-theme="dark"] .perfect-cell div.text-gray-900,
  [data-theme="dark"] .perfect-cell span.text-gray-900,
  [data-theme="dark"] .perfect-cell [class*="text-gray-900"] {
    color: #111827 !important; /* gray-900 - black text */
  }
  
  [data-theme="dark"] .perfect-cell .text-gray-700,
  [data-theme="dark"] .perfect-cell div.text-gray-700,
  [data-theme="dark"] .perfect-cell span.text-gray-700,
  [data-theme="dark"] .perfect-cell [class*="text-gray-700"] {
    color: #374151 !important; /* gray-700 - dark gray text */
  }
  
  /* Override any general text color rules for perfect-cell content - force black */
  [data-theme="dark"] .perfect-cell .text-xs,
  [data-theme="dark"] .perfect-cell .text-\[11px\],
  [data-theme="dark"] .perfect-cell div.text-xs,
  [data-theme="dark"] .perfect-cell div.text-\[11px\] {
    color: #111827 !important; /* Force black text */
  }
  
  [data-theme="dark"] .perfect-cell .font-semibold,
  [data-theme="dark"] .perfect-cell .font-bold,
  [data-theme="dark"] .perfect-cell div.font-semibold,
  [data-theme="dark"] .perfect-cell div.font-bold {
    color: #111827 !important; /* Force black text */
  }
  
  /* Override all text elements inside perfect-cell to use black text */
  [data-theme="dark"] .perfect-cell div,
  [data-theme="dark"] .perfect-cell span {
    color: #111827 !important; /* Default to black text for all content */
  }
  
  /* But allow badges to keep their colors */
  [data-theme="dark"] .perfect-cell .position-badge,
  [data-theme="dark"] .perfect-cell .team-badge {
    color: inherit !important; /* Let badge colors work */
  }
  
  /* Ensure bg-gray-50 inside cards matches light mode on desktop */
  [data-theme="dark"] .perfect-cell .bg-gray-50 {
    background-color: #f9fafb !important; /* gray-50 - same as light mode */
  }
  
  /* Ensure border class doesn't get overridden - let position tint classes control border color */
  [data-theme="dark"] .perfect-cell .border {
    border-style: solid !important;
    border-width: 1px !important;
  }
  
  /* Ensure rounded-lg border radius is preserved */
  [data-theme="dark"] .perfect-cell .rounded-lg {
    border-radius: 0.5rem !important; /* Same as light mode */
  }
  
  /* Ensure padding p-2 is preserved */
  [data-theme="dark"] .perfect-cell .p-2 {
    padding: 0.5rem !important; /* Same as light mode */
  }
  
  /* Remove white borders from badges inside perfect-cell on desktop (should match light mode) */
  [data-theme="dark"] .perfect-cell .position-badge,
  [data-theme="dark"] .perfect-cell .team-badge,
  [data-theme="dark"] .perfect-cell .position-badge.qb-modalPosition,
  [data-theme="dark"] .perfect-cell .position-badge.rb-modalPosition,
  [data-theme="dark"] .perfect-cell .position-badge.wr-modalPosition,
  [data-theme="dark"] .perfect-cell .position-badge.te-modalPosition,
  [data-theme="dark"] .perfect-cell .qb-modalPosition,
  [data-theme="dark"] .perfect-cell .rb-modalPosition,
  [data-theme="dark"] .perfect-cell .wr-modalPosition,
  [data-theme="dark"] .perfect-cell .te-modalPosition,
  [data-theme="dark"] .perfect-cell .team-badge[class*="-modalTeam"],
  [data-theme="dark"] .perfect-cell [class*="-modalTeam"].team-badge,
  [data-theme="dark"] .perfect-cell [class*="-modalTeam"] {
    border: none !important; /* No white borders in perfect-cell cards on desktop */
  }
}

/* Chart cards */
.rc-card {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-border) !important;
}

/* Tab styles */
.tab-content-wrapper,
.premium-tab-content-wrapper {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-border) !important;
}

.tab-button.active-tab,
.premium-tab.premium-tab-active {
  background: linear-gradient(to bottom, var(--color-bg-secondary), var(--color-bg-elevated)) !important;
  border-bottom-color: var(--color-bg-secondary) !important;
}

/* Stack cards */
.stack-card {
  background-color: var(--color-bg-elevated) !important;
  border-color: var(--color-border) !important;
}

.stack-card:hover {
  background-color: var(--color-bg-card) !important;
}

/* Source tags */
.source-tag.bb {
  background-color: var(--color-bg-elevated) !important;
  color: var(--color-text-primary) !important;
}

.source-tag.ecr {
  background-color: var(--color-bg-elevated) !important;
  color: var(--color-text-primary) !important;
}

/* Hero images - adjust brightness in dark mode if light-themed */
[data-theme="dark"] #homepage-hero-image,
[data-theme="dark"] img[class*="hero"] {
  /* Slightly reduce brightness to better fit dark theme */
  filter: brightness(0.9) contrast(1.05);
  opacity: 0.95;
}

/* Modal team colors - preserve team colors but adjust text for dark mode */
[data-theme="dark"] .ari-modalTeam,
[data-theme="dark"] .atl-modalTeam,
[data-theme="dark"] .bal-modalTeam,
[data-theme="dark"] .buf-modalTeam,
[data-theme="dark"] .car-modalTeam,
[data-theme="dark"] .chi-modalTeam,
[data-theme="dark"] .cin-modalTeam,
[data-theme="dark"] .cle-modalTeam,
[data-theme="dark"] .dal-modalTeam,
[data-theme="dark"] .den-modalTeam,
[data-theme="dark"] .det-modalTeam,
[data-theme="dark"] .gb-modalTeam,
[data-theme="dark"] .hou-modalTeam,
[data-theme="dark"] .ind-modalTeam,
[data-theme="dark"] .jax-modalTeam,
[data-theme="dark"] .kc-modalTeam,
[data-theme="dark"] .lac-modalTeam,
[data-theme="dark"] .lar-modalTeam,
[data-theme="dark"] .lv-modalTeam,
[data-theme="dark"] .mia-modalTeam,
[data-theme="dark"] .min-modalTeam,
[data-theme="dark"] .ne-modalTeam,
[data-theme="dark"] .no-modalTeam,
[data-theme="dark"] .nyg-modalTeam,
[data-theme="dark"] .nyj-modalTeam,
[data-theme="dark"] .phi-modalTeam,
[data-theme="dark"] .pit-modalTeam,
[data-theme="dark"] .sea-modalTeam,
[data-theme="dark"] .sf-modalTeam,
[data-theme="dark"] .tb-modalTeam,
[data-theme="dark"] .ten-modalTeam,
[data-theme="dark"] .was-modalTeam,
[data-theme="dark"] .fa-modalTeam {
  /* Keep team colors but ensure text is readable */
  filter: brightness(1.1);
}

/* Additional comprehensive coverage for common Tailwind classes */
[data-theme="dark"] .bg-gray-100 {
  background-color: var(--color-bg-elevated) !important;
}

[data-theme="dark"] .bg-gray-200 {
  background-color: var(--color-border) !important;
}

/* Green background for avg points column - ensure legibility in dark mode */
[data-theme="dark"] .bg-green-100 {
  background-color: #065f46 !important; /* emerald-800 - dark green with good contrast */
}

/* Ensure text in green cells is readable in dark mode */
[data-theme="dark"] td.bg-green-100,
[data-theme="dark"] .bg-green-100,
[data-theme="dark"] .avg-points-cell {
  color: #d1fae5 !important; /* emerald-100 - light green text for readability */
}

/* GLOBAL: Remove ALL white borders from badges across entire site */
/* Remove white borders, white outlines, and white box-shadows from all badge variants */
.position-badge,
.team-badge,
.position-badge--small,
.team-badge--small,
.position-badge-mini,
.rostered-badge-trend,
[class*="-modalPosition"],
[class*="-modalTeam"],
.filter-pill[class*="-modalTeam"],
.filter-pill[data-team] {
  /* Remove white borders - but preserve colored borders */
  border-color: inherit;
}

/* Specifically remove white border colors */
.position-badge[style*="border"][style*="white"],
.team-badge[style*="border"][style*="white"],
.position-badge[style*="border"][style*="#fff"],
.team-badge[style*="border"][style*="#fff"],
[class*="-modalPosition"][style*="border"][style*="white"],
[class*="-modalTeam"][style*="border"][style*="white"] {
  border-color: transparent !important;
}

/* Remove white outlines */
.position-badge,
.team-badge,
[class*="-modalPosition"],
[class*="-modalTeam"] {
  outline: none !important;
  outline-color: transparent !important;
}

/* Subtle outer edge definition for badges in dark mode - does not change size or colors */
/* Apply to all position and team badge variants globally across entire site */
[data-theme="dark"] .position-badge,
[data-theme="dark"] .team-badge,
[data-theme="dark"] .position-badge--small,
[data-theme="dark"] .team-badge--small,
[data-theme="dark"] .position-badge-mini,
[data-theme="dark"] .rostered-badge-trend,
[data-theme="dark"] [class*="-modalPosition"],
[data-theme="dark"] [class*="-modalTeam"],
[data-theme="dark"] .filter-pill[class*="-modalTeam"],
[data-theme="dark"] .filter-pill[data-team] {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  /* Remove white borders in dark mode - outer edge replaces them */
  border-color: transparent !important;
}

/* Ensure position badges with color classes also get outer edge */
[data-theme="dark"] .position-badge.qb-modalPosition,
[data-theme="dark"] .position-badge.rb-modalPosition,
[data-theme="dark"] .position-badge.wr-modalPosition,
[data-theme="dark"] .position-badge.te-modalPosition,
[data-theme="dark"] .qb-modalPosition,
[data-theme="dark"] .rb-modalPosition,
[data-theme="dark"] .wr-modalPosition,
[data-theme="dark"] .te-modalPosition,
[data-theme="dark"] .position-badge--small[class*="-modalPosition"],
[data-theme="dark"] .position-badge-mini[class*="-modalPosition"] {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  border-color: transparent !important;
}

/* Ensure team badges with color classes also get outer edge */
[data-theme="dark"] .team-badge[class*="-modalTeam"],
[data-theme="dark"] [class*="-modalTeam"].team-badge,
[data-theme="dark"] .team-badge--small[class*="-modalTeam"] {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  border-color: transparent !important;
}

/* Ensure all text elements inherit theme colors */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] p {
  color: var(--color-text-primary) !important;
}

/* Ensure tables inherit theme */
[data-theme="dark"] table {
  background-color: var(--color-bg-secondary) !important;
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] th {
  background-color: var(--color-bg-elevated) !important;
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] td {
  color: var(--color-text-primary) !important;
}

/* Round containers in team builder */
.round-container {
  background-color: var(--color-bg-secondary) !important;
  border-color: var(--color-border) !important;
}

.round-container p {
  background-color: var(--color-bg-secondary) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}

.round-header-row {
  background-color: var(--color-bg-secondary) !important;
  color: var(--color-text-secondary) !important;
  border-color: var(--color-border) !important;
}