/* DeployCircle Live-Demo — Ergänzungen zu MudBlazor.min.css + deploycircle.css.
   Die Demo baut die Oberfläche mit denselben Klassen nach; hier stehen nur die Teile,
   die Blazor/MudBlazor sonst zur Laufzeit erzeugen (Dialoge, Snackbars, Formularfelder)
   und die Demo-Hinweisleiste. */

html, body { min-height: 100%; }
body {
    margin: 0;
    font-family: var(--mud-typography-default-family);
    font-size: var(--mud-typography-default-size);
    line-height: var(--mud-typography-default-lineheight);
    color: var(--mud-palette-text-primary);
}
.mud-drawer--initial { transition: none !important; }
.mud-nav-link, [data-action] { cursor: pointer; }
button[disabled] { cursor: default; }

/* ---------------------------------------------------------------- Demo-Leiste */
.dc-demo-banner {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 8px 14px; margin: -4px 0 14px;
    border-radius: 10px;
    background: var(--dc-grad-soft);
    border: 1px solid rgba(var(--mud-palette-primary-rgb), .35);
    font-size: .8rem; color: var(--mud-palette-text-secondary);
}
.dc-demo-banner b { color: var(--mud-palette-text-primary); }
.dc-demo-banner .flex-grow-1 { flex: 1; }
.dc-demo-banner .mud-button { text-transform: none; }

/* ---------------------------------------------------------------- Dialoge */
.dc-demo-overlay {
    position: fixed; inset: 0; z-index: var(--mud-zindex-dialog, 1400);
    background: var(--mud-palette-overlay-dark);
    display: flex; align-items: center; justify-content: center; padding: 16px;
    animation: dcFade .18s ease-out;
}
.dc-demo-overlay .mud-dialog {
    position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 32px);
    display: flex; flex-direction: column; margin: 0;
    border-radius: var(--mud-default-borderradius);
    animation: dcPop .18s ease-out;
}
.dc-demo-overlay .mud-dialog.dc-demo-wide { max-width: 760px; }
.dc-demo-overlay .mud-dialog-title { padding: 18px 24px 8px; }
.dc-demo-overlay .mud-dialog-title h6 { margin: 0; }
.dc-demo-overlay .mud-dialog-content { padding: 8px 24px; overflow: auto; }
.dc-demo-overlay .mud-dialog-actions { padding: 12px 24px 18px; display: flex; gap: 8px; justify-content: flex-end; }
@keyframes dcFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dcPop { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }

/* Formularfelder in Dialogen (MudTextField-Optik, ohne Blazor) */
.dc-demo-field { display: grid; gap: 4px; margin: 0 0 14px; }
.dc-demo-field > label { font-size: .75rem; color: var(--mud-palette-text-secondary); letter-spacing: .02em; }
.dc-demo-field input, .dc-demo-field select, .dc-demo-field textarea {
    background: transparent; color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-inputs); border-radius: 8px;
    padding: 9px 12px; font: inherit; font-size: .9rem; width: 100%; box-sizing: border-box;
}
.dc-demo-field textarea { min-height: 96px; resize: vertical; }
.dc-demo-field input:focus, .dc-demo-field select:focus, .dc-demo-field textarea:focus {
    outline: none; border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px rgba(var(--mud-palette-primary-rgb), .25);
}
.dc-demo-field select option { background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); }
.dc-demo-help { font-size: .75rem; color: var(--mud-palette-text-secondary); margin: -8px 0 12px; }
.dc-demo-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dc-demo-toggle { display: flex; gap: 6px; margin-bottom: 14px; }

/* Auswahlliste der Ziel-PCs in Dialogen */
.dc-demo-picklist {
    max-height: 260px; overflow: auto; border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px; margin-bottom: 10px;
}
.dc-demo-pick {
    display: flex; align-items: center; gap: 8px; padding: 4px 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default); font-size: .85rem;
}
.dc-demo-pick:last-child { border-bottom: 0; }
.dc-demo-pick .flex-grow-1 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-demo-pick .mud-checkbox { margin: 0; }

/* Fortschrittsbalken (MudProgressLinear-Optik) */
.dc-demo-progress {
    height: 4px; border-radius: 2px; margin-top: 5px; overflow: hidden;
    background: rgba(var(--mud-palette-info-rgb), .25);
}
.dc-demo-progress > i { display: block; height: 100%; background: var(--mud-palette-info); border-radius: 2px; transition: width .5s linear; }

/* ---------------------------------------------------------------- Snackbars */
#mud-snackbar-container {
    position: fixed; top: 12px; right: 12px; z-index: var(--mud-zindex-snackbar, 1500);
    display: flex; flex-direction: column; gap: 8px; max-width: min(440px, calc(100vw - 24px));
    pointer-events: none;
}
#mud-snackbar-container .mud-snackbar {
    pointer-events: auto; display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; border-radius: 8px; color: #fff; font-size: .875rem; line-height: 1.4;
    box-shadow: var(--mud-elevation-6); animation: dcSlide .25s ease-out;
}
#mud-snackbar-container .mud-snackbar svg { flex: none; }
.dc-snack-success { background: var(--mud-palette-success); }
.dc-snack-info { background: var(--mud-palette-info); }
.dc-snack-warning { background: var(--mud-palette-warning); }
.dc-snack-error { background: var(--mud-palette-error); }
.dc-snack-normal { background: var(--mud-palette-dark); }
@keyframes dcSlide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------------------------------------------------------- Tabellen kompakt halten
   (Einzeiligkeit der Zeilen regelt seit 0.18.3 das Produkt selbst: dc-shell.css, .dc-compact-table) */
.dc-compact-table .mud-icon-button { margin: 0 -1px; }
@media (max-width: 960px) {
    /* Schmale Fenster: Das Menü als Überlagerung regelt der Rahmen selbst (dc-shell.css), wie im Produkt. */
    .dc-demo-banner { font-size: .75rem; }
    .mud-table-container { max-width: 100%; }
}
.dc-demo-log-line { white-space: pre-wrap; }

/* ---------------------------------------------------------------- Kleinkram */
.mud-tab-active { box-shadow: inset 0 -2px 0 var(--mud-palette-primary); color: var(--mud-palette-primary); }
.mud-tab { cursor: pointer; }
.dc-demo-kv { display: grid; grid-template-columns: 200px 1fr; gap: 6px 16px; font-size: .875rem; }
.dc-demo-kv > div:nth-child(odd) { color: var(--mud-palette-text-secondary); }
@media (max-width: 600px) { .dc-demo-kv { grid-template-columns: 1fr; } .dc-demo-kv > div:nth-child(odd) { margin-top: 6px; } }
.dc-demo-timeline { list-style: none; margin: 0; padding: 0; }
.dc-demo-timeline li { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; font-size: .82rem; border-top: 1px solid var(--mud-palette-lines-default); }
.dc-demo-timeline li:first-child { border-top: 0; }
.dc-demo-timeline .t { color: var(--mud-palette-text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dc-demo-remote {
    aspect-ratio: 16 / 9; border-radius: 10px; border: 1px solid var(--mud-palette-lines-default);
    background: #0b1a33 radial-gradient(600px 300px at 30% 20%, rgba(92,116,255,.35), transparent 60%);
    display: grid; place-items: center; color: #cfd6ee; text-align: center; padding: 20px;
}
.dc-demo-remote b { display: block; font-size: 1.1rem; margin-bottom: 6px; }
.dc-demo-scan { height: 6px; border-radius: 3px; background: rgba(var(--mud-palette-primary-rgb), .2); overflow: hidden; margin: 8px 0; }
.dc-demo-scan > i { display: block; height: 100%; background: var(--mud-palette-primary); transition: width .3s linear; }
.dc-demo-muted { color: var(--mud-palette-text-secondary); }
.mud-table-cell .mud-chip-container + .mud-chip-container { margin-left: 4px; }
.dc-demo-log-line { font-family: Consolas, "Cascadia Mono", monospace; font-size: .78rem; white-space: pre-wrap; padding: 2px 0; }
tr.dc-demo-detail-row td { background: rgba(var(--mud-palette-primary-rgb), .05); }