/* /Components/Layout/ConsoleLayout.razor.rz.scp.css */
.console-layout[b-bvv44rlzd6] {
        width: 100%;   /* nicht 100vw: das schliesst die Rollbalkenbreite ein */
        height: 100vh;
        overflow: hidden;
        background: var(--surface-workspace);
    }
/* /Components/Layout/EditorLayout.razor.rz.scp.css */
.editor-layout[b-jmy7aujw1p] {
        width: 100%;   /* nicht 100vw: das schliesst die Rollbalkenbreite ein */
        height: 100vh;
        overflow: auto;
        background: var(--surface-workspace);
    }
/* /Components/Layout/LoginLayout.razor.rz.scp.css */
.login-content[b-z12nvkq4xs] {
    flex: 1;
    width: 100%;
    min-height: 100vh;
    padding: 0;
    margin: 0;
}



/* Der Hamburger hat auf der Anmeldeseite keine Kopfleiste, in der er sitzen koennte: er
   landete als volle Breite ganz oben UND unter .login-page (die Sonde zeigte
   `elementFromPoint` = DIV.login-page). Also freistellen und ueber den Anmeldeinhalt legen
   -- aber UNTER die Seitenleiste (z-index 200), damit die geoeffnete Schublade ihn verdeckt
   statt umgekehrt. */
[b-z12nvkq4xs] .hamburger-btn {
    position: fixed;
    top: var(--space-2);
    left: var(--space-2);
    width: auto;
    z-index: 150;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-1) var(--space-2);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.top-bar-brand[b-v5t8evwz3t] {
        display: flex;
        align-items: baseline;
        gap: 0.4rem;
    }
    
    .brand-name[b-v5t8evwz3t] {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--app-primary-color);
        letter-spacing: 0.02em;
    }
    
    .brand-sep[b-v5t8evwz3t] {
        color: var(--app-text-secondary);
        opacity: 0.4;
    }
    
    .brand-subtitle[b-v5t8evwz3t] {
        font-size: 0.85rem;
        color: var(--app-text-secondary);
        font-weight: 400;
    }
    
    .btn-profile[b-v5t8evwz3t] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.4rem 0.8rem;
        background: rgba(30, 148, 188, 0.1);
        border: 1px solid rgba(30, 148, 188, 0.3);
        border-radius: var(--radius);
        color: var(--app-primary-color);
        text-decoration: none;
        font-size: 0.85rem;
        font-weight: 500;
        transition: all 0.2s ease;
    }
    
    .btn-profile:hover[b-v5t8evwz3t] {
        background: rgba(30, 148, 188, 0.2);
        border-color: var(--app-primary-color);
        transform: translateY(-1px);
        text-decoration: none;
    }
    
    .profile-icon[b-v5t8evwz3t] {
        font-size: 1.1rem;
        line-height: 1;
    }
    
    .profile-text[b-v5t8evwz3t] {
        font-size: 0.85rem;
    }

    /* Responsive
       Mobile / small-screen users reach the Einstellungen page via
       the sidebar's "Profil" NavLink (NavMenu.razor line ~581), so
       the top-bar gear is redundant on phone-width viewports. Hide
       it entirely below 768 px to free header space for the brand
       + the user identity + the Abmelden button. The Account/Logout
       and user name stay visible — those are the two header items
       a user actually reaches for on mobile. */
    @media (max-width: 768px) {
        .btn-profile[b-v5t8evwz3t] { display: none; }
    }

    /* PiMode kiosk: the left sidebar is not rendered (see MainLayout.razor),
       so the main content must reclaim the width that `.main-content`'s
       margin-left: var(--sidebar-width) normally reserves for the fixed
       sidebar. Without this the kiosk would show a blank left gutter. */
    .page.pi-kiosk .main-content[b-v5t8evwz3t] {
        margin-left: 0;
    }

    /* Build-provenance footer (ADR-0144) — admin-only, discreet. Design-system
       tokens only (no literals). Not fixed-position, so it never overlaps content. */
    .app-build-footer[b-v5t8evwz3t] {
        padding: 0.4rem 1rem;
        font-size: 0.72rem;
        color: var(--text-secondary);
        border-top: 1px solid var(--border-default);
        text-align: right;
        letter-spacing: 0.02em;
    }

    /* Worker build next to the Web build (ADR-0195). Same discreet treatment, separated by
       space rather than a divider so the line stays scannable. */
    .app-build-worker[b-v5t8evwz3t] {
        margin-left: var(--space-4);
    }

    /* A build difference between the hosts is semantic chrome — a warning about the state of the
       deployment, not a data category — so it takes the semantic warning token rather than a
       literal. It only renders when both sides reported a real commit (BuildSkew), so this never
       fires merely because something has not been read yet. */
    .app-build-worker--mismatch[b-v5t8evwz3t] {
        color: var(--color-warning);
        font-weight: 600;
    }

    /* PiMode appliance build tag (ADR-0144) — a discreet, non-interactive overlay in
       the bottom-right corner of the kiosk so a field tech can read the running build
       without login. pointer-events:none => never intercepts a touch on the kiosk. */
    .pi-build-tag[b-v5t8evwz3t] {
        position: fixed;
        bottom: 0.2rem;
        right: 0.4rem;
        z-index: 2000;
        font-family: monospace;
        font-size: 0.6rem;
        line-height: 1;
        color: var(--text-secondary);
        opacity: 0.5;
        pointer-events: none;
        user-select: none;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Open-ticket count badge on the 🎫 Tickets-Inbox nav link. Only the wrapper spacing lives
   here; the badge itself is the shared EkBadge atom (token-driven .badge styles from app.css). */
.nav-ticket-badge[b-r15oxaaagg] {
    margin-left: var(--space-2);
    display: inline-flex;
    align-items: center;
}
/* /Components/Layout/PublicLayout.razor.rz.scp.css */
/* Nur Token — die öffentliche Seite ist die Visitenkarte nach außen. */

.public-shell[b-8zgin8zhce] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--surface-page);
}

.public-bar[b-8zgin8zhce] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-card);
    border-bottom: 1px solid var(--border-subtle);
}

.public-bar-foot[b-8zgin8zhce] {
    border-bottom: none;
    border-top: 1px solid var(--border-subtle);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.public-brand[b-8zgin8zhce] {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    text-decoration: none;
}

.public-login[b-8zgin8zhce] {
    color: var(--text-link);
    font-size: var(--font-size-sm);
}

.public-body[b-8zgin8zhce] {
    flex: 1 1 auto;
}
/* /Components/Pages/Account/Login.razor.rz.scp.css */
/* Full viewport login page — card centers on screen, sidebar overlays on top.

   2026-09-30: a fixed box pinned to all four edges CANNOT be scrolled, and with
   `justify-content: center` an overflowing column is pushed out of BOTH ends — the
   top part ends up at a negative offset that no gesture can reach (measured -139 px
   on a 390x660 phone). With an announcement above the login card that put the
   password field and the submit button out of reach: the operator could not log in.

   Two changes keep the centred look and make the overflow case survivable:
     overflow-y: auto        — the box scrolls when its content is taller.
     justify-content: safe center — centre while there is room, fall back to
                              flex-start instead of shoving content off the top.
                              The unprefixed `center` above stays as the fallback
                              for browsers that do not know the `safe` keyword. */
    .login-page[b-dc8k3plxh2] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        justify-content: safe center;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--surface-card);
        margin: 0;
        padding: 1rem;
        box-sizing: border-box;
        z-index: 50;
    }

    /* The announcement now sits UNDER the card, so it can never push the form down.
       Full width of the card on a phone, a readable column on a desktop. */
    .login-announcement-area[b-dc8k3plxh2] {
        margin-top: 1.25rem;
        margin-bottom: 0;
    }

    /* Short screens: the flexible spacers exist to centre the card on a desktop and
       are pure waste on a phone, where every pixel is needed for the form. */
    @media (max-height: 820px) {
        .login-spacer-top[b-dc8k3plxh2],
        .login-spacer[b-dc8k3plxh2],
        .login-spacer-bottom[b-dc8k3plxh2] {
            flex: 0 0 var(--space-3);
        }
    }

    .login-announcement-area[b-dc8k3plxh2] {
        width: 80%;
        max-width: 800px;
        margin-bottom: 1.5rem;
    }

    .login-spacer-top[b-dc8k3plxh2] {
        flex: 1;
    }

    .login-spacer[b-dc8k3plxh2] {
        flex: 1;
    }

    .login-spacer-bottom[b-dc8k3plxh2] {
        flex: 3;
    }

    .login-announcement-area:empty[b-dc8k3plxh2] {
        display: none;
    }

    .login-page .login-card[b-dc8k3plxh2] {
        width: 100%;
        max-width: 420px;
        background: var(--surface-card);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-lg);
        padding: 2.5rem;
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
        flex-shrink: 0;
    }
    
    .login-page .login-header[b-dc8k3plxh2] {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .login-page .login-logo-img[b-dc8k3plxh2] {
        max-width: 280px;
        width: 100%;
        height: auto;
        margin-bottom: 1rem;
    }
    
    .login-page .login-header h1[b-dc8k3plxh2] {
        color: var(--text-primary);
        font-size: 1.75rem;
        margin: 0 0 0.5rem 0;
        font-weight: 700;
        letter-spacing: -0.5px;
    }
    
    .login-page .login-header p[b-dc8k3plxh2] {
        color: var(--text-muted);
        margin: 0;
        font-size: 0.95rem;
    }
    
    .login-page .form-group[b-dc8k3plxh2] {
        margin-bottom: 1.25rem;
    }
    
    .login-page .form-label[b-dc8k3plxh2] {
        display: block;
        color: var(--text-secondary);
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
        font-weight: 500;
    }
    
    .login-page .form-control[b-dc8k3plxh2] {
        width: 100%;
        padding: 0.875rem 1rem;
        background: var(--surface-sunken);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        color: var(--text-primary);
        font-size: 1rem;
        transition: all 0.2s ease;
        box-sizing: border-box;
    }
    
    .login-page .form-control:focus[b-dc8k3plxh2] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(31, 148, 185, 0.15);
        background: var(--surface-card);
    }
    
    .login-page .form-control[b-dc8k3plxh2]::placeholder {
        color: var(--text-muted);
    }
    
    .login-page .password-wrapper[b-dc8k3plxh2] {
        position: relative;
    }
    
    .login-page .password-wrapper .form-control[b-dc8k3plxh2] {
        padding-right: 3rem;
    }
    
    .login-page .password-toggle[b-dc8k3plxh2] {
        position: absolute;
        right: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        cursor: pointer;
        padding: 0.25rem;
        font-size: 1.1rem;
        opacity: 0.6;
        transition: opacity 0.2s;
    }
    
    .login-page .password-toggle:hover[b-dc8k3plxh2] {
        opacity: 1;
    }
    
    .login-page .flex[b-dc8k3plxh2] {
        display: flex;
    }
    
    .login-page .justify-between[b-dc8k3plxh2] {
        justify-content: space-between;
    }
    
    .login-page .items-center[b-dc8k3plxh2] {
        align-items: center;
    }
    
    .login-page .mb-4[b-dc8k3plxh2] {
        margin-bottom: 1.5rem;
    }
    
    .login-page .form-check[b-dc8k3plxh2] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .login-page .form-check-input[b-dc8k3plxh2] {
        width: 18px;
        height: 18px;
        accent-color: var(--color-primary);
        cursor: pointer;
    }
    
    .login-page .form-check label[b-dc8k3plxh2] {
        color: var(--text-secondary);
        font-size: 0.9rem;
        cursor: pointer;
    }
    
    .login-page .text-sm[b-dc8k3plxh2] {
        font-size: 0.875rem;
        color: var(--color-accent);
        text-decoration: none;
    }
    
    .login-page .text-sm:hover[b-dc8k3plxh2] {
        text-decoration: underline;
    }
    
    .login-page .btn-primary[b-dc8k3plxh2] {
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
        color: #ffffff;
        border: none;
        padding: 1rem 2rem;
        border-radius: var(--radius-md);
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: 0 2px 8px rgba(30, 148, 188, 0.3);
    }
    
    .login-page .btn-primary:hover[b-dc8k3plxh2] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(31, 148, 185, 0.3);
    }
    
    .login-page .btn-primary:active[b-dc8k3plxh2] {
        transform: translateY(0);
    }
    
    .login-page .alert-danger[b-dc8k3plxh2] {
        background: rgba(195, 29, 100, 0.08);
        border: 1px solid rgba(195, 29, 100, 0.25);
        color: var(--color-accent);
        padding: 0.875rem 1rem;
        border-radius: var(--radius-md);
        margin-bottom: 1.25rem;
        font-size: 0.9rem;
    }
    
    @media (max-width: 480px) {
        .login-page .login-card[b-dc8k3plxh2] { padding: 1.5rem 1.25rem; margin: 0 0.5rem; }
        .login-page .login-header h2[b-dc8k3plxh2] { font-size: 1.3rem; }
    }

    /* Phase 2b: enterprise SSO route */
    .login-page .sso-divider[b-dc8k3plxh2] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin: 1.5rem 0 1rem;
        color: var(--text-secondary);
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .login-page .sso-divider[b-dc8k3plxh2]::before,
    .login-page .sso-divider[b-dc8k3plxh2]::after {
        content: '';
        flex: 1;
        border-top: 1px solid var(--border-strong);
    }
    .login-page .sso-button[b-dc8k3plxh2] {
        width: 100%;
        background: transparent;
        /*
         * .btn-secondary from Bootstrap sets color:#fff (intended for the
         * grey background it normally pairs with). We've overridden the
         * background to transparent on a white card surface, so we have to
         * override the foreground too — otherwise the label is white-on-
         * white and unreadable. var(--text-body) = #374151 → 11.25:1
         * contrast on the card surface, AAA.
         */
        color: var(--text-body);
        border: 1px solid var(--border-strong);
    }
    .login-page .sso-button:hover[b-dc8k3plxh2] {
        background: var(--surface-hover);
        color: var(--text-primary);
    }
    .login-page .sso-button:focus-visible[b-dc8k3plxh2] {
        outline: 2px solid var(--text-link, #1f94b9);
        outline-offset: 2px;
    }
    .login-page .sso-button:disabled[b-dc8k3plxh2] {
        opacity: 0.55;
        cursor: not-allowed;
    }
    .login-page .sso-hint[b-dc8k3plxh2] {
        font-size: 0.78rem;
        color: var(--text-secondary);
        text-align: center;
        margin: 0.5rem 0 0;
    }

/* Verweis auf die öffentliche NIS-2-Seite unter dem Anmeldebereich. */
.login-public-link[b-dc8k3plxh2] {
    margin: var(--space-4) 0 0;
    text-align: center;
    font-size: var(--font-size-sm);
}

.login-public-link a[b-dc8k3plxh2] {
    color: var(--text-link);
}
/* /Components/Pages/Account/LoginWith2fa.razor.rz.scp.css */
/* Full viewport login page — matches Login.razor.css */
.login-page[b-veprshxrpj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--surface-card);
    margin: 0;
    padding: 1rem;
    box-sizing: border-box;
    z-index: 50;
}

.login-spacer-top[b-veprshxrpj] {
    flex: 1;
}

.login-spacer[b-veprshxrpj] {
    flex: 1;
}

.login-spacer-bottom[b-veprshxrpj] {
    flex: 3;
}

.login-page .login-card[b-veprshxrpj] {
    width: 100%;
    max-width: 420px;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.login-page .login-header[b-veprshxrpj] {
    text-align: center;
    margin-bottom: 2rem;
}

.login-page .login-header h1[b-veprshxrpj] {
    color: var(--text-primary);
    font-size: 1.75rem;
    margin: 0 0 0.5rem 0;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.login-page .login-header p[b-veprshxrpj] {
    color: var(--text-muted);
    margin: 0;
    font-size: 0.95rem;
}

.login-page .form-group[b-veprshxrpj] {
    margin-bottom: 1.25rem;
}

.login-page .form-label[b-veprshxrpj] {
    display: block;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.login-page .form-control[b-veprshxrpj] {
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--surface-sunken);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.login-page .form-control:focus[b-veprshxrpj] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(31, 148, 185, 0.15);
    background: var(--surface-card);
}

.login-page .form-control[b-veprshxrpj]::placeholder {
    color: var(--text-muted);
}

.login-page .btn-primary[b-veprshxrpj] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    color: #ffffff;
    border: none;
    padding: 1rem 2rem;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(30, 148, 188, 0.3);
}

.login-page .btn-primary:hover[b-veprshxrpj] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(31, 148, 185, 0.3);
}

.login-page .btn-primary:active[b-veprshxrpj] {
    transform: translateY(0);
}

.login-page .alert-danger[b-veprshxrpj] {
    background: rgba(195, 29, 100, 0.08);
    border: 1px solid rgba(195, 29, 100, 0.25);
    color: var(--color-accent);
    padding: 0.875rem 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}

@media (max-width: 480px) {
    .login-page .login-card[b-veprshxrpj] { padding: 1.5rem 1.25rem; margin: 0 0.5rem; }
    .login-page .login-header h1[b-veprshxrpj] { font-size: 1.3rem; }
}
/* /Components/Pages/Account/LoginWithRecoveryCode.razor.rz.scp.css */
/* Full viewport login page — matches Login.razor.css */
.login-page[b-mwi26pqjr9] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--surface-card);
    margin: 0;
    padding: 1rem;
    box-sizing: border-box;
    z-index: 50;
}

.login-spacer-top[b-mwi26pqjr9] {
    flex: 1;
}

.login-spacer[b-mwi26pqjr9] {
    flex: 1;
}

.login-spacer-bottom[b-mwi26pqjr9] {
    flex: 3;
}

.login-page .login-card[b-mwi26pqjr9] {
    width: 100%;
    max-width: 420px;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.login-page .login-header[b-mwi26pqjr9] {
    text-align: center;
    margin-bottom: 2rem;
}

.login-page .login-header h1[b-mwi26pqjr9] {
    color: var(--text-primary);
    font-size: 1.75rem;
    margin: 0 0 0.5rem 0;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.login-page .login-header p[b-mwi26pqjr9] {
    color: var(--text-muted);
    margin: 0;
    font-size: 0.95rem;
}

.login-page .form-group[b-mwi26pqjr9] {
    margin-bottom: 1.25rem;
}

.login-page .form-label[b-mwi26pqjr9] {
    display: block;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.login-page .form-control[b-mwi26pqjr9] {
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--surface-sunken);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.login-page .form-control:focus[b-mwi26pqjr9] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(31, 148, 185, 0.15);
    background: var(--surface-card);
}

.login-page .form-control[b-mwi26pqjr9]::placeholder {
    color: var(--text-muted);
}

.login-page .btn-primary[b-mwi26pqjr9] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    color: #ffffff;
    border: none;
    padding: 1rem 2rem;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(30, 148, 188, 0.3);
}

.login-page .btn-primary:hover[b-mwi26pqjr9] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(31, 148, 185, 0.3);
}

.login-page .btn-primary:active[b-mwi26pqjr9] {
    transform: translateY(0);
}

.login-page .alert-danger[b-mwi26pqjr9] {
    background: rgba(195, 29, 100, 0.08);
    border: 1px solid rgba(195, 29, 100, 0.25);
    color: var(--color-accent);
    padding: 0.875rem 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}

@media (max-width: 480px) {
    .login-page .login-card[b-mwi26pqjr9] { padding: 1.5rem 1.25rem; margin: 0 0.5rem; }
    .login-page .login-header h1[b-mwi26pqjr9] { font-size: 1.3rem; }
}
/* /Components/Pages/Account/Logout.razor.rz.scp.css */
.btn-logout-confirm[b-qbphkgrtyn] {
    width: 100%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    color: #ffffff;
    border: none;
    padding: 1rem 2rem;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(30, 148, 188, 0.3);
    margin-bottom: 0.75rem;
}

.btn-logout-confirm:hover[b-qbphkgrtyn] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(31, 148, 185, 0.3);
}

.btn-logout-confirm:active[b-qbphkgrtyn] {
    transform: translateY(0);
}

.btn-logout-cancel[b-qbphkgrtyn] {
    display: block;
    width: 100%;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
    padding: 0.875rem 2rem;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
}

.btn-logout-cancel:hover[b-qbphkgrtyn] {
    background: var(--surface-hover);
    color: var(--text-primary);
    border-color: var(--border-strong);
}
/* /Components/Pages/Account/MyDokumente.razor.rz.scp.css */
/* Dokumente page — per-controller document workspace (ADR-0028).
   Mirrors KontaktePage.razor.css so the two sibling pages in the
   Anlagespezifisches dropdown feel like part of the same family. */

.dokumente-page[b-3yr4o7l67q] {
    display: flex;
    flex-direction: column;
    background: transparent;
    color: var(--text-body);
    gap: 1rem;
}

/* ── Page header ──────────────────────────────────────── */

.page-header[b-3yr4o7l67q] {
    padding: 0.75rem 1.25rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg, 8px);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.page-title[b-3yr4o7l67q] {
    margin: 0;
    font-size: 1.1rem;
    color: var(--color-primary);
    font-weight: 600;
}

.back-link[b-3yr4o7l67q] {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.9rem;
    white-space: nowrap;
}
.back-link:hover[b-3yr4o7l67q] { color: var(--color-primary-hover); }

/* ADR-0172 stage 2 — cross-scope search entry point, pushed to the far side. */
.dok-search-all-link[b-3yr4o7l67q] {
    margin-left: auto;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.85rem;
    white-space: nowrap;
}
.dok-search-all-link:hover[b-3yr4o7l67q] { color: var(--color-primary-hover); }

.intro-text[b-3yr4o7l67q] {
    color: var(--text-secondary);
    font-size: 0.9rem;
    max-width: 780px;
    margin: 0;
    line-height: 1.5;
}

/* ── Stacked layout — upload above, list below, both full-width ── */

.dok-stack[b-3yr4o7l67q] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dok-upload-panel[b-3yr4o7l67q],
.dok-list-panel[b-3yr4o7l67q] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg, 8px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.dok-list-panel .upload-card-header[b-3yr4o7l67q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dok-count-badge[b-3yr4o7l67q] {
    background: var(--color-primary);
    color: var(--text-on-primary);
    border-radius: var(--radius-full);
    padding: 0.05rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: auto;
}

.dok-category-hint[b-3yr4o7l67q] {
    font-size: 0.78rem;
    color: var(--text-secondary);
    background: var(--color-primary-10, var(--surface-page));
    border-left: 3px solid var(--color-primary);
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    margin-top: 0.35rem;
    line-height: 1.4;
}

/* ── Document-list cell typography ───────────────────── */

.doc-title[b-3yr4o7l67q] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-body);
    line-height: 1.3;
}

.doc-filename-sub[b-3yr4o7l67q] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: monospace;
    margin-top: 0.15rem;
    word-break: break-all;
}

.doc-description[b-3yr4o7l67q] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.35rem;
    line-height: 1.4;
    max-width: 540px;
    white-space: pre-wrap;
}

.empty-state-inline[b-3yr4o7l67q] {
    border: none;
    background: transparent;
    margin: 0;
    padding: 2.5rem 1rem;
    text-align: center;
}

.doc-table-inline[b-3yr4o7l67q] {
    border: none;
    border-radius: 0;
    max-width: none;
}

/* ── Card (upload form) ───────────────────────────────── */

.upload-card[b-3yr4o7l67q] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg, 8px);
    overflow: hidden;
    /* Stacked layout (upload above, list below) — both go full
       page width. Status messages + empty-state stay narrow on
       purpose because text-blocks read better that way. */
}

.upload-card-header[b-3yr4o7l67q] {
    padding: 0.5rem 1rem;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-default);
    font-size: 0.95rem;
    color: var(--color-primary);
    font-weight: 600;
    min-height: 48px;
    display: flex;
    align-items: center;
}

.upload-card-body[b-3yr4o7l67q] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Form rows (match KontaktePage idiom) ─────────────── */

.dok-form-row[b-3yr4o7l67q] { display: flex; flex-direction: column; gap: 0.25rem; }
.dok-form-row > label[b-3yr4o7l67q] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}
.dok-form-row input[b-3yr4o7l67q],
.dok-form-row textarea[b-3yr4o7l67q],
.dok-form-row select[b-3yr4o7l67q] {
    padding: 0.5rem 0.75rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-body);
    font-size: 0.9rem;
    box-sizing: border-box;
    font-family: inherit;
    width: 100%;
    max-width: 400px;
}
.dok-form-row textarea[b-3yr4o7l67q] { resize: vertical; min-height: 60px; max-width: 600px; }
.dok-form-row select[b-3yr4o7l67q] { max-width: 300px; }
.dok-form-row input:focus[b-3yr4o7l67q],
.dok-form-row textarea:focus[b-3yr4o7l67q],
.dok-form-row select:focus[b-3yr4o7l67q] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-10);
}

/* ADR-0172 Stufe 3 — the confidential checkbox row is not a single-input
   field like the rest of .dok-form-row, so its label + checkbox sit side
   by side instead of being stretched by the generic input rules above. */
.dok-form-check > label[b-3yr4o7l67q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-body);
    margin-bottom: 0;
}
.dok-form-check input[type="checkbox"][b-3yr4o7l67q] {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
}

.dok-form-actions[b-3yr4o7l67q] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

/* Reuse the same btn-save styling as KontaktePage for symmetry. */
.btn-save[b-3yr4o7l67q] {
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: var(--text-on-primary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
}
.btn-save:hover[b-3yr4o7l67q] { background: var(--color-primary-hover); }
.btn-save:disabled[b-3yr4o7l67q] { opacity: 0.5; cursor: not-allowed; }

/* ── Status messages ──────────────────────────────────── */

.status-message[b-3yr4o7l67q] {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md, 6px);
    font-size: 0.85rem;
    max-width: 780px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.status-message.success[b-3yr4o7l67q] { background: var(--color-success-light); color: var(--color-success); }
.status-message.error[b-3yr4o7l67q]   { background: var(--color-danger-light);  color: var(--color-danger); }
.status-message .close-btn[b-3yr4o7l67q] {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    margin-left: auto;
    font-size: 1.2rem;
}

.empty-state[b-3yr4o7l67q] {
    padding: 2rem 1rem;
    background: var(--surface-card);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-lg, 8px);
    color: var(--text-secondary);
    text-align: center;
    max-width: 780px;
}

/* ── Document table ───────────────────────────────────── */

.doc-table-wrapper[b-3yr4o7l67q] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg, 8px);
    overflow: hidden;
}

.doc-table[b-3yr4o7l67q] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.doc-table thead th[b-3yr4o7l67q] {
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-default);
    color: var(--text-secondary);
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.6rem 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.doc-table tbody td[b-3yr4o7l67q] {
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--border-subtle, var(--border-default));
    color: var(--text-body);
    vertical-align: middle;
}

.doc-table tbody tr:last-child td[b-3yr4o7l67q] { border-bottom: none; }
.doc-table tbody tr:hover[b-3yr4o7l67q] { background: var(--surface-hover); }

.doc-name[b-3yr4o7l67q] { display: flex; align-items: center; gap: 0.4rem; font-weight: 500; }

.doc-actions[b-3yr4o7l67q] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

/* ── Loading / error screens ──────────────────────────── */

.loading-screen[b-3yr4o7l67q], .error-screen[b-3yr4o7l67q] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    gap: 1rem;
    padding: 3rem 1rem;
}
.loading-screen .spinner[b-3yr4o7l67q] {
    width: 50px;
    height: 50px;
    border: 4px solid var(--border-default);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-3yr4o7l67q 1s linear infinite;
}
.error-screen .icon[b-3yr4o7l67q] { font-size: 2.5rem; }
.error-screen h3[b-3yr4o7l67q] { margin: 0; color: var(--color-danger); font-size: 1.1rem; }
.btn-back[b-3yr4o7l67q] {
    padding: 0.75rem 1.5rem;
    background: var(--color-primary);
    color: var(--text-on-primary);
    text-decoration: none;
    border-radius: var(--radius);
    font-weight: 500;
}

@keyframes spin-b-3yr4o7l67q { to { transform: rotate(360deg); } }

/* ── Responsive ───────────────────────────────────────── */

@media (max-width: 760px) {
    .doc-table thead[b-3yr4o7l67q] { display: none; }
    .doc-table tbody td[b-3yr4o7l67q] {
        display: block;
        padding: 0.3rem 0.9rem;
        border-bottom: none;
    }
    .doc-table tbody tr[b-3yr4o7l67q] {
        display: block;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--border-default);
    }
    .doc-table tbody tr:last-child[b-3yr4o7l67q] { border-bottom: none; }
}
/* /Components/Pages/Admin/AdminAlerts.razor.rz.scp.css */
/* Per-event admin-alert report (ADR-0192).
   Tokens only — a hard-coded colour here is a bug (see CLAUDE.md, design system). */

.alerts-page[b-q3y3r7c6vy] {
    padding: var(--space-4);
    color: var(--text-body);
}

.alerts-head[b-q3y3r7c6vy] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.alerts-head h1[b-q3y3r7c6vy] {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.alerts-sub[b-q3y3r7c6vy] {
    margin: var(--space-1) 0 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    max-width: 60ch;
}

/* ── Filter bar ────────────────────────────────────────────────────────────── */
/* Auto-fit rather than fixed columns: a flex row with flex-shrink:0 is what pushed
   /heizungen to 390 px of horizontal scroll (memory, 2026-09-20). Grid wraps instead. */
.alerts-filter[b-q3y3r7c6vy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.alerts-field[b-q3y3r7c6vy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;   /* lets a long <select> option shrink instead of widening the grid */
}

.alerts-field-wide[b-q3y3r7c6vy] {
    grid-column: span 2;
}

.alerts-field label[b-q3y3r7c6vy] {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.alerts-field select[b-q3y3r7c6vy],
.alerts-field input[b-q3y3r7c6vy] {
    min-width: 0;
    max-width: 100%;
}

.alerts-dates[b-q3y3r7c6vy] {
    display: flex;
    gap: var(--space-2);
    min-width: 0;
}

.alerts-dates input[b-q3y3r7c6vy] {
    flex: 1 1 0;
    min-width: 0;
}

.alerts-field-check[b-q3y3r7c6vy] {
    justify-content: flex-end;
}

.alerts-field-check label[b-q3y3r7c6vy] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-body);
}

.alerts-hint[b-q3y3r7c6vy] {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* ── Table ─────────────────────────────────────────────────────────────────── */
.alerts-table-wrap[b-q3y3r7c6vy] {
    overflow-x: auto;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

.alerts-table[b-q3y3r7c6vy] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.alerts-table thead tr[b-q3y3r7c6vy] {
    background: var(--surface-sunken);
}

.alerts-table th[b-q3y3r7c6vy],
.alerts-table td[b-q3y3r7c6vy] {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    text-align: left;
    vertical-align: top;
}

.alerts-sort[b-q3y3r7c6vy] {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;          /* a <button> does NOT inherit font-family (memory, 2026-09-30) */
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    cursor: pointer;
}

.alerts-row[b-q3y3r7c6vy] {
    cursor: pointer;
}

.alerts-row:hover[b-q3y3r7c6vy] {
    background: var(--surface-hover);
}

.alerts-col-time[b-q3y3r7c6vy] {
    white-space: nowrap;
}

.alerts-time[b-q3y3r7c6vy] {
    display: block;
}

.alerts-time-utc[b-q3y3r7c6vy] {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.alerts-col-sev[b-q3y3r7c6vy],
.alerts-col-host[b-q3y3r7c6vy],
.alerts-col-mail[b-q3y3r7c6vy] {
    white-space: nowrap;
}

.alerts-cat[b-q3y3r7c6vy] {
    font-family: var(--font-mono);
    color: var(--color-primary);
    word-break: break-word;
}

.alerts-summary[b-q3y3r7c6vy] {
    min-width: 24ch;
}

.alerts-expand[b-q3y3r7c6vy] {
    margin-left: var(--space-2);
    color: var(--text-secondary);
}

.alerts-empty[b-q3y3r7c6vy] {
    padding: var(--space-5);
    text-align: center;
    color: var(--text-secondary);
}

/* ── Expanded detail ──────────────────────────────────────────────────────── */
.alerts-detailrow td[b-q3y3r7c6vy] {
    background: var(--surface-sunken);
}

.alerts-detail-block + .alerts-detail-block[b-q3y3r7c6vy] {
    margin-top: var(--space-3);
}

.alerts-detail-block h4[b-q3y3r7c6vy] {
    margin: 0 0 var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.alerts-detail-block pre[b-q3y3r7c6vy] {
    margin: 0;
    padding: var(--space-2);
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    white-space: pre-wrap;      /* a stack trace must wrap, not scroll the page sideways */
    word-break: break-word;
    max-height: 24rem;
    overflow-y: auto;
}

/* ── Pager ─────────────────────────────────────────────────────────────────── */
.alerts-pager[b-q3y3r7c6vy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.alerts-count[b-q3y3r7c6vy] {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.alerts-pager-buttons[b-q3y3r7c6vy] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

@media (max-width: 640px) {
    .alerts-page[b-q3y3r7c6vy] {
        padding: var(--space-3) var(--space-3);
    }

    .alerts-field-wide[b-q3y3r7c6vy] {
        grid-column: span 1;
    }
}
/* /Components/Pages/Admin/AdminDatenversand.razor.rz.scp.css */
.dva-page[b-tazt6c90yy] {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    color: var(--text-body);
}

.dva-header h2[b-tazt6c90yy] {
    margin: 0 0 var(--space-1) 0;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.dva-sub[b-tazt6c90yy] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    max-width: 80ch;
}

/* ── Status message ── */
.status-message[b-tazt6c90yy] {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
}
.status-message.success[b-tazt6c90yy] { background: var(--color-success-10); color: var(--color-success); }
.status-message.error[b-tazt6c90yy]   { background: var(--color-danger-10);  color: var(--color-danger); }
.status-message .close-btn[b-tazt6c90yy] {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    margin-left: auto;
    font-size: var(--font-size-lg);
}

/* ── Empty state ── */
.dva-empty[b-tazt6c90yy] {
    padding: var(--space-5);
    color: var(--text-muted);
    text-align: center;
    font-size: var(--font-size-sm);
    background: var(--surface-sunken);
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-md);
}

/* ── Toolbar ── */
.dva-toolbar[b-tazt6c90yy] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-3);
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

.dva-input[b-tazt6c90yy] {
    flex: 1;
    min-width: 18rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-page);
    color: var(--text-body);
    font-size: var(--font-size-sm);
}
.dva-input:focus[b-tazt6c90yy] {
    outline: none;
    border-color: var(--border-focus);
}

.dva-summary[b-tazt6c90yy] {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ── Table ── */
.dva-table-scroll[b-tazt6c90yy] {
    overflow-x: auto;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

.dva-table[b-tazt6c90yy] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.dva-table th[b-tazt6c90yy],
.dva-table td[b-tazt6c90yy] {
    padding: var(--space-2) var(--space-3);
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: top;
}

.dva-table th[b-tazt6c90yy] {
    background: var(--surface-sunken);
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.dva-table tbody tr:hover[b-tazt6c90yy] {
    background: var(--surface-hover);
}

.dva-anlage[b-tazt6c90yy] {
    display: flex;
    flex-direction: column;
}
.dva-projekt[b-tazt6c90yy] {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}
.dva-ctrl[b-tazt6c90yy] {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
}

.dva-ok-date[b-tazt6c90yy] { color: var(--text-body); }

.dva-dest[b-tazt6c90yy] {
    max-width: 20ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
}

.dva-actions[b-tazt6c90yy] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: center;
}

.dva-confirm[b-tazt6c90yy] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.dva-run-ok[b-tazt6c90yy]  { color: var(--color-success); font-size: var(--font-size-xs); width: 100%; margin: var(--space-1) 0 0; }
.dva-run-err[b-tazt6c90yy] { color: var(--color-danger);  font-size: var(--font-size-xs); width: 100%; margin: var(--space-1) 0 0; }

.dva-nomatch[b-tazt6c90yy] {
    padding: var(--space-4);
    color: var(--text-muted);
    text-align: center;
}

/* ── Buttons ── */
.dva-mini-btn[b-tazt6c90yy] {
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border-default);
    background: transparent;
    color: var(--text-body);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--font-size-xs);
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.dva-mini-btn:hover[b-tazt6c90yy] { background: var(--surface-hover); }
.dva-mini-btn:disabled[b-tazt6c90yy] { opacity: 0.5; cursor: not-allowed; }
.dva-mini-btn.dva-danger[b-tazt6c90yy] { border-color: var(--color-danger); color: var(--color-danger); }
/* /Components/Pages/Admin/AdminHub.razor.rz.scp.css */
/* Admin hub — two-section flat card grid (Verwaltung + Migration).
   Mirrors existing Benachrichtigungen.razor.css conventions
   (var(--surface-card), var(--border-default), 8-10px radius) so the
   hub doesn't introduce a new visual language.

   The Migration section is locked-by-default (faded + non-interactive);
   clicking the "Migration freischalten" button opens the legacy
   production-database warning modal. Confirming unlocks the section
   for the session (reload re-locks). */

.admin-hub[b-wejvf6bqaa] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.admin-hub-header[b-wejvf6bqaa] {
    margin-bottom: 1.5rem;
}

.admin-hub-header h1[b-wejvf6bqaa] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    color: var(--text-primary);
}

.admin-hub-subtitle[b-wejvf6bqaa] {
    margin: 0 0 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.admin-hub-search input[b-wejvf6bqaa] {
    width: 100%;
    max-width: 480px;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-primary);
    font-size: 1rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.admin-hub-search input:focus[b-wejvf6bqaa] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* Each section (Verwaltung + Migration) gets its own header strip
   and grid. They sit one above the other; no visual joiner — the
   section title carries the boundary. */
.admin-hub-section[b-wejvf6bqaa] {
    margin-top: 1.75rem;
}

.admin-hub-section:first-of-type[b-wejvf6bqaa] {
    margin-top: 0;
}

.admin-hub-section-title[b-wejvf6bqaa] {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 0.85rem;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.admin-hub-subsection-title[b-wejvf6bqaa] {
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0.9rem 0 0.5rem;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.admin-hub-subsection-title:first-of-type[b-wejvf6bqaa] {
    margin-top: 0;
}

/* Migration section: locked = faded out + non-interactive; unlocked =
   full opacity + clickable. The transition is on the grid wrapper
   (not the cards) so individual hover transitions on cards still
   feel snappy after unlock. */
.admin-hub-section-migration .admin-hub-grid[b-wejvf6bqaa] {
    transition: opacity 0.35s ease-out, filter 0.35s ease-out;
}

.admin-hub-section-migration.is-locked .admin-hub-grid[b-wejvf6bqaa] {
    opacity: 0.35;
    filter: grayscale(0.6);
    pointer-events: none;
    user-select: none;
}

.admin-hub-section-migration.is-unlocked .admin-hub-grid[b-wejvf6bqaa] {
    opacity: 1;
    filter: none;
    pointer-events: auto;
}

/* Unlock button — visually distinct from the cards (orange/warning
   tint) so operators know they're crossing into "danger zone" before
   even seeing the modal. */
.admin-hub-unlock-btn[b-wejvf6bqaa] {
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius);
    border: 1px solid var(--color-danger);
    background: color-mix(in srgb, var(--color-danger) 8%, var(--surface-card));
    color: var(--color-danger);
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    transition: background 0.15s, transform 0.1s;
}

.admin-hub-unlock-btn:hover[b-wejvf6bqaa] {
    background: color-mix(in srgb, var(--color-danger) 16%, var(--surface-card));
}

.admin-hub-unlock-btn:active[b-wejvf6bqaa] {
    transform: scale(0.98);
}

.admin-hub-unlock-state[b-wejvf6bqaa] {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--color-danger);
    text-transform: none;
    letter-spacing: 0;
}

/* Responsive card grid. Auto-fill keeps cards a comfortable 240px wide
   minimum and fills the row as the viewport allows. min(240px, 100%)
   prevents single-column overflow on very narrow phones. */
.admin-hub-grid[b-wejvf6bqaa] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 1rem;
}

.admin-hub-card[b-wejvf6bqaa] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 1.1rem 1rem;
    min-height: 116px;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: var(--text-primary);
    transition: transform 0.12s ease-out,
                box-shadow 0.15s,
                border-color 0.15s,
                background 0.15s;
}

.admin-hub-card:hover[b-wejvf6bqaa] {
    border-color: var(--color-primary);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 18%, transparent);
    transform: translateY(-2px);
}

.admin-hub-card:active[b-wejvf6bqaa] {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.admin-hub-card:focus-visible[b-wejvf6bqaa] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.admin-hub-card-icon[b-wejvf6bqaa] {
    font-size: 1.75rem;
    line-height: 1;
}

.admin-hub-card-title[b-wejvf6bqaa] {
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.admin-hub-card-hint[b-wejvf6bqaa] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

/* Danger variant for the destructive migration operation
   (QH-Data Migration). Carries the accent even when the section is
   unlocked, so the danger badge inside the title stays paired with a
   red border. */
.admin-hub-card-danger[b-wejvf6bqaa] {
    border-color: var(--color-danger);
}

.admin-hub-card-danger:hover[b-wejvf6bqaa] {
    border-color: var(--color-danger);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-danger) 22%, transparent);
}

.admin-hub-card-badge[b-wejvf6bqaa] {
    font-size: 0.95rem;
    color: var(--color-danger);
}

.admin-hub-empty[b-wejvf6bqaa] {
    grid-column: 1 / -1;
    padding: 1.25rem 1rem;
    text-align: center;
    color: var(--text-secondary);
    background: var(--surface-card);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
}

@media (max-width: 640px) {
    .admin-hub[b-wejvf6bqaa] {
        padding: 1rem 0.75rem;
    }
    .admin-hub-card[b-wejvf6bqaa] {
        min-height: 100px;
        padding: 0.9rem;
    }
    .admin-hub-card-icon[b-wejvf6bqaa] {
        font-size: 1.5rem;
    }
    .admin-hub-section-title[b-wejvf6bqaa] {
        font-size: 0.95rem;
    }
}

/* Navigation overlay shown the moment a card is clicked — covers the
   whole hub with a translucent backdrop + a centered spinner + label.
   Disappears when the target page replaces this DOM. The .spinner class
   is defined globally in app.css (40px circular border, spin keyframe). */
.admin-hub-nav-overlay[b-wejvf6bqaa] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: var(--z-shell-overlay);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.admin-hub-nav-overlay p[b-wejvf6bqaa] {
    margin: 0;
    color: white;
    font-size: 1.05rem;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
/* /Components/Pages/Admin/AnlagenCrud.razor.rz.scp.css */
.crud-page[b-bj731gyruu] {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    color: var(--text-body);
}

.crud-header h2[b-bj731gyruu] {
    margin: 0 0 var(--space-1) 0;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.crud-sub[b-bj731gyruu] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    max-width: 70ch;
}

.crud-warn-inline[b-bj731gyruu] {
    color: var(--color-warning);
    font-weight: var(--font-weight-semibold);
}

/* ── Controller bar ── */
.crud-controller-bar[b-bj731gyruu] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-3);
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

.crud-controller-bar label[b-bj731gyruu] {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.crud-controller-current[b-bj731gyruu] {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.crud-select[b-bj731gyruu],
.crud-input[b-bj731gyruu] {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-page);
    color: var(--text-body);
    font-size: var(--font-size-sm);
}

.crud-select:focus[b-bj731gyruu],
.crud-input:focus[b-bj731gyruu] {
    outline: none;
    border-color: var(--border-focus);
}

.crud-controller-filter[b-bj731gyruu] {
    min-width: 16rem;
}

.crud-select-sm[b-bj731gyruu] {
    padding: 2px var(--space-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-page);
    color: var(--text-body);
}

.crud-empty[b-bj731gyruu],
.crud-empty-small[b-bj731gyruu] {
    padding: var(--space-4);
    color: var(--text-muted);
    text-align: center;
    font-size: var(--font-size-sm);
}

.crud-empty[b-bj731gyruu] {
    background: var(--surface-sunken);
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-md);
}

/* ── Body layout ── */
.crud-body[b-bj731gyruu] {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--space-4);
    align-items: start;
}

@media (max-width: 900px) {
    .crud-body[b-bj731gyruu] {
        grid-template-columns: 1fr;
    }
}

/* ── Left pane: table list ── */
.crud-tables[b-bj731gyruu] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    max-height: 75vh;
}

.crud-tables-head[b-bj731gyruu] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

.crud-tables-head .crud-input[b-bj731gyruu] {
    flex: 1;
}

.crud-tables-total[b-bj731gyruu] {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

.crud-tables-scroll[b-bj731gyruu] {
    overflow-y: auto;
    padding: var(--space-2);
}

.crud-group[b-bj731gyruu] {
    margin-bottom: var(--space-3);
}

.crud-group-title[b-bj731gyruu] {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: var(--space-1) var(--space-2);
    font-weight: var(--font-weight-semibold);
}

.crud-table-item[b-bj731gyruu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: none;
    background: transparent;
    color: var(--text-body);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    font-size: var(--font-size-sm);
}

.crud-table-item:hover[b-bj731gyruu] {
    background: var(--surface-hover);
}

.crud-table-item.is-active[b-bj731gyruu] {
    background: var(--color-primary-10);
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.crud-table-name[b-bj731gyruu] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crud-badge[b-bj731gyruu] {
    flex-shrink: 0;
    background: var(--surface-sunken);
    color: var(--text-secondary);
    border-radius: var(--radius-full);
    padding: 0 var(--space-2);
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
}

/* ── Right pane: grid ── */
.crud-grid-pane[b-bj731gyruu] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    min-height: 200px;
}

.crud-grid-toolbar[b-bj731gyruu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}

.crud-grid-toolbar h3[b-bj731gyruu] {
    margin: 0;
    font-size: var(--font-size-lg);
    color: var(--text-primary);
}

.crud-grid-actions[b-bj731gyruu] {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.crud-table-scroll[b-bj731gyruu] {
    overflow-x: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.crud-data-table[b-bj731gyruu] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.crud-data-table th[b-bj731gyruu],
.crud-data-table td[b-bj731gyruu] {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    text-align: left;
    white-space: nowrap;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crud-data-table th[b-bj731gyruu] {
    position: sticky;
    top: 0;
    background: var(--surface-sunken);
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
    font-weight: var(--font-weight-semibold);
}

.crud-data-table th.is-sorted[b-bj731gyruu] {
    color: var(--color-primary);
}

.crud-data-table tbody tr:hover[b-bj731gyruu] {
    background: var(--surface-hover);
}

.crud-pk[b-bj731gyruu] {
    margin-left: var(--space-1);
    font-size: var(--font-size-xs);
}

.crud-actions-col[b-bj731gyruu] {
    white-space: nowrap;
    width: 1%;
}

.crud-icon-btn[b-bj731gyruu] {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-base);
    padding: 2px var(--space-1);
    border-radius: var(--radius-sm);
}

.crud-icon-btn:hover[b-bj731gyruu] {
    background: var(--surface-active);
}

.crud-danger[b-bj731gyruu] {
    color: var(--color-danger);
}

/* ── Buttons ── */
.crud-btn[b-bj731gyruu],
.crud-btn-sm[b-bj731gyruu] {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-page);
    color: var(--text-body);
    cursor: pointer;
    font-size: var(--font-size-sm);
}

.crud-btn-sm[b-bj731gyruu] {
    padding: 2px var(--space-2);
}

.crud-btn:hover:not(:disabled)[b-bj731gyruu],
.crud-btn-sm:hover:not(:disabled)[b-bj731gyruu] {
    background: var(--surface-hover);
}

.crud-btn:disabled[b-bj731gyruu],
.crud-btn-sm:disabled[b-bj731gyruu] {
    opacity: 0.5;
    cursor: not-allowed;
}

.crud-btn-primary[b-bj731gyruu] {
    background: var(--color-primary);
    color: var(--text-on-primary);
    border-color: var(--color-primary);
}

.crud-btn-primary:hover:not(:disabled)[b-bj731gyruu] {
    background: var(--color-primary-hover);
}

/* ── Pager ── */
.crud-pager[b-bj731gyruu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.crud-pager-controls[b-bj731gyruu] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* ── Alerts ── */
.crud-alert[b-bj731gyruu] {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-3);
    font-size: var(--font-size-sm);
}

.crud-alert-error[b-bj731gyruu] {
    background: var(--color-danger-10);
    color: var(--color-danger);
    border: 1px solid var(--color-danger-light);
}

.crud-alert-ok[b-bj731gyruu] {
    background: var(--color-success-10);
    color: var(--color-success);
    border: 1px solid var(--color-success-light);
}

.crud-loading[b-bj731gyruu] {
    padding: var(--space-5);
    text-align: center;
    color: var(--text-muted);
}

/* ── Big-table warning ── */
.crud-bigwarn[b-bj731gyruu] {
    padding: var(--space-4);
    background: var(--color-warning-10);
    border: 1px solid var(--color-warning-light);
    border-radius: var(--radius-md);
}

.crud-bigwarn h3[b-bj731gyruu] {
    margin: 0 0 var(--space-2) 0;
    color: var(--color-warning);
}

/* ── Modal editor ── */
.crud-modal-backdrop[b-bj731gyruu] {
    position: fixed;
    inset: 0;
    background: var(--surface-overlay);
    z-index: var(--z-modal-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.crud-modal[b-bj731gyruu] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-modal);
    width: min(640px, 100%);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}

.crud-modal-head[b-bj731gyruu],
.crud-modal-foot[b-bj731gyruu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
}

.crud-modal-head[b-bj731gyruu] {
    border-bottom: 1px solid var(--border-subtle);
}

.crud-modal-head h3[b-bj731gyruu] {
    margin: 0;
    font-size: var(--font-size-lg);
    color: var(--text-primary);
}

.crud-modal-foot[b-bj731gyruu] {
    border-top: 1px solid var(--border-subtle);
    gap: var(--space-2);
    justify-content: flex-end;
}

.crud-modal-body[b-bj731gyruu] {
    overflow-y: auto;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.crud-field[b-bj731gyruu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.crud-field label[b-bj731gyruu] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.crud-field .crud-input[b-bj731gyruu] {
    width: 100%;
}

.crud-ro[b-bj731gyruu] {
    color: var(--text-muted);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-xs);
}

.crud-req[b-bj731gyruu] {
    color: var(--color-danger);
    margin-left: 2px;
}

.crud-hint[b-bj731gyruu] {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.crud-check[b-bj731gyruu] {
    width: 18px;
    height: 18px;
}
/* /Components/Pages/Admin/ApiZugriffslog.razor.rz.scp.css */
/* Layout for /admin/api-zugriffslog.
   This application ships no Bootstrap -- the grid classes in app.css exist only so legacy
   markup keeps working (BootstrapGridConventionTests). New markup does its own flex/grid
   here, on the house --space scale. */

.apilog-page[b-qfooz497j9] {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    color: var(--text-body);
}

.apilog-head[b-qfooz497j9] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.apilog-head h4[b-qfooz497j9] {
    margin: 0 0 var(--space-1) 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.apilog-sub[b-qfooz497j9] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

/* ── Filters: one auto-fitting grid, so it reflows to a single column on a phone
      instead of forcing the page wider than the viewport (the flex-shrink:0 trap). ── */
.apilog-filter[b-qfooz497j9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--space-2);
    align-items: end;
}

.apilog-field[b-qfooz497j9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.apilog-label[b-qfooz497j9] {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.apilog-dates[b-qfooz497j9] {
    display: flex;
    gap: var(--space-1);
    min-width: 0;
}

.apilog-actions[b-qfooz497j9] {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ── Daily volume strip ── */
.apilog-strip-head[b-qfooz497j9] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}

.apilog-strip[b-qfooz497j9] {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 56px;
}

.apilog-bar[b-qfooz497j9] {
    flex: 1 1 0;
    min-width: 3px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

.apilog-bar > span[b-qfooz497j9] {
    display: block;
    border-radius: 2px 2px 0 0;
}

.apilog-strip-legend[b-qfooz497j9] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: var(--space-1);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

/* ── Table ── */
.apilog-table-wrap[b-qfooz497j9] {
    overflow-x: auto;
}

.nowrap[b-qfooz497j9] {
    white-space: nowrap;
}

/* The sort headers are focusable controls, so the focus ring has to be visible -- keyboard
   users otherwise cannot tell which column they are about to sort. */
.apilog-table th[role="button"][b-qfooz497j9] {
    cursor: pointer;
    user-select: none;
}

.apilog-table th[role="button"]:focus-visible[b-qfooz497j9] {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* ── Pager ── */
.apilog-pager[b-qfooz497j9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.apilog-pager-info[b-qfooz497j9] {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.apilog-pager-buttons[b-qfooz497j9] {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.apilog-empty[b-qfooz497j9] {
    text-align: center;
    color: var(--text-secondary);
    padding: var(--space-5) var(--space-3);
}
/* /Components/Pages/Admin/Benachrichtigungen.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   Benachrichtigungen page — Summary, Tabs, Logs, Queue
   ══════════════════════════════════════════════════════════════ */

/* ── Summary Cards ── */
.bn-summary[b-o5czez1og1] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.bn-stat-card[b-o5czez1og1] {
    flex: 1;
    min-width: 120px;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    text-align: center;
}

.bn-stat-value[b-o5czez1og1] {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
}

.bn-stat-label[b-o5czez1og1] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.bn-pending[b-o5czez1og1] { color: #f59e0b; }
.bn-sending[b-o5czez1og1] { color: #3b82f6; }
.bn-success[b-o5czez1og1] { color: #22c55e; }
.bn-dryrun[b-o5czez1og1]  { color: #a855f7; }
.bn-failed[b-o5czez1og1]  { color: #ef4444; }

/* ── Tab Bar ── */
.bn-tabs[b-o5czez1og1] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-default);
    margin-bottom: 1rem;
    align-items: stretch;
}

.bn-tab[b-o5czez1og1] {
    padding: 0.6rem 1.2rem;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.bn-tab:hover[b-o5czez1og1] {
    color: var(--text-primary);
    background: var(--surface-hover);
}

.bn-tab.active[b-o5czez1og1] {
    color: var(--text-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
}

.bn-tab-count[b-o5czez1og1] {
    font-size: 0.75rem;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    background: var(--surface-hover);
    color: var(--text-secondary);
    font-weight: 500;
}

.bn-tab.active .bn-tab-count[b-o5czez1og1] {
    background: var(--color-primary);
    color: white;
}

/* ── Search Box ── */
.bn-search-box[b-o5czez1og1] {
    position: relative;
    align-self: center;
    margin-right: 0.5rem;
}

.bn-search-box input[b-o5czez1og1] {
    width: 180px;
    padding-right: 1.8rem;
}

.bn-search-clear[b-o5czez1og1] {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 0 4px;
    line-height: 1;
}

.bn-search-clear:hover[b-o5czez1og1] {
    color: var(--text-primary);
}

/* ── Filter Bar ── */
.bn-filter-bar[b-o5czez1og1] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
}

/* ── Störung Pills ── */
.bn-stoerung-pills[b-o5czez1og1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.bn-stoerung-pill[b-o5czez1og1] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    background: var(--surface-hover);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    white-space: nowrap;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bn-stoerung-pill strong[b-o5czez1og1] {
    color: var(--color-primary);
    margin-right: 0.1rem;
}

/* ── Row Classes ── */
.bn-row-failed[b-o5czez1og1] {
    background: rgba(239, 68, 68, 0.06) !important;
}

.bn-row-sending[b-o5czez1og1] {
    background: rgba(59, 130, 246, 0.06) !important;
}

.bn-row-dryrun[b-o5czez1og1] {
    background: rgba(168, 85, 247, 0.06) !important;
}

/* ── Badges ── */
[b-o5czez1og1] .badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
}

[b-o5czez1og1] .badge-success {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}

[b-o5czez1og1] .badge-danger {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

[b-o5czez1og1] .badge-warning {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

[b-o5czez1og1] .badge-info {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

[b-o5czez1og1] .badge-sms {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

[b-o5czez1og1] .badge-email {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

[b-o5czez1og1] .badge-dryrun {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
    border: 1px dashed rgba(168, 85, 247, 0.4);
}

/* ── Matrix-Übersicht ── */
.mx-row-threshold[b-o5czez1og1] {
    background: rgba(239, 68, 68, 0.08) !important;
}

.mx-row-counting[b-o5czez1og1] {
    background: rgba(245, 158, 11, 0.06) !important;
}

.mx-counter[b-o5czez1og1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mx-counter-bar[b-o5czez1og1] {
    flex: 1;
    height: 6px;
    border-radius: var(--radius-xs);
    background: var(--surface-hover);
    overflow: hidden;
    min-width: 40px;
}

.mx-counter-fill[b-o5czez1og1] {
    height: 100%;
    border-radius: var(--radius-xs);
    transition: width 0.3s;
}

.mx-fill-counting[b-o5czez1og1] {
    background: #f59e0b;
}

.mx-fill-threshold[b-o5czez1og1] {
    background: #ef4444;
}

/* ── Utility ── */
.bn-mono[b-o5czez1og1] {
    font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', monospace;
    font-size: 0.85rem;
}
/* /Components/Pages/Admin/BenutzerImport.razor.rz.scp.css */
.import-page[b-2f7njiiaqe] { padding: 1.5rem; }
    .page-header h2[b-2f7njiiaqe] { margin: 0; }
    .page-header .subtitle[b-2f7njiiaqe] { color: var(--text-secondary); margin: 0.25rem 0 1.5rem 0; }

    /* ── Import Section ── */
    .import-section[b-2f7njiiaqe] { max-width: 1100px; }

    .import-card[b-2f7njiiaqe] {
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
        margin-bottom: 1rem;
        overflow: hidden;
    }

    .import-card.info-border[b-2f7njiiaqe] { border-color: var(--color-primary); }
    .import-card.warn-border[b-2f7njiiaqe] { border-color: var(--color-warning); }
    .import-card.ok-border[b-2f7njiiaqe] { border-color: var(--color-success); }
    .import-card.err-border[b-2f7njiiaqe] { border-color: var(--color-danger); }

    .card-header-import[b-2f7njiiaqe] {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.7rem 1rem;
        background: var(--surface-sunken);
        border-bottom: 1px solid var(--border-default);
    }

    .card-header-import h4[b-2f7njiiaqe] { margin: 0; font-size: 1rem; }
    .card-header-import.info-bg[b-2f7njiiaqe] { background: var(--color-primary-light); }
    .card-header-import.warn-bg[b-2f7njiiaqe] { background: var(--color-warning-light); }
    .card-header-import.ok-bg[b-2f7njiiaqe] { background: var(--color-success-light); }
    .card-header-import.err-bg[b-2f7njiiaqe] { background: var(--color-danger-light); }

    .card-body-import[b-2f7njiiaqe] { padding: 1rem; }

    .step-badge[b-2f7njiiaqe] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        background: var(--color-primary);
        color: var(--text-primary);
        border-radius: 50%;
        font-size: 0.8rem;
        font-weight: 700;
        flex-shrink: 0;
    }

    /* Upload area */
    .upload-area[b-2f7njiiaqe] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        padding: 2rem 1.5rem;
        border: 2px dashed #adb5bd;
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .upload-area:hover[b-2f7njiiaqe] { border-color: var(--color-primary); background: var(--color-primary-light); }
    .upload-area[b-2f7njiiaqe]  input[type="file"] { display: none; }
    .upload-icon[b-2f7njiiaqe] { font-size: 2rem; }
    .upload-text[b-2f7njiiaqe] { font-size: 0.95rem; color: var(--text-secondary); }
    .upload-hint[b-2f7njiiaqe] { font-size: 0.8rem; color: var(--text-muted); }

    .import-spinner[b-2f7njiiaqe] {
        display: inline-block;
        width: 20px; height: 20px;
        border: 2px solid var(--text-muted);
        border-top-color: var(--color-primary);
        border-radius: 50%;
        animation: spin-b-2f7njiiaqe 0.6s linear infinite;
    }
    @keyframes spin-b-2f7njiiaqe { to { transform: rotate(360deg); } }

    .file-loaded[b-2f7njiiaqe] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        background: var(--color-success-light);
        border-radius: var(--radius);
    }

    .file-info[b-2f7njiiaqe] { display: flex; align-items: center; gap: 0.5rem; }
    .file-name[b-2f7njiiaqe] { color: #166534; }
    .file-size[b-2f7njiiaqe] { font-size: 0.85rem; color: var(--text-secondary); }

    .admin-list[b-2f7njiiaqe] { display: flex; flex-wrap: wrap; gap: 0.3rem; }
    .admin-badge[b-2f7njiiaqe] {
        background: var(--border-default);
        padding: 0.15rem 0.5rem;
        border-radius: var(--radius-xs);
        font-size: 0.85rem;
    }

    .import-warning-line[b-2f7njiiaqe] { color: #92400e; font-size: 0.9rem; padding: 0.15rem 0; }

    /* Stats grid */
    .stats-grid[b-2f7njiiaqe] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 0.6rem;
        margin-bottom: 1rem;
    }

    .stat-box[b-2f7njiiaqe] {
        border: 1px solid var(--border-default);
        border-radius: var(--radius);
        padding: 0.6rem;
        text-align: center;
    }

    .stat-value[b-2f7njiiaqe] { font-size: 1.4rem; font-weight: 700; }
    .stat-label[b-2f7njiiaqe] { font-size: 0.75rem; color: var(--text-secondary); }
    .stat-new .stat-value[b-2f7njiiaqe] { color: var(--color-success); }
    .stat-existing .stat-value[b-2f7njiiaqe] { color: var(--color-warning); }
    .stat-matched .stat-value[b-2f7njiiaqe] { color: var(--color-primary); }
    .stat-unmatched .stat-value[b-2f7njiiaqe] { color: var(--color-danger); }

    /* Import table */
    .import-table-wrapper[b-2f7njiiaqe] { overflow-x: auto; max-height: 450px; overflow-y: auto; }

    .import-table[b-2f7njiiaqe] {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.85rem;
    }

    .import-table thead[b-2f7njiiaqe] { position: sticky; top: 0; z-index: 2; }

    .import-table th[b-2f7njiiaqe] {
        background: var(--surface-sunken);
        padding: 0.5rem 0.6rem;
        border-bottom: 2px solid var(--color-primary);
        font-weight: 600;
        white-space: nowrap;
    }

    .import-table td[b-2f7njiiaqe] {
        padding: 0.35rem 0.6rem;
        border-bottom: 1px solid var(--border-default);
        vertical-align: top;
    }

    .import-table tr:hover[b-2f7njiiaqe] { background: var(--color-primary-light); }

    .mod-col[b-2f7njiiaqe] { text-align: center; width: 55px; }
    .mod-cell[b-2f7njiiaqe] { text-align: center; font-weight: 600; }
    .cell-new[b-2f7njiiaqe] { font-weight: 600; color: var(--color-success); }
    .cell-existing[b-2f7njiiaqe] { font-weight: 600; color: var(--color-warning); }
    .badge-exists[b-2f7njiiaqe] {
        font-size: 0.65rem;
        background: var(--color-warning-light);
        color: #92400e;
        padding: 0.1rem 0.35rem;
        border-radius: var(--radius-xs);
        margin-left: 0.3rem;
    }
    .user-count[b-2f7njiiaqe] { font-size: 0.75rem; color: var(--text-muted); font-weight: 400; }
    .row-unmatched[b-2f7njiiaqe] { opacity: 0.5; }
/* /Components/Pages/Admin/Benutzerverwaltung.razor.rz.scp.css */
/* ── Tabs ── */
    .tabs[b-bnwd7hk623] {
        display: flex;
        gap: 0;
        margin-bottom: 1.5rem;
        border-bottom: 2px solid var(--border-default);
    }

    .tab[b-bnwd7hk623] {
        padding: 0.6rem 1.2rem;
        border: none;
        background: transparent;
        font-size: 0.95rem;
        cursor: pointer;
        border-bottom: 3px solid transparent;
        margin-bottom: -2px;
        color: var(--text-secondary);
        transition: all 0.15s ease;
    }

    .tab:hover[b-bnwd7hk623] { color: var(--text-primary); }
    .tab.active[b-bnwd7hk623] {
        color: var(--color-primary);
        border-bottom-color: var(--color-primary);
        font-weight: 600;
    }

    /* ── Table row hover ── */
    .user-table tbody tr[b-bnwd7hk623] {
        cursor: pointer;
        transition: background-color 0.15s ease;
    }
    
    .user-table tbody tr:hover[b-bnwd7hk623] {
        background-color: #90caf9 !important; /* Strong blue highlight */
    }
    
    .user-table tbody tr:hover td[b-bnwd7hk623] {
        background-color: transparent;
    }
    
    /* Inactive users styling with hover */
    .user-table tbody tr.inactive[b-bnwd7hk623] {
        opacity: 0.6;
        background-color: var(--surface-sunken);
    }
    
    .user-table tbody tr.inactive:hover[b-bnwd7hk623] {
        background-color: #90caf9 !important;
        opacity: 0.8;
    }
    
    /* Alternating row colors with hover */
    .user-table.table-striped tbody tr:nth-of-type(odd)[b-bnwd7hk623] {
        background-color: rgba(0, 0, 0, 0.02);
    }
    
    .user-table.table-striped tbody tr:nth-of-type(odd):hover[b-bnwd7hk623] {
        background-color: #90caf9 !important;
    }

    /* ── Responsive ── */
    @media (max-width: 768px) {
        .tabs[b-bnwd7hk623] { overflow-x: auto; flex-wrap: nowrap; }
        .tab[b-bnwd7hk623] { white-space: nowrap; font-size: 0.85rem; padding: 0.5rem 0.8rem; }
    }
/* /Components/Pages/Admin/Bestandsverzeichnis.razor.rz.scp.css */
/* Filter bar: stays on one line on a desk screen, stacks on a phone.
   No flex-shrink:0 here — that is what pushed /heizungen off the viewport
   (flex-shrink-null-schiebt-die-seite-2026-09-20). */
.bv-bar[b-4o7r6oggmz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.bv-bar label[b-4o7r6oggmz] {
    font-weight: 600;
    color: var(--text-secondary);
}

.bv-bar select[b-4o7r6oggmz] {
    min-width: 0;
    max-width: 22rem;
}

.bv-count[b-4o7r6oggmz] {
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.bv-hint[b-4o7r6oggmz] {
    color: var(--text-secondary);
    background: var(--surface-sunken);
    border-left: 3px solid var(--color-warning);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
}

/* A support window that is about to close, and a build reading that failed:
   both mean "look here", so both get the same mark. */
.bv-stale[b-4o7r6oggmz] {
    color: var(--color-warning);
    font-weight: 600;
}

.bv-foot[b-4o7r6oggmz] {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin-top: var(--space-3);
}
/* /Components/Pages/Admin/BetriebsParamsImport.razor.rz.scp.css */
.bp-import[b-jmot5i6yq9] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem;
}

.page-header h2[b-jmot5i6yq9] {
    margin: 0 0 .25rem;
    color: var(--text-primary);
}

.subtitle[b-jmot5i6yq9] {
    color: var(--text-secondary);
    font-size: .9rem;
    line-height: 1.5;
}

.card[b-jmot5i6yq9] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    overflow: hidden;
}

.card-header[b-jmot5i6yq9] {
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--border-default);
    padding: .6rem .9rem;
    color: var(--text-primary);
}

.card-body[b-jmot5i6yq9] {
    padding: .9rem;
}

.scope[b-jmot5i6yq9] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.scope-field[b-jmot5i6yq9] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.scope-field label[b-jmot5i6yq9] {
    font-size: .8rem;
    color: var(--text-secondary);
}

.scope-field input[b-jmot5i6yq9],
.scope-field select[b-jmot5i6yq9] {
    padding: .4rem .5rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--text-primary);
    min-width: 220px;
}

.actions[b-jmot5i6yq9] {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1rem;
}

.stat-row[b-jmot5i6yq9] {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-bottom: .8rem;
}

.stat[b-jmot5i6yq9] {
    flex: 1 1 120px;
    text-align: center;
    padding: .6rem;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
}

.stat .n[b-jmot5i6yq9] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat .l[b-jmot5i6yq9] {
    font-size: .75rem;
    color: var(--text-secondary);
}

.stat.ok[b-jmot5i6yq9] { border-color: var(--color-success); }
.stat.warn[b-jmot5i6yq9] { border-color: var(--color-warning); }
.stat.bad[b-jmot5i6yq9] { border-color: var(--color-danger); }

.reject-breakdown[b-jmot5i6yq9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    font-size: .85rem;
    color: var(--text-secondary);
    margin-bottom: .8rem;
}

.badge[b-jmot5i6yq9] {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    font-size: .78rem;
    color: var(--text-primary);
}

.badge.ok[b-jmot5i6yq9] { border-color: var(--color-success); color: var(--color-success); }
.badge.miss[b-jmot5i6yq9] { border-color: var(--color-warning); color: var(--text-secondary); }

.table-scroll[b-jmot5i6yq9] {
    max-height: 420px;
    overflow: auto;
}

table.grid[b-jmot5i6yq9] {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}

table.grid th[b-jmot5i6yq9],
table.grid td[b-jmot5i6yq9] {
    padding: .35rem .5rem;
    border-bottom: 1px solid var(--border-subtle);
    text-align: left;
}

table.grid th[b-jmot5i6yq9] {
    position: sticky;
    top: 0;
    background: var(--surface-sunken);
    color: var(--text-secondary);
}

table.grid td.num[b-jmot5i6yq9],
table.grid td.n[b-jmot5i6yq9] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.snippet[b-jmot5i6yq9] {
    font-family: var(--font-mono, monospace);
    font-size: .75rem;
    color: var(--text-secondary);
}

.samples[b-jmot5i6yq9] {
    margin-top: .8rem;
}

.samples summary[b-jmot5i6yq9] {
    cursor: pointer;
    color: var(--text-secondary);
    margin-bottom: .5rem;
}
/* /Components/Pages/Admin/CadPfade.razor.rz.scp.css */
/* Layout for /admin/cad-pfade.
   This application ships no Bootstrap -- the grid classes in app.css exist only so legacy
   markup keeps working (BootstrapGridConventionTests). New markup does its own flex/grid
   here, on the house --space scale. */

.cadp-page[b-7vy62sfajj] {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    color: var(--text-body);
}

.cadp-head[b-7vy62sfajj] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.cadp-head h4[b-7vy62sfajj] {
    margin: 0 0 var(--space-1) 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.cadp-sub[b-7vy62sfajj] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    max-width: 70ch;
}

.cadp-count[b-7vy62sfajj] {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.cadp-count strong[b-7vy62sfajj] {
    color: var(--text-primary);
    font-size: var(--font-size-lg);
}

.cadp-hint[b-7vy62sfajj] {
    margin: 0 0 var(--space-2) 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

/* Search grows, the picker button keeps its width. No flex-shrink:0 on the row
   itself -- that is what pushed /heizungen past the viewport (nightly E2E, 09-20). */
.cadp-bar[b-7vy62sfajj] {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
}

.cadp-bar input[type="search"][b-7vy62sfajj] {
    flex: 1 1 260px;
    min-width: 0;
}

.cadp-table-wrap[b-7vy62sfajj] {
    overflow-x: auto;
}

.cadp-table th[b-7vy62sfajj] {
    user-select: none;
    white-space: nowrap;
}

/* The path column takes whatever is left; the other three stay compact. */
.cadp-table td:nth-child(3)[b-7vy62sfajj] {
    width: 100%;
    min-width: 280px;
}

.cadp-input[b-7vy62sfajj] {
    width: 100%;
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
}

.cadp-ort[b-7vy62sfajj] {
    display: block;
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
}

.cadp-inactive[b-7vy62sfajj] {
    margin-left: var(--space-1);
    padding: 0 var(--space-1);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
}

.cadp-rowactions[b-7vy62sfajj] {
    text-align: right;
}

.cadp-saved[b-7vy62sfajj] {
    color: var(--color-success);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.cadp-empty[b-7vy62sfajj] {
    padding: var(--space-4);
    text-align: center;
    color: var(--text-secondary);
}
/* /Components/Pages/Admin/ControllerFtpBrowser.razor.rz.scp.css */
/* Scoped CSS for the admin /admin/controller-ftp/{id} page.
   Drop-zone overlay sits over the file-list card and is only
   visible during HTML5 dragover. Bootstrap supplies the rest. */

.ctrl-ftp-drop-zone[b-nbo9ss1eot] {
    position: relative;
}

.ctrl-ftp-drop-overlay[b-nbo9ss1eot] {
    position: absolute;
    inset: 0;
    background: rgba(13, 110, 253, 0.10);
    border: 2px dashed var(--color-primary);
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-primary);
    font-weight: 600;
    z-index: 5;
    pointer-events: none;
}

/* ── Breadcrumb (Windows-Explorer address-bar look) ─────────────
   Each segment is a clickable name followed by a chevron button.
   The chevron opens a dropdown listing the folder's child folders
   so the user can drill down without leaving the page. Replaces
   the default Bootstrap "/" separators. */

.ctrl-ftp-page .ctrl-ftp-bc[b-nbo9ss1eot] {
    background: transparent;
    padding: 0.25rem 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.375rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}

/* Suppress Bootstrap's default "/" separator — the chevron buttons
   we render after each segment carry the visual separation. */
.ctrl-ftp-page .ctrl-ftp-bc .breadcrumb-item + .breadcrumb-item[b-nbo9ss1eot]::before {
    content: "";
    padding: 0;
}

.ctrl-ftp-page .ctrl-ftp-bc-item[b-nbo9ss1eot] {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
}

.ctrl-ftp-page .ctrl-ftp-bc-name[b-nbo9ss1eot] {
    border: 0;
    background: transparent;
    color: var(--bs-link-color, #0d6efd);
    padding: 0.15rem 0.35rem;
    border-radius: var(--radius-sm);
    line-height: 1.4;
    text-decoration: none;
}

.ctrl-ftp-page .ctrl-ftp-bc-name:hover[b-nbo9ss1eot] {
    background: rgba(13, 110, 253, 0.10);
    text-decoration: underline;
}

.ctrl-ftp-bc-chevron-wrap[b-nbo9ss1eot] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.ctrl-ftp-bc-chevron[b-nbo9ss1eot] {
    border: 0;
    background: transparent;
    color: var(--bs-secondary, #6c757d);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.1rem 0.3rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transform-origin: 50% 50%;
    transition: transform 0.12s ease-out, background 0.12s ease-out, color 0.12s ease-out;
}

.ctrl-ftp-bc-chevron:hover[b-nbo9ss1eot] {
    background: rgba(0, 0, 0, 0.06);
    color: var(--bs-link-color, #0d6efd);
}

.ctrl-ftp-bc-chevron.open[b-nbo9ss1eot] {
    transform: rotate(90deg);
    background: rgba(13, 110, 253, 0.12);
    color: var(--bs-link-color, #0d6efd);
}

/* Dropdown panel. Anchored to the chevron wrapper so it sits just below
   the breadcrumb segment regardless of where in the path it is. The
   backdrop above us captures outside clicks; @onclick:stopPropagation on
   the panel itself keeps clicks inside the menu from dismissing it. */
.ctrl-ftp-bc-dropdown[b-nbo9ss1eot] {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.25rem;
    min-width: 12rem;
    max-width: 22rem;
    max-height: 60vh;
    overflow-y: auto;
    z-index: 1050;
    background: var(--bs-body-bg, #fff);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    padding: 0.25rem 0;
}

.ctrl-ftp-bc-dropdown-item[b-nbo9ss1eot] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 0.3rem 0.75rem;
    color: var(--bs-body-color, #212529);
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.3;
}

.ctrl-ftp-bc-dropdown-item:hover[b-nbo9ss1eot] {
    background: rgba(13, 110, 253, 0.10);
}

.ctrl-ftp-bc-dropdown-empty[b-nbo9ss1eot] {
    padding: 0.3rem 0.75rem;
    color: var(--bs-secondary, #6c757d);
    font-size: 0.875rem;
}

/* Full-viewport backdrop that catches outside-clicks to dismiss the
   open dropdown. Z-index sits just below the dropdown panel. */
.ctrl-ftp-bc-backdrop[b-nbo9ss1eot] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 1040;
}

/* "Connecting to controller…" toast — fades in 500 ms after an FTP
   call starts. Warm pooled calls finish in ~100 ms and never reach
   the visibility threshold, so the toast only shows on slow ops
   (cold-start connect + auth + FEAT setup, ~700–1200 ms over VPN).
   animation-fill-mode: forwards holds the final opacity:1 state until
   the markup unmounts when _ftpInFlight returns to 0. */
.ctrl-ftp-connecting-toast[b-nbo9ss1eot] {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1.1rem;
    background: rgba(13, 110, 253, 0.95);
    color: #fff;
    font-size: 0.9rem;
    border-radius: var(--radius-full);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 1rem);
    animation: ctrl-ftp-connecting-in-b-nbo9ss1eot 0.25s ease-out 0.5s forwards;
}

.ctrl-ftp-connecting-toast .spinner-border[b-nbo9ss1eot] {
    width: 1rem;
    height: 1rem;
    border-width: 0.18em;
    color: #fff;
}

@keyframes ctrl-ftp-connecting-in-b-nbo9ss1eot {
    from { opacity: 0; transform: translate(-50%, 1rem); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Cold-start variant: skip the 500 ms delay so the toast appears
   right when the page renders (the only thing on screen during the
   ~700-1200 ms initial connect). The page-state field
   _isInitialLoad flips false after the first LoadAsync returns;
   subsequent calls drop this class and get the regular delayed
   fade-in (which warm-pool calls finish before — no flicker). */
.ctrl-ftp-connecting-toast.ctrl-ftp-connecting-toast-immediate[b-nbo9ss1eot] {
    animation: ctrl-ftp-connecting-in-b-nbo9ss1eot 0.18s ease-out 0s forwards;
}

/* ── Modals — themed for the app's design tokens ──
   Bootstrap's default modal-content background doesn't honor our
   --surface-card token, so headers/text were clashing against the page
   chrome (low-contrast complaint, 2026-05-26). Applies to all three
   modals on this page: delete-confirm, overwrite-confirm, connection-failed. */

.ctrl-ftp-page .modal[b-nbo9ss1eot] {
    background: var(--surface-overlay);
}

.ctrl-ftp-page .modal-dialog[b-nbo9ss1eot] {
    margin-top: 6vh;
}

.ctrl-ftp-page .modal-content[b-nbo9ss1eot] {
    background: var(--surface-card);
    color: var(--text-body);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-md);
}

.ctrl-ftp-page .modal-header[b-nbo9ss1eot] {
    border-bottom: 1px solid var(--border-default);
    background: var(--surface-raised);
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
}

.ctrl-ftp-page .modal-title[b-nbo9ss1eot] {
    color: var(--text-primary);
    font-weight: 600;
}

.ctrl-ftp-page .modal-body[b-nbo9ss1eot] {
    color: var(--text-body);
}

.ctrl-ftp-page .modal-body strong[b-nbo9ss1eot] {
    color: var(--text-primary);
}

.ctrl-ftp-page .modal-body code[b-nbo9ss1eot] {
    background: var(--surface-sunken);
    color: var(--text-primary);
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-sm);
    font-size: 0.92em;
}

.ctrl-ftp-page .modal-footer[b-nbo9ss1eot] {
    border-top: 1px solid var(--border-default);
    background: var(--surface-raised);
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
}

/* The close × in the header — give it a hover affordance against the
   themed background instead of the Bootstrap default which assumes
   white-on-anything. */
.ctrl-ftp-page .modal-header .btn-close[b-nbo9ss1eot] {
    opacity: 0.6;
}
.ctrl-ftp-page .modal-header .btn-close:hover[b-nbo9ss1eot] {
    opacity: 1;
}

/* Connection-failed modal accent — the danger color on the title hints
   "something went wrong" without resorting to a full red panel. */
.ctrl-ftp-page .modal-content.ctrl-ftp-modal-error .modal-title[b-nbo9ss1eot] {
    color: var(--color-danger);
}
/* /Components/Pages/Admin/CostSettings.razor.rz.scp.css */
.page-container[b-c8m9c7rl1f] {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem;
    }

    .page-header[b-c8m9c7rl1f] {
        margin-bottom: 2rem;
    }

    .page-header h2[b-c8m9c7rl1f] {
        margin: 0 0 0.5rem 0;
        color: var(--text-primary);
    }

    .subtitle[b-c8m9c7rl1f] {
        color: var(--text-secondary);
        font-size: 1.1rem;
        margin: 0.5rem 0;
    }

    .admin-badge[b-c8m9c7rl1f] {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        background: linear-gradient(135deg, var(--color-indigo) 0%, #764ba2 100%);
        color: var(--text-primary);
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 500;
        margin-top: 0.5rem;
    }

    .loading-container[b-c8m9c7rl1f] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 4rem;
        color: var(--text-secondary);
    }

    .spinner[b-c8m9c7rl1f] {
        width: 40px;
        height: 40px;
        border: 4px solid var(--border-default);
        border-top-color: var(--color-indigo);
        border-radius: 50%;
        animation: spin-b-c8m9c7rl1f 1s linear infinite;
        margin-bottom: 1rem;
    }

    @keyframes spin-b-c8m9c7rl1f {
        to { transform: rotate(360deg); }
    }

    .settings-container[b-c8m9c7rl1f] {
        display: grid;
        gap: 2rem;
    }
    
    .message-box[b-c8m9c7rl1f] {
        padding: 1rem 1.5rem;
        border-radius: var(--radius-md);
        margin-bottom: 1rem;
        font-weight: 500;
    }
    
    .message-box.success[b-c8m9c7rl1f] {
        background: var(--color-success-light);
        color: var(--color-success);
        border-left: 4px solid var(--color-success);
    }
    
    .message-box.error[b-c8m9c7rl1f] {
        background: #fef2f2;
        color: var(--color-danger);
        border-left: 4px solid var(--color-danger);
    }
    
    .message-box.warning[b-c8m9c7rl1f] {
        background: #fffbeb;
        color: var(--color-warning);
        border-left: 4px solid var(--color-warning);
    }

    .settings-form[b-c8m9c7rl1f] {
        background: white;
        border-radius: var(--radius-lg);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        padding: 2rem;
    }

    .form-section[b-c8m9c7rl1f] {
        margin-bottom: 2rem;
        padding-bottom: 2rem;
        border-bottom: 1px solid var(--border-default);
    }

    .form-section:last-of-type[b-c8m9c7rl1f] {
        border-bottom: none;
        margin-bottom: 0;
    }

    .form-section h3[b-c8m9c7rl1f] {
        margin: 0 0 1.5rem 0;
        color: var(--text-primary);
        font-size: 1.25rem;
    }

    .form-group[b-c8m9c7rl1f] {
        margin-bottom: 1.5rem;
    }

    .form-row[b-c8m9c7rl1f] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    .form-group label[b-c8m9c7rl1f] {
        display: block;
        margin-bottom: 0.5rem;
        color: var(--text-secondary);
        font-weight: 500;
    }

    .form-control[b-c8m9c7rl1f] {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        font-size: 1rem;
        transition: border-color 0.2s;
    }

    .form-control:focus[b-c8m9c7rl1f] {
        outline: none;
        border-color: var(--color-indigo);
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .form-text[b-c8m9c7rl1f] {
        display: block;
        margin-top: 0.25rem;
        color: var(--text-secondary);
        font-size: 0.875rem;
    }

    .checkbox-label[b-c8m9c7rl1f] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
        font-weight: normal;
    }

    .checkbox-label input[type="checkbox"][b-c8m9c7rl1f] {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }

    .peak-pricing-section[b-c8m9c7rl1f] {
        margin-top: 1.5rem;
        padding: 1.5rem;
        background: var(--surface-sunken);
        border-radius: var(--radius-md);
        border-left: 4px solid var(--color-primary);
    }

    .form-actions[b-c8m9c7rl1f] {
        display: flex;
        gap: 1rem;
        padding-top: 1.5rem;
    }

    .btn[b-c8m9c7rl1f] {
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: var(--radius-md);
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .btn-primary[b-c8m9c7rl1f] {
        background: linear-gradient(135deg, var(--color-indigo) 0%, #764ba2 100%);
        color: var(--text-primary);
    }

    .btn-primary:hover:not(:disabled)[b-c8m9c7rl1f] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }

    .btn-primary:disabled[b-c8m9c7rl1f] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .btn-secondary[b-c8m9c7rl1f] {
        background: var(--border-default);
        color: var(--text-secondary);
    }

    .btn-secondary:hover:not(:disabled)[b-c8m9c7rl1f] {
        background: var(--border-strong);
    }

    .spinner-small[b-c8m9c7rl1f] {
        width: 16px;
        height: 16px;
        border: 2px solid rgba(0, 0, 0, 0.15);
        border-top-color: var(--text-primary);
        border-radius: 50%;
        animation: spin-b-c8m9c7rl1f 0.8s linear infinite;
    }

    .settings-history[b-c8m9c7rl1f] {
        background: white;
        border-radius: var(--radius-lg);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        padding: 2rem;
    }

    .settings-history h3[b-c8m9c7rl1f] {
        margin: 0 0 1.5rem 0;
        color: var(--text-primary);
    }

    .history-table-container[b-c8m9c7rl1f] {
        overflow-x: auto;
    }

    .history-table[b-c8m9c7rl1f] {
        width: 100%;
        border-collapse: collapse;
    }

    .history-table th[b-c8m9c7rl1f] {
        text-align: left;
        padding: 0.75rem;
        background: var(--surface-sunken);
        color: var(--text-secondary);
        font-weight: 600;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 2px solid var(--border-default);
    }

    .history-table td[b-c8m9c7rl1f] {
        padding: 0.75rem;
        border-bottom: 1px solid var(--border-default);
        color: var(--text-secondary);
    }

    .history-table tr:hover[b-c8m9c7rl1f] {
        background: var(--surface-sunken);
    }

    .active-row[b-c8m9c7rl1f] {
        background: var(--color-success-light) !important;
    }

    .active-row td[b-c8m9c7rl1f] {
        font-weight: 500;
    }

    .badge[b-c8m9c7rl1f] {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        border-radius: var(--radius-lg);
        font-size: 0.75rem;
        font-weight: 600;
    }

    .badge-success[b-c8m9c7rl1f] {
        background: var(--color-success);
        color: var(--text-primary);
    }

    .peak-info[b-c8m9c7rl1f] {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        font-size: 0.875rem;
    }

    @media (max-width: 768px) {
        .form-row[b-c8m9c7rl1f] {
            grid-template-columns: 1fr;
        }

        .page-container[b-c8m9c7rl1f] {
            padding: 1rem;
        }
    }
/* /Components/Pages/Admin/DataApiKeys.razor.rz.scp.css */
/* Scoped styles for /admin/data-api-keys.
   Modals reuse the same overlay/card shape as other admin pages —
   no scoped-CSS for those (let global .modal-overlay rules win).
   Only the permission matrix + reveal-key box are page-specific. */

.permission-matrix[b-lgzji21b7e] {
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-sm);
    margin: 1rem 0;
}

.permission-matrix table[b-lgzji21b7e] {
    margin-bottom: 0;
}

.permission-matrix thead th[b-lgzji21b7e] {
    position: sticky;
    top: 0;
    background: #f9fafb;
    z-index: 1;
}

.permission-matrix input[type="checkbox"][b-lgzji21b7e] {
    transform: scale(1.2);
    cursor: pointer;
}

/* Reveal-once dialog: code block emphasises that this is the
   credential to copy. Monospace, generous padding, dashed border
   to read as "ephemeral" rather than "permanent". */
.reveal-key-box[b-lgzji21b7e] {
    background: #fef3c7;
    border: 2px dashed #f59e0b;
    border-radius: var(--radius-sm);
    padding: 1rem;
    margin: 1rem 0;
    word-break: break-all;
    user-select: all;
}

.reveal-key-box code[b-lgzji21b7e] {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.05em;
    color: #92400e;
    background: transparent;
    padding: 0;
}

/* Generic modal scaffolding kept local — global modal CSS varies
   by page and we don't want to fight cascading selectors. */
.modal-overlay[b-lgzji21b7e] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-card[b-lgzji21b7e] {
    background: #ffffff;
    border-radius: var(--radius-md);
    padding: 1.5rem;
    max-width: 540px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
}

.modal-card.wide[b-lgzji21b7e] {
    max-width: 900px;
}

.modal-card h3[b-lgzji21b7e] {
    margin-top: 0;
}

.modal-actions[b-lgzji21b7e] {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
}
/* /Components/Pages/Admin/DesignSystem.razor.rz.scp.css */
.ds[b-rwvogpfcp2] {
    max-width: 980px;
    padding: var(--space-4);
}

.ds-header[b-rwvogpfcp2] {
    margin-bottom: var(--space-5);
}

.ds-header h1[b-rwvogpfcp2] {
    margin: 0 0 var(--space-2);
    color: var(--text-primary);
}

.ds-sub[b-rwvogpfcp2] {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin: 0;
}

.ds-section[b-rwvogpfcp2] {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-default);
}

.ds-section h2[b-rwvogpfcp2] {
    font-size: var(--font-size-lg);
    color: var(--text-primary);
    margin: 0 0 var(--space-3);
}

.ds-note[b-rwvogpfcp2] {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin: 0 0 var(--space-3);
}

.ds-row[b-rwvogpfcp2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.ds-swatches[b-rwvogpfcp2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-3);
}

.ds-swatch[b-rwvogpfcp2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
}

.ds-chip[b-rwvogpfcp2] {
    height: 48px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
}

.ds-swatch code[b-rwvogpfcp2] {
    color: var(--text-secondary);
}

.ds-form[b-rwvogpfcp2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    max-width: 600px;
}

.status-dot-label[b-rwvogpfcp2] {
    color: var(--text-body);
    font-size: var(--font-size-sm);
}
/* /Components/Pages/Admin/DocumentImport.razor.rz.scp.css */
.document-import-container[b-9o0py0oriw] {
        padding: 1.5rem;
        max-width: 1400px;
        margin: 0 auto;
    }
    
    .page-header[b-9o0py0oriw] {
        margin-bottom: 1.5rem;
    }
    
    .page-header h1[b-9o0py0oriw] {
        margin: 0;
        color: var(--text-primary);
        font-size: 1.8rem;
    }
    
    .subtitle[b-9o0py0oriw] {
        color: var(--text-secondary);
        margin: 0.5rem 0 0 0;
    }
    
    .info-box[b-9o0py0oriw] {
        background: rgba(30, 148, 188, 0.1);
        border: 1px solid rgba(30, 148, 188, 0.3);
        border-radius: var(--radius-md);
        padding: 1rem 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .info-box h4[b-9o0py0oriw] {
        margin: 0 0 0.5rem 0;
        color: var(--color-primary);
    }
    
    .info-box p[b-9o0py0oriw] {
        margin: 0.5rem 0;
        color: var(--text-secondary);
    }
    
    .info-box ul[b-9o0py0oriw] {
        margin: 0.5rem 0;
        padding-left: 1.5rem;
    }
    
    .info-box li[b-9o0py0oriw] {
        color: var(--text-muted);
        margin: 0.25rem 0;
    }
    
    .info-box code[b-9o0py0oriw] {
        background: rgba(0,0,0,0.3);
        padding: 0.15rem 0.4rem;
        border-radius: var(--radius-xs);
        color: var(--color-primary);
        font-family: monospace;
    }
    
    .action-buttons[b-9o0py0oriw] {
        display: flex;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .btn-scan[b-9o0py0oriw], .btn-import[b-9o0py0oriw] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: var(--radius);
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .btn-scan[b-9o0py0oriw] {
        background: var(--color-primary);
        color: var(--surface-page);
    }
    
    .btn-scan:hover:not(:disabled)[b-9o0py0oriw] {
        background: var(--color-primary);
    }
    
    .btn-import[b-9o0py0oriw] {
        background: #F18F01;
        color: var(--text-primary);
    }
    
    .btn-import:hover:not(:disabled)[b-9o0py0oriw] {
        background: var(--color-warning);
    }
    
    .btn-scan:disabled[b-9o0py0oriw], .btn-import:disabled[b-9o0py0oriw] {
        opacity: 0.6;
        cursor: not-allowed;
    }
    
    .scan-results[b-9o0py0oriw] {
        background: rgba(0,0,0,0.2);
        border-radius: var(--radius-md);
        padding: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .scan-results h3[b-9o0py0oriw] {
        margin: 0 0 1rem 0;
        color: var(--text-primary);
    }
    
    .result-tabs[b-9o0py0oriw] {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 1rem;
        border-bottom: 1px solid rgba(0,0,0,0.08);
        padding-bottom: 0.5rem;
    }
    
    .tab-btn[b-9o0py0oriw] {
        padding: 0.5rem 1rem;
        background: transparent;
        border: 1px solid rgba(0,0,0,0.1);
        border-radius: var(--radius-sm);
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .tab-btn:hover[b-9o0py0oriw] {
        background: rgba(0,0,0,0.03);
        color: var(--text-secondary);
    }
    
    .tab-btn.active[b-9o0py0oriw] {
        background: rgba(30, 148, 188, 0.2);
        border-color: var(--color-primary);
        color: var(--color-primary);
    }
    
    .results-table-container[b-9o0py0oriw] {
        overflow-x: auto;
        max-height: 500px;
        overflow-y: auto;
    }
    
    .results-table[b-9o0py0oriw] {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.9rem;
    }
    
    .results-table th[b-9o0py0oriw] {
        background: rgba(0,0,0,0.3);
        color: var(--color-primary);
        padding: 0.75rem;
        text-align: left;
        position: sticky;
        top: 0;
    }
    
    .results-table td[b-9o0py0oriw] {
        padding: 0.6rem 0.75rem;
        border-bottom: 1px solid rgba(0,0,0,0.03);
        color: var(--text-secondary);
    }
    
    .results-table tr:hover[b-9o0py0oriw] {
        background: rgba(0,0,0,0.02);
    }
    
    .results-table tr.imported[b-9o0py0oriw] {
        background: rgba(30, 148, 188, 0.1);
    }
    
    .results-table tr.error[b-9o0py0oriw] {
        background: rgba(255, 107, 107, 0.1);
    }
    
    .filename[b-9o0py0oriw] {
        font-family: monospace;
        font-size: 0.85rem;
    }
    
    .projektnummer[b-9o0py0oriw] {
        font-weight: 600;
        color: var(--color-primary);
    }
    
    .badge[b-9o0py0oriw] {
        padding: 0.2rem 0.5rem;
        border-radius: var(--radius-xs);
        font-size: 0.75rem;
        white-space: nowrap;
    }
    
    .badge-blue[b-9o0py0oriw] {
        background: rgba(46, 134, 171, 0.3);
        color: var(--color-primary);
    }
    
    .badge-orange[b-9o0py0oriw] {
        background: rgba(241, 143, 1, 0.3);
        color: var(--color-warning);
    }
    
    .found[b-9o0py0oriw] {
        color: var(--color-success);
    }
    
    .not-found[b-9o0py0oriw] {
        color: var(--color-danger);
    }
    
    .status-imported[b-9o0py0oriw] {
        color: var(--color-primary);
    }
    
    .status-exists[b-9o0py0oriw] {
        color: #F18F01;
    }
    
    .status-ready[b-9o0py0oriw] {
        color: var(--color-success);
    }
    
    .status-error[b-9o0py0oriw] {
        color: var(--color-danger);
        font-size: 0.8rem;
    }
    
    .btn-small[b-9o0py0oriw] {
        padding: 0.3rem 0.6rem;
        background: var(--color-primary);
        color: var(--surface-page);
        border: none;
        border-radius: var(--radius-xs);
        font-size: 0.8rem;
        cursor: pointer;
    }
    
    .btn-small:hover[b-9o0py0oriw] {
        background: var(--color-primary);
    }
    
    .btn-small.btn-warning[b-9o0py0oriw] {
        background: #F18F01;
        color: var(--text-primary);
    }
    
    .btn-small.btn-warning:hover[b-9o0py0oriw] {
        background: var(--color-warning);
    }
    
    .import-log[b-9o0py0oriw] {
        background: rgba(0,0,0,0.3);
        border-radius: var(--radius-md);
        padding: 1rem;
    }
    
    .import-log h3[b-9o0py0oriw] {
        margin: 0 0 0.75rem 0;
        color: var(--text-primary);
    }
    
    .log-container[b-9o0py0oriw] {
        max-height: 200px;
        overflow-y: auto;
        font-family: monospace;
        font-size: 0.8rem;
    }
    
    .log-entry[b-9o0py0oriw] {
        padding: 0.3rem 0.5rem;
        border-bottom: 1px solid rgba(0,0,0,0.03);
    }
    
    .log-entry.info[b-9o0py0oriw] {
        color: var(--text-secondary);
    }
    
    .log-entry.success[b-9o0py0oriw] {
        color: var(--color-primary);
    }
    
    .log-entry.warning[b-9o0py0oriw] {
        color: #F18F01;
    }
    
    .log-entry.error[b-9o0py0oriw] {
        color: var(--color-danger);
    }
    
    .log-time[b-9o0py0oriw] {
        color: var(--text-secondary);
        margin-right: 0.5rem;
    }
/* /Components/Pages/Admin/DownloadDiag.razor.rz.scp.css */
.download-diag[b-nycmm1ggzw] { padding: 2rem; max-width: 1400px; margin: 0 auto; }
    .page-header[b-nycmm1ggzw] { margin-bottom: 2rem; }
    .page-header h2[b-nycmm1ggzw] { margin: 0 0 0.5rem 0; color: var(--text-primary); }
    .page-header .subtitle[b-nycmm1ggzw] { margin: 0; color: var(--text-secondary); }
    
    .config-section[b-nycmm1ggzw], .esc-section[b-nycmm1ggzw], .internal-section[b-nycmm1ggzw], .result-section[b-nycmm1ggzw] {
        background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 1.5rem;
    }
    .config-section h3[b-nycmm1ggzw], .esc-section h3[b-nycmm1ggzw], .internal-section h3[b-nycmm1ggzw], .result-section h3[b-nycmm1ggzw] {
        margin: 0 0 1rem 0; font-size: 1.1rem; color: var(--text-primary);
    }
    .config-grid[b-nycmm1ggzw] { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
    .form-group label[b-nycmm1ggzw] { display: block; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.25rem; }
    .form-control[b-nycmm1ggzw] { width: 100%; padding: 0.5rem; border: 1px solid var(--border-default); border-radius: var(--radius-sm); font-size: 0.9rem; }
    .connection-info[b-nycmm1ggzw] { margin-top: 1rem; display: flex; align-items: center; gap: 1rem; font-size: 0.85rem; }
    
    .badge[b-nycmm1ggzw] { padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600; }
    .badge-info[b-nycmm1ggzw] { background: var(--color-primary); color: var(--surface-card); }
    .badge-secondary[b-nycmm1ggzw] { background: var(--text-secondary); color: var(--surface-card); }
    .badge-warning[b-nycmm1ggzw] { background: var(--color-warning); color: #000; }
    .badge-danger[b-nycmm1ggzw] { background: var(--color-danger); color: var(--surface-card); }
    
    .esc-grid[b-nycmm1ggzw] { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
    .esc-card[b-nycmm1ggzw] { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 1rem; background: var(--surface-sunken); transition: all 0.2s; }
    .esc-card:hover[b-nycmm1ggzw] { border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(30, 148, 188, 0.15); }
    .esc-card.active[b-nycmm1ggzw] { border-color: var(--color-primary); background: rgba(30, 148, 188, 0.1); }
    .esc-header[b-nycmm1ggzw] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
    .esc-name[b-nycmm1ggzw] { font-weight: 600; color: var(--text-primary); }
    .esc-code[b-nycmm1ggzw] { font-family: monospace; background: var(--text-primary); color: var(--color-primary); padding: 0.2rem 0.5rem; border-radius: var(--radius-sm); font-size: 0.8rem; }
    .esc-info[b-nycmm1ggzw] { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.75rem; font-size: 0.75rem; color: var(--text-secondary); font-family: monospace; }
    .esc-params[b-nycmm1ggzw] { margin-bottom: 0.75rem; }
    .param-row[b-nycmm1ggzw] { display: flex; gap: 0.5rem; }
    .param-input[b-nycmm1ggzw] { flex: 1; padding: 0.35rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--radius-sm); font-size: 0.8rem; min-width: 0; }
    
    .btn-download[b-nycmm1ggzw] { width: 100%; padding: 0.5rem; background: var(--color-primary); color: #000; border: none; border-radius: var(--radius-sm); cursor: pointer; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.2s; }
    .btn-download:hover:not(:disabled)[b-nycmm1ggzw] { background: var(--color-primary); }
    .btn-download:disabled[b-nycmm1ggzw] { opacity: 0.5; cursor: not-allowed; }
    .spinner-small[b-nycmm1ggzw] { width: 16px; height: 16px; border: 2px solid rgba(0,0,0,0.1); border-top-color: #000; border-radius: 50%; animation: spin-b-nycmm1ggzw 1s linear infinite; }
    @keyframes spin-b-nycmm1ggzw { to { transform: rotate(360deg); } }
    
    .internal-table[b-nycmm1ggzw] { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
    .internal-table th[b-nycmm1ggzw], .internal-table td[b-nycmm1ggzw] { padding: 0.75rem; border: 1px solid var(--border-default); text-align: left; }
    .internal-table th[b-nycmm1ggzw] { background: var(--surface-sunken); font-weight: 600; }
    
    .result-header[b-nycmm1ggzw] { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
    .result-header h3[b-nycmm1ggzw] { margin: 0; flex: 1; }
    .result-meta[b-nycmm1ggzw] { display: flex; gap: 1rem; font-size: 0.85rem; color: var(--text-secondary); }
    .btn-clear[b-nycmm1ggzw] { padding: 0.25rem 0.75rem; background: var(--surface-sunken); border: 1px solid var(--border-default); border-radius: var(--radius-sm); cursor: pointer; font-size: 0.85rem; }
    .result-error[b-nycmm1ggzw] { background: rgba(231, 76, 60, 0.1); color: var(--color-danger); padding: 0.75rem; border-radius: var(--radius-sm); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
    
    .result-tabs[b-nycmm1ggzw] { display: flex; gap: 0.25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border-default); padding-bottom: 0.5rem; flex-wrap: wrap; }
    .result-tabs .tab[b-nycmm1ggzw] { padding: 0.5rem 1rem; background: none; border: 1px solid transparent; border-radius: var(--radius-sm) var(--radius-sm) 0 0; cursor: pointer; font-size: 0.85rem; color: var(--text-secondary); }
    .result-tabs .tab:hover[b-nycmm1ggzw] { background: var(--surface-sunken); }
    .result-tabs .tab.active[b-nycmm1ggzw] { background: var(--surface-card); border-color: var(--text-body); border-bottom-color: var(--text-primary); color: var(--color-primary); font-weight: 600; margin-bottom: -1px; }
    .result-content[b-nycmm1ggzw] { max-height: 600px; overflow: auto; }
    
    .hex-view[b-nycmm1ggzw], .text-view[b-nycmm1ggzw] { margin: 0; padding: 1rem; background: var(--surface-page); color: var(--color-primary); font-family: 'Consolas', monospace; font-size: 0.8rem; border-radius: var(--radius-sm); white-space: pre; overflow-x: auto; }
    .parsed-table[b-nycmm1ggzw] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
    .parsed-table th[b-nycmm1ggzw], .parsed-table td[b-nycmm1ggzw] { padding: 0.5rem; border: 1px solid var(--border-default); text-align: left; }
    .parsed-table th[b-nycmm1ggzw] { background: var(--surface-sunken); font-weight: 600; position: sticky; top: 0; }
    .parsed-table tr:hover[b-nycmm1ggzw] { background: rgba(30, 148, 188, 0.05); }
    
    /* Debug View */
    .debug-view[b-nycmm1ggzw] { padding: 1rem; }
    .debug-section[b-nycmm1ggzw] { background: var(--surface-sunken); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 1rem; margin-bottom: 1rem; }
    .debug-section h4[b-nycmm1ggzw] { margin: 0 0 0.75rem 0; color: var(--gray-600); font-size: 1rem; }
    .debug-section h5[b-nycmm1ggzw] { margin: 1rem 0 0.5rem 0; color: var(--text-secondary); font-size: 0.9rem; }
    .debug-grid[b-nycmm1ggzw] { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0.5rem; }
    .debug-item[b-nycmm1ggzw] { display: flex; gap: 0.5rem; align-items: center; }
    .debug-label[b-nycmm1ggzw] { font-weight: 600; color: var(--gray-600); font-size: 0.85rem; }
    .debug-value[b-nycmm1ggzw] { color: var(--text-primary); font-family: monospace; font-size: 0.85rem; }
    .debug-raw[b-nycmm1ggzw] { background: #212529; color: #e2e8f0; padding: 1rem; border-radius: var(--radius-sm); font-family: monospace; font-size: 0.75rem; white-space: pre-wrap; word-break: break-all; max-height: 200px; overflow: auto; }
    .debug-highlight[b-nycmm1ggzw] { background: var(--color-warning-light); border: 1px solid var(--color-warning); border-radius: var(--radius-sm); padding: 0.75rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
    .debug-code[b-nycmm1ggzw] { background: var(--gray-800); color: var(--color-primary); padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); font-family: monospace; font-size: 0.9rem; }
    .debug-stats[b-nycmm1ggzw] { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
    .stat-card[b-nycmm1ggzw] { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 1rem 1.5rem; text-align: center; min-width: 120px; }
    .stat-card.stat-warning[b-nycmm1ggzw] { border-color: var(--color-warning); background: var(--color-warning-light); }
    .stat-value[b-nycmm1ggzw] { display: block; font-size: 1.5rem; font-weight: 700; color: var(--text-primary); }
    .stat-label[b-nycmm1ggzw] { display: block; font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.25rem; }
    .debug-type-grid[b-nycmm1ggzw] { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .type-badge[b-nycmm1ggzw] { background: var(--border-default); border-radius: var(--radius-sm); padding: 0.25rem 0.5rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; }
    .type-name[b-nycmm1ggzw] { font-weight: 600; font-family: monospace; }
    .type-count[b-nycmm1ggzw] { background: var(--color-primary); color: #000; padding: 0.1rem 0.4rem; border-radius: 10px; font-size: 0.7rem; }
    .debug-log[b-nycmm1ggzw] { background: #212529; color: #adb5bd; padding: 1rem; border-radius: var(--radius-sm); font-family: monospace; font-size: 0.75rem; white-space: pre-wrap; max-height: 300px; overflow: auto; }
    
    /* Patterns View */
    .patterns-view[b-nycmm1ggzw] { padding: 1rem; }
    .pattern-section[b-nycmm1ggzw] { margin-bottom: 1.5rem; }
    .pattern-section h5[b-nycmm1ggzw] { margin: 0 0 0.75rem 0; color: var(--gray-600); }
    .pattern-grid[b-nycmm1ggzw] { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.5rem; }
    .pattern-item[b-nycmm1ggzw] { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.5rem; border-radius: var(--radius-sm); font-size: 0.8rem; }
    .pattern-item.found[b-nycmm1ggzw] { background: rgba(40, 167, 69, 0.1); border: 1px solid var(--color-success); }
    .pattern-item.not-found[b-nycmm1ggzw] { background: var(--surface-sunken); border: 1px solid var(--border-default); opacity: 0.6; }
    .pattern-name[b-nycmm1ggzw] { font-weight: 600; font-family: monospace; }
    .pattern-hex[b-nycmm1ggzw] { font-size: 0.7rem; color: var(--text-secondary); font-family: monospace; }
    .pattern-count[b-nycmm1ggzw] { font-weight: 700; color: var(--color-success); }
    .pattern-positions[b-nycmm1ggzw] { font-size: 0.7rem; color: var(--text-secondary); }
    .structure-analysis[b-nycmm1ggzw] { background: var(--surface-sunken); padding: 1rem; border-radius: var(--radius-sm); font-family: monospace; font-size: 0.8rem; white-space: pre-wrap; }
    
    /* Visu Details */
    .visu-details[b-nycmm1ggzw] { padding: 1rem; }
    .visu-header-info[b-nycmm1ggzw] { display: flex; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
    .info-card[b-nycmm1ggzw] { background: var(--surface-sunken); padding: 0.75rem 1rem; border-radius: var(--radius-sm); }
    .info-card .label[b-nycmm1ggzw] { font-size: 0.75rem; color: var(--text-secondary); display: block; }
    .info-card .value[b-nycmm1ggzw] { font-size: 1.1rem; font-weight: 600; }
    .visu-group[b-nycmm1ggzw] { margin-bottom: 1rem; }
    .group-header[b-nycmm1ggzw] { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; padding: 0.5rem; background: var(--border-default); border-radius: var(--radius-sm); }
    .group-name[b-nycmm1ggzw] { font-weight: 600; font-family: monospace; }
    .group-count[b-nycmm1ggzw] { font-size: 0.75rem; color: var(--text-secondary); }
    .group-items[b-nycmm1ggzw] { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.5rem; }
    .visu-item[b-nycmm1ggzw] { padding: 0.5rem; border: 1px solid var(--border-default); border-radius: var(--radius-sm); display: flex; justify-content: space-between; align-items: center; }
    .visu-item.bool-item[b-nycmm1ggzw] { background: rgba(30, 148, 188, 0.05); }
    .item-key[b-nycmm1ggzw] { font-family: monospace; font-size: 0.8rem; }
    .item-value[b-nycmm1ggzw] { font-weight: 600; }
    .unit[b-nycmm1ggzw] { font-size: 0.75rem; color: var(--text-secondary); margin-left: 0.25rem; }
    .bool-badge[b-nycmm1ggzw] { padding: 0.15rem 0.4rem; border-radius: var(--radius-xs); font-size: 0.7rem; }
    .bool-badge.on[b-nycmm1ggzw] { background: var(--color-success); color: var(--surface-card); }
    .bool-badge.off[b-nycmm1ggzw] { background: var(--text-secondary); color: var(--surface-card); }
    .text-danger[b-nycmm1ggzw] { color: var(--color-danger); }
    .ml-2[b-nycmm1ggzw] { margin-left: 0.5rem; }
    
    /* QHHeader Database Actions */
    .qh-db-actions[b-nycmm1ggzw] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        margin-bottom: 1rem;
        background: linear-gradient(135deg, var(--surface-sunken) 0%, var(--border-default) 100%);
        border-radius: var(--radius-md);
        border: 1px solid var(--border-default);
    }
    .db-status[b-nycmm1ggzw] { }
    .db-status .badge[b-nycmm1ggzw] { font-size: 0.85rem; padding: 0.4rem 0.8rem; }
    .badge-success[b-nycmm1ggzw] { background: var(--color-success); color: var(--surface-card); }
    .badge-secondary[b-nycmm1ggzw] { background: var(--text-secondary); color: var(--surface-card); }
    .db-buttons[b-nycmm1ggzw] { display: flex; gap: 0.5rem; }
    .db-buttons .btn[b-nycmm1ggzw] { display: flex; align-items: center; gap: 0.25rem; }
    .btn-sm[b-nycmm1ggzw] { padding: 0.35rem 0.75rem; font-size: 0.85rem; }
    .btn-primary[b-nycmm1ggzw] { background: var(--color-primary); color: var(--surface-card); border: none; border-radius: var(--radius-sm); cursor: pointer; }
    .btn-primary:hover[b-nycmm1ggzw] { background: var(--color-primary-hover); }
    .btn-primary:disabled[b-nycmm1ggzw] { background: var(--text-secondary); cursor: not-allowed; }
    .btn-danger[b-nycmm1ggzw] { background: var(--color-danger); color: var(--surface-card); border: none; border-radius: var(--radius-sm); cursor: pointer; }
    .btn-danger:hover[b-nycmm1ggzw] { background: var(--color-danger); }
    .btn-warning[b-nycmm1ggzw] { background: var(--color-warning); color: var(--text-primary); border: none; border-radius: var(--radius-sm); cursor: pointer; }
    .btn-warning:hover[b-nycmm1ggzw] { background: var(--color-warning); }

    /* WAGO file download */
    .wago-actions[b-nycmm1ggzw] { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; align-items: center; }
    .wago-actions .btn-download[b-nycmm1ggzw] { width: auto; padding: 0.5rem 1.25rem; }
    .btn-preset[b-nycmm1ggzw] {
        padding: 0.4rem 0.85rem;
        background: var(--surface-sunken);
        color: var(--text-primary);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-sm);
        cursor: pointer;
        font-size: 0.85rem;
        font-family: monospace;
        transition: all 0.15s;
    }
    .btn-preset:hover:not(:disabled)[b-nycmm1ggzw] { border-color: var(--color-primary); color: var(--color-primary); }
    .btn-preset:disabled[b-nycmm1ggzw] { opacity: 0.5; cursor: not-allowed; }
    .wago-status[b-nycmm1ggzw] {
        margin-top: 1rem;
        padding: 0.65rem 0.85rem;
        border-radius: var(--radius-sm);
        font-size: 0.85rem;
        line-height: 1.4;
    }
    .wago-status-ok[b-nycmm1ggzw] { background: rgba(46, 164, 82, 0.1); color: #2ea452; border: 1px solid rgba(46, 164, 82, 0.3); }
    .wago-status-err[b-nycmm1ggzw] { background: rgba(231, 76, 60, 0.1); color: var(--color-danger); border: 1px solid rgba(231, 76, 60, 0.3); }
    .wago-status code[b-nycmm1ggzw] { background: rgba(0,0,0,0.05); padding: 0 0.25rem; border-radius: var(--radius-xs); font-family: monospace; }

    /* Datenqualitäts-Quote card (ADR-0069) */
    .dlquote-card[b-nycmm1ggzw] {
        margin-top: 1rem;
        padding: 0.75rem 1rem;
        border: 1px solid var(--border-default);
        border-left: 4px solid var(--border-default);
        border-radius: var(--radius);
        background: var(--surface-card);
    }
    .dlquote-gut[b-nycmm1ggzw] { border-left-color: var(--color-success); }
    .dlquote-warnung[b-nycmm1ggzw] { border-left-color: var(--color-warning); }
    .dlquote-kritisch[b-nycmm1ggzw] { border-left-color: var(--color-danger); }
    .dlquote-headline[b-nycmm1ggzw] { display: flex; align-items: baseline; gap: 0.6rem; }
    .dlquote-num[b-nycmm1ggzw] { font-size: 1.5rem; font-weight: 700; }
    .dlquote-gut .dlquote-num[b-nycmm1ggzw] { color: var(--color-success); }
    .dlquote-warnung .dlquote-num[b-nycmm1ggzw] { color: var(--color-warning); }
    .dlquote-kritisch .dlquote-num[b-nycmm1ggzw] { color: var(--color-danger); }
    .dlquote-label[b-nycmm1ggzw] { font-weight: 600; font-size: 0.9rem; }
    .dlquote-split[b-nycmm1ggzw] { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.35rem; font-size: 0.8rem; }

/* ── Download-Validierung ─────────────────────────────────────────────── */
.vd-actions[b-nycmm1ggzw] { display: flex; gap: 0.5rem; align-items: flex-end; flex-wrap: wrap; }
.vd-payload[b-nycmm1ggzw] { width: 100%; font-family: monospace; font-size: 0.8rem; }
.vd-grid[b-nycmm1ggzw] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.75rem; }
@media (max-width: 900px) { .vd-grid[b-nycmm1ggzw] { grid-template-columns: 1fr; } }
.vd-result[b-nycmm1ggzw] { padding: 0.75rem; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--surface-card); }
.vd-result.ok[b-nycmm1ggzw] { border-color: var(--color-success); }
.vd-result.fail[b-nycmm1ggzw] { border-color: var(--color-danger); }
.vd-verdict[b-nycmm1ggzw] { font-weight: 700; margin-bottom: 0.5rem; }
.vd-counts[b-nycmm1ggzw] { color: var(--text-secondary); font-size: 0.85rem; }
.vd-errors[b-nycmm1ggzw] { color: var(--color-danger); margin: 0.5rem 0 0; padding-left: 1.2rem; }
.vd-warnings[b-nycmm1ggzw] { color: var(--color-warning); margin: 0.5rem 0 0; padding-left: 1.2rem; }
.vd-sample[b-nycmm1ggzw], .vd-fmt-example[b-nycmm1ggzw] { background: var(--surface-sunken); padding: 0.5rem; border-radius: var(--radius-sm); overflow-x: auto; font-size: 0.75rem; white-space: pre-wrap; }
.vd-format[b-nycmm1ggzw] { padding: 0.75rem; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--surface-sunken); }
.vd-format h4[b-nycmm1ggzw] { margin: 0 0 0.5rem; font-size: 0.95rem; }
.vd-fmt-title[b-nycmm1ggzw] { font-weight: 600; margin-bottom: 0.5rem; }
.vd-fmt-dl[b-nycmm1ggzw] { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.6rem; margin: 0; font-size: 0.82rem; }
.vd-fmt-dl dt[b-nycmm1ggzw] { font-weight: 600; color: var(--text-secondary); }
.vd-fmt-dl dd[b-nycmm1ggzw] { margin: 0; }
.vd-fmt-fields[b-nycmm1ggzw] { margin-top: 0.5rem; font-size: 0.78rem; color: var(--text-secondary); }
.vd-fmt-example[b-nycmm1ggzw] { margin-top: 0.5rem; }

/* ── Validierung: Platzhalter-Tabelle (erwartet · heruntergeladen · Problem) ── */
.vd-findings-wrap[b-nycmm1ggzw] { overflow-x: auto; max-height: 22rem; overflow-y: auto; }
.vd-findings[b-nycmm1ggzw] { width: 100%; border-collapse: collapse; font-size: 0.76rem; }
.vd-findings th[b-nycmm1ggzw], .vd-findings td[b-nycmm1ggzw] { text-align: left; padding: 0.2rem 0.45rem; border-bottom: 1px solid var(--border-default); vertical-align: top; }
.vd-findings th[b-nycmm1ggzw] { position: sticky; top: 0; background: var(--surface-card); color: var(--text-secondary); font-weight: 600; }
.vd-findings .vd-exp[b-nycmm1ggzw] { color: var(--text-secondary); }
.vd-findings .vd-act[b-nycmm1ggzw] { font-variant-numeric: tabular-nums; }
.vd-findings tr.bad .vd-prob[b-nycmm1ggzw] { color: var(--color-danger); font-weight: 600; }
.vd-findings tr.ok td:first-child[b-nycmm1ggzw] { color: var(--color-success); }

/* ── Controller-Suche + Kategorie-Tabs ── */
.dd-search[b-nycmm1ggzw] { width: 100%; margin-bottom: 0.4rem; }
.dd-cat-tabs[b-nycmm1ggzw] { display: flex; gap: 0.3rem; flex-wrap: wrap; margin: 0.5rem 0 1rem; }
.dd-cat-tab[b-nycmm1ggzw] {
    padding: 0.4rem 0.9rem; border-radius: var(--radius-md); border: 1px solid var(--border-default);
    background: var(--surface-card); color: var(--text-secondary); cursor: pointer; font-size: 0.85rem; font-weight: 600;
}
.dd-cat-tab:hover[b-nycmm1ggzw] { background: var(--surface-sunken); }
.dd-cat-tab.active[b-nycmm1ggzw] { background: var(--color-primary); color: var(--text-on-primary); border-color: var(--color-primary); }

/* ── Explizite Fehlerliste: "Was ist schiefgelaufen" ── */
.vd-problems[b-nycmm1ggzw] {
    margin: 0.5rem 0;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}
.vd-problems.warn[b-nycmm1ggzw] { border-color: var(--color-warning); }
.vd-problems.warn .vd-problems-head[b-nycmm1ggzw] { color: var(--color-warning); }
.vd-problems.warn .vd-prob[b-nycmm1ggzw] { color: var(--color-warning); }
.vd-problems-head[b-nycmm1ggzw] { font-weight: 700; color: var(--color-danger); margin-bottom: 0.35rem; }
.vd-problems ul[b-nycmm1ggzw] { margin: 0; padding-left: 1.1rem; }
.vd-problems li[b-nycmm1ggzw] { margin-bottom: 0.4rem; font-size: 0.82rem; }
.vd-problems .vd-prob[b-nycmm1ggzw] { color: var(--color-danger); font-weight: 600; }
.vd-problem-detail[b-nycmm1ggzw] { color: var(--text-secondary); font-size: 0.76rem; margin-top: 0.1rem; }
.vd-problem-detail .vd-pl[b-nycmm1ggzw] { font-weight: 600; }
.vd-problem-detail .vd-act[b-nycmm1ggzw] { font-variant-numeric: tabular-nums; color: var(--text-primary); }
.vd-allok[b-nycmm1ggzw] { margin: 0.5rem 0; color: var(--color-success); font-weight: 600; font-size: 0.85rem; }

/* ── Rohdaten mit markierten Fehlern ── */
.vd-rawhl[b-nycmm1ggzw] {
    background: var(--surface-sunken);
    padding: 0.5rem;
    border-radius: var(--radius-sm);
    max-height: 20rem;
    overflow: auto;
    font-family: ui-monospace, monospace;
    font-size: 0.72rem;
    white-space: pre-wrap;
    word-break: break-all;
}
.vd-rawhl mark.vd-fault[b-nycmm1ggzw] {
    background: var(--color-danger);
    color: var(--text-on-primary, #fff);
    border-radius: var(--radius-xs);
    padding: 0 1px;
}
/* /Components/Pages/Admin/DownloadStatistik.razor.rz.scp.css */
.dlstat-page[b-2g9n18ehw6] {
    padding: 1.5rem;
    color: var(--text-primary);
}

.dlstat-intro[b-2g9n18ehw6] {
    color: var(--text-secondary);
    max-width: 70ch;
    margin-bottom: 1.25rem;
}

.dlstat-page h3[b-2g9n18ehw6] {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.dlstat-toolbar[b-2g9n18ehw6] {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.dlstat-toolbar select[b-2g9n18ehw6] {
    margin-left: 0.5rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    background: var(--surface-card);
    color: var(--text-primary);
}

.dlstat-search[b-2g9n18ehw6] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1 1 18rem;
    max-width: 28rem;
}

.dlstat-search input[b-2g9n18ehw6] {
    flex: 1;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    background: var(--surface-card);
    color: var(--text-primary);
}

.dlstat-search input:focus[b-2g9n18ehw6] {
    outline: none;
    border-color: var(--color-primary);
}

.dlstat-check[b-2g9n18ehw6] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.dlstat-table[b-2g9n18ehw6] {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.dlstat-table th[b-2g9n18ehw6],
.dlstat-table td[b-2g9n18ehw6] {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
}

.dlstat-table thead th[b-2g9n18ehw6] {
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
}

.dlstat-table tbody tr:hover[b-2g9n18ehw6] {
    background: var(--surface-hover);
}

.dlstat-table .num[b-2g9n18ehw6] {
    text-align: right;
    white-space: nowrap;
}

.dlstat-err[b-2g9n18ehw6] {
    color: var(--color-danger);
    max-width: 36ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dlstat-muted[b-2g9n18ehw6] {
    color: var(--text-muted);
}

.dlstat-empty[b-2g9n18ehw6] {
    color: var(--text-secondary);
    padding: 1rem;
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
}

.dlstat-pager[b-2g9n18ehw6] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    color: var(--text-secondary);
}

/* Datenqualität-Übersichtsband (ADR-0068 Phase 3) */
.dlquality-band[b-2g9n18ehw6] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 1.5rem;
}

.dlquality-card[b-2g9n18ehw6] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.85rem 1rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-left: 4px solid var(--border-default);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, transform 0.05s;
}

.dlquality-card:hover[b-2g9n18ehw6] {
    border-color: var(--color-primary);
    transform: translateY(-1px);
}

.dlquality-card.is-alert[b-2g9n18ehw6] {
    border-left-color: var(--color-warning);
}

.dlquality-num[b-2g9n18ehw6] {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

.dlquality-card.is-alert .dlquality-num[b-2g9n18ehw6] {
    color: var(--color-warning);
}

.dlquality-label[b-2g9n18ehw6] {
    font-weight: 600;
    font-size: 0.9rem;
}

.dlquality-sub[b-2g9n18ehw6] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}
/* /Components/Pages/Admin/EigeneKriterien.razor.rz.scp.css */
.cc-form-card[b-fv1caqvvyj], .cc-list-card[b-fv1caqvvyj] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.cc-form-head[b-fv1caqvvyj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cc-form[b-fv1caqvvyj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.75rem 1rem;
    margin-top: 0.75rem;
}

.cc-form label[b-fv1caqvvyj] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.cc-form .cc-check[b-fv1caqvvyj] {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.cc-form-actions[b-fv1caqvvyj] {
    grid-column: 1 / -1;
}

.cc-error[b-fv1caqvvyj] {
    margin-top: 0.75rem;
    color: var(--color-danger);
}

.cc-actions[b-fv1caqvvyj] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* Same fix as MonitoringBerichte: inputs styled via .form-control, all fields fill their cell. */
.cc-form .form-control[b-fv1caqvvyj],
.cc-form .form-select[b-fv1caqvvyj] {
    width: 100%;
}

.cc-list-head[b-fv1caqvvyj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.cc-list-head .cc-search[b-fv1caqvvyj] {
    width: min(100%, 24rem);
}

/* Calculated-channel source: operand picker (order of selection = operand order). */
.cc-form .cc-wide[b-fv1caqvvyj] {
    grid-column: 1 / -1;
}

.cc-channels[b-fv1caqvvyj] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.cc-channel-list[b-fv1caqvvyj] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.25rem 1rem;
}

.cc-channel[b-fv1caqvvyj] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0.35rem;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.cc-channel.selected[b-fv1caqvvyj] {
    background: var(--surface-sunken);
}

.cc-channel-pos[b-fv1caqvvyj] {
    min-width: 1.2rem;
    text-align: center;
    font-weight: 600;
    color: var(--color-primary);
}
/* /Components/Pages/Admin/GanttTicketModal.razor.rz.scp.css */
/* The `.ct-modal*` chrome is shared and defined ONCE in wwwroot/css/app.css. A
   component that owns markup owns its CSS — the page's scoped css cannot reach
   inside this child component, so the one modal-internal class lives here. */
.gantt-ticket-anlage-hint[b-4fst24i1to] { color: var(--text-secondary); }

/* Der Zustellungs-Hinweis unter „Zuweisen an": neutral bleibt neutral, eine
   unvollstaendige Zustellung muss sich davon abheben — sonst liest sie sich wie
   die Bestaetigung, die daneben steht. */
.zuweisen-warnung[b-4fst24i1to] {
    color: var(--color-warning-dark);
    font-weight: var(--font-weight-medium);
}
/* /Components/Pages/Admin/HeizungenVerwaltung.razor.rz.scp.css */
/* Permission column icons - bigger and clearer */
    .perm-icon[b-g4nbx20dd9] {
        font-size: 1.4rem;
        line-height: 1;
    }
    
    /* Table row hover highlighting - very strong color */
    .heizung-table tbody tr[b-g4nbx20dd9] {
        cursor: pointer;
        transition: background-color 0.15s ease;
    }
    
    .heizung-table tbody tr:hover[b-g4nbx20dd9] {
        background-color: #90caf9 !important; /* Strong blue highlight */
    }
    
    .heizung-table tbody tr:hover td[b-g4nbx20dd9] {
        background-color: transparent;
    }
    
    /* Alternating row colors with hover */
    .heizung-table.table-striped tbody tr:nth-of-type(odd)[b-g4nbx20dd9] {
        background-color: rgba(0, 0, 0, 0.02);
    }
    
    .heizung-table.table-striped tbody tr:nth-of-type(odd):hover[b-g4nbx20dd9] {
        background-color: #90caf9 !important;
    }
    
    /* table-success rows (permission assigned) with hover */
    .heizung-table tbody tr.table-success[b-g4nbx20dd9] {
        background-color: #d1e7dd;
    }
    
    .heizung-table tbody tr.table-success:hover[b-g4nbx20dd9] {
        background-color: #81c784 !important; /* Strong green highlight */
    }
    
    /* Make sure buttons don't trigger row hover on small tables */
    .heizung-table.table-sm tbody tr[b-g4nbx20dd9] {
        cursor: default;
    }
/* /Components/Pages/Admin/LegacyVisuImport.razor.rz.scp.css */
.import-container[b-5jrsxwafhu] {
        max-width: 900px;
        margin: 0 auto;
        padding: 2rem;
        min-height: 100vh;
        background: var(--surface-page);
        color: var(--text-body);
    }
    
    .import-header[b-5jrsxwafhu] {
        margin-bottom: 2rem;
    }
    
    .btn-back[b-5jrsxwafhu] {
        color: var(--text-secondary);
        text-decoration: none;
        font-size: 0.9rem;
    }
    
    .btn-back:hover[b-5jrsxwafhu] {
        color: var(--color-primary);
    }
    
    .import-header h1[b-5jrsxwafhu] {
        margin: 1rem 0 0.5rem;
        color: var(--text-primary);
    }
    
    .import-header p[b-5jrsxwafhu] {
        color: var(--text-secondary);
        margin: 0;
    }
    
    .import-content[b-5jrsxwafhu] {
        background: var(--surface-sunken);
        border-radius: var(--radius-md);
        padding: 2rem;
    }
    
    .import-step[b-5jrsxwafhu] {
        margin-bottom: 2rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--border-strong);
    }
    
    .import-step h2[b-5jrsxwafhu] {
        color: var(--color-primary);
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }
    
    .step-description[b-5jrsxwafhu] {
        color: var(--text-secondary);
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }
    
    .heizung-select[b-5jrsxwafhu] {
        width: 100%;
        padding: 0.75rem;
        background: var(--surface-page);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        color: var(--text-body);
        font-size: 1rem;
    }
    
    .file-upload[b-5jrsxwafhu] {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    
    .file-upload[b-5jrsxwafhu]  input[type="file"] {
        padding: 0.5rem;
        background: var(--surface-page);
        border: 1px dashed var(--border-strong);
        border-radius: var(--radius-sm);
        color: var(--text-body);
        cursor: pointer;
    }
    
    .file-selected[b-5jrsxwafhu] {
        color: var(--color-primary);
        font-size: 0.9rem;
    }
    
    .import-actions[b-5jrsxwafhu] {
        display: flex;
        gap: 1rem;
        justify-content: flex-end;
        margin-top: 1.5rem;
    }
    
    .btn-convert[b-5jrsxwafhu], .btn-import[b-5jrsxwafhu] {
        padding: 0.75rem 1.5rem;
        background: var(--color-primary);
        color: var(--surface-sunken);
        border: none;
        border-radius: var(--radius-sm);
        font-weight: bold;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .btn-convert:disabled[b-5jrsxwafhu], .btn-import:disabled[b-5jrsxwafhu] {
        background: var(--border-strong);
        color: var(--text-secondary);
        cursor: not-allowed;
    }
    
    .btn-convert:hover:not(:disabled)[b-5jrsxwafhu], .btn-import:hover:not(:disabled)[b-5jrsxwafhu] {
        background: var(--color-primary-hover);
    }
    
    .btn-secondary[b-5jrsxwafhu], .btn-download[b-5jrsxwafhu] {
        padding: 0.75rem 1.5rem;
        background: var(--border-strong);
        color: var(--text-body);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .btn-secondary:hover[b-5jrsxwafhu], .btn-download:hover[b-5jrsxwafhu] {
        background: var(--border-strong);
    }
    
    .error-message[b-5jrsxwafhu] {
        background: rgba(255, 68, 68, 0.1);
        border: 1px solid rgba(255, 68, 68, 0.3);
        border-radius: var(--radius-sm);
        padding: 1rem;
        color: var(--color-danger);
        margin-top: 1rem;
    }
    
    .success-message[b-5jrsxwafhu] {
        background: rgba(0, 255, 136, 0.1);
        border: 1px solid rgba(0, 255, 136, 0.3);
        border-radius: var(--radius-sm);
        padding: 1rem;
        color: var(--color-primary);
        margin-top: 1rem;
    }
    
    .warning[b-5jrsxwafhu] {
        color: var(--color-warning);
        font-size: 0.9rem;
    }
    
    .preview-stats[b-5jrsxwafhu] {
        display: flex;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .stat-item[b-5jrsxwafhu] {
        background: var(--surface-page);
        border-radius: var(--radius-md);
        padding: 1rem 1.5rem;
        text-align: center;
    }
    
    .stat-value[b-5jrsxwafhu] {
        display: block;
        font-size: 2rem;
        font-weight: bold;
        color: var(--color-primary);
    }
    
    .stat-label[b-5jrsxwafhu] {
        display: block;
        font-size: 0.85rem;
        color: var(--text-secondary);
        margin-top: 0.25rem;
    }
    
    .json-preview[b-5jrsxwafhu] {
        margin-bottom: 1.5rem;
    }
    
    .json-preview h3[b-5jrsxwafhu] {
        color: var(--text-secondary);
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }
    
    .json-preview textarea[b-5jrsxwafhu] {
        width: 100%;
        height: 300px;
        background: var(--surface-page);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        color: var(--text-secondary);
        font-family: 'Consolas', 'Monaco', monospace;
        font-size: 0.75rem;
        padding: 1rem;
        resize: vertical;
    }
    
    .bitmap-info[b-5jrsxwafhu] {
        background: var(--surface-page);
        border-radius: var(--radius-sm);
        padding: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .bitmap-info h3[b-5jrsxwafhu] {
        color: var(--text-secondary);
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }
    
    .bitmap-info ul[b-5jrsxwafhu] {
        margin: 0.5rem 0;
        padding-left: 1.5rem;
        color: var(--text-body);
    }
/* /Components/Pages/Admin/MbusBezeichnungen.razor.rz.scp.css */
.mbusn-page[b-fqncpmj8td] { padding: 0.5rem 0; }
.mbusn-intro[b-fqncpmj8td] { color: var(--text-secondary); max-width: 70ch; }
.mbusn-intro code[b-fqncpmj8td] { background: var(--surface-sunken); padding: 0 0.25rem; border-radius: var(--radius-xs); }

.mbusn-table[b-fqncpmj8td] { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: 0.9rem; }
.mbusn-table th[b-fqncpmj8td], .mbusn-table td[b-fqncpmj8td] { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border-default); }
.mbusn-table th[b-fqncpmj8td] { color: var(--text-secondary); font-weight: 600; }
.mbusn-table code[b-fqncpmj8td] { background: var(--surface-sunken); padding: 0 0.25rem; border-radius: var(--radius-xs); }

.mbusn-input[b-fqncpmj8td] {
    width: 100%;
    min-width: 12ch;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    background: var(--surface-card);
    color: var(--text-primary);
}

.mbusn-vorschlag[b-fqncpmj8td] { color: var(--text-secondary); font-style: italic; white-space: nowrap; }
.mbusn-apply[b-fqncpmj8td] { margin-right: 0.35rem; }

.mbusn-muted[b-fqncpmj8td] { color: var(--text-muted); }
.mbusn-empty[b-fqncpmj8td] { color: var(--text-secondary); padding: 1rem; background: var(--surface-sunken); border-radius: var(--radius-md); }

/* Search + accordion */
.mbusn-search[b-fqncpmj8td] { margin-bottom: 1rem; }
.mbusn-search-input[b-fqncpmj8td] {
    width: 100%;
    max-width: 48ch;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-primary);
}
.mbusn-toggle[b-fqncpmj8td] { cursor: pointer; }
.mbusn-chevron[b-fqncpmj8td] {
    display: inline-block;
    width: 1.1em;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}
.mbusn-count[b-fqncpmj8td] {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    font-weight: 400;
    margin-left: 0.5rem;
}

/* Project → Meter → Channels tree */
.mbusn-project[b-fqncpmj8td] { margin-bottom: 1.75rem; }
.mbusn-project-head[b-fqncpmj8td] {
    margin: 0 0 0.6rem;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid var(--border-default);
    font-size: 1.05rem;
}

.mbusn-meter[b-fqncpmj8td] {
    margin: 0 0 1rem;
    padding: 0.75rem 0.9rem;
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}
.mbusn-meter-head[b-fqncpmj8td] { margin-bottom: 0.6rem; }
.mbusn-meter-title[b-fqncpmj8td] { font-size: 0.95rem; margin-bottom: 0.4rem; }
.mbusn-meter-edit[b-fqncpmj8td] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    max-width: 40ch;
}
.mbusn-meter-note[b-fqncpmj8td] { margin: 0.25rem 0 0; font-size: 0.82rem; }
.mbusn-meter .mbusn-table[b-fqncpmj8td] { margin-bottom: 0; background: var(--surface-card); border-radius: var(--radius); }
/* /Components/Pages/Admin/MBusIngest.razor.rz.scp.css */
.mbus-page[b-9scajzw8w4] { padding: 0.5rem 0; }
.mbus-intro[b-9scajzw8w4] { color: var(--text-secondary); max-width: 70ch; }
.mbus-intro code[b-9scajzw8w4] { background: var(--surface-sunken); padding: 0 0.25rem; border-radius: var(--radius-xs); }

.mbus-toolbar[b-9scajzw8w4] { margin: 0.75rem 0; display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.mbus-toolbar select[b-9scajzw8w4] { padding: 0.3rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--radius); background: var(--surface-card); color: var(--text-primary); }
.mbus-search[b-9scajzw8w4] { gap: 0.85rem; }
.mbus-search label[b-9scajzw8w4] { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-secondary); font-size: 0.88rem; }
.mbus-search input[type=text][b-9scajzw8w4], .mbus-search input[type=date][b-9scajzw8w4] { padding: 0.3rem 0.5rem; border: 1px solid var(--border-default); border-radius: var(--radius); background: var(--surface-card); color: var(--text-primary); }

.mbus-table[b-9scajzw8w4] { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: 0.9rem; }
.mbus-table th[b-9scajzw8w4], .mbus-table td[b-9scajzw8w4] { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border-default); }
.mbus-table th[b-9scajzw8w4] { color: var(--text-secondary); font-weight: 600; }
.mbus-table th.num[b-9scajzw8w4], .mbus-table td.num[b-9scajzw8w4] { text-align: right; }

.mbus-err[b-9scajzw8w4] {
    color: var(--color-danger);
    max-width: 36ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mbus-muted[b-9scajzw8w4] { color: var(--text-muted); }
.mbus-empty[b-9scajzw8w4] { color: var(--text-secondary); padding: 1rem; background: var(--surface-sunken); border-radius: var(--radius-md); }
.mbus-pager[b-9scajzw8w4] { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; color: var(--text-secondary); }
/* /Components/Pages/Admin/MBusParser.razor.rz.scp.css */
.mbp-page[b-3k39krzbhk] { padding: 0.5rem 0; }
.mbp-intro[b-3k39krzbhk] { color: var(--text-secondary); max-width: 80ch; }
.mbp-intro code[b-3k39krzbhk], .mbp-table code[b-3k39krzbhk] { background: var(--surface-sunken); padding: 0 0.25rem; border-radius: var(--radius-xs); white-space: nowrap; }

.mbp-input label[b-3k39krzbhk] { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.mbp-textarea[b-3k39krzbhk] { width: 100%; font-family: var(--font-mono); font-size: 0.85rem; }
.mbp-actions[b-3k39krzbhk] { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0 1.2rem; }

.mbp-result[b-3k39krzbhk] { margin-top: 1rem; padding: 1rem; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.mbp-result h3[b-3k39krzbhk] { margin-top: 0; }
.mbp-result h4[b-3k39krzbhk] { font-size: 1rem; margin: 1rem 0 0.4rem; }
.mbp-muted[b-3k39krzbhk] { color: var(--text-muted); font-weight: 400; }
.mbp-empty[b-3k39krzbhk] { color: var(--text-secondary); padding: 0.75rem; background: var(--surface-sunken); border-radius: var(--radius-md); }
.mbp-summary[b-3k39krzbhk] { color: var(--text-secondary); }

.mbp-warnings[b-3k39krzbhk] { list-style: none; padding: 0.5rem 0.75rem; margin: 0 0 1rem; background: var(--color-warning-subtle); color: var(--color-warning-dark); border-radius: var(--radius); }
.mbp-warnings li + li[b-3k39krzbhk] { margin-top: 0.2rem; }

.mbp-header[b-3k39krzbhk] { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 1rem; margin: 0 0 1rem; font-size: 0.9rem; }
.mbp-header dt[b-3k39krzbhk] { color: var(--text-secondary); font-weight: 600; }
.mbp-header dd[b-3k39krzbhk] { margin: 0; }

.mbp-table[b-3k39krzbhk] { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.mbp-table th[b-3k39krzbhk], .mbp-table td[b-3k39krzbhk] { text-align: left; padding: 0.4rem 0.55rem; border-bottom: 1px solid var(--border-default); vertical-align: top; }
.mbp-table th[b-3k39krzbhk] { color: var(--text-secondary); font-weight: 600; white-space: nowrap; }
.mbp-num[b-3k39krzbhk] { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mbp-dropped td[b-3k39krzbhk] { color: var(--text-muted); }
.mbp-kept td:last-child[b-3k39krzbhk] { color: var(--color-success-dark); }
.mbp-dropped td:last-child[b-3k39krzbhk] { color: var(--color-danger-dark); }
/* /Components/Pages/Admin/ModbusDiagnostics.razor.rz.scp.css */
/* Layout for the Modbus-TCP diagnostics page.
   The app does NOT ship Bootstrap — .row/.col-*/.container-fluid/.btn-group are dead here
   (only the .btn/.form-*/.table/.alert "look" classes exist in app.css). So all field rows
   use the app's real idiom: flexbox with wrap. */

.mb-page[b-8dyjbt15nc] {
    max-width: 1100px;
    padding: 1rem 0;
}

/* One horizontal row of fields; wraps only on genuinely narrow screens. */
.mb-row[b-8dyjbt15nc] {
    display: flex;
    gap: 1rem;
    row-gap: 0.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 0.75rem;
}

/* Each field (label stacked over input). flex-basis keeps them side-by-side; equal by default. */
.mb-row > .mb-field[b-8dyjbt15nc] {
    flex: 1 1 140px;
    min-width: 0;
}

/* Wider field (e.g. Host/IP) takes ~2× the share of a plain field. */
.mb-row > .mb-field.wide[b-8dyjbt15nc] {
    flex: 2 1 220px;
}

.mb-field label[b-8dyjbt15nc] {
    margin-bottom: 0.25rem;
}

.mb-field input[b-8dyjbt15nc],
.mb-field select[b-8dyjbt15nc] {
    width: 100%;
}

/* Segmented mode toggle (replaces the dead .btn-group/.btn-check). */
.mb-toggle[b-8dyjbt15nc] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
/* /Components/Pages/Admin/MonitoringBerichte.razor.rz.scp.css */
.mb-form-card[b-jg0qlrmnqj], .mb-list-card[b-jg0qlrmnqj] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.mb-form-head[b-jg0qlrmnqj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.mb-form[b-jg0qlrmnqj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.75rem 1rem;
    margin-top: 0.75rem;
}

.mb-form label[b-jg0qlrmnqj] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.mb-form .mb-wide[b-jg0qlrmnqj],
.mb-form-actions[b-jg0qlrmnqj] {
    grid-column: 1 / -1;
}

.mb-error[b-jg0qlrmnqj] {
    margin-top: 0.75rem;
    color: var(--color-danger);
}

.mb-lasterror[b-jg0qlrmnqj] {
    font-size: 0.8rem;
    color: var(--color-danger);
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mb-actions[b-jg0qlrmnqj] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.mb-runs-row > td[b-jg0qlrmnqj] {
    background: var(--surface-sunken);
}

.mb-runs[b-jg0qlrmnqj] {
    margin: 0;
}

/* Every field fills its grid cell: the global `select` rule is width:auto, and inputs are only
   styled through .form-control — without both, text/time inputs sat shorter and narrower than
   the selects beside them. */
.mb-form .form-control[b-jg0qlrmnqj],
.mb-form .form-select[b-jg0qlrmnqj] {
    width: 100%;
}

.mb-list-head[b-jg0qlrmnqj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.mb-list-head .mb-search[b-jg0qlrmnqj] {
    width: min(100%, 24rem);
}
/* /Components/Pages/Admin/NotizGruppen.razor.rz.scp.css */
/* Ticket-Gruppen admin page (/admin/notizgruppen). Chrome only — every colour is a
   design token (d-flex/gap-* are inert in this app; flex is set explicitly here). */

.page-header[b-vby3pzawzp] {
    margin-bottom: var(--space-4);
}

.config-section[b-vby3pzawzp] {
    background: var(--surface-card);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    border: 1px solid var(--border-strong);
}

.gruppen-layout[b-vby3pzawzp] {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    align-items: flex-start;
}

.gruppen-list-panel[b-vby3pzawzp],
.gruppen-detail-panel[b-vby3pzawzp] {
    flex: 1;
    min-width: 320px;
}

.form-group[b-vby3pzawzp] {
    margin-bottom: var(--space-3);
}

.form-group label[b-vby3pzawzp] {
    display: block;
    font-weight: 500;
    margin-bottom: var(--space-1);
}

.section-heading[b-vby3pzawzp] {
    margin-top: var(--space-4);
}

.gruppen-table tr[b-vby3pzawzp] {
    cursor: pointer;
}

.gruppen-table tr.selected-row[b-vby3pzawzp] {
    background: var(--surface-hover);
}

.add-row[b-vby3pzawzp] {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
    align-items: flex-start;
}

.user-search-wrapper[b-vby3pzawzp] {
    flex: 1;
    min-width: 180px;
    position: relative;
}

.user-suggestions[b-vby3pzawzp] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    list-style: none;
    margin: 0;
    padding: var(--space-1) 0;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    z-index: 20;
    max-height: 280px;
    overflow-y: auto;
}

.user-suggestions li[b-vby3pzawzp] {
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    font-size: 0.88rem;
}

.user-suggestions li:hover[b-vby3pzawzp] {
    background: var(--surface-hover);
}

.user-suggestions-empty[b-vby3pzawzp] {
    margin-top: var(--space-1);
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-style: italic;
}
/* /Components/Pages/Admin/OrganisationenEdit.razor.rz.scp.css */
/* Bulk editing of an organisation's per-controller module rights (2026-09-27).
   Only design tokens here — no literals, no var(--x, fallback). */

/* Assign panel: plant list left, module rights right, same height (2026-09-27).
   The list used to sit under the rights box and was capped at 14 rem, so picking
   plants for a 200-controller org meant constant scrolling. */
.org-assign-grid[b-wc7uvtf3j0] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    gap: var(--space-3);
    align-items: stretch;
}

.org-assign-select[b-wc7uvtf3j0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

/* Fills the column; the viewport cap keeps the grant button reachable without
   scrolling the whole page on a short screen. */
.org-assign-list[b-wc7uvtf3j0] {
    flex: 1 1 auto;
    min-height: 14rem;
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    padding: var(--space-2);
}

.org-assign-list label[b-wc7uvtf3j0] {
    display: block;
    font-size: 0.88rem;
    padding: var(--space-1) 0;
    cursor: pointer;
}

/* Wall panel / narrow window: back to one column, list first. */
@media (max-width: 60rem) {
    .org-assign-grid[b-wc7uvtf3j0] {
        grid-template-columns: minmax(0, 1fr);
    }

    .org-assign-list[b-wc7uvtf3j0] {
        max-height: 40vh;
    }
}

.org-grant-module-box[b-wc7uvtf3j0] {
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    padding: var(--space-3);
    background: var(--surface-sunken);
    /* Same height as the list column; its own scroll if a future module list outgrows it. */
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-y: auto;
}

.org-grant-module-head[b-wc7uvtf3j0] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}

/* One module per line in the side column — reads like a checklist. */
.org-grant-module-grid[b-wc7uvtf3j0] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1) var(--space-3);
}

@media (max-width: 60rem) {
    /* Stacked layout: use the full width again instead of one tall column. */
    .org-grant-module-grid[b-wc7uvtf3j0] {
        grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    }
}

.org-grant-module[b-wc7uvtf3j0] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.88rem;
    cursor: pointer;
    min-width: 0;
}

.org-grant-warn[b-wc7uvtf3j0] {
    margin: var(--space-2) 0 0;
    font-size: 0.85rem;
    color: var(--color-warning-dark);
}

/* Filter + save bar above the assigned table. */
.org-zuordnung-bar[b-wc7uvtf3j0] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin: var(--space-4) 0 var(--space-2);
    min-width: 0;
}

.org-zuordnung-search[b-wc7uvtf3j0] {
    flex: 1 1 18rem;
    min-width: 0;
    max-width: 100%;
}

.org-dirty-badge[b-wc7uvtf3j0] {
    background: var(--color-warning-10);
    color: var(--color-warning-dark);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    font-size: 0.85rem;
    white-space: nowrap;
}

/* Column header that toggles its module on every listed row. */
.org-col-head label[b-wc7uvtf3j0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    cursor: pointer;
    font-weight: inherit;
    margin: 0;
}

.org-col-head span[b-wc7uvtf3j0] {
    font-size: 0.78rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* A row with unsaved changes. */
.org-row-dirty td[b-wc7uvtf3j0] {
    background: var(--color-warning-10);
}
/* /Components/Pages/Admin/PanelVncPassword.razor.rz.scp.css */
/* Panel VNC-Passwort — design-token-only styling (see CLAUDE.md design system). */

.panel-vnc[b-gimojlioki] {
    max-width: 46rem;
    margin: 0 auto;
    padding: 1rem;
}

.page-header h2[b-gimojlioki] {
    margin: 0 0 0.25rem;
    color: var(--text-primary);
}

.page-header .subtitle[b-gimojlioki] {
    color: var(--text-secondary);
    margin: 0 0 1rem;
}

.vnc-card[b-gimojlioki] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.form-group[b-gimojlioki] {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.form-group label[b-gimojlioki] {
    font-weight: 600;
    color: var(--text-primary);
}

.vnc-hint[b-gimojlioki] {
    color: var(--text-secondary);
}

.vnc-msg[b-gimojlioki] {
    margin-top: 0.75rem;
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius);
    border: 1px solid var(--border-default);
}

.vnc-msg-ok[b-gimojlioki] {
    color: var(--color-success);
    background: var(--surface-raised);
}

.vnc-msg-error[b-gimojlioki] {
    color: var(--color-danger);
    background: var(--surface-sunken);
}

.vnc-hints h3[b-gimojlioki] {
    margin-top: 0;
    color: var(--text-primary);
}

.vnc-hints ul[b-gimojlioki] {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--text-secondary);
}

.vnc-hints li[b-gimojlioki] {
    margin-bottom: 0.5rem;
}
/* /Components/Pages/Admin/PiAppliances.razor.rz.scp.css */
.pi-appliances[b-mlimww75md] { max-width: 68rem; margin: 0 auto; padding: 1rem; }

.pi-appliances .subtitle[b-mlimww75md] { color: var(--text-secondary); }

.pi-key-banner[b-mlimww75md] {
    background: var(--surface-sunken);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.pi-key-value[b-mlimww75md] {
    display: block;
    margin: 0.5rem 0;
    padding: 0.5rem 0.75rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono, monospace);
    word-break: break-all;
    user-select: all;
}

.pi-add-card[b-mlimww75md], .pi-list-card[b-mlimww75md] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.pi-add-form[b-mlimww75md] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
}

.pi-add-form label[b-mlimww75md] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.pi-add-form input[b-mlimww75md],
.pi-add-form select[b-mlimww75md] {
    min-width: 16rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--text-primary);
}

.pi-error[b-mlimww75md] { color: var(--color-danger); margin-top: 0.5rem; }

.pi-actions[b-mlimww75md] { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.pi-edit-input[b-mlimww75md] {
    min-width: 14rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--text-primary);
    font-family: var(--font-mono, monospace);
}

.pi-resync-banner[b-mlimww75md] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 0.75rem 1.25rem;
    margin-bottom: 1.25rem;
}

.pi-resync-banner.pi-resync-error[b-mlimww75md] {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

/* Stand auf dem Gerät (2026-09-28) — nur Token. */
.pi-list-head[b-mlimww75md] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.pi-version-meta[b-mlimww75md] {
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.pi-version-stale[b-mlimww75md] {
    color: var(--color-warning-dark);
    font-size: var(--font-size-xs);
}

.pi-refresh-result[b-mlimww75md] {
    margin: var(--space-2) 0 0;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}
/* /Components/Pages/Admin/Projekte.razor.rz.scp.css */
/* Die Seite bringt ihr eigenes Polster mit, weil sie nicht mehr in `.content` von
   MainLayout haengt (siehe Kopf der .razor). EditorLayout ist absichtlich nackt — die
   Visu-Editoren wollen dort jeden Pixel. */
.projekte-seite[b-ljyvv1rg7g] {
    padding: var(--space-5);
    min-height: 100vh;
    background: var(--surface-page);
}

.projekte-kopf[b-ljyvv1rg7g] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.projekte-kopf h2[b-ljyvv1rg7g] {
    margin: 0;
}

/* Der einzige Weg aus dieser Seite heraus — er darf nicht mitscrollen und nicht
   umbrechen. */
.projekte-zurueck[b-ljyvv1rg7g] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .projekte-seite[b-ljyvv1rg7g] { padding: var(--space-3); }
    .projekte-kopf h2[b-ljyvv1rg7g] { font-size: 1.1rem; }
}

/* Layout hier und nicht über Bootstrap-Utilities: diese App liefert kein d-flex/gap-* aus
   (No-Bootstrap-Grid-Regel), solche Klassen wären wirkungslos. */
.projekt-create-header[b-ljyvv1rg7g] { cursor: pointer; display: flex; align-items: center; }
.projekt-create-label[b-ljyvv1rg7g] { display: inline-flex; align-items: center; gap: var(--space-2); }
.projekt-create-chevron[b-ljyvv1rg7g] { color: var(--text-secondary); font-size: .9rem; line-height: 1; }
/* Wie in der Gantt-Überschrift: die Nummer führt zum Namen, sie ersetzt ihn nicht. */
.projekt-nummer[b-ljyvv1rg7g] { font-family: var(--font-mono); font-size: .85em; color: var(--text-secondary); margin-right: var(--space-1); }

/* Die Zeitachse selbst steckt in GanttZeitleiste; hier bleibt nur die Karte darum.
   Volle Breite und bewusst kein max-width: der Streifen stand vorher auf 1100 px fest und
   ließ rechts Platz liegen, obwohl genau dort die Zeit hingehört. */
.projekt-strip-card[b-ljyvv1rg7g] {
    width: 100%;
    margin-top: var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    padding: var(--space-3);
}
.projekt-strip-card h3[b-ljyvv1rg7g] { margin-top: 0; }

/* --- Zeitachse: Kopf mit Bedienelementen ------------------------------------------
   Seit der Zusammenlegung ist diese Leiste die Projekt-Übersicht (vorher eine eigene
   Seite). Damit gehören ihre zwei Bedienelemente — Archivierte zeigen, Auflösung —
   an sie und nicht mehr an den Seitenkopf. */
.projekt-strip-head[b-ljyvv1rg7g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}
.projekt-strip-head h3[b-ljyvv1rg7g] { margin: 0; }
.projekt-strip-actions[b-ljyvv1rg7g] { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.projekt-strip-toggle[b-ljyvv1rg7g] { display: flex; align-items: center; gap: var(--space-1); font-size: .875rem; }
.projekt-strip-zoom[b-ljyvv1rg7g] { width: auto; }

/* --- Fokus auf ein Projekt ---------------------------------------------------------
   Erscheint nur, wenn ein Projekt aufgeklappt ist, und beantwortet die zwei Fragen, die
   sich dann sofort stellen: welches Projekt ist das, und wie komme ich zurück. Ohne den
   Rückweg wäre die Ansicht eine Sackgasse — alle anderen Projekte sind ausgeblendet. */
.projekt-fokus[b-ljyvv1rg7g] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}
.projekt-fokus-zurueck[b-ljyvv1rg7g] {
    flex: 0 0 auto;
    background: none;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    color: var(--color-primary);
    cursor: pointer;
    font-size: .875rem;
}
.projekt-fokus-zurueck:hover[b-ljyvv1rg7g] { border-color: var(--color-primary); }
.projekt-fokus-zurueck:focus-visible[b-ljyvv1rg7g] { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.projekt-fokus-name[b-ljyvv1rg7g] { font-weight: 600; }
.projekt-fokus-hinweis[b-ljyvv1rg7g] { font-size: .875rem; }

/* --- Listenkopf mit Anlegen-Knopf --------------------------------------------------
   Der KNOPF steht oben, das Formular bleibt unten: ein Feldbericht (logs/gantt2.png) hat
   gezeigt, dass gestapelte Karten den eigentlichen Inhalt begraben. Ein Knopf tut das
   nicht — er führt nur hin. */
/* EIN Maß für alles unterhalb der Zeitachse: Anlegen-Karte, Listenkopf mit Suche und
   Tabelle. Vorher hatte jedes Element sein eigenes max-width (780 / voll / 1100), also drei
   verschiedene rechte Kanten übereinander — im Feldbericht logs/gantt.png stand die Suche
   deshalb einsam am Seitenrand, weit rechts neben der Tabelle, zu der sie gehört.
   Die Zeitachse darüber bleibt bewusst voll breit: dort ist die Breite die Zeit.

   ⚠ 1100 → 1600 am 2026-08-27. Das Maß stammt aus der Zeit, als die Seite in MainLayout
   steckte und der Inhalt ohnehin nur ~990 px breit war — die Deckelung war damals
   unsichtbar. Ohne Seitenleiste steht die Seite auf einem großen Bildschirm voll offen, und
   dieselbe Regel erzeugte plötzlich eine leere rechte Hälfte unter einer voll breiten
   Zeitachse. Bewusst KEINE volle Breite: eine 1900 px breite Tabelle mit sechs kurzen
   Spalten liest sich schlechter, nicht besser — die Zeile wird zu lang fürs Auge. */
.projekt-block[b-ljyvv1rg7g] { width: 100%; max-width: 1600px; }

/* Anlagen-Auswahl im Anlegen-Formular.
   Der Rahmen hatte ein max-width, die Liste darin nicht: ein <select> nimmt sich seine Breite
   vom laengsten Eintrag und stand deshalb rechts ueber den Rahmen hinaus (Bedienerbild
   logs/gantt.png). Jetzt bestimmt EIN Mass den Rahmen, und alles darin fuellt ihn. */
.anlage-picker[b-ljyvv1rg7g] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
    max-width: 32rem;
    padding: var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-card);
}
/* min-width:0 gegen die Flex-Grundregel: ein Kind darf sonst nicht unter seine
   Inhaltsbreite schrumpfen und sprengt den Rahmen erneut. */
.anlage-picker > *[b-ljyvv1rg7g] { width: 100%; min-width: 0; }
.anlage-picker select[b-ljyvv1rg7g] { font-family: inherit; }
.anlage-picker-aktionen[b-ljyvv1rg7g] { display: flex; gap: var(--space-2); }
.anlage-picker-aktionen button[b-ljyvv1rg7g] { width: auto; }

/* Der eingebettete Projekt-Gantt. Er bringt sein eigenes Layout mit; hier trennt ihn nur
   Abstand von der Kopfzeile mit dem Rueckweg. */
.projekt-detail[b-ljyvv1rg7g] { margin-top: var(--space-3); }

.projekt-liste-head[b-ljyvv1rg7g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
}
.projekt-liste-head h3[b-ljyvv1rg7g] { margin: 0; }

/* Suchfeld ueber der Liste. Es sucht bewusst AUCH in den archivierten Projekten — ein
   abgeschlossenes Projekt soll auffindbar sein, ohne erst einen Haken zu setzen. */
.projekt-suche[b-ljyvv1rg7g] { position: relative; display: flex; align-items: center; flex: 0 1 22rem; min-width: 14rem; }
.projekt-suche input[b-ljyvv1rg7g] { padding-right: 1.75rem; }
.projekt-suche-loeschen[b-ljyvv1rg7g] {
    position: absolute; right: var(--space-1);
    background: none; border: 0; padding: 0 var(--space-1);
    color: var(--text-muted); cursor: pointer; line-height: 1;
}
.projekt-suche-loeschen:hover[b-ljyvv1rg7g] { color: var(--text-primary); }
.projekt-suche-loeschen:focus-visible[b-ljyvv1rg7g] { outline: 2px solid var(--color-primary); outline-offset: 1px; }

/* Statuspunkt vor der Auswahl. KATEGORIAL, nicht semantisch: ein Projekt im Entwurf ist
   keine Warnung und ein abgeschlossenes kein Erfolg. Die Farben kommen darum aus der
   Rollen-/Datengruppe, nicht aus --color-warning & Co. — siehe die Carve-out-Regel in
   CLAUDE.md. */
.projekt-status-punkt[b-ljyvv1rg7g] {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: var(--radius-full);
    margin-right: var(--space-2);
    vertical-align: middle;
    background: var(--gray-400);
}
.projekt-status-entwurf[b-ljyvv1rg7g]      { background: var(--gray-400); }
.projekt-status-aktiv[b-ljyvv1rg7g]        { background: var(--color-success); }
.projekt-status-abgeschlossen[b-ljyvv1rg7g] { background: var(--color-primary); }
.projekt-status-archiviert[b-ljyvv1rg7g]   { background: var(--gray-600); }

/* --- Ersatz fuer unwirksame Bootstrap-Hilfsklassen ---------------------------------
   `mb-0`, `py-2`, `ms-2` und `d-inline-block` sind BOOTSTRAP und in dieser Anwendung
   nirgends definiert (nur mt-1/mt-3/mt-4/text-muted wurden seinerzeit nachgezogen). Sie
   standen also im Markup und taten NICHTS: der Hinweis unter der Zeitachse trug seinen
   vollen Absatzabstand, das Anlagen-Band sein volles Polster, der Entfernen-Knopf klebte
   am Text, und die Status-Auswahl war ein Blockelement mit Inline-Breite.
   ⚠ Dieselbe Fundklasse wie d-flex/gap-* — es gibt sie auf weiteren Seiten. */
.projekt-eng[b-ljyvv1rg7g] { margin-bottom: 0; }

.projekt-anlage-zeile[b-ljyvv1rg7g] {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    margin-bottom: 0;
}

.projekt-abstand-links[b-ljyvv1rg7g] { margin-left: var(--space-2); }

.projekt-status-auswahl[b-ljyvv1rg7g] {
    display: inline-block;
    width: auto;
    margin-top: var(--space-1);
}

/* --- Projektname: Stift oder Herkunftshinweis -------------------------------------
   Genau eines von beiden steht je Zeile. Der Hinweis ist bewusst Text und kein Symbol:
   „von der Anlage" sagt, WOHIN man muss; ein durchgestrichener Stift saegte nur, dass es
   hier nicht geht. */
.projekt-umbenennen[b-ljyvv1rg7g] {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0 var(--space-1);
    font-size: 0.9rem;
    line-height: 1;
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
}

/* Erst beim Ueberfahren der Zeile — in einer langen Liste waere ein Stift je Zeile
   Unruhe. Bei Tastaturbedienung MUSS er sichtbar werden, sonst ist er unerreichbar. */
tr:hover .projekt-umbenennen[b-ljyvv1rg7g],
.projekt-umbenennen:focus-visible[b-ljyvv1rg7g] {
    opacity: 1;
}

.projekt-umbenennen:hover[b-ljyvv1rg7g] { color: var(--color-primary); }

/* /Components/Pages/Admin/ProjektGantt.razor.rz.scp.css */
/* Layout is defined HERE, not via Bootstrap display utilities — this app does not ship
   d-flex/d-block/gap-* (no-Bootstrap-grid rule), so utility classes on the markup are inert.
   Relying on them stacked the timeline BELOW the label rail (field report logs/gant1.png). */
.gantt-vorlage-badge[b-es1hcg48mh] { background: var(--surface-sunken); color: var(--text-secondary); }
/* Die Anlagen-Projektnummer vor dem Namen: erkennbar als eigene Einheit, aber ruhiger als
   der Name — sie hilft beim Finden, gelesen wird der Name. */
.gantt-projektnummer[b-es1hcg48mh] { font-family: var(--font-mono); font-size: .8em; color: var(--text-secondary); }
.gantt-projektnummer-trenner[b-es1hcg48mh] { color: var(--text-muted); margin: 0 .15em; }
.gantt-toolbar[b-es1hcg48mh] { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.gantt-body[b-es1hcg48mh] { display: flex; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.gantt-container[b-es1hcg48mh] {
    display: flex;
    flex: 1 1 480px;
    min-width: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    overflow: hidden;
}
.gantt-labels[b-es1hcg48mh] { width: 260px; flex: none; border-right: 1px solid var(--border-default); }
.gantt-label[b-es1hcg48mh] { height: 32px; line-height: 32px; padding: 0 var(--space-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gantt-label-axis-spacer[b-es1hcg48mh] { background: var(--surface-sunken); border-bottom: 1px solid var(--border-default); }
.gantt-label[data-row-kind='GroupHeader'][b-es1hcg48mh], .gantt-label[data-row-kind='AnlageHeader'][b-es1hcg48mh] { font-weight: 600; background: var(--surface-sunken); }
.gantt-label[data-row-kind='TicketLane'][b-es1hcg48mh], .gantt-label[data-row-kind='WartungLane'][b-es1hcg48mh] { color: var(--text-secondary); padding-left: var(--space-4); }
/* min-width: 0 is load-bearing: without it a wide SVG (Woche/Tag zoom) inflates this
   flex item instead of scrolling inside it, the container overflows, and the edit panel
   wraps below the fold (field report gantt5 #3: "panel only visible on Monat"). */
.gantt-scroll[b-es1hcg48mh] { overflow-x: auto; flex: 1; min-width: 0; }
/* Die waagerechte Bildlaufleiste war schwer zu treffen (Bedienerrückmeldung 2026-08-23):
   dünn, im Ruhezustand teils unsichtbar, und sie grenzte unmittelbar an den Balken der
   letzten Aufgabe — wer sie greifen wollte, verschob einen Termin. Die Höhe kommt aus dem
   Zeichenbereich (GanttMath.ScrollRandHoehe schafft den toten Streifen darüber), hier wird
   die Leiste selbst größer und dauerhaft sichtbar gemacht.

   Dauerhaft sichtbar und nicht nur beim Zeigen: diese Ansicht läuft auch auf
   Bedienpanels, wo es kein Zeigen gibt — eine Leiste, die erst bei Mausbewegung erscheint,
   existiert dort schlicht nicht. Aus demselben Grund 14 px statt der üblichen 8: das ist
   die Größenordnung, die ein Finger trifft. */
.gantt-scroll[b-es1hcg48mh] { scrollbar-width: auto; scrollbar-color: var(--border-strong) var(--surface-sunken); }
.gantt-scroll[b-es1hcg48mh]::-webkit-scrollbar { height: 14px; }
.gantt-scroll[b-es1hcg48mh]::-webkit-scrollbar-track { background: var(--surface-sunken); border-radius: 7px; }
.gantt-scroll[b-es1hcg48mh]::-webkit-scrollbar-thumb {
    background: var(--border-strong); border-radius: 7px;
    border: 3px solid var(--surface-sunken);   /* Rand macht den Griff optisch schlanker, die Trefferfläche bleibt 14 px */
}
.gantt-scroll[b-es1hcg48mh]::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
[b-es1hcg48mh] .gantt-bar-date { font-size: 10px; fill: var(--text-muted); pointer-events: none; }
.gantt-svg[b-es1hcg48mh] { display: block; }
/* Row bands: zebra parity shared between the SVG timeline and the HTML label rail so a
   stripe reads as ONE row across the seam. color-mix keeps the rail stripe subtler than
   the header rows' full sunken background while staying token-derived. */
.gantt-row-band[b-es1hcg48mh] { fill: var(--surface-sunken); opacity: .7; pointer-events: none; }
.gantt-row-sep[b-es1hcg48mh] { stroke: var(--border-subtle); pointer-events: none; }
.gantt-row-band-header[b-es1hcg48mh] { fill: var(--surface-sunken); pointer-events: none; }
.gantt-label-band[b-es1hcg48mh] { background: color-mix(in srgb, var(--surface-sunken) 70%, transparent); }
.gantt-label[b-es1hcg48mh] { border-bottom: 1px solid var(--border-subtle); }
/* ::deep, weil diese <text>-Elemente aus einem MarkupString stammen (RZ1023: <text> darf
   im Razor-Codeblock keine Attribute tragen). Laufzeit-eingefuegtes Markup bekommt KEIN
   Scope-Attribut, `.gantt-axis-month` wuerde also zu `.gantt-axis-month[b-xxx]` kompilieren
   und auf nichts passen -- die Beschriftungen standen unbemerkt in Browser-Standard
   (schwarz, ~16px) statt klein und grau. ::deep haengt das Scope an den VORFAHREN, der im
   Markup steht, und trifft die Kinder unabhaengig von deren Attributen. */
[b-es1hcg48mh] .gantt-axis-month { font-size: 11px; font-weight: 600; fill: var(--text-secondary); pointer-events: none; }
[b-es1hcg48mh] .gantt-axis-tick { font-size: 10px; fill: var(--text-muted); pointer-events: none; }
/* Kalenderwoche: die Einheit, in der terminiert wird -- staerker als der Tag, ruhiger als
   der Monat, damit der Kopf von oben nach unten grober zu feiner liest. */
[b-es1hcg48mh] .gantt-axis-week { font-size: 10px; font-weight: 600; fill: var(--text-secondary); pointer-events: none; }
.gantt-axis-sep[b-es1hcg48mh] { stroke: var(--border-default); }
.gantt-today[b-es1hcg48mh] { stroke: var(--color-primary); stroke-width: 2; }
.gantt-grid[b-es1hcg48mh] { stroke: var(--border-subtle); }
/* Geplante Dauer blass, Fortschritt voll — in DERSELBEN Farbe (fill= je Balken aus
   GanttPalette, datenkodierende Ausnahme). Die Farbe bezeichnet die Phase, die Sättigung
   den Stand. Dieselben Werte wie in GanttZeitleiste, damit „blass = geplant“ auf allen
   drei Ansichten dasselbe heißt.
   Vorher lag über dem Fortschritt ein schwarzer Schleier: der machte aus jeder Phasenfarbe
   eine zweite, dunklere, die für sich nichts bedeutete.
   Der Wert 0,65 ist derselbe wie für Aufgaben in GanttZeitleiste und ebenso erprobt — hier
   sind ALLE Balken Aufgaben. Wäre er niedriger, sähe dasselbe Projekt auf der Detailseite
   blasser aus als in der Übersicht.
   fill-opacity und nicht opacity: opacity dämpfte auch den Warn-Rand mit, und ein Hinweis,
   der zu 40 % durchscheint, ist kein Hinweis. */
.gantt-bar[b-es1hcg48mh] { cursor: pointer; fill-opacity: .65; }
.gantt-progress[b-es1hcg48mh] { fill-opacity: 1; pointer-events: none; }

/* Zustand liegt auf dem RAND, nicht in der Füllung — sonst überschriebe „ist in Gefahr“
   die Aussage „gehört zu Phase X“. Gestrichelt = Reihenfolge verletzt, durchgezogen =
   überfällig: die beiden Fälle bleiben damit auch ohne Farbe unterscheidbar. */
.gantt-bar.risiko[b-es1hcg48mh] { stroke-width: 2; fill-opacity: .78; }
.gantt-handle[b-es1hcg48mh] { fill: transparent; cursor: ew-resize; }

/* Meilenstein: Zeitpunkt statt Zeitraum. Voll deckend, anders als die Balken — er ist ein
   einzelner Punkt und muss auch bei grobem Zoom auffindbar bleiben. Gefüllt vs. hohl
   unterscheidet erreicht von offen, ohne eine zweite Farbe einzuführen. */
/* Die Raute zeichnet nur — angefasst wird der unsichtbare Griff darüber. pointer-events:none
   hält sie aus dem Weg, sonst schluckte sie bei GEFÜLLTEN Meilensteinen die Klicks, und die
   Zielfläche wäre wieder 16 px statt 26. */
.gantt-meilenstein[b-es1hcg48mh] { stroke-width: 2; pointer-events: none; }
.gantt-meilenstein-griff[b-es1hcg48mh] { fill: transparent; cursor: pointer; }
/* Auch die Umrandung ist nur Anzeige. */
.gantt-meilenstein.risiko[b-es1hcg48mh] { stroke-width: 3; }

/* Hinweis unter einem stillgelegten Feld: erklärt, warum es nicht bedienbar ist. */
.gantt-panel-hinweis[b-es1hcg48mh] { display: block; margin-top: var(--space-1); color: var(--text-secondary); font-size: var(--font-size-sm); }

/* Die Gruppenüberschrift trägt jetzt zwei Dinge: den Namen und den gerechneten Fortschritt.
   Der Name darf kürzen, die Zahl nicht — eine abgeschnittene Prozentangabe ist schlimmer als
   keine. */
.gantt-label[data-row-kind="GroupHeader"][b-es1hcg48mh] { display: flex; align-items: center; gap: var(--space-2); }
.gantt-label-text[b-es1hcg48mh] { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.gantt-phase-prozent[b-es1hcg48mh] {
    flex: 0 0 auto; font-size: var(--font-size-sm); font-weight: 400;
    color: var(--text-secondary); font-variant-numeric: tabular-nums;
}

/* „Abgeschlossen“ ist der einzige Zustand, den man beim Überfliegen sucht — er bekommt
   deshalb Farbe, alles andere bleibt ruhig. Erfolgsgrün ist hier semantische Chrome (ein
   Zustand, keine Datenkategorie) und deshalb ein Token, kein Palettenwert. */
.gantt-phase-fertig[b-es1hcg48mh] {
    flex: 0 0 auto; font-size: var(--font-size-sm); font-weight: 600;
    color: var(--color-success);
}
.gantt-label-fertig .gantt-label-text[b-es1hcg48mh] { color: var(--text-secondary); }
.gantt-diamond[b-es1hcg48mh] { fill: var(--color-primary); }
.gantt-diamond.done[b-es1hcg48mh] { fill: var(--text-muted); }
.gantt-lane-bar[b-es1hcg48mh] { fill: var(--surface-active); stroke: var(--border-strong); }
/* Dim-by-default: a fan-out (one predecessor, several parallel successors) turns
   full-strength connectors into criss-cross noise. Selecting a task (or hovering a
   connector) lifts ITS edges to full strength; violated edges stay warning-coloured
   and slightly stronger even dimmed, so problems never hide. */
.gantt-dep[b-es1hcg48mh] { fill: none; stroke: var(--text-secondary); stroke-width: 1.5; opacity: .35; transition: opacity .15s ease, stroke-width .15s ease; }
.gantt-dep.violated[b-es1hcg48mh] { stroke: var(--color-warning); stroke-width: 2; opacity: .55; }
.gantt-dep.emphasized[b-es1hcg48mh], .gantt-dep:hover[b-es1hcg48mh] { opacity: 1; stroke-width: 2.5; }
.gantt-dep-arrow[b-es1hcg48mh] { fill: var(--text-secondary); }
.gantt-dep-arrow-violated[b-es1hcg48mh] { fill: var(--color-warning); }

.gantt-side[b-es1hcg48mh] { width: 320px; flex: none; display: flex; flex-direction: column; gap: var(--space-3); }
.gantt-zoom-label[b-es1hcg48mh], .gantt-status-label[b-es1hcg48mh] { display: flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); }
.gantt-autosave-hint[b-es1hcg48mh] { margin-left: auto; color: var(--text-muted); font-size: var(--font-size-sm); }
.gantt-zoom-label .form-select[b-es1hcg48mh], .gantt-status-label .form-select[b-es1hcg48mh] { width: auto; }
.gantt-section-title[b-es1hcg48mh] {
    font-weight: 600;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
}
.gantt-dep-list[b-es1hcg48mh] { list-style: none; padding: 0; margin: var(--space-2) 0; }
.gantt-dep-list li[b-es1hcg48mh] { display: flex; align-items: center; justify-content: space-between; padding: 2px 0; }
.gantt-farb-row[b-es1hcg48mh] { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.gantt-farb-swatch[b-es1hcg48mh] {
    width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent;
    cursor: pointer; padding: 0;
}
.gantt-farb-swatch.selected[b-es1hcg48mh] { border-color: var(--text-primary); }

/* Der Normalfall steht als erstes und ausgeschrieben da: eine Farbe je Aufgabe von Hand zu
   wählen bezeichnet nichts, deshalb soll „nach Phase“ die bequemste Wahl sein. */
.gantt-farb-auto[b-es1hcg48mh] {
    height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-lg);
    border: 2px solid var(--border-default); background: var(--surface-sunken);
    color: var(--text-secondary); font-size: var(--font-size-sm); cursor: pointer;
}
.gantt-farb-auto.selected[b-es1hcg48mh] { border-color: var(--text-primary); color: var(--text-primary); }

.gantt-anlagen-count[b-es1hcg48mh] { font-size: var(--font-size-sm); font-weight: 400; color: var(--text-secondary); }
.gantt-anlagen-list[b-es1hcg48mh] {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    margin: var(--space-2) 0;
}
.gantt-anlagen-list label[b-es1hcg48mh] { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-anlagen-list input[type='checkbox'][b-es1hcg48mh] { margin-right: var(--space-2); }

.gantt-panel-header[b-es1hcg48mh] { display: flex; align-items: center; justify-content: space-between; }
.gantt-panel-close[b-es1hcg48mh] {
    border: none; background: none; padding: 0 var(--space-1);
    color: var(--text-secondary); cursor: pointer; font-size: var(--font-size-base);
    line-height: 1;
}
.gantt-panel-close:hover[b-es1hcg48mh] { color: var(--text-primary); }
.gantt-panel .form-group[b-es1hcg48mh] { margin-bottom: var(--space-2); }
.gantt-panel-dates[b-es1hcg48mh] { display: flex; gap: var(--space-2); }
.gantt-panel-actions[b-es1hcg48mh] { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
/* Ein <select> schrumpft von sich aus NICHT unter die Breite seiner laengsten Option
   (min-width: auto im Flex-Kontext). Der laengste Aufgabenname sprengte damit die Zeile und
   schob "Hinzufuegen" aus der Seitenleiste heraus — sichtbar abgeschnitten am rechten Rand
   (Bedienerbefund logs/gantt.png). min-width:0 erlaubt das Schrumpfen, wrap faengt den Rest
   ab, wenn die Leiste sehr schmal wird. */
.gantt-dep-add-row[b-es1hcg48mh] { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.gantt-dep-add-row > select[b-es1hcg48mh] { flex: 1 1 8rem; min-width: 0; }
.gantt-dep-add-row > button[b-es1hcg48mh] { flex: 0 0 auto; }

.gantt-ticket-list[b-es1hcg48mh] { list-style: none; padding: 0; margin: var(--space-2) 0; }
.gantt-ticket-list li[b-es1hcg48mh] { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 2px 0; }
.gantt-ticket-meta[b-es1hcg48mh] { color: var(--text-secondary); font-size: var(--font-size-sm); white-space: nowrap; }
.gantt-ticket-hint[b-es1hcg48mh] { color: var(--text-secondary); font-size: var(--font-size-sm); margin: var(--space-2) 0; }
.gantt-ticket-hint-link[b-es1hcg48mh] {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
}
.gantt-ticket-hint-link:hover[b-es1hcg48mh] { color: var(--color-primary-hover); }
/* /Components/Pages/Admin/QHSettingsImport.razor.rz.scp.css */
.stat-card[b-9st6egwtpb] {
        border: 1px solid var(--border-default);
    }
    
    .sticky-top[b-9st6egwtpb] {
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    .card[b-9st6egwtpb] {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }
    
    .card-header[b-9st6egwtpb] {
        font-weight: 600;
    }
/* /Components/Pages/Admin/QHVerwaltung.razor.rz.scp.css */
/* Only page-specific additions not covered by app.css */
    .qh-status-border[b-2fau29pkz8] { border-left: 4px solid transparent; }
    .qh-status-border.qh-ok[b-2fau29pkz8] { border-left-color: var(--success-color); }
    .qh-status-border.qh-warn[b-2fau29pkz8] { border-left-color: var(--warning-color); }
    .qh-status-border.qh-crit[b-2fau29pkz8] { border-left-color: var(--danger-color); }
    .qh-status-border.qh-none[b-2fau29pkz8] { border-left-color: var(--secondary-color); }
    .qh-num[b-2fau29pkz8] { text-align: right; font-variant-numeric: tabular-nums; }
    .qh-mono[b-2fau29pkz8] { font-family: 'Cascadia Code', 'Fira Code', monospace; font-size: 0.85rem; }
    .qh-filter-bar[b-2fau29pkz8] { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
    .qh-filter-bar .search-box[b-2fau29pkz8] { flex: 1; min-width: 200px; max-width: 350px; margin-bottom: 0; }
    .qh-filter-bar .form-group[b-2fau29pkz8] { margin-bottom: 0; }
    .qh-filter-bar select[b-2fau29pkz8] { min-width: 140px; max-width: 200px; }
    .qh-legend[b-2fau29pkz8] { display: flex; gap: 0.75rem; font-size: 0.8rem; margin-left: auto; }
    .qh-legend span[b-2fau29pkz8] { display: flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
    .qh-gap-panel[b-2fau29pkz8] { margin-top: 1rem; }
    .qh-gap-list[b-2fau29pkz8] { display: flex; flex-wrap: wrap; gap: 0.3rem; max-height: 200px; overflow-y: auto; padding: 0.5rem 0; }
    .table th.sortable[b-2fau29pkz8] { cursor: pointer; user-select: none; }
    .table th.sortable:hover[b-2fau29pkz8] { color: var(--text-primary); }
    .dl-progress[b-2fau29pkz8] { margin-top: 1rem; }
    .dl-progress .dl-log[b-2fau29pkz8] { max-height: 400px; overflow-y: auto; font-family: monospace; font-size: 0.8rem; background: var(--bg-color); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 0.75rem; scroll-behavior: smooth; }
    .dl-progress .dl-log-line[b-2fau29pkz8] { padding: 0.1rem 0; border-bottom: 1px solid rgba(0,0,0,0.02); }
    .dl-progress .dl-log-line.ok[b-2fau29pkz8] { color: var(--success-color); }
    .dl-progress .dl-log-line.err[b-2fau29pkz8] { color: var(--danger-color); }
    .dl-progress .dl-log-line.info[b-2fau29pkz8] { color: var(--text-secondary); }
    .dl-stats[b-2fau29pkz8] { display: flex; gap: 1.5rem; margin: 0.75rem 0; font-size: 0.85rem; }
    .dl-stats .stat-val[b-2fau29pkz8] { font-weight: 600; }
/* /Components/Pages/Admin/RollenBindung.razor.rz.scp.css */
.rb-card[b-pvtesibiq9] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.rb-picker[b-pvtesibiq9] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 40rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.rb-head[b-pvtesibiq9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.rb-diff[b-pvtesibiq9] {
    color: var(--color-warning);
}

.rb-head .rb-search[b-pvtesibiq9] {
    width: min(100%, 20rem);
}

.rb-picker + .rb-picker[b-pvtesibiq9] {
    margin-top: 0.75rem;
}
/* /Components/Pages/Admin/SshTerminal.razor.rz.scp.css */
/* Scoped CSS for /admin/ssh/{heizungId}/{deviceType}.
   The page is a flex column that fills the .content area (the parent
   article gets display:flex via the :has(.ssh-terminal-page) rule in
   app.css, mirroring the noVNC layout). The terminal container takes
   all remaining vertical space (flex:1 + min-height:0) so it fits the
   viewport WITHOUT pushing the page into a scroll. No magic
   100vh-minus-Nrem math — the flex chain handles it. */

.ssh-terminal-page[b-f4x9p8r1w3] {
    flex: 1 1 auto;
    min-height: 0;          /* let the flex child shrink below content size */
    display: flex;
    flex-direction: column;
}

/* Single compact header/toolbar row — kept to its natural height so the
   terminal gets the rest. */
.ssh-terminal-header[b-f4x9p8r1w3] {
    flex: 0 0 auto;
}

.ssh-terminal-title[b-f4x9p8r1w3] {
    font-size: 1rem;
    white-space: nowrap;
}

/* Truncate a long controller name instead of letting it wrap the header
   onto a second line. */
.ssh-terminal-name[b-f4x9p8r1w3] {
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ssh-terminal-container[b-f4x9p8r1w3] {
    flex: 1 1 auto;
    min-height: 12rem;      /* floor so it's usable even on short viewports */
    background: #1e1e1e;
    border-radius: 0.375rem;
    padding: 0.5rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    overflow: hidden;       /* xterm.js manages its own internal scroll */
}

/* xterm.js draws into a viewport canvas inside the container — we don't
   override its internal CSS, just give it room. */
/* /Components/Pages/Admin/SteuerungenImport.razor.rz.scp.css */
.import-page[b-4w6ibg89ws] { padding: 1.5rem; }
    .page-header h2[b-4w6ibg89ws] { margin: 0; }
    .page-header .subtitle[b-4w6ibg89ws] { color: var(--text-secondary); margin: 0.25rem 0 1.5rem 0; }
/* /Components/Pages/Admin/StoerungsheaderImport.razor.rz.scp.css */
.preview-row td[b-5i5n51gind] { padding: 0.25rem 0.75rem !important; background: var(--surface-sunken); }
    .preview-container[b-5i5n51gind] { padding: 0.25rem 0; }
    .preview-tags[b-5i5n51gind] { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.25rem; }
    .preview-tag[b-5i5n51gind] { 
        display: inline-block; 
        padding: 0.15rem 0.5rem; 
        background: var(--border-default); 
        border-radius: var(--radius-sm); 
        font-size: 0.75rem; 
        white-space: nowrap;
    }
    .preview-tag strong[b-5i5n51gind] { color: var(--gray-600); margin-right: 0.25rem; }
    .preview-tag.more[b-5i5n51gind] { background: var(--border-default); font-style: italic; }
/* /Components/Pages/Admin/TemperaturRelais.razor.rz.scp.css */
.tr-page[b-61116z2u03] {
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.tr-sub[b-61116z2u03] {
    color: var(--text-secondary);
    max-width: 70ch;
    line-height: 1.5;
}

.tr-sub code[b-61116z2u03] {
    background: var(--surface-sunken);
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
}

.tr-banner[b-61116z2u03] {
    padding: 0.6rem 1rem;
    border-radius: 6px;
    margin: 0.75rem 0;
    border: 1px solid var(--border-default);
}

.tr-banner-ok[b-61116z2u03] {
    background: var(--color-success-10);
    color: var(--text-primary);
}

.tr-banner-err[b-61116z2u03] {
    background: var(--color-danger-10);
    color: var(--text-primary);
}

.tr-actions-top[b-61116z2u03] {
    margin: 1rem 0;
}

.tr-card[b-61116z2u03] {
    background: var(--surface-raised);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.tr-grid[b-61116z2u03] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.9rem;
}

.tr-grid label[b-61116z2u03] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.tr-grid input[b-61116z2u03],
.tr-grid select[b-61116z2u03] {
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--border-default);
    border-radius: 5px;
    background: var(--surface-sunken);
    color: var(--text-primary);
}

.tr-checks[b-61116z2u03] {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.tr-check[b-61116z2u03] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.tr-form-actions[b-61116z2u03] {
    margin-top: 1.25rem;
    display: flex;
    gap: 0.5rem;
}

.tr-table[b-61116z2u03] {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface-raised);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    overflow: hidden;
}

.tr-table th[b-61116z2u03],
.tr-table td[b-61116z2u03] {
    padding: 0.6rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border-default);
    font-size: 0.9rem;
}

.tr-table th[b-61116z2u03] {
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font-weight: 600;
}

.tr-flow[b-61116z2u03] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.tr-arrow[b-61116z2u03] {
    color: var(--color-primary);
    font-weight: 700;
}

.tr-muted[b-61116z2u03] {
    color: var(--text-muted);
}

.tr-fail[b-61116z2u03] {
    color: var(--color-danger);
    font-weight: 600;
    margin-left: 0.35rem;
}

.tr-row-actions[b-61116z2u03] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.tr-danger[b-61116z2u03] {
    color: var(--color-danger);
}

.tr-result-row td[b-61116z2u03] {
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--border-default);
}

.tr-result[b-61116z2u03] {
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.88rem;
    line-height: 1.45;
}

.tr-result.tr-ok[b-61116z2u03] {
    background: var(--color-success-10);
    color: var(--text-primary);
}

.tr-result.tr-skip[b-61116z2u03] {
    background: var(--color-warning-10);
    color: var(--text-primary);
}

.tr-result.tr-err[b-61116z2u03] {
    background: var(--color-danger-10);
    color: var(--text-primary);
}

.tr-empty[b-61116z2u03] {
    color: var(--text-muted);
    padding: 1rem 0;
}
/* /Components/Pages/Admin/VisuEditorWeb.razor.rz.scp.css */
/* Scoped chrome styles for the BETA Web-based Visu Editor.
   Moved out of the inline <style> blocks in VisuEditorWeb.razor and
   tokenised against the central design system (design-tokens/tokens.json
   → wwwroot/css/tokens.generated.css). Only UI chrome is styled here;
   visu-ELEMENT (operator-drawn shape) fill/stroke colours stay literal in
   the colour-input widgets and remain data, not chrome. */

.visu-editor-web[b-92t5rx1mrr] {
    /* Padding removed — the .visu-ill-shell grid fills its viewport slice. */
    padding: 0;
}

/* ── Dark chrome: re-alias the light semantic tokens to the --editor-chrome-* group
      (same approach as the mature editor VisualisierungEditor.razor.css). CSS custom
      properties inherit through the DOM regardless of Blazor scoped-CSS isolation, so
      this one block darkens every panel/toolbar interior that references a semantic
      token — eliminating the "half-dark" state where only the ~60 hand-listed elements
      below were dark. Brand --color-primary + status colours stay put (they must pop). */
.visu-editor-web.visu-ill-shell[b-92t5rx1mrr] {
    /* Full-screen under EditorLayout (no app top-bar to subtract). */
    --topbar-height: 0px;
    height: 100vh;

    --surface-card: var(--editor-chrome-panel);
    --surface-sunken: var(--editor-chrome-rail);
    --surface-workspace: var(--editor-chrome-bg);
    --surface-page: var(--editor-chrome-bg);
    --surface-hover: var(--editor-chrome-raised);
    --surface-raised: var(--editor-chrome-raised);
    --surface-overlay: var(--editor-chrome-panel);
    --surface-elevated: var(--editor-chrome-raised);

    --text-body: var(--editor-chrome-text);
    --text-primary: var(--editor-chrome-text);
    --text-secondary: var(--editor-chrome-text-muted);
    --text-muted: var(--editor-chrome-text-muted);
    --text-link: var(--editor-chrome-accent);

    --border-strong: var(--editor-chrome-border-strong);
    --border-default: var(--editor-chrome-border);
    --border-subtle: var(--editor-chrome-border);
    --border-focus: var(--editor-chrome-accent);

    --color-primary-10: var(--editor-chrome-active);
    --color-primary-light: var(--editor-chrome-active);
    --color-warning-light: var(--editor-chrome-raised);
}

/* ── Centre column: a consolidated toolbar above the canvas (like the mature editor),
      instead of cramming every tool button into the topbar. ── */
.visu-ill-shell .visu-canvas-area.ve-canvas-col[b-92t5rx1mrr] {
    grid-area: canvas;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--editor-chrome-bg);
    position: relative; /* anchor for the dock collapse handle on the canvas edge */
}

/* Dock collapse handle pinned to the canvas edge (production-editor style, R3 #3). */
.visu-editor-web .sidebar-edge-toggle[b-92t5rx1mrr] {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 6;
    width: 18px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--editor-chrome-border-strong);
    border-right: none;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    background: var(--editor-chrome-panel);
    color: var(--editor-chrome-text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
}
.visu-editor-web .sidebar-edge-toggle:hover[b-92t5rx1mrr] {
    background: var(--editor-chrome-active);
    color: var(--editor-chrome-text);
    border-color: var(--editor-chrome-accent);
}
.visu-ill-shell .canvas-toolbar[b-92t5rx1mrr] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--editor-chrome-rail);
    border-bottom: 1px solid var(--editor-chrome-border);
}
/* Each toolbar row is a wrapping flex row. Override the topbar `display:contents` the
   rows used to rely on (they flowed into the topbar's flex) — inside the canvas-toolbar
   each row groups its own clusters. Wrap, never scroll-hide (VisuEditorToolbarConvention). */
.visu-ill-shell .canvas-toolbar .editor-toolbar[b-92t5rx1mrr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-1);
    background: transparent;
    border: none;
}
.visu-ill-shell .ve-canvas-col .vis-canvas[b-92t5rx1mrr] { flex: 1 1 auto; min-width: 0; min-height: 0; }
/* The tool-option group's flex row lives on `.vis-topbar .vis-topbar-group` in the shared
   shell — restore it inside the canvas-toolbar so its two selects sit inline, not stacked. */
.visu-ill-shell .canvas-toolbar .vis-topbar-group[b-92t5rx1mrr] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
/* Keep toolbar controls compact + vertically centred (they were stacking / oversizing). */
.visu-ill-shell .canvas-toolbar .toolbar-group[b-92t5rx1mrr] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.visu-ill-shell .canvas-toolbar .form-select-sm[b-92t5rx1mrr],
.visu-ill-shell .canvas-toolbar .btn-sm[b-92t5rx1mrr] { flex: 0 0 auto; }

.visu-editor-web .badge[b-92t5rx1mrr] {
    font-size: var(--font-size-xs);
    vertical-align: middle;
    margin-left: 0.4em;
}

/* ── Heizung select bar (blue accent) ── */
.editor-heizung-bar[b-92t5rx1mrr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    background: var(--color-primary-light);
    border: 1px solid var(--border-focus);
    border-radius: var(--radius);
    margin-bottom: var(--space-2);
}

/* ── Main toolbar (grey panel chrome) ── */
.editor-toolbar[b-92t5rx1mrr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}

.toolbar-group[b-92t5rx1mrr] {
    display: flex;
    gap: var(--space-1);
    align-items: center;
}

.toolbar-divider[b-92t5rx1mrr] {
    width: 1px;
    align-self: stretch;
    background: var(--border-strong);
    margin: 0 var(--space-1);
}

.toolbar-spacer[b-92t5rx1mrr] {
    flex: 1;
}

/* ── Anordnen toolbar (beige variant) ── */
.editor-toolbar.editor-toolbar-anordnen[b-92t5rx1mrr] {
    background: var(--surface-raised);
    border-color: var(--border-default);
}

.toolbar-section-label[b-92t5rx1mrr] {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    padding-right: var(--space-1);
}

/* ── Tool buttons — rail tools are skinned by the shell's .vis-tool. The JS
   toggles the `active` class (NOT is-active) as the operator switches tools,
   so the active highlight for the rail lives here (see dark-shell section). ── */
.tool-btn .icon[b-92t5rx1mrr] {
    display: inline-block;
    width: 1em;
    text-align: center;
    margin-right: 0.2em;
}

/* ── Property panel (warning-tinted, holds the colour-input widgets) ── */
.editor-property-panel[b-92t5rx1mrr] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    background: var(--color-warning-light);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius);
    margin-bottom: var(--space-2);
    font-size: var(--font-size-sm);
}

/* Colour-input WIDGET chrome only — the value attribute stays literal data. */
.editor-property-panel input[type=color][b-92t5rx1mrr] {
    width: 1.6rem;
    height: 1.4rem;
    vertical-align: middle;
}

.editor-property-panel input[type=number][b-92t5rx1mrr] {
    width: 4rem;
}

.prop-label[b-92t5rx1mrr] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.prop-type[b-92t5rx1mrr] {
    font-weight: 600;
    min-width: 4em;
}

/* ── Stage 4a: per-type inspector sub-blocks (shown by JS per selection type).
   Chrome only; colour/size VALUES stay literal data in the widgets. ── */
.editor-property-panel .prop-group[b-92t5rx1mrr] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.editor-property-panel .prop-divider[b-92t5rx1mrr] {
    width: 1px;
    align-self: stretch;
    background: var(--border-strong);
    margin: 0 var(--space-1);
}

.editor-property-panel .prop-select-sm[b-92t5rx1mrr] {
    font-size: var(--font-size-sm);
    padding: 0.15rem 0.3rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--text-body);
}

.editor-property-panel .prop-value[b-92t5rx1mrr] {
    font-weight: 600;
    color: var(--text-secondary);
}

/* ── Stage 4a: canvas-size / design-preset toolbar controls. ── */
.editor-toolbar .vew-canvas-size[b-92t5rx1mrr] {
    gap: var(--space-1);
}

.editor-toolbar .vew-canvas-custom[b-92t5rx1mrr] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.editor-toolbar .vew-canvas-custom input[type=number][b-92t5rx1mrr] {
    width: 60px;
}

.editor-toolbar .vew-canvas-size-label[b-92t5rx1mrr] {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* ── Stage 3a: Smart-Farbe inspector (shown by JS when a pipe is selected).
   Chrome uses design tokens; the ramp swatch VALUES are data (carve-out). ── */
.editor-smart-color-panel[b-92t5rx1mrr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    margin-bottom: var(--space-2);
    font-size: var(--font-size-sm);
}

.editor-smart-color-panel .scp-toggle[b-92t5rx1mrr],
.editor-smart-color-panel .scp-flip[b-92t5rx1mrr] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-weight: 600;
}

.editor-smart-color-panel .scp-flip[b-92t5rx1mrr] {
    font-weight: 400;
}

.editor-smart-color-panel .scp-body[b-92t5rx1mrr] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-2) var(--space-4);
}

.editor-smart-color-panel .scp-field[b-92t5rx1mrr] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.editor-smart-color-panel .scp-field-sm input[b-92t5rx1mrr] {
    width: 5rem;
}

.editor-smart-color-panel .scp-ramp[b-92t5rx1mrr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.editor-smart-color-panel .scp-swatch[b-92t5rx1mrr] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* Colour-input WIDGET chrome only — the value attribute stays literal data. */
.editor-smart-color-panel input[type=color][b-92t5rx1mrr] {
    width: 1.6rem;
    height: 1.4rem;
    vertical-align: middle;
}

.editor-smart-color-panel .scp-midtemp[b-92t5rx1mrr] {
    width: 4rem;
}

.editor-smart-color-panel .scp-preview[b-92t5rx1mrr] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* The preview swatch background is set inline by JS to the live ramp gradient
   (data-encoding palette). The border is chrome → token. */
.editor-smart-color-panel .scp-preview-swatch[b-92t5rx1mrr] {
    width: 8rem;
    height: 1.2rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
}

/* ── Stage 3b: auto-detect + combine panel (⚡ recover baked-in pipes). Chrome
   only; recovered pipe ramp colours are data, applied on the canvas by JS. ── */
.editor-pipe-detect-panel[b-92t5rx1mrr] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    margin-bottom: var(--space-2);
    font-size: var(--font-size-sm);
}

.editor-pipe-detect-panel .pipe-detect-head[b-92t5rx1mrr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.editor-pipe-detect-panel .pipe-detect-hint[b-92t5rx1mrr] {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    flex: 1;
    min-width: 12rem;
}

.editor-pipe-detect-panel .pipe-detect-secondary[b-92t5rx1mrr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    cursor: pointer;
}

.editor-pipe-detect-panel .pipe-detect-result[b-92t5rx1mrr] {
    background: var(--surface-card);
    border: 1px solid var(--border-focus);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
}

.editor-pipe-detect-panel .pipe-detect-skipped[b-92t5rx1mrr],
.editor-pipe-detect-panel .pipe-detect-unbound[b-92t5rx1mrr],
.editor-pipe-detect-panel .pipe-detect-note[b-92t5rx1mrr] {
    color: var(--text-secondary);
}

.editor-pipe-detect-panel .pipe-detect-actions[b-92t5rx1mrr] {
    display: flex;
    gap: var(--space-2);
}

/* ── Page tabs (grey panel chrome) ── */
.editor-page-tabs[b-92t5rx1mrr] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}

.page-tab-list[b-92t5rx1mrr] {
    display: flex;
    gap: var(--space-1);
    flex: 1;
    flex-wrap: wrap;
}

.page-tab[b-92t5rx1mrr] {
    background: var(--surface-card);
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    cursor: pointer;
    padding: 0.2rem 0.7rem;
    font-size: var(--font-size-sm);
}

.page-tab:hover[b-92t5rx1mrr] {
    background: var(--surface-hover);
}

.page-tab.active[b-92t5rx1mrr] {
    background: var(--color-primary);
    color: var(--surface-card);
    border-color: var(--color-primary);
}

/* ── Canvas wrapper (the artboard sits here) ──
   Darkest workspace shade so the WHITE Fabric artboard pops against the chrome (the panels
   are one step lighter). No max-height — the .vis-canvas-scroll grid cell owns the scroll;
   the old calc(100vh - 380px) assumed the fat topbar that's now a slim canvas-toolbar. */
.editor-canvas-wrapper[b-92t5rx1mrr] {
    border: 1px solid var(--editor-chrome-border);
    background: var(--editor-chrome-bg);
}
/* NOTE: the Fabric lower/upper canvases are created in JS (no Blazor scope attribute), so a
   scoped rule here can NOT reach them. Their background override lives in the non-scoped
   visu-editor-shell.css instead. */

.editor-canvas-wrapper canvas[b-92t5rx1mrr] {
    display: block;
}

.editor-status[b-92t5rx1mrr] {
    padding: var(--space-2);
    font-size: var(--font-size-sm);
}

/* ── Value-placeholder sidebar (warning-tinted) ── */
.editor-value-sidebar[b-92t5rx1mrr] {
    position: relative;
    background: var(--color-warning-light);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    align-items: center;
}

.value-sidebar-heading[b-92t5rx1mrr] {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    flex: 0 0 100%;
}

.value-sidebar-field[b-92t5rx1mrr] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: var(--font-size-sm);
    margin-bottom: 0;
}

.value-sidebar-field input[b-92t5rx1mrr] {
    min-width: 9rem;
}

.value-sidebar-field select[b-92t5rx1mrr] {
    min-width: 9rem;
}

/* Textstil-Zeile: Groesse + Farbe nebeneinander, damit die Seitenleiste nicht in die
   Hoehe waechst (sie liegt neben der Zeichenflaeche). */
.value-sidebar-row[b-92t5rx1mrr] {
    display: flex;
    gap: var(--space-2);
    align-items: flex-end;
}

.value-sidebar-field-grow[b-92t5rx1mrr] {
    flex: 1 1 auto;
}

.value-sidebar-field-grow input[b-92t5rx1mrr] {
    min-width: 0;
}

.value-sidebar-checks[b-92t5rx1mrr] {
    gap: var(--space-3);
    align-items: center;
}

.value-sidebar-check[b-92t5rx1mrr] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--font-size-sm);
    margin-bottom: 0;
}

.value-sidebar-hint[b-92t5rx1mrr] {
    flex: 1 1 100%;
}

/* ── P2.7: unsaved-changes badge in the topbar ── */
.vew-unsaved[b-92t5rx1mrr] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem var(--space-2);
    border-radius: var(--radius);
    background: var(--color-warning-light);
    color: var(--color-warning);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

/* ── P2.6: page tabs + the delivered-values table in the test preview ── */
.vew-test-pages[b-92t5rx1mrr] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
}

.vew-test-values[b-92t5rx1mrr] {
    margin-top: var(--space-2);
}

.vew-test-values > summary[b-92t5rx1mrr] {
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* The table can be long; it scrolls inside the modal rather than growing it. */
.vew-test-values-table[b-92t5rx1mrr] {
    display: block;
    max-height: 14rem;
    overflow-y: auto;
    margin-top: var(--space-2);
    margin-bottom: 0;
    font-size: var(--font-size-sm);
}

/* ── P2.5: search + count above the Ebenen list ── */
.vew-layers-head[b-92t5rx1mrr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.vew-layers-head input[b-92t5rx1mrr] {
    flex: 1 1 auto;
    min-width: 0;
}

.vew-layers-count[b-92t5rx1mrr] {
    flex-shrink: 0;
    white-space: nowrap;
}

.vis-layer-empty[b-92t5rx1mrr] {
    margin: 0;
}

/* ── P2.4: pipe overview inside the Smart-Farbe panel ── */
.editor-smart-pipe-list[b-92t5rx1mrr] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: var(--space-2);
}

.editor-smart-pipe-list .scp-unit[b-92t5rx1mrr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.2rem var(--space-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    background: var(--surface-card);
}

.editor-smart-pipe-list .scp-unit.is-on[b-92t5rx1mrr] {
    border-left: 3px solid var(--color-primary);
}

.editor-smart-pipe-list .scp-unit.is-active[b-92t5rx1mrr] {
    background: var(--surface-sunken);
    border-color: var(--color-primary);
}

/* The name is a button so keyboard users can reach the select-on-canvas action;
   it must not look like one. */
.editor-smart-pipe-list .scp-unit-name[b-92t5rx1mrr] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    font-size: var(--font-size-sm);
    color: var(--text-body);
    cursor: pointer;
}

.editor-smart-pipe-list .scp-unit-meta[b-92t5rx1mrr] {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
}

.editor-smart-pipe-list .scp-unit-split[b-92t5rx1mrr] {
    flex-shrink: 0;
}

.editor-smart-pipe-list .scp-list-empty[b-92t5rx1mrr] {
    margin: 0;
}

/* ── Stage 1: VCO channel-catalogue sidebar (parity with the mature editor's
   "Werte" tab). Chrome only; channel Kanal/Bezeichnung are data, not colours. ── */
.editor-channel-sidebar[b-92t5rx1mrr] {
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
    display: flex;
    flex-direction: column;
    max-height: 320px;
}

.channel-sidebar-head[b-92t5rx1mrr] {
    flex-shrink: 0;
}

.channel-sidebar-heading[b-92t5rx1mrr] {
    margin: 0 0 var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Stage 4b — .p script load control (mirrors the bitmap-upload chrome). */
.channel-script-load[b-92t5rx1mrr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
}

.channel-script-input[b-92t5rx1mrr] {
    display: none;
}

/* The <InputFile> renders its <input> in a CHILD component — it never gets this file's
   scope attribute, so the plain rule above misses it and the raw "Datei auswählen"
   control leaked into the panel (wbeditor.png R3 #4). ::deep reaches across.
   Since R5 the upload lives in the tool rail. */
.vis-rail[b-92t5rx1mrr]  .channel-script-input {
    display: none;
}

/* Script-load rail label (R5 #1): styled like a rail tool; the disabled state must be
   VISIBLE (the disabled attribute sits on the hidden input, invisible on its own). */
.vew-rail-script[b-92t5rx1mrr] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    cursor: pointer;
}
.vis-tool.is-disabled[b-92t5rx1mrr] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.channel-script-label[b-92t5rx1mrr] {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    background: var(--surface-sunken);
    border: 1px solid var(--border-strong);
    color: var(--text-body);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.channel-script-label:hover[b-92t5rx1mrr] {
    border-color: var(--border-focus);
}


.channel-script-info[b-92t5rx1mrr] {
    font-size: var(--font-size-xs);
    color: var(--color-success);
}

.editor-channel-sidebar .search-input[b-92t5rx1mrr] {
    width: 100%;
    padding: 0.4rem 0.5rem;
    background: var(--surface-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    color: var(--text-body);
    font-size: var(--font-size-sm);
    margin-bottom: 0.5rem;
    flex-shrink: 0;
}

.editor-channel-sidebar .search-input:focus[b-92t5rx1mrr] {
    outline: none;
    border-color: var(--border-focus);
}

.editor-channel-sidebar .channel-count[b-92t5rx1mrr] {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    margin-bottom: 0.5rem;
    flex-shrink: 0;
}

.editor-channel-sidebar .empty-state[b-92t5rx1mrr] {
    text-align: center;
    padding: var(--space-3);
    color: var(--text-secondary);
}

.editor-channel-sidebar .empty-state .hint[b-92t5rx1mrr] {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.editor-channel-sidebar .channel-list[b-92t5rx1mrr] {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    overflow-y: auto;
}

.editor-channel-sidebar .channel-item[b-92t5rx1mrr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.5rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    margin-bottom: 0.25rem;
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text-body);
}

.editor-channel-sidebar .channel-item:hover[b-92t5rx1mrr] {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.editor-channel-sidebar .channel-item.is-bool[b-92t5rx1mrr] {
    border-left: 3px solid var(--color-primary);
}

.editor-channel-sidebar .channel-item.is-used[b-92t5rx1mrr] {
    background: var(--surface-sunken);
    border-color: var(--border-default);
    border-left: 3px solid var(--color-primary);
    cursor: pointer;
}

/* Marks the channel as already in use -- an information, not a prohibition (P2.3).
   It used to carry cursor:not-allowed plus a struck-through key, which announced a
   lock that the editor no longer applies. Mirrors the production editor. */
.editor-channel-sidebar .channel-item.is-used .channel-key[b-92t5rx1mrr],
.editor-channel-sidebar .channel-item.is-used .channel-name[b-92t5rx1mrr] {
    color: var(--color-danger);
}

.editor-channel-sidebar .channel-key[b-92t5rx1mrr] {
    color: var(--text-link);
    font-family: monospace;
    font-weight: bold;
}

.editor-channel-sidebar .channel-name[b-92t5rx1mrr] {
    color: var(--text-body);
    flex: 1;
}

.editor-channel-sidebar .channel-unit[b-92t5rx1mrr] {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
}

.editor-channel-sidebar .used-indicator[b-92t5rx1mrr] {
    font-size: var(--font-size-xs);
    flex-shrink: 0;
}

.editor-channel-sidebar .bool-indicator[b-92t5rx1mrr] {
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    margin-right: 0.25rem;
}

/* ── Stage 2: per-page bitmap-background sidebar (shares the mature editor's
   VisualisierungBitmap store). Chrome only; the bitmap image itself is data. ── */
.editor-bitmap-sidebar[b-92t5rx1mrr] {
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 360px;
    overflow-y: auto;
}

.bitmap-sidebar-heading[b-92t5rx1mrr] {
    margin: 0 0 var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.bitmap-sidebar-hint[b-92t5rx1mrr] {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.editor-bitmap-sidebar .empty-state[b-92t5rx1mrr] {
    text-align: center;
    padding: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.bitmap-upload[b-92t5rx1mrr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.bitmap-upload-input[b-92t5rx1mrr] {
    display: none;
}

.bitmap-upload-label[b-92t5rx1mrr] {
    display: inline-block;
    padding: 0.35rem 0.7rem;
    background: var(--color-primary);
    color: var(--text-on-primary);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.bitmap-upload-label:hover[b-92t5rx1mrr] {
    filter: brightness(0.95);
}

.bitmap-upload-info[b-92t5rx1mrr] {
    font-size: var(--font-size-xs);
    color: var(--color-success);
}

.current-bg[b-92t5rx1mrr] {
    background: var(--surface-card);
    border: 1px solid var(--border-focus);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.current-bg-row[b-92t5rx1mrr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.current-bg-thumb[b-92t5rx1mrr],
.bitmap-thumb[b-92t5rx1mrr] {
    width: 48px;
    height: 36px;
    object-fit: cover;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    flex-shrink: 0;
}

.current-bg-meta[b-92t5rx1mrr] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.current-bg-name[b-92t5rx1mrr] {
    font-size: var(--font-size-sm);
    color: var(--text-body);
    font-weight: var(--font-weight-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.current-bg-size[b-92t5rx1mrr] {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.current-bg-scale[b-92t5rx1mrr] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.current-bg-scale input[type=range][b-92t5rx1mrr] {
    width: 100%;
}

.bitmap-count[b-92t5rx1mrr] {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.bitmap-list[b-92t5rx1mrr] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.bitmap-item[b-92t5rx1mrr] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.3rem 0.4rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
}

.bitmap-item.is-current[b-92t5rx1mrr] {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.bitmap-item .bitmap-name[b-92t5rx1mrr] {
    flex: 1;
    min-width: 0;
    font-size: var(--font-size-sm);
    color: var(--text-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bitmap-item .bitmap-actions[b-92t5rx1mrr] {
    display: flex;
    gap: 0.2rem;
    flex-shrink: 0;
}

/* ── Publish-to-production button (Stage 0: promote LayoutJsonWeb → LayoutJson) ── */
.vew-publish-btn[b-92t5rx1mrr] {
    background: var(--color-success);
    color: var(--text-on-primary);
    border: 1px solid var(--color-success);
    border-radius: var(--radius);
    font-weight: var(--font-weight-semibold);
}

.vew-publish-btn:hover:not(:disabled)[b-92t5rx1mrr] {
    filter: brightness(0.93);
    color: var(--text-on-primary);
}

.vew-publish-btn:disabled[b-92t5rx1mrr] {
    opacity: 0.6;
}

/* ── ADR-0102 Stage 3: Komponenten (reusable element library) sidebar ── */
.editor-component-sidebar[b-92t5rx1mrr] {
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
    display: flex;
    flex-direction: column;
    max-height: 360px;
    overflow-y: auto;
}

.component-sidebar-head[b-92t5rx1mrr] {
    flex-shrink: 0;
}

.component-sidebar-heading[b-92t5rx1mrr] {
    margin: 0 0 var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.component-sidebar-hint[b-92t5rx1mrr] {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.component-group-title[b-92t5rx1mrr] {
    margin: var(--space-2) 0 var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.editor-component-sidebar .component-palette[b-92t5rx1mrr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 0.4rem;
}

.editor-component-sidebar .component-palette-item[b-92t5rx1mrr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.45rem 0.25rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-body);
    cursor: pointer;
    text-align: center;
}

.editor-component-sidebar .component-palette-item:hover[b-92t5rx1mrr] {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.editor-component-sidebar .component-palette-item.active[b-92t5rx1mrr] {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--ekh-cyan-15);
}

.editor-component-sidebar .component-palette-icon[b-92t5rx1mrr] {
    font-size: 1.4rem;
    line-height: 1;
}

.editor-component-sidebar .component-palette-name[b-92t5rx1mrr] {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    word-break: break-word;
}

/* ADR-0102 follow-up: per-item edit / delete affordances. The wrapper is the
   grid cell; the action row overlays the top-right and appears on hover/focus. */
.editor-component-sidebar .component-palette-item-wrap[b-92t5rx1mrr] {
    position: relative;
    display: flex;
}

.editor-component-sidebar .component-palette-item-wrap .component-palette-item[b-92t5rx1mrr] {
    flex: 1 1 auto;
    width: 100%;
}

.editor-component-sidebar .component-palette-item-actions[b-92t5rx1mrr] {
    position: absolute;
    top: 0.15rem;
    right: 0.15rem;
    display: flex;
    gap: 0.15rem;
    opacity: 0;
    transition: opacity var(--duration-fast) ease;
}

.editor-component-sidebar .component-palette-item-wrap:hover .component-palette-item-actions[b-92t5rx1mrr],
.editor-component-sidebar .component-palette-item-wrap:focus-within .component-palette-item-actions[b-92t5rx1mrr] {
    opacity: 1;
}

.editor-component-sidebar .component-item-action[b-92t5rx1mrr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    padding: 0;
    font-size: var(--font-size-xs);
    line-height: 1;
    color: var(--text-secondary);
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.editor-component-sidebar .component-item-action:hover[b-92t5rx1mrr] {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.editor-component-sidebar .component-item-action-danger:hover[b-92t5rx1mrr] {
    color: var(--color-danger);
    border-color: var(--color-danger);
}

/* ══════════════════════════════════════════════════════════════════════════
   Phase 1a — Illustrator dark-shell integration (ADR-0108)

   The widgets above keep their light-theme scoped rules for LAYOUT; the rules
   below re-skin their CHROME onto the --editor-chrome-* token group so they sit
   legibly on the dark .visu-ill-shell. Element / ramp colours (input[type=color]
   values, smart-color swatches, pipe/puffer ramps) stay literal — data-encoding
   carve-out, never tokenised.
   ══════════════════════════════════════════════════════════════════════════ */

/* Rail tool active-state (JS toggles `.active`, not `.is-active`). */
.visu-ill-shell .vis-tool.active[b-92t5rx1mrr] {
    background: var(--editor-chrome-active);
    border-color: var(--editor-chrome-accent);
    color: var(--editor-chrome-text);
}

/* The two former toolbar rows dissolve their own box (display:contents) so their
   groups flow as direct topbar flex items. */
.visu-ill-shell .editor-toolbar[b-92t5rx1mrr] { display: contents; }
.visu-ill-shell .toolbar-group[b-92t5rx1mrr] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.visu-ill-shell .toolbar-divider[b-92t5rx1mrr] {
    width: 1px;
    align-self: stretch;
    background: var(--editor-chrome-border);
    margin: 0 var(--space-1);
}
.visu-ill-shell .toolbar-spacer[b-92t5rx1mrr] { display: none; }
.visu-ill-shell .toolbar-section-label[b-92t5rx1mrr] {
    color: var(--editor-chrome-text-muted);
    font-weight: 600;
    padding-right: var(--space-1);
}
.visu-ill-shell .vew-canvas-size-label[b-92t5rx1mrr] { color: var(--editor-chrome-text-muted); }

/* Heizung group — drop the old light-blue panel; the shell topbar-group frames it. */
.visu-ill-shell .editor-heizung-bar[b-92t5rx1mrr] {
    background: transparent;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

/* Outline Bootstrap buttons legible on dark; solid brand fills (btn-primary /
   btn-success / vew-publish-btn) keep their colour. */
.visu-ill-shell .btn-outline-secondary[b-92t5rx1mrr],
.visu-ill-shell .btn-outline-primary[b-92t5rx1mrr],
.visu-ill-shell .btn-outline-success[b-92t5rx1mrr],
.visu-ill-shell .btn-outline-danger[b-92t5rx1mrr] {
    background: var(--editor-chrome-raised);
    border-color: var(--editor-chrome-border);
    color: var(--editor-chrome-text);
}
.visu-ill-shell .btn-outline-secondary:hover:not(:disabled)[b-92t5rx1mrr],
.visu-ill-shell .btn-outline-primary:hover:not(:disabled)[b-92t5rx1mrr],
.visu-ill-shell .btn-outline-success:hover:not(:disabled)[b-92t5rx1mrr],
.visu-ill-shell .btn-outline-danger:hover:not(:disabled)[b-92t5rx1mrr] {
    background: var(--editor-chrome-active);
    border-color: var(--editor-chrome-border-strong);
    color: var(--editor-chrome-text);
}
.visu-ill-shell #vewValuePlaceBtn[b-92t5rx1mrr] {
    background: var(--editor-chrome-raised);
    border: 1px solid var(--editor-chrome-border);
    color: var(--editor-chrome-text);
    border-radius: var(--radius);
    padding: var(--space-1) var(--space-2);
}
.visu-ill-shell #vewValuePlaceBtn:hover[b-92t5rx1mrr] { background: var(--editor-chrome-active); }

/* Form controls / search inputs in the chrome. Colour swatches stay native. */
.visu-ill-shell .form-select[b-92t5rx1mrr],
.visu-ill-shell .form-control[b-92t5rx1mrr],
.visu-ill-shell .search-input[b-92t5rx1mrr],
.visu-ill-shell input[type=number][b-92t5rx1mrr],
.visu-ill-shell input[type=text][b-92t5rx1mrr] {
    background: var(--editor-chrome-bg);
    border-color: var(--editor-chrome-border);
    color: var(--editor-chrome-text);
}
.visu-ill-shell .form-select:focus[b-92t5rx1mrr],
.visu-ill-shell .form-control:focus[b-92t5rx1mrr],
.visu-ill-shell .search-input:focus[b-92t5rx1mrr] {
    background: var(--editor-chrome-bg);
    border-color: var(--editor-chrome-accent);
    color: var(--editor-chrome-text);
    box-shadow: none;
}
.visu-ill-shell .form-check-label[b-92t5rx1mrr],
.visu-ill-shell .form-label[b-92t5rx1mrr] { color: var(--editor-chrome-text); }
.visu-ill-shell .text-muted[b-92t5rx1mrr] { color: var(--editor-chrome-text-muted) !important; }

/* Dock panels: neutralise each moved widget's own frame so the .vis-panel-body
   owns the surface. */
.visu-ill-shell .editor-property-panel[b-92t5rx1mrr],
.visu-ill-shell .editor-value-sidebar[b-92t5rx1mrr],
.visu-ill-shell .editor-smart-color-panel[b-92t5rx1mrr],
.visu-ill-shell .editor-pipe-detect-panel[b-92t5rx1mrr],
.visu-ill-shell .editor-channel-sidebar[b-92t5rx1mrr],
.visu-ill-shell .editor-bitmap-sidebar[b-92t5rx1mrr],
.visu-ill-shell .editor-component-sidebar[b-92t5rx1mrr],
.visu-ill-shell .editor-page-tabs[b-92t5rx1mrr] {
    background: transparent;
    border: none;
    border-radius: 0;
    margin: 0;
    max-height: none;
    color: var(--editor-chrome-text);
}
.visu-ill-shell .editor-property-panel[b-92t5rx1mrr] { flex-wrap: wrap; padding: 0; }

/* Secondary / hint text → readable muted on dark. */
.visu-ill-shell .prop-value[b-92t5rx1mrr],
.visu-ill-shell .channel-sidebar-heading[b-92t5rx1mrr],
.visu-ill-shell .channel-count[b-92t5rx1mrr],
.visu-ill-shell .channel-unit[b-92t5rx1mrr],
.visu-ill-shell .bitmap-sidebar-heading[b-92t5rx1mrr],
.visu-ill-shell .bitmap-sidebar-hint[b-92t5rx1mrr],
.visu-ill-shell .current-bg-size[b-92t5rx1mrr],
.visu-ill-shell .current-bg-scale[b-92t5rx1mrr],
.visu-ill-shell .bitmap-count[b-92t5rx1mrr],
.visu-ill-shell .component-sidebar-heading[b-92t5rx1mrr],
.visu-ill-shell .component-sidebar-hint[b-92t5rx1mrr],
.visu-ill-shell .component-group-title[b-92t5rx1mrr],
.visu-ill-shell .component-palette-name[b-92t5rx1mrr],
.visu-ill-shell .value-sidebar-heading[b-92t5rx1mrr],
.visu-ill-shell .value-sidebar-hint[b-92t5rx1mrr],
.visu-ill-shell .pipe-detect-hint[b-92t5rx1mrr],
.visu-ill-shell .pipe-detect-skipped[b-92t5rx1mrr],
.visu-ill-shell .pipe-detect-unbound[b-92t5rx1mrr],
.visu-ill-shell .pipe-detect-note[b-92t5rx1mrr],
.visu-ill-shell .empty-state[b-92t5rx1mrr],
.visu-ill-shell .empty-state .hint[b-92t5rx1mrr] {
    color: var(--editor-chrome-text-muted);
}
.visu-ill-shell .channel-name[b-92t5rx1mrr],
.visu-ill-shell .current-bg-name[b-92t5rx1mrr],
.visu-ill-shell .bitmap-name[b-92t5rx1mrr],
.visu-ill-shell .prop-type[b-92t5rx1mrr],
.visu-ill-shell .prop-label[b-92t5rx1mrr] { color: var(--editor-chrome-text); }

/* Nested "card" surfaces → dark raised. */
.visu-ill-shell .channel-item[b-92t5rx1mrr],
.visu-ill-shell .bitmap-item[b-92t5rx1mrr],
.visu-ill-shell .editor-component-sidebar .component-palette-item[b-92t5rx1mrr],
.visu-ill-shell .current-bg[b-92t5rx1mrr],
.visu-ill-shell .pipe-detect-result[b-92t5rx1mrr],
.visu-ill-shell .channel-script-label[b-92t5rx1mrr],
.visu-ill-shell .component-item-action[b-92t5rx1mrr],
.visu-ill-shell .prop-select-sm[b-92t5rx1mrr],
.visu-ill-shell .page-tab[b-92t5rx1mrr] {
    background: var(--editor-chrome-raised);
    border-color: var(--editor-chrome-border);
    color: var(--editor-chrome-text);
}
.visu-ill-shell .channel-item:hover[b-92t5rx1mrr],
.visu-ill-shell .editor-component-sidebar .component-palette-item:hover[b-92t5rx1mrr] {
    background: var(--editor-chrome-active);
    border-color: var(--editor-chrome-accent);
}
.visu-ill-shell .page-tab:hover[b-92t5rx1mrr] { background: var(--editor-chrome-active); }
.visu-ill-shell .page-tab.active[b-92t5rx1mrr] {
    background: var(--editor-chrome-active);
    border-color: var(--editor-chrome-accent);
    color: var(--editor-chrome-text);
}
.visu-ill-shell .channel-item.is-used[b-92t5rx1mrr] {
    background: var(--editor-chrome-panel);
}

/* Canvas artboard sits inside the shell scroll — drop the old wrapper frame. */
.visu-ill-shell .editor-canvas-wrapper[b-92t5rx1mrr] {
    border: none;
    background: transparent;
    overflow: visible;
    max-height: none;
    margin: 0 auto;
    width: max-content;
}

/* Page-tabs row lives in the status bar now. */
.visu-ill-shell .editor-page-tabs[b-92t5rx1mrr] {
    padding: 0;
    flex: 0 1 auto;
    gap: var(--space-1);
}
.visu-ill-shell .editor-page-tabs .page-tab-list[b-92t5rx1mrr] { flex: 0 1 auto; }

/* ── Compact Live-Vorschau toggle (inline in the topbar, was a full row) ── */
.vew-live-compact[b-92t5rx1mrr] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--editor-chrome-text-muted);
    white-space: nowrap;
}
.vew-live-compact input[b-92t5rx1mrr] { margin: 0; }

/* ── Right-aligned topbar action cluster (production-editor style) ── */
.vew-topbar-actions[b-92t5rx1mrr] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
}

/* ── Modals: import result + Test preview ──
   Rendered OUTSIDE .visu-editor-web (page-level overlays), styled from the --editor-chrome-*
   group so they match the dark editor. */
.vew-modal-overlay[b-92t5rx1mrr] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
}
.vew-modal[b-92t5rx1mrr] {
    background: var(--editor-chrome-panel);
    color: var(--editor-chrome-text);
    border: 1px solid var(--editor-chrome-border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    width: min(560px, 92vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.vew-modal.vew-modal-lg[b-92t5rx1mrr] { width: min(1200px, 95vw); }
.vew-modal-header[b-92t5rx1mrr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    background: var(--editor-chrome-rail);
    border-bottom: 1px solid var(--editor-chrome-border);
}
.vew-modal-header h3[b-92t5rx1mrr] { margin: 0; font-size: var(--font-size-base); color: var(--editor-chrome-text); }
.vew-modal-close[b-92t5rx1mrr] {
    background: none;
    border: none;
    color: var(--editor-chrome-text-muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 var(--space-1);
}
.vew-modal-close:hover[b-92t5rx1mrr] { color: var(--editor-chrome-text); }
.vew-modal-body[b-92t5rx1mrr] { padding: var(--space-3); overflow: auto; }
.vew-modal-body .text-muted[b-92t5rx1mrr] { color: var(--editor-chrome-text-muted) !important; }
.vew-modal-footer[b-92t5rx1mrr] {
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--editor-chrome-border);
    text-align: right;
}
.vew-import-warn[b-92t5rx1mrr] {
    margin-top: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--editor-chrome-border);
    border-radius: var(--radius);
    background: var(--editor-chrome-raised);
}
.vew-import-warn ul[b-92t5rx1mrr] { margin: var(--space-1) 0; padding-left: 1.2rem; }
.vew-test-canvas-wrap[b-92t5rx1mrr] {
    margin-top: var(--space-2);
    background: var(--editor-chrome-bg);
    padding: var(--space-2);
    border-radius: var(--radius);
    display: flex;
    justify-content: center;
}

/* Bool-symbol picker modal (package #3, mirrors the production editor's modal). */
.vew-bool-category[b-92t5rx1mrr] { margin-bottom: 0.6rem; }
.vew-bool-category-title[b-92t5rx1mrr] { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.25rem; }
.vew-bool-options[b-92t5rx1mrr] { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.vew-bool-option[b-92t5rx1mrr] {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.85rem;
}
.vew-bool-option.selected[b-92t5rx1mrr] {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--text-on-primary);
}
.vew-bool-lowactive[b-92t5rx1mrr] { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.75rem; font-size: 0.85rem; }

/* .p reimport conflict list (package #3d). */
.channel-conflicts[b-92t5rx1mrr] {
    margin: 0.4rem 0;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    font-size: 0.8rem;
}
.channel-conflicts ul[b-92t5rx1mrr] { margin: 0.25rem 0 0; padding-left: 1.1rem; }

/* Component-first channel picker (package #3e, ADR-0127). */
.vew-complink[b-92t5rx1mrr] {
    margin-top: 0.5rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.vew-complink-title[b-92t5rx1mrr] { font-weight: 600; color: var(--text-secondary); }

/* The picker sits at the TOP of the dock, above "Eigenschaften": after clicking a
   component the channel list is the first thing in reach. Previously it was the LAST
   block of the properties panel, so on a symbol you had to scroll past every inspector
   to reach it. As a direct dock child it needs its own horizontal margin. */
.visu-editor-web .vis-dock > .vew-complink[b-92t5rx1mrr] {
    margin: 0.5rem 0.5rem 0.25rem;
    border-left: 3px solid var(--color-primary);
}

/* Autoerkennung + Hintergrund toolbox view (2026-08-20). */
.vew-detect-panel[b-92t5rx1mrr],
.vew-bg-panel[b-92t5rx1mrr] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.85rem;
}
.vew-detect-opt[b-92t5rx1mrr] { display: flex; align-items: center; gap: 0.4rem; }
.vew-detect-review[b-92t5rx1mrr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
}

/* Puffer property panel (Stage C) — restored 2026-08-21. */
.vew-puffer-row[b-92t5rx1mrr] { display: flex; gap: 0.4rem; }
.vew-puffer-row > *[b-92t5rx1mrr] { flex: 1 1 0; min-width: 0; }
.vew-puffer-preview-row[b-92t5rx1mrr] { display: flex; align-items: center; gap: 0.5rem; }
.vew-puffer-preview[b-92t5rx1mrr] {
    width: 26px;
    height: 60px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xs);
    background: var(--surface-sunken);
}

/* Global temp-ramp modal (package #5). */
.vew-tempramp-body[b-92t5rx1mrr] { display: flex; flex-direction: column; gap: 0.6rem; }
.vew-tempramp-grid[b-92t5rx1mrr] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 0.8rem; }
.vew-tempramp-grid label[b-92t5rx1mrr] { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; }
.vew-tempramp-mid[b-92t5rx1mrr] { grid-column: 1 / -1; }
.vew-temp-ramp-panel[b-92t5rx1mrr] { display: flex; flex-direction: column; gap: 0.4rem; }

/* ── Layout rework (wbeditor.png feedback) ─────────────────────────────────
   Left component-library column: the shared shell grid is (rail|canvas|dock);
   this page adds a "left" column scoped HERE so the production editor's shell
   stays untouched. The library is always visible instead of a collapsed
   bottom-of-dock panel. */
.visu-editor-web.visu-ill-shell[b-92t5rx1mrr] {
    grid-template-columns: auto 230px 1fr auto;
    grid-template-areas:
        "topbar topbar topbar topbar"
        "rail   left   canvas dock"
        "status status status status";
}
.visu-editor-web .vis-left[b-92t5rx1mrr] {
    grid-area: left;
    overflow-y: auto;
    min-height: 0;
    background: var(--editor-chrome-rail);
    border-right: 1px solid var(--editor-chrome-border);
    padding: var(--space-2);
}
/* In the left column the sidebars own the full height (were capped in the dock). */
.visu-editor-web .vis-left .editor-component-sidebar[b-92t5rx1mrr],
.visu-editor-web .vis-left .editor-channel-sidebar[b-92t5rx1mrr],
.visu-editor-web .vis-left .editor-bitmap-sidebar[b-92t5rx1mrr] {
    max-height: none;
    height: 100%;
    margin-bottom: 0;
    border: none;
    background: transparent;
    padding: 0;
}

/* ── R6: production-style toolbox — tab bar + panes (Werte | Komponenten | Bitmaps).
   Inactive panes stay in the DOM (JS wiring + channel list live there), CSS hides them. */
.visu-editor-web .vis-left[b-92t5rx1mrr] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.vew-toolbox-tabs[b-92t5rx1mrr] {
    display: flex;
    gap: 2px;
    flex: 0 0 auto;
    margin-bottom: var(--space-2);
    border-bottom: 1px solid var(--editor-chrome-border-strong);
}
.vew-tab[b-92t5rx1mrr] {
    flex: 1 1 0;
    padding: 0.35rem 0.2rem;
    font-size: var(--font-size-xs);
    background: var(--editor-chrome-raised);
    color: var(--editor-chrome-text-muted);
    border: 1px solid var(--editor-chrome-border);
    border-bottom: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vew-tab:hover[b-92t5rx1mrr] { background: var(--editor-chrome-active); color: var(--editor-chrome-text); }
.vew-tab.active[b-92t5rx1mrr] {
    background: var(--editor-chrome-active);
    color: var(--editor-chrome-text);
    border-color: var(--editor-chrome-accent);
    font-weight: 600;
}
.vew-tab-pane[b-92t5rx1mrr] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.vew-tab-pane.vew-pane-hidden[b-92t5rx1mrr] { display: none; }

/* Production-panel "Text:" field (R6) — flexible so it wraps within the dock width. */
.prop-text-input[b-92t5rx1mrr] { flex: 1 1 120px; min-width: 0; }

/* ── R7 #4: dock is horizontally resizeable + its content FITS the width. ── */

/* Drag grip on the dock's left edge (JS wireDockResize updates --vis-dock-width). */
.visu-editor-web .vis-dock[b-92t5rx1mrr] { position: relative; overflow-x: hidden; }
.vew-dock-resizer[b-92t5rx1mrr] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
    z-index: 7;
    touch-action: none;
}
.vew-dock-resizer:hover[b-92t5rx1mrr] { background: var(--editor-chrome-accent); opacity: 0.5; }

/* Content wraps to the available width instead of overflowing sideways
   (wtrightbar.png: the X/Y/B/H row ran off the right edge). */
.visu-editor-web .editor-property-panel[b-92t5rx1mrr],
.visu-editor-web .editor-property-panel .prop-group[b-92t5rx1mrr] {
    flex-wrap: wrap;
    min-width: 0;
}
.visu-editor-web .editor-property-panel input[type=text][b-92t5rx1mrr],
.visu-editor-web .editor-property-panel select[b-92t5rx1mrr] {
    max-width: 100%;
    min-width: 0;
}
.visu-editor-web .vis-panel-body[b-92t5rx1mrr] { overflow-x: hidden; }
.visu-editor-web .vis-panel-body > *[b-92t5rx1mrr] { max-width: 100%; }

/* ── R8 #3: dock readability — near-black inputs on the dark panel were illegible
   (wbeditorrightbar.png). Fields get a raised surface, bright text and a strong
   border; labels render in full text colour instead of muted grey. ── */
.visu-editor-web .vis-dock input[type=text][b-92t5rx1mrr],
.visu-editor-web .vis-dock input[type=number][b-92t5rx1mrr],
.visu-editor-web .vis-dock select[b-92t5rx1mrr],
.visu-editor-web .vis-left input[type=text][b-92t5rx1mrr],
.visu-editor-web .vis-left input[type=number][b-92t5rx1mrr],
.visu-editor-web .vis-left select[b-92t5rx1mrr] {
    background: var(--editor-chrome-raised);
    color: var(--editor-chrome-text);
    border: 1px solid var(--editor-chrome-border-strong);
}
.visu-editor-web .vis-dock input:focus[b-92t5rx1mrr],
.visu-editor-web .vis-dock select:focus[b-92t5rx1mrr],
.visu-editor-web .vis-left input:focus[b-92t5rx1mrr],
.visu-editor-web .vis-left select:focus[b-92t5rx1mrr] {
    border-color: var(--editor-chrome-accent);
    outline: none;
}
.visu-editor-web .vis-dock input[b-92t5rx1mrr]::placeholder,
.visu-editor-web .vis-left input[b-92t5rx1mrr]::placeholder { color: var(--editor-chrome-text-muted); opacity: 0.9; }
.visu-editor-web .vis-dock .prop-label[b-92t5rx1mrr],
.visu-editor-web .vis-dock .value-sidebar-field > span[b-92t5rx1mrr],
.visu-editor-web .vis-dock label[b-92t5rx1mrr],
.visu-editor-web .vis-left .scp-field > span[b-92t5rx1mrr],
.visu-editor-web .vis-left label[b-92t5rx1mrr] {
    color: var(--editor-chrome-text);
}
.visu-editor-web .vis-dock .vis-panel-head[b-92t5rx1mrr],
.visu-editor-web .vis-left .vis-panel-head[b-92t5rx1mrr] {
    color: var(--editor-chrome-text);
    font-weight: 600;
    cursor: pointer;
}

/* R12: Smart-Farbe / Temperatur-Skala / Ebenen are EXCLUSIVE views of the toolbox —
   selected by their rail icon (🌡🌈🗂), rendered instead of the Werte/Komponenten
   content, never alongside it. The panel chrome fills the pane. */
.visu-editor-web .vew-tab-pane > .vis-panel[b-92t5rx1mrr] {
    border-bottom: none;
}
.vew-view-label[b-92t5rx1mrr] {
    flex: 0 0 auto;
    padding: 0.3rem 0.1rem;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--editor-chrome-text);
    border-bottom: 1px solid var(--editor-chrome-border-strong);
    margin-bottom: var(--space-1);
}

/* ── Layout feedback round 2 ─────────────────────────────────────────────── */

/* (1/2/6) Sidebar toggles: collapsing a column hands its space to the canvas
   (the JS re-fits the artboard on the next frame). */
.visu-editor-web.visu-ill-shell.vew-hide-left[b-92t5rx1mrr] {
    grid-template-columns: auto 0 1fr auto;
}
.visu-editor-web.visu-ill-shell.vew-hide-left .vis-left[b-92t5rx1mrr] { display: none; }
.visu-editor-web.visu-ill-shell.vew-hide-dock .vis-dock[b-92t5rx1mrr] { display: none; }

/* (5) Contrast: each zone gets a distinct surface + strong separators so the
   eye finds where toolbar / sidebars / artboard start and end. */
.visu-editor-web .vis-left[b-92t5rx1mrr] {
    background: var(--editor-chrome-panel);
    border-right: 2px solid var(--editor-chrome-border-strong);
    box-shadow: inset -4px 0 6px -4px rgba(0, 0, 0, 0.5);
}
.visu-editor-web .vis-dock[b-92t5rx1mrr] {
    background: var(--editor-chrome-panel);
    border-left: 2px solid var(--editor-chrome-border-strong);
    box-shadow: inset 4px 0 6px -4px rgba(0, 0, 0, 0.5);
}
.visu-ill-shell .canvas-toolbar[b-92t5rx1mrr] {
    background: var(--editor-chrome-panel);
    border-bottom: 2px solid var(--editor-chrome-border-strong);
    box-shadow: 0 3px 6px -3px rgba(0, 0, 0, 0.5);
}
.visu-editor-web .vis-rail[b-92t5rx1mrr] {
    border-right: 2px solid var(--editor-chrome-border-strong);
}
/* The canvas area stays the darkest surface so the white artboard pops. */
.visu-ill-shell .visu-canvas-area.ve-canvas-col[b-92t5rx1mrr] { background: var(--editor-chrome-bg); }

/* (7) Heizung search combobox. */
.vew-heizung-combo[b-92t5rx1mrr] { position: relative; min-width: 280px; }
.vew-heizung-options[b-92t5rx1mrr] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    margin: 2px 0 0;
    padding: 0.2rem;
    list-style: none;
    max-height: 320px;
    overflow-y: auto;
    background: var(--editor-chrome-panel);
    border: 1px solid var(--editor-chrome-border-strong);
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}
.vew-heizung-options li[b-92t5rx1mrr] {
    padding: 0.3rem 0.5rem;
    cursor: pointer;
    border-radius: var(--radius-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vew-heizung-options li:hover[b-92t5rx1mrr] { background: var(--editor-chrome-active); }

/* Der Weg hinaus (2026-08-26).

   Diese Komponente rendert seit heute selbst einen Zurueck-Knopf. Die Klasse gab es
   bereits im klassischen Editor — dessen Regeln liegen aber in DESSEN scoped
   `.razor.css` und tragen dessen `b-…`-Kennzeichen. Sie wirken hier deshalb NICHT.
   Wer Markup besitzt, besitzt auch sein CSS. */
.btn-back-small[b-92t5rx1mrr] {
    background: none;
    border: 1px solid var(--editor-chrome-border);
    color: var(--editor-chrome-text-muted);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
    text-decoration: none;
    white-space: nowrap;
    align-self: center;
}

.btn-back-small:hover[b-92t5rx1mrr],
.btn-back-small:focus-visible[b-92t5rx1mrr] {
    border-color: var(--editor-chrome-accent);
    color: var(--editor-chrome-text);
}

/* ── Vorlage erzeugen (bill-of-materials panel) ─────────────────────────── */
.vew-vorlage-grid[b-92t5rx1mrr] { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-2) var(--space-4); margin: var(--space-3) 0; }
.vew-vorlage-grid label[b-92t5rx1mrr] { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--text-secondary); }
.vew-vorlage-grid input[type="number"][b-92t5rx1mrr], .vew-vorlage-grid select[b-92t5rx1mrr] { width: 6rem; padding: var(--space-1) var(--space-2); border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--text-primary); }
.vew-modal-actions[b-92t5rx1mrr] { display: flex; gap: var(--space-2); justify-content: flex-end; }
/* /Components/Pages/Admin/VisuFarbskala.razor.rz.scp.css */
/* Temperatur-Farbskala (/admin/visu-farbskala).
   Chrome only — every colour here is a design token. The gradient itself is set inline from the
   configured ramp, because it is DATA (a temperature→colour encoding), not chrome. */

.fs-grid[b-vg2e1vq6nu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: flex-start;
}

.fs-card[b-vg2e1vq6nu] {
    flex: 1 1 340px;
    min-width: 0;
    max-width: 560px;
}

.fs-row[b-vg2e1vq6nu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.fs-h5[b-vg2e1vq6nu] {
    margin-top: var(--space-5);
}

.fs-num[b-vg2e1vq6nu] {
    max-width: 9rem;
}

.fs-color[b-vg2e1vq6nu] {
    width: 5rem;
    height: 2.4rem;
    padding: var(--space-1);
}

.fs-preview[b-vg2e1vq6nu] {
    margin-top: var(--space-2);
}

.fs-strip[b-vg2e1vq6nu] {
    position: relative;
    height: 2.5rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
}

.fs-mid-marker[b-vg2e1vq6nu] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--surface-card);
    opacity: 0.75;
}

.fs-ticks[b-vg2e1vq6nu] {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-1);
}

.fs-tick[b-vg2e1vq6nu] {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    white-space: nowrap;
}

.fs-note[b-vg2e1vq6nu] {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: var(--space-2);
    margin-bottom: 0;
}

.fs-note-warn[b-vg2e1vq6nu] {
    color: var(--warning-color);
}

.fs-actions[b-vg2e1vq6nu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.fs-msg[b-vg2e1vq6nu] {
    margin-top: var(--space-3);
    max-width: 760px;
}
/* /Components/Pages/Admin/VisuImport.razor.rz.scp.css */
.subtitle[b-o5l7mi9afm] { color: var(--text-secondary); margin-bottom: 1.5rem; }
    
    .heizung-selector[b-o5l7mi9afm] {
        background: var(--surface-sunken);
        padding: 1rem;
        border-radius: var(--radius-md);
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
    }
    .heizung-selector label[b-o5l7mi9afm] { margin: 0; }
    .heizung-selector .search-row[b-o5l7mi9afm] {
        display: flex;
        gap: 0.5rem;
        flex: 1;
    }
    
    .options-grid[b-o5l7mi9afm] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .option-card[b-o5l7mi9afm] {
        background: var(--surface-card);
        border: 2px solid var(--border-default);
        border-radius: var(--radius-md);
        padding: 1rem;
        cursor: pointer;
        transition: all 0.2s;
    }
    .option-card:hover[b-o5l7mi9afm] {
        border-color: var(--color-primary);
        box-shadow: 0 2px 8px rgba(0,123,255,0.15);
    }
    .option-card.selected[b-o5l7mi9afm] {
        border-color: var(--color-primary);
        background: #e7f1ff;
    }
    .option-card.recommended[b-o5l7mi9afm] {
        border-color: var(--color-warning);
        background: #fffbeb;
    }
    .option-card.recommended.selected[b-o5l7mi9afm] {
        border-color: var(--color-primary);
        background: #e7f1ff;
    }
    
    .option-header[b-o5l7mi9afm] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }
    .option-number[b-o5l7mi9afm] {
        width: 24px;
        height: 24px;
        background: var(--text-secondary);
        color: var(--surface-card);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: bold;
    }
    .option-card.selected .option-number[b-o5l7mi9afm] {
        background: var(--color-primary);
    }
    .option-icon[b-o5l7mi9afm] {
        font-size: 1.25rem;
    }
    .option-header h3[b-o5l7mi9afm] {
        margin: 0;
        font-size: 1rem;
        flex: 1;
    }
    .option-card p[b-o5l7mi9afm] {
        margin: 0;
        font-size: 0.85rem;
        color: var(--text-secondary);
    }
    
    .badge-recommended[b-o5l7mi9afm] {
        background: var(--color-warning);
        color: #000;
        padding: 0.2rem 0.5rem;
        border-radius: var(--radius-sm);
        font-size: 0.7rem;
    }
    
    .option-content-panel[b-o5l7mi9afm] {
        background: var(--surface-card);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
        padding: 1.5rem;
        margin-top: 1rem;
    }
    .option-content-panel h3[b-o5l7mi9afm] {
        margin-top: 0;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--border-default);
    }
    
    .form-group[b-o5l7mi9afm] { margin-bottom: 1rem; }
    .form-group label[b-o5l7mi9afm] { display: block; margin-bottom: 0.25rem; }
    .form-text[b-o5l7mi9afm] { color: var(--text-secondary); font-size: 0.85rem; }
    .info[b-o5l7mi9afm] { color: var(--text-secondary); margin-bottom: 1rem; }
    
    .file-loaded[b-o5l7mi9afm] {
        color: var(--color-success);
        margin: 0.5rem 0;
        font-weight: 500;
    }
    
    .bitmap-list[b-o5l7mi9afm] {
        border: 1px solid var(--border-default);
        border-radius: var(--radius-sm);
        margin: 0.5rem 0;
        max-height: 200px;
        overflow-y: auto;
    }
    .bitmap-item[b-o5l7mi9afm] {
        display: flex;
        align-items: center;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--border-default);
        cursor: pointer;
    }
    .bitmap-item:last-child[b-o5l7mi9afm] { border-bottom: none; }
    .bitmap-item:hover[b-o5l7mi9afm] { background: var(--surface-sunken); }
    .bitmap-item.selected[b-o5l7mi9afm] { background: #e3f2fd; }
    .bitmap-order[b-o5l7mi9afm] {
        width: 24px;
        height: 24px;
        background: var(--color-primary);
        color: var(--surface-card);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        margin-right: 0.75rem;
    }
    .bitmap-name[b-o5l7mi9afm] { flex: 1; }
    .bitmap-size[b-o5l7mi9afm] { color: var(--text-secondary); font-size: 0.85rem; margin-right: 0.5rem; }
    .btn-remove[b-o5l7mi9afm] {
        background: none;
        border: none;
        color: var(--color-danger);
        font-size: 1.2rem;
        cursor: pointer;
        padding: 0 0.25rem;
    }
    .bitmap-actions[b-o5l7mi9afm] {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }
    
    .action-bar[b-o5l7mi9afm] {
        margin-top: 1.5rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border-default);
    }
    
    .import-result[b-o5l7mi9afm] {
        margin-top: 1rem;
        padding: 1rem;
        border-radius: var(--radius-md);
    }
    .import-result.success[b-o5l7mi9afm] {
        background: var(--color-success-light);
        border: 1px solid #c3e6cb;
    }
    .import-result h4[b-o5l7mi9afm] { margin-top: 0; }
    .import-actions[b-o5l7mi9afm] {
        display: flex;
        gap: 0.75rem;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(0,0,0,0.1);
        flex-wrap: wrap;
    }
    .import-actions .btn[b-o5l7mi9afm] {
        min-width: 160px;
    }
    
    .template-grid[b-o5l7mi9afm] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 1rem;
    }
    .template-card[b-o5l7mi9afm] {
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
        padding: 1rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s;
    }
    .template-card:hover[b-o5l7mi9afm] {
        border-color: var(--color-primary);
        background: var(--surface-sunken);
    }
    .template-card.selected[b-o5l7mi9afm] {
        border-color: var(--color-primary);
        background: #e7f1ff;
    }
    .template-icon[b-o5l7mi9afm] {
        font-size: 2rem;
        display: block;
        margin-bottom: 0.5rem;
    }
    .template-card strong[b-o5l7mi9afm] { display: block; }
    .template-card small[b-o5l7mi9afm] { color: var(--text-secondary); }
    
    .naming-convention[b-o5l7mi9afm] {
        background: var(--surface-sunken);
        padding: 1rem;
        border-radius: var(--radius-md);
        margin-bottom: 1rem;
    }
    .naming-convention h4[b-o5l7mi9afm] { margin-top: 0; }
    .naming-convention code[b-o5l7mi9afm] {
        background: var(--border-default);
        padding: 0.1rem 0.3rem;
        border-radius: var(--radius-xs);
    }
    .examples ul[b-o5l7mi9afm] { margin-bottom: 0.5rem; }
    
    .batch-preview[b-o5l7mi9afm] { margin: 1rem 0; }
    .batch-results[b-o5l7mi9afm] { margin-top: 1rem; }
    .batch-summary[b-o5l7mi9afm] {
        padding: 0.5rem;
        background: var(--surface-sunken);
        border-radius: var(--radius-sm);
        margin-top: 0.5rem;
    }
    
    .alert[b-o5l7mi9afm] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1rem;
    }
    .btn-close[b-o5l7mi9afm] {
        background: none;
        border: none;
        font-size: 1.2rem;
        cursor: pointer;
        opacity: 0.5;
    }
    .btn-close:hover[b-o5l7mi9afm] { opacity: 1; }
    
    /* Option 3 Enhanced Styles */
    .import-step[b-o5l7mi9afm] {
        background: var(--surface-sunken);
        border-radius: var(--radius-md);
        padding: 1rem;
        margin-bottom: 1rem;
    }
    .import-step h4[b-o5l7mi9afm] {
        margin: 0 0 0.75rem 0;
        font-size: 1rem;
        color: var(--gray-600);
    }
    
    /* Bitmap Preview Grid */
    .bitmap-preview-grid[b-o5l7mi9afm] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.75rem;
        margin-bottom: 0.75rem;
    }
    .bitmap-preview-card[b-o5l7mi9afm] {
        background: white;
        border: 2px solid var(--border-default);
        border-radius: var(--radius-md);
        overflow: hidden;
        cursor: pointer;
        transition: all 0.2s;
    }
    .bitmap-preview-card:hover[b-o5l7mi9afm] {
        border-color: var(--color-primary);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .bitmap-preview-card.selected[b-o5l7mi9afm] {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
    }
    .preview-header[b-o5l7mi9afm] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.25rem 0.5rem;
        background: var(--surface-sunken);
    }
    .page-number[b-o5l7mi9afm] {
        background: var(--color-primary);
        color: var(--surface-card);
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: bold;
    }
    .btn-remove-small[b-o5l7mi9afm] {
        background: none;
        border: none;
        color: var(--color-danger);
        font-size: 1rem;
        cursor: pointer;
        padding: 0;
        line-height: 1;
    }
    .preview-image[b-o5l7mi9afm] {
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--border-default);
        overflow: hidden;
    }
    .preview-image img[b-o5l7mi9afm] {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    .preview-info[b-o5l7mi9afm] {
        padding: 0.5rem;
        font-size: 0.75rem;
        border-top: 1px solid var(--border-default);
    }
    .preview-info .filename[b-o5l7mi9afm] {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 500;
    }
    .preview-info .filesize[b-o5l7mi9afm] {
        color: var(--text-secondary);
    }
    
    .bitmap-count[b-o5l7mi9afm] {
        margin-left: auto;
        color: var(--text-secondary);
        font-size: 0.9rem;
    }
    
    /* Scaling Option */
    .scaling-option[b-o5l7mi9afm] {
        margin-top: 1rem;
        padding: 0.75rem 1rem;
        background: linear-gradient(135deg, var(--surface-sunken) 0%, var(--border-default) 100%);
        border-radius: var(--radius-md);
        border: 1px solid var(--border-default);
    }
    
    .scaling-option label[b-o5l7mi9afm] {
        display: block;
        margin-bottom: 0.5rem;
        color: var(--gray-600);
    }
    
    .scale-selector[b-o5l7mi9afm] {
        display: flex;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
    }
    
    .scale-selector select[b-o5l7mi9afm] {
        border: 2px solid var(--color-primary);
        border-radius: var(--radius);
        font-weight: 500;
    }
    
    .scale-selector .form-text[b-o5l7mi9afm] {
        color: var(--text-secondary);
        font-size: 0.85rem;
    }
    
    /* Legacy Preview */
    .legacy-preview[b-o5l7mi9afm] {
        background: white;
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
        padding: 1rem;
        margin-top: 0.75rem;
    }
    .preview-section[b-o5l7mi9afm] {
        margin-bottom: 1rem;
    }
    .preview-section:last-child[b-o5l7mi9afm] {
        margin-bottom: 0;
    }
    .preview-section h5[b-o5l7mi9afm] {
        margin: 0 0 0.5rem 0;
        font-size: 0.9rem;
        color: var(--gray-600);
        padding-bottom: 0.25rem;
        border-bottom: 1px solid var(--border-default);
    }
    
    .preview-stats[b-o5l7mi9afm] {
        display: flex;
        gap: 1.5rem;
        flex-wrap: wrap;
    }
    .stat-item[b-o5l7mi9afm] {
        text-align: center;
    }
    .stat-value[b-o5l7mi9afm] {
        display: block;
        font-size: 1.5rem;
        font-weight: bold;
        color: var(--color-primary);
    }
    .stat-label[b-o5l7mi9afm] {
        font-size: 0.8rem;
        color: var(--text-secondary);
    }
    
    /* VCO Table */
    .vco-table-container[b-o5l7mi9afm] {
        max-height: 250px;
        overflow-y: auto;
        border: 1px solid var(--border-default);
        border-radius: var(--radius-sm);
    }
    .vco-table[b-o5l7mi9afm] {
        margin: 0;
        font-size: 0.85rem;
    }
    .vco-table th[b-o5l7mi9afm] {
        position: sticky;
        top: 0;
        background: var(--surface-sunken);
        z-index: 1;
    }
    .vco-table code[b-o5l7mi9afm] {
        background: var(--border-default);
        padding: 0.1rem 0.3rem;
        border-radius: var(--radius-xs);
        font-size: 0.8rem;
    }
    
    /* Drop Items Preview */
    .drop-items-preview[b-o5l7mi9afm] {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
    .drop-item-preview[b-o5l7mi9afm] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.25rem 0.5rem;
        background: var(--surface-sunken);
        border-radius: var(--radius-sm);
        font-size: 0.85rem;
    }
    .drop-page[b-o5l7mi9afm] {
        background: var(--text-secondary);
        color: var(--surface-card);
        padding: 0.1rem 0.4rem;
        border-radius: var(--radius-xs);
        font-size: 0.75rem;
    }
    .drop-pos[b-o5l7mi9afm] {
        color: var(--text-secondary);
        font-family: monospace;
        font-size: 0.8rem;
    }
    .drop-label[b-o5l7mi9afm] {
        flex: 1;
    }
    .drop-tooltip[b-o5l7mi9afm] {
        cursor: help;
    }
    
    .more-items[b-o5l7mi9afm] {
        text-align: center;
        color: var(--text-secondary);
        font-style: italic;
        padding: 0.5rem;
        font-size: 0.85rem;
    }
    
    /* Import Summary */
    .import-summary[b-o5l7mi9afm] {
        background: white;
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
        padding: 1rem;
        margin-bottom: 1rem;
    }
    .import-summary p[b-o5l7mi9afm] {
        margin: 0 0 0.5rem 0;
    }
    .import-summary ul[b-o5l7mi9afm] {
        margin: 0;
        padding-left: 1.5rem;
    }
    .import-summary li[b-o5l7mi9afm] {
        margin-bottom: 0.25rem;
    }
    
    /* Server Bitmap Status (Option 11) */
    .server-bitmaps-preview[b-o5l7mi9afm] {
        background: var(--surface-sunken);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
        padding: 1rem;
    }
    .bitmap-status-list[b-o5l7mi9afm] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        max-height: 300px;
        overflow-y: auto;
    }
    .bitmap-status-item[b-o5l7mi9afm] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.5rem 0.75rem;
        background: white;
        border-radius: var(--radius-sm);
        border: 1px solid var(--border-default);
    }
    .bitmap-status-item.found[b-o5l7mi9afm] {
        border-color: var(--color-success);
        background: #f0fff4;
    }
    .bitmap-status-item.missing[b-o5l7mi9afm] {
        border-color: var(--color-danger);
        background: #fff5f5;
    }
    .bitmap-status-item .status-icon[b-o5l7mi9afm] {
        font-size: 1.1rem;
    }
    .bitmap-status-item .bitmap-filename[b-o5l7mi9afm] {
        font-family: monospace;
        font-size: 0.85rem;
        font-weight: 500;
    }
    .bitmap-status-item .bitmap-desc[b-o5l7mi9afm] {
        flex: 1;
        color: var(--text-secondary);
        font-size: 0.85rem;
    }
    .bitmap-status-item .missing-hint[b-o5l7mi9afm] {
        color: var(--color-danger);
        font-size: 0.8rem;
        font-style: italic;
    }
    
    /* Mass Import (Option 12) */
    .mass-import-summary[b-o5l7mi9afm] {
        background: var(--surface-sunken);
        border-radius: var(--radius-md);
        padding: 1rem;
    }
    .summary-stats[b-o5l7mi9afm] {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }
    .stat-box[b-o5l7mi9afm] {
        padding: 0.75rem 1.25rem;
        border-radius: var(--radius);
        text-align: center;
        min-width: 100px;
    }
    .stat-box.ready[b-o5l7mi9afm] { background: var(--color-success-light); border: 1px solid var(--color-success); }
    .stat-box.skip[b-o5l7mi9afm] { background: #e2e3e5; border: 1px solid var(--text-secondary); }
    .stat-box.warning[b-o5l7mi9afm] { background: #fff3cd; border: 1px solid var(--color-warning); }
    .stat-box.total[b-o5l7mi9afm] { background: #cce5ff; border: 1px solid var(--color-primary); }
    .stat-box .stat-value[b-o5l7mi9afm] {
        display: block;
        font-size: 1.5rem;
        font-weight: bold;
    }
    .stat-box .stat-label[b-o5l7mi9afm] {
        font-size: 0.8rem;
        color: var(--text-secondary);
    }
    
    .mass-import-table-container[b-o5l7mi9afm] {
        max-height: 400px;
        overflow-y: auto;
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
    }
    .mass-import-table[b-o5l7mi9afm] {
        margin: 0;
        font-size: 0.85rem;
    }
    .mass-import-table thead th[b-o5l7mi9afm] {
        position: sticky;
        top: 0;
        background: var(--surface-sunken);
        z-index: 1;
    }
    .mass-import-table tr.ready[b-o5l7mi9afm] { background-color: #f0fff4; }
    .mass-import-table tr.skip[b-o5l7mi9afm] { background-color: var(--surface-sunken); color: var(--text-secondary); }
    .mass-import-table tr.warning[b-o5l7mi9afm] { background-color: #fffbeb; }
    
    .mass-import-results[b-o5l7mi9afm], .deploy-results[b-o5l7mi9afm] {
        background: var(--surface-sunken);
        border-radius: var(--radius-md);
        padding: 1rem;
    }
    .results-list[b-o5l7mi9afm] {
        max-height: 300px;
        overflow-y: auto;
    }
    .result-item[b-o5l7mi9afm] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.4rem 0.6rem;
        border-radius: var(--radius-sm);
        margin-bottom: 0.25rem;
        font-size: 0.85rem;
    }
    .result-item.success[b-o5l7mi9afm] { background: var(--color-success-light); }
    .result-item.error[b-o5l7mi9afm] { background: var(--color-danger-light); }
    .result-item .result-icon[b-o5l7mi9afm] { font-size: 1rem; }
    .result-item .result-name[b-o5l7mi9afm] { font-weight: 500; min-width: 150px; }
    .result-item .result-message[b-o5l7mi9afm] { color: var(--text-secondary); flex: 1; }
    
    /* Mass Deploy Section */
    .mass-deploy-section[b-o5l7mi9afm] {
        background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
        border: 1px solid #90caf9;
        border-radius: var(--radius-md);
        padding: 1.5rem;
    }
    .mass-deploy-section h5[b-o5l7mi9afm] {
        margin-top: 0;
        color: #1565c0;
    }
/* /Components/Pages/Admin/VisuImportLegacyDb.razor.rz.scp.css */
.vdb-page[b-see156n112] { padding: 0.5rem 0; }
.vdb-intro[b-see156n112] { color: var(--text-secondary); max-width: 90ch; }
.vdb-intro code[b-see156n112], .vdb-table code[b-see156n112], .vdb-counters code[b-see156n112] { background: var(--surface-sunken); padding: 0 0.25rem; border-radius: var(--radius-xs); white-space: nowrap; }

.vdb-actions[b-see156n112] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.6rem 0 1rem; }
.vdb-search[b-see156n112] { flex: 1 1 18rem; max-width: 30rem; }

.vdb-counters[b-see156n112] { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0 0 0.8rem; padding: 0.6rem 0.8rem; background: var(--surface-sunken); border-radius: var(--radius-md); font-size: 0.9rem; color: var(--text-secondary); }
.vdb-counters strong[b-see156n112] { color: var(--text-primary); }
.vdb-muted[b-see156n112] { color: var(--text-muted); }

.vdb-table-wrap[b-see156n112] { overflow-x: auto; }
.vdb-table[b-see156n112] { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.vdb-table th[b-see156n112], .vdb-table td[b-see156n112] { text-align: left; padding: 0.4rem 0.55rem; border-bottom: 1px solid var(--border-default); vertical-align: top; }
.vdb-table th[b-see156n112] { color: var(--text-secondary); font-weight: 600; white-space: nowrap; }
.vdb-row-unmatched td[b-see156n112] { color: var(--text-muted); }
.vdb-row-failed td[b-see156n112] { background: var(--color-danger-subtle); }

.vdb-missing[b-see156n112] { display: block; color: var(--color-warning-dark); font-size: 0.85rem; }
.vdb-badge[b-see156n112] { display: inline-block; margin-left: 0.35rem; padding: 0.05rem 0.45rem; border-radius: var(--radius-full); font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.vdb-badge-warn[b-see156n112] { background: var(--color-warning-subtle); color: var(--color-warning-dark); }
.vdb-badge-danger[b-see156n112] { background: var(--color-danger-subtle); color: var(--color-danger-dark); white-space: normal; }

.vdb-results[b-see156n112] { margin-top: 1.2rem; padding: 1rem; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.vdb-results h3[b-see156n112] { margin-top: 0; }
.vdb-summary[b-see156n112] { color: var(--text-secondary); }
.vdb-warnings[b-see156n112] { list-style: none; margin: 0; padding: 0; color: var(--color-warning-dark); font-size: 0.85rem; }
.vdb-warnings li + li[b-see156n112] { margin-top: 0.15rem; }
/* /Components/Pages/Admin/VisuKomponenten.razor.rz.scp.css */
.vk-page[b-ridb8v7x82] {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-4, 1rem);
    color: var(--text-primary);
}

.vk-head[b-ridb8v7x82] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4, 1rem);
    flex-wrap: wrap;
}

.vk-head h1[b-ridb8v7x82] {
    margin: 0 0 var(--space-2, 0.5rem);
    color: var(--text-primary);
}

.vk-sub[b-ridb8v7x82] {
    margin: 0;
    color: var(--text-secondary);
    max-width: 70ch;
    font-size: 0.9rem;
}

.vk-msg[b-ridb8v7x82] {
    margin: var(--space-3, 0.75rem) 0;
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--border-default);
}

.vk-msg-ok[b-ridb8v7x82] {
    background: var(--surface-sunken);
    color: var(--text-primary);
    border-color: var(--color-success);
}

.vk-msg-error[b-ridb8v7x82] {
    background: var(--surface-sunken);
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.vk-cat[b-ridb8v7x82] {
    margin-top: var(--space-5, 1.5rem);
}

.vk-cat h2[b-ridb8v7x82] {
    font-size: 1.05rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-default);
    padding-bottom: var(--space-1, 0.25rem);
}

.vk-count[b-ridb8v7x82] {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: normal;
}

.vk-table[b-ridb8v7x82] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.vk-table th[b-ridb8v7x82],
.vk-table td[b-ridb8v7x82] {
    text-align: left;
    padding: var(--space-2, 0.5rem);
    border-bottom: 1px solid var(--border-subtle, var(--border-default));
    vertical-align: middle;
}

.vk-table th[b-ridb8v7x82] {
    color: var(--text-secondary);
    font-weight: 600;
}

.vk-icon[b-ridb8v7x82] {
    font-size: 1.2rem;
    width: 2rem;
}

.vk-row-hidden[b-ridb8v7x82] {
    opacity: 0.55;
}

.vk-actions[b-ridb8v7x82] {
    white-space: nowrap;
    text-align: right;
}

.vk-actions-col[b-ridb8v7x82] {
    text-align: right;
}

.vk-badge[b-ridb8v7x82] {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: var(--radius-pill, 999px);
    font-size: 0.75rem;
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    background: var(--surface-sunken);
}

.vk-badge-user[b-ridb8v7x82] {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.vk-badge-hidden[b-ridb8v7x82] {
    color: var(--text-muted, var(--text-secondary));
}

.vk-badge-visible[b-ridb8v7x82] {
    color: var(--color-success);
    border-color: var(--color-success);
}

.vk-btn[b-ridb8v7x82] {
    padding: 0.3rem 0.7rem;
    margin-left: var(--space-1, 0.25rem);
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.85rem;
}

.vk-btn:hover:not(:disabled)[b-ridb8v7x82] {
    background: var(--surface-sunken);
}

.vk-btn:disabled[b-ridb8v7x82] {
    opacity: 0.5;
    cursor: default;
}

.vk-btn-primary[b-ridb8v7x82] {
    background: var(--color-primary);
    color: var(--text-on-primary);
    border-color: var(--color-primary);
}

.vk-btn-danger[b-ridb8v7x82] {
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.vk-modal-backdrop[b-ridb8v7x82] {
    position: fixed;
    inset: 0;
    background: var(--overlay-scrim, rgba(0, 0, 0, 0.5));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    padding: var(--space-4, 1rem);
}

.vk-modal[b-ridb8v7x82] {
    background: var(--surface-card);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg, 10px);
    padding: var(--space-4, 1rem);
    width: min(720px, 96vw);
    max-height: 92vh;
    overflow-y: auto;
}

.vk-modal h2[b-ridb8v7x82] {
    margin-top: 0;
}

.vk-form[b-ridb8v7x82] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3, 0.75rem);
}

.vk-form label[b-ridb8v7x82] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 0.25rem);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.vk-form .vk-wide[b-ridb8v7x82] {
    grid-column: 1 / -1;
}

.vk-form .vk-check[b-ridb8v7x82] {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    grid-column: 1 / -1;
}

.vk-form input[b-ridb8v7x82],
.vk-form textarea[b-ridb8v7x82] {
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--border-default);
    background: var(--surface-sunken);
    color: var(--text-primary);
    font: inherit;
}

.vk-json[b-ridb8v7x82] {
    font-family: var(--font-mono, monospace);
    font-size: 0.8rem;
    resize: vertical;
}

.vk-hint[b-ridb8v7x82] {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.vk-modal-actions[b-ridb8v7x82] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2, 0.5rem);
    margin-top: var(--space-4, 1rem);
}

/* ── Visual drawing modal (reuses window.VisuEditorWeb Fabric engine) ── */
.vk-head-actions[b-ridb8v7x82] {
    display: flex;
    gap: var(--space-2, 0.5rem);
    flex-wrap: wrap;
}

.vk-draw-modal[b-ridb8v7x82] {
    width: min(760px, 96vw);
}

.vk-draw-toolbar[b-ridb8v7x82] {
    display: flex;
    gap: var(--space-1, 0.25rem);
    flex-wrap: wrap;
    margin-bottom: var(--space-2, 0.5rem);
}

.vk-draw-toolbar .tool-btn[b-ridb8v7x82] {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-primary);
    cursor: pointer;
}

.vk-draw-toolbar .tool-btn:hover[b-ridb8v7x82] {
    background: var(--surface-sunken);
}

.vk-draw-toolbar .tool-btn.active[b-ridb8v7x82],
.vk-draw-toolbar .tool-btn.is-active[b-ridb8v7x82] {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--surface-sunken);
}

.vk-draw-canvas-wrap[b-ridb8v7x82] {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md, 6px);
    /* the Fabric canvas paints its own white background; this only shows in scroll gutters */
    background: var(--surface-card);
    overflow: auto;
    display: inline-block;
    max-width: 100%;
}

.vk-draw-canvas-wrap canvas[b-ridb8v7x82] {
    display: block;
}

.vk-draw-status[b-ridb8v7x82] {
    margin-top: var(--space-1, 0.25rem);
    font-size: 0.8rem;
    color: var(--text-secondary);
    min-height: 1em;
}

.vk-draw-toolbar[b-ridb8v7x82] {
    align-items: center;
}

.vk-draw-sep[b-ridb8v7x82] {
    width: 1px;
    align-self: stretch;
    background: var(--border-default);
    margin: 0 var(--space-1, 0.25rem);
}

.vk-tool-x[b-ridb8v7x82] {
    min-width: 1.9rem;
    height: 2rem;
    padding: 0 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-primary);
    cursor: pointer;
}

.vk-tool-x:hover[b-ridb8v7x82] {
    background: var(--surface-sunken);
}

.vk-draw-check[b-ridb8v7x82] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.vk-draw-select[b-ridb8v7x82] {
    padding: 0.25rem 0.4rem;
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--border-default);
    background: var(--surface-sunken);
    color: var(--text-primary);
    font-size: 0.8rem;
}

.vk-draw-props[b-ridb8v7x82] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-2, 0.5rem);
    margin-bottom: var(--space-2, 0.5rem);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md, 6px);
    background: var(--surface-sunken);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.vk-draw-props label[b-ridb8v7x82] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.vk-draw-proptype[b-ridb8v7x82] {
    font-weight: 600;
    color: var(--text-primary);
}

.vk-draw-statusbar[b-ridb8v7x82] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: var(--space-1, 0.25rem);
}

.vk-form-preview[b-ridb8v7x82] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 0.25rem);
}

.vk-form-preview-label[b-ridb8v7x82] {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.vk-form-preview-box[b-ridb8v7x82] {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md, 6px);
    background: var(--surface-card);
    padding: var(--space-2, 0.5rem);
}

.vk-form-preview-box svg[b-ridb8v7x82] {
    max-width: 100%;
    max-height: 100%;
}

.vk-form-preview-empty[b-ridb8v7x82] {
    font-size: 0.7rem;
    color: var(--text-muted, var(--text-secondary));
    text-align: center;
}

/* ── SVG import panel (ADR-0102 addendum 2026-08-28) ─────────────────────── */
.vk-head-actions[b-ridb8v7x82] { display: flex; gap: var(--space-2); align-items: center; }
.vk-file-hidden[b-ridb8v7x82] { display: none; }
.vk-import[b-ridb8v7x82] {
    margin: var(--space-4) 0;
    padding: var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}
.vk-import h2[b-ridb8v7x82] { margin: 0 0 var(--space-3); font-size: var(--font-size-lg); }
.vk-import-body[b-ridb8v7x82] { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.vk-import-preview[b-ridb8v7x82] {
    flex: 0 0 auto;
    width: 12rem;
    height: 12rem;
    display: grid;
    place-items: center;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
}
.vk-import-preview svg[b-ridb8v7x82] { max-width: 100%; max-height: 100%; }
.vk-import-form[b-ridb8v7x82] { flex: 1 1 18rem; display: flex; flex-direction: column; gap: var(--space-2); }
.vk-import-form label[b-ridb8v7x82] { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--font-size-sm); color: var(--text-secondary); }
.vk-input[b-ridb8v7x82] { padding: var(--space-1) var(--space-2); border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--text-primary); }
.vk-import-facts[b-ridb8v7x82] { margin: 0; color: var(--text-secondary); font-size: var(--font-size-sm); }
.vk-import-warnings[b-ridb8v7x82], .vk-import-ignored[b-ridb8v7x82] { margin: 0; padding-left: var(--space-4); font-size: var(--font-size-sm); }
.vk-import-warnings li[b-ridb8v7x82] { color: var(--color-warning-dark); }
.vk-import-ignored-head[b-ridb8v7x82] { margin: var(--space-2) 0 0; font-size: var(--font-size-sm); color: var(--text-secondary); }
.vk-import-actions[b-ridb8v7x82] { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
/* /Components/Pages/Admin/VisuKomponentenEditor.razor.rz.scp.css */
.vke-page[b-rkt4vykb5s] {
    height: 100vh;
    box-sizing: border-box;
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
    overflow: hidden;
}

.vke-head[b-rkt4vykb5s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4, 1rem);
    flex-wrap: wrap;
}

.vke-head h1[b-rkt4vykb5s] {
    margin: 0;
    font-size: 1.2rem;
    color: var(--text-primary);
}

.vke-head-actions[b-rkt4vykb5s] {
    display: flex;
    gap: var(--space-2, 0.5rem);
}

.vke-btn[b-rkt4vykb5s] {
    padding: 0.35rem 0.8rem;
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.9rem;
}

.vke-btn:hover[b-rkt4vykb5s] {
    background: var(--surface-sunken);
}

.vke-btn-primary[b-rkt4vykb5s] {
    background: var(--color-primary);
    color: var(--text-on-primary);
    border-color: var(--color-primary);
}

/* Compact round help button in the header (replaces the bulky sidebar "? Tipp"). */
.vke-help-btn[b-rkt4vykb5s] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-secondary);
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
}

.vke-help-btn:hover[b-rkt4vykb5s] {
    background: var(--surface-sunken);
    color: var(--text-primary);
}

.vke-msg[b-rkt4vykb5s] {
    margin: var(--space-3, 0.75rem) 0;
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--border-default);
}

.vke-msg-ok[b-rkt4vykb5s] {
    color: var(--text-primary);
    border-color: var(--color-success);
}

.vke-msg-error[b-rkt4vykb5s] {
    color: var(--color-danger);
    border-color: var(--color-danger);
}

/* Body: vertical toolbar sidebar on the left, canvas stage on the right.
   flex:1 + min-height:0 lets the stage grow to fill the full-screen height. */
.vke-body[b-rkt4vykb5s] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    gap: var(--space-2, 0.5rem);
}

.vke-sidebar[b-rkt4vykb5s] {
    /* Width is set inline by the splitter drag (JS); default here. */
    flex: 0 0 11rem;
    min-width: 8rem;
    max-width: 24rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-2, 0.5rem);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md, 6px);
    background: var(--surface-sunken);
    overflow: auto;
}

/* Compact full-width toggle at the top of the sidebar (NOT flex:1 — that would grow to fill
   the column and become a giant box). */
.vke-sidebar-toggle[b-rkt4vykb5s] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    height: 2rem;
    padding: 0 0.5rem;
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.8rem;
}

.vke-sidebar-toggle:hover[b-rkt4vykb5s] {
    background: var(--surface-sunken);
}

.vke-sidebar-toggle.active[b-rkt4vykb5s] {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Draggable vertical splitter between the sidebar and the stage (fb+visu style). */
.vke-splitter[b-rkt4vykb5s] {
    flex: 0 0 6px;
    align-self: stretch;
    cursor: col-resize;
    background: var(--border-default);
    border-radius: var(--radius-sm, 3px);
    position: relative;
    touch-action: none;
    user-select: none;
    transition: background 0.15s ease;
}

.vke-splitter:hover[b-rkt4vykb5s],
.vke-splitter.dragging[b-rkt4vykb5s] {
    background: var(--color-primary);
}

/* Three-dot grip so it reads as grabbable (pure CSS, no extra DOM). */
.vke-splitter[b-rkt4vykb5s]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 34px;
    background-image: radial-gradient(circle, currentColor 1px, transparent 1.5px);
    background-size: 2px 6px;
    background-repeat: repeat-y;
    color: var(--text-secondary);
    opacity: 0.6;
    pointer-events: none;
}

.vke-splitter:hover[b-rkt4vykb5s]::after,
.vke-splitter.dragging[b-rkt4vykb5s]::after {
    opacity: 1;
    color: var(--text-on-primary);
}

/* Tool group: buttons wrap into rows within the narrow sidebar. */
.vke-tgroup-v[b-rkt4vykb5s] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1, 0.25rem);
}

/* Horizontal divider between the stacked groups. */
.vke-sep-h[b-rkt4vykb5s] {
    height: 1px;
    align-self: stretch;
    background: var(--border-default);
    margin: var(--space-1, 0.25rem) 0;
}

/* Stacked controls (snap / raster / size / maße), one per line. */
.vke-controls[b-rkt4vykb5s] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 0.25rem);
}

.vke-sidebar .tool-btn[b-rkt4vykb5s],
.vke-tbtn[b-rkt4vykb5s] {
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-primary);
    cursor: pointer;
}

.vke-sidebar .tool-btn:hover[b-rkt4vykb5s],
.vke-tbtn:hover[b-rkt4vykb5s] {
    background: var(--surface-sunken);
}

.vke-sidebar .tool-btn.active[b-rkt4vykb5s],
.vke-sidebar .tool-btn.is-active[b-rkt4vykb5s] {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--surface-card);
}

/* Wide buttons (⊞ Gruppe / ⊟ Auflösen) span the sidebar width. */
.vke-tbtn-wide[b-rkt4vykb5s] {
    flex: 1 1 100%;
    min-width: 0;
    justify-content: flex-start;
    gap: 0.3rem;
}

.vke-check[b-rkt4vykb5s] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.vke-select[b-rkt4vykb5s] {
    padding: 0.25rem 0.4rem;
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-primary);
    font-size: 0.8rem;
}

.vke-props[b-rkt4vykb5s] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1, 0.25rem);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.vke-props label[b-rkt4vykb5s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem;
}

.vke-proptype[b-rkt4vykb5s] {
    font-weight: 600;
    color: var(--text-primary);
}

/* Stage: horizontal ruler across the top, vertical ruler on the left, canvas fills the rest.
   Sits in the .vke-body flex row; flex:1 + min-width:0 makes it eat the remaining width,
   and align-items:stretch on the row gives it the full height. */
.vke-stage[b-rkt4vykb5s] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: 20px 1fr;
    grid-template-rows: 20px 1fr;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md, 6px);
    overflow: hidden;
    background: var(--surface-card);
}

.vis-ruler-h[b-rkt4vykb5s] {
    grid-column: 2;
    grid-row: 1;
    height: 20px;
}

.vis-ruler-v[b-rkt4vykb5s] {
    grid-column: 1;
    grid-row: 2;
    width: 20px;
}

.vis-ruler-h canvas[b-rkt4vykb5s],
.vis-ruler-v canvas[b-rkt4vykb5s] {
    display: block;
    width: 100%;
    height: 100%;
}

.vke-canvas-wrap[b-rkt4vykb5s] {
    grid-column: 2;
    grid-row: 2;
    /* the Fabric canvas paints its own white background */
    background: var(--surface-card);
    /* The canvas is sized to exactly fill this cell (the artboard is zoomed to fit INSIDE it), so
       nothing should ever scroll. `hidden` also keeps clientWidth stable — a toggling scrollbar
       would otherwise feed the resize observer and make the canvas oscillate. */
    overflow: hidden;
    min-width: 0;
    min-height: 0;
}

.vke-canvas-wrap canvas[b-rkt4vykb5s] {
    display: block;
}

/* Component library flyout: sits between the sidebar and the stage; collapsing it resizes the
   stage (the canvas re-fits via the ResizeObserver). */
.vke-library[b-rkt4vykb5s] {
    flex: 0 0 auto;
    width: 14rem;
    min-width: 10rem;
    max-width: 22rem;
    resize: horizontal;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-2, 0.5rem);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md, 6px);
    background: var(--surface-sunken);
    overflow: hidden;
    min-height: 0;
}

.vke-library-collapsed[b-rkt4vykb5s] {
    display: none;
}

.vke-library-head[b-rkt4vykb5s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 0.5rem);
    font-size: 0.9rem;
    color: var(--text-primary);
}

.vke-library-search[b-rkt4vykb5s] {
    width: 100%;
}

.vke-library-list[b-rkt4vykb5s] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.vke-library-group[b-rkt4vykb5s] {
    margin-top: var(--space-2, 0.5rem);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
}

.vke-library-items[b-rkt4vykb5s] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
}

.vke-library-item[b-rkt4vykb5s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.35rem 0.2rem;
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-primary);
    cursor: grab;
    font-size: 0.65rem;
    text-align: center;
}

.vke-library-item:hover[b-rkt4vykb5s] {
    background: var(--surface-sunken);
    border-color: var(--color-primary);
}

.vke-library-item.active[b-rkt4vykb5s] {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.vke-library-icon[b-rkt4vykb5s] {
    font-size: 1.15rem;
    line-height: 1;
}

.vke-library-name[b-rkt4vykb5s] {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vke-library-empty[b-rkt4vykb5s] {
    padding: var(--space-3, 0.75rem);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Coordinates + zoom overlaid on the top-right of the canvas (replaces the old footer). */
.vke-coords[b-rkt4vykb5s] {
    position: absolute;
    top: calc(20px + var(--space-1, 0.25rem));
    right: var(--space-2, 0.5rem);
    z-index: 5;
    display: flex;
    gap: var(--space-2, 0.5rem);
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

#vewStatusZoom[b-rkt4vykb5s] {
    font-weight: 600;
    color: var(--text-primary);
}

/* Save-modal form (inside the shared .ct-modal body). */
.vke-form[b-rkt4vykb5s] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
}

.vke-field[b-rkt4vykb5s] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.vke-field small[b-rkt4vykb5s] {
    color: var(--text-secondary);
    font-weight: 400;
}

.vke-field input[b-rkt4vykb5s] {
    padding: 0.4rem 0.55rem;
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.vke-field input:focus[b-rkt4vykb5s] {
    outline: none;
    border-color: var(--border-focus);
}
/* /Components/Pages/Dokumente/DokumentAnsicht.razor.rz.scp.css */
.doc-view[b-gz9fbqr09b] { max-width: 60rem; margin: 0 auto; padding-block: 1.5rem; }
.doc-view-header[b-gz9fbqr09b] {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--border-default); padding-bottom: 1rem; margin-bottom: 1.5rem;
}
.doc-view-header .page-title[b-gz9fbqr09b] { margin: 0; flex: 1 1 20rem; }
.doc-view-meta[b-gz9fbqr09b], .doc-view-message[b-gz9fbqr09b] { color: var(--text-secondary); }
.doc-view-meta[b-gz9fbqr09b] { font-size: 0.875rem; }
.doc-view-markdown[b-gz9fbqr09b] { color: var(--text-primary); line-height: 1.6; overflow-wrap: anywhere; }
.doc-view-markdown[b-gz9fbqr09b]  h1, .doc-view-markdown[b-gz9fbqr09b]  h2, .doc-view-markdown[b-gz9fbqr09b]  h3,
.doc-view-markdown[b-gz9fbqr09b]  h4 { line-height: 1.25; margin: 1.5em 0 0.5em; }
.doc-view-markdown[b-gz9fbqr09b]  table { border-collapse: collapse; display: block; overflow-x: auto; margin: 1rem 0; }
.doc-view-markdown[b-gz9fbqr09b]  th, .doc-view-markdown[b-gz9fbqr09b]  td { border: 1px solid var(--border-default); padding: 0.35rem 0.6rem; }
.doc-view-markdown[b-gz9fbqr09b]  pre { background: var(--surface-sunken); padding: 0.75rem 1rem; overflow-x: auto; border-radius: 0.375rem; }
.doc-view-markdown[b-gz9fbqr09b]  code { background: var(--surface-sunken); padding: 0.1em 0.3em; border-radius: 0.25rem; }
.doc-view-markdown[b-gz9fbqr09b]  pre code { background: none; padding: 0; }
.doc-view-markdown[b-gz9fbqr09b]  blockquote { border-left: 0.25rem solid var(--border-default); margin: 1rem 0; padding-left: 1rem; color: var(--text-secondary); }
.doc-view-markdown[b-gz9fbqr09b]  ul.contains-task-list { list-style: none; padding-left: 1.25rem; }
/* /Components/Pages/Dokumente/DokumentSuche.razor.rz.scp.css */
/* Document full-text search — ADR-0172, stage 2. Mirrors the intro-text /
   page-header idiom of the per-scope Dokumente pages so it feels like part
   of the same family. */

.dok-suche-page[b-295bfsj4vm] {
    display: flex;
    flex-direction: column;
    background: transparent;
    color: var(--text-body);
    gap: 1rem;
    max-width: 900px;
}

.page-header[b-295bfsj4vm] {
    padding: 0.75rem 1.25rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
}

.page-title[b-295bfsj4vm] {
    margin: 0;
    font-size: 1.1rem;
    color: var(--color-primary);
    font-weight: 600;
}

.intro-text[b-295bfsj4vm] {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
}

.dok-suche-form[b-295bfsj4vm] {
    display: flex;
    gap: 0.5rem;
}

.dok-suche-form .form-control[b-295bfsj4vm] {
    flex: 1;
    max-width: 480px;
}

.dok-suche-form .btn-save[b-295bfsj4vm] {
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: var(--text-on-primary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
}
.dok-suche-form .btn-save:hover[b-295bfsj4vm] { background: var(--color-primary-hover); }

.dok-suche-filter-hint[b-295bfsj4vm] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.dok-suche-filter-hint a[b-295bfsj4vm] {
    color: var(--color-primary);
}

.dok-suche-message[b-295bfsj4vm] {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

.dok-suche-error[b-295bfsj4vm] {
    color: var(--color-danger);
}

.dok-suche-results[b-295bfsj4vm] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dok-suche-hit[b-295bfsj4vm] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 0.75rem 1rem;
}

.dok-suche-hit-header[b-295bfsj4vm] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.dok-suche-hit-header a[b-295bfsj4vm] {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}
.dok-suche-hit-header a:hover[b-295bfsj4vm] { color: var(--color-primary-hover); }

.dok-suche-scope[b-295bfsj4vm] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--surface-page);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    padding: 0.05rem 0.55rem;
}

.dok-suche-kind-badge[b-295bfsj4vm] {
    font-size: 0.75rem;
    color: var(--text-on-primary);
    background: var(--color-primary);
    border-radius: var(--radius-full);
    padding: 0.05rem 0.55rem;
}

.dok-suche-snippet[b-295bfsj4vm] {
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.dok-suche-snippet mark[b-295bfsj4vm] {
    background: var(--color-primary-10);
    color: var(--text-body);
    padding: 0 0.15em;
    border-radius: var(--radius-sm);
}

.dok-suche-limit[b-295bfsj4vm] {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-style: italic;
    margin: 0;
}
/* /Components/Pages/Energie/EnergieHub.razor.rz.scp.css */
/* Energie-Monitoring hub — flat card grid mirroring AdminHub.razor.css
   one-for-one. Same visual language (var(--surface-card),
   var(--border-default), 8-10px radius, hover-elevate). Difference:
   no locked Migration section — energie pages are read-mostly and
   don't have destructive operations behind a confirmation gate. */

.energie-hub[b-0zzmnv93n0] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.energie-hub-header[b-0zzmnv93n0] {
    margin-bottom: 1.5rem;
}

.energie-hub-header h1[b-0zzmnv93n0] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    color: var(--text-primary);
}

.energie-hub-subtitle[b-0zzmnv93n0] {
    margin: 0 0 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.energie-hub-search input[b-0zzmnv93n0] {
    width: 100%;
    max-width: 480px;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-primary);
    font-size: 1rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.energie-hub-search input:focus[b-0zzmnv93n0] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.energie-hub-section[b-0zzmnv93n0] {
    margin-top: 1.75rem;
}

.energie-hub-section:first-of-type[b-0zzmnv93n0] {
    margin-top: 0;
}

.energie-hub-section-title[b-0zzmnv93n0] {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 0.85rem;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.energie-hub-hint[b-0zzmnv93n0] {
    padding: 1rem 1.25rem;
    margin: 0;
    background: var(--surface-card);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.energie-hub-grid[b-0zzmnv93n0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 1rem;
}

.energie-hub-card[b-0zzmnv93n0] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 1.1rem 1rem;
    min-height: 116px;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: var(--text-primary);
    transition: transform 0.12s ease-out,
                box-shadow 0.15s,
                border-color 0.15s,
                background 0.15s;
}

.energie-hub-card:hover[b-0zzmnv93n0] {
    border-color: var(--color-primary);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 18%, transparent);
    transform: translateY(-2px);
}

.energie-hub-card:active[b-0zzmnv93n0] {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.energie-hub-card:focus-visible[b-0zzmnv93n0] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.energie-hub-card-icon[b-0zzmnv93n0] {
    font-size: 1.75rem;
    line-height: 1;
}

.energie-hub-card-title[b-0zzmnv93n0] {
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.energie-hub-card-hint[b-0zzmnv93n0] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

.energie-hub-empty[b-0zzmnv93n0] {
    grid-column: 1 / -1;
    padding: 1.25rem 1rem;
    text-align: center;
    color: var(--text-secondary);
    background: var(--surface-card);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
}

@media (max-width: 640px) {
    .energie-hub[b-0zzmnv93n0] {
        padding: 1rem 0.75rem;
    }
    .energie-hub-card[b-0zzmnv93n0] {
        min-height: 100px;
        padding: 0.9rem;
    }
    .energie-hub-card-icon[b-0zzmnv93n0] {
        font-size: 1.5rem;
    }
    .energie-hub-section-title[b-0zzmnv93n0] {
        font-size: 0.95rem;
    }
}
/* /Components/Pages/Error.razor.rz.scp.css */
.error-page[b-x5itedgjks] {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 60vh;
        padding: 2rem;
    }
    
    .error-card[b-x5itedgjks] {
        text-align: center;
        max-width: 500px;
        background: rgba(20, 20, 35, 0.95);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-xl);
        padding: 3rem;
    }
    
    .error-icon[b-x5itedgjks] {
        font-size: 4rem;
        margin-bottom: 1rem;
    }
    
    .error-card h1[b-x5itedgjks] {
        /* Card background is dark (rgba(20,20,35,0.95)) — use explicit
           light colours, NOT var(--text-primary)/--text-secondary which
           default to gray-800/500 (designed for light backgrounds) and
           rendered the title invisible against the dark card pre-fix
           2026-06-05. */
        color: #f4f4f5;
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .error-text[b-x5itedgjks] {
        color: #cbd5e1;
        margin-bottom: 2rem;
    }
/* /Components/Pages/Heizungen/AnlageGeraetePage.razor.rz.scp.css */
.ag-page[b-pw6ytnyi9w] {
    padding: var(--space-6);
    max-width: 1200px;
    margin: 0 auto;
}

.ag-header[b-pw6ytnyi9w] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
}

.ag-title[b-pw6ytnyi9w] {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.ag-sub[b-pw6ytnyi9w] {
    margin: var(--space-1) 0 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.ag-toolbar[b-pw6ytnyi9w] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.ag-count[b-pw6ytnyi9w] {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.ag-auto[b-pw6ytnyi9w] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.ag-grid[b-pw6ytnyi9w] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-3);
}

.ag-tile[b-pw6ytnyi9w] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    min-height: 3.25rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
}

.ag-tile:hover[b-pw6ytnyi9w] {
    background: var(--surface-sunken);
    border-color: var(--color-primary);
}

.ag-tile:active[b-pw6ytnyi9w] {
    transform: scale(0.985);
}

/* Bigger, higher-contrast status dots on the fleet page: green = online, red = offline,
   grey = not-yet-probed. ::deep pierces into the EkStatusDot atom's rendered .status-dot. */
.ag-tile[b-pw6ytnyi9w]  .status-dot {
    width: 13px;
    height: 13px;
    margin-right: 0;
}

.ag-tile[b-pw6ytnyi9w]  .status-dot.online {
    box-shadow: 0 0 6px 1px var(--color-success);
}

.ag-tile[b-pw6ytnyi9w]  .status-dot.error {
    box-shadow: 0 0 6px 1px var(--color-danger);
}

.ag-num[b-pw6ytnyi9w] {
    flex: 0 0 auto;
    min-width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    background: var(--color-primary);
    color: var(--text-on-primary);
    font-weight: 700;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}

.ag-meta[b-pw6ytnyi9w] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.ag-name[b-pw6ytnyi9w] {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.25;
    /* Show the full device name — wrap onto a second line rather than truncating with an ellipsis. */
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ag-addr[b-pw6ytnyi9w] {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.ag-state[b-pw6ytnyi9w] {
    padding: var(--space-8);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ag-foot[b-pw6ytnyi9w] {
    margin-top: var(--space-4);
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* ── Admin device editor ─────────────────────────────────────────── */
.ag-admin[b-pw6ytnyi9w] {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-default);
}

.ag-admin-head[b-pw6ytnyi9w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
    /* The whole section toggles, but only the header advertises it — a pointer cursor over
       the table and the form would misrepresent what a click there does. */
    cursor: pointer;
    user-select: none;
}

/* No bottom margin while collapsed, or the folded panel keeps a stripe of empty space. */
.ag-admin--collapsed .ag-admin-head[b-pw6ytnyi9w] {
    margin-bottom: 0;
}

.ag-admin-chevron[b-pw6ytnyi9w] {
    display: inline-block;
    font-size: 0.8em;
    color: var(--text-secondary);
    transition: transform var(--duration-base) var(--ease-out);
}

.ag-admin--collapsed .ag-admin-chevron[b-pw6ytnyi9w] {
    transform: rotate(-90deg);
}

/* The fade. max-height carries the height change; the cap just has to exceed the tallest
   the panel can get (a full device table plus the edit form), and overflow:hidden clips
   during the transition. */
.ag-admin-body[b-pw6ytnyi9w] {
    overflow: hidden;
    max-height: 500rem;
    opacity: 1;
    transition: max-height var(--duration-slow) var(--ease-in-out),
                opacity var(--duration-base) var(--ease-out);
}

.ag-admin--collapsed .ag-admin-body[b-pw6ytnyi9w] {
    max-height: 0;
    opacity: 0;
}

/* Someone who asked for less motion gets the state change without the animation. */
@media (prefers-reduced-motion: reduce) {
    .ag-admin-body[b-pw6ytnyi9w],
    .ag-admin-chevron[b-pw6ytnyi9w] {
        transition: none;
    }
}

.ag-admin-title[b-pw6ytnyi9w] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ag-admin-badge[b-pw6ytnyi9w] {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-on-primary);
    background: var(--color-primary);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.ag-admin-empty[b-pw6ytnyi9w] {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.ag-form[b-pw6ytnyi9w] {
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.ag-form-title[b-pw6ytnyi9w] {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 var(--space-3);
    color: var(--text-primary);
}

.ag-form-grid[b-pw6ytnyi9w] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-3);
}

.ag-field[b-pw6ytnyi9w] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.ag-field-wide[b-pw6ytnyi9w] {
    grid-column: span 2;
}

.ag-field-check[b-pw6ytnyi9w] {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    grid-column: 1 / -1;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.ag-input[b-pw6ytnyi9w] {
    padding: var(--space-2) var(--space-3);
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.ag-input:focus[b-pw6ytnyi9w] {
    outline: none;
    border-color: var(--color-primary);
}

.ag-form-error[b-pw6ytnyi9w] {
    color: var(--color-danger);
    font-size: 0.85rem;
    margin: var(--space-3) 0 0;
}

.ag-form-actions[b-pw6ytnyi9w] {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.ag-table-wrap[b-pw6ytnyi9w] {
    overflow-x: auto;
}

.ag-table[b-pw6ytnyi9w] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.ag-table th[b-pw6ytnyi9w],
.ag-table td[b-pw6ytnyi9w] {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-default);
    white-space: nowrap;
}

.ag-table th[b-pw6ytnyi9w] {
    color: var(--text-secondary);
    font-weight: 600;
}

.ag-table td[b-pw6ytnyi9w] {
    color: var(--text-primary);
}

.ag-td-addr[b-pw6ytnyi9w] {
    font-family: var(--font-mono);
    font-size: 0.78rem;
}

.ag-row-inactive td[b-pw6ytnyi9w] {
    color: var(--text-secondary);
    opacity: 0.7;
}

.ag-td-actions[b-pw6ytnyi9w] {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.ag-confirm[b-pw6ytnyi9w] {
    color: var(--color-danger);
    font-size: 0.8rem;
}

.btn-sm[b-pw6ytnyi9w] {
    padding: var(--space-1) var(--space-2);
    font-size: 0.78rem;
}

/* PEWO device proxy (ADR-0167): "ohne VPN" tile badge + the editor Subdomain hint. */
.ag-badge[b-pw6ytnyi9w] {
    margin-left: auto;
    padding: 0 var(--space-2);
    font-size: 0.68rem;
    line-height: 1.7;
    color: var(--text-secondary);
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.ag-hint[b-pw6ytnyi9w] {
    display: block;
    margin-top: var(--space-1);
    font-size: 0.72rem;
    color: var(--text-secondary);
}
/* /Components/Pages/Heizungen/AnleitungTab.razor.rz.scp.css */
.anleitung-container[b-w78tz4oc0x] {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .pdf-object[b-w78tz4oc0x] {
        flex: 1;
        width: 100%;
        height: 100%;
        border: none;
        background: var(--surface-card);
    }
    
    .tab-placeholder[b-w78tz4oc0x] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        padding: 2rem;
        text-align: center;
        color: var(--text-body);
    }

    .placeholder-icon[b-w78tz4oc0x] {
        font-size: 4rem;
        margin-bottom: 1rem;
    }

    .tab-placeholder h2[b-w78tz4oc0x] {
        color: var(--color-primary);
        margin: 0 0 0.5rem 0;
        font-size: 1.5rem;
    }

    .tab-placeholder p[b-w78tz4oc0x] {
        color: var(--text-secondary);
        margin: 0 0 2rem 0;
    }

    .placeholder-info[b-w78tz4oc0x] {
        background: var(--surface-sunken);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        padding: 1rem 1.5rem;
        margin-bottom: 1.5rem;
        min-width: 300px;
    }

    .info-item[b-w78tz4oc0x] {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--border-strong);
    }

    .info-item:last-child[b-w78tz4oc0x] {
        border-bottom: none;
    }

    .info-label[b-w78tz4oc0x] {
        color: var(--text-secondary);
    }

    .info-value[b-w78tz4oc0x] {
        color: var(--color-primary);
        font-family: monospace;
    }

    .placeholder-status[b-w78tz4oc0x] {
        margin-bottom: 2rem;
    }

    .status-badge[b-w78tz4oc0x] {
        background: rgba(245, 158, 11, 0.2);
        color: var(--color-warning);
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-size: 0.85rem;
    }
/* /Components/Pages/Heizungen/BetriebsParamsTab.razor.rz.scp.css */
/* ══════════════════════════════════════════════════
       BetriebsParamsTab — Light Theme (EKH Brand)
       ══════════════════════════════════════════════════ */

    .bp-tab[b-kyzplvouo0] {
        display: flex;
        flex-direction: column;
        height: 100%;
        background: var(--surface-card);
        color: var(--text-body);
        overflow: hidden;
    }

    .bp-placeholder[b-kyzplvouo0] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        gap: 0.75rem;
        color: var(--text-secondary);
    }

    .bp-placeholder-icon[b-kyzplvouo0] { font-size: 3rem; opacity: 0.5; }
    .bp-placeholder h2[b-kyzplvouo0] { margin: 0; font-size: 1.2rem; color: var(--text-muted); }
    .bp-placeholder p[b-kyzplvouo0] { margin: 0; font-size: 0.9rem; }

    .bp-spinner[b-kyzplvouo0] {
        width: 32px; height: 32px;
        border: 3px solid var(--border-strong);
        border-top-color: var(--color-primary);
        border-radius: 50%;
        animation: bp-spin-b-kyzplvouo0 1s linear infinite;
    }

    @keyframes bp-spin-b-kyzplvouo0 { to { transform: rotate(360deg); } }

    /* ──── Toolbar ──── */
    .bp-toolbar[b-kyzplvouo0] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 1rem;
        background: var(--surface-sunken);
        border-bottom: 1px solid var(--border-strong);
        flex-shrink: 0;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .bp-toolbar-left[b-kyzplvouo0], .bp-toolbar-right[b-kyzplvouo0] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .bp-mode-switch[b-kyzplvouo0] {
        display: flex;
        background: var(--surface-hover);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
        overflow: hidden;
    }

    .bp-mode-btn[b-kyzplvouo0] {
        padding: 0.5rem 1rem;
        font-size: 0.95rem;
        font-weight: 500;
        background: transparent;
        color: var(--text-secondary);
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
        font-family: inherit;
        white-space: nowrap;
    }

    .bp-mode-btn:not(:last-child)[b-kyzplvouo0] {
        border-right: 1px solid var(--border-strong);
    }

    .bp-mode-btn:hover:not([disabled])[b-kyzplvouo0] {
        color: var(--text-muted);
        background: rgba(0,0,0,0.02);
    }

    .bp-mode-btn.active[b-kyzplvouo0] {
        color: var(--color-primary);
        background: rgba(30, 148, 188, 0.1);
    }

    .bp-mode-btn[disabled][b-kyzplvouo0] {
        opacity: 0.3;
        cursor: not-allowed;
    }

    .bp-select-wrap[b-kyzplvouo0] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .bp-label[b-kyzplvouo0] {
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-secondary);
        font-weight: 600;
    }

    .bp-select[b-kyzplvouo0] {
        background: var(--surface-hover);
        border: 1px solid var(--border-strong);
        color: var(--text-body);
        padding: 0.45rem 0.65rem;
        border-radius: var(--radius-sm);
        font-size: 1rem;
        font-family: 'Consolas', 'Monaco', monospace;
        min-width: 180px;
        cursor: pointer;
    }

    .bp-select:focus[b-kyzplvouo0] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 1px rgba(30, 148, 188, 0.3);
    }

    .bp-vs[b-kyzplvouo0] {
        font-size: 0.85rem;
        color: var(--color-primary);
        font-weight: 700;
    }

    .bp-snap-count[b-kyzplvouo0] {
        font-size: 0.85rem;
        color: var(--text-body);
    }

    .bp-diff-badge[b-kyzplvouo0] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.85rem;
        color: var(--color-warning);
        background: rgba(245, 158, 11, 0.1);
        border: 1px solid rgba(245, 158, 11, 0.2);
        padding: 0.2rem 0.6rem;
        border-radius: var(--radius-lg);
    }

    .bp-diff-badge-info[b-kyzplvouo0] {
        color: var(--color-primary);
        background: rgba(30, 148, 188, 0.08);
        border-color: rgba(30, 148, 188, 0.2);
    }

    .bp-badge-dot[b-kyzplvouo0] {
        width: 6px; height: 6px;
        border-radius: 50%;
        background: var(--color-warning);
    }

    /* Search */
    .bp-search-wrap[b-kyzplvouo0] {
        display: flex;
        align-items: center;
        background: var(--surface-hover);
        border: 1px solid var(--color-primary);
        border-radius: var(--radius-sm);
        padding: 0 0.6rem;
        gap: 0.4rem;
        transition: all 0.2s;
        box-shadow: 0 0 4px rgba(30, 148, 188, 0.15);
    }

    .bp-search-wrap:focus-within[b-kyzplvouo0] {
        border-color: var(--color-primary);
        box-shadow: 0 0 10px rgba(30, 148, 188, 0.3);
    }

    .bp-search-icon[b-kyzplvouo0] {
        font-size: 0.9rem;
        opacity: 0.7;
    }

    .bp-search-input[b-kyzplvouo0] {
        background: transparent;
        border: none;
        color: var(--text-primary);
        font-size: 0.95rem;
        font-family: inherit;
        padding: 0.45rem 0;
        outline: none;
        width: 170px;
    }

    .bp-search-input[b-kyzplvouo0]::placeholder {
        color: var(--text-secondary);
    }

    .bp-search-count[b-kyzplvouo0] {
        font-size: 0.82rem;
        color: var(--color-primary);
        font-weight: 600;
        white-space: nowrap;
    }

    .bp-search-clear[b-kyzplvouo0] {
        background: rgba(239, 68, 68, 0.15);
        border: 1px solid rgba(239, 68, 68, 0.3);
        color: var(--color-danger);
        cursor: pointer;
        font-size: 0.8rem;
        padding: 0.15rem 0.35rem;
        line-height: 1;
        font-family: inherit;
        border-radius: var(--radius-xs);
        transition: all 0.15s;
    }

    .bp-search-clear:hover[b-kyzplvouo0] {
        background: rgba(239, 68, 68, 0.3);
        color: var(--text-primary);
    }

    .bp-search-hit[b-kyzplvouo0] {
        background: rgba(30, 148, 188, 0.06) !important;
    }

    .bp-search-faded[b-kyzplvouo0] {
        opacity: 0.2;
        transition: opacity 0.15s ease;
    }

    .bp-search-faded:hover[b-kyzplvouo0] {
        opacity: 0.5;
    }

    .bp-highlight[b-kyzplvouo0] {
        background: rgba(30, 148, 188, 0.35);
        color: var(--text-primary);
        border-radius: var(--radius-xs);
        padding: 0 2px;
    }

    /* Buttons */
    .bp-btn[b-kyzplvouo0] {
        padding: 0.45rem 1rem;
        font-size: 0.92rem;
        font-weight: 500;
        border-radius: var(--radius-sm);
        border: 1px solid var(--color-primary);
        background: rgba(30, 148, 188, 0.08);
        color: var(--color-primary);
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
        font-family: inherit;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
    }

    .bp-btn:hover[b-kyzplvouo0] {
        background: rgba(30, 148, 188, 0.2);
        box-shadow: 0 0 8px rgba(30, 148, 188, 0.2);
    }

    .bp-btn-download[b-kyzplvouo0] {
        border-color: var(--color-primary);
        color: var(--color-primary);
        background: rgba(0, 255, 136, 0.08);
    }

    .bp-btn-download:hover[b-kyzplvouo0] {
        background: rgba(0, 255, 136, 0.2);
        box-shadow: 0 0 8px rgba(0, 255, 136, 0.25);
    }

    /* Content area */
    .bp-content-area[b-kyzplvouo0] {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 0;
    }

    /* ──── Single View ──── */
    .bp-single-view[b-kyzplvouo0] {
        flex: 1;
        overflow-y: auto;
        font-family: 'Consolas', 'Monaco', monospace;
        font-size: 1.05rem;
        line-height: 1.75;
    }

    .bp-single-row[b-kyzplvouo0] {
        display: flex;
        padding: 0 1rem;
    }

    .bp-single-row:hover[b-kyzplvouo0] { background: rgba(0,0,0,0.02); }

    .bp-ln[b-kyzplvouo0] {
        min-width: 44px;
        text-align: right;
        padding-right: 0.75rem;
        color: var(--text-secondary);
        user-select: none;
        border-right: 1px solid var(--border-default);
        margin-right: 0.75rem;
        flex-shrink: 0;
    }

    .bp-code[b-kyzplvouo0] { white-space: pre; flex: 1; }

    .bp-row-header[b-kyzplvouo0] { background: rgba(30, 148, 188, 0.06); }
    .bp-row-header .bp-code[b-kyzplvouo0] { color: var(--color-primary); font-weight: 600; }
    .bp-row-section[b-kyzplvouo0] { background: rgba(0, 255, 136, 0.04); }
    .bp-row-section .bp-code[b-kyzplvouo0] { color: var(--color-primary); font-weight: 600; }

    /* ──── Diff View ──── */
    .bp-diff-legend[b-kyzplvouo0] {
        display: flex;
        gap: 1.25rem;
        align-items: center;
        padding: 0.4rem 1rem;
        background: var(--surface-hover);
        border-bottom: 1px solid var(--border-default);
        flex-shrink: 0;
    }

    .bp-filter-toggle[b-kyzplvouo0] {
        margin-left: auto;
        font-size: 0.85rem;
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        gap: 0.35rem;
        cursor: pointer;
    }

    .bp-filter-toggle input[b-kyzplvouo0] { cursor: pointer; accent-color: var(--color-primary); }

    .bp-legend-item[b-kyzplvouo0] {
        font-size: 0.82rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

    .bp-legend-item[b-kyzplvouo0]::before {
        content: '';
        display: inline-block;
        width: 10px; height: 10px;
        border-radius: var(--radius-xs);
    }

    .bp-legend-removed[b-kyzplvouo0]::before { background: rgba(239,68,68,0.4); }
    .bp-legend-removed[b-kyzplvouo0] { color: var(--color-danger); }
    .bp-legend-changed[b-kyzplvouo0]::before { background: rgba(245,158,11,0.4); }
    .bp-legend-changed[b-kyzplvouo0] { color: var(--color-warning); }
    .bp-legend-added[b-kyzplvouo0]::before { background: rgba(34,197,94,0.4); }
    .bp-legend-added[b-kyzplvouo0] { color: var(--color-success); }

    .bp-diff-container[b-kyzplvouo0] {
        flex: 1;
        display: flex;
        overflow: hidden;
        min-height: 0;
    }

    .bp-diff-pane[b-kyzplvouo0] {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-width: 0;
    }

    .bp-diff-pane:first-child[b-kyzplvouo0] { border-right: 2px solid var(--border-strong); }

    .bp-diff-pane-header[b-kyzplvouo0] {
        padding: 0.35rem 0.75rem;
        font-size: 0.85rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--text-secondary);
        background: var(--surface-hover);
        border-bottom: 1px solid var(--border-default);
        flex-shrink: 0;
    }

    .bp-diff-scroll[b-kyzplvouo0] {
        flex: 1;
        overflow-y: auto;
        font-family: 'Consolas', 'Monaco', monospace;
        font-size: 1rem;
        line-height: 1.7;
    }

    .bp-diff-row[b-kyzplvouo0] {
        display: flex;
        padding: 0 0.75rem;
        min-height: 1.55em;
    }

    .bp-diff-row:hover[b-kyzplvouo0] { filter: brightness(1.15); }
    .bp-diff-row .bp-ln[b-kyzplvouo0] { min-width: 42px; font-size: 0.92rem; }
    .bp-diff-row .bp-code[b-kyzplvouo0] { font-size: 1rem; }

    .bp-row-old[b-kyzplvouo0] { background: rgba(245,158,11,0.08); }
    .bp-row-old .bp-code[b-kyzplvouo0] { color: var(--color-primary); }
    .bp-row-new[b-kyzplvouo0] { background: rgba(245,158,11,0.08); }
    .bp-row-new .bp-code[b-kyzplvouo0] { color: var(--color-primary); }
    .bp-row-removed[b-kyzplvouo0] { background: rgba(239,68,68,0.1); }
    .bp-row-removed .bp-code[b-kyzplvouo0] { color: var(--color-danger); text-decoration: line-through; text-decoration-color: rgba(239,68,68,0.4); }
    .bp-row-added[b-kyzplvouo0] { background: rgba(34,197,94,0.08); }
    .bp-row-added .bp-code[b-kyzplvouo0] { color: var(--color-success); }

    /* ──── Timeline View ──── */
    .bp-timeline-scroll[b-kyzplvouo0] {
        flex: 1;
        overflow-y: auto;
        padding: 1.25rem 1.5rem;
    }

    .bp-tl-entry[b-kyzplvouo0] {
        display: flex;
        gap: 1rem;
    }

    /* Rail: dot + vertical line */
    .bp-tl-rail[b-kyzplvouo0] {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 20px;
        flex-shrink: 0;
    }

    .bp-tl-dot[b-kyzplvouo0] {
        width: 14px; height: 14px;
        border-radius: 50%;
        flex-shrink: 0;
        margin-top: 4px;
        border: 2px solid;
    }

    .bp-dot-ok[b-kyzplvouo0] {
        background: transparent;
        border-color: var(--color-success);
        box-shadow: 0 0 6px rgba(34,197,94,0.3);
    }

    .bp-dot-warn[b-kyzplvouo0] {
        background: var(--color-warning);
        border-color: var(--color-warning);
        box-shadow: 0 0 8px rgba(245,158,11,0.4);
    }

    .bp-dot-alert[b-kyzplvouo0] {
        background: var(--color-danger);
        border-color: var(--color-danger);
        box-shadow: 0 0 8px rgba(239,68,68,0.4);
    }

    .bp-tl-line[b-kyzplvouo0] {
        width: 2px;
        flex: 1;
        background: var(--border-strong);
        min-height: 12px;
    }

    /* Content */
    .bp-tl-content[b-kyzplvouo0] {
        flex: 1;
        margin-bottom: 0.5rem;
        min-width: 0;
    }

    .bp-tl-header[b-kyzplvouo0] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0.75rem;
        background: var(--surface-sunken);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .bp-tl-header:hover[b-kyzplvouo0] {
        background: var(--surface-hover);
        border-color: var(--text-secondary);
    }

    .bp-tl-date[b-kyzplvouo0] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .bp-tl-date-main[b-kyzplvouo0] {
        font-family: 'Consolas', 'Monaco', monospace;
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--text-body);
    }

    .bp-tl-change-count[b-kyzplvouo0] {
        font-size: 0.95rem;
        color: var(--color-warning);
        background: rgba(245,158,11,0.1);
        padding: 0.15rem 0.5rem;
        border-radius: 10px;
        border: 1px solid rgba(245,158,11,0.2);
    }

    .bp-tl-no-change[b-kyzplvouo0] {
        font-size: 0.95rem;
        color: var(--color-success);
        opacity: 0.6;
    }

    .bp-tl-expand[b-kyzplvouo0] {
        color: var(--text-secondary);
        font-size: 0.85rem;
        transition: color 0.15s;
    }

    .bp-tl-header:hover .bp-tl-expand[b-kyzplvouo0] { color: var(--text-muted); }

    /* Expanded changes */
    .bp-tl-changes[b-kyzplvouo0] {
        margin-top: 0.4rem;
        border: 1px solid var(--border-default);
        border-radius: var(--radius);
        overflow: hidden;
        background: var(--surface-hover);
    }

    .bp-tl-change-item[b-kyzplvouo0] {
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--surface-hover);
    }

    .bp-tl-change-item:last-child[b-kyzplvouo0] { border-bottom: none; }

    .bp-tl-change-line[b-kyzplvouo0] {
        font-size: 0.88rem;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.25rem;
    }

    .bp-tl-change-old[b-kyzplvouo0], .bp-tl-change-new[b-kyzplvouo0] {
        display: flex;
        gap: 0.5rem;
        font-family: 'Consolas', 'Monaco', monospace;
        font-size: 1.02rem;
        padding: 0.2rem 0;
    }

    .bp-tl-arrow[b-kyzplvouo0] {
        font-weight: 700;
        width: 14px;
        flex-shrink: 0;
        text-align: center;
    }

    .bp-tl-change-old .bp-tl-arrow[b-kyzplvouo0] { color: var(--color-danger); }
    .bp-tl-change-old .bp-tl-val[b-kyzplvouo0] { color: var(--color-danger); }
    .bp-tl-change-new .bp-tl-arrow[b-kyzplvouo0] { color: var(--color-success); }
    .bp-tl-change-new .bp-tl-val[b-kyzplvouo0] { color: var(--color-success); }

    .bp-tl-val[b-kyzplvouo0] {
        word-break: break-all;
        white-space: pre-wrap;
    }

    /* ──── Scrollbars ──── */
    .bp-single-view[b-kyzplvouo0]::-webkit-scrollbar,
    .bp-diff-scroll[b-kyzplvouo0]::-webkit-scrollbar,
    .bp-timeline-scroll[b-kyzplvouo0]::-webkit-scrollbar {
        width: 6px;
    }

    .bp-single-view[b-kyzplvouo0]::-webkit-scrollbar-track,
    .bp-diff-scroll[b-kyzplvouo0]::-webkit-scrollbar-track,
    .bp-timeline-scroll[b-kyzplvouo0]::-webkit-scrollbar-track {
        background: transparent;
    }

    .bp-single-view[b-kyzplvouo0]::-webkit-scrollbar-thumb,
    .bp-diff-scroll[b-kyzplvouo0]::-webkit-scrollbar-thumb,
    .bp-timeline-scroll[b-kyzplvouo0]::-webkit-scrollbar-thumb {
        background: var(--border-strong);
        border-radius: var(--radius-xs);
    }

    .bp-single-view[b-kyzplvouo0]::-webkit-scrollbar-thumb:hover,
    .bp-diff-scroll[b-kyzplvouo0]::-webkit-scrollbar-thumb:hover,
    .bp-timeline-scroll[b-kyzplvouo0]::-webkit-scrollbar-thumb:hover {
        background: var(--text-secondary);
    }

    /* ── Responsive ── */
    @media (max-width: 1024px) {
        .bp-toolbar[b-kyzplvouo0] { padding: 0.4rem 0.75rem; gap: 0.5rem; }
        .bp-mode-btn[b-kyzplvouo0] { padding: 0.4rem 0.7rem; font-size: 0.88rem; }
        .bp-search-input[b-kyzplvouo0] { width: 130px; }
        .bp-select[b-kyzplvouo0] { min-width: 140px; font-size: 0.9rem; }
    }

    @media (max-width: 768px) {
        .bp-toolbar-left[b-kyzplvouo0], .bp-toolbar-right[b-kyzplvouo0] { flex-wrap: wrap; }
        .bp-search-input[b-kyzplvouo0] { width: 110px; }
        .bp-diff-container[b-kyzplvouo0] { flex-direction: column; }
        .bp-diff-pane:first-child[b-kyzplvouo0] { border-right: none; border-bottom: 2px solid var(--border-strong); }
        .bp-select[b-kyzplvouo0] { min-width: 120px; }
        .bp-single-view[b-kyzplvouo0], .bp-diff-scroll[b-kyzplvouo0] { font-size: 0.9rem; }
    }

/* Date filter + paging bar (ADR-0046 / snapshot paging) */
.bp-filter-bar[b-kyzplvouo0] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}
.bp-filter-field[b-kyzplvouo0] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.bp-filter-date[b-kyzplvouo0] {
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--text-primary);
    background: var(--surface-card);
}
.bp-filter-count[b-kyzplvouo0] { font-size: 0.85rem; color: var(--text-secondary); margin-left: auto; }
.bp-freshness[b-kyzplvouo0] { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.5rem; }
/* /Components/Pages/Heizungen/DatenTab.razor.rz.scp.css */
.daten-tab[b-datentab] {
        display: flex;
        flex-direction: column;
        height: 100%;
        background: white;
        color: var(--text-body);
        position: relative;
        overflow: hidden;
    }
    
    .loading-overlay[b-datentab] {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: var(--surface-overlay);
        z-index: 100;
    }
    
    .loading-modal-overlay[b-datentab] {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: var(--z-shell-modal);
        backdrop-filter: blur(4px);
    }
    
    .loading-modal[b-datentab] {
        background: white;
        border: 1px solid #d0e8ef;
        border-radius: var(--radius-xl);
        padding: 2.5rem 3rem;
        text-align: center;
        min-width: 360px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    }
    
    .loading-modal-icon[b-datentab] {
        display: flex;
        justify-content: center;
        margin-bottom: 1.5rem;
    }
    
    .loading-modal h3[b-datentab] {
        color: var(--color-primary);
        font-size: 1.05rem;
        font-weight: 600;
        margin: 0 0 0.8rem 0;
    }
    
    .loading-modal-progress[b-datentab] {
        font-family: 'Consolas', 'Monaco', monospace;
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--text-body);
        margin: 0.5rem 0;
    }
    
    .loading-modal-hint[b-datentab] {
        color: var(--text-secondary);
        font-size: 0.78rem;
        margin-top: 1.2rem;
        line-height: 1.5;
    }
    
    /* Loading spinners are now the shared <EkSpinner> atom (inline SVG SMIL,
       no CSS keyframes — the keyframe approach silently failed in prod; see
       EkSpinner.razor and DatenTab commit f4fafc4f). The old CSS spinner
       classes and their rotation keyframe were removed. */

    /* Control Bar — removed, controls now in sidebar-left */
    
    .group-label[b-datentab] {
        font-size: 0.75rem;
        color: var(--text-secondary);
        margin-right: 0.4rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .btn-icon[b-datentab] { font-size: 0.9rem; }
    
    .date-navigation .date-input[b-datentab] {
        padding: 0.35rem 0.5rem;
        border: 1px solid rgba(0,0,0,0.1);
        background: rgba(0,0,0,0.08);
        color: var(--text-primary);
        border-radius: var(--radius);
        font-size: 0.8rem;
    }
    
    /* Actions — now in sidebar */
    
    /* Compare Bar */
    .compare-bar[b-datentab] {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        padding: 0.4rem 1rem;
        background: var(--sidebar-bg);
        border-bottom: 1px solid #d0e8ef;
    }
    
    .compare-bar-header[b-datentab] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .compare-bar-title[b-datentab] {
        font-weight: 700;
        font-size: 0.85rem;
        color: var(--color-primary);
        white-space: nowrap;
    }
    
    .compare-close-btn[b-datentab] {
        margin-left: auto;
        background: none;
        border: 1px solid #d0e8ef;
        border-radius: var(--radius);
        color: var(--text-secondary);
        cursor: pointer;
        font-size: 0.8rem;
        padding: 0.2rem 0.5rem;
        transition: all 0.2s;
    }
    
    .compare-close-btn:hover[b-datentab] {
        background: rgba(220, 53, 69, 0.08);
        border-color: rgba(220, 53, 69, 0.3);
        color: var(--color-danger);
    }
    
    .compare-row[b-datentab] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        flex-wrap: wrap;
    }
    
    .compare-row label[b-datentab] {
        font-weight: 600;
        font-size: 0.8rem;
        color: var(--text-secondary);
        white-space: nowrap;
    }
    
    .compare-sep[b-datentab] {
        color: #d0e8ef;
        font-weight: 300;
    }
    
    .compare-action-btn[b-datentab] {
        padding: 0.3rem 0.75rem;
        background: var(--color-primary);
        color: white;
        border: none;
        border-radius: var(--radius);
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        transition: opacity 0.2s;
    }
    
    .compare-action-btn:hover[b-datentab] { opacity: 0.85; }
    .compare-action-btn:disabled[b-datentab] { opacity: 0.4; cursor: not-allowed; }
    
    .year-checkbox-inline[b-datentab] {
        display: inline-flex;
        align-items: center;
        gap: 0.2rem;
        font-size: 0.8rem;
        cursor: pointer;
        white-space: nowrap;
    }
    
    .year-checkbox-inline input[type="checkbox"][b-datentab] {
        width: 14px;
        height: 14px;
        accent-color: var(--color-primary);
        cursor: pointer;
    }
    
    .year-checkbox-inline span[b-datentab] {
        font-weight: 500;
        color: var(--text-body);
    }
    
    .mode-select[b-datentab] {
        padding: 0.25rem 0.4rem;
        border: 1px solid #d0e8ef;
        background: white;
        color: var(--text-body);
        border-radius: var(--radius);
        font-weight: 600;
        font-size: 0.8rem;
        cursor: pointer;
    }
    
    .period-select[b-datentab], .month-select[b-datentab], .quarter-select[b-datentab], .season-select[b-datentab] {
        padding: 0.25rem 0.4rem;
        border: 1px solid #d0e8ef;
        background: white;
        color: var(--text-body);
        border-radius: var(--radius);
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .period-select:hover[b-datentab], .month-select:hover[b-datentab], .quarter-select:hover[b-datentab], .season-select:hover[b-datentab] {
        border-color: var(--color-primary);
    }
    
    .date-label[b-datentab] {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--text-secondary);
        white-space: nowrap;
    }
    
    .custom-date-input[b-datentab] {
        padding: 0.25rem 0.4rem;
        border: 1px solid #d0e8ef;
        background: white;
        color: var(--text-body);
        border-radius: var(--radius);
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        min-width: 120px;
    }
    
    .custom-date-input:hover[b-datentab] { border-color: var(--color-primary); }
    .custom-date-input:focus[b-datentab] { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(31,148,185,0.12); }
    
    .compare-row .track-select[b-datentab] {
        padding: 0.25rem 0.4rem;
        border: 1px solid #d0e8ef;
        background: white;
        color: var(--text-body);
        border-radius: var(--radius);
        font-size: 0.8rem;
        font-weight: 500;
        cursor: pointer;
        max-width: 200px;
        min-width: auto;
    }
    
    /* Track Selector Bar */
    .track-selector-bar[b-datentab] {
        display: flex;
        gap: 0.75rem;
        padding: 0.65rem 1.25rem;
        background: var(--sidebar-bg);
        border-bottom: 1px solid #d0e8ef;
        align-items: center;
        box-shadow: var(--shadow-sm);
    }
    
    .track-selector-bar .group-label[b-datentab] {
        font-weight: 600;
        color: var(--color-primary);
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .track-select[b-datentab], .year-select[b-datentab] {
        padding: 0.4rem 0.6rem;
        border: 1px solid #d0e8ef;
        background: white;
        color: var(--text-body);
        border-radius: var(--radius);
        font-size: 0.85rem;
        font-weight: 500;
        min-width: 150px;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .track-select:hover[b-datentab], .year-select:hover[b-datentab] {
        border-color: var(--color-primary);
        box-shadow: 0 2px 8px rgba(31,148,185,0.15);
    }
    
    .track-select:focus[b-datentab], .year-select:focus[b-datentab] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(31,148,185,0.15);
    }
    
    /* Dropdown options styling */
    .track-select option[b-datentab], .year-select option[b-datentab] {
        background: white;
        color: var(--text-body);
        padding: 0.5rem;
        font-weight: 500;
    }
    
    .track-select option:hover[b-datentab], .year-select option:hover[b-datentab] {
        background: rgba(31, 148, 185, 0.1);
    }
    
    .track-select option:checked[b-datentab], .year-select option:checked[b-datentab] {
        background: rgba(31, 148, 185, 0.15);
        color: var(--color-primary);
        font-weight: 600;
    }
    
    .track-indicator-hint[b-datentab] {
        font-size: 0.72rem;
        color: var(--text-secondary);
        font-style: italic;
        margin-left: 0.5rem;
        padding: 0.25rem 0.5rem;
        background: rgba(31, 148, 185, 0.06);
        border-radius: var(--radius-sm);
        border: 1px solid #d0e8ef;
    }
    
    /* Main Content Area with Sidebars */
    .main-content-area[b-datentab] {
        flex: 1;
        display: flex;
        min-height: 0;
        overflow: hidden;
    }
    
    /* Left Sidebar — wider, contains controls + scaling */
    .sidebar-left[b-datentab] {
        width: 280px;
        min-width: 280px;
        background: var(--sidebar-bg);
        border-right: 1px solid #d0e8ef;
        box-shadow: var(--shadow-sm);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        flex-shrink: 0;
    }
    
    .sidebar-header[b-datentab] {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #d0e8ef;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--sidebar-bg);
    }
    
    .sidebar-header h4[b-datentab] {
        margin: 0;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 600;
        color: var(--color-primary);
    }
    
    .sidebar-content[b-datentab] {
        flex: 1;
        overflow-y: auto;
        padding: 1rem 0;
    }
    
    .sidebar-bottom-action[b-datentab] {
        padding: 0.75rem;
        border-top: 1px solid #d0e8ef;
        flex-shrink: 0;
    }
    
    .sb-btn-admin[b-datentab] {
        width: 100%;
        justify-content: center;
        background: rgba(168, 22, 84, 0.08) !important;
        border-color: rgba(168, 22, 84, 0.2) !important;
        color: #a81654 !important;
    }
    
    .sb-btn-admin:hover[b-datentab] {
        background: rgba(168, 22, 84, 0.14) !important;
        border-color: rgba(168, 22, 84, 0.3) !important;
    }
    
    .sb-btn-admin.active[b-datentab] {
        background: #a81654 !important;
        color: white !important;
        border-color: #a81654 !important;
    }
    
    /* Sidebar Sections — match nav-section */
    .sb-section[b-datentab] {
        margin: 0 0.75rem 0.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #d0e8ef;
    }
    
    .sb-section:last-child[b-datentab] {
        border-bottom: none;
    }
    
    .sb-section-label[b-datentab] {
        padding: 0.5rem 0.25rem;
        margin-top: 0.25rem;
        font-size: 0.75rem;
        color: var(--color-primary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 600;
    }
    
    /* Sidebar Button Grid (2 columns) */
    .sb-button-grid[b-datentab] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.3rem;
    }
    
    .sb-button-grid.sb-grid-3col[b-datentab] {
        grid-template-columns: 1fr 1fr 1fr;
    }
    
    .sb-split-grid[b-datentab] {
        display: flex;
        gap: 0.4rem;
    }
    
    .sb-split-col[b-datentab] {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        flex: 1;
        justify-content: center;
    }
    
    .sb-btn[b-datentab] {
        padding: 0.5rem 0.75rem;
        border: 1px solid rgba(31, 148, 185, 0.15);
        background: rgba(31, 148, 185, 0.08);
        color: var(--text-primary);
        border-radius: var(--radius);
        cursor: pointer;
        font-size: 0.9rem;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        white-space: nowrap;
    }

    /* A sidebar button whose label is a sentence rather than a word.
       .sb-btn is `white-space: nowrap`, and inside a `flex: 1` column a nowrap
       label sets the column's max-content width — the long label would push the
       view buttons sideways (the /heizungen overflow of 2026-09-20 was the same
       mechanism). Let this one wrap instead. */
    .sb-btn-wrap[b-datentab] {
        white-space: normal;
        line-height: 1.2;
        text-align: center;
        min-width: 0;
    }

    /* Underline the shortcut letter inside a button label.
       (e.g. "Tagesgang" with T underlined → keyboard mnemonic for T) */
    .kb-key[b-datentab] {
        text-decoration: underline;
        text-decoration-thickness: 1.5px;
        text-underline-offset: 2px;
        text-decoration-color: rgba(31, 148, 185, 0.7);
    }

    /* Small kbd-style badge for buttons whose label letter doesn't match
       the key (e.g. "Ansicht aktualisieren" + R badge). */
    .kb-badge[b-datentab] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 0.3rem;
        margin-left: 0.4rem;
        background: rgba(255, 255, 255, 0.7);
        border: 1px solid rgba(31, 148, 185, 0.35);
        border-bottom-width: 2px;
        border-radius: var(--radius-sm);
        color: var(--text-secondary);
        font-family: "Courier New", monospace;
        font-size: 0.72rem;
        font-weight: 600;
        line-height: 1;
    }
    
    .sb-btn:hover[b-datentab] {
        background: rgba(31, 148, 185, 0.14);
        border-color: rgba(31, 148, 185, 0.25);
        color: var(--text-primary);
    }
    
    .sb-btn.active[b-datentab] {
        background: var(--color-primary);
        color: var(--text-on-primary);
        border-color: var(--color-primary);
    }
    
    /* Date Navigation in Sidebar */
    .sb-date-nav[b-datentab] {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }
    
    .sb-date-label[b-datentab] {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--color-primary);
        margin-bottom: 0.3rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-align: center;
    }
    
    .sb-date-row[b-datentab] {
        display: flex;
        gap: 0.25rem;
        align-items: stretch;
    }
    
    .sb-nav-btn[b-datentab] {
        padding: 0.4rem 0.6rem;
        border: 1px solid rgba(31, 148, 185, 0.15);
        background: rgba(31, 148, 185, 0.08);
        color: var(--text-primary);
        border-radius: var(--radius);
        cursor: pointer;
        font-size: 0.9rem;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }
    
    .sb-nav-btn:hover[b-datentab] {
        background: rgba(31, 148, 185, 0.14);
        border-color: rgba(31, 148, 185, 0.25);
        color: var(--text-primary);
    }
    
    .sb-date-input[b-datentab] {
        flex: 1;
        min-width: 0;
        padding: 0.5rem 0.6rem;
        border: 1px solid #d0e8ef;
        background: white;
        color: var(--text-primary);
        border-radius: var(--radius);
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .sb-date-input:hover[b-datentab] {
        border-color: var(--color-primary);
    }
    
    .sb-date-input:focus[b-datentab] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(31,148,185,0.15);
    }
    
    .sb-today-btn[b-datentab] {
        font-weight: 600;
        font-size: 0.8rem;
        white-space: nowrap;
        padding: 0.5rem 0.6rem;
    }
    
    /* Quick Navigation Section */
    .sb-quick-nav[b-datentab] {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid #d0e8ef;
    }
    
    .sb-quick-nav-label[b-datentab] {
        font-size: 0.75rem;
        color: var(--color-primary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.4rem;
        font-weight: 600;
    }
    
    .sb-quick-nav-grid[b-datentab] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.25rem;
    }
    
    .sb-refresh-btn[b-datentab] {
        width: 100%;
        justify-content: center;
        margin-top: 0.4rem;
    }
    
    .sb-quick-btn[b-datentab] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        padding: 0.4rem 0.5rem;
        border: 1px solid rgba(31, 148, 185, 0.15);
        background: rgba(31, 148, 185, 0.08);
        color: var(--text-primary);
        border-radius: var(--radius);
        cursor: pointer;
        font-size: 0.85rem;
        font-weight: 500;
        transition: all 0.2s ease;
        white-space: nowrap;
    }
    
    .sb-quick-btn:hover[b-datentab] {
        background: rgba(31, 148, 185, 0.14);
        border-color: rgba(31, 148, 185, 0.25);
    }
    
    .sb-quick-btn:active[b-datentab] {
        background: var(--color-primary);
        color: var(--text-on-primary);
    }
    
    .sb-quick-btn .quick-icon[b-datentab] {
        font-size: 0.8rem;
    }
    
    /* Custom Date Range Section */
    .custom-range-section[b-datentab] {
        background: transparent;
        border: none;
        border-top: 1px solid #d0e8ef;
        border-radius: 0;
        padding: 0.75rem 0;
        margin-top: 0.5rem;
    }
    
    .custom-range-inputs[b-datentab] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }
    
    .date-range-field[b-datentab] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .date-range-field label[b-datentab] {
        color: var(--text-secondary);
        font-size: 0.9rem;
        font-weight: 600;
        min-width: 35px;
    }
    
    .custom-range-error[b-datentab] {
        background: rgba(255, 82, 82, 0.15);
        border: 1px solid rgba(255, 82, 82, 0.3);
        color: var(--color-danger);
        padding: 0.4rem 0.6rem;
        border-radius: var(--radius);
        font-size: 0.75rem;
        margin-top: 0.4rem;
        text-align: center;
    }
    
    .quick-presets[b-datentab] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.3rem;
        margin-top: 0.5rem;
    }
    
    .preset-btn[b-datentab] {
        padding: 0.4rem 0.5rem;
        border: 1px solid rgba(31, 148, 185, 0.15);
        background: rgba(31, 148, 185, 0.08);
        color: var(--text-primary);
        border-radius: var(--radius);
        cursor: pointer;
        font-size: 0.85rem;
        transition: all 0.2s ease;
        white-space: nowrap;
        text-align: center;
    }
    
    .preset-btn:hover[b-datentab] {
        background: rgba(31, 148, 185, 0.14);
        border-color: rgba(31, 148, 185, 0.25);
        color: var(--text-primary);
    }
    
    .preset-btn:active[b-datentab] {
        background: var(--color-primary);
        color: var(--text-on-primary);
    }
    
    .custom-range-info[b-datentab] {
        margin-top: 0.6rem;
        padding: 0.4rem;
        background: transparent;
        border-radius: var(--radius);
        text-align: center;
    }
    
    .custom-range-info small[b-datentab] {
        color: var(--text-secondary);
        font-size: 0.72rem;
    }
    
    .custom-range-info .available-range[b-datentab] {
        color: var(--color-primary);
        font-weight: 600;
    }
    
    /* Data Range Warnings */
    .data-warning[b-datentab] {
        display: flex;
        gap: 0.8rem;
        padding: 1rem;
        margin: 1rem 0;
        border-radius: var(--radius-md);
        align-items: flex-start;
        animation: slideIn-b-datentab 0.3s ease-out;
    }
    
    @keyframes slideIn-b-datentab {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .data-warning.no-data[b-datentab] {
        background: rgba(255, 152, 0, 0.15);
        border: 2px solid rgba(255, 152, 0, 0.4);
    }
    
    .data-warning.partial-data[b-datentab] {
        background: rgba(33, 150, 243, 0.15);
        border: 2px solid rgba(33, 150, 243, 0.4);
    }
    
    .data-warning .warning-icon[b-datentab] {
        font-size: 2rem;
        line-height: 1;
        flex-shrink: 0;
    }
    
    .data-warning .warning-content[b-datentab] {
        flex: 1;
    }
    
    .data-warning .warning-title[b-datentab] {
        font-size: 0.95rem;
        font-weight: 700;
        margin-bottom: 0.4rem;
        color: var(--text-primary);
    }
    
    .data-warning .warning-message[b-datentab] {
        font-size: 0.82rem;
        color: var(--text-secondary);
        line-height: 1.5;
        margin-bottom: 0.8rem;
    }
    
    .data-warning .warning-action[b-datentab] {
        padding: 0.5rem 1rem;
        background: rgba(31, 148, 185, 0.08);
        border: 1px solid rgba(31, 148, 185, 0.25);
        color: var(--color-primary);
        border-radius: var(--radius);
        cursor: pointer;
        font-size: 0.85rem;
        font-weight: 600;
        transition: all 0.2s;
    }
    
    .data-warning .warning-action:hover[b-datentab] {
        background: rgba(31, 148, 185, 0.14);
        border-color: var(--color-primary);
        transform: translateY(-1px);
    }
    
    /* Data Table View */
    .data-table-container[b-datentab] {
        margin: 1rem 0;
        background: rgba(0,0,0,0.02);
        border: 1px solid rgba(0,0,0,0.08);
        border-radius: var(--radius-md);
        overflow: hidden;
    }
    
    .data-table-header[b-datentab] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.8rem 1rem;
        background: var(--sidebar-bg);
        border-bottom: 1px solid #d0e8ef;
    }
    
    .data-table-header h4[b-datentab] {
        margin: 0;
        color: var(--color-primary);
        font-size: 0.95rem;
        font-weight: 600;
    }
    
    .table-actions[b-datentab] {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }
    
    .table-rows-select[b-datentab] {
        padding: 0.4rem 0.6rem;
        background: white;
        border: 1px solid #d0e8ef;
        color: var(--text-primary);
        border-radius: var(--radius);
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .table-rows-select:hover[b-datentab] {
        background: rgba(31, 148, 185, 0.06);
        border-color: var(--color-primary);
        box-shadow: 0 2px 8px rgba(31,148,185,0.15);
    }
    
    .table-rows-select:focus[b-datentab] {
        outline: none;
        border-color: var(--color-primary);
        background: rgba(31, 148, 185, 0.06);
        box-shadow: 0 0 0 3px rgba(31,148,185,0.15);
    }
    
    .table-rows-select option[b-datentab] {
        background: white;
        color: var(--text-primary);
        padding: 0.5rem;
        font-weight: 600;
    }
    
    .table-action-btn[b-datentab] {
        padding: 0.3rem 0.7rem;
        background: rgba(31, 148, 185, 0.08);
        border: 1px solid rgba(31, 148, 185, 0.2);
        color: var(--color-primary);
        border-radius: var(--radius);
        cursor: pointer;
        font-size: 0.8rem;
        font-weight: 600;
        transition: all 0.15s;
    }
    
    .table-action-btn:hover[b-datentab] {
        background: rgba(31, 148, 185, 0.14);
        border-color: var(--color-primary);
    }
    
    .data-table-scroll[b-datentab] {
        max-height: 500px;
        overflow-y: auto;
        overflow-x: auto;
    }
    
    .data-table[b-datentab] {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.82rem;
    }
    
    .data-table thead[b-datentab] {
        position: sticky;
        top: 0;
        background: rgba(22, 33, 62, 0.95);
        z-index: 10;
    }
    
    .data-table th[b-datentab] {
        padding: 0.6rem 0.8rem;
        text-align: left;
        color: var(--color-primary);
        font-weight: 600;
        border-bottom: 1px solid #d0e8ef;
        cursor: pointer;
        user-select: none;
        white-space: nowrap;
        transition: background 0.15s;
    }
    
    .data-table th:hover[b-datentab] {
        background: rgba(31, 148, 185, 0.08);
    }
    
    .data-table th .sort-indicator[b-datentab] {
        margin-left: 0.3rem;
        font-size: 0.7rem;
        color: var(--color-primary);
    }
    
    .data-table tbody tr[b-datentab] {
        transition: background 0.15s;
    }
    
    .data-table tbody tr:nth-child(even)[b-datentab] {
        background: rgba(0,0,0,0.02);
    }
    
    .data-table tbody tr:hover[b-datentab] {
        background: var(--sidebar-bg);
    }
    
    .data-table td[b-datentab] {
        padding: 0.5rem 0.8rem;
        border-bottom: 1px solid rgba(0,0,0,0.03);
        color: var(--gray-600);
    }
    
    .data-table .timestamp-col[b-datentab] {
        font-family: 'Consolas', 'Monaco', monospace;
        color: var(--text-secondary);
        min-width: 130px;
    }
    
    .data-table .value-col[b-datentab] {
        font-family: 'Consolas', 'Monaco', monospace;
        text-align: right;
        min-width: 80px;
    }
    
    .table-footer[b-datentab] {
        padding: 0.6rem 1rem;
        background: rgba(0,0,0,0.02);
        border-top: 1px solid rgba(0,0,0,0.08);
        text-align: center;
        color: var(--text-secondary);
        font-size: 0.8rem;
    }
    
    /* Actions in Sidebar */
    .sb-actions[b-datentab] {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }
    
    .sb-export-group[b-datentab] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.25rem;
    }
    
    .sb-export-group .sb-btn[b-datentab] {
        font-size: 0.85rem;
        justify-content: center;
        padding: 0.4rem 0.3rem;
    }
    
    /* Erweitert toggle section */
    .sb-section-toggle[b-datentab] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        width: 100%;
        padding: 0.4rem 0.25rem;
        background: transparent;
        border: none;
        cursor: pointer;
        border-radius: var(--radius);
        transition: all 0.2s ease;
    }
    
    .sb-section-toggle:hover[b-datentab] {
        background: var(--surface-hover);
    }
    
    .toggle-chevron[b-datentab] {
        font-size: 0.7rem;
        color: var(--color-primary);
        transition: transform 0.2s ease;
    }
    
    .sb-erweitert-content[b-datentab] {
        padding: 0.5rem 0 0;
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }
    
    .sb-sub-label[b-datentab] {
        font-size: 0.7rem;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 600;
        padding: 0.2rem 0;
    }
    
    .sb-debug-btn[b-datentab] {
        color: #c59000 !important;
    }
    
    .sb-debug-btn:hover[b-datentab] {
        background: rgba(255, 193, 7, 0.1) !important;
    }
    
    /* Auto-Refresh Status Display */
    .auto-refresh-status[b-datentab] {
        background: rgba(31, 148, 185, 0.08);
        border: 1px solid rgba(31, 148, 185, 0.2);
        border-radius: var(--radius);
        padding: 0.5rem;
        margin-top: 0.3rem;
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }
    
    .refresh-indicator[b-datentab] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--color-primary);
    }
    
    .live-dot[b-datentab] {
        font-size: 0.7rem;
        animation: pulse-b-datentab 2s infinite;
    }
    
    @keyframes pulse-b-datentab {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }
    
    .status-text[b-datentab] {
        color: var(--color-primary);
    }
    
    .refresh-countdown[b-datentab] {
        font-size: 0.82rem;
        color: var(--text-secondary);
        font-family: 'Consolas', 'Monaco', monospace;
    }
    
    .refresh-last-update[b-datentab] {
        font-size: 0.75rem;
        color: var(--text-secondary);
        font-family: 'Consolas', 'Monaco', monospace;
    }
    
    .sb-btn:disabled[b-datentab] {
        opacity: 0.4;
        cursor: not-allowed;
    }
    
    .sb-btn:disabled:hover[b-datentab] {
        background: transparent;
        transform: none;
    }
    
    /* Scale Settings */
    .scale-section[b-datentab] {
        margin-bottom: 0.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #d0e8ef;
    }
    
    .scale-section:last-of-type[b-datentab] {
        border-bottom: none;
    }
    
    .scale-field[b-datentab] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.4rem;
    }
    
    .scale-field label[b-datentab] {
        font-size: 0.75rem;
        color: var(--text-secondary);
        width: 50px;
    }
    
    .scale-field input[b-datentab] {
        flex: 1;
        padding: 0.3rem 0.4rem;
        background: white;
        border: 1px solid #d0e8ef;
        border-radius: var(--radius);
        color: var(--text-body);
        font-size: 0.8rem;
        width: 60px;
    }
    
    .scale-field input:focus[b-datentab] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(31,148,185,0.15);
    }
    
    .sb-save-scale-btn[b-datentab] {
        width: 100%;
        justify-content: center;
        margin-top: 0.3rem;
    }
    
    /* Statistics Section */
    .statistics-section[b-datentab] {
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(0,0,0,0.08);
    }
    
    .statistics-section h5[b-datentab] {
        margin: 0 0 0.5rem 0;
        font-size: 0.92rem;
        font-weight: 600;
        color: var(--text-secondary);
    }
    
    .stat-mini[b-datentab] {
        background: transparent;
        padding: 0.4rem 0.5rem;
        margin-bottom: 0.4rem;
        border-radius: var(--radius-sm);
        padding-left: 0.6rem;
    }
    
    .stat-mini-name[b-datentab] {
        font-size: 0.88rem;
        color: var(--gray-600);
        margin-bottom: 0.2rem;
        font-weight: 500;
    }
    
    .stat-mini-row[b-datentab] {
        display: flex;
        justify-content: space-between;
        font-size: 0.82rem;
        color: var(--text-secondary);
    }
    
    /* Chart Container */
    .chart-container[b-datentab] {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
        padding: 0.75rem;
    }

    .chart-canvas-wrapper[b-datentab] {
        position: relative;
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .chart-controller-label[b-datentab] {
        position: absolute;
        top: 0.5rem;
        left: 0.75rem;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--text-primary);
        background: rgba(var(--surface-card-rgb, 255, 255, 255), 0.85);
        padding: 0.15rem 0.5rem;
        border-radius: var(--radius-sm);
        pointer-events: none;
        z-index: 5;
    }

    .last-update[b-datentab] {
        font-size: 0.75rem;
        color: var(--text-secondary);
    }
    
    .data-source-badge[b-datentab] {
        font-size: 0.7rem;
        padding: 1px 6px;
        border-radius: var(--radius-xs);
        font-weight: 500;
    }
    
    .data-source-badge.source-webterm[b-datentab] {
        background: #dcfce7;
        color: #166534;
    }
    
    .data-source-badge.source-legacy[b-datentab] {
        background: #fef3c7;
        color: #92400e;
    }
    
    .aggregation-badge[b-datentab] {
        font-size: 0.7rem;
        padding: 1px 6px;
        border-radius: var(--radius-xs);
        background: rgba(31,148,185,0.1);
        color: var(--color-primary);
        font-weight: 500;
    }
    
    .echarts-container[b-datentab] {
        flex: 1;
        min-height: 300px;
        background: var(--chart-bg);
        border-radius: var(--radius-md);
        transition: background-color 0.3s ease;
    }
    
    /* Dataset Info */
    .dataset-info[b-datentab] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.4rem 0.8rem;
        font-size: 0.75rem;
        color: var(--text-secondary);
        flex-wrap: wrap;
    }
    
    .dataset-actual[b-datentab] {
        color: var(--color-primary);
        font-weight: 500;
    }
    
    .dataset-separator[b-datentab] {
        color: var(--text-secondary);
    }
    
    .dataset-theoretical[b-datentab] {
        color: var(--text-secondary);
    }
    
    .dataset-percent[b-datentab] {
        color: var(--text-secondary);
        margin-left: 0.3rem;
    }
    
    .cache-info[b-datentab] {
        margin-left: 1rem;
        padding: 2px 8px;
        background: rgba(31, 148, 185, 0.1);
        border: 1px solid rgba(31, 148, 185, 0.2);
        border-radius: var(--radius-sm);
        color: var(--color-primary);
        font-size: 0.7rem;
        cursor: default;
    }
    
    /* Right Sidebar */
    .sidebar-right[b-datentab] {
        width: 380px;
        min-width: 380px;
        background: var(--sidebar-bg);
        border-left: 1px solid #d0e8ef;
        box-shadow: var(--shadow-sm);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        flex-shrink: 0;
    }
    
    .track-actions[b-datentab] {
        display: flex;
        gap: 0.35rem;
    }
    
    .mini-btn[b-datentab] {
        padding: 0.4rem 0.65rem;
        border: 1px solid rgba(31, 148, 185, 0.15);
        background: rgba(31, 148, 185, 0.08);
        color: var(--text-primary);
        border-radius: var(--radius);
        cursor: pointer;
        font-size: 0.9rem;
        font-weight: 500;
        transition: all 0.2s ease;
    }
    
    .mini-btn:hover[b-datentab] { background: rgba(31, 148, 185, 0.14); border-color: rgba(31, 148, 185, 0.25); color: var(--text-primary); }
    
    .save-btn[b-datentab] {
        background: #4CAF50 !important;
        color: var(--text-primary) !important;
        border-color: #4CAF50 !important;
        font-weight: 600;
        min-width: 3rem;
        padding: 0.4rem 0.65rem !important;
        font-size: 0.95rem !important;
    }
    
    .save-btn:hover:not(:disabled)[b-datentab] {
        background: #45a049 !important;
        border-color: #45a049 !important;
        transform: scale(1.05);  /* Slight grow effect on hover */
        transition: all 0.2s ease;
    }
    
    .save-btn:disabled[b-datentab] {
        opacity: 0.6;
        cursor: not-allowed;
    }
    
    .track-list-container[b-datentab] {
        flex: 1;
        overflow-y: auto;
        padding: 0.5rem 0;
    }
    
    /* Track Item - Single Row Layout */
    .track-item[b-datentab] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.35rem 0.5rem;
        margin: 0 0.25rem 0.15rem;
        background: transparent;
        border-radius: var(--radius);
        cursor: pointer;
        transition: all 0.2s ease;
        border: none;
        min-height: 34px;
    }
    
    .track-item:hover[b-datentab] {
        background: var(--surface-hover);
    }
    
    .track-item.enabled[b-datentab] {
        background: rgba(31,148,185,0.12);
    }
    
    .track-item.enabled .track-name[b-datentab] {
        color: var(--text-primary);
        font-weight: 600;
    }
    
    .track-checkbox[b-datentab] {
        width: 17px;
        height: 17px;
        cursor: pointer;
        accent-color: var(--color-primary);
        flex-shrink: 0;
    }
    
    .track-name[b-datentab] {
        font-size: 0.95rem;
        color: var(--text-body);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        min-width: 0;
    }
    
    .track-stat[b-datentab] {
        font-size: 0.95rem;
        color: var(--color-primary);
        white-space: nowrap;
        flex-shrink: 0;
        margin-right: 0.3rem;
    }
    
    .track-stat.sum[b-datentab] {
        color: #F18F01;
    }

    .color-picker-small[b-datentab] {
        width: 18px;
        height: 18px;
        padding: 0;
        border: 1px solid #d0e8ef;
        border-radius: var(--radius-xs);
        cursor: pointer;
        background: transparent;
        flex-shrink: 0;
    }
    
    .color-picker-small[b-datentab]::-webkit-color-swatch-wrapper { padding: 1px; }
    .color-picker-small[b-datentab]::-webkit-color-swatch { border-radius: var(--radius-xs); }
    
    /* Track Axis Select (L/R) - same size as color picker */
    .track-axis-select[b-datentab] {
        display: flex;
        gap: 1px;
        flex-shrink: 0;
        margin-left: 0.5rem;
    }
    
    .axis-checkbox[b-datentab] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        font-size: 0.75rem;
        font-weight: bold;
        color: var(--text-secondary);
        background: transparent;
        border: 1px solid #d0e8ef;
        cursor: pointer;
        transition: all 0.15s;
    }
    
    .axis-checkbox:first-child[b-datentab] {
        border-radius: var(--radius-xs) 0 0 var(--radius-xs);
    }
    
    .axis-checkbox:last-child[b-datentab] {
        border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    }
    
    .axis-checkbox input[type="radio"][b-datentab] {
        display: none;
    }
    
    .axis-checkbox.active[b-datentab] {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--text-on-primary);
    }
    
    .axis-checkbox:hover[b-datentab] {
        background: var(--surface-hover);
        color: var(--text-primary);
    }
    
    /* Sync Checkbox Option */
    .sync-option[b-datentab] {
        margin: 0.3rem 0;
        font-size: 0.8rem;
        color: var(--text-secondary);
    }
    
    .sync-checkbox[b-datentab] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.75rem;
        color: var(--text-secondary);
        cursor: pointer;
    }
    
    .sync-checkbox input[type="checkbox"][b-datentab] {
        width: 14px;
        height: 14px;
        accent-color: var(--color-primary);
        cursor: pointer;
    }
    
    .sync-checkbox span[b-datentab] {
        flex: 1;
    }
    
    .track-controls[b-datentab] {
        display: flex;
        gap: 0.3rem;
        align-items: center;
    }
    
    .track-controls input[type="checkbox"][b-datentab] {
        width: 14px;
        height: 14px;
        cursor: pointer;
    }
    
    .color-picker[b-datentab] {
        width: 22px;
        height: 22px;
        padding: 0;
        border: none;
        border-radius: var(--radius-sm);
        cursor: pointer;
        background: transparent;
    }
    
    /* Placeholder */
    .tab-placeholder[b-datentab] {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 2rem;
    }
    
    .placeholder-icon[b-datentab] { font-size: 4rem; margin-bottom: 1rem; }
    .placeholder-info[b-datentab] { margin-top: 2rem; background: transparent; padding: 1rem 2rem; border-radius: var(--radius-md); }
    .info-item[b-datentab] { display: flex; gap: 1rem; margin: 0.5rem 0; }
    .info-label[b-datentab] { color: var(--text-secondary); }
    .info-value[b-datentab] { color: var(--text-primary); }
    
    /* Scrollbar Styling */
    .sidebar-content[b-datentab]::-webkit-scrollbar,
    .track-list-container[b-datentab]::-webkit-scrollbar {
        width: 6px;
    }
    
    .sidebar-content[b-datentab]::-webkit-scrollbar-track,
    .track-list-container[b-datentab]::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .sidebar-content[b-datentab]::-webkit-scrollbar-thumb,
    .track-list-container[b-datentab]::-webkit-scrollbar-thumb {
        background: #d0e8ef;
        border-radius: var(--radius-xs);
    }
    
    .sidebar-content[b-datentab]::-webkit-scrollbar-thumb:hover,
    .track-list-container[b-datentab]::-webkit-scrollbar-thumb:hover {
        background: var(--color-primary);
    }
    
    .qh-refresh-msg[b-datentab] {
        margin-top: 0.4rem;
        padding: 0.3rem 0.5rem;
        border-radius: var(--radius-sm);
        font-size: 0.85rem;
        text-align: center;
    }
    
    .qh-refresh-msg.success[b-datentab] {
        background: rgba(76, 175, 80, 0.15);
        color: #81C784;
    }
    
    .qh-refresh-msg.error[b-datentab] {
        background: rgba(244, 67, 54, 0.15);
        color: #E57373;
    }
    
    /* Responsive — both sidebars scale with screen */
    @media (min-width: 1600px) {
        .sidebar-left[b-datentab] { width: 340px; min-width: 340px; }
        .sidebar-right[b-datentab] { width: 400px; min-width: 400px; }
    }
    
    @media (min-width: 1400px) and (max-width: 1599px) {
        .sidebar-left[b-datentab] { width: 300px; min-width: 300px; }
        .sidebar-right[b-datentab] { width: 370px; min-width: 370px; }
    }
    
    @media (max-width: 1200px) {
        .sidebar-left[b-datentab] { width: 260px; min-width: 260px; }
        .sidebar-right[b-datentab] { width: 320px; min-width: 320px; }
        .track-stat[b-datentab] { font-size: 0.88rem; }
    }
    
    @media (max-width: 1024px) {
        .sidebar-left[b-datentab] { width: 220px; min-width: 220px; }
        .sidebar-right[b-datentab] { width: 280px; min-width: 280px; }
    }
    
    @media (max-width: 900px) {
        .sidebar-left[b-datentab] { width: 200px; min-width: 200px; }
        .sidebar-right[b-datentab] { width: 250px; min-width: 250px; }
        .sb-button-grid[b-datentab] { grid-template-columns: 1fr; }
        .sb-split-grid[b-datentab] { flex-direction: column; }
        .sb-export-group[b-datentab] { grid-template-columns: 1fr 1fr; }
        .track-stat[b-datentab] { display: none; }
    }
    
    @media (max-width: 768px) {
        .main-content-area[b-datentab] { flex-direction: column; }
        .sidebar-left[b-datentab], .sidebar-right[b-datentab] {
            width: 100%;
            min-width: 100%;
            max-height: 200px;
            border: none;
            border-bottom: 1px solid rgba(0,0,0,0.08);
        }
        .sidebar-content[b-datentab], .track-list-container[b-datentab] {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        .sb-section[b-datentab], .track-item[b-datentab] {
            flex: 1;
            min-width: 150px;
        }
    }
    /* NOTE: the mobile-app (embedded WebView) presentation of this tab is
       isolated in wwwroot/css/datentab-embed.css, loaded ONLY when the console
       runs in embed mode (?embed=1, set exclusively by the mobile bridge). The
       desktop web — including a narrow browser window — never loads it, so
       mobile-only tweaks there cannot affect the web. See HeizungConsole.razor
       (EmbedMode → <HeadContent> link + .embed-mode marker). */
    
    /* Debug Button */
    .debug-btn[b-datentab] {
        background: rgba(255, 193, 7, 0.2) !important;
        border-color: rgba(255, 193, 7, 0.5) !important;
    }
    
    .debug-btn:hover[b-datentab] {
        background: rgba(255, 193, 7, 0.3) !important;
    }
    
    .debug-btn-large[b-datentab] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 2rem;
        padding: 1rem 2rem;
        background: rgba(255, 193, 7, 0.2);
        border: 2px solid rgba(255, 193, 7, 0.5);
        border-radius: var(--radius-md);
        color: var(--color-warning);
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .debug-btn-large:hover[b-datentab] {
        background: rgba(255, 193, 7, 0.3);
        border-color: rgba(255, 193, 7, 0.7);
        transform: translateY(-2px);
    }
    
    .debug-btn-large span[b-datentab] {
        font-size: 1.2rem;
    }
    
    /* Debug Modal Overlay */
    .debug-modal-overlay[b-datentab] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: var(--z-shell-modal);
    }
    
    .debug-modal[b-datentab] {
        background: white;
        border: 1px solid rgba(31, 148, 185, 0.2);
        border-radius: var(--radius-lg);
        width: 90%;
        max-width: 900px;
        max-height: 80vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 10px 40px var(--surface-overlay);
    }
    
    .debug-modal-header[b-datentab] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        background: rgba(0, 0, 0, 0.2);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
    
    .debug-modal-header h3[b-datentab] {
        margin: 0;
        color: var(--color-primary);
        font-size: 1.1rem;
    }
    
    .debug-modal-header .close-btn[b-datentab] {
        background: none;
        border: none;
        color: var(--text-secondary);
        font-size: 1.5rem;
        cursor: pointer;
        padding: 0 0.5rem;
        transition: color 0.2s;
    }
    
    .debug-modal-header .close-btn:hover[b-datentab] {
        color: var(--color-danger);
    }
    
    .debug-modal-body[b-datentab] {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding: 1rem;
    }
    
    .debug-spinner[b-datentab] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 3rem;
    }
    
    .debug-actions[b-datentab] {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .debug-action-btn[b-datentab] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: rgba(31, 148, 185, 0.08);
        border: 1px solid rgba(31, 148, 185, 0.3);
        border-radius: var(--radius);
        color: var(--color-primary);
        cursor: pointer;
        font-size: 0.85rem;
        transition: all 0.2s;
    }
    
    .debug-action-btn:hover[b-datentab] {
        background: rgba(31, 148, 185, 0.14);
    }
    
    .debug-log[b-datentab] {
        flex: 1;
        overflow-y: auto;
        background: var(--surface-hover);
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: var(--radius);
        padding: 0.5rem;
        font-family: 'Consolas', 'Monaco', monospace;
        font-size: 0.8rem;
    }
    
    .debug-entry[b-datentab] {
        padding: 0.3rem 0.5rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.03);
        line-height: 1.4;
    }
    
    .debug-entry:last-child[b-datentab] {
        border-bottom: none;
    }
    
    .debug-time[b-datentab] {
        color: var(--text-secondary);
        margin-right: 0.5rem;
    }
    
    .debug-level[b-datentab] {
        font-weight: bold;
        margin-right: 0.5rem;
        padding: 0.1rem 0.3rem;
        border-radius: var(--radius-xs);
        font-size: 0.7rem;
    }
    
    .debug-entry.INFO .debug-level[b-datentab] {
        color: var(--color-primary);
        background: rgba(31, 148, 185, 0.08);
    }
    
    .debug-entry.SUCCESS .debug-level[b-datentab] {
        color: var(--color-success);
        background: rgba(46, 204, 113, 0.15);
    }
    
    .debug-entry.WARNING .debug-level[b-datentab] {
        color: var(--color-warning);
        background: rgba(243, 156, 18, 0.15);
    }
    
    .debug-entry.ERROR .debug-level[b-datentab] {
        color: var(--color-danger);
        background: rgba(231, 76, 60, 0.15);
    }
    
    .debug-message[b-datentab] {
        color: var(--gray-600);
    }
    
    .debug-details[b-datentab] {
        margin: 0.5rem 0 0 0;
        padding: 0.5rem;
        background: rgba(31, 148, 185, 0.06);
        border-radius: var(--radius-sm);
        color: var(--text-secondary);
        font-size: 0.75rem;
        white-space: pre-wrap;
        word-break: break-all;
        max-height: 200px;
        overflow-y: auto;
    }
    
    .debug-log[b-datentab]::-webkit-scrollbar,
    .debug-details[b-datentab]::-webkit-scrollbar {
        width: 8px;
    }
    
    .debug-log[b-datentab]::-webkit-scrollbar-track,
    .debug-details[b-datentab]::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.2);
    }
    
    .debug-log[b-datentab]::-webkit-scrollbar-thumb,
    .debug-details[b-datentab]::-webkit-scrollbar-thumb {
        background: rgba(31, 148, 185, 0.3);
        border-radius: var(--radius-sm);
    }
    
    /* ═══════════════════════════════════════════════════════════════ */
    /* STATISTICAL ANALYSIS MODAL */
    /* ═══════════════════════════════════════════════════════════════ */
    /* The analysis-only rules (tabs, stat cards, correlation / anomaly / cost blocks) moved to
       DatenTab/AnalysisModal.razor.css (code-quality step 3c). Only the modal CHROME shared by
       the analysis, comparison, export and edit dialogs stays here. */
    
    .analysis-modal-overlay[b-datentab] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2000;
        backdrop-filter: blur(4px);
        animation: fadeIn 0.2s;
    }
    
    .analysis-modal[b-datentab] {
        background: white;
        border-radius: var(--radius-lg);
        border: 1px solid #d0e8ef;
        width: 95%;
        max-width: 1400px;
        max-height: 90vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 8px 32px rgba(0,0,0,0.15);
        animation: slideIn-b-datentab 0.3s ease-out;
    }
    
    .analysis-modal-header[b-datentab] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.2rem 1.5rem;
        border-bottom: 1px solid #d0e8ef;
        background: var(--sidebar-bg);
    }
    
    .analysis-modal-header h3[b-datentab] {
        margin: 0;
        color: var(--color-primary);
        font-size: 1.3rem;
        font-weight: 600;
    }
    
    .analysis-header-actions[b-datentab] {
        display: flex;
        gap: 1rem;
        align-items: center;
    }
    
    .analysis-loading[b-datentab] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 400px;
        gap: 1rem;
    }
    
    .analysis-loading p[b-datentab] {
        color: var(--color-primary);
        font-size: 1.1rem;
    }
    
    /* === Installation Comparison Modal === */
    .comparison-modal[b-datentab] {
        background: linear-gradient(135deg, var(--surface-page) 0%, var(--surface-card) 50%, var(--color-primary) 100%);
        border-radius: var(--radius-lg);
        width: 95%;
        max-width: 1600px;
        max-height: 90vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 20px 60px var(--surface-overlay);
        overflow: hidden;
    }
    
    .comparison-content[b-datentab] {
        flex: 1;
        overflow-y: auto;
        padding: 1.5rem;
    }
    
    .comparison-setup[b-datentab] {
        max-width: 900px;
        margin: 0 auto;
    }
    
    .comparison-setup-section[b-datentab] {
        background: rgba(0, 0, 0, 0.03);
        padding: 1.5rem;
        border-radius: var(--radius-md);
        margin-bottom: 1.5rem;
        border: 1px solid rgba(0, 0, 0, 0.08);
    }
    
    .comparison-setup-section h4[b-datentab] {
        color: var(--color-primary);
        font-size: 1.1rem;
        margin-bottom: 1rem;
        font-weight: 600;
    }
    
    .date-range-selectors[b-datentab] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    
    .date-input-group[b-datentab] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .date-input-group label[b-datentab] {
        color: var(--text-secondary);
        font-size: 0.9rem;
        font-weight: 600;
    }
    
    .date-input[b-datentab] {
        padding: 0.75rem;
        background: rgba(31, 148, 185, 0.06);
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: var(--radius);
        color: var(--text-primary);
        font-size: 1rem;
        font-family: 'Consolas', 'Monaco', monospace;
    }
    
    .date-input:focus[b-datentab] {
        outline: none;
        border-color: var(--color-primary);
        background: rgba(0, 0, 0, 0.4);
    }
    
    .installation-selector[b-datentab] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 0.75rem;
        max-height: 400px;
        overflow-y: auto;
        padding: 0.5rem;
        background: rgba(0, 0, 0, 0.2);
        border-radius: var(--radius);
    }
    
    .installation-checkbox[b-datentab] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem;
        background: rgba(0, 0, 0, 0.03);
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: var(--radius);
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .installation-checkbox:hover[b-datentab] {
        background: white;
        border-color: var(--color-primary);
    }
    
    .installation-checkbox input[type="checkbox"][b-datentab] {
        width: 18px;
        height: 18px;
        cursor: pointer;
        accent-color: var(--color-primary);
    }
    
    .installation-checkbox span[b-datentab] {
        color: var(--text-primary);
        font-size: 0.95rem;
        flex: 1;
    }
    
    .comparison-hint[b-datentab] {
        margin-top: 1rem;
        padding: 0.75rem;
        background: rgba(31, 148, 185, 0.08);
        border-left: 3px solid var(--color-primary);
        color: var(--color-primary);
        border-radius: var(--radius-sm);
        font-size: 0.9rem;
    }
    
    .comparison-hint.warning[b-datentab] {
        background: rgba(255, 107, 107, 0.1);
        border-left-color: var(--color-danger);
        color: var(--color-danger);
    }
    
    .comparison-actions[b-datentab] {
        display: flex;
        justify-content: center;
        gap: 1rem;
        margin-top: 2rem;
    }
    
    .btn-primary[b-datentab] {
        padding: 0.9rem 2rem;
        background: var(--color-primary);
        border: none;
        border-radius: var(--radius-md);
        color: var(--text-primary);
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        box-shadow: 0 4px 12px rgba(31, 148, 185, 0.2);
    }
    
    .btn-primary:hover:not(:disabled)[b-datentab] {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(31, 148, 185, 0.3);
    }
    
    .btn-primary:disabled[b-datentab] {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    .btn-secondary[b-datentab] {
        padding: 0.75rem 1.5rem;
        background: white;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: var(--radius);
        color: var(--text-primary);
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .btn-secondary:hover[b-datentab] {
        background: white;
        border-color: var(--color-primary);
    }
    
    .comparison-results[b-datentab] {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .comparison-header-info[b-datentab] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        background: rgba(0, 0, 0, 0.03);
        border-radius: var(--radius-md);
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .comparison-header-info span[b-datentab] {
        color: var(--color-primary);
        font-weight: 600;
        font-size: 0.95rem;
    }
    
    .comparison-table-container[b-datentab] {
        overflow-x: auto;
        border-radius: var(--radius-md);
        background: rgba(31, 148, 185, 0.06);
    }
    
    .comparison-table[b-datentab] {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.9rem;
    }
    
    .comparison-table thead[b-datentab] {
        background: var(--color-primary);
        color: var(--text-primary);
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    .comparison-table th[b-datentab] {
        padding: 1rem;
        text-align: left;
        font-weight: 600;
        white-space: nowrap;
    }
    
    .comparison-table td[b-datentab] {
        padding: 0.9rem 1rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        color: var(--text-primary);
    }
    
    .comparison-table tbody tr[b-datentab] {
        transition: background 0.2s;
    }
    
    .comparison-table tbody tr:hover[b-datentab] {
        background: rgba(0, 0, 0, 0.03);
    }
    
    .comparison-table .sticky-col[b-datentab] {
        position: sticky;
        left: 0;
        background: rgba(26, 26, 46, 0.95);
        z-index: 5;
        border-right: 2px solid rgba(0, 0, 0, 0.1);
    }
    
    .comparison-table thead .sticky-col[b-datentab] {
        background: var(--color-primary);
        z-index: 15;
    }
    
    .installation-name[b-datentab] {
        font-weight: 600;
        color: var(--color-primary);
    }
    
    .completeness-bar[b-datentab] {
        position: relative;
        width: 100%;
        height: 24px;
        background: rgba(31, 148, 185, 0.06);
        border-radius: var(--radius-sm);
        overflow: hidden;
    }
    
    .completeness-fill[b-datentab] {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: var(--color-primary);
        transition: width 0.3s;
    }
    
    .completeness-bar span[b-datentab] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-weight: 600;
        font-size: 0.85rem;
        color: var(--text-primary);
        text-shadow: 0 1px 2px var(--surface-overlay);
        z-index: 1;
    }
    
    .anomaly-count[b-datentab] {
        font-family: 'Consolas', 'Monaco', monospace;
        font-weight: 600;
        color: #FFD93D;
    }
    
    .rank-badge[b-datentab] {
        font-weight: 700;
        font-size: 1.1rem;
    }
    
    .rank-1[b-datentab] {
        color: #FFD700;
        font-size: 1.2rem;
    }
    
    .rank-2[b-datentab] {
        color: #C0C0C0;
        font-size: 1.1rem;
    }
    
    .rank-3[b-datentab] {
        color: #CD7F32;
        font-size: 1.05rem;
    }
    
    .rank-first[b-datentab] {
        background: rgba(255, 215, 0, 0.1);
    }
    
    .rank-second[b-datentab] {
        background: rgba(192, 192, 192, 0.1);
    }
    
    .rank-third[b-datentab] {
        background: rgba(205, 127, 50, 0.1);
    }
    
    .comparison-footer[b-datentab] {
        display: flex;
        justify-content: flex-end;
        gap: 1rem;
        padding: 1rem;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        background: rgba(31, 148, 185, 0.06);
    }
    
    @media (max-width: 768px) {
        .comparison-modal[b-datentab] {
            width: 98%;
            max-height: 95vh;
        }
        
        .date-range-selectors[b-datentab] {
            grid-template-columns: 1fr;
        }
        
        .installation-selector[b-datentab] {
            grid-template-columns: 1fr;
        }
        
        .comparison-header-info[b-datentab] {
            flex-direction: column;
            align-items: flex-start;
        }
        
        .comparison-table[b-datentab] {
            font-size: 0.8rem;
        }
        
        .comparison-table th[b-datentab],
        .comparison-table td[b-datentab] {
            padding: 0.6rem 0.5rem;
        }
    }
    
    /* Responsive */
    @media (max-width: 1200px) {
        .analysis-modal[b-datentab] {
            width: 98%;
            max-height: 95vh;
        }
    }

    @media (max-width: 768px) {
        .analysis-modal-header h3[b-datentab] {
            font-size: 1rem;
        }
    }

    /* ============================================ */
    /* PRESET MANAGEMENT STYLES */
    /* ============================================ */
    
    /* Preset button in header */
    .preset-btn[b-datentab] {
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
        color: var(--text-on-primary);
        border: none;
        min-width: 3rem;
        padding: 0.4rem 0.65rem;  /* Match mini-btn base padding */
        font-size: 0.85rem;  /* Match mini-btn base font size */
    }
    
    .preset-btn:hover[b-datentab] {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }
    
    /* Presets section in sidebar */
    .presets-section[b-datentab] {
        margin: 0.5rem 0.75rem 0;
        padding: 0.5rem 0;
        background: transparent;
        border-radius: 0;
        border: none; border-top: 1px solid #d0e8ef;
    }
    
    .section-toggle[b-datentab] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.5rem 0.75rem;
        background: transparent;
        border: none;
        color: var(--text-body);
        font-size: 1.0rem;
        font-weight: 600;
        cursor: pointer;
        border-radius: var(--radius);
        transition: all 0.2s ease;
    }
    
    .section-toggle:hover[b-datentab] {
        background: var(--surface-hover);
    }
    
    .section-toggle.active[b-datentab] {
        color: var(--color-primary);
    }
    
    .toggle-icon[b-datentab] {
        color: var(--color-primary);
        font-size: 0.8rem;
    }
    
    .section-title[b-datentab] {
        flex: 1;
        text-align: left;
    }
    
    .presets-count[b-datentab] {
        font-size: 0.85rem;
        color: var(--text-secondary);
        font-weight: 400;
    }
    
    .presets-content[b-datentab] {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid #d0e8ef;
    }
    
    .presets-loading[b-datentab],
    .presets-empty[b-datentab] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        padding: 1rem;
        color: var(--text-secondary);
        font-size: 0.95rem;
    }
    
    /* .spinner-small definition lifted to top-level (see comment near line 80) — keep this block free of it. */

    .preset-create-btn[b-datentab] {
        margin-top: 0.5rem;
        padding: 0.5rem 1rem;
        background: rgba(102, 126, 234, 0.1);
        border: 1px solid rgba(102, 126, 234, 0.3);
        border-radius: var(--radius-sm);
        color: var(--color-primary);
        font-size: 0.95rem;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .preset-create-btn:hover[b-datentab] {
        background: rgba(102, 126, 234, 0.2);
        border-color: var(--color-primary);
    }
    
    .presets-list[b-datentab] {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }
    
    .preset-item[b-datentab] {
        display: flex;
        align-items: stretch;
        gap: 0.3rem;
        background: transparent;
        border: 1px solid #d0e8ef;
        border-radius: var(--radius);
        overflow: hidden;
        transition: all 0.2s;
    }
    
    .preset-item:hover[b-datentab] {
        background: var(--surface-hover);
        border-color: var(--color-primary);
    }
    
    .preset-item.default[b-datentab] {
        border-color: rgba(255, 215, 0, 0.3);
        background: rgba(255, 215, 0, 0.05);
    }
    
    .preset-load-btn[b-datentab] {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
        padding: 0.6rem 0.8rem;
        background: transparent;
        border: none;
        color: var(--text-body);
        text-align: left;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .preset-load-btn:hover[b-datentab] {
        background: rgba(102, 126, 234, 0.1);
    }
    
    .preset-name[b-datentab] {
        font-size: 0.95rem;
        font-weight: 500;
    }
    
    .preset-description[b-datentab] {
        font-size: 0.85rem;
        color: var(--text-secondary);
        line-height: 1.3;
    }
    
    .preset-manage-btn[b-datentab] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        padding: 0;
        background: transparent;
        border: none;
        border-left: 1px solid #d0e8ef;
        color: var(--text-secondary);
        font-size: 1.1rem;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .preset-manage-btn:hover[b-datentab] {
        background: var(--surface-hover);
        color: var(--color-primary);
    }
    


    /* ═══════════ Computed Tracks Panel ═══════════ */

    .computed-tracks-section[b-datentab] {
        border-top: 1px solid var(--border-default);
        padding: 0.5rem;
    }

    /* ═══════════ Computed Track Modal ═══════════ */

    /* position: fixed so the dialog centers on the VIEWPORT, not the chart column.
       (The old position:absolute pinned it inside .chart-container — off-centre/clipped
       on the desktop web layout. In the mobile embed, .chart-container carries a transform
       that scopes `fixed` back to that cell, so the embed still centres within the sheet.) */
    .ct-modal-backdrop[b-datentab] {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.3);
        z-index: var(--z-shell-modal-backdrop);
    }

    .ct-modal[b-datentab] {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: min(880px, 95vw);
        max-height: 90vh;
        z-index: var(--z-shell-modal);
        background: white;
        border-radius: var(--radius, 8px);
        box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,0.18));
        display: flex;
        flex-direction: column;
        overflow: hidden;
        color: var(--text-body);
    }

    .ct-modal-header[b-datentab] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #d0e8ef;
        background: var(--sidebar-bg);
        flex-shrink: 0;
    }

    .ct-modal-header h3[b-datentab] {
        margin: 0;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-primary);
    }

    .ct-modal-close[b-datentab] {
        background: rgba(31, 148, 185, 0.08);
        border: 1px solid rgba(31, 148, 185, 0.15);
        color: var(--text-primary);
        cursor: pointer;
        padding: 0.25rem;
        line-height: 1;
        min-width: 32px;
        min-height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius, 8px);
        font-size: 1.2rem;
    }

    .ct-modal-close:hover[b-datentab] {
        background: rgba(31, 148, 185, 0.14);
        border-color: rgba(31, 148, 185, 0.25);
    }

    .ct-modal-body[b-datentab] {
        padding: 1rem;
        overflow-y: auto;
        flex: 1;
        min-height: 0;
    }

    .ct-modal-columns[b-datentab] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        height: 100%;
    }

    .ct-modal-left[b-datentab],
    .ct-modal-right[b-datentab] {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .ct-modal-left .ct-field[b-datentab] {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .ct-modal-left .ct-track-select[b-datentab] {
        flex: 1;
        min-height: 0;
    }

    .ct-modal-footer[b-datentab] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        border-top: 1px solid #d0e8ef;
        background: var(--sidebar-bg);
        flex-shrink: 0;
        flex-wrap: wrap;
    }

    .ct-modal-footer .ct-error[b-datentab] {
        margin-right: auto;
        flex-basis: 100%;
        color: var(--color-danger);
        font-size: 0.9rem;
    }

    .ct-modal-footer .btn[b-datentab] {
        font-size: 0.9rem;
        font-weight: 500;
        padding: 0.5rem 0.75rem;
        border-radius: var(--radius, 8px);
        transition: all 0.2s ease;
    }

    .ct-modal-footer .btn-primary[b-datentab] {
        background: var(--color-primary);
        color: var(--text-on-primary);
        border: none;
    }

    .ct-modal-footer .btn-primary:hover[b-datentab] {
        opacity: 0.9;
    }

    .ct-modal-footer .btn-outline-secondary[b-datentab] {
        border: 1px solid rgba(31, 148, 185, 0.15);
        background: rgba(31, 148, 185, 0.08);
        color: var(--text-primary);
    }

    .ct-modal-footer .btn-outline-secondary:hover[b-datentab] {
        background: rgba(31, 148, 185, 0.14);
    }

    .ct-op-desc[b-datentab] {
        font-size: 0.9rem;
        color: var(--text-body);
        opacity: 0.7;
        margin-top: 0.3rem;
    }

    .ct-op-req[b-datentab] {
        font-size: 0.85rem;
        color: var(--color-primary);
        margin-top: 0.2rem;
        font-weight: 600;
    }

    .ct-preview[b-datentab] {
        margin-top: auto;
        padding: 0.5rem 0.75rem;
        background: var(--sidebar-bg);
        border: 1px solid #d0e8ef;
        border-radius: var(--radius, 8px);
        font-size: 0.95rem;
        color: var(--text-body);
    }

    .ct-color-picker[b-datentab] {
        width: 48px;
        height: 34px;
        border: 1px solid #d0e8ef;
        border-radius: var(--radius, 8px);
        padding: 2px;
        cursor: pointer;
    }

    .ct-field[b-datentab] {
        margin-bottom: 0.75rem;
    }

    .ct-field > label[b-datentab] {
        display: block;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 0.3rem;
    }

    .ct-input[b-datentab] {
        width: 100%;
        padding: 0.4rem 0.65rem;
        font-size: 0.9rem;
        border: 1px solid #d0e8ef;
        border-radius: var(--radius, 8px);
        background: white;
        color: var(--text-body);
        transition: border-color 0.2s;
    }

    .ct-input:focus[b-datentab] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 2px rgba(31,148,185,0.12);
    }

    /* Responsive: stack columns when chart area is narrow */
    @media (max-width: 800px) {
        .ct-modal-columns[b-datentab] {
            grid-template-columns: 1fr;
            overflow-y: auto;
        }
        .ct-modal-left .ct-track-select[b-datentab] {
            max-height: 120px;
        }
    }

    .ct-track-select[b-datentab] {
        max-height: none;
        overflow-y: auto;
        border: 1px solid #d0e8ef;
        border-radius: var(--radius, 8px);
        padding: 0.25rem;
        background: white;
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .ct-track-option[b-datentab] {
        display: flex;
        align-items: center;
        font-size: 0.95rem;
        padding: 0.35rem 0.5rem;
        cursor: pointer;
        border-radius: var(--radius, 8px);
        gap: 0.4rem;
        min-height: 34px;
        color: var(--text-body);
        transition: all 0.2s ease;
    }

    .ct-track-option:hover[b-datentab] {
        background: var(--surface-hover, rgba(31, 148, 185, 0.06));
    }

    .ct-track-option.selected[b-datentab] {
        background: rgba(31, 148, 185, 0.12);
    }

    .ct-track-option.selected .ct-track-label[b-datentab] {
        color: var(--text-primary);
        font-weight: 600;
    }

    .ct-track-option input[type="checkbox"][b-datentab] {
        flex-shrink: 0;
        margin: 0;
        width: 17px;
        height: 17px;
        accent-color: var(--color-primary);
        cursor: pointer;
    }

    .ct-track-label[b-datentab] {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.95rem;
        min-width: 0;
    }

    .ct-track-unit[b-datentab] {
        color: var(--color-primary);
        font-size: 0.95rem;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .ct-selected-info[b-datentab] {
        font-size: 0.85rem;
        color: var(--color-primary);
        margin-top: 0.35rem;
        font-weight: 600;
    }

    .ct-row[b-datentab] {
        display: flex;
        gap: 0.5rem;
    }

    .ct-row > div[b-datentab] {
        flex: 1;
    }

    .ct-actions[b-datentab] {
        display: flex;
        gap: 0.25rem;
        margin-top: 0.4rem;
    }

    .ct-error[b-datentab] {
        color: var(--color-danger);
        font-size: 0.75rem;
        margin-top: 0.25rem;
    }

    .ct-list[b-datentab] {
        margin-top: 0.25rem;
    }

    .ct-remove[b-datentab] {
        background: none;
        border: none;
        color: var(--color-danger);
        font-size: 1rem;
        cursor: pointer;
        padding: 0 0.25rem;
        line-height: 1;
        margin-left: auto;
    }

    .ct-remove:hover[b-datentab] {
        color: #a71d2a;
    }

    .track-color-dot[b-datentab] {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 0.25rem;
        flex-shrink: 0;
    }
/* /Components/Pages/Heizungen/DatenTab/AnalysisModal.razor.rz.scp.css */
/* Statistik+ dialog — analysis-only rules moved 1:1 from DatenTab.razor.css (code-quality
   step 3c, 2026-08-30) together with the markup in AnalysisModal.razor: tabs, stat cards,
   period-comparison / correlation / distribution / anomaly blocks, footer, the responsive
   overrides for them and the admin cost-analysis styles. Shares DatenTab's CSS scope
   (CssScope="b-datentab" in WebTerm.Web.csproj); the modal chrome (.analysis-modal-overlay,
   .analysis-modal, .analysis-modal-header, .analysis-loading) stays in DatenTab.razor.css. */

    
    .analysis-track-select[b-datentab] {
        padding: 0.5rem 1rem;
        background: white;
        border: 1px solid #d0e8ef;
        color: var(--text-primary);
        border-radius: var(--radius);
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        min-width: 200px;
    }
    
    .analysis-track-select:hover[b-datentab] {
        background: white;
        border-color: var(--color-primary);
        box-shadow: 0 2px 8px rgba(31,148,185,0.15);
    }
    
    .analysis-track-select:focus[b-datentab] {
        outline: none;
        background: white;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(31,148,185,0.15);
    }
    
    .analysis-track-select option[b-datentab] {
        background: white;
        color: var(--text-primary);
        padding: 0.5rem;
    }
    
    .analysis-tabs[b-datentab] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.75rem 1.5rem;
        background: rgba(31, 148, 185, 0.06);
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }
    
    .analysis-tab[b-datentab] {
        padding: 0.6rem 1rem;
        background: rgba(0, 0, 0, 0.03);
        border: 1px solid rgba(0, 0, 0, 0.08);
        color: var(--text-secondary);
        border-radius: var(--radius);
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap;
        font-size: 0.85rem;
        font-weight: 600;
        flex-shrink: 0;
    }
    
    .analysis-tab:hover[b-datentab] {
        background: white;
        color: var(--text-primary);
        transform: translateY(-2px);
    }
    
    .analysis-tab.active[b-datentab] {
        background: var(--color-primary);
        color: var(--text-primary);
        border-color: transparent;
        box-shadow: 0 4px 12px rgba(31, 148, 185, 0.2);
    }
    
    .analysis-content[b-datentab] {
        flex: 1;
        overflow-y: auto;
        padding: 1.5rem;
    }
    
    .analysis-section[b-datentab] {
        margin-bottom: 2rem;
    }
    
    .analysis-section-title[b-datentab] {
        font-size: 1.15rem;
        font-weight: 600;
        color: var(--color-primary);
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #d0e8ef;
    }
    
    .stats-grid[b-datentab] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
    }
    
    .stat-card[b-datentab] {
        background: rgba(0, 0, 0, 0.03);
        padding: 1rem;
        border-radius: var(--radius-md);
        border-left: 3px solid var(--color-primary);
        transition: all 0.2s;
    }
    
    .stat-card:hover[b-datentab] {
        background: rgba(0, 0, 0, 0.05);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    
    .stat-label[b-datentab] {
        color: var(--text-secondary);
        font-size: 0.85rem;
        margin-bottom: 0.4rem;
        font-weight: 500;
    }
    
    .stat-value[b-datentab] {
        color: var(--text-primary);
        font-size: 1.4rem;
        font-weight: 700;
        font-family: 'Consolas', 'Monaco', monospace;
        line-height: 1.2;
    }
    
    .stat-detail[b-datentab] {
        color: var(--text-secondary);
        font-size: 0.8rem;
        margin-top: 0.4rem;
        font-family: 'Consolas', 'Monaco', monospace;
    }
    
    .analysis-placeholder[b-datentab] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 400px;
        gap: 1rem;
        text-align: center;
    }
    
    .analysis-placeholder h3[b-datentab] {
        color: var(--color-primary);
        font-size: 2rem;
        margin: 0;
    }
    
    .analysis-placeholder p[b-datentab] {
        color: var(--text-secondary);
        font-size: 1.1rem;
        margin: 0.5rem 0;
    }
    
    .analysis-placeholder-hint[b-datentab] {
        color: var(--text-secondary);
        font-size: 0.9rem;
        font-style: italic;
    }
    
    .analysis-info-text[b-datentab] {
        color: var(--text-secondary);
        font-size: 1rem;
        text-align: center;
        padding: 2rem;
    }
    
    /* Comparison Grid */
    .comparison-grid[b-datentab] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
    }
    
    .comparison-card[b-datentab] {
        background: rgba(0, 0, 0, 0.03);
        padding: 1.2rem;
        border-radius: var(--radius-md);
        border-left: 3px solid var(--color-primary);
        transition: all 0.2s;
    }
    
    .comparison-card:hover[b-datentab] {
        background: rgba(0, 0, 0, 0.05);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    
    .comparison-title[b-datentab] {
        font-size: 1rem;
        font-weight: 600;
        color: var(--color-primary);
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid rgba(31, 148, 185, 0.2);
    }
    
    .comparison-values[b-datentab] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .comparison-value[b-datentab] {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .comparison-label[b-datentab] {
        color: var(--text-secondary);
        font-size: 0.85rem;
    }
    
    .comparison-number[b-datentab] {
        color: var(--text-primary);
        font-size: 1.1rem;
        font-weight: 600;
        font-family: 'Consolas', 'Monaco', monospace;
    }
    
    .comparison-diff[b-datentab] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.8rem;
        background: rgba(0, 0, 0, 0.2);
        border-radius: var(--radius);
        margin-top: 0.5rem;
    }
    
    .comparison-arrow[b-datentab] {
        font-size: 1.5rem;
    }
    
    .comparison-percent[b-datentab] {
        font-size: 1.3rem;
        font-weight: 700;
        font-family: 'Consolas', 'Monaco', monospace;
    }
    
    .comparison-percent.positive[b-datentab] {
        color: var(--color-primary);
    }
    
    .comparison-percent.negative[b-datentab] {
        color: var(--color-danger);
    }
    
    .comparison-percent.neutral[b-datentab] {
        color: #FFD93D;
    }
    
    .comparison-absolute[b-datentab] {
        color: var(--text-secondary);
        font-size: 0.9rem;
        font-family: 'Consolas', 'Monaco', monospace;
    }
    
    /* Correlation Tab */
    .correlation-list[b-datentab] {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    
    .correlation-card[b-datentab] {
        background: rgba(0, 0, 0, 0.03);
        padding: 1rem;
        border-radius: var(--radius);
        border-left: 3px solid rgba(31, 148, 185, 0.35);
        transition: all 0.2s;
    }
    
    .correlation-card:hover[b-datentab] {
        background: rgba(0, 0, 0, 0.05);
        transform: translateX(4px);
    }
    
    .correlation-header[b-datentab] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }
    
    .correlation-tracks[b-datentab] {
        font-weight: 600;
        color: var(--text-primary);
    }
    
    .correlation-value[b-datentab] {
        font-size: 1.2rem;
        font-weight: 700;
        font-family: 'Consolas', 'Monaco', monospace;
    }
    
    .correlation-strong[b-datentab] {
        color: var(--color-primary);
    }
    
    .correlation-moderate[b-datentab] {
        color: #FFD93D;
    }
    
    .correlation-weak[b-datentab] {
        color: var(--text-secondary);
    }
    
    .correlation-bar[b-datentab] {
        height: 8px;
        background: rgba(31, 148, 185, 0.06);
        border-radius: var(--radius-sm);
        overflow: hidden;
        margin: 0.5rem 0;
    }
    
    .correlation-bar-fill[b-datentab] {
        height: 100%;
        transition: width 0.3s;
    }
    
    .correlation-interpretation[b-datentab] {
        font-size: 0.85rem;
        color: var(--text-secondary);
        font-style: italic;
    }
    
    /* Distribution Tab */
    .histogram-container[b-datentab] {
        background: rgba(31, 148, 185, 0.06);
        padding: 1.5rem;
        border-radius: var(--radius-md);
        overflow-x: auto;
    }
    
    .histogram-ascii[b-datentab] {
        color: var(--color-primary);
        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
        font-size: 0.9rem;
        line-height: 1.4;
        margin: 0;
        white-space: pre;
    }
    
    /* Anomalies Tab */
    .anomaly-list[b-datentab] {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        max-height: 500px;
        overflow-y: auto;
    }
    
    .anomaly-card[b-datentab] {
        background: rgba(0, 0, 0, 0.03);
        padding: 1rem;
        border-radius: var(--radius);
        border-left: 4px solid;
        transition: all 0.2s;
    }
    
    .anomaly-card:hover[b-datentab] {
        background: rgba(0, 0, 0, 0.05);
        transform: translateX(4px);
    }
    
    .anomaly-kritisch[b-datentab] {
        border-left-color: var(--color-danger);
    }
    
    .anomaly-warnung[b-datentab] {
        border-left-color: #FFD93D;
    }
    
    .anomaly-gering[b-datentab] {
        border-left-color: var(--color-primary);
    }
    
    .anomaly-header[b-datentab] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.8rem;
    }
    
    .anomaly-time[b-datentab] {
        font-size: 0.9rem;
        color: var(--text-secondary);
        font-family: 'Consolas', 'Monaco', monospace;
    }
    
    .anomaly-severity[b-datentab] {
        padding: 0.2rem 0.8rem;
        border-radius: var(--radius-lg);
        font-size: 0.8rem;
        font-weight: 600;
    }
    
    .anomaly-kritisch .anomaly-severity[b-datentab] {
        background: rgba(255, 107, 107, 0.2);
        color: var(--color-danger);
    }
    
    .anomaly-warnung .anomaly-severity[b-datentab] {
        background: rgba(255, 217, 61, 0.2);
        color: #FFD93D;
    }
    
    .anomaly-gering .anomaly-severity[b-datentab] {
        background: rgba(31, 148, 185, 0.08);
        color: var(--color-primary);
    }
    
    .anomaly-values[b-datentab] {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        margin-bottom: 0.8rem;
    }
    
    .anomaly-value-row[b-datentab] {
        display: flex;
        justify-content: space-between;
        font-size: 0.9rem;
    }
    
    .anomaly-label[b-datentab] {
        color: var(--text-secondary);
    }
    
    .anomaly-number[b-datentab] {
        color: var(--text-primary);
        font-weight: 600;
        font-family: 'Consolas', 'Monaco', monospace;
    }
    
    .anomaly-description[b-datentab] {
        font-size: 0.85rem;
        color: var(--text-secondary);
        font-style: italic;
        padding-top: 0.5rem;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }
    
    .anomaly-critical[b-datentab] {
        color: var(--color-danger);
    }
    
    .anomaly-warning[b-datentab] {
        color: #FFD93D;
    }
    
    .anomaly-minor[b-datentab] {
        color: var(--color-primary);
    }

    .analysis-footer[b-datentab] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.5rem;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        background: rgba(31, 148, 185, 0.06);
    }
    
    .analysis-info[b-datentab] {
        display: flex;
        gap: 2rem;
        color: var(--text-secondary);
        font-size: 0.9rem;
    }
    
    .analysis-actions[b-datentab] {
        display: flex;
        gap: 1rem;
    }
    
    .analysis-btn[b-datentab] {
        padding: 0.7rem 1.5rem;
        background: var(--color-primary);
        color: var(--text-primary);
        border: none;
        border-radius: var(--radius);
        cursor: pointer;
        font-weight: 600;
        font-size: 0.95rem;
        transition: all 0.2s;
    }
    
    .analysis-btn:hover:not(:disabled)[b-datentab] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(31, 148, 185, 0.3);
    }
    
    .analysis-btn:disabled[b-datentab] {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    .analysis-btn.secondary[b-datentab] {
        background: white;
        color: var(--text-secondary);
    }
    
    .analysis-btn.secondary:hover[b-datentab] {
        background: white;
        color: var(--text-primary);
    }

    /* Responsive */
    @media (max-width: 1200px) {
        .stats-grid[b-datentab] {
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        }
    }

    @media (max-width: 768px) {
        .analysis-track-select[b-datentab] {
            min-width: 150px;
            font-size: 0.85rem;
        }
        
        .analysis-tabs[b-datentab] {
            flex-wrap: wrap;
        }
        
        .analysis-tab[b-datentab] {
            font-size: 0.85rem;
            padding: 0.5rem 0.8rem;
        }
        
        .stats-grid[b-datentab] {
            grid-template-columns: 1fr;
        }
        
        .analysis-footer[b-datentab] {
            flex-direction: column;
            gap: 1rem;
        }
        
        .analysis-info[b-datentab] {
            flex-direction: column;
            gap: 0.5rem;
        }
    }


    /* Cost Analysis Styles (Admin-Only) */
    .cost-tab[b-datentab] {
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
        color: var(--text-on-primary);
    }

    .cost-total[b-datentab] {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: var(--text-primary);
    }

    .cost-total .stat-label[b-datentab],
    .cost-total .stat-value[b-datentab],
    .cost-total .stat-detail[b-datentab] {
        color: var(--text-primary);
    }

    .cost-projection[b-datentab] {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        color: var(--text-primary);
    }

    .cost-projection .stat-label[b-datentab],
    .cost-projection .stat-value[b-datentab],
    .cost-projection .stat-detail[b-datentab] {
        color: var(--text-primary);
    }

    .cost-increase[b-datentab] {
        background: #fef2f2;
        border-left: 4px solid var(--color-danger);
    }

    .cost-increase .stat-value[b-datentab] {
        color: var(--color-danger);
    }

    .cost-decrease[b-datentab] {
        background: #f0fdf4;
        border-left: 4px solid #10b981;
    }

    .cost-decrease .stat-value[b-datentab] {
        color: #059669;
    }

    .peak-distribution[b-datentab] {
        margin-top: 1rem;
    }

    .peak-bar[b-datentab] {
        display: flex;
        height: 40px;
        border-radius: var(--radius-md);
        overflow: hidden;
        background: #f3f4f6;
    }

    .peak-bar-fill[b-datentab] {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.875rem;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .peak-bar-fill.peak[b-datentab] {
        background: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning) 100%);
        color: var(--text-primary);
    }

    .peak-bar-fill.offpeak[b-datentab] {
        background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
        color: var(--text-primary);
    }

    .btn-link[b-datentab] {
        display: inline-block;
        padding: 0.75rem 1.5rem;
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
        color: var(--text-on-primary);
        text-decoration: none;
        border-radius: var(--radius-md);
        font-weight: 500;
        transition: all 0.2s;
    }

    .btn-link:hover[b-datentab] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }
/* /Components/Pages/Heizungen/DatenTab/DataEditModal.razor.rz.scp.css */
/* DataEditModal shares DatenTab's CSS scope (CssScope="b-datentab" in WebTerm.Web.csproj):
   the modal chrome it uses (.analysis-modal-overlay, .analysis-modal, .mini-btn, .sb-btn)
   is defined once in DatenTab.razor.css and applies here because both components carry
   the same scope attribute. This file exists so the compiler stamps that attribute on the
   component's markup; the modal's own styling is inline in DataEditModal.razor. */
/* /Components/Pages/Heizungen/DatenTab/DataExportModal.razor.rz.scp.css */
/* Daten-Export dialog — moved 1:1 from DatenTab.razor.css (code-quality step 3c, 2026-08-30)
   together with the markup in DataExportModal.razor. Shares DatenTab's CSS scope
   (CssScope="b-datentab" in WebTerm.Web.csproj); the modal chrome (.analysis-modal-overlay,
   .analysis-modal-header, .btn-primary, .checkbox-label) stays in DatenTab.razor.css. */

    /* ═══ Data Export Modal ═══ */
    .export-modal[b-datentab] {
        background: var(--surface-card);
        border-radius: var(--radius-lg);
        border: 1px solid var(--border-default);
        width: 95%;
        max-width: 680px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.15);
        animation: slideIn 0.3s ease-out;
    }

    .export-modal .analysis-modal-header[b-datentab] {
        padding: 1rem 1.25rem;
        background: var(--sidebar-bg);
        border-bottom: 1px solid var(--border-default);
    }

    .export-modal .analysis-modal-header h3[b-datentab] {
        font-size: 1.15rem;
        color: var(--color-primary);
    }

    .export-modal-body[b-datentab] {
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    .export-section[b-datentab] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .export-label[b-datentab] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-secondary);
    }

    .export-range-btns[b-datentab] {
        display: flex;
        gap: 0.4rem;
        flex-wrap: wrap;
    }

    .export-opt-btn[b-datentab] {
        padding: 0.5rem 1rem;
        border-radius: var(--radius);
        border: 1px solid var(--border-default);
        background: var(--surface-card);
        color: var(--text-primary);
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.15s;
    }

    .export-opt-btn:hover:not(:disabled)[b-datentab] {
        border-color: var(--color-primary);
        background: var(--color-primary-10);
    }

    .export-opt-btn.active[b-datentab] {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: #fff;
        font-weight: 600;
    }

    .export-opt-btn:disabled[b-datentab] {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .export-date-row[b-datentab] {
        display: flex;
        gap: 0.75rem;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 0.25rem;
    }

    .export-date-field[b-datentab] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .export-date-field label[b-datentab] {
        font-size: 0.85rem;
        color: var(--text-secondary);
        min-width: fit-content;
    }

    .export-date-input[b-datentab] {
        padding: 0.4rem 0.6rem;
        border-radius: var(--radius);
        border: 1px solid var(--border-default);
        background: var(--surface-card);
        color: var(--text-primary);
        font-size: 0.9rem;
    }

    .export-date-input:focus[b-datentab] {
        border-color: var(--color-primary);
        outline: none;
        box-shadow: 0 0 0 2px var(--color-primary-10);
    }

    .export-range-info[b-datentab] {
        font-size: 0.85rem;
        color: var(--text-secondary);
        display: flex;
        align-items: center;
    }

    .export-track-info[b-datentab] {
        font-size: 0.9rem;
        color: var(--text-primary);
    }

    .export-estimate[b-datentab] {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        font-size: 0.85rem;
        color: var(--text-secondary);
        padding: 0.6rem 0.85rem;
        background: var(--surface-sunken);
        border-radius: var(--radius);
        border: 1px solid var(--border-subtle);
    }

    .export-warn[b-datentab] {
        color: var(--color-warning);
        font-weight: 500;
    }

    .export-error[b-datentab] {
        padding: 0.6rem 0.85rem;
        border-radius: var(--radius);
        background: var(--color-danger-light);
        border: 1px solid var(--color-danger-10);
        color: var(--color-danger);
        font-size: 0.9rem;
    }

    .export-actions[b-datentab] {
        display: flex;
        justify-content: flex-end;
        gap: 0.5rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--border-default);
    }

    .export-actions .btn-secondary[b-datentab] {
        padding: 0.6rem 1.3rem;
        background: var(--surface-card);
        border: 1px solid var(--border-default);
        border-radius: var(--radius);
        color: var(--text-primary);
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.15s;
    }

    .export-actions .btn-secondary:hover[b-datentab] {
        background: var(--surface-sunken);
        border-color: var(--border-strong);
    }

    .export-actions .btn-primary[b-datentab] {
        padding: 0.6rem 1.3rem;
        background: var(--color-primary);
        border: none;
        border-radius: var(--radius);
        color: #fff;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s;
        box-shadow: 0 2px 8px rgba(30, 148, 188, 0.25);
    }

    .export-actions .btn-primary:hover:not(:disabled)[b-datentab] {
        background: var(--color-primary-hover);
        box-shadow: 0 4px 12px rgba(30, 148, 188, 0.35);
    }

    .export-actions .btn-primary:disabled[b-datentab] {
        opacity: 0.5;
        cursor: not-allowed;
    }
/* /Components/Pages/Heizungen/DatenTab/PresetModals.razor.rz.scp.css */
/* Preset save/manage dialogs — moved 1:1 from DatenTab.razor.css (code-quality step 3c,
   2026-08-30) together with the markup in PresetModals.razor. Shares DatenTab's CSS scope
   (CssScope="b-datentab" in WebTerm.Web.csproj), so these rules keep their place in the
   cascade: the bundle lists this file after DatenTab.razor.css, exactly where the block
   used to sit relative to the earlier .btn-primary / .info-label definitions. */

    /* Preset Modal Overlay */
    .preset-modal-overlay[b-datentab] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.75);
        backdrop-filter: blur(4px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2000;
        animation: fadeIn 0.2s;
    }
    
    .preset-modal[b-datentab] {
        background: white;
        border: 1px solid rgba(102, 126, 234, 0.3);
        border-radius: var(--radius-lg);
        width: 90%;
        max-width: 500px;
        max-height: 90vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-shadow: 0 20px 60px var(--surface-overlay);
        animation: slideUp-b-datentab 0.3s ease-out;
    }
    
    .preset-modal-header[b-datentab] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.5rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        background: rgba(102, 126, 234, 0.1);
    }
    
    .preset-modal-header h3[b-datentab] {
        margin: 0;
        color: var(--text-body);
        font-size: 1.2rem;
    }
    
    .preset-modal-content[b-datentab] {
        flex: 1;
        padding: 1.5rem;
        overflow-y: auto;
    }
    
    .form-group[b-datentab] {
        margin-bottom: 1.2rem;
    }
    
    .form-group label[b-datentab] {
        display: block;
        margin-bottom: 0.4rem;
        color: var(--text-secondary);
        font-size: 0.85rem;
        font-weight: 500;
    }
    
    .form-input[b-datentab] {
        width: 100%;
        padding: 0.7rem;
        background: rgba(0, 0, 0, 0.03);
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: var(--radius);
        color: var(--text-body);
        font-size: 0.9rem;
        transition: all 0.2s;
    }
    
    .form-input:focus[b-datentab] {
        outline: none;
        border-color: var(--color-primary);
        background: rgba(0, 0, 0, 0.05);
    }
    
    .form-textarea[b-datentab] {
        width: 100%;
        padding: 0.7rem;
        background: rgba(0, 0, 0, 0.03);
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: var(--radius);
        color: var(--text-body);
        font-size: 0.85rem;
        font-family: inherit;
        resize: vertical;
        transition: all 0.2s;
    }
    
    .form-textarea:focus[b-datentab] {
        outline: none;
        border-color: var(--color-primary);
        background: rgba(0, 0, 0, 0.05);
    }
    
    .form-group-checkbox[b-datentab] {
        margin-bottom: 1.2rem;
    }
    
    .checkbox-label[b-datentab] {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        cursor: pointer;
        font-size: 0.9rem;
        color: var(--text-body);
    }
    
    .checkbox-label input[type="checkbox"][b-datentab] {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }
    
    .form-hint[b-datentab] {
        margin-top: 0.4rem;
        color: var(--text-secondary);
        font-size: 0.75rem;
        line-height: 1.4;
    }
    
    .preset-info[b-datentab] {
        padding: 1rem;
        background: rgba(0,0,0,0.02);
        border: 1px solid rgba(0, 0, 0, 0.03);
        border-radius: var(--radius);
        margin-bottom: 1rem;
    }
    
    .info-row[b-datentab] {
        display: flex;
        justify-content: space-between;
        padding: 0.4rem 0;
        font-size: 0.85rem;
    }
    
    .info-label[b-datentab] {
        color: var(--text-secondary);
    }
    
    .info-value[b-datentab] {
        color: var(--text-body);
        font-weight: 500;
    }
    
    .preset-message[b-datentab] {
        padding: 0.8rem;
        border-radius: var(--radius);
        font-size: 0.85rem;
        text-align: center;
        margin-top: 1rem;
    }
    
    .preset-message.success[b-datentab] {
        background: rgba(31, 148, 185, 0.08);
        border: 1px solid rgba(31, 148, 185, 0.2);
        color: var(--color-primary);
    }
    
    .preset-message.error[b-datentab] {
        background: rgba(255, 99, 99, 0.1);
        border: 1px solid rgba(255, 99, 99, 0.3);
        color: #ff6363;
    }
    
    .preset-modal-footer[b-datentab] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.5rem;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        background: rgba(0, 0, 0, 0.2);
    }
    
    .footer-right[b-datentab] {
        display: flex;
        gap: 0.6rem;
    }
    
    .btn-primary[b-datentab],
    .btn-secondary[b-datentab],
    .btn-danger[b-datentab] {
        padding: 0.6rem 1.2rem;
        border: none;
        border-radius: var(--radius);
        font-size: 0.85rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .btn-primary[b-datentab] {
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
        color: var(--text-on-primary);
    }
    
    .btn-primary:hover:not(:disabled)[b-datentab] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }
    
    .btn-primary:disabled[b-datentab] {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    .btn-secondary[b-datentab] {
        background: rgba(0, 0, 0, 0.03);
        border: 1px solid rgba(0, 0, 0, 0.08);
        color: var(--text-body);
    }
    
    .btn-secondary:hover:not(:disabled)[b-datentab] {
        background: rgba(0, 0, 0, 0.05);
    }
    
    .btn-danger[b-datentab] {
        background: rgba(255, 99, 99, 0.2);
        border: 1px solid rgba(255, 99, 99, 0.4);
        color: #ff6363;
    }
    
    .btn-danger:hover:not(:disabled)[b-datentab] {
        background: rgba(255, 99, 99, 0.3);
        border-color: #ff6363;
    }
    
    @keyframes slideUp-b-datentab {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
/* /Components/Pages/Heizungen/Datenversand.razor.rz.scp.css */
.datenversand-page[b-mcosv4k6dd] {
    display: flex;
    flex-direction: column;
    background: transparent;
    color: var(--text-body);
    gap: 1rem;
}

.page-header[b-mcosv4k6dd] {
    padding: 0.75rem 1.25rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg, 8px);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.page-header h3[b-mcosv4k6dd] { margin: 0; font-size: 1.1rem; color: var(--color-primary); }

.back-link[b-mcosv4k6dd] {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.9rem;
}
.back-link:hover[b-mcosv4k6dd] { color: var(--color-primary-hover); }

.status-message[b-mcosv4k6dd] {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md, 6px);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}
.status-message.success[b-mcosv4k6dd] { background: var(--color-success-light); color: var(--color-success); }
.status-message.error[b-mcosv4k6dd]   { background: var(--color-danger-light);  color: var(--color-danger); }
.status-message .close-btn[b-mcosv4k6dd] { background: none; border: none; color: inherit; cursor: pointer; margin-left: auto; font-size: 1.2rem; }

/* Cards */
.dv-card[b-mcosv4k6dd] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg, 8px);
    overflow: hidden;
}
.dv-card-header[b-mcosv4k6dd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-default);
}
.dv-card-header h4[b-mcosv4k6dd] { margin: 0; font-size: 0.95rem; color: var(--color-primary); }

.dv-muted[b-mcosv4k6dd] { color: var(--text-secondary); font-size: 0.82rem; margin: 0.25rem 0 0; }

/* Empty state */
.empty-state[b-mcosv4k6dd] {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    padding: 2rem 1rem; color: var(--text-secondary);
}
.empty-state .icon[b-mcosv4k6dd] { font-size: 1.8rem; }

/* Table */
.table-scroll[b-mcosv4k6dd] { overflow-x: auto; }
.dv-table[b-mcosv4k6dd] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.dv-table th[b-mcosv4k6dd], .dv-table td[b-mcosv4k6dd] {
    padding: 0.5rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: top;
}
.dv-table th[b-mcosv4k6dd] {
    background: var(--surface-page);
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
}
.dv-actions[b-mcosv4k6dd] { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }

.run-ok[b-mcosv4k6dd]  { color: var(--color-success); font-size: 0.78rem; width: 100%; margin: 0.25rem 0 0; }
.run-err[b-mcosv4k6dd] { color: var(--color-danger);  font-size: 0.78rem; width: 100%; margin: 0.25rem 0 0; }

.confirm-inline[b-mcosv4k6dd] {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.8rem; color: var(--text-secondary);
}

/* History sub-table */
.history[b-mcosv4k6dd] { width: 100%; margin-top: 0.4rem; }
.dv-subtable[b-mcosv4k6dd] { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.dv-subtable th[b-mcosv4k6dd], .dv-subtable td[b-mcosv4k6dd] {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--border-subtle);
    text-align: left;
}
.dv-subtable th[b-mcosv4k6dd] { color: var(--text-secondary); font-weight: 600; }

/* Form */
.dv-form-body[b-mcosv4k6dd] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.form-row[b-mcosv4k6dd] { margin-bottom: 0.25rem; }
.form-row > label[b-mcosv4k6dd] { display: block; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.25rem; }
.form-row input[b-mcosv4k6dd], .form-row textarea[b-mcosv4k6dd], .form-row select[b-mcosv4k6dd] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-body);
    font-size: 0.9rem;
    box-sizing: border-box;
}
.form-row input:focus[b-mcosv4k6dd], .form-row textarea:focus[b-mcosv4k6dd], .form-row select:focus[b-mcosv4k6dd] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-10);
}
.form-row textarea[b-mcosv4k6dd] { resize: vertical; font-family: inherit; }
.two-col[b-mcosv4k6dd] { display: flex; gap: 0.75rem; }
.form-field[b-mcosv4k6dd] { flex: 1; min-width: 0; }
.form-field label[b-mcosv4k6dd] { display: block; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.25rem; }

.dv-checks[b-mcosv4k6dd] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface-page);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
}
.dv-checks .check[b-mcosv4k6dd] {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.85rem; color: var(--text-body); cursor: pointer;
    margin: 0;
}
.dv-checks .check input[b-mcosv4k6dd] { width: auto; }

.dv-creds[b-mcosv4k6dd] {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md, 6px);
    padding: 0.75rem 1rem 1rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--surface-page);
}
.dv-creds legend[b-mcosv4k6dd] { font-size: 0.82rem; color: var(--color-primary); font-weight: 600; padding: 0 0.4rem; }

.keep-hint[b-mcosv4k6dd] { color: var(--text-secondary); font-weight: 400; font-size: 0.72rem; }

.dv-dezem-hint[b-mcosv4k6dd] { color: var(--text-secondary); font-size: 0.72rem; line-height: 1.5; margin: 0.4rem 0 0 0; }
.dv-dezem-hint code[b-mcosv4k6dd] { background: var(--surface-sunken); padding: 0.05rem 0.3rem; border-radius: 4px; }

/* Buttons */
.form-actions[b-mcosv4k6dd] { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.btn-save[b-mcosv4k6dd] { padding: 0.5rem 1rem; background: var(--color-primary); color: var(--text-on-primary); border: none; border-radius: var(--radius-sm); cursor: pointer; font-weight: 600; font-size: 0.85rem; }
.btn-save:hover[b-mcosv4k6dd] { background: var(--color-primary-hover); }
.btn-save:disabled[b-mcosv4k6dd] { opacity: 0.5; cursor: not-allowed; }
.btn-cancel[b-mcosv4k6dd] { padding: 0.5rem 1rem; background: var(--surface-page); color: var(--text-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-sm); cursor: pointer; font-size: 0.85rem; }
.btn-cancel:hover[b-mcosv4k6dd] { background: var(--surface-hover); }
.btn-delete[b-mcosv4k6dd] { padding: 0.5rem 1rem; background: var(--color-danger); color: var(--text-on-primary); border: none; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.85rem; }
.btn-delete.mini[b-mcosv4k6dd], .btn-cancel.mini[b-mcosv4k6dd] { padding: 0.2rem 0.55rem; font-size: 0.78rem; }

.mini-btn[b-mcosv4k6dd] {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border-default);
    background: transparent;
    color: var(--text-body);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.78rem;
    white-space: nowrap;
}
.mini-btn:hover[b-mcosv4k6dd] { background: var(--surface-hover); }
.mini-btn:disabled[b-mcosv4k6dd] { opacity: 0.5; cursor: not-allowed; }
.mini-btn.danger[b-mcosv4k6dd] { border-color: var(--color-danger); color: var(--color-danger); }

/* Loading / error */
.loading-screen[b-mcosv4k6dd], .error-screen[b-mcosv4k6dd] {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; color: var(--text-secondary); gap: 1rem;
    padding: 3rem 1rem;
}
.error-screen .icon[b-mcosv4k6dd] { font-size: 2.5rem; }
.error-screen h3[b-mcosv4k6dd] { margin: 0; color: var(--text-body); }
.loading-screen .spinner[b-mcosv4k6dd] {
    width: 50px; height: 50px;
    border: 4px solid var(--border-default); border-top-color: var(--color-primary);
    border-radius: 50%; animation: dv-spin-b-mcosv4k6dd 1s linear infinite;
}
.btn-back[b-mcosv4k6dd] {
    padding: 0.75rem 1.5rem; background: var(--color-primary); color: var(--text-on-primary);
    text-decoration: none; border-radius: var(--radius); font-weight: 500;
}

@keyframes dv-spin-b-mcosv4k6dd { to { transform: rotate(360deg); } }

@media (max-width: 720px) {
    .two-col[b-mcosv4k6dd] { flex-direction: column; gap: 0.5rem; }
}
/* /Components/Pages/Heizungen/DauerpingModal.razor.rz.scp.css */
/* Dauerping dialog — a compact live ping console. A child component owns its own CSS
   (classes set here never inherit the parent's scoped styles). All colours are tokens. */

.dauerping-modal[b-xz8aypi9ud] {
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}

.dauerping-host[b-xz8aypi9ud] {
    font-family: var(--font-mono, monospace);
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-left: 0.5rem;
}

.dauerping-stats[b-xz8aypi9ud] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    padding: 0.6rem 1.5rem;
    border-bottom: 1px solid var(--border-default);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.dauerping-stats strong[b-xz8aypi9ud] { color: var(--text-primary); }
.dauerping-stats .dauerping-loss[b-xz8aypi9ud] { color: var(--color-danger); }

.dauerping-log[b-xz8aypi9ud] {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 1.5rem;
    background: var(--surface-sunken);
    font-family: var(--font-mono, monospace);
    font-size: 0.8rem;
    line-height: 1.5;
    min-height: 8rem;
}

.dauerping-line[b-xz8aypi9ud] { color: var(--text-primary); white-space: pre-wrap; }
.dauerping-waiting[b-xz8aypi9ud] { color: var(--text-secondary); font-style: italic; }

.dauerping-footer[b-xz8aypi9ud] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--border-default);
}

.dauerping-status[b-xz8aypi9ud] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: auto;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.dauerping-dot[b-xz8aypi9ud] {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--text-secondary);
}

.dauerping-dot-live[b-xz8aypi9ud] {
    background: var(--color-success);
    animation: dauerping-pulse-b-xz8aypi9ud 1.2s ease-in-out infinite;
}

@keyframes dauerping-pulse-b-xz8aypi9ud {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
/* /Components/Pages/Heizungen/DokumentePage.razor.rz.scp.css */
/* Dokumente page — per-controller document workspace (ADR-0028).
   Mirrors KontaktePage.razor.css so the two sibling pages in the
   Anlagespezifisches dropdown feel like part of the same family. */

.dokumente-page[b-nwih2iwcuj] {
    display: flex;
    flex-direction: column;
    background: transparent;
    color: var(--text-body);
    gap: 1rem;
}

/* ── Page header ──────────────────────────────────────── */

.page-header[b-nwih2iwcuj] {
    padding: 0.75rem 1.25rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg, 8px);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.page-title[b-nwih2iwcuj] {
    margin: 0;
    font-size: 1.1rem;
    color: var(--color-primary);
    font-weight: 600;
}

.back-link[b-nwih2iwcuj] {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.9rem;
    white-space: nowrap;
}
.back-link:hover[b-nwih2iwcuj] { color: var(--color-primary-hover); }

.intro-text[b-nwih2iwcuj] {
    color: var(--text-secondary);
    font-size: 0.9rem;
    max-width: 780px;
    margin: 0;
    line-height: 1.5;
}

/* ── Cross-scope search entry point (ADR-0172 stage 2) ───────── */

.dok-plant-search form[b-nwih2iwcuj] {
    display: flex;
    gap: 0.5rem;
    max-width: 520px;
}

.dok-plant-search input[b-nwih2iwcuj] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-body);
    font-size: 0.85rem;
}
.dok-plant-search input:focus[b-nwih2iwcuj] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-10);
}

/* ── Stacked layout — upload above, list below, both full-width ── */

.dok-stack[b-nwih2iwcuj] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dok-upload-panel[b-nwih2iwcuj],
.dok-list-panel[b-nwih2iwcuj] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg, 8px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.dok-list-panel .upload-card-header[b-nwih2iwcuj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dok-count-badge[b-nwih2iwcuj] {
    background: var(--color-primary);
    color: var(--text-on-primary);
    border-radius: var(--radius-full);
    padding: 0.05rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: auto;
}

.dok-category-hint[b-nwih2iwcuj] {
    font-size: 0.78rem;
    color: var(--text-secondary);
    background: var(--color-primary-10, var(--surface-page));
    border-left: 3px solid var(--color-primary);
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    margin-top: 0.35rem;
    line-height: 1.4;
}

/* ── Document-list cell typography ───────────────────── */

.doc-title[b-nwih2iwcuj] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-body);
    line-height: 1.3;
}

.doc-filename-sub[b-nwih2iwcuj] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: monospace;
    margin-top: 0.15rem;
    word-break: break-all;
}

.doc-description[b-nwih2iwcuj] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.35rem;
    line-height: 1.4;
    max-width: 540px;
    white-space: pre-wrap;
}

.empty-state-inline[b-nwih2iwcuj] {
    border: none;
    background: transparent;
    margin: 0;
    padding: 2.5rem 1rem;
    text-align: center;
}

.doc-table-inline[b-nwih2iwcuj] {
    border: none;
    border-radius: 0;
    max-width: none;
}

/* ── Card (upload form) ───────────────────────────────── */

.upload-card[b-nwih2iwcuj] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg, 8px);
    overflow: hidden;
    /* Stacked layout (upload above, list below) — both go full
       page width. Status messages + empty-state stay narrow on
       purpose because text-blocks read better that way. */
}

.upload-card-header[b-nwih2iwcuj] {
    padding: 0.5rem 1rem;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-default);
    font-size: 0.95rem;
    color: var(--color-primary);
    font-weight: 600;
    min-height: 48px;
    display: flex;
    align-items: center;
}

.upload-card-body[b-nwih2iwcuj] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Form rows (match KontaktePage idiom) ─────────────── */

.dok-form-row[b-nwih2iwcuj] { display: flex; flex-direction: column; gap: 0.25rem; }
.dok-form-row > label[b-nwih2iwcuj] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}
.dok-form-row input[b-nwih2iwcuj],
.dok-form-row textarea[b-nwih2iwcuj],
.dok-form-row select[b-nwih2iwcuj] {
    padding: 0.5rem 0.75rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-body);
    font-size: 0.9rem;
    box-sizing: border-box;
    font-family: inherit;
    width: 100%;
    max-width: 400px;
}
.dok-form-row textarea[b-nwih2iwcuj] { resize: vertical; min-height: 60px; max-width: 600px; }
.dok-form-row select[b-nwih2iwcuj] { max-width: 300px; }
.dok-form-row input:focus[b-nwih2iwcuj],
.dok-form-row textarea:focus[b-nwih2iwcuj],
.dok-form-row select:focus[b-nwih2iwcuj] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-10);
}

/* ADR-0172 Stufe 3 — the confidential checkbox row is not a single-input
   field like the rest of .dok-form-row, so its label + checkbox sit side
   by side instead of being stretched by the generic input rules above. */
.dok-form-check > label[b-nwih2iwcuj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-body);
    margin-bottom: 0;
}
.dok-form-check input[type="checkbox"][b-nwih2iwcuj] {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
}

.dok-form-actions[b-nwih2iwcuj] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

/* Reuse the same btn-save styling as KontaktePage for symmetry. */
.btn-save[b-nwih2iwcuj] {
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: var(--text-on-primary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
}
.btn-save:hover[b-nwih2iwcuj] { background: var(--color-primary-hover); }
.btn-save:disabled[b-nwih2iwcuj] { opacity: 0.5; cursor: not-allowed; }

/* ── Status messages ──────────────────────────────────── */

.status-message[b-nwih2iwcuj] {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md, 6px);
    font-size: 0.85rem;
    max-width: 780px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.status-message.success[b-nwih2iwcuj] { background: var(--color-success-light); color: var(--color-success); }
.status-message.error[b-nwih2iwcuj]   { background: var(--color-danger-light);  color: var(--color-danger); }
.status-message .close-btn[b-nwih2iwcuj] {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    margin-left: auto;
    font-size: 1.2rem;
}

.empty-state[b-nwih2iwcuj] {
    padding: 2rem 1rem;
    background: var(--surface-card);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-lg, 8px);
    color: var(--text-secondary);
    text-align: center;
    max-width: 780px;
}

/* ── Document table ───────────────────────────────────── */

.doc-table-wrapper[b-nwih2iwcuj] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg, 8px);
    overflow: hidden;
}

.doc-table[b-nwih2iwcuj] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.doc-table thead th[b-nwih2iwcuj] {
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-default);
    color: var(--text-secondary);
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.6rem 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.doc-table tbody td[b-nwih2iwcuj] {
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--border-subtle, var(--border-default));
    color: var(--text-body);
    vertical-align: middle;
}

.doc-table tbody tr:last-child td[b-nwih2iwcuj] { border-bottom: none; }
.doc-table tbody tr:hover[b-nwih2iwcuj] { background: var(--surface-hover); }

.doc-name[b-nwih2iwcuj] { display: flex; align-items: center; gap: 0.4rem; font-weight: 500; }

.doc-actions[b-nwih2iwcuj] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

/* ── Loading / error screens ──────────────────────────── */

.loading-screen[b-nwih2iwcuj], .error-screen[b-nwih2iwcuj] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    gap: 1rem;
    padding: 3rem 1rem;
}
.loading-screen .spinner[b-nwih2iwcuj] {
    width: 50px;
    height: 50px;
    border: 4px solid var(--border-default);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-nwih2iwcuj 1s linear infinite;
}
.error-screen .icon[b-nwih2iwcuj] { font-size: 2.5rem; }
.error-screen h3[b-nwih2iwcuj] { margin: 0; color: var(--color-danger); font-size: 1.1rem; }
.btn-back[b-nwih2iwcuj] {
    padding: 0.75rem 1.5rem;
    background: var(--color-primary);
    color: var(--text-on-primary);
    text-decoration: none;
    border-radius: var(--radius);
    font-weight: 500;
}

@keyframes spin-b-nwih2iwcuj { to { transform: rotate(360deg); } }

/* ── Responsive ───────────────────────────────────────── */

@media (max-width: 760px) {
    .doc-table thead[b-nwih2iwcuj] { display: none; }
    .doc-table tbody td[b-nwih2iwcuj] {
        display: block;
        padding: 0.3rem 0.9rem;
        border-bottom: none;
    }
    .doc-table tbody tr[b-nwih2iwcuj] {
        display: block;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--border-default);
    }
    .doc-table tbody tr:last-child[b-nwih2iwcuj] { border-bottom: none; }
}

/* ADR-0036 versions modal — styles moved to
   src/WebTerm.Web/Components/Shared/DocumentVersionsModal.razor.css
   so they apply uniformly when the modal renders from any host
   page (per-controller / per-org / per-user). */
/* /Components/Pages/Heizungen/FernbedienungTab.razor.rz.scp.css */
    .fernbed-tab[b-is6nsass3l] {
        display: flex;
        flex-direction: column;
        height: 100%;
        background: var(--surface-workspace);
        overflow: hidden;
        font-size: 1rem;
        position: relative;
    }

    .term-main[b-is6nsass3l] {
        display: flex;
        flex: 1;
        overflow: hidden;
        min-height: 0;
        /* Anchor for the floating .term-menu-toggle (hamburger). Harmless for
           the other controller types; P2xxx already sets this inline. */
        position: relative;
        /* Width of the menu-tree edge-rail toggle (.term-menu-toggle) and the
           gutter offsets that sit next to it. Parameterised so PiMode (the
           touchscreen kiosk) can double it to a usable touch target — see
           .term-main.pi-touch below. Non-Pi (mouse) stays 12px. */
        --term-rail-w: 12px;
    }

    /* PiMode (touchscreen kiosk): double the edge-rail width so the thin
       12px tap target becomes usable with a finger. The class is added to
       .term-main only when PiMode.Enabled. */
    .term-main.pi-touch[b-is6nsass3l] {
        --term-rail-w: 24px;
    }

    /* === Menu-tree edge-rail toggle ===
       A thin vertical bar pinned to the very left edge of .term-main that
       shows/hides the left menu-tree / control sidebar so the terminal/
       display can use the full width. This mirrors the .sbs-sidebar-toggle
       rail in HeizungConsole (the FB+Visu side-by-side view) so the two
       views share identical chrome — the neutral rgba(0,0,0,…) bar tints
       and the brand rgba(30,148,188,…) hover are deliberately the same.
       (These rgba values are not hex literals, so the design-token ratchet
       is satisfied.)

       Because it's a 12px edge rail — not a floating square — it lives in a
       gutter at the left edge and never hit-test-shadows the terminal's
       navigation buttons (which sit at the bottom-right of the content
       area, far from this rail). Always visible, incl. when collapsed, so
       the user can re-open the menu. Sits above the P2xxx cold-boot overlay
       (z 20 matches the overlay; the rail is a sibling so paint order keeps
       it accessible at the edge). */
    .term-menu-toggle[b-is6nsass3l] {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: var(--term-rail-w);
        padding: 0;
        background: rgba(0, 0, 0, 0.04);
        border: 0;
        border-right: 1px solid rgba(0, 0, 0, 0.08);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-secondary);
        line-height: 1;
        z-index: 20;
        transition: background 0.15s ease, color 0.15s ease, width 0.15s ease, border-right-color 0.15s ease;
    }
    .term-menu-toggle:hover[b-is6nsass3l] {
        background: rgba(30, 148, 188, 0.10);
        color: var(--color-primary);
        border-right-color: rgba(30, 148, 188, 0.5);
        width: calc(var(--term-rail-w) + 4px);
    }
    .term-menu-toggle:focus-visible[b-is6nsass3l] {
        outline: 2px solid var(--color-primary);
        outline-offset: -2px;
    }
    .term-menu-toggle svg[b-is6nsass3l] {
        width: 10px;
        height: 10px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform 0.2s ease;
    }
    /* Default: chevron points right (▶) — "click to open the menu".
       is-open: rotates 180° to point left (◀) — "click to collapse". */
    .term-menu-toggle.is-open svg[b-is6nsass3l] {
        transform: rotate(180deg);
    }
    /* PiMode: the rail is double-width, so enlarge the chevron to match the
       bigger touch target. */
    .term-main.pi-touch .term-menu-toggle svg[b-is6nsass3l] {
        width: 16px;
        height: 16px;
    }
    /* When the menu IS shown, pad the sidebar left by the rail's width so
       the rail sits in a 12px gutter and doesn't overlay the sidebar's
       "Menü"/"Verbindung" title or the search box. When collapsed, the
       content area gets the same 12px left padding so the rail (now at the
       far-left edge) doesn't overlap the leftmost terminal/display content. */
    .term-main:not(.menu-collapsed) .term-sidebar[b-is6nsass3l] {
        padding-left: calc(1rem + var(--term-rail-w));
    }
    .term-main.menu-collapsed .term-content-area[b-is6nsass3l] {
        padding-left: var(--term-rail-w);
    }
    /* When collapsed: hide the sidebar so the display/terminal sibling takes
       the full width. The rail itself stays visible (it's a sibling of the
       sidebar, not a child). */
    .term-main.menu-collapsed .term-sidebar[b-is6nsass3l] {
        display: none;
    }

    /* === Sidebar === */
    .term-sidebar[b-is6nsass3l] {
        width: 280px;
        background: var(--sidebar-bg);
        border-right: 1px solid var(--border-default);
        box-shadow: 2px 0 8px rgba(0,0,0,0.12);
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
        overflow-y: auto;
        flex-shrink: 0;
        transition: width 0.3s ease;
        font-size: 1rem;
    }

    .term-control-section[b-is6nsass3l] {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
    }

    .term-control-title[b-is6nsass3l] {
        font-size: 0.85rem;
        text-transform: uppercase;
        color: var(--text-secondary);
        letter-spacing: 0.05em;
        font-weight: 600;
    }

    /* Wer schaut noch mit (ADR-0190). Eine Mitteilung, keine Warnung: gleichzeitiges
       Bedienen ist auf einem P2xxx erlaubt, deshalb bewusst --color-info und nicht
       --color-warning. Tokens statt Literale (Design-System ist Pflicht). */
    .term-watchers[b-is6nsass3l] {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2);
        border: 1px solid var(--border-default);
        border-left: 3px solid var(--color-info);
        border-radius: var(--radius-sm);
        background: var(--surface-sunken);
        color: var(--text-secondary);
        font-size: var(--font-size-sm);
        line-height: var(--line-height-normal);
    }

    .term-watchers-eye[b-is6nsass3l] {
        flex: 0 0 auto;
        font-size: var(--font-size-base);
    }

    /* Darf umbrechen statt die Spalte zu verbreitern — ein flex-shrink:0 hier hat
       /heizungen schon einmal über den Viewport geschoben. */
    .term-watchers-text[b-is6nsass3l] {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .term-ctrl-btn[b-is6nsass3l] {
        padding: 0.6rem 0.8rem;
        background: var(--surface-hover);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
        color: var(--text-body);
        /* A <button> does NOT inherit font-family, and this app has no form-control reset:
           html/body set 'Segoe UI', so every button in this sidebar was rendering in the
           BROWSER's default UI font while the text around it (section titles, controller info,
           Darstellung) used Segoe UI. Same words, different letterforms, side by side.
           `inherit` is what makes the buttons read as part of the sidebar. */
        font-family: inherit;
        font-size: 0.95rem;
        cursor: pointer;
        transition: all 0.2s;
    }

    .term-ctrl-btn:hover:not(:disabled)[b-is6nsass3l] {
        background: var(--border-strong);
        border-color: var(--color-primary);
    }

    .term-ctrl-btn:disabled[b-is6nsass3l] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .term-ctrl-connect[b-is6nsass3l] { border-color: var(--color-primary); }
    .term-ctrl-disconnect[b-is6nsass3l] { border-color: var(--color-danger); color: var(--color-danger); }
    .term-ctrl-copy[b-is6nsass3l] { border-color: var(--text-secondary); color: var(--text-secondary); }
    /* --surface-hover IS this literal, tokenised (rgba(31,148,185,0.06)). Fixed when the
       button went live on 2026-09-30; the remaining literals in this file sit in rules
       untouched by that change and are left for a dedicated sweep. */
    .term-ctrl-copy:hover:not(:disabled)[b-is6nsass3l] { border-color: var(--color-primary); color: var(--color-primary); background: var(--surface-hover); }
    /* Kurzmeldung neben einem Knopf ("✅ Kopiert", "Wird zurückgesetzt…"). Hatte keine
       eigene Regel und erbte damit die Grundschrift (1rem) — neben einem 0.95rem-Knopf und
       0.85rem-Überschriften wirkte sie zu groß. Gleiche Behandlung wie die anderen
       Nebentexte der Seitenleiste. */
    .term-ctrl-hint[b-is6nsass3l] {
        font-size: 0.85rem;
        color: var(--text-secondary);
        display: block;
        margin: -0.2rem 0 0.5rem;
    }

    /* Screen-copy variant — lives at the top of term-sidebar-bottom, just
       above the controller info card. Slightly tighter top margin so it
       hugs the bottom-block above. */
    .term-screencopy-btn[b-is6nsass3l] { margin-bottom: 0.6rem; width: 100%; }

    /* === Connection Status === */
    .term-status-badge[b-is6nsass3l] {
        font-size: 0.85rem;
        padding: 0.4rem 0.6rem;
        border-radius: var(--radius);
        text-align: center;
        border: 1px solid var(--border-default);
        background: var(--surface-hover);
        color: var(--text-secondary);
    }

    .term-status-badge.connected[b-is6nsass3l] {
        color: var(--color-primary);
        background: rgba(30, 148, 188, 0.1);
        border-color: var(--color-primary);
    }

    .term-status-badge.loading[b-is6nsass3l] {
        color: var(--color-warning);
        background: rgba(245, 158, 11, 0.1);
        border-color: var(--color-warning);
    }

    .term-mode-indicator[b-is6nsass3l] {
        font-size: 0.9rem;
        color: var(--text-secondary);
        text-align: center;
        padding: 0.5rem;
        background: var(--surface-card);
        border-radius: var(--radius);
        border: 1px solid var(--border-default);
    }

    .term-mode-indicator.connected[b-is6nsass3l] {
        color: var(--color-primary);
        background: rgba(30, 148, 188, 0.1);
    }

    .term-mode-indicator.terminal-mode[b-is6nsass3l] {
        color: var(--color-warning);
        background: rgba(245, 158, 11, 0.1);
    }

    /* === Menu Section (P2xxx) === */
    .term-menu-section[b-is6nsass3l] {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .term-search-box[b-is6nsass3l] {
        position: relative;
        margin-bottom: 0.6rem;
    }

    .term-search-box input[b-is6nsass3l] {
        width: 100%;
        padding: 0.6rem 2rem 0.6rem 0.8rem;
        background: var(--surface-hover);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
        color: var(--text-body);
        font-size: 0.95rem;
        outline: none;
        transition: border-color 0.2s;
        box-sizing: border-box;
    }

    .term-search-box input:focus[b-is6nsass3l] {
        border-color: var(--color-primary);
    }

    .term-search-box input[b-is6nsass3l]::placeholder {
        color: var(--text-secondary);
    }

    .term-clear-btn[b-is6nsass3l] {
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: var(--text-secondary);
        cursor: pointer;
        padding: 2px 6px;
        font-size: 0.9rem;
    }

    .term-clear-btn:hover[b-is6nsass3l] {
        color: var(--color-danger);
    }

    .term-menu-nav[b-is6nsass3l] {
        flex: 1;
        overflow-y: auto;
    }

    .term-menu-status[b-is6nsass3l] {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1rem;
        color: var(--text-secondary);
        gap: 0.5rem;
        font-size: 0.95rem;
    }

    .term-menu-status.error[b-is6nsass3l] {
        color: var(--color-danger);
    }

    .term-menu-list[b-is6nsass3l], .term-submenu[b-is6nsass3l] {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .term-submenu[b-is6nsass3l] {
        margin-left: 1.2rem;
        padding-left: 0.75rem;
        border-left: 2px solid var(--border-strong);
        overflow: hidden;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        transform-origin: top;
    }

    .term-submenu.collapsed[b-is6nsass3l] {
        max-height: 0;
        opacity: 0;
        pointer-events: none;
        transform: scaleY(0.95);
    }

    .term-submenu.expanded[b-is6nsass3l] {
        max-height: 2000px;
        opacity: 1;
        pointer-events: auto;
        transform: scaleY(1);
    }

    .term-menu-item[b-is6nsass3l] {
        margin: 3px 0;
    }

    .term-menu-item.match > .term-menu-folder[b-is6nsass3l],
    .term-menu-item.match > .term-menu-leaf[b-is6nsass3l] {
        background: rgba(0, 255, 136, 0.15);
    }

    .term-menu-folder[b-is6nsass3l], .term-menu-leaf[b-is6nsass3l] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0.55rem 0.75rem;
        border-radius: var(--radius);
        cursor: pointer;
        font-size: 0.95rem;
        color: var(--text-secondary);
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .term-menu-folder:hover[b-is6nsass3l], .term-menu-leaf:hover[b-is6nsass3l] {
        background: rgba(0, 0, 0, 0.05);
    }

    .term-menu-folder.open[b-is6nsass3l] {
        color: var(--color-primary);
        background: rgba(30, 148, 188, 0.1);
    }

    .term-menu-text[b-is6nsass3l] {
        flex: 1;
        white-space: nowrap;
    }

    /* Menu Icons */
    .term-menu-icon[b-is6nsass3l] {
        position: relative;
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .term-menu-icon-circle[b-is6nsass3l] {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .term-menu-icon-arrow[b-is6nsass3l] {
        font-size: 0.7rem;
        line-height: 1;
        transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .term-menu-icon.folder[b-is6nsass3l] {
        width: 20px;
        height: 20px;
        background: rgba(106, 154, 122, 0.15);
        border: 1px solid rgba(106, 154, 122, 0.3);
        border-radius: var(--radius-sm);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .term-menu-icon.folder .term-menu-icon-arrow[b-is6nsass3l] {
        color: var(--color-success);
    }

    .term-menu-icon.leaf[b-is6nsass3l] {
        width: 20px;
        height: 20px;
    }

    .term-menu-icon.leaf .term-menu-icon-circle[b-is6nsass3l] {
        width: 8px;
        height: 8px;
        background: var(--surface-hover);
        border: 2px solid var(--border-strong);
        box-shadow: 0 0 0 0 rgba(0, 255, 136, 0);
    }

    .term-menu-icon.leaf .term-menu-icon-arrow[b-is6nsass3l] {
        display: none;
    }

    .term-menu-folder:hover .term-menu-icon.folder[b-is6nsass3l] {
        background: rgba(0, 255, 136, 0.2);
        border-color: rgba(0, 255, 136, 0.5);
        box-shadow: 0 0 8px rgba(30, 148, 188, 0.2);
    }

    .term-menu-folder:hover .term-menu-icon-arrow[b-is6nsass3l] {
        color: var(--color-primary);
    }

    .term-menu-leaf:hover .term-menu-icon-circle[b-is6nsass3l] {
        background: rgba(0, 255, 136, 0.4);
        border-color: var(--color-primary);
        box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
        transform: scale(1.2);
    }

    .term-menu-folder:active .term-menu-icon.folder[b-is6nsass3l] {
        transform: scale(1.1);
        background: rgba(30, 148, 188, 0.2);
        box-shadow: 0 0 12px rgba(0, 255, 136, 0.5);
    }

    .term-menu-leaf:active .term-menu-icon-circle[b-is6nsass3l] {
        transform: scale(1.4);
        background: rgba(0, 255, 136, 0.6);
        box-shadow: 0 0 14px rgba(0, 255, 136, 0.7);
    }

    .term-menu-folder.open .term-menu-icon.folder[b-is6nsass3l] {
        background: rgba(0, 255, 136, 0.25);
        border-color: var(--color-primary);
        box-shadow: 0 0 6px rgba(30, 148, 188, 0.2);
    }

    .term-menu-folder.open .term-menu-icon-arrow[b-is6nsass3l] {
        transform: rotate(90deg);
        color: var(--color-primary);
    }

    .term-menu-leaf[b-is6nsass3l] {
        color: var(--text-muted);
    }

    .term-menu-leaf:hover[b-is6nsass3l] {
        color: var(--color-primary);
    }

    mark[b-is6nsass3l] {
        background: var(--color-primary);
        color: var(--surface-page);
        padding: 0 2px;
        border-radius: var(--radius-xs);
    }

    /* === Theme Picker === */
    .term-theme-grid[b-is6nsass3l] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
    }

    .term-theme-btn[b-is6nsass3l] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.35rem 0.5rem;
        background: var(--surface-hover);
        border: 1.5px solid var(--border-default);
        border-radius: var(--radius);
        cursor: pointer;
        font-size: 0.75rem;
        color: var(--text-secondary);
        transition: all 0.15s;
    }

    .term-theme-btn:hover[b-is6nsass3l] {
        border-color: var(--color-primary);
        background: var(--surface-hover);
    }

    .term-theme-btn.active[b-is6nsass3l] {
        border-color: var(--text-body);
        background: var(--border-strong);
        color: var(--text-body);
        font-weight: 600;
    }

    .term-theme-preview[b-is6nsass3l] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 20px;
        border-radius: var(--radius-xs);
        font-family: 'Consolas', monospace;
        font-size: 11px;
        font-weight: 700;
        flex-shrink: 0;
        border: 1px solid rgba(0,0,0,0.15);
    }

    /* Custom theme editor */
    .term-custom-section[b-is6nsass3l] {
        margin-top: 0.5rem;
        border-top: 1px solid var(--border-default);
        padding-top: 0.5rem;
    }

    .term-custom-header[b-is6nsass3l] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.35rem;
    }

    .term-custom-label[b-is6nsass3l] {
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .term-custom-add[b-is6nsass3l] {
        background: none;
        border: 1px solid var(--border-default);
        border-radius: var(--radius-sm);
        color: var(--color-primary);
        cursor: pointer;
        font-size: 0.85rem;
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        transition: all 0.15s;
    }

    .term-custom-add:hover[b-is6nsass3l] {
        background: var(--color-primary);
        color: var(--text-on-primary);
        border-color: var(--color-primary);
    }

    .term-custom-editor[b-is6nsass3l] {
        background: var(--surface-sunken);
        border: 1px solid var(--border-default);
        border-radius: var(--radius);
        padding: 0.5rem;
        margin-bottom: 0.4rem;
    }

    .term-custom-name[b-is6nsass3l] {
        width: 100%;
        padding: 0.3rem 0.5rem;
        border: 1px solid var(--border-default);
        border-radius: var(--radius-sm);
        font-size: 0.82rem;
        background: var(--surface-card);
        color: var(--text-primary);
        margin-bottom: 0.4rem;
        box-sizing: border-box;
    }

    .term-custom-name:focus[b-is6nsass3l] {
        outline: none;
        border-color: var(--color-primary);
    }

    .term-custom-colors[b-is6nsass3l] {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 0.4rem;
    }

    .term-custom-colors label[b-is6nsass3l] {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        font-size: 0.72rem;
        color: var(--text-secondary);
    }

    .term-custom-colors input[type="color"][b-is6nsass3l] {
        width: 28px;
        height: 22px;
        padding: 0;
        border: 1px solid var(--border-default);
        border-radius: var(--radius-xs);
        cursor: pointer;
        background: none;
    }

    .term-custom-preview-row[b-is6nsass3l] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .term-custom-save[b-is6nsass3l] {
        flex: 1;
        padding: 0.3rem 0.5rem;
        background: var(--color-primary);
        color: var(--text-on-primary);
        border: none;
        border-radius: var(--radius-sm);
        font-size: 0.78rem;
        cursor: pointer;
        transition: opacity 0.15s;
    }

    .term-custom-save:hover[b-is6nsass3l] { opacity: 0.85; }

    .term-custom-list[b-is6nsass3l] {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }

    .term-custom-item[b-is6nsass3l] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.3rem 0.5rem;
        background: var(--surface-hover);
        border: 1.5px solid var(--border-default);
        border-radius: var(--radius);
        cursor: pointer;
        font-size: 0.75rem;
        color: var(--text-secondary);
        transition: all 0.15s;
    }

    .term-custom-item:hover[b-is6nsass3l] {
        border-color: var(--color-primary);
    }

    .term-custom-item.active[b-is6nsass3l] {
        border-color: var(--text-body);
        background: var(--border-strong);
        color: var(--text-body);
        font-weight: 600;
    }

    .term-custom-item-name[b-is6nsass3l] {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .term-custom-delete[b-is6nsass3l] {
        background: none;
        border: none;
        color: var(--text-secondary);
        cursor: pointer;
        font-size: 0.7rem;
        padding: 0 0.2rem;
        opacity: 0.5;
        transition: opacity 0.15s;
    }

    .term-custom-delete:hover[b-is6nsass3l] {
        opacity: 1;
        color: var(--color-danger);
    }

    /* === Info Overlay (top right of content area) === */
    .term-info-overlay[b-is6nsass3l] {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        z-index: 60;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        background: var(--surface-overlay, rgba(15, 23, 42, 0.85));
        border: 1px solid var(--border-strong);
        border-radius: 10px;
        padding: 0.6rem 0.85rem;
        backdrop-filter: blur(8px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        /* Cap at 320 px on big screens, but never wider than half the
           viewport — prevents it from crowding the display on phones. */
        max-width: min(320px, 50vw);
        pointer-events: auto;
    }

    .term-info-status[b-is6nsass3l] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8rem;
        color: var(--text-secondary);
        padding-bottom: 0.25rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        margin-bottom: 0.1rem;
    }

    .status-dot[b-is6nsass3l] {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--text-secondary);
        flex-shrink: 0;
        transition: background 0.3s;
    }

    .status-dot.connected[b-is6nsass3l] {
        background: var(--color-success);
        box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
    }

    .term-info-item[b-is6nsass3l] {
        display: flex;
        gap: 0.4rem;
        font-size: 0.78rem;
    }

    .term-info-label[b-is6nsass3l] {
        color: var(--text-secondary);
        white-space: nowrap;
    }

    .term-info-value[b-is6nsass3l] {
        color: var(--text-body);
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* P2xxx controller-side presence (V064): another user is at the
       controller. Subtle warning tint applied to label + value. */
    .term-info-presence .term-info-label[b-is6nsass3l],
    .term-info-presence .term-info-value[b-is6nsass3l] {
        color: var(--color-warning);
        font-weight: 600;
    }

    /* === Connection Spinner === */
    .connection-spinner[b-is6nsass3l] {
        width: 60px;
        height: 60px;
        border: 4px solid var(--border-strong);
        border-top: 4px solid var(--color-primary);
        border-radius: 50%;
        margin: 0 auto 1.5rem;
        animation: spin-b-is6nsass3l 1s linear infinite;
    }

    .connection-spinner.small[b-is6nsass3l] {
        width: 20px;
        height: 20px;
        border-width: 2px;
        margin: 0;
    }

    @keyframes spin-b-is6nsass3l {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* === Arrow Pad === */
    .term-arrow-pad[b-is6nsass3l] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }

    .term-arrow-row[b-is6nsass3l] {
        display: flex;
        gap: 6px;
    }

    .term-arrow-btn[b-is6nsass3l] {
        width: 48px;
        height: 48px;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        color: var(--text-body);
        font-size: 1.2rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s;
    }

    .term-arrow-btn:hover:not(:disabled)[b-is6nsass3l] {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--surface-page);
    }

    .term-arrow-btn:disabled[b-is6nsass3l] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .term-enter-btn[b-is6nsass3l] {
        background: rgba(30,148,188,0.15);
        border-color: var(--color-primary);
    }

    /* === Terminal Content Area === */
    .term-content-area[b-is6nsass3l] {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-width: 0;
        min-height: 0;
        padding: 0;
        position: relative;
        overflow: hidden;
        /* Establish a containment context so the floating navigation
           overlay's @container rules below can react to the *FB pane*
           width — not the viewport. In Side-by-Side / split mode the
           pane shrinks below 50% of the window, but the legacy viewport
           @media rules still see the full window and refuse to scale
           the arrow pad. The container query bridges that. */
        container-type: inline-size;
        container-name: term-fb;
    }

    /* === Dev / Test Fenster — side-by-side raw-data view (admin-only) ===
       Hidden by default; the "Entwicklung → Test Fenster" toggle adds the
       .dev-test-fenster-active class to .term-main, switching layout to
       50/50 split between the terminal and the raw-data textarea. */
    .term-dev-rawdata[b-is6nsass3l] {
        display: none;
        flex-direction: column;
        /* When visible, share the post-sidebar space with .term-content-area
           in a 60:40 ratio. Using grow ratios (3 vs 2) instead of % bases
           avoids the overflow trap where 40% + 60% + 280px sidebar > 100%
           of .term-main, which clipped the right edge of this pane and any
           absolute-positioned children with it. */
        flex: 3 1 0;
        min-width: 0;
        min-height: 0;
        border-left: 1px solid var(--border-default);
        background: var(--surface-card);
        position: relative;       /* anchor for the absolute Löschen button */
    }
    .term-main.dev-test-fenster-active .term-dev-rawdata[b-is6nsass3l] {
        display: flex;
    }
    .term-main.dev-test-fenster-active .term-content-area[b-is6nsass3l] {
        flex: 2 1 0;
        max-width: none;
    }
    .term-dev-rawdata-header[b-is6nsass3l] {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        row-gap: 0.35rem;
        column-gap: 0.5rem;
        padding: 0.45rem 0.75rem;
        background: var(--surface-raised);
        border-bottom: 1px solid var(--border-default);
        font-size: 0.85rem;
        min-height: 2.4rem;          /* never collapse — keep the button row visible */
        overflow: visible;            /* don't clip the wrapped button */
    }
    .term-dev-rawdata-divider[b-is6nsass3l] {
        color: var(--text-muted);
        opacity: 0.5;
        margin: 0 0.15rem;
        font-weight: 700;
    }
    .term-dev-rawdata-title[b-is6nsass3l] {
        flex: 0 0 auto;
        font-weight: 600;
        color: var(--text-primary);
        white-space: nowrap;
    }
    /* Löschen button — pinned to the top-right corner of the rawdata
       container with position: absolute so it can't be pushed off-screen
       by the wrapping header on narrow viewports. The header also gets
       padding-right so its toggles don't slide under the button. */
    .term-dev-rawdata-header > .term-dev-rawdata-action[b-is6nsass3l] {
        position: absolute;
        top: 0.45rem;
        right: 0.6rem;
        z-index: 5;
    }
    .term-dev-rawdata-header[b-is6nsass3l] {
        padding-right: 7.5rem;       /* reserve room for the absolute button */
    }
    .term-dev-rawdata-action[b-is6nsass3l] {
        /* !important on the visibility-critical properties so any other
           cascade (legacy .btn rules, autoprefixer overrides, etc.) can't
           accidentally hide the button. We've had it disappear in the past. */
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 0.85rem;
        font-weight: 600;
        padding: 0.3rem 0.7rem;
        min-width: 6rem;             /* guarantee a visible click target */
        min-height: 1.6rem;
        background: #fee2e2;          /* solid red-tinted bg so it's obvious */
        border: 2px solid var(--color-danger);    /* solid red border — high contrast */
        border-radius: var(--radius-sm);
        cursor: pointer;
        color: #b91c1c;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        white-space: nowrap;
        flex-shrink: 0;
        line-height: 1;
    }
    .term-dev-rawdata-action:hover[b-is6nsass3l] {
        background: var(--color-danger);
        border-color: var(--color-danger);
        color: #fff;
    }
    .term-dev-rawdata-toggle[b-is6nsass3l] {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        font-size: 0.78rem;
        padding: 0.15rem 0.5rem;
        border: 1px solid var(--border-default);
        border-radius: var(--radius-sm);
        cursor: pointer;
        user-select: none;
        color: var(--text-secondary);
    }
    .term-dev-rawdata-toggle input[type="checkbox"][b-is6nsass3l] {
        margin: 0;
        cursor: pointer;
    }
    /* Direction-coded toggle accents — RX = cyan/blue, TX = green */
    .term-dev-rawdata-toggle-rx[b-is6nsass3l] { color: #0d6efd; border-color: rgba(13, 110, 253, 0.4); }
    .term-dev-rawdata-toggle-tx[b-is6nsass3l] { color: #16a34a; border-color: rgba(22, 163, 74, 0.4); }
    .term-dev-rawdata-toggle-rx .dir-arrow[b-is6nsass3l],
    .term-dev-rawdata-toggle-tx .dir-arrow[b-is6nsass3l] { font-weight: 700; }

    .term-dev-rawdata-spacer[b-is6nsass3l] { flex: 1; }

    /* Two stacked panes inside the test-fenster: RX on top, TX on bottom.
       Each pane has its own header + scrollable output, and the entire
       direction is hidden when the corresponding filter checkbox is off
       (handled by .hide-rx / .hide-tx rules). */
    .term-dev-rawdata-pane[b-is6nsass3l] {
        display: flex;
        flex-direction: column;
        flex: 1 1 50%;
        min-height: 0;
        border-top: 1px solid var(--border-default);
    }
    .term-dev-rawdata-pane:first-of-type[b-is6nsass3l] {
        border-top: 0;
    }
    .term-dev-rawdata-pane-title[b-is6nsass3l] {
        flex: 0 0 auto;
        padding: 0.25rem 0.75rem;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }
    .term-dev-rawdata-pane-title .pane-hint[b-is6nsass3l] {
        font-weight: 400;
        text-transform: none;
        letter-spacing: 0;
        color: var(--text-secondary);
        font-size: 0.7rem;
    }
    .term-dev-rawdata-pane-title .dir-arrow[b-is6nsass3l] {
        font-size: 0.95rem;
    }
    /* RX header — cyan/blue accent on a pale tint */
    .term-dev-rawdata-pane-rx .term-dev-rawdata-pane-title[b-is6nsass3l] {
        background: rgba(13, 110, 253, 0.08);
        color: #0d6efd;
        border-bottom: 1px solid rgba(13, 110, 253, 0.25);
    }
    /* TX header — green accent on a pale tint */
    .term-dev-rawdata-pane-tx .term-dev-rawdata-pane-title[b-is6nsass3l] {
        background: rgba(22, 163, 74, 0.08);
        color: #16a34a;
        border-bottom: 1px solid rgba(22, 163, 74, 0.25);
    }

    /* Per-pane scrollable output. Each pane scrolls independently so
       watching one direction doesn't drag the other. Explicit monospace
       stack with tabular numerals + disabled kerning so every char
       (digits, letters, punctuation) is exactly the same width — keeps
       hex pairs and ASCII chars perfectly column-aligned across rows. */
    .term-dev-rawdata-output[b-is6nsass3l] {
        flex: 1;
        width: 100%;
        margin: 0;
        padding: 0.35rem 0.6rem;
        font-family: ui-monospace, 'Cascadia Mono', 'Consolas',
                     'Liberation Mono', 'Menlo', 'DejaVu Sans Mono',
                     'Courier New', monospace;
        font-size: 0.72rem;
        line-height: 1.25;
        font-variant-numeric: tabular-nums;
        font-feature-settings: "tnum" 1, "kern" 0;
        background: var(--surface-card);
        white-space: pre;
        overflow: auto;
        word-break: normal;
        min-height: 0;
    }
    .term-dev-rawdata-output:empty[b-is6nsass3l]::before {
        content: attr(data-placeholder);
        color: var(--text-muted);
        font-style: italic;
    }
    /* Direction colour applied to the whole stream, not just spans. */
    .term-dev-rawdata-output.rx-stream[b-is6nsass3l] { color: #0d6efd; }
    .term-dev-rawdata-output.tx-stream[b-is6nsass3l] { color: #16a34a; font-weight: 600; }
    /* Control bytes (0x00-0x1F + 0x7F) in Hex mode get an amber/orange
       accent so ESC, CR, LF, NUL etc. visually pop out of the byte stream.
       Uses ::deep because the .ctrl-byte spans are created by JS in
       terminal.js (appendToRawDataOutput) and don't carry the scoped
       b-XXX attribute Blazor needs to match a regular descendant rule. */
    .term-dev-rawdata-output[b-is6nsass3l]  .ctrl-byte {
        color: #f59e0b;
        font-weight: 700;
        background: rgba(245, 158, 11, 0.10);
        border-radius: var(--radius-xs);
    }

    /* Hex-mode rows — one row per LOGICAL line on the wire, split at LF
       (CR LF on the wire shows as ...0d 0a inside the row); hard-wrap at
       64 bytes when the controller is mid-prompt with no LF in sight.
       Each row contains a hex line and (optionally) an ASCII line; both
       use white-space:pre and the monospace stack inherited from the
       parent so columns line up exactly. */
    .term-dev-rawdata-output[b-is6nsass3l]  .hex-row {
        display: block;
        padding: 0.05rem 0.25rem;
        border-radius: var(--radius-xs);
    }
    .term-dev-rawdata-output[b-is6nsass3l]  .hex-line,
    .term-dev-rawdata-output[b-is6nsass3l]  .ascii-line {
        display: block;
        white-space: pre;
        line-height: 1.2;
    }
    /* ASCII line — high-contrast colour so printable chars (incl. German
       umlauts ä/ö/ü etc.) stand out clearly from both the hex pair above
       and the amber control-byte spans. Different hue from the hex line
       so the eye separates "the byte value" (above, direction-tinted)
       from "the character it represents" (below, dark slate). */
    .term-dev-rawdata-output[b-is6nsass3l]  .ascii-line {
        color: #111827;
        font-weight: 600;
        letter-spacing: 0.02em;
    }
    /* Inside the ASCII line, ctrl-byte spans keep their amber accent —
       this rule re-asserts the colour because the parent's `color` would
       otherwise inherit through. */
    .term-dev-rawdata-output[b-is6nsass3l]  .ascii-line .ctrl-byte {
        color: #b45309;
        font-weight: 700;
    }
    /* Zebra striping — adjacent rows differ in background tint so the
       eye can follow long dumps without losing its place. Direction-
       tinted (blue for RX, green for TX) pulls double duty as a "which
       pane am I in" cue when scanning fast. Applies to both hex-row
       (Hex mode) and text-row (annotated text mode). */
    .term-dev-rawdata-output[b-is6nsass3l]  .hex-row,
    .term-dev-rawdata-output[b-is6nsass3l]  .text-row {
        display: block;
        padding: 0.05rem 0.25rem;
        border-radius: var(--radius-xs);
        white-space: pre;
    }
    .term-dev-rawdata-output[b-is6nsass3l]  .hex-row:nth-of-type(odd),
    .term-dev-rawdata-output[b-is6nsass3l]  .text-row:nth-of-type(odd) {
        background: rgba(0, 0, 0, 0.035);
    }
    .term-dev-rawdata-output.rx-stream[b-is6nsass3l]  .hex-row:nth-of-type(odd),
    .term-dev-rawdata-output.rx-stream[b-is6nsass3l]  .text-row:nth-of-type(odd) {
        background: rgba(13, 110, 253, 0.07);
    }
    .term-dev-rawdata-output.tx-stream[b-is6nsass3l]  .hex-row:nth-of-type(odd),
    .term-dev-rawdata-output.tx-stream[b-is6nsass3l]  .text-row:nth-of-type(odd) {
        background: rgba(22, 163, 74, 0.08);
    }

    /* Filter classes set by updateDevRawdataFilter() in terminal.js — hide
       the entire pane (header + output) so the visible direction expands. */
    .term-dev-rawdata.hide-rx .term-dev-rawdata-pane-rx[b-is6nsass3l] { display: none; }
    .term-dev-rawdata.hide-tx .term-dev-rawdata-pane-tx[b-is6nsass3l] { display: none; }

    @media (max-width: 768px) {
        /* On narrow screens, stack instead of side-by-side */
        .term-main.dev-test-fenster-active[b-is6nsass3l] {
            flex-direction: column;
        }
        .term-main.dev-test-fenster-active .term-content-area[b-is6nsass3l],
        .term-main.dev-test-fenster-active .term-dev-rawdata[b-is6nsass3l] {
            flex: 1 1 50%;
            max-width: 100%;
        }
        .term-dev-rawdata[b-is6nsass3l] {
            border-left: 0;
            border-top: 1px solid var(--border-default);
        }
    }

    /* Navigation Overlay (bottom right corner) */
    .term-navigation-overlay[b-is6nsass3l] {
        position: absolute;
        bottom: 1.5rem;
        right: 1.5rem;
        background: var(--surface-overlay);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-lg);
        padding: 0.75rem;
        z-index: 50;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }

    /* === Legacy Terminal Display === */
    .term-terminal-panel[b-is6nsass3l] {
        flex: 1;
        display: flex;
        flex-direction: column;
        background: var(--terminal-bg);
        overflow: hidden;
        min-height: 0;
    }

    .term-terminal-header[b-is6nsass3l] {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 0.5rem 0.75rem;
        background: var(--terminal-bg);
        border-bottom: 1px solid rgba(255,255,255,0.1);
        font-size: 0.85rem;
    }

    .term-terminal-header span[b-is6nsass3l] {
        color: var(--terminal-text);
        opacity: 0.6;
    }

    .term-terminal-info[b-is6nsass3l] {
        display: flex;
        gap: 1rem;
        font-size: 0.8rem;
        justify-content: flex-end;
    }

    .term-terminal-display[b-is6nsass3l] {
        flex: 1;
        position: relative;
        overflow: hidden;
        background: var(--terminal-bg);
        min-height: 0;
    }

    .term-terminal-wrapper[b-is6nsass3l] {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 12px;
        overflow: hidden;
        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
        font-size: var(--term-font-size, 18px);
        line-height: 1.2;
        color: var(--terminal-text);
        white-space: pre;
    }

    .terminal-cursor[b-is6nsass3l] {
        position: absolute;
        background: var(--terminal-cursor, var(--terminal-text));
        outline: 1px solid rgba(255, 255, 255, 0.35);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
        animation: blink-b-is6nsass3l 1s step-end infinite;
        display: none;
        pointer-events: none;
    }

    .terminal-cursor.visible[b-is6nsass3l] {
        display: block;
    }

    @keyframes blink-b-is6nsass3l {
        0%, 50% { opacity: 1; }
        51%, 100% { opacity: 0; }
    }

    /* Character attributes - inverse, red */
    .term-terminal-wrapper .char-inverse[b-is6nsass3l],
    #terminalRows .char-inverse[b-is6nsass3l] {
        color: var(--terminal-bg);
        background: var(--terminal-text);
    }

    .term-terminal-wrapper .char-red[b-is6nsass3l],
    #terminalRows .char-red[b-is6nsass3l] {
        color: var(--color-danger);
        background: transparent;
    }

    .term-terminal-wrapper .char-red-inverse[b-is6nsass3l],
    #terminalRows .char-red-inverse[b-is6nsass3l] {
        color: var(--terminal-bg);
        background: var(--color-danger);
    }

    /* Terminal Text Mode */
    .term-terminal-text[b-is6nsass3l] {
        flex: 1;
        background: var(--terminal-bg);
        overflow-y: auto;
        min-height: 0;
        display: none;
    }

    .term-terminal-text pre[b-is6nsass3l] {
        margin: 0;
        padding: 12px;
        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
        font-size: clamp(16px, 2vw, 22px);
        color: var(--terminal-text);
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    /* === Help Footer === */
    .term-help[b-is6nsass3l] {
        display: flex;
        gap: 2rem;
        padding: 0.6rem 1rem;
        background: var(--surface-card);
        border-top: 1px solid var(--border-strong);
        font-size: 0.9rem;
        color: var(--text-secondary);
        flex-shrink: 0;
    }

    .term-help-item strong[b-is6nsass3l] {
        color: var(--text-muted);
    }

    /* Mode visibility */
    .term-fernbed-only.hidden[b-is6nsass3l] {
        display: none !important;
    }

    .term-terminal-only[b-is6nsass3l] {
        display: none;
    }

    .term-terminal-only.visible[b-is6nsass3l] {
        display: block;
    }

    /* === Responsive - Extra Large screens === */
    @media (min-width: 1600px) {
        .term-sidebar[b-is6nsass3l] {
            width: 340px;
            padding: 1.2rem;
            gap: 1.5rem;
        }

        .term-ctrl-btn[b-is6nsass3l] {
            font-size: 1.15rem;
            padding: 0.9rem 1.1rem;
        }

        .term-arrow-btn[b-is6nsass3l] {
            width: 65px;
            height: 65px;
            font-size: 1.6rem;
        }

        .term-terminal-wrapper[b-is6nsass3l] {
            --term-font-size: 24px;
        }

        .term-mode-indicator[b-is6nsass3l] {
            font-size: 1.05rem;
            padding: 0.6rem;
        }

        .term-control-title[b-is6nsass3l] {
            font-size: 1rem;
        }

        .term-search-box input[b-is6nsass3l] {
            font-size: 1.05rem;
            padding: 0.7rem 2.2rem 0.7rem 0.9rem;
        }

        .term-menu-folder[b-is6nsass3l], .term-menu-leaf[b-is6nsass3l] {
            font-size: 1.05rem;
            padding: 0.55rem 0.7rem;
        }

        .term-navigation-overlay[b-is6nsass3l] {
            bottom: 2rem;
            right: 2rem;
            padding: 1rem;
        }
    }

    /* === Responsive - Large screens === */
    @media (min-width: 1400px) and (max-width: 1599px) {
        .term-sidebar[b-is6nsass3l] {
            width: 300px;
            padding: 1.1rem;
        }

        .term-ctrl-btn[b-is6nsass3l] {
            font-size: 1.1rem;
            padding: 0.8rem 1rem;
        }

        .term-arrow-btn[b-is6nsass3l] {
            width: 60px;
            height: 60px;
            font-size: 1.5rem;
        }

        .term-terminal-wrapper[b-is6nsass3l] {
            --term-font-size: 22px;
        }

        .term-mode-indicator[b-is6nsass3l] {
            font-size: 1rem;
            padding: 0.5rem;
        }

        .term-control-title[b-is6nsass3l] {
            font-size: 0.95rem;
        }

        .term-search-box input[b-is6nsass3l] {
            font-size: 1rem;
        }

        .term-menu-folder[b-is6nsass3l], .term-menu-leaf[b-is6nsass3l] {
            font-size: 1rem;
            padding: 0.5rem 0.65rem;
        }

        .term-navigation-overlay[b-is6nsass3l] {
            bottom: 1.75rem;
            right: 1.75rem;
            padding: 0.9rem;
        }
    }

    /* === Responsive - Medium screens === */
    @media (max-width: 1200px) {
        .term-sidebar[b-is6nsass3l] {
            width: 260px;
            padding: 0.85rem;
            gap: 1rem;
        }

        .term-ctrl-btn[b-is6nsass3l] {
            font-size: 0.9rem;
            padding: 0.55rem 0.7rem;
        }

        .term-arrow-btn[b-is6nsass3l] {
            width: 48px;
            height: 48px;
            font-size: 1.15rem;
        }

        .term-terminal-wrapper[b-is6nsass3l] {
            --term-font-size: 16px;
        }

        .term-mode-indicator[b-is6nsass3l] {
            font-size: 0.85rem;
        }

        .term-control-title[b-is6nsass3l] {
            font-size: 0.8rem;
        }

        .term-search-box input[b-is6nsass3l] {
            font-size: 0.9rem;
            padding: 0.55rem 1.9rem 0.55rem 0.7rem;
        }

        .term-menu-folder[b-is6nsass3l], .term-menu-leaf[b-is6nsass3l] {
            font-size: 0.9rem;
            padding: 0.4rem 0.55rem;
        }

        .term-navigation-overlay[b-is6nsass3l] {
            bottom: 1.25rem;
            right: 1.25rem;
            padding: 0.7rem;
        }
    }

    /* === Sidebar collapses to compact strip — expand on hover ===
       ZEIGER-BEDINGUNG (2026-08-25): nur dort, wo es einen Zeiger gibt, der schweben kann.
       Der Pi-Kiosk und die Wandpanels sind reine Touch-Geraete: dort gab es kein :hover, die
       Leiste blieb also dauerhaft 52 px breit und Verbinden/Trennen/Menue waren nicht mehr
       erreichbar. Mit `hover: hover` faellt die Zusammenklapp-Regel auf Touch-Geraeten ganz
       weg -- die Leiste bleibt in voller Breite, und der vorhandene .term-menu-toggle bleibt
       der Weg zum Ein- und Ausklappen. */
    @media (max-width: 1024px) and (hover: hover) {
        .term-sidebar[b-is6nsass3l] {
            width: 52px;
            padding: 0.5rem 0.4rem;
            overflow: hidden;
            transition: width 0.25s ease;
            z-index: 100;
            gap: 0.8rem;
        }

        .term-sidebar:hover[b-is6nsass3l],
        .term-sidebar:focus-within[b-is6nsass3l] {
            width: 280px;
            padding: 0.85rem;
            overflow-y: auto;
            box-shadow: 4px 0 16px rgba(0,0,0,0.15);
        }

        /* Collapsed: hide text labels, keep icons */
        .term-sidebar:not(:hover):not(:focus-within) .term-control-title[b-is6nsass3l],
        .term-sidebar:not(:hover):not(:focus-within) .term-mode-indicator[b-is6nsass3l],
        .term-sidebar:not(:hover):not(:focus-within) .term-menu-section[b-is6nsass3l] {
            display: none;
        }

        /* Hide info overlay when sidebar is collapsed */
        .term-info-overlay[b-is6nsass3l] {
            display: none;
        }

        .term-sidebar:not(:hover):not(:focus-within) .term-ctrl-btn[b-is6nsass3l] {
            font-size: 0;
            padding: 0.6rem;
            text-align: center;
            min-height: 40px;
        }

        /* Show only emoji in collapsed buttons */
        .term-sidebar:not(:hover):not(:focus-within) .term-ctrl-connect[b-is6nsass3l]::first-letter,
        .term-sidebar:not(:hover):not(:focus-within) .term-ctrl-disconnect[b-is6nsass3l]::first-letter {
            font-size: 1.1rem;
        }

        /* Hide theme and status when collapsed */
        .term-sidebar:not(:hover):not(:focus-within) .term-theme-toggle[b-is6nsass3l],
        .term-sidebar:not(:hover):not(:focus-within) .term-theme-panel[b-is6nsass3l],
        .term-sidebar:not(:hover):not(:focus-within) .term-status-badge[b-is6nsass3l] {
            display: none;
        }

        .term-ctrl-btn[b-is6nsass3l] {
            font-size: 0.9rem;
        }

        .term-menu-folder[b-is6nsass3l], .term-menu-leaf[b-is6nsass3l] {
            font-size: 0.9rem;
        }

        .term-search-box input[b-is6nsass3l] {
            font-size: 0.9rem;
        }

        .term-terminal-wrapper[b-is6nsass3l] {
            --term-font-size: 15px;
        }

        .term-navigation-overlay[b-is6nsass3l] {
            bottom: 1rem;
            right: 1rem;
            padding: 0.6rem;
        }

        .term-navigation-overlay .term-arrow-btn[b-is6nsass3l] {
            width: 44px;
            height: 44px;
            font-size: 1.1rem;
        }
    }

    /* === Small screens — sidebar becomes horizontal toolbar === */
    @media (max-width: 768px) {
        .term-main[b-is6nsass3l] {
            flex-direction: column;
        }

        /* Mobile stacks the sidebar into a top toolbar, so a full-height
           left edge-rail would overlay it. Turn the rail into a thin top
           strip instead and drop the desktop gutter paddings. */
        .term-menu-toggle[b-is6nsass3l] {
            top: 0;
            left: 0;
            right: 0;
            width: auto;
            height: var(--term-rail-w);
            border-right: 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        }
        .term-menu-toggle:hover[b-is6nsass3l] {
            width: auto;
            height: calc(var(--term-rail-w) + 4px);
            border-right-color: transparent;
            border-bottom-color: rgba(30, 148, 188, 0.5);
        }
        .term-menu-toggle.is-open svg[b-is6nsass3l] {
            transform: rotate(270deg);
        }
        .term-menu-toggle:not(.is-open) svg[b-is6nsass3l] {
            transform: rotate(90deg);
        }
        .term-main:not(.menu-collapsed) .term-sidebar[b-is6nsass3l] {
            padding-left: 0.6rem;
            padding-top: calc(0.5rem + 12px);
        }
        .term-main.menu-collapsed .term-content-area[b-is6nsass3l] {
            padding-left: 0;
            padding-top: 12px;
        }

        .term-sidebar[b-is6nsass3l] {
            width: 100% !important;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            padding: 0.5rem 0.6rem;
            gap: 0.4rem;
            border-right: none;
            border-bottom: 1px solid var(--border-strong);
            box-shadow: none;
            overflow: visible;
            transition: none;
        }

        .term-control-section[b-is6nsass3l] {
            flex-direction: row;
            align-items: center;
            gap: 0.4rem;
        }

        .term-control-title[b-is6nsass3l],
        .term-mode-indicator[b-is6nsass3l],
        .term-menu-section[b-is6nsass3l] {
            display: none;
        }

        .term-info-overlay[b-is6nsass3l] {
            top: 0.5rem;
            right: 0.5rem;
            font-size: 0.7rem;
            padding: 0.4rem 0.6rem;
            max-width: min(250px, 55vw);
            gap: 0.2rem;
        }

        .term-info-item[b-is6nsass3l] {
            font-size: 0.7rem;
        }

        .term-info-status[b-is6nsass3l] {
            font-size: 0.7rem;
        }

        /* Legacy sidebar info: hide Controller / Adresse / Typ rows on
           mobile so the block collapses to a single status indicator
           — this matches the height of the Verbinden/Trennen buttons
           sitting next to it in the wrapped sidebar row, instead of
           towering above them. The floating P2xxx/WAGO overlay version
           is unaffected (different parent class). */
        .term-sidebar-info .term-info-item[b-is6nsass3l] {
            display: none;
        }

        .term-ctrl-btn[b-is6nsass3l] {
            padding: 0.45rem 0.6rem;
            font-size: 0.85rem;
        }

        /* Theme toggle inline */
        .term-theme-toggle[b-is6nsass3l] {
            padding: 0.4rem 0.6rem;
            font-size: 0.85rem;
        }

        .term-theme-panel[b-is6nsass3l] {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            z-index: 200;
            background: var(--sidebar-bg);
            border-bottom: 1px solid var(--border-strong);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            padding: 0.5rem;
        }

        .term-arrow-btn[b-is6nsass3l] {
            width: 40px;
            height: 40px;
            font-size: 1rem;
        }

        .term-terminal-wrapper[b-is6nsass3l] {
            --term-font-size: 14px;
        }

        .term-help[b-is6nsass3l] {
            flex-wrap: wrap;
            gap: 0.6rem;
            font-size: 0.8rem;
            padding: 0.4rem 0.6rem;
        }

        .term-navigation-overlay[b-is6nsass3l] {
            bottom: 0.5rem;
            right: 0.5rem;
            padding: 0.5rem;
        }

        .term-navigation-overlay .term-arrow-btn[b-is6nsass3l] {
            width: 38px;
            height: 38px;
            font-size: 0.95rem;
        }
    }

    /* === Very small screens — minimal UI === */
    @media (max-width: 480px) {
        .term-sidebar[b-is6nsass3l] {
            padding: 0.35rem 0.5rem;
        }

        .term-ctrl-btn[b-is6nsass3l] {
            padding: 0.4rem 0.5rem;
            font-size: 0.8rem;
        }

        /* Hide theme controls on very small screens — but keep the
           info overlay visible (responsive: compact size, not hidden). */
        .term-theme-toggle[b-is6nsass3l],
        .term-theme-panel[b-is6nsass3l] {
            display: none;
        }

        .term-info-overlay[b-is6nsass3l] {
            top: 0.35rem;
            right: 0.35rem;
            padding: 0.3rem 0.5rem;
            border-radius: var(--radius-md);
            max-width: min(180px, 60vw);
            font-size: 0.62rem;
            gap: 0.1rem;
        }

        .term-info-status[b-is6nsass3l],
        .term-info-item[b-is6nsass3l] {
            font-size: 0.62rem;
            gap: 0.3rem;
        }

        .term-info-status[b-is6nsass3l] {
            padding-bottom: 0.18rem;
            margin-bottom: 0.05rem;
        }

        .term-terminal-wrapper[b-is6nsass3l] {
            --term-font-size: 12px;
            padding: 6px;
        }

        .term-help[b-is6nsass3l] {
            display: none;
        }

        .term-navigation-overlay .term-arrow-btn[b-is6nsass3l] {
            width: 34px;
            height: 34px;
            font-size: 0.85rem;
        }
    }

    /* === Owner/Viewer Mode Styles === */

    .viewer-banner[b-is6nsass3l] {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 16px;
        background: linear-gradient(135deg, var(--surface-page), var(--surface-card));
        border-bottom: 2px solid var(--color-danger);
        color: var(--text-body);
        font-size: 0.9rem;
        z-index: 100;
    }

    .viewer-banner-icon[b-is6nsass3l] {
        font-size: 1.2rem;
    }

    .viewer-banner-text strong[b-is6nsass3l] {
        color: var(--color-danger);
    }

    .viewer-disabled[b-is6nsass3l] {
        opacity: 0.4 !important;
        pointer-events: none !important;
        cursor: not-allowed !important;
    }

    .viewer-panel[b-is6nsass3l] {
        margin-top: 8px;
    }

    .viewer-panel .term-control-section[b-is6nsass3l] {
        background: rgba(74, 222, 128, 0.05);
        border: 1px solid rgba(74, 222, 128, 0.15);
        border-radius: var(--radius-md);
        padding: 10px;
    }

    .viewer-panel .term-control-title[b-is6nsass3l] {
        font-size: 0.95rem;
        margin-bottom: 8px;
    }

    .viewer-item[b-is6nsass3l] {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 10px 8px;
        margin-bottom: 6px;
        background: rgba(0,0,0,0.02);
        border-radius: var(--radius);
        border: 1px solid rgba(0,0,0,0.04);
    }

    .viewer-name[b-is6nsass3l] {
        color: var(--text-muted);
        font-size: 0.95rem;
        font-weight: 500;
    }

    .viewer-transfer-btn[b-is6nsass3l] {
        font-size: 0.85rem !important;
        padding: 8px 12px !important;
        background: rgba(22,163,74,0.15) !important;
        border: 1px solid var(--color-success) !important;
        color: var(--color-success) !important;
        border-radius: var(--radius) !important;
        cursor: pointer;
        transition: all 0.2s ease;
        width: 100%;
        text-align: center;
    }

    .viewer-transfer-btn:hover[b-is6nsass3l] {
        background: var(--color-success) !important;
        color: var(--text-primary) !important;
        transform: scale(1.02);
    }

    .control-offer-dialog[b-is6nsass3l] {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: var(--z-shell-modal);
    }

    .control-offer-content[b-is6nsass3l] {
        background: var(--surface-page);
        border: 2px solid var(--color-success);
        border-radius: var(--radius-lg);
        padding: 24px 32px;
        text-align: center;
        max-width: 400px;
        color: var(--text-body);
        box-shadow: 0 8px 32px rgba(74, 222, 128, 0.2);
    }

    .control-offer-icon[b-is6nsass3l] {
        font-size: 2.5rem;
        margin-bottom: 12px;
    }

    .control-offer-text[b-is6nsass3l] {
        font-size: 1rem;
        margin-bottom: 20px;
        line-height: 1.5;
    }

    .control-offer-text strong[b-is6nsass3l] {
        color: var(--color-success);
    }

    .control-offer-buttons[b-is6nsass3l] {
        display: flex;
        gap: 12px;
        justify-content: center;
        margin-bottom: 12px;
    }

    .control-offer-accept[b-is6nsass3l],
    .control-offer-deny[b-is6nsass3l] {
        padding: 10px 24px;
        border: none;
        border-radius: var(--radius-md);
        font-size: 0.95rem;
        cursor: pointer;
        font-weight: 600;
    }

    .control-offer-accept[b-is6nsass3l] {
        background: var(--color-success);
        color: var(--text-primary);
    }

    .control-offer-accept:hover[b-is6nsass3l] {
        background: var(--color-success);
    }

    .control-offer-deny[b-is6nsass3l] {
        background: rgba(220,38,38,0.1);
        color: var(--color-danger);
        border: 1px solid var(--color-danger);
    }

    .control-offer-deny:hover[b-is6nsass3l] {
        background: var(--color-danger);
        color: var(--text-primary);
    }

    .control-offer-timer[b-is6nsass3l] {
        font-size: 0.8rem;
        color: var(--text-secondary);
    }

    /* ─── Responsive navigation arrow pad — container-query layer ───
       The viewport @media rules above set the *baseline* arrow-button
       size for normal (full-window) layouts. The rules below override
       that baseline whenever the FB pane (.term-content-area) itself
       is narrower than the listed thresholds — the case in Side-by-Side
       split mode, where the pane is ~25-50 % of the window even on a
       wide monitor.

       Cascade order: viewport rules establish the size for the room
       the user has overall; container-query rules tighten it whenever
       the FB pane individually is cramped. Whichever applies more
       restrictively wins (smaller wins through last-rule-with-equal-
       specificity in our authoring order).

       Threshold breakdown:
         > 520 px  → use viewport defaults (no override)
         ≤ 520 px  → 44 px buttons, 5 px gap     (default split, narrow)
         ≤ 380 px  → 38 px buttons, 4 px gap     (small split / sidebar pop-out)
         ≤ 280 px  → 32 px buttons, 3 px gap     (very narrow — keeps grid intact)
         ≤ 220 px  → 26 px buttons, 2 px gap     (extreme — buttons still tappable per WCAG 24px min)
       Padding on the navigation overlay shrinks alongside so the pad
       doesn't blow past the FB pane edge. */
    @container term-fb (max-width: 520px) {
        .term-navigation-overlay[b-is6nsass3l] {
            bottom: 0.6rem;
            right: 0.6rem;
            padding: 0.45rem;
        }
        .term-navigation-overlay .term-arrow-btn[b-is6nsass3l] {
            width: 44px;
            height: 44px;
            font-size: 1.05rem;
            border-radius: var(--radius);
        }
        .term-navigation-overlay .term-arrow-pad[b-is6nsass3l],
        .term-navigation-overlay .term-arrow-row[b-is6nsass3l] {
            gap: 5px;
        }
    }

    @container term-fb (max-width: 380px) {
        .term-navigation-overlay[b-is6nsass3l] {
            bottom: 0.45rem;
            right: 0.45rem;
            padding: 0.35rem;
        }
        .term-navigation-overlay .term-arrow-btn[b-is6nsass3l] {
            width: 38px;
            height: 38px;
            font-size: 0.95rem;
            border-radius: var(--radius);
        }
        .term-navigation-overlay .term-arrow-pad[b-is6nsass3l],
        .term-navigation-overlay .term-arrow-row[b-is6nsass3l] {
            gap: 4px;
        }
    }

    @container term-fb (max-width: 280px) {
        .term-navigation-overlay[b-is6nsass3l] {
            bottom: 0.35rem;
            right: 0.35rem;
            padding: 0.3rem;
            border-radius: 9px;
        }
        .term-navigation-overlay .term-arrow-btn[b-is6nsass3l] {
            width: 32px;
            height: 32px;
            font-size: 0.85rem;
            border-radius: var(--radius-sm);
        }
        .term-navigation-overlay .term-arrow-pad[b-is6nsass3l],
        .term-navigation-overlay .term-arrow-row[b-is6nsass3l] {
            gap: 3px;
        }
    }

    @container term-fb (max-width: 220px) {
        .term-navigation-overlay[b-is6nsass3l] {
            bottom: 0.25rem;
            right: 0.25rem;
            padding: 0.25rem;
        }
        .term-navigation-overlay .term-arrow-btn[b-is6nsass3l] {
            width: 26px;
            height: 26px;
            font-size: 0.75rem;
            border-radius: var(--radius-xs);
        }
        .term-navigation-overlay .term-arrow-pad[b-is6nsass3l],
        .term-navigation-overlay .term-arrow-row[b-is6nsass3l] {
            gap: 2px;
        }
    }

    /* ─── PiMode kiosk — enlarged P2xxx navigation arrow pad ───────────
       WP400 touch panel (1280×800, coarse pointer): the 48px arrows are
       too small for thick fingers. Raise to 72px (≈1.5×, comfortably
       above the 48dp thumb-target minimum; 96px would occlude too much
       of the display) — but ONLY when the FB pane is wide enough that
       the bigger pad still clears the P2xxx grid:

         pad box = 2×1px border + 2×8px padding + 3×72px buttons
                 + 2×6px gap = 246px; right offset 0.75rem (12px).
         Menu sidebar OPEN  → pane 1280 − 281 = 999px, grid 736px:
                              pad starts at 999 − 12 − 246 = 741px ≥ 736 ✓
         Menu COLLAPSED     → pane 1280px, grid grown to ≈960px (see
                              P2xxxFernbedienungContent.razor.css):
                              pad starts at 1280 − 12 − 246 = 1022px ✓

       Below 701px pane width (kiosk Side-by-Side pane ≈ 600px) a 72px
       pad WOULD float over the display, so the pad keeps its normal
       size there and the ≤520px shrink steps above stay in charge —
       same behaviour as today.

       Scoped to .pi-touch (PiMode.Enabled only — desktop and mobile are
       pixel-identical, no media query can reach this) + .p2xxx-active
       (the complaint is the P2xxx Fernbedienung; on the legacy terminal
       a bigger pad would only occlude more of the terminal text). */
    @container term-fb (min-width: 701px) {
        .term-main.pi-touch.p2xxx-active .term-navigation-overlay[b-is6nsass3l] {
            bottom: 0.75rem;
            right: 0.75rem;
            padding: 0.5rem;
        }
        .term-main.pi-touch.p2xxx-active .term-navigation-overlay .term-arrow-btn[b-is6nsass3l] {
            width: 72px;
            height: 72px;
            font-size: 1.8rem;
        }
    }
/* /Components/Pages/Heizungen/HardwarePage.razor.rz.scp.css */
.hw-page[b-8hyo20fm3m] {
    padding: var(--space-6);
    max-width: 1200px;
    margin: 0 auto;
}

.hw-header[b-8hyo20fm3m] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
}

.hw-back[b-8hyo20fm3m] {
    display: inline-block;
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-decoration: none;
    margin-bottom: var(--space-1);
}

.hw-back:hover[b-8hyo20fm3m] {
    color: var(--color-primary);
}

.hw-title[b-8hyo20fm3m] {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.hw-toolbar[b-8hyo20fm3m] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.hw-state[b-8hyo20fm3m] {
    padding: var(--space-8);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.hw-empty[b-8hyo20fm3m] {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.hw-group-title[b-8hyo20fm3m] {
    font-size: 1.05rem;
    font-weight: 600;
    margin: var(--space-6) 0 var(--space-2);
    color: var(--text-primary);
}

.hw-group-title:first-of-type[b-8hyo20fm3m] {
    margin-top: var(--space-3);
}

.hw-table-wrap[b-8hyo20fm3m] {
    overflow-x: auto;
}

.hw-table[b-8hyo20fm3m] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.hw-table th[b-8hyo20fm3m],
.hw-table td[b-8hyo20fm3m] {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-default);
    white-space: nowrap;
}

.hw-table th[b-8hyo20fm3m] {
    color: var(--text-secondary);
    font-weight: 600;
}

.hw-table td[b-8hyo20fm3m] {
    color: var(--text-primary);
}

.hw-td-actions[b-8hyo20fm3m] {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

/* ── Vorlagen picker ─────────────────────────────────────────── */
.hw-vorlagen-picker[b-8hyo20fm3m] {
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.hw-vorlagen-title[b-8hyo20fm3m] {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 var(--space-3);
    color: var(--text-primary);
}

.hw-vorlagen-list[b-8hyo20fm3m] {
    list-style: none;
    margin: 0 0 var(--space-3);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.hw-vorlagen-item[b-8hyo20fm3m] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    text-align: left;
    padding: var(--space-2) var(--space-3);
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-primary);
}

.hw-vorlagen-item:hover[b-8hyo20fm3m] {
    border-color: var(--color-primary);
}

.hw-vorlagen-item:disabled[b-8hyo20fm3m] {
    opacity: 0.6;
    cursor: not-allowed;
}

.hw-vorlagen-name[b-8hyo20fm3m] {
    font-weight: 600;
    font-size: 0.9rem;
}

.hw-vorlagen-desc[b-8hyo20fm3m] {
    color: var(--text-secondary);
    font-size: 0.78rem;
}

/* ── Add/edit form ───────────────────────────────────────────── */
.hw-form[b-8hyo20fm3m] {
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.hw-form-title[b-8hyo20fm3m] {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 var(--space-3);
    color: var(--text-primary);
}

.hw-form-grid[b-8hyo20fm3m] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.hw-field[b-8hyo20fm3m] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.hw-field-wide[b-8hyo20fm3m] {
    grid-column: span 2;
}

.hw-input[b-8hyo20fm3m] {
    padding: var(--space-2) var(--space-3);
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.hw-input:focus[b-8hyo20fm3m] {
    outline: none;
    border-color: var(--color-primary);
}

.hw-catalog-search[b-8hyo20fm3m] {
    display: flex;
    gap: var(--space-2);
}

.hw-catalog-options[b-8hyo20fm3m] {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    max-height: 160px;
    overflow-y: auto;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
}

.hw-catalog-option[b-8hyo20fm3m] {
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-default);
}

.hw-catalog-option:last-child[b-8hyo20fm3m] {
    border-bottom: none;
}

.hw-catalog-option:hover[b-8hyo20fm3m] {
    background: var(--surface-sunken);
}

.hw-form-error[b-8hyo20fm3m] {
    color: var(--color-danger);
    font-size: 0.85rem;
    margin: var(--space-3) 0 0;
}

.hw-form-actions[b-8hyo20fm3m] {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.btn-sm[b-8hyo20fm3m] {
    padding: var(--space-1) var(--space-2);
    font-size: 0.78rem;
}
/* /Components/Pages/Heizungen/HeizungConsole.razor.rz.scp.css */
.console-container[b-gexqf2ie75] {
        display: flex;
        flex-direction: column;
        /* 100% statt 100vw: 100vw SCHLIESST DIE ROLLBALKENBREITE EIN und schiebt die Seite
           damit waagerecht hinaus. Die Layout-Huelle (ConsoleLayout.razor.css) wurde am
           2026-08-25 umgestellt, dieses Kind blieb stehen — und genau dieses Kind fuellt den
           Kiosk-Bildschirm und den Mobile-Embed. */
        width: 100%;
        height: 100vh;
        background: var(--surface-workspace);
        color: var(--text-body);
        overflow: hidden;
    }

    /* Embed mode (mobile WebView): the desktop workspace grey (#b0b8c4) fills the
       whole phone screen and reads as washed-out. Use the light page surface so the
       embedded content (Tickets / Daten) sits on a clean, on-brand background. */
    .console-container.embed-mode[b-gexqf2ie75],
    .console-loading.embed-mode[b-gexqf2ie75],
    .console-error.embed-mode[b-gexqf2ie75] {
        background: var(--surface-page);
    }

    .console-loading[b-gexqf2ie75], .console-error[b-gexqf2ie75] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100vh;
        background: var(--surface-workspace);
        color: var(--text-body);
        gap: 1rem;
    }

    .console-spinner[b-gexqf2ie75] {
        width: 40px;
        height: 40px;
        border: 3px solid var(--border-strong);
        border-top-color: var(--color-primary);
        border-radius: 50%;
        animation: spin-b-gexqf2ie75 1s linear infinite;
    }

    @keyframes spin-b-gexqf2ie75 {
        to { transform: rotate(360deg); }
    }

    .console-back-link[b-gexqf2ie75] {
        color: var(--color-primary);
        text-decoration: none;
        margin-top: 1rem;
    }

    .console-back-link:hover[b-gexqf2ie75] {
        text-decoration: underline;
    }

    /* Header */
    .console-header[b-gexqf2ie75] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 1rem;
        background: var(--surface-card);
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
        border-bottom: 1px solid var(--border-strong);
        flex-shrink: 0;
    }

    .console-title[b-gexqf2ie75] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .console-icon[b-gexqf2ie75] {
        font-size: 1.25rem;
    }

    .console-title h1[b-gexqf2ie75] {
        font-size: 1rem;
        font-weight: 600;
        color: var(--color-primary);
        margin: 0;
    }

    .console-subtitle[b-gexqf2ie75] {
        color: var(--text-secondary);
        font-size: 0.8rem;
    }

    .console-header-right[b-gexqf2ie75] {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .console-status[b-gexqf2ie75] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8rem;
        color: var(--text-secondary);
    }

    .status-dot[b-gexqf2ie75] {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--text-secondary);
    }

    .status-dot.connected[b-gexqf2ie75] {
        background: var(--color-primary);
        box-shadow: 0 0 8px rgba(30,148,188,0.5);
    }

    /* Tabs */
    .console-tabs[b-gexqf2ie75] {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        background: var(--surface-card);
        border-bottom: 1px solid var(--border-strong);
        overflow-x: auto;
        flex-shrink: 0;
        padding: 0;
        gap: 0;
    }
    
    /* Die Reiterzeile bleibt ueber dem Verbindungs-Overlay bedienbar.

       Am 2026-08-26 hat der naechtliche E2E-Lauf es gezeigt: `.connection-modal-overlay`
       liegt mit `inset: 0; z-index: 9999` ueber der GANZEN Seite und faengt jeden Klick ab
       ("intercepts pointer events"). Wenn ein Regler nicht erreichbar ist, kam man aus der
       Konsole also nur noch per "Hauptseite" oder "Erneut versuchen" heraus — ausgerechnet
       der Tickets-Reiter, der fuer genau diesen Fall gebaut wurde, war unerreichbar.

       Das war ein Unfall der Stapelreihenfolge, keine Entscheidung: das Overlay wird ohnehin
       nur auf den Reitern Fernbedienung/Visualisierung gezeigt (Bedingung in
       HeizungConsole.razor), es SOLL also beim Reiterwechsel verschwinden. Die Zeile liegt
       darum darueber; alles andere bleibt blockiert.
       NACHTRAG (2026-08-26, spaeter am Tag): der Wert traegt jetzt einen Namen.
       Die Anwendung stapelt in zwei Baendern — das Bauteil-Band (--z-base … --z-tooltip,
       1 … 1400) gilt innerhalb einer Seite, und der Telefon-Einbettmodus belegt genau
       diesen Bereich mit seinem eigenen Chrome (datentab-embed.css, 1100–1450). Alles,
       was ueber der ganzen Huelle stehen muss, liegt darum im Huellen-Band
       (--z-shell-overlay … --z-keyboard). Die Reiterzeile ist --z-shell-nav und liegt
       damit ueber --z-shell-overlay des Verbindungs-Overlays — die Beziehung oben ist
       jetzt aufgeschrieben statt nur zufaellig richtig. */
    .console-tabs[b-gexqf2ie75] {
        position: relative;
        z-index: var(--z-shell-nav);
    }

    .console-tabs-spacer[b-gexqf2ie75] {
        flex: 1;
    }
    
    .console-action-btn[b-gexqf2ie75] {
        margin: 0.6rem 0.3rem;
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        white-space: nowrap;
        align-self: center;
        background: rgba(30, 148, 188, 0.1);
        border: 1px solid var(--color-primary);
        color: var(--color-primary);
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: all 0.2s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
    }
    
    .console-action-btn:hover[b-gexqf2ie75] {
        background: rgba(30, 148, 188, 0.2);
        box-shadow: 0 0 8px rgba(30, 148, 188, 0.3);
    }
    
    .console-upload-btn[b-gexqf2ie75] {
        background: rgba(241, 143, 1, 0.1);
        border-color: #F18F01;
        color: #F18F01;
    }
    
    .console-upload-btn:hover[b-gexqf2ie75] {
        background: rgba(241, 143, 1, 0.2);
        box-shadow: 0 0 8px rgba(241, 143, 1, 0.3);
    }

    /* (Former .console-copy-btn rules removed — the button now uses the
       shared .console-action-btn style for visual consistency with the
       upload button. The old hover used an off-theme green colour.) */

    .console-tab[b-gexqf2ie75] {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 1rem 1.5rem;
        color: var(--text-secondary);
        text-decoration: none;
        border: none;
        border-bottom: 3px solid transparent;
        transition: all 0.2s ease;
        white-space: nowrap;
        font-size: 0.95rem;
        cursor: pointer;
        background: transparent;
        font-family: inherit;
    }

    .console-tab:hover[b-gexqf2ie75] {
        color: var(--text-body);
        background: rgba(0, 0, 0, 0.05);
    }

    .console-tab.active[b-gexqf2ie75] {
        color: var(--color-primary);
        border-bottom-color: var(--color-primary);
        background: rgba(30, 148, 188, 0.1);
    }

    .console-tab-home[b-gexqf2ie75] {
        width: 280px;
        min-width: 280px;
        justify-content: center;
        color: var(--color-warning);
        background: linear-gradient(135deg, #fffbeb 0%, var(--color-warning-light) 100%);
        border: none;
        border-right: 1px solid var(--border-default);
        border-bottom: 3px solid transparent;
        flex-shrink: 0;
        cursor: pointer;
        font-family: inherit;
        font-size: 1rem;
        padding: 1rem 1.2rem;
    }

    .console-tab-home:hover[b-gexqf2ie75] {
        color: var(--color-primary);
        background: rgba(245, 158, 11, 0.2);
    }

    .console-tab-terminal[b-gexqf2ie75] {
        color: var(--color-indigo);
        border-bottom-color: transparent !important;
    }
    .console-tab-terminal:hover[b-gexqf2ie75] {
        color: var(--color-indigo);
        background: rgba(139, 92, 246, 0.15);
    }
    .console-tab-terminal.terminal-mode[b-gexqf2ie75] {
        color: var(--color-success);
        border-bottom-color: var(--color-success) !important;
    }
    .console-tab-terminal .term-mode-indicator[b-gexqf2ie75] {
        font-size: 0.7rem;
        opacity: 0.7;
        margin-left: 0.3rem;
    }
    .console-tab-terminal .term-mode-indicator.connected[b-gexqf2ie75] {
        color: var(--color-success);
        opacity: 1;
    }
    .console-tab-terminal .term-mode-indicator.connected[b-gexqf2ie75]::before {
        content: '●';
        margin-right: 0.2rem;
    }

    /* ─── Entwicklung dropdown (admin-only dev tools) ─────────────────── */
    .console-dev-dropdown[b-gexqf2ie75] {
        position: relative;
        display: inline-block;
    }


    .console-tab-dev[b-gexqf2ie75] {
        color: var(--color-warning);
        border-bottom-color: transparent !important;
    }
    .console-tab-dev:hover[b-gexqf2ie75] {
        color: var(--color-warning);
        background: rgba(245, 158, 11, 0.15);
    }
    .console-tab-dev .tab-caret[b-gexqf2ie75] {
        font-size: 1rem;
        font-weight: 700;
        margin-left: 0.35rem;
        line-height: 1;
        opacity: 0.95;
        transition: transform 0.15s ease;
    }
    .console-tab-dev[aria-expanded="true"] .tab-caret[b-gexqf2ie75] {
        transform: rotate(180deg);
    }

    /* Menu uses position:fixed (not absolute) because the parent
       .console-tabs has overflow-x: auto, which clips an absolute-positioned
       child. Coordinates are set by toggleDevDropdown() in terminal.js based
       on the button's getBoundingClientRect. */
    .console-dev-menu[b-gexqf2ie75] {
        position: fixed;
        top: 0;
        left: 0;
        z-index: var(--z-shell-nav);
        min-width: 240px;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
        padding: 0.3rem 0;
        display: none;
    }
    .console-dev-menu.open[b-gexqf2ie75] {
        display: block;
    }

    .console-dev-item[b-gexqf2ie75] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.55rem 0.85rem;
        background: transparent;
        border: 0;
        color: var(--text-primary);
        font-size: 0.9rem;
        text-align: left;
        cursor: pointer;
    }
    .console-dev-item:hover[b-gexqf2ie75] {
        background: var(--surface-hover, rgba(0, 0, 0, 0.04));
    }
    .console-dev-item.active[b-gexqf2ie75],
    .console-dev-item.terminal-mode[b-gexqf2ie75] {
        background: rgba(245, 158, 11, 0.12);
        color: var(--color-warning);
        font-weight: 600;
    }
    .console-dev-item .dev-item-icon[b-gexqf2ie75] {
        font-size: 1rem;
    }
    .console-dev-item .dev-item-text[b-gexqf2ie75] {
        flex: 1;
    }
    .console-dev-item .dev-item-state[b-gexqf2ie75] {
        font-size: 0.72rem;
        opacity: 0.65;
    }
    .console-dev-item.active .dev-item-state[b-gexqf2ie75]::before {
        content: '✓ aktiv';
    }

    .tab-icon[b-gexqf2ie75] {
        font-size: 1.1rem;
    }

    .tab-text[b-gexqf2ie75] {
        font-size: 0.95rem;
        font-weight: 500;
        letter-spacing: 0.02em;
    }

    /* Content */
    .console-content[b-gexqf2ie75] {
        flex: 1;
        overflow: hidden;
        min-height: 0;
        position: relative;
    }
    
    /* Tab panels - all rendered but only active one visible, with fade transition */
    .tab-panel[b-gexqf2ie75] {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        opacity: 0;
        transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out;
    }
    
    .tab-panel.hidden[b-gexqf2ie75] {
        visibility: hidden;
        pointer-events: none;
        opacity: 0;
    }
    
    .tab-panel.active[b-gexqf2ie75] {
        visibility: visible;
        pointer-events: auto;
        opacity: 1;
    }

    /* NotizenTab (Wartung) is long-form, scrollable content — a note list plus
       expandable maintenance forms — unlike the viewport-fitting Visu/Daten/FB
       tabs that manage their own internal scroll. Without this the panel's
       `overflow: hidden` clips the form so the bottom (Speichern / action
       buttons) is unreachable, especially in the app's embedded console WebView. */
    .tab-panel.tab-panel-scroll[b-gexqf2ie75] {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ─── Side-by-Side layout ─────────────────────────────────────────
       When the user toggles "FB + Visu", the content area switches to a
       two-column grid and both FernbedienungTab and VisualisierungTab
       render simultaneously. Component instances are preserved across
       the toggle (no remount, no SignalR/TCP re-establishment) — the
       only thing that changes is the parent container's display mode.

       The two pane widths are driven by CSS variables (--sbs-left /
       --sbs-right, both fractional `Xfr` units) so the split is
       user-resizable via the divider handle in the middle. JS persists
       the ratio in localStorage. */
    .console-content.split-mode[b-gexqf2ie75] {
        display: grid;
        /* Default ratio FB:Visu = 1:3. JS overwrites these custom
           properties from localStorage / the saved per-heizung ratio,
           but this fallback keeps the layout sensible during the brief
           window between page render and the JS init. */
        grid-template-columns: var(--sbs-left, 1fr) 6px var(--sbs-right, 3fr);
        /* Explicit row height — without this the implicit `auto` row
           would size to content, which collapses to 0 because
           `.fernbed-tab` uses `height:100%` of *this very row*. The
           minmax(0, 1fr) bound also prevents the row from growing past
           the .console-content height when an inner element reports a
           larger intrinsic size. */
        grid-template-rows: minmax(0, 1fr);
        gap: 0;
    }

    /* Inside split-mode the regular absolute-stacked tab-panel layout
       no longer applies. Hide tabs that aren't part of the split. */
    .console-content.split-mode > .tab-panel:not(.sbs-pane)[b-gexqf2ie75] {
        display: none;
    }

    /* The two split panes opt out of the stacking layer and become
       regular grid items. min-width:0 prevents grid blowout if a
       child's content tries to dictate column width. */
    .console-content.split-mode > .tab-panel.sbs-pane[b-gexqf2ie75] {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        overflow: auto;
        min-width: 0;
        transition: none;
    }

    /* Draggable divider between the two split panes. Sits in the middle
       grid column; turns into a primary-coloured bar on hover/focus/drag
       to confirm the affordance. Cursor is col-resize so the user knows
       it's grabbable. */
    .console-content.split-mode > .sbs-divider[b-gexqf2ie75] {
        background: var(--app-border-color, #e1e8ee);
        cursor: col-resize;
        user-select: none;
        touch-action: none;
        position: relative;
        z-index: 5;
        transition: background 0.15s ease;
    }
    .console-content.split-mode > .sbs-divider:hover[b-gexqf2ie75],
    .console-content.split-mode > .sbs-divider:focus-visible[b-gexqf2ie75],
    .console-content.split-mode > .sbs-divider.dragging[b-gexqf2ie75] {
        background: var(--color-primary);
        outline: none;
    }
    /* Subtle dotted-grip indicator centered vertically — three dots make
       the handle read as "I can be dragged". Drawn as a CSS gradient so
       no extra DOM is needed. */
    .console-content.split-mode > .sbs-divider[b-gexqf2ie75]::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 2px;
        height: 36px;
        background-image: radial-gradient(circle, currentColor 1px, transparent 1.5px);
        background-size: 2px 6px;
        background-repeat: repeat-y;
        opacity: 0.6;
        color: var(--text-secondary);
        pointer-events: none;
    }
    .console-content.split-mode > .sbs-divider:hover[b-gexqf2ie75]::after,
    .console-content.split-mode > .sbs-divider.dragging[b-gexqf2ie75]::after {
        opacity: 1;
        color: #fff;
    }

    /* Class added to <body> while dragging so the col-resize cursor
       sticks even when the mouse leaves the divider, and so iframes /
       canvases inside the panes don't steal pointer events. */
    body.sbs-dragging[b-gexqf2ie75],
    body.sbs-dragging *[b-gexqf2ie75] {
        cursor: col-resize !important;
        user-select: none !important;
    }

    /* ── Responsive FB pane (redesigned) ─────────────────────────────
       In split-mode the FB sidebar is hidden by default and re-shown
       via the chevron toggle. No container-queries, no flex-shrink,
       no 100%-based --grid-w override — every previous attempt to
       make the grid scale below 736 px in narrow splits ran afoul of
       the same root cause: `.term-canvas-area` is `position: absolute`
       and the percentage resolution at certain layout moments
       resolves to 0, producing a negative calc inside the min() and
       a zero-width grid. The grid now stays at its component-default
       100vw clamp (≤ 736 px); when the pane gets narrower than that,
       `.term-canvas-area`'s `overflow: auto` provides a horizontal
       scrollbar. Visible always > pretty-but-broken.

       `::deep` crosses the Blazor scoped-CSS boundary into
       FernbedienungTab's DOM. */
    .console-content.split-mode > .tab-panel.sbs-sidebar-hidden[b-gexqf2ie75]  .term-sidebar {
        display: none;
    }

    /* Sidebar toggle: a thin full-height vertical handle bar at the
       LEFT edge of the FB pane. position:absolute (overlay) instead
       of a flex item, because the SBS pane is a grid item with row
       height driven by minmax(0, 1fr) — switching it to flex caused
       infinite-shrink layout loops on the visu pane.
       Width 12px so the leftmost FB content effectively gets a 12px
       gutter, but the underlying buttons (nav arrow pad, 127, etc.)
       are mostly NOT in that gutter — they sit at horizontal offsets
       deeper into the content area. The bar is centered between the
       grid divider and the SBS pane's left edge in a way that doesn't
       hit-test-shadow the nav overlay. */
    /* Width of the side-by-side sidebar edge-rail toggle (.sbs-sidebar-toggle)
       and the gutter that sits next to it. Parameterised so PiMode (the
       touchscreen kiosk) can double it to a usable touch target — see
       .tab-panel.pi-touch below. Non-Pi (mouse) stays 12px. Mirrors the
       --term-rail-w pattern in FernbedienungTab. */
    .tab-panel[b-gexqf2ie75] {
        --sbs-rail-w: 12px;
    }

    /* PiMode (touchscreen kiosk): double the edge-rail width so the thin
       12px tap target becomes usable with a finger. The class is added to
       the FB .tab-panel only when PiMode.Enabled. */
    .tab-panel.pi-touch[b-gexqf2ie75] {
        --sbs-rail-w: 24px;
    }

    .sbs-sidebar-toggle[b-gexqf2ie75] {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: var(--sbs-rail-w);
        padding: 0;
        background: rgba(0, 0, 0, 0.04);
        border: 0;
        border-right: 1px solid rgba(0, 0, 0, 0.08);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-secondary);
        line-height: 1;
        z-index: 20;
        transition: background 0.15s ease, color 0.15s ease, width 0.15s ease, border-right-color 0.15s ease;
    }
    .sbs-sidebar-toggle:hover[b-gexqf2ie75] {
        background: rgba(30, 148, 188, 0.10);
        color: var(--color-primary);
        border-right-color: rgba(30, 148, 188, 0.5);
        width: calc(var(--sbs-rail-w) + 4px);
    }
    .sbs-sidebar-toggle:focus-visible[b-gexqf2ie75] {
        outline: 2px solid var(--color-primary);
        outline-offset: -2px;
    }
    .sbs-sidebar-toggle svg[b-gexqf2ie75] {
        width: 10px;
        height: 10px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform 0.2s ease;
    }
    /* Default: chevron points right (▶) — "click to open the sidebar".
       is-open: rotates 180° to point left (◀) — "click to collapse". */
    .sbs-sidebar-toggle.is-open svg[b-gexqf2ie75] {
        transform: rotate(180deg);
    }
    /* PiMode: the rail is double-width, so enlarge the chevron to match the
       bigger touch target. */
    .tab-panel.pi-touch .sbs-sidebar-toggle svg[b-gexqf2ie75] {
        width: 16px;
        height: 16px;
    }
    /* When the sidebar IS open, push the FB tab right by the bar's
       width so the bar doesn't overlay the now-visible inner sidebar.
       When the sidebar is HIDDEN, the FB content also gets the same
       left padding so the bar doesn't overlap the leftmost content.
       Uses --sbs-rail-w so the gutter matches the (PiMode-doubled) rail. */
    .console-content.split-mode > .tab-panel.sbs-pane-left[b-gexqf2ie75]  .fernbed-tab {
        padding-left: var(--sbs-rail-w);
    }

    /* Connection Modal styles moved to global app.css */

    /* Responsive - Extra Large screens */
    @media (min-width: 1600px) {
        .console-tab-home[b-gexqf2ie75] {
            width: 340px;
            min-width: 340px;
            font-size: 1.1rem;
            padding: 1.1rem 1.4rem;
        }
        
        .console-tab[b-gexqf2ie75] {
            font-size: 1.05rem;
            padding: 1.1rem 1.6rem;
        }
        
        .tab-icon[b-gexqf2ie75] {
            font-size: 1.2rem;
        }
        
        .tab-text[b-gexqf2ie75] {
            font-size: 1.05rem;
        }
        
        .console-action-btn[b-gexqf2ie75] {
            font-size: 1.05rem;
            padding: 0.7rem 1.4rem;
        }

        .console-title h1[b-gexqf2ie75] {
            font-size: 1.25rem;
        }

        .console-status[b-gexqf2ie75] {
            font-size: 1rem;
        }
    }

    /* Responsive - Large screens */
    @media (min-width: 1400px) and (max-width: 1599px) {
        .console-tab-home[b-gexqf2ie75] {
            width: 300px;
            min-width: 300px;
            font-size: 1.05rem;
            padding: 1rem 1.3rem;
        }
        
        .console-tab[b-gexqf2ie75] {
            font-size: 1rem;
            padding: 1rem 1.4rem;
        }
        
        .tab-icon[b-gexqf2ie75] {
            font-size: 1.15rem;
        }
        
        .tab-text[b-gexqf2ie75] {
            font-size: 1rem;
        }
        
        .console-action-btn[b-gexqf2ie75] {
            font-size: 1rem;
            padding: 0.65rem 1.3rem;
        }

        .console-title h1[b-gexqf2ie75] {
            font-size: 1.15rem;
        }

        .console-status[b-gexqf2ie75] {
            font-size: 0.95rem;
        }
    }

    /* Responsive - Medium screens */
    @media (max-width: 1200px) {
        .console-tab-home[b-gexqf2ie75] {
            width: 260px;
            min-width: 260px;
            font-size: 0.95rem;
            padding: 0.9rem 1.1rem;
        }
        
        .console-tab[b-gexqf2ie75] {
            font-size: 0.9rem;
            padding: 0.9rem 1.2rem;
        }
        
        .tab-text[b-gexqf2ie75] {
            font-size: 0.9rem;
        }
        
        .console-action-btn[b-gexqf2ie75] {
            font-size: 0.9rem;
            padding: 0.55rem 1rem;
        }
    }

    /* Gemessen am 2026-08-25: die Reiterleiste ist bei 1280 px 1483 px breit (Ueberlauf
       203 px), bei 1024 px 1257 px (Ueberlauf 233 px) -- also genau auf dem Wandpanel und dem
       Pi-Kiosk. Sie war zwar per overflow-x scrollbar, aber ohne Rollbalken, ohne Verlaufskante
       und ohne Pfeile: nichts deutete an, dass rechts noch Reiter stehen. Auf dem Touch-Panel
       konkurriert die Wischgeste ausserdem mit dem Klick-Handler der Knoepfe.

       Deshalb bricht die Zeile jetzt um, statt zu scrollen. Eine zweite Reiterzeile kostet
       ~44 px Hoehe und macht JEDEN Reiter sichtbar und mit einem Fingertipp erreichbar. */
    @media (max-width: 1400px) {
        .console-tabs[b-gexqf2ie75] {
            flex-wrap: wrap;
            overflow-x: visible;
        }

        /* Der Abstandhalter schoebe in einer umgebrochenen Zeile alles Folgende in eine
           eigene Zeile -- in der gescrollten Zeile war er sinnvoll, hier nicht. */
        .console-tabs-spacer[b-gexqf2ie75] {
            display: none;
        }
    }

    /* Responsive - Small-Medium screens */
    @media (max-width: 1024px) {
        .console-tab-home[b-gexqf2ie75] {
            width: 200px;
            min-width: 200px;
            font-size: 0.9rem;
        }
        
        .console-tab[b-gexqf2ie75] {
            padding: 0.8rem 1rem;
        }
    }

    /* Responsive - Small screens */
    @media (max-width: 768px) {
        .console-header[b-gexqf2ie75] {
            padding: 0.4rem 0.75rem;
        }

        .console-subtitle[b-gexqf2ie75] {
            display: none;
        }

        .console-tabs[b-gexqf2ie75] {
            padding: 0;
        }

        .console-tab[b-gexqf2ie75] {
            padding: 0.5rem 0.6rem;
            /* Mindestens 44 px Kantenlaenge: bei ausgeblendeter Beschriftung blieben sonst
               ~37x37 px -- die Embed-Leiste (datentab-embed.css) haelt genau diese 44 px
               bereits ein, die Desktop-Leiste tat es nicht.
               ⚠ Hier stand `var(--size-touch-sm, 44px)`. Der Ersatzwert suggerierte 44 px,
               griff aber nie (das Token existiert) — und das Token lieferte damals 40,25 px.
               Eine driftende Rueckfallangabe ist genau deshalb verboten: sie sagt etwas zu,
               was sie nicht einloest. Das Token traegt die Zusage jetzt selbst (46 px). */
            min-height: var(--size-touch-sm);
            min-width: 44px;
            justify-content: center;
        }

        .console-tab-home[b-gexqf2ie75] {
            width: auto;
            min-width: 50px;
        }

        .tab-text[b-gexqf2ie75] {
            display: none;
        }

        .tab-icon[b-gexqf2ie75] {
            font-size: 1.1rem;
        }

        .console-action-btn[b-gexqf2ie75] {
            margin: 0.3rem 0.5rem;
            padding: 0.4rem 0.6rem;
            font-size: 0.75rem;
        }
    }
/* /Components/Pages/Heizungen/HeizungDetail.razor.rz.scp.css */
/* Zugehörigkeit block on the Info tab (ADR-0170). Tokens only. */
.zugehoerigkeit h5[b-e33scvtx8x] {
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
    color: var(--text-secondary);
}

.zugehoerigkeit-list[b-e33scvtx8x] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.zugehoerigkeit-item[b-e33scvtx8x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}
/* /Components/Pages/Heizungen/HeizungenListe.razor.rz.scp.css */
/* Zugehörigkeits-Chips unter dem Kartentitel (ADR-0170): „Eigentümer · Org", „Auftragnehmer · Org",
   „Organisation · Org". Nur Tokens — die Rolle ist Chrome, keine Datenfarbe. Die Karte selbst
   (.heizung-card-new, .heizung-title) bleibt in app.css; hier liegt nur, was diese Seite neu
   ins Markup stellt. */
.heizung-zugehoerigkeiten[b-t1ylzwquou] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.heizung-zugehoerigkeit-chip[b-t1ylzwquou] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1.4;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-default);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    white-space: nowrap;
}

.heizung-zugehoerigkeit-chip[data-rolle="Eigentuemer"][b-t1ylzwquou] {
    border-color: transparent;
    background: var(--color-primary-10);
    color: var(--color-primary);
}

.heizung-zugehoerigkeit-chip[data-rolle="Auftragnehmer"][b-t1ylzwquou] {
    border-color: transparent;
    background: var(--color-info-subtle);
    color: var(--color-info-dark);
}
/* /Components/Pages/Heizungen/KontaktePage.razor.rz.scp.css */
.kontakte-page[b-yzwr59gzal] {
    display: flex;
    flex-direction: column;
    background: transparent;
    color: var(--text-body);
    gap: 1rem;
}

.page-header[b-yzwr59gzal] {
    padding: 0.75rem 1.25rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg, 8px);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.page-header h3[b-yzwr59gzal] { margin: 0; font-size: 1.1rem; color: var(--color-primary); }

.back-link[b-yzwr59gzal] {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.9rem;
}
.back-link:hover[b-yzwr59gzal] { color: var(--color-primary-hover); }

.status-message[b-yzwr59gzal] {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md, 6px);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}
.status-message.success[b-yzwr59gzal] { background: var(--color-success-light); color: var(--color-success); }
.status-message.error[b-yzwr59gzal]   { background: var(--color-danger-light);  color: var(--color-danger); }
.status-message .close-btn[b-yzwr59gzal] { background: none; border: none; color: inherit; cursor: pointer; margin-left: auto; font-size: 1.2rem; }

/* Card layout —
   Left column: Adresse on top, Ansprechpartner directly below.
   Right column: Geokoordinaten spans both rows so the map gets full height.
*/
.cards-grid[b-yzwr59gzal] {
    display: grid;
    grid-template-columns: minmax(0, 40%) minmax(0, 60%);
    grid-template-areas:
        "adresse  geo"
        "ansprech geo";
    align-items: stretch;
    gap: 1rem;
}
.adresse-card[b-yzwr59gzal]  { grid-area: adresse; }
.ansprech-card[b-yzwr59gzal] { grid-area: ansprech; }
.geo-card[b-yzwr59gzal]      { grid-area: geo; }

.kontakt-card[b-yzwr59gzal] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg, 8px);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.kontakt-card-header[b-yzwr59gzal] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    min-height: 48px;        /* keeps header heights aligned across cards regardless of action button presence */
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-default);
}
.kontakt-card-header h4[b-yzwr59gzal] { margin: 0; font-size: 0.95rem; color: var(--color-primary); }

.kontakt-card-body[b-yzwr59gzal] {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Form elements */
.form-row[b-yzwr59gzal] { margin-bottom: 0.5rem; }
.form-row > label[b-yzwr59gzal] { display: block; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.25rem; }
.form-row input[b-yzwr59gzal], .form-row textarea[b-yzwr59gzal] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-body);
    font-size: 0.9rem;
    box-sizing: border-box;
}
.form-row input:focus[b-yzwr59gzal], .form-row textarea:focus[b-yzwr59gzal] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-10);
}
.form-row textarea[b-yzwr59gzal] { resize: vertical; font-family: inherit; }
.two-col[b-yzwr59gzal] { display: flex; gap: 0.75rem; }
.form-field[b-yzwr59gzal] { flex: 1; min-width: 0; }
.form-field label[b-yzwr59gzal] { display: block; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.25rem; }
.checkbox-row label[b-yzwr59gzal] { font-size: 0.9rem; color: var(--text-body); cursor: pointer; display: flex; align-items: center; gap: 0.5rem; }

.form-actions[b-yzwr59gzal] { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.btn-save[b-yzwr59gzal] { padding: 0.5rem 1rem; background: var(--color-primary); color: var(--text-on-primary); border: none; border-radius: var(--radius-sm); cursor: pointer; font-weight: 600; font-size: 0.85rem; }
.btn-save:hover[b-yzwr59gzal] { background: var(--color-primary-hover); }
.btn-save:disabled[b-yzwr59gzal] { opacity: 0.5; cursor: not-allowed; }
.btn-secondary[b-yzwr59gzal] { padding: 0.5rem 1rem; background: var(--surface-page); color: var(--text-body); border: 1px solid var(--border-default); border-radius: var(--radius-sm); cursor: pointer; font-size: 0.85rem; }
.btn-secondary:hover[b-yzwr59gzal] { background: var(--surface-hover); }
.btn-secondary:disabled[b-yzwr59gzal] { opacity: 0.5; cursor: not-allowed; }
.btn-delete[b-yzwr59gzal] { padding: 0.5rem 1rem; background: var(--color-danger); color: var(--text-on-primary); border: none; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.85rem; }
.btn-delete:hover[b-yzwr59gzal] { opacity: 0.9; }
.btn-cancel[b-yzwr59gzal] { padding: 0.5rem 1rem; background: var(--surface-page); color: var(--text-secondary); border: 1px solid var(--border-default); border-radius: var(--radius-sm); cursor: pointer; font-size: 0.85rem; }
.btn-cancel:hover[b-yzwr59gzal] { background: var(--surface-hover); }

/* Adresse info section — pushed to bottom of the card via margin-top:auto */
.adresse-info[b-yzwr59gzal] {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border-default);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 1rem;
    font-size: 0.85rem;
}
.info-label[b-yzwr59gzal] { color: var(--text-secondary); }
.info-value[b-yzwr59gzal] { color: var(--text-body); }

/* Mini button */
.mini-btn[b-yzwr59gzal] { padding: 0.3rem 0.75rem; border: 1px solid var(--border-default); background: transparent; color: var(--text-secondary); border-radius: var(--radius-sm); cursor: pointer; font-size: 0.8rem; }
.mini-btn.primary[b-yzwr59gzal] { border-color: var(--color-primary); color: var(--color-primary); }
.mini-btn:hover[b-yzwr59gzal] { background: var(--surface-hover); }

/* Ansprechpartner list */
.ansprech-list[b-yzwr59gzal] {
    flex: 0 0 auto;
    max-height: 280px;
    overflow-y: auto;
    border-bottom: 1px solid var(--border-default);
    margin: -0.25rem -0.25rem 0;
}

.ansprech-item[b-yzwr59gzal] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}
.ansprech-item:hover[b-yzwr59gzal] { background: var(--surface-hover); }
.ansprech-item.selected[b-yzwr59gzal] { background: var(--color-primary-light); border-left: 3px solid var(--color-primary); }
.ansprech-item.inactive[b-yzwr59gzal] { opacity: 0.5; }

.ap-avatar[b-yzwr59gzal] {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 700; color: var(--text-on-primary);
    flex-shrink: 0;
}
.ap-info[b-yzwr59gzal] { flex: 1; min-width: 0; }
.ap-name[b-yzwr59gzal] { font-size: 0.9rem; font-weight: 500; }
.ap-rolle[b-yzwr59gzal] { font-size: 0.8rem; color: var(--color-primary); font-weight: 500; }
.ap-detail[b-yzwr59gzal] { font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Editor / placeholder share the rest of the card body */
.ansprech-editor[b-yzwr59gzal] {
    padding-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.ansprech-editor h5[b-yzwr59gzal] { margin: 0 0 0.5rem 0; font-size: 0.95rem; color: var(--color-primary); }

.ansprech-placeholder[b-yzwr59gzal] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
    text-align: center;
}
.ansprech-placeholder .icon[b-yzwr59gzal] { font-size: 2rem; margin-bottom: 0.5rem; }

/* Empty list state */
.empty-state[b-yzwr59gzal] {
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    padding: 1.5rem 1rem; color: var(--text-secondary);
}
.empty-state .icon[b-yzwr59gzal] { font-size: 1.6rem; }

/* Rolle input with datalist */
.rolle-input input[b-yzwr59gzal] { width: 100%; }

/* Geo card */
.geo-card .kontakt-card-body[b-yzwr59gzal] { gap: 0.75rem; }
.geo-map[b-yzwr59gzal] {
    flex: 1;
    min-height: 280px;
    border-radius: var(--radius);
    border: 1px solid var(--border-default);
    overflow: hidden;
    background: var(--surface-page);
}
.geo-hint[b-yzwr59gzal] { font-size: 0.78rem; color: var(--text-secondary); margin: 0; }
.geo-coords-display[b-yzwr59gzal] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.6rem;
    background: var(--surface-page);
    border-radius: var(--radius-sm);
    font-family: monospace;
    font-size: 0.82rem;
    color: var(--text-body);
}

/* Loading / error */
.loading-screen[b-yzwr59gzal], .error-screen[b-yzwr59gzal] {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; color: var(--text-secondary); gap: 1rem;
    padding: 3rem 1rem;
}
.loading-screen .spinner[b-yzwr59gzal] {
    width: 50px; height: 50px;
    border: 4px solid var(--border-default); border-top-color: var(--color-primary);
    border-radius: 50%; animation: spin-b-yzwr59gzal 1s linear infinite;
}
.btn-back[b-yzwr59gzal] {
    padding: 0.75rem 1.5rem; background: var(--color-primary); color: var(--text-on-primary);
    text-decoration: none; border-radius: var(--radius); font-weight: 500;
}

/* Scrollbars */
.ansprech-list[b-yzwr59gzal]::-webkit-scrollbar, .kontakt-card-body[b-yzwr59gzal]::-webkit-scrollbar { width: 6px; }
.ansprech-list[b-yzwr59gzal]::-webkit-scrollbar-thumb, .kontakt-card-body[b-yzwr59gzal]::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--radius-xs); }

@keyframes spin-b-yzwr59gzal { to { transform: rotate(360deg); } }
@media (max-width: 900px) {
    .cards-grid[b-yzwr59gzal] {
        grid-template-columns: 1fr;
        grid-template-areas: "adresse" "geo" "ansprech";
    }
    .ansprech-list[b-yzwr59gzal] { max-height: 220px; }
    .geo-map[b-yzwr59gzal] { min-height: 260px; }
}
/* /Components/Pages/Heizungen/MbusBericht.razor.rz.scp.css */
.mbus-bericht[b-sj0bo3b0w8] {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-4);
    color: var(--text-body);
}

.mb-loading[b-sj0bo3b0w8],
.mb-access[b-sj0bo3b0w8] {
    padding: var(--space-6);
    text-align: center;
    color: var(--text-secondary);
}

.mb-header[b-sj0bo3b0w8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.mb-header h1[b-sj0bo3b0w8] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin: 0;
}

.mb-subtitle[b-sj0bo3b0w8] {
    color: var(--text-secondary);
    margin: var(--space-1) 0 0;
}

.mb-card[b-sj0bo3b0w8] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.mb-card h2[b-sj0bo3b0w8] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--space-3);
}

.mb-card h3[b-sj0bo3b0w8] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    margin: var(--space-3) 0 var(--space-2);
}

.mb-card-head[b-sj0bo3b0w8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.mb-card-head h2[b-sj0bo3b0w8] {
    margin: 0;
}

/* Zeitraum */
.mb-bucket-buttons[b-sj0bo3b0w8] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.mb-chip[b-sj0bo3b0w8] {
    border: 1px solid var(--border-default);
    background: var(--surface-page);
    color: var(--text-body);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-4);
    cursor: pointer;
    font-size: var(--font-size-sm);
}

.mb-chip.is-active[b-sj0bo3b0w8] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--text-on-primary);
}

.mb-range[b-sj0bo3b0w8],
.mb-eff-inputs[b-sj0bo3b0w8] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
}

.mb-range label[b-sj0bo3b0w8],
.mb-eff-inputs label[b-sj0bo3b0w8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.mb-range input[b-sj0bo3b0w8],
.mb-eff-inputs input[b-sj0bo3b0w8] {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    background: var(--surface-page);
    color: var(--text-body);
    font-size: var(--font-size-base);
}

.mb-range input:focus[b-sj0bo3b0w8],
.mb-eff-inputs input:focus[b-sj0bo3b0w8] {
    outline: none;
    border-color: var(--border-focus);
}

/* Buttons */
.mb-btn[b-sj0bo3b0w8] {
    border: 1px solid var(--border-default);
    background: var(--surface-page);
    color: var(--text-body);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    font-size: var(--font-size-sm);
}

.mb-btn:hover[b-sj0bo3b0w8] {
    background: var(--surface-hover);
}

.mb-btn-primary[b-sj0bo3b0w8] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--text-on-primary);
}

.mb-btn-primary:hover[b-sj0bo3b0w8] {
    background: var(--color-primary-hover);
}

.mb-btn:disabled[b-sj0bo3b0w8] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Tables */
.mb-subtable[b-sj0bo3b0w8] {
    margin-bottom: var(--space-4);
}

.mb-unit[b-sj0bo3b0w8] {
    color: var(--text-muted);
    font-weight: var(--font-weight-normal);
}

.mb-table[b-sj0bo3b0w8] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.mb-table th[b-sj0bo3b0w8],
.mb-table td[b-sj0bo3b0w8] {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

.mb-table thead th[b-sj0bo3b0w8] {
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
    background: var(--surface-sunken);
}

.mb-num[b-sj0bo3b0w8] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.mb-total td[b-sj0bo3b0w8] {
    font-weight: var(--font-weight-semibold);
    border-top: 1px solid var(--border-strong);
}

/* Metrics */
.mb-metrics[b-sj0bo3b0w8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
}

.mb-metric[b-sj0bo3b0w8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    background: var(--surface-sunken);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
}

.mb-metric-label[b-sj0bo3b0w8] {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.mb-metric-value[b-sj0bo3b0w8] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.mb-eff-note[b-sj0bo3b0w8] {
    margin-top: var(--space-3);
}

/* Lastprofil duration curve */
.mb-dauerlinie[b-sj0bo3b0w8] {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    height: 140px;
    padding: var(--space-2);
    background: var(--surface-sunken);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
}

.mb-bar[b-sj0bo3b0w8] {
    flex: 1 1 auto;
    min-width: 1px;
    background: var(--color-primary);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

/* Status text */
.mb-muted[b-sj0bo3b0w8] {
    color: var(--text-muted);
}

.mb-error[b-sj0bo3b0w8] {
    color: var(--color-danger);
    margin-top: var(--space-2);
}
/* /Components/Pages/Heizungen/MbusVersandSection.razor.rz.scp.css */
.mb-card[b-5bkqqh8nub] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.mb-card h2[b-5bkqqh8nub] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--space-3);
}

.mb-card h3[b-5bkqqh8nub] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    margin: var(--space-3) 0 var(--space-2);
}

.mb-muted[b-5bkqqh8nub] {
    color: var(--text-muted);
}

.mb-error[b-5bkqqh8nub] {
    color: var(--color-danger);
    margin-top: var(--space-2);
}

/* Table */
.mb-table[b-5bkqqh8nub] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.mb-table th[b-5bkqqh8nub],
.mb-table td[b-5bkqqh8nub] {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

.mb-table thead th[b-5bkqqh8nub] {
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium);
    background: var(--surface-sunken);
}

.mb-num[b-5bkqqh8nub] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Form row */
.mb-eff-inputs[b-5bkqqh8nub] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
}

.mb-eff-inputs label[b-5bkqqh8nub] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.mb-eff-inputs input[b-5bkqqh8nub],
.mb-eff-inputs select[b-5bkqqh8nub] {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    background: var(--surface-page);
    color: var(--text-body);
    font-size: var(--font-size-base);
}

.mb-eff-inputs input:focus[b-5bkqqh8nub],
.mb-eff-inputs select:focus[b-5bkqqh8nub] {
    outline: none;
    border-color: var(--border-focus);
}

/* Inhalt multi-select (checkboxes) */
.mb-inhalt-checks[b-5bkqqh8nub] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    margin: 0;
}

.mb-inhalt-checks legend[b-5bkqqh8nub] {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    padding: 0 var(--space-1);
}

.mb-inhalt-checks label[b-5bkqqh8nub] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-body);
}

/* Buttons */
.mb-btn[b-5bkqqh8nub] {
    border: 1px solid var(--border-default);
    background: var(--surface-page);
    color: var(--text-body);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    font-size: var(--font-size-sm);
}

.mb-btn:hover[b-5bkqqh8nub] {
    background: var(--surface-hover);
}

.mb-btn-primary[b-5bkqqh8nub] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--text-on-primary);
}

.mb-btn-primary:hover[b-5bkqqh8nub] {
    background: var(--color-primary-hover);
}

.mb-btn:disabled[b-5bkqqh8nub] {
    opacity: 0.6;
    cursor: not-allowed;
}
/* /Components/Pages/Heizungen/NotizA4Ansicht.razor.rz.scp.css */
/* On-screen A4 Wartungsbericht view (ADR-0062 Briefpapier Phase 3).
   The .ct-modal* chrome comes from the shared rules in app.css; this file only
   widens the modal for the sheet and styles the A4 sheet + its content. Print
   rules that must hide the rest of the page live globally in app.css. */

.a4-modal[b-ze14jj2ahd] {
    /* Wider than the default ct-modal so a near-A4 sheet fits comfortably. */
    width: min(96vw, 880px);
}

.ct-modal-header .a4-print-btn[b-ze14jj2ahd] {
    margin-left: auto;
}

.a4-scroll[b-ze14jj2ahd] {
    background: #eceff3;
}

/* The A4 sheet itself — white page with the 210:297 aspect, padded like the PDF. */
.a4-sheet[b-ze14jj2ahd] {
    background: #fff;
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
    margin: 0 auto;
    padding: 28px 32px;
    max-width: 760px;
    font-size: 12px;
    line-height: 1.4;
}

/* ── Header ── */
.a4-head[b-ze14jj2ahd] {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.a4-head-builtin[b-ze14jj2ahd] {
    justify-content: space-between;
    align-items: baseline;
}

.a4-brand[b-ze14jj2ahd] {
    font-weight: 700;
    font-size: 18px;
}

.a4-kind[b-ze14jj2ahd] {
    color: var(--text-secondary);
    font-size: 13px;
}

.a4-head-logo[b-ze14jj2ahd] {
    flex: 0 0 40%;
}

.a4-head-logo img[b-ze14jj2ahd] {
    max-height: 56px;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

.a4-head-logo .a4-kind[b-ze14jj2ahd] {
    margin-top: 4px;
}

.a4-head-company[b-ze14jj2ahd] {
    flex: 1;
    text-align: right;
}

.a4-company-name[b-ze14jj2ahd] {
    font-weight: 700;
    font-size: 17px;
}

.a4-company-zusatz[b-ze14jj2ahd],
.a4-company-tag[b-ze14jj2ahd] {
    color: var(--text-body);
    font-size: 11px;
}

.a4-company-tag[b-ze14jj2ahd] {
    font-style: italic;
}

.a4-company-contact[b-ze14jj2ahd] {
    margin-top: 6px;
    color: var(--text-body);
    font-size: 10px;
}

.a4-rule[b-ze14jj2ahd] {
    height: 2px;
    margin: 8px 0 12px;
}

/* ── Title ── */
.a4-title[b-ze14jj2ahd] {
    font-weight: 700;
    font-size: 20px;
}

.a4-subtitle[b-ze14jj2ahd] {
    color: var(--text-secondary);
    font-size: 12px;
    margin-bottom: 12px;
}

/* ── Metadata ── */
.a4-meta[b-ze14jj2ahd] {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: 12px;
}

.a4-meta-row[b-ze14jj2ahd] {
    display: flex;
    gap: 10px;
    padding: 2px 0;
}

.a4-meta-label[b-ze14jj2ahd] {
    flex: 0 0 130px;
    font-weight: 600;
    color: var(--text-body);
}

.a4-meta-value[b-ze14jj2ahd] {
    flex: 1;
}

/* ── Sections ── */
.a4-section-label[b-ze14jj2ahd] {
    font-weight: 700;
    margin: 14px 0 4px;
}

.a4-text[b-ze14jj2ahd] {
    white-space: pre-wrap;
    margin-bottom: 6px;
}

/* ── Tables (checklist / matrix / material) ── */
.a4-table[b-ze14jj2ahd] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 8px;
}

.a4-table th[b-ze14jj2ahd],
.a4-table td[b-ze14jj2ahd] {
    border: 1px solid var(--border-default);
    padding: 5px 7px;
    text-align: left;
    vertical-align: top;
}

.a4-table th[b-ze14jj2ahd] {
    background: var(--surface-sunken);
    font-weight: 600;
}

.a4-checklist .a4-cell-label[b-ze14jj2ahd] {
    width: 60%;
}

.a4-abschnitt td[b-ze14jj2ahd] {
    background: var(--gray-100);
    font-weight: 600;
}

.a4-provenance[b-ze14jj2ahd] {
    color: var(--text-muted);
    font-style: italic;
    font-size: 10px;
    margin-top: 2px;
}

.a4-note[b-ze14jj2ahd] {
    color: var(--text-body);
    font-style: italic;
    font-size: 11px;
    margin-top: 2px;
}

.a4-cell-right[b-ze14jj2ahd] {
    text-align: right;
    font-weight: 600;
}

.a4-material-sum td[b-ze14jj2ahd] {
    font-weight: 600;
}

/* ── Images ── */
.a4-images[b-ze14jj2ahd] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 6px;
}

.a4-images figure[b-ze14jj2ahd] {
    margin: 0;
}

.a4-sig img[b-ze14jj2ahd] {
    max-height: 90px;
    border: 1px solid var(--border-default);
}

.a4-photo img[b-ze14jj2ahd] {
    max-height: 180px;
    border: 1px solid var(--border-default);
}

.a4-images figcaption[b-ze14jj2ahd] {
    max-width: 240px;
}

/* ── Footer ── */
.a4-foot[b-ze14jj2ahd] {
    margin-top: 18px;
}

.a4-foot-rule[b-ze14jj2ahd] {
    border-top: 1px solid var(--border-default);
    margin-bottom: 4px;
}

.a4-foot-row[b-ze14jj2ahd] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 10px;
}

.a4-foot-bank[b-ze14jj2ahd] {
    text-align: center;
    color: var(--text-secondary);
    font-size: 9px;
    margin-top: 2px;
}
/* /Components/Pages/Heizungen/NotizEditModal.razor.rz.scp.css */
/* The shared .ct-modal* chrome (.ct-modal-backdrop, .ct-modal,
   .ct-modal-header, .ct-modal-body, .ct-modal-footer, .ct-modal-close)
   lives in wwwroot/css/app.css since multiple components (NotizEditModal,
   NotizTemplateManageModal, NotizTemplateEditModal, NotizTemplatePickerModal,
   NotizStatusModal, NotizSendEmailModal, …) all share it. Blazor scoped CSS
   would otherwise only match elements rendered by THIS component, leaving
   sibling modals unstyled. */

/* ── Inline helpers (pending files, attachments in the edit modal) ─── */
.attachments-grid[b-y9xojjowpa] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.attachment-item[b-y9xojjowpa] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    background: var(--surface-hover);
    border-radius: 0.35rem;
    margin-bottom: 0.35rem;
}

.attachment-thumb-img[b-y9xojjowpa] {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.attachment-icon[b-y9xojjowpa] {
    font-size: 1.5rem;
}

.attachment-name[b-y9xojjowpa] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pending-files-list[b-y9xojjowpa] {
    margin: 0.4rem 0 0 0;
    padding-left: 1.2rem;
    font-size: 0.88rem;
    color: var(--text-muted);
}

/* ── "Vorlage verwenden …" launcher row (replaces the inline template
   grid; the actual picker UI lives in NotizTemplatePickerModal). ── */
.tm-pick-row[b-y9xojjowpa] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.55rem 0.75rem;
    background: var(--surface-hover);
    border: 1px dashed var(--border-default);
    border-radius: 0.45rem;
}

.tm-pick-btn[b-y9xojjowpa] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.tm-pick-hint[b-y9xojjowpa] {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
    line-height: 1.3;
    color: var(--text-muted);
}

@media (max-width: 480px) {
    .tm-pick-row[b-y9xojjowpa] {
        padding: 0.5rem 0.6rem;
    }
    .tm-pick-hint[b-y9xojjowpa] {
        flex-basis: 100%;
        font-size: 0.78rem;
    }
}

/* Der Zustellungs-Hinweis unter „Zuweisen an": neutral bleibt neutral, eine
   unvollstaendige Zustellung muss sich davon abheben — sonst liest sie sich wie
   die Bestaetigung, die daneben steht. */
.zuweisen-warnung[b-y9xojjowpa] {
    color: var(--color-warning-dark);
    font-weight: var(--font-weight-medium);
}

/* „Sichtbar fuer" ohne Auswahl: der Autor gehoert keiner Organisation an, es gibt
   also nichts zu waehlen -- der Wert wird aber TROTZDEM gezeigt (ADR-0196). Liest
   sich als Wert, nicht als Hilfetext, darum dieselbe Hoehe und Polsterung wie ein
   .form-control und nur der Rahmen fehlt. */
.sichtbarkeit-statisch[b-y9xojjowpa] {
    padding: var(--space-2) 0;
    color: var(--text-primary);
}
/* /Components/Pages/Heizungen/NotizenTab.razor.rz.scp.css */
.notizen-toolbar[b-dobqoyxhha] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-default);
    margin-bottom: var(--space-2);
}

.notizen-search-toolbar[b-dobqoyxhha] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: var(--space-3);
}

.search-input-wrap[b-dobqoyxhha] {
    position: relative;
    flex: 1 1 260px;
    min-width: 220px;
}

.search-input-wrap .search-icon[b-dobqoyxhha] {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.65;
}

.search-input[b-dobqoyxhha] {
    padding-left: 2rem;
    padding-right: 2rem;
}

.search-clear[b-dobqoyxhha] {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.1rem 0.4rem;
}

.search-clear:hover[b-dobqoyxhha] {
    color: var(--text-primary);
}

.sort-control[b-dobqoyxhha] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.sort-label[b-dobqoyxhha] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
    white-space: nowrap;
}

.sort-select[b-dobqoyxhha] {
    width: auto;
    min-width: 220px;
}

.tm-toolbar-btn[b-dobqoyxhha] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
}

.tm-toolbar-btn .tm-icon[b-dobqoyxhha] {
    font-size: 1rem;
    line-height: 1;
}

.status-filter[b-dobqoyxhha] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.filter-label[b-dobqoyxhha] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-right: 0.25rem;
}

.filter-btn[b-dobqoyxhha] {
    background: var(--surface-card);
    color: var(--text-body);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-full);
    padding: 0.25rem 0.8rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.filter-btn:hover[b-dobqoyxhha] {
    background: var(--surface-active);
    border-color: var(--color-primary);
    color: var(--color-primary-hover);
}

.filter-btn.active[b-dobqoyxhha] {
    background: var(--color-primary);
    color: var(--text-on-primary);
    border-color: var(--color-primary);
}

.notizen-empty[b-dobqoyxhha] {
    padding: var(--space-6) var(--space-5);
    text-align: center;
    color: var(--text-secondary);
    background: var(--surface-sunken);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
}

.notizen-list[b-dobqoyxhha] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.notiz-card[b-dobqoyxhha] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-left: 4px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 0.6rem 1rem;
    transition: box-shadow 0.15s, background-color 0.15s;
}

.notiz-card.collapsed:hover[b-dobqoyxhha] {
    background: var(--surface-hover);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.notiz-card.expanded[b-dobqoyxhha] {
    padding: 0.85rem 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Deep-link landing flash: the card the user clicked in the /tickets inbox
   pulses briefly so it's obvious which ticket they landed on. Class added by
   notiz-focus.js, removed after the animation. */
.notiz-card.notiz-flash[b-dobqoyxhha] {
    animation: notiz-flash-pulse-b-dobqoyxhha 2.2s ease-out;
}

@keyframes notiz-flash-pulse-b-dobqoyxhha {
    0% { box-shadow: 0 0 0 3px var(--color-primary); border-left-color: var(--color-primary); }
    60% { box-shadow: 0 0 0 3px var(--color-primary); border-left-color: var(--color-primary); }
    100% { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
}

.notiz-card.status-offen[b-dobqoyxhha] {
    border-left-color: var(--color-danger);
}

.notiz-card.status-inbearbeitung[b-dobqoyxhha] {
    border-left-color: var(--color-warning);
}

.notiz-card.status-erledigt[b-dobqoyxhha] {
    border-left-color: var(--color-success);
    opacity: 0.92;
}

/* ── Priority + due date highlights ───────────────────────────────── */
/* High-priority notizen get a thicker red bar so they stand out in the list. */
.notiz-card.prio-hoch[b-dobqoyxhha] {
    border-left-width: 6px;
    border-left-color: var(--color-danger);
}

/* Overdue (FaelligAm in the past, not Erledigt): subtle red wash on the
   collapsed summary so it catches the eye without screaming. */
.notiz-card.is-ueberfaellig[b-dobqoyxhha] {
    background: var(--color-danger-subtle);
}

.prio-badge[b-dobqoyxhha] {
    display: inline-flex;
    align-items: center;
    padding: 0.05rem 0.45rem;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    flex-shrink: 0;
}

.prio-badge-hoch[b-dobqoyxhha] {
    background: var(--color-danger-10);
    color: var(--color-danger-dark);
    border: 1px solid var(--color-danger);
}

.prio-badge-niedrig[b-dobqoyxhha] {
    background: var(--color-primary-10);
    color: var(--color-primary-hover);
    border: 1px solid var(--color-primary);
}

/* @-mention autocomplete popup beneath the comment textarea. */
.comment-input-wrapper[b-dobqoyxhha] {
    position: relative;
}

.mention-popup[b-dobqoyxhha] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    margin-top: 0.25rem;
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    max-height: 240px;
    overflow-y: auto;
    padding: 0.25rem;
}

.mention-popup .mention-option[b-dobqoyxhha] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.45rem 0.6rem;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    color: inherit;
    transition: background 0.05s;
}

.mention-popup .mention-option:hover[b-dobqoyxhha],
.mention-popup .mention-option.active[b-dobqoyxhha] {
    background: var(--color-primary-10);
    color: var(--text-primary);
}

.mention-popup .mention-name[b-dobqoyxhha] {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 0.5rem;
}

.mention-popup .mention-token[b-dobqoyxhha] {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.82rem;
    color: var(--color-primary);
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .mention-popup[b-dobqoyxhha] {
        max-height: 180px;
    }
    .mention-popup .mention-option[b-dobqoyxhha] {
        padding: 0.5rem 0.55rem;
    }
    .mention-popup .mention-name[b-dobqoyxhha] { font-size: 0.9rem; }
    .mention-popup .mention-token[b-dobqoyxhha] { font-size: 0.75rem; }
}

/* ── Touch / phone layout (incl. the mobile app's embedded Ticket view) ──
   The toolbar is desktop-oriented (space-between + 220px min-widths + a
   wrapping status filter). On a phone it ragged-wraps and the sort dropdown
   clips. Stack everything full-width, scroll the status pills in one row. */
@media (max-width: 640px) {
    .notizen-toolbar[b-dobqoyxhha] {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.6rem;
    }
    /* „Neues Ticket" + „Vorlagen" teilen sich eine Zeile: untereinander
       kostete das Paar zwei volle Reihen, und mit Suche, Filter und
       Sortierung standen auf dem Telefon FUENF Leisten vor dem ersten
       Ticket — mehr als die halbe Anzeige. Die Tippflaeche bleibt 44 px. */
    .notizen-toolbar[b-dobqoyxhha] {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .notizen-toolbar > .btn[b-dobqoyxhha] {
        flex: 1 1 8rem;
        justify-content: center;
        min-height: 44px;
    }
    .notizen-toolbar > .btn.btn-primary[b-dobqoyxhha] {
        flex: 2 1 10rem;
    }
    .status-filter[b-dobqoyxhha] {
        flex-basis: 100%;
    }

    /* Status filter → a single horizontally-scrolling row of pills. */
    .status-filter[b-dobqoyxhha] {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0.35rem;
        padding-bottom: 2px;
    }
    .status-filter[b-dobqoyxhha]::-webkit-scrollbar { display: none; }
    .filter-label[b-dobqoyxhha] { display: none; }   /* "Status:" — redundant on mobile */
    .filter-btn[b-dobqoyxhha] {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 0.4rem 0.8rem;   /* taller touch target */
    }

    /* Search + sort stack full-width (fixes the clipped sort dropdown). */
    .notizen-search-toolbar[b-dobqoyxhha] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }
    .search-input-wrap[b-dobqoyxhha] {
        flex: 1 1 auto;
        min-width: 0;
    }
    .sort-control[b-dobqoyxhha] {
        width: 100%;
    }
    .sort-label[b-dobqoyxhha] { display: none; }   /* the option text is self-describing */
    .sort-select[b-dobqoyxhha] {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }
}

/* @-mention highlight inside comment text — subtle blue pill so the
   mentioned user is visually obvious without screaming. */
[b-dobqoyxhha] .mention {
    display: inline-block;
    padding: 0 0.3rem;
    background: var(--color-primary-10);
    color: var(--color-primary-hover);
    border-radius: var(--radius-sm);
    font-weight: 500;
    text-decoration: none;
}

/* Short-ID prefix in front of the title — small grey monospace pill. */
.notiz-shortid[b-dobqoyxhha] {
    display: inline-block;
    padding: 0 0.35rem;
    margin-right: 0.35rem;
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.85em;
    font-weight: 500;
    border-radius: var(--radius-sm);
    vertical-align: baseline;
}

/* Fällig-am pill — yellow normally, red when overdue. */
.summary-meta .meta-due[b-dobqoyxhha] {
    color: var(--color-warning-dark);
    font-weight: 500;
}
.summary-meta .meta-overdue[b-dobqoyxhha] {
    color: var(--color-danger);
    font-weight: 600;
}

/* ── Zusammenfassungszeile (immer sichtbar, klickbar) ──────────────────
   Ein Raster aus drei Spalten: Pfeil | Inhalt | Glocke.

   WARUM RASTER STATT FLEX-REIHE (2026-08-26, Bedienermeldung „sehr schlecht").
   Vorher lagen Pfeil, Statuswort, Prioritaet, Einstufung, Titel und die
   Kenndaten in EINER nicht umbrechenden Flex-Reihe. Alle Abzeichen trugen
   `flex-shrink: 0`, der Titel war das einzige Element, das nachgeben durfte —
   also wurde auf dem Telefon der Titel abgeschnitten und die Abzeichen blieben
   vollstaendig stehen. Genau falsch herum: die Abzeichen sind Beiwerk, der
   Titel ist der Grund, warum jemand die Liste ueberhaupt ansieht. */
.notiz-summary[b-dobqoyxhha] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    column-gap: var(--space-2);
    cursor: pointer;
    padding: var(--space-1) 0;
    user-select: none;
}

.notiz-summary:focus[b-dobqoyxhha] {
    outline: none;
}

.notiz-summary:focus-visible[b-dobqoyxhha] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* Der Pfeil war 40 px breit bei 1.8rem Schriftgroesse — auf dem Telefon ein
   Zehntel der Zeilenbreite fuer ein Dreieck. Er zeigt nur an, dass die Zeile
   aufklappt; die Flaeche zum Tippen ist ohnehin die ganze Zeile. */
.expand-chevron[b-dobqoyxhha] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    padding-top: 0.1rem;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.notiz-card.expanded .expand-chevron[b-dobqoyxhha] {
    color: var(--color-primary);
}

.summary-main[b-dobqoyxhha] {
    min-width: 0;
}

/* Zwei Zeilen statt Abschneiden. Ein Ticketname ist ein Satz („Umwaelzpumpe
   Heizkreis 2 laeuft nicht an — Motorschutz faellt sporadisch"); bei einer
   Zeile mit Auslassungspunkten bleibt auf dem Telefon ein Wort uebrig. */
.summary-main .notiz-titel[b-dobqoyxhha] {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: 1.35;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.notiz-card.expanded .summary-main .notiz-titel[b-dobqoyxhha] {
    display: block;
    overflow: visible;
}

/* Kenndaten-Streifen: umbrechendes Flex mit Abstand statt Trennpunkten.
   Der Abstand traegt die Trennung — ein „·" am Zeilenanfang war der Grund,
   warum die Zeile auf dem Telefon wie ein Textfehler aussah. */
.summary-meta[b-dobqoyxhha] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.1rem var(--space-3);
    margin-top: 0.2rem;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.summary-meta strong[b-dobqoyxhha] {
    color: var(--text-body);
    font-weight: var(--font-weight-medium);
}

.summary-meta .meta-item[b-dobqoyxhha] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.summary-meta .meta-assigned[b-dobqoyxhha] {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

/* Das Erstelldatum ist die am seltensten gesuchte Angabe der Zeile. */
.summary-meta .meta-created[b-dobqoyxhha] {
    color: var(--text-muted);
}

.summary-right[b-dobqoyxhha] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
}

/* Ab Wandpanel-Breite steht der Kenndaten-Streifen NEBEN dem Titel statt
   darunter: eine 1024 px breite Karte trug bisher zwei kurze Zeilen und
   liess zwei Drittel der Breite leer, was die Liste unnoetig lang machte.
   Reicht der Platz nicht, bricht der Streifen wie bisher um. */
@media (min-width: 1024px) {
    /* BEIDE Spalten duerfen schrumpfen (minmax(0, auto) statt auto). Mit
       `auto` nimmt sich der Kenndaten-Streifen seine volle Inhaltsbreite und
       der Titel bekommt den Rest — bei 1024 px war der Titel damit wieder
       abgeschnitten, derselbe Fehler wie vorher auf dem Telefon, nur eine
       Breite hoeher. Jetzt bricht der Streifen um, bevor der Titel weicht. */
    .summary-main[b-dobqoyxhha] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, auto);
        align-items: baseline;
        column-gap: var(--space-4);
    }

    .notiz-card.expanded .summary-main[b-dobqoyxhha] {
        display: block;
    }

    .notiz-card:not(.expanded) .summary-meta[b-dobqoyxhha] {
        margin-top: 0;
        justify-content: flex-end;
    }
}

.notiz-expanded-content[b-dobqoyxhha] {
    border-top: 1px solid var(--border-default);
    margin-top: 0.55rem;
    padding-top: 0.6rem;
}

/* legacy .notiz-header kept for fallback — unused after the summary refactor */
.notiz-header[b-dobqoyxhha] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.3rem;
}

.subscribe-btn[b-dobqoyxhha] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    padding: 0.25rem 0.75rem;
    font-size: 0.82rem;
    color: var(--text-body);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.subscribe-btn:hover[b-dobqoyxhha] {
    background: var(--surface-hover);
    border-color: var(--color-primary);
}

.subscribe-btn.subscribed[b-dobqoyxhha] {
    background: var(--color-primary-10);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.subscribe-btn.subscribed:hover[b-dobqoyxhha] {
    background: var(--color-danger-10);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.subscribe-label[b-dobqoyxhha] {
    font-weight: 500;
}

.subscriber-count[b-dobqoyxhha] {
    font-size: 0.78rem;
    opacity: 0.75;
}

/* ── Assignee row ─────────────────────────────────────────────────── */
.notiz-assignee-row[b-dobqoyxhha] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.25rem 0 0.5rem 0;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.assignee-icon[b-dobqoyxhha] {
    font-size: 1rem;
}

.assignee-label[b-dobqoyxhha] {
    color: var(--text-secondary);
}

/* Read-only pill shown at the top of the card */
.assignee-display[b-dobqoyxhha] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.65rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    background: rgba(30, 148, 188, 0.1);
    border: 1px solid rgba(30, 148, 188, 0.3);
    color: var(--color-primary);
    font-weight: 500;
}

.assignee-display.unassigned[b-dobqoyxhha] {
    background: transparent;
    border-color: var(--border-default);
    color: var(--text-secondary);
    font-style: italic;
    font-weight: normal;
}

/* Wrapper for the comment-form dropdown button */
.assignee-select-wrapper[b-dobqoyxhha] {
    position: relative;
    display: inline-block;
}

.comment-assign-btn[b-dobqoyxhha] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
}

.comment-assign-btn .caret[b-dobqoyxhha] {
    font-size: 0.7rem;
    opacity: 0.7;
}

/* Dropdown — positioned to open upward from the comment form,
   aligned to the right edge so it doesn't overflow the card. */
.assignee-dropdown[b-dobqoyxhha] {
    position: absolute;
    bottom: calc(100% + 4px);
    right: 0;
    z-index: 100;
    min-width: 220px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    padding: 0.25rem;
}

.assignee-dropdown .dd-option[b-dobqoyxhha] {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 0.45rem 0.7rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--text-body);
}

.assignee-dropdown .dd-option:hover[b-dobqoyxhha] {
    background: var(--surface-hover);
}

.assignee-dropdown .dd-option.active[b-dobqoyxhha] {
    background: var(--color-primary);
    color: var(--text-on-primary);
}

.assignee-dropdown .dd-loading[b-dobqoyxhha] {
    padding: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.88rem;
}

/* Statuswort im Kenndaten-Streifen. Der feste Rechtsabstand von 1rem stammt
   aus der alten Flex-Reihe, in der das Abzeichen VOR dem Titel stand; im
   Raster erzeugt der Streifen seine Abstaende selbst. */
.status-badge[b-dobqoyxhha] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: var(--font-weight-medium);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    white-space: nowrap;
}

.notiz-titel[b-dobqoyxhha] {
    margin: 0.25rem 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}

.notiz-beschreibung[b-dobqoyxhha] {
    color: var(--text-body);
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.notiz-loesung[b-dobqoyxhha] {
    background: var(--color-success-10);
    border-left: 3px solid var(--color-success);
    padding: 0.5rem 0.75rem;
    margin-top: 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
}

.notiz-formfields[b-dobqoyxhha] {
    margin-top: 0.6rem;
    padding: 0.6rem 0.75rem;
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
}

.notiz-formfields.is-locked[b-dobqoyxhha] {
    opacity: 0.78;
}

.formfields-label[b-dobqoyxhha] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.formfield-row[b-dobqoyxhha] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    flex-wrap: wrap;
}

.formfield-checkbox[b-dobqoyxhha] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    cursor: pointer;
    user-select: none;
}

.formfield-checkbox input[type="checkbox"][b-dobqoyxhha] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}

.formfield-checkbox.checked .formfield-label[b-dobqoyxhha] {
    text-decoration: line-through;
    color: var(--text-secondary);
}

.formfield-label[b-dobqoyxhha] {
    font-size: 0.92rem;
}

.formfield-dropdown[b-dobqoyxhha] {
    width: auto;
    min-width: 140px;
    max-width: 240px;
}

/* Optionsliste (Phase 5a): inline multi-state chips — one is selectable, tap again clears. */
.formfield-optionsliste[b-dobqoyxhha] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.formfield-option-chip[b-dobqoyxhha] {
    padding: 0.2rem 0.6rem;
    font-size: 0.85rem;
    line-height: 1.3;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    background: var(--surface-card);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.formfield-option-chip:hover:not(:disabled)[b-dobqoyxhha] {
    border-color: var(--color-primary);
}

.formfield-option-chip.selected[b-dobqoyxhha] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--text-on-primary);
    font-weight: 600;
}

.formfield-option-chip:disabled[b-dobqoyxhha] {
    cursor: default;
    opacity: 0.7;
}

/* Matrix-table field (Phase 5c) — grid of values, own line. */
.formfield-matrix-wrap[b-dobqoyxhha] {
    flex: 1 1 100%;
    overflow-x: auto;
}

.formfield-matrix[b-dobqoyxhha] {
    border-collapse: collapse;
    margin: 0.3rem 0;
    font-size: 0.85rem;
}

.formfield-matrix th[b-dobqoyxhha],
.formfield-matrix td[b-dobqoyxhha] {
    border: 1px solid var(--border-color);
    padding: 0.15rem 0.3rem;
    text-align: left;
}

.formfield-matrix th[b-dobqoyxhha] {
    background: var(--surface-sunken);
    font-weight: 600;
    white-space: nowrap;
}

.formfield-matrix .form-control[b-dobqoyxhha] {
    min-width: 70px;
    font-size: 0.82rem;
    padding: 0.1rem 0.3rem;
}

.formfield-matrix-add[b-dobqoyxhha] {
    margin-top: 0.2rem;
}

/* MaterialPicker field (Phase 5c) — consumption table + add row. */
.formfield-material-wrap[b-dobqoyxhha] {
    flex: 1 1 100%;
    overflow-x: auto;
}

.formfield-material[b-dobqoyxhha] {
    border-collapse: collapse;
    margin: 0.3rem 0;
    font-size: 0.85rem;
}

.formfield-material th[b-dobqoyxhha],
.formfield-material td[b-dobqoyxhha] {
    border: 1px solid var(--border-color);
    padding: 0.15rem 0.4rem;
    text-align: left;
}

.formfield-material th[b-dobqoyxhha] {
    background: var(--surface-sunken);
    font-weight: 600;
    white-space: nowrap;
}

.formfield-material-add[b-dobqoyxhha] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
    margin-top: 0.2rem;
}

.formfield-material-add .form-control[b-dobqoyxhha] { max-width: 240px; }
.formfield-material-menge[b-dobqoyxhha] { max-width: 90px !important; }

/* Section-heading field (Phase 5a) — groups the fields below it. */
.formfield-section-heading[b-dobqoyxhha] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
    margin: 0.6rem 0 0.1rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--border-color);
}

/* Per-field free-text note (Phase 5a) — own line below the field. */
.formfield-note[b-dobqoyxhha] {
    flex: 1 1 100%;
    font-size: 0.85rem;
    padding: 0.2rem 0.5rem;
}

.formfield-note-toggle[b-dobqoyxhha] {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 0 0.2rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.formfield-note-toggle:hover[b-dobqoyxhha] {
    color: var(--color-primary);
    text-decoration: underline;
}

.formfield-note-text[b-dobqoyxhha] {
    flex: 1 1 100%;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Per-photo caption (Phase 5a) — under each thumbnail. */
.formfield-photo-caption[b-dobqoyxhha] {
    margin-top: 0.2rem;
    width: 100%;
    font-size: 0.78rem;
    padding: 0.15rem 0.4rem;
}

.formfield-photo-caption-text[b-dobqoyxhha] {
    margin-top: 0.2rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-align: center;
    max-width: 120px;
}

/* Multi-signature blocks (Phase 5a) — image + signer name + delete, per signature. */
.signature-block[b-dobqoyxhha] {
    display: inline-flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0 0.6rem 0.4rem 0;
    vertical-align: top;
}

.signature-block-actions[b-dobqoyxhha] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.signature-name[b-dobqoyxhha] {
    font-size: 0.8rem;
    padding: 0.15rem 0.4rem;
    max-width: 220px;
}

.signature-name-text[b-dobqoyxhha] {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Telemetry meter prefill (Phase 5b) — "Messwert übernehmen" button, picker, provenance. */
.formfield-meter-btn[b-dobqoyxhha] {
    flex: 0 0 auto;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.1rem 0.45rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.formfield-meter-btn:hover[b-dobqoyxhha] {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.formfield-herkunft[b-dobqoyxhha] {
    flex: 1 1 100%;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-style: italic;
}

.formfield-confirmed[b-dobqoyxhha] {
    font-size: 0.72rem;
    color: var(--color-success);
    font-weight: 600;
}

.formfield-unconfirmed[b-dobqoyxhha] {
    font-size: 0.72rem;
    color: var(--color-warning);
    font-weight: 600;
}

.formfield-confirm-btn[b-dobqoyxhha] {
    flex: 0 0 auto;
    background: none;
    border: 1px solid var(--color-success);
    color: var(--color-success);
    border-radius: var(--radius-sm);
    padding: 0.05rem 0.4rem;
    font-size: 0.72rem;
    cursor: pointer;
}

.formfield-confirm-btn:hover[b-dobqoyxhha] {
    background: var(--color-success);
    color: var(--text-on-primary);
}

.formfield-meter-picker[b-dobqoyxhha] {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.2rem;
    padding: 0.3rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
}

.formfield-meter-option[b-dobqoyxhha] {
    text-align: left;
    background: none;
    border: none;
    padding: 0.2rem 0.4rem;
    font-size: 0.82rem;
    cursor: pointer;
    border-radius: var(--radius-xs);
}

.formfield-meter-option:hover[b-dobqoyxhha] {
    background: var(--color-primary);
    color: var(--text-on-primary);
}

.formfield-meter-option:hover .text-muted[b-dobqoyxhha] { color: var(--text-on-primary); }

/* Number-field unit suffix (Phase 5a) — e.g. "kW", "Bh". */
.formfield-unit[b-dobqoyxhha] {
    font-size: 0.9rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.formfield-meta[b-dobqoyxhha] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-left: auto;
}

.notiz-attachments[b-dobqoyxhha] {
    margin-top: 0.6rem;
}

.attachments-label[b-dobqoyxhha] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.attachments-grid[b-dobqoyxhha] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.attachment-thumb[b-dobqoyxhha] {
    display: block;
    width: 80px;
    height: 80px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-default);
}

.attachment-thumb img[b-dobqoyxhha] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.attachment-file[b-dobqoyxhha] {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.6rem;
    background: var(--surface-hover);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-body);
    font-size: 0.88rem;
}

.attachment-file:hover[b-dobqoyxhha] {
    background: var(--surface-card);
}

.notiz-timeline[b-dobqoyxhha] {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-default);
}

.timeline-label[b-dobqoyxhha] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.4rem;
}

.timeline-entry[b-dobqoyxhha] {
    position: relative;
    padding: 0.45rem 0.6rem 0.45rem 1.6rem;
    margin-bottom: 0.3rem;
    border-radius: var(--radius-xs);
    font-size: 0.9rem;
}

.timeline-entry[b-dobqoyxhha]::before {
    content: "";
    position: absolute;
    left: 0.5rem;
    top: 0.6rem;
    bottom: -0.3rem;
    width: 2px;
    background: var(--border-default);
}

.timeline-entry:last-child[b-dobqoyxhha]::before {
    display: none;
}

/* System / audit events (status change, visibility, admin access) read as quiet,
   flat log lines along the rail — they are metadata, not content. */
.timeline-entry.status-change[b-dobqoyxhha] {
    background: transparent;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

/* Comments are the human content — raise them into a bordered card with a
   primary-accented icon so they stand apart from the muted system events. */
.timeline-entry.comment[b-dobqoyxhha] {
    background: var(--color-primary-10);
    border: 1px solid var(--border-default);
    border-left: 3px solid var(--color-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding-top: 0.55rem;
    padding-bottom: 0.6rem;
    margin-bottom: 0.55rem;
}

.timeline-entry.comment .entry-icon[b-dobqoyxhha] {
    color: var(--surface-card);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.timeline-entry.comment .entry-meta strong[b-dobqoyxhha] {
    color: var(--color-primary-hover);
}

/* The solution attached to the "→ Erledigt" event — highlight it green like the
   summary box at the top so it's unmistakable in the timeline. Only the closing
   status-change carries an .entry-body, so this targets exactly the solution. */
.timeline-entry.status-change .entry-body[b-dobqoyxhha] {
    margin-top: 0.35rem;
    padding: 0.4rem 0.65rem;
    background: var(--color-success-10);
    border-left: 3px solid var(--color-success);
    border-radius: var(--radius-sm);
    color: var(--text-body);
}

.entry-head[b-dobqoyxhha] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.2rem;
    position: relative;
}

.entry-icon[b-dobqoyxhha] {
    position: absolute;
    left: -1.45rem;
    top: 0;
    background: var(--surface-card);
    border-radius: 50%;
    width: 1.2rem;
    height: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    border: 1px solid var(--border-default);
}

.entry-meta[b-dobqoyxhha] {
    flex: 1;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.entry-meta strong[b-dobqoyxhha] {
    color: var(--text-body);
}

.entry-delete[b-dobqoyxhha] {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0.1rem 0.3rem;
    border-radius: var(--radius-xs);
}

.entry-delete:hover[b-dobqoyxhha] {
    background: var(--color-danger-10);
    color: var(--color-danger);
}

.entry-body[b-dobqoyxhha] {
    color: var(--text-body);
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

.notiz-comment-form[b-dobqoyxhha] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border-default);
}

.comment-input[b-dobqoyxhha] {
    resize: vertical;
    font-size: var(--font-size-sm);
    font-family: inherit;
    min-height: 4.5rem;
}

.comment-form-actions[b-dobqoyxhha] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
}

.comment-attach-btn[b-dobqoyxhha] {
    cursor: pointer;
    margin: 0;
}

.pending-files-list[b-dobqoyxhha] {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.entry-attachments[b-dobqoyxhha] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.notiz-footer[b-dobqoyxhha] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--border-default);
}

/* Acht Schaltflaechen in einer Reihe, alle gleich laut — darunter die
   einzige, die etwas endgueltig entfernt. „Loeschen" rueckt darum an das
   andere Ende der Reihe: ein Fehlgriff neben „Folgeauftrag" ist sonst nur
   eine Fingerbreite entfernt. */
.notiz-actions[b-dobqoyxhha] {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
    align-items: center;
}

.notiz-actions .btn-outline-danger[b-dobqoyxhha] {
    margin-left: var(--space-4);
}

@media (max-width: 640px) {
    /* Auf dem Telefon bricht die Reihe ohnehin um — dort waere ein
       „margin-left: auto" nur ein Loch mitten im Block. */
    .notiz-actions .btn-outline-danger[b-dobqoyxhha] {
        margin-left: 0;
    }
    .notiz-actions .btn[b-dobqoyxhha] {
        flex: 1 1 9rem;
        justify-content: center;
        min-height: 44px;
    }
}

/* Archive-to-Dokumente result banner (ADR-0062 doc-archive). */
.archive-msg[b-dobqoyxhha] {
    display: block;
    margin-top: 0.35rem;
    color: var(--color-success-dark);
    font-size: 0.82rem;
}

.archive-msg-err[b-dobqoyxhha] {
    color: var(--color-danger-dark);
}

/* Modal styling lives in each modal's own scoped CSS
   (NotizEditModal.razor.css, NotizStatusModal.razor.css) so it
   reliably applies to that component's elements — Blazor's ::deep
   cascade from here does not target child-component roots directly. */


/* ─── Vertrauliche Tickets (ADR-0130 Task 5) ─────────────────────────── */

/* „Nur {Orgname}"-Badge in der Kartenzeile: EkBadge (badge-warning aus
   app.css) liefert Farbe/Form; hier nur Layout im Summary-Flex. */
.notiz-org-badge-wrap[b-dobqoyxhha] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.notiz-sichtbarkeit-row[b-dobqoyxhha] {
    gap: 0.5rem;
}

.sichtbarkeit-select[b-dobqoyxhha] {
    max-width: 240px;
    width: auto;
    font-size: 0.85rem;
    padding: 0.15rem 0.4rem;
    height: auto;
}

.sichtbarkeit-error[b-dobqoyxhha] {
    color: var(--color-danger);
    font-size: 0.82rem;
}

/* Einstufungswechsel + Admin-Zugriff im Verlauf: gleiche Entry-Optik wie
   Statuswechsel, Admin-Zugriff zusätzlich mit Warn-Akzent am Rail. */
.timeline-entry.admin-zugriff[b-dobqoyxhha] {
    border-left: 3px solid var(--color-warning);
    padding-left: 0.5rem;
}
/* /Components/Pages/Heizungen/NotizSendEmailModal.razor.rz.scp.css */
/* The `.ct-modal*` chrome (backdrop, container, header, close, body, footer) is
   shared and defined ONCE in wwwroot/css/app.css. This file keeps only this
   modal's width and its send-specific helpers. (Design language v1 — modal de-dup.) */
.ct-modal[b-8yjno60rwi] { width: min(92vw, 600px); }

.send-preview[b-8yjno60rwi] {
    padding: 0.6rem 0.85rem;
    background: var(--surface-hover);
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.send-preview > div[b-8yjno60rwi] {
    margin: 0.15rem 0;
}

.help-note[b-8yjno60rwi] {
    background: var(--surface-hover);
    border-left: 3px solid var(--color-primary);
    padding: 0.5rem 0.8rem;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    margin-top: 0.6rem;
}

.form-group[b-8yjno60rwi] {
    margin-bottom: 0.85rem;
}

.form-group label[b-8yjno60rwi] {
    display: block;
    font-size: 0.9rem;
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.25rem;
    color: var(--text-body);
}
/* /Components/Pages/Heizungen/NotizStatusModal.razor.rz.scp.css */
/* The `.ct-modal*` chrome (backdrop, container, header, close, body, footer) is
   shared and defined ONCE in wwwroot/css/app.css. This file keeps only this
   modal's width and its status-specific helpers. (Design language v1 — modal de-dup.) */
.ct-modal[b-i9d6wpddfe] { width: min(92vw, 540px); }

/* ── Status-specific helpers ──────────────────────────────────────── */
.current-status[b-i9d6wpddfe] {
    padding: 0.5rem 0.75rem;
    background: var(--surface-hover);
    border-radius: var(--radius-sm);
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.status-options[b-i9d6wpddfe] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.status-radio[b-i9d6wpddfe] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}

.status-radio:hover[b-i9d6wpddfe] {
    background: var(--surface-hover);
}

.status-radio.active[b-i9d6wpddfe] {
    background: var(--color-primary);
    color: var(--text-on-primary);
    border-color: var(--color-primary);
}

.status-radio input[type="radio"][b-i9d6wpddfe] {
    accent-color: var(--color-primary);
}
/* /Components/Pages/Heizungen/NotizTemplateEditModal.razor.rz.scp.css */
/* Edit modal — opens on top of NotizTemplateManageModal so we need
   higher z-index for both backdrop and modal box. ct-modal-* chrome
   classes are inherited globally from NotizEditModal.razor.css. */

.tm-edit-backdrop[b-shohf74gga] {
    z-index: var(--z-shell-modal-backdrop);
}

.notiz-template-edit-modal[b-shohf74gga] {
    z-index: var(--z-shell-modal);
    width: min(94vw, 640px);
}

/* ── Symbol picker (button + dropdown grid) ─────────────────────── */
.tm-symbol-picker[b-shohf74gga] {
    position: relative;
}

.tm-symbol-current[b-shohf74gga] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.5rem 0.85rem;
    background: var(--surface-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius, 0.4rem);
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    color: var(--text-primary);
    transition: border-color 0.1s, background 0.1s;
}

.tm-symbol-current:hover[b-shohf74gga] {
    border-color: var(--color-primary);
    background: var(--surface-hover);
}

.tm-symbol-current-glyph[b-shohf74gga] {
    font-size: 1.5rem;
    line-height: 1;
    min-width: 1.6em;
    text-align: center;
}

.tm-symbol-current-text[b-shohf74gga] {
    flex: 1;
    text-align: left;
    color: var(--text-secondary);
}

.tm-symbol-caret[b-shohf74gga] {
    color: var(--text-muted);
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* The drop-down panel that appears below the button. */
.tm-symbol-grid[b-shohf74gga] {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
    gap: 0.35rem;
    padding: 0.55rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius, 0.45rem);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    max-height: 240px;
    overflow-y: auto;
}

.tm-symbol-option[b-shohf74gga] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.35rem;
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: background 0.05s, border-color 0.05s, transform 0.05s;
}

.tm-symbol-option:hover[b-shohf74gga] {
    background: var(--surface-hover);
    border-color: var(--border-default);
}

.tm-symbol-option:active[b-shohf74gga] {
    transform: scale(0.92);
}

.tm-symbol-option.active[b-shohf74gga] {
    background: var(--color-primary-10, rgba(30, 148, 188, 0.15));
    border-color: var(--color-primary);
}

/* Form-row inherits its layout from the standard CSS, but small phones
   should let the three columns wrap into single lines. */
.notiz-template-edit-modal .form-row[b-shohf74gga] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.notiz-template-edit-modal .form-group label[b-shohf74gga] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    display: block;
}

@media (max-width: 480px) {
    .tm-symbol-current[b-shohf74gga] {
        padding: 0.45rem 0.65rem;
        font-size: 0.9rem;
    }
    .tm-symbol-grid[b-shohf74gga] {
        max-height: 200px;
        padding: 0.4rem;
    }
    .tm-symbol-option[b-shohf74gga] {
        height: 36px;
        font-size: 1.3rem;
    }
}

/* ─── FormSchema editor ─────────────────────────────────────────────── */

.form-schema-section[b-shohf74gga] {
    border-top: 1px solid var(--border-default);
    padding-top: 0.85rem;
    margin-top: 0.25rem;
}

.form-schema-header[b-shohf74gga] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.form-schema-header label[b-shohf74gga] {
    margin: 0;
    flex: 1;
    font-weight: 600;
}

.form-schema-empty[b-shohf74gga] {
    padding: 0.85rem 0.85rem;
    background: var(--surface-raised);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 0.88rem;
}

.form-schema-list[b-shohf74gga] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-schema-row[b-shohf74gga] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem;
    background: var(--surface-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    flex-wrap: wrap;
}

.form-schema-row-handle[b-shohf74gga] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.form-schema-typ-badge[b-shohf74gga] {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    background: #fff;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    white-space: nowrap;
}

.form-schema-label-input[b-shohf74gga] { flex: 2 1 180px; min-width: 140px; }
.form-schema-options-input[b-shohf74gga] { flex: 2 1 200px; min-width: 160px; }
.form-schema-default-select[b-shohf74gga] { flex: 1 1 120px; min-width: 110px; }
.form-schema-unit-input[b-shohf74gga] { flex: 0 1 130px; min-width: 90px; }
.form-schema-quelle-input[b-shohf74gga] { flex: 1 1 170px; min-width: 140px; }
.form-schema-cond-field[b-shohf74gga] { flex: 1 1 160px; min-width: 130px; }
.form-schema-cond-value[b-shohf74gga] { flex: 0 1 130px; min-width: 90px; }

/* Optionsliste preset buttons (Phase 5a) — one-click standard state-sets. */
.form-schema-presets[b-shohf74gga] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    flex: 1 1 100%;
}

.form-schema-preset-btn[b-shohf74gga] {
    padding: 0.1rem 0.45rem;
    font-size: 0.78rem;
    line-height: 1.3;
}

.form-schema-default-checkbox[b-shohf74gga] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
}

@media (max-width: 600px) {
    .form-schema-row[b-shohf74gga] { padding: 0.4rem; }
    .form-schema-label-input[b-shohf74gga],
    .form-schema-options-input[b-shohf74gga],
    .form-schema-default-select[b-shohf74gga],
    .form-schema-unit-input[b-shohf74gga],
    .form-schema-quelle-input[b-shohf74gga],
    .form-schema-cond-field[b-shohf74gga],
    .form-schema-cond-value[b-shohf74gga] { flex-basis: 100%; }
}
/* /Components/Pages/Heizungen/NotizTemplateManageModal.razor.rz.scp.css */
/* Manage modal styles. Chrome (.ct-modal-* / .ct-modal-backdrop) is
   global in wwwroot/css/app.css. Everything below uses the same design
   tokens as the rest of the WebTerm app:
     --color-primary (cyan #1E94BC)  · --color-primary-10
     --surface-card / --surface-hover / --surface-sunken
     --border-default                  · --border-strong
     --text-primary / --text-body / --text-muted
   so the modal feels like a first-class part of the Notizen tab,
   not a one-off admin form. */

/* Wider than the create-Notiz modal because the row list + actions need
   horizontal space, and the inline section row + intro hint fit better
   when there's room to breathe. */
.notiz-template-manage-modal[b-a8px8ft8cx] {
    width: min(96vw, 920px);
}

/* Tighter body padding so the modal feels generous on big screens but
   doesn't waste space on phones. */
.notiz-template-manage-modal .ct-modal-body[b-a8px8ft8cx] {
    padding: 1.25rem 1.5rem;
}

.notiz-template-manage-modal .ct-modal-header h3[b-a8px8ft8cx] {
    font-size: 1.15rem;
    font-weight: 600;
}

/* ── Intro hint ───────────────────────────────────────────────────── */
.tm-intro[b-a8px8ft8cx] {
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--text-muted);
    background: var(--surface-hover);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    margin: 0 0 1.25rem 0;
}

.tm-intro code[b-a8px8ft8cx] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 0 0.35rem;
    font-size: 0.85em;
    color: var(--color-primary-hover);
}

/* ── Section title row (label on the left, primary action on the right) ── */
.tm-section-row[b-a8px8ft8cx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    row-gap: 0.5rem;
    margin: 0 0 0.85rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-default);
}

.tm-section-title[b-a8px8ft8cx] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin: 0;
}

.tm-count-badge[b-a8px8ft8cx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6em;
    height: 1.6em;
    padding: 0 0.45rem;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary-hover);
    background: var(--color-primary-10, rgba(30, 148, 188, 0.12));
    border-radius: var(--radius-full);
    text-transform: none;
    letter-spacing: 0;
}

/* ── "Neue Vorlage" inline button (sits next to the section title) ── */
.tm-add-btn[b-a8px8ft8cx] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
    padding: 0.45rem 0.95rem;
    font-weight: 500;
}

/* ── Template-row list ────────────────────────────────────────────── */
.tm-row-list[b-a8px8ft8cx] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0 0 1rem 0;
}

.tm-row[b-a8px8ft8cx] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    /* Same 4 px left-accent pattern as .notiz-card. */
    border-left: 4px solid var(--border-default);
    border-radius: var(--radius-md);
    transition: box-shadow 0.15s, background-color 0.15s, border-color 0.15s;
}

.tm-row:hover[b-a8px8ft8cx] {
    background: var(--surface-hover);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.tm-row.prio-hoch[b-a8px8ft8cx]     { border-left-color: var(--color-danger); }
.tm-row.prio-niedrig[b-a8px8ft8cx]  { border-left-color: var(--color-primary); }
.tm-row.prio-normal[b-a8px8ft8cx]   { border-left-color: var(--color-primary); }

.tm-row.editing[b-a8px8ft8cx] {
    border-color: var(--color-primary);
    background: var(--color-primary-10, rgba(30, 148, 188, 0.08));
    box-shadow: 0 2px 8px rgba(30, 148, 188, 0.15);
}

.tm-row-icon[b-a8px8ft8cx] {
    font-size: 1.7rem;
    line-height: 1;
    flex-shrink: 0;
    width: 2.4rem;
    text-align: center;
}

.tm-row-main[b-a8px8ft8cx] {
    flex: 1;
    min-width: 0;
}

.tm-row-label[b-a8px8ft8cx] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.tm-row-meta[b-a8px8ft8cx] {
    margin-top: 0.2rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    line-height: 1.3;
}

.tm-row-meta .tm-meta-prio[b-a8px8ft8cx] {
    font-weight: 500;
    color: var(--text-secondary);
}

/* ── Vertrauliche Vorlagen (ADR-0130 Task 5 gap-fix) ─────────────────
   "Nur {Orgname}"-Badge — same shape as .notiz-org-badge-wrap in
   NotizenTab.razor.css; EkBadge (badge-warning from app.css) carries
   the colour, this only sets the flex layout in the meta row. */
.tm-org-badge-wrap[b-a8px8ft8cx] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* ── Compact icon-button row (↑ ↓ ✏️ 🗑️) ────────────────────────── */
.tm-row-actions[b-a8px8ft8cx] {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
}

.tm-icon-btn[b-a8px8ft8cx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--surface-card);
    color: var(--text-muted);
    border: 1px solid var(--border-default);
    border-radius: 0.4rem;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: background 0.1s, border-color 0.1s, color 0.1s, transform 0.05s, box-shadow 0.1s;
    font-family: inherit;
}

.tm-icon-btn:hover:not(:disabled)[b-a8px8ft8cx] {
    background: var(--surface-hover);
    border-color: var(--color-primary);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.tm-icon-btn:active:not(:disabled)[b-a8px8ft8cx] {
    transform: translateY(1px);
    box-shadow: none;
}

.tm-icon-btn:disabled[b-a8px8ft8cx] {
    opacity: 0.4;
    cursor: not-allowed;
}

.tm-icon-btn-primary:hover:not(:disabled)[b-a8px8ft8cx] {
    color: var(--color-primary);
    background: var(--color-primary-10, rgba(30, 148, 188, 0.1));
}

.tm-icon-btn-danger:hover:not(:disabled)[b-a8px8ft8cx] {
    color: var(--color-danger);
    background: rgba(220, 53, 69, 0.08);
    border-color: rgba(220, 53, 69, 0.4);
}

/* ── Empty state ───────────────────────────────────────────────────── */
.tm-empty-state[b-a8px8ft8cx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 2.25rem 1.5rem;
    background: var(--surface-hover);
    border: 1px dashed var(--border-default);
    border-radius: 0.6rem;
    text-align: center;
}

.tm-empty-icon[b-a8px8ft8cx] {
    font-size: 2.5rem;
    line-height: 1;
    opacity: 0.5;
}

.tm-empty-text[b-a8px8ft8cx] {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.4;
    max-width: 32rem;
}

/* ── Mobile tightening ───────────────────────────────────────────── */
@media (max-width: 768px) {
    .notiz-template-manage-modal .ct-modal-body[b-a8px8ft8cx] {
        padding: 1rem 1.1rem;
    }
}

@media (max-width: 480px) {
    .notiz-template-manage-modal .ct-modal-body[b-a8px8ft8cx] {
        padding: 0.85rem 0.85rem;
    }

    .tm-intro[b-a8px8ft8cx] {
        font-size: 0.85rem;
        padding: 0.55rem 0.7rem;
    }

    .tm-section-title[b-a8px8ft8cx] {
        font-size: 0.78rem;
    }

    .tm-row[b-a8px8ft8cx] {
        flex-wrap: wrap;
        padding: 0.6rem 0.7rem;
        gap: 0.6rem;
    }
    .tm-row-icon[b-a8px8ft8cx] {
        font-size: 1.5rem;
        width: 2rem;
    }
    .tm-row-label[b-a8px8ft8cx] { font-size: 0.95rem; }
    .tm-row-meta[b-a8px8ft8cx]  { font-size: 0.78rem; }

    .tm-row-actions[b-a8px8ft8cx] {
        flex-basis: 100%;
        justify-content: flex-end;
    }
    .tm-icon-btn[b-a8px8ft8cx] {
        width: 38px;
        height: 38px;
    }

    .tm-empty-state[b-a8px8ft8cx] {
        padding: 1.5rem 1rem;
    }
    .tm-empty-icon[b-a8px8ft8cx] { font-size: 2rem; }
    .tm-empty-text[b-a8px8ft8cx] { font-size: 0.88rem; }
}
/* /Components/Pages/Heizungen/NotizTemplatePickerModal.razor.rz.scp.css */
/* Picker pops on top of NotizEditModal — needs higher z-index than its
   parent's (10000/10001). ct-modal-* chrome inherited from the global
   styles in NotizEditModal.razor.css. */
.tp-backdrop[b-kagx67m0rl] {
    z-index: var(--z-shell-modal-backdrop);
}

.notiz-template-picker-modal[b-kagx67m0rl] {
    z-index: var(--z-shell-modal);
    width: min(94vw, 640px);
}

/* ── Section label ───────────────────────────────────────────────── */
.tp-section-label[b-kagx67m0rl] {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin: 0 0 0.4rem 0;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--border-default);
}

/* ── Empty state ─────────────────────────────────────────────────── */
.tp-empty[b-kagx67m0rl] {
    padding: 1.25rem 1rem;
    text-align: center;
    color: var(--text-muted);
    background: var(--surface-hover);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-md);
    font-size: 0.92rem;
}

/* ── Template button grid (matches the look the inline grid had) ─── */
.tp-grid[b-kagx67m0rl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.5rem;
}

.tp-btn[b-kagx67m0rl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.8rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    color: inherit;
    transition: background 0.1s, border-color 0.1s, transform 0.05s, box-shadow 0.1s;
    font-family: inherit;
    font-size: inherit;
}

.tp-btn:hover[b-kagx67m0rl] {
    background: var(--surface-hover);
    border-color: var(--color-primary);
    box-shadow: 0 2px 6px rgba(30, 148, 188, 0.15);
}

.tp-btn:active[b-kagx67m0rl] {
    transform: translateY(1px);
}

.tp-btn:focus-visible[b-kagx67m0rl] {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.tp-btn-icon[b-kagx67m0rl] {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
}

.tp-btn-label[b-kagx67m0rl] {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.tp-recurring[b-kagx67m0rl] {
    margin-left: 0.25rem;
    font-size: 0.85em;
    opacity: 0.85;
}

@media (max-width: 480px) {
    .tp-grid[b-kagx67m0rl] {
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
    }
    .tp-btn[b-kagx67m0rl] {
        padding: 0.55rem 0.6rem;
    }
    .tp-btn-label[b-kagx67m0rl] {
        font-size: 0.85rem;
    }
}
/* /Components/Pages/Heizungen/NoVnc.razor.rz.scp.css */
    .novnc-wrapper[b-v3jzrl58hn] {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        background: var(--surface-hover);
        border-radius: var(--radius-md);
        overflow: hidden;
    }

    .novnc-toolbar[b-v3jzrl58hn] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.5rem 1rem;
        background: var(--surface-card);
        border-bottom: 1px solid var(--border-default);
        flex-shrink: 0;
    }

    .novnc-title[b-v3jzrl58hn] {
        font-weight: 600;
        color: var(--text-primary);
        font-size: 0.95rem;
    }

    .novnc-ip[b-v3jzrl58hn] {
        color: var(--text-secondary);
        font-size: 0.85rem;
        font-family: monospace;
    }

    .novnc-toolbar-actions[b-v3jzrl58hn] {
        margin-left: auto;
        display: flex;
        gap: 0.5rem;
    }

    .novnc-frame[b-v3jzrl58hn] {
        flex: 1;
        width: 100%;
        border: none;
        background: #000;
    }
/* /Components/Pages/Heizungen/P2xxxFernbedienungContent.razor.rz.scp.css */
/* === P2xxx Display Styles (DOM grid + TCP terminal modes) === */

    /* HTTP Fernbedienung — pin grid to top-left like the original canvas
       did. The grid sizes itself from viewport units rather than container
       queries because on mobile the sidebar collapses to a horizontal
       toolbar and the parent .term-content-area can briefly resolve to
       0 height, which would zero out container-query units and break the
       grid. overflow:auto so the host scrolls if the grid is taller than
       the available space. */
    .term-canvas-area[b-wun6tzneu2] {
        display: block;
        background: var(--terminal-bg);
        outline: none;
        overflow: auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .term-canvas-area:focus[b-wun6tzneu2] {
        box-shadow: inset 0 0 0 2px rgba(30, 148, 188, 0.2);
    }

    /* The 46x18 character grid. At full size: 736x540 px with bold 26px
       Courier New (same as the original canvas). On smaller hosts the
       grid scales proportionally — cells, font and button visual all
       shrink together via the --grid-w custom property.
       The min() picks the smallest of: 736 px max, viewport width
       minus a small margin, or a height-derived width that keeps the
       736:540 aspect ratio so a short viewport doesn't clip the
       bottom. Viewport units (vw/vh) are used here on purpose — on
       mobile the sidebar collapses to a horizontal toolbar and the
       parent can briefly resolve to 0 width during layout, which would
       zero out a percentage-based calc and break the grid.

       Side-by-Side mode overrides this rule (in HeizungConsole.razor.css
       via ::deep) to use 100% instead, because there the FB pane is a
       known-stable, narrower-than-viewport host. */
    .p2xxx-grid[b-wun6tzneu2] {
        position: relative;

        --grid-w: min(736px, calc(100vw - 1rem), calc((100vh - 6rem) * 736 / 540));
        --cell-w: calc(var(--grid-w) / 46);      /* 16 px at full scale */
        --cell-h: calc(var(--cell-w) * 30 / 16); /* 30 px at full scale */

        display: grid;
        grid-template-columns: repeat(46, var(--cell-w));
        grid-template-rows: repeat(18, var(--cell-h));
        width: var(--grid-w);
        height: calc(var(--cell-h) * 18);
        background: var(--terminal-bg);
        color: var(--terminal-text);
        font-family: 'Courier New', Courier, monospace;
        font-weight: bold;
        font-size: calc(var(--cell-w) * 26 / 16); /* 26 px at full scale */
        line-height: 1;
        user-select: none;
    }

    /* PiMode kiosk (WP400 touch panel, 1280×800, coarse pointer): with the
       menu sidebar COLLAPSED the display may grow past the 736px desktop
       cap — every softkey cell grows proportionally with it (the "buttons
       too small for thick fingers" complaint). The height term binds on the
       800px-tall panel: (800 − 96) × 736/540 ≈ 960px → cells ≈ 20.9px →
       softkeys ≈ 31×35px visible (plus the ±8px pointer:coarse hit-area
       expansion below → ≈ 47×51px tappable). The 6rem vertical reserve
       stays: it covers the console header + tab strip (~85px), which are
       still rendered on the kiosk.
       Menu OPEN keeps the 736px cap on purpose: the FB pane is only ~999px
       wide there (1280 − 280px sidebar) and a wider grid would collide with
       the enlarged pi-touch arrow pad, covering the display's bottom-right
       softkeys. Collapsing the menu (edge rail, preference persisted) is
       the full-size mode. Desktop/mobile/SBS keep the base rule above
       (pi-touch + menu-collapsed never both apply there). */
    .term-main.pi-touch.menu-collapsed .p2xxx-grid[b-wun6tzneu2] {
        /* 702 = 540 × 1.3 (the pi-touch row stretch below): the height-derived
           width term must account for the taller rows or 18 rows clip. */
        --grid-w: min(1000px, calc(100vw - 1rem), calc((100vh - 6rem) * 736 / 702));
    }

    /* Kiosk row distance: rows are 30% taller than the character-proportional
       basis (operator ruling 2026-08-06 round 3 — stacked softkeys in the
       menu overlapped each other vertically; extra row air separates them and
       makes touch easier). Text stays cell-w-sized and centres in the taller
       row via the cells' flex centering. */
    .term-main.pi-touch .p2xxx-grid[b-wun6tzneu2] {
        --cell-h: calc(var(--cell-w) * 30 / 16 * 1.3);
    }

    /* NOTE: Cells are created by JavaScript (initP2xxxCanvas) and therefore
       do NOT carry the Blazor scoped-CSS attribute. Use ::deep so the rules
       below match descendants regardless of that attribute. */

    .p2xxx-grid[b-wun6tzneu2]  .p2xxx-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
        line-height: 1;
        overflow: hidden;
    }

    /* Cursor highlight — the controller's red span */
    .p2xxx-grid[b-wun6tzneu2]  .p2xxx-cell.cursor {
        color: var(--terminal-red, #ff6b6b);
        background: rgba(255, 107, 107, 0.15);
    }

    /* Zeilen-Touch affordance (field report 2026-08-10: the whole-row tap "works only
       for the person who knows"). JS marks every cell of a row whose tap resolves to
       a softkey with .row-tap (+ .row-tap-end on the last cell). The chevron says
       "this line is tappable"; the :active flash acknowledges the press. Feedback is
       a background swap ONLY — never `filter` (etnaviv drops the composited layer:
       invisible-but-clickable, see the warning below + the convention ratchet).
       Terminal palette carve-out: rgba literal mirrors the .cursor rule above. */
    .p2xxx-grid[b-wun6tzneu2]  .p2xxx-cell.row-tap { cursor: pointer; }

    .p2xxx-grid[b-wun6tzneu2]  .p2xxx-cell.row-tap:not(.btn):active {
        background: rgba(255, 255, 255, 0.12);
    }

    .p2xxx-grid[b-wun6tzneu2]  .p2xxx-cell.row-tap-end:not(.btn)::after {
        content: '›';
        color: var(--terminal-text, #e0e0e0);
        opacity: 0.4;
        font-size: calc(var(--cell-w) * 1.1);
        line-height: 1;
    }

    /* Server-side button (ASCII 127). Sized 24x27 px at full scale —
       wider than its 16 px grid column so it visually overlaps the
       next cell, matching the original canvas button. The size is
       expressed via the same --cell-w/--cell-h vars as the grid so
       the button shrinks proportionally on smaller viewports.
       min-height:0 / min-width:0 explicitly cancel the global
       .btn / form-control mobile touch-target rules in app.css —
       those grow normal buttons to 40 px on phones, but here the
       button is a grid-cell and must stay at its calculated size. */
    .p2xxx-grid[b-wun6tzneu2]  .p2xxx-cell.btn {
        position: relative;
        z-index: 1;
        width: calc(var(--cell-w) * 24 / 16);
        height: calc(var(--cell-h) * 27 / 30);
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 0;
        align-self: center;
        justify-self: start;
        cursor: pointer;
        background: linear-gradient(180deg,
            #2ec4e6 0%,
            #23a6d1 50%,
            #1f94b9 100%);
        border-radius: var(--radius-xs);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.3),
            inset 0 -1px 0 rgba(0, 0, 0, 0.25),
            0 1px 1px rgba(0, 0, 0, 0.15);
        /* No `filter` in this transition - see the warning below; the feedback
           states swap the background gradient instead. */
        transition: background 0.1s ease, transform 0.05s ease;
    }

    /* WARNUNG: NEVER use `filter` on these buttons. A CSS filter promotes the
       element to its own composited layer, and the WP400's defective etnaviv GPU
       silently fails to rasterize that layer: the button stays in the DOM, keeps
       its geometry and remains clickable - but is not painted at all. Measured on
       the panel 2026-08-07: the button under the cursor differed from its working
       neighbour in exactly one computed property, `filter: brightness(1.12)`;
       setting `filter: none` on that single element made it reappear instantly.
       Touch panels keep :hover STUCK on the last-tapped element, so the button the
       operator had just pressed was precisely the one that vanished. Feedback is
       therefore expressed as gradient swaps, which paint in place without
       promoting a layer. Pinned by a ratchet test. */

    /* Hover is meaningless on a touch panel, and its sticky state caused the
       dropout above - restrict it to devices that genuinely hover. */
    @media (hover: hover) {
        .p2xxx-grid[b-wun6tzneu2]  .p2xxx-cell.btn:hover {
            background: linear-gradient(180deg,
                #43d3f2 0%,
                #2ab4dd 50%,
                #23a3c7 100%);
        }
    }

    .p2xxx-grid[b-wun6tzneu2]  .p2xxx-cell.btn:active {
        background: linear-gradient(180deg,
            #1f94b9 0%,
            #1b86a8 50%,
            #177897 100%);
        transform: translateY(1px);
        box-shadow:
            inset 0 1px 0 rgba(0, 0, 0, 0.2),
            inset 0 -1px 0 rgba(255, 255, 255, 0.15);
    }

    .p2xxx-grid[b-wun6tzneu2]  .p2xxx-cell.btn:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 1px;
    }

    /* PiMode kiosk (WP400): ASCII-127 softkeys ×1.43 (round-2 ×1.3 + the
       operator's round-3 "+10%"), keeping the full 3D gradient/shadow/
       :active look from the base rules (a flat variant was tried and
       reverted the same day). HEIGHT is deliberately derived from
       --cell-w, NOT --cell-h: the kiosk stretches --cell-h ×1.3 above,
       and a cell-h-based button would grow with the stretch and keep
       overlapping the next row — the whole point of the taller rows is
       air BETWEEN buttons. The height factor is 1.3, deliberately LOWER
       than the 1.43 width factor (operator round 7): at 1.43 the gap to
       the next row was a mathematically-positive but invisible ~0.02
       cells — with 1.3 the gap is 30/16×1.3 − 27/16×1.3 ≈ 0.24 × cell-w
       (~4px on the panel), visible air between stacked softkeys. Width
       still spills into the following (empty) character column like the
       original canvas button. */
    .term-main.pi-touch .p2xxx-grid[b-wun6tzneu2]  .p2xxx-cell.btn {
        width: calc(var(--cell-w) * 24 / 16 * 1.43);
        height: calc(var(--cell-w) * 27 / 16 * 1.3);
        /* At ×1.43 the button is 2.145 cells wide; anchored at its cell's left
           edge the 1.145-cell spill swallowed the spacer column and touched
           the following text (operator, round 4). Recentre the overhang:
           shift half the spill (0.57 cells) into the EMPTY column on the
           left, leaving ~0.43 cells (≈7px) of air before the text. margin,
           not transform — the base :active press effect owns transform. */
        margin-left: calc(var(--cell-w) * -0.57);
    }

    /* Recentre clamp (operator, rounds 5+6). Two cases must NOT shift left:
       (a) buttons in the first two grid columns — no room, the shift clipped
       the title-row back button at the grid border (nth-child on the
       row-major 46-column grid: col0 = 46n+1, col1 = 46n+2); (b) buttons
       with a VALUE directly on their left ("1280<btn>", "-25.0<btn>" on the
       calibration pages) — the shift covered the value's last digit. Case
       (b) needs content knowledge, so p2xxx-display.js marks those cells
       with .btn-tight-left per frame (it also covers case (a), but the
       nth-child rules stay as a CSS-side safety net should the JS marking
       ever regress). Unshifted buttons keep their natural right spill. */
    .term-main.pi-touch .p2xxx-grid[b-wun6tzneu2]  .p2xxx-cell.btn:nth-child(46n+1),
    .term-main.pi-touch .p2xxx-grid[b-wun6tzneu2]  .p2xxx-cell.btn:nth-child(46n+2),
    .term-main.pi-touch .p2xxx-grid[b-wun6tzneu2]  .p2xxx-cell.btn.btn-tight-left {
        margin-left: 0;
        /* Clamped buttons keep their FULL overhang on the right — and the
           round-5 claim of "~0.85 cells of air" was an arithmetic error:
           anchored at the cell, a ×1.43 button reaches 2.145 cells, so a
           label 2 cells later is GRAZED (−0.145 cells), and pages like the
           Schornsteinfegermenue (edge-column buttons, labels immediately
           after) showed button-touches-text (operator, round 10). Narrower
           ×1.2 width (1.8 cells) restores ~0.2 cells (~3px) of air; the
           coarse-pointer hit inset keeps the tap target comfortable. */
        width: calc(var(--cell-w) * 24 / 16 * 1.2);
    }

    /* On touch devices, expand the hit area beyond the visible cell so
       buttons remain comfortably tappable even when the grid is small. */
    @media (pointer: coarse) {
        .p2xxx-grid[b-wun6tzneu2]  .p2xxx-cell.btn::before {
            content: '';
            position: absolute;
            inset: -8px;
            z-index: 1;
        }
    }

    /* Loading placeholder shown until the first frame arrives */
    .p2xxx-grid[b-wun6tzneu2]  .p2xxx-placeholder {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--terminal-bg);
        color: var(--terminal-text);
        font-family: 'Courier New', Courier, monospace;
        font-size: 18px;
        opacity: 0.85;
        pointer-events: none;
        z-index: 2;
    }

    /* Terminal Display (TCP modes) - fills parent completely */
    .term-terminal-display[b-wun6tzneu2] {
        flex: 1;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        background: var(--terminal-bg);
    }

    .term-terminal-panel[b-wun6tzneu2] {
        flex: 1;
        display: flex;
        flex-direction: column;
        background: var(--surface-page);
        border-radius: var(--radius-md);
        overflow: hidden;
    }

    #terminalDisplay[b-wun6tzneu2] {
        flex: 1;
        background: #000;
        overflow: hidden;
        position: relative;
    }

    .term-terminal-wrapper[b-wun6tzneu2] {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 10px;
        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
        font-size: 14px;
        line-height: 1.4;
    }

    #terminalRows[b-wun6tzneu2] {
        color: var(--color-primary);
    }

    .terminal-cursor[b-wun6tzneu2] {
        display: inline-block;
        width: 8px;
        height: 16px;
        background: var(--color-primary);
        animation: blink-b-wun6tzneu2 1s step-end infinite;
    }

    @keyframes blink-b-wun6tzneu2 {
        50% { opacity: 0; }
    }

    /* Text Terminal (reiner Text-Modus) */
    .term-text-terminal[b-wun6tzneu2] {
        flex: 1;
        background: var(--terminal-bg);
        overflow: auto;
        padding: 10px;
    }

    .term-text-content[b-wun6tzneu2] {
        margin: 0;
        padding: 0;
        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
        font-size: 14px;
        line-height: 1.5;
        color: var(--terminal-text);
        white-space: pre-wrap;
        word-wrap: break-word;
    }

    .connection-spinner[b-wun6tzneu2] {
        width: 60px;
        height: 60px;
        border: 4px solid var(--border-strong);
        border-top: 4px solid var(--color-primary);
        border-radius: 50%;
        margin: 0 auto 1.5rem;
        animation: spin-b-wun6tzneu2 1s linear infinite;
    }

    .connection-spinner.small[b-wun6tzneu2] {
        width: 20px;
        height: 20px;
        border-width: 2px;
        margin: 0;
    }

    @keyframes spin-b-wun6tzneu2 {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

/* /Components/Pages/Heizungen/StoerungsAbfrageLogPage.razor.rz.scp.css */
.sal-page[b-b2oxxig5la] {
    padding: 1rem 1.5rem;
    width: 100%;
    box-sizing: border-box;
}

.sal-header[b-b2oxxig5la] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

.sal-title[b-b2oxxig5la] {
    flex: 1;
    margin: 0;
    font-size: 1.4rem;
}

.sal-back[b-b2oxxig5la],
.sal-help[b-b2oxxig5la] {
    text-decoration: none;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.sal-back:hover[b-b2oxxig5la],
.sal-help:hover[b-b2oxxig5la] {
    text-decoration: underline;
}

.sal-sub[b-b2oxxig5la] {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.sal-card[b-b2oxxig5la] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    margin-bottom: 1rem;
    overflow: hidden;
}

.sal-card-head[b-b2oxxig5la] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--border-default);
    background: var(--surface-muted, #f8f9fa);
}

.sal-filter-card[b-b2oxxig5la] {
    padding: 0.75rem 1rem;
}

.sal-filter-row[b-b2oxxig5la] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.sal-field[b-b2oxxig5la] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.85rem;
    min-width: 140px;
}

.sal-field-check[b-b2oxxig5la] {
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    min-width: auto;
    padding-bottom: 0.4rem;
}

.sal-filter-actions[b-b2oxxig5la] {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.sal-table[b-b2oxxig5la] {
    margin-bottom: 0;
    width: 100%;
}

.sal-table thead th[b-b2oxxig5la] {
    position: sticky;
    top: 0;
    background: var(--surface-muted, #f8f9fa);
    border-bottom: 2px solid var(--border-default);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
}

.sal-col-time[b-b2oxxig5la] {
    width: 160px;
    white-space: nowrap;
}

.sal-col-status[b-b2oxxig5la] {
    width: 110px;
}

.sal-col-count[b-b2oxxig5la] {
    width: 80px;
    text-align: right;
}

.sal-mono[b-b2oxxig5la] {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.85rem;
}

.sal-muted[b-b2oxxig5la] {
    color: var(--text-secondary);
}

.sal-projektnr[b-b2oxxig5la] {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-weight: 600;
    margin-right: 0.4rem;
}

.sal-heizung-name[b-b2oxxig5la] {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.sal-badge[b-b2oxxig5la] {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.sal-badge-ok[b-b2oxxig5la] {
    background: rgba(40, 167, 69, 0.12);
    color: #1e7e34;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.sal-badge-fail[b-b2oxxig5la] {
    background: rgba(220, 53, 69, 0.12);
    color: #b21f2d;
    border: 1px solid rgba(220, 53, 69, 0.3);
}

.sal-chip-list[b-b2oxxig5la] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.sal-chip[b-b2oxxig5la] {
    display: inline-block;
    background: var(--surface-muted, #f1f3f5);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 0.05rem 0.45rem;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.78rem;
    color: var(--text-primary);
}

.sal-chip-overflow[b-b2oxxig5la] {
    cursor: help;
    color: var(--text-secondary);
    font-weight: 600;
}

/* Detected faults: index chip + Störung text, one fault per line. */
.sal-fault-list[b-b2oxxig5la] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.sal-fault[b-b2oxxig5la] {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
}

.sal-fault-text[b-b2oxxig5la] {
    font-size: 0.85rem;
    color: var(--text-primary);
}

.sal-error-text[b-b2oxxig5la] {
    color: #b21f2d;
    font-size: 0.85rem;
    cursor: help;
}

.sal-empty[b-b2oxxig5la] {
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
}

.sal-pager[b-b2oxxig5la] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    border-top: 1px solid var(--border-default);
    background: var(--surface-muted, #f8f9fa);
}

.sal-pager-info[b-b2oxxig5la] {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.sal-pager-actions[b-b2oxxig5la] {
    display: flex;
    gap: 0.5rem;
}

.sal-alert[b-b2oxxig5la] {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

@media (max-width: 900px) {
    .sal-filter-row[b-b2oxxig5la] {
        gap: 0.5rem;
    }

    .sal-field[b-b2oxxig5la] {
        min-width: 110px;
        flex: 1 1 45%;
    }

    .sal-filter-actions[b-b2oxxig5la] {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
    }

    .sal-col-time[b-b2oxxig5la] {
        width: auto;
    }
}
/* /Components/Pages/Heizungen/StoerungsheaderConfig.razor.rz.scp.css */
.stoerungsheader-config-page[b-b9mkxml23y] {
        height: 100vh;
        display: flex;
        flex-direction: column;
        background: var(--surface-card);
    }
    
    .page-header[b-b9mkxml23y] {
        padding: 0.75rem 1.5rem;
        background: rgba(0,0,0,0.3);
        border-bottom: 1px solid rgba(0,0,0,0.08);
    }
    
    .back-link[b-b9mkxml23y] {
        color: var(--color-primary);
        text-decoration: none;
        font-size: 0.9rem;
    }
    
    .back-link:hover[b-b9mkxml23y] {
        color: var(--text-primary);
        text-decoration: underline;
    }
    
    .content-container[b-b9mkxml23y] {
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }
    
    .loading-screen[b-b9mkxml23y],
    .error-screen[b-b9mkxml23y] {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: var(--text-secondary);
        gap: 1rem;
    }
    
    .loading-screen .spinner[b-b9mkxml23y] {
        width: 50px;
        height: 50px;
        border: 4px solid rgba(30, 148, 188, 0.2);
        border-top-color: var(--color-primary);
        border-radius: 50%;
        animation: spin-b-b9mkxml23y 1s linear infinite;
    }
    
    .error-screen .icon[b-b9mkxml23y] { font-size: 4rem; }
    .error-screen h3[b-b9mkxml23y] { color: var(--color-danger); margin: 0; }
    .error-screen p[b-b9mkxml23y] { margin: 0; color: var(--text-secondary); }
    
    .btn-back[b-b9mkxml23y] {
        margin-top: 1rem;
        padding: 0.75rem 1.5rem;
        background: var(--color-primary);
        color: #000;
        text-decoration: none;
        border-radius: var(--radius);
        font-weight: 500;
    }
    
    .btn-back:hover[b-b9mkxml23y] { background: var(--color-primary); }
    
    @keyframes spin-b-b9mkxml23y { to { transform: rotate(360deg); } }
/* /Components/Pages/Heizungen/StoerungsHeaderEditor.razor.rz.scp.css */
.header-editor[b-nj5xr91j34] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--surface-card);
    color: var(--text-body);
}

/* Debug Info Panel */
.debug-info-panel[b-nj5xr91j34] {
    display: flex;
    gap: 2rem;
    padding: 0.5rem 1.5rem;
    background: var(--color-primary-light);
    border-bottom: 1px solid var(--color-primary);
    font-size: 0.8rem;
    font-family: monospace;
    color: var(--color-primary);
}

/* RTOS Action Panel - Always visible */
.rtos-action-panel[b-nj5xr91j34] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--color-success-light);
    border-bottom: 1px solid var(--color-success);
}

.rtos-action-panel h4[b-nj5xr91j34] {
    margin: 0;
    color: var(--color-success);
    font-size: 0.95rem;
}

.rtos-buttons[b-nj5xr91j34] {
    display: flex;
    gap: 0.75rem;
}

/* RTOS Preview Panel */
.rtos-preview-panel[b-nj5xr91j34] {
    background: var(--color-success-10);
    border-bottom: 1px solid var(--color-success);
    max-height: 300px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.preview-header[b-nj5xr91j34] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background: var(--color-success-light);
    border-bottom: 1px solid var(--color-success);
}

.preview-header h4[b-nj5xr91j34] {
    margin: 0;
    color: var(--color-success);
    font-size: 0.9rem;
}

.preview-count[b-nj5xr91j34] {
    color: var(--color-success);
    font-size: 0.8rem;
}

.preview-table-container[b-nj5xr91j34] {
    flex: 1;
    overflow-y: auto;
}

.preview-table[b-nj5xr91j34] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.preview-table th[b-nj5xr91j34] {
    position: sticky;
    top: 0;
    background: var(--surface-page);
    color: var(--color-success);
    font-weight: 600;
    text-align: left;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid var(--color-success);
}

.preview-table td[b-nj5xr91j34] {
    padding: 0.3rem 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
}

.preview-table tr.new[b-nj5xr91j34] { background: var(--color-success-10); }
.preview-table tr.exists[b-nj5xr91j34] { background: var(--color-warning-10); }

.status-new[b-nj5xr91j34] { color: var(--color-success); font-weight: 600; font-size: 0.75rem; }
.status-exists[b-nj5xr91j34] { color: var(--color-warning); font-weight: 600; font-size: 0.75rem; }

.more-rows[b-nj5xr91j34] {
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
}

.page-header[b-nj5xr91j34] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-default);
}

.header-left[b-nj5xr91j34] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-left h2[b-nj5xr91j34] { margin: 0; font-size: 1.3rem; }
.header-left .subtitle[b-nj5xr91j34] { margin: 0; color: var(--text-secondary); font-size: 0.9rem; }

.btn-back[b-nj5xr91j34] {
    padding: 0.5rem 1rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.header-actions[b-nj5xr91j34] {
    display: flex;
    gap: 0.75rem;
}

.btn[b-nj5xr91j34] {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn.primary[b-nj5xr91j34] { background: var(--color-primary); color: var(--text-on-primary); }
.btn.secondary[b-nj5xr91j34] { background: var(--surface-page); color: var(--text-primary); border: 1px solid var(--border-default); }
.btn.danger[b-nj5xr91j34] { background: var(--color-danger); color: var(--text-on-primary); }
.btn:disabled[b-nj5xr91j34] { opacity: 0.5; cursor: not-allowed; }

.status-bar[b-nj5xr91j34] {
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-bar.success[b-nj5xr91j34] { background: var(--color-success-light); color: var(--color-success); }
.status-bar.error[b-nj5xr91j34] { background: var(--color-danger-light); color: var(--color-danger); }

.btn-close[b-nj5xr91j34] {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 1.2rem;
}

.toolbar[b-nj5xr91j34] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-default);
}

.search-box[b-nj5xr91j34] {
    position: relative;
    flex: 0 0 250px;
}

.search-box input[b-nj5xr91j34] {
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.btn-clear-search[b-nj5xr91j34] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
}

.filter-group[b-nj5xr91j34] {
    display: flex;
    gap: 1rem;
}

.filter-group label[b-nj5xr91j34] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
}

.stats[b-nj5xr91j34] {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.table-container[b-nj5xr91j34] {
    flex: 1;
    overflow: auto;
    position: relative;
}

.loading-overlay[b-nj5xr91j34] {
    position: absolute;
    inset: 0;
    background: var(--surface-overlay);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 10;
}

.spinner[b-nj5xr91j34] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-default);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-nj5xr91j34 1s linear infinite;
}

.spinner-small[b-nj5xr91j34] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-subtle);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-nj5xr91j34 1s linear infinite;
}

@keyframes spin-b-nj5xr91j34 { to { transform: rotate(360deg); } }

.header-table[b-nj5xr91j34] {
    width: 100%;
    border-collapse: collapse;
}

.header-table th[b-nj5xr91j34] {
    position: sticky;
    top: 0;
    background: var(--surface-page);
    color: var(--color-primary);
    font-weight: 600;
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--color-primary);
    cursor: pointer;
    user-select: none;
}

.header-table th:hover[b-nj5xr91j34] { background: var(--surface-hover); }

.header-table td[b-nj5xr91j34] {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border-subtle);
}

.header-table tr:hover[b-nj5xr91j34] { background: var(--surface-hover); }
.header-table tr.webterm-row[b-nj5xr91j34] { background: var(--color-warning-10); }
.header-table tr.inactive-row[b-nj5xr91j34] { opacity: 0.5; }

.col-index[b-nj5xr91j34] { width: 100px; }
.col-text[b-nj5xr91j34] { min-width: 300px; }
.col-source[b-nj5xr91j34] { width: 80px; }
.col-status[b-nj5xr91j34] { width: 100px; }
.col-updated[b-nj5xr91j34] { width: 150px; }
.col-actions[b-nj5xr91j34] { width: 120px; text-align: center; }

.index-badge[b-nj5xr91j34] {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: var(--color-primary-10);
    color: var(--color-primary);
    border-radius: var(--radius-sm);
    font-family: monospace;
    font-weight: 600;
}

.badge-wt[b-nj5xr91j34] {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.3rem;
    background: var(--color-warning);
    color: #000;
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: var(--radius-xs);
}

.char-count[b-nj5xr91j34] {
    color: var(--text-secondary);
    font-size: 0.75rem;
    margin-left: 0.5rem;
}

.source-badge[b-nj5xr91j34] {
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.source-badge.rtos[b-nj5xr91j34] { background: var(--color-primary); color: var(--text-on-primary); }
.source-badge.webterm[b-nj5xr91j34] { background: var(--color-warning); color: #000; }
.source-badge.manual[b-nj5xr91j34] { background: var(--color-indigo); color: var(--text-on-primary); }

.status-active[b-nj5xr91j34] { color: var(--color-success); }
.status-inactive[b-nj5xr91j34] { color: var(--text-secondary); }

.btn-icon[b-nj5xr91j34] {
    padding: 0.3rem 0.5rem;
    background: none;
    border: 1px solid var(--border-default);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    margin: 0 0.2rem;
}

.btn-icon:hover[b-nj5xr91j34] { background: var(--surface-hover); color: var(--text-primary); }
.btn-icon.danger:hover[b-nj5xr91j34] { background: var(--color-danger-10); color: var(--color-danger); }

.no-data[b-nj5xr91j34] {
    text-align: center;
    padding: 3rem !important;
    color: var(--text-secondary);
}

.padding-preview[b-nj5xr91j34] {
    padding: 1rem 1.5rem;
    background: var(--surface-page);
    border-top: 1px solid var(--border-default);
}

.padding-preview h4[b-nj5xr91j34] { margin: 0 0 0.5rem 0; color: var(--color-primary); font-size: 0.95rem; }
.padding-preview .info[b-nj5xr91j34] { margin: 0 0 0.5rem 0; color: var(--text-secondary); font-size: 0.85rem; }
.padding-preview .hint[b-nj5xr91j34] { color: var(--text-secondary); font-style: italic; }

.padded-record[b-nj5xr91j34] {
    margin: 0;
    padding: 0.75rem;
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-family: 'Consolas', monospace;
    font-size: 0.8rem;
    color: var(--color-primary);
    white-space: pre;
    overflow-x: auto;
}

.preview-length[b-nj5xr91j34] { font-size: 0.8rem; color: var(--text-secondary); margin-left: 1rem; }

/* Dialog Styles */
.dialog-overlay[b-nj5xr91j34] {
    position: fixed;
    inset: 0;
    background: var(--surface-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.dialog[b-nj5xr91j34] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: auto;
    box-shadow: var(--shadow-lg);
}

.dialog-small[b-nj5xr91j34] { max-width: 450px; }

.dialog-header[b-nj5xr91j34] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-default);
}

.dialog-header h3[b-nj5xr91j34] { margin: 0; }

.dialog-body[b-nj5xr91j34] {
    padding: 1.5rem;
}

.form-group[b-nj5xr91j34] {
    margin-bottom: 1.25rem;
}

.form-group label[b-nj5xr91j34] {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.form-group input[b-nj5xr91j34], .form-group select[b-nj5xr91j34] {
    width: 100%;
    padding: 0.6rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.95rem;
}

.form-group input:disabled[b-nj5xr91j34], .form-group select:disabled[b-nj5xr91j34] {
    opacity: 0.5;
    cursor: not-allowed;
}

.help-text[b-nj5xr91j34] { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.25rem; display: block; }

.char-counter[b-nj5xr91j34] {
    display: block;
    text-align: right;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.char-counter.warning[b-nj5xr91j34] { color: var(--color-warning); }

.checkbox-group label[b-nj5xr91j34] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.preview-box[b-nj5xr91j34] {
    background: var(--surface-sunken);
    padding: 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-default);
}

.preview-box label[b-nj5xr91j34] { margin-bottom: 0.5rem; }

.preview-box pre[b-nj5xr91j34] {
    margin: 0;
    padding: 0.5rem;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-family: 'Consolas', monospace;
    font-size: 0.75rem;
    color: var(--color-primary);
    white-space: pre;
    overflow-x: auto;
}

.dialog-footer[b-nj5xr91j34] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-default);
}

.delete-info[b-nj5xr91j34] {
    background: var(--surface-sunken);
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-default);
    margin: 1rem 0;
}

.warning-text[b-nj5xr91j34] { color: var(--color-warning); font-size: 0.9rem; }
/* /Components/Pages/Heizungen/StoerungsheaderTab.razor.rz.scp.css */
.stoerungsheader-tab[b-aha6y3o21v] { display: flex; flex-direction: column; height: 100%; background: var(--surface-card); color: var(--text-primary); position: relative; }
    
    .tab-header[b-aha6y3o21v] { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; background: rgba(0,0,0,0.2); border-bottom: 1px solid rgba(0,0,0,0.08); }
    .tab-header h3[b-aha6y3o21v] { margin: 0; font-size: 1.25rem; }
    .header-info[b-aha6y3o21v] { display: flex; gap: 0.75rem; }
    .info-badge[b-aha6y3o21v] { font-size: 0.8rem; color: var(--text-secondary); padding: 0.25rem 0.5rem; background: rgba(0,0,0,0.03); border-radius: var(--radius-sm); }
    
    .status-message[b-aha6y3o21v] { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; font-size: 0.85rem; }
    .status-message.success[b-aha6y3o21v] { background: rgba(30,148,188,0.2); color: var(--color-primary); }
    .status-message.error[b-aha6y3o21v] { background: rgba(231,76,60,0.2); color: var(--color-danger); }
    .status-message .close-btn[b-aha6y3o21v] { margin-left: auto; background: none; border: none; color: inherit; cursor: pointer; font-size: 1.2rem; }
    
    .action-bar[b-aha6y3o21v] { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: rgba(0,0,0,0.15); border-bottom: 1px solid rgba(0,0,0,0.08); flex-wrap: wrap; }
    .db-count[b-aha6y3o21v] { margin-left: auto; color: var(--color-primary); font-size: 0.8rem; font-weight: 600; }
    
    .btn-action[b-aha6y3o21v] { padding: 0.5rem 1rem; border: 1px solid rgba(0,0,0,0.1); background: rgba(0,0,0,0.03); color: var(--text-primary); border-radius: var(--radius); cursor: pointer; font-size: 0.85rem; display: flex; align-items: center; gap: 0.5rem; transition: all 0.2s; }
    .btn-action:hover:not(:disabled)[b-aha6y3o21v] { background: rgba(0,0,0,0.08); }
    .btn-action.primary[b-aha6y3o21v] { background: var(--color-primary); border-color: var(--color-primary); color: #000; }
    .btn-action.primary:hover:not(:disabled)[b-aha6y3o21v] { background: var(--color-primary); }
    .btn-action.secondary[b-aha6y3o21v] { background: rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.1); }
    .btn-action.go-config[b-aha6y3o21v] { background: var(--color-success); border-color: var(--color-success); color: #000; font-weight: 600; }
    .btn-action.go-config:hover[b-aha6y3o21v] { background: var(--color-success); }
    .btn-action:disabled[b-aha6y3o21v] { opacity: 0.5; cursor: not-allowed; }
    
    .loading-overlay[b-aha6y3o21v] { position: absolute; inset: 0; background: rgba(26,26,46,0.95); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; z-index: 100; }
    .spinner[b-aha6y3o21v] { width: 40px; height: 40px; border: 3px solid rgba(30,148,188,0.2); border-top-color: var(--color-primary); border-radius: 50%; animation: spin-b-aha6y3o21v 1s linear infinite; }
    .spinner-small[b-aha6y3o21v] { width: 14px; height: 14px; border: 2px solid rgba(0,0,0,0.1); border-top-color: currentColor; border-radius: 50%; animation: spin-b-aha6y3o21v 0.8s linear infinite; display: inline-block; }
    @keyframes spin-b-aha6y3o21v { to { transform: rotate(360deg); } }
    
    .content-wrapper[b-aha6y3o21v] { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
    
    .panel[b-aha6y3o21v] { display: flex; flex-direction: column; min-height: 0; }
    .panel-preview[b-aha6y3o21v] { flex: 0 0 auto; max-height: 40%; border-bottom: 2px solid rgba(241,196,15,0.3); }
    .panel-db[b-aha6y3o21v] { flex: 1; }
    
    .panel-header[b-aha6y3o21v] { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 1rem; }
    .panel-header h4[b-aha6y3o21v] { margin: 0; font-size: 0.9rem; }
    .panel-header.preview[b-aha6y3o21v] { background: rgba(241,196,15,0.1); color: var(--color-warning); }
    .panel-header.preview h4[b-aha6y3o21v] { color: var(--color-warning); }
    .panel-header.preview .hint[b-aha6y3o21v] { font-size: 0.75rem; color: var(--color-warning); }
    .panel-header.db[b-aha6y3o21v] { background: rgba(30,148,188,0.08); }
    .panel-header.db h4[b-aha6y3o21v] { color: var(--color-primary); }
    
    .table-container[b-aha6y3o21v] { flex: 1; overflow: auto; }
    
    .header-table[b-aha6y3o21v] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
    .header-table th[b-aha6y3o21v] { position: sticky; top: 0; background: var(--surface-card); color: var(--color-primary); font-weight: 600; text-align: left; padding: 0.5rem 0.75rem; border-bottom: 2px solid rgba(30,148,188,0.3); z-index: 1; }
    .header-table td[b-aha6y3o21v] { padding: 0.4rem 0.75rem; border-bottom: 1px solid rgba(0,0,0,0.03); }
    .header-table tr:hover[b-aha6y3o21v] { background: rgba(0,0,0,0.03); }
    
    .header-table.preview th[b-aha6y3o21v] { color: var(--color-warning); border-bottom-color: rgba(241,196,15,0.3); }
    .header-table tr.new[b-aha6y3o21v] { background: rgba(46,204,113,0.1); }
    .header-table tr.update[b-aha6y3o21v] { background: rgba(241,196,15,0.1); }
    .header-table tr.unchanged[b-aha6y3o21v] { opacity: 0.6; }
    .header-table tr.webterm[b-aha6y3o21v] { background: rgba(243,156,18,0.08); }
    
    .col-nr[b-aha6y3o21v] { width: 70px; text-align: center; }
    .col-text[b-aha6y3o21v] { max-width: 500px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .col-source[b-aha6y3o21v], .col-status[b-aha6y3o21v] { width: 80px; text-align: center; }
    .col-actions[b-aha6y3o21v] { width: 80px; text-align: center; white-space: nowrap; }
    
    .idx[b-aha6y3o21v] { display: inline-block; min-width: 28px; padding: 0.15rem 0.4rem; background: rgba(30,148,188,0.2); color: var(--color-primary); border-radius: var(--radius-xs); text-align: center; font-family: monospace; font-size: 0.8rem; }
    .wt-badge[b-aha6y3o21v] { display: inline-block; margin-left: 0.3rem; padding: 0.1rem 0.3rem; background: var(--color-warning); color: #000; font-size: 0.6rem; font-weight: 700; border-radius: var(--radius-xs); }
    
    .status-tag[b-aha6y3o21v] { padding: 0.15rem 0.4rem; border-radius: var(--radius-xs); font-size: 0.7rem; font-weight: 600; }
    .status-tag.new[b-aha6y3o21v] { background: rgba(46,204,113,0.3); color: var(--color-success); }
    .status-tag.update[b-aha6y3o21v] { background: rgba(241,196,15,0.3); color: var(--color-warning); }
    .status-tag.same[b-aha6y3o21v] { background: rgba(0,0,0,0.08); color: var(--text-secondary); }
    
    .source-tag[b-aha6y3o21v] { padding: 0.15rem 0.4rem; border-radius: var(--radius-xs); font-size: 0.7rem; font-weight: 600; }
    .source-tag.rtos[b-aha6y3o21v] { background: var(--color-primary); color: var(--surface-card); }
    .source-tag.manual[b-aha6y3o21v] { background: var(--color-indigo); color: var(--surface-card); }
    .source-tag.webterm[b-aha6y3o21v] { background: var(--color-warning); color: #000; }
    
    .icon-btn[b-aha6y3o21v] { padding: 0.2rem 0.4rem; background: none; border: 1px solid rgba(0,0,0,0.08); color: var(--text-muted); border-radius: var(--radius-xs); cursor: pointer; margin: 0 0.1rem; font-size: 0.75rem; }
    .icon-btn:hover[b-aha6y3o21v] { background: rgba(0,0,0,0.08); color: var(--text-primary); }
    .icon-btn.danger:hover[b-aha6y3o21v] { background: rgba(231,76,60,0.3); color: var(--color-danger); }
    
    .empty-state[b-aha6y3o21v] { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem; color: var(--text-secondary); text-align: center; }
    .empty-state .icon[b-aha6y3o21v] { font-size: 3rem; margin-bottom: 1rem; }
    .empty-state .hint[b-aha6y3o21v] { font-size: 0.8rem; color: var(--text-secondary); }
    
    .status-bar[b-aha6y3o21v] { display: flex; gap: 1.5rem; padding: 0.5rem 1rem; background: rgba(0,0,0,0.3); border-top: 1px solid rgba(0,0,0,0.08); font-size: 0.75rem; color: var(--text-secondary); }
    .status-item[b-aha6y3o21v] { display: flex; align-items: center; gap: 0.25rem; }
    .status-item.preview[b-aha6y3o21v] { color: var(--color-warning); }
    .status-item.right[b-aha6y3o21v] { margin-left: auto; }
    
    /* Edit Dialog */
    .dialog-overlay[b-aha6y3o21v] { position: fixed; inset: 0; background: rgba(0,0,0,0.8); display: flex; justify-content: center; align-items: center; z-index: 1000; }
    .edit-dialog[b-aha6y3o21v] { background: var(--surface-card); border: 1px solid var(--color-primary); border-radius: var(--radius-md); width: 90%; max-width: 500px; }
    .edit-dialog .dialog-header[b-aha6y3o21v] { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background: rgba(30,148,188,0.1); border-bottom: 1px solid rgba(30,148,188,0.3); }
    .edit-dialog .dialog-header h3[b-aha6y3o21v] { margin: 0; font-size: 1rem; color: var(--color-primary); }
    .edit-dialog .btn-close[b-aha6y3o21v] { background: none; border: none; color: var(--text-secondary); font-size: 1.2rem; cursor: pointer; }
    .edit-dialog .btn-close:hover[b-aha6y3o21v] { color: var(--text-primary); }
    .edit-dialog .dialog-body[b-aha6y3o21v] { padding: 1rem; }
    .edit-dialog .dialog-footer[b-aha6y3o21v] { padding: 0.75rem 1rem; border-top: 1px solid rgba(0,0,0,0.08); display: flex; justify-content: flex-end; gap: 0.5rem; }
    .form-row[b-aha6y3o21v] { margin-bottom: 0.75rem; }
    .form-row label[b-aha6y3o21v] { display: block; margin-bottom: 0.3rem; font-size: 0.85rem; color: var(--text-muted); }
    .form-row input[b-aha6y3o21v], .form-row select[b-aha6y3o21v] { width: 100%; padding: 0.5rem; background: rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.1); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.9rem; }
    .form-row input:focus[b-aha6y3o21v] { outline: none; border-color: var(--color-primary); }
    .form-row input:disabled[b-aha6y3o21v] { opacity: 0.5; }
    .char-count[b-aha6y3o21v] { display: block; text-align: right; font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.25rem; }
    
    .table-container[b-aha6y3o21v]::-webkit-scrollbar { width: 6px; height: 6px; }
    .table-container[b-aha6y3o21v]::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
    .table-container[b-aha6y3o21v]::-webkit-scrollbar-thumb { background: rgba(30,148,188,0.4); border-radius: var(--radius-xs); }
    
    @media (max-width: 768px) {
        .action-bar[b-aha6y3o21v] { flex-direction: column; align-items: stretch; }
        .db-count[b-aha6y3o21v] { margin-left: 0; }
        .col-text[b-aha6y3o21v] { max-width: 200px; }
    }
/* /Components/Pages/Heizungen/StoerungTab.razor.rz.scp.css */
.stoerung-tab[b-70qb7l7t19] { display: flex; flex-direction: column; height: 100%; background: var(--surface-card); color: var(--text-primary); position: relative; }
/* .tab-header / .tab-header h3 / .header-actions: removed 2026-06-04.
   The page title row + Speichern button were collapsed into the right
   panel-header (next to Neu) so both primary actions share one row with
   the Empfänger panel; the page title is provided by the breadcrumb
   above the tab. */
.btn-action[b-70qb7l7t19] { padding: 0.5rem 1rem; border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-primary); border-radius: var(--radius); cursor: pointer; font-size: 0.85rem; display: flex; align-items: center; gap: 0.5rem; transition: all 0.2s; text-decoration: none; }
.btn-action:hover:not(:disabled)[b-70qb7l7t19] { background: var(--surface-hover); border-color: var(--border-strong); }
.btn-action.primary[b-70qb7l7t19] { background: var(--color-primary); border-color: var(--color-primary); color: var(--text-on-primary); }
.btn-action.primary:hover:not(:disabled)[b-70qb7l7t19] { background: var(--color-primary-hover); }
.btn-action:disabled[b-70qb7l7t19] { opacity: 0.5; cursor: not-allowed; }
.status-message[b-70qb7l7t19] { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; font-size: 0.85rem; }
.status-message.success[b-70qb7l7t19] { background: var(--color-success-light); color: var(--color-success); }
.status-message.error[b-70qb7l7t19] { background: var(--color-danger-light); color: var(--color-danger); }
.status-message .close-btn[b-70qb7l7t19] { margin-left: auto; background: none; border: none; color: inherit; cursor: pointer; font-size: 1.2rem; }

.loading-overlay[b-70qb7l7t19] { position: absolute; inset: 0; background: var(--surface-overlay); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; z-index: 100; }
.spinner[b-70qb7l7t19] { width: 40px; height: 40px; border: 3px solid var(--border-default); border-top-color: var(--color-primary); border-radius: 50%; animation: spin-b-70qb7l7t19 1s linear infinite; }
@keyframes spin-b-70qb7l7t19 { to { transform: rotate(360deg); } }
.content-wrapper[b-70qb7l7t19] { flex: 1; display: flex; gap: 1px; min-height: 0; background: var(--border-subtle); }
.panel[b-70qb7l7t19] { display: flex; flex-direction: column; background: var(--surface-card); }
/* Left panel is the load-bearing surface (table with 6 columns × N rows).
   Right panel is compact user info + test buttons. 2:1 ratio puts the
   weight where the operator's eyes spend most of their time. */
.panel-left[b-70qb7l7t19] { flex: 2; min-width: 0; }
.panel-right[b-70qb7l7t19] { flex: 1; min-width: 0; }
/* Panel header — fixed min-height so the two columns line up vertically
   regardless of which buttons live in each header. The right panel-header
   carries two .btn-action buttons (Speichern + Neu, ~36px tall) plus
   0.75rem padding top/bottom, so the inner content can swell to ~3.75rem;
   without min-height the left header (often just an h4 with no toolbar
   when no Empfänger is selected) stays at ~2.85rem and the two h4's sit
   at noticeably different vertical positions — operator-reported 2026-06-04. */
.panel-header[b-70qb7l7t19] { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; min-height: 3.75rem; background: var(--surface-page); border-bottom: 1px solid var(--border-default); border-top: 3px solid transparent; }
.panel-header h4[b-70qb7l7t19] { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--text-primary); }

/* Per-panel accent stripes for visual contrast between the two columns —
   left = primary cyan (data/configuration semantics), right = accent pink
   (people/recipients semantics). Subtle 3px top border on each panel-header
   keeps the panels visually distinct without shouting. */
.panel-left .panel-header[b-70qb7l7t19] { border-top-color: var(--color-primary); background: var(--color-primary-10); }
.panel-right .panel-header[b-70qb7l7t19] { border-top-color: var(--color-accent); background: var(--color-accent-light); }

.panel-actions[b-70qb7l7t19] { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.mini-btn[b-70qb7l7t19] { padding: 0.25rem 0.5rem; border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-muted); border-radius: var(--radius-sm); cursor: pointer; font-size: 0.7rem; transition: all 0.2s; }
.mini-btn:hover[b-70qb7l7t19] { background: var(--surface-hover); color: var(--text-primary); }
.mini-btn.primary[b-70qb7l7t19] { background: var(--color-primary); border-color: var(--color-primary); color: var(--text-on-primary); }
.mini-btn.secondary[b-70qb7l7t19] { background: var(--color-danger-light); color: var(--color-danger); }
/* The "✕ Abbrechen" cancel button when an Empfänger is selected — visually
   distinct so the operator can see how to exit the per-user config mode. */
.mini-btn.mini-btn-cancel[b-70qb7l7t19] { background: var(--color-danger-light); color: var(--color-danger); border-color: var(--color-danger); font-weight: 600; padding: 0.35rem 0.7rem; font-size: 0.8rem; }
.mini-btn.mini-btn-cancel:hover[b-70qb7l7t19] { background: var(--color-danger); color: var(--text-on-primary); }
.table-container[b-70qb7l7t19] { flex: 1; overflow: auto; }
.stoerung-table[b-70qb7l7t19] { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.stoerung-table th[b-70qb7l7t19] { position: sticky; top: 0; background: var(--surface-page); color: var(--color-primary); font-weight: 600; text-align: left; padding: 0.6rem 0.75rem; border-bottom: 2px solid var(--color-primary); }
.stoerung-table td[b-70qb7l7t19] { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border-subtle); }
/* Zebra-stripe rows for scanability — operator feedback 2026-06-08. */
.stoerung-table tbody tr:nth-child(even)[b-70qb7l7t19] { background: var(--surface-sunken); }
.stoerung-table tr:hover[b-70qb7l7t19] { background: var(--surface-hover); }
.stoerung-table tr.active[b-70qb7l7t19] { background: var(--color-primary-10); }
.stoerung-table tr.webterm-internal[b-70qb7l7t19] { background: var(--color-warning-10); }
.stoerung-table tr.webterm-internal:hover[b-70qb7l7t19] { background: var(--color-warning-light); }
.col-nr[b-70qb7l7t19] { width: 70px; text-align: center; color: var(--text-secondary); font-family: monospace; }
.badge-webterm[b-70qb7l7t19] { display: inline-block; margin-left: 0.3rem; padding: 0.1rem 0.3rem; background: var(--color-warning); color: #000; font-size: 0.6rem; font-weight: 600; border-radius: var(--radius-xs); vertical-align: middle; }
.col-text[b-70qb7l7t19] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 380px; position: relative; }
/* Inline editable text input — looks like flat text until the user
   clicks into it. Saves on blur + Enter (see SaveHeaderTextAsync /
   OnHeaderTextKeyDownAsync). The saving / saved pill replaces a
   conventional toast — operator stays in the row they just edited. */
.text-edit[b-70qb7l7t19] { width: 100%; background: var(--surface-card); border: 1px solid var(--border-default); padding: 0.3rem 0.5rem; color: var(--text-primary); font: inherit; border-radius: var(--radius-sm); }
.text-edit:hover:not(:disabled)[b-70qb7l7t19] { border-color: var(--color-primary); background: var(--surface-card); }
.text-edit:focus[b-70qb7l7t19] { outline: none; border-color: var(--color-primary); background: var(--surface-card); box-shadow: 0 0 0 2px var(--color-primary-10); }
.text-edit:disabled[b-70qb7l7t19] { color: var(--text-secondary); cursor: not-allowed; }
/* 2026-06-08: Störungstext is now read-only (rendered as label, not input).
   Plain-text styling — no border, no background — to clearly signal
   "label, not editable". */
.stoerung-text-label[b-70qb7l7t19] { display: block; padding: 0.3rem 0.5rem; color: var(--text-primary); font: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.text-saving[b-70qb7l7t19], .text-saved[b-70qb7l7t19] { display: inline-block; margin-left: 0.3rem; font-size: 0.7rem; padding: 0.05rem 0.35rem; border-radius: var(--radius-xs); vertical-align: middle; }
.text-saving[b-70qb7l7t19] { color: var(--text-secondary); animation: pulse-b-70qb7l7t19 1.2s ease-in-out infinite; }
.text-saved[b-70qb7l7t19] { background: var(--color-success-light); color: var(--color-success); }
@keyframes pulse-b-70qb7l7t19 { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
.for-empfaenger[b-70qb7l7t19] { margin-left: 0.5rem; font-size: 0.8rem; color: var(--color-primary); font-weight: 500; }
.sel-dot[b-70qb7l7t19] { color: var(--color-primary); margin-right: 0.25rem; }
.col-sms[b-70qb7l7t19], .col-email[b-70qb7l7t19], .col-browser[b-70qb7l7t19], .col-app[b-70qb7l7t19] { width: 110px; min-width: 110px; max-width: 110px; text-align: center; }
/* Column-header layout: label on top, per-column "Alle / Keine" toggles below.
   The toggle row appears only when an Empfänger is selected (otherwise the
   header is just the label). */
.col-head-label[b-70qb7l7t19] { font-weight: 600; }
.col-head-toggles[b-70qb7l7t19] { display: flex; gap: 0.25rem; justify-content: center; margin-top: 0.25rem; }
.col-toggle[b-70qb7l7t19] { padding: 0.1rem 0.4rem; font-size: 0.7rem; border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-secondary); border-radius: var(--radius-xs); cursor: pointer; transition: all 0.15s; line-height: 1.2; }
.col-toggle:hover[b-70qb7l7t19] { background: var(--color-primary); border-color: var(--color-primary); color: var(--text-on-primary); }
.stoerung-table input[type="checkbox"][b-70qb7l7t19] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--color-primary); }
.stoerung-table input[type="checkbox"]:disabled[b-70qb7l7t19] { opacity: 0.3; cursor: not-allowed; }
.table-footer[b-70qb7l7t19] { padding: 0.5rem 1rem; background: var(--surface-page); font-size: 0.75rem; color: var(--text-secondary); display: flex; justify-content: space-between; }
.table-footer .stats[b-70qb7l7t19] { color: var(--color-primary); }
.table-footer .hint[b-70qb7l7t19] { color: var(--text-secondary); font-style: italic; }
.empty-state[b-70qb7l7t19] { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem; color: var(--text-secondary); text-align: center; }
.empty-state .icon[b-70qb7l7t19] { font-size: 3rem; margin-bottom: 1rem; }
.empty-state .hint[b-70qb7l7t19] { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 1rem; }
.empty-state.small[b-70qb7l7t19] { padding: 1.5rem; }
.empty-state.small .icon[b-70qb7l7t19] { font-size: 1.5rem; }
.empfaenger-list[b-70qb7l7t19] { flex: 0 0 auto; max-height: 280px; overflow-y: auto; border-bottom: 1px solid var(--border-default); }
.empfaenger-item[b-70qb7l7t19] { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem; cursor: pointer; transition: all 0.15s; border-bottom: 1px solid var(--border-subtle); }
.empfaenger-item:hover[b-70qb7l7t19] { background: var(--surface-hover); }
.empfaenger-item.selected[b-70qb7l7t19] { background: var(--color-primary-light); border-left: 3px solid var(--color-primary); }
.empfaenger-item.inactive[b-70qb7l7t19] { opacity: 0.5; }
.emp-edit-btn[b-70qb7l7t19] { background: none; border: none; cursor: pointer; padding: 0.3rem 0.5rem; border-radius: var(--radius-sm); opacity: 0; transition: opacity 0.15s; margin-left: auto; font-size: 0.9rem; }
.empfaenger-item:hover .emp-edit-btn[b-70qb7l7t19] { opacity: 0.6; }
.emp-edit-btn:hover[b-70qb7l7t19] { opacity: 1 !important; background: var(--surface-hover); }
.emp-avatar[b-70qb7l7t19] { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover)); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: var(--text-on-primary); flex-shrink: 0; }
.emp-info[b-70qb7l7t19] { flex: 1; min-width: 0; }
.emp-name[b-70qb7l7t19] { font-size: 0.9rem; font-weight: 500; }
.emp-detail[b-70qb7l7t19] { font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empfaenger-editor[b-70qb7l7t19] { flex: 1; padding: 1rem; overflow-y: auto; }
.empfaenger-editor h5[b-70qb7l7t19] { margin: 0 0 1rem 0; font-size: 0.95rem; color: var(--color-primary); }
.empfaenger-placeholder[b-70qb7l7t19] { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; color: var(--text-secondary); text-align: center; }
.empfaenger-placeholder .icon[b-70qb7l7t19] { font-size: 2rem; margin-bottom: 0.5rem; }
.empfaenger-detail[b-70qb7l7t19] { padding: 1.25rem; }
.empfaenger-detail h5[b-70qb7l7t19] { margin: 0 0 0.75rem 0; font-size: 1rem; }
.empfaenger-detail .detail-row[b-70qb7l7t19] { padding: 0.2rem 0; font-size: 0.85rem; color: var(--text-secondary); }
.form-row[b-70qb7l7t19] { margin-bottom: 0.75rem; }
.form-row.two-col[b-70qb7l7t19] { display: flex; gap: 0.5rem; }
.form-field[b-70qb7l7t19] { flex: 1; }
.form-row label[b-70qb7l7t19] { display: block; font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 0.25rem; }
.form-row input[type="text"][b-70qb7l7t19], .form-row input[type="email"][b-70qb7l7t19], .form-row input[type="tel"][b-70qb7l7t19] { width: 100%; padding: 0.5rem 0.75rem; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.85rem; }
.form-row input:focus[b-70qb7l7t19] { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-10); }
.checkbox-row label[b-70qb7l7t19] { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.85rem; color: var(--text-secondary); }
.form-actions[b-70qb7l7t19] { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-default); }
.btn-save[b-70qb7l7t19], .btn-delete[b-70qb7l7t19], .btn-cancel[b-70qb7l7t19] { padding: 0.5rem 0.75rem; border: none; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.8rem; }
.btn-save[b-70qb7l7t19] { background: var(--color-primary); color: var(--text-on-primary); }
.btn-save:hover:not(:disabled)[b-70qb7l7t19] { background: var(--color-primary-hover); }
.btn-save:disabled[b-70qb7l7t19] { opacity: 0.5; cursor: not-allowed; }
.btn-delete[b-70qb7l7t19] { background: var(--color-danger); color: var(--text-on-primary); }
.btn-delete:hover[b-70qb7l7t19] { opacity: 0.9; }
.btn-cancel[b-70qb7l7t19] { background: var(--surface-page); color: var(--text-secondary); border: 1px solid var(--border-default); }
.btn-cancel:hover[b-70qb7l7t19] { background: var(--surface-hover); }
.test-section[b-70qb7l7t19] { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-default); }
.test-section h6[b-70qb7l7t19] { margin: 0 0 0.5rem 0; font-size: 0.8rem; color: var(--text-secondary); }
.test-buttons[b-70qb7l7t19] { display: flex; gap: 0.5rem; }
.btn-test[b-70qb7l7t19] { flex: 1; padding: 0.5rem; border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-secondary); border-radius: var(--radius-sm); cursor: pointer; font-size: 0.75rem; }
.btn-test:hover:not(:disabled)[b-70qb7l7t19] { background: var(--surface-hover); color: var(--text-primary); }
.btn-test:disabled[b-70qb7l7t19] { opacity: 0.4; cursor: not-allowed; }
.spinner-inline[b-70qb7l7t19] { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--border-default); border-top-color: var(--color-primary); border-radius: 50%; animation: spin-b-70qb7l7t19 1s linear infinite; vertical-align: middle; margin-right: 0.25rem; }
.test-hint[b-70qb7l7t19] { font-size: 0.75rem; color: var(--color-warning); margin-top: 0.4rem; }
/* 2026-06-08: "Fertig" exit button — full-width below test buttons in the
   right (Empfänger) panel. Success-color (green) signals positive completion,
   NOT danger — red was wrong, "Fertig" is "I'm done, save complete" not
   "abort what I did". */
.btn-fertig[b-70qb7l7t19] { display: block; width: 100%; margin-top: 1rem; padding: 0.65rem 1rem; background: var(--color-success-light); color: var(--color-success); border: 1px solid var(--color-success); border-radius: var(--radius); cursor: pointer; font-size: 0.9rem; font-weight: 600; text-align: center; transition: all 0.15s; }
.btn-fertig:hover[b-70qb7l7t19] { background: var(--color-success); color: var(--text-on-primary); }
.status-bar[b-70qb7l7t19] { display: flex; gap: 1.5rem; padding: 0.5rem 1rem; background: var(--surface-page); border-top: 1px solid var(--border-default); font-size: 0.75rem; color: var(--text-secondary); }
.status-item[b-70qb7l7t19] { display: flex; align-items: center; gap: 0.25rem; }
.status-item.right[b-70qb7l7t19] { margin-left: auto; }

@media (max-width: 900px) { .content-wrapper[b-70qb7l7t19] { flex-direction: column; } .panel-left[b-70qb7l7t19], .panel-right[b-70qb7l7t19] { width: 100%; flex: none; } .panel-right[b-70qb7l7t19] { max-height: 400px; } .empfaenger-list[b-70qb7l7t19] { max-height: 150px; } }
.table-container[b-70qb7l7t19]::-webkit-scrollbar, .empfaenger-list[b-70qb7l7t19]::-webkit-scrollbar, .empfaenger-editor[b-70qb7l7t19]::-webkit-scrollbar { width: 6px; height: 6px; }
.table-container[b-70qb7l7t19]::-webkit-scrollbar-track, .empfaenger-list[b-70qb7l7t19]::-webkit-scrollbar-track, .empfaenger-editor[b-70qb7l7t19]::-webkit-scrollbar-track { background: var(--surface-sunken); }
.table-container[b-70qb7l7t19]::-webkit-scrollbar-thumb, .empfaenger-list[b-70qb7l7t19]::-webkit-scrollbar-thumb, .empfaenger-editor[b-70qb7l7t19]::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--radius-xs); }
/* /Components/Pages/Heizungen/VerbrauchChart.razor.rz.scp.css */
.verbrauch-chart[b-3pcwcz2i6o] {
    /* Fill the .chart-canvas-wrapper flex column (mirrors how #qhChart /
       .echarts-container sizes in DatenTab.razor.css). */
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    min-height: 0;
}

/* Positioned flex child: gives ECharts a definite box (absolute-fill canvas)
   and anchors the loading/empty overlays. The ResizeObserver in
   verbrauch-chart.js covers any late layout. */
.vc-plot[b-3pcwcz2i6o] {
    position: relative;
    flex: 1;
    min-height: 360px;
    width: 100%;
}

.vc-canvas[b-3pcwcz2i6o] {
    position: absolute;
    inset: 0;
}

/* Loading / empty layered over the persistent canvas (never swap it out). */
.vc-overlay[b-3pcwcz2i6o] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4);
    text-align: center;
    color: var(--text-secondary);
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    z-index: 2;
}

/* No-selection / error states render WITHOUT the canvas. */
.vc-state[b-3pcwcz2i6o] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 160px;
    padding: var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    text-align: center;
}

.vc-error[b-3pcwcz2i6o] {
    border-color: var(--color-danger);
    color: var(--color-danger);
    background: var(--color-danger-light);
}

.vc-spinner[b-3pcwcz2i6o] {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--border-strong);
    border-top-color: var(--color-primary);
    border-radius: var(--radius-full);
    animation: vc-spin-b-3pcwcz2i6o 0.8s linear infinite;
}

@keyframes vc-spin-b-3pcwcz2i6o {
    to {
        transform: rotate(360deg);
    }
}

.vc-note[b-3pcwcz2i6o] {
    margin: 0;
    flex: 0 0 auto;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Absolute-reading (Zählerstand) summary strip above the chart. Compact horizontal
   wrap of one small card per meter — it must stay tight (it sits above a chart). */
.vc-stand-strip[b-3pcwcz2i6o] {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.vc-stand-row[b-3pcwcz2i6o] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.vc-stand-name[b-3pcwcz2i6o] {
    font-weight: 600;
    color: var(--text-primary);
}

.vc-stand-main strong[b-3pcwcz2i6o] {
    color: var(--text-primary);
    font-weight: 600;
}

.vc-stand-range[b-3pcwcz2i6o] {
    color: var(--text-muted);
}

.vc-stand-verbrauch[b-3pcwcz2i6o] {
    color: var(--text-secondary);
}
/* /Components/Pages/Heizungen/VerdrahtungTab.razor.rz.scp.css */
.verdrahtung-container[b-xlv40v4k7l] {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    
    .pdf-object[b-xlv40v4k7l] {
        flex: 1;
        width: 100%;
        height: 100%;
        border: none;
        background: var(--surface-card);
    }
    
    .tab-placeholder[b-xlv40v4k7l] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 2rem;
        text-align: center;
        color: var(--text-body);
    }

    .placeholder-icon[b-xlv40v4k7l] {
        font-size: 4rem;
        margin-bottom: 1rem;
    }

    .tab-placeholder h2[b-xlv40v4k7l] {
        color: var(--color-primary);
        margin: 0 0 0.5rem 0;
        font-size: 1.5rem;
    }

    .tab-placeholder p[b-xlv40v4k7l] {
        color: var(--text-secondary);
        margin: 0 0 2rem 0;
    }

    .placeholder-info[b-xlv40v4k7l] {
        background: var(--surface-sunken);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        padding: 1rem 1.5rem;
        margin-bottom: 1.5rem;
        min-width: 300px;
    }

    .info-item[b-xlv40v4k7l] {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--border-strong);
    }

    .info-item:last-child[b-xlv40v4k7l] {
        border-bottom: none;
    }

    .info-label[b-xlv40v4k7l] {
        color: var(--text-secondary);
    }

    .info-value[b-xlv40v4k7l] {
        color: var(--color-primary);
        font-family: monospace;
    }

    .placeholder-status[b-xlv40v4k7l] {
        margin-bottom: 2rem;
    }

    .status-badge[b-xlv40v4k7l] {
        background: rgba(245, 158, 11, 0.2);
        color: var(--color-warning);
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-size: 0.85rem;
    }

    /* Part B — "Änderung an Energiekontor übermitteln": the trigger lives in the PDF.js toolbar
       (injected in pdf-viewer.html); the assignee picker opens as an overlay, never as its own row. */
    .vdt-cad-backdrop[b-xlv40v4k7l] {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 1000;
    }
    .vdt-cad-modal[b-xlv40v4k7l] {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1001;
        min-width: 20rem;
        max-width: 90vw;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem 1.1rem;
        background: var(--surface-card);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
    }
    .vdt-cad-modal-title[b-xlv40v4k7l] { font-weight: 600; font-size: 1rem; }
    .vdt-cad-label[b-xlv40v4k7l] { color: var(--text-secondary); font-size: 0.85rem; }
    .vdt-cad-select[b-xlv40v4k7l] {
        padding: 0.45rem 0.5rem;
        font-size: 0.95rem;
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
        background: var(--surface-card);
        color: var(--text-primary);
    }
    .vdt-cad-modal-actions[b-xlv40v4k7l] { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.25rem; }
    .vdt-cad-send[b-xlv40v4k7l] {
        padding: 0.45rem 0.9rem;
        font-size: 0.9rem;
        border: 1px solid var(--color-primary);
        border-radius: var(--radius-md);
        background: var(--color-primary);
        color: var(--text-on-primary);
        cursor: pointer;
        touch-action: manipulation;
    }
    .vdt-cad-send:disabled[b-xlv40v4k7l] { opacity: 0.5; cursor: not-allowed; }
    .vdt-cad-cancel[b-xlv40v4k7l] {
        padding: 0.45rem 0.85rem;
        font-size: 0.9rem;
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
        background: transparent;
        color: var(--text-secondary);
        cursor: pointer;
        touch-action: manipulation;
    }
    .vdt-cad-msg[b-xlv40v4k7l] { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; }
    .vdt-cad-msg.ok[b-xlv40v4k7l] { color: var(--color-success); }
    .vdt-cad-msg.err[b-xlv40v4k7l] { color: var(--color-danger); }
/* /Components/Pages/Heizungen/VisualisierungEditor.razor.rz.scp.css */
/* ===== GLOBAL SELECT FIX (dark theme contrast) ===== */
    select[b-xpwtzo4rah] {
        color: var(--text-body) !important;
        -webkit-text-fill-color: var(--text-body) !important;
        color-scheme: light;
    }
    
    select option[b-xpwtzo4rah] {
        background-color: var(--surface-card);
        color: var(--text-body) !important;
        -webkit-text-fill-color: var(--text-body) !important;
    }
    
    /* ===== LOADING ===== */
    .loading-container[b-xpwtzo4rah] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background: var(--surface-workspace);
        color: var(--text-body);
    }

    .spinner[b-xpwtzo4rah] {
        width: 50px;
        height: 50px;
        border: 3px solid var(--border-strong);
        border-top-color: var(--color-primary);
        border-radius: 50%;
        animation: spin-b-xpwtzo4rah 1s linear infinite;
    }

    @keyframes spin-b-xpwtzo4rah {
        to { transform: rotate(360deg); }
    }

    /* ===== HEIZUNG SELECTION ===== */
    .heizung-selection[b-xpwtzo4rah] {
        padding: 2rem;
        background: var(--surface-workspace);
        min-height: 100vh;
    }

    .selection-header[b-xpwtzo4rah] {
        text-align: center;
        margin-bottom: 2rem;
    }

    .selection-header h1[b-xpwtzo4rah] {
        color: var(--color-primary);
        margin: 1rem 0 0.5rem;
    }

    .selection-subtitle[b-xpwtzo4rah] {
        color: var(--text-muted);
    }

    .btn-back[b-xpwtzo4rah] {
        color: var(--color-primary);
        text-decoration: none;
    }

    .selection-search[b-xpwtzo4rah] {
        max-width: 400px;
        margin: 0 auto 2rem;
    }

    .selection-search input[b-xpwtzo4rah] {
        width: 100%;
        padding: 0.75rem 1rem;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        color: var(--text-body);
        font-size: 1rem;
    }

    .heizung-grid[b-xpwtzo4rah] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1rem;
        max-width: 1200px;
        margin: 0 auto;
    }

    .heizung-card[b-xpwtzo4rah] {
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        border-radius: var(--radius-md);
        padding: 1rem;
        cursor: pointer;
        transition: all 0.2s;
    }

    .heizung-card:hover[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        transform: translateY(-2px);
    }

    .heizung-card-header[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 0.75rem;
    }

    .heizung-icon[b-xpwtzo4rah] {
        font-size: 2rem;
    }

    .heizung-info h3[b-xpwtzo4rah] {
        margin: 0;
        color: var(--text-body);
    }

    .heizung-projekt[b-xpwtzo4rah] {
        color: var(--text-muted);
        font-size: 0.85rem;
    }

    .heizung-card-body[b-xpwtzo4rah] {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .visu-date[b-xpwtzo4rah] {
        color: var(--text-secondary);
        font-size: 0.8rem;
    }

    .no-results[b-xpwtzo4rah] {
        text-align: center;
        color: var(--text-secondary);
        padding: 2rem;
    }

    /* ===== EDITOR LAYOUT ===== */
    .visu-editor[b-xpwtzo4rah] {
        display: flex;
        flex-direction: column;
        height: 100vh;
        background: var(--surface-workspace);
        color: var(--text-body);
    }

    /* Header */
    .visu-header[b-xpwtzo4rah] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 1rem;
        background: var(--surface-card);
        border-bottom: 1px solid var(--border-strong);
        height: 50px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    .header-left[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .header-left h2[b-xpwtzo4rah] {
        margin: 0;
        font-size: 1.1rem;
        color: var(--color-primary);
    }

    .projekt-nr[b-xpwtzo4rah] {
        color: var(--text-secondary);
        font-size: 0.9rem;
    }

    .btn-back-small[b-xpwtzo4rah] {
        background: none;
        border: 1px solid var(--border-strong);
        color: var(--text-muted);
        padding: 0.25rem 0.75rem;
        border-radius: var(--radius-sm);
        cursor: pointer;
        font-size: 0.85rem;
    }

    .btn-back-small:hover[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    .unsaved-indicator[b-xpwtzo4rah] {
        color: var(--color-warning);
        font-size: 0.9rem;
    }

    /* Transient status chip (Speichern / Veröffentlichen / An-Pi result). */
    .editor-flash[b-xpwtzo4rah] {
        font-size: 0.85rem;
        margin-left: 0.75rem;
        padding: 0.2rem 0.6rem;
        border-radius: var(--radius-full);
        border: 1px solid transparent;
        white-space: nowrap;
        animation: editor-flash-in-b-xpwtzo4rah 0.15s ease-out;
    }

    .editor-flash.is-success[b-xpwtzo4rah] {
        color: var(--color-success);
        background: var(--color-success-10);
        border-color: var(--color-success-light);
    }

    .editor-flash.is-error[b-xpwtzo4rah] {
        color: var(--color-danger);
        background: var(--color-danger-10);
        border-color: var(--color-danger-light);
    }

    @keyframes editor-flash-in-b-xpwtzo4rah {
        from { opacity: 0; transform: translateY(-2px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .header-right[b-xpwtzo4rah] {
        display: flex;
        gap: 0.5rem;
    }

    .btn-primary[b-xpwtzo4rah], .btn-secondary[b-xpwtzo4rah], .btn-danger[b-xpwtzo4rah] {
        padding: 0.4rem 1rem;
        border: none;
        border-radius: var(--radius-sm);
        cursor: pointer;
        font-size: 0.9rem;
    }

    .btn-primary[b-xpwtzo4rah] {
        background: var(--color-primary);
        color: var(--surface-card);
    }

    .btn-secondary[b-xpwtzo4rah] {
        background: var(--surface-hover);
        color: var(--text-body);
        border: 1px solid var(--border-strong);
    }
    
    .btn-danger[b-xpwtzo4rah] {
        background: var(--color-danger);
        color: var(--text-on-primary);
    }
    
    .btn-danger:hover[b-xpwtzo4rah] {
        background: var(--color-danger);
    }
    
    /* Delete Modal */
    .delete-modal[b-xpwtzo4rah] {
        background: var(--surface-card);
        border-radius: var(--radius-md);
        min-width: 400px;
        max-width: 500px;
        box-shadow: 0 10px 30px var(--surface-overlay);
    }
    
    .delete-modal-header[b-xpwtzo4rah] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        border-bottom: 1px solid var(--border-strong);
    }
    
    .delete-modal-header h3[b-xpwtzo4rah] {
        margin: 0;
        color: var(--color-danger);
    }
    
    .delete-modal-body[b-xpwtzo4rah] {
        padding: 1.5rem;
    }
    
    .delete-modal-body p[b-xpwtzo4rah] {
        margin: 0.5rem 0;
        color: var(--text-body);
    }
    
    .delete-modal-body .warning-text[b-xpwtzo4rah] {
        color: var(--color-warning);
        margin-top: 1rem;
    }
    
    .delete-modal-actions[b-xpwtzo4rah] {
        display: flex;
        justify-content: flex-end;
        gap: 0.5rem;
        padding: 1rem;
        border-top: 1px solid var(--border-strong);
    }

    /* ── Versionen modal (ADR-0117) ─────────────────────────────────────── */
    .vv-modal[b-xpwtzo4rah] {
        background: var(--surface-card);
        border-radius: var(--radius-md);
        width: min(780px, 94vw);
        max-height: 85vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: 0 10px 30px var(--surface-overlay);
    }

    .vv-modal-head[b-xpwtzo4rah] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--border-strong);
    }

    .vv-modal-head h3[b-xpwtzo4rah] {
        margin: 0;
        color: var(--text-body);
        font-size: 1.15rem;
    }

    .vv-close-x[b-xpwtzo4rah] {
        background: none;
        border: none;
        font-size: 1.5rem;
        line-height: 1;
        cursor: pointer;
        color: var(--text-muted);
        padding: 0 0.25rem;
    }

    .vv-modal-body[b-xpwtzo4rah] {
        padding: 1rem 1.25rem;
        overflow-y: auto;
    }

    .vv-hint[b-xpwtzo4rah] {
        color: var(--text-muted);
        font-size: 0.85rem;
        margin: 0 0 0.85rem;
        line-height: 1.4;
    }

    .vv-empty[b-xpwtzo4rah] {
        color: var(--text-muted);
        margin: 1rem 0 0;
    }

    .vv-table-wrap[b-xpwtzo4rah] {
        margin-top: 0.85rem;
        overflow-x: auto;
    }

    .vv-table[b-xpwtzo4rah] {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.85rem;
    }

    .vv-table th[b-xpwtzo4rah],
    .vv-table td[b-xpwtzo4rah] {
        text-align: left;
        padding: 0.5rem 0.6rem;
        border-bottom: 1px solid var(--border-strong);
        color: var(--text-body);
        white-space: nowrap;
        vertical-align: top;
    }

    .vv-table th[b-xpwtzo4rah] {
        color: var(--text-muted);
        font-weight: 600;
    }

    .vv-table td.vv-wrap[b-xpwtzo4rah] {
        white-space: normal;
        word-break: break-word;
    }

    .vv-modal-foot[b-xpwtzo4rah] {
        display: flex;
        justify-content: flex-end;
        gap: 0.5rem;
        padding: 0.85rem 1.25rem;
        border-top: 1px solid var(--border-strong);
    }

    .vv-btn[b-xpwtzo4rah] {
        padding: 0.45rem 1rem;
        border-radius: var(--radius-sm);
        border: 1px solid transparent;
        cursor: pointer;
        font-size: 0.9rem;
    }

    .vv-btn:disabled[b-xpwtzo4rah] {
        opacity: 0.5;
        cursor: default;
    }

    .vv-btn-primary[b-xpwtzo4rah] {
        background: var(--color-primary);
        color: var(--text-on-primary);
        border-color: var(--color-primary);
    }

    .vv-btn-secondary[b-xpwtzo4rah] {
        background: var(--surface-hover);
        color: var(--text-body);
        border-color: var(--border-strong);
    }

    .vv-restore-btn[b-xpwtzo4rah] {
        padding: 0.35rem 0.7rem;
        border-radius: var(--radius-sm);
        border: 1px solid var(--border-strong);
        background: var(--surface-hover);
        color: var(--text-body);
        cursor: pointer;
        white-space: nowrap;
    }

    .vv-restore-btn:disabled[b-xpwtzo4rah] {
        opacity: 0.5;
        cursor: default;
    }

    .vv-notiz-modal[b-xpwtzo4rah] {
        width: min(460px, 94vw);
    }

    .vv-label[b-xpwtzo4rah] {
        display: block;
        color: var(--text-body);
        font-size: 0.9rem;
        margin-bottom: 0.4rem;
    }

    .vv-notiz-input[b-xpwtzo4rah] {
        width: 100%;
        padding: 0.5rem 0.6rem;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        color: var(--text-body);
        font-size: 0.9rem;
        resize: vertical;
    }

    /* Main Area */
    .visu-main[b-xpwtzo4rah] {
        display: flex;
        flex: 1;
        overflow: hidden;
    }

    /* ===== LEFT TOOLBOX ===== */
    .visu-toolbox[b-xpwtzo4rah] {
        width: 260px;
        background: var(--surface-card);
        border-right: 1px solid var(--border-strong);
        box-shadow: var(--shadow-panel);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .toolbox-tabs[b-xpwtzo4rah] {
        display: flex;
        flex-wrap: wrap;
        background: var(--surface-sunken);
        border-bottom: 1px solid var(--border-strong);
    }

    .tab-btn[b-xpwtzo4rah] {
        flex: 1;
        min-width: 50%;
        padding: 0.5rem;
        background: transparent;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        font-size: 0.75rem;
        transition: all 0.2s;
    }

    .tab-btn:hover[b-xpwtzo4rah] {
        color: var(--text-body);
    }

    .tab-btn.active[b-xpwtzo4rah] {
        color: var(--color-primary);
        background: var(--color-primary-light);
        border-bottom: 2px solid var(--color-primary);
    }

    .toolbox-content[b-xpwtzo4rah] {
        flex: 1;
        overflow-y: auto;
        padding: 0.75rem;
        display: flex;
        flex-direction: column;
        background: var(--surface-card);
    }

    .tool-section[b-xpwtzo4rah] {
        display: flex;
        flex-direction: column;
        /* NOTE: no height:100% here. It used to pin the section to exactly the toolbox height,
           which stopped .toolbox-content from scrolling — on short (laptop) screens the trailing
           „Auf dieser Seite" pipe list was squeezed off with no way to reach it. Natural height +
           the parent's overflow-y:auto lets the whole tab scroll. */
        min-height: min-content;
    }

    .tool-section h4[b-xpwtzo4rah] {
        margin: 0.75rem 0 0.5rem;
        color: var(--text-secondary);
        font-size: var(--font-size-xs);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        flex-shrink: 0;
    }

    .tool-section h4:first-child[b-xpwtzo4rah] {
        margin-top: 0;
    }

    /* Script Section - Always visible */
    .script-section[b-xpwtzo4rah] {
        padding: 0.75rem;
        background: var(--surface-sunken);
        border-bottom: 1px solid var(--border-strong);
    }

    /* Layout-only spacing for the EkBadge that reports loaded channel count.
       Colour/shape come from the shared .badge atom; we only add top margin. */
    [b-xpwtzo4rah] .channel-badge-spacing {
        margin-top: 0.5rem;
    }

    /* Script Upload */
    .script-upload[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .upload-btn[b-xpwtzo4rah] {
        padding: 0.4rem 0.75rem;
        background: var(--surface-hover);
        border: 1px dashed var(--border-strong);
        border-radius: var(--radius-sm);
        color: var(--color-primary);
        cursor: pointer;
        font-size: 0.8rem;
    }

    .upload-btn:hover[b-xpwtzo4rah] {
        border-color: var(--color-primary);
    }

    .script-name[b-xpwtzo4rah] {
        color: var(--color-primary);
        font-size: 0.75rem;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Shared temperature colour scale (layout-level). */
    .tempramp-section[b-xpwtzo4rah] {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }

    .tempramp-toggle[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.78rem;
        color: var(--text-body);
        cursor: pointer;
    }

    .tempramp-range[b-xpwtzo4rah] {
        display: flex;
        gap: 0.6rem;
        font-size: 0.72rem;
        color: var(--text-secondary);
    }

    .tempramp-range label[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .tempramp-range input[b-xpwtzo4rah] {
        width: 3.6rem;
        padding: 0.15rem 0.3rem;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
        color: var(--text-body);
        font-size: 0.72rem;
    }

    .tempramp-hint[b-xpwtzo4rah] {
        font-size: 0.68rem;
        line-height: 1.35;
        color: var(--text-secondary);
    }

    .tempramp-warn[b-xpwtzo4rah] {
        font-size: 0.7rem;
        line-height: 1.35;
        color: var(--color-danger);
    }

    /* Outcome of the last .p import. */
    .script-import-note[b-xpwtzo4rah] {
        margin-top: 0.4rem;
        font-size: 0.72rem;
        line-height: 1.35;
        color: var(--text-secondary);
    }

    .script-import-note.is-error[b-xpwtzo4rah] {
        color: var(--color-danger);
    }

    /* Placed values the new script contradicts. Left untouched on purpose, so this has to be
       readable rather than a passing toast — it is the operator's to-do list. */
    .script-import-conflicts[b-xpwtzo4rah] {
        margin-top: 0.4rem;
        padding: 0.4rem 0.5rem;
        background: var(--surface-sunken);
        border-left: 3px solid var(--color-warning);
        border-radius: var(--radius);
        font-size: 0.72rem;
        line-height: 1.4;
        max-height: 9rem;
        overflow-y: auto;
    }

    .script-import-conflicts .conflict-head[b-xpwtzo4rah] {
        color: var(--text-body);
        margin-bottom: 0.25rem;
    }

    .script-import-conflicts ul[b-xpwtzo4rah] {
        margin: 0;
        padding-left: 0.9rem;
        color: var(--text-secondary);
    }

    .script-import-conflicts .conflict-kanal[b-xpwtzo4rah] {
        font-weight: 600;
        color: var(--text-body);
        margin-right: 0.3rem;
    }

    .search-input[b-xpwtzo4rah] {
        width: 100%;
        padding: 0.4rem 0.5rem;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
        color: var(--text-body);
        font-size: var(--font-size-sm);
        margin-bottom: 0.5rem;
        flex-shrink: 0;
    }

    .search-input:focus[b-xpwtzo4rah] {
        outline: none;
        border-color: var(--border-focus);
        box-shadow: 0 0 0 3px var(--ekh-cyan-15);
    }

    .channel-count[b-xpwtzo4rah] {
        color: var(--text-secondary);
        font-size: 0.75rem;
        margin-bottom: 0.5rem;
        flex-shrink: 0;
    }

    .empty-state[b-xpwtzo4rah] {
        text-align: center;
        padding: 1rem;
        color: var(--text-secondary);
    }

    .empty-state .hint[b-xpwtzo4rah] {
        font-size: 0.8rem;
        color: var(--text-secondary);
    }

    .hint[b-xpwtzo4rah] {
        color: var(--text-secondary);
        font-size: 0.88rem;
        font-style: italic;
    }

    /* Bitmap Upload */
    .upload-area[b-xpwtzo4rah] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }

    .bitmap-upload-input[b-xpwtzo4rah] {
        display: none;
    }

    .upload-label[b-xpwtzo4rah] {
        display: inline-block;
        padding: 0.5rem 1rem;
        background: var(--color-primary);
        color: var(--text-on-primary);
        border-radius: var(--radius);
        cursor: pointer;
        font-size: 0.9rem;
        text-align: center;
        transition: background 0.2s;
    }

    .upload-label:hover[b-xpwtzo4rah] {
        background: var(--color-primary-hover);
    }

    .upload-filename[b-xpwtzo4rah] {
        color: var(--text-muted);
        font-size: 0.85rem;
        word-break: break-all;
    }

    .bitmap-list[b-xpwtzo4rah] {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }

    .bitmap-item[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.4rem 0.6rem;
        background: rgba(0,0,0,0.03);
        border: 1px solid rgba(0,0,0,0.06);
        border-radius: var(--radius-sm);
        cursor: grab;
        font-size: 0.88rem;
    }

    .bitmap-item:hover[b-xpwtzo4rah] {
        background: var(--ekh-cyan-15);
        border-color: var(--ekh-cyan-15);
    }

    .bitmap-item.is-current-bg[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        background: var(--surface-hover);
    }
    
    .bitmap-thumb[b-xpwtzo4rah] {
        width: 40px;
        height: 30px;
        border-radius: var(--radius-sm);
        overflow: hidden;
        flex-shrink: 0;
        background: var(--surface-card);
    }
    
    .bitmap-thumb img[b-xpwtzo4rah] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .bitmap-info[b-xpwtzo4rah] {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }
    
    .bitmap-name[b-xpwtzo4rah] {
        font-size: 0.8rem;
        color: var(--text-secondary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .bitmap-status[b-xpwtzo4rah] {
        font-size: 0.7rem;
        color: var(--color-primary);
    }
    
    .bitmap-status.assigned[b-xpwtzo4rah] {
        color: var(--color-primary);
    }
    
    .bitmap-status.unassigned[b-xpwtzo4rah] {
        color: var(--color-warning);
    }
    
    .bitmap-actions[b-xpwtzo4rah] {
        display: flex;
        gap: 0.2rem;
        flex-shrink: 0;
    }
    
    /* Current Background Info */
    .current-bg-info[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem;
        background: var(--surface-hover);
        border: 1px solid var(--ekh-cyan-15);
        border-radius: var(--radius);
    }

    .current-bg-thumb[b-xpwtzo4rah] {
        width: 48px;
        height: 36px;
        border-radius: var(--radius-sm);
        overflow: hidden;
        flex-shrink: 0;
        background: var(--surface-card);
    }
    
    .current-bg-thumb img[b-xpwtzo4rah] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .current-bg-details[b-xpwtzo4rah] {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }
    
    .bg-name[b-xpwtzo4rah] {
        font-size: 0.8rem;
        color: var(--color-primary);
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .bg-size[b-xpwtzo4rah], .bg-scale[b-xpwtzo4rah] {
        font-size: 0.7rem;
        color: var(--text-muted);
    }
    
    /* Background Preview in Properties Panel */
    .bg-preview[b-xpwtzo4rah] {
        margin-bottom: 0.5rem;
        text-align: center;
    }
    
    .bg-preview-img[b-xpwtzo4rah] {
        max-width: 100%;
        max-height: 80px;
        border-radius: var(--radius-sm);
        border: 1px solid var(--border-strong);
        object-fit: contain;
        background: var(--surface-card);
    }
    
    .bg-preview-name[b-xpwtzo4rah] {
        display: block;
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-top: 0.25rem;
    }

    .bitmap-icon[b-xpwtzo4rah] {
        font-size: 1.1rem;
    }

    .bitmap-name[b-xpwtzo4rah] {
        color: var(--text-secondary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .link-info[b-xpwtzo4rah] {
        color: var(--color-primary);
        background: var(--color-primary-10);
        padding: 0.3rem 0.5rem;
        border-radius: var(--radius-sm);
        font-size: 0.88rem;
        margin-top: 0.5rem;
    }

    .rotation-buttons[b-xpwtzo4rah] {
        display: flex;
        gap: 0.3rem;
    }

    .rotation-buttons .btn-tiny[b-xpwtzo4rah] {
        padding: 0.35rem 0.55rem;
        background: var(--surface-hover);
        border: 1px solid var(--border-strong);
        color: var(--text-muted);
        border-radius: var(--radius-sm);
        cursor: pointer;
        font-size: 0.85rem;
    }

    .rotation-buttons .btn-tiny:hover[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        color: var(--text-body);
    }

    .rotation-buttons .btn-tiny.active[b-xpwtzo4rah] {
        background: var(--ekh-cyan-15);
        border-color: var(--color-primary);
        color: var(--color-primary);
    }
    
    .rotation-controls[b-xpwtzo4rah] {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    .size-inputs[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

    .size-input[b-xpwtzo4rah] {
        width: 55px;
        padding: 0.3rem 0.4rem;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        color: var(--text-body);
        font-size: 0.8rem;
        text-align: center;
    }

    .size-input:focus[b-xpwtzo4rah] {
        outline: none;
        border-color: var(--color-primary);
    }

    .size-input[b-xpwtzo4rah]::placeholder {
        color: var(--text-secondary);
        font-size: 0.7rem;
    }

    .size-unit[b-xpwtzo4rah] {
        color: var(--text-secondary);
        font-size: 0.75rem;
    }

    /* Channel List */
    .channel-list[b-xpwtzo4rah] {
        list-style: none;
        padding: 0;
        margin: 0;
        flex: 1;
        overflow-y: auto;
    }

    /* Channel item — uses design tokens (the 2026-06-01 hard-coded near-black override was a
       drift-era workaround; today's --surface-card / --text-body pass the WCAG-AA token gate). */
    .channel-item[b-xpwtzo4rah] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        padding: 0.4rem 0.5rem;
        background: var(--surface-card);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-sm);
        margin-bottom: 0.25rem;
        cursor: pointer;
        font-size: 0.8rem;
        color: var(--text-body);
    }

    .channel-item:hover[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        background: var(--color-primary-light);
    }

    .channel-key[b-xpwtzo4rah] {
        color: var(--text-link);
        font-family: monospace;
        font-weight: bold;
    }

    .channel-name[b-xpwtzo4rah] {
        color: var(--text-body);
        flex: 1;
    }

    .channel-unit[b-xpwtzo4rah] {
        color: var(--text-secondary);
        font-size: 0.75rem;
    }

    /* Symbol Grid */
    .symbol-grid[b-xpwtzo4rah] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .symbol-item[b-xpwtzo4rah] {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.5rem;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        cursor: grab;
    }

    .symbol-item:hover[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        background: var(--surface-hover);
    }

    .symbol-icon[b-xpwtzo4rah] {
        font-size: 1.5rem;
    }

    .symbol-label[b-xpwtzo4rah] {
        font-size: 0.7rem;
        color: var(--text-muted);
        margin-top: 0.25rem;
    }

    /* Tool Grid */





    /* Color & Stroke */
    .color-row[b-xpwtzo4rah], .stroke-row[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .color-picker[b-xpwtzo4rah] {
        width: 40px;
        height: 30px;
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
        padding: 1px;
        background: var(--surface-card);
        cursor: pointer;
    }

    .color-label[b-xpwtzo4rah], .stroke-label[b-xpwtzo4rah] {
        color: var(--text-muted);
        font-size: 0.8rem;
        font-family: monospace;
    }

    .quick-colors[b-xpwtzo4rah] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        margin-bottom: 0.75rem;
    }

    .color-btn[b-xpwtzo4rah] {
        min-width: 32px;
        padding: 0.35rem 0.5rem;
        border: 2px solid transparent;
        border-radius: var(--radius-sm);
        cursor: pointer;
        font-size: 0.65rem;
        font-weight: bold;
        transition: all 0.15s;
    }

    .color-btn:hover[b-xpwtzo4rah] {
        transform: scale(1.1);
        border-color: var(--color-primary);
    }

    .stroke-slider[b-xpwtzo4rah] {
        flex: 1;
        accent-color: var(--color-primary);
    }

    /* Line Type Buttons */
    .line-type-row[b-xpwtzo4rah] {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .line-type-btn[b-xpwtzo4rah] {
        flex: 1;
        padding: 0.5rem;
        background: var(--surface-card);
        border: 2px solid var(--border-strong);
        border-radius: var(--radius-sm);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
        transition: all 0.15s;
    }

    .line-type-btn:hover[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    .line-type-btn.active[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        background: var(--color-primary-10);
        color: var(--color-primary);
    }

    .line-type-btn svg[b-xpwtzo4rah] {
        display: block;
    }

    /* Stroke Preview */
    .stroke-preview[b-xpwtzo4rah] {
        background: var(--surface-card);
        border-radius: var(--radius-sm);
        padding: 5px;
        margin-bottom: 0.75rem;
        overflow: hidden;
    }

    .stroke-preview svg[b-xpwtzo4rah] {
        display: block;
        width: 100%;
        height: 20px;
    }

    /* Fill Toggle */
    .fill-toggle[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--text-secondary);
        cursor: pointer;
        font-size: 0.85rem;
    }

    .fill-toggle input[type="checkbox"][b-xpwtzo4rah] {
        width: 18px;
        height: 18px;
        accent-color: var(--color-primary);
        cursor: pointer;
    }

    /* Text Input */
    .text-input[b-xpwtzo4rah] {
        width: 100%;
        padding: 0.5rem;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
        color: var(--text-body);
        margin-bottom: 0.5rem;
        font-size: var(--font-size-sm);
    }

    .text-input:focus[b-xpwtzo4rah] {
        outline: none;
        border-color: var(--border-focus);
        box-shadow: 0 0 0 3px var(--ekh-cyan-15);
    }

    /* Komponenten palette (ADR-0102 Stage 3) — a grid of library elements the
       operator arms then drops onto the canvas. */
    .component-palette[b-xpwtzo4rah] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
        gap: 0.4rem;
        margin: 0.4rem 0 0.25rem;
    }

    .component-palette-item[b-xpwtzo4rah] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.2rem;
        padding: 0.45rem 0.25rem;
        background: var(--surface-card);
        border: 1px solid var(--border-default);
        border-radius: var(--radius);
        color: var(--text-body);
        cursor: pointer;
        text-align: center;
        transition: border-color 0.12s, background 0.12s;
    }

    .component-palette-item:hover[b-xpwtzo4rah] {
        border-color: var(--border-focus);
        background: var(--surface-sunken);
    }

    .component-palette-item.active[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 2px var(--ekh-cyan-15);
    }

    .component-palette-icon[b-xpwtzo4rah] {
        font-size: 1.4rem;
        line-height: 1;
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* The inline SVG thumbnail (VisuComponentPreview) fills the icon box. */
    .component-palette-icon svg[b-xpwtzo4rah] {
        width: 100%;
        height: 100%;
        display: block;
    }

    .component-palette-name[b-xpwtzo4rah] {
        font-size: var(--font-size-xs);
        color: var(--text-secondary);
        word-break: break-word;
    }

    /* ADR-0102 Stage 5 — per-item edit/delete affordances. The wrapper is the
       grid cell; the action row overlays the top-right and appears on hover/
       focus (mirrors VisuEditorWeb.razor.css's editor-component-sidebar rules). */
    .component-palette-item-wrap[b-xpwtzo4rah] {
        position: relative;
        display: flex;
    }

    /* A PaletteHidden component shown only via the admin „Ausgeblendete anzeigen" toggle:
       dimmed + dashed so it reads as off-palette. Its actions still work at full opacity. */
    .component-item-hidden .component-palette-item[b-xpwtzo4rah] {
        opacity: 0.5;
        border-style: dashed;
    }

    .component-show-hidden[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        margin-top: 0.4rem;
    }

    .component-palette-item-wrap .component-palette-item[b-xpwtzo4rah] {
        flex: 1 1 auto;
        width: 100%;
    }

    .component-palette-item-actions[b-xpwtzo4rah] {
        position: absolute;
        top: 0.15rem;
        right: 0.15rem;
        display: flex;
        gap: 0.15rem;
        opacity: 0;
        transition: opacity var(--duration-fast) ease;
    }

    .component-palette-item-wrap:hover .component-palette-item-actions[b-xpwtzo4rah],
    .component-palette-item-wrap:focus-within .component-palette-item-actions[b-xpwtzo4rah] {
        opacity: 1;
    }

    .component-item-action[b-xpwtzo4rah] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.15rem;
        height: 1.15rem;
        padding: 0;
        font-size: var(--font-size-xs);
        line-height: 1;
        color: var(--text-secondary);
        background: var(--surface-card);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-sm);
        cursor: pointer;
    }

    .component-item-action:hover[b-xpwtzo4rah] {
        color: var(--color-primary);
        border-color: var(--color-primary);
    }

    .component-item-action-danger:hover[b-xpwtzo4rah] {
        color: var(--color-danger);
        border-color: var(--color-danger);
    }

    .component-action-error[b-xpwtzo4rah] {
        color: var(--color-danger);
    }

    .font-size-row[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .font-slider[b-xpwtzo4rah] {
        flex: 1;
        accent-color: var(--color-primary);
    }

    .font-size-label[b-xpwtzo4rah] {
        color: var(--color-primary);
        font-weight: bold;
        min-width: 50px;
        text-align: right;
    }

    .text-format-row[b-xpwtzo4rah] {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .format-btn[b-xpwtzo4rah] {
        width: 40px;
        height: 36px;
        background: var(--surface-card);
        border: 2px solid var(--border-strong);
        border-radius: var(--radius-sm);
        color: var(--text-muted);
        cursor: pointer;
        font-size: 16px;
        transition: all 0.15s;
    }

    /* Text variant — for labelled toggles (Ausrichtung/Typ, Verwerfen/Übernehmen) the fixed
       40px icon square is too narrow, so the label overflowed and overlapped the next button.
       This makes the button a flexible pill that fills its share of the row and fits the word. */
    .format-btn.format-btn-text[b-xpwtzo4rah] {
        width: auto;
        height: auto;
        flex: 1 1 0;
        min-width: 0;
        padding: 0.4rem 0.55rem;
        font-size: 0.85rem;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .format-btn:hover[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    .format-btn.active[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        background: var(--color-primary-10);
        color: var(--color-primary);
    }

    .display-option-row[b-xpwtzo4rah] {
        margin-bottom: 0.75rem;
    }

    .display-toggle[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--text-secondary);
        cursor: pointer;
        font-size: 0.9rem;
    }

    .display-toggle input[type="checkbox"][b-xpwtzo4rah] {
        width: 18px;
        height: 18px;
        accent-color: var(--color-primary);
        cursor: pointer;
    }

    .button-color-row[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .button-color-row label[b-xpwtzo4rah] {
        color: var(--text-muted);
        font-size: 0.85rem;
    }

    .button-link-row[b-xpwtzo4rah] {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        margin-bottom: 0.75rem;
    }

    .button-link-row label[b-xpwtzo4rah] {
        color: var(--text-muted);
        font-size: 0.85rem;
    }

    .page-select[b-xpwtzo4rah] {
        width: 100%;
        padding: 0.4rem 0.5rem;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
        color: var(--text-body);
        font-size: var(--font-size-sm);
        color-scheme: light;
    }

    .page-select:focus[b-xpwtzo4rah] {
        outline: none;
        border-color: var(--border-focus);
        box-shadow: 0 0 0 3px var(--ekh-cyan-15);
    }

    .text-preview[b-xpwtzo4rah] {
        padding: 10px;
        background: var(--surface-card);
        border-radius: var(--radius-sm);
        margin-bottom: 0.75rem;
        min-height: 40px;
        display: flex;
        align-items: center;
        color: var(--text-body);
    }

    .text-preview.as-button[b-xpwtzo4rah] {
        background: transparent;
        justify-content: center;
    }

    /* Text Drag Item */
    .text-drag-item[b-xpwtzo4rah] {
        padding: 12px 16px;
        background: var(--surface-card);
        border: 2px dashed var(--color-primary);
        border-radius: var(--radius);
        margin-bottom: 0.5rem;
        cursor: grab;
        display: flex;
        align-items: center;
        gap: 10px;
        transition: all 0.2s;
        color: var(--text-body);
    }

    .text-drag-item:hover[b-xpwtzo4rah] {
        border-style: solid;
        background: var(--color-success-10);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(30, 148, 188, 0.3);
    }

    .text-drag-item:active[b-xpwtzo4rah] {
        cursor: grabbing;
        transform: translateY(0);
    }

    .text-drag-item.as-button[b-xpwtzo4rah] {
        border-radius: 10px;
        border: none;
        padding: 14px 24px;
        background: linear-gradient(180deg, 
            rgba(0,0,0,0.15) 0%, 
            rgba(0,0,0,0.06) 10%, 
            transparent 50%, 
            rgba(0,0,0,0.1) 90%, 
            rgba(0,0,0,0.2) 100%
        ), var(--btn-color, var(--border-strong));
        box-shadow: 
            0 6px 20px rgba(0, 0, 0, 0.4),
            0 2px 4px rgba(0, 0, 0, 0.3),
            inset 0 2px 0 rgba(0,0,0,0.12),
            inset 0 -2px 0 rgba(0,0,0,0.2);
        text-shadow: 0 2px 4px rgba(0,0,0,0.4);
        position: relative;
        overflow: hidden;
    }

    .text-drag-item.as-button[b-xpwtzo4rah]::before {
        content: '';
        position: absolute;
        top: 2px;
        left: 10%;
        right: 10%;
        height: 2px;
        background: linear-gradient(90deg, transparent, rgba(0,0,0,0.25), transparent);
        border-radius: var(--radius-xs);
    }

    .text-drag-item.as-button:hover[b-xpwtzo4rah] {
        transform: translateY(-4px);
        box-shadow: 
            0 10px 30px var(--surface-overlay),
            0 4px 8px rgba(0, 0, 0, 0.3),
            inset 0 2px 0 rgba(0,0,0,0.15),
            inset 0 -2px 0 rgba(0,0,0,0.2),
            0 0 20px rgba(30, 148, 188, 0.3);
    }

    .text-drag-item.as-button:active[b-xpwtzo4rah] {
        transform: translateY(2px);
        box-shadow: 
            0 2px 8px rgba(0, 0, 0, 0.4),
            inset 0 2px 4px rgba(0,0,0,0.3),
            inset 0 -1px 0 rgba(0,0,0,0.06);
    }

    .drag-handle[b-xpwtzo4rah] {
        color: var(--color-primary);
        font-size: 18px;
        opacity: 0.7;
    }

    .text-drag-item:hover .drag-handle[b-xpwtzo4rah] {
        opacity: 1;
    }

    .text-drag-item.as-button .drag-handle[b-xpwtzo4rah] {
        color: rgba(0,0,0,0.4);
        text-shadow: none;
    }

    .hint.active[b-xpwtzo4rah] {
        color: var(--color-primary);
        background: var(--color-primary-10);
        padding: 0.5rem;
        border-radius: var(--radius-sm);
        border: 1px solid var(--color-primary);
    }

    .text-options[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .text-options label[b-xpwtzo4rah] {
        color: var(--text-muted);
        font-size: 0.8rem;
    }

    .text-options select[b-xpwtzo4rah] {
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        color: var(--text-body);
        padding: 0.25rem;
        border-radius: var(--radius-sm);
    }



    /* ===== CENTER CANVAS AREA ===== */
    .visu-canvas-area[b-xpwtzo4rah] {
        flex: 1;
        display: flex;
        flex-direction: column;
        background: var(--surface-workspace);
        overflow: hidden;
        position: relative; /* anchor for the sidebar collapse handles on its edges */
        min-width: 0;
    }

    /* Sidebar collapse handles — small tabs pinned to the canvas edges, always reachable. */
    .sidebar-edge-toggle[b-xpwtzo4rah] {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 6;
        width: 18px;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid var(--border-strong);
        background: var(--surface-card);
        color: var(--text-secondary);
        cursor: pointer;
        font-size: 0.9rem;
        line-height: 1;
        box-shadow: var(--shadow-sm);
        transition: background 0.15s, color 0.15s, border-color 0.15s;
    }

    .sidebar-edge-toggle:hover[b-xpwtzo4rah] {
        background: var(--color-primary-light);
        color: var(--color-primary);
        border-color: var(--color-primary);
    }

    .sidebar-edge-toggle.edge-left[b-xpwtzo4rah] {
        left: 0;
        border-left: none;
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    }

    .sidebar-edge-toggle.edge-right[b-xpwtzo4rah] {
        right: 0;
        border-right: none;
        border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    }

    /* Collapsed left toolbox — removed from the flow so the canvas grows. */
    .visu-toolbox.is-collapsed[b-xpwtzo4rah] {
        display: none;
    }

    .canvas-toolbar[b-xpwtzo4rah] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        /* Wrap sections onto extra rows when the viewport is too narrow rather than
           clipping. Previously .toolbar-actions used overflow-x:auto WITH a hidden
           scrollbar, so on a narrow canvas the trailing buttons (Smart-Farbe 🌡️,
           zoom) scrolled off with no affordance and looked missing. */
        flex-wrap: wrap;
        row-gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: var(--surface-card);
        border-bottom: 1px solid var(--border-strong);
        box-shadow: var(--shadow);
        min-height: 42px;
        flex-shrink: 0;
    }

    .toolbar-left[b-xpwtzo4rah], .toolbar-center[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .toolbar-actions[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        /* Wrap the icon buttons to a second row instead of hiding them behind a
           scrollbar-less overflow — every tool (incl. Smart-Farbe) stays reachable. */
        flex-wrap: wrap;
        gap: 0.25rem;
        row-gap: 0.25rem;
        flex-shrink: 1;
        min-width: 0;
    }

    .toolbar-actions .btn-icon[b-xpwtzo4rah] {
        flex: 0 0 auto;
    }

    .toolbar-actions .btn-icon:disabled[b-xpwtzo4rah] {
        opacity: 0.3;
        cursor: not-allowed;
    }

    /* Functional button clusters. Each group keeps its buttons tight together and is set off
       from the next by a hairline separator + a little breathing room, so related tools read
       as one unit (history · clipboard · layer order · grid · pipes · zoom). */
    .toolbar-group[b-xpwtzo4rah] {
        display: inline-flex;
        align-items: center;
        gap: 0.15rem;
        padding-right: 0.5rem;
        margin-right: 0.35rem;
        border-right: 1px solid var(--border-subtle);
    }

    .toolbar-group:last-child[b-xpwtzo4rah] {
        border-right: none;
        padding-right: 0;
        margin-right: 0;
    }

    .toolbar-right[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .select-toggle[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background: var(--surface-hover);
        border: 1px solid var(--border-strong);
        padding: 0.3rem 0.6rem;
        border-radius: 20px;
        cursor: pointer;
        transition: background 0.2s, border-color 0.2s;
        user-select: none;
        flex-shrink: 0;
    }

    .select-toggle:hover[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        background: var(--border-default);
    }

    .select-toggle.active[b-xpwtzo4rah] {
        background: var(--ekh-cyan-15);
        border-color: var(--color-primary);
    }

    .select-toggle .toggle-icon[b-xpwtzo4rah] {
        font-size: 0.9rem;
    }

    .select-toggle .toggle-label[b-xpwtzo4rah] {
        font-size: 0.8rem;
        color: var(--text-muted);
        transition: color 0.2s;
    }

    .select-toggle.active .toggle-label[b-xpwtzo4rah] {
        color: var(--color-primary);
    }

    .toggle-switch[b-xpwtzo4rah] {
        width: 32px;
        height: 18px;
        background: var(--surface-card);
        border-radius: 10px;
        position: relative;
        transition: background 0.2s;
    }

    .select-toggle.active .toggle-switch[b-xpwtzo4rah] {
        background: var(--color-primary);
    }

    .toggle-knob[b-xpwtzo4rah] {
        position: absolute;
        width: 14px;
        height: 14px;
        background: var(--text-secondary);
        border-radius: 50%;
        top: 2px;
        left: 2px;
        transition: left 0.2s, background 0.2s;
    }

    .select-toggle.active .toggle-knob[b-xpwtzo4rah] {
        left: 16px;
        background: var(--surface-card);
    }

    .mode-indicator[b-xpwtzo4rah] {
        padding: 0.25rem 0.75rem;
        background: var(--surface-hover);
        border-radius: var(--radius-sm);
        font-size: 0.85rem;
        color: var(--text-muted);
    }

    .mode-indicator.tool-active[b-xpwtzo4rah] {
        background: rgba(255, 193, 7, 0.15);
        color: var(--color-warning);
        border: 1px solid rgba(255, 193, 7, 0.3);
    }

    .coords[b-xpwtzo4rah] {
        font-family: monospace;
        color: var(--text-muted);
        font-size: 0.85rem;
    }

    .element-count[b-xpwtzo4rah] {
        color: var(--text-muted);
        font-size: 0.8rem;
    }

    .btn-icon[b-xpwtzo4rah] {
        background: var(--surface-hover);
        border: 1px solid var(--border-strong);
        color: var(--text-body);
        padding: 0.25rem 0.5rem;
        border-radius: var(--radius-sm);
        cursor: pointer;
        font-size: 0.85rem;
        flex-shrink: 0;
        transition: border-color 0.15s;
    }

    .btn-icon:hover[b-xpwtzo4rah] {
        border-color: var(--color-primary);
    }

    .btn-icon:disabled[b-xpwtzo4rah] {
        opacity: 0.4;
        cursor: not-allowed;
    }

    /* Page Navigation */
    .page-navigation[b-xpwtzo4rah] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--surface-page);
        border-bottom: 1px solid var(--border-strong);
        padding: 0 0.5rem;
        min-height: 36px;
    }

    .page-tabs[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 2px;
        overflow-x: auto;
        flex: 1;
        scrollbar-width: thin;
        scrollbar-color: var(--border-default) transparent;
    }

    .page-tabs[b-xpwtzo4rah]::-webkit-scrollbar {
        height: 4px;
    }

    .page-tabs[b-xpwtzo4rah]::-webkit-scrollbar-thumb {
        background: var(--border-default);
        border-radius: var(--radius-xs);
    }

    .page-tab[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.4rem 0.75rem;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-bottom: none;
        border-radius: var(--radius) var(--radius) 0 0;
        color: var(--text-muted);
        cursor: pointer;
        font-size: 0.8rem;
        white-space: nowrap;
        transition: all 0.15s;
        position: relative;
        top: 1px;
    }

    .page-tab:hover[b-xpwtzo4rah] {
        background: var(--surface-hover);
        color: var(--text-body);
    }

    .page-tab.active[b-xpwtzo4rah] {
        background: var(--surface-hover);
        border-color: var(--color-primary);
        border-bottom: 1px solid var(--surface-hover);
        color: var(--color-primary);
    }

    .page-icon[b-xpwtzo4rah] {
        font-size: 0.9rem;
    }

    .page-name[b-xpwtzo4rah] {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .page-tab-close[b-xpwtzo4rah] {
        background: transparent;
        border: none;
        color: var(--text-secondary);
        cursor: pointer;
        font-size: 1rem;
        padding: 0 0.2rem;
        margin-left: 0.25rem;
        line-height: 1;
        border-radius: var(--radius-sm);
    }

    .page-tab-close:hover[b-xpwtzo4rah] {
        color: var(--color-danger);
        background: rgba(255, 68, 68, 0.2);
    }

    .page-tab-add[b-xpwtzo4rah] {
        background: transparent;
        border: 1px dashed var(--border-strong);
        color: var(--text-secondary);
        cursor: pointer;
        font-size: 1.1rem;
        padding: 0.3rem 0.6rem;
        border-radius: var(--radius) var(--radius) 0 0;
        transition: all 0.15s;
    }

    .page-tab-add:hover[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        color: var(--color-primary);
        background: var(--color-primary-10);
    }

    .page-actions[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        padding-left: 0.5rem;
        border-left: 1px solid var(--border-strong);
        margin-left: 0.5rem;
    }

    .canvas-wrapper[b-xpwtzo4rah] {
        flex: 1;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        overflow: auto;
        background: var(--surface-hover);
        position: relative;
        padding: 0;
        outline: none;
    }
    
    .canvas-wrapper:focus[b-xpwtzo4rah] {
        outline: 2px solid var(--color-primary);
        outline-offset: -2px;
    }

    .main-canvas[b-xpwtzo4rah] {
        background: var(--surface-card);
        border: none;
        cursor: crosshair;
        display: block;
        /* Explicitly prevent CSS scaling - size controlled by canvas.width/height attributes only */
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
    }

    .canvas-size-controls[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

    .canvas-size-controls label[b-xpwtzo4rah] {
        color: var(--text-muted);
        font-size: 0.8rem;
    }

    .canvas-size-controls input[type="number"][b-xpwtzo4rah] {
        width: 55px;
        padding: 0.2rem 0.4rem;
        background: var(--surface-hover);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        color: var(--text-body);
        font-size: 0.8rem;
    }
    
    .design-size-label[b-xpwtzo4rah] {
        color: var(--text-muted);
        font-size: 0.75rem;
        font-variant-numeric: tabular-nums;
        min-width: 5rem;
        text-align: center;
    }

    .toolbar-divider[b-xpwtzo4rah] {
        color: var(--border-default);
        margin: 0 0.25rem;
        flex-shrink: 0;
    }
    
    .toolbar-toggle-active[b-xpwtzo4rah] {
        background: var(--ekh-cyan-15) !important;
        border-color: var(--color-primary) !important;
        box-shadow: 0 0 4px var(--color-primary-light);
    }
    
    .toolbar-select[b-xpwtzo4rah] {
        padding: 0.2rem 0.3rem;
        background: var(--surface-hover);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
        color: var(--text-body);
        font-size: var(--font-size-xs);
        cursor: pointer;
        flex-shrink: 0;
        color-scheme: light;
    }

    .toolbar-select:hover[b-xpwtzo4rah] {
        border-color: var(--border-default);
    }

    .toolbar-select:focus[b-xpwtzo4rah] {
        outline: none;
        border-color: var(--border-focus);
        box-shadow: 0 0 0 3px var(--ekh-cyan-15);
    }
    
    .zoom-label[b-xpwtzo4rah] {
        font-size: 0.75rem !important;
        min-width: 3.5rem;
        text-align: center;
        font-variant-numeric: tabular-nums;
    }
    
    .canvas-zoom-container[b-xpwtzo4rah] {
        display: inline-block;
        transition: transform 0.15s ease;
    }

    .btn-small[b-xpwtzo4rah] {
        padding: 0.25rem 0.75rem;
        background: var(--surface-hover);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        color: var(--text-body);
        cursor: pointer;
        font-size: 0.85rem;
    }

    .btn-small:hover[b-xpwtzo4rah] {
        border-color: var(--color-primary);
    }

    .btn-small.danger[b-xpwtzo4rah] {
        border-color: var(--color-danger);
        color: var(--color-danger);
    }

    /* ===== RIGHT PROPERTIES PANEL ===== */
    .visu-properties[b-xpwtzo4rah] {
        width: 288px;
        background: var(--surface-card);
        border-left: 1px solid var(--border-strong);
        box-shadow: var(--shadow-panel);
        overflow-y: auto;
        padding: 0.75rem;
        font-size: 0.95rem;
        display: flex;
        flex-direction: column;
    }

    .visu-properties h3[b-xpwtzo4rah] {
        margin: 0 0 1rem;
        color: var(--color-primary);
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .property-section[b-xpwtzo4rah] {
        margin-bottom: 1.25rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--border-strong);
        flex-shrink: 0;
    }

    .property-section:last-child[b-xpwtzo4rah] {
        flex: 1 0 auto;
        margin-bottom: 0;
        border-bottom: none;
    }

    .property-section.info-section[b-xpwtzo4rah] {
        background: rgba(100, 149, 237, 0.1);
        padding: 0.5rem;
        border-radius: var(--radius-sm);
        border: 1px solid rgba(100, 149, 237, 0.3);
        flex-shrink: 0;
    }

    .property-section.info-section h4[b-xpwtzo4rah] {
        color: var(--color-primary);
    }

    .property-section.info-section .hint[b-xpwtzo4rah] {
        margin-bottom: 0.5rem;
    }

    .property-section.info-section .hint strong[b-xpwtzo4rah] {
        color: var(--text-body);
    }

    .property-section h4[b-xpwtzo4rah] {
        margin: 0.6rem 0 0.5rem;
        color: var(--text-secondary);
        font-size: var(--font-size-xs);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .property-section h4:first-child[b-xpwtzo4rah] {
        margin-top: 0;
    }

    .property-section.selected[b-xpwtzo4rah] {
        background: var(--surface-hover);
        padding: 0.6rem;
        border-radius: var(--radius-sm);
        border: 1px solid var(--ekh-cyan-15);
        flex: 1 0 auto;
    }
    
    .multi-selection-info[b-xpwtzo4rah] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        margin-bottom: 0.75rem;
    }
    
    .multi-actions[b-xpwtzo4rah] {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        margin-bottom: 0.75rem;
    }
    
    .multi-actions .btn-small[b-xpwtzo4rah] {
        width: 100%;
        text-align: center;
    }
    
    .btn-danger[b-xpwtzo4rah] {
        background: var(--color-danger-10);
        border-color: var(--color-danger-10);
        color: var(--color-danger);
    }

    .btn-danger:hover[b-xpwtzo4rah] {
        background: var(--color-danger-light);
    }
    
    .multi-hint[b-xpwtzo4rah] {
        font-size: 0.72rem;
        color: var(--text-secondary);
        line-height: 1.5;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border-strong);
    }
    
    .zorder-buttons[b-xpwtzo4rah] {
        display: flex;
        gap: 0.4rem;
        margin-bottom: 0.75rem;
    }
    
    .zorder-buttons .btn-small[b-xpwtzo4rah] {
        flex: 1;
        text-align: center;
        padding: 0.35rem 0;
        min-width: 0;
    }
    
    
    
    
    
    

    .property-row[b-xpwtzo4rah] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
        font-size: 0.95rem;
        gap: 0.5rem;
    }

    .property-row label[b-xpwtzo4rah] {
        color: var(--text-muted);
        min-width: 60px;
    }

    .compact-fields[b-xpwtzo4rah] {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 0.6rem;
    }
    
    .compact-field[b-xpwtzo4rah] {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 3px;
    }
    
    .compact-field .field-label[b-xpwtzo4rah] {
        font-size: 0.78rem;
        color: var(--text-secondary);
        text-align: center;
    }
    
    .prop-input-compact[b-xpwtzo4rah] {
        width: 100%;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        color: var(--text-body);
        padding: 0.3rem 0.35rem;
        font-size: 0.9rem;
        text-align: center;
    }
    
    .inline-row[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
    }
    
    .inline-label[b-xpwtzo4rah] {
        color: var(--text-muted);
        font-size: 0.85rem;
        min-width: 42px;
        flex-shrink: 0;
    }
    
    .prop-info-grid[b-xpwtzo4rah] {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.2rem 0.5rem;
        align-items: center;
        font-size: 0.85rem;
        margin-bottom: 0.6rem;
        padding: 0.4rem;
        background: var(--surface-page);
        border-radius: var(--radius-sm);
    }
    
    .prop-info-grid .prop-label[b-xpwtzo4rah] {
        color: var(--text-muted);
        white-space: nowrap;
    }
    
    .prop-info-grid .prop-input-sm[b-xpwtzo4rah] {
        width: 50px;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        color: var(--text-body);
        padding: 0.15rem 0.3rem;
        font-size: 0.8rem;
        text-align: center;
    }
    
    .property-row-dual[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        margin-bottom: 0.5rem;
    }
    
    .property-row-dual label[b-xpwtzo4rah] {
        color: var(--text-muted);
        font-size: 0.85rem;
        flex-shrink: 0;
    }
    
    .property-row-dual .prop-input[b-xpwtzo4rah] {
        flex: 1;
        min-width: 0;
    }
    
    .property-actions-footer[b-xpwtzo4rah] {
        display: flex;
        gap: 0.4rem;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--border-strong);
    }
    
    .property-actions-footer .btn-small[b-xpwtzo4rah] {
        flex: 1;
        text-align: center;
        font-size: 0.8rem;
    }
    
    .property-actions-footer .btn-small.primary[b-xpwtzo4rah],
    .property-actions.bottom-actions .btn-small.primary[b-xpwtzo4rah] {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--text-on-primary);
    }

    .property-actions-footer .btn-small.primary:hover[b-xpwtzo4rah],
    .property-actions.bottom-actions .btn-small.primary:hover[b-xpwtzo4rah] {
        background: var(--color-primary-hover);
    }
    
    .color-picker-sm[b-xpwtzo4rah] {
        width: 30px;
        height: 26px;
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
        padding: 1px;
        background: var(--surface-card);
        cursor: pointer;
        flex-shrink: 0;
    }
    
    .prop-value-sm[b-xpwtzo4rah] {
        color: var(--text-muted);
        font-size: 0.8rem;
        min-width: 24px;
        text-align: right;
        flex-shrink: 0;
    }
    
    .prop-select-sm[b-xpwtzo4rah] {
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
        color: var(--text-body);
        padding: 3px 5px;
        font-size: var(--font-size-sm);
        width: 40px;
        flex-shrink: 0;
        color-scheme: light;
    }

    .prop-select-sm:focus[b-xpwtzo4rah] {
        outline: none;
        border-color: var(--border-focus);
        box-shadow: 0 0 0 3px var(--ekh-cyan-15);
    }
    
    .fill-toggle-inline[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        cursor: pointer;
        flex-shrink: 0;
    }

    .prop-input[b-xpwtzo4rah] {
        width: 70px;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
        color: var(--text-body);
        padding: 0.3rem 0.4rem;
        font-size: var(--font-size-sm);
    }

    .prop-input-wide[b-xpwtzo4rah] {
        width: 100%;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
        color: var(--text-body);
        padding: 0.3rem 0.4rem;
        font-size: var(--font-size-sm);
    }

    .prop-input:focus[b-xpwtzo4rah],
    .prop-input-wide:focus[b-xpwtzo4rah] {
        border-color: var(--border-focus);
        box-shadow: 0 0 0 3px var(--ekh-cyan-15);
        outline: none;
    }

    .checkbox-label[b-xpwtzo4rah] {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        color: var(--text-body);
        font-size: 0.85rem;
        cursor: pointer;
        margin-right: 1rem;
    }

    .checkbox-label input[type="checkbox"][b-xpwtzo4rah] {
        accent-color: var(--color-primary);
        cursor: pointer;
    }

    .prop-select[b-xpwtzo4rah] {
        flex: 1;
        background-color: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
        color: var(--text-body) !important;
        -webkit-text-fill-color: var(--text-body);
        padding: 0.3rem 0.4rem;
        font-size: var(--font-size-sm);
        color-scheme: light;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 6px center;
        padding-right: 22px;
    }
    
    .prop-select option[b-xpwtzo4rah] {
        background-color: var(--surface-card);
        color: var(--text-body) !important;
        -webkit-text-fill-color: var(--text-body);
    }

    .prop-select:focus[b-xpwtzo4rah] {
        border-color: var(--border-focus);
        box-shadow: 0 0 0 3px var(--ekh-cyan-15);
        outline: none;
    }
    
    .format-grid[b-xpwtzo4rah] {
        display: grid;
        grid-template-columns: 75px 1fr;
        gap: 0.35rem 0.5rem;
        align-items: center;
        font-size: 0.85rem;
    }
    
    .format-grid > label[b-xpwtzo4rah] {
        color: var(--text-muted);
        white-space: nowrap;
    }
    
    .format-grid .prop-select[b-xpwtzo4rah] {
        width: 100%;
        min-width: 0;
    }
    
    .format-grid .bg-color-row[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }
    
    .opacity-row[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }
    
    .opacity-row .stroke-slider[b-xpwtzo4rah] {
        flex: 1;
        min-width: 0;
    }
    
    .bg-color-select[b-xpwtzo4rah] {
        color-scheme: light;
        color: var(--text-body) !important;
        text-shadow: 0 0 3px rgba(0,0,0,0.8), 0 0 1px rgba(0,0,0,0.9);
    }
    
    .bg-color-select option[b-xpwtzo4rah] {
        background-color: var(--surface-card);
        color: var(--text-body);
        text-shadow: none;
    }

    .prop-value[b-xpwtzo4rah] {
        color: var(--color-primary);
        font-size: 0.9rem;
        min-width: 40px;
        text-align: right;
    }
    
    .prop-value-small[b-xpwtzo4rah] {
        color: var(--text-muted);
        font-size: 0.75rem;
        font-family: monospace;
    }
    
    .bg-color-row[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .checkbox-inline[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        font-size: 0.75rem;
        color: var(--text-muted);
        cursor: pointer;
    }
    
    .checkbox-inline input[type="checkbox"][b-xpwtzo4rah] {
        accent-color: var(--color-primary);
        cursor: pointer;
    }
    
    .property-subheader[b-xpwtzo4rah] {
        font-size: 0.92rem;
        color: var(--color-primary);
        margin: 0.85rem 0 0.5rem 0;
        padding-top: 0.6rem;
        border-top: 1px solid var(--border-default);
    }
    
    .style-buttons[b-xpwtzo4rah] {
        display: flex;
        gap: 0.25rem;
    }
    
    .style-btn[b-xpwtzo4rah] {
        width: 28px;
        height: 28px;
        background: var(--surface-hover);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        color: var(--text-muted);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        transition: all 0.2s;
    }
    
    .style-btn:hover[b-xpwtzo4rah] {
        background: var(--border-default);
        border-color: var(--border-default);
    }
    
    .style-btn.active[b-xpwtzo4rah] {
        background: var(--ekh-cyan-15);
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    .prop-value-highlight[b-xpwtzo4rah] {
        color: var(--color-primary);
        font-weight: bold;
        font-size: 0.85rem;
    }

    .stroke-slider[b-xpwtzo4rah] {
        flex: 1;
        height: 6px;
        accent-color: var(--color-primary);
    }

    .fill-toggle[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
        color: var(--text-body) !important;
    }

    .fill-toggle input[b-xpwtzo4rah] {
        accent-color: var(--color-primary);
    }


    .property-section.selected[b-xpwtzo4rah] {
        border: 1px solid var(--color-primary);
        background: var(--surface-hover);
    }

    .element-item.selected[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        background: var(--ekh-cyan-15);
        box-shadow: 0 0 5px rgba(30, 148, 188, 0.3);
    }

    .element-item.selected span[b-xpwtzo4rah] {
        color: var(--color-primary);
    }

    .element-clickable[b-xpwtzo4rah] {
        cursor: pointer;
    }

    .element-clickable:hover[b-xpwtzo4rah] {
        color: var(--color-primary);
    }

    .property-actions[b-xpwtzo4rah] {
        margin: 0.75rem 0;
        display: flex;
        gap: 0.5rem;
    }
    
    .property-actions.bottom-actions[b-xpwtzo4rah] {
        margin-top: 1rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--border-strong);
        flex-wrap: nowrap;
    }
    
    .property-actions.bottom-actions .btn-small[b-xpwtzo4rah] {
        flex: 1;
        text-align: center;
        padding: 0.45rem 0.3rem;
        white-space: nowrap;
        font-size: 0.82rem;
    }

    .btn-small[b-xpwtzo4rah] {
        padding: 0.45rem 0.85rem;
        background: var(--surface-hover);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        color: var(--text-body);
        cursor: pointer;
        font-size: 0.88rem;
        transition: all 0.2s;
    }

    .btn-small:hover[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        background: var(--border-default);
    }

    .property-actions-footer .btn-small.danger[b-xpwtzo4rah],
    .property-actions.bottom-actions .btn-small.danger[b-xpwtzo4rah] {
        border-color: var(--color-danger);
        color: var(--color-danger);
    }

    .property-actions-footer .btn-small.danger:hover[b-xpwtzo4rah],
    .property-actions.bottom-actions .btn-small.danger:hover[b-xpwtzo4rah] {
        background: var(--color-danger);
        border-color: var(--color-danger);
        color: var(--text-on-primary);
    }

    .keyboard-hint[b-xpwtzo4rah] {
        font-size: 0.75rem;
        color: var(--text-muted);
        background: var(--color-primary-10);
        padding: 0.4rem 0.6rem;
        border-radius: var(--radius-sm);
        margin-bottom: 0.5rem;
        text-align: center;
        border: 1px solid var(--ekh-cyan-15);
    }

    .arrow-pad[b-xpwtzo4rah] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
    }

    .arrow-pad button[b-xpwtzo4rah] {
        width: 35px;
        height: 35px;
        background: var(--surface-hover);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        color: var(--text-body);
        cursor: pointer;
        font-size: 1rem;
        transition: all 0.15s;
    }

    .arrow-pad button:hover[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        background: var(--border-default);
    }

    .arrow-pad button:active[b-xpwtzo4rah] {
        transform: scale(0.95);
        background: var(--border-default);
    }

    .arrow-row[b-xpwtzo4rah] {
        display: flex;
        gap: 0.25rem;
    }

    .canvas-wrapper:focus[b-xpwtzo4rah] {
        outline: 2px solid var(--color-primary);
        outline-offset: -2px;
    }

    .element-list[b-xpwtzo4rah] {
        max-height: 150px;
        overflow-y: auto;
    }

    .element-item[b-xpwtzo4rah] {
        padding: 0.35rem 0.5rem;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        margin-bottom: 0.25rem;
        font-size: 0.8rem;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
    }

    .element-item span[b-xpwtzo4rah] {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .element-item:hover[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        background: var(--surface-hover);
    }

    .btn-tiny[b-xpwtzo4rah] {
        background: none;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        font-size: 1.1rem;
        padding: 0 0.3rem;
        line-height: 1;
        border-radius: var(--radius-sm);
        transition: all 0.15s;
        flex-shrink: 0;
    }

    .btn-tiny:hover[b-xpwtzo4rah] {
        color: var(--color-danger);
        background: rgba(255, 68, 68, 0.2);
    }

    .btn-tiny.delete[b-xpwtzo4rah] {
        font-weight: bold;
    }

    /* Modal Dialog */
    .modal-overlay[b-xpwtzo4rah] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: var(--z-modal);
    }

    .modal-dialog[b-xpwtzo4rah] {
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        padding: 1.5rem;
        min-width: 350px;
        max-width: 500px;
        box-shadow: var(--shadow-lg);
    }

    .modal-dialog h3[b-xpwtzo4rah] {
        margin: 0 0 1rem 0;
        color: var(--color-primary);
        font-size: 1.1rem;
    }

    .modal-dialog .form-group[b-xpwtzo4rah] {
        margin-bottom: 1rem;
    }

    .modal-dialog .form-group label[b-xpwtzo4rah] {
        display: block;
        margin-bottom: 0.5rem;
        color: var(--text-muted);
        font-size: 0.9rem;
    }

    .modal-dialog .form-control[b-xpwtzo4rah] {
        width: 100%;
        padding: 0.5rem 0.75rem;
        background: var(--surface-hover);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
        color: var(--text-body);
        font-size: var(--font-size-sm);
    }

    .modal-dialog .form-control:focus[b-xpwtzo4rah] {
        outline: none;
        border-color: var(--border-focus);
        box-shadow: 0 0 0 3px var(--ekh-cyan-15);
    }

    .modal-actions[b-xpwtzo4rah] {
        display: flex;
        justify-content: flex-end;
        gap: 0.75rem;
        margin-top: 1.5rem;
    }

    .modal-actions .btn-secondary[b-xpwtzo4rah] {
        background: var(--surface-hover);
        border: 1px solid var(--border-strong);
        color: var(--text-muted);
        padding: 0.5rem 1rem;
        border-radius: var(--radius-sm);
        cursor: pointer;
    }

    .modal-actions .btn-secondary:hover[b-xpwtzo4rah] {
        background: var(--border-default);
        color: var(--text-body);
    }

    .modal-actions .btn-primary[b-xpwtzo4rah] {
        background: var(--color-primary);
        border: none;
        color: var(--surface-hover);
        padding: 0.5rem 1rem;
        border-radius: var(--radius-sm);
        cursor: pointer;
        font-weight: bold;
    }

    .modal-actions .btn-primary:hover[b-xpwtzo4rah] {
        background: var(--color-primary-hover);
    }
    
    /* Bool Symbol Modal */
    .bool-symbol-modal[b-xpwtzo4rah] {
        max-width: 600px;
        width: 90vw;
    }
    
    .modal-subtitle[b-xpwtzo4rah] {
        color: var(--text-muted);
        margin: 0.5rem 0;
        font-size: 0.95rem;
    }
    
    .modal-hint[b-xpwtzo4rah] {
        color: var(--color-primary);
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }
    
    .bool-symbol-grid[b-xpwtzo4rah] {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin: 1rem 0;
    }
    
    .symbol-category h4[b-xpwtzo4rah] {
        color: var(--text-secondary);
        font-size: var(--font-size-xs);
        margin: 0 0 0.5rem 0;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    
    .symbol-options[b-xpwtzo4rah] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .symbol-option[b-xpwtzo4rah] {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.75rem 1rem;
        background: var(--surface-hover);
        border: 2px solid var(--border-default);
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: all 0.2s;
        min-width: 80px;
    }
    
    .symbol-option:hover[b-xpwtzo4rah] {
        background: var(--border-default);
        border-color: var(--border-default);
    }
    
    .symbol-option.selected[b-xpwtzo4rah] {
        background: var(--ekh-cyan-15);
        border-color: var(--color-primary);
    }
    
    .symbol-preview[b-xpwtzo4rah] {
        font-size: 1.5rem;
        margin-bottom: 0.25rem;
    }
    
    .symbol-name[b-xpwtzo4rah] {
        font-size: 0.75rem;
        color: var(--text-muted);
    }
    
    .symbol-option.selected .symbol-name[b-xpwtzo4rah] {
        color: var(--color-primary);
    }
    
    .bool-options[b-xpwtzo4rah] {
        margin: 1rem 0;
        padding: 0.75rem;
        background: var(--surface-hover);
        border-radius: var(--radius);
    }
    
    .checkbox-label[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
        color: var(--text-secondary);
    }
    
    .checkbox-label input[type="checkbox"][b-xpwtzo4rah] {
        width: 18px;
        height: 18px;
        accent-color: var(--color-primary);
    }
    
    /* Channel list bool indicator */
    .channel-item.is-bool[b-xpwtzo4rah] {
        border-left: 3px solid var(--color-primary);
    }
    
    /* Freitext list (Texte tab — 2026-06-01: surfaces placed FreitextList
       items above the composer, parity with how Werte surfaces placed
       Kanäle). Compact rows with an icon, the preview text truncated,
       and the font-size as meta. */
    .freitext-list[b-xpwtzo4rah] {
        list-style: none;
        padding: 0;
        margin: 0 0 0.75rem;
        max-height: 240px;
        overflow-y: auto;
    }

    .freitext-item[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.35rem 0.5rem;
        background: var(--surface-card);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-sm);
        margin-bottom: 0.2rem;
        font-size: 0.8rem;
        color: var(--text-body);
        cursor: pointer;
    }

    .freitext-item:hover[b-xpwtzo4rah] {
        border-color: var(--color-primary);
        background: var(--color-primary-light);
    }

    .freitext-item.is-button[b-xpwtzo4rah] {
        border-left: 3px solid var(--color-primary);
    }

    .freitext-icon[b-xpwtzo4rah] {
        flex-shrink: 0;
        font-size: 0.85rem;
    }

    .freitext-preview[b-xpwtzo4rah] {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--text-body);
    }

    .freitext-meta[b-xpwtzo4rah] {
        flex-shrink: 0;
        font-size: 0.7rem;
        color: var(--text-secondary);
        font-variant-numeric: tabular-nums;
    }

    /* Used-channel styling (2026-06-01: bumped contrast; 2026-08-04 round 2: the lock is
       gone — a used channel stays fully draggable, so it must not read as struck-out /
       unusable). Previous shape (`opacity: 0.55` + `text-secondary`/`text-muted` colors +
       rgba background) compounded into a near-invisible row. After the tier-3 DropList
       harvest landed (`8b3e0ef3`) EVERY channel in a legacy-imported visu shows as
       `is-used`, so the whole list went unreadable. This shape keeps the affordance
       (left-border accent + a subtle tint) but text + key stay at default body contrast,
       and nothing here implies the row can't still be dragged.

       2026-08-05 round 3: the operator asked for the red strikethrough back ("lock means
       'no more usage'; the red cross is the marker, not a lock") and it shipped in
       `6eda9d21`. Adjudicated the SAME DAY, reverted: the strikethrough made the row text
       unreadable ("user can no more read the text"). Final shape, per the operator: a 🔒
       icon (row markup, see the `<li>` above) plus red TEXT — no line-through. Multiple
       usage stays allowed, the row stays `draggable="true"` (see below) and clickable, and
       the badge (`.used-indicator`, "· N×") stays too — it carries the corrected count.
       This is the third flip on this exact rule in one day; don't change it again without
       a fresh operator ruling.

       Contrast note: --color-danger is NOT remapped by the .visu-ill-shell dark-chrome
       block below (see that block's comment — danger/success/warning are intentionally
       left literal so they "pop" against the dark chrome), so this red renders the same
       here as everywhere else in the app. Measured against --editor-chrome-rail (the dark
       sidebar's actual background, #1a1f29) it's ~3.4:1 — under the 4.5:1 AA body-text
       threshold but the row does not rely on colour alone: the 🔒 icon and the "· N×"
       badge already carry the "used" signal, colour is a reinforcing cue, not the only one. */
    .channel-item.is-used[b-xpwtzo4rah] {
        background: var(--surface-sunken);
        border-color: var(--border-default);
        border-left: 3px solid var(--color-primary);
        opacity: 1;
        cursor: pointer;
    }

    .channel-item.is-used .channel-key[b-xpwtzo4rah],
    .channel-item.is-used .channel-name[b-xpwtzo4rah] {
        color: var(--color-danger);
    }
    
    .used-indicator[b-xpwtzo4rah] {
        font-size: 0.7rem;
        flex-shrink: 0;
    }

    .used-indicator-lock[b-xpwtzo4rah] {
        font-size: 0.8rem;
        flex-shrink: 0;
        margin-right: 0.15rem;
    }

    .bool-indicator[b-xpwtzo4rah] {
        color: var(--color-primary);
        font-size: 0.9rem;
        margin-right: 0.25rem;
    }
    
    /* Test Button — secondary action, consistent with Speichern (outline-secondary family) */
    .btn-test[b-xpwtzo4rah] {
        padding: 0.4rem 1rem;
        background: var(--surface-hover);
        color: var(--text-body);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        cursor: pointer;
        font-size: 0.9rem;
        transition: all 0.2s;
    }

    .btn-test:hover[b-xpwtzo4rah] {
        background: var(--border-default);
        color: var(--text-primary);
    }
    
    /* Test Preview Modal */
    .test-modal-overlay[b-xpwtzo4rah] {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.85);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: var(--z-modal);
    }
    
    .test-modal[b-xpwtzo4rah] {
        width: 95%;
        max-width: 1400px;
        height: 90vh;
        background: var(--surface-card);
        border-radius: var(--radius-lg);
        border: 1px solid var(--border-strong);
        display: flex;
        flex-direction: column;
        box-shadow: var(--shadow-lg);
    }
    
    .test-modal-header[b-xpwtzo4rah] {
        display: flex;
        align-items: center;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid var(--border-strong);
        background: var(--surface-page);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }
    
    .test-modal-header h3[b-xpwtzo4rah] {
        flex: 1;
        margin: 0;
        color: var(--surface-card);
        font-size: 1.25rem;
    }
    
    .test-info[b-xpwtzo4rah] {
        margin-right: 1rem;
    }
    
    .loading-text[b-xpwtzo4rah] { color: var(--color-warning); }
    .success-text[b-xpwtzo4rah] { color: var(--color-primary); }
    .error-text[b-xpwtzo4rah] { color: var(--color-danger); }
    
    .btn-close[b-xpwtzo4rah] {
        width: 36px;
        height: 36px;
        background: var(--surface-hover);
        border: none;
        border-radius: 50%;
        color: var(--text-muted);
        font-size: 1.5rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }
    
    .btn-close:hover[b-xpwtzo4rah] {
        background: var(--color-danger);
        color: var(--surface-card);
    }
    
    .test-page-tabs[b-xpwtzo4rah] {
        display: flex;
        gap: 0.25rem;
        padding: 0.5rem 1.5rem;
        background: var(--surface-page);
        border-bottom: 1px solid var(--border-strong);
        overflow-x: auto;
    }
    
    .test-page-tab[b-xpwtzo4rah] {
        padding: 0.5rem 1rem;
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
        color: var(--text-muted);
        font-size: 0.875rem;
        cursor: pointer;
        white-space: nowrap;
        transition: all 0.2s;
    }
    
    .test-page-tab:hover[b-xpwtzo4rah] {
        background: var(--surface-hover);
        color: var(--surface-card);
    }
    
    .test-page-tab.active[b-xpwtzo4rah] {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--surface-card);
    }
    
    .test-modal-body[b-xpwtzo4rah] {
        flex: 1;
        display: flex;
        overflow: hidden;
    }
    
    .test-canvas-container[b-xpwtzo4rah] {
        flex: 1;
        /* Deliberate device-display constant: the live visu renders on a black controller screen,
           so the preview backdrop is black in both themes (not semantic chrome). */
        background: #000;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: auto;
        padding: 1rem;
    }
    
    .test-canvas-container canvas[b-xpwtzo4rah] {
        background: var(--surface-card);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }
    
    .test-sidebar[b-xpwtzo4rah] {
        width: 280px;
        background: var(--surface-page);
        border-left: 1px solid var(--border-strong);
        display: flex;
        flex-direction: column;
        padding: 1rem;
    }
    
    .test-sidebar h4[b-xpwtzo4rah] {
        margin: 0 0 1rem;
        color: var(--color-primary);
        font-size: 0.95rem;
    }
    
    .test-values-list[b-xpwtzo4rah] {
        flex: 1;
        overflow-y: auto;
    }
    
    .test-value-item[b-xpwtzo4rah] {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem;
        margin-bottom: 0.25rem;
        background: var(--surface-card);
        border-radius: var(--radius-sm);
        font-size: 0.85rem;
    }
    
    .value-channel[b-xpwtzo4rah] {
        color: var(--text-muted);
        font-family: monospace;
    }
    
    .value-data[b-xpwtzo4rah] {
        color: var(--color-primary);
        font-weight: bold;
        font-family: monospace;
    }
    
    .test-actions[b-xpwtzo4rah] {
        padding-top: 1rem;
        border-top: 1px solid var(--border-strong);
        margin-top: 1rem;
    }

/* ── Smart-Farbe (temperature pipe colouring) modal ── */
.smart-color-modal[b-xpwtzo4rah] {
    max-width: 640px;
    width: 90vw;
}

.smart-color-modal .modal-empty[b-xpwtzo4rah] {
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: var(--space-4) 0;
}

.smart-color-list[b-xpwtzo4rah] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 55vh;
    overflow-y: auto;
    margin: var(--space-3) 0;
}

.smart-color-row[b-xpwtzo4rah] {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

.smart-color-row.is-on[b-xpwtzo4rah] {
    border-color: var(--color-primary);
    background: var(--surface-sunken);
}

.scr-toggle[b-xpwtzo4rah] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

.scr-meta[b-xpwtzo4rah] {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 400;
}

.scr-body[b-xpwtzo4rah] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.scr-field[b-xpwtzo4rah] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.scr-field-sm[b-xpwtzo4rah] {
    max-width: 8rem;
}

/* Smart-Farbe live preview */
.scr-live-bar[b-xpwtzo4rah] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.scr-live-warn[b-xpwtzo4rah] {
    color: var(--color-warning);
}

.scr-ramp[b-xpwtzo4rah] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-default);
}

.scr-ramp-title[b-xpwtzo4rah] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-right: var(--space-2);
}

.scr-swatchpick[b-xpwtzo4rah] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.scr-swatchpick input[type="color"][b-xpwtzo4rah] {
    width: 1.8rem;
    height: 1.4rem;
    padding: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
}

.scr-swatchpick.is-off[b-xpwtzo4rah] {
    opacity: 0.7;
}

.scr-midtemp[b-xpwtzo4rah] {
    width: 3.5rem;
    padding: var(--space-1) var(--space-2);
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.85rem;
}

.scr-preview[b-xpwtzo4rah] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.scr-preview-swatch[b-xpwtzo4rah] {
    height: 1.4rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-default);
}

.scr-preview-legend[b-xpwtzo4rah] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.scr-preview-stop[b-xpwtzo4rah] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.scr-dot[b-xpwtzo4rah] {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    border: 1px solid var(--border-default);
    display: inline-block;
}

.scr-preview-hint[b-xpwtzo4rah] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.scr-field select[b-xpwtzo4rah],
.scr-field input[b-xpwtzo4rah] {
    padding: var(--space-2) var(--space-3);
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.scr-field select:focus[b-xpwtzo4rah],
.scr-field input:focus[b-xpwtzo4rah] {
    outline: none;
    border-color: var(--color-primary);
}

/* Rohr-Autoerkennung: the review panel shown after detection, until the operator
   accepts or discards the suggested pipes (ADR-0098). */
.pipe-detect-result[b-xpwtzo4rah] {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--surface-sunken);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADR-0108 Phase 2 — Illustrator DARK SHELL chrome (production editor).
   Every colour here is an --editor-chrome-* token. Element / ramp / colour-input
   values stay LITERAL (data-encoding carve-out) and are untouched. All rules are
   scoped under .visu-ill-shell so nothing leaks to the selection screen / modals.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The EditorLayout is full-screen (no app top-bar) → the shell fills the viewport.
   ⚠ MUST re-declare the grid here: the pre-Phase-2 rule `.visu-editor { display:flex }`
   is scoped (→ `.visu-editor[b-xxx]`, specificity 0,2,0) and would otherwise BEAT the
   shared shell's `.visu-ill-shell { display:grid }` (0,1,0), collapsing the whole shell
   into a flex column. Declaring the grid on the two-class selector (0,2,0 + scope) wins. */
.visu-editor.visu-ill-shell[b-xpwtzo4rah] {
    display: grid;
    grid-template-columns: auto 1fr var(--vis-dock-width, 300px);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "topbar topbar topbar"
        "rail   canvas dock"
        "status status status";
    height: 100vh;
    min-height: 32rem;
    overflow: hidden;
    --topbar-height: 0px;
    --vis-dock-width: 300px;
    background: var(--editor-chrome-bg);
    color: var(--editor-chrome-text);

    /* ── Complete the dark chrome: RE-ALIAS the light semantic tokens to the
          --editor-chrome-* group, scoped to this editor only. CSS custom properties
          INHERIT through the DOM irrespective of Blazor scoped-CSS isolation, so this
          one block darkens the inline toolbox AND the VisuPropertyPanel *child*
          component (whose own scoped rules the parent selector cannot reach) — no
          per-element overrides, no literals. The brand --color-primary action colour
          and the data/status colours (danger/success/warning) are intentionally NOT
          remapped: they must stay recognisable and pop against the dark chrome. */
    --surface-card: var(--editor-chrome-panel);
    --surface-sunken: var(--editor-chrome-rail);
    --surface-workspace: var(--editor-chrome-bg);
    --surface-page: var(--editor-chrome-bg);
    --surface-hover: var(--editor-chrome-raised);
    --surface-overlay: var(--editor-chrome-panel);
    --surface-elevated: var(--editor-chrome-raised);

    --text-body: var(--editor-chrome-text);
    --text-primary: var(--editor-chrome-text);
    --text-secondary: var(--editor-chrome-text-muted);
    --text-muted: var(--editor-chrome-text-muted);
    --text-link: var(--editor-chrome-accent);

    --border-strong: var(--editor-chrome-border-strong);
    --border-default: var(--editor-chrome-border);
    --border-subtle: var(--editor-chrome-border);
    --border-focus: var(--editor-chrome-accent);

    /* Light primary tints would read as pale-blue patches on dark → dark surfaces. */
    --color-primary-10: var(--editor-chrome-active);
    --color-primary-light: var(--editor-chrome-active);
}

/* ── Left region: slim tool rail stacked ABOVE the tabbed toolbox in the rail cell ── */
.visu-ill-shell .ve-left[b-xpwtzo4rah] {
    grid-area: rail;
    display: flex;
    flex-direction: column;   /* rail strip on top, toolbox fills below (was default row → side-by-side) */
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--editor-chrome-rail);
}
/* Rail = a slim HORIZONTAL strip of tool icons atop the toolbox (override the shared
   vertical rail so it doesn't waste the 260 px column height). */
.visu-ill-shell .ve-left .vis-rail[b-xpwtzo4rah] {
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid var(--editor-chrome-border);
    overflow: visible;
}
.visu-ill-shell .ve-left .vis-rail-sep[b-xpwtzo4rah] { display: none; }
.visu-ill-shell .ve-left .visu-toolbox[b-xpwtzo4rah] {
    flex: 1 1 auto;
    min-height: 0;
    border-right: none;
    box-shadow: none;
}

/* ── Centre canvas column (grid-area: canvas) — a flex column: toolbar on top,
      the ruler/scroll canvas filling the rest. ── */
.visu-ill-shell .visu-canvas-area.ve-canvas-col[b-xpwtzo4rah] {
    grid-area: canvas;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--editor-chrome-bg);
}
.visu-ill-shell .canvas-toolbar[b-xpwtzo4rah] { flex: 0 0 auto; }
.visu-ill-shell .vis-canvas[b-xpwtzo4rah] { flex: 1 1 auto; min-width: 0; min-height: 0; }
.visu-ill-shell .vis-canvas-scroll[b-xpwtzo4rah] { display: flex; overflow: hidden; }
.visu-ill-shell .canvas-wrapper[b-xpwtzo4rah] {
    flex: 1;
    overflow: auto;
    min-width: 0;
    min-height: 0;
    background: var(--editor-chrome-bg);
}
.visu-ill-shell .canvas-wrapper:focus[b-xpwtzo4rah] { outline: 2px solid var(--editor-chrome-accent); outline-offset: -2px; }
.visu-ill-shell .vis-ruler-h canvas[b-xpwtzo4rah],
.visu-ill-shell .vis-ruler-v canvas[b-xpwtzo4rah] { display: block; width: 100%; height: 100%; }

/* ── Top bar (keep the header's left/centre/right split) ── */
.visu-ill-shell .visu-header[b-xpwtzo4rah] {
    background: var(--editor-chrome-rail);
    border-bottom: 1px solid var(--editor-chrome-border);
    height: auto;
    box-shadow: none;
}
.visu-ill-shell .header-left h2[b-xpwtzo4rah] { color: var(--editor-chrome-text); }
.visu-ill-shell .projekt-nr[b-xpwtzo4rah] { color: var(--editor-chrome-text-muted); }
.visu-ill-shell .btn-back-small[b-xpwtzo4rah] { border-color: var(--editor-chrome-border); color: var(--editor-chrome-text-muted); }
.visu-ill-shell .btn-back-small:hover[b-xpwtzo4rah] { border-color: var(--editor-chrome-accent); color: var(--editor-chrome-text); }
.visu-ill-shell .btn-secondary[b-xpwtzo4rah] {
    background: var(--editor-chrome-raised);
    color: var(--editor-chrome-text);
    border: 1px solid var(--editor-chrome-border);
}
.visu-ill-shell .btn-secondary:hover[b-xpwtzo4rah] { background: var(--editor-chrome-active); border-color: var(--editor-chrome-border-strong); }

/* ── Left toolbox (dark panel) ── */
.visu-ill-shell .visu-toolbox[b-xpwtzo4rah] {
    background: var(--editor-chrome-panel);
    border-right: 1px solid var(--editor-chrome-border);
    box-shadow: none;
    color: var(--editor-chrome-text);
}
.visu-ill-shell .toolbox-tabs[b-xpwtzo4rah] { background: var(--editor-chrome-rail); border-bottom-color: var(--editor-chrome-border); }
.visu-ill-shell .tab-btn[b-xpwtzo4rah] { color: var(--editor-chrome-text-muted); }
.visu-ill-shell .tab-btn:hover[b-xpwtzo4rah] { background: var(--editor-chrome-raised); color: var(--editor-chrome-text); }
.visu-ill-shell .tab-btn.active[b-xpwtzo4rah] {
    background: var(--editor-chrome-active);
    color: var(--editor-chrome-text);
    box-shadow: inset 0 -2px 0 var(--editor-chrome-accent);
}
.visu-ill-shell .script-section[b-xpwtzo4rah] { border-bottom-color: var(--editor-chrome-border); }
.visu-ill-shell .tool-section h4[b-xpwtzo4rah] { color: var(--editor-chrome-text-muted); }
.visu-ill-shell .hint[b-xpwtzo4rah] { color: var(--editor-chrome-text-muted); }
.visu-ill-shell .empty-state[b-xpwtzo4rah] { color: var(--editor-chrome-text-muted); }
.visu-ill-shell .channel-count[b-xpwtzo4rah] { color: var(--editor-chrome-text-muted); }
.visu-ill-shell .search-input[b-xpwtzo4rah],
.visu-ill-shell .text-input[b-xpwtzo4rah] {
    background: var(--editor-chrome-bg);
    border: 1px solid var(--editor-chrome-border);
    color: var(--editor-chrome-text);
}
.visu-ill-shell .search-input:focus[b-xpwtzo4rah],
.visu-ill-shell .text-input:focus[b-xpwtzo4rah] { border-color: var(--editor-chrome-accent); outline: none; }
.visu-ill-shell .channel-item[b-xpwtzo4rah] {
    background: var(--editor-chrome-raised);
    border-color: var(--editor-chrome-border);
    color: var(--editor-chrome-text);
}
.visu-ill-shell .channel-item:hover[b-xpwtzo4rah] { background: var(--editor-chrome-active); }
.visu-ill-shell .channel-key[b-xpwtzo4rah] { color: var(--editor-chrome-text-muted); }
.visu-ill-shell .freitext-item[b-xpwtzo4rah] {
    background: var(--editor-chrome-raised);
    border-color: var(--editor-chrome-border);
    color: var(--editor-chrome-text);
}
.visu-ill-shell .freitext-item:hover[b-xpwtzo4rah] { background: var(--editor-chrome-active); }
.visu-ill-shell .upload-btn[b-xpwtzo4rah],
.visu-ill-shell .upload-label[b-xpwtzo4rah] {
    background: var(--editor-chrome-raised);
    border-color: var(--editor-chrome-border);
    color: var(--editor-chrome-text);
}
.visu-ill-shell .upload-btn:hover[b-xpwtzo4rah],
.visu-ill-shell .upload-label:hover[b-xpwtzo4rah] { background: var(--editor-chrome-active); }
/* Ausrichtung/Typ pills — dark chrome; keep the ratchet's format-btn-text variant intact */
.visu-ill-shell .format-btn[b-xpwtzo4rah] {
    background: var(--editor-chrome-raised);
    border-color: var(--editor-chrome-border);
    color: var(--editor-chrome-text-muted);
}
.visu-ill-shell .format-btn:hover[b-xpwtzo4rah] { background: var(--editor-chrome-active); color: var(--editor-chrome-text); }
.visu-ill-shell .format-btn.active[b-xpwtzo4rah] { background: var(--editor-chrome-active); border-color: var(--editor-chrome-accent); color: var(--editor-chrome-text); }
.visu-ill-shell .component-palette-item[b-xpwtzo4rah] {
    background: var(--editor-chrome-raised);
    border-color: var(--editor-chrome-border);
    color: var(--editor-chrome-text);
}
.visu-ill-shell .component-palette-item:hover[b-xpwtzo4rah] { background: var(--editor-chrome-active); }
.visu-ill-shell .component-palette-item.active[b-xpwtzo4rah] { border-color: var(--editor-chrome-accent); }

/* ── Canvas toolbar (dark) ── */
.visu-ill-shell .canvas-toolbar[b-xpwtzo4rah] {
    background: var(--editor-chrome-rail);
    border-bottom: 1px solid var(--editor-chrome-border);
    box-shadow: none;
}
.visu-ill-shell .toolbar-group[b-xpwtzo4rah] { border-right-color: var(--editor-chrome-border); }
.visu-ill-shell .btn-icon[b-xpwtzo4rah] { color: var(--editor-chrome-text); }
.visu-ill-shell .btn-icon:hover[b-xpwtzo4rah] { background: var(--editor-chrome-active); }
.visu-ill-shell .mode-indicator[b-xpwtzo4rah] { color: var(--editor-chrome-text-muted); }
.visu-ill-shell .element-count[b-xpwtzo4rah] { color: var(--editor-chrome-text-muted); }
.visu-ill-shell .design-size-label[b-xpwtzo4rah] { color: var(--editor-chrome-text-muted); }
.visu-ill-shell .canvas-size-controls label[b-xpwtzo4rah] { color: var(--editor-chrome-text-muted); }
.visu-ill-shell .toolbar-divider[b-xpwtzo4rah] { color: var(--editor-chrome-border); }
.visu-ill-shell .toolbar-select[b-xpwtzo4rah],
.visu-ill-shell .canvas-size-controls input[type="number"][b-xpwtzo4rah] {
    background: var(--editor-chrome-bg);
    border: 1px solid var(--editor-chrome-border);
    color: var(--editor-chrome-text);
    color-scheme: dark;
}
.visu-ill-shell .select-toggle[b-xpwtzo4rah] {
    background: var(--editor-chrome-raised);
    border-color: var(--editor-chrome-border);
    color: var(--editor-chrome-text);
}
.visu-ill-shell .select-toggle.active[b-xpwtzo4rah] { border-color: var(--editor-chrome-accent); }
.visu-ill-shell .mode-indicator.tool-active[b-xpwtzo4rah] { color: var(--editor-chrome-accent); }

/* ── Sidebar collapse handles (dark) ── */
.visu-ill-shell .sidebar-edge-toggle[b-xpwtzo4rah] {
    background: var(--editor-chrome-raised);
    border-color: var(--editor-chrome-border);
    color: var(--editor-chrome-text-muted);
    box-shadow: none;
}
.visu-ill-shell .sidebar-edge-toggle:hover[b-xpwtzo4rah] { background: var(--editor-chrome-active); color: var(--editor-chrome-text); border-color: var(--editor-chrome-accent); }

/* ── Dock property panel: fill the panel body ── */
.visu-ill-shell .vis-panel-body-flush[b-xpwtzo4rah] { padding: 0; }
.visu-ill-shell .ve-layers[b-xpwtzo4rah] { min-height: 2rem; font-size: var(--font-size-xs); }
.visu-ill-shell .ve-layers:empty[b-xpwtzo4rah]::after {
    content: "Keine Elemente auf dieser Seite.";
    color: var(--editor-chrome-text-muted);
    display: block;
    padding: var(--space-1) 0;
}

/* ── Status bar: host the page navigation + cursor + zoom ── */
.visu-ill-shell .vis-status .page-navigation[b-xpwtzo4rah] {
    background: transparent;
    border: none;
    padding: 0;
    min-height: 0;
    flex: 0 1 auto;
    min-width: 0;
}
.visu-ill-shell .vis-status .page-tabs[b-xpwtzo4rah] { flex: 0 1 auto; }
.visu-ill-shell .vis-status .page-tab[b-xpwtzo4rah] { color: var(--editor-chrome-text-muted); }
.visu-ill-shell .vis-status .page-tab.active[b-xpwtzo4rah] { color: var(--editor-chrome-text); }
.visu-ill-shell .vis-status .btn-icon[b-xpwtzo4rah] { color: var(--editor-chrome-text-muted); }
.visu-ill-shell .vis-status .coords[b-xpwtzo4rah] { color: var(--editor-chrome-text); font-variant-numeric: tabular-nums; }

/* Right-panel toggle fix (2026-08-19): collapsing used to hide only the panel CONTENT
   while the dock column kept its full width — the "›" button looked broken. Collapse
   the whole column; the edge toggle stays reachable at the canvas edge. */
.visu-ill-shell .vis-dock.vis-dock-collapsed[b-xpwtzo4rah] { display: none; }
/* The dock's grid track is FIXED (var(--vis-dock-width, 300px)) — display:none on the
   dock empties the column but the track keeps its width (wbeditorprod.png: cleared,
   not hidden). Zeroing the variable on the shell collapses the track itself. */
.visu-editor.visu-ill-shell.vis-dock-collapsed[b-xpwtzo4rah] { --vis-dock-width: 0px; }
/* /Components/Pages/Heizungen/VisualisierungTab.razor.rz.scp.css */
.visu-loading[b-evr2bwesir] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: var(--text-secondary);
    }
    
    .visu-loading .spinner[b-evr2bwesir] {
        width: 40px;
        height: 40px;
        border: 3px solid var(--border-strong);
        border-top-color: var(--color-primary);
        border-radius: 50%;
        animation: spin-b-evr2bwesir 1s linear infinite;
    }
    
    .tab-placeholder[b-evr2bwesir] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 2rem;
        text-align: center;
        color: var(--text-body);
    }

    .placeholder-icon[b-evr2bwesir] {
        font-size: 4rem;
        margin-bottom: 1rem;
    }

    .tab-placeholder h2[b-evr2bwesir] {
        color: var(--color-primary);
        margin: 0 0 0.5rem 0;
    }

    .tab-placeholder p[b-evr2bwesir] {
        color: var(--text-secondary);
        margin: 0 0 2rem 0;
    }

    .placeholder-info[b-evr2bwesir] {
        background: var(--surface-sunken);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        padding: 1rem 1.5rem;
        margin-bottom: 1.5rem;
    }

    .info-item[b-evr2bwesir] {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--border-strong);
    }

    .info-item:last-child[b-evr2bwesir] { border-bottom: none; }
    .info-label[b-evr2bwesir] { color: var(--text-secondary); }
    .info-value[b-evr2bwesir] { color: var(--color-primary); font-family: monospace; }

    .status-badge[b-evr2bwesir] {
        background: rgba(245, 158, 11, 0.2);
        color: var(--color-warning);
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-size: 0.85rem;
    }
    
    .visu-view[b-evr2bwesir] {
        display: flex;
        flex-direction: column;
        height: 100%;
        background: var(--surface-card);
        /* Anchor for .visu-data-overlay (absolute, inset:0) so it
           covers exactly this pane — important in split-mode where
           .visu-view sits inside .sbs-pane-right and must NOT bleed
           into the Fernbedienung pane on the left. */
        position: relative;
    }

    /* "Daten werden geladen…" — covers .visu-view from the moment the
       JS-init phase finishes until the first VisuDataPacket from
       VisuPollingService arrives. Without it the SVG canvas would render
       with default/empty values during the first ~1-3 s. Mirrors the
       pattern in WagoFernbedienungContent.razor.css (translucent backdrop
       + centred card). z-index sits below modals (which use ≥1000) so a
       parent loading modal still wins if both are mounted briefly. */
    .visu-data-overlay[b-evr2bwesir] {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(2px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 50;
        pointer-events: auto;
    }

    .visu-data-overlay-card[b-evr2bwesir] {
        background: var(--surface-card);
        color: var(--text-body);
        padding: 1.25rem 1.5rem;
        border-radius: 10px;
        text-align: center;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
        max-width: 280px;
    }

    .visu-data-overlay-card .spinner[b-evr2bwesir] {
        /* Same look as .visu-loading .spinner (top of file) — re-stated
           here because that selector is scoped to .visu-loading. The
           "spin" keyframe is shared (defined ~line 471). */
        width: 40px;
        height: 40px;
        border: 3px solid var(--border-strong);
        border-top-color: var(--color-primary);
        border-radius: 50%;
        animation: spin-b-evr2bwesir 1s linear infinite;
        margin: 0 auto 0.75rem;
    }

    .visu-data-overlay-title[b-evr2bwesir] {
        font-weight: 600;
        margin: 0 0 0.25rem 0;
    }

    .visu-data-overlay-sub[b-evr2bwesir] {
        font-size: 0.85rem;
        color: var(--text-secondary);
        margin: 0;
    }

    /* No-data error state (watchdog timeout / hard connect failure). */
    .visu-data-overlay-icon[b-evr2bwesir] {
        font-size: 2rem;
        line-height: 1;
        margin-bottom: 0.5rem;
    }

    .visu-data-overlay-actions[b-evr2bwesir] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 1rem;
    }

    .visu-data-overlay-actions .btn[b-evr2bwesir] {
        width: 100%;
    }

    .visu-canvas-container[b-evr2bwesir] {
        flex: 1;
        display: flex;
        flex-direction: row;
        overflow: hidden;
    }
    
    .canvas-area[b-evr2bwesir] {
        flex: 1;
        display: flex;
        overflow: auto;
        padding: 0;
        background: var(--surface-card);
        position: relative;
        /* No transition - prevents blinking during rapid redraws */
    }
    
    .canvas-area.auto-fit[b-evr2bwesir] {
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }
    
    .canvas-wrapper[b-evr2bwesir] {
        position: relative;
        background: var(--surface-card); /* Same as canvas-area */
        overflow: visible;
        /* No transition - prevents blinking during rapid redraws */
    }
    
    #visuCanvas[b-evr2bwesir] {
        display: block;
        cursor: default;
        /* Stack above #visuBitmapImg (PiMode legacy surface); no effect on desktop. */
        position: relative;
        z-index: 1;
        /* No transition - prevents blinking during animation loop */
        /* Explicitly prevent CSS scaling - size controlled by canvas.width/height attributes only */
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        flex-shrink: 0;
    }

    /* PiMode legacy surface: the background bitmap as a plain <img> UNDER the (single,
       transparent) element canvas — the browser composites it, JS never blits it. Mirrors
       the legacy VisuView.aspx coveredImage/coveringCanvas stack. Its display size + auto-fit
       transform are set by the viewer JS. */
    #visuBitmapImg[b-evr2bwesir] {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        pointer-events: none;
        max-width: none;
        max-height: none;
    }

    /* Dynamic layer: transparent overlay for the live pipes + value boxes, stacked exactly
       over #visuCanvas. pointer-events:none so clicks pass through to the static canvas's
       hit-testing. Its size + CSS transform are mirrored from #visuCanvas by the viewer JS. */
    #visuDynamicCanvas[b-evr2bwesir] {
        position: absolute;
        top: 0;
        left: 0;
        /* MUST stack above #visuCanvas (z-index: 1): the static canvas is opaque, so without
           an explicit higher z-index it covers the overlay and every value box/pipe/symbol
           disappears (the 2026-07-12 desktop regression). Stacking: img 0 < static 1 < overlay 2. */
        z-index: 2;
        display: block;
        pointer-events: none;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        flex-shrink: 0;
    }
    
    /* Recording and Playback Controls */
    .recording-control[b-evr2bwesir] {
        position: absolute;
        top: 8px;
        left: 8px;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 4px 8px;
        background: rgba(0, 0, 0, 0.7);
        border-radius: var(--radius-sm);
        z-index: 15;
    }
    
    .recording-control button[b-evr2bwesir],
    .recording-control .btn-load-file[b-evr2bwesir] {
        background: transparent;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: var(--radius-sm);
        padding: 4px 8px;
        cursor: pointer;
        font-size: 0.85rem;
        color: var(--text-primary);
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    
    .recording-control button:hover[b-evr2bwesir],
    .recording-control .btn-load-file:hover[b-evr2bwesir] {
        background: rgba(0, 0, 0, 0.08);
        border-color: rgba(0, 0, 0, 0.25);
    }
    
    .btn-record.recording[b-evr2bwesir] {
        background: rgba(255, 0, 0, 0.3);
        border-color: var(--color-danger);
        animation: recording-pulse-b-evr2bwesir 1s infinite;
    }
    
    @keyframes recording-pulse-b-evr2bwesir {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.6; }
    }
    
    .autofit-control[b-evr2bwesir] {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 15;
    }
    
    .btn-autofit[b-evr2bwesir] {
        background: rgba(0, 0, 0, 0.7);
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: var(--radius-sm);
        padding: 4px 10px;
        cursor: pointer;
        font-size: 1.1rem;
        color: var(--text-primary);
        transition: all 0.2s;
        line-height: 1;
    }
    
    .btn-autofit:hover[b-evr2bwesir] {
        background: rgba(0, 0, 0, 0.08);
        border-color: rgba(0, 0, 0, 0.25);
    }
    
    .btn-autofit.active[b-evr2bwesir] {
        border-color: #2E86AB;
        color: #2E86AB;
    }
    
    .btn-stop-playback[b-evr2bwesir] {
        background: rgba(0, 255, 136, 0.2) !important;
        border-color: var(--color-primary) !important;
    }
    
    .btn-speed[b-evr2bwesir] {
        min-width: 40px;
        font-family: 'Consolas', 'Monaco', monospace;
        font-size: 0.7rem !important;
    }
    
    .playback-time[b-evr2bwesir] {
        color: var(--text-muted);
        font-size: 0.7rem;
        font-family: 'Consolas', 'Monaco', monospace;
        margin-left: 4px;
    }
    
    /* Playback Timeline */
    .playback-timeline[b-evr2bwesir] {
        position: absolute;
        top: 50px;
        left: 8px;
        right: 8px;
        padding: 8px 12px;
        background: rgba(0, 0, 0, 0.7);
        border-radius: var(--radius-sm);
        z-index: 15;
    }
    
    .timeline-slider[b-evr2bwesir] {
        width: 100%;
        height: 6px;
        -webkit-appearance: none;
        appearance: none;
        background: var(--text-primary);
        border-radius: var(--radius-xs);
        outline: none;
        cursor: pointer;
    }
    
    .timeline-slider[b-evr2bwesir]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 14px;
        height: 14px;
        background: var(--color-primary);
        border-radius: 50%;
        cursor: pointer;
    }
    
    .timeline-slider[b-evr2bwesir]::-moz-range-thumb {
        width: 14px;
        height: 14px;
        background: var(--color-primary);
        border-radius: 50%;
        cursor: pointer;
        border: none;
    }
    
    .timeline-labels[b-evr2bwesir] {
        display: flex;
        justify-content: space-between;
        margin-top: 4px;
        font-size: 0.65rem;
        color: var(--text-secondary);
        font-family: 'Consolas', 'Monaco', monospace;
    }
    
    .update-timestamp[b-evr2bwesir] {
        position: absolute;
        bottom: 8px;
        right: 8px;
        padding: 4px 8px;
        background: rgba(0, 0, 0, 0.6);
        color: var(--text-primary);
        font-size: 0.75rem;
        font-family: 'Consolas', 'Monaco', monospace;
        border-radius: var(--radius-sm);
        pointer-events: none;
        z-index: 10;
    }
    
    .refresh-control[b-evr2bwesir] {
        position: absolute;
        bottom: 8px;
        left: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 8px;
        background: rgba(0, 0, 0, 0.6);
        border-radius: var(--radius-sm);
        z-index: 10;
    }
    
    .auto-refresh-toggle[b-evr2bwesir] {
        display: flex;
        align-items: center;
        gap: 4px;
        color: var(--text-primary);
        font-size: 0.75rem;
        cursor: pointer;
    }
    
    .auto-refresh-toggle input[type="checkbox"][b-evr2bwesir] {
        width: 14px;
        height: 14px;
        cursor: pointer;
        accent-color: var(--color-primary);
    }
    
    .btn-manual-refresh[b-evr2bwesir] {
        background: transparent;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: var(--radius-sm);
        padding: 2px 6px;
        cursor: pointer;
        font-size: 0.85rem;
        transition: all 0.2s;
    }
    
    .btn-manual-refresh:hover[b-evr2bwesir] {
        background: rgba(0, 0, 0, 0.08);
        border-color: rgba(0, 0, 0, 0.25);
    }
    
    .refresh-info[b-evr2bwesir] {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.7rem;
        font-family: 'Consolas', 'Monaco', monospace;
    }
    
    .projekt-nr[b-evr2bwesir] {
        color: var(--color-primary);
        font-weight: bold;
        padding: 2px 6px;
        background: rgba(0, 255, 136, 0.15);
        border-radius: var(--radius-xs);
    }
    
    .interval-badge[b-evr2bwesir] {
        color: var(--text-muted);
        padding: 2px 6px;
        background: rgba(0, 0, 0, 0.08);
        border-radius: var(--radius-xs);
    }
    
    .update-count[b-evr2bwesir] {
        color: var(--text-secondary);
        padding: 2px 6px;
        background: rgba(0, 0, 0, 0.03);
        border-radius: var(--radius-xs);
    }
    
    .recording-badge[b-evr2bwesir] {
        color: var(--color-danger);
        padding: 2px 6px;
        background: rgba(255, 68, 68, 0.2);
        border-radius: var(--radius-xs);
        animation: recording-pulse-b-evr2bwesir 1s infinite;
    }
    
    .playback-info[b-evr2bwesir] {
        background: rgba(0, 100, 200, 0.6);
    }
    
    .playback-badge[b-evr2bwesir] {
        color: var(--text-primary);
        font-weight: bold;
        padding: 2px 6px;
        background: rgba(0, 150, 255, 0.3);
        border-radius: var(--radius-xs);
    }
    
    .playback-frame[b-evr2bwesir] {
        color: var(--text-muted);
        padding: 2px 6px;
    }
    
    /* Responsive styles */
    @media (max-width: 768px) {
        .refresh-info[b-evr2bwesir] {
            gap: 4px;
        }
        
        .interval-badge[b-evr2bwesir],
        .update-count[b-evr2bwesir] {
            font-size: 0.6rem;
            padding: 1px 4px;
        }
    }
    
    @media (max-width: 480px) {
        .update-timestamp[b-evr2bwesir] {
            font-size: 0.65rem;
            padding: 2px 6px;
        }
        
        .refresh-control[b-evr2bwesir] {
            font-size: 0.65rem;
            padding: 2px 6px;
            gap: 4px;
        }
        
        .refresh-info[b-evr2bwesir] {
            gap: 2px;
        }
        
        .interval-badge[b-evr2bwesir] {
            display: none;
        }
        
        .update-count[b-evr2bwesir] {
            display: none;
        }
        
        .recording-badge[b-evr2bwesir] {
            padding: 1px 3px;
        }
    }
    
    @keyframes spin-b-evr2bwesir {
        to { transform: rotate(360deg); }
    }
    
    /* Störung Modal List */
    .stoerung-modal.stoerung-modal[b-evr2bwesir] {
        max-width: min(500px, 90vw);
    }
    
    .stoerung-list[b-evr2bwesir] {
        display: flex;
        flex-direction: column;
        gap: clamp(0.3rem, 0.5vw, 0.5rem);
    }
    
    .stoerung-list-item[b-evr2bwesir] {
        display: flex;
        gap: clamp(0.5rem, 0.8vw, 0.75rem);
        padding: clamp(0.5rem, 0.8vw, 0.75rem);
        background: var(--border-strong);
        border-radius: var(--radius-sm);
        border-left: 3px solid var(--color-danger);
    }
    
    .stoerung-nr[b-evr2bwesir] {
        font-weight: bold;
        color: var(--color-danger);
        min-width: 30px;
    }
    
    .stoerung-text[b-evr2bwesir] {
        color: var(--text-body);
    }
    
    /* ═══════════════════════════════════════════════════════════════════════
       ZÄHLER MODAL STYLES
       ═══════════════════════════════════════════════════════════════════════ */
    
    .zaehler-modal.zaehler-modal[b-evr2bwesir] {
        max-width: min(900px, 95vw);
        max-height: 90vh;
        width: 95%;
    }
    
    .zaehler-tabs[b-evr2bwesir] {
        display: flex;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        background: rgba(0, 0, 0, 0.2);
        flex-shrink: 0;
    }
    
    .zaehler-tab[b-evr2bwesir] {
        flex: 1;
        padding: clamp(0.4rem, 0.8vw, 0.6rem) clamp(0.6rem, 1vw, 1rem);
        background: transparent;
        border: none;
        color: var(--text-secondary);
        font-size: clamp(0.8rem, 1.2vw, 0.9rem);
        cursor: pointer;
        transition: all 0.2s;
        border-bottom: 2px solid transparent;
    }
    
    .zaehler-tab:hover[b-evr2bwesir] {
        color: var(--text-secondary);
        background: rgba(0,0,0,0.02);
    }
    
    .zaehler-tab.active[b-evr2bwesir] {
        color: var(--color-primary);
        border-bottom-color: var(--color-primary);
        background: rgba(30, 148, 188, 0.05);
    }
    
    .zaehler-body[b-evr2bwesir] {
        padding: clamp(0.6rem, 1vw, 1rem);
        max-height: 70vh;
        overflow-y: auto;
    }
    
    .zaehler-loading[b-evr2bwesir] {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: clamp(1rem, 2vw, 2rem);
        color: var(--text-secondary);
        gap: 0.75rem;
    }
    
    .zaehler-loading .spinner[b-evr2bwesir] {
        width: clamp(24px, 2.5vw, 30px);
        height: clamp(24px, 2.5vw, 30px);
        border: 3px solid rgba(30, 148, 188, 0.2);
        border-top-color: var(--color-primary);
        border-radius: 50%;
        animation: spin-b-evr2bwesir 0.8s linear infinite;
    }
    
    .zaehler-pre[b-evr2bwesir] {
        /* Opaque surface (was --surface-hover, ~6% alpha): in OS dark mode the faceplate's
           hard-coded #2d2d2d background bled through behind the dark text → unreadable. An
           opaque light box keeps the counter values legible regardless of the modal theme. */
        background: var(--surface-sunken);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-sm);
        padding: clamp(0.5rem, 0.8vw, 0.75rem);
        font-family: 'Consolas', 'Monaco', monospace;
        font-size: clamp(0.75rem, 1.1vw, 1.05rem);
        color: var(--text-primary);
        white-space: pre;
        overflow-x: auto;
        margin: 0;
        line-height: 1.6;
    }

    /* Dark mode: match the faceplate's dark palette (faceplate.css) so the block is a dark box
       with light text instead of a glary white box inside the dark modal. */
    @media (prefers-color-scheme: dark) {
        .zaehler-pre[b-evr2bwesir] {
            background: #252525;
            border-color: #444;
            color: #e0e0e0;
        }
    }
    
    .zaehler-archiv[b-evr2bwesir] {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .zaehler-date-picker[b-evr2bwesir] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.5rem 0;
    }
    
    .zaehler-date-picker label[b-evr2bwesir] {
        color: var(--text-muted);
        font-size: clamp(0.85rem, 1.1vw, 1.05rem);
        white-space: nowrap;
    }
    
    .zaehler-date-picker input[type="date"][b-evr2bwesir] {
        background: var(--surface-card);
        border: 1px solid var(--text-muted);
        border-radius: var(--radius);
        color: var(--text-primary);
        padding: clamp(0.4rem, 0.6vw, 0.6rem) clamp(0.5rem, 0.8vw, 0.8rem);
        font-size: clamp(0.9rem, 1.1vw, 1.1rem);
        cursor: pointer;
        min-width: clamp(160px, 18vw, 200px);
    }
    
    .zaehler-date-picker input[type="date"]:focus[b-evr2bwesir] {
        outline: none;
        border-color: #2E86AB;
    }
    
    .zaehler-error[b-evr2bwesir] {
        text-align: center;
        padding: clamp(1rem, 2vw, 2rem);
        color: var(--color-danger);
    }
    
    .zaehler-error span[b-evr2bwesir] {
        font-size: clamp(1.5rem, 2vw, 2rem);
        display: block;
        margin-bottom: 0.5rem;
    }
    
    .zaehler-error p[b-evr2bwesir] {
        white-space: pre-line;
    }
    
    .zaehler-timestamp[b-evr2bwesir] {
        font-size: clamp(0.7rem, 0.9vw, 0.8rem);
        color: var(--text-secondary);
        font-family: 'Consolas', 'Monaco', monospace;
    }
    
    .zaehler-footer[b-evr2bwesir] {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .zaehler-footer-left[b-evr2bwesir] {
        flex: 1;
        min-width: 0;
    }
    
    .zaehler-footer-actions[b-evr2bwesir] {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }
    
    .btn-zaehler-action[b-evr2bwesir] {
        background: rgba(46, 134, 171, 0.15);
        border: 1px solid rgba(46, 134, 171, 0.4);
        color: var(--color-primary);
        padding: clamp(0.3rem, 0.5vw, 0.4rem) clamp(0.5rem, 0.8vw, 0.75rem);
        border-radius: var(--radius);
        cursor: pointer;
        font-size: clamp(0.75rem, 1vw, 0.85rem);
        transition: all 0.2s;
        white-space: nowrap;
    }
    
    .btn-zaehler-action:hover[b-evr2bwesir] {
        background: rgba(46, 134, 171, 0.3);
        border-color: var(--color-primary);
        color: var(--text-primary);
    }
    
    /* ═══════════════════════════════════════════════════════════════════════
       FACEPLATE MODAL STYLES
       ═══════════════════════════════════════════════════════════════════════ */
    
    .faceplate-overlay[b-evr2bwesir] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: var(--z-shell-modal);
        backdrop-filter: blur(3px);
    }
    
    .faceplate-modal[b-evr2bwesir] {
        background: var(--surface-page);
        border-radius: clamp(8px, 1.2vw, 12px);
        box-shadow: 0 8px 32px var(--surface-overlay);
        width: 90%;
        max-width: 480px;
        max-height: 85vh;
        display: flex;
        flex-direction: column;
        border: 1px solid var(--border-default);
        overflow: hidden;
        font-size: clamp(13px, 1.4vw, 16px);
    }
    
    .faceplate-header[b-evr2bwesir] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: clamp(10px, 1.2vw, 14px) clamp(12px, 1.5vw, 18px);
        background: linear-gradient(135deg, var(--color-primary), #177A99);
        flex-shrink: 0;
    }
    
    .faceplate-title[b-evr2bwesir] {
        display: flex;
        align-items: center;
        gap: clamp(6px, 0.8vw, 10px);
        font-size: clamp(14px, 1.5vw, 16px);
        font-weight: 600;
        color: var(--text-primary);
    }
    
    .faceplate-icon[b-evr2bwesir] {
        font-size: clamp(16px, 1.8vw, 20px);
    }
    
    .faceplate-close[b-evr2bwesir] {
        background: rgba(0, 0, 0, 0.1);
        border: none;
        color: var(--text-primary);
        width: clamp(26px, 2.8vw, 30px);
        height: clamp(26px, 2.8vw, 30px);
        border-radius: 50%;
        font-size: clamp(14px, 1.6vw, 18px);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
    }
    
    .faceplate-close:hover[b-evr2bwesir] {
        background: rgba(0, 0, 0, 0.15);
    }
    
    .faceplate-body[b-evr2bwesir] {
        position: relative;
        flex: 1;
        overflow-y: auto;
        padding: clamp(10px, 1.2vw, 14px);
        min-height: 120px;
    }
    
    .faceplate-saving-overlay[b-evr2bwesir] {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(30, 30, 46, 0.95);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30px 20px;
        gap: 12px;
        color: var(--color-primary);
        z-index: 10;
        border-radius: inherit;
    }
    
    .faceplate-loading[b-evr2bwesir],
    .faceplate-error[b-evr2bwesir],
    .faceplate-empty[b-evr2bwesir] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30px 20px;
        gap: 12px;
        color: var(--text-muted);
    }
    
    .faceplate-error[b-evr2bwesir] {
        color: var(--color-danger);
    }
    
    .error-icon[b-evr2bwesir] {
        font-size: 28px;
    }
    
    .btn-retry[b-evr2bwesir] {
        margin-top: 8px;
        padding: 8px 16px;
        background: var(--color-primary);
        color: var(--text-primary);
        border: none;
        border-radius: var(--radius);
        cursor: pointer;
        font-size: 13px;
    }
    
    .btn-retry:hover[b-evr2bwesir] {
        background: #2AA8CD;
    }
    
    .fp-spinner[b-evr2bwesir] {
        width: 28px;
        height: 28px;
        border: 3px solid var(--text-primary);
        border-top-color: var(--color-primary);
        border-radius: 50%;
        animation: fp-spin-b-evr2bwesir 1s linear infinite;
    }
    
    .fp-spinner-small[b-evr2bwesir] {
        display: inline-block;
        width: 14px;
        height: 14px;
        border: 2px solid rgba(0,0,0,0.15);
        border-top-color: var(--text-primary);
        border-radius: 50%;
        animation: fp-spin-b-evr2bwesir 1s linear infinite;
    }
    
    @keyframes fp-spin-b-evr2bwesir {
        to { transform: rotate(360deg); }
    }
    
    .faceplate-section[b-evr2bwesir] {
        margin-bottom: 14px;
    }
    
    .section-title[b-evr2bwesir] {
        font-size: 13px;
        font-weight: 600;
        color: var(--color-primary);
        padding: 6px 0;
        border-bottom: 1px solid var(--border-default);
        margin-bottom: 10px;
    }
    
    .parameter-row[b-evr2bwesir] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid var(--border-strong);
    }
    
    .parameter-row:last-child[b-evr2bwesir] {
        border-bottom: none;
    }
    
    .parameter-row.modified[b-evr2bwesir] {
        background: rgba(31, 148, 185, 0.15);
        margin: 0 -6px;
        padding: 8px 6px;
        border-radius: var(--radius-sm);
    }
    
    .parameter-label[b-evr2bwesir] {
        color: var(--text-secondary);
        font-size: 13px;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 10px;
    }
    
    .parameter-control[b-evr2bwesir] {
        flex-shrink: 0;
    }
    
    .parameter-value[b-evr2bwesir] {
        color: var(--text-primary);
        font-weight: 500;
        font-family: monospace;
        font-size: 13px;
    }
    
    .toggle-buttons[b-evr2bwesir] {
        display: flex;
        gap: 2px;
        background: var(--border-strong);
        padding: 2px;
        border-radius: var(--radius);
    }
    
    .toggle-btn[b-evr2bwesir] {
        padding: 5px 10px;
        border: none;
        background: transparent;
        color: var(--text-secondary);
        cursor: pointer;
        border-radius: var(--radius-sm);
        font-size: 11px;
        transition: all 0.2s;
    }
    
    .toggle-btn:hover[b-evr2bwesir] {
        color: var(--text-primary);
        background: var(--surface-hover);
    }
    
    .toggle-btn.active[b-evr2bwesir] {
        background: var(--color-primary);
        color: var(--text-primary);
    }
    
    .slider-control[b-evr2bwesir] {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .slider-btn[b-evr2bwesir] {
        width: 26px;
        height: 26px;
        border: none;
        background: var(--border-strong);
        color: var(--text-primary);
        border-radius: var(--radius-sm);
        cursor: pointer;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .slider-btn:hover[b-evr2bwesir] {
        background: var(--surface-hover);
    }
    
    .fp-slider[b-evr2bwesir] {
        width: 80px;
        height: 6px;
        -webkit-appearance: none;
        background: var(--border-strong);
        border-radius: var(--radius-xs);
        outline: none;
    }
    
    .fp-slider[b-evr2bwesir]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 16px;
        height: 16px;
        background: var(--color-primary);
        border-radius: 50%;
        cursor: pointer;
    }
    
    .fp-slider[b-evr2bwesir]::-moz-range-thumb {
        width: 16px;
        height: 16px;
        background: var(--color-primary);
        border-radius: 50%;
        cursor: pointer;
        border: none;
    }
    
    .slider-value[b-evr2bwesir] {
        color: var(--text-primary);
        font-family: monospace;
        font-size: 12px;
        min-width: 55px;
        text-align: right;
    }
    
    .faceplate-footer[b-evr2bwesir] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: clamp(8px, 1vw, 12px) clamp(12px, 1.5vw, 18px);
        border-top: 1px solid var(--border-default);
        background: var(--surface-hover);
        flex-shrink: 0;
    }
    
    .changes-indicator[b-evr2bwesir] {
        color: var(--color-primary);
        font-size: clamp(11px, 1.1vw, 12px);
    }
    
    .footer-buttons[b-evr2bwesir] {
        display: flex;
        gap: clamp(6px, 0.7vw, 8px);
    }
    
    .btn-cancel[b-evr2bwesir],
    .btn-save[b-evr2bwesir] {
        padding: clamp(6px, 0.8vw, 8px) clamp(12px, 1.4vw, 16px);
        border: none;
        border-radius: var(--radius);
        cursor: pointer;
        font-size: clamp(12px, 1.2vw, 13px);
        font-weight: 500;
        transition: all 0.2s;
    }
    
    .btn-cancel[b-evr2bwesir] {
        background: var(--surface-hover);
        color: var(--text-primary);
    }
    
    .btn-cancel:hover[b-evr2bwesir] {
        background: var(--gray-500);
    }
    
    .btn-save[b-evr2bwesir] {
        background: var(--color-primary);
        color: var(--text-primary);
        display: flex;
        align-items: center;
        gap: 5px;
    }
    
    .btn-save:hover:not(:disabled)[b-evr2bwesir] {
        background: #2AA8CD;
    }
    
    .btn-save:disabled[b-evr2bwesir] {
        background: var(--text-primary);
        color: var(--text-secondary);
        cursor: not-allowed;
    }

    /* ═══════════════════════════════════════════════════════════════════════
       FACEPLATE MODAL — PiMode TOUCH SIZING (WAGO WP400, 1280×800)
       The live modal above (not the dead wwwroot/css/faceplate.css — nothing
       calls faceplate.js's open(), so it never scoped anything) gets
       .pi-touch on its root when PiMode.Enabled (VisualisierungTab.razor).
       Ported from the operator ruling on 2026-08-06 (near-fullscreen, ~2.6×
       desktop operables, 60-72px minimum touch targets) and REMAPPED onto
       the live class names (.toggle-btn, .slider-btn, .fp-slider,
       .slider-value, .parameter-label, .faceplate-title/-close) — the dead
       CSS used different names (.faceplate-input .btn, .slider-btn-dec/-inc,
       .faceplate-slider, .faceplate-label, .faceplate-header h4) that don't
       exist in this markup. Sizes/spacing only — colours inherit the rules
       above (incl. dark mode). ═══════════════════════════════════════════ */

    /* WP400 GPU (etnaviv) cannot recompute a backdrop blur per frame: while the slider
       is dragged the modal region repaints continuously, and the blurred backdrop behind
       it re-samples every frame → visibly janky drag (the legacy plain-HTML faceplate has
       no blur, so it stays smooth). Drop the backdrop-filter AND the large modal shadow on
       PiMode so a drag only repaints cheap flat fills. Same rationale as
       setVisuAnimationsEnabled(!PiMode.Enabled) in VisualisierungTab.razor. */
    .faceplate-overlay.pi-touch[b-evr2bwesir] {
        backdrop-filter: none;
    }

    .faceplate-modal.pi-touch[b-evr2bwesir] {
        /* Sized to the content (label + 72px -/+ touch buttons + 280px slider ≈ 750px),
           not the whole screen. The old min-width:1200px + base width:90% rendered ~1700px
           wide on the 1920px panel. */
        width: min(780px, 92vw);
        max-width: 92vw;
        /* Flat-fill shadow substitute — a 32px-spread box-shadow forces the whole modal
           box to repaint on every slider frame; a hairline border reads the same at kiosk
           distance for none of the cost. */
        box-shadow: none;
    }

    .pi-touch .faceplate-header[b-evr2bwesir] {
        padding: var(--space-5) var(--space-6);
    }

    .pi-touch .faceplate-title[b-evr2bwesir] {
        font-size: var(--font-size-2xl);
        gap: var(--space-3);
    }

    .pi-touch .faceplate-icon[b-evr2bwesir] {
        font-size: var(--font-size-2xl);
    }

    .pi-touch .faceplate-close[b-evr2bwesir] {
        width: var(--size-touch-md);
        height: var(--size-touch-md);
        font-size: var(--font-size-2xl);
    }

    .pi-touch .faceplate-body[b-evr2bwesir] {
        /* Taller viewport + tighter rows so the whole parameter list fits without scrolling. */
        max-height: 82vh;
        padding: var(--space-4) var(--space-5);
    }

    .pi-touch .section-title[b-evr2bwesir] {
        font-size: var(--font-size-lg);
    }

    .pi-touch .parameter-row[b-evr2bwesir] {
        /* Was space-4 top+bottom — halved so more rows fit on the panel at once. */
        padding: var(--space-2) 0;
    }

    .pi-touch .parameter-label[b-evr2bwesir] {
        font-size: var(--font-size-lg);
    }

    .pi-touch .parameter-value[b-evr2bwesir] {
        font-size: var(--font-size-xl);
    }

    .pi-touch .toggle-btn[b-evr2bwesir] {
        padding: var(--space-2) var(--space-5);
        font-size: var(--font-size-lg);
        min-height: var(--size-touch-md);
    }

    .pi-touch .slider-control[b-evr2bwesir] {
        gap: var(--space-3);
    }

    .pi-touch .slider-btn[b-evr2bwesir] {
        /* Was size-touch-lg (72px), then md (60px) — still the main row-height driver.
           Down to size-touch-sm so slider rows are as short as they can be while staying
           finger-operable on the panel.
           ⚠ Hier stand „size-touch-sm (46px, above the 44px touch floor)". Das stimmte nur
           bei einer 16-px-Wurzel; diese Anwendung hat 14 px, das Token lieferte real
           40,25 px — UNTER der Schwelle, die der Satz zusagte. Seit 2026-08-26 steht der
           Wert in Pixeln und haelt die 46 px tatsaechlich ein. */
        width: var(--size-touch-sm);
        height: var(--size-touch-sm);
        min-height: var(--size-touch-sm);
        font-size: var(--font-size-lg);
    }

    .pi-touch .fp-slider[b-evr2bwesir] {
        min-width: 280px;
        height: var(--size-touch-sm);
    }

    /* Range-input internals: track/thumb are pseudo-elements outside the
       cascade's normal box model, sized directly rather than via padding. */
    .pi-touch .fp-slider[b-evr2bwesir]::-webkit-slider-thumb {
        width: var(--space-8);
        height: var(--space-8);
    }

    .pi-touch .fp-slider[b-evr2bwesir]::-moz-range-thumb {
        width: var(--space-8);
        height: var(--space-8);
    }

    .pi-touch .slider-value[b-evr2bwesir] {
        min-width: 140px;
        font-size: var(--font-size-xl);
    }

    .pi-touch .faceplate-footer[b-evr2bwesir] {
        padding: var(--space-4) var(--space-6);
    }

    .pi-touch .btn-cancel[b-evr2bwesir],
    .pi-touch .btn-save[b-evr2bwesir] {
        padding: var(--space-4) var(--space-6);
        font-size: var(--font-size-xl);
        min-height: var(--size-touch-md);
    }

/* /Components/Pages/Heizungen/VisuPropertyPanel.razor.rz.scp.css */
/* Scoped styles for the right-hand Eigenschaften panel.
   IMPORTANT: these MUST live here, not in VisualisierungEditor.razor.css. That file is
   scoped to the PARENT component, so Blazor's isolation attribute never matches this
   child's markup — the panel rendered as raw, unstyled controls. A component that owns
   markup owns its CSS. All colours/spacing come from design tokens. */

.visu-properties[b-jny6vni2t4] {
    width: 288px;
    background: var(--surface-card);
    border-left: 1px solid var(--border-strong);
    box-shadow: var(--shadow-panel);
    overflow-y: auto;
    padding: 0.85rem;
    font-size: 0.95rem;
    color: var(--text-body);
    display: flex;
    flex-direction: column;
}

.visu-properties h3[b-jny6vni2t4] {
    margin: 0 0 1rem;
    color: var(--color-primary);
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ── Sections ─────────────────────────────────────────────────────────────── */
.property-section[b-jny6vni2t4] {
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.property-section:last-child[b-jny6vni2t4] {
    margin-bottom: 0;
    border-bottom: none;
}

.property-section.selected[b-jny6vni2t4] {
    background: var(--surface-sunken);
    padding: 0.75rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

.property-section.info-section[b-jny6vni2t4] {
    background: var(--color-primary-10);
    padding: 0.6rem 0.7rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--ekh-cyan-15);
}

.property-section.info-section h4[b-jny6vni2t4] {
    color: var(--color-primary);
}

.property-section.info-section .hint[b-jny6vni2t4] {
    margin-bottom: 0.4rem;
}

.property-section.info-section .hint strong[b-jny6vni2t4] {
    color: var(--text-body);
}

.property-section h4[b-jny6vni2t4] {
    margin: 0.75rem 0 0.6rem;
    color: var(--text-secondary);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.property-section h4:first-child[b-jny6vni2t4] {
    margin-top: 0;
}

.property-subheader[b-jny6vni2t4] {
    font-size: 0.92rem;
    color: var(--color-primary);
    margin: 0.85rem 0 0.5rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border-subtle);
}

/* ── Rows & layout ────────────────────────────────────────────────────────── */
.property-row[b-jny6vni2t4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.55rem;
    gap: 0.5rem;
}

.property-row > label[b-jny6vni2t4] {
    color: var(--text-muted);
    min-width: 60px;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.property-row-dual[b-jny6vni2t4] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.55rem;
}

.property-row-dual > label[b-jny6vni2t4] {
    color: var(--text-muted);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.property-row-dual .prop-input[b-jny6vni2t4] {
    flex: 1;
    min-width: 0;
    width: auto;
}

.prop-info-grid[b-jny6vni2t4] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.5rem;
    align-items: center;
    font-size: 0.85rem;
    margin-bottom: 0.7rem;
    padding: 0.5rem 0.6rem;
    background: var(--surface-page);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.format-grid[b-jny6vni2t4] {
    display: grid;
    grid-template-columns: 75px 1fr;
    gap: 0.45rem 0.5rem;
    align-items: center;
    font-size: 0.85rem;
}

.format-grid > label[b-jny6vni2t4] {
    color: var(--text-muted);
    white-space: nowrap;
}

.format-grid .prop-select[b-jny6vni2t4] {
    width: 100%;
    min-width: 0;
}

.inline-row[b-jny6vni2t4] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0.55rem;
    font-size: 0.9rem;
}

.inline-label[b-jny6vni2t4] {
    color: var(--text-muted);
    font-size: 0.85rem;
    min-width: 42px;
    flex-shrink: 0;
}

.opacity-row[b-jny6vni2t4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.opacity-row .stroke-slider[b-jny6vni2t4] {
    flex: 1;
    min-width: 0;
}

.rotation-controls[b-jny6vni2t4] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.rotation-buttons[b-jny6vni2t4],
.style-buttons[b-jny6vni2t4] {
    display: flex;
    gap: 0.3rem;
}

.zorder-buttons[b-jny6vni2t4] {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.zorder-buttons .btn-small[b-jny6vni2t4] {
    flex: 1;
    text-align: center;
    padding: 0.35rem 0;
    min-width: 0;
}

.multi-selection-info[b-jny6vni2t4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.multi-actions[b-jny6vni2t4] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.multi-actions .btn-small[b-jny6vni2t4] {
    width: 100%;
    text-align: center;
}

.multi-hint[b-jny6vni2t4] {
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.5;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-subtle);
}

/* ── Labels & values ──────────────────────────────────────────────────────── */
.prop-label[b-jny6vni2t4] {
    color: var(--text-muted);
    white-space: nowrap;
}

.prop-value[b-jny6vni2t4] {
    color: var(--color-primary);
    font-size: 0.9rem;
    min-width: 40px;
    text-align: right;
}

.prop-value-sm[b-jny6vni2t4] {
    color: var(--text-muted);
    font-size: 0.8rem;
    min-width: 24px;
    text-align: right;
    flex-shrink: 0;
}

.prop-value-small[b-jny6vni2t4] {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-family: monospace;
}

.prop-value-highlight[b-jny6vni2t4] {
    color: var(--color-primary);
    font-weight: 700;
    font-size: 0.85rem;
}

.hint[b-jny6vni2t4] {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-style: italic;
    margin: 0 0 0.35rem;
}

.link-info[b-jny6vni2t4] {
    color: var(--color-primary);
    background: var(--color-primary-10);
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-style: normal;
    margin-top: 0.5rem;
}

/* ── Inputs ───────────────────────────────────────────────────────────────── */
.prop-input[b-jny6vni2t4],
.prop-input-wide[b-jny6vni2t4],
.prop-input-sm[b-jny6vni2t4] {
    background: var(--surface-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-body);
    padding: 0.3rem 0.4rem;
    font-size: var(--font-size-sm);
}

.prop-input[b-jny6vni2t4] { width: 70px; }
.prop-input-wide[b-jny6vni2t4] { width: 100%; }
.prop-input-sm[b-jny6vni2t4] {
    width: 50px;
    padding: 0.2rem 0.3rem;
    font-size: 0.8rem;
    text-align: center;
}

.prop-input:focus[b-jny6vni2t4],
.prop-input-wide:focus[b-jny6vni2t4],
.prop-input-sm:focus[b-jny6vni2t4],
.prop-select:focus[b-jny6vni2t4] {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--ekh-cyan-15);
    outline: none;
}

.prop-select[b-jny6vni2t4] {
    flex: 1;
    background-color: var(--surface-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-body);
    -webkit-text-fill-color: var(--text-body);
    padding: 0.3rem 22px 0.3rem 0.4rem;
    font-size: var(--font-size-sm);
    color-scheme: light;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
}

.prop-select option[b-jny6vni2t4] {
    background-color: var(--surface-card);
    color: var(--text-body);
    -webkit-text-fill-color: var(--text-body);
}

/* The background-colour picker shows the chosen colour as its own background, so pin a
   readable text shadow rather than a theme colour (the swatch value is data, not chrome). */
.bg-color-select[b-jny6vni2t4] {
    color-scheme: light;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.8), 0 0 1px rgba(0, 0, 0, 0.9);
}

.bg-color-select option[b-jny6vni2t4] {
    background-color: var(--surface-card);
    color: var(--text-body);
    text-shadow: none;
}

.color-picker[b-jny6vni2t4] {
    width: 40px;
    height: 30px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 1px;
    background: var(--surface-card);
    cursor: pointer;
    flex-shrink: 0;
}

.stroke-slider[b-jny6vni2t4] {
    flex: 1;
    height: 6px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.checkbox-label[b-jny6vni2t4] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-body);
    font-size: 0.85rem;
    cursor: pointer;
    margin-right: 0.75rem;
}

.checkbox-label input[type="checkbox"][b-jny6vni2t4] {
    accent-color: var(--color-primary);
    cursor: pointer;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn-small[b-jny6vni2t4] {
    padding: 0.4rem 0.75rem;
    background: var(--surface-hover);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-body);
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn-small:hover[b-jny6vni2t4] {
    border-color: var(--color-primary);
    background: var(--border-default);
}

.btn-small.primary[b-jny6vni2t4] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--text-on-primary);
}

.btn-small.primary:hover[b-jny6vni2t4] {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.btn-small.danger[b-jny6vni2t4],
.btn-small.btn-danger[b-jny6vni2t4] {
    border-color: var(--color-danger);
    color: var(--color-danger);
    background: var(--surface-hover);
}

.btn-small.danger:hover[b-jny6vni2t4],
.btn-small.btn-danger:hover[b-jny6vni2t4] {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--text-on-primary);
}

.btn-tiny[b-jny6vni2t4] {
    padding: 0.35rem 0.55rem;
    background: var(--surface-hover);
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn-tiny:hover[b-jny6vni2t4] {
    border-color: var(--color-primary);
    color: var(--text-body);
}

.btn-tiny.active[b-jny6vni2t4] {
    background: var(--ekh-cyan-15);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.style-btn[b-jny6vni2t4] {
    width: 28px;
    height: 28px;
    background: var(--surface-hover);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.style-btn:hover[b-jny6vni2t4] {
    background: var(--border-default);
    border-color: var(--border-default);
}

.style-btn.active[b-jny6vni2t4] {
    background: var(--ekh-cyan-15);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.property-actions-footer[b-jny6vni2t4] {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-subtle);
}

.property-actions-footer .btn-small[b-jny6vni2t4] {
    flex: 1;
    text-align: center;
    font-size: 0.8rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADR-0108 Phase 2 — dark chrome when hosted inside the Illustrator shell.
   Scoped under the parent's .visu-ill-shell ancestor so this panel only goes dark
   in the production editor. Colour-input swatches / accent-colour stay LITERAL
   (data carve-out). Blazor rewrites each selector's LAST element with this
   component's scope attr, so `.visu-ill-shell .visu-properties` still matches.
   ═══════════════════════════════════════════════════════════════════════════ */
.visu-ill-shell .visu-properties[b-jny6vni2t4] {
    width: 100%;
    background: var(--editor-chrome-panel);
    border-left: none;
    box-shadow: none;
    color: var(--editor-chrome-text);
}
.visu-ill-shell .visu-properties h3[b-jny6vni2t4] { color: var(--editor-chrome-text); }
.visu-ill-shell .property-section[b-jny6vni2t4] { border-bottom-color: var(--editor-chrome-border); }
.visu-ill-shell .property-section.selected[b-jny6vni2t4] {
    background: var(--editor-chrome-raised);
    border-color: var(--editor-chrome-border);
}
.visu-ill-shell .property-section.info-section[b-jny6vni2t4] {
    background: var(--editor-chrome-raised);
    border-color: var(--editor-chrome-border);
}
.visu-ill-shell .property-section h4[b-jny6vni2t4],
.visu-ill-shell .property-section.info-section h4[b-jny6vni2t4],
.visu-ill-shell .property-subheader[b-jny6vni2t4] { color: var(--editor-chrome-text-muted); }
.visu-ill-shell .property-row > label[b-jny6vni2t4],
.visu-ill-shell .property-row-dual > label[b-jny6vni2t4],
.visu-ill-shell .format-grid > label[b-jny6vni2t4],
.visu-ill-shell .inline-label[b-jny6vni2t4],
.visu-ill-shell .prop-label[b-jny6vni2t4] { color: var(--editor-chrome-text-muted); }
.visu-ill-shell .prop-value[b-jny6vni2t4],
.visu-ill-shell .prop-value-highlight[b-jny6vni2t4] { color: var(--editor-chrome-accent); }
.visu-ill-shell .prop-value-sm[b-jny6vni2t4],
.visu-ill-shell .prop-value-small[b-jny6vni2t4],
.visu-ill-shell .hint[b-jny6vni2t4],
.visu-ill-shell .multi-hint[b-jny6vni2t4] { color: var(--editor-chrome-text-muted); }
.visu-ill-shell .prop-info-grid[b-jny6vni2t4] {
    background: var(--editor-chrome-bg);
    border-color: var(--editor-chrome-border);
}
.visu-ill-shell .prop-input[b-jny6vni2t4],
.visu-ill-shell .prop-input-wide[b-jny6vni2t4],
.visu-ill-shell .prop-input-sm[b-jny6vni2t4],
.visu-ill-shell .prop-select[b-jny6vni2t4] {
    background: var(--editor-chrome-bg);
    border: 1px solid var(--editor-chrome-border);
    color: var(--editor-chrome-text);
    -webkit-text-fill-color: var(--editor-chrome-text);
    color-scheme: dark;
}
.visu-ill-shell .prop-select option[b-jny6vni2t4] { background: var(--editor-chrome-panel); color: var(--editor-chrome-text); -webkit-text-fill-color: var(--editor-chrome-text); }
.visu-ill-shell .prop-input:focus[b-jny6vni2t4],
.visu-ill-shell .prop-input-wide:focus[b-jny6vni2t4],
.visu-ill-shell .prop-input-sm:focus[b-jny6vni2t4],
.visu-ill-shell .prop-select:focus[b-jny6vni2t4] { border-color: var(--editor-chrome-accent); box-shadow: none; }
.visu-ill-shell .btn-small[b-jny6vni2t4],
.visu-ill-shell .btn-tiny[b-jny6vni2t4],
.visu-ill-shell .style-btn[b-jny6vni2t4] {
    background: var(--editor-chrome-raised);
    border: 1px solid var(--editor-chrome-border);
    color: var(--editor-chrome-text);
}
.visu-ill-shell .btn-small:hover[b-jny6vni2t4],
.visu-ill-shell .btn-tiny:hover[b-jny6vni2t4],
.visu-ill-shell .style-btn:hover[b-jny6vni2t4] { background: var(--editor-chrome-active); border-color: var(--editor-chrome-border-strong); }
.visu-ill-shell .btn-small.primary[b-jny6vni2t4] { background: var(--editor-chrome-accent); border-color: var(--editor-chrome-accent); color: var(--editor-chrome-accent-text); }
.visu-ill-shell .style-btn.active[b-jny6vni2t4],
.visu-ill-shell .btn-tiny.active[b-jny6vni2t4] { border-color: var(--editor-chrome-accent); color: var(--editor-chrome-accent); }
.visu-ill-shell .checkbox-label[b-jny6vni2t4] { color: var(--editor-chrome-text); }
.visu-ill-shell .property-actions-footer[b-jny6vni2t4] { border-top-color: var(--editor-chrome-border); }
.visu-ill-shell .color-picker[b-jny6vni2t4] { background: var(--editor-chrome-bg); border-color: var(--editor-chrome-border); }

/* Variable-linking section (Stage 2). Lives here, not in the parent stylesheet: Blazor's
   CSS-isolation attribute is per component and the parent's sheet never matches this markup. */
.ek-variable[b-jny6vni2t4] {
    margin-bottom: 0.75rem;
}

/* Label ABOVE the select, not beside it: the panel is a narrow rail and the inline
   .property-row layout pushed the channel dropdown off its right edge (operator screen
   test 2026-08-04). A full-width select also shows the whole "AI 51 — Vorlauf Kessel 1"
   option text, which is the only way to tell two same-numbered channels apart. */
.ek-variable-row label[b-jny6vni2t4] {
    display: block;
    margin-bottom: 0.25rem;
}

.ek-variable-select[b-jny6vni2t4] {
    width: 100%;
    max-width: 100%;
}

.ek-variable-reason[b-jny6vni2t4] {
    margin: 0.25rem 0 0;
    font-size: 0.85em;
    color: var(--text-secondary);
}

/* Inside the editor's dark shell --text-secondary is 2.48:1 on --editor-chrome-raised,
   below the 4.5:1 AA floor. This paragraph is the ENTIRE explanation an operator gets
   when an element cannot take a channel, so it has to be readable. Same override every
   other muted string in this panel already carries. */
.visu-ill-shell .ek-variable-reason[b-jny6vni2t4] { color: var(--editor-chrome-text-muted); }
/* /Components/Pages/Heizungen/WagoFernbedienungContent.razor.rz.scp.css */
    .wago-webvisu-wrapper[b-kjc5m90ba0] {
        flex: 1;
        position: relative;
        min-height: 500px;
        background: #000;
    }

    .wago-iframe[b-kjc5m90ba0] {
        width: 100%;
        height: 100%;
        border: none;
        background: var(--surface-card);
    }

    /* ── WebVisu zoom + pan (2026-06-10) ───────────────────────────────────
       The iframe is wrapped in a scroll container + an inner host sized (inline)
       to the scaled dimensions, so transform:scale() on the iframe zooms the
       fixed-size CODESYS canvas AND the container can pan to the off-screen
       parts. At zoom 100% this is a 1:1 no-op (host 100%, iframe 100%). */
    .wago-zoom-scroll[b-kjc5m90ba0] {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    /* .wago-zoom-host dimensions are set inline from the zoom factor. */

    .wago-zoom-controls[b-kjc5m90ba0] {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 10;
        display: flex;
        align-items: center;
        gap: 4px;
        background: rgba(0, 0, 0, 0.55);
        border-radius: var(--radius-md);
        padding: 4px 6px;
    }
    .wago-zoom-controls button[b-kjc5m90ba0] {
        width: 32px;
        height: 32px;
        border: 0;
        border-radius: var(--radius);
        background: rgba(255, 255, 255, 0.16);
        color: #fff;
        font-size: 1.15rem;
        line-height: 1;
        cursor: pointer;
    }
    .wago-zoom-controls button:hover:not(:disabled)[b-kjc5m90ba0] { background: rgba(255, 255, 255, 0.3); }
    .wago-zoom-controls button:disabled[b-kjc5m90ba0] { opacity: 0.4; cursor: default; }
    /* Pan-mode active: highlight the hand button so it's clearly a toggle. */
    .wago-zoom-controls button.pan-on[b-kjc5m90ba0] { background: rgba(31, 148, 185, 0.9); }
    .wago-zoom-controls button.pan-on:hover:not(:disabled)[b-kjc5m90ba0] { background: rgba(31, 148, 185, 1); }

    /* Pan mode: make the iframe click-through so a drag reaches the scroll
       container (drag-to-pan handler), and show a grab/grabbing cursor.
       touch-action:none lets the pointer handler own touch drags instead of
       the browser's native scroll/gesture. Toggling pan OFF restores
       pointer-events:auto so CODESYS controls work again. */
    .wago-webvisu-wrapper.pan-active .wago-iframe[b-kjc5m90ba0] { pointer-events: none; }
    .wago-webvisu-wrapper.pan-active .wago-zoom-scroll[b-kjc5m90ba0] { cursor: grab; touch-action: none; }
    .wago-webvisu-wrapper.pan-active .wago-zoom-scroll.grabbing[b-kjc5m90ba0] { cursor: grabbing; }
    .wago-zoom-label[b-kjc5m90ba0] {
        color: #fff;
        font-size: 0.8rem;
        min-width: 3.2ch;
        text-align: center;
        user-select: none;
    }

    /* ── Mobile / small landscape ──────────────────────────────────────────
       WebVisu canvases are designed for desktop and have fixed dimensions
       (typically 800×600 or larger). On phones — especially in landscape —
       our 500-px min-height + 100% iframe sizing crops the bottom of the
       canvas with no way to reach it. Two targeted changes:

         1. Drop the wrapper's min-height (was 500 px) and let it shrink to
            whatever vertical space the parent .term-content-area gives us,
            then allow vertical scroll if the iframe overflows it.

         2. Pin the iframe to a generous min-height so a typical WebVisu
            renders in full inside the iframe and the user scrolls our
            wrapper to reach the cropped portion. -webkit-overflow-scrolling
            keeps momentum-scroll snappy on iOS Safari.

       Triggers on phones (≤768 px wide) AND on any landscape viewport
       under 600 px tall (catches phones held horizontally regardless of
       width). Desktop layout is untouched.  */
    @media (max-width: 768px),
           (orientation: landscape) and (max-height: 600px) {
        .wago-webvisu-wrapper[b-kjc5m90ba0] {
            min-height: 0;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
        }

        .wago-iframe[b-kjc5m90ba0] {
            /* Tall enough for typical WebVisu canvases (800×600 / 1024×768);
               wrapper scrolls if the actual canvas is even taller. */
            height: 800px;
            min-height: 800px;
        }

        /* Keep the canvas reachable on narrow windows under the zoom structure:
           give the inner host the same generous floor so .wago-zoom-scroll can
           scroll to it (the iframe's inline height % resolves against this). */
        .wago-zoom-host[b-kjc5m90ba0] {
            min-height: 800px;
        }
    }

    .wago-iframe.loading[b-kjc5m90ba0] {
        opacity: 0;
        position: absolute;
    }

    .wago-loading[b-kjc5m90ba0], .wago-error[b-kjc5m90ba0] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: var(--text-body);
        z-index: 10;
    }

    .wago-spinner[b-kjc5m90ba0] {
        width: 50px;
        height: 50px;
        border: 4px solid var(--color-primary);
        border-top-color: var(--color-danger);
        border-radius: 50%;
        animation: wago-spin-b-kjc5m90ba0 1s linear infinite;
        margin: 0 auto 20px;
    }

    @keyframes wago-spin-b-kjc5m90ba0 {
        to { transform: rotate(360deg); }
    }

    .wago-loading-text[b-kjc5m90ba0] {
        font-size: 1.1rem;
        margin-bottom: 8px;
    }

    .wago-loading-subtext[b-kjc5m90ba0] {
        font-size: 0.9rem;
        color: var(--text-secondary);
    }

    .wago-error-icon[b-kjc5m90ba0] {
        font-size: 3rem;
        margin-bottom: 16px;
    }

    .wago-error-title[b-kjc5m90ba0] {
        font-size: 1.3rem;
        color: var(--color-danger);
        margin-bottom: 8px;
    }

    .wago-error-message[b-kjc5m90ba0] {
        font-size: 0.9rem;
        color: var(--text-secondary);
        margin-bottom: 20px;
        max-width: 400px;
    }

    .wago-btn[b-kjc5m90ba0] {
        background: var(--color-primary);
        border: 1px solid var(--surface-card);
        color: var(--text-body);
        padding: 8px 14px;
        border-radius: var(--radius);
        cursor: pointer;
        font-size: 0.85rem;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .wago-btn:hover[b-kjc5m90ba0] {
        background: var(--color-primary-hover);
        border-color: var(--color-danger);
    }
/* /Components/Pages/Heizungen/WetterPage.razor.rz.scp.css */
.wetter-page .page-header[b-de5a6fnqj5] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}

.wetter-page .back-link[b-de5a6fnqj5] {
    text-decoration: none;
}

.wetter-page .weather-current[b-de5a6fnqj5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .25rem .75rem;
    font-size: .95em;
}

.wetter-page .range-row[b-de5a6fnqj5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
}

.wetter-page .range-row label[b-de5a6fnqj5] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
}

.wetter-page .range-row input[type="date"][b-de5a6fnqj5] {
    padding: .25rem .4rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
}

.wetter-page .wetter-forecast-row[b-de5a6fnqj5] {
    color: var(--text-secondary);
    font-style: italic;
}

.wetter-page .chart-legend[b-de5a6fnqj5] {
    text-align: right;
}
/* /Components/Pages/Help/DatenTabHelp.razor.rz.scp.css */
.help-container[b-t1llqnanjo] {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem;
        color: var(--text-primary);
    }

    .help-header[b-t1llqnanjo] {
        text-align: center;
        margin-bottom: 3rem;
        padding-bottom: 2rem;
        border-bottom: 2px solid var(--border-color);
    }

    .help-header h1[b-t1llqnanjo] {
        color: var(--primary-color);
        margin-bottom: 0.5rem;
    }

    .help-subtitle[b-t1llqnanjo] {
        font-size: 1.1rem;
        color: var(--text-secondary);
    }

    .help-toc[b-t1llqnanjo] {
        background: var(--card-bg);
        padding: 1.5rem;
        border-radius: var(--radius-md);
        margin-bottom: 2rem;
        border: 1px solid var(--border-color);
    }

    .help-toc h3[b-t1llqnanjo] {
        margin-top: 0;
        color: var(--primary-color);
    }

    .help-toc ul[b-t1llqnanjo] {
        list-style: none;
        padding-left: 0;
    }

    .help-toc ul ul[b-t1llqnanjo] {
        padding-left: 1.5rem;
        margin-top: 0.5rem;
    }

    .help-toc a[b-t1llqnanjo] {
        color: var(--text-primary);
        text-decoration: none;
        padding: 0.25rem 0;
        display: inline-block;
    }

    .help-toc a:hover[b-t1llqnanjo] {
        color: var(--primary-color);
    }

    .help-section[b-t1llqnanjo] {
        margin-bottom: 4rem;
    }

    .help-section h2[b-t1llqnanjo] {
        color: var(--primary-color);
        border-bottom: 2px solid var(--border-color);
        padding-bottom: 0.5rem;
        margin-bottom: 1.5rem;
    }

    .help-subsection[b-t1llqnanjo] {
        margin: 2rem 0;
    }

    .help-subsection h3[b-t1llqnanjo] {
        color: var(--secondary-color);
        margin-bottom: 1rem;
    }

    .help-card[b-t1llqnanjo] {
        background: var(--card-bg);
        padding: 1.5rem;
        border-radius: var(--radius-md);
        margin: 1rem 0;
        border-left: 4px solid var(--primary-color);
    }

    .help-card h4[b-t1llqnanjo] {
        margin-top: 0;
        color: var(--primary-color);
    }

    .help-steps[b-t1llqnanjo] {
        display: grid;
        gap: 1.5rem;
        margin: 2rem 0;
    }

    .help-step[b-t1llqnanjo] {
        display: flex;
        align-items: start;
        gap: 1rem;
    }

    .step-number[b-t1llqnanjo] {
        background: var(--primary-color);
        color: #000;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 1.2rem;
        flex-shrink: 0;
    }

    .step-content h4[b-t1llqnanjo] {
        margin: 0 0 0.5rem 0;
        color: var(--text-primary);
    }

    .step-content p[b-t1llqnanjo] {
        margin: 0;
        color: var(--text-secondary);
    }

    .stat-explanation[b-t1llqnanjo] {
        margin: 2rem 0;
        padding: 1.5rem;
        background: var(--card-bg);
        border-radius: var(--radius-md);
        border: 1px solid var(--border-color);
    }

    .stat-explanation h4[b-t1llqnanjo] {
        color: var(--primary-color);
        margin-top: 0;
    }

    .formula-box[b-t1llqnanjo] {
        background: rgba(30, 148, 188, 0.1);
        padding: 1rem;
        border-radius: var(--radius-sm);
        border-left: 3px solid var(--primary-color);
        margin: 1rem 0;
        font-family: 'Courier New', monospace;
    }

    .formula-box code[b-t1llqnanjo] {
        font-size: 1rem;
        color: var(--text-primary);
    }

    .help-example[b-t1llqnanjo] {
        background: rgba(249, 115, 22, 0.1);
        padding: 1rem;
        border-radius: var(--radius-sm);
        border-left: 3px solid #f97316;
        margin: 1rem 0;
    }

    .help-example h4[b-t1llqnanjo] {
        margin-top: 0;
        color: #f97316;
    }

    .help-note[b-t1llqnanjo] {
        background: rgba(37, 99, 235, 0.1);
        padding: 1rem;
        border-radius: var(--radius-sm);
        border-left: 3px solid #2563eb;
        margin: 1rem 0;
    }

    .formula-card[b-t1llqnanjo] {
        background: var(--card-bg);
        padding: 1.5rem;
        border-radius: var(--radius-md);
        margin: 1.5rem 0;
        border: 1px solid var(--border-color);
    }

    .formula-card h4[b-t1llqnanjo] {
        color: var(--primary-color);
        margin-top: 0;
    }

    .help-table[b-t1llqnanjo] {
        width: 100%;
        border-collapse: collapse;
        margin: 1.5rem 0;
    }

    .help-table th[b-t1llqnanjo],
    .help-table td[b-t1llqnanjo] {
        padding: 0.75rem;
        text-align: left;
        border: 1px solid var(--border-color);
    }

    .help-table th[b-t1llqnanjo] {
        background: var(--card-bg);
        color: var(--primary-color);
        font-weight: 600;
    }

    .help-table tbody tr:nth-child(even)[b-t1llqnanjo] {
        background: rgba(0,0,0,0.02);
    }

    .help-tips[b-t1llqnanjo] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1rem;
        margin: 2rem 0;
    }

    .tip-card[b-t1llqnanjo] {
        background: var(--card-bg);
        padding: 1.5rem;
        border-radius: var(--radius-md);
        border-left: 4px solid var(--info-color);
    }

    .tip-card h4[b-t1llqnanjo] {
        margin-top: 0;
        color: var(--info-color);
    }

    .help-footer[b-t1llqnanjo] {
        text-align: center;
        padding: 2rem;
        margin-top: 4rem;
        border-top: 2px solid var(--border-color);
        color: var(--text-secondary);
    }

    /* Light mode adjustments */
    body.app-light-mode .help-card[b-t1llqnanjo],
    body.app-light-mode .stat-explanation[b-t1llqnanjo],
    body.app-light-mode .formula-card[b-t1llqnanjo],
    body.app-light-mode .tip-card[b-t1llqnanjo] {
        background: var(--surface-sunken);
    }

    body.app-light-mode .help-table th[b-t1llqnanjo] {
        background: var(--surface-hover);
    }

    body.app-light-mode .help-table tbody tr:nth-child(even)[b-t1llqnanjo] {
        background: var(--surface-sunken);
    }

    @media (max-width: 768px) {
        .help-container[b-t1llqnanjo] {
            padding: 1rem;
        }

        .help-tips[b-t1llqnanjo] {
            grid-template-columns: 1fr;
        }
    }
/* /Components/Pages/Home.razor.rz.scp.css */
/* Recent Controllers Section */
.recent-section[b-kq04p5re85] {
    margin-top: 1.5rem;
    background: var(--app-card-bg);
    border: 1px solid var(--app-border-color);
    border-radius: 10px;
    overflow: hidden;
}

.recent-header[b-kq04p5re85] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid var(--app-border-color);
}

.recent-title[b-kq04p5re85] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--app-text-secondary);
}

/* Card grid layout — fixed 3 columns on desktop, falls back to 2 then 1
   on narrower viewports below. align-items:start lets each card size to
   its own content height instead of stretching to match the tallest in
   the row (so a card with a wrapped action row doesn't make its row
   neighbours grow too). */
.recent-cards[b-kq04p5re85] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 1rem;
    padding: 1rem;
}

.recent-card[b-kq04p5re85] {
    background: var(--app-card-bg);
    border: 1px solid var(--app-border-color);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.recent-card:hover[b-kq04p5re85] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    border-color: var(--app-primary-color);
}

.recent-card-header[b-kq04p5re85] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.recent-card-name[b-kq04p5re85] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--app-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.projekt-badge[b-kq04p5re85] {
    display: inline-block;
    background: var(--app-card-bg);
    color: var(--color-success);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    font-family: monospace;
    border: 1px solid var(--app-border-color);
    white-space: nowrap;
    flex-shrink: 0;
}

.recent-card-details[b-kq04p5re85] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.recent-card-detail[b-kq04p5re85] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
}

.detail-label[b-kq04p5re85] {
    color: var(--app-text-secondary);
}

.detail-value[b-kq04p5re85] {
    color: var(--app-text-primary);
    font-weight: 500;
}

.text-success[b-kq04p5re85] {
    color: #51CF66 !important;
}

.text-danger[b-kq04p5re85] {
    color: var(--color-danger) !important;
}

.recent-card-actions[b-kq04p5re85] {
    display: flex;
    flex-wrap: wrap;          /* let extra buttons wrap to a second line */
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--app-border-color);
}

.btn-card[b-kq04p5re85] {
    flex: 1 1 auto;           /* size to content but grow to share leftover space */
    padding: 0.4rem 0.5rem;
    background: rgba(30, 148, 188, 0.1);
    border: 1px solid rgba(30, 148, 188, 0.25);
    border-radius: var(--radius);
    color: var(--app-primary-color);
    text-decoration: none;
    font-size: 0.78rem;
    white-space: nowrap;
    text-align: center;
    transition: all 0.15s;
}

.btn-card:hover[b-kq04p5re85] {
    background: rgba(30, 148, 188, 0.2);
    border-color: var(--app-primary-color);
    text-decoration: none;
    color: var(--app-primary-color);
}

/* Dashboard Alert Cards */
.dashboard-alerts[b-kq04p5re85] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.alert-card[b-kq04p5re85] {
    background: var(--app-card-bg);
    border: 1px solid var(--app-border-color);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.alert-card:hover[b-kq04p5re85] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.alert-icon[b-kq04p5re85] {
    font-size: 2.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.alert-content[b-kq04p5re85] {
    flex: 1;
    min-width: 0;
}

.alert-value[b-kq04p5re85] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.25rem;
    color: var(--app-text-primary);
}

.alert-label[b-kq04p5re85] {
    font-size: 0.85rem;
    color: var(--app-text-secondary);
    font-weight: 500;
}

.alert-subtext[b-kq04p5re85] {
    font-size: 0.75rem;
    color: var(--app-text-secondary);
    margin-top: 0.25rem;
    opacity: 0.8;
}

/* Card Color Variants */
.alert-card.installations[b-kq04p5re85] {
    border-left: 4px solid var(--app-primary-color);
}

.alert-card.active-faults[b-kq04p5re85] {
    border-left: 4px solid var(--color-danger);
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.05) 0%, var(--app-card-bg) 100%);
}

.alert-card.no-faults[b-kq04p5re85] {
    border-left: 4px solid #51CF66;
    background: linear-gradient(135deg, rgba(81, 207, 102, 0.05) 0%, var(--app-card-bg) 100%);
}

.alert-card.offline[b-kq04p5re85] {
    border-left: 4px solid #FFA94D;
    background: linear-gradient(135deg, rgba(255, 169, 77, 0.05) 0%, var(--app-card-bg) 100%);
}

.alert-card.online[b-kq04p5re85] {
    border-left: 4px solid #51CF66;
}

.alert-card.notifications[b-kq04p5re85] {
    border-left: 4px solid #748FFC;
}

.alert-card.success-rate[b-kq04p5re85] {
    border-left: 4px solid #51CF66;
}

/* Responsive */
@media (max-width: 1200px) {
    .dashboard-alerts[b-kq04p5re85] {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 768px) {
    .dashboard-alerts[b-kq04p5re85] {
        grid-template-columns: 1fr;
    }

    .alert-card[b-kq04p5re85] {
        padding: 1rem;
    }

    .alert-icon[b-kq04p5re85] {
        font-size: 2rem;
    }

    .alert-value[b-kq04p5re85] {
        font-size: 1.5rem;
    }

    .recent-cards[b-kq04p5re85] {
        grid-template-columns: 1fr;
    }

    .btn-card[b-kq04p5re85] {
        flex: 1 1 calc(50% - 0.2rem);
    }
}

/* Tablet: 2 columns is more readable than cramming 3 narrow cards. */
@media (min-width: 601px) and (max-width: 1100px) {
    .recent-cards[b-kq04p5re85] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Synchronous role-indicator heading between <h2>Dashboard</h2> and
   the data-loading skeleton. Smaller than h2, lighter than primary
   text — it's a sub-section label rather than a top-level heading. */
.dashboard-role-header[b-kq04p5re85] {
    margin: 0.25rem 0 0.75rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--app-text-secondary);
}
/* /Components/Pages/Nis2.razor.rz.scp.css */
/* Öffentliche NIS-2-Seite. Ausschließlich Token, keine Literale — die Seite wird
   ohne Anmeldung ausgeliefert und ist damit das Erste, was ein Prüfer von uns sieht. */

.nis2[b-1u95by6g1t] {
    max-width: 62rem;
    margin: 0 auto;
    padding: var(--space-4) var(--space-4) var(--space-8);
    color: var(--text-body);
    font-family: var(--font-sans);
    line-height: 1.6;
}

.nis2-head[b-1u95by6g1t] {
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-5);
}

.nis2-head h1[b-1u95by6g1t] {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.nis2-lead[b-1u95by6g1t] {
    margin: 0;
    font-size: var(--font-size-lg);
    color: var(--text-body);
}

.nis2-stand[b-1u95by6g1t] {
    margin: var(--space-2) 0 0;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.nis2 section[b-1u95by6g1t] {
    margin-bottom: var(--space-6);
    scroll-margin-top: var(--space-4);
}

.nis2 h2[b-1u95by6g1t] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
}

.nis2 p[b-1u95by6g1t] {
    margin: 0 0 var(--space-3);
}

.nis2 ul[b-1u95by6g1t],
.nis2 ol[b-1u95by6g1t] {
    margin: 0 0 var(--space-3);
    padding-left: var(--space-5);
}

.nis2 li[b-1u95by6g1t] {
    margin-bottom: var(--space-2);
}

/* ── Hinweiskästen ─────────────────────────────────────────────── */

.nis2-note[b-1u95by6g1t] {
    border-left: 4px solid var(--color-info);
    background: var(--color-info-subtle);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    margin: 0 0 var(--space-5);
    font-size: var(--font-size-sm);
}

.nis2-note-warn[b-1u95by6g1t] {
    border-left-color: var(--color-warning);
    background: var(--color-warning-subtle);
}

/* ── Inhaltsverzeichnis ────────────────────────────────────────── */

.nis2-toc[b-1u95by6g1t] {
    background: var(--surface-sunken);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-6);
}

.nis2-toc-title[b-1u95by6g1t] {
    display: block;
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-2);
}

.nis2-toc ol[b-1u95by6g1t] {
    margin: 0;
    columns: 2;
    column-gap: var(--space-5);
}

.nis2-toc a[b-1u95by6g1t] {
    color: var(--text-link);
}

/* ── Aufzählungen mit Bedeutung ────────────────────────────────── */

.nis2-big li[b-1u95by6g1t] {
    margin-bottom: var(--space-3);
}

.nis2-check[b-1u95by6g1t],
.nis2-todo[b-1u95by6g1t] {
    list-style: none;
    padding-left: 0;
}

.nis2-check li[b-1u95by6g1t],
.nis2-todo li[b-1u95by6g1t] {
    position: relative;
    padding-left: var(--space-6);
}

.nis2-check li[b-1u95by6g1t]::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-success);
    font-weight: var(--font-weight-bold);
}

.nis2-todo li[b-1u95by6g1t]::before {
    content: "○";
    position: absolute;
    left: 0;
    color: var(--color-warning-dark);
    font-weight: var(--font-weight-bold);
}

/* ── Tabellen ──────────────────────────────────────────────────── */

.nis2-table-wrap[b-1u95by6g1t] {
    overflow-x: auto;
    margin-bottom: var(--space-3);
}

.nis2-table[b-1u95by6g1t] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.nis2-table th[b-1u95by6g1t],
.nis2-table td[b-1u95by6g1t] {
    text-align: left;
    vertical-align: top;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

.nis2-table thead th[b-1u95by6g1t] {
    background: var(--surface-sunken);
    border-bottom: 2px solid var(--border-default);
    font-weight: var(--font-weight-bold);
}

/* ── Aufklappbares ─────────────────────────────────────────────── */

.nis2 details[b-1u95by6g1t] {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
    background: var(--surface-card);
}

.nis2 details[open][b-1u95by6g1t] {
    background: var(--surface-raised);
}

.nis2 summary[b-1u95by6g1t] {
    cursor: pointer;
    font-weight: var(--font-weight-bold);
}

.nis2 details p[b-1u95by6g1t] {
    margin: var(--space-2) 0 0;
}

/* ── Quellen ───────────────────────────────────────────────────── */

.nis2-sources[b-1u95by6g1t] {
    list-style: none;
    padding-left: 0;
}

.nis2-sources li[b-1u95by6g1t] {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-subtle);
}

.nis2-sources a[b-1u95by6g1t] {
    color: var(--text-link);
    font-weight: var(--font-weight-bold);
    overflow-wrap: anywhere;
}

.nis2-sources span[b-1u95by6g1t] {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* ── Fuß ───────────────────────────────────────────────────────── */

.nis2-foot[b-1u95by6g1t] {
    margin-top: var(--space-8);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.nis2-foot a[b-1u95by6g1t] {
    color: var(--text-link);
}

/* Telefon: eine Spalte im Inhaltsverzeichnis, schmalerer Rand */
@media (max-width: 40rem) {
    .nis2[b-1u95by6g1t] {
        padding: var(--space-3) var(--space-3) var(--space-6);
    }

    .nis2-toc ol[b-1u95by6g1t] {
        columns: 1;
    }

    .nis2-head h1[b-1u95by6g1t] {
        font-size: var(--font-size-xl);
    }
}
/* /Components/Pages/Organisation/Dokumente.razor.rz.scp.css */
/* Dokumente page — per-controller document workspace (ADR-0028).
   Mirrors KontaktePage.razor.css so the two sibling pages in the
   Anlagespezifisches dropdown feel like part of the same family. */

.dokumente-page[b-eyyrcotlsf] {
    display: flex;
    flex-direction: column;
    background: transparent;
    color: var(--text-body);
    gap: 1rem;
}

/* ── Page header ──────────────────────────────────────── */

.page-header[b-eyyrcotlsf] {
    padding: 0.75rem 1.25rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg, 8px);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.page-title[b-eyyrcotlsf] {
    margin: 0;
    font-size: 1.1rem;
    color: var(--color-primary);
    font-weight: 600;
}

.back-link[b-eyyrcotlsf] {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.9rem;
    white-space: nowrap;
}
.back-link:hover[b-eyyrcotlsf] { color: var(--color-primary-hover); }

/* ADR-0172 stage 2 — cross-scope search entry point, pushed to the far side. */
.dok-search-all-link[b-eyyrcotlsf] {
    margin-left: auto;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.85rem;
    white-space: nowrap;
}
.dok-search-all-link:hover[b-eyyrcotlsf] { color: var(--color-primary-hover); }

.intro-text[b-eyyrcotlsf] {
    color: var(--text-secondary);
    font-size: 0.9rem;
    max-width: 780px;
    margin: 0;
    line-height: 1.5;
}

/* ── Stacked layout — upload above, list below, both full-width ── */

.dok-stack[b-eyyrcotlsf] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dok-upload-panel[b-eyyrcotlsf],
.dok-list-panel[b-eyyrcotlsf] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg, 8px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.dok-list-panel .upload-card-header[b-eyyrcotlsf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dok-count-badge[b-eyyrcotlsf] {
    background: var(--color-primary);
    color: var(--text-on-primary);
    border-radius: var(--radius-full);
    padding: 0.05rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: auto;
}

.dok-category-hint[b-eyyrcotlsf] {
    font-size: 0.78rem;
    color: var(--text-secondary);
    background: var(--color-primary-10, var(--surface-page));
    border-left: 3px solid var(--color-primary);
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    margin-top: 0.35rem;
    line-height: 1.4;
}

/* ── Document-list cell typography ───────────────────── */

.doc-title[b-eyyrcotlsf] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-body);
    line-height: 1.3;
}

.doc-filename-sub[b-eyyrcotlsf] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: monospace;
    margin-top: 0.15rem;
    word-break: break-all;
}

.doc-description[b-eyyrcotlsf] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.35rem;
    line-height: 1.4;
    max-width: 540px;
    white-space: pre-wrap;
}

.empty-state-inline[b-eyyrcotlsf] {
    border: none;
    background: transparent;
    margin: 0;
    padding: 2.5rem 1rem;
    text-align: center;
}

.doc-table-inline[b-eyyrcotlsf] {
    border: none;
    border-radius: 0;
    max-width: none;
}

/* ── Card (upload form) ───────────────────────────────── */

.upload-card[b-eyyrcotlsf] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg, 8px);
    overflow: hidden;
    /* Stacked layout (upload above, list below) — both go full
       page width. Status messages + empty-state stay narrow on
       purpose because text-blocks read better that way. */
}

.upload-card-header[b-eyyrcotlsf] {
    padding: 0.5rem 1rem;
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-default);
    font-size: 0.95rem;
    color: var(--color-primary);
    font-weight: 600;
    min-height: 48px;
    display: flex;
    align-items: center;
}

.upload-card-body[b-eyyrcotlsf] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Form rows (match KontaktePage idiom) ─────────────── */

.dok-form-row[b-eyyrcotlsf] { display: flex; flex-direction: column; gap: 0.25rem; }
.dok-form-row > label[b-eyyrcotlsf] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}
.dok-form-row input[b-eyyrcotlsf],
.dok-form-row textarea[b-eyyrcotlsf],
.dok-form-row select[b-eyyrcotlsf] {
    padding: 0.5rem 0.75rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-body);
    font-size: 0.9rem;
    box-sizing: border-box;
    font-family: inherit;
    width: 100%;
    max-width: 400px;
}
.dok-form-row textarea[b-eyyrcotlsf] { resize: vertical; min-height: 60px; max-width: 600px; }
.dok-form-row select[b-eyyrcotlsf] { max-width: 300px; }
.dok-form-row input:focus[b-eyyrcotlsf],
.dok-form-row textarea:focus[b-eyyrcotlsf],
.dok-form-row select:focus[b-eyyrcotlsf] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-10);
}

/* ADR-0172 Stufe 3 — the confidential checkbox row is not a single-input
   field like the rest of .dok-form-row, so its label + checkbox sit side
   by side instead of being stretched by the generic input rules above. */
.dok-form-check > label[b-eyyrcotlsf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-body);
    margin-bottom: 0;
}
.dok-form-check input[type="checkbox"][b-eyyrcotlsf] {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
}

.dok-form-actions[b-eyyrcotlsf] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

/* Reuse the same btn-save styling as KontaktePage for symmetry. */
.btn-save[b-eyyrcotlsf] {
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: var(--text-on-primary);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
}
.btn-save:hover[b-eyyrcotlsf] { background: var(--color-primary-hover); }
.btn-save:disabled[b-eyyrcotlsf] { opacity: 0.5; cursor: not-allowed; }

/* ── Status messages ──────────────────────────────────── */

.status-message[b-eyyrcotlsf] {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md, 6px);
    font-size: 0.85rem;
    max-width: 780px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.status-message.success[b-eyyrcotlsf] { background: var(--color-success-light); color: var(--color-success); }
.status-message.error[b-eyyrcotlsf]   { background: var(--color-danger-light);  color: var(--color-danger); }
.status-message .close-btn[b-eyyrcotlsf] {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    margin-left: auto;
    font-size: 1.2rem;
}

.empty-state[b-eyyrcotlsf] {
    padding: 2rem 1rem;
    background: var(--surface-card);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-lg, 8px);
    color: var(--text-secondary);
    text-align: center;
    max-width: 780px;
}

/* ── Document table ───────────────────────────────────── */

.doc-table-wrapper[b-eyyrcotlsf] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg, 8px);
    overflow: hidden;
}

.doc-table[b-eyyrcotlsf] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.doc-table thead th[b-eyyrcotlsf] {
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-default);
    color: var(--text-secondary);
    text-align: left;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.6rem 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.doc-table tbody td[b-eyyrcotlsf] {
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--border-subtle, var(--border-default));
    color: var(--text-body);
    vertical-align: middle;
}

.doc-table tbody tr:last-child td[b-eyyrcotlsf] { border-bottom: none; }
.doc-table tbody tr:hover[b-eyyrcotlsf] { background: var(--surface-hover); }

.doc-name[b-eyyrcotlsf] { display: flex; align-items: center; gap: 0.4rem; font-weight: 500; }

.doc-actions[b-eyyrcotlsf] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

/* ── Loading / error screens ──────────────────────────── */

.loading-screen[b-eyyrcotlsf], .error-screen[b-eyyrcotlsf] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    gap: 1rem;
    padding: 3rem 1rem;
}
.loading-screen .spinner[b-eyyrcotlsf] {
    width: 50px;
    height: 50px;
    border: 4px solid var(--border-default);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin-b-eyyrcotlsf 1s linear infinite;
}
.error-screen .icon[b-eyyrcotlsf] { font-size: 2.5rem; }
.error-screen h3[b-eyyrcotlsf] { margin: 0; color: var(--color-danger); font-size: 1.1rem; }
.btn-back[b-eyyrcotlsf] {
    padding: 0.75rem 1.5rem;
    background: var(--color-primary);
    color: var(--text-on-primary);
    text-decoration: none;
    border-radius: var(--radius);
    font-weight: 500;
}

@keyframes spin-b-eyyrcotlsf { to { transform: rotate(360deg); } }

/* ── Responsive ───────────────────────────────────────── */

@media (max-width: 760px) {
    .doc-table thead[b-eyyrcotlsf] { display: none; }
    .doc-table tbody td[b-eyyrcotlsf] {
        display: block;
        padding: 0.3rem 0.9rem;
        border-bottom: none;
    }
    .doc-table tbody tr[b-eyyrcotlsf] {
        display: block;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--border-default);
    }
    .doc-table tbody tr:last-child[b-eyyrcotlsf] { border-bottom: none; }
}
/* /Components/Pages/Sicherheitshinweise.razor.rz.scp.css */
/* Öffentliche Seite — nur Token, keine Literale. */

.advisories[b-d4fby7qlbh] {
    max-width: 56rem;
    margin: 0 auto;
    padding: var(--space-4) var(--space-4) var(--space-8);
    color: var(--text-body);
    font-family: var(--font-sans);
    line-height: 1.6;
}

.adv-head[b-d4fby7qlbh] {
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-5);
}

.adv-head h1[b-d4fby7qlbh] {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.adv-lead[b-d4fby7qlbh] {
    margin: 0;
    font-size: var(--font-size-lg);
}

.adv-stand[b-d4fby7qlbh] {
    margin: var(--space-2) 0 0;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.adv-empty[b-d4fby7qlbh] {
    border-left: 4px solid var(--color-info);
    background: var(--color-info-subtle);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-6);
}

.adv-empty p[b-d4fby7qlbh] {
    margin: 0 0 var(--space-2);
}

.adv-empty p:last-child[b-d4fby7qlbh] {
    margin-bottom: 0;
}

.adv-item[b-d4fby7qlbh] {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.adv-item h2[b-d4fby7qlbh] {
    margin: 0 0 var(--space-3);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.adv-item dl[b-d4fby7qlbh] {
    display: grid;
    grid-template-columns: minmax(10rem, 14rem) 1fr;
    gap: var(--space-2) var(--space-4);
    margin: 0;
}

.adv-item dt[b-d4fby7qlbh] {
    font-weight: var(--font-weight-bold);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.adv-item dd[b-d4fby7qlbh] {
    margin: 0;
}

.adv-meta[b-d4fby7qlbh] {
    margin-top: var(--space-6);
}

.adv-meta h2[b-d4fby7qlbh] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
}

.adv-meta p[b-d4fby7qlbh] {
    margin: 0 0 var(--space-3);
}

.adv-meta a[b-d4fby7qlbh],
.adv-foot a[b-d4fby7qlbh] {
    color: var(--text-link);
}

.adv-foot[b-d4fby7qlbh] {
    margin-top: var(--space-8);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--font-size-sm);
}

/* Telefon: Beschreibungsliste untereinander statt zweispaltig */
@media (max-width: 40rem) {
    .advisories[b-d4fby7qlbh] {
        padding: var(--space-3) var(--space-3) var(--space-6);
    }

    .adv-item dl[b-d4fby7qlbh] {
        grid-template-columns: 1fr;
        gap: var(--space-1) 0;
    }

    .adv-item dt[b-d4fby7qlbh] {
        margin-top: var(--space-2);
    }

    .adv-head h1[b-d4fby7qlbh] {
        font-size: var(--font-size-xl);
    }
}
/* /Components/Shared/BrowserPushCard.razor.rz.scp.css */
/* Browser-Benachrichtigungen card. No Bootstrap in this app -- the grid classes in app.css
   exist only so legacy markup keeps working, so this does its own flex on the --space scale. */

.bpc-intro[b-iqwo51xsfm] {
    margin: 0 0 var(--space-3) 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    max-width: 70ch;
}

.bpc-row[b-iqwo51xsfm] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.bpc-label[b-iqwo51xsfm] {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

/* Pushes the buttons to the trailing edge on a wide card, and onto their own line on a
   phone -- without flex-shrink:0, which is what forced /heizungen past the viewport. */
.bpc-actions[b-iqwo51xsfm] {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
    margin-left: auto;
    min-width: 0;
}

.bpc-hint[b-iqwo51xsfm] {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    max-width: 52ch;
}

.bpc-message[b-iqwo51xsfm] {
    margin: var(--space-3) 0 0 0;
}
/* /Components/Shared/DocumentVersionsModal.razor.rz.scp.css */
/* ADR-0036 — shared versions modal scoped styles. Applies via
   Blazor's CSS isolation to elements inside DocumentVersionsModal.razor,
   regardless of which host page rendered the component. */

/* ── Backdrop + modal frame ─────────────────────────────────── */

.modal-backdrop[b-rnigq1to1e] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 1000;
    padding: 4rem 1rem 2rem;
    overflow-y: auto;
    animation: modal-fade-b-rnigq1to1e 120ms ease-out;
}

@keyframes modal-fade-b-rnigq1to1e {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-window[b-rnigq1to1e] {
    background: var(--bg-surface, #fff);
    border-radius: 10px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28),
                0 2px 6px rgba(15, 23, 42, 0.08);
    width: min(960px, 100%);
    max-height: calc(100vh - 7rem);
    display: flex;
    flex-direction: column;
    animation: modal-slide-b-rnigq1to1e 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modal-slide-b-rnigq1to1e {
    from { transform: translateY(-8px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

/* ── Header ─────────────────────────────────────────────────── */

.modal-header[b-rnigq1to1e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-default);
    background: linear-gradient(180deg,
        var(--bg-elevated, #f8fafc) 0%,
        var(--bg-surface, #fff) 100%);
    border-radius: 10px 10px 0 0;
}

.modal-header h4[b-rnigq1to1e] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close[b-rnigq1to1e] {
    background: none;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    color: var(--text-muted);
    line-height: 1;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
    transition: background 100ms, color 100ms;
}
.modal-close:hover[b-rnigq1to1e] {
    background: var(--bg-elevated, #f1f5f9);
    color: var(--text-primary);
}

/* ── Body ───────────────────────────────────────────────────── */

.modal-body[b-rnigq1to1e] {
    padding: 1.25rem 1.5rem 1.5rem;
    overflow-y: auto;
}

.modal-intro[b-rnigq1to1e] {
    margin: 0 0 1.25rem;
    color: var(--text-muted);
    font-size: 0.92rem;
}
.modal-intro strong[b-rnigq1to1e] {
    color: var(--text-primary);
    font-weight: 600;
}

/* ADR-0172 Stufe 3 — one-shot admin action to encrypt an entire (still plaintext) chain. */
.mark-confidential-row[b-rnigq1to1e] {
    margin: 0 0 1.25rem;
}

/* ── New-version card ───────────────────────────────────────── */

.new-version-card[b-rnigq1to1e] {
    background: linear-gradient(180deg,
        rgba(59, 130, 246, 0.04) 0%,
        rgba(59, 130, 246, 0.01) 100%);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.new-version-header[b-rnigq1to1e] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--color-primary);
    font-size: 0.98rem;
}

.new-version-icon[b-rnigq1to1e] {
    font-size: 1.05rem;
    line-height: 1;
}

.new-version-grid[b-rnigq1to1e] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 720px) {
    .new-version-grid[b-rnigq1to1e] {
        grid-template-columns: 2fr 1fr;
        gap: 1.5rem;
        align-items: start;
    }
}

.new-version-field[b-rnigq1to1e] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.new-version-field label[b-rnigq1to1e] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.optional-tag[b-rnigq1to1e] {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-elevated, #f1f5f9);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ── Note textarea — the focus of this restyle ──────────────── */

.note-textarea[b-rnigq1to1e] {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.45;
    resize: vertical;
    min-height: 4.5rem;
    background: var(--bg-surface, #fff);
    color: var(--text-primary);
    transition: border-color 120ms, box-shadow 120ms;
}

.note-textarea[b-rnigq1to1e]::placeholder {
    color: var(--text-muted);
    font-style: italic;
}

.note-textarea:focus[b-rnigq1to1e] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.note-hint[b-rnigq1to1e] {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
    line-height: 1.4;
}

/* ── File picker affordance ─────────────────────────────────── */

.version-file-input[b-rnigq1to1e] {
    font-size: 0.9rem;
}

.picked-file[b-rnigq1to1e] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding: 0.35rem 0.6rem;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: var(--color-success);
    border-radius: var(--radius);
    font-size: 0.85rem;
    max-width: 100%;
}

.picked-file-name[b-rnigq1to1e] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 16rem;
}

/* ── Action button ──────────────────────────────────────────── */

.new-version-actions[b-rnigq1to1e] {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
}

.btn-primary-action[b-rnigq1to1e] {
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background 100ms, transform 100ms;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25);
}

.btn-primary-action:hover:not(:disabled)[b-rnigq1to1e] {
    background: #1d4ed8;
    transform: translateY(-1px);
}

.btn-primary-action:active:not(:disabled)[b-rnigq1to1e] {
    transform: translateY(0);
}

.btn-primary-action:disabled[b-rnigq1to1e] {
    background: var(--border-strong);
    color: var(--text-secondary);
    cursor: not-allowed;
    box-shadow: none;
}

/* ── Version table ──────────────────────────────────────────── */

.version-table[b-rnigq1to1e] {
    margin-top: 0.25rem;
}

.version-table th[b-rnigq1to1e] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-default);
}

.version-table td[b-rnigq1to1e] {
    padding: 0.65rem 0.5rem;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: top;
}

.version-table tr.version-current[b-rnigq1to1e] {
    background: rgba(59, 130, 246, 0.05);
}

.version-table tr:hover:not(.version-current)[b-rnigq1to1e] {
    background: var(--bg-elevated, #f8fafc);
}

.version-number[b-rnigq1to1e] {
    font-weight: 600;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    color: var(--text-primary);
}

.version-current-badge[b-rnigq1to1e] {
    display: inline-block;
    margin-left: 0.45rem;
    padding: 0.12rem 0.5rem;
    font-size: 0.68rem;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    vertical-align: middle;
}

.change-note-cell[b-rnigq1to1e] {
    max-width: 18rem;
}

.change-note[b-rnigq1to1e] {
    display: block;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.muted[b-rnigq1to1e] {
    color: var(--text-muted);
}

/* Inherited classes (dok-form-row, doc-actions, doc-table, btn,
   btn-sm, btn-outline-*) come from the host page's global styles. */
/* /Components/Shared/Gantt/GanttZeitleiste.razor.rz.scp.css */
/* Layout hier und nicht über Bootstrap-Utilities: diese App liefert kein d-flex/gap-* aus
   (No-Bootstrap-Grid-Regel), solche Klassen wären wirkungslos. */

.gz[b-r4i23jramw] { display: flex; align-items: flex-start; width: 100%; }

/* Namensspalte schmal halten, aber nicht schrumpfen lassen; die Zeitachse bekommt den Rest.
   min-width:0 auf dem Flex-Kind ist nötig, sonst weigert es sich zu schrumpfen und der
   Container läuft über statt zu scrollen. */
.gz-rail[b-r4i23jramw] { flex: 0 0 clamp(200px, 22%, 320px); border-right: 1px solid var(--border-default); }
.gz-scroll[b-r4i23jramw] { flex: 1 1 auto; min-width: 0; overflow-x: auto; }
/* Die waagerechte Bildlaufleiste war schwer zu treffen (Bedienerrückmeldung 2026-08-23):
   dünn, im Ruhezustand teils unsichtbar, und sie grenzte unmittelbar an den Balken der
   letzten Aufgabe — wer sie greifen wollte, verschob einen Termin. Die Höhe kommt aus dem
   Zeichenbereich (GanttMath.ScrollRandHoehe schafft den toten Streifen darüber), hier wird
   die Leiste selbst größer und dauerhaft sichtbar gemacht.

   Dauerhaft sichtbar und nicht nur beim Zeigen: diese Ansicht läuft auch auf
   Bedienpanels, wo es kein Zeigen gibt — eine Leiste, die erst bei Mausbewegung erscheint,
   existiert dort schlicht nicht. Aus demselben Grund 14 px statt der üblichen 8: das ist
   die Größenordnung, die ein Finger trifft. */
.gz-scroll[b-r4i23jramw] { scrollbar-width: auto; scrollbar-color: var(--border-strong) var(--surface-sunken); }
.gz-scroll[b-r4i23jramw]::-webkit-scrollbar { height: 14px; }
.gz-scroll[b-r4i23jramw]::-webkit-scrollbar-track { background: var(--surface-sunken); border-radius: 7px; }
.gz-scroll[b-r4i23jramw]::-webkit-scrollbar-thumb {
    background: var(--border-strong); border-radius: 7px;
    border: 3px solid var(--surface-sunken);   /* Rand macht den Griff optisch schlanker, die Trefferfläche bleibt 14 px */
}
.gz-scroll[b-r4i23jramw]::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

.gz-rail-kopf[b-r4i23jramw] { height: var(--gz-kopf); background: var(--surface-sunken); border-bottom: 1px solid var(--border-default); }

.gz-rail-zeile[b-r4i23jramw] {
    height: var(--gz-zeile);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0 var(--space-2);
    overflow: hidden;
    border-bottom: 1px solid var(--border-subtle);
}

/* Dieselbe Streifen-Parität wie im SVG rechts: eine Zeile liest sich dadurch als EINE Zeile,
   auch wenn ihr Balken weit rechts steht. */
.gz-band[b-r4i23jramw] { background: color-mix(in srgb, var(--surface-sunken) 70%, transparent); }

.gz-rail-projekt[b-r4i23jramw] { font-weight: 600; color: var(--text-primary); }
.gz-rail-aufgabe[b-r4i23jramw] { font-weight: 400; color: var(--text-secondary); font-size: .875rem; }
.gz-rail-aufgabe .gz-name[b-r4i23jramw] { padding-left: var(--space-3); }

/* Aufklappen ist ein Schalter, kein Link: eigener Button, per Tastatur erreichbar, Zustand
   wird angesagt. Wo nichts aufzuklappen ist, hält ein leeres Element die Spalte in der Flucht. */
/* Trefferflaeche, nicht nur Glyphe: 1,25em breit und eine Textzeile hoch waren rund
   17x14 px — unter dem 24x24-Minimum und im Betrieb schwer zu treffen (Bedienerbefund
   2026-08-25). Die Zeile ist ohnehin --gz-zeile hoch; der Schalter fuellt sie jetzt aus,
   ohne dass die Zeile waechst. Das leere Platzhalter-Element traegt dieselbe Klasse und
   haelt die Spalte damit weiter in der Flucht. */
.gz-caret[b-r4i23jramw] {
    flex: 0 0 1.75rem;
    align-self: stretch;
    min-height: 1.5rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; padding: 0;
    cursor: pointer; color: var(--text-muted);
    font-size: 1rem; line-height: 1;
    border-radius: var(--radius-sm);
}
.gz-caret:hover[b-r4i23jramw] { color: var(--text-primary); background: var(--surface-sunken); }
/* Sichtbarer Fokus: der Schalter ist per Tastatur erreichbar. */
.gz-caret:focus-visible[b-r4i23jramw] { outline: 2px solid var(--color-primary); outline-offset: -2px; }

/* Der Farbpunkt wiederholt die Balkenfarbe am Namen — beim Querlesen findet man die Zeile
   sonst nur über ihre Position. */
.gz-farbe[b-r4i23jramw] { flex: 0 0 auto; width: 10px; height: 10px; border-radius: var(--radius-xs); }

/* Die Anlagennummer bekommt eigene Schrift: dicktengleich wie in der Tabelle
   „Vorhandene Projekte“, damit sie nicht als Teil des Namens gelesen wird. Eine
   Rangzahl gibt es hier nicht mehr — die Achse ordnet nach Termin. */
.gz-nummer[b-r4i23jramw] {
    font-family: var(--font-mono); font-size: .85em; font-weight: 400;
    color: var(--text-secondary); margin-right: var(--space-1);
}

.gz-name[b-r4i23jramw] { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; }
a.gz-name:hover[b-r4i23jramw] { text-decoration: underline; }

.gz-prozent[b-r4i23jramw] { flex: 0 0 auto; min-width: 3.5em; text-align: right; color: var(--text-secondary); font-variant-numeric: tabular-nums; font-size: .8125rem; }

.gz-svg[b-r4i23jramw] { display: block; }
.gz-achse-trenner[b-r4i23jramw] { stroke: var(--border-default); }
.gz-zeilen-band[b-r4i23jramw] { fill: var(--surface-sunken); opacity: .7; pointer-events: none; }
.gz-zeilen-trenner[b-r4i23jramw] { stroke: var(--border-subtle); pointer-events: none; }
.gz-monats-linie[b-r4i23jramw] { stroke: var(--border-subtle); }
.gz-heute[b-r4i23jramw] { stroke: var(--color-primary); stroke-width: 2; }

/* Farbe kommt je Element aus GanttPalette (fill=) — kategoriale Datenfarben, nicht Chrome,
   deshalb bewusst kein semantisches Token. Hier nur die Deckkraft: geplante Dauer gedämpft,
   Fortschritt voll.

   Die Werte sind ERPROBT, nicht geschätzt (Bedienerrückmeldung 2026-08-24 „mach die Balken
   kräftiger"): eine Vergleichsseite mit allen fünf Palettentönen über die Stufen 0,28 bis 0,70
   zeigt, wo die Grenzen liegen. Unter ~0,5 verschwinden die hellen Töne (#56B4E9, #CC79A7)
   fast im Weiß — das war der Zustand, der als blass gemeldet wurde. Über ~0,65 ist die
   geplante Dauer kaum noch von der vollen Deckkraft des Fortschritts zu unterscheiden, und
   genau diese Unterscheidung IST die Aussage des Balkens. 0,55/0,65 liegt in der Mitte.

   Aufgaben etwas kräftiger als Projekte: aufgeklappt liegt die Projektzeile über ihren
   Aufgaben, und ein gleich starker Sammelbalken zöge den Blick von der Arbeit ab, um die es
   geht. */
.gz-balken[b-r4i23jramw] { opacity: .55; }
.gz-balken-aufgabe[b-r4i23jramw] { opacity: .65; }
.gz-fortschritt[b-r4i23jramw] { opacity: 1; pointer-events: none; }

/* ::deep, weil diese Elemente aus einem MarkupString stammen: Laufzeit-Markup bekommt kein
   Scope-Attribut der CSS-Isolierung, ohne ::deep griffe keine dieser Regeln.
   Siehe MarkupStringScopedCssConventionTests. */
[b-r4i23jramw] .gz-achse-monat { font-size: 11px; font-weight: 600; fill: var(--text-secondary); pointer-events: none; }
[b-r4i23jramw] .gz-achse-woche { font-size: 10px; font-weight: 600; fill: var(--text-secondary); pointer-events: none; }
[b-r4i23jramw] .gz-achse-tag { font-size: 10px; fill: var(--text-muted); pointer-events: none; }
/* Wochenlinien deutlich zurückgenommen gegenüber den Monatslinien — sonst wird die Fläche ein
   Gitter und die Balken verschwinden darin. */
[b-r4i23jramw] .gz-wochen-linie { stroke: var(--border-subtle); opacity: .45; }
[b-r4i23jramw] .gz-monats-band { fill: var(--surface-sunken); opacity: .35; pointer-events: none; }
/* /Components/Shared/PiVpnStatusBadge.razor.rz.scp.css */
.pi-vpn-badge[b-v5z5en650v] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
    padding: 0 0.5rem;
    align-self: center;
}

/* The label sits right next to the (globally styled) status dot. */
.pi-vpn-badge[b-v5z5en650v]  .status-dot-label {
    color: var(--text-secondary);
}
/* /Components/Shared/ProjektverlaufButton.razor.rz.scp.css */
/* Mirrors the .dropdown-container / .dropdown-menu idiom in wwwroot/css/app.css
   (used by HeizungenListe.razor) — same relative/absolute positioning, top:100%/left:0
   anchor, z-index, and background token (--surface-card) so this menu layers and looks
   consistent with the page's other per-row dropdowns.

   Close-on-outside-click deviation: the page-level idiom wires a document-level JS
   click-outside listener (heizungen-dropdown.js) shared across many dropdown instances
   keyed by a single _openDropdown field. No shared dropdown/popover component exists
   in Components/Shared/Ui/ to mirror instead, so this component gets a self-contained
   Blazor-native equivalent: a transparent fixed backdrop (.pv-backdrop) rendered behind
   the menu while it's open, closing it on its own @onclick — no JS interop, no
   page-level shared state. The toggle button (.pv-toggle) deliberately has NO
   position/z-index of its own: while a menu is open, its own .pv-backdrop (999)
   covers the toggle in normal document flow, so a click there closes the menu via
   the backdrop (behaviorally identical to a direct toggle click) rather than
   re-opening it. An earlier version gave .pv-toggle position:relative;z-index:1001,
   which — having no ancestor establishing a stacking context — escaped into the
   ROOT stacking context and painted above the sticky .top-bar (z 50), stayed
   clickable above the Störung modal's backdrop (z 1000, so the menu then opened
   invisibly underneath the dim), and punched through other rows' .pv-backdrop
   (999), letting two menus be open at once. Do not re-add it. */

.pv-container[b-quwoutt14s] {
    position: relative;
    display: inline-block;
}

.pv-backdrop[b-quwoutt14s] {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: transparent;
    border: none;
    padding: 0;
    cursor: default;
}

.pv-menu[b-quwoutt14s] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 220px;
    padding: 0.5rem 0;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.pv-item[b-quwoutt14s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: var(--text-primary);
    transition: background-color 0.15s;
}

.pv-item:hover[b-quwoutt14s] {
    background-color: var(--surface-sunken);
    color: var(--text-primary);
}

.pv-name[b-quwoutt14s] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Shared/Ui/EkConfirmModal.razor.rz.scp.css */
/* Own the CSS for the markup this component renders. The .ct-modal* chrome stays global
   in app.css (shared with the Notiz* modals and the JS-built ones); only the few
   confirm-specific bits live here. */

.ek-confirm[b-btz4nggqee] {
    /* A confirm is a sentence, not a form — the shared 680px is far too wide for it. */
    width: min(92vw, 30rem);
}

.ek-confirm:focus-visible[b-btz4nggqee] {
    outline: none;
}

.ek-confirm-message[b-btz4nggqee] {
    margin: 0;
    white-space: pre-line; /* callers pass multi-line German text with \n */
    color: var(--text-body);
}

.ek-confirm-label[b-btz4nggqee] {
    display: block;
    margin: 0.75rem 0 0.25rem;
    font-weight: 600;
    color: var(--text-primary);
}
/* /Components/Shared/Ui/EkProfilHinweis.razor.rz.scp.css */
/* Kompakt und ruhig: der Hinweis steht auf jeder Seite, bis der Benutzer handelt —
   er darf informieren, aber nicht schreien. Farben ausschließlich über Token. */
.profil-hinweis[b-j4q5q9p0ve] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
    background: var(--color-warning-light);
    border-left: 3px solid var(--color-warning);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.profil-hinweis-icon[b-j4q5q9p0ve] {
    color: var(--color-warning-dark);
    display: inline-flex;
    align-items: center;
}

/* Trägt den Text: darf schrumpfen, damit der Link nicht aus dem Viewport rutscht.
   min-width:0 ist nötig, sonst erzwingt der längste Satz die Breite (siehe
   flex-shrink-Vorfall auf /heizungen). */
.profil-hinweis-text[b-j4q5q9p0ve] {
    flex: 1 1 20rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.profil-hinweis-link[b-j4q5q9p0ve] {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--color-warning-dark);
    text-decoration: underline;
    white-space: nowrap;
}

.profil-hinweis-link:hover[b-j4q5q9p0ve],
.profil-hinweis-link:focus-visible[b-j4q5q9p0ve] {
    color: var(--text-primary);
}

/* Ausblenden gilt nur für die Browser-Sitzung — der Knopf ist bewusst unauffällig:
   er ist ein Ausweg, keine Einladung. */
.profil-hinweis-dismiss[b-j4q5q9p0ve] {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 0 var(--space-1);
    cursor: pointer;
    line-height: 1;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.profil-hinweis-dismiss:hover[b-j4q5q9p0ve],
.profil-hinweis-dismiss:focus-visible[b-j4q5q9p0ve] {
    color: var(--text-primary);
}
/* /Components/Shared/VisuPreview.razor.rz.scp.css */
.visu-preview[b-0zpkj5gdu6] {
        min-height: 200px;
    }
    
    .visu-preview svg[b-0zpkj5gdu6] {
        display: block;
        margin: 0 auto;
    }
/* /Components/VisuPreviewCanvas.razor.rz.scp.css */
.visu-preview-canvas[b-ptic8peng2] {
        position: relative;
        width: 100%;
        height: 400px;
        border: 1px solid var(--text-muted);
        border-radius: var(--radius-md);
        overflow: hidden;
    }
    
    .background-image[b-ptic8peng2] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        opacity: 0.8;
    }
    
    .preview-svg[b-ptic8peng2] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    .no-preview[b-ptic8peng2] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: var(--text-secondary);
    }
    
    .no-preview-icon[b-ptic8peng2] {
        font-size: 3rem;
        margin-bottom: 10px;
    }
    
    .page-tabs[b-ptic8peng2] {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 5px;
        background: rgba(0,0,0,0.9);
        padding: 5px;
        border-radius: var(--radius);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .page-tab[b-ptic8peng2] {
        padding: 5px 12px;
        border: 1px solid var(--border-default);
        border-radius: var(--radius-sm);
        background: white;
        cursor: pointer;
        font-size: 0.85rem;
    }
    
    .page-tab:hover[b-ptic8peng2] {
        background: #f0f0f0;
    }
    
    .page-tab.active[b-ptic8peng2] {
        background: var(--color-primary);
        color: var(--surface-card);
        border-color: var(--color-primary);
    }