/* Dark colors are semantic; original declaration fallbacks preserve light mode. */
:root[data-theme="dark"] {
    --theme-blue-text: #82b7ff;
    --theme-blue-bg: #192c46;
    --theme-blue-border: #477db8;
    --theme-blue-solid: #1264b5;
    --theme-cyan-text: #8dccdf;
    --theme-cyan-bg: #17313a;
    --theme-cyan-border: #3b7180;
    --theme-purple-text: #c4acf0;
    --theme-purple-bg: #30253f;
    --theme-purple-border: #786097;
    --theme-chrome: #080808;
    --theme-surface: #101010;
    --theme-surface-2: #191919;
    --theme-text: #ededed;
    --theme-muted: #a3a3a3;
    --theme-border: #333333;
    --theme-border-light: #242424;
    --theme-solid: #383838;
    --theme-button-primary: #0066ff;
    --theme-button-primary-hover: #0057db;
    --theme-control: #656565;
    --theme-on-solid: #f5f5f5;
    --theme-on-solid-border: rgb(255 255 255 / 30%);
    --theme-hover-overlay: rgb(255 255 255 / 8%);
    --theme-shadow: rgb(0 0 0 / 25%);
    --theme-success-bg: #10241a;
    --theme-success-text: #91d1b2;
    --theme-success-border: #53675b;
    --theme-success-solid: #384c3f;
    --theme-warning-bg: #322d22;
    --theme-warning-text: #d4c39e;
    --theme-warning-border: #706347;
    --theme-warning-solid: #524630;
    --theme-danger-bg: #342727;
    --theme-danger-text: #d9b0ad;
    --theme-danger-border: #775754;
    --theme-danger-solid: #684340;
}
/* Higher specificity than admin.css's light root definitions, regardless of load order. */
:root[data-theme="dark"] {
    --navy: var(--theme-chrome);
    --navy-2: var(--theme-chrome);
    --page: #080808;
    --surface: var(--theme-surface);
    --surface-2: var(--theme-surface-2);
    --text: var(--theme-text);
    --muted: var(--theme-muted);
    --border: var(--theme-border);
    --border-light: var(--theme-border-light);
    --accent: var(--theme-blue-text);
    --accent-dark: #afd0ff;
    --success-bg: var(--theme-success-bg);
    --success-text: var(--theme-success-text);
    --warning-bg: var(--theme-warning-bg);
    --warning-text: var(--theme-warning-text);
    --danger-bg: var(--theme-danger-bg);
    --danger-text: var(--theme-danger-text);
    --neutral-bg: var(--theme-surface-2);
    --neutral-text: var(--theme-muted);
    background: var(--page);
    color: var(--text);
    color-scheme: dark;
}
html[data-theme="dark"] body { background-color: var(--page); }
html[data-theme="dark"] :is(input, select, textarea) { background-color: var(--surface); color: var(--text); accent-color: #b0b0b0; }
html[data-theme="dark"] ::placeholder { color: #a0a0a0; opacity: 1; }
/* Preserve the light theme's action hierarchy without coloring page surfaces. */
html[data-theme="dark"] :is(button, .button, .fab-create),
html[data-theme="dark"] .unified-filter-panel .unified-filter-actions :is(button, .button) {
    background-color: var(--theme-button-primary);
    border-color: var(--theme-button-primary);
    color: #ffffff;
}
html[data-theme="dark"] :is(button, .button, .fab-create):hover,
html[data-theme="dark"] .unified-filter-panel .unified-filter-actions :is(button, .button):hover {
    background-color: var(--theme-button-primary-hover);
    border-color: var(--theme-button-primary-hover);
    color: #ffffff;
}
html[data-theme="dark"] .button-secondary,
html[data-theme="dark"] .unified-filter-panel .unified-filter-actions .button-secondary {
    background-color: #141414;
    border-color: #363636;
    color: var(--text);
}
html[data-theme="dark"] .button-secondary:hover,
html[data-theme="dark"] .unified-filter-panel .unified-filter-actions .button-secondary:hover {
    background-color: #242424;
    border-color: #505050;
    color: #ffffff;
}
html[data-theme="dark"] .button-danger { background-color: #a33f39; border-color: #c46e68; color: #ffffff; }
html[data-theme="dark"] .button-danger:hover { background-color: #913630; border-color: #c46e68; }
html[data-theme="dark"] :is(.toggle-button, .nav-logout, .icon-button, .account-button),
html[data-theme="dark"] .navigation-feedback button { background: transparent; border-color: var(--border); color: var(--text); }
html[data-theme="dark"] :is(.nav-logout, .icon-button, .account-button):hover,
html[data-theme="dark"] .navigation-feedback button:hover { background: var(--surface-2); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .toggle-button:hover { background: transparent; border-color: transparent; }
html[data-theme="dark"] .toggle-thumb { background: #f5f5f5; }
html[data-theme="dark"] .toggle-button.is-active .toggle-track { background: var(--theme-button-primary); }
html[data-theme="dark"] .fab-create { box-shadow: none; }
html[data-theme="dark"] .navigation-feedback:not([data-error]) { background: rgb(0 0 0 / 55%); }
html[data-theme="dark"] .navigation-feedback:not([data-error]) .navigation-feedback__indicator { border-color: rgb(255 255 255 / 30%); border-top-color: #fff; }
html[data-theme="dark"] :focus-visible { outline: 2px solid #c7c7c7; outline-offset: 3px; }
html .theme-control { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: inherit; font: 12px/1.4 system-ui, sans-serif; white-space: nowrap; }
html .theme-control select { width: auto; min-width: 100px; min-height: 34px; margin: 0; padding: 5px 8px; border: 1px solid #777; border-radius: 5px; background: #fff; color: #222; font: inherit; cursor: pointer; }
html .login-card > .theme-control { display: flex; justify-content: flex-end; margin-bottom: 20px; }


html[data-theme="dark"] .theme-control select { background: var(--surface); color: var(--text); border-color: var(--border); }

/* Appearance is a persistent sidebar setting; the native popover escapes clipping. */
html .sidebar-theme { flex: 0 0 auto; }
html .sidebar .theme-menu-button {
    background: transparent; color: var(--muted); border: 0;
    border-left: 3px solid transparent; border-radius: 4px; cursor: pointer;
}
html .sidebar .theme-menu-button:hover {
    background: var(--theme-blue-bg, #eef5fc); color: var(--accent); border-left-color: var(--accent);
}
html .theme-settings-panel {
    position: fixed; inset: auto auto 94px 72px; margin: 0; width: 240px;
    padding: 18px; border: 1px solid var(--border, #d5d9e0); border-radius: 8px;
    background: var(--surface, #fff); color: var(--text, #182233);
    box-shadow: 0 8px 24px rgb(0 0 0 / 20%);
}
html .theme-settings-panel strong { display: block; margin-bottom: 14px; font-size: 14px; }
html .theme-settings-panel .theme-control { display: flex; justify-content: space-between; }
html .theme-settings-panel select { min-width: 130px; }
@media (min-width: 761px) {
    html .sidebar:has(.sidebar-theme) { bottom: 72px; overflow-y: auto; }
    html .sidebar:has(.sidebar-theme):has(.sidebar-logout) { bottom: 160px; }
    html .sidebar-theme {
        position: fixed; left: 0; bottom: 0; height: 72px;
        width: var(--sidebar-open-width); padding: 7px 4px;
        background: var(--surface); border-top: 1px solid var(--border);
        border-right: 1px solid var(--border); z-index: 19;
    }
    html .sidebar:has(.sidebar-logout) .sidebar-theme { bottom: 88px; }
}
@media (max-width: 760px) {
    html .sidebar:has(.sidebar-theme) { padding-right: 84px; }
    html .sidebar-theme {
        position: fixed; right: 0; bottom: 0; width: 76px; height: 68px;
        padding: 4px; background: var(--surface); border-left: 1px solid var(--border); z-index: 20;
    }
    html .sidebar-theme .nav-icon { min-width: 0; min-height: 58px; }
    html .theme-settings-panel { inset: auto 12px 80px auto; max-width: calc(100vw - 24px); }
}

/* Reference-inspired dark tables. Keep data widths and comparison-grid density. */
html[data-theme="dark"] body.admin-shell .table-wrap {
    background: #181818;
    border-color: var(--border);
    border-radius: 10px;
}
html[data-theme="dark"] body.admin-shell table > thead > tr > th {
    background: #202020;
    color: var(--text);
    font-weight: 700;
    border-right: 0;
    border-bottom: 1px solid #3a3a3a;
}
html[data-theme="dark"] body.admin-shell table > tbody > tr { background: #181818; }
html[data-theme="dark"] body.admin-shell table > tbody > tr:nth-child(odd) { background: #1b1b1b; }
html[data-theme="dark"] body.admin-shell table > tbody > tr:hover { background: #262626; }
html[data-theme="dark"] body.admin-shell table > tbody > tr > td {
    border-bottom: 1px solid #303030;
}
html[data-theme="dark"] body.admin-shell:not(.metric-comparison-page) :is(th, td) {
    padding: 8px 10px;
}
html[data-theme="dark"] body.admin-shell :is(.badge, span.target) {
    border-radius: 999px;
    padding: 3px 10px;
    font-weight: 600;
}
html[data-theme="dark"] body.admin-shell .pagination {
    padding: 16px 0;
    color: var(--muted);
}
@media (max-width: 760px) {
    html[data-theme="dark"] body.admin-shell:not(.metric-comparison-page) :is(th, td) {
        padding: 8px 10px;
    }
}