@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-86t61fprj8] {
    display: flex;
    min-height: 100vh;
    background: linear-gradient(180deg, var(--portal-bg-accent) 0%, var(--portal-bg) 180px);
}

/* Admin UI redesign: off-screen until focused, then the first thing on the page. */
.skip-link[b-86t61fprj8] {
    position: absolute;
    left: var(--spherene-spacing-lg);
    top: -100px;
    z-index: 100;
    padding: 0.6rem 1rem;
    border-radius: var(--spherene-radius-md);
    background: var(--portal-surface);
    color: var(--portal-ink);
    font-weight: var(--spherene-weight-semibold);
    box-shadow: var(--portal-shadow-strong);
}

.skip-link:focus[b-86t61fprj8] {
    top: var(--spherene-spacing-lg);
    outline: 2px solid var(--portal-focus);
    outline-offset: 2px;
}

/* 260px and sticky beside the page, as the nav was; NavMenu lays out what is inside. */
.sidebar[b-86t61fprj8] {
    width: 260px;
    flex-shrink: 0;
    height: 100vh;
    position: sticky;
    top: 0;
    align-self: flex-start;
    background: var(--portal-surface);
    border-right: 1px solid var(--portal-border);
    box-shadow: var(--portal-shadow-soft);
    z-index: 20;
}

.shell[b-86t61fprj8] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.content[b-86t61fprj8] {
    flex: 1;
    min-width: 0;
    padding: var(--spherene-spacing-3xl-plus) clamp(1rem, 2.8vw, 2.75rem);
}

.content:focus[b-86t61fprj8] {
    outline: none;
}

.content > :first-child[b-86t61fprj8] {
    margin-top: 0;
}

.drawer-scrim[b-86t61fprj8] {
    display: none;
}

/* Admin UI redesign: below 1100px the sidebar is an off-canvas drawer opened from the top bar, instead of the
   tile grid that pushed every page down. Hidden while closed, so its links are out of the tab order. */
@media (max-width: 1100px) {
    .sidebar[b-86t61fprj8] {
        position: fixed;
        left: 0;
        top: 0;
        width: min(300px, 85vw);
        box-shadow: var(--portal-shadow-strong);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.2s ease, visibility 0s linear 0.2s;
        z-index: 50;
    }

    .drawer-open .sidebar[b-86t61fprj8] {
        transform: none;
        visibility: visible;
        transition: transform 0.2s ease;
    }

    .drawer-scrim[b-86t61fprj8] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 45;
        background: rgba(15, 23, 42, 0.45);
    }

    .content[b-86t61fprj8] {
        padding: 1.35rem 1rem 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar[b-86t61fprj8],
    .drawer-open .sidebar[b-86t61fprj8] {
        transition: none;
    }
}

/* Admin UI redesign: a fixed light warning bar in both themes, on purpose: it overlays whatever is under
   it, so it needs an opaque fill, and the dark theme's status tints are translucent. The colours are the
   warning ramp's tokens rather than raw hex. */
#blazor-error-ui[b-86t61fprj8] {
    color-scheme: light;
    background: var(--spherene-warning-lighter);
    border-top: 1px solid var(--spherene-warning-light);
    color: var(--spherene-warning-dark);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(15, 23, 42, 0.08);
    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-86t61fprj8] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
        background: none;
        border: none;
        color: inherit;
        font-size: 1.25rem;
        padding: 0.25rem;
        line-height: 1;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Admin UI redesign: the sidebar's frame (width, stickiness, the drawer) is MainLayout's <aside>; this fills it. */
.nav-shell[b-ces5ht9his] {
    height: 100%;
    padding: 1.25rem 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-sizing: border-box;
}

.nav-brand[b-ces5ht9his] {
    display: flex;
    padding: 0 0.4rem;
}

.navbar-brand[b-ces5ht9his] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
    color: var(--portal-ink);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.015em;
    padding: 0.55rem 0.7rem;
    border-radius: 0.8rem;
    transition: background-color 0.2s ease;
}

.navbar-brand:hover[b-ces5ht9his] {
    background: var(--portal-surface-muted);
}

.nav-logo-badge[b-ces5ht9his] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    padding: 0.5rem 0.65rem;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
}

.nav-brand-label[b-ces5ht9his] {
    margin-left: 0.6rem;
    font-size: var(--spherene-body-small);
    font-weight: var(--spherene-weight-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--portal-muted);
}

.nav-logo[b-ces5ht9his] {
    width: 120px;
    height: auto;
    display: block;
}

.nav-menu[b-ces5ht9his] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    overflow-y: auto;
    flex: 1;
    padding: 0 0.35rem;
}

/* Admin UI redesign: the filter box at the top of the menu. */
.nav-filter[b-ces5ht9his] {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 0.35rem;
}

.nav-filter[b-ces5ht9his]  .nav-filter-icon {
    position: absolute;
    left: 0.65rem;
    width: 1.1rem;
    height: 1.1rem;
    color: var(--portal-muted-soft);
    pointer-events: none;
}

.nav-filter-input[b-ces5ht9his] {
    width: 100%;
    font: inherit;
    font-size: 0.88rem;
    color: var(--portal-ink);
    background: var(--portal-surface-muted);
    border: 1px solid var(--portal-border);
    border-radius: 0.7rem;
    padding: 0.5rem 0.75rem 0.5rem 2.1rem;
}

.nav-filter-input:focus-visible[b-ces5ht9his] {
    outline: 2px solid var(--portal-brand);
    outline-offset: 1px;
}

.nav-filter-empty[b-ces5ht9his] {
    margin: 0.25rem 0.75rem;
    color: var(--portal-muted);
    font-size: 0.85rem;
}

/* Admin UI redesign: groups and hubs are native <details>. The marker is drawn here so it reads the same in
   every browser and turns with the open state. */
.nav-group-summary[b-ces5ht9his],
.nav-hub-summary[b-ces5ht9his] {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border-radius: 0.7rem;
    user-select: none;
}

.nav-group-summary[b-ces5ht9his]::-webkit-details-marker,
.nav-hub-summary[b-ces5ht9his]::-webkit-details-marker {
    display: none;
}

.nav-group-summary[b-ces5ht9his]::after,
.nav-hub-summary[b-ces5ht9his]::after {
    content: "";
    margin-left: auto;
    width: 0.4rem;
    height: 0.4rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
    opacity: 0.6;
}

details[open] > .nav-group-summary[b-ces5ht9his]::after,
details[open] > .nav-hub-summary[b-ces5ht9his]::after {
    transform: rotate(45deg);
}

.nav-group-summary:focus-visible[b-ces5ht9his],
.nav-hub-summary:focus-visible[b-ces5ht9his] {
    outline: 2px solid var(--portal-brand);
    outline-offset: 1px;
}

.nav-group-summary[b-ces5ht9his] {
    padding: 0.55rem 0.75rem 0.35rem;
    margin-top: 0.35rem;
    color: var(--portal-muted-soft);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.nav-group-summary:hover[b-ces5ht9his] {
    color: var(--portal-ink);
}

.nav-group-summary[b-ces5ht9his]  .nav-group-icon {
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
}

.nav-group-items[b-ces5ht9his],
.nav-hub-tabs[b-ces5ht9his] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.nav-hub-summary[b-ces5ht9his] {
    color: var(--portal-muted);
    padding: 0.65rem 0.75rem;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
}

.nav-hub-summary:hover[b-ces5ht9his] {
    color: var(--portal-ink);
    background: var(--portal-surface-muted);
}

.nav-hub-summary[b-ces5ht9his]  .nav-link-icon {
    width: 1.4rem;
    height: 1.4rem;
    flex-shrink: 0;
}

.nav-hub-tabs[b-ces5ht9his] {
    margin-left: 1.05rem;
    padding-left: 0.5rem;
    border-left: 1px solid var(--portal-border);
}

.nav-menu[b-ces5ht9his]  .nav-link {
    color: var(--portal-muted);
    text-decoration: none;
    padding: 0.65rem 0.75rem;
    border-radius: 0.7rem;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.nav-menu[b-ces5ht9his]  .nav-link > span {
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
}

.nav-menu[b-ces5ht9his]  .nav-link-icon {
    font-size: 1.08rem;
    color: inherit;
    width: 1.4rem;
    height: 1.4rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    line-height: 1 !important;
    transform: none;
}

.nav-menu[b-ces5ht9his]  .nav-link:hover {
    color: var(--portal-ink);
    background: var(--portal-surface-muted);
}

.nav-menu[b-ces5ht9his]  .nav-link.active {
    color: var(--portal-brand-dark);
    background: var(--portal-brand-soft);
    box-shadow: inset 0 0 0 1px var(--portal-brand-soft);
}
/* /Components/Layout/TopBar.razor.rz.scp.css */
/* Admin UI redesign: 56px and sticky, so where you are and the way out stay in reach on a long page. */
.topbar[b-bz21fi83bx] {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: var(--spherene-spacing-lg);
    min-height: 56px;
    padding: 0 clamp(1rem, 2.8vw, 2.75rem);
    background: var(--portal-surface);
    border-bottom: 1px solid var(--portal-border);
}

.topbar-icon-button[b-bz21fi83bx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--portal-border);
    border-radius: var(--spherene-radius-full);
    background: transparent;
    color: var(--portal-ink);
    cursor: pointer;
}

.topbar-icon-button:hover[b-bz21fi83bx] {
    background: var(--portal-surface-hover);
}

.topbar-icon-button:focus-visible[b-bz21fi83bx] {
    outline: 2px solid var(--portal-focus);
    outline-offset: 2px;
}

.topbar-icon-button[b-bz21fi83bx]  .mud-icon-root {
    width: 1.25rem;
    height: 1.25rem;
}

/* The sidebar is always there above 1100px; the button only opens it as a drawer below. */
.topbar-menu-button[b-bz21fi83bx] {
    display: none;
}

.topbar-breadcrumb[b-bz21fi83bx] {
    min-width: 0;
}

.topbar-breadcrumb ol[b-bz21fi83bx] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--spherene-body-medium);
    color: var(--portal-muted);
}

.topbar-breadcrumb li[b-bz21fi83bx] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-breadcrumb li + li[b-bz21fi83bx]::before {
    content: "›";
    margin-right: 0.4rem;
    color: var(--portal-muted-soft);
}

.topbar-breadcrumb li[aria-current="page"][b-bz21fi83bx] {
    color: var(--portal-ink);
    font-weight: var(--spherene-weight-semibold);
}

.topbar-end[b-bz21fi83bx] {
    display: flex;
    align-items: center;
    gap: var(--spherene-spacing-md);
    margin-left: auto;
}

@media (max-width: 1100px) {
    .topbar-menu-button[b-bz21fi83bx] {
        display: inline-flex;
    }
}

/* On a phone only the page's own name is kept: the outer crumbs are what the drawer shows. */
@media (max-width: 640px) {
    .topbar[b-bz21fi83bx] {
        padding: 0 1rem;
        gap: var(--spherene-spacing-md);
    }

    .topbar-breadcrumb li:not([aria-current="page"])[b-bz21fi83bx] {
        display: none;
    }

    .topbar-breadcrumb li + li[b-bz21fi83bx]::before {
        content: none;
    }
}
/* /Components/Pages/ChangePassword.razor.rz.scp.css */
/* SPHER-3136: the password-change form, styled as the sign-in form it follows (Login.razor.css). Admin UI
   redesign: scoped and on the theme tokens rather than a global inline <style> block, whose .form-group and
   .form-control rules reached every page once this one had rendered. */

.login-container[b-hlk7zfw9dg] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: radial-gradient(circle at top left, var(--portal-brand-light) 0%, var(--portal-bg) 45%, var(--portal-bg-accent) 100%);
    padding: var(--spherene-spacing-xl);
}

.login-card[b-hlk7zfw9dg] {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: var(--spherene-radius-2xl);
    padding: var(--spherene-spacing-3xl-plus);
    width: 100%;
    max-width: 400px;
    box-shadow: var(--portal-shadow-strong);
}

.login-header[b-hlk7zfw9dg] {
    text-align: center;
    margin-bottom: var(--spherene-spacing-3xl-plus);
}

.login-header h1[b-hlk7zfw9dg] {
    color: var(--portal-ink);
    font-weight: var(--spherene-weight-bold);
    margin: 0 0 var(--spherene-spacing-md) 0;
    font-size: 1.5rem;
    letter-spacing: 0.02em;
}

.login-subtitle[b-hlk7zfw9dg] {
    color: var(--portal-muted);
    font-size: var(--spherene-body-medium);
    margin: 0;
}

.login-field[b-hlk7zfw9dg] {
    margin-bottom: var(--spherene-spacing-3xl);
}

.login-field label[b-hlk7zfw9dg] {
    display: block;
    color: var(--portal-input-label);
    font-family: var(--portal-font-label);
    font-size: var(--spherene-body-small);
    font-weight: var(--spherene-weight-semibold);
    margin-bottom: var(--spherene-spacing-md);
}

.login-input[b-hlk7zfw9dg] {
    width: 100%;
    padding: var(--spherene-spacing-lg) var(--spherene-spacing-xl);
    border: 1px solid var(--portal-input-border);
    border-radius: var(--portal-input-radius);
    background: var(--portal-input-bg);
    color: var(--portal-input-text);
    font-family: var(--portal-font-sans);
    font-size: var(--spherene-body-medium);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.login-input:focus[b-hlk7zfw9dg] {
    outline: none;
    border-color: var(--portal-input-border-focus);
    box-shadow: 0 0 0 3px var(--portal-brand-soft);
}

.login-input[b-hlk7zfw9dg]::placeholder {
    color: var(--portal-input-placeholder);
}

.login-error[b-hlk7zfw9dg] {
    background: var(--portal-error-bg);
    border: 1px solid var(--portal-error);
    border-radius: var(--spherene-radius-md);
    padding: var(--spherene-spacing-lg) var(--spherene-spacing-xl);
    color: var(--portal-chip-error-ink);
    font-size: var(--spherene-body-medium);
    margin-bottom: var(--spherene-spacing-3xl);
    display: flex;
    align-items: center;
    gap: var(--spherene-spacing-md);
}

.btn-login[b-hlk7zfw9dg] {
    width: 100%;
    padding: var(--spherene-spacing-lg);
    border: none;
    border-radius: var(--portal-btn-radius-lg);
    background: var(--portal-btn-primary-bg);
    color: var(--portal-btn-primary-text);
    font-family: var(--portal-font-sans);
    font-size: var(--spherene-body-medium);
    font-weight: var(--spherene-weight-semibold);
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-login:hover:not(:disabled)[b-hlk7zfw9dg] {
    background: var(--portal-btn-primary-hover);
    box-shadow: var(--portal-shadow-soft);
}

.btn-login:focus-visible[b-hlk7zfw9dg] {
    outline: 2px solid var(--portal-focus);
    outline-offset: 2px;
}

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

/* "Sign out instead": a link-looking button under the form, since the sign-out is a POST. */
.login-form-inline[b-hlk7zfw9dg] {
    margin: var(--spherene-spacing-xl) 0 0;
    text-align: center;
}

.login-link-button[b-hlk7zfw9dg] {
    appearance: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--portal-brand-dark);
    font-family: inherit;
    font-size: var(--spherene-body-small);
    font-weight: var(--spherene-weight-bold);
    cursor: pointer;
}

.login-link-button:hover[b-hlk7zfw9dg] {
    color: var(--portal-brand);
    text-decoration: underline;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Admin UI redesign: as many 18rem columns as fit, one on a phone. */
.home-grid[b-k8k48c9i5k] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
    gap: var(--spherene-spacing-xl);
    align-items: start;
}
/* /Components/Pages/HomeCards/FindPersonCard.razor.rz.scp.css */
.home-find-person[b-95ujm5p4r0] {
    display: flex;
    gap: var(--spherene-spacing-sm);
    align-items: center;
    flex-wrap: wrap;
}

.home-find-person-input[b-95ujm5p4r0] {
    flex: 1 1 12rem;
    min-width: 0;
    height: 2.25rem;
    padding: 0 var(--spherene-spacing-md);
    border: 1px solid var(--portal-input-border);
    border-radius: var(--portal-input-radius);
    background: var(--portal-input-bg);
    color: var(--portal-input-text);
    font: inherit;
}

.home-find-person-input[b-95ujm5p4r0]::placeholder {
    color: var(--portal-input-placeholder);
}

.home-find-person-input:focus-visible[b-95ujm5p4r0] {
    outline: 2px solid var(--portal-focus);
    outline-offset: 1px;
    border-color: var(--portal-input-border-focus);
}

/* Named for screen readers; the placeholder and the card title say it for everyone else. */
.home-find-person-label[b-95ujm5p4r0] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
/* /Components/Pages/HomeCards/HomeCard.razor.rz.scp.css */
.home-card[b-hhi6b2prg4] {
    display: flex;
    flex-direction: column;
    gap: var(--spherene-spacing-lg);
    min-width: 0;
    padding: var(--spherene-spacing-xl);
    border: 1px solid var(--portal-border);
    border-radius: var(--spherene-radius-lg);
    background: var(--portal-surface);
}

.home-card-title[b-hhi6b2prg4] {
    display: flex;
    align-items: center;
    gap: var(--spherene-spacing-sm);
    margin: 0;
    font-size: var(--spherene-h6-size);
    line-height: var(--spherene-h6-line-height);
    font-weight: var(--spherene-weight-semibold);
    color: var(--portal-ink);
}

.home-card-title[b-hhi6b2prg4]  .home-card-icon {
    color: var(--portal-muted);
}

.home-card-link[b-hhi6b2prg4] {
    color: inherit;
    text-decoration: none;
}

.home-card-link:hover[b-hhi6b2prg4] {
    text-decoration: underline;
}

.home-card-link:focus-visible[b-hhi6b2prg4] {
    outline: 2px solid var(--portal-focus);
    outline-offset: 2px;
    border-radius: var(--spherene-radius-sm);
}

.home-card-body[b-hhi6b2prg4] {
    display: flex;
    flex-direction: column;
    gap: var(--spherene-spacing-md);
    color: var(--portal-ink);
}

.home-card-error[b-hhi6b2prg4] {
    margin: 0;
    color: var(--portal-error);
}

/* What the cards put in the body. ::deep because a card's content carries the card's scope, not this one's. */
.home-card-body[b-hhi6b2prg4]  .home-metric {
    margin: 0;
    font-size: var(--spherene-h3-size);
    line-height: var(--spherene-h3-line-height);
    font-weight: var(--spherene-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.home-card-body[b-hhi6b2prg4]  .home-caption {
    margin: 0;
    color: var(--portal-muted);
    font-size: var(--spherene-body-small);
}

.home-card-body[b-hhi6b2prg4]  .home-list {
    display: flex;
    flex-direction: column;
    gap: var(--spherene-spacing-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-card-body[b-hhi6b2prg4]  .home-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spherene-spacing-md);
}

.home-card-body[b-hhi6b2prg4]  .home-count {
    font-variant-numeric: tabular-nums;
    font-weight: var(--spherene-weight-semibold);
}

/* Ink text with the tone on a dot, as the environment badge does: the error tone is too light for small text. */
.home-card-body[b-hhi6b2prg4]  .home-state-on {
    display: inline-flex;
    align-items: center;
    gap: var(--spherene-spacing-xs);
    font-weight: var(--spherene-weight-semibold);
}

.home-card-body[b-hhi6b2prg4]  .home-state-on::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--spherene-radius-full);
    background: var(--portal-error);
}

.home-card-body[b-hhi6b2prg4]  .home-state-off {
    color: var(--portal-muted);
}

.home-card-body[b-hhi6b2prg4]  a {
    color: var(--portal-brand);
}

.home-card-body[b-hhi6b2prg4]  a:focus-visible {
    outline: 2px solid var(--portal-focus);
    outline-offset: 2px;
}
/* /Components/Pages/LicenceAgreementPage.razor.rz.scp.css */
/* The agreement rendered from its Markdown (EulaMarkdown): its markup is not this component's, so ::deep. */
.eula-text[b-q60aeoib9u]  h2 { font-size: 1.5rem; font-weight: 600; margin: 0 0 0.75rem; }
.eula-text[b-q60aeoib9u]  h3 { font-size: 1.2rem; font-weight: 600; margin: 1.75rem 0 0.5rem; }
.eula-text[b-q60aeoib9u]  h4 { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 0.4rem; }
.eula-text[b-q60aeoib9u]  p { margin: 0 0 0.75rem; line-height: 1.55; }
.eula-text[b-q60aeoib9u]  ul,
.eula-text[b-q60aeoib9u]  ol { margin: 0 0 0.75rem; padding-left: 1.75rem; }
.eula-text[b-q60aeoib9u]  li { margin: 0.2rem 0; line-height: 1.5; }
.eula-text[b-q60aeoib9u]  code { font-size: 0.9em; }
.eula-text[b-q60aeoib9u] { max-width: 60rem; }
/* /Components/Pages/Login.razor.rz.scp.css */
/* Admin UI redesign: the on-prem sign-in form's styles, out of an inline <style> block and onto the theme
   tokens. The block was global, so its .form-group and .form-control rules reached every page once the
   login had been rendered, and its fixed light greys and pale backdrop ignored the dark theme. Scoped here,
   the names are this page's own. */

.login-container[b-7uzfo5tu58] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: radial-gradient(circle at top left, var(--portal-brand-light) 0%, var(--portal-bg) 45%, var(--portal-bg-accent) 100%);
    padding: var(--spherene-spacing-xl);
}

.login-card[b-7uzfo5tu58] {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: var(--spherene-radius-2xl);
    padding: var(--spherene-spacing-3xl-plus);
    width: 100%;
    max-width: 400px;
    box-shadow: var(--portal-shadow-strong);
}

.login-header[b-7uzfo5tu58] {
    text-align: center;
    margin-bottom: var(--spherene-spacing-3xl-plus);
}

/* The logo is white, so it sits on the dark brand backdrop in either theme. */
.login-logo-wrap[b-7uzfo5tu58] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--spherene-radius-lg);
    padding: var(--spherene-spacing-lg);
    margin-bottom: var(--spherene-spacing-xl);
    background: linear-gradient(135deg, var(--spherene-bg-2), var(--spherene-bg-3));
    box-shadow: var(--portal-shadow-soft);
}

.login-logo[b-7uzfo5tu58] {
    width: 170px;
    height: auto;
    display: block;
}

.login-header h2[b-7uzfo5tu58] {
    color: var(--portal-ink);
    font-weight: var(--spherene-weight-bold);
    margin: 0 0 var(--spherene-spacing-md) 0;
    font-size: 1.5rem;
    letter-spacing: 0.02em;
}

.login-subtitle[b-7uzfo5tu58] {
    color: var(--portal-muted);
    font-size: var(--spherene-body-medium);
    margin: 0;
}

.login-field[b-7uzfo5tu58] {
    margin-bottom: var(--spherene-spacing-3xl);
}

.login-field label[b-7uzfo5tu58] {
    display: block;
    color: var(--portal-input-label);
    font-family: var(--portal-font-label);
    font-size: var(--spherene-body-small);
    font-weight: var(--spherene-weight-semibold);
    margin-bottom: var(--spherene-spacing-md);
}

.login-input[b-7uzfo5tu58] {
    width: 100%;
    padding: var(--spherene-spacing-lg) var(--spherene-spacing-xl);
    border: 1px solid var(--portal-input-border);
    border-radius: var(--portal-input-radius);
    background: var(--portal-input-bg);
    color: var(--portal-input-text);
    font-family: var(--portal-font-sans);
    font-size: var(--spherene-body-medium);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.login-input:focus[b-7uzfo5tu58] {
    outline: none;
    border-color: var(--portal-input-border-focus);
    box-shadow: 0 0 0 3px var(--portal-brand-soft);
}

.login-input[b-7uzfo5tu58]::placeholder {
    color: var(--portal-input-placeholder);
}

.login-error[b-7uzfo5tu58] {
    background: var(--portal-error-bg);
    border: 1px solid var(--portal-error);
    border-radius: var(--spherene-radius-md);
    padding: var(--spherene-spacing-lg) var(--spherene-spacing-xl);
    color: var(--portal-chip-error-ink);
    font-size: var(--spherene-body-medium);
    margin-bottom: var(--spherene-spacing-3xl);
    display: flex;
    align-items: center;
    gap: var(--spherene-spacing-md);
}

.btn-login[b-7uzfo5tu58] {
    width: 100%;
    padding: var(--spherene-spacing-lg);
    border: none;
    border-radius: var(--portal-btn-radius-lg);
    background: var(--portal-btn-primary-bg);
    color: var(--portal-btn-primary-text);
    font-family: var(--portal-font-sans);
    font-size: var(--spherene-body-medium);
    font-weight: var(--spherene-weight-semibold);
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-login:hover:not(:disabled)[b-7uzfo5tu58] {
    background: var(--portal-btn-primary-hover);
    box-shadow: var(--portal-shadow-soft);
}

.btn-login:focus-visible[b-7uzfo5tu58] {
    outline: 2px solid var(--portal-focus);
    outline-offset: 2px;
}

.btn-login:disabled[b-7uzfo5tu58] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* SPHER-3162: the IdP button and the divider between it and the operator form. */
.btn-sso[b-7uzfo5tu58] {
    display: block;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    margin-bottom: var(--spherene-spacing-xl);
}

.login-divider[b-7uzfo5tu58] {
    display: flex;
    align-items: center;
    gap: var(--spherene-spacing-lg);
    color: var(--portal-muted);
    font-size: var(--spherene-body-small);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--spherene-spacing-xl);
}

.login-divider[b-7uzfo5tu58]::before,
.login-divider[b-7uzfo5tu58]::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--portal-border);
}
/* /Components/Shared/EnvironmentBadge.razor.rz.scp.css */
/* Admin UI redesign: the text stays in ink and the environment's colour carries the border and the dot. The
   warning and error tones are too light for small text on a light surface, and this badge must be readable. */
.env-badge[b-a530phav4e] {
    --env-tone: var(--portal-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.65rem;
    border-radius: var(--spherene-radius-full);
    border: 1px solid var(--env-tone);
    color: var(--portal-ink);
    font-size: var(--spherene-body-small);
    font-weight: var(--spherene-weight-bold);
    letter-spacing: 0.08em;
    line-height: 1.3;
    white-space: nowrap;
}

.env-badge[b-a530phav4e]::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--env-tone);
}

.env-badge-dev[b-a530phav4e] {
    --env-tone: var(--portal-info);
    background: var(--portal-info-bg);
}

.env-badge-int[b-a530phav4e] {
    --env-tone: var(--portal-warning);
    background: var(--portal-warning-bg);
}

/* An outline rather than a fill: loud enough to be noticed, without reading as an error state. */
.env-badge-prd[b-a530phav4e] {
    --env-tone: var(--portal-error);
    background: transparent;
    border-width: 2px;
}

.env-badge-onprem[b-a530phav4e] {
    --env-tone: var(--portal-brand);
    background: var(--portal-brand-soft);
}
/* /Components/Shared/Page/EmptyState.razor.rz.scp.css */
.portal-empty-state[b-7ywq4vbzut] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: var(--spherene-spacing-3xl) var(--spherene-spacing-xl);
    text-align: center;
    color: var(--portal-muted);
}

.portal-empty-state[b-7ywq4vbzut]  .portal-empty-state-icon {
    font-size: 2.25rem;
    color: var(--portal-muted-soft);
}

.portal-empty-state-title[b-7ywq4vbzut] {
    margin: 0;
    color: var(--portal-ink);
    font-weight: var(--spherene-weight-bold);
}

.portal-empty-state-hint[b-7ywq4vbzut] {
    margin: 0;
    max-width: 48ch;
    font-size: var(--spherene-body-small);
}
/* /Components/Shared/Page/HubTabs.razor.rz.scp.css */
/* Admin UI redesign: underline tabs on the page's own surface, not MudTabs — these are links to other routes,
   and a tab strip that looks like in-page panels would promise state it does not keep. */
.portal-hub-tabs[b-uxptndn1ql] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 1px solid var(--portal-border);
}

.portal-hub-tabs[b-uxptndn1ql]  .portal-hub-tab {
    padding: 0.5rem 0.85rem;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--portal-muted);
    font-weight: var(--spherene-weight-bold);
    text-decoration: none;
    white-space: nowrap;
}

.portal-hub-tabs[b-uxptndn1ql]  .portal-hub-tab:hover {
    color: var(--portal-ink);
    background: var(--portal-surface-hover);
}

.portal-hub-tabs[b-uxptndn1ql]  .portal-hub-tab:focus-visible {
    outline: 2px solid var(--portal-focus);
    outline-offset: -2px;
}

.portal-hub-tabs[b-uxptndn1ql]  .portal-hub-tab-current {
    color: var(--portal-ink);
    border-bottom-color: var(--portal-brand);
}
/* /Components/Shared/Page/LoadingState.razor.rz.scp.css */
.portal-visually-hidden[b-3vnoqcxcff] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
/* /Components/Shared/Page/PageHeader.razor.rz.scp.css */
/* Admin UI redesign: the help block sits under the subtitle, closed. Its summary reads as a quiet link so it
   does not compete with the title, and the opened body keeps the subtitle's measure. */
.portal-page-help[b-yz9gi2dvqu] {
    max-width: 72ch;
    color: var(--portal-muted);
    font-size: var(--spherene-body-small);
}

.portal-page-help > summary[b-yz9gi2dvqu] {
    width: fit-content;
    cursor: pointer;
    color: var(--portal-brand);
    font-weight: var(--spherene-weight-bold);
}

.portal-page-help > summary:focus-visible[b-yz9gi2dvqu] {
    outline: 2px solid var(--portal-focus);
    outline-offset: 2px;
    border-radius: var(--spherene-radius-sm);
}

.portal-page-help-body[b-yz9gi2dvqu] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.5rem;
}

.portal-page-help-body[b-yz9gi2dvqu]  p {
    margin: 0;
}
/* /Components/Shared/Page/PageSection.razor.rz.scp.css */
[b-6wbrcn4fo3] .portal-section {
    display: flex;
    flex-direction: column;
    gap: var(--spherene-spacing-xl);
    padding: var(--spherene-spacing-xl);
    border-color: var(--portal-border);
    border-radius: var(--spherene-radius-lg);
    background: var(--portal-surface);
}

[b-6wbrcn4fo3] .portal-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

[b-6wbrcn4fo3] .portal-section-title {
    margin: 0;
    font-size: var(--spherene-h6-size);
}

[b-6wbrcn4fo3] .portal-section-actions {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    flex-wrap: wrap;
}
/* /Components/Shared/UserMenu.razor.rz.scp.css */
.user-menu[b-r1fk1l8zri] {
    position: relative;
}

.user-menu-button[b-r1fk1l8zri] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.4rem 0.25rem 0.25rem;
    border: 1px solid var(--portal-border);
    border-radius: var(--spherene-radius-full);
    background: var(--portal-surface);
    color: var(--portal-ink);
    font: inherit;
    font-size: var(--spherene-body-medium);
    font-weight: var(--spherene-weight-semibold);
    cursor: pointer;
}

.user-menu-button:hover[b-r1fk1l8zri] {
    background: var(--portal-surface-hover);
}

.user-menu-button:focus-visible[b-r1fk1l8zri],
.user-menu-item:focus-visible[b-r1fk1l8zri],
.user-menu-login:focus-visible[b-r1fk1l8zri] {
    outline: 2px solid var(--portal-focus);
    outline-offset: 2px;
}

.user-menu-avatar[b-r1fk1l8zri] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--portal-brand-soft);
    color: var(--portal-brand-dark);
    font-size: var(--spherene-body-small);
    font-weight: var(--spherene-weight-bold);
}

.user-menu-name[b-r1fk1l8zri] {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-backdrop[b-r1fk1l8zri] {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.user-menu-panel[b-r1fk1l8zri] {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    z-index: 41;
    min-width: 16rem;
    max-width: min(22rem, calc(100vw - 2rem));
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: var(--spherene-radius-lg);
    box-shadow: var(--portal-shadow-strong);
    padding: 0.4rem;
}

.user-menu-panel[hidden][b-r1fk1l8zri] {
    display: none;
}

.user-menu-who[b-r1fk1l8zri] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid var(--portal-border);
    margin-bottom: 0.3rem;
}

.user-menu-who-name[b-r1fk1l8zri] {
    font-weight: var(--spherene-weight-semibold);
    color: var(--portal-ink);
    overflow-wrap: anywhere;
}

.user-menu-roles[b-r1fk1l8zri] {
    font-size: var(--spherene-body-small);
    color: var(--portal-muted);
}

.user-menu-form[b-r1fk1l8zri] {
    margin: 0;
}

.user-menu-item[b-r1fk1l8zri] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 0;
    border-radius: var(--spherene-radius-md);
    background: transparent;
    color: var(--portal-ink);
    font: inherit;
    font-size: var(--spherene-body-medium);
    text-align: left;
    cursor: pointer;
}

/* The on-prem "Change password" item is a link among buttons. */
a.user-menu-item[b-r1fk1l8zri] {
    box-sizing: border-box;
    text-decoration: none;
}

.user-menu-item:hover[b-r1fk1l8zri] {
    background: var(--portal-surface-hover);
}

.user-menu[b-r1fk1l8zri]  .user-menu-item-icon,
.user-menu[b-r1fk1l8zri]  .user-menu-caret {
    width: 1.2rem;
    height: 1.2rem;
    color: var(--portal-muted);
}

.user-menu-footer[b-r1fk1l8zri] {
    margin-top: 0.3rem;
    padding: 0.5rem 0.7rem 0.3rem;
    border-top: 1px solid var(--portal-border);
    font-size: var(--spherene-body-small);
    color: var(--portal-muted-soft);
    overflow-wrap: anywhere;
}

.user-menu-login[b-r1fk1l8zri] {
    font-weight: var(--spherene-weight-bold);
    color: var(--portal-brand-dark);
}

@media (max-width: 640px) {
    .user-menu-name[b-r1fk1l8zri] {
        display: none;
    }
}