/* ===== Dark Mode Theme ===== */

[data-theme="dark"] {
    --primary: #38a3a5;
    --primary-dark: #2c7a7b;
    --secondary: #14b8a6;
    --success: #48bb78;
    --warning: #ed8936;
    --danger: #e53e3e;
    --light: #0b1120;
    --dark: #e2e8f0;
    --gray: #94a3b8;
    --border: #1e293b;

    --md-bg: #0b1120;
    --md-card: #131c31;
    --md-primary: #2dd4bf;
    --md-primary-dark: #14b8a6;
    --md-accent: #2dd4bf;
    --md-heading: #f1f5f9;
    --md-muted: #94a3b8;
    --md-border: #1e293b;
    --md-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
    --md-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --nav-bg: #0f172a;
    --card-grad: linear-gradient(180deg, #131c31 0%, #0f172a 100%);
    --card-accent-grad: linear-gradient(180deg, rgba(148, 163, 184, 0.06), rgba(148, 163, 184, 0.18));
    color-scheme: dark;
}

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

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 {
    color: var(--md-heading);
}

/* Navbar */
[data-theme="dark"] .navbar {
    background: var(--nav-bg);
}

[data-theme="dark"] .nav-dropdown-menu {
    background: #131c31;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .nav-dropdown-menu a {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .nav-dropdown-menu a:hover {
    background: rgba(45, 212, 191, 0.1);
    color: #2dd4bf !important;
}

[data-theme="dark"] .nav-theme-toggle,
[data-theme="dark"] .navbar .nav-theme-toggle {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
}

[data-theme="dark"] .nav-theme-toggle:hover,
[data-theme="dark"] .navbar .nav-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.22);
}

.nav-theme-toggle {
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.35rem 0.6rem;
    line-height: 1;
    transition: background 0.2s;
}

.nav-theme-toggle:hover {
    background: rgba(0, 0, 0, 0.12);
}

/* Cards */
[data-theme="dark"] .card {
    background: var(--card-grad);
    border-color: var(--md-border);
    box-shadow: var(--md-shadow);
}

[data-theme="dark"] .card::after {
    background: var(--card-accent-grad);
}

[data-theme="dark"] .card-header {
    color: var(--md-heading);
    border-bottom-color: var(--md-border);
}

/* Tables */
[data-theme="dark"] table {
    background: var(--md-card);
    color: var(--dark);
}

[data-theme="dark"] th {
    background: #0f172a;
    color: #cbd5e1;
}

[data-theme="dark"] td {
    border-bottom-color: var(--md-border);
}

[data-theme="dark"] tr:hover,
[data-theme="dark"] tbody tr:hover {
    background: #1e293b;
}

[data-theme="dark"] .table-wrap {
    border-color: var(--md-border);
}

[data-theme="dark"] .table-wrap th {
    background: #0f172a;
    color: var(--md-muted);
}

[data-theme="dark"] .table-wrap tbody tr:hover {
    background: rgba(45, 212, 191, 0.08);
}

/* Form controls */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .month-toolbar .month-picker,
[data-theme="dark"] .month-toolbar select,
[data-theme="dark"] .filter-form select,
[data-theme="dark"] .filter-form input[type="date"],
[data-theme="dark"] .filter-form input[type="month"] {
    background: #0f172a;
    color: var(--dark);
    border-color: #334155;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    border-color: var(--accent, var(--md-accent));
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15);
}

[data-theme="dark"] option {
    background: #0f172a;
    color: #e2e8f0;
}

[data-theme="dark"] select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}

/* Stat cards */
[data-theme="dark"] .stat-card {
    background: var(--card-grad);
    border-color: var(--md-border);
    box-shadow: var(--md-shadow);
}

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

/* Buttons */
[data-theme="dark"] .month-toolbar .btn-outline,
[data-theme="dark"] .btn-outline {
    background: #0f172a;
    color: var(--md-heading);
    border-color: var(--md-border);
}

[data-theme="dark"] .month-toolbar .btn-outline:hover,
[data-theme="dark"] .btn-outline:hover {
    background: #1e293b;
    border-color: var(--md-accent);
    color: var(--md-primary);
}

[data-theme="dark"] .btn-info {
    background: #0ea5e9;
    color: white;
}

/* Alerts */
[data-theme="dark"] .alert-success { background: #052e16; color: #bbf7d0; }
[data-theme="dark"] .alert-error { background: #450a0a; color: #fecaca; }
[data-theme="dark"] .alert-warning { background: #431407; color: #fed7aa; }

/* Modals */
[data-theme="dark"] .modal-content {
    background: var(--md-card);
    color: var(--dark);
    border-color: var(--md-border);
}

[data-theme="dark"] .modal-content input,
[data-theme="dark"] .modal-content select,
[data-theme="dark"] .modal-content textarea {
    background: #0f172a;
    color: var(--dark);
}

/* Code */
[data-theme="dark"] code {
    background: #0f172a;
    color: #a5f3fc;
}

/* Heat map legend / summary */
[data-theme="dark"] .summary-big {
    color: var(--md-heading);
}

/* Login page */
[data-theme="dark"] .login-card {
    background: #131c31;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

/* Footer */
[data-theme="dark"] footer {
    color: #64748b !important;
    border-top-color: var(--md-border) !important;
}

/* Pagination / misc muted text */
[data-theme="dark"] .pagination-info,
[data-theme="dark"] .viewing-label,
[data-theme="dark"] .subtitle,
[data-theme="dark"] .stat-label {
    color: var(--md-muted);
}

/* Tabs */
[data-theme="dark"] .tab {
    color: var(--md-muted);
}

[data-theme="dark"] .tab.active {
    color: var(--md-primary);
}

/* Question count / table filters */
[data-theme="dark"] #question-count {
    color: #94a3b8;
}