/* ═══════════════════════════════════════════════════════════════════════════════
   NYT CROSSWORD MAKER - COMPREHENSIVE DARK MODE SYSTEM
   ═══════════════════════════════════════════════════════════════════════════════
   
   A beautifully crafted dark theme with smooth transitions, excellent contrast,
   and consistent styling across all components.
   
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES (LIGHT MODE DEFAULTS)
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
    /* Core Brand Colors */
    --nyt-black: #121212;
    --nyt-white: #ffffff;
    --nyt-gold: #f7da21;
    --nyt-blue: #326891;
    --nyt-green: #6aaa64;
    --nyt-yellow-soft: #faf5e6;
    
    /* Background Colors */
    --bg-primary: #f8f9fa;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f0f0f0;
    --bg-elevated: #ffffff;
    --bg-sunken: #e8e8e8;
    --bg-overlay: rgba(0, 0, 0, 0.5);
    
    /* Surface Colors */
    --surface-card: #ffffff;
    --surface-header: #ffffff;
    --surface-modal: #ffffff;
    --surface-dropdown: #ffffff;
    --surface-tooltip: #1a1a1a;
    --surface-input: #ffffff;
    
    /* Text Colors */
    --text-primary: #121212;
    --text-secondary: #565656;
    --text-muted: #888888;
    --text-disabled: #b0b0b0;
    --text-inverse: #ffffff;
    --text-link: #326891;
    --text-link-hover: #1a4a6e;
    
    /* Border Colors */
    --border-default: #e5e5e5;
    --border-strong: #c0c0c0;
    --border-subtle: #f0f0f0;
    --border-focus: #326891;
    
    /* Status Colors */
    --color-success: #2e7d32;
    --color-success-bg: rgba(46, 125, 50, 0.1);
    --color-warning: #f57c00;
    --color-warning-bg: rgba(245, 124, 0, 0.1);
    --color-error: #c62828;
    --color-error-bg: rgba(198, 40, 40, 0.1);
    --color-info: #326891;
    --color-info-bg: rgba(50, 104, 145, 0.1);
    
    /* Crossword Grid Colors */
    --grid-cell-bg: #ffffff;
    --grid-cell-black: #121212;
    --grid-cell-selected: #ffda00;
    --grid-cell-highlighted: #a7d8ff;
    --grid-cell-correct: #c5e8c5;
    --grid-cell-incorrect: #f9c6c6;
    --grid-border: #000000;
    
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;
    
    /* Z-index layers */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal: 1000;
    --z-toast: 1100;
    --z-tooltip: 1200;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   2. DARK MODE THEME
   ═══════════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    /* Background Colors - Rich, layered dark surfaces */
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;
    --bg-elevated: #30363d;
    --bg-sunken: #010409;
    --bg-overlay: rgba(0, 0, 0, 0.7);
    
    /* Surface Colors */
    --surface-card: #161b22;
    --surface-header: #0d1117;
    --surface-modal: #161b22;
    --surface-dropdown: #21262d;
    --surface-tooltip: #f0f0f0;
    --surface-input: #0d1117;
    
    /* Text Colors - High contrast for readability */
    --text-primary: #e6edf3;
    --text-secondary: #8b949e;
    --text-muted: #6e7681;
    --text-disabled: #484f58;
    --text-inverse: #0d1117;
    --text-link: #58a6ff;
    --text-link-hover: #79b8ff;
    
    /* Border Colors */
    --border-default: #30363d;
    --border-strong: #484f58;
    --border-subtle: #21262d;
    --border-focus: #58a6ff;
    
    /* Status Colors - Vibrant on dark */
    --color-success: #3fb950;
    --color-success-bg: rgba(63, 185, 80, 0.15);
    --color-warning: #d29922;
    --color-warning-bg: rgba(210, 153, 34, 0.15);
    --color-error: #f85149;
    --color-error-bg: rgba(248, 81, 73, 0.15);
    --color-info: #58a6ff;
    --color-info-bg: rgba(88, 166, 255, 0.15);
    
    /* Crossword Grid Colors */
    --grid-cell-bg: #0d1117;
    --grid-cell-black: #ffffff;
    --grid-cell-selected: #f7da21;
    --grid-cell-highlighted: #1f4a72;
    --grid-cell-correct: #1a4d2e;
    --grid-cell-incorrect: #5c1c1c;
    --grid-border: #58a6ff;
    
    /* NYT Brand adjustments for dark */
    --nyt-black: #e6edf3;
    --nyt-light-gray: #30363d;
    --nyt-gray: #8b949e;
    --nyt-cream: #21262d;
    
    /* Shadows - More prominent on dark */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.7);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   3. GLOBAL ELEMENT STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* HTML & Body */
html {
    color-scheme: light;
}

[data-theme="dark"] html,
html[data-theme="dark"] {
    color-scheme: dark;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Links */
a {
    color: var(--text-link);
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--text-link-hover);
}

/* Selection */
::selection {
    background-color: var(--nyt-gold);
    color: #121212;
}

[data-theme="dark"] ::selection {
    background-color: var(--nyt-gold);
    color: #121212;
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 5px;
    border: 2px solid var(--bg-secondary);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-color: var(--bg-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   4. FORM ELEMENTS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Inputs, Selects, Textareas */
input,
select,
textarea {
    background-color: var(--surface-input);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    transition: all var(--transition-fast);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--color-info-bg);
    outline: none;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--bg-sunken) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    border-color: var(--nyt-gold) !important;
    box-shadow: 0 0 0 3px rgba(247, 218, 33, 0.2);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted) !important;
}

/* Checkbox & Radio */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--nyt-gold);
}

/* Override inline styled inputs in modals */
[data-theme="dark"] .modal input[type="text"],
[data-theme="dark"] .modal input[type="email"],
[data-theme="dark"] .modal input[type="number"],
[data-theme="dark"] .modal input[type="password"],
[data-theme="dark"] .modal select,
[data-theme="dark"] .modal textarea {
    background-color: var(--bg-sunken) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   5. BUTTONS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Base .btn class dark mode - this is the most common button style */
[data-theme="dark"] .btn {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}

[data-theme="dark"] .btn:hover {
    background-color: var(--bg-elevated) !important;
    border-color: var(--border-strong) !important;
}

/* Primary Button */
.btn-primary,
.btn.primary,
button.primary {
    background-color: #121212;
    color: #ffffff;
    border-color: #121212;
}

[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn.primary,
[data-theme="dark"] button.primary,
[data-theme="dark"] .btn.success {
    background-color: var(--nyt-gold) !important;
    color: #121212 !important;
    border-color: var(--nyt-gold) !important;
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn.primary:hover,
[data-theme="dark"] button.primary:hover,
[data-theme="dark"] .btn.success:hover {
    background-color: #e5c91d !important;
    border-color: #e5c91d !important;
}

/* Secondary Button */
.btn-secondary,
.btn.secondary,
button.secondary {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
}

[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn.secondary:hover,
[data-theme="dark"] button.secondary:hover {
    background-color: var(--bg-elevated);
    border-color: var(--border-strong);
}

/* Ghost/Outline Buttons */
.btn-ghost,
.btn.ghost {
    background-color: transparent;
    color: var(--text-secondary);
    border: 1px solid transparent;
}

[data-theme="dark"] .btn-ghost:hover,
[data-theme="dark"] .btn.ghost:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Danger Button */
.btn-danger,
.btn.danger {
    background-color: var(--color-error-bg);
    color: var(--color-error);
    border: 1px solid var(--color-error);
}

/* Edit controls buttons (UNDO, REDO, CLEAR, etc.) */
[data-theme="dark"] .edit-controls .btn {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}

[data-theme="dark"] .edit-controls .btn:hover {
    background-color: var(--bg-elevated) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   6. CARDS & SURFACES
   ═══════════════════════════════════════════════════════════════════════════════ */

.card,
.puzzle-card,
.game-card,
.stat-card,
.settings-card {
    background-color: var(--surface-card);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

.card:hover,
.puzzle-card:hover,
.game-card:hover {
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .card,
[data-theme="dark"] .puzzle-card,
[data-theme="dark"] .game-card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .settings-card {
    background-color: var(--surface-card);
    border-color: var(--border-default);
}

/* Card Headers */
.card-header,
.puzzle-card-header,
.game-card-preview {
    background-color: var(--bg-tertiary);
    border-color: var(--border-default);
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .puzzle-card-header {
    background-color: var(--bg-sunken);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   7. NAVIGATION & HEADERS
   ═══════════════════════════════════════════════════════════════════════════════ */

.header,
.site-header,
.admin-header,
.masthead {
    background-color: var(--surface-header);
    border-color: var(--border-default);
    transition: all var(--transition-normal);
}

[data-theme="dark"] .header,
[data-theme="dark"] .site-header {
    background-color: var(--bg-sunken);
    border-color: var(--border-default);
}

[data-theme="dark"] .admin-header {
    background-color: var(--bg-sunken);
}

/* Navigation Items */
.header-nav-item,
.nav-item {
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.header-nav-item:hover,
.nav-item:hover {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
}

.header-nav-item.active,
.nav-item.active {
    color: var(--text-primary);
}

[data-theme="dark"] .header-nav-item.active {
    border-color: var(--nyt-gold);
}

/* Logo Cells */
[data-theme="dark"] .header-logo .cell {
    background-color: var(--nyt-gold);
    color: #121212;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   8. MODALS & OVERLAYS
   ═══════════════════════════════════════════════════════════════════════════════ */

.modal-overlay {
    background-color: var(--bg-overlay);
    backdrop-filter: blur(4px);
}

.modal {
    background-color: var(--surface-modal);
    box-shadow: var(--shadow-xl);
}

[data-theme="dark"] .modal {
    border: 1px solid var(--border-default);
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .modal-content {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.modal-header {
    border-color: var(--border-default);
}

[data-theme="dark"] .modal-header {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.modal-footer {
    background-color: var(--bg-tertiary);
    border-color: var(--border-default);
}

[data-theme="dark"] .modal-footer {
    background-color: var(--bg-sunken);
}

/* Modal form sections with light backgrounds */
[data-theme="dark"] .modal-body,
[data-theme="dark"] .modal-section,
[data-theme="dark"] .form-section,
[data-theme="dark"] .submission-section,
[data-theme="dark"] .contact-section,
[data-theme="dark"] .export-section {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* Cream/beige/light backgrounds in forms */
[data-theme="dark"] [style*="background: #faf"],
[data-theme="dark"] [style*="background:#faf"],
[data-theme="dark"] [style*="background-color: #faf"],
[data-theme="dark"] [style*="background: rgb(250"],
[data-theme="dark"] .cream-bg,
[data-theme="dark"] .light-section,
[data-theme="dark"] .info-box,
[data-theme="dark"] .highlight-section {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* Form field groups */
[data-theme="dark"] .form-group,
[data-theme="dark"] .field-group,
[data-theme="dark"] .input-group {
    background-color: transparent;
}

/* Form labels */
[data-theme="dark"] .form-label,
[data-theme="dark"] label {
    color: var(--text-secondary);
}

/* Required asterisks */
[data-theme="dark"] .required,
[data-theme="dark"] .text-danger,
[data-theme="dark"] label .required {
    color: var(--color-error);
}

/* Radio buttons and checkboxes labels */
[data-theme="dark"] .radio-group label,
[data-theme="dark"] .checkbox-group label,
[data-theme="dark"] input[type="radio"] + label,
[data-theme="dark"] input[type="checkbox"] + label {
    color: var(--text-primary);
}

/* Help text / descriptions */
[data-theme="dark"] .help-text,
[data-theme="dark"] .form-help,
[data-theme="dark"] .description,
[data-theme="dark"] small {
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   9. TABLES
   ═══════════════════════════════════════════════════════════════════════════════ */

table {
    background-color: var(--surface-card);
}

th {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    border-color: var(--border-default);
}

td {
    color: var(--text-primary);
    border-color: var(--border-default);
}

tr:hover {
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] th {
    background-color: var(--bg-sunken);
}

[data-theme="dark"] tr:hover {
    background-color: var(--bg-tertiary);
}

/* Leaderboard */
.leaderboard-table {
    background-color: var(--surface-card);
}

.leaderboard-header {
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] .leaderboard-header {
    background-color: var(--bg-sunken);
}

.leaderboard-row {
    border-color: var(--border-default);
}

[data-theme="dark"] .leaderboard-row:hover {
    background-color: var(--bg-tertiary);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   10. CROSSWORD GRID (DARK MODE SPECIFIC)
   ═══════════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .grid {
    background-color: var(--border-default);
    border-color: var(--text-secondary);
}

[data-theme="dark"] .cell {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-default);
}

[data-theme="dark"] .cell.black {
    background-color: var(--text-primary);
}

[data-theme="dark"] .cell.selected {
    background-color: var(--grid-cell-selected) !important;
    color: #121212;
}

[data-theme="dark"] .cell.highlighted {
    background-color: var(--grid-cell-highlighted);
}

[data-theme="dark"] .cell .number {
    color: var(--text-secondary);
}

[data-theme="dark"] .cell.correct {
    background-color: var(--grid-cell-correct) !important;
}

[data-theme="dark"] .cell.incorrect {
    background-color: var(--grid-cell-incorrect) !important;
}

/* Mini Grid in Cards */
[data-theme="dark"] .mini-grid .mini-cell {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .mini-grid .mini-cell.black {
    background-color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   11. CLUES PANEL
   ═══════════════════════════════════════════════════════════════════════════════ */

.clues-panel {
    background-color: var(--surface-card);
    border-color: var(--border-default);
}

.clue-item {
    color: var(--text-primary);
}

.clue-item:hover {
    background-color: var(--bg-tertiary);
}

.clue-item.active {
    background-color: var(--color-info-bg);
}

[data-theme="dark"] .clue-item.active {
    background-color: var(--grid-cell-highlighted);
}

.clue-num {
    color: var(--text-primary);
}

.clue-text {
    color: var(--text-secondary);
}

[data-theme="dark"] .clue-text {
    color: var(--text-primary);
}

/* Current Clue Banner */
.current-clue-banner {
    background-color: var(--bg-tertiary);
    border-color: var(--border-default);
}

[data-theme="dark"] .current-clue-banner {
    background-color: var(--bg-tertiary);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   12. BADGES & PILLS
   ═══════════════════════════════════════════════════════════════════════════════ */

.badge,
.status-badge,
.puzzle-badge {
    transition: all var(--transition-fast);
}

.badge-gold,
.nyt-badge {
    background-color: var(--nyt-gold);
    color: #121212;
}

.badge-success,
.status-active {
    background-color: var(--color-success-bg);
    color: var(--color-success);
}

.badge-warning {
    background-color: var(--color-warning-bg);
    color: var(--color-warning);
}

.badge-danger,
.status-inactive {
    background-color: var(--color-error-bg);
    color: var(--color-error);
}

.badge-info {
    background-color: var(--color-info-bg);
    color: var(--color-info);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   13. TABS
   ═══════════════════════════════════════════════════════════════════════════════ */

.tab-btn,
.tabs button,
.modal-tab,
.clues-tab {
    color: var(--text-secondary);
    border-color: transparent;
    transition: all var(--transition-fast);
}

.tab-btn:hover,
.tabs button:hover,
.modal-tab:hover,
.clues-tab:hover {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
}

.tab-btn.active,
.tabs button.active,
.modal-tab.active,
.clues-tab.active {
    color: var(--text-primary);
}

[data-theme="dark"] .tab-btn.active::after,
[data-theme="dark"] .modal-tab.active::after {
    background-color: var(--nyt-gold);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   14. DROPDOWNS & MENUS
   ═══════════════════════════════════════════════════════════════════════════════ */

.dropdown-menu {
    background-color: var(--surface-dropdown);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-default);
}

.dropdown-item {
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-menu button,
[data-theme="dark"] .dropdown-menu a {
    color: var(--text-primary) !important;
    background-color: transparent !important;
}

[data-theme="dark"] .dropdown-menu button:hover,
[data-theme="dark"] .dropdown-menu a:hover {
    background-color: var(--bg-elevated) !important;
}

.dropdown-item:hover {
    background-color: var(--bg-tertiary);
}

.dropdown-divider {
    background-color: var(--border-default);
}

[data-theme="dark"] .dropdown-menu hr {
    border-color: var(--border-default) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   15. TOASTS & NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════════════════════ */

.toast {
    box-shadow: var(--shadow-lg);
}

.toast.success {
    background-color: var(--color-success);
}

.toast.error {
    background-color: var(--color-error);
}

.toast.info {
    background-color: var(--color-info);
}

.toast.warning {
    background-color: var(--color-warning);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   16. LOADING STATES
   ═══════════════════════════════════════════════════════════════════════════════ */

.loading-spinner {
    border-color: var(--border-default);
    border-top-color: var(--text-primary);
}

[data-theme="dark"] .loading-spinner {
    border-color: var(--border-strong);
    border-top-color: var(--nyt-gold);
}

.loading-skeleton {
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
}

[data-theme="dark"] .loading-skeleton {
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-elevated) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   17. EMPTY STATES
   ═══════════════════════════════════════════════════════════════════════════════ */

.empty-state,
.empty-puzzles {
    color: var(--text-muted);
}

.empty-state h3 {
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   18. HELP SECTIONS
   ═══════════════════════════════════════════════════════════════════════════════ */

.help-section {
    background-color: var(--bg-tertiary);
    border-color: var(--nyt-gold);
}

[data-theme="dark"] .help-section {
    background-color: var(--bg-tertiary);
}

.help-section h3 {
    color: var(--text-primary);
}

.help-section p,
.help-section ul,
.help-section ol {
    color: var(--text-secondary);
}

.shortcut-key {
    background-color: var(--nyt-black);
    color: var(--nyt-white);
}

[data-theme="dark"] .shortcut-key {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   19. USER AVATARS
   ═══════════════════════════════════════════════════════════════════════════════ */

.user-avatar,
.profile-avatar {
    background-color: #121212;
    color: #ffffff;
    transition: all var(--transition-fast);
}

[data-theme="dark"] .user-avatar,
[data-theme="dark"] .profile-avatar {
    background-color: var(--nyt-gold);
    color: #121212;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   20. TOOLBAR & CONTROLS
   ═══════════════════════════════════════════════════════════════════════════════ */

.toolbar {
    background-color: var(--surface-header);
    border-color: var(--border-default);
}

[data-theme="dark"] .toolbar {
    background-color: var(--bg-secondary);
}

.toolbar-btn {
    background-color: transparent;
    color: var(--text-primary);
    border-color: var(--border-default);
}

.toolbar-btn:hover {
    background-color: var(--bg-tertiary);
}

.toolbar-btn.active {
    background-color: var(--nyt-black);
    color: var(--nyt-white);
}

[data-theme="dark"] .toolbar-btn.active {
    background-color: var(--nyt-gold);
    color: #121212;
}

.toolbar-icon-btn {
    color: var(--text-primary);
}

.toolbar-icon-btn:hover {
    background-color: var(--bg-tertiary);
}

/* Editor action buttons (UNDO, REDO, CLEAR GRID, etc.) */
[data-theme="dark"] .action-bar button,
[data-theme="dark"] .grid-actions button,
[data-theme="dark"] .puzzle-actions button,
[data-theme="dark"] button.action-btn,
[data-theme="dark"] .editor-controls button {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-default);
}

[data-theme="dark"] .action-bar button:hover,
[data-theme="dark"] .grid-actions button:hover,
[data-theme="dark"] .puzzle-actions button:hover,
[data-theme="dark"] button.action-btn:hover,
[data-theme="dark"] .editor-controls button:hover {
    background-color: var(--bg-elevated);
    border-color: var(--border-strong);
}

/* Generic white/light buttons that need dark mode fix */
[data-theme="dark"] button:not(.btn-primary):not(.primary):not([class*="theme"]) {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-default);
}

[data-theme="dark"] button:not(.btn-primary):not(.primary):not([class*="theme"]):hover {
    background-color: var(--bg-elevated);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   21. THEME TOGGLE BUTTON
   ═══════════════════════════════════════════════════════════════════════════════ */

.theme-toggle {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.theme-toggle:hover {
    background-color: var(--bg-elevated);
    transform: scale(1.05);
}

[data-theme="dark"] .theme-toggle:hover {
    background-color: var(--bg-elevated);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   22. TOGGLE SWITCHES
   ═══════════════════════════════════════════════════════════════════════════════ */

.toggle,
.toggle-slider {
    background-color: var(--border-default);
    transition: all var(--transition-fast);
}

.toggle.active,
.toggle-switch input:checked + .toggle-slider {
    background-color: var(--color-success);
}

[data-theme="dark"] .toggle.active,
[data-theme="dark"] .toggle-switch input:checked + .toggle-slider {
    background-color: var(--nyt-gold);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   23. STATS & METRICS
   ═══════════════════════════════════════════════════════════════════════════════ */

.stat-value {
    color: var(--text-primary);
}

.stat-label {
    color: var(--text-muted);
}

.stats-section {
    background-color: var(--surface-card);
    border-color: var(--border-default);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   24. MOBILE KEYBOARD (Play Page)
   ═══════════════════════════════════════════════════════════════════════════════ */

.mobile-controls {
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] .mobile-controls {
    background-color: var(--bg-secondary);
}

.key {
    background-color: var(--surface-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}

.key:active {
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] .key {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-default);
}

[data-theme="dark"] .key:active {
    background-color: var(--bg-elevated);
}

.key.delete {
    background-color: var(--color-error-bg);
    color: var(--color-error);
}

.mobile-btn.direction {
    background-color: var(--nyt-black);
    color: var(--nyt-white);
}

[data-theme="dark"] .mobile-btn.direction {
    background-color: var(--nyt-gold);
    color: #121212;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   25. AUTH PAGE SPECIFIC
   ═══════════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .puzzle-grid-side {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .form-side {
    background-color: var(--bg-sunken);
}

[data-theme="dark"] .grid-cell {
    background-color: var(--bg-secondary);
    border-color: var(--border-default);
    color: var(--text-primary);
}

[data-theme="dark"] .grid-cell.black {
    background-color: var(--text-primary);
}

[data-theme="dark"] .grid-cell.highlight {
    background-color: var(--nyt-gold);
    color: #121212;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   26. PRINT STYLES (NOT AFFECTED BY DARK MODE)
   ═══════════════════════════════════════════════════════════════════════════════ */

@media print {
    [data-theme="dark"] {
        --bg-primary: #ffffff;
        --bg-secondary: #ffffff;
        --text-primary: #121212;
        --text-secondary: #565656;
        --border-default: #e5e5e5;
    }
    
    [data-theme="dark"] .cell {
        background-color: #ffffff;
        color: #121212;
    }
    
    [data-theme="dark"] .cell.black {
        background-color: #121212;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   27. INLINE STYLE OVERRIDES FOR DARK MODE
   ═══════════════════════════════════════════════════════════════════════════════ */

/* 
   Override hardcoded inline background colors in dark mode.
   These use !important to override inline styles.
*/

/* Light gray backgrounds (#f8f9fa, #f4f4f4, #f0f0f0, etc.) */
[data-theme="dark"] [style*="background: #f"],
[data-theme="dark"] [style*="background:#f"],
[data-theme="dark"] [style*="background-color: #f"],
[data-theme="dark"] [style*="background-color:#f"] {
    background-color: var(--bg-tertiary) !important;
}

/* Cream/yellow backgrounds (#fff8e6, #faf5e6, #fffbf0, etc.) */
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background-color:#fff"] {
    background-color: var(--bg-tertiary) !important;
}

/* White backgrounds */
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background-color:white"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background:#ffffff"] {
    background-color: var(--bg-secondary) !important;
}

/* Override hardcoded dark text colors */
[data-theme="dark"] [style*="color: #333"],
[data-theme="dark"] [style*="color:#333"],
[data-theme="dark"] [style*="color: #121212"],
[data-theme="dark"] [style*="color:#121212"],
[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color:#000"],
[data-theme="dark"] [style*="color: black"],
[data-theme="dark"] [style*="color:black"] {
    color: var(--text-primary) !important;
}

/* Override hardcoded light border colors */
[data-theme="dark"] [style*="border: 1px solid #d"],
[data-theme="dark"] [style*="border:1px solid #d"],
[data-theme="dark"] [style*="border-color: #d"],
[data-theme="dark"] [style*="border-color:#d"],
[data-theme="dark"] [style*="border: 1px solid #e"],
[data-theme="dark"] [style*="border:1px solid #e"],
[data-theme="dark"] [style*="border-color: #e"],
[data-theme="dark"] [style*="border-color:#e"],
[data-theme="dark"] [style*="border: 1px solid #f"],
[data-theme="dark"] [style*="border:1px solid #f"],
[data-theme="dark"] [style*="border-color: #f"],
[data-theme="dark"] [style*="border-color:#f"] {
    border-color: var(--border-default) !important;
}

/* Modal specific overrides */
[data-theme="dark"] .modal > div,
[data-theme="dark"] .modal-body > div,
[data-theme="dark"] .modal div[style*="background"] {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary);
}

[data-theme="dark"] .modal h4,
[data-theme="dark"] .modal h3,
[data-theme="dark"] .modal label {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .modal small,
[data-theme="dark"] .modal .help-text {
    color: var(--text-muted) !important;
}

/* Export modal specific */
[data-theme="dark"] #exportModal > div,
[data-theme="dark"] #exportModal .form-group,
[data-theme="dark"] #exportModal div {
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ADDITIONAL DARK MODE OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Symmetry badge */
[data-theme="dark"] .symmetry-badge {
    background-color: var(--nyt-gold) !important;
    color: #121212 !important;
}

/* Current clue display */
[data-theme="dark"] .current-clue,
[data-theme="dark"] #currentClue {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Sidebar panels */
[data-theme="dark"] .sidebar,
[data-theme="dark"] .left-sidebar,
[data-theme="dark"] .right-sidebar,
[data-theme="dark"] .panel,
[data-theme="dark"] .sidebar-panel {
    background-color: var(--bg-secondary);
    border-color: var(--border-default);
}

/* Section headers */
[data-theme="dark"] .section-header,
[data-theme="dark"] .panel-header,
[data-theme="dark"] h4 {
    color: var(--text-primary);
}

/* Stat items */
[data-theme="dark"] .stat-item,
[data-theme="dark"] .stats-item {
    background-color: var(--bg-tertiary);
    border-color: var(--border-default);
}

[data-theme="dark"] .stat-value {
    color: var(--text-primary);
}

[data-theme="dark"] .stat-label {
    color: var(--text-secondary);
}

/* Info boxes and highlights */
[data-theme="dark"] .info-box,
[data-theme="dark"] .highlight-box,
[data-theme="dark"] .note-box,
[data-theme="dark"] .warning-box,
[data-theme="dark"] .tip-box {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}

/* Links */
[data-theme="dark"] a {
    color: var(--text-link);
}

[data-theme="dark"] a:hover {
    color: var(--text-link-hover);
}

/* Preserve specific link colors */
[data-theme="dark"] a.primary,
[data-theme="dark"] .header-btn.primary {
    background-color: var(--nyt-gold) !important;
    color: #121212 !important;
}

/* Tooltips */
[data-theme="dark"] .tooltip,
[data-theme="dark"] [data-tooltip]::after {
    background-color: var(--text-primary);
    color: var(--bg-primary);
}

/* Breadcrumbs */
[data-theme="dark"] .breadcrumb,
[data-theme="dark"] .breadcrumbs {
    color: var(--text-secondary);
}

/* Lists */
[data-theme="dark"] ul,
[data-theme="dark"] ol {
    color: var(--text-primary);
}

/* Code blocks */
[data-theme="dark"] code,
[data-theme="dark"] pre {
    background-color: var(--bg-sunken);
    color: var(--text-primary);
    border-color: var(--border-default);
}

/* Horizontal rules */
[data-theme="dark"] hr {
    border-color: var(--border-default);
}

/* Placeholders */
[data-theme="dark"] ::placeholder {
    color: var(--text-muted) !important;
    opacity: 1;
}

/* Disabled states */
[data-theme="dark"] :disabled,
[data-theme="dark"] [disabled],
[data-theme="dark"] .disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Focus outlines */
[data-theme="dark"] :focus-visible {
    outline-color: var(--nyt-gold);
}

/* Selection */
[data-theme="dark"] ::selection {
    background-color: var(--nyt-gold);
    color: #121212;
}

/* Guidelines ribbon/panel */
[data-theme="dark"] .guidelines-ribbon-panel,
[data-theme="dark"] .guidelines-ribbon-content {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

[data-theme="dark"] .ribbon-guide-section {
    background-color: var(--bg-tertiary);
    border-color: var(--border-default);
}

[data-theme="dark"] .ribbon-specs-table th,
[data-theme="dark"] .ribbon-specs-table td {
    border-color: var(--border-default);
}

[data-theme="dark"] .ribbon-specs-table th {
    background-color: var(--bg-sunken);
}

/* AI Analysis panels */
[data-theme="dark"] .ai-panel,
[data-theme="dark"] .analysis-panel,
[data-theme="dark"] .cockpit-panel {
    background-color: var(--bg-secondary);
    border-color: var(--border-default);
}

[data-theme="dark"] .dash-btn {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}

[data-theme="dark"] .dash-btn:hover {
    background-color: var(--bg-elevated) !important;
}

/* Word finder / suggestions */
[data-theme="dark"] .word-item,
[data-theme="dark"] .suggestion-item {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-default);
}

[data-theme="dark"] .word-item:hover,
[data-theme="dark"] .suggestion-item:hover {
    background-color: var(--bg-elevated);
}

/* Score badges */
[data-theme="dark"] .score-badge {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   28. SMOOTH THEME TRANSITION
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Prevent flash on theme change */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color 400ms ease, color 400ms ease, border-color 400ms ease, box-shadow 400ms ease !important;
    transition-delay: 0s !important;
}