@import '_content/SmartArbeitsschutz.Modules.EquipmentRegister.Web/SmartArbeitsschutz.Modules.EquipmentRegister.Web.1gaz2hlut4.bundle.scp.css';
@import '_content/SmartArbeitsschutz.Modules.Hazards.Web/SmartArbeitsschutz.Modules.Hazards.Web.d466cv6u1i.bundle.scp.css';
@import '_content/SmartArbeitsschutz.Modules.MasterData.Web/SmartArbeitsschutz.Modules.MasterData.Web.z12clcvjyd.bundle.scp.css';
@import '_content/SmartArbeitsschutz.Modules.OperatingInstructions.Web/SmartArbeitsschutz.Modules.OperatingInstructions.Web.vb92lfncgy.bundle.scp.css';
@import '_content/SmartArbeitsschutz.Modules.RiskAssessments.Web/SmartArbeitsschutz.Modules.RiskAssessments.Web.d4cdl470yg.bundle.scp.css';
@import '_content/SmartArbeitsschutz.Modules.Users.Web/SmartArbeitsschutz.Modules.Users.Web.oataai06ty.bundle.scp.css';
@import '_content/SmartArbeitsschutz.Shared/SmartArbeitsschutz.Shared.i89sk179c6.bundle.scp.css';

/* /Components/Layout/HazardsNavGroup.razor.rz.scp.css */
/* ── Group header: label link + chevron toggle ──────────────────────────────── */
.nav-group-header[b-qc0nzacrp0] {
    display: flex;
    align-items: center;
}

/* Padding lives in NavMenu.razor.css (::deep) so both group headers match. */
.nav-group-link[b-qc0nzacrp0] {
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

/* Section label (not a link) — click still toggles the group, so keep pointer affordance. */
.nav-group-label-toggle[b-qc0nzacrp0] {
    display: block;
    cursor: pointer;
}

.nav-group-link:hover[b-qc0nzacrp0] {
    background-color: rgba(255, 255, 255, 0.1);
}

.nav-group-link:hover .nav-group-label[b-qc0nzacrp0] {
    color: rgba(255, 255, 255, 0.75);
}

.nav-group-link.active[b-qc0nzacrp0] {
    background-color: rgba(255, 255, 255, 0.08);
}

.nav-group-toggle[b-qc0nzacrp0] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

.nav-group-toggle:hover[b-qc0nzacrp0] {
    background-color: rgba(255, 255, 255, 0.08);
}

.nav-group-label[b-qc0nzacrp0] {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.nav-chevron[b-qc0nzacrp0] {
    color: rgba(255, 255, 255, 0.35);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.nav-chevron.open[b-qc0nzacrp0] {
    transform: rotate(180deg);
}

.nav-group-items[b-qc0nzacrp0] {
    margin-top: 4px;
}

/* ── Disabled nav link (placeholder for future pages) ──────────────────────── */
.nav-link--disabled[b-qc0nzacrp0] {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* #1028: the toggle renders 28x28 - the smallest tap target in the app, and it sits in the drawer
   right next to the navigation links. Enlarged only below 1024px, where the sidebar is the touch
   drawer; on desktop it stays compact because a mouse pointer does not need the extra area. */
@media (max-width: 1023px) {
    .nav-group-toggle[b-qc0nzacrp0] {
        min-width: 44px;
        min-height: 44px;
    }
}
/* /Components/Layout/IdleTimer.razor.rz.scp.css */
.idle-overlay[b-fomflawrcc] {
    position: fixed;
    inset: 0;
    background: rgba(31, 40, 50, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 24px;
}

.idle-dialog[b-fomflawrcc] {
    background: #ffffff;
    border-radius: 12px;
    padding: 32px 28px;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.idle-icon[b-fomflawrcc] {
    margin-bottom: 16px;
}

.idle-title[b-fomflawrcc] {
    font-family: 'Manrope', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1F2832;
    margin: 0 0 10px;
}

.idle-message[b-fomflawrcc] {
    font-size: 0.9375rem;
    color: #5B6573;
    line-height: 1.6;
    margin: 0 0 24px;
}

.idle-message strong[b-fomflawrcc] {
    color: #C4633F;
    font-weight: 600;
}

.idle-actions[b-fomflawrcc] {
    display: flex;
    justify-content: center;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ── Shell layout ──────────────────────────────────────────────────────────── */
.app-shell[b-i49v43mu6m] {
    display: flex;
    min-height: 100vh;
    background-color: var(--color-slate);
}

/* ── Sidebar ───────────────────────────────────────────────────────────────── */
/* #1027: dvh after vh, twice. 100vh is the viewport with the browser chrome hidden, so on a phone
   with the address bar showing, the bottom of this box sits below what the user can see - and on
   iOS 15+ that bar sits at the bottom, right over the sidebar footer with the Impressum and
   Datenschutz links. Confirmed on a real iPhone: the links only appear after scrolling the page
   behind the drawer, which shrinks the bar. Scrolling the drawer itself does not help, because its
   content is exactly as tall as the box and so it never gets a scrollbar of its own. 100dvh tracks
   the visible height instead. Browsers without dvh ignore the second declaration and keep the vh
   value, which is what they render today. */
.sidebar[b-i49v43mu6m] {
    width: 240px;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--color-slate);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
}

.sidebar-logo[b-i49v43mu6m] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-wordmark[b-i49v43mu6m] {
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: 15px;
    letter-spacing: -0.1px;
    color: #ffffff;
    line-height: 1;
}

/* ── Main area ─────────────────────────────────────────────────────────────── */
.main-area[b-i49v43mu6m] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: var(--color-background);
}

/* ── Top bar ───────────────────────────────────────────────────────────────── */
.top-bar[b-i49v43mu6m] {
    height: 56px;
    background-color: #ffffff;
    border-bottom: 1px solid var(--color-divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
}

.top-bar-left[b-i49v43mu6m] {
    flex: 1;
}

.top-bar-right[b-i49v43mu6m] {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ── Hamburger button ──────────────────────────────────────────────────────── */
.hamburger-btn[b-i49v43mu6m] {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 6px;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-text);
}

.hamburger-btn:hover[b-i49v43mu6m] {
    background-color: var(--color-divider);
}

.hamburger-bar[b-i49v43mu6m] {
    display: block;
    width: 20px;
    height: 2px;
    background-color: currentColor;
    border-radius: 2px;
    transition: opacity 0.15s ease;
}

/* ── Content area ──────────────────────────────────────────────────────────── */
.content-area[b-i49v43mu6m] {
    flex: 1;
    padding: 28px 32px;
}

@media (max-width: 640px) {
    .content-area[b-i49v43mu6m] {
        padding: 16px;
    }

    .top-bar[b-i49v43mu6m] {
        padding: 0 16px;
    }
}

/* ── Sidebar footer (Impressum / Datenschutz links) ────────────────────────── */
.sidebar-footer[b-i49v43mu6m] {
    display: flex;
    gap: 16px;
    padding: 12px 20px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.sidebar-footer__link[b-i49v43mu6m] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    transition: color 0.15s ease;
}

.sidebar-footer__link:hover[b-i49v43mu6m] {
    color: rgba(255, 255, 255, 0.7);
}

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

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

/* ── Responsive: hamburger overlay below 1024px ────────────────────────────── */
@media (max-width: 1023px) {
    .hamburger-btn[b-i49v43mu6m] {
        display: flex;
        /* #1028: 36x36 at the base rule, below the 44px finger minimum. Only enlarged where the
           button actually exists - it is display:none from 1024px up, where a mouse is in play. */
        width: 44px;
        height: 44px;
    }

    .sidebar[b-i49v43mu6m] {
        /* Slide in from left as fixed overlay; hidden by default */
        position: fixed;
        top: 0;
        left: 0;
        /* #1027: same vh/dvh pair as the base rule - this is the variant the phone actually renders. */
        height: 100vh;
        height: 100dvh;
        z-index: 300;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        /* Keep width so content is not squished */
        min-height: 100vh;
        min-height: 100dvh;
    }

    .sidebar--open[b-i49v43mu6m] {
        transform: translateX(0);
        /* Ensure sidebar is above backdrop */
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
    }

    /* Dim backdrop shown behind the overlay */
    .nav-backdrop[b-i49v43mu6m] {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 200;
        animation: backdrop-fade-in-b-i49v43mu6m 0.18s ease;
    }

    @keyframes backdrop-fade-in-b-i49v43mu6m {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}

/* On desktop the backdrop and hamburger are never shown */
@media (min-width: 1024px) {
    .hamburger-btn[b-i49v43mu6m] {
        display: none;
    }

    .nav-backdrop[b-i49v43mu6m] {
        display: none;
    }
}
/* /Components/Layout/MasterDataNavGroup.razor.rz.scp.css */
/* ── Group header: label link + chevron toggle ──────────────────────────────── */
.nav-group-header[b-yyjs2g9uge] {
    display: flex;
    align-items: center;
}

/* Padding lives in NavMenu.razor.css (::deep) so both group headers match. */
.nav-group-link[b-yyjs2g9uge] {
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

.nav-group-link:hover[b-yyjs2g9uge] {
    background-color: rgba(255, 255, 255, 0.1);
}

.nav-group-link:hover .nav-group-label[b-yyjs2g9uge] {
    color: rgba(255, 255, 255, 0.75);
}

.nav-group-link.active[b-yyjs2g9uge] {
    background-color: rgba(255, 255, 255, 0.08);
}

.nav-group-toggle[b-yyjs2g9uge] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

.nav-group-toggle:hover[b-yyjs2g9uge] {
    background-color: rgba(255, 255, 255, 0.08);
}

.nav-group-label[b-yyjs2g9uge] {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.nav-chevron[b-yyjs2g9uge] {
    color: rgba(255, 255, 255, 0.35);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.nav-chevron.open[b-yyjs2g9uge] {
    transform: rotate(180deg);
}

.nav-group-items[b-yyjs2g9uge] {
    margin-top: 4px;
}

/* #1028: the toggle renders 28x28 - the smallest tap target in the app, and it sits in the drawer
   right next to the navigation links. Enlarged only below 1024px, where the sidebar is the touch
   drawer; on desktop it stays compact because a mouse pointer does not need the extra area. */
@media (max-width: 1023px) {
    .nav-group-toggle[b-yyjs2g9uge] {
        min-width: 44px;
        min-height: 44px;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.nav-menu[b-oeshyokn1p] {
    padding: 12px 0;
    flex: 1;
}

/* ── Sections ──────────────────────────────────────────────────────────────── */
/* ::deep lets these selectors reach into child components (MasterDataNavGroup) */
.nav-menu[b-oeshyokn1p]  .nav-section {
    padding: 4px 12px;
}

.nav-menu[b-oeshyokn1p]  .nav-section + .nav-section {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Group headers live here, not in the group components: one header is a NavLink
   (Stammdaten) and one a span (Gefahrstoffe). CSS isolation does not reach the
   markup a child component renders, so a scoped rule would apply to the span only
   and leave the NavLink unpadded — that was the 10px misalignment. ::deep hits both. */
.nav-menu[b-oeshyokn1p]  .nav-group-link {
    padding: 8px 10px;
}

/* ── Individual nav items ──────────────────────────────────────────────────── */
.nav-menu[b-oeshyokn1p]  .nav-item {
    margin: 2px 0;
}

.nav-menu[b-oeshyokn1p]  .nav-item .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.nav-menu[b-oeshyokn1p]  .nav-item .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.nav-menu[b-oeshyokn1p]  .nav-item .nav-link.active {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

/* Sub-items (under Stammdaten) */
.nav-menu[b-oeshyokn1p]  .nav-item--sub .nav-link {
    padding-left: 20px;
    font-size: 13px;
    font-weight: var(--font-weight-regular);
    color: rgba(255, 255, 255, 0.6);
}

.nav-menu[b-oeshyokn1p]  .nav-item--sub .nav-link:hover {
    color: rgba(255, 255, 255, 0.9);
    background-color: rgba(255, 255, 255, 0.08);
}

.nav-menu[b-oeshyokn1p]  .nav-item--sub .nav-link.active {
    background-color: rgba(196, 99, 63, 0.25);
    color: #ffffff;
}

/* ── Icons ─────────────────────────────────────────────────────────────────── */
.nav-menu[b-oeshyokn1p]  .nav-icon {
    flex-shrink: 0;
    opacity: 0.8;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-yudqcg4lb3],
.components-reconnect-repeated-attempt-visible[b-yudqcg4lb3],
.components-reconnect-failed-visible[b-yudqcg4lb3],
.components-pause-visible[b-yudqcg4lb3],
.components-resume-failed-visible[b-yudqcg4lb3],
.components-rejoining-animation[b-yudqcg4lb3] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-yudqcg4lb3],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-yudqcg4lb3],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-yudqcg4lb3],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-yudqcg4lb3],
#components-reconnect-modal.components-reconnect-retrying[b-yudqcg4lb3],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-yudqcg4lb3],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-yudqcg4lb3],
#components-reconnect-modal.components-reconnect-failed[b-yudqcg4lb3],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-yudqcg4lb3] {
    display: block;
}


#components-reconnect-modal[b-yudqcg4lb3] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-yudqcg4lb3 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-yudqcg4lb3 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-yudqcg4lb3 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-yudqcg4lb3]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-yudqcg4lb3 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-yudqcg4lb3 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-yudqcg4lb3 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-yudqcg4lb3 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-yudqcg4lb3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-yudqcg4lb3] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-yudqcg4lb3] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-yudqcg4lb3] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-yudqcg4lb3] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-yudqcg4lb3] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-yudqcg4lb3] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-yudqcg4lb3 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-yudqcg4lb3] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-yudqcg4lb3 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/RiskAssessmentsNavGroup.razor.rz.scp.css */
/* ── Group header: label link + chevron toggle ──────────────────────────────── */
.nav-group-header[b-lfi7zrlhp5] {
    display: flex;
    /* flex-start, not center: "Gefährdungs-beurteilung" can wrap to two lines
       (see nav-group-label--wrap), and centering would misalign the toggle then. */
    align-items: flex-start;
}

/* Padding lives in NavMenu.razor.css (::deep) so both group headers match. */
.nav-group-link[b-lfi7zrlhp5] {
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

/* Section label (not a link) — click still toggles the group, so keep pointer affordance. */
.nav-group-label-toggle[b-lfi7zrlhp5] {
    display: block;
    cursor: pointer;
}

.nav-group-link:hover[b-lfi7zrlhp5] {
    background-color: rgba(255, 255, 255, 0.1);
}

.nav-group-link:hover .nav-group-label[b-lfi7zrlhp5] {
    color: rgba(255, 255, 255, 0.75);
}

.nav-group-link.active[b-lfi7zrlhp5] {
    background-color: rgba(255, 255, 255, 0.08);
}

.nav-group-toggle[b-lfi7zrlhp5] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

.nav-group-toggle:hover[b-lfi7zrlhp5] {
    background-color: rgba(255, 255, 255, 0.08);
}

.nav-group-label[b-lfi7zrlhp5] {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

/* Wraps at the <wbr /> in the label markup (only when it doesn't fit), instead of
   pushing the toggle button out of the sidebar. */
.nav-group-label--wrap[b-lfi7zrlhp5] {
    display: inline-block;
    line-height: 1.3;
}

.nav-group-toggle[b-lfi7zrlhp5] {
    /* Keep the chevron pinned to a fixed size so a wrapped two-line label can't
       shrink it out of view. */
    flex-shrink: 0;
}

.nav-chevron[b-lfi7zrlhp5] {
    color: rgba(255, 255, 255, 0.35);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.nav-chevron.open[b-lfi7zrlhp5] {
    transform: rotate(180deg);
}

.nav-group-items[b-lfi7zrlhp5] {
    margin-top: 4px;
}

/* ── Disabled nav link (placeholder for future pages) ──────────────────────── */
.nav-link--disabled[b-lfi7zrlhp5] {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* #1028: the toggle renders 28x28 - the smallest tap target in the app, and it sits in the drawer
   right next to the navigation links. Enlarged only below 1024px, where the sidebar is the touch
   drawer; on desktop it stays compact because a mouse pointer does not need the extra area. */
@media (max-width: 1023px) {
    .nav-group-toggle[b-lfi7zrlhp5] {
        min-width: 44px;
        min-height: 44px;
    }
}
/* /Components/Layout/UserMenu.razor.rz.scp.css */
/* User menu trigger */
.user-menu[b-kdl1t0utnv] {
    position: relative;
}

.user-menu-trigger[b-kdl1t0utnv] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--color-anthracite);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    transition: background-color 0.15s ease;
}

.user-menu-trigger:hover[b-kdl1t0utnv] {
    background-color: var(--color-background);
}

.user-avatar[b-kdl1t0utnv] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--color-slate);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
}

.user-name[b-kdl1t0utnv] {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chevron[b-kdl1t0utnv] {
    color: var(--color-text-light);
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.chevron.open[b-kdl1t0utnv] {
    transform: rotate(180deg);
}

/* Transparent full-screen backdrop rendered behind the dropdown.
   Captures clicks outside the menu and closes it without JS interop. */
.dropdown-backdrop[b-kdl1t0utnv] {
    position: fixed;
    inset: 0;
    z-index: 199; /* one below .user-menu-dropdown (z-index: 200) */
}

/* User menu dropdown */
.user-menu-dropdown[b-kdl1t0utnv] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background-color: #ffffff;
    border: 1px solid var(--color-divider);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    min-width: 200px;
    padding: 6px;
    z-index: 200;
}

/* Section label for customer switcher inside dropdown */
.user-menu-section-label[b-kdl1t0utnv] {
    padding: 4px 10px 6px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.user-menu-item[b-kdl1t0utnv] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: var(--font-weight-regular);
    color: var(--color-anthracite);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.1s ease;
}

.user-menu-item:hover[b-kdl1t0utnv] {
    background-color: var(--color-background);
}

.user-menu-item--disabled[b-kdl1t0utnv] {
    color: var(--color-text-light);
    cursor: default;
}

.user-menu-item--disabled:hover[b-kdl1t0utnv] {
    background: none;
}

.user-menu-item--logout[b-kdl1t0utnv] {
    color: var(--color-text-secondary);
}

/* Customer items inside the dropdown */
.user-menu-item--customer[b-kdl1t0utnv] {
    font-size: 13px;
    gap: 8px;
}

.user-menu-item--customer-active[b-kdl1t0utnv] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-slate);
    cursor: default;
}

.user-menu-divider[b-kdl1t0utnv] {
    height: 1px;
    background-color: var(--color-divider);
    margin: 4px 0;
}

.user-menu-form[b-kdl1t0utnv] {
    display: contents;
}

/* Responsive */
@media (max-width: 767px) {
    .user-name[b-kdl1t0utnv] {
        display: none;
    }
}
/* /Components/Pages/AdminCustomers.razor.rz.scp.css */
.sl-breadcrumb[b-dwxlg2kyrp] {
    margin-bottom: var(--spacing-4);
}

.sl-page-header[b-dwxlg2kyrp] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--spacing-6);
}

.sl-title[b-dwxlg2kyrp] {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-1);
}

.sl-subtitle[b-dwxlg2kyrp] {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin: 0;
}

.sl-search-row[b-dwxlg2kyrp] {
    margin-bottom: var(--spacing-4);
    max-width: 400px;
}

.sl-search[b-dwxlg2kyrp] {
    width: 100%;
}

.sl-no-results[b-dwxlg2kyrp] {
    color: var(--color-text-secondary);
    font-style: italic;
    margin-top: var(--spacing-4);
}

/* ── Table wrapper and rows (matches StorageLocationsPage.razor.css pattern) ── */

.sl-table-wrap[b-dwxlg2kyrp] {
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: var(--spacing-4);
}

.sl-row[b-dwxlg2kyrp] {
    background-color: #ffffff;
}

.sl-row:hover[b-dwxlg2kyrp] {
    background-color: #F9FAFB;
}

.sl-row td[b-dwxlg2kyrp] {
    vertical-align: middle;
    border-bottom: 1px solid #F3F4F6;
}

/* ── Tabs (shared pattern with Profile.razor, scoped CSS is not shared across files) ── */

.profile-tabs[b-dwxlg2kyrp] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #E5E7EB;
    margin-bottom: 1.75rem;
}

.profile-tab[b-dwxlg2kyrp] {
    padding: 0.6rem 1.1rem;
    font-family: var(--font-headline);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.profile-tab:hover[b-dwxlg2kyrp] {
    color: var(--color-anthracite);
}

.profile-tab.active[b-dwxlg2kyrp] {
    color: var(--color-terracotta);
    border-bottom-color: var(--color-terracotta);
}

/* ── Inline form (create customer) ───────────────────────────────────────── */

.sl-inline-form[b-dwxlg2kyrp] {
    background: #ffffff;
    border: 0.5px solid #E5E7EB;
    border-radius: 10px;
    margin-bottom: 16px;
    overflow: hidden;
}

.sl-form-header[b-dwxlg2kyrp] {
    background: #3A4A5C;
    color: #ffffff;
    padding: 8px 16px;
}

.sl-form-title[b-dwxlg2kyrp] {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.sl-form-body[b-dwxlg2kyrp] {
    padding: 16px;
}

.sl-form-label[b-dwxlg2kyrp] {
    font-size: 13px;
    color: #6B7280;
}

/* ── Verlauf table (matches um-history-table / oi-history-table pattern) ─── */

.ac-verlauf-table[b-dwxlg2kyrp] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ac-verlauf-th[b-dwxlg2kyrp] {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 12px 8px 0;
    border-bottom: 1.5px solid var(--color-divider);
    text-align: left;
}

.ac-verlauf-td[b-dwxlg2kyrp] {
    padding: 10px 12px 10px 0;
    vertical-align: top;
    color: var(--color-anthracite);
    font-size: 13px;
    border-bottom: 1px solid var(--color-divider);
}

.ac-verlauf-row:last-child .ac-verlauf-td[b-dwxlg2kyrp] {
    border-bottom: none;
}
/* /Components/Pages/Cockpit.razor.rz.scp.css */
.cp-loading[b-oln5n77hw6] {
    color: #6B7280;
}

.cp-hero-row[b-oln5n77hw6] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.cp-hero[b-oln5n77hw6] {
    margin-bottom: 0;
}

.cp-filter[b-oln5n77hw6] {
    flex-shrink: 0;
}

.cp-filter-label[b-oln5n77hw6] {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8B95A3;
    font-weight: 600;
    margin-bottom: 4px;
}

.cp-filter-select[b-oln5n77hw6] {
    min-width: 180px;
    width: auto;
    box-sizing: border-box;
    font-size: 0.85rem;
    font-family: Inter, sans-serif;
    font-weight: 500;
    padding: 5px 28px 5px 10px;
    background-color: #ffffff;
    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='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    border: 1px solid var(--color-slate);
    border-radius: 6px;
    color: var(--color-slate);
    cursor: pointer;
    line-height: 1.4;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
}

.cp-filter-select:focus[b-oln5n77hw6] {
    box-shadow: 0 0 0 2px rgba(58, 74, 92, 0.2);
}

.cp-title[b-oln5n77hw6] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1F2832;
    margin: 0 0 3px;
}

.cp-subtitle[b-oln5n77hw6] {
    color: #5B6573;
    font-size: 0.9rem;
    margin: 0;
}

.cp-zone-label[b-oln5n77hw6] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8B95A3;
    font-weight: 700;
    margin: 26px 0 13px;
}

/* ── Five-phase horizontal flow (#492) ────────────────────────────────────── */

.cp-phase-scroll[b-oln5n77hw6] {
    overflow-x: auto;
    padding-bottom: 4px;
}

/* CSS grid with 3 named row tracks so all phase columns share the same head/expl
   row heights via CSS subgrid. Arrow divs span all 3 rows to stay vertically centred.
   minmax(160px, 1fr) sets the minimum track width in the grid definition; the item
   must have min-width:0 so its content cannot inflate the track beyond 1fr. */
/* 195px column minimum is derived, not guessed: the longest compound-break fragment
   ("Gefährdungs") measures 82px, and a tile spends 105px on column padding, tile padding,
   icon, gap and the dot gutter before any text. Below this the fragment cannot fit, the
   soft hyphen is unreachable and the label degrades to a character break. */
.cp-phase-cols[b-oln5n77hw6] {
    display: grid;
    grid-template-columns: minmax(195px, 1fr) auto minmax(195px, 1fr) auto minmax(195px, 1fr) auto minmax(195px, 1fr) auto minmax(195px, 1fr);
    grid-template-rows: auto auto 1fr;
    min-width: 1060px;
}

.cp-phase-col[b-oln5n77hw6] {
    min-width: 0;
    grid-row: span 3;
    display: grid;
    grid-template-rows: subgrid;
    padding: 11px 9px;
    border-radius: 12px;
    border: 1px solid #E2E6EB;
}

.cp-phase-col--current[b-oln5n77hw6] {
    background: var(--color-warm-light);
    border-color: #D9CBBE;
}

.cp-phase-head[b-oln5n77hw6] {
    display: flex;
    align-items: center;
    gap: 6px;
    align-self: start;
    padding-bottom: 4px;
}

.cp-phase-num[b-oln5n77hw6] {
    display: inline-flex;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-slate);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    flex: none;
}

.cp-phase-col--current .cp-phase-num[b-oln5n77hw6] {
    background: var(--color-terracotta);
}

.cp-phase-name[b-oln5n77hw6] {
    font-size: 12.5px;
    font-weight: 700;
    color: #1F2832;
}

.cp-phase-check[b-oln5n77hw6] {
    color: #2E7D5B;
}

.cp-phase-expl[b-oln5n77hw6] {
    font-size: 11px;
    color: #5B6573;
    line-height: 1.45;
    margin: 0;
    padding-bottom: 6px;
    align-self: start;
}

/* Spans all 3 grid rows so the arrow SVG can flex-start below the phase number */
.cp-phase-arrow[b-oln5n77hw6] {
    grid-row: span 3;
    display: flex;
    align-items: flex-start;
    padding: 6px 2px 0;
    color: #8B95A3;
}

/* Stretches to fill the third grid row (no align-self: start) so the phase note's
   margin-top: auto has height to push against and lands at the column bottom.
   min-width: 0 stops long tile labels from inflating the flex container. */
.cp-phase-tiles[b-oln5n77hw6] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.cp-phase-note[b-oln5n77hw6] {
    font-size: 10.5px;
    color: #5B6573;
    border-top: 1px solid #EEF1F4;
    padding-top: 8px;
    margin-top: auto;
    line-height: 1.45;
}

.cp-phase-note b[b-oln5n77hw6] {
    color: #1F2832;
    font-weight: 600;
}

/* ── Tiles ─────────────────────────────────────────────────────────────────── */

.cp-tile-wrap[b-oln5n77hw6] {
    scroll-margin-top: 16px;
    min-width: 0;
}

.cp-tile[b-oln5n77hw6] {
    background: #ffffff;
    border: 1px solid #E2E6EB;
    border-radius: 11px;
    padding: 12px 13px;
    display: flex;
    gap: 9px;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    font-family: inherit;
    box-sizing: border-box;
    position: relative;
}

button.cp-tile[b-oln5n77hw6] {
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
}

button.cp-tile:hover[b-oln5n77hw6] {
    border-color: var(--color-slate);
}

.cp-tile--open[b-oln5n77hw6] {
    border-color: var(--color-terracotta);
    box-shadow: 0 0 0 3px rgba(196, 99, 63, 0.15);
}

/* Light terracotta outline marks a tile as "zu bearbeiten" at a glance, without
   competing with the stronger solid border --open uses for the expanded tile. */
.cp-tile--active[b-oln5n77hw6] {
    border-color: #E3A98C;
}

/* Explicit darker dashed border: the default #E2E6EB is invisible against the
   warm-light background of the current phase column. */
.cp-tile--future[b-oln5n77hw6] {
    border-style: dashed;
    border-color: #B9C2CC;
    background: rgba(255, 255, 255, 0.5);
    cursor: default;
}

.cp-tile-icon[b-oln5n77hw6] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    flex: none;
    display: grid;
    place-items: center;
    background: #E7ECF1;
    color: var(--color-slate);
    font-size: 16px;
}

.cp-tile--done .cp-tile-icon[b-oln5n77hw6] { background: #DCEEE2; color: #2E7D5B; }
.cp-tile--active .cp-tile-icon[b-oln5n77hw6] { background: var(--color-warm-light); color: var(--color-terracotta); }
.cp-tile--wait .cp-tile-icon[b-oln5n77hw6] { background: #F7EFCE; color: #8A6D1A; }
.cp-tile--future .cp-tile-icon[b-oln5n77hw6],
.cp-tile--na .cp-tile-icon[b-oln5n77hw6] { background: #EEF1F4; color: #8B95A3; }

.cp-tile-body[b-oln5n77hw6] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Column, not row: the "Zu bearbeiten" chip on its own line leaves the title text the
   full tile width. In a row the chip competed for space and squeezed the text to a few
   characters, which made hyphens:auto break after every syllable. */
.cp-tile-title[b-oln5n77hw6] {
    font-size: 13px;
    font-weight: 600;
    color: #1F2832;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
    /* leave room for the absolutely-positioned dot */
    padding-right: 16px;
}

/* manual, not auto: breaks only at the curated compound-word soft hyphens in
   TileWrapName, so "Gefahrstoff-kataster" wins over the syllable point
   "Gefahrstoffka-taster" that auto hyphenation would otherwise prefer. */
.cp-tile-title-text[b-oln5n77hw6] {
    align-self: stretch;
    min-width: 0;
    overflow-wrap: break-word;
    hyphens: manual;
    -webkit-hyphens: manual;
}

.cp-tile-line[b-oln5n77hw6] {
    font-size: 11.5px;
    color: #5B6573;
    margin-top: 2px;
    min-width: 0;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.cp-tile--wait .cp-tile-line[b-oln5n77hw6] { color: #8A6D1A; }
.cp-tile--future .cp-tile-line[b-oln5n77hw6],
.cp-tile--na .cp-tile-line[b-oln5n77hw6] { color: #8B95A3; }

.cp-tile-chip[b-oln5n77hw6] {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background: var(--color-terracotta);
    color: #fff;
    padding: 2px 7px;
    border-radius: 5px;
}

.cp-tile-dot[b-oln5n77hw6] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
    /* absolute so the dot never steals horizontal space from the title text */
    position: absolute;
    top: 14px;
    right: 12px;
}

/* Extends the Cockpit's existing ok/warn/critical status vocabulary with the
   done/active/wait/future/na states from the phase-flow mockup (#492). */
.cp-tile-dot--done[b-oln5n77hw6],
.cp-light--done[b-oln5n77hw6] { background: #3DA35D; }
.cp-tile-dot--active[b-oln5n77hw6],
.cp-light--active[b-oln5n77hw6] { background: var(--color-terracotta); }
.cp-tile-dot--wait[b-oln5n77hw6],
.cp-light--wait[b-oln5n77hw6] { background: #E0A800; }
.cp-tile-dot--future[b-oln5n77hw6],
.cp-light--future[b-oln5n77hw6] { background: #9AA6B2; }
.cp-tile-dot--na[b-oln5n77hw6],
.cp-light--na[b-oln5n77hw6] { background: #C9D0D8; }

/* Same white as .hd-card (HazardsCockpitSummary.razor.css) — the donut/KPI tiles inside.
   Hierarchy comes from the border + the page's own #F5F7FA showing around the box, not from
   a fill difference. One box, one treatment for every detail view (Gefahrstoffe and BA both
   render their KPI cards inside it). */
.cp-tile-detail-full[b-oln5n77hw6] {
    margin-top: 16px;
    background: #fff;
    border: 1.5px solid var(--color-divider);
    border-radius: 12px;
    padding: 18px 20px;
}

/* BA Prüfstand KPI row — mirrors the Gefahrstoffe dashboard's .hd-kpi cards
   (Hazards/Web/Components/HazardsCockpitSummary.razor.css) so both detail views read as
   one design: white cards, big value, uppercase label, optional status tint. */
.cp-kpi-row[b-oln5n77hw6] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.cp-kpi[b-oln5n77hw6] {
    flex: 1 1 140px;
    background: #fff;
    border: 1.5px solid var(--color-divider);
    border-radius: 10px;
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.cp-kpi:hover[b-oln5n77hw6] {
    border-color: var(--color-slate);
}

.cp-kpi-value[b-oln5n77hw6] {
    /* 21px matches the reduced .hd-kpi__value so the BA and Gefahrstoffe detail views
       stay one design, sized for the compact Cockpit context (see that rule's comment). */
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-slate);
}

.cp-kpi-label[b-oln5n77hw6] {
    font-size: 11.5px;
    font-weight: 500;
    color: #5B6573;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.cp-kpi-sub[b-oln5n77hw6] {
    font-size: 11px;
    color: #8B95A3;
    margin-top: 2px;
}

/* Status tints match the Hazards KPI vocabulary (danger red / warn terracotta / ok green). */
.cp-kpi--danger[b-oln5n77hw6] {
    background: #FCEBEB;
    border-color: #F3D2D2;
}
.cp-kpi--danger .cp-kpi-value[b-oln5n77hw6],
.cp-kpi--danger .cp-kpi-label[b-oln5n77hw6],
.cp-kpi--danger .cp-kpi-sub[b-oln5n77hw6] { color: #A32D2D; }

.cp-kpi--warn[b-oln5n77hw6] {
    background: #FAEEDA;
    border-color: #EBDCBE;
}
.cp-kpi--warn .cp-kpi-value[b-oln5n77hw6],
.cp-kpi--warn .cp-kpi-label[b-oln5n77hw6],
.cp-kpi--warn .cp-kpi-sub[b-oln5n77hw6] { color: #854F0B; }

.cp-kpi--ok .cp-kpi-value[b-oln5n77hw6] { color: #0F6E56; }

/* ── Weitere Bereiche ──────────────────────────────────────────────────────── */
.cp-locked-grid[b-oln5n77hw6] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.cp-locked-card[b-oln5n77hw6] {
    border: 1px dashed #E2E6EB;
    border-radius: 10px;
    padding: 13px 15px;
    background: transparent;
}

.cp-lc-name[b-oln5n77hw6] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #5B6573;
}

.cp-lc-sub[b-oln5n77hw6] {
    font-size: 0.7rem;
    color: #8B95A3;
}

@media (max-width: 760px) {
    .cp-locked-grid[b-oln5n77hw6] {
        grid-template-columns: 1fr;
    }
}

/* ── Mobile (#622): Phasen-Flow untereinander statt seitwärts ─────────────────
   .cp-phase-cols ist ein 9-spaltiges Grid (5 Phasen + 4 Pfeile) mit min-width:1060px in
   einem overflow-x:auto-Wrapper — gemessen 1063px in 343px Viewport. Auf dem Handy lagen
   damit vier von fünf Phasen hinter einem Seitwärts-Scroll. Der Flow wird zur vertikalen
   Kette: eine Phase pro Zeile, Pfeile um 90° gedreht zeigen nach unten.
   subgrid und die span-3-Platzierungen müssen dabei zurückgesetzt werden — sie beziehen
   sich auf die drei Zeilen-Tracks des Desktop-Grids, die hier nicht mehr existieren. ── */
@media (max-width: 640px) {
    .cp-phase-scroll[b-oln5n77hw6] { overflow-x: visible; }
    .cp-phase-cols[b-oln5n77hw6] {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        min-width: 0;
        gap: 0;
    }
    .cp-phase-col[b-oln5n77hw6] { grid-row: auto; grid-template-rows: auto auto auto; }
    .cp-phase-arrow[b-oln5n77hw6] {
        grid-row: auto;
        justify-content: center;
        align-items: center;
        padding: 4px 0;
    }
    /* Pfeil zeigt im vertikalen Fluss nach unten statt nach rechts. */
    .cp-phase-arrow svg[b-oln5n77hw6] { transform: rotate(90deg); }
}
/* /Components/Pages/Datenschutz.razor.rz.scp.css */
.ds-page[b-z5yrlo10o3] {
    max-width: 720px;
}

.ds-title[b-z5yrlo10o3] {
    font-size: 1.5rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: 2rem;
}

.ds-section[b-z5yrlo10o3] {
    margin-bottom: 2rem;
}

.ds-heading[b-z5yrlo10o3] {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: 0.5rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--color-divider);
}

.ds-address[b-z5yrlo10o3] {
    font-style: normal;
    line-height: 1.7;
    color: var(--color-text);
    margin-bottom: 0.75rem;
}

.ds-page p[b-z5yrlo10o3] {
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.ds-page p:last-child[b-z5yrlo10o3] {
    margin-bottom: 0;
}

.ds-list[b-z5yrlo10o3] {
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 0.75rem;
    padding-left: 1.25rem;
}

.ds-page a[b-z5yrlo10o3] {
    color: var(--color-primary);
    text-decoration: none;
}

.ds-page a:hover[b-z5yrlo10o3] {
    text-decoration: underline;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ── Page header ────────────────────────────────────────────────────────────── */

.home-header[b-h9dtp3axqk] {
    margin-bottom: 2rem;
}

.home-greeting[b-h9dtp3axqk] {
    font-family: var(--font-headline);
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: var(--color-anthracite);
    line-height: var(--line-height-tight);
    margin-bottom: 0.25rem;
}

.home-subtitle[b-h9dtp3axqk] {
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

/* ── Onboarding card (shown when tenant has 0 substances) ────────────────────── */

.onboarding-card[b-h9dtp3axqk] {
    max-width: 520px;
    border: 1.5px solid var(--color-divider);
    border-radius: 10px;
    background-color: #fff;
}

.onboarding-card__title[b-h9dtp3axqk] {
    font-family: var(--font-headline);
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    color: var(--color-anthracite);
    margin-bottom: 0.5rem;
}

.onboarding-card__body[b-h9dtp3axqk] {
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

/* ── Module tile grid ────────────────────────────────────────────────────────── */

.module-tiles[b-h9dtp3axqk] {
    max-width: 900px;
}

.module-tile[b-h9dtp3axqk] {
    border: 1.5px solid var(--color-divider);
    border-radius: 10px;
    background-color: #fff;
    color: var(--color-anthracite);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.module-tile:hover[b-h9dtp3axqk],
.module-tile:focus[b-h9dtp3axqk] {
    border-color: var(--color-terracotta);
    box-shadow: 0 4px 16px rgba(196, 99, 63, 0.12);
    color: var(--color-anthracite);
}

.module-tile__icon[b-h9dtp3axqk] {
    color: var(--color-terracotta);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: var(--color-warm-light);
    border-radius: 8px;
}

.module-tile__name[b-h9dtp3axqk] {
    font-family: var(--font-headline);
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-anthracite);
}

/* ── Status hint under tile name ─────────────────────────────────────────────── */

.module-tile__hint[b-h9dtp3axqk] {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin-top: -0.5rem;
}

.module-tile__hint--warn[b-h9dtp3axqk] {
    color: var(--color-terracotta);
}

.module-tile__hint--ok[b-h9dtp3axqk] {
    color: #3a7d44; /* accessible green – no design-token exists yet for success colour */
}

/* ── Preview / "In Planung" tile ─────────────────────────────────────────────── */

.module-tile--preview[b-h9dtp3axqk] {
    border-style: dashed;
    background-color: transparent;
    cursor: default;
    pointer-events: none;
}

.module-tile--preview:hover[b-h9dtp3axqk],
.module-tile--preview:focus[b-h9dtp3axqk] {
    border-color: var(--color-divider);
    box-shadow: none;
}

.module-tile__icon--preview[b-h9dtp3axqk] {
    color: var(--color-text-light);
    background-color: var(--color-divider);
}

.module-tile__name--preview[b-h9dtp3axqk] {
    color: var(--color-text-secondary);
}
/* /Components/Pages/Impressum.razor.rz.scp.css */
.imp-page[b-llasg1sbjs] {
    max-width: 720px;
}

.imp-title[b-llasg1sbjs] {
    font-size: 1.5rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: 2rem;
}

.imp-section[b-llasg1sbjs] {
    margin-bottom: 2rem;
}

.imp-heading[b-llasg1sbjs] {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: 0.5rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--color-divider);
}

.imp-address[b-llasg1sbjs] {
    font-style: normal;
    line-height: 1.7;
    color: var(--color-text);
}

.imp-page p[b-llasg1sbjs] {
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: 0;
}

.imp-page a[b-llasg1sbjs] {
    color: var(--color-primary);
    text-decoration: none;
}

.imp-page a:hover[b-llasg1sbjs] {
    text-decoration: underline;
}
/* /Components/Pages/ModulePreview.razor.rz.scp.css */
.module-preview-card[b-oggks7p0yv] {
    max-width: 520px;
    border: 1.5px solid var(--color-divider);
    border-radius: 10px;
    background-color: #fff;
}

.module-tile__icon[b-oggks7p0yv] {
    color: var(--color-terracotta);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: var(--color-warm-light);
    border-radius: 8px;
}

.module-preview-title[b-oggks7p0yv] {
    font-family: var(--font-headline);
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    color: var(--color-anthracite);
    margin: 0;
}

.module-preview-hint[b-oggks7p0yv] {
    color: var(--color-text-secondary);
    margin: 0;
}
/* /Components/Pages/Profile.razor.rz.scp.css */
.profile-title[b-wypz29ea36] {
    font-family: var(--font-headline);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-anthracite);
    margin: 0 0 1.5rem;
}

/* Forms stay narrow; the table in the Abrechnung tab can use full width. */
.profile-form-col[b-wypz29ea36] {
    max-width: 480px;
}

.profile-table-scroll[b-wypz29ea36] {
    overflow-x: auto;
}

/* ── Profile tabs ─────────────────────────────────────────────────────────── */
.profile-tabs[b-wypz29ea36] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #E5E7EB;
    margin-bottom: 1.75rem;
}

.profile-tab[b-wypz29ea36] {
    padding: 0.6rem 1.1rem;
    font-family: var(--font-headline);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.profile-tab:hover[b-wypz29ea36] {
    color: var(--color-anthracite);
}

.profile-tab.active[b-wypz29ea36] {
    color: var(--color-terracotta);
    border-bottom-color: var(--color-terracotta);
}

.profile-section[b-wypz29ea36] {
    margin-bottom: 0;
}

.profile-section-title[b-wypz29ea36] {
    font-family: var(--font-headline);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.3rem;
}

.profile-section-hint[b-wypz29ea36] {
    font-size: 0.85rem;
    color: var(--color-muted);
    margin-bottom: 1.1rem;
}

.profile-divider[b-wypz29ea36] {
    border-top: 1px solid #E5E7EB;
    margin: 1.75rem 0;
}

.field-group[b-wypz29ea36] {
    margin-bottom: 1.1rem;
}

.field-group label[b-wypz29ea36] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 0.35rem;
}

.field-input[b-wypz29ea36] {
    width: 100%;
    padding: 0.6rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}

.field-input:focus[b-wypz29ea36] {
    border-color: var(--color-slate);
    box-shadow: 0 0 0 3px rgba(58, 74, 92, 0.12);
}

.field-error[b-wypz29ea36] {
    display: block;
    font-size: 0.8rem;
    color: #B91C1C;
    margin-top: 0.3rem;
}

.alert-success[b-wypz29ea36] {
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 6px;
    padding: 0.7rem 1rem;
    font-size: 0.875rem;
    color: #166534;
    margin-bottom: 1.25rem;
}

.alert-error[b-wypz29ea36] {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 6px;
    padding: 0.7rem 1rem;
    font-size: 0.875rem;
    color: #B91C1C;
    margin-bottom: 1.25rem;
}

@media (max-width: 640px) {
    .profile-page[b-wypz29ea36] { padding: 0; }
    .profile-card[b-wypz29ea36] { padding: 1.25rem; }
}
/* /Components/Pages/SifaView.razor.rz.scp.css */
/* hd-* classes copied from RiskAssessmentsCockpitSummary.razor.css / HazardsCockpitSummary.razor.css
   (Blazor scoped CSS does not cross component boundaries — see comment there). Reused here
   verbatim so the SiFa view's todo cards read as the same design system (#662). */

.sifa-loading[b-w1ehx2v12t] {
    color: var(--color-text-secondary);
}

.sifa-hero[b-w1ehx2v12t] {
    margin-bottom: 1.5rem;
}

.sifa-title[b-w1ehx2v12t] {
    font-family: var(--font-headline);
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-anthracite);
    margin: 0 0 0.25rem;
}

.sifa-subtitle[b-w1ehx2v12t] {
    color: var(--color-text-secondary);
    margin: 0;
}

.sifa-sections[b-w1ehx2v12t] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sifa-section-header[b-w1ehx2v12t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.sifa-section-header .hd-card__title[b-w1ehx2v12t] {
    margin-bottom: 0;
}

.sifa-count-badge[b-w1ehx2v12t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #FAEEDA;
    color: #854F0B;
    font-size: 11.5px;
    font-weight: 700;
}

.hd-card[b-w1ehx2v12t] {
    background: #fff;
    border: 1.5px solid var(--color-divider);
    border-radius: 10px;
    padding: 1.15rem;
}

.hd-card__title[b-w1ehx2v12t] {
    font-family: var(--font-headline);
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1.25rem;
}

.hd-todo-list[b-w1ehx2v12t] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.hd-todo-item[b-w1ehx2v12t] {
    border-bottom: 1px solid var(--color-divider);
}

.hd-todo-item:last-child[b-w1ehx2v12t] {
    border-bottom: none;
}

.hd-todo-link[b-w1ehx2v12t] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    color: var(--color-anthracite);
    text-decoration: none;
    transition: background 0.12s ease;
}

.hd-todo-link:hover[b-w1ehx2v12t],
.hd-todo-link:focus[b-w1ehx2v12t] {
    background: rgba(58, 74, 92, 0.04);
    color: var(--color-anthracite);
}

.hd-todo-icon-box[b-w1ehx2v12t] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.hd-todo-text[b-w1ehx2v12t] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hd-todo-title[b-w1ehx2v12t] {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-anthracite);
    line-height: 1.3;
}

.hd-todo-subtitle[b-w1ehx2v12t] {
    font-size: 12px;
    color: #6B7280;
    line-height: 1.3;
}

.hd-todo-arrow[b-w1ehx2v12t] {
    flex-shrink: 0;
    color: var(--color-text-light);
    opacity: 0;
    transition: opacity 0.12s ease;
}

.hd-todo-link:hover .hd-todo-arrow[b-w1ehx2v12t],
.hd-todo-link:focus .hd-todo-arrow[b-w1ehx2v12t] {
    opacity: 1;
}

/* ── REACH-Listentyp-Chips ───────────────────────────────────────────────── */

/* One row per substance carries every affected list type (#741), so the chips wrap
   instead of stretching the row. Colours mirror .rc-list-badge on the REACH page —
   that CSS is component-scoped and cannot be reused across pages. */
.sifa-chip-row[b-w1ehx2v12t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin-top: 2px;
}

.sifa-list-chip[b-w1ehx2v12t] {
    display: inline-block;
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 10px;
    line-height: 1.35;
}

.sifa-list-chip--svhc[b-w1ehx2v12t] {
    background: #FCEBEB;
    color: #791F1F;
}

.sifa-list-chip--annex[b-w1ehx2v12t] {
    background: #FAEEDA;
    color: #633806;
}
/* /Components/Shared/HelpChatWidget.razor.rz.scp.css */
.help-chat[b-m55hmfze7j] {
    position: fixed;
    right: 20px;
    bottom: 20px;
    /* Above InfoTooltip's z-index 1000 — a tooltip on the page behind the panel was
       painting over the open chat (Julia catch). */
    z-index: 1100;
}

.help-chat__fab[b-m55hmfze7j] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: #C4633F;
    color: #ffffff;
    border: none;
    box-shadow: 0 6px 20px rgba(31, 40, 50, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.15s;
}

.help-chat__fab:hover[b-m55hmfze7j] {
    opacity: 0.9;
}

.help-chat__fab .ti[b-m55hmfze7j] {
    font-size: 1.4rem;
}

.help-chat__panel[b-m55hmfze7j] {
    position: absolute;
    right: 0;
    bottom: 64px;
    width: 340px;
    max-width: calc(100vw - 40px);
    max-height: min(520px, calc(100vh - 120px));
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #E7EBEF;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.help-chat__header[b-m55hmfze7j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background-color: #3A4A5C;
    color: #ffffff;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 0.9375rem;
}

.help-chat__header .ti[b-m55hmfze7j] {
    margin-right: 6px;
}

.help-chat__close[b-m55hmfze7j] {
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 2px;
}

.help-chat__messages[b-m55hmfze7j] {
    flex: 1;
    overflow-y: auto;
    padding: 14px 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 160px;
}

.help-chat__intro[b-m55hmfze7j] {
    color: #5B6573;
    font-size: 0.875rem;
    margin: 0;
}

.help-chat__bubble[b-m55hmfze7j] {
    font-size: 0.875rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    color: #1F2832;
}

/* Only the question carries a bubble. Two coloured blocks alternating down a 340px
   column is what made the panel look busy; one tinted block per exchange is enough to
   tell question from answer, and the answer gets the full width to read in. */
.help-chat__bubble--user[b-m55hmfze7j] {
    align-self: flex-end;
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 12px 12px 4px 12px;
    background-color: #EFE3DC;
}

.help-chat__bubble--assistant[b-m55hmfze7j] {
    align-self: stretch;
}

.help-chat__bubble--pending[b-m55hmfze7j] {
    color: #8B95A3;
    font-style: italic;
}

.help-chat__hint[b-m55hmfze7j] {
    margin: 0;
    padding: 6px 14px;
    font-size: 0.8125rem;
    color: #A32D2D;
    background-color: #FCEBEB;
}

.help-chat__input-row[b-m55hmfze7j] {
    display: flex;
    gap: 8px;
    padding: 10px 14px 8px;
    border-top: 1px solid #EEF1F4;
    background-color: #FAFBFC;
}

.help-chat__input[b-m55hmfze7j] {
    flex: 1;
    border: 1px solid #EEF1F4;
    border-radius: 6px;
    padding: 8px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    color: #1F2832;
}

.help-chat__input:disabled[b-m55hmfze7j] {
    background-color: #F5F7FA;
}

.help-chat__send[b-m55hmfze7j] {
    padding: 6px 12px;
}

@media (max-width: 480px) {
    .help-chat__panel[b-m55hmfze7j] {
        width: calc(100vw - 24px);
        right: -8px;
    }
}

/* Haftungshinweis: derselbe Text wie überall, aber als leise Fußnote statt als Warnung.
   Auf den Modulseiten steht er über einem Ergebnis und darf auffallen; hier steht er unter
   jeder Antwort und wog optisch so schwer wie der Inhalt. Das Warndreieck entfällt (es liest
   sich als Alarm, gemeint ist ein Dauerhinweis), die Schrift wird kleiner und grauer, und
   align-items:flex-start setzt das ⓘ auf die erste Zeile statt es neben einem vierzeiligen
   Absatz mittig schweben zu lassen. Der Wortlaut aus #640 und das ⓘ mit dem vollen
   Rechtstext bleiben unverändert — leiser, nicht weniger. Erhöhte Spezifität (p.ld-hint),
   damit die Regel unabhängig von der Bundle-Reihenfolge gegen LiabilityDisclaimer.razor.css
   gewinnt. */
[b-m55hmfze7j] p.ld-hint {
    align-items: flex-start;
    margin: 0;
    padding: 0 14px 12px;
    background-color: #FAFBFC;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #8B95A3;
}

[b-m55hmfze7j] p.ld-hint .ld-icon {
    display: none;
}

/* Der 240px breite InfoTooltip im Haftungshinweis ist am Icon zentriert und ragt im nur
   340px breiten Panel über dessen rechten Rand hinaus. Das macht das overflow:hidden-Panel
   horizontal scrollbar, und ein Fokuswechsel scrollt es sichtbar zur Seite (Header und
   Nachrichten stehen dann versetzt). Hier rechtsbündig verankern, damit kein Überhang
   entsteht. Höhere Spezifität als die Regel in InfoTooltip.razor.css, damit sie unabhängig
   von der Bundle-Reihenfolge gewinnt. */
[b-m55hmfze7j] .it-wrapper .it-text {
    left: auto;
    right: 0;
    transform: none;
}