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

/* _content/PSMS.Web/Components/Layout/AdminSidebar.razor.rz.scp.css */
.admin-sidebar[b-8dg5mrfnsx] {
    position: fixed;
    inset: var(--topbar-height, 52px) auto 0 0;
    z-index: 100;
    display: flex;
    width: 264px;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--colorNeutralStroke2, #e5e5e5);
    background: var(--colorNeutralBackground1, #ffffff);
    transition: width 180ms ease, transform 180ms ease;
}

/* Desktop-only rail-collapse behavior (width:0 + hide children). Scoped to min-width:769px so it
   never fights the mobile drawer's own show/hide below — is-collapsed and is-mobile-open are
   independent flags that can legitimately both be true at once (ToggleSidebar flips both
   together), and on mobile only is-mobile-open should have any visual effect. */
@media (min-width: 769px) {
    .admin-sidebar.is-collapsed[b-8dg5mrfnsx] {
        width: 0;
        border-right: 0;
    }

    .admin-sidebar.is-collapsed > *[b-8dg5mrfnsx] {
        visibility: hidden;
    }
}

.sidebar-brand[b-8dg5mrfnsx] {
    display: flex;
    min-height: 68px;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
    border-bottom: 1px solid var(--colorNeutralStroke2, #ededed);
}

.brand-mark[b-8dg5mrfnsx] {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font-size: 20px;
    font-weight: 700;
    box-shadow: none;
}

.brand-mark img[b-8dg5mrfnsx] {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: inherit;
    object-fit: cover;
}

.brand-copy[b-8dg5mrfnsx],
.footer-copy[b-8dg5mrfnsx] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    white-space: nowrap;
    transition: opacity 120ms ease;
}

.brand-copy strong[b-8dg5mrfnsx] {
    font-size: 15px;
    line-height: 20px;
}

.brand-copy span[b-8dg5mrfnsx] {
    overflow: hidden;
    color: var(--colorNeutralForeground3, #707070);
    font-size: 11px;
    line-height: 16px;
    text-overflow: ellipsis;
}

.sidebar-scroll[b-8dg5mrfnsx] {
    flex: 1;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 14px 0;
    background: var(--colorNeutralBackground2, #f0f0f0);
}

.nav-caption[b-8dg5mrfnsx] {
    padding: 0 24px 8px;
    color: var(--colorNeutralForeground3, #777777);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.psms-nav-menu[b-8dg5mrfnsx] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    --type-ramp-base-font-size: 12px;
    --type-ramp-base-line-height: 16px;
    --type-ramp-minus-1-font-size: 12px;
    --type-ramp-minus-1-line-height: 16px;
    --font-weight: 600;
}

.nav-icon[b-8dg5mrfnsx] {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.nav-icon svg[b-8dg5mrfnsx] {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.nav-text[b-8dg5mrfnsx] {
    white-space: nowrap;
}

.sidebar-footer[b-8dg5mrfnsx] {
    display: flex;
    min-height: 64px;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--colorNeutralStroke2, #ededed);
}

.environment-dot[b-8dg5mrfnsx] {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: #107c10;
    box-shadow: 0 0 0 4px rgb(16 124 16 / 10%);
}

.footer-copy strong[b-8dg5mrfnsx] {
    font-size: 12px;
    line-height: 16px;
}

.footer-copy span[b-8dg5mrfnsx] {
    color: var(--colorNeutralForeground3, #707070);
    font-size: 11px;
}

/* Same desktop-only scoping as the block above — these style the narrow icon-only rail, which
   only exists above the mobile breakpoint. */
@media (min-width: 769px) {
    .is-collapsed .brand-copy[b-8dg5mrfnsx],
    .is-collapsed .footer-copy[b-8dg5mrfnsx],
    .is-collapsed .nav-caption[b-8dg5mrfnsx],
    .is-collapsed .nav-text[b-8dg5mrfnsx] {
        width: 0;
        opacity: 0;
        pointer-events: none;
    }

    .is-collapsed .sidebar-brand[b-8dg5mrfnsx],
    .is-collapsed .sidebar-footer[b-8dg5mrfnsx] {
        justify-content: center;
        padding-inline: 0;
    }

    .is-collapsed .sidebar-scroll[b-8dg5mrfnsx] {
        padding-inline: 8px;
    }
}

[b-8dg5mrfnsx] fluent-nav-menu {
    background: transparent;
}

[b-8dg5mrfnsx] fluent-nav {
    background: var(--colorNeutralBackground2, #f0f0f0);
}

[b-8dg5mrfnsx] fluent-nav-link,
[b-8dg5mrfnsx] fluent-nav-group {
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: 600;
}

[b-8dg5mrfnsx] .fluent-nav-text {
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 16px !important;
}

.sidebar-ai-cta[b-8dg5mrfnsx] {
    display: none;
}

/* Desktop keeps sidebar-scroll's inline-expanded FluentNav; mobile swaps to this drill-down
   instead (shown in the media query below). Hidden here by default so it never renders on
   desktop even before the media query is evaluated. */
.mobile-nav[b-8dg5mrfnsx] {
    display: none;
}

@media (max-width: 768px) {
    /* Hidden by default at this breakpoint, regardless of is-collapsed (that class's desktop
       meaning — width:0 — doesn't apply here at all, see the min-width:769px scoping above).
       is-mobile-open is the only thing that shows the drawer, and it's a plain C# boolean whose
       default (false) already matches this CSS default — no JS/viewport-detection round trip
       needed, and therefore no flash of the drawer being wrongly open on first paint. */
    .admin-sidebar[b-8dg5mrfnsx] {
        top: var(--topbar-height, 52px);
        width: min(86vw, 300px);
        box-shadow: 12px 0 30px rgb(0 0 0 / 14%);
        transform: translateX(-105%);
    }

    .admin-sidebar.is-mobile-open[b-8dg5mrfnsx] {
        transform: translateX(0);
    }

    .sidebar-brand[b-8dg5mrfnsx] {
        display: none;
    }

    .sidebar-scroll[b-8dg5mrfnsx] {
        display: none;
    }

    .mobile-nav[b-8dg5mrfnsx] {
        display: flex;
        min-width: 0;
        flex: 1;
        flex-direction: column;
        overflow: hidden;
        background: var(--colorNeutralBackground1, #ffffff);
    }

    .mobile-profile-card[b-8dg5mrfnsx] {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        gap: 12px;
        padding: 16px 18px;
        border-bottom: 1px solid var(--colorNeutralStroke2, #ededed);
        cursor: pointer;
    }

    .mobile-profile-copy[b-8dg5mrfnsx] {
        display: flex;
        min-width: 0;
        flex: 1;
        flex-direction: column;
        gap: 2px;
    }

    .mobile-profile-copy strong[b-8dg5mrfnsx] {
        overflow: hidden;
        font-size: 15px;
        line-height: 20px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-profile-copy span[b-8dg5mrfnsx] {
        overflow: hidden;
        color: var(--colorNeutralForeground3, #707070);
        font-size: 12px;
        line-height: 16px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    [b-8dg5mrfnsx] .mobile-profile-chevron {
        flex: 0 0 auto;
        color: var(--colorNeutralForeground3, #707070);
    }

    .mobile-nav-list[b-8dg5mrfnsx] {
        display: flex;
        flex: 1;
        min-height: 0;
        flex-direction: column;
        overflow-y: auto;
        padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
        background: var(--colorNeutralBackground2, #f0f0f0);
    }

    .mobile-nav-row[b-8dg5mrfnsx],
    .mobile-nav-back[b-8dg5mrfnsx] {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 2px;
        padding: 11px 12px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--colorNeutralForeground1, #242424);
        font-size: 13px;
        font-weight: 600;
        font-family: inherit;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }

    .mobile-nav-row span:first-of-type[b-8dg5mrfnsx],
    .mobile-nav-back span[b-8dg5mrfnsx] {
        flex: 1;
    }

    .mobile-nav-row.is-active[b-8dg5mrfnsx] {
        background: var(--colorBrandBackground2, #e6f4ea);
        color: var(--colorBrandForeground1, #107c10);
    }

    [b-8dg5mrfnsx] .mobile-nav-chevron {
        flex: 0 0 auto;
        color: var(--colorNeutralForeground3, #707070);
    }

    .mobile-nav-caption[b-8dg5mrfnsx] {
        padding: 14px 12px 6px;
        color: var(--colorNeutralForeground3, #777777);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .mobile-nav-back[b-8dg5mrfnsx] {
        color: var(--colorNeutralForeground3, #707070);
    }

    .mobile-nav-leaf[b-8dg5mrfnsx] {
        padding-left: 16px;
    }

    .sidebar-ai-cta[b-8dg5mrfnsx] {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        margin: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
        padding: 12px 14px;
        border: 0;
        border-radius: 12px;
        background: var(--colorBrandBackground2, #e6f4ea);
        color: var(--colorBrandForeground1, #107c10);
        font-size: 13px;
        font-weight: 600;
        font-family: inherit;
        cursor: pointer;
    }

    [b-8dg5mrfnsx] .sidebar-ai-cta-chevron {
        margin-left: auto;
    }
}
/* _content/PSMS.Web/Components/Layout/AdminTopBar.razor.rz.scp.css */
.admin-topbar[b-hs1d18nm1x] {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 70;
    display: block;
    min-height: 52px;
    border-bottom: 1px solid var(--colorNeutralStroke2, #e5e5e5);
    /* Brand-colored header bar, tied to Theme Editor's Brand Color — falls back to the PSMS
       logo red. `color` here cascades to every plain-text descendant (title, subtitle, avatar
       name) and to FluentButton's Transparent appearance (which follows currentColor by design),
       so icons/text stay readable regardless of which brand hue is picked. The floating dropdowns
       (notification/message popovers) intentionally stay neutral below — see ::deep rules. */
    background: var(--colorBrandBackground, #ff0000);
    color: var(--psms-on-brand, #ffffff);
    backdrop-filter: blur(12px);
}

.topbar-brand[b-hs1d18nm1x] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.topbar-brand img[b-hs1d18nm1x] {
    width: 30px;
    height: 30px;
    object-fit: cover;
}

.topbar-brand div[b-hs1d18nm1x] {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
}

.topbar-brand strong[b-hs1d18nm1x] {
    font-size: 14px;
    line-height: 18px;
}

.topbar-brand span[b-hs1d18nm1x] {
    color: var(--psms-on-brand, #ffffff);
    opacity: .8;
    font-size: 10px;
    line-height: 14px;
}

.topbar-content[b-hs1d18nm1x] {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 52px;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
    padding: 0 18px;
}

.menu-button[b-hs1d18nm1x],
.icon-button[b-hs1d18nm1x] {
    position: relative;
    flex: 0 0 auto;
}

.menu-button[b-hs1d18nm1x] {
    width: 32px;
    min-width: 32px;
    height: 32px;
}

.button-icon[b-hs1d18nm1x],
.search-icon[b-hs1d18nm1x] {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
}

.button-icon svg[b-hs1d18nm1x],
.search-icon svg[b-hs1d18nm1x] {
    width: 19px;
    height: 19px;
    fill: currentColor;
}

.title-block[b-hs1d18nm1x] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding-left: 2px;
}

.title-block strong[b-hs1d18nm1x] {
    overflow: hidden;
    color: var(--psms-on-brand, #ffffff);
    font-size: 15px;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eyebrow[b-hs1d18nm1x] {
    color: var(--psms-on-brand, #ffffff);
    opacity: .8;
    font-size: 10px;
    line-height: 14px;
    white-space: nowrap;
}

.topbar-spacer[b-hs1d18nm1x] {
    flex: 1;
}

.search-wrap[b-hs1d18nm1x] {
    position: relative;
    width: clamp(220px, 24vw, 320px);
    flex: 0 1 320px;
}

.search-wrap > fluent-icon[b-hs1d18nm1x] {
    position: absolute;
    top: 50%;
    left: 10px;
    z-index: 2;
    width: 18px;
    height: 18px;
    color: var(--colorNeutralForeground3, #404040);
    transform: translateY(-50%);
    pointer-events: none;
}

.search-wrap input[b-hs1d18nm1x] {
    width: 100%;
    height: 32px;
    box-sizing: border-box;
    padding: 0 12px 0 36px;
    border: 1px solid var(--colorNeutralStroke2, #8a8a8a);
    border-radius: 3px;
    outline: none;
    background: var(--colorNeutralBackground1, #ffffff);
    color: var(--colorNeutralForeground1, #242424);
    font: inherit;
    font-size: 14px;
}

.search-wrap input[b-hs1d18nm1x]::placeholder {
    color: var(--colorNeutralForeground3, #707070);
}

.search-wrap input:hover[b-hs1d18nm1x] {
    border-color: var(--colorNeutralForeground3, #616161);
}

.search-wrap input:focus[b-hs1d18nm1x] {
    border-color: var(--colorBrandForeground1, #0067c0);
    box-shadow: 0 0 0 1px var(--colorBrandForeground1, #0067c0);
}

.search-icon[b-hs1d18nm1x] {
    position: absolute;
    top: 50%;
    left: 11px;
    z-index: 2;
    color: var(--colorNeutralForeground3, #616161);
    transform: translateY(-50%);
    pointer-events: none;
}

.search-wrap[b-hs1d18nm1x]  fluent-text-field {
    width: 100%;
}

.search-wrap[b-hs1d18nm1x]  input {
    padding-left: 36px;
}

.notification-dot[b-hs1d18nm1x] {
    position: absolute;
    top: 8px;
    right: 7px;
    width: 7px;
    height: 7px;
    border: 2px solid var(--colorBrandBackground, #ff0000);
    border-radius: 50%;
    background: var(--colorPaletteRedBackground3, #d13438);
}

.profile-wrap[b-hs1d18nm1x] {
    flex: 0 0 auto;
    padding-left: 4px;
    width: auto !important;
}

.notification-wrap[b-hs1d18nm1x] {
    position: relative;
    flex: 0 0 auto;
    width: auto !important;
}

.topbar-actions[b-hs1d18nm1x] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto;
    width: auto !important;
    flex: 0 0 auto;
}

.topbar-actions > .notification-wrap[b-hs1d18nm1x],
.topbar-actions > .profile-wrap[b-hs1d18nm1x] {
    width: auto !important;
    min-width: 36px;
    flex: 0 0 auto !important;
}

.notification-button[b-hs1d18nm1x] {
    position: relative;
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.notification-button:hover[b-hs1d18nm1x],
.notification-button:focus-visible[b-hs1d18nm1x] {
    border: 0;
    /* Sits directly on the brand-colored bar, not a neutral surface — a translucent white
       overlay reads correctly regardless of which brand hue is picked, where a neutral-grey
       hover fill wouldn't. */
    background: var(--psms-on-brand-hover, rgb(255 255 255 / 18%));
}

.notification-count[b-hs1d18nm1x] {
    position: absolute;
    top: -2px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border: 2px solid var(--colorBrandBackground, #ff0000);
    border-radius: 10px;
    background: var(--colorPaletteRedBackground3, #d13438);
    color: #ffffff;
    font-size: 10px;
    line-height: 12px;
    text-align: center;
}

/* NotificationMenu/MessagesMenu are separate child components, so these rules
   must use ::deep — otherwise the scope attribute added to AdminTopBar's own
   markup never appears on the child components' rendered elements. */
[b-hs1d18nm1x] .notification-dropdown {
    /* No position/top/right here — FluentPopover already positions and
       sizes its own container relative to the AnchorId element (confirmed live: its right edge
       already lands within ~5px of the bell icon's own right edge — no horizontal override
       needed). What WAS missing is a height cap: this list has no upper bound on item count
       (ReceivedNotifications keeps up to 50), so with enough notifications the box just kept
       growing past the bottom of the screen with no way to reach the rest — confirmed live at
       1680px tall for 19 items, ~830px past the viewport. max-height + overflow-y below caps it
       at a fixed, Facebook-notifications-style height and makes the rest scrollable instead. */
    width: 300px;
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid var(--colorNeutralStroke2, #d1d1d1);
    border-radius: 8px;
    background: var(--colorNeutralBackground1, #ffffff);
    box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
}

/* The heading (title + "Mark all read") stays pinned above the scrolling list rather than
   scrolling away with it — matches how Facebook/most notification dropdowns keep their header
   fixed. sticky+background is new; display/padding/border-bottom already existed here. */
[b-hs1d18nm1x] .notification-heading {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: var(--colorNeutralBackground1, #ffffff);
    border-bottom: 1px solid var(--colorNeutralStroke2, #e5e5e5);
}

[b-hs1d18nm1x] .notification-heading button {
    border: 0;
    background: transparent;
    color: var(--colorBrandForeground1, #0067c0);
    cursor: pointer;
    font-size: 11px;
}

[b-hs1d18nm1x] .notification-item {
    display: flex;
    gap: 10px;
    padding: 12px;
}

[b-hs1d18nm1x] .notification-item-clickable {
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.1s ease-in-out;
}

[b-hs1d18nm1x] .notification-item-clickable:hover,
[b-hs1d18nm1x] .notification-item-clickable:focus-visible {
    background-color: var(--colorNeutralBackground2, #f5f5f5);
}

[b-hs1d18nm1x] .notification-item small {
    display: block;
    margin-top: 3px;
    color: var(--colorNeutralForeground3, #666666);
}

[b-hs1d18nm1x] .notification-time {
    margin-top: 2px;
    color: var(--colorNeutralForeground3, #8a8a8a);
    font-size: 11px;
}

[b-hs1d18nm1x] .notification-empty {
    padding: 0 12px 12px;
    color: var(--colorNeutralForeground3, #666666);
    font-size: 12px;
}

@media (max-width: 900px) {
    .eyebrow[b-hs1d18nm1x] {
        display: none;
    }

    .search-wrap[b-hs1d18nm1x] {
        width: min(260px, 32vw);
    }
}

@media (max-width: 768px) {
    /* Moved to AdminSidebar's mobile-only drawer pill instead (AdminSidebar.razor.css's
       .sidebar-ai-cta) — same breakpoint, so one appears exactly as the other disappears. */
    [b-hs1d18nm1x] .nam-ai-button,
    [b-hs1d18nm1x] .nam-ai-divider {
        display: none;
    }

    /* Profile stays reachable on mobile via AdminSidebar's mobile-profile-card in the drawer —
       the topbar itself keeps only Notifications and Messages, dropping the avatar (and its
       divider, so nothing stray is left between Messages and InstallPwaButton). */
    [b-hs1d18nm1x] .profile-avatar-trigger,
    [b-hs1d18nm1x] .profile-divider {
        display: none;
    }
}

@media (max-width: 680px) {
    .topbar-content[b-hs1d18nm1x] {
        padding-inline: 10px;
        /* HorizontalGap="24" (AdminTopBar.razor) is fine with a subtitle/search row on desktop,
           but is too generous once this is reduced to icon-only chrome on a phone — tightening it
           here is what actually keeps every icon on-screen without needing the overflow-x:auto
           fallback below. !important because FluentStack's HorizontalGap is applied as an inline
           style, which otherwise wins over this class rule. */
        gap: 10px !important;
        /* Safety net, not the primary fix — the label collapses below should already free up
           enough width on real phone screens. If some combination of icons still doesn't fit
           (an unusually narrow viewport, a future item added to the row), this scrolls instead
           of clipping/overlapping. */
        overflow-x: auto;
    }

    /* Same reasoning as .topbar-content's gap override above — HorizontalGap="12" on the
       notification/messages/avatar/install-pwa row, tightened once every item in it is icon-only. */
    .topbar-icon-actions[b-hs1d18nm1x] {
        gap: 6px !important;
    }

    .search-wrap[b-hs1d18nm1x] {
        display: none;
    }

    .title-block[b-hs1d18nm1x] {
        flex: 1;
    }

    .topbar-brand span[b-hs1d18nm1x] {
        display: none;
    }

    /* Icon-only below this breakpoint — same one the brand subtitle already collapses at.
       nam-ai-label is a plain span authored directly in AdminTopBar.razor (no ::deep needed);
       install-pwa-label is the equivalent span in InstallPwaButton.razor, matched with ::deep
       since that's a separate child component. */
    .nam-ai-label[b-hs1d18nm1x],
    [b-hs1d18nm1x] .install-pwa-label {
        display: none;
    }
}

@media (max-width: 440px) {
    .title-block strong[b-hs1d18nm1x] {
        max-width: 150px;
    }
}
/* _content/PSMS.Web/Components/Layout/InstallPwaBanner.razor.rz.scp.css */
/* Fixed bottom banner — not something FluentUI provides a layout primitive for, so this is one
   of the "custom CSS only where Fluent can't reasonably do it" exceptions. Everything inside
   still uses Fluent components/tokens for the actual content styling. */
.pwa-install-banner[b-ol8f4us1nx] {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 10000;
    width: min(520px, calc(100vw - 32px));
    background: var(--neutral-layer-1, #ffffff);
    border: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding: 12px 16px;
}

.pwa-install-banner-text[b-ol8f4us1nx] {
    min-width: 0;
}
/* _content/PSMS.Web/Components/Layout/LoginLayout.razor.rz.scp.css */
.login-shell[b-yxjowqjwhw] {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    background: #eef1f6;
    padding: 24px;
}

@media (max-width: 768px) {
    /* Full-bleed native-app feel on phones instead of a floating card with visible margin all
       around it — matches Login.razor.css's own .login-card-shell mobile block below. */
    .login-shell[b-yxjowqjwhw] {
        padding: 0;
        align-items: stretch;
        min-height: 100dvh;
    }
}
/* _content/PSMS.Web/Components/Layout/MainLayout.razor.rz.scp.css */
.admin-shell[b-o70qmcem0j] {
    --sidebar-width: 264px;
    --sidebar-collapsed-width: 0px;
    --topbar-height: 52px;
    /* Must match MobileBottomNav.razor.css's own `height: 58px` — used below (mobile only) to
       physically shrink .admin-workspace so it stops before the bottom nav's strip, rather than
       just padding around the edge of a box that still reaches into that zone. */
    --mobile-bottom-nav-height: 58px;

    display: flex;
    min-height: 100dvh;
    background: var(--colorNeutralBackground2, #f6f7f9);
    color: var(--colorNeutralForeground1, #242424);
}

.admin-workspace[b-o70qmcem0j] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    height: 100dvh;
    min-height: 0;
    margin-left: var(--sidebar-width);
    transition: margin-left 180ms ease;
    padding-top: var(--topbar-height);
}

.sidebar-is-collapsed .admin-workspace[b-o70qmcem0j] {
    margin-left: var(--sidebar-collapsed-width);
}

.admin-body[b-o70qmcem0j] {
    display: flex;
    flex: 1;
    min-height: 0;
}

.admin-content[b-o70qmcem0j] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 24px;
}

.admin-content-inner[b-o70qmcem0j] {
    width: 100%;
}

.sidebar-backdrop[b-o70qmcem0j] {
    display: none;
}

#blazor-error-ui[b-o70qmcem0j] {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 9999;
    display: none;
    max-width: 420px;
    padding: 12px 16px;
    border: 1px solid #d13438;
    border-radius: 8px;
    background: var(--colorNeutralBackground1, #ffffff);
    color: var(--colorNeutralForeground1, #242424);
    box-shadow: 0 8px 28px rgb(0 0 0 / 16%);
}

#blazor-error-ui .reload[b-o70qmcem0j] {
    margin-left: 8px;
}

#blazor-error-ui .dismiss[b-o70qmcem0j] {
    margin-left: 12px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

@media (max-width: 1024px) {
    .admin-content[b-o70qmcem0j] {
        padding: 10px 20px;
    }
}

@media (max-width: 768px) {
    /* Deliberately NOT switching .admin-content to overflow-y:visible / making the document the
       scroll owner here anymore (that used to happen on mobile only). It existed solely so
       FluentPullToRefresh's/the browser's native pull-to-refresh could read accurate scroll
       position — but that's exactly the one thing that behaved differently between mobile and
       every other width, and it broke mobile scrolling outright (confirmed: tablet/desktop, which
       keep .admin-content's ordinary overflow-y:auto nested pane, scrolled fine the whole time;
       only mobile, running this now-removed override, got stuck). Letting mobile use the exact
       same nested-scroll .admin-content pane as every other width — no special-casing — is what
       actually fixes it. If pull-to-refresh accuracy needs revisiting later, that's a smaller,
       separate problem than "can't scroll at all". */
    .admin-workspace[b-o70qmcem0j],
    .sidebar-is-collapsed .admin-workspace[b-o70qmcem0j] {
        margin-left: 0;
    }

    /* Shrinks .admin-workspace's actual box so it physically ends before MobileBottomNav's
       fixed strip, instead of relying only on .admin-content's padding-bottom below to reserve
       that space. Padding alone isn't enough: it only protects normally-flowing content, but
       several pages size their own content with raw viewport units (e.g. calc(100vh - ...),
       the FluentDataGrid AutoItemsPerPage convention used across the Settings-style list pages) —
       vh is relative to the viewport itself, not to .admin-content's padding, so that content
       still rendered underneath the nav regardless of padding-bottom. Reducing the actual height
       here means .admin-content (flex:1 inside this) never has a box that reaches into the nav's
       zone in the first place, so nothing — including 100vh-sized content — can render there;
       overflow-y:auto on .admin-content just scrolls to reveal the rest instead. */
    .admin-workspace[b-o70qmcem0j] {
        height: calc(100dvh - var(--mobile-bottom-nav-height) - env(safe-area-inset-bottom, 0px));
    }

    /* Hidden by default — same "CSS-correct default, no JS round trip" reasoning as
       AdminSidebar.razor.css's own is-mobile-open rule. Gated on sidebar-mobile-open, not
       sidebar-is-collapsed (that class's meaning is desktop-only rail-collapse and has no mobile
       drawer relationship any more — see AdminSidebar.razor.css). */
    .sidebar-backdrop[b-o70qmcem0j] {
        display: none;
    }

    .sidebar-mobile-open .sidebar-backdrop[b-o70qmcem0j] {
        position: fixed;
        inset: var(--topbar-height) 0 0;
        z-index: 80;
        display: block;
        border: 0;
        background: rgb(0 0 0 / 32%);
    }

    .admin-content[b-o70qmcem0j] {
        padding: 8px 16px 16px;
    }
}

@media (max-width: 480px) {
    .admin-content[b-o70qmcem0j] {
        padding: 6px 12px;
    }
}
/* _content/PSMS.Web/Components/Layout/MobileBottomNav.razor.rz.scp.css */
.mobile-bottom-nav[b-h6iiinsqxr] {
    display: none;
}

@media (max-width: 768px) {
    .mobile-bottom-nav[b-h6iiinsqxr] {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        /* Below .admin-sidebar's z-index (100, AdminSidebar.razor.css) on purpose — when the
           drawer opens on mobile it already extends full-height (inset: top ... 0 0) and covers
           this bar automatically, matching the mockup (no bottom bar visible while the drawer is
           open). No extra show/hide logic needed for that. */
        z-index: 70;
        height: 58px;
        align-items: stretch;
        justify-content: space-around;
        background: var(--colorNeutralBackground1, #ffffff);
        border-top: 1px solid var(--colorNeutralStroke2, #e5e5e5);
        /* iPhone home-indicator safe area, so the bar isn't obscured by it. */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

.mobile-bottom-nav-item[b-h6iiinsqxr] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 0;
    background: transparent;
    color: var(--colorNeutralForeground3, #6b7280);
    font-size: 11px;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
}

.mobile-bottom-nav-item.is-active[b-h6iiinsqxr] {
    color: var(--colorBrandForeground1, #0f6cbd);
    font-weight: 600;
}
/* _content/PSMS.Web/Components/Layout/NamAssistantPanel.razor.rz.scp.css */
.nam-panel[b-u3t5nmwpuv] {
    display: flex;
    flex: 0 0 360px;
    flex-direction: column;
    min-width: 0;
    border-left: 1px solid #e5e5e5;
    background: #fff;
}

.nam-panel-header[b-u3t5nmwpuv] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    padding: 14px 12px 14px 16px;
    border-bottom: 1px solid #e5e5e5;
}

.nam-panel-header-text[b-u3t5nmwpuv] {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.nam-panel-title[b-u3t5nmwpuv] {
    color: #242424;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
}

.nam-panel-subtitle[b-u3t5nmwpuv] {
    overflow: hidden;
    color: #707070;
    font-size: 11px;
    line-height: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nam-panel-body[b-u3t5nmwpuv] {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 20px;
}

.nam-empty-state[b-u3t5nmwpuv] {
    display: flex;
    max-width: 260px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #707070;
    text-align: center;
}

.nam-empty-state p[b-u3t5nmwpuv] {
    margin: 0;
    font-size: 13px;
    line-height: 19px;
}

.nam-panel-input-row[b-u3t5nmwpuv] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid #e5e5e5;
}

@media (max-width: 900px) {
    .nam-panel[b-u3t5nmwpuv] {
        flex-basis: 300px;
    }
}

@media (max-width: 768px) {
    .nam-panel[b-u3t5nmwpuv] {
        position: fixed;
        top: var(--topbar-height, 52px);
        right: 0;
        bottom: 0;
        z-index: 85;
        flex-basis: min(340px, 100vw);
        box-shadow: -8px 0 24px rgb(0 0 0 / 18%);
    }
}
/* _content/PSMS.Web/Components/Layout/PageHeader.razor.rz.scp.css */
.page-header[b-gf7agdoskx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 12px;
    padding: 16px 20px;
    border-radius: 8px;
    background: var(--colorNeutralBackground1, #ffffff);
}

.page-heading[b-gf7agdoskx] {
    min-width: 0;
}

.page-breadcrumbs[b-gf7agdoskx] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    color: var(--colorNeutralForeground3, #616161);
    font-size: 12px;
}

.page-breadcrumbs a[b-gf7agdoskx] {
    color: var(--colorNeutralForeground3, #616161);
    text-decoration: none;
}

.page-breadcrumbs a:hover[b-gf7agdoskx] {
    color: var(--colorBrandForeground1, #0f6cbd);
    text-decoration: underline;
}

.page-breadcrumbs [aria-current="page"][b-gf7agdoskx] {
    color: var(--colorNeutralForeground1, #242424);
    font-weight: 600;
}

.page-eyebrow[b-gf7agdoskx] {
    display: block;
    margin-bottom: 3px;
    color: var(--colorBrandForeground1, #0f6cbd);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.page-title-row[b-gf7agdoskx] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-header h1[b-gf7agdoskx] {
    margin: 0;
    color: var(--colorNeutralForeground1, #242424);
    font-size: clamp(19px, 1.6vw, 24px);
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.page-header p[b-gf7agdoskx] {
    max-width: 760px;
    margin: 3px 0 0;
    color: var(--colorNeutralForeground3, #616161);
    font-size: 13px;
    line-height: 1.4;
}

.page-actions[b-gf7agdoskx] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

@media (max-width: 680px) {
    .page-header[b-gf7agdoskx] {
        flex-direction: column;
    }

    .page-actions[b-gf7agdoskx] {
        width: 100%;
        flex-wrap: wrap;
    }
}
/* _content/PSMS.Web/Components/Pages/BusinessDues/BusinessDuesSettings.razor.rz.scp.css */
/* Mirrors Settings.razor.css / InventorySettings.razor.css — shared by every tab in Tabs/
   (BusinessDueCategoriesTab, etc.), so every selector needs ::deep: scoped css only auto-applies
   to plain HTML written directly in this file's own markup otherwise. Kept as a separate copy
   (not shared) because scoped CSS only applies within its own component's render tree. */

[b-r1fvwzgymg] .lookup-grid-card {
    display: flex;
    flex-direction: column;
    overflow: visible;
}

/* Matches the FluentDataGrid docs' AutoItemsPerPage pattern: a fixed (viewport-relative, not
   flex/percentage) height on the grid's immediate wrapper, with overflow-y: hidden so the
   grid has one stable box to measure and clip rows-per-page against. A height that moves with
   row count (flex/%) feeds back into AutoItemsPerPage's calculation — a short last page shrinks
   the box, which locks in a smaller computed page size that doesn't recover on later pages. */
[b-r1fvwzgymg] .lookup-grid-container {
    height: calc(100dvh - 380px) !important;
    min-height: 8rem;
    overflow-x: auto;
    overflow-y: hidden;
}

[b-r1fvwzgymg] .lookup-grid-container fluent-data-grid {
    display: block;
    width: 100%;
}

/* DisplayMode.Table renders a real table with the browser's default table-layout: auto,
   which redistributes any leftover width across ALL columns proportionally — ignoring a
   narrow column's explicit Width (e.g. Actions="48px" was rendering as wide as Status).
   table-layout: fixed makes the browser actually honor each column's declared width. */
[b-r1fvwzgymg] .lookup-grid-container table {
    table-layout: fixed;
    width: 100%;
}

[b-r1fvwzgymg] .lookup-grid-container td,
[b-r1fvwzgymg] .lookup-grid-container th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* _content/PSMS.Web/Components/Pages/CompanyProfile/BranchOverview.razor.rz.scp.css */
/* CSS isolation is per-component — CompanyProfile.razor.css's rules for these same class names
   don't reach this page even though it reuses the identical classes (same convention this
   codebase already documented for ProductionSettings.razor.css). Sizing itself is set inline in
   the markup as a hardening measure (see CompanyProfile.razor's own placeholder), so only the
   cosmetic border/background/radius need redeclaring here.
   .company-logo-preview is a plain <img> authored directly in BranchOverview.razor, so no ::deep
   needed; .company-logo-placeholder is passed as Class into FluentStack, whose rendered output
   sits outside this file's CSS scope — needs ::deep (see CLAUDE.md's Razor CSS Isolation note). */
.company-logo-preview[b-9lqrg1yode] {
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
    background: var(--neutral-layer-2, #fafafa);
    padding: 6px;
}

[b-9lqrg1yode] .company-logo-placeholder {
    border-radius: 8px;
    border: 1px dashed var(--neutral-stroke-divider-rest, #e0e0e0);
    background: var(--neutral-layer-2, #fafafa);
}
/* _content/PSMS.Web/Components/Pages/CompanyProfile/CompanyProfile.razor.rz.scp.css */
/* .company-logo-preview is a plain <img> authored directly in CompanyProfile.razor, so no ::deep
   needed there. .company-logo-placeholder is passed as Class into FluentStack, whose rendered
   output sits outside this file's CSS scope — needs ::deep (see CLAUDE.md's Razor CSS Isolation
   note). Both were previously unstyled entirely, which let the placeholder stretch to fill the
   whole card row instead of reading as a logo thumbnail. Sized/bordered to match the same
   convention LogoUploadDialog's own .logo-preview already uses, just smaller for this summary row. */
.company-logo-preview[b-p44rro15nk] {
    width: 64px;
    height: 64px;
    object-fit: contain;
    flex: 0 0 auto;
    border-radius: 8px;
    border: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
    background: var(--neutral-layer-2, #fafafa);
    padding: 6px;
}

[b-p44rro15nk] .company-logo-placeholder {
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    border-radius: 8px;
    border: 1px dashed var(--neutral-stroke-divider-rest, #e0e0e0);
    background: var(--neutral-layer-2, #fafafa);
}
/* _content/PSMS.Web/Components/Pages/CompanyProfile/Dialogs/LogoUploadDialog.razor.rz.scp.css */
.logo-preview[b-d7wifqv70h] {
    width: 120px;
    height: 120px;
    object-fit: contain;
    border: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
    border-radius: 4px;
    background: var(--neutral-layer-2, #fafafa);
    padding: 8px;
}

/* Same square footprint as .logo-preview so the "Current" column doesn't jump size depending on
   whether a preview is available — dashed border instead of solid to read as "empty", matching
   CompanyProfile.razor.css's .company-logo-placeholder convention. FluentStack renders its own
   wrapping div outside this file's CSS scope — needs ::deep. */
[b-d7wifqv70h] .logo-preview-placeholder {
    width: 120px;
    height: 120px;
    border: 1px dashed var(--neutral-stroke-divider-rest, #e0e0e0);
    border-radius: 4px;
    background: var(--neutral-layer-2, #fafafa);
}

/* FluentInputFile's ChildContent renders inside the component's own drop-zone markup, outside
   this file's CSS scope — needs ::deep. Centers the icon/text stack it provides by default. */
[b-d7wifqv70h] .logo-dropzone-text {
    text-align: center;
    color: var(--neutral-foreground-2, #616161);
}

/* FluentStack renders its own wrapping div outside this component's CSS scope — see CLAUDE.md's
   Razor CSS Isolation note. Light-blue background matches the existing #eaf3ff convention used by
   TargetProgressCard.razor.css / FileDropZoneField.razor.css. */
[b-d7wifqv70h] .logo-file-row {
    background: #eaf3ff;
    border-radius: 6px;
    padding: 6px 8px;
}
/* _content/PSMS.Web/Components/Pages/Dashboard/Dashboard.razor.rz.scp.css */
.dashboard-kpi-row[b-0l935a6a0a] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; align-items: stretch; }
.dashboard-summary-row[b-0l935a6a0a] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; align-items: stretch; }
/* The wrapper div, not the FluentCard itself, is the actual grid item — a plain div stretches to
   the row's height reliably; FluentCard is a shadow-DOM web component, which is inconsistent
   about honoring CSS Grid stretch directly. Each card's own scoped CSS already sets
   height:100%, which now resolves cleanly against this wrapper's definite (stretched) height. */
.kpi-cell[b-0l935a6a0a] { min-width: 0; }
.kpi-cell[b-0l935a6a0a]  > * { display: block; }
.dashboard-sections[b-0l935a6a0a] { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 1rem; }
.dashboard-section[b-0l935a6a0a] { padding: 1rem; }
.section-heading[b-0l935a6a0a] { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.section-heading h2[b-0l935a6a0a] { margin: 0; font-size: 1rem; }
.job-row[b-0l935a6a0a] { display: grid; grid-template-columns: 1.2fr 1.2fr 1.4fr 1fr 1fr; gap: .75rem; align-items: center; padding: .7rem 0; border-top: 1px solid #edf0f2; font-size: .85rem; }
.job-header[b-0l935a6a0a] { color: #6b7280; font-size: .75rem; font-weight: 600; }
.queue-item[b-0l935a6a0a] { padding: .75rem 0; border-top: 1px solid #edf0f2; }
.queue-item-heading[b-0l935a6a0a] { display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: .4rem; }
.queue-item[b-0l935a6a0a]  .queue-item-bar { height: 6px; }
.dashboard-charts-grid[b-0l935a6a0a] { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; margin-top: 1rem; }
.chart-section[b-0l935a6a0a] { min-height: 320px; }
.section-muted[b-0l935a6a0a] { color: #6b7280; font-size: .75rem; }
@media (max-width: 1200px) { .dashboard-kpi-row[b-0l935a6a0a] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-summary-row[b-0l935a6a0a] { grid-template-columns: 1fr; } }
@media (max-width: 800px) { .dashboard-sections[b-0l935a6a0a] { grid-template-columns: 1fr; } .job-row[b-0l935a6a0a] { min-width: 680px; } .dashboard-section[b-0l935a6a0a] { overflow-x: auto; } }
@media (max-width: 520px) { .dashboard-kpi-row[b-0l935a6a0a] { grid-template-columns: 1fr; } }
/* _content/PSMS.Web/Components/Pages/DevTools/FieldGalleryPage.razor.rz.scp.css */
.field-gallery-layout[b-r6dwh4zjaj] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
    align-items: start;
}

.field-list-panel[b-r6dwh4zjaj],
.configuration-panel[b-r6dwh4zjaj] {
    padding: 18px;
}

.field-list-panel[b-r6dwh4zjaj] {
    min-height: 0;
}

.panel-heading[b-r6dwh4zjaj] {
    margin-bottom: 16px;
}

.panel-heading h2[b-r6dwh4zjaj] {
    margin: 0;
    font-size: 18px;
}

.panel-heading p[b-r6dwh4zjaj] {
    margin: 4px 0 0;
    color: #667085;
    font-size: 12px;
}

.field-gallery-page[b-r6dwh4zjaj] {
    display: grid;
    max-height: calc(100vh - 250px);
    grid-template-columns: 1fr;
    gap: 16px;
    overflow-y: auto;
    padding-right: 6px;
}

.field-preview-card[b-r6dwh4zjaj] {
    display: flex;
    min-height: 120px;
    flex-direction: column;
    gap: 18px;
    padding: 18px;
    cursor: pointer;
}

.field-preview-card.is-selected[b-r6dwh4zjaj] {
    border: 2px solid var(--accent-fill-rest);
}

.configuration-panel[b-r6dwh4zjaj] {
    display: flex;
    min-height: 300px;
    flex-direction: column;
    gap: 12px;
}

.configuration-empty[b-r6dwh4zjaj] {
    display: grid;
    min-height: 220px;
    place-items: center;
    color: #667085;
    font-size: 13px;
}

.field-preview-heading[b-r6dwh4zjaj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

@media (max-width: 1100px) {
    .field-gallery-layout[b-r6dwh4zjaj] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .field-gallery-page[b-r6dwh4zjaj] {
        grid-template-columns: 1fr;
    }
}
/* _content/PSMS.Web/Components/Pages/DevTools/FormBuilderPage.razor.rz.scp.css */
.form-builder-layout[b-g6xevghwor] {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}

.form-builder-palette[b-g6xevghwor],
.form-builder-canvas[b-g6xevghwor],
.form-builder-properties[b-g6xevghwor] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
}

.form-builder-canvas[b-g6xevghwor] {
    min-height: 420px;
}

.form-builder-properties[b-g6xevghwor] {
    min-height: 420px;
}

.form-builder-heading[b-g6xevghwor] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.form-builder-heading h2[b-g6xevghwor] {
    margin: 0;
    font-size: 18px;
    white-space: nowrap;
}

.form-builder-heading p[b-g6xevghwor] {
    margin: 4px 0 0;
    color: var(--colorNeutralForeground3);
    font-size: 12px;
}

.form-builder-title-row[b-g6xevghwor] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.form-builder-palette .form-builder-heading[b-g6xevghwor],
.form-builder-properties .form-builder-heading[b-g6xevghwor] {
    display: block;
}

.form-builder-palette .form-builder-heading p[b-g6xevghwor],
.form-builder-properties .form-builder-heading p[b-g6xevghwor] {
    max-width: none;
}

/* ---------- Palette ---------- */

.form-builder-palette-list[b-g6xevghwor] {
    display: grid;
    gap: 8px;
}

.form-builder-palette-item[b-g6xevghwor] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusMedium);
    background: var(--colorNeutralBackground1);
    cursor: grab;
    user-select: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.form-builder-palette-item:hover[b-g6xevghwor] {
    border-color: var(--colorBrandStroke1);
    box-shadow: var(--shadow4);
    transform: translateY(-1px);
}

.form-builder-palette-item:active[b-g6xevghwor] {
    cursor: grabbing;
    transform: translateY(0);
}

.palette-item-icon[b-g6xevghwor] {
    display: grid;
    flex: none;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--borderRadiusMedium);
    background: var(--colorBrandBackground2);
    color: var(--colorBrandForeground1);
}

.palette-item-text[b-g6xevghwor] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.palette-item-title-row[b-g6xevghwor] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.palette-item-title[b-g6xevghwor] {
    font-size: 13px;
    font-weight: 600;
    color: var(--colorNeutralForeground1);
}

.palette-item-subtitle[b-g6xevghwor] {
    color: var(--colorNeutralForeground3);
    font-size: 11px;
}

.form-element-symbol[b-g6xevghwor] {
    width: 20px;
    color: currentColor;
    font-weight: 700;
    text-align: center;
}

/* ---------- Canvas ---------- */

.field-remove-button[b-g6xevghwor] {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 1;
}

.form-canvas-actions[b-g6xevghwor] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.form-canvas-drop-surface[b-g6xevghwor] {
    min-height: 300px;
}

.form-builder-fields[b-g6xevghwor] {
    display: grid;
    gap: 8px;
}

[b-g6xevghwor] .form-builder-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-builder-field[b-g6xevghwor] {
    position: relative;
    margin-bottom: 10px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-left: 3px solid transparent;
    border-radius: var(--borderRadiusMedium);
    background: transparent;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

[b-g6xevghwor] .form-builder-fields .form-builder-field {
    margin-bottom: 0;
}

.form-builder-field:hover[b-g6xevghwor] {
    border-color: var(--colorNeutralStroke2);
    background: var(--colorNeutralBackground1);
}

.form-builder-field.is-selected[b-g6xevghwor] {
    border-color: var(--colorBrandStroke1);
    border-left-color: var(--colorBrandStroke1);
    background: var(--colorNeutralBackground1);
    box-shadow: var(--shadow4);
}

.form-builder-field-content[b-g6xevghwor] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
}

/* ---------- Section container + children ---------- */

.builder-section-preview[b-g6xevghwor] {
    display: grid;
    gap: 6px;
}

.builder-section-empty[b-g6xevghwor] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 8px 12px 12px;
    border: 1px dashed var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusMedium);
    color: var(--colorNeutralForeground3);
    font-size: 12px;
}

.builder-section-empty-remove[b-g6xevghwor] {
    display: flex;
    margin-left: auto;
}

.builder-section-child[b-g6xevghwor] {
    position: relative;
    padding: 3px 26px 3px 6px;
    border: 1px solid transparent;
    border-radius: var(--borderRadiusSmall);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.builder-section-child:hover[b-g6xevghwor] {
    border-color: var(--colorNeutralStroke2);
    background: var(--colorNeutralBackground1);
}

.builder-section-child.is-selected[b-g6xevghwor] {
    border-color: var(--colorBrandStroke1);
    background: var(--colorNeutralBackground1);
    box-shadow: 0 0 0 1px var(--colorBrandStroke1);
}

/* ---------- Stack / grid containers (kept for future use) ---------- */

.builder-container-preview[b-g6xevghwor] {
    padding: 12px;
    border: 1px dashed var(--colorNeutralStroke2);
    color: var(--colorNeutralForeground3);
    font-size: 12px;
}

.builder-stack-preview[b-g6xevghwor] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.builder-grid-preview[b-g6xevghwor] {
    display: grid;
    gap: 8px;
}

.builder-grid-column[b-g6xevghwor] {
    display: grid;
    min-height: 62px;
    align-content: start;
    gap: 6px;
    padding: 8px;
    border: 1px dashed var(--colorNeutralStroke2);
    color: var(--colorNeutralForeground3);
    font-size: 11px;
}

.builder-grid-child[b-g6xevghwor] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusSmall);
    background: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground2);
    cursor: pointer;
}

.builder-grid-child.is-selected[b-g6xevghwor] {
    border-color: var(--colorBrandStroke1);
    box-shadow: 0 0 0 1px var(--colorBrandStroke1);
}

.container-properties[b-g6xevghwor] {
    display: grid;
    gap: 8px;
}

.container-properties label[b-g6xevghwor] {
    color: var(--colorNeutralForeground2);
    font-size: 12px;
    font-weight: 600;
}

.container-properties input[b-g6xevghwor],
.container-properties select[b-g6xevghwor] {
    min-height: 32px;
    padding: 4px 8px;
    border: 1px solid var(--colorNeutralStroke1);
    border-radius: var(--borderRadiusSmall);
}

.builder-control-preview[b-g6xevghwor] {
    min-height: 26px;
    padding: 5px 8px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusSmall);
    color: var(--colorNeutralForeground3);
    font-size: 12px;
}

/* ---------- Empty states ---------- */

.form-builder-empty-state[b-g6xevghwor] {
    display: flex;
    min-height: 300px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px;
    border: 1px dashed var(--colorNeutralStroke2);
    border-radius: var(--borderRadiusMedium);
    color: var(--colorNeutralForeground3);
    text-align: center;
}

.form-builder-empty-state--compact[b-g6xevghwor] {
    min-height: 260px;
}

.form-builder-empty-state h3[b-g6xevghwor] {
    margin: 6px 0 0;
    color: var(--colorNeutralForeground2);
    font-size: 15px;
}

.form-builder-empty-state p[b-g6xevghwor] {
    margin: 0;
    max-width: 260px;
    font-size: 12px;
}

@media (max-width: 900px) {
    .form-builder-layout[b-g6xevghwor] {
        grid-template-columns: 1fr;
    }
}
/* _content/PSMS.Web/Components/Pages/DevTools/NotificationTesterPage.razor.rz.scp.css */
.notification-tester-layout[b-orj0n8a82z] {
    display: grid;
    grid-template-columns: minmax(360px, 480px) 1fr;
    gap: 12px;
    align-items: start;
    margin-top: 12px;
}

@media (max-width: 900px) {
    .notification-tester-layout[b-orj0n8a82z] {
        grid-template-columns: 1fr;
    }
}

[b-orj0n8a82z] .notification-tester-panel {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[b-orj0n8a82z] .notification-tester-feed {
    min-height: 320px;
}

.notification-tester-item[b-orj0n8a82z] {
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--colorNeutralBackground2, #f5f5f5);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Only notifications whose Payload JSON resolves to a Url get pointer/hover affordance — matches
   NotificationMenu.razor's identical notification-item-clickable convention. */
.notification-tester-item-clickable[b-orj0n8a82z] {
    cursor: pointer;
}

.notification-tester-item-clickable:hover[b-orj0n8a82z],
.notification-tester-item-clickable:focus-visible[b-orj0n8a82z] {
    background: var(--colorNeutralBackground3, #ececec);
}
/* _content/PSMS.Web/Components/Pages/Error/AccessDeniedPage.razor.rz.scp.css */
.access-denied-page[b-mrrvoqm1df] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 55vh;
    padding: 24px;
    text-align: center;
}

.access-denied-mascot[b-mrrvoqm1df] {
    width: 140px;
    height: 140px;
    object-fit: contain;
}

.access-denied-content[b-mrrvoqm1df] {
    max-width: 420px;
}

.access-denied-code[b-mrrvoqm1df] {
    color: #c50f1f;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

.access-denied-page h1[b-mrrvoqm1df] {
    margin: 8px 0 4px;
    font-size: 1.5rem;
}

.access-denied-page p[b-mrrvoqm1df] {
    color: #6b7280;
    margin-bottom: 1.25rem;
}

.access-denied-actions[b-mrrvoqm1df] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
/* _content/PSMS.Web/Components/Pages/Error/Error.razor.rz.scp.css */
.error-page[b-se2ihmw3vp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 55vh;
    padding: 24px;
    text-align: center;
}

.error-mascot[b-se2ihmw3vp] {
    width: 140px;
    height: 140px;
    object-fit: contain;
}

.error-content[b-se2ihmw3vp] {
    max-width: 460px;
}

.error-code[b-se2ihmw3vp] {
    color: #c50f1f;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

.error-page h1[b-se2ihmw3vp] {
    margin: 8px 0 4px;
    font-size: 1.5rem;
}

.error-page p[b-se2ihmw3vp] {
    color: #6b7280;
    margin-bottom: 1.25rem;
}

.error-actions[b-se2ihmw3vp] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 1.25rem;
}

.error-request-id[b-se2ihmw3vp] {
    font-size: 0.85rem;
}

.error-dev-details[b-se2ihmw3vp] {
    margin-top: 8px;
    padding: 12px 16px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    text-align: left;
    background: #f6f7f9;
}

.error-dev-details summary[b-se2ihmw3vp] {
    cursor: pointer;
    font-weight: 600;
    color: #242424;
}

.error-dev-details p[b-se2ihmw3vp] {
    margin: 8px 0 0;
    font-size: 0.85rem;
}
/* _content/PSMS.Web/Components/Pages/Error/MaintenancePage.razor.rz.scp.css */
.maintenance-page[b-11ex2lm1qy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 55vh;
    padding: 24px;
    text-align: center;
}

.maintenance-mascot[b-11ex2lm1qy] {
    width: 140px;
    height: 140px;
    object-fit: contain;
}

.maintenance-content[b-11ex2lm1qy] {
    max-width: 420px;
}

.maintenance-code[b-11ex2lm1qy] {
    color: #9a6700;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

.maintenance-page h1[b-11ex2lm1qy] {
    margin: 8px 0 4px;
    font-size: 1.5rem;
}

.maintenance-page p[b-11ex2lm1qy] {
    color: #6b7280;
    margin-bottom: 1.25rem;
}

.maintenance-actions[b-11ex2lm1qy] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
/* _content/PSMS.Web/Components/Pages/Error/NotFoundPage.razor.rz.scp.css */
.not-found-page[b-q6qmdzhb4i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 55vh;
    padding: 24px;
    text-align: center;
}

.not-found-mascot[b-q6qmdzhb4i] {
    width: 140px;
    height: 140px;
    object-fit: contain;
}

.not-found-content[b-q6qmdzhb4i] {
    max-width: 420px;
}

.not-found-code[b-q6qmdzhb4i] {
    color: #0f6cbd;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

.not-found-page h1[b-q6qmdzhb4i] {
    margin: 8px 0 4px;
    font-size: 1.5rem;
}

.not-found-page p[b-q6qmdzhb4i] {
    color: #6b7280;
    margin-bottom: 1.25rem;
}

.not-found-actions[b-q6qmdzhb4i] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
/* _content/PSMS.Web/Components/Pages/Error/SessionExpiredPage.razor.rz.scp.css */
.session-expired-page[b-qd2oaupex1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    min-height: 55vh;
    padding: 24px;
    text-align: center;
}

.session-expired-mascot[b-qd2oaupex1] {
    width: 140px;
    height: 140px;
    object-fit: contain;
}

.session-expired-content[b-qd2oaupex1] {
    max-width: 420px;
}

.session-expired-code[b-qd2oaupex1] {
    color: #0f6cbd;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

.session-expired-page h1[b-qd2oaupex1] {
    margin: 8px 0 4px;
    font-size: 1.5rem;
}

.session-expired-page p[b-qd2oaupex1] {
    color: #6b7280;
    margin-bottom: 1.25rem;
}

.session-expired-actions[b-qd2oaupex1] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
/* _content/PSMS.Web/Components/Pages/Inventory/InventorySettings.razor.rz.scp.css */
/* Mirrors Settings.razor.css — shared by every tab in Tabs/ (ItemCategoriesTab, etc.), so every
   selector needs ::deep: scoped css only auto-applies to plain HTML written directly in this
   file's own markup otherwise. Kept as a separate copy (not shared) because scoped CSS only
   applies within its own component's render tree — Settings.razor.css's rules don't reach here. */

[b-ov8phanpl0] .lookup-grid-card {
    display: flex;
    flex-direction: column;
    overflow: visible;
}

/* Matches the FluentDataGrid docs' AutoItemsPerPage pattern: a fixed (viewport-relative, not
   flex/percentage) height on the grid's immediate wrapper, with overflow-y: hidden so the
   grid has one stable box to measure and clip rows-per-page against. A height that moves with
   row count (flex/%) feeds back into AutoItemsPerPage's calculation — a short last page shrinks
   the box, which locks in a smaller computed page size that doesn't recover on later pages. */
[b-ov8phanpl0] .lookup-grid-container {
    height: calc(100dvh - 380px) !important;
    min-height: 8rem;
    overflow-x: auto;
    overflow-y: hidden;
}

[b-ov8phanpl0] .lookup-grid-container fluent-data-grid {
    display: block;
    width: 100%;
}

/* DisplayMode.Table renders a real table with the browser's default table-layout: auto,
   which redistributes any leftover width across ALL columns proportionally — ignoring a
   narrow column's explicit Width (e.g. Actions="48px" was rendering as wide as Status).
   table-layout: fixed makes the browser actually honor each column's declared width. */
[b-ov8phanpl0] .lookup-grid-container table {
    table-layout: fixed;
    width: 100%;
}

[b-ov8phanpl0] .lookup-grid-container td,
[b-ov8phanpl0] .lookup-grid-container th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* _content/PSMS.Web/Components/Pages/JobOrder/JobOrderDetail.razor.rz.scp.css */
.job-order-info-row[b-aqsciod8wf] {
    /* Grid with a fixed column count, not flex-wrap — flex-wrap decides how many items fit per
       line using each item's un-grown basis size, then grows them after, so "5 items, each free
       to grow" can still wrap to 2 lines depending on available width. A 5-column grid has no such
       ambiguity: 6 columns always means 1 row, full stop. minmax floor + overflow-x is the same
       narrow-window fallback used elsewhere (e.g. SectionsFieldsStep.razor.css's .builder-layout)
       — scroll horizontally rather than collapsing a column unreadably. */
    display: grid;
    grid-template-columns: repeat(6, minmax(140px, 1fr));
    gap: 12px;
    overflow-x: auto;
}

[b-aqsciod8wf] .job-order-info-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
}

.job-order-info-label[b-aqsciod8wf] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--neutral-foreground-3, #6b7280);
}

.job-order-info-value[b-aqsciod8wf] {
    font-size: 14px;
    font-weight: 600;
}

.job-order-info-due[b-aqsciod8wf] {
    color: var(--accent-fill-rest, #b91c1c);
}

.job-order-info-priority[b-aqsciod8wf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    font-size: 14px;
    font-weight: 700;
}

.job-order-priority-high[b-aqsciod8wf],
.job-order-priority-urgent[b-aqsciod8wf] {
    color: var(--accent-fill-rest, #b91c1c);
}

.job-order-priority-medium[b-aqsciod8wf] {
    color: var(--warning, #b45309);
}

.job-order-priority-low[b-aqsciod8wf] {
    color: var(--success, #15803d);
}

.job-order-layout[b-aqsciod8wf] {
    display: grid;
    /* Fixed floors + overflow-x fallback, not minmax(0, Nfr) — a narrow window would otherwise
       squeeze a column to near-0 and collapse its text into an unreadable one-word-per-line
       column instead of the whole layout just scrolling horizontally. See
       SectionsFieldsStep.razor.css's .builder-layout comment for the full story. */
    grid-template-columns: minmax(280px, 3fr) minmax(400px, 6fr) minmax(280px, 4fr);
    gap: 16px;
    width: 100%;
    align-items: start;
    overflow-x: auto;
}

[b-aqsciod8wf] .job-order-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
}

.builder-panel-header[b-aqsciod8wf] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px 8px;
    flex: 0 0 auto;
}

.builder-panel-header h2[b-aqsciod8wf] {
    margin: 0;
    font-size: 15px;
}

.builder-panel-header p[b-aqsciod8wf] {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--neutral-foreground-3, #6b7280);
}

.job-order-item-row[b-aqsciod8wf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--neutral-stroke-divider-rest, #e1e1e1);
    border-radius: 8px;
    cursor: pointer;
}

.job-order-item-row:hover[b-aqsciod8wf] {
    background: var(--neutral-fill-2-rest, #fafafa);
}

.job-order-item-row.is-selected[b-aqsciod8wf] {
    border-color: var(--accent-fill-rest, #6366f1);
    background: var(--accent-fill-rest-alpha, #eef2ff);
}

.job-order-item-row-top[b-aqsciod8wf] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.job-order-item-number[b-aqsciod8wf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--neutral-foreground-3, #6b7280);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex: 0 0 auto;
}

.job-order-item-name[b-aqsciod8wf] {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 13px;
}

.job-order-item-spec[b-aqsciod8wf] {
    font-size: 12px;
    color: var(--neutral-foreground-3, #6b7280);
    padding-left: 28px;
}

.job-order-item-price[b-aqsciod8wf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    padding-left: 28px;
}

.job-order-items-footer[b-aqsciod8wf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
}

.job-order-items-footer-total[b-aqsciod8wf] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.production-form-preview-section[b-aqsciod8wf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.production-form-preview-section-header[b-aqsciod8wf] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.production-form-preview-name[b-aqsciod8wf] {
    font-weight: 600;
}

[b-aqsciod8wf] .job-order-side-column {
    min-width: 0;
}

.job-order-summary-row[b-aqsciod8wf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}

.job-order-summary-row > span:first-child[b-aqsciod8wf] {
    color: var(--neutral-foreground-3, #6b7280);
}

.job-order-summary-total[b-aqsciod8wf] {
    font-weight: 700;
    font-size: 15px;
}

.job-order-item-commercial-title[b-aqsciod8wf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.job-order-hint[b-aqsciod8wf] {
    margin: 0;
    font-size: 11px;
    color: var(--neutral-foreground-3, #6b7280);
}

.field-options-empty[b-aqsciod8wf] {
    padding: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--neutral-foreground-3, #6b7280);
    border: 1px dashed var(--neutral-stroke-divider-rest, #e1e1e1);
    border-radius: 6px;
}
/* _content/PSMS.Web/Components/Pages/Login/Login.razor.rz.scp.css */
.login-card-shell[b-mwdz874cs3] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    width: min(1200px, 100%);
    min-height: 640px;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 30px 80px rgb(15 45 90 / 18%);
}

.login-brand-panel[b-mwdz874cs3] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
    padding: 48px 44px;
    background: linear-gradient(180deg, #f3f6fc 0%, #e9eefb 100%);
}

.brand-blob[b-mwdz874cs3] {
    position: absolute;
    border-radius: 50%;
    opacity: 0.5;
    pointer-events: none;
}

.brand-blob-1[b-mwdz874cs3] {
    top: -80px;
    right: -100px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, #cfe0fb 0%, transparent 70%);
}

.brand-blob-2[b-mwdz874cs3] {
    bottom: -120px;
    left: -80px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, #fbdcec 0%, transparent 70%);
}

.brand-dots[b-mwdz874cs3] {
    position: absolute;
    top: 56px;
    right: 64px;
    width: 90px;
    height: 90px;
    background-image: radial-gradient(#b9c8ea 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    opacity: 0.7;
}

.brand-header[b-mwdz874cs3] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-logo[b-mwdz874cs3] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
}

.brand-header strong[b-mwdz874cs3] {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: #1a2233;
}

.brand-header span[b-mwdz874cs3] {
    display: block;
    color: #5b6473;
    font-size: 12px;
}

.login-brand-panel h1[b-mwdz874cs3] {
    position: relative;
    z-index: 1;
    max-width: 380px;
    margin: 12px 0 0;
    color: #1a2233;
    font-size: 30px;
    line-height: 1.25;
}

.login-brand-panel > p[b-mwdz874cs3] {
    position: relative;
    z-index: 1;
    max-width: 340px;
    margin: 0;
    color: #5b6473;
    font-size: 14px;
    line-height: 1.6;
}

.brand-illustration[b-mwdz874cs3] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    padding: 20px;
}

/* Crops the animation's own baked-in bottom margin (see the comment above the markup) — height
   is intentionally shorter than the player's natural width-driven (1:1) height, and the overflow
   clips instead of scaling the whole square down. */
.brand-illustration-frame[b-mwdz874cs3] {
    width: 100%;
    max-width: 380px;
    height: 300px;
    overflow: hidden;
}

.login-form-panel[b-mwdz874cs3] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 56px;
}

/* Hidden by default (desktop/tablet) — .login-brand-panel already shows the logo there. Only
   shown once that panel disappears (@media (max-width: 900px) below), so this and the brand
   panel are never both visible or both hidden at once. */
.login-mobile-brand[b-mwdz874cs3] {
    display: none;
}

.login-form-inner[b-mwdz874cs3] {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
}

.login-remember-me[b-mwdz874cs3] {
    white-space: nowrap;
}

.forgot-password-link[b-mwdz874cs3] {
    color: #0067c0;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

.forgot-password-link:hover[b-mwdz874cs3] {
    text-decoration: underline;
}

.login-divider[b-mwdz874cs3] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a93a3;
    font-size: 12px;
}

.login-divider[b-mwdz874cs3]::before,
.login-divider[b-mwdz874cs3]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e5e8ef;
}

.login-divider span[b-mwdz874cs3] {
    padding: 0 12px;
}

.login-help-card[b-mwdz874cs3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f4f7fd;
}

.login-help-icon[b-mwdz874cs3] {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    place-items: center;
    border-radius: 10px;
    background: #e1ebfb;
    color: #0067c0;
}

.login-help-text[b-mwdz874cs3] {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    font-size: 13px;
}

.login-help-text strong[b-mwdz874cs3] {
    color: #1a2233;
}

.login-help-text a[b-mwdz874cs3] {
    color: #0067c0;
    font-size: 12px;
    text-decoration: none;
}

/* ::deep because Class="login-help-chevron" is passed into the FluentIcon child
   component, whose rendered element sits outside this file's own scope. */
[b-mwdz874cs3] .login-help-chevron {
    color: #8a93a3;
}

.login-footer[b-mwdz874cs3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 32px;
    padding-top: 16px;
    color: #8a93a3;
    font-size: 11px;
}

.login-footer-dots[b-mwdz874cs3] {
    display: inline-flex;
    gap: 6px;
}

.login-footer-dots .dot[b-mwdz874cs3] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dot-cyan[b-mwdz874cs3] { background: #26c6da; }
.dot-pink[b-mwdz874cs3] { background: #ec4899; }
.dot-amber[b-mwdz874cs3] { background: #f5a623; }
.dot-ink[b-mwdz874cs3] { background: #1a2233; }

@media (max-width: 900px) {
    .login-brand-panel[b-mwdz874cs3] {
        display: none;
    }

    .login-card-shell[b-mwdz874cs3] {
        grid-template-columns: 1fr;
    }

    .login-mobile-brand[b-mwdz874cs3] {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
    }

    .login-mobile-brand-logo[b-mwdz874cs3] {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        object-fit: cover;
    }

    .login-mobile-brand strong[b-mwdz874cs3] {
        display: block;
        font-size: 17px;
        font-weight: 800;
        color: #1a2233;
    }

    .login-mobile-brand span[b-mwdz874cs3] {
        display: block;
        color: #5b6473;
        font-size: 11px;
    }
}

@media (max-width: 768px) {
    /* Full-bleed native-app look — no floating card, no visible margin/shadow around it. Paired
       with LoginLayout.razor.css's own .login-shell mobile block (padding removed there too). */
    .login-card-shell[b-mwdz874cs3] {
        min-height: 100dvh;
        border-radius: 0;
        box-shadow: none;
    }

    /* Desktop's 48px/56px padding reads as excess empty space on a phone-width screen — this
       still leaves comfortable touch-target margins without the stretched-out feel. */
    .login-form-panel[b-mwdz874cs3] {
        padding: 32px 20px 24px;
    }
}
/* _content/PSMS.Web/Components/Pages/PayrollManagement/PayrollManagementSettings.razor.rz.scp.css */
/* Mirrors Settings.razor.css / InventorySettings.razor.css / BusinessDuesSettings.razor.css —
   shared by every tab in Tabs/ (WorkShiftsTab, etc.), so every selector needs ::deep: scoped css
   only auto-applies to plain HTML written directly in this file's own markup otherwise. Kept as a
   separate copy (not shared) because scoped CSS only applies within its own component's render
   tree. */

[b-iesa18yvy1] .lookup-grid-card {
    display: flex;
    flex-direction: column;
    overflow: visible;
}

/* Matches the FluentDataGrid docs' AutoItemsPerPage pattern: a fixed (viewport-relative, not
   flex/percentage) height on the grid's immediate wrapper, with overflow-y: hidden so the
   grid has one stable box to measure and clip rows-per-page against. A height that moves with
   row count (flex/%) feeds back into AutoItemsPerPage's calculation — a short last page shrinks
   the box, which locks in a smaller computed page size that doesn't recover on later pages. */
[b-iesa18yvy1] .lookup-grid-container {
    height: calc(100dvh - 380px) !important;
    min-height: 8rem;
    overflow-x: auto;
    overflow-y: hidden;
}

[b-iesa18yvy1] .lookup-grid-container fluent-data-grid {
    display: block;
    width: 100%;
}

/* DisplayMode.Table renders a real table with the browser's default table-layout: auto,
   which redistributes any leftover width across ALL columns proportionally — ignoring a
   narrow column's explicit Width (e.g. Actions="48px" was rendering as wide as Status).
   table-layout: fixed makes the browser actually honor each column's declared width. */
[b-iesa18yvy1] .lookup-grid-container table {
    table-layout: fixed;
    width: 100%;
}

[b-iesa18yvy1] .lookup-grid-container td,
[b-iesa18yvy1] .lookup-grid-container th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* _content/PSMS.Web/Components/Pages/PIA/PIA.razor.rz.scp.css */
/* Same fixed-header/scrollable-body reasoning as the Printing Service builder panels:
   FluentTabs-style height cascading is unreliable, so max-height is anchored to the viewport
   directly. --pia-header-offset is a tuned estimate of everything above the card (topbar +
   admin-content padding + PageHeader) — nudge it if the card clips before the viewport edge. */
.pia-layout[b-3jx68rjzu3] {
    display: flex;
    width: 100%;
}

[b-3jx68rjzu3] .pia-chat-card {
    --pia-header-offset: 218px;

    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: calc(100vh - var(--topbar-height, 52px) - var(--pia-header-offset));
    overflow: hidden;
    padding: 0;
}

.pia-chat-header[b-3jx68rjzu3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #e1e1e1);
    flex: 0 0 auto;
}

.pia-chat-header-name[b-3jx68rjzu3] {
    font-weight: 600;
    font-size: 14px;
}

.pia-chat-header-subtitle[b-3jx68rjzu3] {
    font-size: 12px;
    color: var(--neutral-foreground-3, #6b7280);
}

.pia-message-list[b-3jx68rjzu3] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
}

.pia-message[b-3jx68rjzu3] {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    max-width: 75%;
}

.pia-message-assistant[b-3jx68rjzu3] {
    align-self: flex-start;
}

.pia-message-user[b-3jx68rjzu3] {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.pia-bubble[b-3jx68rjzu3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.45;
}

.pia-message-assistant .pia-bubble[b-3jx68rjzu3] {
    background: var(--neutral-fill-2-rest, #f3f2f1);
    border-bottom-left-radius: 4px;
}

.pia-message-user .pia-bubble[b-3jx68rjzu3] {
    background: #5b3fbf;
    color: #fff;
    border-bottom-right-radius: 4px;
}

.pia-bubble-time[b-3jx68rjzu3] {
    font-size: 10px;
    opacity: 0.65;
    align-self: flex-end;
}

.pia-bubble-thinking[b-3jx68rjzu3] {
    flex-direction: row;
    align-items: center;
    gap: 3px;
    padding: 12px 14px;
}

.pia-typing-dot[b-3jx68rjzu3] {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--neutral-foreground-3, #6b7280);
    animation: pia-typing-b-3jx68rjzu3 1s infinite ease-in-out;
}

.pia-typing-dot:nth-child(2)[b-3jx68rjzu3] {
    animation-delay: 0.15s;
}

.pia-typing-dot:nth-child(3)[b-3jx68rjzu3] {
    animation-delay: 0.3s;
}

@keyframes pia-typing-b-3jx68rjzu3 {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }
    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

.pia-suggestions[b-3jx68rjzu3] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 12px;
    flex: 0 0 auto;
}

.pia-input-row[b-3jx68rjzu3] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest, #e1e1e1);
    flex: 0 0 auto;
}
/* _content/PSMS.Web/Components/Pages/PrintingService/PrintingServiceSettingsMenu.razor.rz.scp.css */
/* Mirrors BusinessDuesSettings.razor.css / Settings.razor.css — shared by every tab in Tabs/
   (PrintingServiceCategoriesTab, etc.), so every selector needs ::deep: scoped css only
   auto-applies to plain HTML written directly in this file's own markup otherwise. Kept as a
   separate copy (not shared) because scoped CSS only applies within its own component's render
   tree. */

[b-licogpskob] .lookup-grid-card {
    display: flex;
    flex-direction: column;
    overflow: visible;
}

/* Matches the FluentDataGrid docs' AutoItemsPerPage pattern: a fixed (viewport-relative, not
   flex/percentage) height on the grid's immediate wrapper, with overflow-y: hidden so the
   grid has one stable box to measure and clip rows-per-page against. A height that moves with
   row count (flex/%) feeds back into AutoItemsPerPage's calculation — a short last page shrinks
   the box, which locks in a smaller computed page size that doesn't recover on later pages. */
[b-licogpskob] .lookup-grid-container {
    height: calc(100dvh - 380px) !important;
    min-height: 8rem;
    overflow-x: auto;
    overflow-y: hidden;
}

[b-licogpskob] .lookup-grid-container fluent-data-grid {
    display: block;
    width: 100%;
}

/* DisplayMode.Table renders a real table with the browser's default table-layout: auto,
   which redistributes any leftover width across ALL columns proportionally — ignoring a
   narrow column's explicit Width (e.g. Actions="48px" was rendering as wide as Status).
   table-layout: fixed makes the browser actually honor each column's declared width. */
[b-licogpskob] .lookup-grid-container table {
    table-layout: fixed;
    width: 100%;
}

[b-licogpskob] .lookup-grid-container td,
[b-licogpskob] .lookup-grid-container th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* _content/PSMS.Web/Components/Pages/PrintingService/Settings/FieldOptionsStep.razor.rz.scp.css */
.field-options-layout[b-7e83704z8o] {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 16px;
    width: 100%;
    align-items: start;
}

[b-7e83704z8o] .field-options-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

[b-7e83704z8o] .field-options-panel .builder-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

[b-7e83704z8o] .field-options-panel .builder-panel-header h2 {
    margin: 0;
    font-size: 15px;
}

[b-7e83704z8o] .field-options-panel .builder-panel-header p {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--neutral-foreground-3, #6b7280);
}

[b-7e83704z8o] .field-options-panel .builder-panel-footer {
    font-size: 12px;
    color: var(--neutral-foreground-3, #6b7280);
}

.field-options-list[b-7e83704z8o] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.field-options-group-title[b-7e83704z8o] {
    margin-top: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--accent-brand, #6366f1);
}

.field-options-group-title:first-child[b-7e83704z8o] {
    margin-top: 0;
}

.field-options-row[b-7e83704z8o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.field-options-row:hover[b-7e83704z8o] {
    background: var(--neutral-fill-2-rest, #fafafa);
}

.field-options-row.is-selected[b-7e83704z8o] {
    background: var(--neutral-fill-3-rest, #f0f0f5);
    font-weight: 600;
}

.field-options-row.is-disabled[b-7e83704z8o] {
    cursor: default;
    color: var(--neutral-foreground-3, #9ca3af);
}

.field-options-row.is-disabled:hover[b-7e83704z8o] {
    background: transparent;
}

.field-options-row-hint[b-7e83704z8o] {
    font-size: 12px;
    color: var(--neutral-foreground-3, #9ca3af);
}

.field-options-empty[b-7e83704z8o] {
    padding: 24px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--neutral-foreground-3, #6b7280);
}

.field-options-selected-title[b-7e83704z8o] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.field-options-count[b-7e83704z8o] {
    font-size: 12px;
    color: var(--neutral-foreground-3, #6b7280);
}

[b-7e83704z8o] .field-options-pricing-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    margin-top: 8px;
    background: var(--neutral-fill-2-rest, #fafafa);
}
/* _content/PSMS.Web/Components/Pages/PrintingService/Settings/PricingFieldsStep.razor.rz.scp.css */
.pricing-layout[b-cm1p93kzyd] {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 460px;
    gap: 16px;
    width: 100%;
    align-items: start;
}

[b-cm1p93kzyd] .pricing-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

[b-cm1p93kzyd] .pricing-panel .builder-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

[b-cm1p93kzyd] .pricing-panel .builder-panel-header h2 {
    margin: 0;
    font-size: 15px;
}

[b-cm1p93kzyd] .pricing-panel .builder-panel-header p {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--neutral-foreground-3, #6b7280);
}

.pricing-order-column[b-cm1p93kzyd] {
    min-width: 0;
}

.pricing-fields-list[b-cm1p93kzyd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pricing-field-row[b-cm1p93kzyd] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
}

.pricing-field-row:hover[b-cm1p93kzyd],
.pricing-field-row.is-selected[b-cm1p93kzyd] {
    background: var(--neutral-fill-2-rest, #fafafa);
}

.pricing-field-name[b-cm1p93kzyd] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
}

[b-cm1p93kzyd] .pricing-order-drag-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

[b-cm1p93kzyd] .pricing-order-row-wrap {
    display: block;
}

.pricing-order-row[b-cm1p93kzyd] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--neutral-stroke-divider-rest, #e1e1e1);
    border-radius: 6px;
    cursor: pointer;
}

.pricing-order-row:hover[b-cm1p93kzyd],
.pricing-order-row.is-selected[b-cm1p93kzyd] {
    background: var(--neutral-fill-2-rest, #fafafa);
}

.pricing-order-number[b-cm1p93kzyd] {
    flex: 0 0 auto;
    width: 18px;
    color: var(--neutral-foreground-3, #9ca3af);
    font-size: 12px;
    font-weight: 700;
}

.pricing-order-name[b-cm1p93kzyd] {
    flex: 0 0 auto;
    min-width: 100px;
    font-weight: 600;
    font-size: 13px;
}

.pricing-order-rule[b-cm1p93kzyd] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: var(--neutral-foreground-3, #6b7280);
}

[b-cm1p93kzyd] .pricing-preview-card {
    background: var(--neutral-fill-2-rest, #fafafa);
}

.pricing-preview-row[b-cm1p93kzyd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}

.pricing-preview-total[b-cm1p93kzyd] {
    font-weight: 700;
    font-size: 15px;
}

.pricing-detail-header[b-cm1p93kzyd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pricing-pager-label[b-cm1p93kzyd] {
    font-size: 12px;
    color: var(--neutral-foreground-3, #6b7280);
    min-width: 44px;
    text-align: center;
}

.pricing-rate-table-note[b-cm1p93kzyd],
.pricing-hint[b-cm1p93kzyd] {
    font-size: 12px;
    color: var(--neutral-foreground-3, #6b7280);
}

.field-options-empty[b-cm1p93kzyd] {
    padding: 24px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--neutral-foreground-3, #6b7280);
}

.field-options-selected-title[b-cm1p93kzyd] {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* _content/PSMS.Web/Components/Pages/PrintingService/Settings/PrintLayoutPreview.razor.rz.scp.css */
.print-layout-preview-toolbar[b-yyoc6zdjqh] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

/* .print-layout-page's own A4 sizing/shadow lives in the global wwwroot/css/print-layout.css
   (not here) — it has to be a real global class, not scoped, since @media print's "hide
   everything except this" trick can only ever be expressed globally (see that file's own header
   comment). This is just the gray scroll "mat" this preview sits in on screen. */
.print-layout-preview-mat[b-yyoc6zdjqh] {
    background: #f2f4f7;
    border-radius: 8px;
    padding: 16px;
    overflow: auto;
}

/* These are just the section/field rules ProductionFormPreview.razor.css already defines for its
   own scope, which CSS isolation doesn't let this component reach across into — same "redeclare
   per component" pattern ProductionSettings.razor.css already follows for .lookup-grid-card. */
.production-form-preview-empty[b-yyoc6zdjqh] {
    padding: 24px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--neutral-foreground-3, #6b7280);
}

.production-form-preview-section[b-yyoc6zdjqh] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.production-form-preview-section-header[b-yyoc6zdjqh] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.production-form-preview-number[b-yyoc6zdjqh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 0 4px;
    border-radius: 50%;
    background: var(--neutral-foreground-3, #6b7280);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex: 0 0 auto;
}

.production-form-preview-name[b-yyoc6zdjqh] {
    font-weight: 600;
}

.print-layout-preview-grid[b-yyoc6zdjqh] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.print-layout-field[b-yyoc6zdjqh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
}

.print-layout-field-label[b-yyoc6zdjqh] {
    font-weight: 600;
    color: var(--neutral-foreground-2, #333);
}

.print-layout-field-value[b-yyoc6zdjqh] {
    color: var(--neutral-foreground-1, #1a1a1a);
}

.print-layout-field-table[b-yyoc6zdjqh] {
    margin-top: 4px;
}

/* IMAGE fields never have real bytes/a URL to render (no upload/storage endpoint exists yet —
   see ImageFieldModel's own doc comment; the live input form shows the same filename-only text,
   never a thumbnail). This box makes that filename read as "a picture goes here" rather than
   ordinary text, without fabricating image content that was never actually captured. */
.print-layout-field-image-placeholder[b-yyoc6zdjqh] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    padding: 8px 10px;
    border: 1px dashed var(--neutral-stroke-divider-rest, #d0d5dd);
    border-radius: 6px;
    background: var(--neutral-fill-2-rest, #fafafa);
    width: fit-content;
}

[b-yyoc6zdjqh] .print-layout-field-image-placeholder svg {
    flex: 0 0 auto;
    color: var(--neutral-foreground-3, #9ca3af);
}
/* _content/PSMS.Web/Components/Pages/PrintingService/Settings/PrintLayoutStep.razor.rz.scp.css */
/* Two panels: config on the left, live print preview on the right — same fixed-floor +
   overflow-x fallback reasoning as SectionsFieldsStep.razor.css's .builder-layout (a narrow
   window scrolls horizontally instead of collapsing either column's text to one word per line). */
.print-layout-step-layout[b-ns0a72xgzx] {
    display: grid;
    /* 3:9 split (25%/75%) — config panel stays a fixed narrow column, preview gets the rest.
       Fixed floors + overflow-x fallback, not minmax(0, Nfr) — see SectionsFieldsStep.razor.css's
       .builder-layout comment for why: without a floor, a narrow window squeezes a column down to
       near-0 and its text collapses into an unreadable one-word-per-line column instead of the
       whole layout just scrolling horizontally. */
    grid-template-columns: minmax(280px, 3fr) minmax(400px, 9fr);
    gap: 16px;
    width: 100%;
    align-items: start;
    overflow-x: auto;
}

/* CSS isolation means these don't reach across from SectionsFieldsStep.razor.css even though the
   class names match on purpose — same "redeclare per component" pattern noted throughout this
   feature (see ProductionSettings.razor.css/PrintLayoutPreview.razor.css). */
[b-ns0a72xgzx] .builder-panel {
    --psms-header-offset: 218px;

    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    max-height: calc(100vh - var(--topbar-height, 52px) - var(--psms-header-offset));
    overflow: hidden;
}

.builder-panel-header[b-ns0a72xgzx] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px 8px;
    flex: 0 0 auto;
}

.builder-panel-header-title[b-ns0a72xgzx] {
    flex: 1 1 160px;
    min-width: 160px;
}

.builder-panel-header h2[b-ns0a72xgzx] {
    margin: 0;
    font-size: 15px;
}

.builder-panel-header p[b-ns0a72xgzx] {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--neutral-foreground-3, #6b7280);
}

.print-layout-subheading[b-ns0a72xgzx] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-3, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.print-layout-letterhead[b-ns0a72xgzx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 0 auto;
}

.print-layout-sections-list[b-ns0a72xgzx] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

[b-ns0a72xgzx] .builder-sections-drag-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

[b-ns0a72xgzx] .builder-section-wrap,
[b-ns0a72xgzx] .builder-field-row-wrap {
    display: block;
}

.builder-section[b-ns0a72xgzx] {
    border: 1px solid var(--neutral-stroke-divider-rest, #e1e1e1);
    border-radius: 8px;
    overflow: hidden;
    transition: opacity 0.15s ease;
}

/* A section/field the admin has un-checked stays visible (so it can be checked back on) but
   visually recedes — same "still here, just not active" affordance a disabled row gets elsewhere
   in this wizard, rather than disappearing outright. */
.print-layout-section-excluded[b-ns0a72xgzx],
.print-layout-field-excluded[b-ns0a72xgzx] {
    opacity: 0.55;
}

.builder-section-header[b-ns0a72xgzx] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    background: var(--neutral-fill-2-rest, #fafafa);
}

.builder-section-number[b-ns0a72xgzx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 0 4px;
    border-radius: 50%;
    background: var(--neutral-foreground-3, #6b7280);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex: 0 0 auto;
}

.builder-section-name[b-ns0a72xgzx] {
    font-weight: 600;
}

.builder-section-body[b-ns0a72xgzx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
}

.builder-section-empty[b-ns0a72xgzx] {
    padding: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--neutral-foreground-3, #6b7280);
    border: 1px dashed var(--neutral-stroke-divider-rest, #e1e1e1);
    border-radius: 6px;
}

.builder-field-row[b-ns0a72xgzx] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px;
    border-radius: 6px;
}

.builder-field-row:hover[b-ns0a72xgzx] {
    background: var(--neutral-fill-2-rest, #fafafa);
}

.builder-field-name[b-ns0a72xgzx] {
    font-weight: 600;
    font-size: 13px;
    flex: 0 0 auto;
}

[b-ns0a72xgzx] .drag-handle {
    color: var(--neutral-foreground-3, #9ca3af);
    flex: 0 0 auto;
}

.builder-field-settings[b-ns0a72xgzx] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 4px 8px 8px 28px;
}

.print-layout-preview-panel[b-ns0a72xgzx] {
    max-height: calc(100vh - var(--topbar-height, 52px) - 218px);
}

[b-ns0a72xgzx] .print-layout-preview-panel > div:last-child {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
/* _content/PSMS.Web/Components/Pages/PrintingService/Settings/ProductionFormPreview.razor.rz.scp.css */
.production-form-preview-empty[b-o2qgxmmrjw] {
    padding: 24px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--neutral-foreground-3, #6b7280);
}

.production-form-preview-section[b-o2qgxmmrjw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.production-form-preview-section-header[b-o2qgxmmrjw] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.production-form-preview-number[b-o2qgxmmrjw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 0 4px;
    border-radius: 50%;
    background: var(--neutral-foreground-3, #6b7280);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex: 0 0 auto;
}

.production-form-preview-name[b-o2qgxmmrjw] {
    font-weight: 600;
}

.production-form-preview-grid[b-o2qgxmmrjw] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
/* _content/PSMS.Web/Components/Pages/PrintingService/Settings/SectionsFieldsStep.razor.rz.scp.css */
/*
 * FluentTabs renders its tab-panel inside Shadow DOM, which does not reliably pass a
 * flex-resolved height from the light DOM into its internal panel wrapper, so we can't rely on
 * "height: 100%" cascading down from FluentTabs. Anchoring max-height directly to 100vh
 * sidesteps that. Deliberately max-height (not height): a panel with few items should size to
 * its content, not be forced to a fixed tall box — forcing every panel to always be a full-height
 * scroll container (even near-empty ones) is what broke drag targeting last time.
 *
 * --psms-header-offset approximates everything above these panels: topbar + admin-content
 * padding + PageHeader (title/badge/description/breadcrumb) + the FluentTabs header row + gaps.
 * It's a tuned estimate, not exact — nudge it if a panel clips before reaching the viewport edge.
 */
.builder-layout[b-ecyb1o7y7a] {
    display: grid;
    /* minmax(320px, 1fr) — not minmax(0, 1fr) — is the actual fix for the preview column
       collapsing to near-0 width and wrapping its text one word per line: with the first two
       columns fixed at 230px + 460px, a browser window that isn't wide enough for all three just
       squeezes this last column down to whatever's left, with no floor to stop it. This was
       misdiagnosed once already as a header-CSS problem (min-width:0/ellipsis on the header,
       since reverted) — that CSS never caused or fixed this; the column width did.
       overflow-x: auto is the fallback once even the 320px floor doesn't fit — the whole layout
       scrolls horizontally rather than this column collapsing again. */
    grid-template-columns: 230px 460px minmax(320px, 1fr);
    gap: 16px;
    width: 100%;
    align-items: start;
    overflow-x: auto;
}

[b-ecyb1o7y7a] .builder-panel {
    --psms-header-offset: 218px;

    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    max-height: calc(100vh - var(--topbar-height, 52px) - var(--psms-header-offset));
    overflow: hidden;
}

.builder-panel-header[b-ecyb1o7y7a] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px 8px;
    flex: 0 0 auto;
}

/* Without a floor here, the title block's default min-width:auto lets it shrink all the way
   down to its longest word (e.g. "production") whenever the row gets tight, collapsing the
   heading/description into an unreadable one-word-per-line column while the action button(s)
   get squeezed up against it instead of staying pinned to the right edge. Giving it a real
   min-width keeps the text on sane lines; flex-wrap above lets the actions drop to their own
   (still right-aligned, via margin-left:auto on the action element) row if there's truly not
   enough width for both, instead of crushing the title. */
.builder-panel-header-title[b-ecyb1o7y7a] {
    flex: 1 1 160px;
    min-width: 160px;
}

.builder-panel-header h2[b-ecyb1o7y7a] {
    margin: 0;
    font-size: 15px;
}

.builder-panel-header p[b-ecyb1o7y7a] {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--neutral-foreground-3, #6b7280);
}

[b-ecyb1o7y7a] .builder-category-chips {
    margin-top: 2px;
}

.builder-library-list[b-ecyb1o7y7a] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.builder-library-item[b-ecyb1o7y7a] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--neutral-stroke-divider-rest, #e1e1e1);
    border-radius: 6px;
    cursor: grab;
}

.builder-library-item:hover[b-ecyb1o7y7a] {
    background: var(--neutral-fill-2-rest, #fafafa);
}

[b-ecyb1o7y7a] .drag-handle {
    color: var(--neutral-foreground-3, #9ca3af);
    flex: 0 0 auto;
}

.builder-library-item-name[b-ecyb1o7y7a] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: 13px;
}

[b-ecyb1o7y7a] .builder-library-item-badge {
    flex: 0 0 auto;
}

.builder-library-empty[b-ecyb1o7y7a],
.builder-section-empty[b-ecyb1o7y7a] {
    padding: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--neutral-foreground-3, #6b7280);
    border: 1px dashed var(--neutral-stroke-divider-rest, #e1e1e1);
    border-radius: 6px;
}

.builder-panel-footer[b-ecyb1o7y7a] {
    font-size: 12px;
    color: var(--neutral-foreground-3, #6b7280);
    flex: 0 0 auto;
}

.builder-sections-list[b-ecyb1o7y7a] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

[b-ecyb1o7y7a] .builder-sections-drag-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.builder-section[b-ecyb1o7y7a] {
    border: 1px solid var(--neutral-stroke-divider-rest, #e1e1e1);
    border-radius: 8px;
    overflow: hidden;
}

.builder-section-header[b-ecyb1o7y7a] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--neutral-fill-2-rest, #fafafa);
}

.builder-section-number[b-ecyb1o7y7a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 0 4px;
    border-radius: 50%;
    background: var(--neutral-foreground-3, #6b7280);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex: 0 0 auto;
}

.builder-section-name[b-ecyb1o7y7a] {
    font-weight: 600;
}

.builder-section-body[b-ecyb1o7y7a] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
}

[b-ecyb1o7y7a] .builder-field-row-wrap {
    display: block;
}

[b-ecyb1o7y7a] .builder-section-wrap {
    display: block;
}

.builder-section-drop-target[b-ecyb1o7y7a] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
    padding: 8px;
    border: 1px dashed var(--neutral-stroke-divider-rest, #e1e1e1);
    border-radius: 6px;
    font-size: 12px;
    color: var(--neutral-foreground-3, #6b7280);
}

.builder-section-drop-target:hover[b-ecyb1o7y7a] {
    border-color: var(--neutral-foreground-3, #6b7280);
    color: var(--neutral-foreground-3, #6b7280);
}

.builder-field-row[b-ecyb1o7y7a] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
}

.builder-field-row:hover[b-ecyb1o7y7a] {
    background: var(--neutral-fill-2-rest, #fafafa);
}

.builder-field-name[b-ecyb1o7y7a] {
    font-weight: 600;
    font-size: 13px;
}

.builder-lookup-hint[b-ecyb1o7y7a] {
    font-size: 12px;
    color: var(--neutral-foreground-3, #6b7280);
    align-self: center;
}

.builder-field-settings[b-ecyb1o7y7a] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
    padding: 8px 8px 12px 32px;
}

.builder-preview-viewport[b-ecyb1o7y7a] {
    display: flex;
    flex-direction: column;
    /* No gap here: ProductionFormPreview's own .production-form-preview-section already carries
       margin-bottom for section spacing (shared with the Summary step preview) — a flex gap on
       top of that margin was stacking, doubling the visual space between sections. */
    margin: 0 auto;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    transition: max-width 0.2s ease;
}

.builder-preview-desktop[b-ecyb1o7y7a] {
    max-width: 100%;
}

.builder-preview-tablet[b-ecyb1o7y7a] {
    max-width: 540px;
}

.builder-preview-mobile[b-ecyb1o7y7a] {
    max-width: 320px;
}

/* Section/grid rendering itself lives in ProductionFormPreview's own scoped CSS — ::deep here
   only to reach across that component boundary for the mobile-width column override. */
.builder-preview-mobile[b-ecyb1o7y7a]  .production-form-preview-grid {
    grid-template-columns: minmax(0, 1fr);
}

/* _content/PSMS.Web/Components/Pages/PrintingService/Settings/SummaryStep.razor.rz.scp.css */
.summary-layout[b-zo2duk7h0u] {
    display: grid;
    /* Fixed floors + overflow-x fallback, not minmax(0, Nfr) — see SectionsFieldsStep.razor.css's
       .builder-layout comment for why: without a floor, a narrow window squeezes a column down
       to near-0 and its text collapses into an unreadable one-word-per-line column instead of the
       whole layout just scrolling horizontally. */
    grid-template-columns: minmax(280px, 3fr) minmax(360px, 5fr) minmax(260px, 4fr);
    gap: 16px;
    width: 100%;
    align-items: start;
    overflow-x: auto;
}

.summary-side-column[b-zo2duk7h0u] {
    min-width: 0;
}

[b-zo2duk7h0u] .summary-preview-panel,
[b-zo2duk7h0u] .summary-tester-panel {
    position: sticky;
    top: 16px;
}

[b-zo2duk7h0u] .summary-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}

[b-zo2duk7h0u] .summary-panel p {
    margin: 0 0 4px;
    font-size: 12px;
    color: var(--neutral-foreground-3, #6b7280);
}

.summary-row[b-zo2duk7h0u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}

.summary-row > span:first-child[b-zo2duk7h0u] {
    color: var(--neutral-foreground-3, #6b7280);
}

.summary-row-strong[b-zo2duk7h0u] {
    font-weight: 700;
}

.summary-section-row[b-zo2duk7h0u] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    padding-left: 8px;
}

.summary-section-number[b-zo2duk7h0u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--neutral-foreground-3, #6b7280);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    flex: 0 0 auto;
}

.summary-section-name[b-zo2duk7h0u] {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 13px;
}

.summary-empty[b-zo2duk7h0u] {
    padding: 12px;
    text-align: center;
    font-size: 12px;
    color: var(--neutral-foreground-3, #6b7280);
}

.summary-pricing-row[b-zo2duk7h0u] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.summary-pricing-name[b-zo2duk7h0u] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.summary-tester-multiselect[b-zo2duk7h0u] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.summary-tester-multiselect-label[b-zo2duk7h0u] {
    font-size: 13px;
    font-weight: 600;
}

.summary-estimated-total[b-zo2duk7h0u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
}

.summary-estimated-total strong[b-zo2duk7h0u] {
    color: var(--accent-brand, #6366f1);
    font-size: 20px;
}

/* _content/PSMS.Web/Components/Pages/Production/ProductionQueue/ProductionQueue.razor.rz.scp.css */
.production-queue-summary-grid[b-7ikxjfjorv] { width: 100%; }
.production-queue-summary-grid fluent-grid-item[b-7ikxjfjorv] {
    display: flex;
}
[b-7ikxjfjorv] .production-queue-summary-grid .basic-value-card {
    width: 100%;
    height: 100%;
}

.production-queue-grid-card[b-7ikxjfjorv] { overflow: hidden; }
[b-7ikxjfjorv] .production-queue-grid-card fluent-data-grid { width: 100%; }
.production-queue-grid-card .grid-footer-text[b-7ikxjfjorv] {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    color: var(--neutral-foreground-rest);
}

.production-queue-item-cell[b-7ikxjfjorv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.production-queue-item-qty[b-7ikxjfjorv] {
    font-size: 12px;
    color: var(--neutral-foreground-3, #6b7280);
}

.production-queue-progress-cell[b-7ikxjfjorv] {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-7ikxjfjorv] .production-queue-progress-cell fluent-progress {
    flex: 1 1 auto;
    min-width: 60px;
}

.production-queue-due-cell[b-7ikxjfjorv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.production-queue-due-cell.is-delayed[b-7ikxjfjorv] {
    color: var(--accent-fill-rest, #b91c1c);
    font-weight: 600;
}
/* _content/PSMS.Web/Components/Pages/Production/ProductionSettings.razor.rz.scp.css */
/* Mirrors Settings.razor.css / InventorySettings.razor.css — shared by every tab in Tabs/
   (MachineTab, ProductionAreaTab), so every selector needs ::deep: scoped css only auto-applies
   to plain HTML written directly in this file's own markup otherwise. Kept as a separate copy
   (not shared) because scoped CSS only applies within its own component's render tree —
   Settings.razor.css's/InventorySettings.razor.css's rules don't reach here. */

[b-ipaqatn6wd] .lookup-grid-card {
    display: flex;
    flex-direction: column;
    overflow: visible;
}

/* Matches the FluentDataGrid docs' AutoItemsPerPage pattern: a fixed (viewport-relative, not
   flex/percentage) height on the grid's immediate wrapper, with overflow-y: hidden so the
   grid has one stable box to measure and clip rows-per-page against. A height that moves with
   row count (flex/%) feeds back into AutoItemsPerPage's calculation — a short last page shrinks
   the box, which locks in a smaller computed page size that doesn't recover on later pages. */
[b-ipaqatn6wd] .lookup-grid-container {
    height: calc(100dvh - 380px) !important;
    min-height: 8rem;
    overflow-x: auto;
    overflow-y: hidden;
}

[b-ipaqatn6wd] .lookup-grid-container fluent-data-grid {
    display: block;
    width: 100%;
}

/* DisplayMode.Table renders a real table with the browser's default table-layout: auto,
   which redistributes any leftover width across ALL columns proportionally — ignoring a
   narrow column's explicit Width (e.g. Actions="48px" was rendering as wide as Status).
   table-layout: fixed makes the browser actually honor each column's declared width. */
[b-ipaqatn6wd] .lookup-grid-container table {
    table-layout: fixed;
    width: 100%;
}

[b-ipaqatn6wd] .lookup-grid-container td,
[b-ipaqatn6wd] .lookup-grid-container th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* _content/PSMS.Web/Components/Pages/Reports/ReportViewer.razor.rz.scp.css */
.report-viewer-page[b-xkk3btfi09] {
    display: grid;
    width: calc(100% + 48px);
    height: calc(100dvh - 68px);
    margin: -24px;
    grid-template-columns: 250px minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
    background: #f2f4f7;
}

.report-options[b-xkk3btfi09] {
    display: flex;
    position: relative;
    z-index: 10;
    min-width: 0;
    box-sizing: border-box;
    padding: 20px 16px;
    flex-direction: column;
    gap: 10px;
    border-right: 1px solid #eaecf0;
    background: #fff;
    overflow: visible;
}

.paper-size-select[b-xkk3btfi09] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.options-heading[b-xkk3btfi09] {
    display: flex;
    margin-bottom: 10px;
    flex-direction: column;
    gap: 4px;
}

.options-heading span[b-xkk3btfi09] {
    color: #667085;
    font-size: 12px;
}

.sample-heading[b-xkk3btfi09] {
    margin-top: 8px;
    color: #667085;
    font-size: 12px;
}

.report-viewer[b-xkk3btfi09] {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
}

.report-viewer-toolbar[b-xkk3btfi09] {
    display: flex;
    min-height: 54px;
    padding: 0 24px;
    align-items: center;
    justify-content: space-between;
    color: #344054;
}

.viewer-toolbar-actions[b-xkk3btfi09] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.report-pagination[b-xkk3btfi09] {
    display: flex;
    align-items: center;
    gap: 18px;
}

.report-pagination span[b-xkk3btfi09] {
    min-width: 90px;
    color: #344054;
    font-size: 12px;
    text-align: center;
}

.paper-scroll-area[b-xkk3btfi09] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 24px;
}

.report-viewer-toolbar span[b-xkk3btfi09] {
    color: #667085;
    font-size: 12px;
}

.a4-paper[b-xkk3btfi09] {
    width: 210mm;
    min-height: 297mm;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 4px 18px rgb(16 24 40 / 12%);
}

.report-paper[b-xkk3btfi09] {
    --page-height: 1122.52px;
    --page-gap: 16px;
    margin: 0 auto;
    background: repeating-linear-gradient(
        to bottom,
        #fff 0,
        #fff calc(var(--page-height) - var(--page-gap)),
        #e5e7eb calc(var(--page-height) - var(--page-gap)),
        #e5e7eb var(--page-height)
    );
    box-shadow: 0 4px 18px rgb(16 24 40 / 12%);
    box-sizing: border-box;
}

.report-paper:has([data-report-template])[b-xkk3btfi09] {
    background-color: #e5e7eb;
    background-image: repeating-linear-gradient(
        to bottom,
        #fff 0,
        #fff calc(var(--page-height) - var(--page-gap)),
        #e5e7eb calc(var(--page-height) - var(--page-gap)),
        #e5e7eb var(--page-height)
    );
}

[b-xkk3btfi09] .report-paper .print-template {
    background: transparent;
}

.paper-a4[b-xkk3btfi09] {
    --page-height: 1122.52px;
    width: 210mm;
    min-height: 297mm;
    page: a4;
}

.paper-letter[b-xkk3btfi09] {
    --page-height: 1058.27px;
    width: 216mm;
    min-height: 279mm;
    page: letter;
}

.paper-legal[b-xkk3btfi09] {
    --page-height: 1348.35px;
    width: 216mm;
    min-height: 356mm;
    page: legal;
}

@page a4 {
    size: A4 portrait;
}

@page letter {
    size: Letter portrait;
}

@page legal {
    size: Legal portrait;
}

@media (max-width: 760px) {
    .report-viewer-page[b-xkk3btfi09] {
        width: calc(100% + 24px);
        margin: -12px;
        grid-template-columns: 210px minmax(0, 1fr);
    }

    .paper-scroll-area[b-xkk3btfi09] {
        padding: 12px;
    }
}

@media print {
    .report-options[b-xkk3btfi09] {
        display: none;
    }

    .report-viewer-page[b-xkk3btfi09] {
        display: block;
        background: #fff;
    }

    .report-viewer-toolbar[b-xkk3btfi09] {
        display: none;
    }

    .report-pagination[b-xkk3btfi09] {
        display: none;
    }

    .a4-paper[b-xkk3btfi09] {
        margin: 0;
        box-shadow: none;
    }
}
/* _content/PSMS.Web/Components/Pages/Reports/Samples/InvoicePreview.razor.rz.scp.css */
.print-template[b-qevorcxk3r] {
    display: flex;
    min-height: 100%;
    padding: 24mm 18mm;
    flex-direction: column;
    gap: 24px;
    color: #101828;
    font-size: 12px;
}

.template-header[b-qevorcxk3r],
.template-meta[b-qevorcxk3r],
.template-total[b-qevorcxk3r] {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.template-header[b-qevorcxk3r] {
    align-items: center;
}

.template-header img[b-qevorcxk3r] {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
}

.template-header div[b-qevorcxk3r],
.template-meta div[b-qevorcxk3r] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.template-header h1[b-qevorcxk3r] {
    margin: 0 0 4px;
    font-size: 24px;
}

.template-header span[b-qevorcxk3r],
.template-meta span[b-qevorcxk3r] {
    color: #667085;
}

.template-meta[b-qevorcxk3r] {
    padding: 14px 0;
    border-block: 1px solid #d0d5dd;
}

.template-table[b-qevorcxk3r] {
    width: 100%;
    border-collapse: collapse;
}

.template-table th[b-qevorcxk3r],
.template-table td[b-qevorcxk3r] {
    padding: 10px 8px;
    border-bottom: 1px solid #eaecf0;
    text-align: left;
}

.template-table th[b-qevorcxk3r] {
    background: #f9fafb;
}

.template-table .amount[b-qevorcxk3r] {
    text-align: right;
}

.template-total[b-qevorcxk3r] {
    justify-content: flex-end;
    padding-top: 8px;
    font-size: 16px;
}

.template-notes[b-qevorcxk3r] {
    padding-top: 18px;
    border-top: 1px solid #d0d5dd;
    color: #667085;
}
/* _content/PSMS.Web/Components/Pages/Reports/Samples/JobOrderPreview.razor.rz.scp.css */
.print-template[b-3p6jv0cu0v] {
    display: flex;
    min-height: 100%;
    padding: 24mm 18mm;
    flex-direction: column;
    gap: 24px;
    color: #101828;
    font-size: 12px;
}

.template-header[b-3p6jv0cu0v],
.template-meta[b-3p6jv0cu0v],
.template-total[b-3p6jv0cu0v] {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.template-header[b-3p6jv0cu0v] {
    align-items: center;
}

.template-header img[b-3p6jv0cu0v] {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
}

.template-header div[b-3p6jv0cu0v],
.template-meta div[b-3p6jv0cu0v] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.template-header h1[b-3p6jv0cu0v] {
    margin: 0 0 4px;
    font-size: 24px;
}

.template-header span[b-3p6jv0cu0v],
.template-meta span[b-3p6jv0cu0v] {
    color: #667085;
}

.template-meta[b-3p6jv0cu0v] {
    padding: 14px 0;
    border-block: 1px solid #d0d5dd;
}

.template-table[b-3p6jv0cu0v] {
    width: 100%;
    border-collapse: collapse;
}

.template-table th[b-3p6jv0cu0v],
.template-table td[b-3p6jv0cu0v] {
    padding: 10px 8px;
    border-bottom: 1px solid #eaecf0;
    text-align: left;
}

.template-table th[b-3p6jv0cu0v] {
    background: #f9fafb;
}

.template-table .amount[b-3p6jv0cu0v] {
    text-align: right;
}

.template-total[b-3p6jv0cu0v] {
    justify-content: flex-end;
    padding-top: 8px;
    font-size: 16px;
}

.template-notes[b-3p6jv0cu0v] {
    padding-top: 18px;
    border-top: 1px solid #d0d5dd;
    color: #667085;
}
/* _content/PSMS.Web/Components/Pages/Role/Dialogs/RoleDialog.razor.rz.scp.css */
.permission-row[b-laenccdvi6] {
    width: 100%;
    padding: 6px 0;
}
/* _content/PSMS.Web/Components/Pages/Settings/Settings.razor.rz.scp.css */
/* Shared by every tab in Tabs/ — targets markup rendered inside those child components
   (PaymentModeTab, CurrencyTab, etc.), so every selector needs ::deep: scoped css only
   auto-applies to plain HTML written directly in this file's own markup otherwise. */

[b-xw8wvvs1kb] .lookup-grid-card {
    display: flex;
    flex-direction: column;
    overflow: visible;
}

/* Matches the FluentDataGrid docs' AutoItemsPerPage pattern: a fixed (viewport-relative, not
   flex/percentage) height on the grid's immediate wrapper, with overflow-y: hidden so the
   grid has one stable box to measure and clip rows-per-page against. A height that moves with
   row count (flex/%) feeds back into AutoItemsPerPage's calculation — a short last page shrinks
   the box, which locks in a smaller computed page size that doesn't recover on later pages. */
[b-xw8wvvs1kb] .lookup-grid-container {
    height: calc(100dvh - 380px) !important;
    min-height: 8rem;
    overflow-x: auto;
    overflow-y: hidden;
}

[b-xw8wvvs1kb] .lookup-grid-container fluent-data-grid {
    display: block;
    width: 100%;
}

/* DisplayMode.Table renders a real table with the browser's default table-layout: auto,
   which redistributes any leftover width across ALL columns proportionally — ignoring a
   narrow column's explicit Width (e.g. Actions="48px" was rendering as wide as Status).
   table-layout: fixed makes the browser actually honor each column's declared width. */
[b-xw8wvvs1kb] .lookup-grid-container table {
    table-layout: fixed;
    width: 100%;
}

[b-xw8wvvs1kb] .lookup-grid-container td,
[b-xw8wvvs1kb] .lookup-grid-container th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* _content/PSMS.Web/Components/Pages/ThemeEditor/ThemeEditor.razor.rz.scp.css */
.theme-editor-layout[b-n8jaeeivbr] {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 12px;
    align-items: start;
}

@media (max-width: 900px) {
    .theme-editor-layout[b-n8jaeeivbr] {
        grid-template-columns: 1fr;
    }
}

[b-n8jaeeivbr] .theme-editor-panel {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[b-n8jaeeivbr] .theme-editor-sample-card {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.theme-editor-swatch[b-n8jaeeivbr] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    box-shadow: 0 0 0 1px var(--neutral-stroke-rest, rgba(0, 0, 0, 0.15)) inset;
}

.theme-editor-swatch.is-selected[b-n8jaeeivbr] {
    border-color: var(--neutral-foreground-rest, #242424);
}
/* _content/PSMS.Web/Components/Shared/KpiCards/AlertCard.razor.rz.scp.css */
.alert-card[b-t937e8oiyb] {
    min-height: 220px;
    height: 100%;
    padding: 16px;
    border-radius: 12px;
    box-sizing: border-box;
    background-color: var(--colorNeutralBackground1, #ffffff);
}

.alert-card-heading[b-t937e8oiyb] {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--colorNeutralStroke2);
    color: var(--colorBrandForeground1);
}

.alert-card-icon[b-t937e8oiyb] {
    display: grid;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    place-items: center;
    border-radius: 10px;
    background: #fdebec;
    color: #c50f1f;
}
/* _content/PSMS.Web/Components/Shared/KpiCards/BasicValueCard.razor.rz.scp.css */
.basic-value-card[b-969ep4ige3] {
    min-height: 180px;
    height: 100%;
    padding: 16px;
    border-radius: 12px;
    background-color: #ffffff;
    box-sizing: border-box;
}

.basic-value-card-heading[b-969ep4ige3] {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--colorNeutralStroke2);
    color: var(--colorBrandForeground1);
}

.basic-value-card-icon[b-969ep4ige3] {
    display: grid;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    place-items: center;
    border-radius: 10px;
    /* background/color are set inline per-card via the Accent parameter */
}

.basic-value-card-value[b-969ep4ige3] {
    line-height: 1.1;
    white-space: nowrap;
}
/* _content/PSMS.Web/Components/Shared/KpiCards/ComparisonCard.razor.rz.scp.css */
.comparison-card[b-9a8z6cdxqt] {
    min-height: 240px;
    height: 100%;
    padding: 16px;
    border-radius: 12px;
    box-sizing: border-box;
    background-color: var(--colorNeutralBackground1, #ffffff);
}

.comparison-card-heading[b-9a8z6cdxqt] {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--colorNeutralStroke2);
    color: var(--colorBrandForeground1);
}

.comparison-card-icon[b-9a8z6cdxqt] {
    display: grid;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    place-items: center;
    border-radius: 10px;
    background: #f1efff;
    color: #5b3fbf;
}

.comparison-card-content[b-9a8z6cdxqt] {
    min-width: 0;
    flex: 1;
}

.comparison-card-row[b-9a8z6cdxqt] {
    width: 100%;
}

.comparison-card-divider[b-9a8z6cdxqt] {
    height: 1px;
    margin-top: 2px;
    background: var(--colorNeutralStroke2);
}
/* _content/PSMS.Web/Components/Shared/KpiCards/MiniChartCard.razor.rz.scp.css */
.mini-chart-card[b-somlk2v8ju] {
    min-height: 280px;
    height: 100%;
    padding: 16px;
    border-radius: 12px;
    box-sizing: border-box;
    background-color: var(--colorNeutralBackground1, #ffffff);
}

.mini-chart-card-heading[b-somlk2v8ju] {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--colorNeutralStroke2);
    color: var(--colorBrandForeground1);
}

.mini-chart-card-icon[b-somlk2v8ju] {
    display: grid;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    place-items: center;
    border-radius: 10px;
    background: #eaf7f0;
    color: #15935f;
}

.mini-chart-card-chart[b-somlk2v8ju] {
    display: block;
    width: 100%;
    height: 100px;
    object-fit: contain;
    object-position: center;
}
/* _content/PSMS.Web/Components/Shared/KpiCards/StatusCountCard.razor.rz.scp.css */
.status-count-card[b-x2pfhdykl9] {
    min-height: 220px;
    height: 100%;
    padding: 16px;
    border-radius: 12px;
    box-sizing: border-box;
    background-color: var(--colorNeutralBackground1, #ffffff);
}

.status-count-card-heading[b-x2pfhdykl9] {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--colorNeutralStroke2);
    color: var(--colorBrandForeground1);
}

.status-count-card-icon[b-x2pfhdykl9] {
    display: grid;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    place-items: center;
    border-radius: 10px;
    background: #fff5e9;
    color: #e56b00;
}

.status-count-card-items[b-x2pfhdykl9] {
    min-width: 0;
    flex: 1;
}

.status-count-card-item[b-x2pfhdykl9] {
    width: 100%;
}
/* _content/PSMS.Web/Components/Shared/KpiCards/TargetProgressCard.razor.rz.scp.css */
.target-progress-card[b-q9fvs9vlid] {
    min-height: 220px;
    height: 100%;
    padding: 16px;
    border-radius: 12px;
    box-sizing: border-box;
    background-color: var(--colorNeutralBackground1, #ffffff);
}

.target-progress-card-heading[b-q9fvs9vlid] {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--colorNeutralStroke2);
    color: var(--colorBrandForeground1);
}

.target-progress-card-icon[b-q9fvs9vlid] {
    display: grid;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    place-items: center;
    border-radius: 10px;
    background: #eaf3ff;
    color: #1675ce;
}

.target-progress-card-content[b-q9fvs9vlid] { min-width: 0; }
.target-progress-card-value[b-q9fvs9vlid] { line-height: 1.1; white-space: nowrap; }
.target-progress-card-target[b-q9fvs9vlid] { font-size: .7em; font-weight: 400; }
.target-progress-card-percent[b-q9fvs9vlid] { color: #1675ce; font-weight: 600; }
.target-progress-card-completed[b-q9fvs9vlid] { color: var(--colorNeutralForeground1); font-weight: 400; }
.target-progress-bar[b-q9fvs9vlid] { --progress-bar-height: 8px; }
/* _content/PSMS.Web/Components/Shared/KpiCards/TrendCard.razor.rz.scp.css */
.trend-card[b-3glfui3nse] {
    min-height: 190px;
    height: 100%;
    padding: 16px;
    border-radius: 12px;
    box-sizing: border-box;
    background-color: var(--colorNeutralBackground1, #ffffff);
}

.trend-card-heading[b-3glfui3nse] {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--colorNeutralStroke2);
    color: var(--colorBrandForeground1);
}

.trend-card-icon[b-3glfui3nse] {
    display: grid;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    place-items: center;
    border-radius: 10px;
    background: #eaf7f0;
    color: #15935f;
}

.trend-card-icon.trend-down[b-3glfui3nse] {
    background: #fdebec;
    color: #c50f1f;
}

.trend-card-value[b-3glfui3nse] {
    line-height: 1.1;
}

.trend-card-trend[b-3glfui3nse] {
    color: #15935f;
}

.trend-card-trend.trend-up[b-3glfui3nse] {
    color: #15935f;
}

.trend-card-trend.trend-down[b-3glfui3nse] {
    color: #c50f1f;
}
/* _content/PSMS.Web/Components/Shared/ProductionField/Fields/FileDropZoneField/FileDropZoneField.razor.rz.scp.css */
/* FluentStack renders its own wrapping div outside this component's CSS scope, so the Class
   passed into it needs ::deep — see CLAUDE.md's Razor CSS Isolation note. Light-blue background
   matches the existing #eaf3ff convention used by TargetProgressCard.razor.css. */
[b-ohte364y07] .file-row {
    background: #eaf3ff;
    border-radius: 6px;
    padding: 6px 8px;
}
/* _content/PSMS.Web/Components/Shared/ProductionField/Fields/MultiFileField/MultiFileField.razor.rz.scp.css */
/* FluentStack renders its own wrapping div outside this component's CSS scope, so the Class
   passed into it needs ::deep — see CLAUDE.md's Razor CSS Isolation note. Light-blue background
   matches the existing #eaf3ff convention used by TargetProgressCard.razor.css. */
[b-m3u9reiind] .file-row {
    background: #eaf3ff;
    border-radius: 6px;
    padding: 6px 8px;
}
/* _content/PSMS.Web/Components/Shared/ProductionField/ProductionFieldWrap.razor.rz.scp.css */
.production-field[b-1ooq8b5ut9] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.production-field-help[b-1ooq8b5ut9] {
    margin-top: 2px;
    font-size: 12px;
    color: var(--neutral-foreground-3, #6b7280);
}
/* _content/PSMS.Web/Components/Shared/ProductionField/ProductionHeaderFields.razor.rz.scp.css */
.production-header-fields-grid[b-tkujctuqkp] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
/* _content/PSMS.Web/Components/Shared/ProductionField/ProductionTrackingFields.razor.rz.scp.css */
.production-tracking-fields-grid[b-etxvuzembb] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
/* _content/PSMS.Web/Components/Shared/StatusBadge.razor.rz.scp.css */
.status-badge[b-ud7ft8gory] {
    display: inline-flex;
    align-items: center;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    background: #eef1f4;
    color: #4b5563;
}

.status-badge.for-approval[b-ud7ft8gory] { background: #fff4e5; color: #c76c00; }
.status-badge.for-production[b-ud7ft8gory] { background: #fff4e5; color: #c76c00; }
.status-badge.in-production[b-ud7ft8gory] { background: #e8f1fc; color: #1675ce; }
.status-badge.ready-for-release[b-ud7ft8gory] { background: #e6f4ea; color: #15935f; }
.status-badge.completed[b-ud7ft8gory] { background: #e6f4ea; color: #15935f; }
.status-badge.on-hold[b-ud7ft8gory] { background: #eef1f4; color: #4b5563; }
.status-badge.cancelled[b-ud7ft8gory] { background: #fdeceb; color: #c50f1f; }