/* DeployCircle — Rahmen im Glas-Design der Circle-Produktreihe (0.18.3). Nur Variablen aus dc-tokens.css.

   Übernommen aus RemoteCircle (rc-shell.css, Stand 1.21) — Wunsch 28.09.2026: „das Design gleich mit der
   RemoteCircle Console: Glas mit der Welle an der linken Seite, damit es aussieht wie aus der gleichen
   Produktreihe". Maße, Kanten, Welle und Animation sind bewusst identisch; Abweichungen stehen am Ort.

   Aufbau (MainLayout.razor): Seitenleiste (MudDrawer) und Inhaltsbereich sind zwei getrennte, abgerundete
   Panels mit --dc-gap Abstand zum Fensterrand und zueinander. Der Inhaltsbereich besteht aus
     • .dc-shell-panel   — die Hintergrund-Scheibe (Glas/Tönung, Kante, Schatten), rein dekorativ,
     • .mud-appbar       — Kopfleiste oben IN der Scheibe (selbst durchsichtig),
     • .mud-main-content — der EINZIGE Scrollbereich dazwischen,
     • .dc-shell-status  — Statusleiste unten IN der Scheibe.
   Der Weichzeichner sitzt an der Scheibe und NICHT am Scrollbereich: ein backdrop-filter am Vorfahren
   würde position:fixed-Elemente der Seiten an ihn statt ans Fenster binden.

   Spezifität: deploycircle.css (Glas-Grundrezept der ersten Stufe) trägt !important-Regeln für
   .mud-paper/.mud-appbar/.mud-drawer. Die Rahmenregeln hier beginnen deshalb mit
   „html body .mud-layout.dc-shell"; Overlay-Flächen außerhalb des Layouts (Menüs, Dialoge, Snackbars)
   mit „html:not(#dc-shell-none) body" (ID-Gewicht). */

/* ------------------------------------------------------------------ Maße */

html body .mud-layout.dc-shell {
    --dc-gap: 12px;
    --dc-side-w: 240px;
    --dc-head-h: 64px;
    --dc-status-h: 38px;
    --dc-content-left: calc(var(--dc-gap) * 2 + var(--dc-side-w));
}

/* Muss zu MiniWidth="68px" in MainLayout.razor passen. */
html body .mud-layout.dc-shell.dc-side-mini {
    --dc-side-w: 68px;
}

/* ------------------------------------------------------------------ Hintergrund-Scheibe des Inhalts */

.dc-shell-panel {
    position: fixed;
    top: var(--dc-gap);
    right: var(--dc-gap);
    bottom: var(--dc-gap);
    left: var(--dc-content-left);
    z-index: 0;
    border-radius: var(--dc-radius-lg);
    background-color: var(--dc-panel-bg);
    background-image: linear-gradient(var(--dc-tint), var(--dc-tint));
    border: 1px solid var(--dc-panel-border);
    box-shadow: var(--dc-panel-shadow);
    -webkit-backdrop-filter: blur(var(--dc-panel-blur)) saturate(150%);
    backdrop-filter: blur(var(--dc-panel-blur)) saturate(150%);
    pointer-events: none;
    transition: left .22s ease;
}

/* ------------------------------------------------------------------ Seitenleiste (Panel) */

html body .mud-layout.dc-shell .mud-drawer {
    top: var(--dc-gap) !important;
    bottom: var(--dc-gap) !important;
    left: var(--dc-gap) !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden;
    border-radius: var(--dc-radius-lg);
    background-color: var(--dc-panel-bg) !important;
    background-image: linear-gradient(var(--dc-tint), var(--dc-tint)) !important;
    border: 1px solid var(--dc-panel-border) !important;
    box-shadow: var(--dc-panel-shadow) !important;
    -webkit-backdrop-filter: blur(var(--dc-panel-blur)) saturate(150%);
    backdrop-filter: blur(var(--dc-panel-blur)) saturate(150%);
    color: var(--dc-text);
}

/* Hell: Seitenleiste OHNE Weichzeichner. Die animierte Welle liegt IN der Leiste — ein backdrop-filter müsste
   bei jedem Bild der Animation neu berechnet werden (RemoteCircle gemessen: etwa doppelte Kosten). Optisch fällt
   er dort nicht auf (Fläche zu 78 % deckend). Glas behält ihn — dort IST er das Design. */
html:not(.dc-dark) body .mud-layout.dc-shell .mud-drawer {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

html body .mud-layout.dc-shell .mud-drawer .mud-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background: transparent;
}

.dc-side {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 100%;
    width: 100%;
}

.dc-side-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 18px 0 18px;
}

.dc-side-logo {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    filter: drop-shadow(0 3px 8px rgba(47, 107, 255, .35));
}

.dc-side-brand {
    min-width: 0;
}

/* Wortmarke im Markenverlauf (wie in der RemoteCircle-Demo), darunter der Zweck in Versalien. */
.dc-side-name {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .005em;
    white-space: nowrap;
    background: var(--dc-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dc-side-tag {
    margin-top: 3px;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--dc-text-faint);
    white-space: nowrap;
}

/* Navigation — zwölf Einträge statt fünf wie bei RemoteCircle, deshalb etwas flacher (44 statt 52 px), damit
   Leiste, Infozeilen und Welle auf einem 1080er-Bildschirm ohne Rollen Platz haben. */
html body .mud-layout.dc-shell .dc-side-nav {
    margin-top: 22px;
    padding: 0 12px;
}

html body .mud-layout.dc-shell .dc-side-nav .mud-nav-link {
    min-height: 44px;
    margin: 0 0 3px 0;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid transparent;
    color: var(--dc-text-muted);
    font-weight: 500;
    transform: none !important;
    background: transparent !important;
}

html body .mud-layout.dc-shell .dc-side-nav .mud-nav-link::before {
    content: none;
}

html body .mud-layout.dc-shell .dc-side-nav .mud-nav-link .mud-nav-link-icon {
    color: inherit;
    margin-right: 14px;
}

html body .mud-layout.dc-shell .dc-side-nav .mud-nav-link:hover {
    color: var(--dc-text);
    background: var(--dc-row-hover) !important;
}

html body .mud-layout.dc-shell .dc-side-nav .mud-nav-link.active {
    color: var(--dc-text);
    font-weight: 600;
    background: var(--dc-card-bg-hover) !important;
    border-color: var(--dc-card-border);
}

html body .mud-layout.dc-shell .dc-side-nav .mud-nav-link.active .mud-icon-root {
    color: var(--dc-accent);
}

html.dc-dark body .mud-layout.dc-shell .dc-side-nav .mud-nav-link.active .mud-icon-root {
    color: var(--dc-text);
}

html body .mud-layout.dc-shell .dc-side-nav .mud-nav-link-text {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.dc-side-nav-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dc-side-badge {
    flex: 0 0 auto;
    min-width: 26px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--dc-pill-bg);
    border: 1px solid var(--dc-pill-border);
    color: var(--dc-text);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
}

/* Fuß: Infos über der Welle, Kundenname auf der Welle */
.dc-side-foot {
    position: relative;
    margin-top: auto;
    padding-top: 16px;
}

.dc-side-info {
    position: relative;
    z-index: 1;
    padding: 0 20px 2px 20px;
    font-size: .78rem;
    color: var(--dc-text-muted);
}

.dc-side-info-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 3px 0;
    min-width: 0;
}

.dc-side-info-row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dc-side-info-row .mud-icon-root {
    flex: 0 0 auto;
    font-size: 1rem;
    opacity: .75;
}

/* Welle unten links („Signal") — Aufbau und Animation 1:1 wie RemoteCircle (dort ausführlich begründet):
     .dc-wave                 160 px hoch, unten angeschnitten, oberer Teil durchsichtig unter den Infos
       .dc-wave-haze          weicher Lichtschein (statisch)
       .dc-wave-back          Band hinten, Periode 160 px, driftet nach rechts
       .dc-wave-mid           Band Mitte,  Periode 240 px, driftet nach links
       .dc-wave-front         Band vorn,   Periode 320 px, driftet nach rechts, trägt den Namen
         .dc-wave-signal      Fenster mit Maske (Lichtimpulse), .dc-wave-signal-line läuft gegen es
     .dc-wave-company         Kundenname auf dem vorderen Band (Geschwister der Welle, nicht aria-hidden)
   Leistung: genau 5 animierte Elemente, animiert wird ausschließlich transform. Schleife 40 s, nahtlos.
   Nach 45 s ohne Eingabe bzw. bei verborgenem Tab hält dc-shell.js sie an (.dc-wave-idle). */

.dc-wave {
    position: relative;
    height: 160px;
    margin-top: -26px;          /* der durchsichtige obere Teil liegt unter den Info-Zeilen */
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}

.dc-wave-haze {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(150px 54px at 76% 74%, var(--dc-wave-haze-1), transparent 72%),
        radial-gradient(130px 48px at 20% 60%, var(--dc-wave-haze-2), transparent 74%);
}

.dc-wave-layer,
.dc-wave-signal,
.dc-wave-signal-line {
    position: absolute;
    top: 0;
    height: 190px;
    will-change: transform;
}

.dc-wave svg {
    display: block;
    overflow: visible;
}

/* Die Ebenen beginnen 20 px links außerhalb: keine Kante am Panelrand, wenn eine Ebene bei 0 steht. */
.dc-wave-back  { left: -20px; width: 440px; animation: dc-wave-back 40s linear infinite; }
.dc-wave-mid   { left: -20px; width: 520px; animation: dc-wave-mid 40s linear infinite; }
.dc-wave-front { left: -20px; width: 620px; animation: dc-wave-front 40s linear infinite; }

.dc-wave-signal {
    left: -320px;
    width: 920px;
    animation: dc-wave-signal 20s linear infinite;
    /* Kometen laufen nach rechts: Schweif links, heller Kopf rechts. */
    --dc-wave-pulses: linear-gradient(90deg,
        transparent 0, transparent 6px,
        rgba(0, 0, 0, .05) 16px, rgba(0, 0, 0, .16) 32px, rgba(0, 0, 0, .45) 45px,
        rgba(0, 0, 0, .60) 50px, rgba(0, 0, 0, .20) 55px, transparent 61px,
        transparent 80px,
        rgba(0, 0, 0, .05) 100px, rgba(0, 0, 0, .16) 130px, rgba(0, 0, 0, .40) 158px, rgba(0, 0, 0, .78) 179px,
        #000 187px, rgba(0, 0, 0, .55) 193px, rgba(0, 0, 0, .14) 199px, transparent 206px,
        transparent 320px);
    -webkit-mask-image: var(--dc-wave-pulses);
    mask-image: var(--dc-wave-pulses);
    -webkit-mask-size: 320px 100%;
    mask-size: 320px 100%;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
}

.dc-wave-signal-line {
    left: 0;
    width: 920px;
    animation: dc-wave-signal-line 20s linear infinite;
}

.dc-wave-back-glow, .dc-wave-back-line, .dc-wave-mid-glow, .dc-wave-mid-line, .dc-wave-mid-echo,
.dc-wave-front-inner, .dc-wave-front-edge, .dc-wave-sig-bloom, .dc-wave-sig-halo, .dc-wave-sig-glow, .dc-wave-sig-core {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dc-wave-back-glow  { stroke: var(--dc-wave-back-glow); stroke-width: 7; }
.dc-wave-back-line  { stroke: var(--dc-wave-back-line); stroke-width: 1; }
.dc-wave-mid-glow   { stroke: var(--dc-wave-mid-glow); stroke-width: 7; }
.dc-wave-mid-line   { stroke: var(--dc-wave-mid-line); stroke-width: 1; }
.dc-wave-mid-echo   { stroke: var(--dc-wave-mid-echo); stroke-width: .8; }
.dc-wave-front-inner { stroke: var(--dc-wave-front-inner); stroke-width: 18; }
.dc-wave-front-edge { stroke: var(--dc-wave-edge); stroke-width: 1.2; }
.dc-wave-sig-bloom  { stroke: var(--dc-wave-signal-glow); stroke-width: 16; opacity: var(--dc-wave-signal-bloom); }
.dc-wave-sig-halo   { stroke: var(--dc-wave-signal-glow); stroke-width: 6; }
.dc-wave-sig-glow   { stroke: var(--dc-wave-signal-glow); stroke-width: 2.6; opacity: .9; }
.dc-wave-sig-core   { stroke: var(--dc-wave-signal-core); stroke-width: 1.6; }

.dc-wave-company {
    position: absolute;
    left: 20px;
    right: 16px;
    bottom: 14px;
    z-index: 1;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .08em;
    color: var(--dc-wave-text);
    text-shadow: var(--dc-wave-text-shadow);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Drift: je Durchlauf genau eine Periode; Heben: voller Sinus (20 Abschnitte à 2 s, linear). */
@keyframes dc-wave-back {
    0% { transform: translate3d(-160px, 0px, 0); }
    5% { transform: translate3d(-152px, 0.59px, 0); }
    10% { transform: translate3d(-144px, 0.95px, 0); }
    15% { transform: translate3d(-136px, 0.95px, 0); }
    20% { transform: translate3d(-128px, 0.59px, 0); }
    25% { transform: translate3d(-120px, 0px, 0); }
    30% { transform: translate3d(-112px, -0.59px, 0); }
    35% { transform: translate3d(-104px, -0.95px, 0); }
    40% { transform: translate3d(-96px, -0.95px, 0); }
    45% { transform: translate3d(-88px, -0.59px, 0); }
    50% { transform: translate3d(-80px, 0px, 0); }
    55% { transform: translate3d(-72px, 0.59px, 0); }
    60% { transform: translate3d(-64px, 0.95px, 0); }
    65% { transform: translate3d(-56px, 0.95px, 0); }
    70% { transform: translate3d(-48px, 0.59px, 0); }
    75% { transform: translate3d(-40px, 0px, 0); }
    80% { transform: translate3d(-32px, -0.59px, 0); }
    85% { transform: translate3d(-24px, -0.95px, 0); }
    90% { transform: translate3d(-16px, -0.95px, 0); }
    95% { transform: translate3d(-8px, -0.59px, 0); }
    100% { transform: translate3d(0px, 0px, 0); }
}
@keyframes dc-wave-mid {
    0% { transform: translate3d(0px, 0px, 0); }
    5% { transform: translate3d(-12px, -0.49px, 0); }
    10% { transform: translate3d(-24px, -0.94px, 0); }
    15% { transform: translate3d(-36px, -1.29px, 0); }
    20% { transform: translate3d(-48px, -1.52px, 0); }
    25% { transform: translate3d(-60px, -1.60px, 0); }
    30% { transform: translate3d(-72px, -1.52px, 0); }
    35% { transform: translate3d(-84px, -1.29px, 0); }
    40% { transform: translate3d(-96px, -0.94px, 0); }
    45% { transform: translate3d(-108px, -0.49px, 0); }
    50% { transform: translate3d(-120px, 0px, 0); }
    55% { transform: translate3d(-132px, 0.49px, 0); }
    60% { transform: translate3d(-144px, 0.94px, 0); }
    65% { transform: translate3d(-156px, 1.29px, 0); }
    70% { transform: translate3d(-168px, 1.52px, 0); }
    75% { transform: translate3d(-180px, 1.60px, 0); }
    80% { transform: translate3d(-192px, 1.52px, 0); }
    85% { transform: translate3d(-204px, 1.29px, 0); }
    90% { transform: translate3d(-216px, 0.94px, 0); }
    95% { transform: translate3d(-228px, 0.49px, 0); }
    100% { transform: translate3d(-240px, 0px, 0); }
}
@keyframes dc-wave-front {
    0% { transform: translate3d(-320px, 0px, 0); }
    5% { transform: translate3d(-304px, 0.68px, 0); }
    10% { transform: translate3d(-288px, 1.29px, 0); }
    15% { transform: translate3d(-272px, 1.78px, 0); }
    20% { transform: translate3d(-256px, 2.09px, 0); }
    25% { transform: translate3d(-240px, 2.20px, 0); }
    30% { transform: translate3d(-224px, 2.09px, 0); }
    35% { transform: translate3d(-208px, 1.78px, 0); }
    40% { transform: translate3d(-192px, 1.29px, 0); }
    45% { transform: translate3d(-176px, 0.68px, 0); }
    50% { transform: translate3d(-160px, 0px, 0); }
    55% { transform: translate3d(-144px, -0.68px, 0); }
    60% { transform: translate3d(-128px, -1.29px, 0); }
    65% { transform: translate3d(-112px, -1.78px, 0); }
    70% { transform: translate3d(-96px, -2.09px, 0); }
    75% { transform: translate3d(-80px, -2.20px, 0); }
    80% { transform: translate3d(-64px, -2.09px, 0); }
    85% { transform: translate3d(-48px, -1.78px, 0); }
    90% { transform: translate3d(-32px, -1.29px, 0); }
    95% { transform: translate3d(-16px, -0.68px, 0); }
    100% { transform: translate3d(0px, 0px, 0); }
}
/* Signal: Fenster 320 px (= Maskenperiode) in 20 s nach rechts, Linie exakt zurück. */
@keyframes dc-wave-signal {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(320px, 0, 0); }
}
@keyframes dc-wave-signal-line {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-320px, 0, 0); }
}

/* Leerlauf (dc-shell.js): 45 s ohne Eingabe oder Tab verborgen → anhalten. „paused" friert das aktuelle Bild
   ein, die Welle springt weder beim Anhalten noch beim Weiterlaufen. Grund: Ein Browser-Tab, der den ganzen Tag
   offen steht, soll nicht dauernd rechnen — und wird der Admin-PC selbst ferngewartet oder aufgenommen, änderte
   die laufende Welle sonst in jedem Bild dieselben Kacheln. */
.dc-wave-idle .dc-wave-back, .dc-wave-idle .dc-wave-mid, .dc-wave-idle .dc-wave-front,
.dc-wave-idle .dc-wave-signal, .dc-wave-idle .dc-wave-signal-line {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .dc-wave-back, .dc-wave-mid, .dc-wave-front, .dc-wave-signal, .dc-wave-signal-line {
        animation: none;
        will-change: auto;
    }
}

/* Niedrige Fenster: den durchsichtigen OBEREN Teil der Welle abschneiden, nicht den unteren — so bleiben Band
   und Name deckungsgleich. */
@media (max-height: 820px) {
    .dc-wave { height: 120px; }
    .dc-wave-layer { top: -40px; }
    .dc-wave-haze { top: -40px; }
}

/* Mini-Modus (zugeklappt): nur Symbole, die Welle bleibt als dekorativer Streifen. */
html body .mud-layout.dc-shell .mud-drawer--closed .dc-side-head {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

html body .mud-layout.dc-shell .mud-drawer--closed .dc-side-logo {
    width: 36px;
    height: 36px;
}

html body .mud-layout.dc-shell .mud-drawer--closed .dc-side-brand,
html body .mud-layout.dc-shell .mud-drawer--closed .dc-side-badge,
/* Texte nur OPTISCH ausblenden: Mit display:none fielen sie aus dem Accessibility-Baum. */
html body .mud-layout.dc-shell .mud-drawer--closed .dc-wave-company,
html body .mud-layout.dc-shell .mud-drawer--closed .dc-side-info-row span,
html body .mud-layout.dc-shell .mud-drawer--closed .dc-side-nav .mud-nav-link-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

html body .mud-layout.dc-shell .mud-drawer--closed .dc-side-nav {
    padding: 0 8px;
}

html body .mud-layout.dc-shell .mud-drawer--closed .dc-side-nav .mud-nav-link {
    justify-content: center;
    padding: 0;
}

html body .mud-layout.dc-shell .mud-drawer--closed .dc-side-nav .mud-nav-link .mud-nav-link-icon {
    margin-right: 0;
}

html body .mud-layout.dc-shell .mud-drawer--closed .dc-side-info {
    padding: 0;
}

html body .mud-layout.dc-shell .mud-drawer--closed .dc-side-info-row {
    justify-content: center;
}

/* ------------------------------------------------------------------ Kopfleiste */

/* z-index UNTER den Menüs (MudBlazor: Popover 1200/1201; Seitenleiste 1100) — mit MudBlazors Vorgabe 1300 lag
   die Leiste über der Klick-Fläche offener Menüs, ein Klick auf ihre Knöpfe schloss das Menü dann nicht. */
html body .mud-layout.dc-shell .mud-appbar {
    position: fixed;
    z-index: 1150;
    top: var(--dc-gap);
    left: var(--dc-content-left) !important;
    right: var(--dc-gap);
    width: auto !important;
    margin: 0 !important;
    height: var(--dc-head-h);
    background: transparent !important;
    border: 0 !important;
    border-radius: var(--dc-radius-lg) var(--dc-radius-lg) 0 0;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: var(--dc-text);
    transition: left .22s ease;
}

html body .mud-layout.dc-shell .mud-appbar::after,
html body .mud-layout.dc-shell .mud-appbar::before {
    content: none;
}

html body .mud-layout.dc-shell .mud-appbar .mud-toolbar {
    height: 100%;
    min-height: 0;
    padding: 0 16px 0 12px;
}

.dc-head {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-width: 0;
}

.dc-head-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
}

/* Seitentitel in der Kopfleiste (wie die Kopfzeile der RemoteCircle-Demo) — die Seite, auf der man steht. */
.dc-head-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.15rem;
    font-weight: 650;
    letter-spacing: .005em;
    color: var(--dc-text);
    text-shadow: var(--dc-text-depth);
}

.dc-head-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
}

.dc-head-right > * {
    flex: 0 0 auto;
}

.dc-head-right form {
    margin: 0;
}

/* Runde Glasknöpfe */
.dc-head-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--dc-pill-border);
    background: var(--dc-pill-bg);
    color: var(--dc-text);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.dc-head-btn:hover {
    background: var(--dc-card-bg-hover);
}

.dc-head-btn:focus-visible,
.dc-head-account:focus-visible,
.dc-status-update:focus-visible {
    outline: 2px solid var(--dc-accent);
    outline-offset: 2px;
}

.dc-head-btn-plain {
    background: transparent;
    border-color: transparent;
    color: var(--dc-text-muted);
}

.dc-head-btn-plain:hover {
    color: var(--dc-text);
    background: var(--dc-row-hover);
}

/* Konto-Chip: Avatar mit Initiale + Name, führt zu den eigenen Kontoeinstellungen. */
.dc-head-account {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 14px 0 4px;
    min-width: 0;
    border-radius: 999px;
    border: 1px solid var(--dc-pill-border);
    background: var(--dc-pill-bg);
    color: var(--dc-text);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease;
}

.dc-head-account:hover {
    background: var(--dc-card-bg-hover);
}

.dc-head-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--dc-icon-tile-blue);
    color: var(--dc-accent-contrast);
    font-size: .9rem;
    font-weight: 700;
    text-transform: uppercase;
}

.dc-head-account-name {
    min-width: 0;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .dc-head-account-name {
        display: none;
    }

    .dc-head-account {
        padding: 0 4px;
    }
}

/* ------------------------------------------------------------------ Inhalt (Scrollbereich) */

html body .mud-layout.dc-shell .mud-main-content {
    position: fixed !important;
    top: calc(var(--dc-gap) + var(--dc-head-h));
    bottom: calc(var(--dc-gap) + var(--dc-status-h));
    left: var(--dc-content-left);
    right: var(--dc-gap);
    z-index: 1;
    margin: 0 !important;
    padding: 6px 22px 18px 22px !important;
    overflow-x: hidden;
    overflow-y: auto;
    color: var(--dc-text);
    /* Die Kopfleiste liegt AUSSERHALB des Scrollbereichs: klebende Köpfe (sticky mit
       top: var(--mud-appbar-height)) rasten am oberen Rand des Scrollbereichs ein. */
    --mud-appbar-height: 0px;
    transition: left .22s ease;
    /* Inhalt verschwindet an Ober- und Unterkante weich im Rand statt hart unter der Kopfleiste. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6px, #000 calc(100% - 10px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 6px, #000 calc(100% - 10px), transparent 100%);
}

/* Fernwartung im Vollbild: Der Bildrahmen selbst geht in den Vollbildmodus des Browsers — eine Maske am
   Vorfahren würde ihn dort nicht berühren, außerhalb aber an den Rändern abblenden. Deshalb auf der
   Fernwartungsseite ohne Maske (MainLayout setzt dc-page-remote). */
html body .mud-layout.dc-shell.dc-page-remote .mud-main-content {
    -webkit-mask-image: none;
    mask-image: none;
}

/* ------------------------------------------------------------------ Statusleiste */

.dc-shell-status {
    position: fixed;
    left: var(--dc-content-left);
    right: var(--dc-gap);
    bottom: var(--dc-gap);
    z-index: 2;
    height: var(--dc-status-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 22px;
    border-top: 1px solid var(--dc-row-divider);
    font-size: .78rem;
    color: var(--dc-text-muted);
    transition: left .22s ease;
}

/* MudBlazor schiebt jedes div NACH einem Mini-Drawer per margin-left um die Drawer-Breite nach rechts
   („.mud-drawer-mini ~ div:not(.mud-main-content)"). Die Statusleiste ist fixed und über „left" verankert —
   ohne diese Regel stand sie versetzt. :not(#…) hebt die Regel über MudBlazors !important (ID-Gewicht). */
.mud-layout.dc-shell .dc-shell-status:not(#dc-none),
.mud-layout.dc-shell .dc-shell-panel:not(#dc-none) {
    margin: 0 !important;
}

.dc-status-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    white-space: nowrap;
}

.dc-status-item .mud-icon-root {
    font-size: 1rem;
}

.dc-status-right {
    display: flex;
    align-items: center;
    gap: 16px;
    white-space: nowrap;
}

.dc-status-ok .mud-icon-root {
    color: var(--dc-success);
}

.dc-status-update {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border: 1px solid color-mix(in srgb, var(--dc-warning) 45%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--dc-warning) 14%, transparent);
    color: var(--dc-warning-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.dc-status-update:hover {
    background: color-mix(in srgb, var(--dc-warning) 24%, transparent);
    border-color: var(--dc-warning);
}

/* ------------------------------------------------------------------ Allgemeine Flächen im Inhalt */

/* Karten liegen schon auf der weichgezeichneten Scheibe: Tönung + Kante, kein zweiter Filter, keine zweite
   Lichtkante. */
html body .mud-layout.dc-shell .mud-main-content .mud-paper:not(.mud-alert) {
    background-color: var(--dc-card-bg) !important;
    background-image: none !important;
    border: 1px solid var(--dc-card-border) !important;
    border-radius: var(--dc-radius-md);
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--dc-text);
}

html body .mud-layout.dc-shell .mud-main-content .mud-paper:not(.mud-alert)::before {
    content: none;
}

/* Verschachtelt (Tabelle in einer Karte, Karte in Karte): nicht doppelt tönen. */
html body .mud-layout.dc-shell .mud-main-content .mud-paper .mud-paper:not(.mud-alert) {
    background-color: transparent !important;
    border-color: var(--dc-row-divider) !important;
}

/* Tabellen: Steht eine Tabelle allein, IST sie die Glas-Karte; liegt sie in einer Karte, bleibt sie durchsichtig.
   Ohne eigenen Weichzeichner — das alte Grundrezept (deploycircle.css) gab jeder .mud-table blur + saturate,
   auf einer Karte ergab das einen hellen Schleier über dem Tabellenkopf (Sichtprüfung 28.09.2026). */
html body .mud-layout.dc-shell .mud-main-content .mud-table {
    background-color: var(--dc-card-bg) !important;
    background-image: none !important;
    border: 1px solid var(--dc-card-border) !important;
    border-radius: var(--dc-radius-md);
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

html body .mud-layout.dc-shell .mud-main-content .mud-paper .mud-table {
    background-color: transparent !important;
    border: 0 !important;
}

/* „Keine Einträge"-Zeile: MudBlazor färbt sie in der Surface-Farbe (deckender dunkler Block). */
html body .mud-layout.dc-shell .mud-main-content .mud-table-empty-row {
    background-color: transparent !important;
    color: var(--dc-text-muted);
}

/* Feststehender Tabellenkopf (FixedHeader): braucht eine Fläche, sonst scrollen Zeilen sichtbar darunter durch. */
html body .mud-layout.dc-shell .mud-main-content .mud-table-sticky-header .mud-table-head .mud-table-cell {
    background-color: var(--dc-sticky-bg) !important;
}

html body .mud-layout.dc-shell .mud-main-content .mud-table-container,
html body .mud-layout.dc-shell .mud-main-content .mud-table-root,
html body .mud-layout.dc-shell .mud-main-content .mud-table .mud-toolbar,
html body .mud-layout.dc-shell .mud-main-content .mud-table-head .mud-table-row,
html body .mud-layout.dc-shell .mud-main-content .mud-table-body .mud-table-row,
html body .mud-layout.dc-shell .mud-main-content .mud-table-pagination {
    background-color: transparent !important;
}

html body .mud-layout.dc-shell .mud-main-content .mud-table .mud-table-cell {
    border-bottom-color: var(--dc-row-divider);
    color: var(--dc-text);
}

/* Spaltenköpfe IMMER einzeilig — ein umgebrochener Kopf („LETZTE / VERBINDUNG") macht die ganze Tabelle unruhig. */
html body .mud-layout.dc-shell .mud-main-content .mud-table-head .mud-table-cell,
html body .mud-layout.dc-shell .mud-main-content .mud-simple-table thead th {
    color: var(--dc-text-muted);
    white-space: nowrap;
}

html body .mud-layout.dc-shell .mud-main-content .mud-table-body .mud-table-row:hover {
    background: var(--dc-row-hover) !important;
}

/* Kompakte Listen (PC-Liste, Aufträge, Pakete …): jede Zeile genau EINE Zeile hoch — mal ein-, mal zwei-, mal
   dreizeilige Zeilen machten die Listen unruhig (Wunsch 28.09.2026). Lange Texte kürzen sich selbst mit „…"
   (.dc-clip, voller Text im Tooltip); passt eine Tabelle trotzdem nicht, rollt sie in ihrer Karte waagerecht,
   statt umzubrechen. Zeilen über die ganze Breite (colspan: aufgeklappte Details, Protokollauszüge) dürfen
   umbrechen. Schmale Zellabstände, damit die Aktions-Symbole der PC-Liste auch bei 1600 px noch Platz haben.
   Unter 960 px stapelt MudBlazor die Zeilen ohnehin (DataLabel) — dort gilt die Regel nicht. */
@media (min-width: 960px) {
    html body .mud-layout.dc-shell .mud-main-content .dc-compact-table :is(td, th):not([colspan]) {
        white-space: nowrap;
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Symbol-Knöpfe der Zeilen (PC-Liste: bis zu acht) eng und eine Spur kleiner. */
    html body .mud-layout.dc-shell .mud-main-content .dc-compact-table .mud-icon-button {
        padding: 3px;
        margin: 0;
    }

    html body .mud-layout.dc-shell .mud-main-content .dc-compact-table .mud-icon-button .mud-icon-root {
        font-size: 18px;
    }
}

.dc-clip {
    display: inline-block;
    max-width: var(--dc-clip-w, 200px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* Zweite Angabe in derselben Zeile (z. B. Hostname neben dem Anzeigenamen) statt einer zweiten Zeile. */
.dc-inline-sub {
    margin-left: 6px;
    font-size: .72rem;
    color: var(--dc-text-faint);
}

html body .mud-layout.dc-shell .mud-main-content .mud-table-body .mud-table-row.mud-table-row-group-header,
html body .mud-layout.dc-shell .mud-main-content .dc-grouped-table tbody tr:has(> .mud-table-cell-custom-group) {
    background: var(--dc-group-bg) !important;
}

/* Eingabefelder (umrandet) */
html body .mud-layout.dc-shell .mud-main-content .mud-input.mud-input-outlined {
    background: var(--dc-input-bg);
    border-radius: var(--dc-radius-sm);
}

html body .mud-layout.dc-shell .mud-main-content .mud-input.mud-input-outlined .mud-input-slot {
    background: transparent !important;
}

html body .mud-layout.dc-shell .mud-main-content .mud-input.mud-input-outlined:not(:focus-within):not(.mud-input-error) .mud-input-outlined-border {
    border-color: var(--dc-input-border);
    border-radius: var(--dc-radius-sm);
}

html body .mud-layout.dc-shell .mud-main-content .mud-divider {
    border-color: var(--dc-row-divider);
}

/* Aufklapp-Panels (Einstellungen: „Weitere Wege", „Schlüssel verwalten"): Glas statt MudBlazors deckender
   Surface-Farbe; in einer Karte nur ein Hauch, damit es nicht doppelt tönt. */
html body .mud-layout.dc-shell .mud-main-content .mud-expand-panel,
html:not(#dc-shell-none) body .mud-dialog .mud-expand-panel {
    background-color: var(--dc-card-bg) !important;
    border: 1px solid var(--dc-card-border) !important;
    border-radius: var(--dc-radius-md) !important;
    box-shadow: none !important;
    color: var(--dc-text);
}

html body .mud-layout.dc-shell .mud-main-content .mud-paper .mud-expand-panel {
    background-color: var(--dc-group-bg) !important;
    border-color: var(--dc-row-divider) !important;
}

html body .mud-layout.dc-shell .mud-main-content .mud-expand-panel + .mud-expand-panel {
    margin-top: 8px;
}

/* Reiter (Einstellungen, PC-Detail): die Reiterleiste sitzt auf der Karte, kein eigener deckender Streifen. */
html body .mud-layout.dc-shell .mud-main-content .mud-tabs-tabbar,
html body .mud-layout.dc-shell .mud-main-content .mud-tabs-toolbar {
    background: transparent !important;
}

html body .mud-layout.dc-shell .mud-main-content .mud-tabs-tabbar {
    border-bottom: 1px solid var(--dc-row-divider);
}

/* ------------------------------------------------------------------ Seitenkopf (Karte)

   Titel groß mit Tiefe, daneben die Unterzeile; rechts die Knöpfe als Pillen. Titel und Unterzeile bleiben
   IMMER einzeilig (zu lang → „…") — ein Kopf, der je nach Seite ein- oder zweizeilig ist, lässt die Seiten
   unterschiedlich hoch beginnen. */
html body .mud-layout.dc-shell .mud-main-content .dc-page-head {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 10px 14px;
    flex-wrap: wrap;
    margin: 0 0 16px 0;
    padding: 14px 20px;
    border-radius: var(--dc-radius-md);
    background: var(--dc-card-bg) !important;
    border: 1px solid var(--dc-card-border) !important;
    box-shadow: none !important;
    color: var(--dc-text);
}

html body .mud-layout.dc-shell .mud-main-content .dc-page-head::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--dc-accent), #22CCE8 40%, transparent 80%);
    opacity: .75;
    pointer-events: none;
}

html body .mud-layout.dc-shell .mud-main-content .dc-page-head > .mud-typography-h5,
html body .mud-layout.dc-shell .mud-main-content .dc-page-head > .mud-typography-h4,
html body .mud-layout.dc-shell .mud-main-content .dc-page-head > .mud-typography-h6 {
    font-size: 1.6rem;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -.005em;
    white-space: nowrap;
    color: var(--dc-text);
    text-shadow: var(--dc-text-depth-strong);
}

html body .mud-layout.dc-shell .mud-main-content .dc-page-head > .mud-typography-body2,
html body .mud-layout.dc-shell .mud-main-content .dc-page-head > .dc-kpi-hint {
    min-width: 0;
    max-width: 42ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--dc-text-muted);
    font-size: .92rem;
}

/* Knöpfe im Seitenkopf als Pillen (wie RemoteCircles Kopfkarte). */
html body .mud-layout.dc-shell .mud-main-content .dc-page-head .mud-button-root:not(.mud-icon-button) {
    border-radius: 999px;
    white-space: nowrap;
}

html body .mud-layout.dc-shell .mud-main-content .dc-page-head .mud-button-outlined {
    background: var(--dc-pill-bg);
    border-color: var(--dc-input-border);
    color: var(--dc-text);
}

html body .mud-layout.dc-shell .mud-main-content .dc-page-head .mud-button-outlined:not(.mud-button-disabled):hover {
    background: var(--dc-card-bg-hover);
    border-color: var(--dc-accent);
}

/* Kopfzeile der PC-Ansicht: bleibt beim Blättern stehen, deshalb fast deckend (sonst schiene die Liste durch). */
html body .mud-layout.dc-shell .mud-main-content .dc-device-header {
    top: 0;
    background: var(--dc-sticky-bg) !important;
    border: 1px solid var(--dc-card-border) !important;
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .45) !important;
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    color: var(--dc-text);
}

html body .mud-layout.dc-shell .mud-main-content .dc-device-header-name {
    text-shadow: var(--dc-text-depth);
}

html body .mud-layout.dc-shell .mud-main-content .dc-device-header-sub {
    color: var(--dc-text-muted);
}

/* ------------------------------------------------------------------ Kennzahl-Kacheln

   Aufbau wie RemoteCircles Kennzahl-Karten: oben Symbol + Titel in EINER Zeile, darunter die Zahl, darunter
   eine Hinweiszeile. Alle drei Zeilen einzeilig (zu lang → „…", voller Text im Tooltip) und die Kachel hat
   eine feste Mindesthöhe — vorher brach „Wartet auf Freigabe" in schmalen Kacheln zweizeilig um, der Hinweis
   „6 Paket(e), 7 Version(en)" dreizeilig, und die Reihe sah zerfahren aus (Wunsch 28.09.2026). */
html body .mud-layout.dc-shell .mud-main-content .mud-paper.dc-kpi {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* linksbündig wie RemoteCircles Kennzahl-Karten (deploycircle.css zentrierte die alte Kachel) */
    align-items: stretch;
    gap: 8px;
    min-height: 124px;
    height: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 14px 16px;
    border-radius: 14px;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
    container-type: inline-size;
    container-name: dc-kpi;
}

a:hover > .mud-paper.dc-kpi,
html body .mud-layout.dc-shell .mud-main-content a:hover .mud-paper.dc-kpi {
    background-color: var(--dc-card-bg-hover) !important;
    border-color: var(--dc-accent) !important;
}

.dc-kpi-top {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 36px;
}

html body .mud-layout.dc-shell .mud-main-content .dc-kpi .dc-kpi-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--dc-icon-tile-blue);
    color: var(--dc-accent-contrast);
    box-shadow: 0 6px 16px var(--dc-accent-soft);
}

html body .mud-layout.dc-shell .mud-main-content .dc-kpi .dc-kpi-icon .mud-icon-root {
    font-size: 20px;
}

/* Tönungen der Symbolkachel — gefüllt mit weißem Symbol wie bei RemoteCircle (auf dem blauen Glas verschwand
   eine 20-%-Tönung fast ganz; gefüllt bleibt die Farbe als Signal lesbar). */
html body .mud-layout.dc-shell .mud-main-content .dc-kpi-ok .dc-kpi-icon {
    background: linear-gradient(145deg, #34C77B, #1E9E5A);
    box-shadow: 0 6px 16px rgba(34, 179, 94, .26);
}

html body .mud-layout.dc-shell .mud-main-content .dc-kpi-warn .dc-kpi-icon {
    background: linear-gradient(145deg, #E8931A, #BF6A00);
    box-shadow: 0 6px 16px rgba(242, 157, 27, .28);
}

html body .mud-layout.dc-shell .mud-main-content .dc-kpi-error .dc-kpi-icon {
    background: linear-gradient(145deg, #F2596B, #D6334B);
    box-shadow: 0 6px 16px rgba(239, 68, 89, .28);
}

html body .mud-layout.dc-shell .mud-main-content .dc-kpi-muted .dc-kpi-icon {
    background: var(--dc-pill-bg);
    color: var(--dc-text-muted);
    box-shadow: none;
    border: 1px solid var(--dc-pill-border);
}

html body .mud-layout.dc-shell .mud-main-content .dc-kpi .dc-kpi-label {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: var(--dc-text-muted);
}

html body .mud-layout.dc-shell .mud-main-content .dc-kpi .dc-kpi-value {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--dc-text);
    font-variant-numeric: tabular-nums;
    text-shadow: var(--dc-text-depth-strong);
}

html body .mud-layout.dc-shell .mud-main-content .dc-kpi .dc-kpi-hint {
    min-height: 1.2em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .8rem;
    line-height: 1.2;
    color: var(--dc-text-faint);
}

/* Schmale Kacheln (sechs in einer Reihe, Seitenleiste offen): Symbol und Schrift eine Stufe kleiner. */
@container dc-kpi (max-width: 170px) {
    .dc-kpi-top {
        gap: 8px;
    }

    html body .mud-layout.dc-shell .mud-main-content .dc-kpi .dc-kpi-icon {
        width: 30px;
        height: 30px;
        border-radius: 9px;
    }

    html body .mud-layout.dc-shell .mud-main-content .dc-kpi .dc-kpi-icon .mud-icon-root {
        font-size: 17px;
    }

    html body .mud-layout.dc-shell .mud-main-content .dc-kpi .dc-kpi-label {
        font-size: .84rem;
    }
}

/* ------------------------------------------------------------------ Tiefe der Schrift

   Überschriften in Karten und die großen Zahlen bekommen den feinen Schatten aus den Tokens: Die Schrift liegt
   sichtbar AUF der Glasscheibe (Wunsch 28.09.2026). Fließtext bewusst nicht — dort würde er nur weich zeichnen. */
html body .mud-layout.dc-shell .mud-main-content .mud-typography-h4,
html body .mud-layout.dc-shell .mud-main-content .mud-typography-h5,
html body .mud-layout.dc-shell .mud-main-content .mud-typography-h6,
html body .mud-layout.dc-shell .mud-main-content .mud-typography-subtitle1 {
    text-shadow: var(--dc-text-depth);
}

/* ------------------------------------------------------------------ Overlay-Flächen (außerhalb des Layouts) */

/* Geschlossene Popover (MudMenu hält sie im Provider bereit) dürfen keinen Platz einnehmen: Das Glas-Grundrezept
   in deploycircle.css macht jede .mud-paper zu position:relative — MudBlazor-9-Menüs SIND .mud-paper. */
html body .mud-popover-provider > .mud-popover:not(.mud-popover-open) {
    position: absolute !important;
    border-width: 0 !important;
}

/* ALLE Popover wieder so positionieren, wie MudBlazor es erwartet: absolut bzw. fest bei PopoverFixed (sein
   Skript liest die berechnete Positionsart). Bewusst OHNE !important — setzt MudBlazor die Lage inline, gilt
   dessen Wahl; überstimmt wird nur das Glas-Grundrezept (.mud-paper → relative). */
html:not(#dc-shell-none) body .mud-popover {
    position: absolute;
}

html:not(#dc-shell-none) body .mud-popover.mud-popover-fixed {
    position: fixed;
}

/* NUR geöffnete Popover tönen (ein Rahmen gäbe geschlossenen 2 px Höhe). */
html:not(#dc-shell-none) body .mud-popover.mud-popover-open:not(.mud-tooltip) {
    background-color: var(--dc-popover-bg) !important;
    background-image: none !important;
    border: 1px solid var(--dc-panel-border) !important;
    border-radius: var(--dc-radius-md);
    box-shadow: var(--dc-panel-shadow) !important;
    -webkit-backdrop-filter: blur(var(--dc-panel-blur)) saturate(150%);
    backdrop-filter: blur(var(--dc-panel-blur)) saturate(150%);
    color: var(--dc-text);
}

html:not(#dc-shell-none) body .mud-popover:not(.mud-tooltip) .mud-paper,
html:not(#dc-shell-none) body .mud-popover:not(.mud-tooltip) .mud-list {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

html:not(#dc-shell-none) body .mud-popover:not(.mud-tooltip) .mud-paper::before {
    content: none;
}

/* Tooltips fangen keine Klicks ab (sie lagen sonst über Nachbarknöpfen). DeployCircle hat keine
   interaktiven Tooltips. */
html body .mud-popover.mud-tooltip {
    pointer-events: none;
}

html:not(#dc-shell-none) body .mud-popover:not(.mud-tooltip) .mud-list-item:hover,
html:not(#dc-shell-none) body .mud-popover:not(.mud-tooltip) .mud-menu-item:hover {
    background: var(--dc-row-hover) !important;
}

html:not(#dc-shell-none) body .mud-dialog {
    background-color: var(--dc-popover-bg) !important;
    background-image: none !important;
    border: 1px solid var(--dc-panel-border) !important;
    border-radius: var(--dc-radius-lg);
    box-shadow: var(--dc-panel-shadow) !important;
    color: var(--dc-text);
}

html:not(#dc-shell-none) body .mud-dialog::before {
    content: none;
}

html:not(#dc-shell-none) body .mud-dialog .mud-dialog-title {
    border-bottom: 1px solid var(--dc-row-divider);
}

/* Knopfleiste bündig mit dem Inhalt: MudBlazor setzt 8 px rundum, Titel und Inhalt haben 24 px Seitenrand —
   der letzte Knopf stand sonst 16 px weiter rechts als alles darüber. Knopftexte brechen NIE um (ein zweizeiliger
   Knopf neben einzeiligen wirkt kaputt); reicht die Breite nicht, rutscht der ganze Knopf in eine zweite Reihe. */
html:not(#dc-shell-none) body .mud-dialog .mud-dialog-actions {
    flex-wrap: wrap;
    padding: 12px 24px 20px;
}

html:not(#dc-shell-none) body .mud-dialog .mud-dialog-actions .mud-button-root {
    white-space: nowrap;
}

/* Inhalt der Dialoge im Design — der MudDialogProvider steht VOR dem MudLayout, ein Dialog ist also dessen
   GESCHWISTER und wird von keiner Inhaltsregel oben erreicht. Deshalb hier dasselbe, an .mud-dialog gehängt. */
html:not(#dc-shell-none) body .mud-dialog .mud-dialog-title,
html:not(#dc-shell-none) body .mud-dialog .mud-dialog-content {
    color: var(--dc-text);
}

html:not(#dc-shell-none) body .mud-dialog .mud-divider {
    border-color: var(--dc-row-divider);
}

html:not(#dc-shell-none) body .mud-dialog .mud-input.mud-input-outlined {
    background: var(--dc-input-bg);
    border-radius: var(--dc-radius-sm);
}

html:not(#dc-shell-none) body .mud-dialog .mud-input.mud-input-outlined .mud-input-slot {
    background: transparent !important;
}

html:not(#dc-shell-none) body .mud-dialog .mud-input.mud-input-outlined:not(:focus-within):not(.mud-input-error) .mud-input-outlined-border {
    border-color: var(--dc-input-border);
    border-radius: var(--dc-radius-sm);
}

html:not(#dc-shell-none) body .mud-dialog .mud-input-label:not(.mud-input-error),
html:not(#dc-shell-none) body .mud-dialog .mud-input-helper-text:not(.mud-input-error) {
    color: var(--dc-text-muted);
}

html:not(#dc-shell-none) body .mud-dialog .mud-table {
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid var(--dc-row-divider) !important;
    box-shadow: none !important;
    color: var(--dc-text);
}

html:not(#dc-shell-none) body .mud-dialog .mud-table .mud-table-cell {
    border-bottom-color: var(--dc-row-divider);
    color: var(--dc-text);
}

html:not(#dc-shell-none) body .mud-dialog .mud-table .mud-table-head .mud-table-cell {
    color: var(--dc-text-muted);
    white-space: nowrap;
}

html:not(#dc-shell-none) body .mud-dialog .mud-table .mud-table-body .mud-table-row:hover {
    background: var(--dc-row-hover) !important;
}

/* Verschachtelte Flächen IM Dialog: nicht doppelt tönen, keine zweite Lichtkante. */
html:not(#dc-shell-none) body .mud-dialog .mud-paper:not(.mud-alert):not(.mud-dialog) {
    background-color: var(--dc-card-bg) !important;
    background-image: none !important;
    border: 1px solid var(--dc-card-border) !important;
    border-radius: var(--dc-radius-md);
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--dc-text);
}

html:not(#dc-shell-none) body .mud-dialog .mud-paper:not(.mud-alert):not(.mud-dialog)::before {
    content: none;
}

/* ------------------------------------------------------------------ Hinweis auf neue Version (ServerUpdateDialog) */

/* Etwas breiter als MudBlazors „Small" (600 px): drei Knöpfe passen dann in eine Reihe, die Texte bleiben gut lesbar. */
html:not(#dc-shell-none) body .mud-dialog.dc-update-dialog {
    max-width: 680px;
}

.dc-update-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dc-update-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--dc-icon-tile-blue);
    color: var(--dc-accent-contrast);
    box-shadow: 0 8px 20px var(--dc-accent-soft);
}

.dc-update-headtext {
    min-width: 0;
}

.dc-update-title {
    font-size: 1.2rem;
    font-weight: 650;
    line-height: 1.25;
    color: var(--dc-text);
    text-shadow: var(--dc-text-depth);
}

.dc-update-sub {
    margin-top: 2px;
    font-size: .82rem;
    color: var(--dc-text-muted);
}

.dc-update-label {
    margin: 4px 0 10px 0;
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dc-text-faint);
}

/* Die Liste scrollt; unten blendet sie weich aus, damit eine angeschnittene Karte als „geht weiter" lesbar ist
   statt wie ein Darstellungsfehler. Der Innenabstand unten lässt die letzte Karte ganz aus der Blende scrollen. */
.dc-update-changes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 44vh;
    overflow-y: auto;
    padding: 0 4px 22px 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 26px), transparent 100%);
}

.dc-update-change {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px 14px;
    border-radius: var(--dc-radius-md);
    background: var(--dc-card-bg);
    border: 1px solid var(--dc-card-border);
}

.dc-update-version {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--dc-grad);
    color: #FFFFFF;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}

.dc-update-body {
    min-width: 0;
}

/* Titel als eigene Zeile mit Tiefe, der Text ruhiger darunter — wie eine Überschrift mit Absatz. */
.dc-update-change-title {
    font-size: .92rem;
    font-weight: 650;
    line-height: 1.35;
    color: var(--dc-text);
    text-shadow: var(--dc-text-depth);
}

.dc-update-text {
    font-size: .86rem;
    line-height: 1.55;
    color: var(--dc-text-muted);
}

.dc-update-change-title + .dc-update-text {
    margin-top: 4px;
}

.dc-update-howto {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: var(--dc-radius-md);
    background: var(--dc-accent-soft);
    border: 1px solid color-mix(in srgb, var(--dc-accent) 35%, transparent);
    font-size: .85rem;
    line-height: 1.5;
    color: var(--dc-text-muted);
}

/* Direkt nach der Liste: deren Blende bringt schon Luft mit. */
.dc-update-changes + .dc-update-howto {
    margin-top: 2px;
}

.dc-update-howto .mud-icon-root {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--dc-accent);
}

.dc-update-howto b {
    color: var(--dc-text);
}

/* ------------------------------------------------------------------ Zeitplan-Dialog (ScheduleDialog, 1.19.0) */

html:not(#dc-shell-none) body .mud-dialog.dc-schedule-dialog {
    max-width: 780px;
}

/* Drei Abschnitte „Was · Wann · Für wen" als ruhige Karten mit kleiner Überschrift. */
.dc-sched-section {
    margin-bottom: 12px;
    padding: 14px 16px 16px;
    border-radius: var(--dc-radius-md);
    background: var(--dc-card-bg);
    border: 1px solid var(--dc-card-border);
}

.dc-sched-label {
    margin-bottom: 10px;
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dc-text-faint);
}

.dc-sched-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 6px;
}

.dc-sched-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0;
}

.dc-sched-row > .mud-input-control,
.dc-sched-row > .mud-select {
    margin-top: 0;
}

.dc-sched-text {
    font-size: .9rem;
    color: var(--dc-text-muted);
}

/* Kleine Auswahlfelder mitten im Satz („am [2.] Tag", „am [zweiten] [Dienstag]"). */
.dc-sched-mini {
    flex: 0 0 96px;
    max-width: 96px;
}

.dc-sched-mini.dc-sched-mini-wide {
    flex-basis: 150px;
    max-width: 150px;
}

.dc-sched-monthly .mud-radio {
    min-width: 42px;
}

/* Satz + nächste Termine: sofort sichtbar, was der Zeitplan tun wird. */
.dc-sched-preview {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--dc-radius-md);
    background: var(--dc-accent-soft);
    border: 1px solid color-mix(in srgb, var(--dc-accent) 35%, transparent);
    font-size: .88rem;
    line-height: 1.5;
    color: var(--dc-text);
}

.dc-sched-preview .mud-icon-root {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--dc-accent);
}

.dc-sched-preview b {
    text-shadow: var(--dc-text-depth);
}

.dc-sched-preview-next {
    font-size: .82rem;
    color: var(--dc-text-muted);
}

.dc-sched-devices {
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 8px;
    border-radius: var(--dc-radius-sm);
    border: 1px solid var(--dc-row-divider);
}

/* ------------------------------------------------------------------ BitLocker-Schlüssel (PC-Seite, 1.19.0) */

.dc-bl-keys {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
}

.dc-bl-key {
    padding: 10px 14px;
    border-radius: var(--dc-radius-md);
    background: var(--dc-card-bg);
    border: 1px solid var(--dc-card-border);
}

.dc-bl-key-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 6px;
}

.dc-bl-key-id {
    font-size: .9rem;
    color: var(--dc-text-muted);
}

/* Die ersten 8 Zeichen — genau die zeigt Windows auf dem Wiederherstellungsbildschirm. */
.dc-bl-key-id b {
    font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
    letter-spacing: .04em;
    color: var(--dc-text);
    text-shadow: var(--dc-text-depth);
}

.dc-bl-key-rest {
    font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
    font-size: .8rem;
    color: var(--dc-text-faint);
}

.dc-bl-key-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.dc-bl-password {
    padding: 4px 10px;
    border-radius: var(--dc-radius-sm);
    background: var(--dc-input-bg);
    border: 1px solid var(--dc-row-divider);
    font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
    font-size: .95rem;
    letter-spacing: .06em;
    white-space: nowrap;
    color: var(--dc-text-faint);
    user-select: none;
}

/* Aufgedeckt: gut lesbar, ein Klick markiert das ganze Kennwort. */
.dc-bl-password.dc-bl-password-shown {
    color: var(--dc-text);
    user-select: all;
}

html:not(#dc-shell-none) body .mud-snackbar {
    border-radius: var(--dc-radius-md);
    box-shadow: var(--dc-panel-shadow);
    -webkit-backdrop-filter: blur(var(--dc-panel-blur)) saturate(150%);
    backdrop-filter: blur(var(--dc-panel-blur)) saturate(150%);
}

/* ------------------------------------------------------------------ Schmale Fenster

   RemoteCircle ist ein Desktop-Fenster, DeployCircle läuft auch im Browser eines Tablets. Unter 960 px behält der
   Inhalt IMMER die Breite neben der Mini-Leiste; die aufgeklappte Leiste legt sich als Überlagerung darüber, statt
   den Inhalt auf wenige Pixel zusammenzudrücken. MainLayout klappt sie dort beim Start und nach jeder Navigation zu. */
@media (max-width: 959.98px) {
    html body .mud-layout.dc-shell,
    html body .mud-layout.dc-shell.dc-side-mini {
        --dc-content-left: calc(var(--dc-gap) * 2 + 68px);
    }

    html body .mud-layout.dc-shell .mud-drawer {
        z-index: 1250;
    }

    html body .mud-layout.dc-shell .mud-drawer.mud-drawer--open {
        box-shadow: 0 24px 60px rgba(0, 0, 0, .45) !important;
    }
}

@media (max-width: 599.98px) {
    html body .mud-layout.dc-shell {
        --dc-gap: 8px;
        --dc-head-h: 56px;
    }

    html body .mud-layout.dc-shell .mud-main-content {
        padding: 6px 12px 14px 12px !important;
    }

    .dc-head-title {
        font-size: 1rem;
    }

    .dc-shell-status {
        padding: 0 12px;
    }

    html body .mud-layout.dc-shell .mud-main-content .dc-page-head > .mud-typography-h5,
    html body .mud-layout.dc-shell .mud-main-content .dc-page-head > .mud-typography-h4,
    html body .mud-layout.dc-shell .mud-main-content .dc-page-head > .mud-typography-h6 {
        font-size: 1.3rem;
    }

    /* Update-Hinweis: Versionsmarke über den Titel, damit der Text die volle Breite bekommt. */
    .dc-update-change {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .dc-update-version {
        justify-self: start;
    }
}

/* ------------------------------------------------------------------ Rücksicht */

@media (prefers-reduced-transparency: reduce) {
    .dc-shell-panel,
    html body .mud-layout.dc-shell .mud-drawer,
    html:not(#dc-shell-none) body .mud-popover.mud-popover-open:not(.mud-tooltip),
    html:not(#dc-shell-none) body .mud-snackbar {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* Ohne Weichzeichner deckend — sonst schiene die Liste unter einem Menü als Geistertext durch. */
    html:not(#dc-shell-none) body .mud-popover.mud-popover-open:not(.mud-tooltip),
    html:not(#dc-shell-none) body .mud-dialog {
        background-color: var(--dc-popover-solid) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dc-shell-panel,
    .dc-shell-status,
    html body .mud-layout.dc-shell .mud-appbar,
    html body .mud-layout.dc-shell .mud-main-content {
        transition: none !important;
    }
}