/* ==========================================================
   TypingTutor.Online
   Dark Mode Polish v11.1
========================================================== */

/* Dark logo switching */
.site-logo-picture {
    position: relative;
    display: inline-grid;
    align-items: center;
}

.site-logo-picture > * {
    grid-area: 1 / 1;
}

.site-logo-dark {
    display: none;
}

html[data-theme="dark"] .site-logo-light {
    display: none;
}

html[data-theme="dark"] .site-logo-dark {
    display: block;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] .site-logo-light {
        display: none;
    }

    html[data-theme="system"] .site-logo-dark {
        display: block;
    }
}

/* Main dark surfaces */
html[data-theme="dark"] {
    --background: #090f1d;
    --surface: #111a2b;
    --surface-alt: #172236;
    --surface-soft: #0e1727;
    --surface-elevated: #1a273c;
    --border: #3b4b63;
    --border-soft: #26364e;
    --text: #f8fafc;
    --text-light: #cbd5e1;
    --text-muted: #8fa0b8;
    --key-bg: #172235;
    --key-border: #40506a;
    --key-text: #f8fafc;
}

/* Lesson text must belong to dark mode too */
html[data-theme="dark"] #lessonText,
html[data-theme="dark"] .typing-text-viewport {
    color: var(--text);
    background: #111827 !important;
    border-color: var(--border);
}

html[data-theme="dark"] #lessonText .future-character {
    color: #c4cede;
}

html[data-theme="dark"] #lessonText .typed-character {
    color: #7f8da3;
}

html[data-theme="dark"] #lessonText .current-character {
    color: #fff;
}

/* Remove washed-out white cards */
html[data-theme="dark"] .statistics-panel .stat,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .keyboard-guidance-card,
html[data-theme="dark"] .hands-guidance-card,
html[data-theme="dark"] #keyboardContainer,
html[data-theme="dark"] #handsContainer {
    color: var(--text);
    background: var(--surface) !important;
    border-color: var(--border);
}

/* Keyboard */
html[data-theme="dark"] .key {
    color: var(--key-text);
    background:
        linear-gradient(
            180deg,
            #1c2940,
            #151f32
        ) !important;
    border-color: var(--key-border);
    box-shadow:
        0 2px 0 #08101d,
        0 5px 10px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] .key-secondary {
    color: #9fb0c8;
}

html[data-theme="dark"] .key.key-active,
html[data-theme="dark"] .key.active,
html[data-theme="dark"] .key.pressed {
    color: #fff;
    background: var(--primary) !important;
    border-color: #80a9ff;
}

/* Hands panel: remove bright gray area */
html[data-theme="dark"] #handsContainer,
html[data-theme="dark"] .hands-guidance-card {
    background:
        radial-gradient(
            circle at center,
            #24334a 0,
            #172236 54%,
            #111a2b 100%
        ) !important;
}

html[data-theme="dark"] .hands-guidance-card p,
html[data-theme="dark"] .finger-position-label,
html[data-theme="dark"] .home-row-guide {
    color: var(--text-light);
}

/* Improve weak header text visible in screenshot */
html[data-theme="dark"] .stage-label,
html[data-theme="dark"] .stage-name,
html[data-theme="dark"] .lesson-stage,
html[data-theme="dark"] .practice-stage {
    color: #e6edf7 !important;
}

html[data-theme="dark"] .lesson-stage strong,
html[data-theme="dark"] .practice-stage strong {
    color: #fff !important;
}

/* Footer and resource cards */
html[data-theme="dark"] .resource-card,
html[data-theme="dark"] .more-practice-dropdown,
html[data-theme="dark"] .course-progress-card,
html[data-theme="dark"] .achievement-card {
    color: var(--text);
    background: var(--surface);
    border-color: var(--border-soft);
}

html[data-theme="dark"] .resource-card small,
html[data-theme="dark"] .resource-section-heading p {
    color: var(--text-light);
}

/* System-dark mirrors explicit dark mode */
@media (prefers-color-scheme: dark) {
    html[data-theme="system"] #lessonText,
    html[data-theme="system"] .typing-text-viewport {
        color: var(--text);
        background: #111827 !important;
    }

    html[data-theme="system"] .statistics-panel .stat,
    html[data-theme="system"] .stat,
    html[data-theme="system"] #keyboardContainer,
    html[data-theme="system"] #handsContainer {
        background: var(--surface) !important;
        border-color: var(--border);
    }

    html[data-theme="system"] .key {
        color: var(--key-text);
        background: linear-gradient(180deg, #1c2940, #151f32) !important;
        border-color: var(--key-border);
    }
}


/* ==========================================================
   DARK KEYBOARD LABEL VISIBILITY v11.2
========================================================== */

/*
 * The keyboard key labels became too dark because older key text
 * rules were overriding the new dark-mode palette.
 */
html[data-theme="dark"] .keyboard,
html[data-theme="dark"] .keyboard-container,
html[data-theme="dark"] #keyboardContainer {
    color: #f8fafc !important;
}

html[data-theme="dark"] .key,
html[data-theme="dark"] .keyboard-key,
html[data-theme="dark"] [data-key] {
    color: #f8fafc !important;
    background:
        linear-gradient(
            180deg,
            #24334b 0%,
            #1a263a 100%
        ) !important;
    border-color: #52627a !important;
    text-shadow: none !important;
}

html[data-theme="dark"] .key *,
html[data-theme="dark"] .keyboard-key *,
html[data-theme="dark"] [data-key] * {
    color: inherit !important;
}

html[data-theme="dark"] .key-secondary,
html[data-theme="dark"] .key .secondary,
html[data-theme="dark"] .key .symbol,
html[data-theme="dark"] .keyboard-key .secondary,
html[data-theme="dark"] .keyboard-key .symbol {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .key.key-active,
html[data-theme="dark"] .key.active,
html[data-theme="dark"] .key.pressed,
html[data-theme="dark"] .keyboard-key.key-active,
html[data-theme="dark"] .keyboard-key.active,
html[data-theme="dark"] [data-key].key-active {
    color: #ffffff !important;
    background: #2f6df6 !important;
    border-color: #8fb3ff !important;
    box-shadow:
        0 0 0 3px rgba(47, 109, 246, .22),
        0 2px 0 #153a95 !important;
}

html[data-theme="dark"] .key.key-active *,
html[data-theme="dark"] .key.active *,
html[data-theme="dark"] .key.pressed *,
html[data-theme="dark"] .keyboard-key.key-active *,
html[data-theme="dark"] .keyboard-key.active *,
html[data-theme="dark"] [data-key].key-active * {
    color: #ffffff !important;
}

/* Home-key markers and target-row labels */
html[data-theme="dark"] .home-key-marker,
html[data-theme="dark"] .target-row-guide,
html[data-theme="dark"] .target-row-guide *,
html[data-theme="dark"] #targetRowGuide,
html[data-theme="dark"] #targetRowGuide * {
    color: #dbe7f8 !important;
}

html[data-theme="dark"] .target-row-key {
    color: #dbe7f8 !important;
    background: #1d2a3f !important;
    border-color: #42536d !important;
}

html[data-theme="dark"] .target-row-key.active,
html[data-theme="dark"] .target-row-key.current {
    color: #ffffff !important;
    background: #2f6df6 !important;
    border-color: #8fb3ff !important;
}

/* System-dark support */
@media (prefers-color-scheme: dark) {
    html[data-theme="system"] .key,
    html[data-theme="system"] .keyboard-key,
    html[data-theme="system"] [data-key] {
        color: #f8fafc !important;
        background:
            linear-gradient(
                180deg,
                #24334b 0%,
                #1a263a 100%
            ) !important;
        border-color: #52627a !important;
    }

    html[data-theme="system"] .key *,
    html[data-theme="system"] .keyboard-key *,
    html[data-theme="system"] [data-key] * {
        color: inherit !important;
    }
}