/*
  DeployCircle — Glas-Optik, zweite Ausbaustufe.

  Designsprache: "Frosted Glass vor Aurora". Hinter allem liegt ein tiefer, ruhiger
  Verlauf mit zwei, drei farbigen Lichtern (Indigo, Cyan, ein Hauch Violett). Die
  Flächen darüber sind halbtransparente, weichgezeichnete Scheiben mit einer hellen
  Lichtkante oben und mehrschichtigen Schatten (ein enger Kontaktschatten + ein
  weiter, weicher Wurf). Die Markenfarbe taucht konsequent als Verlauf Indigo→Cyan
  auf: Kopfleiste, aktive Navigation, Hauptschaltflächen, Akzentlinien.

  Alle Farben hängen an den MudBlazor-Variablen, damit Hell/Dunkel automatisch
  mitziehen. Keine externen Ressourcen (LAN ohne Internet).
*/

:root {
    /* Der Markenverlauf — an genau EINER Stelle definiert. */
    --dc-grad: linear-gradient(135deg, #3D5AFE 0%, #00B8D4 100%);
    --dc-grad-soft: linear-gradient(135deg, rgba(61, 90, 254, .16), rgba(0, 184, 212, .12));
}

.dc-dark {
    --dc-grad: linear-gradient(135deg, #5C74FF 0%, #22CCE8 100%);
    --dc-grad-soft: linear-gradient(135deg, rgba(124, 140, 255, .18), rgba(56, 214, 240, .12));
}

/* ---------------------------------------------------------------- Hintergrund */

body {
    /* Hell: kühles Licht von oben, zwei Farbtupfer, unten ein Hauch Violett. */
    background-color: var(--mud-palette-background);
    background-image:
        radial-gradient(1100px 560px at 10% -12%, rgba(61, 90, 254, 0.16), transparent 60%),
        radial-gradient(950px 620px at 98% -6%, rgba(0, 184, 212, 0.13), transparent 55%),
        radial-gradient(900px 500px at 50% 112%, rgba(124, 58, 237, 0.07), transparent 60%);
    background-attachment: fixed;
    min-height: 100vh;
}

.dc-dark body {
    /* Glas (0.18.3): das Verlaufs-„Wallpaper" der Circle-Produktreihe, wortgleich mit RemoteCircle
       (Wert in dc-tokens.css). Mit Struktur, damit die weichgezeichneten Scheiben darüber etwas zeigen. */
    background-color: #0c1424;
    background-image: var(--dc-glass-wall);
}

::selection {
    background-color: rgba(61, 90, 254, .28);
}

.dc-dark ::selection {
    background-color: rgba(124, 140, 255, .38);
}

/* ------------------------------------------------------------- Rollbalken */

/* Schmale, runde Rollbalken — die Standardbalken wirken neben Glas wie Fremdkörper. */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(100, 116, 160, 0.35);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(100, 116, 160, 0.55);
}

.dc-dark ::-webkit-scrollbar-thumb {
    background-color: rgba(124, 140, 255, 0.26);
}

.dc-dark ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(124, 140, 255, 0.42);
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 160, 0.4) transparent;
}

.dc-dark * {
    scrollbar-color: rgba(124, 140, 255, 0.3) transparent;
}

/* ---------------------------------------------------------------- Layout-Korrektur */

/* Inhalt beginnt UNTER der festen Kopfleiste — ausdrücklich erzwungen.

   Hintergrund (per Repro mit dem reinen MudBlazor.min.css nachgewiesen): MudBlazor
   versetzt den Inhalt über `padding-top: var(--mud-appbar-height)` auf .mud-main-content.
   Unser Layout setzt aber `Class="pa-4"` auf den MudMainContent, und die Utility-Klasse
   (padding: 16px) steht SPÄTER in MudBlazor.min.css bei gleicher Spezifität — sie
   überschreibt damit MudBlazors eigenen Kopfleisten-Abstand. Ergebnis: Seitenköpfe und
   Kopfzeilen aller Seiten verschwanden hinter der Leiste.

   Deshalb hier mit !important (gegen die Utility) und Fallback 64px (falls die Variable
   je fehlt): Leistenhöhe + die 16px Atemraum von pa-4. Die übrigen Seiten von pa-4
   bleiben unangetastet. Die PC-Kopfzeile (.dc-device-header, sticky top: 64px) rastet
   beim Blättern weiterhin exakt unter der Leiste ein. */
.mud-layout .mud-main-content {
    padding-top: calc(var(--mud-appbar-height, 64px) + 16px) !important;
}

/* ---------------------------------------------------------------- Glas-Grundrezept */

.mud-appbar,
.mud-drawer,
.mud-paper:not(.mud-alert):not(.mud-menu-popover .mud-paper),
.mud-dialog,
.mud-table {
    background-color: rgba(255, 255, 255, 0.60) !important;
    backdrop-filter: blur(22px) saturate(165%);
    -webkit-backdrop-filter: blur(22px) saturate(165%);
    border: 1px solid rgba(255, 255, 255, 0.62);
    /* Zwei Schatten: enger Kontaktschatten + weiter, weicher Wurf. */
    box-shadow:
        0 1px 2px rgba(16, 22, 36, 0.06),
        0 18px 44px -20px rgba(16, 22, 36, 0.30);
}

.dc-dark .mud-appbar,
.dc-dark .mud-drawer,
.dc-dark .mud-paper:not(.mud-alert):not(.mud-menu-popover .mud-paper),
.dc-dark .mud-dialog,
.dc-dark .mud-table {
    background-color: rgba(19, 26, 46, 0.62) !important;
    border: 1px solid rgba(148, 163, 255, 0.11);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.45),
        0 22px 54px -22px rgba(0, 0, 0, 0.65);
}

/* Lichtkante an der Oberseite — macht aus der Fläche eine Scheibe. */
.mud-paper:not(.mud-alert),
.mud-dialog,
.mud-appbar {
    position: relative;
}

.mud-paper:not(.mud-alert)::before,
.mud-dialog::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 4%, rgba(255, 255, 255, 0.9), transparent 96%);
    pointer-events: none;
    border-radius: inherit;
}

.dc-dark .mud-paper:not(.mud-alert)::before,
.dc-dark .mud-dialog::before {
    background: linear-gradient(90deg, transparent 4%, rgba(255, 255, 255, 0.20), transparent 96%);
}

/* Dialoge schweben über allem — stärkster Blur, kräftigster Schatten. */
.mud-dialog {
    backdrop-filter: blur(28px) saturate(170%);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
}

/* Abdunkelung hinter Dialogen: leicht verwischen statt nur grau überlagern. */
.mud-overlay-dark {
    background-color: rgba(16, 22, 40, 0.40) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.dc-dark .mud-overlay-dark {
    background-color: rgba(3, 6, 14, 0.55) !important;
}

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

/* Hell trägt sie den Markenverlauf, dunkel bleibt sie zurückhaltendes Glas mit
   einer farbigen Haarlinie als Abschluss. */
.mud-appbar {
    background: linear-gradient(110deg, rgba(51, 74, 245, 0.92) 0%, rgba(0, 145, 205, 0.88) 100%) !important;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}

.dc-dark .mud-appbar {
    background: rgba(11, 17, 32, 0.72) !important;
    border-bottom: none;
}

/* Farbige Haarlinie unter der dunklen Kopfleiste — die Markenfarbe als Lichtstreifen. */
.dc-dark .mud-appbar::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(124, 140, 255, 0.65) 30%, rgba(56, 214, 240, 0.55) 70%, transparent);
    pointer-events: none;
}

.mud-appbar .mud-typography-h6 {
    font-weight: 650;
    letter-spacing: .015em;
}

/* ---------------------------------------------------------------- Navigation */

.mud-nav-link {
    position: relative;
    border-radius: 10px;
    margin: 2px 8px;
    transition: background-color .15s ease, transform .15s ease, color .15s ease;
}

.mud-nav-link:hover {
    background-color: rgba(90, 110, 255, 0.10);
    transform: translateX(2px);
}

.dc-dark .mud-nav-link:hover {
    background-color: rgba(124, 140, 255, 0.12);
}

/* Aktiver Eintrag: getönter Verlauf + Akzentbalken links in Markenfarbe. */
.mud-nav-link.active {
    background: var(--dc-grad-soft);
    font-weight: 600;
}

.mud-nav-link.active::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 3px;
    background: var(--dc-grad);
}

.mud-nav-link.active .mud-icon-root {
    color: var(--mud-palette-primary);
}

/* ------------------------------------------------------------- Schaltflächen */

/* Gefüllte Primär-Schaltflächen tragen den Markenverlauf und heben sich beim
   Zeigen leicht an — der eine Klick, um den es auf der Seite geht, darf glänzen. */
.mud-button-filled.mud-button-filled-primary:not(.mud-button-disabled) {
    background: var(--dc-grad);
    box-shadow: 0 6px 18px -8px rgba(61, 90, 254, 0.65);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.mud-button-filled.mud-button-filled-primary:not(.mud-button-disabled):hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -8px rgba(61, 90, 254, 0.75);
}

.mud-button-filled.mud-button-filled-primary:not(.mud-button-disabled):active {
    transform: translateY(0);
    filter: brightness(0.98);
}

.mud-button-filled.mud-button-filled-secondary:not(.mud-button-disabled) {
    background: linear-gradient(135deg, #00A8C6 0%, #00CFEB 100%);
    box-shadow: 0 6px 18px -8px rgba(0, 184, 212, 0.55);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.mud-button-filled.mud-button-filled-secondary:not(.mud-button-disabled):hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
}

/* Sichtbarer Tastatur-Fokus, überall gleich. */
:focus-visible {
    outline: 2px solid rgba(61, 90, 254, 0.75);
    outline-offset: 2px;
}

.dc-dark :focus-visible {
    outline-color: rgba(139, 154, 255, 0.85);
}

/* ---------------------------------------------------------------- Chips */

/* Eckiger als der Pillen-Standard — wirkt in dichten Listen ruhiger und techischer. */
.mud-chip {
    border-radius: 7px;
    font-weight: 500;
}

/* ---------------------------------------------------------------- Tabellen */

.mud-table-container .mud-table-row:hover {
    background-color: rgba(90, 110, 255, 0.09) !important;
}

.dc-dark .mud-table-container .mud-table-row:hover {
    background-color: rgba(124, 140, 255, 0.10) !important;
}

/* Tabellenköpfe als stille Beschriftung: klein, gesperrt, in Hinweisfarbe —
   so treten die DATEN in den Vordergrund, nicht die Spaltennamen. */
.mud-table-head .mud-table-cell,
.mud-simple-table thead th {
    font-weight: 650;
    font-size: .71rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--mud-palette-text-secondary);
    background-color: transparent;
}

/* Zebra-Streifen dezenter als der MudBlazor-Standard, sonst kämpft es mit dem Glas.
   Nur für Tabellen, die Streifen bestellt haben (mud-table-striped). */
.mud-table-striped tbody .mud-table-row:nth-child(odd),
.mud-simple-table.mud-table-striped tbody tr:nth-child(odd) {
    background-color: rgba(125, 140, 190, 0.05);
}

/* ---------------------------------------------------------------- Bestehende Bausteine */

/* Code-/Befehlsanzeigen (Installationszeile, Kommandozeilen-Vorschau, Token) */
.dc-code {
    display: block;
    font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
    font-size: .86rem;
    line-height: 1.5;
    padding: 12px 14px;
    border-radius: 10px;
    word-break: break-all;
    background-color: rgba(12, 17, 32, 0.06);
    border: 1px solid rgba(12, 17, 32, 0.12);
}

.dc-dark .dc-code {
    background-color: rgba(0, 0, 0, 0.34);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #D8E0F5;
}

/* ---- Fernwartung ----------------------------------------------------------
   Das Bild wird auf die Fensterbreite skaliert, behält aber sein Seitenverhältnis;
   die Rückrechnung der Mauskoordinaten passiert in remote.js. */

.dc-remote-frame {
    position: relative;
    background: #0B1020;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Den sichtbaren Bereich füllen, damit das Bild groß wird; fit() in remote.js
       skaliert das Canvas darin auf die passende Größe (Seitenverhältnis erhalten). */
    height: calc(100vh - 215px);
    min-height: 300px;
}

/* Im Vollbild ist der Rahmen selbst der Vollbild-Bereich: ganze Fläche, keine Ecken. */
.dc-remote-frame:fullscreen {
    height: 100vh;
    width: 100vw;
    border-radius: 0;
}

/* Ausweg im Vollbild (die App-Leiste ist dann weg). Dezent, beim Überfahren deutlich. */
.dc-remote-exit {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 20;
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    background: rgba(20, 30, 60, 0.78);
    color: #fff;
    font: 600 0.85rem/1 "Segoe UI", system-ui, sans-serif;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity .15s ease;
}

.dc-remote-exit:hover {
    opacity: 1;
}

.dc-remote-frame.dc-remote-hidden {
    display: none;
}

.dc-remote-canvas {
    /* Größe setzt remote.js (fit) in Pixeln — Deckel als Sicherheitsnetz. */
    max-width: 100%;
    max-height: 100%;
    display: block;
    cursor: crosshair;
    /* Ohne Umriss beim Fokus wüsste niemand, ob Tastatureingaben ankommen. */
    outline: 2px solid transparent;
}

.dc-remote-canvas:focus {
    outline: 2px solid var(--mud-palette-primary);
}

/* ---- Protokollansicht ------------------------------------------------------
   Feste Zeichenbreite, damit die Zeitstempel untereinander stehen; eigener
   Rollbereich, damit lange Zeilen nicht die ganze Seite breit ziehen. */

.dc-log {
    font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
    font-size: .8rem;
    line-height: 1.45;
    max-height: 62vh;
    overflow: auto;
    padding: 10px 12px;
    border-radius: 10px;
    background-color: rgba(12, 17, 32, 0.05);
    border: 1px solid rgba(12, 17, 32, 0.12);
}

.dc-dark .dc-log {
    background-color: rgba(0, 0, 0, 0.34);
    border-color: rgba(255, 255, 255, 0.10);
    color: #D8E0F5;
}

.dc-log-line {
    white-space: pre-wrap;
    word-break: break-word;
    padding: 1px 0;
    border-left: 3px solid transparent;
    padding-left: 8px;
}

.dc-log-line.dc-log-err {
    border-left-color: var(--mud-palette-error);
    background-color: rgba(244, 67, 54, 0.10);
}

.dc-log-line.dc-log-wrn {
    border-left-color: var(--mud-palette-warning);
    background-color: rgba(255, 152, 0, 0.09);
}

.dc-log-line.dc-log-dbg {
    opacity: .65;
}

.dc-copy-btn {
    margin-top: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-primary);
    background: transparent;
    color: var(--mud-palette-primary);
    cursor: pointer;
    font-size: .82rem;
    transition: background-color .15s ease;
}

.dc-copy-btn:hover {
    background-color: rgba(90, 110, 255, 0.12);
}

/* Formularfelder der SSR-Seiten (Anmeldung, Ersteinrichtung) */
.dc-field {
    display: block;
    width: 100%;
    padding: 10px 12px;
    margin-top: 4px;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default, rgba(125, 140, 190, .45));
    background-color: rgba(255, 255, 255, 0.55);
    color: var(--mud-palette-text-primary);
    font-size: .95rem;
}

.dc-dark .dc-field {
    background-color: rgba(0, 0, 0, 0.28);
    color: #EAEEF8;
}

.dc-field:focus {
    outline: none;
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px rgba(90, 110, 255, .25);
}

.dc-label {
    display: block;
    margin-top: 16px;
    font-weight: 600;
    font-size: .88rem;
}

.dc-hint {
    font-size: .82rem;
    color: var(--mud-palette-text-secondary);
    margin: 4px 0 0 0;
}

.dc-error {
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 14px;
    background-color: rgba(211, 47, 47, .12);
    border: 1px solid rgba(211, 47, 47, .40);
    color: var(--mud-palette-error);
}

/* -------------------------------------------------------- Kopfzeile Seiten */

/* Titelbalken mit Titel und Hauptschaltfläche. BEWUSST NICHT feststehend und BEWUSST
   DECKEND (Vorgeschichte: sticky schob Inhalt unter sich, Halbtransparenz ließ Text
   durchscheinen). Neu: eine feine Verlaufslinie an der Oberkante als Markenzeichen —
   sie macht aus dem grauen Balken den Kopf der Seite. */
.dc-page-head {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 16px 0;
    padding: 9px 16px;
    border-radius: 12px;
    border: 1px solid rgba(125, 140, 190, .28);
    background: linear-gradient(135deg, #F8FAFF 0%, #EEF2FB 100%);
    box-shadow: 0 4px 12px -9px rgba(20, 26, 48, .40);
}

.dc-dark .dc-page-head {
    border-color: rgba(150, 165, 220, .20);
    background: linear-gradient(135deg, #182036 0%, #111827 100%);
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .75);
}

.dc-page-head::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, #3D5AFE, #00B8D4 45%, transparent 85%);
    opacity: .8;
    pointer-events: none;
}

.dc-page-head h1,
.dc-page-head .mud-typography {
    margin: 0;
}

/* ------------------------------------------------------------- Kennzahlen */

.dc-kpi {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    height: 100%;
    transition: transform .18s ease, box-shadow .18s ease;
}

/* Kacheln heben sich beim Zeigen leicht an — vor allem die verlinkten laden so
   sichtbar zum Klick ein. */
.mud-paper.dc-kpi:hover {
    transform: translateY(-2px);
    box-shadow:
        0 2px 4px rgba(16, 22, 36, 0.06),
        0 22px 48px -18px rgba(61, 90, 254, 0.30);
}

.dc-dark .mud-paper.dc-kpi:hover {
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.45),
        0 24px 56px -20px rgba(88, 101, 242, 0.40);
}

.dc-kpi-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    flex: 0 0 auto;
    background: var(--dc-grad-soft);
    color: var(--mud-palette-primary);
}

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

.dc-kpi-value {
    font-size: 1.55rem;
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

.dc-kpi-label {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dc-kpi-hint {
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
}

/* Farbige Varianten des Symbolfeldes — jeweils als weicher Verlauf. */
.dc-kpi-ok .dc-kpi-icon {
    background: linear-gradient(135deg, rgba(46, 160, 90, .20), rgba(120, 200, 120, .12));
    color: var(--mud-palette-success);
}

.dc-kpi-warn .dc-kpi-icon {
    background: linear-gradient(135deg, rgba(240, 150, 20, .22), rgba(255, 200, 90, .12));
    color: var(--mud-palette-warning);
}

.dc-kpi-error .dc-kpi-icon {
    background: linear-gradient(135deg, rgba(220, 60, 60, .20), rgba(255, 120, 120, .12));
    color: var(--mud-palette-error);
}

.dc-kpi-muted .dc-kpi-icon {
    background: rgba(130, 145, 180, .14);
    color: var(--mud-palette-text-secondary);
}

/* Die MudLink-Hülle um verlinkte Kacheln soll nicht wie ein Textlink aussehen. */
a:has(> .dc-kpi) {
    text-decoration: none;
    display: block;
    height: 100%;
}

/* --------------------------------------------------- Listen im Dashboard */

.dc-feed-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(125, 140, 190, .16);
    font-size: .82rem;
}

.dc-feed-row:last-child {
    border-bottom: none;
}

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

.dc-feed-time {
    flex: 0 0 auto;
    font-size: .74rem;
    color: var(--mud-palette-text-secondary);
}

/* Statuspunkt statt Chip — in einer dichten Liste deutlich ruhiger.
   Der feine Lichthof macht ihn zur "Leuchtdiode". */
.dc-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: inline-block;
    box-shadow: 0 0 0 3px rgba(125, 140, 190, .10);
}

/* Verteilung der letzten 7 Tage als Balken */
.dc-bar {
    display: flex;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background-color: rgba(130, 145, 180, .18);
}

.dc-bar span {
    display: block;
    height: 100%;
}

.dc-legend {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 10px;
    font-size: .8rem;
}

.dc-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ------------------------------------------------------- Menü in Tabellen */

/* Das Zeilenmenü („drei Punkte") soll kompakt neben der Schaltfläche stehen
   und nicht die halbe Seitenbreite einnehmen. */
.dc-row-menu .mud-list {
    min-width: 210px;
    max-width: 280px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.dc-row-menu .mud-list-item {
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: .85rem;
}

/* ------------------------------------------------- Kopfzeile der PC-Ansicht */

/* Bleibt unter der App-Leiste stehen: Auch beim Blättern durch die
   Software- oder Auftragsliste muss sichtbar sein, um welchen PC es geht.
   Deckend aus demselben Grund wie .dc-page-head; gleiche Akzentlinie. */
.dc-device-header {
    position: sticky;
    top: 64px;
    z-index: 20;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid rgba(125, 140, 190, .28);
    background: linear-gradient(135deg, #F8FAFF 0%, #EEF2FB 100%);
    box-shadow: 0 6px 14px -8px rgba(20, 26, 48, .45);
}

.dc-dark .dc-device-header {
    border-color: rgba(150, 165, 220, .20);
    background: linear-gradient(135deg, #182036 0%, #111827 100%);
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .75);
}

.dc-device-header::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, #3D5AFE, #00B8D4 45%, transparent 85%);
    opacity: .8;
    pointer-events: none;
}

.dc-device-header-name {
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.dc-device-header-sub {
    color: var(--mud-palette-text-secondary);
    font-size: .80rem;
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------- Kompakte Listen */

/* Für Übersichten mit vielen Zeilen (PC-Liste): kleinere Schrift und flachere
   Zeilen, damit auf einen Blick mehr Geräte auf den Bildschirm passen.
   Chips und Schaltflächen in den Zellen ziehen mit, sonst treiben sie die
   Zeilenhöhe wieder auseinander. */
.dc-compact-table td,
.dc-compact-table th {
    font-size: .78rem;
    padding-top: 3px;
    padding-bottom: 3px;
    line-height: 1.25;
}

.dc-compact-table th {
    font-weight: 650;
    letter-spacing: .01em;
}

.dc-compact-table .mud-chip {
    height: 19px;
    font-size: .70rem;
    margin: 1px 3px 1px 0;
}

.dc-compact-table .mud-button-root {
    font-size: .72rem;
    padding: 1px 8px;
    min-height: 24px;
}

.dc-compact-table .mud-icon-button {
    padding: 3px;
}

.dc-compact-table .mud-typography-caption {
    font-size: .68rem;
    display: block;
    color: var(--mud-palette-text-secondary);
}

/* ------------------------------------------------- Server-Angaben (Dashboard) */

/* Eine ruhige Zeile unter dem Dashboard: Hostname, IP-Adresse(n) und Version.
   Bewusst ohne Kartenrahmen und in Hinweisfarbe — sie soll auffindbar sein,
   ohne mit den Kennzahlen darüber um Aufmerksamkeit zu konkurrieren. */
.dc-serverbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 14px;
    border-top: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    font-size: .78rem;
    /* Damit lange Adresslisten auf schmalen Fenstern umbrechen statt zu schieben. */
    word-break: break-word;
}

.dc-serverbar .mud-icon-root {
    opacity: .7;
}

.dc-serverbar-sep {
    opacity: .45;
}

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

/* Wer Bewegung/Transparenz reduziert haben will, bekommt flache Flächen. */
@media (prefers-reduced-transparency: reduce) {
    .mud-appbar,
    .mud-drawer,
    .mud-paper,
    .mud-dialog,
    .mud-table,
    .mud-overlay-dark {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background-color: var(--mud-palette-surface) !important;
        background-image: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mud-nav-link,
    .mud-nav-link:hover,
    .mud-paper.dc-kpi,
    .mud-paper.dc-kpi:hover,
    .mud-button-filled.mud-button-filled-primary:not(.mud-button-disabled):hover,
    .mud-button-filled.mud-button-filled-secondary:not(.mud-button-disabled):hover {
        transition: none;
        transform: none;
    }
}

/* ------------------------------------------------------------------ Paket-Ordner
   Gruppierte Paketliste (/pakete). Zwei Dinge:
   1) Die Gruppen-Kopfzeile als klarer „Ordner-Balken". Sonst sieht eine ZUGEKLAPPTE
      Gruppe wie eine halbleere Datenzeile aus — die Spalten Hersteller/Versionen/
      Neueste Version bleiben leer, weil deren Inhalt erst auf den PAKETZEILEN steht,
      die man mit dem Pfeil aufklappt. Der Balken macht sichtbar: „das ist ein Ordner,
      kein kaputter Eintrag."
   2) Sanftes Auffahren der Paketzeilen beim Öffnen eines Ordners. */
.dc-grouped-table tbody tr:has(> .mud-table-cell-custom-group) {
    background: var(--mud-palette-background-grey);
    border-left: 3px solid var(--mud-palette-primary);
}
.dc-grouped-table tbody tr:has(> .mud-table-cell-custom-group):hover {
    background: rgba(125, 140, 190, .14);
}
.dc-grouped-table .mud-table-cell-custom-group {
    font-size: .92rem;
    padding-top: 10px;
    padding-bottom: 10px;
}

@keyframes dc-folder-reveal {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Nur die Paketzeilen (NICHT die Ordner-Kopfzeilen) fahren beim Aufklappen auf.
   Beim Öffnen fügt MudBlazor genau diese Zeilen neu ein → die Animation spielt einmal. */
.dc-grouped-table tbody tr:not(:has(> .mud-table-cell-custom-group)) {
    animation: dc-folder-reveal .2s ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .dc-grouped-table tbody tr:not(:has(> .mud-table-cell-custom-group)) {
        animation: none;
    }
}

/* ---------------------------------------------------- Seitenmenü (Drawer)
   Seit 0.18.3 gestaltet dc-shell.css die Seitenleiste (Logo-Kopf, Navigation, Infozeilen, Welle) — die
   früheren Regeln .dc-drawer-brand/.dc-drawer-footer und das senkrecht zentrierte Menü sind entfallen. */