/**
 * Dark Mode
 * Dark theme overrides for all components
 * IMPORTANT: This file should be loaded LAST to ensure highest specificity
 * NOTE: CSS Variables are defined in variables.css, not here
 */

/* ===================================== */
/* BUTTONS                               */
/* ===================================== */

body.dark-mode button:not(.hint-button):not(.header-icon-btn):not(.auth-btn):not(.dropdown-item):not(.simple-toast-close):not(.modal-close-btn):not(.achievement-toast-close) {
    box-shadow: 0 6px 24px rgba(13, 148, 136, 0.35);
}

body.dark-mode button:not(.hint-button):not(.header-icon-btn):not(.auth-btn):not(.dropdown-item):not(.simple-toast-close):not(.modal-close-btn):not(.achievement-toast-close):hover {
    box-shadow: 0 10px 35px rgba(96, 197, 242, 0.45);
}

/* ===================================== */
/* HEADER                                */
/* ===================================== */

/* Remove glass effect from dark mode header */
body.dark-mode #game-header {
    background: var(--card-background);
    backdrop-filter: none;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(13, 148, 136, 0.2);
}

/* Header buttons in dark mode use CSS variables (orange-blue gradient set by JavaScript) */
/* Ensure icons/emojis inside header buttons are white for good contrast */
body.dark-mode .header-icon-btn i,
body.dark-mode .auth-btn i,
body.dark-mode #sound-toggle i {
    color: #ffffff;
}

body.dark-mode .header-streak {
    background: #f1c40f;
    color: #1a1a1a;
    box-shadow: 0 4px 12px rgba(241, 196, 15, 0.4);
}

body.dark-mode .header-streak:hover {
    box-shadow: 0 6px 16px rgba(241, 196, 15, 0.5);
}

body.dark-mode .header-streak i {
    color: #d68910;
}

body.dark-mode .header-coins {
    background: #f1c40f;
    color: #1a1a1a;
    box-shadow: 0 4px 12px rgba(241, 196, 15, 0.4);
}

body.dark-mode .header-coins:hover {
    box-shadow: 0 6px 16px rgba(241, 196, 15, 0.5);
}

body.dark-mode .header-coins i {
    color: #d68910;
}

/* ===================================== */
/* CONTAINERS                            */
/* ===================================== */

/* Make dark mode containers solid (no glass effect) */
body.dark-mode #game-container {
    background: var(--card-background);
    border: 1px solid rgba(13, 148, 136, 0.25);
}

body.dark-mode #game-status-display {
    background: var(--card-background);
    border: 1px solid rgba(13, 148, 136, 0.2);
}

body.dark-mode .section {
    background: var(--card-background);
    border: 1px solid rgba(13, 148, 136, 0.15);
}

/* ===================================== */
/* COMPONENTS                            */
/* ===================================== */

/* Stat badges */
body.dark-mode .stat-badge {
    background: rgba(13, 148, 136, 0.15);
    border: 1px solid rgba(13, 148, 136, 0.3);
}

/* Coin icon */
body.dark-mode .coin-icon {
    color: #e65100;
}

/* Hint button */
body.dark-mode .hint-button {
    background: rgba(255, 143, 0, 0.2);
    border: 1px solid rgba(255, 143, 0, 0.4);
}

/* Tooltips */
body.dark-mode [data-tooltip]:before {
    background-color: #f8f7fc;
    color: #3d3358;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Digit inputs */
body.dark-mode .digit-input:focus {
    background-color: var(--card-background);
    box-shadow: 0 5px 25px rgba(13, 148, 136, 0.4);
}

/* Guess history */
body.dark-mode .history-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(13, 148, 136, 0.15);
}

/* Floating numbers */
body.dark-mode .floating-number:hover {
    color: var(--secondary-color);
}

/* ===================================== */
/* NOTIFICATIONS                         */
/* ===================================== */

/* Achievement toasts */
body.dark-mode .achievement-toast {
    background: var(--card-background);
    border-color: var(--secondary-color);
    box-shadow: 0 10px 40px rgba(13, 148, 136, 0.4);
}

body.dark-mode .achievement-toast::before {
    background: rgba(13, 148, 136, 0.15);
}

body.dark-mode .achievement-toast-icon-wrapper {
    background: var(--secondary-color);
}

body.dark-mode .achievement-toast-title {
    color: var(--primary-color);
}

body.dark-mode .achievement-toast-description {
    color: rgba(255, 255, 255, 0.9);
    opacity: 1;
}

body.dark-mode .achievement-toast-close {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .achievement-toast-close:hover {
    background: var(--danger-color);
    color: white;
}

/* Simple toasts */
body.dark-mode .simple-toast {
    background: #2d2f48;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

body.dark-mode .simple-toast-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ===================================== */
/* MODALS                                */
/* ===================================== */

body.dark-mode .modal-content {
    background-color: var(--card-background);
}

body.dark-mode .modal-close-btn {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .modal-close-btn:hover {
    background: var(--danger-color);
    color: white;
}

/* Auth modal */
body.dark-mode .form-group input {
    background-color: var(--input-background);
    border-color: #495057;
    color: var(--text-color);
}

body.dark-mode .form-group input:focus {
    background-color: var(--card-background);
    box-shadow: 0 4px 20px rgba(13, 148, 136, 0.35);
}

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

body.dark-mode .leaderboard-table tbody tr:hover {
    box-shadow: 0 4px 20px rgba(13, 148, 136, 0.25);
}

body.dark-mode .leaderboard-table tr.rank-1 td {
    background: rgba(255, 215, 0, 0.15);
}

body.dark-mode .leaderboard-table tr.rank-2 td {
    background: rgba(192, 192, 192, 0.15);
}

body.dark-mode .leaderboard-table tr.rank-3 td {
    background: rgba(205, 127, 50, 0.15);
}

body.dark-mode .username-cell {
    color: var(--primary-color);
}

body.dark-mode .score-cell {
    color: var(--accent-color);
}

/* Achievements modal */
body.dark-mode .stat-box {
    background: rgba(13, 148, 136, 0.15);
    border-color: rgba(13, 148, 136, 0.3);
}

body.dark-mode .stat-box:hover {
    box-shadow: 0 6px 20px rgba(13, 148, 136, 0.25);
}

body.dark-mode .achievement-tab {
    border-color: rgba(13, 148, 136, 0.4);
}

body.dark-mode .achievement-tab:hover {
    background: rgba(13, 148, 136, 0.15);
}

body.dark-mode .achievement-item {
    background-color: #2d2f48;
    border-color: rgba(13, 148, 136, 0.2);
}

body.dark-mode .achievement-item:hover {
    box-shadow: 0 6px 20px rgba(13, 148, 136, 0.25);
    border-color: var(--secondary-color);
}

body.dark-mode .achievement-icon-wrapper {
    background: rgba(13, 148, 136, 0.2);
    border-color: rgba(13, 148, 136, 0.4);
}

body.dark-mode .achievement-item.unlocked .achievement-icon-wrapper {
    background: var(--secondary-color);
}

/* Profile modal */
body.dark-mode .profile-header {
    background: rgba(13, 148, 136, 0.2);
}

body.dark-mode .profile-stat-card:hover {
    box-shadow: 0 8px 20px rgba(13, 148, 136, 0.5);
}

body.dark-mode .achievement-summary-card {
    background: rgba(13, 148, 136, 0.2);
}

/* ===================================== */
/* GAME MODES                            */
/* ===================================== */

/* Time Attack */
body.dark-mode .time-attack-leaderboard-table tbody tr {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .time-attack-leaderboard-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .time-attack-stat {
    background: rgba(231, 76, 60, 0.15);
    border-color: rgba(231, 76, 60, 0.3);
}

body.dark-mode .time-attack-result-stat {
    background: rgba(231, 76, 60, 0.15);
    border-color: rgba(231, 76, 60, 0.3);
}

/* Daily Challenge */
body.dark-mode .daily-challenge-banner {
    background: rgba(240, 179, 71, 0.15) !important;
    border: 2px solid rgba(240, 179, 71, 0.4) !important;
}

body.dark-mode .challenge-stat {
    background: rgba(61, 51, 88, 0.6);
    color: var(--text-color);
}

body.dark-mode .daily-challenge-status {
    background: rgba(82, 201, 140, 0.15);
    border: 2px solid rgba(82, 201, 140, 0.4);
}

body.dark-mode .daily-challenge-date {
    background: rgba(240, 179, 71, 0.15);
}

/* ===================================== */
/* FORMS & INPUTS                        */
/* ===================================== */

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background-color: var(--input-background);
    border-color: var(--input-border);
    color: var(--text-color);
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    background-color: var(--card-background);
    border-color: var(--primary-color);
    box-shadow: 0 4px 15px rgba(13, 148, 136, 0.3);
}

/* ===================================== */
/* SETTINGS MODAL                        */
/* ===================================== */

body.dark-mode .setting-item {
    background: rgba(13, 148, 136, 0.1);
    border-color: rgba(13, 148, 136, 0.2);
}

body.dark-mode .setting-item:hover {
    background: rgba(13, 148, 136, 0.15);
    box-shadow: 0 4px 15px rgba(13, 148, 136, 0.2);
}

body.dark-mode .toggle-btn {
    background: var(--primary-color);
    box-shadow: 0 4px 15px rgba(13, 148, 136, 0.3);
}

body.dark-mode .toggle-btn:hover {
    background: var(--secondary-color);
    box-shadow: 0 6px 20px rgba(96, 197, 242, 0.4);
}

body.dark-mode .volume-slider {
    background: rgba(13, 148, 136, 0.15);
}

body.dark-mode .volume-slider::-webkit-slider-thumb {
    background: var(--primary-color);
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.4);
}

body.dark-mode .volume-slider::-moz-range-thumb {
    background: var(--primary-color);
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.4);
}

/* ===================================== */
/* SCROLLBARS                            */
/* ===================================== */

body.dark-mode ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: var(--background-color);
    border-radius: 5px;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 5px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}

/* Firefox scrollbar */
body.dark-mode * {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--background-color);
}

/* Hide settings modal scrollbar specifically in dark mode */
body.dark-mode .settings-modal-content {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

body.dark-mode .settings-modal-content::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Hide profile modal scrollbar specifically in dark mode */
body.dark-mode .profile-modal-content {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

body.dark-mode .profile-modal-content::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* ===================================== */
/* MISCELLANEOUS                         */
/* ===================================== */

/* Links */
body.dark-mode a {
    color: var(--secondary-color);
}

body.dark-mode a:hover {
    color: var(--primary-color);
}

/* Code blocks */
body.dark-mode code,
body.dark-mode pre {
    background: rgba(13, 148, 136, 0.1);
    border: 1px solid rgba(13, 148, 136, 0.2);
    color: var(--secondary-color);
}

/* Selection */
body.dark-mode ::selection {
    background: rgba(13, 148, 136, 0.3);
    color: var(--text-color);
}

body.dark-mode ::-moz-selection {
    background: rgba(13, 148, 136, 0.3);
    color: var(--text-color);
}