html, body {
    font-family: 'Changa', sans-serif;
    background-color: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
}

body {
    background-image: none;
}

:root {
    --app-matrix-legend-own-border: #ffb74d;
}

.app-theme-light {
    --app-matrix-border: #60656d;
    --app-matrix-scroll-shadow: 0 1px 4px rgb(0 0 0 / 12%);
    --app-matrix-table-bg: #fff;
    --app-matrix-header-fg: #ffffff;
    --app-matrix-header-button-fg: #13305f;
    --app-matrix-header-button-border: #13305f;
    --app-matrix-header-button-bg: #ffffff;
    --app-matrix-header-button-hover-bg: #edf2fb;
    --app-matrix-header-button-focus: #13305f;
    --app-matrix-event-header-fg: #1a1d26;
    --app-matrix-phase-bg: #e9edf5;
    --app-matrix-phase-fg: #1a237e;
    --app-matrix-phase-meta-fg: #4e5f78;
    --app-matrix-group-bg: #2f343d;
    --app-matrix-group-fg: #ffffff;
    --app-matrix-volunteer-name-fg: #1a1a2e;
    --app-matrix-icon-light: #fff;
    --app-matrix-icon-declined: #c62828;
    --app-matrix-pill-count-fg: #fff;
    --app-matrix-pill-open-bg: #2e7d32;
    --app-matrix-pill-full-bg: #c62828;
    --app-matrix-pill-unlimited-bg: #9e9e9e;
    --app-matrix-pill-group-active-bg: #fff;
    --app-matrix-pill-group-active-fg: #1f2328;
    --app-matrix-pill-group-empty-bg: #5f6670;
    --app-matrix-pill-group-empty-fg: #fff;
    --app-matrix-legend-fg: #546e7a;
    --app-matrix-legend-accepted-bg: #2e7d32;
    --app-matrix-legend-declined-bg: #fff;
    --app-matrix-legend-declined-border: #c62828;
    --app-matrix-legend-unsure-bg: #ed6c02;
    --app-matrix-legend-none-bg: #fff;
    --app-matrix-legend-none-border: #60656d;
    --app-matrix-legend-own-bg: #fff3e0;
    --app-matrix-legend-locked-bg: #d9dde3;
    --app-matrix-legend-locked-border: #aeb6c2;
    --app-matrix-theme-track-bg: rgba(0, 0, 0, 0.38);
    --app-matrix-theme-thumb-bg: #fafafa;
    --app-mylink-box-bg: #f0f4ff;
    --app-mylink-box-border: #c5cae9;
    --app-mylink-text: #1a237e;
}

.app-theme-dark {
    --app-matrix-border: rgba(255, 255, 255, 0.12);
    --app-matrix-scroll-shadow: none;
    --app-matrix-table-bg: #1e1e1e;
    --app-matrix-header-fg: rgba(255, 255, 255, 0.87);
    --app-matrix-header-button-fg: rgba(255, 255, 255, 0.87);
    --app-matrix-header-button-border: rgba(255, 255, 255, 0.23);
    --app-matrix-header-button-bg: rgba(255, 255, 255, 0.04);
    --app-matrix-header-button-hover-bg: rgba(255, 255, 255, 0.08);
    --app-matrix-header-button-focus: rgba(255, 255, 255, 0.87);
    --app-matrix-event-header-fg: rgba(255, 255, 255, 0.87);
    --app-matrix-phase-bg: #2b3442;
    --app-matrix-phase-fg: #dce6ff;
    --app-matrix-phase-meta-fg: rgba(255, 255, 255, 0.7);
    --app-matrix-group-bg: #23262d;
    --app-matrix-group-fg: rgba(255, 255, 255, 0.87);
    --app-matrix-volunteer-name-fg: rgba(255, 255, 255, 0.87);
    --app-matrix-icon-light: rgba(255, 255, 255, 0.87);
    --app-matrix-icon-declined: #ea8f8f;
    --app-matrix-pill-count-fg: rgba(255, 255, 255, 0.87);
    --app-matrix-pill-open-bg: #3a5b3b;
    --app-matrix-pill-full-bg: #552f2f;
    --app-matrix-pill-unlimited-bg: #343434;
    --app-matrix-pill-group-active-bg: #1e1e1e;
    --app-matrix-pill-group-active-fg: rgba(255, 255, 255, 0.87);
    --app-matrix-pill-group-empty-bg: #2c2c2c;
    --app-matrix-pill-group-empty-fg: rgba(255, 255, 255, 0.87);
    --app-matrix-legend-fg: rgba(255, 255, 255, 0.6);
    --app-matrix-legend-accepted-bg: #3a5b3b;
    --app-matrix-legend-declined-bg: #1e1e1e;
    --app-matrix-legend-declined-border: #ea8f8f;
    --app-matrix-legend-unsure-bg: #5a4228;
    --app-matrix-legend-none-bg: #1e1e1e;
    --app-matrix-legend-none-border: rgba(255, 255, 255, 0.12);
    --app-matrix-legend-own-bg: rgba(255, 183, 77, 0.16);
    --app-matrix-legend-locked-bg: #2c2c2c;
    --app-matrix-legend-locked-border: rgba(255, 255, 255, 0.12);
    --app-matrix-theme-track-bg: rgba(255, 255, 255, 0.3);
    --app-matrix-theme-thumb-bg: #bdbdbd;
    --app-mylink-box-bg: #1a1f36;
    --app-mylink-box-border: rgba(255, 255, 255, 0.12);
    --app-mylink-text: rgba(255, 255, 255, 0.87);
}

#blazor-error-ui {
    background: #fde8e8;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.page-muted-text {
    color: var(--mud-palette-text-secondary);
}

.color-picker-input {
    width: 56px;
    height: 40px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    padding: 4px;
    cursor: pointer;
}

.file-upload-trigger {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
}

.file-upload-input {
    display: none;
}

.mud-paper,
.mud-card,
.mud-dialog,
.mud-popover,
.mud-menu,
.mud-table {
    box-shadow: none !important;
}

.dev-mode-footer {
    margin-top: 24px;
    margin-bottom: 8px;
}

.dev-mode-footer-inner {
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 45%, transparent);
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, var(--mud-palette-surface) 88%);
    color: var(--mud-palette-text-primary);
    font-size: 0.9rem;
}

.dev-mode-footer-inner code {
    color: inherit;
    font-size: 0.9em;
}

.app-theme-dark .mud-popover .mud-list-item,
.app-theme-dark .mud-popover .mud-list-item-text,
.app-theme-dark .mud-popover .mud-list-item-text p,
.app-theme-dark .mud-popover .mud-list-item-text span {
    color: var(--mud-palette-text-primary) !important;
}

.app-theme-dark .mud-popover .mud-selected-item,
.app-theme-dark .mud-popover .mud-list-item.mud-selected-item,
.app-theme-dark .mud-popover .mud-list-item[aria-selected="true"] {
    background: rgba(167, 183, 204, 0.24) !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

.app-theme-dark .mud-popover .mud-selected-item,
.app-theme-dark .mud-popover .mud-list-item.mud-selected-item,
.app-theme-dark .mud-popover .mud-list-item[aria-selected="true"],
.app-theme-dark .mud-popover .mud-selected-item *,
.app-theme-dark .mud-popover .mud-list-item.mud-selected-item *,
.app-theme-dark .mud-popover .mud-list-item[aria-selected="true"] *,
.app-theme-dark .mud-popover .mud-selected-item .mud-list-item-text,
.app-theme-dark .mud-popover .mud-list-item.mud-selected-item .mud-list-item-text,
.app-theme-dark .mud-popover .mud-list-item[aria-selected="true"] .mud-list-item-text,
.app-theme-dark .mud-popover .mud-selected-item .mud-list-item-text p,
.app-theme-dark .mud-popover .mud-list-item.mud-selected-item .mud-list-item-text p,
.app-theme-dark .mud-popover .mud-list-item[aria-selected="true"] .mud-list-item-text p,
.app-theme-dark .mud-popover .mud-selected-item .mud-list-item-text span,
.app-theme-dark .mud-popover .mud-list-item.mud-selected-item .mud-list-item-text span,
.app-theme-dark .mud-popover .mud-list-item[aria-selected="true"] .mud-list-item-text span {
    color: #ffffff !important;
    fill: #ffffff !important;
    opacity: 1 !important;
}

/* Hilfe-Seiten – Screenshot-Bilder */
.help-screenshot {
    max-width: 100%;
    height: auto;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    margin: 8px 0 16px;
    display: block;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.app-theme-dark .help-screenshot {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}