:root {
    color-scheme: light;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --background: #0d141b;
    --surface: #151e27;
    --surface-muted: #1b2631;
    --text: #edf2f7;
    --text-muted: #a6b2be;
    --border: #34414d;
    --shadow: 0 18px 45px rgb(0 0 0 / 28%);
    --shell-border: #34414d;
    --shell-text: #edf2f7;
    --shell-muted: #a6b2be;
    --shell-surface: #151e27;
    --ui-border: #34414d;
    --ui-border-strong: #465563;
    --ui-background: #0d141b;
    --ui-panel: #151e27;
    --ui-muted: #202c37;
    --ui-hover: #253544;
    --ui-selected: #29465a;
    --ui-text: #edf2f7;
    --ui-text-muted: #a6b2be;
    --mist-border: #34414d;
    --mist-border-light: #2a3540;
    --mist-background: #0d141b;
    --mist-panel: #151e27;
    --mist-muted: #a6b2be;
    --mist-text: #edf2f7;
    --mist-hover: #253544;
    --mist-selected: #29465a;
    --surface-subtle: #1b2631;
}

.theme-toggle {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--shell-border);
    border-radius: 50%;
    color: var(--shell-text);
    background: var(--ui-panel, #fff);
    cursor: pointer;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    border-color: var(--tenant-primary, #e85a32);
    background: var(--ui-hover, #edf4f8);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.theme-toggle-moon,
:root[data-theme="dark"] .theme-toggle-sun {
    display: none;
}

:root[data-theme="dark"] .theme-toggle-moon {
    display: block;
}

:root[data-theme="dark"] .blaulicht-app-body,
:root[data-theme="dark"] .shell-main,
:root[data-theme="dark"] .shell-content {
    background: #0d141b !important;
    color: var(--ui-text);
}

:root[data-theme="dark"] .shell-topbar,
:root[data-theme="dark"] .ui-page-toolbar,
:root[data-theme="dark"] .ui-tabs,
:root[data-theme="dark"] .page-heading {
    background: rgb(21 30 39 / 96%);
}

:root[data-theme="dark"] :is(
    .ui-panel,
    .data-panel,
    .ui-summary-strip,
    .status-grid,
    .status-card,
    .module-card,
    .information-panel,
    .suggestion-card,
    .shell-user-menu-panel,
    .topbar-department-menu,
    .ui-action-menu-content
) {
    color: var(--ui-text);
    background: var(--ui-panel);
    border-color: var(--ui-border);
}

:root[data-theme="dark"] :is(.ui-table, .ui-table tbody, .ui-table td) {
    color: var(--ui-text);
    background: var(--ui-panel);
    border-color: var(--ui-border);
}

:root[data-theme="dark"] .ui-table th {
    color: var(--ui-text-muted);
    background: #1b2631;
    border-color: var(--ui-border);
}

:root[data-theme="dark"] .ui-table tbody tr:hover td {
    background: var(--ui-hover);
}

:root[data-theme="dark"] :is(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    .ui-button,
    .ui-action-menu-trigger,
    .font-size-switcher
) {
    color: var(--ui-text);
    background: #111a23;
    border-color: var(--ui-border-strong);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
    color: #82909d;
}

:root[data-theme="dark"] :is(.ui-button-primary, .ui-tab.is-active) {
    color: #fff;
    background: var(--tenant-primary, #e85a32);
}

:root[data-theme="dark"] :is(.ui-check-option, .ui-form-actions, .suggestion-detail-meta > div, .suggestion-card__decision) {
    color: var(--ui-text);
    background: var(--ui-muted);
    border-color: var(--ui-border);
}

:root[data-theme="dark"] .topbar-department-menu button {
    color: var(--ui-text);
}

:root[data-theme="dark"] .topbar-department-menu button:hover {
    color: #fff;
    background: var(--ui-hover);
}

:root[data-theme="dark"] .topbar-suggestion-button {
    color: #ffd277;
    background: #352d18;
    border-color: #665429;
}

@media (max-width: 680px) {
    .theme-toggle {
        width: 31px;
        height: 31px;
    }
}