/* ==========================================================================
   comino.club - Dark Mode Overrides (darkmode.css)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DARK MODE ROOT VARIABLES & BASE BODY
   - Palette definitions and overall page background color updates.
   -------------------------------------------------------------------------- */
body.dark-mode {
    --bg-color: #1a1c23;
    --card-bg: #242631;
    --card-hover: #2d303f;
    --locked-bg: #1e2029;
    --text-color: #e2e8f0;
    --primary-color: #133250;
    --secondary-color: #de73e5;
    --success-color: #de73e5;
    --menu-bg: #1a202c;
    --accent-blue: #4192d9;
    --accent-light: #9de7f2;

    --white: #1a1c23;
    --blue-dark: #133250;
    --blue-med: #242631;
    --blue-light: #2d303f;
    --blue-highlight: #1a1c23;
    --pink-dark: #de73e5;
    --pink-med: #de73e5;
    --pink-light: #030303;
    --grey-dark: #e2e8f0;
    --grey-med: #4a5568;
    --grey-light: #718096;
    --grey-highlight: #242631;

    background-color: var(--bg-color);
    color: var(--text-color);
}


/* --------------------------------------------------------------------------
   2. HEADER, BRANDING & TEXT LINKS
   - High-contrast updates for headers, brand logos, and content hyperlinks.
   -------------------------------------------------------------------------- */

body.dark-mode .section-subheader,
body.dark-mode .section-tagline,
body.dark-mode #countdownClock {
    color: var(--accent-light) !important;
}

body.dark-mode .banner h1 .brand-club,
body.dark-mode .panel-club,
body.dark-mode .story-content a,
body.dark-mode .about-section a,
body.dark-mode .support-content a {
    color: var(--secondary-color) !important;
}

body.dark-mode .story-content a:hover,
body.dark-mode .about-section a:hover,
body.dark-mode .support-content a:hover {
    color: var(--accent-blue) !important;
}

body.dark-mode .date-display {
    color: var(--text-color);
    background: rgba(0, 0, 0, 0.3);
}


/* --------------------------------------------------------------------------
   3. GAME ELEMENTS & INPUT CONTROLS
   - Clue containers, input fields, placeholder text, and dropdowns.
   -------------------------------------------------------------------------- */

body.dark-mode .dropdown-list,
body.dark-mode input[type="text"] {
    background-color: var(--locked-bg);
    border-color: var(--card-hover);
    color: var(--text-color);
}

body.dark-mode .clue-box {
    background-color: var(--grey-med);
    border: 1px solid var(--card-hover);
}

body.dark-mode .clue-group h3 {
    color: #e2e8f0;
}

body.dark-mode input::placeholder {
    color: var(--text-color);
    opacity: 0.5;
}

body.dark-mode .dropdown-item {
    color: var(--text-color);
}

body.dark-mode .dropdown-item:hover {
    background-color: var(--primary-color);
    color: white;
}


/* --------------------------------------------------------------------------
   4. MODALS & POP-UP OVERLAYS
   - Contrast and background colors for end-of-game and help modal dialogs.
   -------------------------------------------------------------------------- */
body.dark-mode .modal-card {
    background-color: #1a202c !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Modal Status Banner (Win / Loss message colors) */
body.dark-mode #modalStatusBox[style*="background-color: rgb(198, 246, 213)"],
body.dark-mode #modalStatusBox[style*="background-color: #c6f6d5"] {
    background-color: #1c4532 !important;
    color: #9ae6b4 !important;
}

body.dark-mode #modalStatusBox[style*="background-color: rgb(254, 215, 215)"],
body.dark-mode #modalStatusBox[style*="background-color: #fed7d7"] {
    background-color: #63171b !important;
    color: #feb2b2 !important;
}

/* Next Game Countdown Timer Card */
body.dark-mode #nextGameTimer {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Help / How to Play Modal Box Adjustments */
body.dark-mode #helpModal .modal-card div[style*="background"] {
    background-color: #1e2029 !important;
    border-color: #4a5568 !important;
    color: var(--text-color) !important;
}

body.dark-mode #helpModal h3,
body.dark-mode #helpModal h4 {
    border-bottom-color: #2d3748 !important;
    color: var(--text-color);
}


/* --------------------------------------------------------------------------
   5. STATISTIC DASHBOARDS & SCORE DISTRIBUTIONS
   - Summary cards, data tables, streak highlights, and graph containers.
   -------------------------------------------------------------------------- */
body.dark-mode .stats-summary {
    background-color: #1e2029;
    border-color: #2d3748;
}

body.dark-mode .stats-summary h4,
body.dark-mode .stats-val {
    color: var(--text-color) !important;
}

body.dark-mode .stats-row {
    background-color: var(--card-bg);
    color: var(--text-color) !important;
}

body.dark-mode .stats-table .stats-row {
    background-color: #1e2029;
}

body.dark-mode .stats-row.streak-highlight {
    border-top-color: #4a5568;
}

body.dark-mode .streak-highlight span[style*="color:var(--secondary-color)"] {
    color: var(--accent-blue) !important;
}

body.dark-mode .summary-card {
    background-color: #1e2029;
}

body.dark-mode .summary-card h4 {
    color: var(--text-color);
}

body.dark-mode .summary-card.streak-card {
    background-color: rgba(184, 50, 128, 0.1);
}

body.dark-mode .graph-container {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .graph-bar {
    background-color: var(--pink-med);
}

body.dark-mode .share-btn {
    background-color: var(--card-hover);
}


/* --------------------------------------------------------------------------
   6. HOMEPAGE CARDS & CONTENT PAGES
   - Styles for game choice cards, skill tags, and about/support blocks.
   -------------------------------------------------------------------------- */
body.dark-mode .game-image-wrapper {
    background-color: #1e2029;
}

body.dark-mode .skill-tag {
    background-color: rgba(56, 189, 248, 0.15);
    color: var(--accent-light);
}

body.dark-mode .about-section,
body.dark-mode .support-section,
body.dark-mode .game-section {
    background-color: rgba(36, 38, 49, 0.6);
    border-color: #2d3748;
}

body.dark-mode .story-content,
body.dark-mode .support-content {
    background-color: #1e2029;
    color: var(--text-color);
}

body.dark-mode .logo-frame {
    background-color: #242631;
    border-color: var(--primary-color);
}

body.dark-mode .game-stats-box {
    background-color: rgba(30, 32, 41, 0.5);
    border-color: #2d3748;
}

body.dark-mode .menu-link {
    color: #e2e8f0;
    background-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .menu-link:hover {
    background-color: var(--accent-blue);
}

footer a,
footer a:visited {
    color: inherit !important;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

/* Dark mode electron color */
body.dark-mode .bohr-electron {
    fill: #e2e8f0;
}

/* Highlight active link based on the body's data-page attribute */
body.dark-mode[data-page="home"] [data-link="home"],
body.dark-mode[data-page="country-chaser"] [data-link="country-chaser"],
body.dark-mode[data-page="passport-pursuit"] [data-link="passport-pursuit"],
body.dark-mode[data-page="data-diver"] [data-link="data-diver"],
body.dark-mode[data-page="mystats"] [data-link="mystats"],
body.dark-mode[data-page="about"] [data-link="about"],
body.dark-mode[data-page="support"] [data-link="support"] {
    background-color: var(--accent-blue);
}

/* Default electron color */
body.dark-mode .bohr-electron {
    fill: var(--accent-light);
}