html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

#app {
    height: 100%;
}

h1:focus {
    outline: none;
}

a:not(.mud-compat-navlink), .btn-link {
    color: #ED2024;
}

.btn-primary {
    color: #fff;
    background-color: #ED2024;
    border-color: #ED2024;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    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;
    color: #000;
}

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

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

/* Designer Mode Styles */
.designer-hotspot {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 150px;
    height: 150px;
    z-index: 9998;
    /* Invisible but interactive */
    background: transparent;
    cursor: default;
}

.designer-button {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.8);
    padding: 10px 20px;
    border-radius: 8px;
    transition: opacity 0.3s ease;
}

.designer-button button {
    background: #ffcc00;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    color: #000;
    font-size: 14px;
}

.designer-button button:hover {
    background: #ffdd33;
}

.designer-active .display-item {
    cursor: pointer;
}

.display-item.designer-draggable:hover {
    outline: 2px dashed rgba(255, 204, 0, 0.5);
    outline-offset: 2px;
}

.display-item.designer-selected {
    outline: 3px solid #ffcc00;
    outline-offset: 2px;
    cursor: move;
}

.designer-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 350px;
    height: 100vh;
    background: rgba(0, 0, 0, 0.95);
    color: white;
    z-index: 10000;
    overflow-y: auto;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.5);
}

.designer-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #1a1a1a;
    border-bottom: 2px solid #ffcc00;
}

.designer-panel-header strong {
    font-size: 18px;
    color: #ffcc00;
}

.designer-panel-header button {
    background: transparent;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 5px 10px;
}

.designer-panel-header button:hover {
    color: #ffcc00;
}

.designer-panel-body {
    padding: 20px;
}

.property-group {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #333;
}

.property-group:last-child {
    border-bottom: none;
}

.property-group > label {
    display: block;
    font-weight: bold;
    margin-bottom: 12px;
    color: #ffcc00;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.property-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.property-row span {
    font-size: 13px;
    color: #ccc;
}

.property-row input[type="number"],
.property-row input[type="color"],
.property-row input[type="text"],
.property-row select {
    width: 100%;
    padding: 6px 10px;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 4px;
    color: white;
    font-size: 13px;
}

.property-row input[type="color"] {
    height: 35px;
    padding: 2px;
    cursor: pointer;
}

/* Mud compatibility layer (ShowBoard Radzen migration) */
:root {
    /* Dialog-Stack global anheben: Dialog > Overlay > Rest der App */
    --rz-dialog-mask-zindex: 3550;
    --rz-dialog-zindex: 3560;
}

.theme-light,
body.theme-light {
    --sb-bg: #f6f8fc;
    --sb-bg-alt: #edf2fb;
    --sb-surface: #ffffff;
    --sb-surface-alt: #f7faff;
    --sb-border: #dbe3ef;
    --sb-text: #111827;
    --sb-text-muted: #5c6778;
    --sb-appbar-bg: linear-gradient(90deg, #ffffff 0%, #f4f7fd 100%);
    --sb-drawer-bg: linear-gradient(180deg, #fdfefe 0%, #f2f6fc 100%);
    --sb-nav-hover: #fff1f2;
    --sb-nav-active: #ffe6e8;
    --sb-button-bg: #ffffff;
    --sb-button-text: #111827;
    --sb-input-bg: #ffffff;
    --sb-accent: #ED2024;
    --sb-accent-strong: #c61a1e;
    --sb-link: #ED2024;
    --sb-info: #6d6d6d;
    --sb-info-button: #5f5f5f;
    --sb-progress: #ED2024;
    --sb-alert-info-bg: #f4f4f4;
    --sb-alert-info-border: #d8d8d8;
    --sb-alert-success-bg: #edf9ef;
    --sb-alert-success-border: #bde6c3;
    --sb-alert-warning-bg: #fff9ec;
    --sb-alert-warning-border: #ffe0a6;
    --sb-alert-error-bg: #fff0f0;
    --sb-alert-error-border: #ffcaca;
    --sb-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.theme-dark,
body.theme-dark {
    --sb-bg: #121212;
    --sb-bg-alt: #161616;
    --sb-surface: #1E1E1E;
    --sb-surface-alt: #252525;
    --sb-border: #333333;
    --sb-text: rgba(255, 255, 255, 0.92);
    --sb-text-muted: rgba(255, 255, 255, 0.65);
    --sb-appbar-bg: #1E1E1E;
    --sb-drawer-bg: #2D2D2D;
    --sb-nav-hover: #3a3a3a;
    --sb-nav-active: #4a2a2c;
    --sb-button-bg: #2b2b2b;
    --sb-button-text: rgba(255, 255, 255, 0.92);
    --sb-input-bg: #232323;
    --sb-accent: #ED2024;
    --sb-accent-strong: #c61a1e;
    --sb-link: #ff6b6f;
    --sb-info: #9e9e9e;
    --sb-info-button: #5e5e5e;
    --sb-progress: #ED2024;
    --sb-alert-info-bg: #2c2c2c;
    --sb-alert-info-border: #454545;
    --sb-alert-success-bg: #223126;
    --sb-alert-success-border: #3f5f48;
    --sb-alert-warning-bg: #372d1f;
    --sb-alert-warning-border: #635039;
    --sb-alert-error-bg: #3a2122;
    --sb-alert-error-border: #734347;
    --sb-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
}

.mud-compat-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    grid-template-rows: auto 1fr;
    height: 100vh;
    min-height: 100vh;
    background: linear-gradient(180deg, var(--sb-bg) 0%, var(--sb-bg-alt) 100%);
    color: var(--sb-text);
    transition: grid-template-columns 0.2s ease;
    overflow: hidden;
}

.mud-compat-layout.drawer-open {
    grid-template-columns: 280px 1fr;
}

.mud-compat-layout.drawer-closed {
    grid-template-columns: 0 1fr;
}

.mud-compat-layout.drawer-closed .mud-compat-main {
    grid-column: 1 / -1;
}

.mud-compat-appbar {
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: var(--sb-appbar-bg);
    border-bottom: 1px solid var(--sb-border);
    color: var(--sb-text);
    backdrop-filter: blur(8px);
}

.mud-compat-drawer {
    grid-row: 2;
    border-right: 1px solid var(--sb-border);
    padding: 0.5rem;
    background: var(--sb-drawer-bg);
    color: var(--sb-text);
    min-height: 0;
    height: 100%;
    max-height: none;
    overflow: hidden;
}

.mud-compat-layout.drawer-closed .mud-compat-drawer {
    border-right: none;
    padding: 0;
}

.mud-compat-main {
    grid-row: 2;
    padding: 0.5rem 0.75rem 2rem;
    color: var(--sb-text);
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.mud-compat-container {
    width: 100%;
}

.sb-page-container {
    padding: clamp(0.65rem, 1.8vw, 1rem) clamp(0.65rem, 2.6vw, 2rem);
}

.mud-compat-paper,
.mud-compat-card {
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: 10px;
    color: var(--sb-text);
}

.mud-compat-paper {
    box-shadow: var(--sb-shadow);
}

.mud-compat-grid {
    --mud-grid-gap: 0.75rem;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--mud-grid-gap);
    align-items: stretch;
}

.mud-compat-item {
    --mud-item-cols: var(--mud-cols-xs, 12);
    grid-column: span var(--mud-item-cols);
    min-width: 0;
}

@media (min-width: 600px) {
    .mud-compat-item {
        --mud-item-cols: var(--mud-cols-sm, var(--mud-cols-xs, 12));
    }
}

@media (min-width: 960px) {
    .mud-compat-item {
        --mud-item-cols: var(--mud-cols-md, var(--mud-cols-sm, var(--mud-cols-xs, 12)));
    }
}

@media (min-width: 1280px) {
    .mud-compat-item {
        --mud-item-cols: var(--mud-cols-lg, var(--mud-cols-md, var(--mud-cols-sm, var(--mud-cols-xs, 12))));
    }
}

.mud-compat-navmenu {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    height: 100%;
    min-height: 0;
}

.showboard-nav-menu {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: clamp(0.5rem, 1.3vh, 1rem);
}

.showboard-nav-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding-right: 0;
}

.showboard-display-section {
    margin-top: 0.35rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--sb-border);
}

.showboard-display-heading {
    opacity: 0.78;
    letter-spacing: 0.02em;
}

.showboard-display-navlink {
    position: relative;
}

.showboard-display-navlink + .showboard-display-navlink {
    margin-top: 0.15rem;
}

.showboard-display-navlink + .showboard-display-navlink::before {
    content: "";
    position: absolute;
    left: 0.6rem;
    right: 0.6rem;
    top: -0.08rem;
    border-top: 1px solid var(--sb-border);
    opacity: 0.9;
}

.showboard-nav-footer {
    flex: 0 0 auto;
    margin-top: auto;
    border-top: 1px solid var(--sb-border);
    padding-top: 0.45rem;
    padding-bottom: clamp(0.35rem, 1vh, 0.8rem);
}

.showboard-nav-footer-label {
    font-weight: 500;
    color: var(--sb-text);
}

.showboard-nav-menu .mud-compat-navlink {
    padding-top: clamp(0.28rem, 0.7vh, 0.42rem);
    padding-bottom: clamp(0.28rem, 0.7vh, 0.42rem);
    font-size: clamp(0.78rem, 1.35vh, 0.9rem);
    line-height: 1.2;
}

.showboard-display-link {
    display: flex;
    flex-direction: column;
    line-height: 1.12;
    gap: 1px;
}

.showboard-display-type {
    font-size: clamp(0.72rem, 1.2vh, 0.84rem);
}

.showboard-display-name {
    font-size: clamp(0.68rem, 1.05vh, 0.8rem);
    opacity: 0.82;
}

.mud-compat-navlink {
    display: flex;
    align-items: center;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    text-decoration: none;
    color: var(--sb-text);
    border: 1px solid transparent;
}

.mud-compat-navlink:hover {
    background: var(--sb-nav-hover);
}

.mud-compat-navlink.active {
    background: var(--sb-nav-active);
    border-color: var(--sb-border);
}

.mud-compat-navlink-button {
    width: 100%;
    text-align: left;
    background: transparent;
}

.mud-compat-divider {
    border: none;
    border-top: 1px solid var(--sb-border);
    margin: 0.4rem 0;
}

.mud-compat-button,
.mud-compat-icon-button,
.mud-compat-menu-item {
    border: 1px solid var(--sb-border);
    border-radius: 6px;
    background: var(--sb-button-bg);
    color: var(--sb-button-text);
    cursor: pointer;
}

.mud-compat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.mud-compat-icon-size-small { font-size: 16px; }
.mud-compat-icon-size-medium { font-size: 20px; }
.mud-compat-icon-size-large { font-size: 28px; }

.mud-compat-icon .rz-icon,
.mud-compat-icon .rzi {
    font-size: inherit;
}

.mud-compat-button:disabled,
.mud-compat-icon-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.mud-compat-icon-button {
    padding: 0.25rem 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mud-compat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 999px;
    padding: 0.12rem 0.5rem;
    font-size: 0.75rem;
    border: 1px solid var(--sb-border);
    background: var(--sb-surface-alt);
    color: var(--sb-text);
}

.mud-compat-alert {
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    border: 1px solid transparent;
}

.mud-compat-alert-info {
    background: var(--sb-alert-info-bg);
    border-color: var(--sb-alert-info-border);
}

.mud-compat-alert-success {
    background: var(--sb-alert-success-bg);
    border-color: var(--sb-alert-success-border);
}

.mud-compat-alert-warning {
    background: var(--sb-alert-warning-bg);
    border-color: var(--sb-alert-warning-border);
}

.mud-compat-alert-error {
    background: var(--sb-alert-error-bg);
    border-color: var(--sb-alert-error-border);
}

.mud-compat-progress-linear {
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--sb-surface-alt);
}

.mud-compat-progress-linear-bar {
    width: 40%;
    height: 100%;
    background: var(--sb-progress);
    animation: mud-compat-progress 1.1s linear infinite;
}

.mud-compat-progress-circular {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 2px solid #d8d8d8;
    border-top-color: var(--sb-progress);
    animation: mud-compat-spin 0.9s linear infinite;
}

.mud-compat-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mud-compat-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--sb-text);
}

.mud-compat-input-wrap {
    display: flex;
    align-items: center;
    border: 1px solid var(--sb-border);
    border-radius: 6px;
    background: var(--sb-input-bg);
}

.mud-compat-input {
    width: 100%;
    border: 1px solid var(--sb-border);
    border-radius: 6px;
    padding: 0.4rem 0.55rem;
    font-size: 0.9rem;
    background: var(--sb-input-bg);
    color: var(--sb-text);
}

.mud-compat-input-wrap .mud-compat-input {
    border: none;
}

.mud-compat-field select.mud-compat-input {
    appearance: none;
    cursor: pointer;
}

.mud-compat-select-wrap {
    position: relative;
    gap: 0;
}

.mud-compat-select-input {
    padding-right: 1.9rem !important;
}

.mud-compat-select-input:disabled {
    cursor: not-allowed;
}

.mud-compat-select-input option {
    background: var(--sb-surface);
    color: var(--sb-text);
}

.theme-dark .mud-compat-select-input,
body.theme-dark .mud-compat-select-input {
    color-scheme: dark;
}

.theme-light .mud-compat-select-input,
body.theme-light .mud-compat-select-input {
    color-scheme: light;
}

.mud-compat-select-arrow {
    position: absolute;
    right: 0.45rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sb-text-muted);
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mud-compat-adornment {
    border: none;
    background: transparent;
    padding: 0 0.35rem;
}

.mud-compat-helper {
    font-size: 0.72rem;
    color: var(--sb-text-muted);
}

.mud-compat-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.mud-compat-dialog {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--sb-text, rgba(255, 255, 255, 0.92));
}

.mud-compat-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Radzen Dialoge/Overlays im Showboard-Theme halten */
.rz-dialog-mask {
    z-index: var(--rz-dialog-mask-zindex, 3550) !important;
}

.rz-dialog-wrapper {
    z-index: var(--rz-dialog-zindex, 3560) !important;
    pointer-events: auto !important;
}

.rz-dialog,
.rz-dialog-side {
    z-index: var(--rz-dialog-zindex, 3560) !important;
    pointer-events: auto !important;
}

.rz-dialog-wrapper .rz-dialog,
.rz-dialog-side {
    background: var(--sb-surface);
    color: var(--sb-text);
    border: 1px solid var(--sb-border);
    border-radius: 12px;
    box-shadow: var(--sb-shadow);
}

.rz-dialog-titlebar {
    background: var(--sb-appbar-bg);
    color: var(--sb-text);
    border-bottom: 1px solid var(--sb-border);
}

.rz-dialog-content {
    background: var(--sb-surface);
    color: var(--sb-text);
}

/* --- ERSETZT am 2026-09-04: Diese Regel lief seit dem Umstieg auf Radzen 6.6.3 ins Leere.
     Die Klasse "rz-growl-item" stammt aus einer älteren Radzen-Fassung. In 6.6.3 kommt das
     Wort "growl" im gesamten Radzen-Stylesheet (material-base.css) kein einziges Mal mehr
     vor - geprüft am 04.09.2026, ebenso in 9.0.5 und 11.0.5. Die Meldung heißt dort
     ".rz-notification-item". Die Regel hat also nie eine Meldung eingefärbt; genau deshalb
     erschienen die Toasts weiterhin in den Radzen-Werksfarben. Ersatz: der Block direkt
     darunter.
     ALT:
     .rz-notification .rz-growl-item {
         background: var(--sb-surface);
         color: var(--sb-text);
         border: 1px solid var(--sb-border);
     }
   --- */

/* =========================================================================================
   MELDUNGEN (TOASTS) AN DAS SHOWBOARD-FARBSCHEMA BINDEN (04.09.2026)

   DER BEFUND
   Die kleinen Meldungen, die aufpoppen (ISnackbar -> RadzenNotification, siehe
   Components/MudCompat/MudSnackbarProvider.razor), erschienen in den Werksfarben von
   Radzen: Grün #4caf50, Orange #ff9800, Rot #f44336, Blau #2196f3 auf weißer Fläche.
   Mit dem ShowBoard-Design hatte das nichts zu tun, und im dunklen Design blitzte die
   Meldung hell auf.

   WARUM DIE BINDUNG AM "body" STEHEN MUSS UND NICHT AM ":root"
   Radzen legt seine Meldungsfarben ganz außen am Dokument fest, nämlich auf ":root"
   (das ist das <html>-Element; nachzulesen in material-base.css, Zeilen 23511-23528).
   Das ShowBoard legt seine eigenen Designfarben dagegen eine Ebene tiefer fest, am
   <body>: die Klassen "theme-light" bzw. "theme-dark" (siehe weiter oben in dieser Datei)
   werden von index.html per showboardTheme.applyBodyTheme auf den body gesetzt.
   In CSS wird ein "var(...)" genau dort ausgerechnet, wo es HINGESCHRIEBEN ist. Radzens
   Meldungsfarben stehen deshalb schon fest, bevor die ShowBoard-Palette überhaupt ins
   Spiel kommt. Würde man die Bindung hier ebenfalls auf ":root" schreiben, wären die
   ShowBoard-Farben an dieser Stelle unbekannt und die komplette Regel fiele aus.
   Lösung: dieselben Namen hier noch einmal am "body" setzen. Die Meldungen hängen im
   Dokument unterhalb des body, also gewinnt diese Fassung. Und weil beide Designs ihre
   Palette ebenfalls am body setzen, folgen die Meldungen automatisch dem eingestellten
   Design - kein Design muss einzeln gepflegt werden.
   (Dieselbe Falle wurde in ScoreControl am 03.09.2026 gelöst; dort steht die Begründung
   in app.css im gleichlautenden body-Block.)

   WOHER DIE WERTE STAMMEN - ES WIRD KEINE NEUE FARBE ERFUNDEN
   - Fläche und Rahmen: die vorhandenen Hinweisfeld-Farben --sb-alert-*-bg und
     --sb-alert-*-border. Genau diese Tönungen benutzt das ShowBoard schon für seine
     eigenen Hinweisfelder (.mud-compat-alert-*), und es gibt sie je Design.
   - Schrift: die normale Textfarbe des Designs (--sb-text). Radzen würde hier den
     gesättigten Vollton nehmen, also z. B. kräftiges Grün auf blassgrünem Grund -
     das ist kaum zu lesen. Die Farbe tragen Symbol und Rahmen.
   - Symbol: die Signalfarben, die das ShowBoard ohnehin schon verwendet (#2e7d32 Grün,
     #ef6c00 Orange, #c62828 Rot, --sb-info Grau; siehe .mud-compat-success / -warning /
     -error weiter unten in dieser Datei). Sie werden zu 30 Prozent mit der Textfarbe des
     Designs gemischt. Grund: dieselbe feste Farbe ist im dunklen Design zu dunkel. Das
     Mischen hellt sie dort auf und dunkelt sie im hellen Design ab - automatisch in die
     jeweils richtige Richtung, ohne dass ein Design einzeln gepflegt werden muss.

   ERSATZWERTE (WICHTIG)
   Jedes var(...) hat einen festen Ersatzwert; genommen sind die Werte des HELLEN Designs.
   Grund: fällt eine Variable weg oder wird sie umbenannt, wird die komplette Zeile
   ungültig und Radzens Werksfarbe käme klammheimlich zurück. Mit Ersatzwert bleibt
   immer eine brauchbare Farbe stehen.
   ========================================================================================= */
body {
    /* Fläche hinter der Meldung - an den abgerundeten Ecken sichtbar. Radzens Vorgabe ist
       hier reines Weiß und stach im dunklen Design hervor. */
    --rz-notification-container-background-color: var(--sb-surface, #ffffff);
    /* Radzen liefert "none". Der Schatten des Designs hebt die Meldung von der Seite ab -
       passend zu den Dialogen weiter oben. */
    --rz-notification-shadow: var(--sb-shadow, 0 8px 24px rgba(15, 23, 42, 0.08));

    /* Erfolg */
    --rz-notification-success-background-color: var(--sb-alert-success-bg, #edf9ef);
    --rz-notification-success-color: var(--sb-text, #111827);
    --rz-notification-success-icon-color: color-mix(in srgb, #2e7d32 70%, var(--sb-text, #111827) 30%);

    /* Warnung */
    --rz-notification-warning-background-color: var(--sb-alert-warning-bg, #fff9ec);
    --rz-notification-warning-color: var(--sb-text, #111827);
    --rz-notification-warning-icon-color: color-mix(in srgb, #ef6c00 70%, var(--sb-text, #111827) 30%);

    /* Fehler */
    --rz-notification-error-background-color: var(--sb-alert-error-bg, #fff0f0);
    --rz-notification-error-color: var(--sb-text, #111827);
    --rz-notification-error-icon-color: color-mix(in srgb, #c62828 70%, var(--sb-text, #111827) 30%);

    /* Information. Deckt auch den Normalfall ab: MudCompatTypes.ToNotificationSeverity
       bildet Severity.Normal auf NotificationSeverity.Info ab. */
    --rz-notification-info-background-color: var(--sb-alert-info-bg, #f4f4f4);
    --rz-notification-info-color: var(--sb-text, #111827);
    --rz-notification-info-icon-color: var(--sb-info, #6d6d6d);
}

/* Rahmen der Meldung.
   Radzen sieht für Meldungen KEINE eigene Rahmen-Variable vor: ".rz-notification-item"
   bekommt in material-base.css nur Fläche, Schrift, Schatten, Innenabstand und Radius.
   Der Rahmen muss deshalb als gewöhnliche Regel gesetzt werden. Radzen setzt an dieser
   Stelle gar keinen Rahmen, es gibt also keinen Wettstreit um die Spezifität - ein
   "!important" ist nicht nötig, und showboard.css wird in index.html ohnehin NACH
   material-base.css geladen (dort Zeile 15 gegen Zeile 23).
   Schreibweise: Radzen nennt die Warnung im Markup "rz-notification-warn", NICHT
   "-warning" (geprüft in Radzen 6.6.3, 9.0.5 und 11.0.5). Die Fassung mit "-warning"
   steht nur als Sicherheitsnetz daneben, falls Radzen das später angleicht; ein Selektor,
   der nicht zutrifft, kostet nichts. */
.rz-notification-success .rz-notification-item {
    border: 1px solid var(--sb-alert-success-border, #bde6c3);
}

.rz-notification-warn .rz-notification-item,
.rz-notification-warning .rz-notification-item {
    border: 1px solid var(--sb-alert-warning-border, #ffe0a6);
}

.rz-notification-error .rz-notification-item {
    border: 1px solid var(--sb-alert-error-border, #ffcaca);
}

.rz-notification-info .rz-notification-item {
    border: 1px solid var(--sb-alert-info-border, #d8d8d8);
}

/* =========================================================================================
   KURZINFOS BEIM ÜBERFAHREN (TOOLTIPS) AN DAS SHOWBOARD-FARBSCHEMA BINDEN (04.09.2026)

   DER BEFUND
   Die kleinen Sprechblasen, die erscheinen, wenn die Maus über einem Bedienelement stehen
   bleibt, kommen von Radzen (<RadzenTooltip /> in Components/MudCompat/MudDialogProvider.razor,
   gespeist vom TooltipService aus Program.cs Zeile 20). Sie liefen bisher in den Werksfarben
   der Fremdbibliothek: Radzen setzt als Fläche "var(--rz-info)" und als Schrift
   "var(--rz-on-info)" (material-base.css 6.6.3, Zeilen 23968-23973). Das ist ein
   graublauer Kasten mit weißer Schrift - in beiden ShowBoard-Designs ein Fremdkörper, und
   im hellen Design der einzige dunkle Kasten weit und breit.

   WARUM DIE BINDUNG AM "body" STEHT UND NICHT AM ":root"
   Exakt dieselbe Falle wie bei den Meldungen weiter oben: Radzen legt die Tooltip-Farben
   ganz außen am Dokument fest (":root", also <html>), das ShowBoard seine Palette eine
   Ebene tiefer am <body> über die Klassen "theme-light" / "theme-dark". Ein "var(...)"
   wird immer dort ausgerechnet, wo es steht - auf ":root" wären die ShowBoard-Farben noch
   unbekannt und die ganze Regel fiele aus. Deshalb dieselben Namen hier noch einmal am
   body. Der Tooltip hängt im Dokument unterhalb des body, also gewinnt diese Fassung, und
   beide Designs werden automatisch bedient.

   WOHER DIE WERTE STAMMEN - ES WIRD KEINE NEUE FARBE ERFUNDEN
   Ein Tooltip ist dasselbe wie ein Auswahlfeld-Ausklapper oder ein kleines Aufklappfenster:
   eine schwebende Fläche über der Seite. Genau die sind weiter unten bereits gebunden
   (.rz-overlaypanel, .rz-popup, .rz-context-menu, .rz-dropdown-panel) und benutzen
   --sb-surface / --sb-text / --sb-border. Der Tooltip bekommt deshalb dieselben drei
   Farben, damit alles Schwebende gleich aussieht. Der Schatten kommt aus --sb-shadow,
   wie bei Dialogen und Meldungen auch.

   ERSATZWERTE (WICHTIG)
   Jedes var(...) hat einen festen Ersatzwert; genommen sind die Werte des HELLEN Designs.
   Grund: fällt eine Variable weg oder wird sie umbenannt, wird die komplette Zeile ungültig
   und Radzens Werksfarbe käme klammheimlich zurück.
   ========================================================================================= */
body {
    /* Fläche der Sprechblase. Radzens Vorgabe war var(--rz-info) - ein graublauer Kasten. */
    --rz-tooltip-background-color: var(--sb-surface, #ffffff);
    /* Schrift. Radzens Vorgabe war var(--rz-on-info), also Weiß - auf heller Fläche
       unlesbar. */
    --rz-tooltip-color: var(--sb-text, #111827);
    /* Schatten des Designs statt Radzens eigener Vorgabe, damit die Sprechblase sich
       genauso von der Seite abhebt wie Dialoge und Meldungen. */
    --rz-tooltip-shadow: var(--sb-shadow, 0 8px 24px rgba(15, 23, 42, 0.08));
}

/* Rahmen der Sprechblase.
   Radzen sieht für den Tooltip KEINE eigene Rahmen-Variable vor: ".rz-tooltip-content"
   bekommt in material-base.css (Zeilen 16713-16721) nur Fläche, Schrift, Schatten,
   Innenabstand, Radius und Schriftgröße. Der Rahmen muss deshalb als gewöhnliche Regel
   gesetzt werden - genau wie bei den Meldungen darüber. Radzen setzt hier gar keinen
   Rahmen, es gibt also keinen Wettstreit um die Spezifität; ein "!important" ist nicht
   nötig, und showboard.css wird in index.html ohnehin NACH material-base.css geladen
   (dort Zeile 15 gegen Zeile 23).
   Angenehmer Nebeneffekt: das kleine Pfeilchen, das zum Bedienelement zeigt, erbt in
   Radzen ausdrücklich Fläche und Rahmen von der Sprechblase ("background-color: inherit;
   border-bottom: inherit; border-right: inherit" in den Regeln .rz-*-tooltip-content:after).
   Es färbt sich damit von allein mit und braucht keine eigene Regel. */
.rz-tooltip-content {
    border: 1px solid var(--sb-border, #dbe3ef);
}

.rz-overlaypanel,
.rz-popup,
.rz-context-menu,
.rz-dropdown-panel {
    background: var(--sb-surface);
    color: var(--sb-text);
    border: 1px solid var(--sb-border);
}

.rz-dialog.sb-password-dialog {
    background: linear-gradient(180deg, #1f1f1f 0%, #171717 100%);
    border: 1px solid #343434;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45);
}

.rz-dialog.sb-password-dialog .rz-dialog-titlebar {
    background: transparent;
    border-bottom: 1px solid #343434;
    color: rgba(255, 255, 255, 0.92);
}

.rz-dialog.sb-password-dialog .rz-dialog-title {
    font-weight: 700;
}

.rz-dialog.sb-password-dialog .rz-dialog-content {
    background: transparent;
    color: rgba(255, 255, 255, 0.92);
}

.rz-dialog.sb-password-dialog .mud-compat-dialog {
    background: transparent;
}

.rz-dialog.sb-password-dialog .mud-compat-input,
.rz-dialog.sb-password-dialog .mud-compat-input-wrap {
    background: #222;
    border-color: #404040;
    color: rgba(255, 255, 255, 0.92);
}

.rz-dialog.sb-password-dialog .mud-compat-label,
.rz-dialog.sb-password-dialog .mud-compat-helper {
    color: rgba(255, 255, 255, 0.78);
}

.mud-compat-card-header {
    padding: 0.7rem 0.8rem 0.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
}

.mud-compat-card-content {
    padding: 0.65rem 0.8rem;
}

.mud-compat-card-actions {
    padding: 0.55rem 0.8rem 0.8rem;
}

.mud-compat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mud-compat-list-item {
    padding: 0.35rem 0.45rem;
    border-radius: 5px;
    cursor: pointer;
}

.mud-compat-list-item:hover {
    background: var(--sb-nav-hover);
}

.mud-compat-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.mud-compat-menu-activator {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.mud-compat-menu-content {
    position: absolute;
    top: calc(100% + 0.25rem);
    min-width: 9.5rem;
    max-width: min(90vw, 22rem);
    padding: 0.35rem;
    border: 1px solid var(--sb-border);
    border-radius: 8px;
    background: var(--sb-surface);
    box-shadow: var(--sb-shadow);
    z-index: 25;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.mud-compat-menu-content-left {
    left: 0;
}

.mud-compat-menu-content-right {
    right: 0;
}

.mud-compat-menu-content-static {
    position: static;
    min-width: 0;
    max-width: none;
    box-shadow: none;
    border: none;
    padding: 0;
}

.mud-compat-menu-item {
    width: 100%;
    text-align: left;
    padding: 0.4rem 0.55rem;
}

.mud-compat-table-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--sb-border);
    border-radius: 10px;
    background: var(--sb-surface);
}

.mud-compat-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.mud-compat-table th,
.mud-compat-table td {
    border-bottom: 1px solid var(--sb-border);
    padding: 0.45rem 0.55rem;
    vertical-align: middle;
    color: var(--sb-text);
    white-space: normal;
    overflow-wrap: anywhere;
}

.mud-compat-table th {
    font-weight: 700;
}

.mud-compat-table-dense th,
.mud-compat-table-dense td {
    padding: 0.35rem 0.45rem;
}

.mud-compat-table td code {
    white-space: normal;
    overflow-wrap: anywhere;
}

.pagemappings-table th.pagemappings-actions-col,
.pagemappings-table td.pagemappings-actions-col {
    width: 8rem;
    min-width: 8rem;
    text-align: right;
    white-space: nowrap;
    padding-right: 1rem;
}

.pagemappings-table td.pagemappings-actions-col .mud-compat-menu {
    margin-right: 0.2rem;
}

.mud-compat-tabs {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.mud-compat-tabs-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    border-bottom: 1px solid var(--sb-border);
    padding-bottom: 0.35rem;
}

.mud-compat-tab-button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--sb-text-muted);
    padding: 0.38rem 0.62rem;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mud-compat-tab-button:hover {
    background: var(--sb-nav-hover);
    color: var(--sb-text);
}

.mud-compat-tab-button-active {
    background: var(--sb-nav-active);
    border-color: var(--sb-border);
    color: var(--sb-text);
}

.mud-compat-tabs-panels {
    min-height: 0;
}

.mud-compat-tabpanel {
    border: 1px solid var(--sb-border);
    border-radius: 8px;
    padding: 0.75rem;
    background: var(--sb-surface-alt);
    color: var(--sb-text);
}

.mud-compat-default { color: inherit; }
.mud-compat-primary { color: var(--sb-accent); }
.mud-compat-secondary { color: var(--sb-text-muted); }
.mud-compat-success { color: #2e7d32; }
.mud-compat-info { color: var(--sb-info); }
.mud-compat-warning { color: #ef6c00; }
.mud-compat-error { color: #c62828; }
.mud-compat-dark { color: var(--sb-text); }

.mud-compat-button.mud-compat-primary,
.mud-compat-button.mud-compat-success,
.mud-compat-button.mud-compat-info,
.mud-compat-button.mud-compat-warning,
.mud-compat-button.mud-compat-error {
    color: #fff;
}

.mud-compat-button.mud-compat-primary { background: var(--sb-accent); border-color: var(--sb-accent); }
.mud-compat-button.mud-compat-success { background: #2e7d32; border-color: #2e7d32; }
.mud-compat-button.mud-compat-info { background: var(--sb-info-button); border-color: var(--sb-info-button); }
.mud-compat-button.mud-compat-warning { background: #ef6c00; border-color: #ef6c00; }
.mud-compat-button.mud-compat-error { background: #c62828; border-color: #c62828; }

.mud-compat-button.mud-compat-outlined {
    background: transparent;
}

.mud-compat-button.mud-compat-text {
    background: transparent;
    border-color: transparent;
}

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

/* Utility classes used by existing Mud markup */
.pa-1 { padding: 0.25rem; }
.pa-2 { padding: 0.5rem; }
.pa-3 { padding: 0.75rem; }
.pa-4 { padding: 1rem; }
.pa-6 { padding: 1.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }

.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-8 { margin-bottom: 2rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-3 { margin-left: 0.75rem; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }

.d-flex { display: flex; }
.flex-grow-1 { flex-grow: 1; }
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-space-between { justify-content: space-between; }
.flex-column { flex-direction: column; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }

@keyframes mud-compat-spin {
    to { transform: rotate(360deg); }
}

@keyframes mud-compat-progress {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(300%); }
}

@media (max-width: 900px) {
    .mud-compat-layout {
        grid-template-columns: 1fr;
    }

    .mud-compat-drawer {
        border-right: none;
        border-bottom: 1px solid #e7e7e7;
        max-height: none;
    }

    .mud-compat-stack-row {
        flex-wrap: wrap !important;
    }

    .mud-compat-main {
        padding: 0.45rem 0.5rem 1.25rem;
    }

    .sb-page-container {
        padding: 0.45rem 0.2rem 0.7rem;
    }

    .mud-compat-table th,
    .mud-compat-table td {
        padding: 0.34rem 0.42rem;
        font-size: 0.86rem;
    }

    .pagemappings-table th.pagemappings-actions-col,
    .pagemappings-table td.pagemappings-actions-col {
        width: 6.5rem;
        min-width: 6.5rem;
        padding-right: 0.55rem;
    }
}

.property-row input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.property-row input:focus,
.property-row select:focus {
    outline: none;
    border-color: #ffcc00;
}

.designer-panel-actions {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #333;
}

.designer-panel-actions button {
    width: 100%;
    padding: 12px 20px;
    background: #ffcc00;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.designer-panel-actions button:hover {
    background: #ffdd33;
}

.designer-panel-actions button:active {
    transform: translateY(1px);
}

.designer-panel-actions .btn-danger {
    background: #dc3545;
    color: white;
    margin-bottom: 10px;
}

.designer-panel-actions .btn-danger:hover {
    background: #c82333;
}

.designer-toolbar {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.8);
    padding: 10px 20px;
    border-radius: 8px;
}

.designer-toolbar button {
    background: #28a745;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    color: white;
    font-size: 14px;
}

.designer-toolbar button:hover {
    background: #218838;
}

.designer-toolbar .btn-info {
    background: #17a2b8;
}

.designer-toolbar .btn-info:hover {
    background: #138496;
}

.undo-redo-toolbar {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background: rgba(0, 0, 0, 0.9);
    padding: 10px;
    border-radius: 8px;
    display: flex;
    gap: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.undo-redo-toolbar button {
    background: #6c757d;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    color: white;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
}

.undo-redo-toolbar button:hover:not(:disabled) {
    background: #5a6268;
    transform: translateY(-2px);
}

.undo-redo-toolbar button:disabled {
    background: #343a40;
    color: #6c757d;
    cursor: not-allowed;
    opacity: 0.5;
}

.undo-redo-toolbar .btn-undo:not(:disabled) {
    background: #007bff;
}

.undo-redo-toolbar .btn-undo:not(:disabled):hover {
    background: #0056b3;
}

.undo-redo-toolbar .btn-redo:not(:disabled) {
    background: #17a2b8;
}

.undo-redo-toolbar .btn-redo:not(:disabled):hover {
    background: #138496;
}

/* ============================================
   Display Setup Dialog Styles
   ============================================ */
.setup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #121212;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 10000;
    padding: 16px;
    overflow: auto;
}

.setup-dialog {
    background: #1E1E1E;
    border-radius: 12px;
    padding: 32px 40px;
    max-width: 1100px;
    width: 96vw;
    max-height: calc(100vh - 32px);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid #333;
    display: flex;
    flex-direction: column;
    margin: auto;
}

.setup-dialog h2 {
    margin: 0 0 10px 0;
    color: #FFFFFF;
    font-size: 28px;
}

.setup-subtitle {
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 30px 0;
    font-size: 14px;
}

.setup-loading {
    text-align: center;
    padding: 40px;
    color: rgba(255, 255, 255, 0.9);
}

.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #ED2024;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.setup-success {
    text-align: center;
    padding: 40px;
    color: rgba(255, 255, 255, 0.9);
}

.success-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #4caf50;
    color: white;
    font-size: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.setup-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.setup-grid {
    /* Der Grid-Bereich muss als flexibles Element schrumpfen koennen,
       damit die Button-Leiste nicht in die Form hineinragt. */
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
    gap: 24px 32px;
    min-height: 0;
    overflow-y: auto;
    padding-right: 6px;
    padding-bottom: 28px;
    align-content: start;
}

.setup-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 0;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-group label {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
}

.form-group small {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    margin-top: -5px;
}

.hub-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 10px;
    background: #121212;
}

.hub-empty {
    text-align: center;
    padding: 30px;
    color: rgba(255, 255, 255, 0.5);
}

.hub-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border: 2px solid #333;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    background: #1E1E1E;
}

.hub-item:hover {
    border-color: #ED2024;
    background: #2A2A2A;
}

.hub-item.selected {
    border-color: #ED2024;
    background: #2A2A2A;
}

.hub-icon {
    font-size: 32px;
}

.hub-info {
    flex: 1;
}

.hub-name {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 4px;
}

.hub-address {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Courier New', monospace;
}

.hub-check {
    font-size: 24px;
    color: #ED2024;
}

.manual-hub {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.hub-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #333;
    border-radius: 6px;
    font-size: 14px;
    background: #2A2A2A;
    color: rgba(255, 255, 255, 0.9);
}

.hub-input:focus {
    outline: none;
    border-color: #ED2024;
}

.text-input {
    padding: 12px;
    border: 1px solid #333;
    border-radius: 6px;
    font-size: 14px;
    width: 100%;
    background: #2A2A2A;
    color: rgba(255, 255, 255, 0.9);
}

.text-input:focus {
    outline: none;
    border-color: #ED2024;
}

.select-input {
    padding: 12px;
    border: 1px solid #333;
    border-radius: 6px;
    font-size: 14px;
    width: 100%;
    background: #2A2A2A;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
}

.select-input option {
    background: #2A2A2A;
    color: rgba(255, 255, 255, 0.9);
}

.select-input:focus {
    outline: none;
    border-color: #ED2024;
}

.btn-primary {
    padding: 14px 28px;
    background: linear-gradient(135deg, #ED2024 0%, #C41E3A 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(237, 32, 36, 0.4);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary {
    padding: 14px 28px;
    background: #000000;
    color: white;
    border: 2px solid #000000;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background: #333333;
    border-color: #333333;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn-link {
    background: none;
    border: none;
    color: #ED2024;
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
    padding: 5px;
}

.btn-link:hover {
    color: #C41E3A;
}

.button-group {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: auto;
    padding-top: 12px;
    padding-bottom: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: #1E1E1E;
    position: sticky;
    bottom: 0;
    z-index: 3;
    flex: 0 0 auto;
}

.error-message {
    background: #fee;
    border: 1px solid #fcc;
    color: #c33;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
}

@media (max-width: 900px), (max-height: 720px) {
    .setup-dialog {
        max-width: 600px;
        width: 94vw;
        overflow-y: auto;
    }

    .setup-grid {
        grid-template-columns: 1fr;
    }
}

/* Table Column Selection Styles */
.table-column-hover {
    transition: background-color 0.2s ease;
    position: relative;
}

.table-column-hover:hover {
    background-color: rgba(255, 204, 0, 0.2) !important;
}

.table-column-selected {
    background-color: rgba(255, 204, 0, 0.4) !important;
    box-shadow: inset 0 0 0 2px #ffcc00;
}

.column-resize-handle {
    transition: background-color 0.2s ease;
}

.column-resize-handle:hover {
    background-color: rgba(255, 204, 0, 0.5) !important;
}

.column-resize-handle:active {
    background-color: rgba(255, 204, 0, 0.8) !important;
}