#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

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

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

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

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

/* ============================================================================
   App-Shell im Netbits.Flow-Design (ADR-0106).
   Maße und Farbwerte stammen aus architecture/mockups/netbits-flow.html; die
   Farben kommen über MudBlazor-Variablen, damit Hell/Dunkel mitgeht.
   ========================================================================== */

.nbw-shell {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
}

/* ---- Globale Kopfleiste ---- */
.nbw-appbar {
    height: 58px;
    flex: 0 0 58px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 16px;
    background: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.nbw-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.3px;
    margin-right: 16px;
    cursor: pointer;
    white-space: nowrap;
}

.nbw-brandmark {
    width: 29px;
    height: 29px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--mud-palette-primary), #c46bff);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.nbw-mnav {
    display: flex;
    gap: 1px;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
}

.nbw-mnav::-webkit-scrollbar { display: none; }

.nbw-mnav a {
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 13.5px;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    user-select: none;
}

.nbw-mnav a:hover {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.nbw-mnav a.on {
    background: var(--mud-palette-primary-hover);
    color: var(--mud-palette-secondary);
    font-weight: 600;
}

.nbw-hico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    flex: 0 0 36px;
}

.nbw-hico:hover {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.nbw-hsep {
    width: 1px;
    height: 24px;
    background: var(--mud-palette-divider);
    margin: 0 7px;
}

.nbw-user {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 11px 4px 4px;
    border-radius: 99px;
    cursor: pointer;
}

.nbw-user:hover { background: var(--mud-palette-action-default-hover); }

.nbw-user-nm {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
}

.nbw-user-rl {
    font-size: 10.5px;
    color: var(--mud-palette-text-disabled);
    white-space: nowrap;
}

.nbw-ava {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    flex: 0 0 34px;
    background: linear-gradient(135deg, var(--mud-palette-primary), #c46bff);
    display: grid;
    place-items: center;
    font-weight: 700;
    color: #fff;
    font-size: 13px;
}

/* ---- Rumpf: Kontextleiste + Inhalt ---- */
.nbw-body {
    flex: 1;
    min-height: 0;
    display: flex;
}

.nbw-rail {
    width: 238px;
    flex: 0 0 238px;
    background: var(--mud-palette-background-gray);
    border-right: 1px solid var(--mud-palette-divider);
    padding: 16px 0;
    overflow-y: auto;
}

.nbw-sect {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.3px;
    color: var(--mud-palette-text-disabled);
    text-transform: uppercase;
    padding: 3px 20px 7px;
}

.nbw-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 1px 10px;
    padding: 9px 12px;
    border-radius: 10px;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    user-select: none;
}

.nbw-nav:hover {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.nbw-nav.on {
    background: var(--mud-palette-primary-hover);
    color: var(--mud-palette-secondary);
    font-weight: 600;
}

.nbw-nav-tx {
    flex: 1;
    font-size: 13.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nbw-main {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
}

.nbw-wrap {
    padding: 28px 34px 70px;
}

/* ---- Seitenfenster (ADR-0089 Punkt 6, Fassung 2026-08-28) ----
   Übernommen aus .panel/.pveil in architecture/mockups/netbits-flow.html. Bewusst kein Dialog:
   der Schleier verdunkelt, blockiert aber keinen Komponentenbaum wie ein gestapeltes Modal. */

.nbw-pveil {
    position: fixed;
    inset: 58px 0 0 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1180;
    opacity: 0;
    transition: opacity 0.22s;
    pointer-events: none;
}

.nbw-pveil.on {
    opacity: 1;
    pointer-events: auto;
}

.nbw-panel {
    position: fixed;
    top: 58px;
    right: 0;
    bottom: 0;
    background: var(--mud-palette-background);
    border-left: 1px solid var(--mud-palette-divider);
    box-shadow: -14px 0 40px rgba(0, 0, 0, 0.35);
    z-index: 1200;
    transform: translateX(100%);
    transition: transform 0.26s cubic-bezier(0.25, 0.8, 0.3, 1);
    display: flex;
    flex-direction: column;
    max-width: 100vw;
    outline: none;
}

.nbw-panel.on { transform: none; }

.nbw-panel-resize {
    position: absolute;
    left: -4px;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: ew-resize;
    z-index: 1210;
}

.nbw-panel-resize:hover {
    background: var(--mud-palette-primary);
    opacity: 0.35;
}

.nbw-resize-schleier {
    position: fixed;
    inset: 0;
    z-index: 1250;
    cursor: ew-resize;
}

.nbw-panel-head {
    padding: 16px 22px 12px;
    border-bottom: 1px solid var(--mud-palette-divider);
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.nbw-panel-head h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 640;
    letter-spacing: -0.3px;
    line-height: 1.35;
    flex: 1;
}

.nbw-panel-ico {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    flex: 0 0 32px;
}

.nbw-panel-ico:hover {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.nbw-panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 22px;
}

.nbw-panel-foot {
    flex: 0 0 auto;
    padding: 14px 22px;
    border-top: 1px solid var(--mud-palette-divider);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* --- Listen: Aktionsspalte schmal, Datenspalte breit ---------------------------------------
   Ohne diese Regeln verteilt der Browser die Breite gleichmäßig, und die Aktionsspalte mit dem
   Zeilenmenü bekommt genauso viel Platz wie ein Firmenname. Die Klassen werden bewusst gesetzt
   statt über :last-child zu greifen: einige Listen (Geo, Lizenzen, Produktversionen) enden mit
   einer echten Datenspalte, die nicht zusammengedrückt werden darf. */

/* Auf der Tabelle: letzte Spalte ist die Aktionsspalte. */
.nbw-liste td:last-child,
.nbw-liste th:last-child {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* Auf einer Spalte: nimmt den verbleibenden Platz ein. */
.nbw-fill {
    width: 100%;
}

/* Alle übrigen Spalten schrumpfen dadurch auf ihren Inhalt – ein Knopf darf dabei nicht mitten
   in der Beschriftung umbrechen („8 / ANSEHEN“ untereinander). */
.nbw-liste td .mud-button-root,
.nbw-liste th {
    white-space: nowrap;
}

/* Für schmale Spalten mit zusammengehörigem Inhalt: „31.08.2026 09:45“ gehört in eine Zeile.
   Umgebrochen liest es sich als zwei Werte untereinander, und die Zeilenhöhe der ganzen Tabelle
   richtet sich nach der breitesten Umbruchstelle. Bewusst eine Klasse zum Setzen statt einer
   Regel für alle Datenzellen: Spalten mit Fließtext müssen weiter umbrechen dürfen, sonst wird
   die Tabelle breiter als der Platz. */
.nbw-liste td.nbw-nowrap,
.nbw-liste th.nbw-nowrap {
    white-space: nowrap;
}

/* ============================================================================
   Anmeldeseite: links die Marke, rechts das Formular.
   Der Hintergrund ist ein Verlauf aus den Theme-Farben statt einer Bilddatei –
   er skaliert auf jede Auflösung, kostet keinen Ladevorgang und geht bei einer
   Farbänderung im Theme automatisch mit.
   ========================================================================== */
.nbw-login {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 100vh;
}

.nbw-login-marke {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem;
    color: #fff;
    background:
        radial-gradient(120% 90% at 15% 10%, rgba(255, 255, 255, 0.18) 0%, transparent 55%),
        radial-gradient(90% 70% at 85% 90%, rgba(0, 0, 0, 0.28) 0%, transparent 60%),
        linear-gradient(140deg, #594AE2 0%, #4a3cc4 45%, #2f2585 100%);
    overflow: hidden;
}

/* Feines Raster als Anspielung auf vernetzte Installationen – dezent genug,
   dass es den Text nicht stört. */
.nbw-login-marke::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(80% 60% at 30% 30%, #000 0%, transparent 75%);
    pointer-events: none;
}

.nbw-login-marke-inhalt {
    position: relative;
    z-index: 1;
    max-width: 30rem;
    margin-top: auto;
    margin-bottom: auto;
}

.nbw-login-logo {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: 1.75rem;
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    font-size: 1.6rem;
    font-weight: 700;
}

.nbw-login-marke h1 {
    margin: 0 0 0.75rem;
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.nbw-login-claim {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
}

.nbw-login-fuss {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.nbw-login-formular {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--mud-palette-background);
}

.nbw-login-karte {
    width: 100%;
    max-width: 26rem;
}

.nbw-login-rechtliches {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.8rem;
}

.nbw-login-rechtliches a {
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
}

.nbw-login-rechtliches a:hover {
    text-decoration: underline;
}

@media (max-width: 900px) {
    .nbw-login {
        grid-template-columns: 1fr;
    }

    /* Auf schmalen Geräten zählt das Formular; die Markenspalte schrumpft auf einen Streifen. */
    .nbw-login-marke {
        padding: 1.75rem 1.5rem;
    }

    .nbw-login-marke .nbw-login-claim,
    .nbw-login-fuss {
        display: none;
    }

    .nbw-login-logo {
        margin-bottom: 1rem;
    }

    .nbw-login-marke h1 {
        font-size: 1.6rem;
    }
}