/* theme.light.css - Light theme using #ffefa5 as primary color */

body:not(.dark-mode) {
  /* Base colors */
  --theme-primary: #ffefa5;
  --theme-primary-dark: #e6d68a;
  --theme-surface: #fffcf0;
  --theme-border: #d4c89a;
  --theme-border-strong: #b8a977;
  --theme-text: #2d2416;
  --theme-text-muted: #6b5d42;
  --theme-shadow: rgba(45, 36, 22, 0.15);
  --theme-shadow-strong: rgba(45, 36, 22, 0.3);
  
  /* Removed background and color - body should be same across all themes */
}

/* Power Cards Panel Light Theme - Keep same as dark mode */
/* Removed background: #ffefa5 - power cards panel should look the same in both modes */

body:not(.dark-mode) .cmp-power-cards-panel .power-card-deck {
  /* Keep cards looking similar to dark mode, just change panel background */
  border-color: rgba(0, 0, 0, 0.2);
}

/* Force power cards to look identical in both light and dark mode */
body:not(.dark-mode) .cmp-power-cards-panel .pc-card {
  background: var(--pc-card-bg) !important;
  color: var(--pc-card-text) !important;
  border: var(--pc-card-border) !important;
}

body:not(.dark-mode) .cmp-power-cards-panel .pc-card-header,
body:not(.dark-mode) .cmp-power-cards-panel .pc-card__header {
  background: linear-gradient(135deg,#3b4245,#23272a) !important;
  color: var(--pc-card-accent) !important;
}

body:not(.dark-mode) .cmp-power-cards-panel .pc-card-name,
body:not(.dark-mode) .cmp-power-cards-panel .pc-card-description {
  color: var(--pc-card-text) !important;
}

body:not(.dark-mode) .cmp-power-cards-panel .pc-card-cost {
  background: var(--pc-cost-bg) !important;
  color: var(--pc-card-accent) !important;
}

/* Cards themselves remain mostly unchanged between light/dark */
/* Only the panel background changes to #ffefa5 */

/* Mini Power Cards Light Theme - Keep cards same between modes */

/* Modals Light Theme - Settings and general modals only */
body:not(.dark-mode) .pcm-frame {
  background: #ffefa5;
  border-color: rgba(0, 0, 0, 0.2);
}

/* Power Card Details Modal - Keep same styling regardless of theme */
/* No overrides for .card-detail-frame - it maintains default dark styling */

/* Section titles and footer keep same styling between modes */

/* Panel Light Theme - Unified background for all panels */
body:not(.dark-mode) .cmp-monsters-panel,
body:not(.dark-mode) .cmp-power-cards-panel,
body:not(.dark-mode) .player-profile-card {
  background: #ffefa5;
  /* Removed border-color override to use default black border */
}

/* Dice Tray Light Theme - Keep default appearance (no overrides) */

/* Action Menu Light Theme - Only change background color */
body:not(.dark-mode) .cmp-action-menu {
  background: #ffefa5 !important;
}

/* King of Tokyo header - lighter background, darker text */
body:not(.dark-mode) .game-title,
body:not(.dark-mode) h1,
body:not(.dark-mode) .arena-title {
  background: linear-gradient(135deg, #fff4d1, #ffefa5);
  color: #2d2416 !important;
  text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff !important;
}

/* Toolbar Light Theme - Background changes */
body:not(.dark-mode) .cmp-toolbar {
  background: #ffefa5;
  border-top-color: rgba(0, 0, 0, 0.2);
}

/* Keep toolbar buttons same between modes */

/* Keep toolbar buttons same between modes */

/* General UI Elements - Modal backgrounds change */
body:not(.dark-mode) .modal-content,
body:not(.dark-mode) .settings-panel,
body:not(.dark-mode) .cmp-settings-menu {
  background: #ffefa5;
  border-color: rgba(0, 0, 0, 0.2);
}

/* Settings Modal - Dark background overrides for light mode */
body:not(.dark-mode) .settings-tabs {
  background: #d4c89a !important;
  border-bottom-color: #b8a977 !important;
  box-shadow: 0 0.2vh 0.6vh -0.2vh rgba(0, 0, 0, 0.3) !important;
}

body:not(.dark-mode) .modal-actions {
  background: #d4c89a !important;
  border-top-color: #b8a977 !important;
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.2) !important;
}

body:not(.dark-mode) .save-btn {
  background: #f5f5f5 !important;
  color: #2d2416 !important;
  border-color: #b8a977 !important;
}

/* Power Cards Tab - Dark containers */
body:not(.dark-mode) [data-tab-content="powercards"] > div[style*="background:#1a1a1a"],
body:not(.dark-mode) [data-tab-content="powercards"] > div > div[style*="background:#1a1a1a"] {
  background: #fff8e7 !important;
  border-color: #d4c89a !important;
}

body:not(.dark-mode) [data-tab-content="powercards"] select[style*="background:#1a1a1a"] {
  background: #ffffff !important;
  border-color: #b8a977 !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) #powerCardsGrid {
  background: #fff8e7 !important;
  border-color: #d4c89a !important;
}

body:not(.dark-mode) #powerCardsGrid > div[style*="background:#0a0a0a"] {
  background: #ffffff !important;
  border-color: #d4c89a !important;
  color: #2d2416 !important;
}

/* Dev Tools Tab - Dark containers */
body:not(.dark-mode) .win-odds-panel,
body:not(.dark-mode) #dev-win-odds-panel {
  background: #fff8e7 !important;
  border-color: #d4c89a !important;
}

body:not(.dark-mode) .win-odds-panel .win-odds-header,
body:not(.dark-mode) #dev-win-odds-panel > div[style*="background:#111"] {
  background: #f0e8d0 !important;
  border-bottom-color: #d4c89a !important;
}

body:not(.dark-mode) .win-odds-btn,
body:not(.dark-mode) button[style*="background:#282828"] {
  background: #ffffff !important;
  border-color: #b8a977 !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .win-odds-body,
body:not(.dark-mode) #dev-win-odds-chart,
body:not(.dark-mode) .win-odds-insights,
body:not(.dark-mode) #dev-win-odds-insights {
  background: #ffffff !important;
}

body:not(.dark-mode) #dev-debug-console {
  background: #ffffff !important;
  border-color: #d4c89a !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) div[style*="background:#0d1117"],
body:not(.dark-mode) div[style*="background:#101317"] {
  background: #ffffff !important;
  border-color: #d4c89a !important;
  color: #2d2416 !important;
}

/* Archive/Replay Tab - Dark containers */
body:not(.dark-mode) .archive-table {
  background: #fff8e7 !important;
}

body:not(.dark-mode) .archive-actions,
body:not(.dark-mode) div[style*="background:#0a0a0a"] {
  background: #f0e8d0 !important;
  border-color: #d4c89a !important;
}

/* Warning/Error messages */
body:not(.dark-mode) div[style*="background:#2a1111"] {
  background: #ffe5e5 !important;
  border-color: #ffb3b3 !important;
  color: #8b0000 !important;
}

/* Win Odds Table Headers */
body:not(.dark-mode) .wo-table-header,
body:not(.dark-mode) th[style*="background:#282828"] {
  background: #f0e8d0 !important;
  color: #2d2416 !important;
}

/* Inline progress bars and status indicators */
body:not(.dark-mode) div[style*="background:#0a0e14"],
body:not(.dark-mode) div[style*="background:#1d232c"],
body:not(.dark-mode) span[style*="background:#1d232c"] {
  background: #e8e0c8 !important;
  border-color: #d4c89a !important;
}

/* Details rows in tables */
body:not(.dark-mode) tr[style*="background:#0a0a0a"] {
  background: #f8f5eb !important;
}

body:not(.dark-mode) pre[style*="background:#0a0a0a"] {
  background: #f5f5f5 !important;
  color: #2d2416 !important;
}

/* Settings Modal - Section Headers */
body:not(.dark-mode) .settings-tabs-header {
  background: #d4c89a !important;
  border-bottom-color: #b8a977 !important;
}

body:not(.dark-mode) .settings-tab-nav {
  background: #d4c89a !important;
  border-color: #b8a977 !important;
}

body:not(.dark-mode) .settings-tabs-header .section-title {
  color: #fff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

/* Modal Close Buttons - Light Mode */
body:not(.dark-mode) .new-modal-header button,
body:not(.dark-mode) .cd-header button {
  background: transparent !important;
  color: #d4c89a !important;
  border: 2px solid #000 !important;
  border-radius: 4px;
  padding: 4px 8px !important;
}

body:not(.dark-mode) .new-modal-header button:hover,
body:not(.dark-mode) .cd-header button:hover {
  color: #b8a977 !important;
  transform: scale(1.1) !important;
}

/* Inputs and buttons keep same styling between modes */

/* Inputs and buttons keep same styling between modes */

/* Backdrop for modals */
body:not(.dark-mode) .card-detail-backdrop {
  background: rgba(255, 239, 165, 0.7);
}

/* Arena/Game title headers - lighter background, darker text */
body:not(.dark-mode) .game-title,
body:not(.dark-mode) h1.arena-title,
body:not(.dark-mode) .game-layout-shell .gl-title,
body:not(.dark-mode) .arena-title {
  background: rgba(255, 239, 165, 0.8);
  color: #2d2416 !important;
  text-shadow: none !important;
}

/* Game layout header - cream colored background */
body:not(.dark-mode) .gl-header {
  background: #ffefa5 !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
}

/* Player/Monster names in mobile view - black text */
@media (max-width: 1024px) {
  body:not(.dark-mode) .cmp-player-profile-card .ppc-name,
  body:not(.dark-mode) .mini-player-card-name {
    color: #000 !important;
    text-shadow: none !important;
  }
}

/* Monster Selection Modal Light Theme */
body:not(.dark-mode) .cmp-monster-selection.monster-selection-modal {
  background: rgba(255, 239, 165, 0.4);
}

body:not(.dark-mode) .cmp-monster-selection .setup-frame {
  background: linear-gradient(180deg, #fffbf0 0%, #ffefa5 100%);
  border: 4px solid #b8a977;
  box-shadow: 14px 14px 0 rgba(0, 0, 0, 0.3), 0 0 0 2px #d4c89a inset, 0 22px 42px -14px rgba(0, 0, 0, 0.2);
  color: #2d2416;
}

body:not(.dark-mode) .cmp-monster-selection .setup-title {
  color: #b8860b;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.2));
}

body:not(.dark-mode) .cmp-monster-selection {
  color: #2d2416;
}

body:not(.dark-mode) .cmp-monster-selection .pill-btn {
  background: linear-gradient(#fff, #f0f0f0);
  border-color: #6b5d42;
  color: #2d2416;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.3);
}

body:not(.dark-mode) .cmp-monster-selection .pill-btn.gold {
  background: linear-gradient(#ffd700, #ffb400);
  color: #2d2416;
}

body:not(.dark-mode) .cmp-monster-selection .pill-btn:hover {
  background: linear-gradient(#fff, #e8e8e8);
}

/* Monster page counter - black text, no outline */
body:not(.dark-mode) .cmp-monster-selection .monster-pager .pager-status {
  color: #2d2416;
  text-shadow: none;
}

/* Reset button letter spacing to match assign button */
body:not(.dark-mode) .cmp-monster-selection .reset-link {
  letter-spacing: 1px;
}

/* Roll For First Modal Light Theme */
body:not(.dark-mode) .cmp-roll-for-first.rff-modal .rff-frame {
  background: #fffbf0;
  border-color: #b8a977;
  box-shadow: 0.93vh 0.93vh 0 rgba(0, 0, 0, 0.3), 0 0 0 0.2vh #d4c89a inset, 0 1.67vh 3.9vh -1.3vh rgba(0, 0, 0, 0.2);
  color: #2d2416;
}

body:not(.dark-mode) .cmp-roll-for-first.rff-modal .rff-title {
  color: #2d2416;
  text-shadow: -0.16vmin -0.16vmin 0 #fff, 0.16vmin -0.16vmin 0 #fff, -0.16vmin 0.16vmin 0 #fff, 0.16vmin 0.16vmin 0 #fff;
}

body:not(.dark-mode) .cmp-roll-for-first.rff-modal .rff-close {
  background: #fff;
  color: #2d2416;
  border-color: #d4c89a;
  box-shadow: 0.2vh 0.2vh 0 rgba(0, 0, 0, 0.3);
}

body:not(.dark-mode) .cmp-roll-for-first.rff-modal .rff-close:hover {
  background: #f5f5f5;
}

body:not(.dark-mode) .cmp-roll-for-first.rff-modal .rff-broadcast {
  background: rgba(255, 255, 255, 0.6);
  border-color: #d4c89a;
  color: #b8860b;
  box-shadow: 0 0 0 0.1vh rgba(0, 0, 0, 0.1) inset;
}

body:not(.dark-mode) .cmp-roll-for-first.rff-modal .rff-mon {
  background: #fff;
  border-color: #d4c89a;
  color: #2d2416;
}

body:not(.dark-mode) .cmp-roll-for-first.rff-modal .rff-val {
  background: #fffcf0;
  border-color: #d4c89a;
  color: #2d2416;
  box-shadow: 0 0 0 0.1vh rgba(0, 0, 0, 0.1) inset;
}

body:not(.dark-mode) .cmp-roll-for-first.rff-modal .rff-footer {
  background: linear-gradient(to top, rgba(255, 251, 240, 0.95), rgba(255, 251, 240, 0.6) 60%, rgba(255, 251, 240, 0));
}

body:not(.dark-mode) .cmp-roll-for-first.rff-modal .rff-btn {
  background: linear-gradient(#fff, #f0f0f0);
  border-color: #b8a977;
  color: #2d2416;
  box-shadow: 0.28vh 0.28vh 0 rgba(0, 0, 0, 0.3);
}

body:not(.dark-mode) .cmp-roll-for-first.rff-modal .rff-btn-primary {
  background: linear-gradient(#ffd700, #ffb400);
  color: #2d2416;
  border-color: #b8860b;
}

body:not(.dark-mode) .cmp-roll-for-first.rff-modal .rff-btn:hover {
  background: linear-gradient(#fff, #e8e8e8);
}

body:not(.dark-mode) .cmp-roll-for-first.rff-modal .rff-btn:active {
  box-shadow: 0.1vh 0.1vh 0 rgba(0, 0, 0, 0.3);
}

body:not(.dark-mode) .cmp-roll-for-first.rff-modal .rff-skip {
  color: #6b5d42;
}

body:not(.dark-mode) .cmp-roll-for-first.rff-modal .rff-skip:hover {
  color: #2d2416;
}

body:not(.dark-mode) .cmp-roll-for-first.rff-modal .rff-frame:after {
  background: linear-gradient(to bottom, rgba(255, 251, 240, 0), rgba(255, 251, 240, 0.85));
}

/* Roll for First - Dice Table Light Theme */
body:not(.dark-mode) .cmp-roll-for-first .rff-table thead th {
  background: linear-gradient(135deg, #b8860b, #8b6914) !important;
  color: #fff !important;
  border-color: #d4c89a !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  font-size: 1.6vh !important;
  letter-spacing: 0.05vmin !important;
}

body:not(.dark-mode) .cmp-roll-for-first .rff-table tbody td {
  background: #fffcf0 !important;
  color: #2d2416 !important;
  border-color: #d4c89a !important;
}

body:not(.dark-mode) .cmp-roll-for-first .rff-table tfoot td {
  background: linear-gradient(135deg, #8b6914, #b8860b) !important;
  color: #2d2416 !important;
  border-color: #d4c89a !important;
}

/* Alternating row colors (banded rows) */
body:not(.dark-mode) .cmp-roll-for-first .rff-table tbody tr:nth-child(even) td {
  background: #fff9e6 !important;
}

/* First column with player names - same background as other cells */
body:not(.dark-mode) .cmp-roll-for-first .rff-table td.rff-player {
  background: #fffcf0 !important;
}

body:not(.dark-mode) .cmp-roll-for-first .rff-table tbody tr:nth-child(even) td.rff-player {
  background: #fff9e6 !important;
}

/* Hover state - darker background for better contrast with dark text */
body:not(.dark-mode) .cmp-roll-for-first .rff-table tbody tr:hover td {
  background: #f5efd0 !important;
  color: #2d2416 !important;
}

/* Player name text styling */
body:not(.dark-mode) .cmp-roll-for-first .rff-table .rff-name {
  color: #2d2416 !important;
  text-shadow: none !important;
}

/* CPU tag styling - fix black on black issue */
body:not(.dark-mode) .cmp-roll-for-first .rff-cpu-tag {
  background: linear-gradient(135deg, #b8860b, #8b6914) !important;
  color: #2d2416 !important;
  border-color: #d4c89a !important;
  box-shadow: 0 0 0 0.1vh rgba(0, 0, 0, 0.1) inset, 0.2vh 0.2vh 0 rgba(0, 0, 0, 0.2) !important;
  text-shadow: none !important;
}

body:not(.dark-mode) .cmp-roll-for-first .rff-table .rff-avatar {
  border-color: #b8a977;
  box-shadow: 0 0 0 0.2vh #d4c89a inset, 0.2vh 0.2vh 0 rgba(0, 0, 0, 0.2);
}

body:not(.dark-mode) .cmp-roll-for-first .rff-table tr.winner td {
  background: #fff9e6;
  color: #b8860b;
}

body:not(.dark-mode) .cmp-roll-for-first .rff-table tr.winner .rff-name {
  color: #b8860b;
  text-shadow: none;
}

/* Settings Modal Light Theme - Complete overhaul */

/* Settings modal root background */
body:not(.dark-mode) .settings-modal-root {
  background: #fffcf0 !important;
}

/* Settings tabs - same cream background */
body:not(.dark-mode) .settings-tabs {
  background: #fffcf0 !important;
  border-bottom: 2px solid #d4c89a !important;
}

/* More specific selectors to override base CSS */
body:not(.dark-mode) .settings-modal-root .settings-tabs .tab-button {
  color: #000 !important;
  background: transparent !important;
  text-shadow: none !important;
}

body:not(.dark-mode) .settings-modal-root .settings-tabs .tab-button:hover {
  color: #000 !important;
  background: rgba(255, 239, 165, 0.3) !important;
  text-shadow: none !important;
}

body:not(.dark-mode) .settings-modal-root .settings-tabs .tab-button.active {
  color: #000 !important;
  border-bottom-color: #b8860b !important;
  background: rgba(184, 134, 11, 0.15) !important;
  text-shadow: none !important;
}

body:not(.dark-mode) .settings-modal-root .settings-tabs .tab-button.active:after {
  border-bottom-color: #b8860b !important;
}

/* Modal form - cream background */
body:not(.dark-mode) .unified-modal-form {
  background: #fffcf0 !important;
  color: #000 !important;
}

/* Section titles - darker text */
body:not(.dark-mode) .section-title {
  color: #b8860b;
  border-bottom-color: #d4c89a;
}

/* Field labels - darker text */
body:not(.dark-mode) .field-label {
  color: #2d2416;
}

/* Field inputs - light background with dark text */
body:not(.dark-mode) .field-input {
  background: #fff;
  border-color: #b8a977;
  color: #2d2416;
  box-shadow: 2px 2px 0 rgba(184, 134, 11, 0.2);
}

body:not(.dark-mode) select.field-input {
  background: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23b8860b' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
}

body:not(.dark-mode) .field-input:hover,
body:not(.dark-mode) select.field-input:hover {
  border-color: #8b6914;
  box-shadow: 2px 2px 0 rgba(139, 105, 20, 0.3), 0 0 8px rgba(184, 134, 11, 0.2);
}

body:not(.dark-mode) .field-input:focus {
  border-color: #8b6914;
  box-shadow: 2px 2px 0 rgba(139, 105, 20, 0.3), 0 0 12px rgba(184, 134, 11, 0.3);
}

/* Field help text - muted but readable */
body:not(.dark-mode) .field-help {
  color: #6b5d42;
}

/* Checkbox labels - dark text */
body:not(.dark-mode) .checkbox-label {
  color: #2d2416;
}

body:not(.dark-mode) .field-checkbox input[type="checkbox"] {
  accent-color: #b8860b;
}

/* Buttons - golden gradient for light theme */
body:not(.dark-mode) .btn {
  background: linear-gradient(135deg, #b8860b, #8b6914);
  border-color: #6b5d42;
  color: #fff;
  box-shadow: 2px 2px 0 rgba(45, 36, 22, 0.3);
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5);
}

body:not(.dark-mode) .btn:hover {
  background: linear-gradient(135deg, #d4a017, #a67c00);
  box-shadow: 2px 2px 0 rgba(45, 36, 22, 0.4), 0 0 10px rgba(184, 134, 11, 0.3);
}

body:not(.dark-mode) .btn-secondary {
  background: linear-gradient(135deg, #d4c89a, #b8a977);
  color: #2d2416;
  border-color: #6b5d42;
}

body:not(.dark-mode) .btn-secondary:hover {
  background: linear-gradient(135deg, #e6d68a, #d4c89a);
}

body:not(.dark-mode) .btn-danger {
  background: linear-gradient(135deg, #d32f2f, #b71c1c);
  color: #fff;
}

body:not(.dark-mode) .btn-danger:hover {
  background: linear-gradient(135deg, #e53935, #c62828);
}

body:not(.dark-mode) .btn-warning {
  background: linear-gradient(135deg, #f57c00, #ef6c00);
  color: #fff;
}

body:not(.dark-mode) .btn-warning:hover {
  background: linear-gradient(135deg, #fb8c00, #f57c00);
}

/* Filter controls for game log */
body:not(.dark-mode) .filter-controls {
  background: rgba(255, 239, 165, 0.3);
  border-radius: 6px;
  padding: 10px;
}

body:not(.dark-mode) .filter-group label {
  color: #6b5d42;
}

body:not(.dark-mode) .filter-group select,
body:not(.dark-mode) .filter-group input {
  background: #fff;
  border-color: #b8a977;
  color: #2d2416;
}

/* Game log content */
body:not(.dark-mode) .log-content {
  background: #fff;
  border-color: #d4c89a;
  color: #2d2416;
}

body:not(.dark-mode) .log-entry {
  border-bottom-color: #f0f0f0;
  color: #2d2416;
}

body:not(.dark-mode) .log-entry:hover {
  background: rgba(255, 239, 165, 0.2);
}

/* Archive table */
body:not(.dark-mode) .archive-table {
  background: #fff !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .archive-table thead {
  background: #fff9e6 !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .archive-table thead th {
  color: #2d2416 !important;
  border-bottom-color: #d4c89a !important;
}

body:not(.dark-mode) .archive-table tbody tr {
  background: #fff !important;
  border-bottom-color: #f0f0f0 !important;
}

body:not(.dark-mode) .archive-table tbody td {
  color: #2d2416 !important;
}

body:not(.dark-mode) .archive-actions {
  background: #fff9e6 !important;
  border-top-color: #d4c89a !important;
}

body:not(.dark-mode) .archive-table tbody tr:hover {
  background: rgba(255, 239, 165, 0.3);
}

body:not(.dark-mode) .archive-table td {
  color: #2d2416;
}

/* Scenario panel */
body:not(.dark-mode) .scenario-item {
  background: #fff;
  border-color: #d4c89a;
  color: #2d2416;
}

body:not(.dark-mode) .scenario-item:hover {
  background: rgba(255, 239, 165, 0.2);
  border-color: #b8860b;
}

body:not(.dark-mode) .scenario-description {
  color: #6b5d42;
}

/* Info messages */
body:not(.dark-mode) .info-message {
  background: rgba(184, 134, 11, 0.1);
  border-color: #b8860b;
  color: #2d2416;
}

/* Empty state messages */
body:not(.dark-mode) .empty-state {
  color: #6b5d42;
}

/* ============================================
   ALL MODALS LIGHT THEME - Universal Styling
   ============================================ */

/* Modal Shell & Backdrop */
body:not(.dark-mode) .modal-shell {
  background: rgba(255, 239, 165, 0.5);
}

/* Base Modal Container */
body:not(.dark-mode) .modal-shell .modal,
body:not(.dark-mode) .modal {
  background: #fffcf0 !important;
  border-color: #b8a977 !important;
  box-shadow: 6px 6px 0 rgba(45, 36, 22, 0.3), 0 0 0 2px #d4c89a inset, 0 10px 26px -8px rgba(45, 36, 22, 0.2) !important;
  color: #2d2416 !important;
}

/* Modal Header */
body:not(.dark-mode) .modal-header {
  background: #fff9e6 !important;
  border-bottom: 2px solid #d4c89a !important;
  box-shadow: inset 0 -2px 0 rgba(184, 134, 11, 0.1) !important;
}

body:not(.dark-mode) .modal-header h2,
body:not(.dark-mode) .modal-header .modal-title {
  color: #2d2416 !important;
  text-shadow: none !important;
}

body:not(.dark-mode) .modal-header button {
  background: #fff !important;
  color: #2d2416 !important;
  border-color: #b8a977 !important;
  box-shadow: 2px 2px 0 rgba(45, 36, 22, 0.2) !important;
}

body:not(.dark-mode) .modal-header button:hover {
  background: #ffefa5 !important;
  border-color: #8b6914 !important;
}

/* Modal Body */
body:not(.dark-mode) .modal-body {
  background: #fffcf0 !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .modal-body::-webkit-scrollbar-track {
  background: rgba(212, 200, 154, 0.3) !important;
}

body:not(.dark-mode) .modal-body::-webkit-scrollbar-thumb {
  background: #b8860b !important;
  border-color: #6b5d42 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
}

/* Modal Forms */
body:not(.dark-mode) .modal form {
  color: #2d2416 !important;
}

body:not(.dark-mode) .modal label {
  color: #2d2416 !important;
}

body:not(.dark-mode) .modal select {
  background: #fff !important;
  border-color: #b8a977 !important;
  color: #2d2416 !important;
  box-shadow: 2px 2px 0 rgba(45, 36, 22, 0.2) !important;
}

body:not(.dark-mode) .modal select:focus {
  outline-color: #b8860b !important;
  border-color: #8b6914 !important;
}

body:not(.dark-mode) .modal input[type="text"],
body:not(.dark-mode) .modal input[type="number"],
body:not(.dark-mode) .modal textarea {
  background: #fff !important;
  border-color: #b8a977 !important;
  color: #2d2416 !important;
  box-shadow: 2px 2px 0 rgba(45, 36, 22, 0.2) !important;
}

body:not(.dark-mode) .modal input[type="checkbox"] {
  accent-color: #b8860b !important;
}

/* Modal Actions/Buttons */
body:not(.dark-mode) .modal .actions button,
body:not(.dark-mode) .modal button.btn {
  background: linear-gradient(135deg, #b8860b, #8b6914) !important;
  color: #fff !important;
  border-color: #6b5d42 !important;
  box-shadow: 2px 2px 0 rgba(45, 36, 22, 0.3) !important;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5) !important;
}

body:not(.dark-mode) .modal .actions button:hover,
body:not(.dark-mode) .modal button.btn:hover {
  background: linear-gradient(135deg, #d4a017, #a67c00) !important;
}

/* New Modal System - Override inline styles */
body:not(.dark-mode) .new-modal {
  background: #fffcf0 !important;
  border-color: #d4c89a !important;
  color: #2d2416 !important;
  box-shadow: 6px 6px 0 rgba(45, 36, 22, 0.3), 0 0 0 2px #d4c89a inset, 0 10px 26px -8px rgba(45, 36, 22, 0.2) !important;
}

body:not(.dark-mode) .new-modal-header {
  background: #fff9e6 !important;
  border-bottom: 2px solid #d4c89a !important;
  box-shadow: inset 0 -2px 0 rgba(184, 134, 11, 0.1) !important;
}

body:not(.dark-mode) .new-modal-header h2 {
  color: #2d2416 !important;
  text-shadow: none !important;
}

body:not(.dark-mode) .new-modal-header button {
  background: #fff !important;
  color: #2d2416 !important;
  border-color: #b8a977 !important;
  box-shadow: 2px 2px 0 rgba(45, 36, 22, 0.2) !important;
}

body:not(.dark-mode) .new-modal-header button:hover {
  background: #ffefa5 !important;
  border-color: #8b6914 !important;
}

body:not(.dark-mode) .new-modal-body {
  background: #fffcf0 !important;
  color: #2d2416 !important;
}

/* Game Log Modal Specific */
body:not(.dark-mode) .modal.game-log .log-scroll {
  background: #fff !important;
  border-color: #d4c89a !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .modal.game-log .round {
  background: #fff9e6 !important;
  border-color: #d4c89a !important;
  box-shadow: 2px 2px 0 rgba(45, 36, 22, 0.15) !important;
}

body:not(.dark-mode) .modal.game-log .round-header {
  color: #b8860b !important;
  text-shadow: none !important;
}

body:not(.dark-mode) .modal.game-log .turn {
  background: #fffcf0 !important;
  border-color: #d4c89a !important;
  box-shadow: 1px 1px 0 rgba(45, 36, 22, 0.15) !important;
}

body:not(.dark-mode) .modal.game-log .turn-header {
  color: #d4a017 !important;
}

body:not(.dark-mode) .modal.game-log .log-line {
  border-bottom-color: rgba(45, 36, 22, 0.1) !important;
  color: #2d2416 !important;
}

/* Game Log Modal - Additional elements */
body:not(.dark-mode) #game-log-content {
  background: #fff !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .modal-content-scrollable {
  background: #fffcf0 !important;
  border-color: #d4c89a !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .log-loading {
  color: #6b5d42 !important;
}

body:not(.dark-mode) .log-entry {
  background: transparent !important;
  color: #2d2416 !important;
  border-bottom-color: rgba(45, 36, 22, 0.1) !important;
}

body:not(.dark-mode) .log-entry:hover {
  background: rgba(184, 134, 11, 0.05) !important;
}

body:not(.dark-mode) .filter-controls {
  background: #fff9e6 !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .filter-controls label {
  color: #2d2416 !important;
}

body:not(.dark-mode) .filter-group label {
  color: #2d2416 !important;
}

body:not(.dark-mode) .checkbox-label {
  color: #2d2416 !important;
}

body:not(.dark-mode) .dice-log-number {
  background: #fff !important;
  color: #000 !important;
}

/* AI Decision Tree Modal */
body:not(.dark-mode) .modal.ai-decision .ai-tree {
  color: #2d2416 !important;
}

body:not(.dark-mode) .modal.ai-decision .ai-round {
  background: #fff9e6 !important;
  border-color: #d4c89a !important;
  box-shadow: 2px 2px 0 rgba(45, 36, 22, 0.15) !important;
}

body:not(.dark-mode) .modal.ai-decision .ai-round-header {
  color: #b8860b !important;
  text-shadow: none !important;
}

body:not(.dark-mode) .modal.ai-decision .ai-turn {
  background: #fffcf0 !important;
  border-color: #d4c89a !important;
  box-shadow: 1px 1px 0 rgba(45, 36, 22, 0.15) !important;
}

body:not(.dark-mode) .modal.ai-decision .ai-turn-header {
  color: #d4a017 !important;
}

body:not(.dark-mode) .modal.ai-decision .ai-roll {
  background: #fff !important;
  border-color: #d4c89a !important;
  box-shadow: 1px 1px 0 rgba(45, 36, 22, 0.1) !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .modal.ai-decision .ai-roll .faces {
  color: #b8860b !important;
}

body:not(.dark-mode) .modal.ai-decision .ai-roll .score {
  color: #d4a017 !important;
}

body:not(.dark-mode) .modal.ai-decision .ai-roll .rationale {
  color: #6b5d42 !important;
}

/* New Modal System (Draggable/Resizable) */
body:not(.dark-mode) .new-modal {
  background: #fffcf0 !important;
  border-color: #b8a977 !important;
  box-shadow: 6px 6px 0 rgba(45, 36, 22, 0.3), 0 0 0 2px #d4c89a inset !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .new-modal-header {
  background: #fff9e6 !important;
  border-bottom-color: #d4c89a !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .new-modal-body {
  background: #fffcf0 !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .new-modal-resize-handle:hover {
  background: linear-gradient(135deg, transparent 0%, transparent 50%, #b8860b 50%, #b8860b 100%) !important;
}

body:not(.dark-mode) .new-modal-resize-handle:active {
  background: linear-gradient(135deg, transparent 0%, transparent 50%, #d4a017 50%, #d4a017 100%) !important;
}

/* Yield Modal */
body:not(.dark-mode) #kot-yield-modal .modal-content {
  background: linear-gradient(145deg, #fffcf0, #fff9e6) !important;
  color: #2d2416 !important;
  border-color: #b8a977 !important;
  box-shadow: 0 10px 32px -4px rgba(45, 36, 22, 0.3) !important;
}

body:not(.dark-mode) #kot-yield-modal h3 {
  color: #2d2416 !important;
  text-shadow: none !important;
}

body:not(.dark-mode) #kot-yield-modal .modal-buttons button {
  background: linear-gradient(135deg, #b8860b, #8b6914) !important;
  color: #fff !important;
  border-color: #6b5d42 !important;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5) !important;
}

body:not(.dark-mode) #kot-yield-modal .modal-buttons button:hover {
  background: linear-gradient(135deg, #d4a017, #a67c00) !important;
}

/* All Power Cards Catalog Modal */
body:not(.dark-mode) .all-cards-modal .modal-content {
  background: #fffcf0 !important;
  border-color: #b8a977 !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .all-cards-modal .modal-header {
  background: #fff9e6 !important;
  color: #2d2416 !important;
}

/* Catalog cards - fix grayed out appearance in light mode */
body:not(.dark-mode) .catalog-card-front,
body:not(.dark-mode) .catalog-card-back {
  background: linear-gradient(135deg, #f4de83, #f0d97d) !important;
  border-color: #b8a977 !important;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2) !important;
}

body:not(.dark-mode) .catalog-card-name {
  background: linear-gradient(135deg, #b8860b, #8b6914) !important;
  color: #fff !important;
  padding: 4px !important;
  border: 2px solid #000 !important;
}

body:not(.dark-mode) .catalog-card-cost {
  color: #2d6699 !important;
}

body:not(.dark-mode) .catalog-card-type {
  color: #2d2416 !important;
  background: rgba(184, 134, 11, 0.2) !important;
}

body:not(.dark-mode) .catalog-card-description-front,
body:not(.dark-mode) .catalog-card-description {
  color: #4a4030 !important;
}

body:not(.dark-mode) .catalog-dark-badge {
  background: #8b008b !important;
  color: #fff !important;
}

/* Theme Preview Cards - fix grayed out appearance in light mode */
body:not(.dark-mode) .theme-preview-card {
  background: #fff9e6 !important;
  border-color: #b8a977 !important;
}

body:not(.dark-mode) .theme-preview-card:hover {
  border-color: #b8860b !important;
  box-shadow: 0 4px 12px rgba(184, 134, 11, 0.3) !important;
}

body:not(.dark-mode) .theme-preview-card.active {
  background: #fffcf0 !important;
  border-color: #b8860b !important;
}

body:not(.dark-mode) .theme-preview-header h4 {
  color: #2d2416 !important;
}

body:not(.dark-mode) .theme-preview-check {
  border-color: #b8a977 !important;
}

body:not(.dark-mode) .theme-preview-card.active .theme-preview-check {
  background: #b8860b !important;
  border-color: #b8860b !important;
  color: white !important;
}

body:not(.dark-mode) .theme-badge {
  background: #e8d5b7 !important;
  color: #6b5d42 !important;
}

body:not(.dark-mode) .theme-preview-card.active .theme-badge {
  background: #b8860b !important;
  color: white !important;
}

body:not(.dark-mode) .theme-preview-sample {
  background: #f5f5f5 !important;
  border-color: #d4c89a !important;
}

body:not(.dark-mode) .sample-modal {
  border-color: #b8a977 !important;
}

/* Theme preview samples now use isolated preview-* classes and don't need overrides */

/* Monster Profiles Modal */
body:not(.dark-mode) #monster-profiles-modal .modal-content {
  background: #fffcf0 !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .monster-profiles-content h3,
body:not(.dark-mode) .monster-profiles-content h4 {
  color: #2d2416 !important;
}

/* Instructions Modal */
body:not(.dark-mode) #instructions-modal .modal-content,
body:not(.dark-mode) .instructions-modal .modal-content {
  background: #fffcf0 !important;
  color: #2d2416 !important;
  border-color: #b8a977 !important;
}

/* CPU Roll Delay Slider - Light Theme Override */
body:not(.dark-mode) input.cpu-roll-slider {
  background: linear-gradient(90deg, #ffd54d, #ffb84d) !important;
  border-color: #6b5d42 !important;
  box-shadow: 2px 2px 0 rgba(45, 36, 22, 0.2), inset 0 1px 3px rgba(45, 36, 22, 0.2) !important;
}

body:not(.dark-mode) input.cpu-roll-slider::-webkit-slider-thumb {
  background: #ffd54d !important;
  border-color: #6b5d42 !important;
  box-shadow: 0 0 0 2px #ffd54d, 2px 2px 0 rgba(45, 36, 22, 0.3) !important;
}

body:not(.dark-mode) input.cpu-roll-slider::-moz-range-thumb {
  background: #ffd54d !important;
  border-color: #6b5d42 !important;
  box-shadow: 0 0 0 2px #ffd54d, 2px 2px 0 rgba(45, 36, 22, 0.3) !important;
}

/* Ensure proper text contrast in all modal text elements */
body:not(.dark-mode) .modal p,
body:not(.dark-mode) .modal li,
body:not(.dark-mode) .modal span,
body:not(.dark-mode) .modal div {
  color: #2d2416;
}

/* Ensure links in modals are visible */
body:not(.dark-mode) .modal a {
  color: #b8860b !important;
  text-decoration: underline;
}

body:not(.dark-mode) .modal a:hover {
  color: #d4a017 !important;
}

/* Mobile modal adjustments */
@media (max-width: 720px) {
  body:not(.dark-mode) .modal .actions {
    background: linear-gradient(0deg, rgba(255, 252, 240, 0.95), rgba(255, 252, 240, 0.6) 60%, rgba(255, 252, 240, 0)) !important;
  }
}

/* ============================================
   FIX SPECIFIC LIGHT THEME ISSUES
   ============================================ */

/* Content Section Text - Interface & Themes tabs */
body:not(.dark-mode) .content-section h4,
body:not(.dark-mode) .content-section h5 {
  color: #2d2416 !important;
}

body:not(.dark-mode) .content-section p,
body:not(.dark-mode) .content-section li {
  color: #2d2416 !important;
}

body:not(.dark-mode) .content-section ul {
  color: #2d2416 !important;
}

body:not(.dark-mode) .content-section {
  background: transparent !important;
}

body:not(.dark-mode) .content-section strong {
  color: #2d2416 !important;
}

body:not(.dark-mode) .content-section h3 {
  color: #2d2416 !important;
}

/* Radio options text */
body:not(.dark-mode) .radio-option span {
  color: #2d2416 !important;
}

body:not(.dark-mode) .radio-option:hover {
  background-color: rgba(184, 134, 11, 0.1) !important;
}

body:not(.dark-mode) .radio-option input[type="radio"] {
  accent-color: #b8860b !important;
}

/* Settings Modal Headers and Tabs - Override dark theme */
body:not(.dark-mode) .settings-modal-root {
  background: #fffcf0 !important;
}

/* Scenarios Tab Content */
body:not(.dark-mode) .cmp-scenarios-tab {
  color: #2d2416 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab h3,
body:not(.dark-mode) .cmp-scenarios-tab .scenario-heading {
  color: #2d2416 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .scenario-description {
  color: #6b5d42 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .scenario-list label {
  background: #fff !important;
  border-color: #d4c89a !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .scenario-list label:hover {
  border-color: #b8860b !important;
  background: rgba(255, 239, 165, 0.3) !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .param-editor {
  background: #fff9e6 !important;
  border-color: #d4c89a !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .target-mode-wrapper {
  background: #fff9e6 !important;
  border-color: #d4c89a !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .target-mode-label,
body:not(.dark-mode) .cmp-scenarios-tab .cpu-count-label {
  color: #2d2416 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .applied-list {
  background: #fff !important;
  border-color: #d4c89a !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab select,
body:not(.dark-mode) .cmp-scenarios-tab input {
  background: #fff !important;
  border-color: #b8a977 !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .assignment-table {
  background: #fff !important;
  border-color: #d4c89a !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .assignment-table th {
  background: #fff9e6 !important;
  color: #2d2416 !important;
  border-color: #d4c89a !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .assignment-table td {
  background: #fff !important;
  color: #2d2416 !important;
  border-color: #f0f0f0 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .scenario-cell select {
  background: #fff !important;
  border-color: #b8a977 !important;
  color: #2d2416 !important;
}

/* Archives Table - Full Light Theme */
body:not(.dark-mode) .archive-table {
  background: #fff !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .archive-table thead {
  background: #2d2416 !important;
  color: #ffd700 !important;
}

body:not(.dark-mode) .archive-table thead th {
  background: #2d2416 !important;
  color: #ffd700 !important;
  border-color: #000 !important;
}

body:not(.dark-mode) .archive-table tbody tr {
  background: #fff !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .archive-table tbody tr:hover {
  background: rgba(255, 239, 165, 0.3) !important;
}

body:not(.dark-mode) .archive-table tbody td {
  color: #2d2416 !important;
  border-bottom-color: #f0f0f0 !important;
}

body:not(.dark-mode) .archive-table input[type="checkbox"] {
  accent-color: #b8860b !important;
}

body:not(.dark-mode) .archive-table .btn {
  background: linear-gradient(135deg, #b8860b, #8b6914) !important;
  color: #fff !important;
  border-color: #6b5d42 !important;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5) !important;
}

body:not(.dark-mode) .archive-table .btn-danger {
  background: linear-gradient(135deg, #d32f2f, #b71c1c) !important;
  color: #fff !important;
  border-color: #8b0000 !important;
}

/* Developer Panel - Dev Tools Tab */
body:not(.dark-mode) .developer-panel-container {
  background: #fffcf0 !important;
}

body:not(.dark-mode) .dev-panel-header {
  background: rgba(255, 239, 165, 0.3) !important;
  border-bottom-color: #d4c89a !important;
}

body:not(.dark-mode) .dev-panel-header h3 {
  color: #2d2416 !important;
}

body:not(.dark-mode) .dev-panel-header p {
  color: #6b5d42 !important;
}

body:not(.dark-mode) .dev-tab-buttons {
  background: #fff9e6 !important;
  border-right-color: #d4c89a !important;
}

body:not(.dark-mode) .dev-tab-btn {
  color: #6b5d42 !important;
  border-color: transparent !important;
}

body:not(.dark-mode) .dev-tab-btn:hover {
  background: rgba(255, 239, 165, 0.5) !important;
  color: #2d2416 !important;
  border-color: #d4c89a !important;
}

body:not(.dark-mode) .dev-tab-btn.active {
  background: linear-gradient(135deg, #b8860b, #8b6914) !important;
  color: #fff !important;
  border-color: #6b5d42 !important;
  box-shadow: 0 2px 8px rgba(184, 134, 11, 0.3) !important;
}

body:not(.dark-mode) .dev-tab-content {
  background: #fffcf0 !important;
}

body:not(.dark-mode) .dev-content-panel {
  background: #fffcf0 !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .dev-content-panel h4,
body:not(.dark-mode) .dev-content-panel h5 {
  color: #2d2416 !important;
}

body:not(.dark-mode) .dev-content-panel p,
body:not(.dark-mode) .dev-content-panel li,
body:not(.dark-mode) .dev-content-panel label {
  color: #2d2416 !important;
}

body:not(.dark-mode) .dev-content-panel input,
body:not(.dark-mode) .dev-content-panel select,
body:not(.dark-mode) .dev-content-panel textarea {
  background: #fff !important;
  border-color: #b8a977 !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .dev-content-panel .btn {
  background: linear-gradient(135deg, #b8860b, #8b6914) !important;
  color: #fff !important;
  border-color: #6b5d42 !important;
}

body:not(.dark-mode) .dev-content-panel code,
body:not(.dark-mode) .dev-content-panel pre {
  background: #fff9e6 !important;
  border-color: #d4c89a !important;
  color: #2d2416 !important;
}

/* Debug Config Section */
body:not(.dark-mode) .debug-config,
body:not(.dark-mode) .config-section {
  background: #fff !important;
  border-color: #d4c89a !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .debug-config h4,
body:not(.dark-mode) .config-section h4 {
  color: #2d2416 !important;
}

body:not(.dark-mode) .debug-config label,
body:not(.dark-mode) .config-section label {
  color: #2d2416 !important;
}

body:not(.dark-mode) .debug-config input,
body:not(.dark-mode) .debug-config select,
body:not(.dark-mode) .config-section input,
body:not(.dark-mode) .config-section select {
  background: #fff !important;
  border-color: #b8a977 !important;
  color: #2d2416 !important;
}

/* Ensure all nested elements have proper contrast */
body:not(.dark-mode) .unified-modal-form span,
body:not(.dark-mode) .unified-modal-form div,
body:not(.dark-mode) .unified-modal-form p {
  color: inherit;
}

/* Force dark text on specific elements that might inherit light colors */
body:not(.dark-mode) .field-label,
body:not(.dark-mode) .section-title,
body:not(.dark-mode) .checkbox-label {
  color: #2d2416 !important;
}

/* ============================================
   COMPREHENSIVE UNIFIED MODALS LIGHT THEME FIX
   Override ALL light text colors from components.unified-modals.css
   ============================================ */

/* Section title (was #ffd700) */
body:not(.dark-mode) .section-title {
  color: #b8860b !important;
}

/* Field labels (was #e4e4e4) */
body:not(.dark-mode) .field-label {
  color: #2d2416 !important;
}

/* Field inputs text (was #e4e4e4) */
body:not(.dark-mode) .field-input {
  color: #2d2416 !important;
}

/* Checkbox labels (was #e4e4e4) */
body:not(.dark-mode) .checkbox-label {
  color: #2d2416 !important;
}

/* Radio option text (was #e4e4e4) */
body:not(.dark-mode) .radio-option span {
  color: #2d2416 !important;
}

/* Save button text (was #eaeaea) */
body:not(.dark-mode) .modal-actions .btn.save-btn {
  background: linear-gradient(135deg, #b8860b, #8b6914) !important;
  color: #fff !important;
  border-color: #6b5d42 !important;
}

/* Button primary (was white) */
body:not(.dark-mode) .btn-primary {
  background: linear-gradient(135deg, #b8860b, #8b6914) !important;
  color: #fff !important;
  border-color: #6b5d42 !important;
}

/* Button secondary (was #e4e4e4) */
body:not(.dark-mode) .btn-secondary {
  background: linear-gradient(135deg, #d4c89a, #b8a977) !important;
  color: #2d2416 !important;
  border-color: #6b5d42 !important;
}

/* Button danger (was white) */
body:not(.dark-mode) .btn-danger {
  background: linear-gradient(135deg, #d32f2f, #b71c1c) !important;
  color: #fff !important;
  border-color: #8b0000 !important;
}

/* Button warning (was white) */
body:not(.dark-mode) .btn-warning {
  background: linear-gradient(135deg, #f57c00, #ef6c00) !important;
  color: #fff !important;
  border-color: #d84315 !important;
}

/* Button success (was white) */
body:not(.dark-mode) .btn-success {
  background: linear-gradient(135deg, #27ae60, #229954) !important;
  color: #fff !important;
  border-color: #1e8449 !important;
}

/* Status indicators (was white) */
body:not(.dark-mode) .status-indicator.success,
body:not(.dark-mode) .status-indicator.warning,
body:not(.dark-mode) .status-indicator.error,
body:not(.dark-mode) .status-indicator.info {
  color: #fff !important;
}

/* Content section headings (was #ffd700) */
body:not(.dark-mode) .content-section h4 {
  color: #b8860b !important;
}

/* Content section text (was #ccc) */
body:not(.dark-mode) .content-section p,
body:not(.dark-mode) .content-section li {
  color: #2d2416 !important;
}

body:not(.dark-mode) .content-section ul {
  color: #2d2416 !important;
}

/* Filter group labels (was #999) */
body:not(.dark-mode) .filter-group label {
  color: #6b5d42 !important;
}

/* Filter group inputs (was #e4e4e4) */
body:not(.dark-mode) .filter-group select,
body:not(.dark-mode) .filter-group input {
  background: #fff !important;
  color: #2d2416 !important;
  border-color: #b8a977 !important;
}

/* Filter controls background (was #2a2a2a) */
body:not(.dark-mode) .filter-controls {
  background: rgba(255, 239, 165, 0.3) !important;
}

/* Game log entries (was #d4d4d4) */
body:not(.dark-mode) .log-entry {
  color: #2d2416 !important;
}

body:not(.dark-mode) .log-entry-text {
  color: #2d2416 !important;
}

/* Ensure all text in modal forms is dark */
body:not(.dark-mode) .unified-modal-form,
body:not(.dark-mode) .unified-modal-form *:not(button):not(.btn) {
  color: #2d2416;
}

/* Exception for buttons which need white text */
body:not(.dark-mode) .unified-modal-form button,
body:not(.dark-mode) .unified-modal-form .btn {
  color: #fff !important;
}

/* Tab content text */
body:not(.dark-mode) .tab-content {
  color: #2d2416 !important;
}

/* Modal actions border (was #444) */
body:not(.dark-mode) .modal-actions {
  border-top-color: #d4c89a !important;
  background: rgba(255, 239, 165, 0.15) !important;
}

/* Ensure dropdowns and selects in modals have dark text */
body:not(.dark-mode) .unified-modal-form select,
body:not(.dark-mode) .unified-modal-form input[type="text"],
body:not(.dark-mode) .unified-modal-form input[type="number"],
body:not(.dark-mode) .unified-modal-form textarea {
  color: #2d2416 !important;
  background: #fff !important;
}

/* Info/help text */
body:not(.dark-mode) .field-help {
  color: #6b5d42 !important;
}

/* Placeholder text for inputs */
body:not(.dark-mode) .field-input::placeholder,
body:not(.dark-mode) input::placeholder,
body:not(.dark-mode) textarea::placeholder {
  color: #b8a977 !important;
  opacity: 0.7;
}

/* Ensure table text in modals is dark */
body:not(.dark-mode) table,
body:not(.dark-mode) table td,
body:not(.dark-mode) table th {
  color: #2d2416 !important;
}

/* Exception for table headers with dark backgrounds */
body:not(.dark-mode) table thead th {
  color: #ffd700 !important;
}

/* ============================================
   CRITICAL FIXES - Override Inline Styles
   Must use !important to override JS inline styles
   ============================================ */

/* NEW MODAL SYSTEM - Modal title in header (has inline color:#e4e4e4) */
body:not(.dark-mode) .new-modal-header h2,
body:not(.dark-mode) .new-modal-header .modal-title {
  color: #2d2416 !important;
}

/* NEW MODAL SYSTEM - Modal background (has inline background:#1c1c1c) */
body:not(.dark-mode) .new-modal[style*="background"] {
  background: #fffcf0 !important;
  color: #2d2416 !important;
}

/* NEW MODAL SYSTEM - Modal header (has inline background:#111) */
body:not(.dark-mode) .new-modal-header[style] {
  background: #fff9e6 !important;
}

/* NEW MODAL SYSTEM - Modal body text */
body:not(.dark-mode) .new-modal-body {
  background: #fffcf0 !important;
  color: #2d2416 !important;
}

/* NEW MODAL SYSTEM - Close button */
body:not(.dark-mode) .new-modal-header button {
  background: #fff !important;
  color: #2d2416 !important;
  border-color: #b8a977 !important;
}

/* AI DECISION TREE MODAL - Full light theme */
body:not(.dark-mode) .cmp-ai-decision-tree {
  background: #fffcf0 !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .cmp-ai-decision-tree .adt-btn {
  background: linear-gradient(135deg, #b8860b, #8b6914) !important;
  color: #fff !important;
  border-color: #6b5d42 !important;
  text-shadow: none !important;
}

body:not(.dark-mode) .cmp-ai-decision-tree .adt-btn span {
  color: #fff !important;
  text-shadow: none !important;
  filter: none !important;
}

body:not(.dark-mode) .cmp-ai-decision-tree input[type=text] {
  background: #fff !important;
  color: #2d2416 !important;
  border-color: #b8a977 !important;
}

body:not(.dark-mode) .cmp-ai-decision-tree .adt-summary {
  color: #2d2416 !important;
}

body:not(.dark-mode) .cmp-ai-decision-tree .adt-tag {
  background: #fff9e6 !important;
  color: #2d2416 !important;
  border-color: #d4c89a !important;
}

body:not(.dark-mode) .cmp-ai-decision-tree .adt-tag.is-active {
  background: linear-gradient(135deg, #b8860b, #8b6914) !important;
  color: #fff !important;
}

body:not(.dark-mode) .cmp-ai-decision-tree .adt-round-header {
  background: #fff9e6 !important;
  color: #2d2416 !important;
  border-color: #d4c89a !important;
}

body:not(.dark-mode) .cmp-ai-decision-tree .adt-roll {
  background: #fff !important;
  border-color: #d4c89a !important;
}

body:not(.dark-mode) .cmp-ai-decision-tree .adt-roll-header .faces {
  color: #2d2416 !important;
}

body:not(.dark-mode) .cmp-ai-decision-tree .adt-roll-header .score-badge {
  background: linear-gradient(135deg, #b8860b, #8b6914) !important;
  color: #fff !important;
}

body:not(.dark-mode) .cmp-ai-decision-tree .tag {
  background: #fff9e6 !important;
  color: #6b5d42 !important;
}

body:not(.dark-mode) .cmp-ai-decision-tree details.hypo summary {
  color: #2d2416 !important;
}

body:not(.dark-mode) .cmp-ai-decision-tree .hypo-item code {
  color: #b8860b !important;
  background: #fff9e6 !important;
}

/* Additional AI Decision Tree elements */
body:not(.dark-mode) .cmp-ai-decision-tree .adt-toolbar {
  background: #fff9e6 !important;
  border-color: #d4c89a !important;
  flex-wrap: nowrap !important; /* Prevent control wrapping */
}

body:not(.dark-mode) .cmp-ai-decision-tree .adt-tree-scroll {
  background: #fff !important;
  border-color: #d4c89a !important;
}

body:not(.dark-mode) .cmp-ai-decision-tree .adt-empty {
  color: #6b5d42 !important;
}

body:not(.dark-mode) .cmp-ai-decision-tree .adt-turn {
  color: #2d2416 !important;
}

body:not(.dark-mode) .cmp-ai-decision-tree .adt-turn-header {
  color: #4a90e2 !important;
}

body:not(.dark-mode) .cmp-ai-decision-tree .adt-roll-body {
  color: #2d2416 !important;
}

body:not(.dark-mode) .cmp-ai-decision-tree .caret {
  border-left-color: #6b5d42 !important;
}

body:not(.dark-mode) .cmp-ai-decision-tree .caret.open {
  border-left-color: #b8860b !important;
}

body:not(.dark-mode) .cmp-ai-decision-tree .hypo-item {
  background: #fff !important;
  border-color: #d4c89a !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .cmp-ai-decision-tree .adt-legend {
  color: #2d2416 !important;
}

body:not(.dark-mode) .cmp-ai-decision-tree label {
  color: #2d2416 !important;
}

body:not(.dark-mode) .cmp-ai-decision-tree input[type="checkbox"] {
  accent-color: #b8860b !important;
}

/* Ensure wrapper also has light background */
body:not(.dark-mode) .ai-decision-tree-wrapper {
  background: #fffcf0 !important;
  color: #2d2416 !important;
}

/* WIN ODDS COMPONENT - Full light theme (Settings & Modal) */

/* Win Odds Panel in Settings */
body:not(.dark-mode) .win-odds-panel {
  background: #fff !important;
  border-color: #d4c89a !important;
}

body:not(.dark-mode) .win-odds-header {
  background: #fff9e6 !important;
  border-bottom-color: #d4c89a !important;
}

body:not(.dark-mode) .win-odds-title {
  color: #2d2416 !important;
  text-shadow: none !important;
}

body:not(.dark-mode) .win-odds-btn {
  background: linear-gradient(135deg, #b8860b, #8b6914) !important;
  border-color: #6b5d42 !important;
  color: #fff !important;
}

body:not(.dark-mode) .win-odds-btn:hover {
  background: linear-gradient(135deg, #d4a017, #a67c00) !important;
}

body:not(.dark-mode) .win-odds-body {
  background: #fffcf0 !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .win-odds-insights {
  background: #fffcf0 !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .win-odds-footer {
  background: #fff9e6 !important;
  border-top-color: #d4c89a !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .win-odds-footer label {
  color: #2d2416 !important;
}

body:not(.dark-mode) .win-odds-clear-btn {
  background: rgba(230, 126, 34, 0.1) !important;
  border-color: rgba(230, 126, 34, 0.3) !important;
  color: #c0392b !important;
}

body:not(.dark-mode) .win-odds-clear-btn:hover {
  background: rgba(230, 126, 34, 0.2) !important;
}

/* Win Odds Buttons */
body:not(.dark-mode) #dev-win-odds-mode,
body:not(.dark-mode) #dev-win-odds-refresh {
  background: linear-gradient(135deg, #b8860b, #8b6914) !important;
  border-color: #6b5d42 !important;
  color: #fff !important;
}

body:not(.dark-mode) #dev-win-odds-mode:hover,
body:not(.dark-mode) #dev-win-odds-refresh:hover {
  background: linear-gradient(135deg, #d4a017, #a67c00) !important;
}

body:not(.dark-mode) #dev-win-odds-clear {
  background: rgba(230, 126, 34, 0.1) !important;
  border-color: rgba(230, 126, 34, 0.3) !important;
  color: #c0392b !important;
}

body:not(.dark-mode) #dev-win-odds-trend {
  color: #6b5d42 !important;
}

/* Win Odds Chart & Content */
body:not(.dark-mode) #dev-win-odds-chart,
body:not(.dark-mode) #dev-win-odds-insights {
  background: #fffcf0 !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) #dev-win-odds-panel {
  background: #fff !important;
  border-color: #d4c89a !important;
}

/* Mini Win Odds Floating Modal */
body:not(.dark-mode) .mini-wo-title {
  color: #2d2416 !important;
  text-shadow: none !important;
}

body:not(.dark-mode) .mini-wo-btn {
  background: linear-gradient(135deg, #b8860b, #8b6914) !important;
  color: #fff !important;
  border-color: #6b5d42 !important;
}

body:not(.dark-mode) .mini-wo-btn:hover {
  background: linear-gradient(135deg, #d4a017, #a67c00) !important;
}

body:not(.dark-mode) .wo-display-mode-selector button {
  background: #fff !important;
  color: #2d2416 !important;
  border-color: #b8a977 !important;
}

body:not(.dark-mode) .wo-display-mode-selector button.active {
  background: linear-gradient(135deg, #b8860b, #8b6914) !important;
  color: #fff !important;
}

body:not(.dark-mode) .wo-player-row {
  color: #2d2416 !important;
}

body:not(.dark-mode) .wo-player-name {
  color: #2d2416 !important;
}

body:not(.dark-mode) .wo-win-odds {
  color: #2d2416 !important;
}

/* Win Odds Table Headers - Override purple gradient */
body:not(.dark-mode) .wo-table-header {
  background: linear-gradient(135deg, #b8860b, #8b6914) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  font-size: 1.6vh !important;
  letter-spacing: 0.05vmin !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

/* Win Odds Power Card Analysis - Light Theme */
body:not(.dark-mode) .wo-owned-title,
body:not(.dark-mode) .wo-available-title {
  color: #2d2416 !important;
}

/* Owned Cards - Warm golden brown theme */
body:not(.dark-mode) .wo-card-owned {
  background: rgba(212, 200, 154, 0.15) !important;
  border-color: rgba(184, 134, 11, 0.4) !important;
}

body:not(.dark-mode) .wo-card-owned:hover {
  background: rgba(212, 200, 154, 0.25) !important;
  border-color: rgba(184, 134, 11, 0.55) !important;
}

body:not(.dark-mode) .wo-card-owned .wo-card-name {
  color: #2d2416 !important;
}

body:not(.dark-mode) .wo-card-owned .wo-card-contribution {
  color: #8b6914 !important;
}

body:not(.dark-mode) .wo-card-owned .wo-card-reason {
  color: #6b5d42 !important;
}

/* Available Cards - Lighter golden theme */
body:not(.dark-mode) .wo-card-available {
  background: rgba(255, 252, 240, 0.6) !important;
  border-color: rgba(212, 200, 154, 0.5) !important;
}

body:not(.dark-mode) .wo-card-available:hover {
  background: rgba(255, 249, 230, 0.8) !important;
  border-color: rgba(184, 134, 11, 0.6) !important;
}

body:not(.dark-mode) .wo-card-available .wo-card-name {
  color: #2d2416 !important;
}

body:not(.dark-mode) .wo-card-available .wo-card-odds {
  color: #8b6914 !important;
}

body:not(.dark-mode) .wo-card-available .wo-card-reason {
  color: #6b5d42 !important;
}

body:not(.dark-mode) .wo-card-available .wo-card-cost {
  color: #b8860b !important;
}

/* Win Odds Power Card Analysis Container */
body:not(.dark-mode) .wo-power-card-analysis {
  background: rgba(255, 249, 230, 0.5) !important;
  border-top-color: #d4c89a !important;
}

body:not(.dark-mode) .wo-analysis-header {
  border-bottom-color: #d4c89a !important;
}

/* Win Odds Panel in Analytics Tab - Light Mode */
body:not(.dark-mode) .win-odds-panel {
  background: #fffcf0 !important;
  border-color: #d4c89a !important;
}

body:not(.dark-mode) .win-odds-header {
  background: linear-gradient(135deg, #b8860b, #8b6914) !important;
  border-bottom-color: #d4c89a !important;
}

body:not(.dark-mode) .win-odds-title {
  color: #fff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

body:not(.dark-mode) .win-odds-btn {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
}

body:not(.dark-mode) .win-odds-btn:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

body:not(.dark-mode) .win-odds-body {
  background: #fff9e6 !important;
}

body:not(.dark-mode) .win-odds-insights {
  background: #fff9e6 !important;
}

body:not(.dark-mode) .win-odds-footer {
  background: linear-gradient(135deg, #8b6914, #b8860b) !important;
  border-top-color: #d4c89a !important;
  color: #fff !important;
}

body:not(.dark-mode) .win-odds-footer label {
  color: rgba(255, 255, 255, 0.9) !important;
}

body:not(.dark-mode) #dev-win-odds-trend {
  color: rgba(255, 255, 255, 0.8) !important;
}

body:not(.dark-mode) .win-odds-clear-btn {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #c0392b !important;
}

body:not(.dark-mode) #win-odds-mode-label {
  color: rgba(255, 255, 255, 0.7) !important;
}

body:not(.dark-mode) .wo-table-header {
  background: linear-gradient(135deg, #b8860b, #8b6914) !important;
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

body:not(.dark-mode) .win-odds-clear-btn:hover {
  background: rgba(239, 68, 68, 0.3) !important;
}

body:not(.dark-mode) .wo-analysis-title {
  color: #8b6914 !important;
}

body:not(.dark-mode) .wo-analysis-subtitle {
  color: #6b5d42 !important;
}

/* Best Buy Tip Box */
body:not(.dark-mode) .wo-best-buy-tip {
  background: rgba(212, 200, 154, 0.2) !important;
  border-color: rgba(184, 134, 11, 0.5) !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .wo-best-buy-tip strong {
  color: #8b6914 !important;
}

/* GAME LOG MODAL - Override inline styles */
body:not(.dark-mode) .log-content {
  background: #fff !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .log-entry {
  color: #2d2416 !important;
  background: transparent !important;
}

body:not(.dark-mode) .log-entry:hover {
  background: rgba(255, 239, 165, 0.2) !important;
}

body:not(.dark-mode) .log-entry-text {
  color: #2d2416 !important;
}

body:not(.dark-mode) .log-entry-timestamp {
  color: #6b5d42 !important;
}

body:not(.dark-mode) .log-round-header {
  color: #b8860b !important;
}

body:not(.dark-mode) .log-turn-header {
  color: #d4a017 !important;
}

/* SCENARIOS - Black box with light gray text needs full override */
body:not(.dark-mode) .cmp-scenarios-tab * {
  color: #2d2416 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .scenario-description {
  color: #6b5d42 !important;
}

/* Override any remaining light text in settings */
body:not(.dark-mode) .settings-modal-root * {
  color: #2d2416;
}

body:not(.dark-mode) .settings-modal-root button {
  color: #fff !important;
}

body:not(.dark-mode) .settings-modal-root .btn {
  color: #fff !important;
}

/* Make sure section titles stand out */
body:not(.dark-mode) .settings-modal-root .section-title,
body:not(.dark-mode) .settings-modal-root h3,
body:not(.dark-mode) .settings-modal-root h4 {
  color: #b8860b !important;
}

/* Ensure archive table headers stay golden on dark */
body:not(.dark-mode) .archive-table thead {
  background: #2d2416 !important;
}

body:not(.dark-mode) .archive-table thead * {
  color: #ffd700 !important;
}

/* Dev panel overrides */
body:not(.dark-mode) .developer-panel-container * {
  color: #2d2416;
}

body:not(.dark-mode) .developer-panel-container button,
body:not(.dark-mode) .developer-panel-container .btn {
  color: #fff !important;
}

body:not(.dark-mode) .developer-panel-container .dev-tab-btn.active {
  color: #fff !important;
}

/* ============================================
   FIX DARK BACKGROUNDS IN LIGHT THEME
   All black/dark boxes need light backgrounds
   ============================================ */

/* SCENARIOS TAB - All dark backgrounds must be light */
body:not(.dark-mode) .cmp-scenarios-tab .param-editor {
  background: #fff !important;
  border-color: #d4c89a !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .target-mode-wrapper {
  background: #fff !important;
  border-color: #d4c89a !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .applied-list {
  background: #fff !important;
  border-color: #d4c89a !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .summary-panel {
  background: #fff !important;
  border-color: #d4c89a !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .scenario-select,
body:not(.dark-mode) select.scenario-select {
  background: #fff !important;
  color: #2d2416 !important;
  border-color: #b8a977 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .assignment-table {
  background: #fff !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .assignment-table th {
  background: #fff9e6 !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .assignment-table td {
  background: #fff !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab input[type="text"],
body:not(.dark-mode) .cmp-scenarios-tab input[type="number"] {
  background: #fff !important;
  color: #2d2416 !important;
  border-color: #b8a977 !important;
}

/* DEVELOPER PANEL - All dark backgrounds must be light */
body:not(.dark-mode) .dev-tab-panel {
  background: #fffcf0 !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .dev-content-panel {
  background: #fffcf0 !important;
}

body:not(.dark-mode) .tab-archive-toolbar {
  background: #fff9e6 !important;
  border-color: #d4c89a !important;
}

body:not(.dark-mode) .search-input {
  background: #fff !important;
  color: #2d2416 !important;
  border-color: #b8a977 !important;
}

body:not(.dark-mode) .search-input::placeholder {
  color: #b8a977 !important;
  opacity: 0.7;
}

body:not(.dark-mode) .filter-select {
  background: #fff !important;
  color: #2d2416 !important;
  border-color: #b8a977 !important;
}

body:not(.dark-mode) .refresh-btn {
  background: #fff !important;
  color: #2d2416 !important;
  border-color: #d4c89a !important;
}

body:not(.dark-mode) .refresh-btn:hover {
  background: rgba(255, 239, 165, 0.5) !important;
}

/* Component debug panels */
body:not(.dark-mode) .debug-panel,
body:not(.dark-mode) .config-panel {
  background: #fff !important;
  border-color: #d4c89a !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .debug-section,
body:not(.dark-mode) .config-section {
  background: #fff9e6 !important;
  border-color: #d4c89a !important;
}

body:not(.dark-mode) .debug-section h4,
body:not(.dark-mode) .config-section h4 {
  color: #2d2416 !important;
}

/* Archive manager tab */
body:not(.dark-mode) .tab-archive-header {
  border-bottom-color: #d4c89a !important;
}

body:not(.dark-mode) .tab-header-left h4 {
  color: #2d2416 !important;
}

body:not(.dark-mode) .archive-summary {
  color: #6b5d42 !important;
}

/* All form inputs in developer panel */
body:not(.dark-mode) .developer-panel-container input[type="text"],
body:not(.dark-mode) .developer-panel-container input[type="number"],
body:not(.dark-mode) .developer-panel-container input[type="email"],
body:not(.dark-mode) .developer-panel-container textarea,
body:not(.dark-mode) .developer-panel-container select {
  background: #fff !important;
  color: #2d2416 !important;
  border-color: #b8a977 !important;
}

/* Code blocks and pre elements */
body:not(.dark-mode) .developer-panel-container code,
body:not(.dark-mode) .developer-panel-container pre {
  background: #fff9e6 !important;
  color: #2d2416 !important;
  border-color: #d4c89a !important;
}

/* Collapsible sections in dev panel */
body:not(.dark-mode) .dev-collapsible {
  background: #fff !important;
  border-color: #d4c89a !important;
}

body:not(.dark-mode) .dev-collapsible-header {
  background: #fff9e6 !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .dev-collapsible-content {
  background: #fff !important;
  color: #2d2416 !important;
}

/* Ensure all panel backgrounds are light */
body:not(.dark-mode) .panel,
body:not(.dark-mode) .panel-section,
body:not(.dark-mode) .card {
  background: #fff !important;
  border-color: #d4c89a !important;
  color: #2d2416 !important;
}

/* Override CSS variables for light theme */
body:not(.dark-mode) {
  --color-panel-bg: #fffcf0;
  --color-card-bg: #fff;
  --color-border: #d4c89a;
  --color-text-primary: #2d2416;
  --color-text-secondary: #6b5d42;
  --color-text-tertiary: #b8a977;
  --color-highlight-bg: rgba(255, 239, 165, 0.3);
}

/* SCENARIO CONFIGURATION BOX - The big black box at top */
body:not(.dark-mode) .cmp-scenarios-tab > div:first-child {
  background: #fff9e6 !important;
  border-color: #d4c89a !important;
  color: #2d2416 !important;
}

/* All text in scenario configuration header */
body:not(.dark-mode) .cmp-scenarios-tab > div:first-child * {
  color: #2d2416 !important;
}

/* Scenario labels/checkboxes background */
body:not(.dark-mode) .cmp-scenarios-tab .scenario-list label {
  background: #fff !important;
  border-color: #d4c89a !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .scenario-list label:hover {
  background: rgba(255, 239, 165, 0.3) !important;
  border-color: #b8860b !important;
}

/* ============================================================================
   CRITICAL: Override ALL inline styles from JavaScript
   These rules use !important to override inline style attributes
   ============================================================================ */

/* Win Odds Floating Modal - Override inline styles */
body:not(.dark-mode) #mini-win-odds-floating,
body:not(.dark-mode) .win-odds-mini-floating {
  background: #fffcf0 !important;
  border-color: #d4c89a !important;
  color: #000 !important;
}

body:not(.dark-mode) #mini-win-odds-floating .mini-wo-chrome,
body:not(.dark-mode) .win-odds-mini-floating .mini-wo-chrome {
  background: #fffcf0 !important;
  border-color: #d4c89a !important;
}

body:not(.dark-mode) #mini-win-odds-floating .mini-wo-header,
body:not(.dark-mode) .win-odds-mini-floating .mini-wo-header {
  background: #fff9e6 !important;
  color: #000 !important;
  border-color: #d4c89a !important;
}

body:not(.dark-mode) #mini-win-odds-floating .mini-wo-title,
body:not(.dark-mode) .win-odds-mini-floating .mini-wo-title {
  color: #2d2416 !important;
  text-shadow: none !important;
}

body:not(.dark-mode) #mini-win-odds-floating .mini-wo-body,
body:not(.dark-mode) .win-odds-mini-floating .mini-wo-body {
  background: #fffcf0 !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) #mini-win-odds-floating .mini-wo-chart,
body:not(.dark-mode) .win-odds-mini-floating .mini-wo-chart,
body:not(.dark-mode) #mini-win-odds-chart {
  background: #fff !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) #mini-win-odds-floating .mini-wo-insights,
body:not(.dark-mode) .win-odds-mini-floating .mini-wo-insights,
body:not(.dark-mode) #mini-win-odds-insights {
  background: #fff !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) #mini-win-odds-floating .mini-wo-splitter,
body:not(.dark-mode) .win-odds-mini-floating .mini-wo-splitter {
  background: #d4c89a !important;
}

body:not(.dark-mode) #mini-win-odds-floating .mini-wo-footer,
body:not(.dark-mode) .win-odds-mini-floating .mini-wo-footer {
  background: #fff9e6 !important;
  color: #2d2416 !important;
  border-color: #d4c89a !important;
}

body:not(.dark-mode) #mini-win-odds-floating .mini-wo-footer label {
  color: #2d2416 !important;
}

body:not(.dark-mode) #mini-win-odds-floating .mini-wo-trend,
body:not(.dark-mode) .win-odds-mini-floating .mini-wo-trend {
  color: #6b5d42 !important;
}

body:not(.dark-mode) #mini-win-odds-floating button,
body:not(.dark-mode) .win-odds-mini-floating button,
body:not(.dark-mode) #mini-win-odds-floating .mini-wo-btn,
body:not(.dark-mode) .win-odds-mini-floating .mini-wo-btn {
  background: linear-gradient(135deg, #b8860b, #8b6914) !important;
  color: #fff !important;
  border-color: #6b5d42 !important;
}

body:not(.dark-mode) #mini-win-odds-floating button:hover,
body:not(.dark-mode) .win-odds-mini-floating button:hover,
body:not(.dark-mode) #mini-win-odds-floating .mini-wo-btn:hover,
body:not(.dark-mode) .win-odds-mini-floating .mini-wo-btn:hover {
  background: linear-gradient(135deg, #d4a017, #a67c00) !important;
}

/* Win Odds content elements */
body:not(.dark-mode) .wo-bar-container {
  background: #fff9e6 !important;
  border-color: #d4c89a !important;
}

body:not(.dark-mode) .wo-bar-fill {
  background: linear-gradient(90deg, #b8860b, #d4a017) !important;
}

body:not(.dark-mode) .wo-percentage {
  color: #2d2416 !important;
}

body:not(.dark-mode) .wo-insight-item {
  background: #fff9e6 !important;
  border-color: #d4c89a !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .wo-insight-title {
  color: #2d2416 !important;
}

body:not(.dark-mode) .wo-insight-text {
  color: #6b5d42 !important;
}

/* New Modal System - Override inline styles from new-modal-system.js */
body:not(.dark-mode) .new-modal {
  background: #fffcf0 !important;
  border-color: #d4c89a !important;
  color: #000 !important;
}

body:not(.dark-mode) .new-modal-header {
  background: #fff9e6 !important;
  color: #000 !important;
  border-color: #d4c89a !important;
}

body:not(.dark-mode) .new-modal-header h2,
body:not(.dark-mode) .new-modal-header * {
  color: #000 !important;
}

body:not(.dark-mode) .new-modal-body {
  background: #fffcf0 !important;
  color: #000 !important;
}

body:not(.dark-mode) .new-modal button {
  background: linear-gradient(135deg, #b8860b, #8b6914) !important;
  color: #fff !important;
  border-color: #6b5d42 !important;
}

/* Settings Modal - All inputs and textareas */
body:not(.dark-mode) .settings-modal-root input[type="text"],
body:not(.dark-mode) .settings-modal-root input[type="number"],
body:not(.dark-mode) .settings-modal-root input[type="range"],
body:not(.dark-mode) .settings-modal-root textarea,
body:not(.dark-mode) .settings-modal-root select,
body:not(.dark-mode) .unified-modal-form input[type="text"],
body:not(.dark-mode) .unified-modal-form input[type="number"],
body:not(.dark-mode) .unified-modal-form input[type="range"],
body:not(.dark-mode) .unified-modal-form textarea,
body:not(.dark-mode) .unified-modal-form select {
  background: #fff !important;
  color: #000 !important;
  border-color: #d4c89a !important;
}

/* Dev Tools Tab - All elements */
body:not(.dark-mode) .dev-tab-panel,
body:not(.dark-mode) .dev-tab-panel * {
  background-color: transparent !important;
}

body:not(.dark-mode) .dev-tab-panel {
  background: #fffcf0 !important;
  color: #000 !important;
}

body:not(.dark-mode) .dev-tab-panel input,
body:not(.dark-mode) .dev-tab-panel textarea,
body:not(.dark-mode) .dev-tab-panel select {
  background: #fff !important;
  color: #000 !important;
  border-color: #d4c89a !important;
}

/* Scenarios Tab - All elements */
body:not(.dark-mode) .cmp-scenarios-tab input,
body:not(.dark-mode) .cmp-scenarios-tab textarea,
body:not(.dark-mode) .cmp-scenarios-tab select,
body:not(.dark-mode) .param-editor input,
body:not(.dark-mode) .param-editor textarea {
  background: #fff !important;
  color: #000 !important;
  border-color: #d4c89a !important;
}

/* Scenarios Tab - Additional Elements */
body:not(.dark-mode) .cmp-scenarios-tab .scenario-list label {
  background: #fff9e6 !important;
  border-color: #d4c89a !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .scenario-list label:hover {
  background: #ffefa5 !important;
  border-color: #b8860b !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .param-editor {
  background: #fff !important;
  border-color: #d4c89a !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .target-mode-wrapper {
  background: #fff9e6 !important;
  border-color: #d4c89a !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .applied-list {
  background: #fff !important;
  border-color: #d4c89a !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .assignment-table th {
  background: #fff9e6 !important;
  border-bottom-color: #d4c89a !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .assignment-table td {
  border-bottom-color: #e6ddc4 !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .assignment-table tr:hover {
  background: rgba(255, 239, 165, 0.3) !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .summary-panel {
  background: #fff9e6 !important;
  border-color: #d4c89a !important;
  color: #2d2416 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .scenario-select,
body:not(.dark-mode) select.scenario-select {
  background: #fff !important;
  color: #2d2416 !important;
  border-color: #d4c89a !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .scenario-select:hover,
body:not(.dark-mode) select.scenario-select:hover {
  border-color: #b8860b !important;
}

/* Scenarios Tab - Power Card Selectors for "Loaded with Power Cards" and "Custom Shop Cards" */
body:not(.dark-mode) .cmp-scenarios-tab .card-selector-wrapper,
body:not(.dark-mode) .param-editor .card-selector-wrapper {
  background: #fff !important;
  border-color: #d4c89a !important;
}

/* Individual card selection items */
body:not(.dark-mode) .cmp-scenarios-tab .card-select-item,
body:not(.dark-mode) .param-editor .card-select-item {
  background: #fff9e6 !important;
  color: #2d2416 !important;
  border: 1px solid #d4c89a !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .card-select-item:hover,
body:not(.dark-mode) .param-editor .card-select-item:hover {
  background: #ffefa5 !important;
  border-color: #b8860b !important;
}

/* Selected card items - green highlight */
body:not(.dark-mode) .cmp-scenarios-tab .card-select-item[style*="background: #3a4a3a"],
body:not(.dark-mode) .cmp-scenarios-tab .card-select-item[style*="background:#3a4a3a"],
body:not(.dark-mode) .param-editor .card-select-item[style*="background: #3a4a3a"],
body:not(.dark-mode) .param-editor .card-select-item[style*="background:#3a4a3a"] {
  background: #d4edda !important;
  border-left: 3px solid #28a745 !important;
}

/* Card select grid container */
body:not(.dark-mode) .cmp-scenarios-tab .card-select-grid,
body:not(.dark-mode) .param-editor .card-select-grid {
  color: #2d2416 !important;
}

/* Card select header and count */
body:not(.dark-mode) .cmp-scenarios-tab .card-select-header,
body:not(.dark-mode) .param-editor .card-select-header {
  color: #2d2416 !important;
}

/* Assignment Table - Card Selection Row (Light Mode) */
body:not(.dark-mode) .cmp-scenarios-tab .card-selection-cell {
  background: #f5f5f5 !important;
  border-top-color: #2196f3 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .card-selection-header {
  border-bottom-color: #d0d0d0 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .card-selection-title {
  color: #333 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .card-count-current {
  color: #2196f3 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .card-count-separator,
body:not(.dark-mode) .cmp-scenarios-tab .card-count-total {
  color: #666 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .card-item {
  background: #d4c89a !important;
  border-color: #b8a977 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .card-item:hover {
  border-color: #2196f3 !important;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3) !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .card-item.selected {
  background: #c9b786 !important;
  border-color: #2196f3 !important;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.25) !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .card-checkbox {
  accent-color: #2196f3 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .card-name {
  color: #222 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .card-description {
  color: #666 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .card-selection-footer {
  border-top-color: #e0e0e0 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .card-grid::-webkit-scrollbar-track {
  background: #f0f0f0 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .card-grid::-webkit-scrollbar-thumb {
  background: #c0c0c0 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .card-grid::-webkit-scrollbar-thumb:hover {
  background: #a0a0a0 !important;
}

body:not(.dark-mode) .cmp-scenarios-tab .card-count,
body:not(.dark-mode) .param-editor .card-count {
  color: #28a745 !important;
}

/* Parameter editor blocks with inline dark backgrounds */
body:not(.dark-mode) .param-editor [style*="background:#181818"],
body:not(.dark-mode) .param-editor [style*="background: #181818"],
body:not(.dark-mode) .param-editor [style*="background:#1a1a1a"],
body:not(.dark-mode) .param-editor [style*="background: #1a1a1a"],
body:not(.dark-mode) [data-param-editor] [style*="background:#181818"],
body:not(.dark-mode) [data-param-editor] [style*="background: #181818"],
body:not(.dark-mode) [data-param-editor] [style*="background:#1a1a1a"],
body:not(.dark-mode) [data-param-editor] [style*="background: #1a1a1a"],
body:not(.dark-mode) [data-param-editor-game] [style*="background:#181818"],
body:not(.dark-mode) [data-param-editor-game] [style*="background: #181818"],
body:not(.dark-mode) [data-param-editor-game] [style*="background:#1a1a1a"],
body:not(.dark-mode) [data-param-editor-game] [style*="background: #1a1a1a"] {
  background: #fff9e6 !important;
  border-color: #d4c89a !important;
}

/* All text within parameter editors and card selectors should be dark */
body:not(.dark-mode) .param-editor,
body:not(.dark-mode) .param-editor *,
body:not(.dark-mode) [data-param-editor],
body:not(.dark-mode) [data-param-editor] *,
body:not(.dark-mode) [data-param-editor-game],
body:not(.dark-mode) [data-param-editor-game] *,
body:not(.dark-mode) .card-selector-wrapper,
body:not(.dark-mode) .card-selector-wrapper * {
  color: #2d2416 !important;
}

/* Card emoji and name spans - ensure visibility */
body:not(.dark-mode) .card-select-item span {
  color: #2d2416 !important;
}

/* Archive Manager - Override any dark backgrounds */
body:not(.dark-mode) .archive-content,
body:not(.dark-mode) .archive-content * {
  background-color: transparent !important;
}

body:not(.dark-mode) .archive-content {
  background: #fffcf0 !important;
  color: #000 !important;
}

body:not(.dark-mode) .archive-content table {
  background: #fff !important;
  color: #000 !important;
  border-color: #d4c89a !important;
}

body:not(.dark-mode) .archive-content th,
body:not(.dark-mode) .archive-content td {
  background: #fff !important;
  color: #000 !important;
  border-color: #d4c89a !important;
}

/* All modal overlays */
body:not(.dark-mode) .new-modal-overlay {
  background: rgba(0, 0, 0, 0.5) !important;
}

/* Game Log Modal - Override inline styles */
body:not(.dark-mode) [data-modal-id="game-log"],
body:not(.dark-mode) #game-log-modal {
  background: #fffcf0 !important;
  color: #000 !important;
}

body:not(.dark-mode) [data-modal-id="game-log"] .new-modal-header,
body:not(.dark-mode) #game-log-modal .new-modal-header {
  background: #fff9e6 !important;
  color: #000 !important;
}

body:not(.dark-mode) [data-modal-id="game-log"] .new-modal-body,
body:not(.dark-mode) #game-log-modal .new-modal-body {
  background: #fffcf0 !important;
  color: #000 !important;
}

body:not(.dark-mode) [data-modal-id="game-log"] table,
body:not(.dark-mode) #game-log-modal table {
  background: #fff !important;
  color: #000 !important;
}

body:not(.dark-mode) [data-modal-id="game-log"] th,
body:not(.dark-mode) [data-modal-id="game-log"] td,
body:not(.dark-mode) #game-log-modal th,
body:not(.dark-mode) #game-log-modal td {
  background: #fff !important;
  color: #000 !important;
  border-color: #d4c89a !important;
}

/* ============================================================================
   UNIVERSAL TEXT COLOR RULES FOR LIGHT MODE
   Ensure all text on light backgrounds is black
   ============================================================================ */

/* All settings modal text should be black */
body:not(.dark-mode) .settings-modal-root,
body:not(.dark-mode) .settings-modal-root *,
body:not(.dark-mode) .unified-modal-form,
body:not(.dark-mode) .unified-modal-form * {
  color: #000 !important;
}

/* Exception: Keep button text white on dark buttons */
body:not(.dark-mode) .settings-modal-root button,
body:not(.dark-mode) .unified-modal-form button,
body:not(.dark-mode) .btn {
  color: #fff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

/* All text in new modal system should be black */
body:not(.dark-mode) .new-modal,
body:not(.dark-mode) .new-modal * {
  color: #000 !important;
}

/* Exception: Button text */
body:not(.dark-mode) .new-modal button {
  color: #fff !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

/* All text in win odds modal should be black */
body:not(.dark-mode) #mini-win-odds-floating,
body:not(.dark-mode) #mini-win-odds-floating *,
body:not(.dark-mode) .win-odds-mini-floating,
body:not(.dark-mode) .win-odds-mini-floating * {
  color: #000 !important;
}

/* Labels, spans, divs - all black text */
body:not(.dark-mode) .settings-modal-root label,
body:not(.dark-mode) .settings-modal-root span,
body:not(.dark-mode) .settings-modal-root div,
body:not(.dark-mode) .settings-modal-root p,
body:not(.dark-mode) .settings-modal-root h1,
body:not(.dark-mode) .settings-modal-root h2,
body:not(.dark-mode) .settings-modal-root h3,
body:not(.dark-mode) .settings-modal-root h4 {
  color: #000 !important;
  text-shadow: none !important;
}

/* Field labels should be black */
body:not(.dark-mode) .field-label,
body:not(.dark-mode) .section-title,
body:not(.dark-mode) .checkbox-label {
  color: #000 !important;
}

/* Override ALL inline dark backgrounds in settings tabs */
body:not(.dark-mode) [data-scenarios-host],
body:not(.dark-mode) #settings-archive-list,
body:not(.dark-mode) #dev-debug-console,
body:not(.dark-mode) [data-replay-status-text],
body:not(.dark-mode) .tab-content [style*="background:#0"],
body:not(.dark-mode) .tab-content [style*="background:#1"],
body:not(.dark-mode) .tab-content [style*="background: #0"],
body:not(.dark-mode) .tab-content [style*="background: #1"] {
  background: #fffcf0 !important;
  color: #000 !important;
}

/* Override archive table dark backgrounds */
body:not(.dark-mode) [style*="background:#1a1a1a"],
body:not(.dark-mode) [style*="background: #1a1a1a"],
body:not(.dark-mode) [style*="background:#000"],
body:not(.dark-mode) [style*="background: #000"] {
  background: #fff !important;
  color: #000 !important;
}

/* Analytics panels light mode */
body:not(.dark-mode) .analytics-overview-panel {
  background: #fff9e6 !important;
  border-color: #d4c89a !important;
}

body:not(.dark-mode) .analytics-stat-card {
  background: #ffffff !important;
  border-color: #d4c89a !important;
}

body:not(.dark-mode) .analytics-stat-value {
  color: #2d2416 !important;
}

body:not(.dark-mode) .analytics-stat-label {
  color: #6b5d42 !important;
}

body:not(.dark-mode) .analytics-performance-panel {
  background: #fff9e6 !important;
  border-color: #d4c89a !important;
  color: #2d2416 !important;
}

/* ============================================
   THEME PREVIEW PROTECTION
   These rules MUST come last to override all other light mode rules
   ============================================ */

/* Dark Theme Preview */
body:not(.dark-mode) .settings-modal-root .preview-dark-header,
body:not(.dark-mode) .preview-dark-header {
  background: linear-gradient(135deg, #272727, #1c1c1c) !important;
  color: #f2f2f2 !important;
}

body:not(.dark-mode) .settings-modal-root .preview-dark-body,
body:not(.dark-mode) .preview-dark-body {
  background: #121212 !important;
}

body:not(.dark-mode) .settings-modal-root .preview-dark-stat-card,
body:not(.dark-mode) .preview-dark-stat-card {
  background: #1a1a1a !important;
  border-color: #333 !important;
}

body:not(.dark-mode) .settings-modal-root .preview-dark-stat-card .sample-value,
body:not(.dark-mode) .preview-dark-stat-card .sample-value {
  color: #e4e4e4 !important;
}

body:not(.dark-mode) .settings-modal-root .preview-dark-button,
body:not(.dark-mode) .preview-dark-button {
  background: linear-gradient(145deg, #2a2a2a, #1a1a1a) !important;
  color: #e4e4e4 !important;
  border-color: #444 !important;
}

/* Light Theme Preview */
body:not(.dark-mode) .settings-modal-root .preview-light-header,
body:not(.dark-mode) .preview-light-header {
  background: linear-gradient(135deg, #b8860b, #8b6914) !important;
  color: #fff !important;
}

body:not(.dark-mode) .settings-modal-root .preview-light-body,
body:not(.dark-mode) .preview-light-body {
  background: #fffcf0 !important;
}

body:not(.dark-mode) .settings-modal-root .preview-light-stat-card,
body:not(.dark-mode) .preview-light-stat-card {
  background: #fff9e6 !important;
  border-color: #d4c89a !important;
}

body:not(.dark-mode) .settings-modal-root .preview-light-stat-card .sample-value,
body:not(.dark-mode) .preview-light-stat-card .sample-value {
  color: #2d2416 !important;
}

body:not(.dark-mode) .settings-modal-root .preview-light-button,
body:not(.dark-mode) .preview-light-button {
  background: linear-gradient(145deg, #f5e6d3, #e8d5b7) !important;
  color: #2d2416 !important;
  border-color: #d4c89a !important;
}

/* Neon Theme Preview */
body:not(.dark-mode) .settings-modal-root .preview-neon-header,
body:not(.dark-mode) .preview-neon-header {
  background: linear-gradient(135deg, #ff006e, #8338ec) !important;
  color: #fff !important;
}

body:not(.dark-mode) .settings-modal-root .preview-neon-body,
body:not(.dark-mode) .preview-neon-body {
  background: #0a0a0a !important;
}

body:not(.dark-mode) .settings-modal-root .preview-neon-stat-card,
body:not(.dark-mode) .preview-neon-stat-card {
  background: #1a0a1a !important;
  border-color: #ff006e !important;
}

body:not(.dark-mode) .settings-modal-root .preview-neon-stat-card .sample-value,
body:not(.dark-mode) .preview-neon-stat-card .sample-value {
  color: #ff006e !important;
}

body:not(.dark-mode) .settings-modal-root .preview-neon-button,
body:not(.dark-mode) .preview-neon-button {
  background: linear-gradient(145deg, #ff006e, #d90062) !important;
  color: #fff !important;
  border-color: #ff006e !important;
}

/* Classic Theme Preview */
body:not(.dark-mode) .settings-modal-root .preview-classic-header,
body:not(.dark-mode) .preview-classic-header {
  background: linear-gradient(135deg, #2c5f2d, #97cc04) !important;
  color: #fff !important;
}

body:not(.dark-mode) .settings-modal-root .preview-classic-body,
body:not(.dark-mode) .preview-classic-body {
  background: #1a2a1a !important;
}

body:not(.dark-mode) .settings-modal-root .preview-classic-stat-card,
body:not(.dark-mode) .preview-classic-stat-card {
  background: #2a3a2a !important;
  border-color: #97cc04 !important;
}

body:not(.dark-mode) .settings-modal-root .preview-classic-stat-card .sample-value,
body:not(.dark-mode) .preview-classic-stat-card .sample-value {
  color: #97cc04 !important;
}

body:not(.dark-mode) .settings-modal-root .preview-classic-button,
body:not(.dark-mode) .preview-classic-button {
  background: linear-gradient(145deg, #97cc04, #7aa803) !important;
  color: #fff !important;
  border-color: #97cc04 !important;
}

/* Player Power Cards Modal - Light Mode Controls */
body:not(.dark-mode) .cmp-player-power-cards-modal-mobile .ppcm-letter.available {
  background: rgba(184, 134, 11, 0.8) !important;
  border: 1px solid rgba(139, 105, 20, 0.6) !important;
  color: #fff !important;
}

body:not(.dark-mode) .cmp-player-power-cards-modal-mobile .ppcm-letter.available:hover {
  background: rgba(184, 134, 11, 1) !important;
}

body:not(.dark-mode) .cmp-player-power-cards-modal-mobile .ppcm-letter.disabled,
body:not(.dark-mode) .cmp-player-power-cards-modal-mobile .ppcm-letter:not(.available) {
  background: rgba(220, 220, 220, 0.6) !important;
  border-color: rgba(180, 180, 180, 0.4) !important;
  color: rgba(120, 120, 120, 0.4) !important;
}

body:not(.dark-mode) .cmp-player-power-cards-modal-mobile .ppcm-group-header {
  color: #8b6914 !important;
  border-bottom: 2px solid rgba(184, 134, 11, 0.3) !important;
  background: rgba(184, 134, 11, 0.1) !important;
}

body:not(.dark-mode) .cmp-player-power-cards-modal-mobile .ppcm-group-header:hover {
  background: rgba(184, 134, 11, 0.15) !important;
}