/* Gemeinsamer Backend-Rahmen. Bestehende Seiten und DevExtreme-Layouts bleiben separat. */
html[data-theme="sunshine"] {
    --app-bg: #f7f7f5;
    --app-text: #20252b;
    --panel-bg: #fff;
    --panel-border: #dce0e4;
    --panel-soft-bg: #f8f9fa;
    --sidebar-bg: #fff;
    --sidebar-text: #20252b;
    --sidebar-link: #424b56;
    --sidebar-hover: #f3f4f5;
    --primary: #af0751;
    --primary-hover: #900541;
    --accent-soft-bg: #fff0f5;
    --accent-soft-border: #ecc5d6;
    --accent-soft-text: #8f1548;
    --summary-bg: #fff;
    --summary-accent-bg: #fff8ec;
    --summary-value: #20252b;
    --modal-head-bg: #fff;
    --modal-head-border: #dce0e4;
    --modal-head-icon-bg: #fff0f5;
    --modal-head-icon-text: #af0751;
    --modal-summary-bg: #f8f9fa;
    --modal-summary-border: #dce0e4;
    --modal-card-bg: #fff;
    --modal-card-border: #dce0e4;
    --modal-card-energy-bg: #fff7fa;
    --modal-card-energy-border: #ecc5d6;
    --icon-action: #af0751;
    --icon-action-hover: #900541;
    --focus-ring: #af0751;
    --field-bg: #fff;
    --field-border: #afb7c0;
    --field-text: #20252b;
    --field-popup-border: #afb7c0;
    --field-popup-shadow: #18203020;
    --field-popup-hover: #fff0f5;
    --table-border: #dce0e4;
    --table-head-bg: #f8f9fa;
    --table-head-text: #424b56;
    --muted-text: #606975;
    --muted-strong-text: #4b5563;
    --heading-soft-text: #424b56;
    --progress-track: #eceef1;
    --progress-fill: #af0751;
    --preview-bg: #f8f9fa;
    --preview-border: #afb7c0;
    --empty-border: #dce0e4;
}

.backend-shell .shell { grid-template-columns: minmax(0, 1fr); min-height: 100dvh; transition: none; }
.backend-shell .backend-workspace { min-width: 0; }
.backend-shell .content { min-width: 0; padding: 1.5rem 1rem 3rem; }
.backend-shell [hidden] { display: none !important; }
.backend-shell .backend-topbar {
    position: sticky; top: 0; z-index: 10;
    min-height: 4.5rem; padding: .75rem 1rem;
    display: flex; align-items: center; gap: .75rem;
    background: var(--panel-bg); border-bottom: 1px solid var(--panel-border);
}
.backend-topbar-brand { font-size: 1rem; font-weight: 700; }
.backend-location { margin-left: auto; color: var(--muted-text); font-size: .8125rem; overflow-wrap: anywhere; text-align: right; }
.backend-shell .backend-nav-open, .backend-shell .backend-nav-close {
    align-items: center; justify-content: center; flex: 0 0 2.75rem;
    width: 2.75rem; height: 2.75rem; padding: .5rem; border-radius: .5rem;
    border: 1px solid var(--panel-border); background: var(--panel-bg); color: var(--app-text);
}
.backend-nav-open { display: none; }
.backend-nav-close { display: none; }
.backend-navigation-ready .backend-nav-open { display: inline-flex; }
.backend-shell svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.backend-nav-open svg, .backend-nav-close svg, .backend-shell .sidebar-nav svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.backend-shell .sidebar {
    min-height: 0; height: 100%; position: static; width: 100%;
    padding: 1.25rem 1rem; gap: 1.25rem; overflow-y: auto; overscroll-behavior: contain;
    color: var(--sidebar-text); background: var(--sidebar-bg);
}
.backend-shell .sidebar-brand { display: flex; flex-direction: row; align-items: center; gap: .5rem; }
.backend-shell .sidebar-brand-link { display: flex; flex: 1; gap: .6rem; padding: 0; min-height: 2.75rem; }
.backend-shell .sidebar-brand-link:hover { background: transparent; }
.backend-shell .sidebar-logo { width: 2.75rem; height: 2.75rem; padding: .2rem; border-radius: .5rem; background: transparent; box-shadow: none; }
.backend-shell .sidebar-brand-copy { display: block; }
.backend-shell .sidebar-brand-kicker { font-size: .75rem; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: 1; margin-bottom: .2rem; }
.backend-shell #backendNavTitle { font-size: 1rem; line-height: 1.2; }
.backend-shell .sidebar-nav { gap: .25rem; }
.backend-nav-group { padding: .5rem .75rem; color: var(--sidebar-link); font-size: .75rem; }
.backend-shell .sidebar-nav a {
    display: flex; align-items: center; justify-content: flex-start; gap: .75rem;
    min-height: 2.75rem; padding: .65rem .75rem; border-radius: .5rem;
    font-size: .875rem; font-weight: 550; overflow-wrap: anywhere;
}
.backend-shell .sidebar a::before { display: none; }
.backend-shell .sidebar-nav a[aria-current="page"] { background: var(--accent-soft-bg); color: var(--primary); font-weight: 700; }
.backend-shell .sidebar-bottom { gap: .75rem; margin-top: auto; padding-top: 1rem; }
.backend-shell .userbox { margin: 0; padding: .75rem 0 0; border: 0; border-top: 1px solid var(--panel-border); border-radius: 0; background: transparent; }
.backend-shell .userbox-name { padding: 0 .5rem; overflow-wrap: anywhere; }
.backend-shell .userbox button { background: transparent; color: var(--sidebar-text); border: 1px solid var(--panel-border); border-radius: .5rem; min-height: 2.75rem; font-size: .875rem; }
.backend-shell .theme-switcher-box { padding: .5rem; background: transparent; border: 0; }
.backend-shell .theme-switcher-label { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .75rem; }
.backend-shell .theme-switcher-button-single { min-height: 2.75rem; background: var(--panel-soft-bg); color: var(--app-text); border: 1px solid var(--panel-border); border-radius: .5rem; }
.backend-shell .theme-switcher-button-single::after { font-size: .75rem; }
.backend-shell .backend-nav-dialog {
    border: 0; padding: 0; margin: 0; width: min(21rem, 92vw); max-width: 92vw;
    height: 100dvh; max-height: 100dvh; background: var(--sidebar-bg); color: var(--sidebar-text);
    box-shadow: 0 1rem 4rem #18203030; overflow: hidden;
}
.backend-nav-dialog::backdrop { background: #18202b66; }
#backendMobileNavSlot { height: 100%; }
.backend-navigation-open, .backend-navigation-open body { overflow: hidden; }
.backend-shell .backend-skip-link { position: fixed; top: -10rem; left: 1rem; z-index: 100; padding: .75rem 1rem; background: var(--primary); color: #fff; border-radius: .5rem; }
.backend-shell .backend-skip-link:focus { top: .75rem; }
.backend-shell :is(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

@media (max-width: 900px) {
    html.sidebar-collapsed .backend-shell .shell { grid-template-columns: minmax(0, 1fr); }
    .backend-navigation-ready .backend-nav-dock { display: none; }
    .backend-shell .backend-nav-dialog .backend-nav-close { display: inline-flex; }
    .backend-shell .backend-nav-dialog .sidebar-brand-copy,
    .backend-shell .backend-nav-dialog .sidebar-link-text,
    .backend-shell .backend-nav-dialog .theme-switcher-label,
    .backend-shell .backend-nav-dialog .userbox-name { display: block; }
    .backend-shell .backend-nav-dialog .sidebar-brand-link { justify-content: flex-start; }
    .backend-shell .backend-nav-dialog .sidebar-logo { margin: 0; }
    .backend-shell .backend-nav-dialog .theme-switcher-button-single::after { display: inline; }
}
@media (min-width: 901px) {
    .backend-shell .shell { grid-template-columns: 16rem minmax(0, 1fr); }
    .backend-shell .backend-nav-dock { min-width: 0; background: var(--sidebar-bg); border-right: 1px solid var(--panel-border); }
    .backend-shell .backend-nav-dock .sidebar { position: sticky; top: 0; height: 100dvh; }
    .backend-shell .backend-topbar { padding-inline: 1.5rem; }
    .backend-shell .backend-topbar-brand { display: none; }
    .backend-shell .backend-location { margin-left: 0; text-align: left; font-size: .875rem; }
    .backend-shell .content { padding: 1.75rem 1.5rem 3rem; }
    html.sidebar-collapsed .backend-shell .shell { grid-template-columns: 5.5rem minmax(0, 1fr); }
    html.sidebar-collapsed .backend-shell .sidebar { padding-inline: .5rem; }
    html.sidebar-collapsed .backend-shell .sidebar-brand-copy,
    html.sidebar-collapsed .backend-shell .sidebar-link-text,
    html.sidebar-collapsed .backend-shell .backend-nav-group,
    html.sidebar-collapsed .backend-shell .theme-switcher-label,
    html.sidebar-collapsed .backend-shell .userbox-name { display: none; }
    html.sidebar-collapsed .backend-shell .sidebar-nav a { justify-content: center; padding-inline: .5rem; }
    html.sidebar-collapsed .backend-shell .sidebar-brand-link { justify-content: center; }
    html.sidebar-collapsed .backend-shell .theme-switcher-button-single { padding-inline: .15rem; font-size: .7rem; }
    html.sidebar-collapsed .backend-shell .theme-switcher-button-single::after { display: none; }
    html.sidebar-collapsed .backend-shell .userbox button { padding-inline: .2rem; font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
    .backend-shell .sidebar a, .backend-shell .sidebar-toggle-button { transition: none; }
}