@import '_content/BizsOn.Web.Common/BizsOn.Web.Common.lzrr3iatkz.bundle.scp.css';
@import '_content/BizsOn.Web.Module.Calendar/BizsOn.Web.Module.Calendar.4i4ncy06zk.bundle.scp.css';
@import '_content/BizsOn.Web.Module.DocumentManagement/BizsOn.Web.Module.DocumentManagement.7bo78kbi9r.bundle.scp.css';
@import '_content/BizsOn.Web.Module.HostAdmin/BizsOn.Web.Module.HostAdmin.1wna1y41my.bundle.scp.css';
@import '_content/BizsOn.Web.Module.Identity/BizsOn.Web.Module.Identity.zyw50ha1wc.bundle.scp.css';
@import '_content/BizsOn.Web.Module.IntelligentAutomation/BizsOn.Web.Module.IntelligentAutomation.0qwzweoj5t.bundle.scp.css';
@import '_content/BizsOn.Web.Module.Messaging/BizsOn.Web.Module.Messaging.mz8t7o3326.bundle.scp.css';
@import '_content/BizsOn.Web.Module.ProcessAutomation/BizsOn.Web.Module.ProcessAutomation.ahucusrnrn.bundle.scp.css';
@import '_content/BizsOn.Web.Module.ProductInformation/BizsOn.Web.Module.ProductInformation.1hljdpgt75.bundle.scp.css';
@import '_content/BizsOn.Web.Module.ProjectManagement/BizsOn.Web.Module.ProjectManagement.tiolijlndf.bundle.scp.css';
@import '_content/BizsOn.Web.Module.RelationshipManagement/BizsOn.Web.Module.RelationshipManagement.ytiwc92ru1.bundle.scp.css';
@import '_content/BizsOn.Web.Module.TaskManagement/BizsOn.Web.Module.TaskManagement.obin8gu7fe.bundle.scp.css';
@import '_content/BizsOn.Web.Module.TenantAdmin/BizsOn.Web.Module.TenantAdmin.yk59ayso1s.bundle.scp.css';
@import '_content/BizsOn.Web.Module.TimeTracking/BizsOn.Web.Module.TimeTracking.h2klrrx897.bundle.scp.css';
@import '_content/BizsOn.Web.Module.WorkforceManagement/BizsOn.Web.Module.WorkforceManagement.im8h69eyji.bundle.scp.css';

/* /Components/BrandMark.razor.rz.scp.css */
/* GitLab #111: the brand is a link to the home page. It must keep looking like the header
   title — the mobile header paints its contents white, the sidebar inherits the shell colour. */
.brand[b-2xgjeai7qt] {
    display: inline-flex;
    align-items: center;
    gap: var(--bz-space-2);
    text-decoration: none;
    color: inherit;
}
.brand-logo[b-2xgjeai7qt] { height: 24px; width: auto; }
/* /Components/GlobalErrorBoundary.razor.rz.scp.css */
.eb[b-daldvjbq4d] {
    background: color-mix(in srgb, var(--bz-color-danger) 8%, var(--bz-color-surface));
    border: 1px solid var(--bz-color-danger);
    border-radius: var(--bz-radius-md);
    padding: var(--bz-space-4);
}

.eb-actions[b-daldvjbq4d] { display: flex; gap: var(--bz-space-2); margin-top: var(--bz-space-3); }
/* /Components/LocationSwitcher.razor.rz.scp.css */
/* GitLab #225. The switcher lives in the sidebar footer, and the sidebar <aside> is ALWAYS dark (it carries
   the theme's `dark` scope). It used to be a `kt-btn kt-btn-ghost`: on a phone shell.css turns every text
   ghost button into a bordered `--bz-color-surface` control, and those --bz-* tokens do not flip inside the
   `dark` scope — so in light mode the switcher became a light, outlined chip inside the dark drawer. It is
   now its own borderless control painted only from Metronic's scoped vars (--foreground,
   --secondary-foreground, --muted-foreground, --accent), which are dark-sidebar values in either theme.
   The dropdown list is left alone: it stays the normal kt-dropdown-menu. */
.bz-loc-switch[b-rxpnnp195s] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 2rem;
    padding-inline: 0.5rem;
    border: 0;
    border-radius: var(--bz-radius-sm);
    background-color: transparent;
    box-shadow: none;
    color: var(--secondary-foreground);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
}

button.bz-loc-switch[b-rxpnnp195s] {
    cursor: pointer;
}

.bz-loc-name[b-rxpnnp195s] {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bz-loc-switch i[b-rxpnnp195s] {
    color: var(--muted-foreground);
}

.bz-loc-chevron[b-rxpnnp195s] {
    opacity: 0.7;
}

button.bz-loc-switch:hover[b-rxpnnp195s],
button.bz-loc-switch:focus-visible[b-rxpnnp195s],
button.bz-loc-switch:active[b-rxpnnp195s],
button.bz-loc-switch[aria-expanded="true"][b-rxpnnp195s],
.show > button.bz-loc-switch[b-rxpnnp195s] {
    background-color: var(--accent);
    color: var(--foreground);
    text-decoration: none;
}

button.bz-loc-switch:hover i[b-rxpnnp195s],
button.bz-loc-switch:focus-visible i[b-rxpnnp195s],
button.bz-loc-switch:active i[b-rxpnnp195s],
button.bz-loc-switch[aria-expanded="true"] i[b-rxpnnp195s],
.show > button.bz-loc-switch i[b-rxpnnp195s] {
    color: var(--foreground);
}
/* /Components/NavMenu.razor.rz.scp.css */
/* The sidebar <aside> carries the theme's `dark` scope, so its text colours come from Metronic's scoped
   variables (--foreground, --secondary-foreground, --muted-foreground, --accent) — the page-level --bz-text-*
   tokens do not flip inside that scope and rendered the header labels black on black (task 340). */
/* NavMenu styling comes from the Metronic kt-menu base rules; its Tailwind variant utilities
   (kt-menu-item-active:*) are not compiled into styles.css, so the states NavMenu computes
   (.active on the item and the link, .here/.show on expanded modules and groups) are styled here. */

[b-a0jykg5uzs] .kt-menu-link {
    text-decoration: none;
}

[b-a0jykg5uzs] .kt-menu-link.active {
    background-color: var(--accent);
}

    [b-a0jykg5uzs] .kt-menu-link.active .kt-menu-icon,
    [b-a0jykg5uzs] .kt-menu-link.active .kt-menu-title {
        color: var(--foreground);
        font-weight: var(--bz-fw-medium);
    }

/* A module/group containing the current page. */
[b-a0jykg5uzs] .kt-menu-item.here > .kt-menu-label .kt-menu-title,
[b-a0jykg5uzs] .kt-menu-item.here > .kt-menu-label .kt-menu-icon {
    color: var(--foreground);
}

[b-a0jykg5uzs] .kt-menu-label > .kt-menu-link {
    min-width: 0;
}

/* Task 340 (GitLab #213): the chevron is its own button, so the header label can be a link. */
[b-a0jykg5uzs] .bz-nav-chevron {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: var(--bz-radius-sm);
    background: transparent;
    color: var(--secondary-foreground);
    cursor: pointer;
}

    [b-a0jykg5uzs] .bz-nav-chevron:hover,
    [b-a0jykg5uzs] .bz-nav-chevron:focus-visible {
        color: var(--foreground);
        background: var(--accent);
    }

    [b-a0jykg5uzs] .bz-nav-chevron i {
        transition: transform 0.15s ease;
    }

[b-a0jykg5uzs] .kt-menu-item.show > .kt-menu-label > .bz-nav-chevron i {
    transform: rotate(180deg);
}

/* GitLab #223: the module label is a button (KTMenu's toggle target), not a link. */
[b-a0jykg5uzs] .kt-menu-label > button.kt-menu-link {
    border: 0;
    background: transparent;
    cursor: pointer;
}

/* GitLab #223: a favorite row = icon, gap, ellipsised label, then the star; same row height as other items. */
[b-a0jykg5uzs] .bz-nav-fav {
    align-items: center;
    gap: 0.625rem;
}

    [b-a0jykg5uzs] .bz-nav-fav .kt-menu-icon {
        flex: none;
        width: 1.25rem;
        justify-content: center;
        font-size: 1rem;
    }

    [b-a0jykg5uzs] .bz-nav-fav .kt-menu-title {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* Task 340 (GitLab #214): favorite star next to (never inside) a page link. */
[b-a0jykg5uzs] .bz-nav-leaf {
    flex-direction: row;
    align-items: center;
}

    [b-a0jykg5uzs] .bz-nav-leaf > .kt-menu-link {
        flex: 1 1 auto;
        min-width: 0;
    }

[b-a0jykg5uzs] .nav-fav {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: var(--bz-radius-sm);
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    opacity: 0;
}

    [b-a0jykg5uzs] .bz-nav-leaf:hover > .nav-fav,
    [b-a0jykg5uzs] .nav-fav:focus-visible,
    [b-a0jykg5uzs] .nav-fav[aria-pressed="true"] {
        opacity: 1;
    }

    [b-a0jykg5uzs] .nav-fav:hover,
    [b-a0jykg5uzs] .nav-fav[aria-pressed="true"] {
        color: var(--bz-primary);
    }

/* Touch screens have no hover: the stars are always there. */
@media (hover: none) {
    [b-a0jykg5uzs] .nav-fav {
        opacity: 1;
    }
}
/* /Components/NotificationBell.razor.rz.scp.css */
/* Scoped on purpose: the bell is one component, not a cross-cutting layout primitive, so these do
   NOT belong in shell.css. Every value comes from the --bz-* design tokens. */

.bz-bell[b-r0cw2covyd] {
    position: relative;
}

/* Task 285 (#113) boxed this trigger; task 289 (#113 round 2) unboxes it again. It sits INLINE in
   the page-header row next to the running-timer chip, and a border there is exactly the wall of
   little boxes the tester reported — so it matches the lightweight .bz-icon-action rest state in
   shell.css instead: transparent, tinted on hover/focus, same token sizing and the same 44px touch
   target. A <summary> cannot carry that shared class meaningfully, so the look is restated here. */
.bz-bell-trigger[b-r0cw2covyd] {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: var(--bz-control-height);
    height: var(--bz-control-height);
    border: 1px solid transparent;
    border-radius: var(--bz-radius-sm);
    background: transparent;
    color: var(--bz-color-fg-muted);
    transition: background var(--bz-duration-fast) var(--bz-ease),
                color var(--bz-duration-fast) var(--bz-ease);
}

@media (pointer: coarse) {
    .bz-bell-trigger[b-r0cw2covyd] { width: 44px; height: 44px; }
}

/* Safari renders a disclosure triangle on <summary> without this. */
.bz-bell-trigger[b-r0cw2covyd]::-webkit-details-marker {
    display: none;
}

.bz-bell-trigger:hover[b-r0cw2covyd],
.bz-bell-trigger:focus-visible[b-r0cw2covyd] {
    background: var(--bz-color-surface-2);
    color: var(--bz-color-fg);
}

.bz-bell-count[b-r0cw2covyd] {
    position: absolute;
    top: 0.05rem;
    inset-inline-end: 0.05rem;
    min-width: 1.05rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--bz-color-danger);
    color: #fff;
    font-size: 0.65rem;
    line-height: 1.05rem;
    text-align: center;
    font-weight: 600;
}

.bz-bell-panel[b-r0cw2covyd] {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 0.35rem);
    z-index: 40;
    width: min(24rem, calc(100vw - 2rem));
    background: var(--bz-color-popover);
    border: 1px solid var(--bz-color-border);
    border-radius: var(--bz-radius-lg);
    box-shadow: var(--bz-shadow-lg);
    overflow: hidden;
}

/* GitLab #125: on a phone the page-header actions wrap onto their own row and land at the START of
   it, so a 343px panel anchored to the trigger's right edge hung ~290px off the left of the screen.
   Same answer as the AI chat panel on a phone (shell.css, task 283): stop being anchored at all and
   pin to the viewport. The mobile top bar is `fixed` (MainLayout) and --header-height is set on
   <body> in App.razor, so the panel simply starts under it and the list scrolls inside. */
@media (max-width: 1023.98px) {
    .bz-bell-panel[b-r0cw2covyd] {
        position: fixed;
        inset-inline-start: auto;
        inset-inline-end: var(--bz-space-3);
        top: calc(var(--header-height) + var(--bz-space-2));
        width: min(24rem, calc(100vw - 2 * var(--bz-space-3)));
        max-height: calc(100dvh - var(--header-height) - var(--bz-mobile-nav-h) - var(--bz-space-4));
        display: flex;
        flex-direction: column;
    }

    .bz-bell-list[b-r0cw2covyd] {
        max-height: none;
        min-height: 0;
    }
}

.bz-bell-head[b-r0cw2covyd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bz-space-2);
    padding: var(--bz-space-3) var(--bz-space-4);
    border-bottom: 1px solid var(--bz-color-border);
}

.bz-bell-title[b-r0cw2covyd] {
    font-weight: 600;
    color: var(--bz-color-fg);
}

.bz-bell-head-actions[b-r0cw2covyd] {
    display: flex;
    align-items: center;
    gap: var(--bz-space-2);
}

/* The panel's own close control — the only way out on a phone, where the pinned panel covers the
   bell (#125 follow-up, task 291). Lightweight like the other head icons; 44px on touch. */
.bz-bell-close[b-r0cw2covyd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--bz-radius-md);
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--bz-color-fg-muted);
    font-size: 1rem;
}

.bz-bell-close:hover[b-r0cw2covyd],
.bz-bell-close:focus-visible[b-r0cw2covyd] {
    background: var(--bz-color-surface-2);
    color: var(--bz-color-fg);
}

@media (pointer: coarse) {
    .bz-bell-close[b-r0cw2covyd] { width: 44px; height: 44px; font-size: 1.25rem; }
}

.bz-bell-action[b-r0cw2covyd] {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--bz-color-accent);
}

/* Icon-only toggle for opt-in browser notifications, sized to match the bell trigger's tap target. */
.bz-bell-browser-toggle[b-r0cw2covyd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--bz-radius-md);
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--bz-color-fg-muted);
    font-size: 1rem;
}

.bz-bell-browser-toggle:hover:not(:disabled)[b-r0cw2covyd] {
    background: var(--bz-color-surface-2);
    color: var(--bz-color-fg);
}

.bz-bell-browser-toggle--on[b-r0cw2covyd] {
    color: var(--bz-color-accent);
}

.bz-bell-browser-toggle:disabled[b-r0cw2covyd] {
    cursor: not-allowed;
    opacity: 0.5;
}

.bz-bell-list[b-r0cw2covyd] {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 24rem;
    overflow-y: auto;
}

.bz-bell-empty[b-r0cw2covyd] {
    padding: var(--bz-space-5) var(--bz-space-4);
    text-align: center;
    color: var(--bz-color-fg-muted);
    font-size: 0.85rem;
}

.bz-bell-item + .bz-bell-item[b-r0cw2covyd] {
    border-top: 1px solid var(--bz-color-border);
}

/* Unread must stay visually louder than a hovered read row (bz-bell-item-btn:hover uses surface-3),
   so the resting tint is accent-based, not the neutral surface a hover already claims. */
.bz-bell-item--unread[b-r0cw2covyd] {
    background: var(--bz-primary-50);
    box-shadow: inset 3px 0 0 var(--bz-color-accent);
}

.bz-bell-item--unread .bz-bell-item-btn:hover[b-r0cw2covyd] {
    background: color-mix(in srgb, var(--bz-color-accent) 20%, transparent);
}

.bz-bell-item-btn[b-r0cw2covyd] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 100%;
    text-align: start;
    background: none;
    border: 0;
    cursor: pointer;
    padding: var(--bz-space-3) var(--bz-space-4);
}

.bz-bell-item-btn:hover[b-r0cw2covyd] {
    background: var(--bz-color-surface-3);
}

.bz-bell-item-title[b-r0cw2covyd] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--bz-color-fg);
    font-size: 0.875rem;
    font-weight: 500;
}

.bz-bell-item-dot[b-r0cw2covyd] {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bz-color-accent);
}

.bz-bell-item-body[b-r0cw2covyd],
.bz-bell-item-time[b-r0cw2covyd] {
    color: var(--bz-color-fg-muted);
    font-size: 0.75rem;
}
/* /Components/SidebarBrandLink.razor.rz.scp.css */
.sidebar-brand-link[b-u9lbopgojk],
.sidebar-brand-link:hover[b-u9lbopgojk],
.sidebar-brand-link:focus[b-u9lbopgojk],
.sidebar-brand-link:active[b-u9lbopgojk] {
    color: var(--color-mono);
    background: transparent;
    text-decoration: none;
}
/* /Components/SidebarNavResults.razor.rz.scp.css */
/* Dark-sidebar colours come from the Metronic tokens `.dark` redeclares on #sidebar — see
   SidebarNavSearch.razor.css for why the --bz-* colour tokens cannot be used in here. */

.bz-nav-results[b-gjdxi7t3q3] {
    display: flex;
    flex-direction: column;
    gap: var(--bz-space-2);
    padding-inline: calc(var(--bz-space-3) + 2px);
}

.bz-nav-results-count[b-gjdxi7t3q3],
.bz-nav-results-empty[b-gjdxi7t3q3] {
    margin: 0;
    padding-inline: var(--bz-space-2);
    font-size: var(--bz-fs-xs);
    color: color-mix(in oklab, var(--foreground) 70%, var(--background));
}

.bz-nav-results-empty[b-gjdxi7t3q3] {
    padding-block: var(--bz-space-3);
    font-size: var(--bz-fs-sm);
}

.bz-nav-results-group[b-gjdxi7t3q3] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.bz-nav-results-module[b-gjdxi7t3q3] {
    display: flex;
    align-items: center;
    gap: var(--bz-space-2);
    padding: var(--bz-space-1) var(--bz-space-2);
    font-size: var(--bz-fs-xs);
    font-weight: var(--bz-fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: color-mix(in oklab, var(--foreground) 70%, var(--background));
}

.bz-nav-result[b-gjdxi7t3q3] {
    display: flex;
    align-items: flex-start;
    gap: var(--bz-space-2);
    padding: 6px var(--bz-space-2) 6px var(--bz-space-3);
    border-radius: var(--bz-radius-md);
    color: var(--foreground);
    text-decoration: none;
    transition: background-color var(--bz-duration-fast) var(--bz-ease);
}

.bz-nav-result > i[b-gjdxi7t3q3] {
    margin-top: 2px;
    font-size: 16px;
    color: color-mix(in oklab, var(--foreground) 70%, var(--background));
}

.bz-nav-result:hover[b-gjdxi7t3q3] {
    background: var(--accent);
}

.bz-nav-result.is-active[b-gjdxi7t3q3] {
    background: var(--secondary);
    box-shadow: inset 2px 0 0 var(--primary);
}

.bz-nav-result-text[b-gjdxi7t3q3] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bz-nav-result-label[b-gjdxi7t3q3] {
    font-size: var(--bz-fs-sm);
    font-weight: var(--bz-fw-medium);
}

.bz-nav-result-path[b-gjdxi7t3q3] {
    font-size: var(--bz-fs-xs);
    color: color-mix(in oklab, var(--foreground) 68%, var(--background));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The shared .bz-mark tint is built from --bz-color-warn, resolved on :root: in the light theme
   that is a dark yellow that barely shows on zinc-950. A brighter tint for the dark sidebar keeps
   the zinc-50 label at roughly 9:1. */
.bz-nav-result-label[b-gjdxi7t3q3]  .bz-mark {
    background: color-mix(in srgb, var(--color-yellow-500) 35%, transparent);
    color: var(--foreground);
}
/* /Components/SidebarNavSearch.razor.rz.scp.css */
/* The sidebar is always dark (`class="dark"` on #sidebar), but the --bz-* colour tokens resolve on
   :root — in the light theme they are the LIGHT palette even in here. So colours come from the
   Metronic tokens `.dark` redeclares on the sidebar (--foreground, --background, --input, --primary);
   --bz-* supplies only spacing, radius, type and motion. Shape mirrors `.bz-search-input`. */

.bz-nav-search[b-j7qotqizef] {
    padding-inline: calc(var(--bz-space-3) + 2px);
}

.bz-nav-search-box[b-j7qotqizef] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.bz-nav-search-box > i[b-j7qotqizef] {
    position: absolute;
    left: 10px;
    font-size: 15px;
    line-height: 1;
    color: color-mix(in oklab, var(--foreground) 60%, var(--background));
    pointer-events: none;
}

.bz-nav-search-box > input[b-j7qotqizef] {
    width: 100%;
    min-height: var(--bz-control-height);
    padding: 0.38rem 2.1rem;
    background: var(--background);
    border: 1px solid var(--input);
    border-radius: var(--bz-radius-md);
    color: var(--foreground);
    font-family: var(--bz-font-sans);
    font-size: var(--bz-fs-sm);
    line-height: 1.5;
    transition: border-color var(--bz-duration-fast) var(--bz-ease),
                box-shadow var(--bz-duration-fast) var(--bz-ease);
}

.bz-nav-search-box > input[b-j7qotqizef]::placeholder {
    color: color-mix(in oklab, var(--foreground) 55%, var(--background));
}

.bz-nav-search-box > input:focus[b-j7qotqizef] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 40%, transparent);
}

.bz-nav-search-close[b-j7qotqizef] {
    position: absolute;
    right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: var(--bz-radius-sm);
    background: transparent;
    color: color-mix(in oklab, var(--foreground) 70%, var(--background));
    cursor: pointer;
    transition: background-color var(--bz-duration-fast) var(--bz-ease);
}

.bz-nav-search-close:hover[b-j7qotqizef] {
    background: var(--secondary);
    color: var(--foreground);
}
/* /Components/TenantClock.razor.rz.scp.css */
.bz-tenant-clock[b-josxl3xhzy] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-variant-numeric: tabular-nums;
}
/* /Components/ThemeSwitcher.razor.rz.scp.css */
.switcher[b-zlt3p4jcdw] {
    display: inline-flex;
    border: 1px solid color-mix(in srgb, var(--bz-color-border) 72%, transparent);
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--bz-color-surface) 82%, transparent);
    box-shadow: var(--bz-shadow-sm);
}

.switcher button[b-zlt3p4jcdw] {
    background: transparent;
    border: 0;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    color: var(--bz-color-fg-muted);
    font-size: var(--bz-fs-sm);
}

.switcher button.on[b-zlt3p4jcdw] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--bz-brand-primary) 80%, transparent), color-mix(in srgb, var(--bz-brand-primary) 60%, var(--bz-color-surface) 12%));
    color: var(--bz-color-accent-fg);
}

.switcher button + button[b-zlt3p4jcdw] { border-left: 1px solid color-mix(in srgb, var(--bz-color-border) 70%, transparent); }
/* /Components/UserMenu.razor.rz.scp.css */
.user[b-rknbdlel9z] {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	font-size: var(--bz-fs-sm);
}

.realm-badge[b-rknbdlel9z] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2rem;
	padding: 0 0.65rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.realm-badge.host[b-rknbdlel9z] {
	color: white;
	background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.realm-badge.tenant[b-rknbdlel9z] {
	color: white;
	background: linear-gradient(135deg, #0f766e, #0d9488);
}

.user-dd[b-rknbdlel9z] {
	position: relative;
}

.user-name[b-rknbdlel9z] {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0.45rem 0.9rem;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--bz-color-border) 72%, transparent);
	background: color-mix(in srgb, var(--bz-color-surface) 82%, transparent);
	color: var(--bz-color-fg-muted);
	cursor: pointer;
	list-style: none;
	box-shadow: var(--bz-shadow-sm);
}

.user-name[b-rknbdlel9z]::-webkit-details-marker {
	display: none;
}

.user-menu[b-rknbdlel9z] {
	position: absolute;
	inset-inline-end: 0;
	top: calc(100% + 0.5rem);
	min-width: 13rem;
	margin: 0;
	padding: 0.5rem;
	list-style: none;
	border: 1px solid color-mix(in srgb, var(--bz-color-border) 72%, transparent);
	border-radius: 1rem;
	background: var(--bz-color-popover);
	box-shadow: var(--bz-shadow-lg);
}

.user-menu a[b-rknbdlel9z] {
	display: block;
	padding: 0.6rem 0.75rem;
	border-radius: 0.75rem;
	color: var(--bz-color-fg);
	text-decoration: none;
}

.user-menu a:hover[b-rknbdlel9z] {
	background: color-mix(in srgb, var(--bz-brand-primary) 10%, var(--bz-color-surface));
	color: var(--bz-brand-primary);
}

.user-menu-sep[b-rknbdlel9z] {
	height: 1px;
	margin: 0.35rem 0;
	background: color-mix(in srgb, var(--bz-color-border) 72%, transparent);
}

.user-action[b-rknbdlel9z] {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0.45rem 0.95rem;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--bz-color-border) 72%, transparent);
	background: color-mix(in srgb, var(--bz-color-surface) 82%, transparent);
	color: var(--bz-brand-primary);
	text-decoration: none;
	font-size: var(--bz-fs-sm);
}

.user-action:hover[b-rknbdlel9z] {
	border-color: color-mix(in srgb, var(--bz-brand-primary) 32%, var(--bz-color-border));
}
/* /Layouts/EmptyLayout.razor.rz.scp.css */
.empty-layout[b-wbp9yd577y] {
    /* The shell's <body> is a flex row; without this the layout only covers its content width and
       the body's dark background fills the rest of the screen. */
    flex: 1 1 auto;
    min-width: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--bz-color-bg);
    color: var(--bz-color-fg);
    font-family: var(--bz-font-sans);
    padding: var(--bz-space-6);
}
/* /Layouts/MainLayout.razor.rz.scp.css */
/* Shared workspace composition lives in wwwroot/css/workspace.css over Metronic + Tailwind. */
/* /Pages/Error.razor.rz.scp.css */
.error-box[b-84hv27a5ly] {
    background: var(--bz-color-surface);
    border: 1px solid var(--bz-color-border);
    border-radius: var(--bz-radius-md);
    padding: var(--bz-space-6);
    max-width: 480px;
    text-align: center;
}

.error-box h1[b-84hv27a5ly] { margin-top: 0; color: var(--bz-color-danger); }

.error-box a[b-84hv27a5ly] { color: var(--bz-brand-primary); }
/* /Pages/Home.razor.rz.scp.css */
/* ── Unauthenticated landing ────────────────────────────────────────────── */
.home-anon[b-g57uh5ze3r] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: var(--bz-space-8);
}

.home-anon-card[b-g57uh5ze3r] {
    text-align: center;
    max-width: 420px;
}

.home-anon-logo[b-g57uh5ze3r] {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--bz-space-5);
    display: block;
}

.home-anon-title[b-g57uh5ze3r] {
    font-size: var(--bz-fs-3xl);
    font-weight: var(--bz-fw-bold);
    color: var(--bz-color-fg);
    margin: 0 0 var(--bz-space-3);
    line-height: var(--bz-lh-tight);
}

.home-anon-desc[b-g57uh5ze3r] {
    font-size: var(--bz-fs-lg);
    color: var(--bz-color-fg-muted);
    margin: 0 0 var(--bz-space-6);
    line-height: var(--bz-lh);
}

.home-anon-actions[b-g57uh5ze3r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bz-space-3);
}

.home-anon-btn-primary[b-g57uh5ze3r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--bz-control-height-lg);
    padding: 0 var(--bz-space-6);
    border-radius: var(--bz-radius-md);
    background: var(--bz-color-accent);
    color: var(--bz-color-accent-fg);
    font-size: var(--bz-fs-md);
    font-weight: var(--bz-fw-semibold);
    text-decoration: none;
    transition: background var(--bz-duration-fast) var(--bz-ease);
    width: 100%;
}
.home-anon-btn-primary:hover[b-g57uh5ze3r] { background: var(--bz-color-accent-hover); color: var(--bz-color-accent-fg); }

.home-anon-btn-secondary[b-g57uh5ze3r] {
    font-size: var(--bz-fs-sm);
    color: var(--bz-color-fg-muted);
    text-decoration: none;
}
.home-anon-btn-secondary:hover[b-g57uh5ze3r] { color: var(--bz-color-accent); text-decoration: underline; }

/* ── Greeting hero strip ────────────────────────────────────────────────── */
.home-hero[b-g57uh5ze3r] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--bz-space-5);
    margin-bottom: var(--bz-space-5);
    padding: clamp(24px, 3vw, 44px);
    border: 1px solid var(--bz-color-hero-line);
    border-radius: var(--bz-radius-xl);
    background: linear-gradient(115deg, var(--bz-color-hero), var(--bz-color-hero-end));
    color: var(--bz-color-hero-fg);
    box-shadow: var(--bz-shadow-lg);
}
.home-hero[b-g57uh5ze3r]::before {
    content: '';
    position: absolute;
    z-index: -1;
    width: 460px;
    aspect-ratio: 1;
    inset-inline-end: -100px;
    top: -240px;
    border: 1px solid var(--bz-color-hero-line);
    border-radius: 50%;
    box-shadow: 0 0 0 60px var(--bz-color-hero-line), 0 0 0 120px color-mix(in srgb, var(--bz-color-hero-fg) 4%, transparent);
    pointer-events: none;
}
.home-hero-text[b-g57uh5ze3r] { min-width: 0; }
.home-hero-kicker[b-g57uh5ze3r] { display: flex; align-items: center; gap: var(--bz-space-2); margin-bottom: var(--bz-space-3); font-size: var(--bz-fs-sm); font-weight: var(--bz-fw-medium); color: var(--bz-color-hero-muted); overflow-wrap: anywhere; }
.home-hero-mark[b-g57uh5ze3r] { display: inline-flex; justify-content: center; align-items: center; width: 28px; height: 28px; border-radius: var(--bz-radius-md); background: var(--bz-color-hero-line); color: var(--bz-color-hero-fg); }
.home-greeting[b-g57uh5ze3r] {
    font-size: clamp(30px, 3.2vw, 48px);
    font-weight: var(--bz-fw-semibold);
    color: var(--bz-color-hero-fg);
    letter-spacing: -.045em;
    margin: 0 0 var(--bz-space-3);
    line-height: var(--bz-lh-tight);
    overflow-wrap: anywhere;
}
.home-subtext[b-g57uh5ze3r] { font-size: var(--bz-fs-md); color: var(--bz-color-hero-muted); margin: 0; }
.home-hero-actions[b-g57uh5ze3r] { grid-column: 1; display: flex; flex-wrap: wrap; gap: var(--bz-space-2); }
.home-hero-actions a[b-g57uh5ze3r] { display: inline-flex; align-items: center; gap: var(--bz-space-2); min-height: 44px; padding: var(--bz-space-2) var(--bz-space-3); border: 1px solid var(--bz-color-hero-line); border-radius: var(--bz-radius-md); color: var(--bz-color-hero-fg); background: var(--bz-color-hero-line); font-size: var(--bz-fs-sm); transition: background var(--bz-duration-base) var(--bz-ease), transform var(--bz-duration-base) var(--bz-ease); }
.home-hero-actions a:hover[b-g57uh5ze3r] { background: color-mix(in srgb, var(--bz-color-hero-fg) 24%, transparent); text-decoration: none; transform: translateY(-2px); }
.home-hero .home-widget-toolbar[b-g57uh5ze3r] { grid-column: 2; grid-row: 1; align-self: start; margin: 0; flex-wrap: wrap; justify-content: flex-end; max-width: 24rem; }
.home-hero .home-customize-btn[b-g57uh5ze3r] { min-height: 40px; background: var(--bz-color-hero-line); border-color: var(--bz-color-hero-line); color: var(--bz-color-hero-fg); box-shadow: none; }
.home-hero .home-customize-btn:hover[b-g57uh5ze3r] { background: color-mix(in srgb, var(--bz-color-hero-fg) 24%, transparent); color: var(--bz-color-hero-fg); }
/* ── Quick-access chips ─────────────────────────────────────────────────── */
/* The chip itself (.bz-dash-quick / -chip / -icon / -label) moved to Web.Common/wwwroot/dashboard.css
   (task 328/#184) so the Product Information dashboard's Settings card can render the same chip — a
   module RCL cannot reach this scoped stylesheet. Only the home page's per-module accent colours
   (data, not layout — see docs/dev/guides/design-system.md "Legitimate literals") stay here. */

/* ── Personal insight cards (tasks / appointments / partners) ──────────────── */
.home-insight-grid[b-g57uh5ze3r] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--bz-space-5);
    margin-bottom: var(--bz-space-5);
}

/* Cards stretch to equal height; the list/empty area fills the remainder. Every card now sits in
   a .home-widget wrapper (task 259 WP6), and the extracted widget components render their own
   markup, so the insight internals are styled through ::deep from the wrapper. */
.home-insight-grid > .home-widget[b-g57uh5ze3r] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.home-widget[b-g57uh5ze3r]  .bz-dash-section {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-bottom: 0;
}

.home-widget[b-g57uh5ze3r]  .home-insight-empty {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: var(--bz-space-5);
    color: var(--bz-color-fg-muted);
    font-size: var(--bz-fs-sm);
}

.home-widget[b-g57uh5ze3r]  .home-insight-counts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bz-space-2);
    padding: var(--bz-space-4) var(--bz-space-5) var(--bz-space-3);
}

.home-widget[b-g57uh5ze3r]  .home-insight-list {
    list-style: none;
    margin: 0;
    padding: 0 0 var(--bz-space-2);
    flex: 1;
}

.home-widget[b-g57uh5ze3r]  .home-insight-row {
    display: flex;
    align-items: center;
    gap: var(--bz-space-3);
    padding: var(--bz-space-3) var(--bz-space-5);
    font-size: var(--bz-fs-sm);
}
.home-widget[b-g57uh5ze3r]  .home-insight-row + .home-insight-row {
    border-top: 1px solid color-mix(in srgb, var(--bz-color-border) 55%, transparent);
}
.home-widget[b-g57uh5ze3r]  .home-insight-row:hover { background: var(--bz-color-surface-2); }

.home-widget[b-g57uh5ze3r]  .home-insight-primary {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--bz-color-fg);
    font-weight: var(--bz-fw-medium);
}
.home-widget[b-g57uh5ze3r]  a.home-insight-primary { text-decoration: none; }
.home-widget[b-g57uh5ze3r]  a.home-insight-primary:hover { color: var(--bz-color-accent); text-decoration: underline; }

.home-widget[b-g57uh5ze3r]  .home-insight-meta {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ── Widget toolbar + customize mode (task 259 WP6) ─────────────────────── */
.home-widget-toolbar[b-g57uh5ze3r] {
    display: flex;
    justify-content: flex-end;
    gap: var(--bz-space-2);
    margin-bottom: var(--bz-space-3);
}

.home-customize-btn[b-g57uh5ze3r] {
    display: inline-flex;
    align-items: center;
    gap: var(--bz-space-2);
    padding: var(--bz-space-1) var(--bz-space-3);
    background: var(--bz-color-surface);
    border: 1px solid var(--bz-color-border);
    border-radius: var(--bz-radius-md);
    color: var(--bz-color-fg-muted);
    font-size: var(--bz-fs-sm);
    cursor: pointer;
}
.home-customize-btn:hover[b-g57uh5ze3r] { border-color: var(--bz-color-accent); color: var(--bz-color-accent); }
.home-customize-btn.primary[b-g57uh5ze3r] {
    background: var(--bz-color-accent);
    border-color: var(--bz-color-accent);
    color: var(--bz-color-accent-fg);
}
.home-customize-btn.primary:hover[b-g57uh5ze3r] { color: var(--bz-color-accent-fg); }

/* The entry-point "Customize dashboard" CTA (task 261 WP-B, GitLab #74) — same accent language as
   .primary (the Save button in edit mode) but bigger and with a stronger hover, so it reads as the
   dashboard's one prominent action rather than a quiet utility link. */
.home-customize-btn-cta[b-g57uh5ze3r] {
    background: var(--bz-color-accent);
    border-color: var(--bz-color-accent);
    color: var(--bz-color-accent-fg);
    padding: var(--bz-space-2) var(--bz-space-4);
    font-size: var(--bz-fs-md);
    font-weight: var(--bz-fw-semibold);
    box-shadow: var(--bz-shadow-sm);
}
.home-customize-btn-cta:hover[b-g57uh5ze3r] {
    background: var(--bz-color-accent-hover);
    color: var(--bz-color-accent-fg);
    box-shadow: var(--bz-shadow-md);
}

.home-widget-hidden[b-g57uh5ze3r] { opacity: .45; }

.home-widget-edit-bar[b-g57uh5ze3r] {
    display: flex;
    align-items: center;
    gap: var(--bz-space-2);
    padding: var(--bz-space-1) var(--bz-space-2);
    margin-bottom: var(--bz-space-1);
    border: 1px dashed var(--bz-color-border);
    border-radius: var(--bz-radius-sm);
    background: var(--bz-color-surface-2);
    font-size: var(--bz-fs-sm);
}

.home-widget-drag[b-g57uh5ze3r] { cursor: grab; color: var(--bz-color-fg-muted); }

.home-widget-toggle[b-g57uh5ze3r] {
    display: inline-flex;
    align-items: center;
    gap: var(--bz-space-2);
    margin: 0;
    cursor: pointer;
    color: var(--bz-color-fg);
}

/* ── Widget-component internals (rendered by child components → ::deep) ──── */
.home-widget[b-g57uh5ze3r]  .home-action-icon {
    flex-shrink: 0;
    color: var(--bz-color-fg-muted);
    font-size: var(--bz-fs-lg);
}

.home-widget[b-g57uh5ze3r]  .home-action-clear {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: var(--bz-space-2);
    min-height: 120px;
    padding: var(--bz-space-5);
    color: var(--bz-color-ok);
    font-size: var(--bz-fs-sm);
    font-weight: var(--bz-fw-medium);
}

.home-widget[b-g57uh5ze3r]  .home-health-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: var(--bz-space-3);
    padding: var(--bz-space-4) var(--bz-space-5) var(--bz-space-5);
    flex: 1;
    align-content: start;
}

.home-widget[b-g57uh5ze3r]  .home-health-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bz-space-1);
    padding: var(--bz-space-3);
    border: 1px solid var(--bz-color-border);
    border-radius: var(--bz-radius-md);
    background: var(--bz-color-surface-2);
}

.home-widget[b-g57uh5ze3r]  .home-health-value {
    font-size: var(--bz-fs-xl);
    font-weight: var(--bz-fw-bold);
    color: var(--bz-color-fg);
}

.home-widget[b-g57uh5ze3r]  .home-health-label {
    font-size: var(--bz-fs-xs);
    color: var(--bz-color-fg-muted);
}

.home-widget[b-g57uh5ze3r]  .home-health-danger .home-health-value { color: var(--bz-color-danger); }
.home-widget[b-g57uh5ze3r]  .home-health-danger { border-color: color-mix(in srgb, var(--bz-color-danger) 40%, transparent); }

.home-widget[b-g57uh5ze3r]  .home-create-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bz-space-3);
    padding: var(--bz-space-4) var(--bz-space-5) var(--bz-space-5);
    align-content: start;
    flex: 1;
}

.home-widget[b-g57uh5ze3r]  .home-create-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--bz-space-2);
    padding: var(--bz-space-2) var(--bz-space-4);
    background: var(--bz-color-surface);
    border: 1px solid var(--bz-color-border);
    border-radius: var(--bz-radius-pill);
    color: var(--bz-color-fg);
    font-size: var(--bz-fs-sm);
    font-weight: var(--bz-fw-medium);
    text-decoration: none;
}
.home-widget[b-g57uh5ze3r]  .home-create-btn:hover {
    border-color: var(--bz-color-accent);
    color: var(--bz-color-accent);
}

.home-widget[b-g57uh5ze3r]  .home-insight-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.home-widget[b-g57uh5ze3r]  .home-insight-dot.ok { background: var(--bz-color-ok); }
.home-widget[b-g57uh5ze3r]  .home-insight-dot.warn { background: var(--bz-color-warn); }

/* ── Today's Appointments widget (task 261 WP-B, GitLab #75) ───────────────
   Rows need two lines (time/badges, then subject + detail chips) instead of the single-line
   .home-insight-row layout the other list widgets use, so they opt into a column layout here while
   keeping the shared row spacing/border/hover from .home-insight-row. */
.home-widget[b-g57uh5ze3r]  .home-appt-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--bz-space-1);
}

.home-widget[b-g57uh5ze3r]  .home-appt-next {
    border-left: 3px solid var(--bz-color-accent);
    padding-left: calc(var(--bz-space-5) - 3px);
    background: color-mix(in srgb, var(--bz-color-accent) 6%, transparent);
}

.home-widget[b-g57uh5ze3r]  .home-appt-ended { opacity: .5; }

.home-widget[b-g57uh5ze3r]  .home-appt-headline {
    display: flex;
    align-items: center;
    gap: var(--bz-space-2);
    flex-wrap: wrap;
}

.home-widget[b-g57uh5ze3r]  .home-appt-tag {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--bz-space-2);
    border-radius: var(--bz-radius-pill);
    background: var(--bz-color-accent);
    color: var(--bz-color-accent-fg);
    font-size: var(--bz-fs-xs);
    font-weight: var(--bz-fw-semibold);
    text-transform: uppercase;
}

.home-widget[b-g57uh5ze3r]  .home-appt-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bz-space-3);
    font-size: var(--bz-fs-xs);
    color: var(--bz-color-fg-muted);
}

.home-widget[b-g57uh5ze3r]  .home-appt-detail {
    display: inline-flex;
    align-items: center;
    gap: var(--bz-space-1);
}
.home-widget[b-g57uh5ze3r]  .home-appt-detail a { color: inherit; }
.home-widget[b-g57uh5ze3r]  .home-appt-detail a:hover { color: var(--bz-color-accent); }

/* ── Module icon accent colours ─────────────────────────────────────────── */
.hm-blue[b-g57uh5ze3r]   { background: color-mix(in srgb, #1f5fd8 12%, transparent); color: #1f5fd8; }
.hm-green[b-g57uh5ze3r]  { background: color-mix(in srgb, #1f7a3a 12%, transparent); color: #1f7a3a; }
.hm-amber[b-g57uh5ze3r]  { background: color-mix(in srgb, #b07d16 12%, transparent); color: #b07d16; }
.hm-red[b-g57uh5ze3r]    { background: color-mix(in srgb, #c0392b 12%, transparent); color: #c0392b; }
.hm-purple[b-g57uh5ze3r] { background: color-mix(in srgb, #7c3aed 12%, transparent); color: #7c3aed; }
.hm-cyan[b-g57uh5ze3r]   { background: color-mix(in srgb, #0891b2 12%, transparent); color: #0891b2; }
.hm-teal[b-g57uh5ze3r]   { background: color-mix(in srgb, #0d9488 12%, transparent); color: #0d9488; }

/* ▲/▼ reorder buttons — HTML5 drag-and-drop never fires on touch (GitLab #107-2). */
.home-widget-move[b-g57uh5ze3r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--bz-color-border);
    border-radius: var(--bz-radius-sm);
    background: var(--bz-color-surface);
    color: var(--bz-color-fg-muted);
    font-size: var(--bz-fs-xs);
    line-height: 1;
    cursor: pointer;
}
.home-widget-move:hover[b-g57uh5ze3r] { border-color: var(--bz-color-accent); color: var(--bz-color-accent); }

/* Task 285 (#113): these exist BECAUSE the pointer is coarse (drag-and-drop never fires on touch),
   so 28px was the wrong size on the only device that sees them. Scoped here — the shared
   (pointer: coarse) block in shell.css cannot reach a component-scoped class. */
@media (pointer: coarse) {
    .home-widget-move[b-g57uh5ze3r] { width: 40px; height: 40px; font-size: var(--bz-fs-sm); }
}

/* My Day digest (GitLab #107-4). It reuses .home-widget so the shared ::deep
   insight-row styling above applies; only the grid's zeroed margin needs restoring. */
.home-widget.bz-mobile-only[b-g57uh5ze3r] { margin-bottom: var(--bz-space-5); }
.home-widget.bz-mobile-only[b-g57uh5ze3r]  .bz-dash-section { margin-bottom: 0; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .home-greeting[b-g57uh5ze3r] {
        font-size: 30px;
    }
}

/* Action Center first on a phone (GitLab #107-6) — the day's to-do list outranks the reference
   cards on a small screen. Suspended in edit mode so the user drags the order they saved. */
@media (max-width: 640px) {
    .home-insight-grid:not(.home-editing) > [data-widget-id="action-center"][b-g57uh5ze3r] { order: -1; }
}

/* The operational digest leads on every screen; source failures still omit unavailable counts. */
.home-day-overview[b-g57uh5ze3r] { margin-bottom: var(--bz-space-5); }
.home-day-overview[b-g57uh5ze3r]  .bz-dash-section { border: 0; background: transparent; box-shadow: none; }
.home-day-overview[b-g57uh5ze3r]  .bz-dash-section-head { padding: 0 0 var(--bz-space-3); border: 0; background: transparent; }
.home-day-overview[b-g57uh5ze3r]  .home-insight-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--bz-space-3); padding: 0; }
.home-day-overview[b-g57uh5ze3r]  .home-insight-row { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: var(--bz-space-3); padding: var(--bz-space-4); border: 1px solid var(--bz-color-border); border-radius: var(--bz-radius-lg); background: var(--bz-color-surface); box-shadow: var(--bz-shadow-sm); }
.home-day-overview[b-g57uh5ze3r]  .home-insight-row:hover { border-color: var(--bz-color-accent); background: var(--bz-color-wash); }
.home-day-overview[b-g57uh5ze3r]  .home-action-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--bz-radius-md); background: color-mix(in srgb, var(--bz-color-accent) 10%, var(--bz-color-surface)); color: var(--bz-color-accent-text); font-size: 18px; }
.home-day-overview[b-g57uh5ze3r]  .home-insight-primary { white-space: normal; overflow: visible; }
.home-day-overview[b-g57uh5ze3r]  .home-insight-primary::after { content: ''; position: absolute; inset: 0; border-radius: var(--bz-radius-lg); }
.home-day-overview[b-g57uh5ze3r]  .home-insight-meta { font-size: var(--bz-fs-2xl); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.home-day-overview[b-g57uh5ze3r]  .home-insight-meta:not(.bz-text-danger) { color: var(--bz-color-fg); }

/* Reference KPIs support the work widgets rather than dominating the overview. */
[b-g57uh5ze3r] .bz-dash-kpis { gap: var(--bz-space-3); }
[b-g57uh5ze3r] .bz-dash-kpi { padding: var(--bz-space-4); padding-inline-end: 60px; min-height: 130px; }
[b-g57uh5ze3r] .bz-dash-kpi-icon { position: absolute; inset-inline-end: var(--bz-space-3); top: var(--bz-space-4); width: 34px; height: 34px; }
[b-g57uh5ze3r] .bz-dash-kpi-value { font-size: var(--bz-fs-2xl); }
.home-insight-grid > [data-widget-id="ai-insights"][b-g57uh5ze3r]  .bz-dash-section { background: linear-gradient(145deg, var(--bz-color-surface), var(--bz-color-wash)); }
.home-insight-grid > [data-widget-id="ai-insights"][b-g57uh5ze3r]  .bz-dash-section-head { background: color-mix(in srgb, var(--bz-color-accent) 8%, var(--bz-color-surface)); }
[b-g57uh5ze3r] .bz-dash-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--bz-space-3); }
[b-g57uh5ze3r] .bz-dash-quick-chip { min-width: 0; min-height: 74px; padding: var(--bz-space-4); border-radius: var(--bz-radius-lg); box-shadow: var(--bz-shadow-sm); }
[b-g57uh5ze3r] .bz-dash-quick-icon { width: 40px; height: 40px; font-size: 20px; border-radius: var(--bz-radius-md); }
[b-g57uh5ze3r] .bz-dash-quick-label { white-space: normal; flex: 1; overflow-wrap: anywhere; }
.home-quick-arrow[b-g57uh5ze3r] { color: var(--bz-color-fg-muted); font-size: var(--bz-fs-lg); transition: transform var(--bz-duration-base) var(--bz-ease); }
[b-g57uh5ze3r] .bz-dash-quick-chip:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--bz-shadow-md); }
[b-g57uh5ze3r] .bz-dash-quick-chip:hover .home-quick-arrow { transform: translate(2px, -2px); }
@media (min-width: 1600px) {
    .home-insight-grid[b-g57uh5ze3r] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .home-insight-grid:not(.home-editing) > [data-widget-id="action-center"][b-g57uh5ze3r] { grid-column: span 2; }
}
@media (max-width: 1023.98px) {
    .home-hero[b-g57uh5ze3r] { grid-template-columns: minmax(0, 1fr); padding: var(--bz-space-5); gap: var(--bz-space-4); }
    .home-hero .home-widget-toolbar[b-g57uh5ze3r] { grid-column: 1; grid-row: auto; justify-content: flex-start; }
    .home-hero .home-customize-btn[b-g57uh5ze3r] { min-height: 44px; }
}
@media (max-width: 640px) {
    .home-hero[b-g57uh5ze3r] { padding: var(--bz-space-4) var(--bz-space-5); gap: var(--bz-space-3); }
    .home-hero-actions a > i:last-child[b-g57uh5ze3r] { display: none; }
    .home-hero-actions a[b-g57uh5ze3r] { padding-inline: 10px; gap: 6px; font-size: var(--bz-fs-xs); }
    .home-day-overview[b-g57uh5ze3r]  .home-insight-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-day-overview[b-g57uh5ze3r]  .home-insight-row { grid-template-columns: 1fr auto; gap: var(--bz-space-2); padding: var(--bz-space-3); }
    .home-day-overview[b-g57uh5ze3r]  .home-action-icon { grid-column: 1; }
    .home-day-overview[b-g57uh5ze3r]  .home-insight-primary { grid-row: 2; grid-column: 1 / -1; }
    .home-day-overview[b-g57uh5ze3r]  .home-insight-meta { grid-row: 1; grid-column: 2; }
    [b-g57uh5ze3r] .bz-dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    [b-g57uh5ze3r] .bz-dash-kpi { padding-inline-end: var(--bz-space-3); min-height: 125px; }
    [b-g57uh5ze3r] .bz-dash-kpi-icon { position: static; width: 28px; height: 28px; font-size: 16px; }
    [b-g57uh5ze3r] .bz-dash-kpi-label { font-size: var(--bz-fs-xs); }
    [b-g57uh5ze3r] .bz-dash-kpi-trend { max-width: 100%; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
    .home-hero-actions a[b-g57uh5ze3r], .home-quick-arrow[b-g57uh5ze3r] { transition: none; }
    .home-hero-actions a:hover[b-g57uh5ze3r], [b-g57uh5ze3r] .bz-dash-quick-chip:hover, [b-g57uh5ze3r] .bz-dash-quick-chip:hover .home-quick-arrow { transform: none; }
}
/* /Pages/SharedLink.razor.rz.scp.css */
/* Phase C public share page. Self-contained (Web.Shell cannot reference a module RCL) and built on
   the --bz-* design tokens + the globally loaded Metronic kt-* classes, not raw Bootstrap utilities.
   The visual reference is Login.razor: same floating controls pill, same centred kt-card gate. */

.share-page[b-dz9wg8s8v2] {
    min-height: 100vh;
    width: 100%;
    padding: var(--bz-space-6);
    color: var(--bz-color-fg);
}

/* === Gate (loading / not found / password) ============================== */

.share-gate[b-dz9wg8s8v2] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 3rem);
}

.share-card[b-dz9wg8s8v2] {
    width: 100%;
    max-width: 420px;
}

.share-card-content[b-dz9wg8s8v2] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 2.5rem;
}

.share-gate-body[b-dz9wg8s8v2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .625rem;
    text-align: center;
}

.share-gate-title[b-dz9wg8s8v2] {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.3;
    margin: 0;
    word-break: break-word;
}

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

.share-submit[b-dz9wg8s8v2] {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* === Product branding (never tenant branding — /meta leaks nothing) ====== */

.share-brand[b-dz9wg8s8v2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}

.share-brand-icon[b-dz9wg8s8v2] {
    font-size: 2rem;
    color: var(--bz-color-fg-muted);
}

.share-wordmark[b-dz9wg8s8v2] {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.share-wordmark-sm[b-dz9wg8s8v2] {
    font-size: .8125rem;
    letter-spacing: .08em;
    color: var(--bz-color-fg-muted);
}

/* === Browsing ============================================================ */

.share-browser[b-dz9wg8s8v2] {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.share-headcard-content[b-dz9wg8s8v2] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    padding: 1.25rem 1.5rem;
}

.share-head-main[b-dz9wg8s8v2] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}

.share-head-title[b-dz9wg8s8v2] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    word-break: break-word;
}

.share-head-meta[b-dz9wg8s8v2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .25rem;
}

.share-expiry[b-dz9wg8s8v2] {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    margin: 0;
    font-size: .8125rem;
    color: var(--bz-color-fg-muted);
}

/* --- Breadcrumbs -------------------------------------------------------- */

.share-breadcrumbs[b-dz9wg8s8v2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .1875rem;
    font-size: .875rem;
}

.share-crumb[b-dz9wg8s8v2] {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
    border: 0;
    background: transparent;
    color: var(--bz-color-fg-muted);
    cursor: pointer;
    padding: .1875rem .375rem;
    border-radius: var(--bz-radius-sm);
    font: inherit;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-crumb:hover:not(:disabled)[b-dz9wg8s8v2] {
    background: color-mix(in srgb, var(--bz-color-fg) 6%, transparent);
    color: var(--bz-color-fg);
}

.share-crumb.is-current[b-dz9wg8s8v2] {
    color: var(--bz-color-fg);
    font-weight: 600;
    cursor: default;
}

.share-crumb-sep[b-dz9wg8s8v2] {
    font-size: .625rem;
    color: var(--bz-color-fg-muted);
}

/* --- Toolbar ------------------------------------------------------------ */

.share-toolbar[b-dz9wg8s8v2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.share-upload[b-dz9wg8s8v2] {
    cursor: pointer;
}

.share-upload input[type="file"][b-dz9wg8s8v2] {
    display: none;
}

.share-upload-hint[b-dz9wg8s8v2] {
    font-size: .8125rem;
}

/* --- Empty state -------------------------------------------------------- */

.share-empty[b-dz9wg8s8v2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 3.5rem 1rem;
    border: 1px dashed var(--bz-color-border);
    border-radius: var(--bz-radius-lg);
}

.share-empty-icon[b-dz9wg8s8v2] {
    font-size: 2.5rem;
    color: var(--bz-color-fg-muted);
}

/* --- Tiles -------------------------------------------------------------- */

.share-tiles[b-dz9wg8s8v2] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .75rem;
}

.share-tile[b-dz9wg8s8v2] {
    position: relative;
    border: 1px solid var(--bz-color-border);
    border-radius: var(--bz-radius-lg);
    background: var(--bz-color-surface);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.share-tile:hover[b-dz9wg8s8v2] {
    border-color: var(--bz-color-accent);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--bz-color-fg) 10%, transparent);
    transform: translateY(-1px);
}

.share-tile-open[b-dz9wg8s8v2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .375rem;
    width: 100%;
    padding: .875rem .625rem 1.875rem;
    background: none;
    border: 0;
    cursor: pointer;
    color: inherit;
    text-align: center;
    font: inherit;
}

.share-tile-media[b-dz9wg8s8v2] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
    width: 100%;
}

.share-tile-icon[b-dz9wg8s8v2] {
    font-size: 2.5rem;
    color: var(--bz-color-fg-muted);
}

.share-tile:hover .share-tile-icon[b-dz9wg8s8v2] {
    color: var(--bz-color-accent);
}

.share-tile-thumb[b-dz9wg8s8v2] {
    max-width: 100%;
    max-height: 96px;
    object-fit: contain;
    border-radius: var(--bz-radius-sm);
}

.share-tile-name[b-dz9wg8s8v2] {
    font-size: .8125rem;
    font-weight: 500;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.share-tile-sub[b-dz9wg8s8v2] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .375rem;
    font-size: .75rem;
}

/* Actions stay out of the way until the tile is hovered or a key lands inside it. */
.share-tile-actions[b-dz9wg8s8v2] {
    position: absolute;
    right: .3125rem;
    bottom: .3125rem;
    display: flex;
    gap: .125rem;
    opacity: 0;
    transition: opacity .15s ease;
}

.share-tile:hover .share-tile-actions[b-dz9wg8s8v2],
.share-tile:focus-within .share-tile-actions[b-dz9wg8s8v2] {
    opacity: 1;
}

.share-tile-action[b-dz9wg8s8v2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    border: 1px solid var(--bz-color-border);
    border-radius: var(--bz-radius-sm);
    background: var(--bz-color-bg);
    color: var(--bz-color-fg-muted);
    cursor: pointer;
    padding: 0;
    font-size: .8125rem;
}

.share-tile-action:hover[b-dz9wg8s8v2] {
    color: var(--bz-color-fg);
    border-color: var(--bz-color-accent);
}

.share-tile-action.is-danger:hover[b-dz9wg8s8v2] {
    color: var(--bz-color-danger);
    border-color: var(--bz-color-danger);
}

/* --- Preview popup ------------------------------------------------------ */

/* The popup is 85vh tall, but its body is not a percentage-resolvable parent — `height:100%` here
   used to resolve to auto, so the embedded PDF viewer had nothing to size against and collapsed.
   A viewport-relative height is definite, and leaves room for the popup's own header. */
.share-preview-body[b-dz9wg8s8v2] {
    width: 100%;
    height: 72vh;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.share-preview-fill[b-dz9wg8s8v2] {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    /* FileContentViewer fills a flex parent (`flex:1 1 auto`); a plain block would leave it at
       content height. */
    display: flex;
    flex-direction: column;
}

.share-preview-image[b-dz9wg8s8v2] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.share-preview-text[b-dz9wg8s8v2] {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: .8125rem;
    max-height: 100%;
    overflow: auto;
}

/* === Floating controls pill (mirrors Login.razor.css .auth-controls) ===== */

.auth-controls[b-dz9wg8s8v2] {
    position: fixed;
    bottom: 1.25rem;
    left: 1.25rem;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.3rem 0.5rem;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--background, #fff) 80%, transparent);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid color-mix(in srgb, var(--border, #e5e7eb) 70%, transparent);
    box-shadow: 0 2px 20px color-mix(in srgb, var(--foreground, #000) 7%, transparent);
}

.auth-ctrl-btn[b-dz9wg8s8v2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 9999px;
    border: none;
    background: transparent;
    color: var(--foreground, #111);
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
    transition: background 0.15s, transform 0.25s cubic-bezier(.34,1.56,.64,1);
}

    .auth-ctrl-btn:hover[b-dz9wg8s8v2] {
        background: color-mix(in srgb, var(--primary, #3b82f6) 12%, transparent);
        transform: rotate(22deg) scale(1.1);
    }

.auth-ctrl-sep[b-dz9wg8s8v2] {
    display: block;
    width: 1px;
    height: 1.125rem;
    margin: 0 0.25rem;
    background: var(--border, #e5e7eb);
    border-radius: 9999px;
    flex-shrink: 0;
}

.auth-ctrl-lang[b-dz9wg8s8v2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--muted-foreground, #6b7280);
    text-decoration: none;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}

    .auth-ctrl-lang:hover[b-dz9wg8s8v2] {
        background: color-mix(in srgb, var(--primary, #3b82f6) 10%, transparent);
        color: var(--foreground, #111);
        transform: scale(1.05);
    }

    .auth-ctrl-lang.is-active[b-dz9wg8s8v2] {
        background: var(--primary, #3b82f6);
        color: var(--primary-foreground, #fff);
    }
/* /Pages/WhoAmI.razor.rz.scp.css */
.whoami dl[b-p5nl50xxoq] {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: var(--bz-space-2) var(--bz-space-3);
    margin: var(--bz-space-3) 0;
}

.whoami dt[b-p5nl50xxoq] { color: var(--bz-color-fg-muted); }
.whoami dd[b-p5nl50xxoq] { margin: 0; font-family: var(--bz-font-mono); font-size: var(--bz-fs-sm); }

.whoami h2[b-p5nl50xxoq] { font-size: var(--bz-fs-lg); margin-top: var(--bz-space-5); }

.whoami ul[b-p5nl50xxoq] { padding-left: var(--bz-space-5); }
.whoami .all-claims li[b-p5nl50xxoq] { font-family: var(--bz-font-mono); font-size: var(--bz-fs-xs); }

.whoami[b-p5nl50xxoq] { min-width: 0; padding: var(--bz-space-5); border: 1px solid var(--bz-color-border); border-radius: var(--bz-radius-lg); background: var(--bz-color-surface); }
.whoami dl[b-p5nl50xxoq], .whoami dd[b-p5nl50xxoq], .whoami li[b-p5nl50xxoq], .whoami code[b-p5nl50xxoq] { overflow-wrap: anywhere; white-space: normal; }
.whoami ul[b-p5nl50xxoq] { padding-inline-start: var(--bz-space-5); }
.whoami li[b-p5nl50xxoq] { padding-block: var(--bz-space-2); }