/* Dark Mode Styles for Ham Radio Training Website */
/* This file overrides color variables when dark mode is enabled */
/* Works independently with both kid and adult modes */

/* Base Dark Mode Color Variables */
:root {
    /* Backgrounds */
    --background: #0f172a;           /* Main background - very dark blue */
    --surface: #1e293b;              /* Cards, containers - dark slate */
    --surface-elevated: #334155;     /* Hover states - medium slate */

    /* Text */
    --text-primary: #f1f5f9;         /* Main text - near white */
    --text-secondary: #cbd5e1;       /* Secondary text - light slate */
    --text-tertiary: #94a3b8;        /* Muted text - slate */

    /* Borders & Dividers */
    --border-color: #334155;         /* Subtle dark borders */
    --divider-color: #475569;        /* Stronger dividers */

    /* Primary Colors (adjusted for dark) */
    --primary-color: #60a5fa;        /* Brighter blue for visibility */
    --primary-hover: #3b82f6;        /* Slightly darker on hover */
    --secondary-color: #94a3b8;      /* Light slate */

    /* Status Colors */
    --success-color: #34d399;        /* Bright emerald green */
    --success-bg: #065f46;           /* Dark green background */
    --danger-color: #f87171;         /* Coral red (softer) */
    --danger-bg: #7f1d1d;            /* Dark red background */
    --warning-color: #fbbf24;        /* Amber */
    --warning-bg: #78350f;           /* Dark amber background */

    /* Interactive Elements */
    --input-bg: #1e293b;             /* Input backgrounds */
    --input-border: #475569;         /* Input borders */
    --hover-overlay: rgba(255, 255, 255, 0.05);   /* Subtle hover */
    --active-overlay: rgba(255, 255, 255, 0.1);   /* Subtle active */
}

/* Dark Mode Body Styling */
body {
    background-color: var(--background);
    color: var(--text-primary);
}

/* Navigation */
.navbar {
    background-color: var(--surface);
    border-bottom: 1px solid var(--border-color);
}

.nav-links a {
    color: var(--text-primary);
}

.nav-links a:hover {
    background-color: var(--hover-overlay);
}

/* Hero Section */
.hero {
    background-color: var(--surface);
    border: 1px solid var(--border-color);
}

.hero h1 {
    color: var(--text-primary);
}

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

/* Cards & Surfaces */
.card,
.topic-card,
.question-card,
.resource-card,
.stat-card {
    background-color: var(--surface);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.card:hover,
.topic-card:hover,
.question-card:hover {
    background-color: var(--surface-elevated);
}

/* Buttons */
.btn-primary {
    background-color: var(--primary-color);
    color: #0f172a;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
}

.btn-secondary {
    background-color: var(--surface-elevated);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.btn-secondary:hover {
    background-color: var(--divider-color);
}

.btn-danger {
    background-color: var(--danger-color);
    color: #0f172a;
}

/* Form Inputs */
input[type="text"],
input[type="search"],
select,
textarea {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

input[type="text"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
    border-color: var(--primary-color);
    background-color: var(--surface);
}

input::placeholder {
    color: var(--text-tertiary);
}

/* Topic Sidebar */
.topic-sidebar {
    background-color: var(--surface);
    border-right: 1px solid var(--border-color);
}

.topic-item {
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.topic-item:hover {
    background-color: var(--hover-overlay);
}

.topic-item.active {
    background-color: var(--active-overlay);
    border-left-color: var(--primary-color);
}

.topic-item.completed {
    background-color: var(--success-bg);
}

.topic-item.in-progress {
    background-color: var(--warning-bg);
}

/* Question Elements */
.answer-option {
    background-color: var(--surface);
    border-color: var(--border-color);
}

.answer-option:hover {
    background-color: var(--surface-elevated);
    border-color: var(--primary-color);
}

.answer-option.selected {
    background-color: var(--active-overlay);
    border-color: var(--primary-color);
}

.answer-option.correct-highlight {
    background-color: var(--success-bg);
    border-color: var(--success-color);
}

.answer-option.incorrect-highlight {
    background-color: var(--danger-bg);
    border-color: var(--danger-color);
}

.answer-letter {
    background-color: var(--primary-color);
    color: #0f172a;
}

/* Explanation Box */
.explanation {
    background-color: var(--surface-elevated);
    border-left-color: var(--primary-color);
}

/* Progress Bars */
.progress-bar {
    background-color: var(--surface-elevated);
}

.progress-fill {
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--success-color) 100%);
}

/* Status Badges */
.badge {
    background-color: var(--surface-elevated);
    color: var(--text-primary);
}

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

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

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

/* Score Display */
.score-display {
    color: var(--text-primary);
}

.score-circle {
    border-color: var(--primary-color);
}

.pass-message {
    color: var(--success-color);
}

.fail-message {
    color: var(--danger-color);
}

/* Timer */
.timer {
    background-color: var(--surface);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Question Grid */
.question-grid-item {
    background-color: var(--surface);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.question-grid-item.answered {
    background-color: var(--success-bg);
    border-color: var(--success-color);
}

.question-grid-item.current {
    background-color: var(--primary-color);
    color: #0f172a;
}

/* Filters */
.filter-group {
    background-color: var(--surface);
    border-color: var(--border-color);
}

.filter-btn {
    background-color: var(--surface-elevated);
    color: var(--text-primary);
}

.filter-btn.active {
    background-color: var(--primary-color);
    color: #0f172a;
}

/* Stats */
.stat-value {
    color: var(--primary-color);
}

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

/* Chart Elements */
.chart-bar {
    background: linear-gradient(180deg, var(--primary-color) 0%, var(--success-color) 100%);
}

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

/* Footer */
footer {
    background-color: var(--surface);
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
}

footer a {
    color: var(--primary-color);
}

/* Bookmark Icon */
.bookmark-btn {
    color: var(--text-secondary);
}

.bookmark-btn.bookmarked {
    color: var(--warning-color);
}

/* Loading Spinner */
.spinner {
    border-color: var(--border-color);
    border-top-color: var(--primary-color);
}

/* Tooltips */
.tooltip {
    background-color: var(--surface-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* Tables */
table {
    border-color: var(--border-color);
}

th {
    background-color: var(--surface-elevated);
    color: var(--text-primary);
}

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

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

/* KID MODE DARK OVERRIDES */
/* Maintain playfulness with dark backgrounds */

body.kid-mode {
    background: linear-gradient(135deg, #1e3a8a 0%, #581c87 100%);
}

.kid-mode .navbar {
    background: linear-gradient(135deg, #1e40af 0%, #6b21a8 100%);
    border-bottom: 2px solid var(--primary-color);
}

.kid-mode .hero {
    background: linear-gradient(135deg, #1e3a8a 0%, #4c1d95 100%);
    border: 3px solid var(--primary-color);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.kid-mode .card,
.kid-mode .topic-card,
.kid-mode .question-card {
    border: 3px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.kid-mode .btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.kid-mode .answer-letter {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    color: #ffffff;
}

.kid-mode .progress-fill {
    background: linear-gradient(90deg, #3b82f6 0%, #34d399 50%, #fbbf24 100%);
}

.kid-mode .topic-item.completed {
    background: linear-gradient(135deg, #065f46 0%, #047857 100%);
    border-left: 4px solid var(--success-color);
}

.kid-mode .topic-item.in-progress {
    background: linear-gradient(135deg, #78350f 0%, #92400e 100%);
    border-left: 4px solid var(--warning-color);
}

.kid-mode .kid-tips {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
    border-left: 4px solid #fbbf24;
}

/* ADULT MODE DARK OVERRIDES */
/* Maintain professionalism with clean dark styling */

body.adult-mode {
    background-color: #0f172a;
}

.adult-mode .navbar {
    background-color: #1e293b;
    border-bottom: 1px solid #334155;
}

.adult-mode .hero {
    background-color: #1e293b;
    border: 1px solid #334155;
}

.adult-mode .card,
.adult-mode .topic-card,
.adult-mode .question-card {
    background-color: #1e293b;
    border: 1px solid #334155;
}

.adult-mode .btn-primary {
    background-color: #3b82f6;
    color: #0f172a;
}

.adult-mode .topic-item.completed {
    background-color: #065f46;
    border-left: 3px solid #34d399;
}

.adult-mode .topic-item.in-progress {
    background-color: #78350f;
    border-left: 3px solid #fbbf24;
}

/* Scrollbar Styling for Dark Mode */
::-webkit-scrollbar {
    width: 12px;
    background-color: var(--background);
}

::-webkit-scrollbar-track {
    background-color: var(--surface);
}

::-webkit-scrollbar-thumb {
    background-color: var(--surface-elevated);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--divider-color);
}

/* Selection Color */
::selection {
    background-color: var(--primary-color);
    color: #0f172a;
}

::-moz-selection {
    background-color: var(--primary-color);
    color: #0f172a;
}

/* Print Styles - Force Light Mode for Printing */
@media print {
    body {
        background-color: #ffffff !important;
        color: #000000 !important;
    }

    .card, .navbar, .hero {
        background-color: #ffffff !important;
        color: #000000 !important;
        border-color: #cccccc !important;
    }
}