/* Shared Dracula/Alucard palette channel managed from the dashboard. */
:root {
    --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, monospace;
}

:root,
:root[data-theme="dracula"] {
    color-scheme: dark;
    --bg: #282a36;
    --bg-deep: #21222c;
    --bg-card: #1e2029;
    --bg-line: #313341;
    --cur-line: #44475a;
    --selection: #44475a;
    --fg: #f8f8f2;
    --comment: #6272a4;
    --cyan: #8be9fd;
    --green: #50fa7b;
    --orange: #ffb86c;
    --pink: #ff79c6;
    --purple: #bd93f9;
    --red: #ff5555;
    --yellow: #f1fa8c;
    --bg-panel: #343746;
    --header-bg: rgba(30, 32, 41, 0.85);
    --control-bg: rgba(49, 51, 65, 0.6);
    --card-gradient: linear-gradient(180deg, rgba(49, 51, 65, 0.35) 0%, rgba(30, 32, 41, 0.9) 100%);
    --tooltip-bg: #191a21;
    --shadow-color: rgba(0, 0, 0, 0.45);
}

:root[data-theme="alucard"] {
    color-scheme: light;
    --bg: #fffbeb;
    --bg-deep: #f1ecd6;
    --bg-card: #fff6d6;
    --bg-line: #e2deca;
    --bg-panel: #dedccf;
    --cur-line: #6c664b;
    --selection: #cfcfde;
    --fg: #1f1f1f;
    --comment: #6c664b;
    --cyan: #036a96;
    --green: #14710a;
    --orange: #a34d14;
    --pink: #a3144d;
    --purple: #644ac9;
    --red: #cb3a2a;
    --yellow: #846e15;
    --header-bg: rgba(255, 246, 214, 0.88);
    --control-bg: rgba(226, 222, 202, 0.72);
    --card-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 250, 240, 0.98) 100%);
    --tooltip-bg: #fff6d6;
    --shadow-color: rgba(108, 102, 75, 0.22);
}

::selection {
    background: var(--selection);
    color: var(--fg);
}

body {
    transition: background-color 0.18s ease, color 0.18s ease;
}

header {
    background: var(--header-bg) !important;
}

.card,
.kpi-card,
.status-banner,
.metric-card,
.chart-container,
.table-wrapper,
.log-panel,
.log-header,
.stats-bar,
.upload-drop,
.empty-state,
.run-card,
.sidebar {
    background: var(--card-gradient), var(--bg-card);
}

.nav-link,
.status-bar,
.year-tabs,
.view-tabs,
.period-toggle,
.chart-type-toggle,
.btn,
.export-btn {
    background-color: var(--control-bg);
}

.bar-tooltip,
.chartjs-tooltip {
    background: var(--tooltip-bg) !important;
    color: var(--fg) !important;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--control-bg);
    border: 1px solid var(--cur-line);
    color: var(--fg);
    padding: 0.4rem 0.9rem;
    border-radius: 99px;
    font-family: var(--font-ui);
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.theme-toggle:hover {
    border-color: var(--purple);
    transform: translateY(-1px);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

.theme-toggle-icon {
    width: 0.9rem;
    text-align: center;
}

:root[data-theme="alucard"] body {
    background:
        radial-gradient(1100px 500px at 85% -10%, rgba(100, 74, 201, 0.10), transparent 60%),
        radial-gradient(900px 450px at 5% -10%, rgba(203, 58, 42, 0.08), transparent 60%),
        var(--bg) !important;
}

:root[data-theme="alucard"] .nav-link:hover,
:root[data-theme="alucard"] .run-row:hover {
    background: rgba(207, 207, 222, 0.42) !important;
}