@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.bundle.scp.css';
@import '_content/PSMS.UI.Shared/PSMS.UI.Shared.o7w8vq92ro.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:1367px so it
   never fights the 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 at tablet width and below only is-mobile-open should have any visual effect. */
@media (min-width: 1367px) {
    .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);
    flex-wrap: wrap;
}

.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;
}

/* CPU/RAM stat groups (developer-only, see AdminSidebar.razor's markup comment) — kept compact
   since the whole footer only has ~228px to work with (264px rail minus padding), unlike the wider
   dashboard-footer mockup this was modeled on; flex-wrap above lets it fall to a second line rather
   than clipping if it still doesn't fit. */
.footer-divider[b-8dg5mrfnsx] {
    width: 1px;
    align-self: stretch;
    flex: 0 0 auto;
    background: var(--colorNeutralStroke2, #ededed);
}

.footer-stat[b-8dg5mrfnsx] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

[b-8dg5mrfnsx] .footer-stat > svg {
    flex: 0 0 auto;
    color: var(--colorNeutralForeground3, #707070);
}

.footer-stat-copy[b-8dg5mrfnsx] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.footer-stat-copy span[b-8dg5mrfnsx] {
    color: var(--colorNeutralForeground3, #707070);
    font-size: 10px;
    line-height: 14px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

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

/* Same desktop-only scoping as the block above — these style the narrow icon-only rail, which
   only exists above the tablet breakpoint. */
@media (min-width: 1367px) {
    .is-collapsed .brand-copy[b-8dg5mrfnsx],
    .is-collapsed .footer-copy[b-8dg5mrfnsx],
    .is-collapsed .footer-divider[b-8dg5mrfnsx],
    .is-collapsed .footer-stat[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;
}

/* "My Tasks" count badge — pushed to the right edge of the row (desktop + mobile).
   `.fluent-navitem` is already a full-width flex row; `.nav-label-row` fills the space
   after the icon so the badge's `margin-left:auto` lands it at the far right. */
.nav-label-row[b-8dg5mrfnsx] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-count[b-8dg5mrfnsx] {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--colorPaletteRedBackground3, #d13438);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

/* Desktop keeps sidebar-scroll's inline-expanded FluentNav; tablet + phone swap 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: 1366px) {
    /* Tablet + phone: the sidebar is a floating slide-in drawer, not a pinned rail. 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:1367px 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;
    }

    .sidebar-footer[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;
    }
}

/* Small neutral tag after a nav label (e.g. Sales > Payments "Job Order"), so a generic name says
   what it covers. Neutral ink, not a status or count colour. */
.nav-tag[b-8dg5mrfnsx] {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0 6px;
    height: 16px;
    line-height: 16px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--neutral-fill-3-rest, #eef0f3);
    color: var(--neutral-foreground-2, #4b5563);
}
/* _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;
    flex-shrink: 0;
    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 list styling lives in TopbarDrawer.razor.css now — those
   components render inside <TopbarDrawer> (a child component), so AdminTopBar's own scoped
   ::deep rules never reached them. TopbarDrawer's .topbar-drawer-body is the correct scope
   anchor. */

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

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

@media (max-width: 1366px) {
    /* Profile stays reachable 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.
       install-pwa-label is the span in InstallPwaButton.razor, matched with ::deep
       since that is a separate child component. */
    [b-hs1d18nm1x] .install-pwa-label {
        display: none;
    }
}

@media (max-width: 440px) {
    .title-block strong[b-hs1d18nm1x] {
        max-width: 150px;
    }
}
/* _content/PSMS.Web/Components/Layout/GlobalSearch.razor.rz.scp.css */
.global-search[b-bvsvc46rl3] {
    position: relative;
    flex: 0 1 360px;
    min-width: 180px;
    margin-left: 16px;
}

.global-search-box[b-bvsvc46rl3] {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding-inline: 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--psms-on-brand, #ffffff);
}

.global-search-box:focus-within[b-bvsvc46rl3] {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
}

[b-bvsvc46rl3] .global-search-icon {
    fill: currentColor;
    flex-shrink: 0;
}

.global-search-box input[b-bvsvc46rl3] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 13px;
}

.global-search-box input[b-bvsvc46rl3]::placeholder {
    color: rgba(255, 255, 255, 0.75);
}

.global-search-results[b-bvsvc46rl3] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: -100px; /* popup is 100px wider than the search box */
    z-index: 1000;
    padding: 4px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e1e4e8;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    max-height: 360px;
    overflow-y: auto;
}

.global-search-item[b-bvsvc46rl3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #242424;
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.global-search-item.is-active[b-bvsvc46rl3] {
    background: #eaf3ff;
}

.global-search-category[b-bvsvc46rl3] {
    font-size: 11px;
    color: #8a93a3;
    white-space: nowrap;
}

.global-search-empty[b-bvsvc46rl3] {
    padding: 10px;
    font-size: 13px;
    color: #8a93a3;
}

@media (max-width: 768px) {
    .global-search[b-bvsvc46rl3] {
        display: none;
    }
}

.global-search-heading[b-bvsvc46rl3] {
    padding: 6px 10px 4px;
    font-size: 11px;
    font-weight: 600;
    color: #8a93a3;
    text-transform: uppercase;
    letter-spacing: .04em;
}
/* _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;
    /* Stops scroll-chaining to the document so the browser's own native pull-to-refresh does not
       fire alongside the custom one (Components/Shared/PullToRefresh.razor, wrapping @Body here). */
    overscroll-behavior-y: contain;
    padding: 12px 24px;
}

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

/* Page-owned docked panel (DockPanelService): a full-height flex
   sibling of .admin-content with a plain border-left, no shadow, that shrinks the content
   rather than floating over it. Collapses to a fixed overlay on narrow screens. */
.app-dock-panel[b-o70qmcem0j] {
    display: flex;
    flex: 0 0 380px;
    flex-direction: column;
    min-width: 0;
    border-left: 1px solid #e5e5e5;
    background: #fff;
}

@media (max-width: 1366px) {
    /* Tablet + phone: content is full-width (the sidebar is a slide-in drawer, not a pinned
       rail), so a docked side panel beside it would crush the content — float it over the
       content like the mobile drawer instead. */
    .app-dock-panel[b-o70qmcem0j] {
        position: fixed;
        top: var(--topbar-height, 52px);
        right: 0;
        bottom: 0;
        z-index: 85;
        flex-basis: min(360px, 100vw);
        box-shadow: -8px 0 24px rgb(0 0 0 / 18%);
    }
}

.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: 1366px) {
    /* Tablet + phone: the sidebar is a slide-in drawer (AdminSidebar.razor.css), not a pinned
       rail, so the workspace reclaims the full width and the tap-to-close backdrop comes into
       play. Gated on sidebar-mobile-open, not sidebar-is-collapsed — that class's meaning is
       the desktop-only rail collapse and has no drawer relationship here.

       Not switching .admin-content to overflow-y:visible / making the document the scroll
       owner here (that used to happen on mobile only). It existed solely so the pull-to-refresh
       gesture could read an accurate scroll position, but it broke mobile scrolling outright —
       every width now uses the same nested-scroll .admin-content pane, no special-casing. */
    .admin-workspace[b-o70qmcem0j],
    .sidebar-is-collapsed .admin-workspace[b-o70qmcem0j] {
        margin-left: 0;
    }

    .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: 10px 20px;
    }
}

@media (max-width: 768px) {
    /* Phone only — MobileBottomNav's fixed strip exists just at this width (its own CSS keeps
       the 768px breakpoint), so only here does .admin-workspace need to physically end above
       it. Padding alone isn't enough: several pages size their own content with raw viewport
       units (calc(100vh - ...), the FluentDataGrid AutoItemsPerPage convention) — vh is
       relative to the viewport, not to .admin-content's padding, so that content otherwise
       renders underneath the nav regardless of padding-bottom. Shrinking the actual height
       here means .admin-content (flex:1 inside this) never has a box reaching into the nav's
       zone. Tablets (769-1366px) have no bottom nav and keep the full 100dvh. */
    .admin-workspace[b-o70qmcem0j] {
        height: calc(100dvh - var(--mobile-bottom-nav-height) - env(safe-area-inset-bottom, 0px));
    }

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

@media (max-width: 480px) {
    .admin-content[b-o70qmcem0j] {
        padding: 6px 12px;
    }
}

/* Terminal mode (Sales Express): the page fills the whole viewport, no admin chrome. */
.terminal-shell[b-o70qmcem0j] {
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: 8px;
    overflow: hidden;
    background: var(--colorNeutralBackground2, #f5f6f8);
}

/* A normal page inside the tutorial player: no chrome, but it scrolls like the admin content area. */
.terminal-shell.embed-shell[b-o70qmcem0j] {
    padding: 16px 20px;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Narrow screens: a stacked terminal scrolls instead of clipping. */
@media (max-width: 1100px) {
    .terminal-shell[b-o70qmcem0j] { overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; }
}
/* _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/NotificationMenu.razor.rz.scp.css */
/* Topbar bell dropdown content. Renders inside TopbarDrawer's .topbar-drawer-body (which owns the
   scroll); this file styles only the filter bar + notification cards. All targets are plain
   elements authored in NotificationMenu.razor, so scoped rules apply without ::deep — except the
   FluentIcon glyph (a child component), which needs the ::deep combinator. */

.notif-panel[b-aneumn8yft] {
    display: flex;
    flex-direction: column;
}

/* Stays pinned to the top of the scrolling drawer body, like the reference. */
.notif-filters[b-aneumn8yft] {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    gap: 8px;
    padding: 12px;
    background: var(--colorNeutralBackground1, #ffffff);
    border-bottom: 1px solid var(--colorNeutralStroke2, #ececec);
}

.notif-filter[b-aneumn8yft] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--colorNeutralStroke2, #e0e0e0);
    border-radius: 999px;
    background: var(--colorNeutralBackground1, #ffffff);
    color: var(--colorNeutralForeground2, #444444);
    font: inherit;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.notif-filter:hover[b-aneumn8yft] {
    background: var(--colorNeutralBackground2, #f5f5f5);
}

.notif-filter.is-active[b-aneumn8yft] {
    border-color: var(--colorBrandStroke1, #cfe2ff);
    background: var(--colorBrandBackground2, #eaf2ff);
    color: var(--colorBrandForeground1, #0f6cbd);
    font-weight: 600;
}

.notif-filter-count[b-aneumn8yft] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--colorBrandForeground1, #0f6cbd);
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
}

.notif-list[b-aneumn8yft] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
}

.notif-item[b-aneumn8yft] {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 12px 22px 12px 12px;
    border: 1px solid var(--colorNeutralStroke2, #ececec);
    border-radius: 10px;
    background: var(--colorNeutralBackground1, #ffffff);
}

.notif-item.is-unread[b-aneumn8yft] {
    background: #f3f8ff;
    border-color: #dbe9fb;
}

.notif-item.is-clickable[b-aneumn8yft] {
    cursor: pointer;
    transition: box-shadow .12s ease, border-color .12s ease;
}

.notif-item.is-clickable:hover[b-aneumn8yft] {
    border-color: var(--colorNeutralStroke1, #d0d0d0);
    box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
}

.notif-icon[b-aneumn8yft] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #eef1f5;
    color: #5f6368;
}

.notif-icon[b-aneumn8yft]  svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.notif-icon.is-order[b-aneumn8yft] { background: #e8f0fe; color: #1a73e8; }
.notif-icon.is-payment[b-aneumn8yft] { background: #e6f4ea; color: #1e8e3e; }
.notif-icon.is-dispatch[b-aneumn8yft] { background: #f1ecfc; color: #7c3aed; }
.notif-icon.is-reminder[b-aneumn8yft] { background: #fef1e6; color: #e8710a; }
.notif-icon.is-stock[b-aneumn8yft] { background: #fef7e0; color: #b06000; }
.notif-icon.is-system[b-aneumn8yft] { background: #e8f0fe; color: #1a73e8; }
.notif-icon.is-invoice[b-aneumn8yft] { background: #e6f4ea; color: #1e8e3e; }
.notif-icon.is-customer[b-aneumn8yft] { background: #e3f2fd; color: #1565c0; }
.notif-icon.is-default[b-aneumn8yft] { background: #eef1f5; color: #5f6368; }

.notif-body[b-aneumn8yft] {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.notif-row[b-aneumn8yft] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.notif-title[b-aneumn8yft] {
    color: var(--colorNeutralForeground1, #1f1f1f);
    font-size: 13px;
    font-weight: 600;
}

.notif-time[b-aneumn8yft] {
    flex: 0 0 auto;
    color: var(--colorNeutralForeground3, #8a8a8a);
    font-size: 11px;
    white-space: nowrap;
}

.notif-message[b-aneumn8yft] {
    margin: 0;
    color: var(--colorNeutralForeground2, #5f6368);
    font-size: 12px;
    line-height: 1.4;
}

.notif-dot[b-aneumn8yft] {
    position: absolute;
    top: 15px;
    right: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--colorBrandForeground1, #1a73e8);
}

.notif-empty[b-aneumn8yft] {
    margin: 0;
    padding: 28px 12px;
    color: var(--colorNeutralForeground3, #8a8a8a);
    font-size: 12px;
    text-align: center;
}
/* _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;
    /* Most pages put the header in a FluentStack with VerticalGap="12", which already spaces it from
       the content. A full 12px margin on top of that doubled the gap to 24px; 4px keeps pages that
       don't use a stack from touching the header while stacked pages get ~16px. */
    margin-bottom: 4px;
    padding: 12px 18px;
    border-radius: 8px;
    /* Decorative background (2026-10-10, from the Job Order Settings mock): white on the left fading
       into a soft brand tint on the right, plus two large circles clipped at the top-right corner.
       Pure CSS on the same box, so padding and height are unchanged. */
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(100deg,
            var(--colorNeutralBackground1, #ffffff) 0%,
            var(--colorNeutralBackground1, #ffffff) 45%,
            color-mix(in srgb, var(--colorBrandBackground, #0f766e) 5%, var(--colorNeutralBackground1, #ffffff)) 100%);
}

.page-header[b-gf7agdoskx]::before,
.page-header[b-gf7agdoskx]::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

/* Big circle hanging off the top-right corner. */
.page-header[b-gf7agdoskx]::before {
    width: 340px;
    height: 340px;
    top: -170px;
    right: -60px;
    background: color-mix(in srgb, var(--colorBrandBackground, #0f766e) 7%, transparent);
}

/* Smaller circle rising from the bottom, overlapping the first. */
.page-header[b-gf7agdoskx]::after {
    width: 300px;
    height: 300px;
    bottom: -230px;
    right: 180px;
    background: color-mix(in srgb, var(--colorBrandBackground, #0f766e) 4%, transparent);
}

.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;
}

/* Back button sits in its own column beside the title + description, so the description lines up
   under the title's first letter instead of under the back arrow. */
.page-title-block[b-gf7agdoskx] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

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

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

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

.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-header[b-gf7agdoskx]::before { width: 200px; height: 200px; top: -110px; right: -50px; }
    .page-header[b-gf7agdoskx]::after { display: none; }

    .page-actions[b-gf7agdoskx] {
        width: 100%;
        flex-wrap: wrap;
    }
}
/* _content/PSMS.Web/Components/Layout/TopbarDrawer.razor.rz.scp.css */
.topbar-drawer-host[b-kl555d6uo3] {
    position: fixed;
    inset: 0;
    /* Above the sidebar (100) and topbar (70), below the global error UI (9999) / install
       banner (10000). See the z-index scan in AdminTopBar.razor.css's neighbours. */
    z-index: 200;
    visibility: hidden;
    pointer-events: none;
}

.topbar-drawer-host.is-open[b-kl555d6uo3] {
    visibility: visible;
}

/* Host stays click-through even when open — only the backdrop and panel take pointer events, so
   the uncovered 52px topbar strip above the backdrop keeps working. */
.topbar-drawer-host.is-open .topbar-drawer-backdrop[b-kl555d6uo3],
.topbar-drawer-host.is-open .topbar-drawer[b-kl555d6uo3] {
    pointer-events: auto;
}

.topbar-drawer-backdrop[b-kl555d6uo3] {
    position: absolute;
    /* Start below the fixed 52px topbar (AdminTopBar's Style="height: 52px") so the bar stays
       visible and clickable while the drawer is open — the drawer covers only the content area. */
    inset: 52px 0 0;
    background: rgb(0 0 0 / 34%);
    opacity: 0;
    transition: opacity 180ms ease;
}

.topbar-drawer-host.is-open .topbar-drawer-backdrop[b-kl555d6uo3] {
    opacity: 1;
}

.topbar-drawer[b-kl555d6uo3] {
    position: absolute;
    /* Sits below the 52px topbar, not over it (see .topbar-drawer-backdrop). */
    top: 52px;
    right: 0;
    display: flex;
    flex-direction: column;
    width: min(400px, 100vw);
    height: calc(100dvh - 52px);
    background: var(--colorNeutralBackground1, #ffffff);
    color: var(--colorNeutralForeground1, #242424);
    box-shadow: -10px 0 30px rgb(0 0 0 / 20%);
    transform: translateX(100%);
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.topbar-drawer-host.is-open .topbar-drawer[b-kl555d6uo3] {
    transform: translateX(0);
}

.topbar-drawer-header[b-kl555d6uo3] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 10px 12px 16px;
    border-bottom: 1px solid var(--colorNeutralStroke2, #e5e5e5);
}

.topbar-drawer-title[b-kl555d6uo3] {
    font-size: 15px;
    font-weight: 700;
}

.topbar-drawer-header-actions[b-kl555d6uo3] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.topbar-drawer-body[b-kl555d6uo3] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* MessagesMenu renders inside .topbar-drawer-body as ChildContent — a child component, so its
   markup carries its own scope id, not this file's. These rules must be ::deep, anchored on
   .topbar-drawer-body (a plain element authored here, so it carries this component's scope).
   NotificationMenu styles itself in NotificationMenu.razor.css instead (2026-08-28 reference
   redesign); this only covers MessagesMenu's simple .notification-* placeholder markup. */
[b-kl555d6uo3] .topbar-drawer-body .notification-dropdown {
    width: auto;
    padding: 6px;
}

[b-kl555d6uo3] .topbar-drawer-body .notification-item {
    display: flex;
    gap: 10px;
    padding: 12px;
}

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

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

@media (max-width: 480px) {
    .topbar-drawer[b-kl555d6uo3] {
        width: 100vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .topbar-drawer-backdrop[b-kl555d6uo3],
    .topbar-drawer[b-kl555d6uo3] {
        transition-duration: 1ms;
    }
}
/* _content/PSMS.Web/Components/Pages/Assistant/AssistantChat.razor.rz.scp.css */
/* Full-page assistant chat: chat card + composer stacked to fill the viewport under the topbar.
   --pia-offset = .admin-content's own top+bottom padding per breakpoint (MainLayout.razor.css),
   plus the phone bottom nav. Only the message list scrolls. */
.pia-page[b-4u2rpydqcn] {
    --pia-offset: 24px;
    --pia-accent: #5b3fbf;
    --pia-accent-soft: #efeafd;

    display: flex;
    flex-direction: column;
    gap: 12px;
    height: calc(100dvh - var(--topbar-height, 52px) - var(--pia-offset));
    min-height: 420px;
}


.pia-chat[b-4u2rpydqcn],
.pia-composer[b-4u2rpydqcn] {
    background: var(--colorNeutralBackground1, #fff);
    border: 1px solid var(--colorNeutralStroke2, #e8e8ef);
    border-radius: 12px;
}

/* ---------- Chat card ---------- */
.pia-chat[b-4u2rpydqcn] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pia-chat-header[b-4u2rpydqcn] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--colorNeutralStroke2, #e8e8ef);
    flex: 0 0 auto;
}
.pia-chat-header-text[b-4u2rpydqcn] { flex: 1; min-width: 0; }
.pia-chat-header-name[b-4u2rpydqcn] { font-weight: 700; font-size: 16px; }

.pia-status[b-4u2rpydqcn] { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--colorNeutralForeground3, #6b7280); }
.pia-status-dot[b-4u2rpydqcn] { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
.pia-status.is-busy .pia-status-dot[b-4u2rpydqcn] { background: #f59e0b; animation: pia-pulse-b-4u2rpydqcn 1s infinite ease-in-out; }

@keyframes pia-pulse-b-4u2rpydqcn { 50% { opacity: 0.35; } }

.pia-avatar-lg[b-4u2rpydqcn] { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #f3f4f6; }
.pia-avatar-md[b-4u2rpydqcn] { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: #f3f4f6; }

.pia-user-avatar[b-4u2rpydqcn] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pia-accent-soft);
}

/* ---------- Messages ---------- */
.pia-message-list[b-4u2rpydqcn] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
}

.pia-message[b-4u2rpydqcn] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    max-width: min(78%, 860px);
}
.pia-message-assistant[b-4u2rpydqcn] { align-self: flex-start; }
.pia-message-user[b-4u2rpydqcn] { align-self: flex-end; flex-direction: row-reverse; }

.pia-bubble[b-4u2rpydqcn] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
    min-width: 0;
}
.pia-message-assistant .pia-bubble[b-4u2rpydqcn] { background: #f4f4f7; border-top-left-radius: 4px; }
.pia-message-user .pia-bubble[b-4u2rpydqcn] { background: var(--pia-accent); color: #fff; border-top-right-radius: 4px; }

.pia-bubble-text[b-4u2rpydqcn] { white-space: pre-wrap; overflow-wrap: anywhere; }

.pia-bubble-time[b-4u2rpydqcn] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    opacity: 0.7;
}
.pia-message-user .pia-bubble-time[b-4u2rpydqcn] { align-self: flex-end; }

.pia-bubble-error[b-4u2rpydqcn] { background: #fdecea !important; color: #8a1c13; }

.pia-bubble-thinking[b-4u2rpydqcn] { flex-direction: row; align-items: center; gap: 4px; padding: 14px 16px; }
.pia-typing-dot[b-4u2rpydqcn] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--colorNeutralForeground3, #6b7280);
    animation: pia-typing-b-4u2rpydqcn 1s infinite ease-in-out;
}
.pia-typing-dot:nth-child(2)[b-4u2rpydqcn] { animation-delay: 0.15s; }
.pia-typing-dot:nth-child(3)[b-4u2rpydqcn] { animation-delay: 0.3s; }

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

/* ---------- Suggested prompts ---------- */
.pia-suggestions[b-4u2rpydqcn] {
    flex: 0 0 auto;
    margin: 0 18px;
    padding: 12px 0 14px;
    border-top: 1px solid var(--colorNeutralStroke2, #e8e8ef);
}
.pia-suggestions-label[b-4u2rpydqcn] { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; margin-bottom: 10px; }
.pia-suggestion-list[b-4u2rpydqcn] { display: flex; flex-wrap: wrap; gap: 10px; }
[b-4u2rpydqcn] .pia-suggestion { border-radius: 8px; }

/* ---------- Composer ---------- */
.pia-composer[b-4u2rpydqcn] {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 10px 12px;
}
[b-4u2rpydqcn] .pia-send { min-width: 104px; height: 40px; }
[b-4u2rpydqcn] .pia-suggest-toggle { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1366px) {
    .pia-page[b-4u2rpydqcn] { --pia-offset: 20px; }
}


@media (max-width: 768px) {
    .pia-page[b-4u2rpydqcn] {
        --pia-offset: calc(24px + var(--mobile-bottom-nav-height, 58px) + env(safe-area-inset-bottom, 0px));
        gap: 8px;
    }
    /* Compact header: smaller avatar, one-line status, icon-only Clear. */
    .pia-chat-header[b-4u2rpydqcn] { gap: 10px; padding: 8px 12px; }
    .pia-avatar-lg[b-4u2rpydqcn] { width: 32px; height: 32px; }
    .pia-chat-header-name[b-4u2rpydqcn] { font-size: 15px; line-height: 18px; }
    .pia-status[b-4u2rpydqcn] { font-size: 11px; min-width: 0; }
    .pia-status-text[b-4u2rpydqcn] { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pia-btn-label[b-4u2rpydqcn] { display: none; }
    [b-4u2rpydqcn] .pia-clear { min-width: 36px; width: 36px; height: 36px; padding: 0; flex-shrink: 0; }

    /* Messages: drop the per-message avatars so bubbles get the full width. */
    .pia-message-list[b-4u2rpydqcn] { padding: 10px; gap: 12px; }
    .pia-message[b-4u2rpydqcn] { max-width: 90%; }
    .pia-message .pia-avatar-md[b-4u2rpydqcn],
    .pia-message .pia-user-avatar[b-4u2rpydqcn] { display: none; }
    .pia-bubble[b-4u2rpydqcn] { padding: 9px 12px; }

    /* Prompts: one swipeable row, no label, hidden once chatting (lightbulb reopens). */
    .pia-suggestions[b-4u2rpydqcn] { margin: 0 10px; padding: 8px 0; }
    .pia-suggestions-label[b-4u2rpydqcn] { display: none; }
    .pia-suggestions.is-collapsed[b-4u2rpydqcn] { display: none; }
    .pia-suggestion-list[b-4u2rpydqcn] { flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 2px; scrollbar-width: none; }
    .pia-suggestion-list[b-4u2rpydqcn]::-webkit-scrollbar { display: none; }
    [b-4u2rpydqcn] .pia-suggestion { flex-shrink: 0; font-size: 12px; }

    /* Composer: lightbulb + input + icon-only send. */
    .pia-composer[b-4u2rpydqcn] { gap: 6px; padding: 6px 8px; }
    [b-4u2rpydqcn] .pia-suggest-toggle { display: inline-flex; flex-shrink: 0; height: 40px; }
    [b-4u2rpydqcn] .pia-send { min-width: 40px; width: 40px; padding: 0; }
}

@media (max-width: 480px) {
    .pia-page[b-4u2rpydqcn] { --pia-offset: calc(12px + var(--mobile-bottom-nav-height, 58px) + env(safe-area-inset-bottom, 0px)); }
}


/* Replies with structured blocks get the full width so tables/charts/cards have room. */
.pia-message.has-blocks[b-4u2rpydqcn] { max-width: 100%; width: 100%; }
.pia-message.has-blocks .pia-bubble[b-4u2rpydqcn] { flex: 1; }
.pia-blocks[b-4u2rpydqcn] { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; min-width: 0; }
/* _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/CashierTracking/CashierTracking.razor.rz.scp.css */
/* Sticky-header/scrollable-body layout, same reasoning/convention as PIA.razor.css and
   PrintingService/Settings/SectionsFieldsStep.razor.css: FluentStack/FluentGrid height cascading
   through the admin shell isn't reliable, so the scrollable region's available height is anchored
   directly to the viewport instead. --ct-header-offset is a tuned estimate of everything above
   .ct-scroll-area (admin-content's own top padding + PageHeader + the session bar + the summary
   card row, including the gaps between them) — nudge it if the grid clips before the viewport
   edge. Desktop-only (matches .ct-summary-grid's own >1199.98px breakpoint): at narrower widths
   the summary grid wraps to 2-3x the rows, which would need its own offset per breakpoint, so
   those widths just fall back to the normal full-page scroll instead of stacking more tuned
   numbers — this is a back-office dashboard, not something worth over-engineering for phone
   width. */
@media (min-width: 1200px) {
    [b-yzzb71x4oa] .ct-page {
        --ct-header-offset: 400px;

        max-height: calc(100vh - var(--topbar-height, 52px) - var(--ct-header-offset));
        overflow: hidden;
    }

    [b-yzzb71x4oa] .ct-scroll-area {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
}

[b-yzzb71x4oa] .ct-session-bar {
    width: 100%;
}

[b-yzzb71x4oa] .ct-start-card {
    width: 100%;
}

/* ── Empty / closed state ── */
.ct-empty[b-yzzb71x4oa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 16px 32px;
    text-align: center;
}

.ct-empty-art[b-yzzb71x4oa] {
    margin-bottom: 12px;
}

.ct-empty-title[b-yzzb71x4oa] {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 700;
    color: var(--colorNeutralForeground1, #1b1a19);
}

.ct-empty-text[b-yzzb71x4oa] {
    max-width: 460px;
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--colorNeutralForeground3, #6b7280);
}

.ct-empty-actions[b-yzzb71x4oa] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

[b-yzzb71x4oa] .ct-tutorial {
    margin-top: 10px;
}

.ct-empty-divider[b-yzzb71x4oa] {
    align-self: stretch;
    height: 1px;
    margin: 32px 5% 24px;
    background: var(--colorNeutralStroke2, #e6e8eb);
}

.ct-empty-tip[b-yzzb71x4oa] {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 640px;
    padding: 14px 18px;
    border: 1px solid #d9ecea;
    border-radius: 8px;
    background: #f1f8f7;
    text-align: left;
}

.ct-empty-tip-icon[b-yzzb71x4oa] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #dceeed;
    color: #0f6e6a;
}

.ct-empty-tip-title[b-yzzb71x4oa] {
    font-weight: 600;
    color: var(--colorNeutralForeground1, #1b1a19);
}

.ct-empty-tip-text[b-yzzb71x4oa] {
    font-size: 13px;
    color: var(--colorNeutralForeground2, #424242);
}

@media (max-width: 600px) {
    .ct-empty-title[b-yzzb71x4oa] { font-size: 20px; }
    .ct-empty-art svg[b-yzzb71x4oa] { width: 160px; height: 136px; }
}

.ct-session-item[b-yzzb71x4oa] {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-yzzb71x4oa] .ct-session-icon {
    color: var(--colorNeutralForeground3, #6b7280);
}

.ct-session-item > div[b-yzzb71x4oa] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.ct-session-label[b-yzzb71x4oa] {
    font-size: 12px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.ct-session-value[b-yzzb71x4oa] {
    font-weight: 600;
}

[b-yzzb71x4oa] .ct-status-badge {
    white-space: nowrap;
}

.ct-summary-grid[b-yzzb71x4oa] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    width: 100%;
}

.ct-summary-item[b-yzzb71x4oa] {
    display: flex;
}

[b-yzzb71x4oa] .ct-summary-item .basic-value-card {
    width: 100%;
    height: 100%;
}

@media (max-width: 1199.98px) {
    .ct-summary-grid[b-yzzb71x4oa] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 699.98px) {
    .ct-summary-grid[b-yzzb71x4oa] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 419.98px) {
    .ct-summary-grid[b-yzzb71x4oa] {
        grid-template-columns: 1fr;
    }
}

[b-yzzb71x4oa] .ct-transactions-card,
[b-yzzb71x4oa] .ct-breakdown-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[b-yzzb71x4oa] .ct-filters {
    margin: 4px 0 4px;
}

.ct-grid-container[b-yzzb71x4oa] {
    overflow-x: auto;
}

.ct-empty[b-yzzb71x4oa] {
    padding: 32px 16px;
    text-align: center;
    color: var(--colorNeutralForeground3, #6b7280);
}

[b-yzzb71x4oa] .ct-grid-footer {
    color: var(--colorNeutralForeground3, #6b7280);
    font-size: 13px;
}

.ct-cell-stacked[b-yzzb71x4oa] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    padding: 4px 0;
}

.ct-cell-primary[b-yzzb71x4oa] {
    font-weight: 600;
}

.ct-cell-secondary[b-yzzb71x4oa] {
    font-size: 12px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.ct-breakdown-rows[b-yzzb71x4oa] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
}

.ct-breakdown-row[b-yzzb71x4oa] {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
}

.ct-breakdown-row.ct-positive span:last-child[b-yzzb71x4oa] {
    color: #1a9e54;
}

.ct-breakdown-row.ct-negative span:last-child[b-yzzb71x4oa] {
    color: #d13438;
}

.ct-breakdown-row.ct-total[b-yzzb71x4oa] {
    font-weight: 700;
    border-top: 1px solid var(--colorNeutralStroke2, #e1e1e1);
    padding-top: 8px;
    margin-top: 4px;
}

.ct-breakdown-row.ct-actual[b-yzzb71x4oa] {
    background: #eaf3ff;
    border-radius: 6px;
    padding: 8px 10px;
    font-weight: 600;
}

.ct-breakdown-row.ct-variance[b-yzzb71x4oa] {
    font-weight: 700;
}

.ct-variance-positive[b-yzzb71x4oa] {
    color: #1a9e54;
}

.ct-variance-negative[b-yzzb71x4oa] {
    color: #d13438;
}

[b-yzzb71x4oa] .ct-denom-title {
    margin-top: 4px;
}

.ct-denom-table[b-yzzb71x4oa] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ct-denom-table th[b-yzzb71x4oa] {
    text-align: left;
    color: var(--colorNeutralForeground3, #6b7280);
    font-weight: 600;
    padding: 6px 4px;
    border-bottom: 1px solid var(--colorNeutralStroke2, #e1e1e1);
}

.ct-denom-table td[b-yzzb71x4oa] {
    padding: 4px;
    border-bottom: 1px solid var(--colorNeutralStroke2, #f0f0f0);
}

.ct-denom-table .ct-align-end[b-yzzb71x4oa] {
    text-align: right;
}

.ct-denom-table .ct-denom-grand-total[b-yzzb71x4oa] {
    font-weight: 700;
    background: #fdecec;
}

.ct-denom-table .ct-denom-grand-total td[b-yzzb71x4oa] {
    border-bottom: none;
}

.ct-char-count[b-yzzb71x4oa] {
    display: block;
    text-align: right;
    font-size: 11px;
    color: var(--colorNeutralForeground3, #6b7280);
    margin-top: -6px;
}

[b-yzzb71x4oa] .ct-breakdown-actions {
    margin-top: 8px;
}

[b-yzzb71x4oa] .ct-breakdown-actions fluent-button {
    flex: 1 1 0;
}

/* ---- payment source (Sales Express / Sales Order / Job Order) ---- */

.ct-type-cell[b-yzzb71x4oa] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.ct-source-tag[b-yzzb71x4oa] {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}

.ct-source-salesexpress[b-yzzb71x4oa] {
    background: #e8f0fe;
    color: #1c4f95;
    border-color: #cde2fb;
}

.ct-source-salesorder[b-yzzb71x4oa] {
    background: #fdeee6;
    color: #8a3b14;
    border-color: #f8d5c4;
}

.ct-source-joborder[b-yzzb71x4oa] {
    background: #e6f6ef;
    color: #0f5e43;
    border-color: #c7ecdc;
}

.ct-source-rows[b-yzzb71x4oa] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 0 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #e5e7eb);
}

.ct-source-title[b-yzzb71x4oa] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--neutral-foreground-3, #6b7280);
}

.ct-source-row[b-yzzb71x4oa] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.ct-source-row > span:last-child[b-yzzb71x4oa] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ct-source-count[b-yzzb71x4oa] {
    font-size: 11px;
    color: var(--neutral-foreground-3, #6b7280);
}

/* Cashier item in the session bar: avatar instead of the generic person icon. */
.ct-session-cashier[b-yzzb71x4oa] {
    gap: 10px;
}

.ct-session-sub[b-yzzb71x4oa] {
    font-size: 11px;
    color: var(--colorNeutralForeground3, #6b7280);
}

/* ---- Type column: one compact pill per row (soft tint + dark text, same size for every type) ---- */

.ct-pill[b-yzzb71x4oa] {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    border: 1px solid transparent;
}

.ct-pill.ct-source-salesexpress[b-yzzb71x4oa] { background: #e8f0fe; color: #1c4f95; border-color: #cde2fb; }
.ct-pill.ct-source-salesorder[b-yzzb71x4oa]   { background: #fdeee6; color: #8a3b14; border-color: #f8d5c4; }
.ct-pill.ct-source-joborder[b-yzzb71x4oa]     { background: #e6f6ef; color: #0f5e43; border-color: #c7ecdc; }
.ct-pill.ct-type-payment[b-yzzb71x4oa]        { background: #e6f6ef; color: #0f5e43; border-color: #c7ecdc; }
.ct-pill.ct-type-expense[b-yzzb71x4oa]        { background: #fff6dc; color: #7a5600; border-color: #f6e3a6; }
.ct-pill.ct-type-refund[b-yzzb71x4oa]         { background: #fdeaea; color: #9b1c1c; border-color: #f6caca; }
.ct-pill.ct-type-cashout[b-yzzb71x4oa]        { background: #f1f1ef; color: #4b5563; border-color: #e1e0d9; }
.ct-pill.ct-type-cashin[b-yzzb71x4oa]         { background: #e6f4f4; color: #0f5e5e; border-color: #c4e6e6; }

/* ── Debit/credit ledger (Transaction History) ── */
.ct-pill.ct-type-opening[b-yzzb71x4oa]        { background: #e8f0fe; color: #1c4f95; border-color: #cde2fb; }


[b-yzzb71x4oa] .ct-cell-remarks { white-space: pre-line; font-size: 12px; }
[b-yzzb71x4oa] .ct-debit { color: #b42318; }
[b-yzzb71x4oa] .ct-credit { color: #0f7b3f; }
[b-yzzb71x4oa] .ct-row-opening td { background: #f5f8ff; }
[b-yzzb71x4oa] .ct-row-voided td { color: #8a8886; text-decoration: line-through; }
/* _content/PSMS.Web/Components/Pages/CashierTracking/Print/CashierSettlementDocument.razor.rz.scp.css */
/* Same look as PurchaseOrderPrintDocument (ds- prefix so the two can diverge). */
.ds-doc[b-lwhp4fstlt] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 10.5px;
    line-height: 1.45;
    color: #242424;
}

/* ── title block (letterhead aside) ── */
.ds-title[b-lwhp4fstlt] {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .02em;
}

.ds-code[b-lwhp4fstlt] {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
}

.ds-date[b-lwhp4fstlt] {
    margin-top: 2px;
    color: #424242;
}

.ds-copy[b-lwhp4fstlt] {
    margin-top: 4px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    color: #616161;
}

.ds-muted[b-lwhp4fstlt] {
    color: #616161;
    font-size: 9.5px;
}

/* ── cards ── */
.ds-card[b-lwhp4fstlt] {
    padding: 10px 12px;
    border: 1px solid #d6d9de;
    border-radius: 4px;
}

.ds-card-flush[b-lwhp4fstlt] {
    padding: 0;
    overflow: hidden;
}

.ds-card-title[b-lwhp4fstlt] {
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e6e8eb;
    font-size: 11.5px;
    font-weight: 700;
}

.ds-card-title--pad[b-lwhp4fstlt] {
    margin-bottom: 0;
    padding: 10px 12px 6px;
}

.ds-card p[b-lwhp4fstlt] {
    margin: 0;
}

/* ── session info ── */
.ds-info[b-lwhp4fstlt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ds-kv[b-lwhp4fstlt] {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 3px 10px;
}

.ds-kv > span:nth-child(odd)[b-lwhp4fstlt] {
    color: #616161;
}

.ds-pill[b-lwhp4fstlt] {
    display: inline-block;
    padding: 0 8px;
    border-radius: 999px;
    background: #e3f0fb;
    color: #0f6cbd;
    font-size: 9.5px;
    font-weight: 600;
}

.ds-pill.is-good[b-lwhp4fstlt] {
    background: #e6f4ea;
    color: #107c10;
}

/* ── summary + cash count ── */
.ds-pair[b-lwhp4fstlt] {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 10px;
    align-items: start;
}

.ds-totals > div:not(.ds-card-title):not(.ds-subhead)[b-lwhp4fstlt] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 0;
}

.ds-totals .is-subtotal[b-lwhp4fstlt] {
    margin-top: 2px;
    padding-top: 4px !important;
    border-top: 1px solid #d6d9de;
    font-weight: 700;
}

.ds-totals .is-total[b-lwhp4fstlt] {
    margin-top: 4px;
    padding-top: 5px !important;
    border-top: 1px solid #3d3d3d;
    font-size: 12px;
    font-weight: 700;
}

.ds-totals .is-short[b-lwhp4fstlt] { color: #c50f1f; }
.ds-totals .is-over[b-lwhp4fstlt] { color: #107c10; }

.ds-totals .ds-muted-row[b-lwhp4fstlt] {
    color: #616161;
    font-size: 9.5px;
}

.ds-subhead[b-lwhp4fstlt] {
    margin-top: 10px;
    margin-bottom: 2px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #616161;
}

/* ── tables ── */
.ds-table th[b-lwhp4fstlt],
.ds-table td[b-lwhp4fstlt] {
    padding: 5px 10px;
    border-bottom: 1px solid #e6e8eb;
    text-align: left;
    vertical-align: top;
}

.ds-table th[b-lwhp4fstlt] {
    background: #f1f2f4;
    font-weight: 700;
}

.ds-table tbody tr:last-child td[b-lwhp4fstlt] {
    border-bottom: 0;
}

.ds-table tr.is-total td[b-lwhp4fstlt] {
    border-top: 1px solid #3d3d3d;
    border-bottom: 0;
    font-weight: 700;
}

.ds-table .num[b-lwhp4fstlt] {
    text-align: right;
    white-space: nowrap;
}

.ds-table tr.is-voided td[b-lwhp4fstlt] {
    color: #8a8886;
    text-decoration: line-through;
}

/* ── page 1 ──
   Page 1 fills one A4 page so the signatures sit at its bottom, not right under the last section.
   A4 297mm minus the PDF top margin (16mm) and bottom margin + stamped footer band (16 + 12mm)
   = 253mm; a few mm under that so rounding never spills a sliver onto an extra page. If the
   summary itself is longer than a page it just flows on, with the signatures after it. */
.ds-page1[b-lwhp4fstlt] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 248mm;
}

.ds-signatures[b-lwhp4fstlt] {
    margin-top: auto;
    padding-top: 16px;
}

/* ── Transaction History ledger (page 2+) ── */
.ds-ledger-head[b-lwhp4fstlt] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid #0f6cbd;
}

.ds-ledger-title[b-lwhp4fstlt] {
    font-size: 13px;
    font-weight: 800;
    color: #0f6cbd;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ds-ledger th[b-lwhp4fstlt],
.ds-ledger td[b-lwhp4fstlt] {
    padding: 5px 6px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #eceef1;
}

.ds-ledger th[b-lwhp4fstlt] {
    padding-top: 7px;
    border-bottom: 1px solid #c8ccd2;
    color: #616161;
    font-size: 8.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.ds-ledger tbody tr:nth-child(even) td[b-lwhp4fstlt] { background: #f8f9fb; }
.ds-ledger tbody tr.is-opening td[b-lwhp4fstlt] { background: #eef4fc; font-weight: 600; }

.ds-ledger td:nth-child(1)[b-lwhp4fstlt],
.ds-ledger td:nth-child(3)[b-lwhp4fstlt] {
    white-space: nowrap;
}

.ds-ledger .num[b-lwhp4fstlt] {
    text-align: right;
    white-space: nowrap;
}

/* Type pills: same palette as CashierTracking.razor.css .ct-pill, so screen and paper match. */
.ds-tpill[b-lwhp4fstlt] {
    display: inline-block;
    padding: 0 7px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 8.5px;
    font-weight: 600;
    line-height: 1.6;
}

.ds-tpill--opening[b-lwhp4fstlt]      { background: #e8f0fe; color: #1c4f95; border-color: #cde2fb; }
.ds-tpill--salesexpress[b-lwhp4fstlt] { background: #e8f0fe; color: #1c4f95; border-color: #cde2fb; }
.ds-tpill--salesorder[b-lwhp4fstlt]   { background: #fdeee6; color: #8a3b14; border-color: #f8d5c4; }
.ds-tpill--joborder[b-lwhp4fstlt]     { background: #e6f6ef; color: #0f5e43; border-color: #c7ecdc; }
.ds-tpill--payment[b-lwhp4fstlt]      { background: #e6f6ef; color: #0f5e43; border-color: #c7ecdc; }
.ds-tpill--expense[b-lwhp4fstlt]      { background: #fff6dc; color: #7a5600; border-color: #f6e3a6; }
.ds-tpill--refund[b-lwhp4fstlt]       { background: #fdeaea; color: #9b1c1c; border-color: #f6caca; }
.ds-tpill--cashout[b-lwhp4fstlt]      { background: #f1f1ef; color: #4b5563; border-color: #e1e0d9; }
.ds-tpill--cashin[b-lwhp4fstlt]       { background: #e6f4f4; color: #0f5e5e; border-color: #c4e6e6; }
.ds-ledger .ds-rm-main[b-lwhp4fstlt] { font-weight: 600; }
.ds-ledger .ds-rm-sub[b-lwhp4fstlt] { color: #6b7280; font-size: 9px; }
.ds-ledger .ds-debit[b-lwhp4fstlt] { color: #b42318; }
.ds-ledger .ds-credit[b-lwhp4fstlt] { color: #107c10; }
.ds-ledger .ds-bal[b-lwhp4fstlt] { font-weight: 700; }
.ds-ledger .ds-bal-same[b-lwhp4fstlt] { color: #9aa0a6; }

.ds-ledger tbody tr.is-total td[b-lwhp4fstlt] {
    background: #ffffff;
    border-top: 1px solid #3d3d3d;
    border-bottom: 0;
    font-weight: 700;
}

.ds-ledger tr.is-voided td[b-lwhp4fstlt] {
    color: #8a8886;
    text-decoration: line-through;
}

.ds-end-spacer[b-lwhp4fstlt] {
    height: 18mm;
}

.ds-count[b-lwhp4fstlt] {
    margin-left: 4px;
    color: #8a8886;
    font-size: 9px;
}

.ds-warn[b-lwhp4fstlt] {
    margin-top: 8px;
    padding: 5px 8px;
    border: 1px solid #f6e3a6;
    border-radius: 4px;
    background: #fff6dc;
    color: #7a5600;
    font-size: 9.5px;
}

.ds-changed[b-lwhp4fstlt] {
    margin-left: 3px;
    color: #b45309;
    font-weight: 700;
}

.ds-footnote[b-lwhp4fstlt] {
    margin-top: 6px;
}
/* _content/PSMS.Web/Components/Pages/CommunityHub/CommunityHub.razor.rz.scp.css */
.ch-page[b-cgemlnz4mq] { display: flex; flex-direction: column; gap: 14px; width: 100%; min-width: 0; }

/* ---- stat cards ---- */
.ch-stats[b-cgemlnz4mq] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ch-stat[b-cgemlnz4mq] {
    display: flex; align-items: center; gap: 14px; padding: 16px; text-align: left; cursor: pointer;
    border: 1px solid var(--colorNeutralStroke2); border-radius: 8px; background: var(--colorNeutralBackground1);
    font: inherit; color: inherit;
}
.ch-stat:hover[b-cgemlnz4mq] { border-color: var(--colorBrandStroke1, #0f6cbd); }
.ch-stat-icon[b-cgemlnz4mq] { flex: none; width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.ch-stat-text[b-cgemlnz4mq] { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ch-stat-text strong[b-cgemlnz4mq] { font-size: 24px; line-height: 1.1; }
.ch-stat-label[b-cgemlnz4mq] { font-weight: 600; }
.ch-stat-sub[b-cgemlnz4mq] { font-size: 12px; color: var(--colorNeutralForeground3); }
[b-cgemlnz4mq] .ch-stat-chev { color: var(--colorNeutralForeground3); }

/* ---- cards / layout ---- */
.ch-card[b-cgemlnz4mq] {
    box-sizing: border-box; width: 100%; padding: 16px; border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px; background: var(--colorNeutralBackground1); min-width: 0;
}
.ch-main[b-cgemlnz4mq] { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ch-side[b-cgemlnz4mq] { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ch-h3[b-cgemlnz4mq] { font-size: 14px; font-weight: 600; margin: 14px 0 6px; }
.ch-muted[b-cgemlnz4mq] { color: var(--colorNeutralForeground3); font-size: 12px; }
.ch-small[b-cgemlnz4mq] { display: block; margin-top: 4px; font-size: 11px; }
.ch-empty[b-cgemlnz4mq] { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 12px; color: var(--colorNeutralForeground3); text-align: center; }

/* ---- filters + list ---- */
.ch-list-card[b-cgemlnz4mq] { padding: 0; overflow: hidden; }
.ch-filters[b-cgemlnz4mq] {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
    padding: 12px; border-bottom: 1px solid var(--colorNeutralStroke2);
}
/* Search on its own row; the four dropdowns share the row below and each fills its cell. */
[b-cgemlnz4mq] .ch-filter-search { grid-column: 1 / -1; }
.ch-filter[b-cgemlnz4mq] { min-width: 0; }
.ch-filter[b-cgemlnz4mq]  fluent-select, .ch-filter[b-cgemlnz4mq]  .fluent-select, .ch-filter[b-cgemlnz4mq]  select { width: 100%; min-width: 0; }
.ch-list[b-cgemlnz4mq] { display: flex; flex-direction: column; max-height: 70vh; overflow-y: auto; }
.ch-item[b-cgemlnz4mq] {
    display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; text-align: left; cursor: pointer;
    border: none; border-bottom: 1px solid var(--colorNeutralStroke2); border-left: 3px solid transparent;
    background: transparent; font: inherit; color: inherit;
}
.ch-item:hover[b-cgemlnz4mq] { background: var(--colorNeutralBackground2); }
.ch-item.is-selected[b-cgemlnz4mq] { background: #eaf3ff; border-left-color: #0f6cbd; }
.ch-item-top[b-cgemlnz4mq] { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.ch-item-title[b-cgemlnz4mq] { font-weight: 600; font-size: 14px; min-width: 0; }
.ch-item-desc[b-cgemlnz4mq] {
    font-size: 13px; color: var(--colorNeutralForeground2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ch-item-foot[b-cgemlnz4mq] { display: flex; align-items: center; gap: 6px; font-size: 12px; flex-wrap: wrap; }
.ch-dot[b-cgemlnz4mq] { color: var(--colorNeutralForeground3); }
.ch-spacer[b-cgemlnz4mq] { flex: 1; }
.ch-count[b-cgemlnz4mq] { display: inline-flex; align-items: center; gap: 3px; color: var(--colorNeutralForeground2); margin-left: 8px; }
.ch-count.is-voted[b-cgemlnz4mq] { color: #0f6cbd; font-weight: 600; }

/* ---- chips / avatars ---- */
.ch-chips[b-cgemlnz4mq] { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; }
.ch-chips--wrap[b-cgemlnz4mq] { justify-content: flex-start; }
.ch-chip[b-cgemlnz4mq] { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ch-chip--sm[b-cgemlnz4mq] { padding: 0 8px; font-size: 11px; }
[b-cgemlnz4mq] .ch-chip-icon { width: 14px; height: 14px; margin-right: 4px; }
.ch-chip--btn[b-cgemlnz4mq] { border: 1px solid transparent; cursor: pointer; font-family: inherit; }
.ch-chip--btn.is-active[b-cgemlnz4mq] { border-color: currentColor; }
.ch-avatar[b-cgemlnz4mq] {
    flex: none; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.ch-avatar--lg[b-cgemlnz4mq] { width: 32px; height: 32px; font-size: 12px; }

/* ---- detail ---- */
.ch-detail-head[b-cgemlnz4mq] { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.ch-detail-title[b-cgemlnz4mq] { font-size: 18px; font-weight: 600; margin: 0; }
.ch-detail .ch-chips[b-cgemlnz4mq] { justify-content: flex-start; }
.ch-desc[b-cgemlnz4mq] { margin: 0; font-size: 13px; line-height: 1.5; white-space: pre-line; color: var(--colorNeutralForeground2); }
.ch-actions[b-cgemlnz4mq] { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ch-fix-form[b-cgemlnz4mq] { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 10px; padding: 10px; border-radius: 8px; background: var(--colorNeutralBackground2); }
.ch-fixed-note[b-cgemlnz4mq] { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: #15803d; }

.ch-steps[b-cgemlnz4mq] { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 16px; }
.ch-step[b-cgemlnz4mq] { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.ch-step[b-cgemlnz4mq]::before {
    content: ""; position: absolute; top: 11px; left: -50%; width: 100%; height: 2px; background: var(--colorNeutralStroke2); z-index: 0;
}
.ch-step:first-child[b-cgemlnz4mq]::before { display: none; }
.ch-step--done[b-cgemlnz4mq]::before, .ch-step--current[b-cgemlnz4mq]::before { background: #0f6cbd; }
.ch-step-dot[b-cgemlnz4mq] {
    position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--colorNeutralStroke2); border: 3px solid var(--colorNeutralBackground1); box-sizing: border-box;
}
.ch-step--done .ch-step-dot[b-cgemlnz4mq] { background: #0f6cbd; }
.ch-step--current .ch-step-dot[b-cgemlnz4mq] { background: #f97316; box-shadow: 0 0 0 2px #fed7aa; }
.ch-step-label[b-cgemlnz4mq] { font-size: 12px; font-weight: 600; }
.ch-step--todo .ch-step-label[b-cgemlnz4mq] { color: var(--colorNeutralForeground3); font-weight: 400; }
.ch-step-date[b-cgemlnz4mq] { font-size: 11px; color: var(--colorNeutralForeground3); min-height: 14px; }

.ch-files[b-cgemlnz4mq] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ch-file[b-cgemlnz4mq] {
    display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px; font-size: 12px; min-width: 0; background: var(--colorNeutralBackground1); font-family: inherit; color: inherit;
}
.ch-file-thumb[b-cgemlnz4mq] { height: 56px; border-radius: 6px; background: var(--colorNeutralBackground3); display: flex; align-items: center; justify-content: center; }
.ch-file-name[b-cgemlnz4mq] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ch-file--more[b-cgemlnz4mq] { align-items: center; justify-content: center; border-style: dashed; cursor: pointer; color: #0f6cbd; text-align: center; }

.ch-comments-head[b-cgemlnz4mq] { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.ch-comment[b-cgemlnz4mq] { display: flex; gap: 10px; padding: 8px 0; }
.ch-comment-body[b-cgemlnz4mq] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ch-comment-meta[b-cgemlnz4mq] { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.ch-comment-text[b-cgemlnz4mq] { font-size: 13px; color: var(--colorNeutralForeground2); white-space: pre-line; overflow-wrap: anywhere; }
.ch-comment-new[b-cgemlnz4mq] { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-top: 8px; }

.ch-tags-head[b-cgemlnz4mq] { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; font-size: 14px; }

/* ---- fix tracker ---- */
.ch-tracker[b-cgemlnz4mq] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px; align-items: start; }
.ch-tracker .ch-h3[b-cgemlnz4mq] { margin-top: 0; }
.ch-track-row[b-cgemlnz4mq] {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 6px; text-align: left; cursor: pointer;
    border: none; border-bottom: 1px solid var(--colorNeutralStroke2); background: transparent; font: inherit; color: inherit; flex-wrap: wrap;
}
.ch-track-row:hover[b-cgemlnz4mq] { background: var(--colorNeutralBackground2); }
.ch-track-title[b-cgemlnz4mq] { flex: 1; min-width: 160px; font-size: 13px; font-weight: 600; }
.ch-release[b-cgemlnz4mq] { margin-bottom: 14px; }
.ch-release-head[b-cgemlnz4mq] { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }

/* ---- responsive ---- */
@media (max-width: 1100px) {
    .ch-stats[b-cgemlnz4mq] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ch-main[b-cgemlnz4mq], .ch-tracker[b-cgemlnz4mq] { grid-template-columns: minmax(0, 1fr); }
    .ch-list[b-cgemlnz4mq] { max-height: none; }
}

@media (max-width: 600px) {
    .ch-stats[b-cgemlnz4mq] { grid-template-columns: minmax(0, 1fr); }
    .ch-filters[b-cgemlnz4mq] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ch-item-top[b-cgemlnz4mq] { flex-direction: column; }
    .ch-chips[b-cgemlnz4mq] { justify-content: flex-start; }
    .ch-files[b-cgemlnz4mq] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ch-step-date[b-cgemlnz4mq] { display: none; }
}
/* _content/PSMS.Web/Components/Pages/CommunityHub/ModulePicker.razor.rz.scp.css */
.mp[b-z3uegvbhhu] { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mp-label[b-z3uegvbhhu] { font-size: 14px; font-weight: 600; }
.mp-trigger[b-z3uegvbhhu] {
    display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 4px 10px; box-sizing: border-box;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1); border-bottom-color: var(--colorNeutralStrokeAccessible, #616161);
    border-radius: 4px; background: var(--colorNeutralBackground1); font: inherit; font-size: 14px; color: inherit; cursor: pointer; text-align: left;
}
.mp-trigger:hover[b-z3uegvbhhu] { border-color: var(--colorNeutralStroke1Hover, #c7c7c7); }
.mp.is-open .mp-trigger[b-z3uegvbhhu] { border-bottom: 2px solid var(--colorBrandStroke1, #0f6cbd); }
.mp-value[b-z3uegvbhhu] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-placeholder[b-z3uegvbhhu] { color: var(--colorNeutralForeground3); }
[b-z3uegvbhhu] .mp-chev { color: var(--colorNeutralForeground3); flex: none; }
.mp-icon[b-z3uegvbhhu] { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #eaf3ff; }
.mp-trigger .mp-icon[b-z3uegvbhhu] { width: 22px; height: 22px; background: transparent; }

.mp-panel[b-z3uegvbhhu] {
    position: absolute; top: 100%; left: 0; z-index: 20; margin-top: 4px; width: max(100%, 320px); max-width: 92vw;
    border: 1px solid var(--colorNeutralStroke2); border-radius: 8px; background: var(--colorNeutralBackground1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); overflow: hidden;
}
.mp-search[b-z3uegvbhhu] { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--colorNeutralStroke2); color: var(--colorNeutralForeground3); }
.mp-search input[b-z3uegvbhhu] { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--colorNeutralForeground1); }
.mp-list[b-z3uegvbhhu] { max-height: 320px; overflow-y: auto; padding: 4px; }
.mp-option[b-z3uegvbhhu] {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: none; border-radius: 6px;
    background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.mp-option:hover[b-z3uegvbhhu] { background: var(--colorNeutralBackground2); }
.mp-option.is-selected[b-z3uegvbhhu] { background: #eaf3ff; }
.mp-option-text[b-z3uegvbhhu] { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mp-option-name[b-z3uegvbhhu] { font-size: 14px; font-weight: 600; }
.mp-option-pages[b-z3uegvbhhu] { font-size: 12px; color: var(--colorNeutralForeground3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-empty[b-z3uegvbhhu] { padding: 12px; font-size: 13px; color: var(--colorNeutralForeground3); }
/* In a dialog the body clips overflow, so an absolute panel would be cut off (it used to sit in the flow
   and push the form taller). position: fixed lifts it out of the clipping box; psmsPlaceBelow (autocomplete-helpers.js) sets
   top/left/width so it sits right under the field. */
.mp--inline .mp-panel[b-z3uegvbhhu] { position: fixed; z-index: 1000; margin-top: 0; }
.mp--inline .mp-list[b-z3uegvbhhu] { max-height: 260px; }
/* _content/PSMS.Web/Components/Pages/CompanyProfile/ApiIntegrationsTab.razor.rz.scp.css */
/* ---------- Panels + colored header bands ---------- */
.ai-panel[b-kbm9orkqp8] {
    background: var(--colorNeutralBackground1, #fff);
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 8px;
    padding: 6px;
    margin-bottom: 12px;
    min-width: 0;
}

.ai-band[b-kbm9orkqp8] {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 10px 12px; border-radius: 6px; margin-bottom: 6px;
}
.ai-band-blue[b-kbm9orkqp8] { background: #eef5ff; }
.ai-band-orange[b-kbm9orkqp8] { background: #fff1e6; }
.ai-band-green[b-kbm9orkqp8] { background: #e9f9ef; }
.ai-band-purple[b-kbm9orkqp8] { background: #f5ecff; }

.ai-band-icon[b-kbm9orkqp8] {
    width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.7);
}
.ai-band-title[b-kbm9orkqp8] { flex: 1; min-width: 180px; }
.ai-h[b-kbm9orkqp8] { font-size: 16px; font-weight: 600; }
.ai-sub[b-kbm9orkqp8] { font-size: 13px; color: var(--colorNeutralForeground3, #6b7280); }
.ai-hint[b-kbm9orkqp8] {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
    background: #fff; color: #0f3d6e; padding: 6px 10px; border-radius: 6px;
}

/* ---------- Inner cards ---------- */
.ai-card[b-kbm9orkqp8] {
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 6px;
}
.ai-card:last-child[b-kbm9orkqp8] { margin-bottom: 0; }
.ai-card-head[b-kbm9orkqp8] { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.ai-card-title[b-kbm9orkqp8] { font-weight: 600; font-size: 14px; }
.ai-runtime[b-kbm9orkqp8] { font-size: 12px; color: var(--colorNeutralForeground3, #6b7280); }

.ai-label[b-kbm9orkqp8] { display: block; font-size: 12px; color: var(--colorNeutralForeground2, #374151); margin-bottom: 4px; }
.ai-help[b-kbm9orkqp8] { font-size: 12px; color: var(--colorNeutralForeground3, #6b7280); }
.ai-name[b-kbm9orkqp8] { font-weight: 600; }

/* Fluent inputs/selects carry a default vertical margin (my-3-o); drop it inside these cards. */
.ai-card[b-kbm9orkqp8]  fluent-field,
.ai-card[b-kbm9orkqp8]  .fluent-field,
.ai-card[b-kbm9orkqp8]  fluent-text-input,
.ai-card[b-kbm9orkqp8]  fluent-dropdown { margin: 0 !important; }

/* ---------- Agent identity ---------- */
.ai-identity[b-kbm9orkqp8] { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ai-identity .ai-card-title[b-kbm9orkqp8] { align-self: flex-start; min-width: 90px; }
.ai-identity-avatar[b-kbm9orkqp8] {
    width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    background: #f3f4f6; border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
}
.ai-identity-fields[b-kbm9orkqp8] { flex: 1; min-width: 220px; max-width: 400px; }
.ai-identity-fields .ai-help[b-kbm9orkqp8] { display: block; margin-top: 4px; }
.ai-identity .ai-actions[b-kbm9orkqp8] { margin-left: auto; }

/* ---------- Agent provider rows ---------- */
.ai-agent-row[b-kbm9orkqp8] {
    display: grid;
    grid-template-columns: minmax(300px, 1.3fr) minmax(220px, 1.1fr) minmax(200px, 1fr) 140px auto;
    gap: 8px 16px;
    align-items: center;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid transparent;
}
.ai-agent-row + .ai-agent-row[b-kbm9orkqp8] { margin-top: 4px; border-top-color: var(--colorNeutralStroke2, #e5e7eb); }
.ai-agent-row.is-active[b-kbm9orkqp8] { background: #effaf4; border-color: #cdeedb; }

.ai-provider[b-kbm9orkqp8] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ai-radio[b-kbm9orkqp8] { width: 18px; height: 18px; accent-color: #0f6cbd; cursor: pointer; margin: 0; }

.ai-key-saved[b-kbm9orkqp8] { display: flex; gap: 8px; align-items: center; }
.ai-key-mask[b-kbm9orkqp8] {
    flex: 1; min-width: 0; height: 32px; line-height: 32px; padding: 0 10px; letter-spacing: 2px;
    border: 1px solid var(--colorNeutralStroke1, #d1d5db); border-radius: 4px; background: #fff;
    overflow: hidden; white-space: nowrap;
}

.ai-model .ai-help[b-kbm9orkqp8] { display: block; margin-top: 4px; }

.ai-tested[b-kbm9orkqp8] { display: flex; flex-direction: column; gap: 2px; }
.ai-tested-ok[b-kbm9orkqp8] { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #15803d; }

.ai-actions[b-kbm9orkqp8] { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Logos + badges ---------- */
.ai-logo[b-kbm9orkqp8] {
    border-radius: 8px; flex-shrink: 0; overflow: hidden; padding: 6px; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; border: 1px solid rgba(0, 0, 0, 0.06);
}
.ai-logo img[b-kbm9orkqp8] { width: 100%; height: 100%; object-fit: contain; display: block; }
.ai-glyph[b-kbm9orkqp8] { padding: 0; }
.ai-invert[b-kbm9orkqp8] { filter: invert(1); }

.ai-badge[b-kbm9orkqp8] { font-size: 11px; padding: 1px 8px; line-height: 18px; border-radius: 999px; white-space: nowrap; }
.ai-badge-ok[b-kbm9orkqp8] { background: #dcfce7; color: #166534; }
.ai-badge-off[b-kbm9orkqp8] { background: #f1f5f9; color: #475569; }
.ai-badge-default[b-kbm9orkqp8] { background: #eaf3ff; color: #0f6cbd; }

/* ---------- Courier / Payment / Messaging columns ---------- */
.ai-columns[b-kbm9orkqp8] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ai-columns .ai-panel[b-kbm9orkqp8] { margin-bottom: 0; }
.ai-list[b-kbm9orkqp8] { padding: 0 12px; }

.ai-compact[b-kbm9orkqp8] { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.ai-compact + .ai-compact[b-kbm9orkqp8] { border-top: 1px solid var(--colorNeutralStroke2, #e5e7eb); }
.ai-compact-text[b-kbm9orkqp8] { flex: 1; min-width: 0; }
.ai-compact-name[b-kbm9orkqp8] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.ai-secure-note[b-kbm9orkqp8] {
    display: flex; align-items: center; gap: 8px; font-size: 13px;
    background: #ecfdf5; color: #0f5132; border-radius: 6px; padding: 8px 12px; margin-top: 12px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1400px) {
    .ai-agent-row[b-kbm9orkqp8] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ai-provider[b-kbm9orkqp8] { grid-column: 1 / -1; }
    .ai-actions[b-kbm9orkqp8] { justify-content: flex-start; }
}

@media (max-width: 1100px) {
    .ai-columns[b-kbm9orkqp8] { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .ai-agent-row[b-kbm9orkqp8] { grid-template-columns: 1fr; }
    .ai-identity .ai-actions[b-kbm9orkqp8] { margin-left: 0; }
}

/* ---------- Compact pass: shared columns + tighter spacing ---------- */
/* Fixed column widths so every provider row lines up, whatever its badges/buttons are. */
.ai-agent-row[b-kbm9orkqp8] {
    grid-template-columns: 330px minmax(200px, 1fr) minmax(200px, 1fr) 130px 250px;
    align-items: start;
    padding: 6px 10px;
}
.ai-agent-row + .ai-agent-row[b-kbm9orkqp8] { margin-top: 2px; }

/* Non-labelled cells drop by the label height (18px) so they sit on the input line. */
.ai-agent-row .ai-provider[b-kbm9orkqp8],
.ai-agent-row .ai-actions[b-kbm9orkqp8],
.ai-agent-row .ai-tested[b-kbm9orkqp8] { padding-top: 18px; min-height: 32px; align-items: center; }
.ai-agent-row .ai-provider[b-kbm9orkqp8] { flex-wrap: nowrap; }
.ai-label[b-kbm9orkqp8] { margin-bottom: 2px; line-height: 16px; }
.ai-model .ai-help[b-kbm9orkqp8] { margin-top: 2px; }

.ai-actions[b-kbm9orkqp8] { flex-wrap: nowrap; }

.ai-card[b-kbm9orkqp8] { padding: 8px 12px; }
.ai-card-head[b-kbm9orkqp8] { margin-bottom: 2px; }
.ai-band[b-kbm9orkqp8] { padding: 8px 12px; }
.ai-band-icon[b-kbm9orkqp8] { width: 38px; height: 38px; }

.ai-identity[b-kbm9orkqp8] { gap: 16px; }
.ai-identity-avatar[b-kbm9orkqp8] { width: 64px; height: 64px; }

.ai-compact[b-kbm9orkqp8] { padding: 8px 0; }

@media (max-width: 1400px) {
    .ai-agent-row[b-kbm9orkqp8] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ai-agent-row .ai-provider[b-kbm9orkqp8], .ai-agent-row .ai-actions[b-kbm9orkqp8], .ai-agent-row .ai-tested[b-kbm9orkqp8] { padding-top: 0; }
}

/* Button labels stay on one line */
.ai-actions[b-kbm9orkqp8]  fluent-button,
.ai-actions[b-kbm9orkqp8]  .fluent-button,
.ai-actions[b-kbm9orkqp8]  button { white-space: nowrap; flex-shrink: 0; }
.ai-agent-row[b-kbm9orkqp8] { grid-template-columns: 300px minmax(190px, 1fr) minmax(190px, 1fr) 120px max-content; }
@media (max-width: 1400px) {
    .ai-agent-row[b-kbm9orkqp8] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Native password box styled like a Fluent input; reveal eye hidden (Edge/IE), so a key can't be shown. */
.ai-secret-input[b-kbm9orkqp8] {
    width: 100%; height: 32px; box-sizing: border-box; padding: 0 10px;
    font: inherit; font-size: 14px; letter-spacing: 1px;
    border: 1px solid var(--colorNeutralStroke1, #d1d5db); border-bottom-color: var(--colorNeutralStrokeAccessible, #616161);
    border-radius: 4px; background: var(--colorNeutralBackground1, #fff); color: inherit;
}
.ai-secret-input:focus[b-kbm9orkqp8] { outline: none; border-bottom: 2px solid var(--colorCompoundBrandStroke, #0f6cbd); }
.ai-secret-input[b-kbm9orkqp8]::placeholder { letter-spacing: normal; color: var(--colorNeutralForeground4, #9ca3af); }
.ai-secret-input[b-kbm9orkqp8]::-ms-reveal, .ai-secret-input[b-kbm9orkqp8]::-ms-clear { display: none; }

/* Short name + full name side by side */
.ai-identity-fields[b-kbm9orkqp8] { max-width: 560px; }
.ai-identity-names[b-kbm9orkqp8] { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; }
@media (max-width: 600px) { .ai-identity-names[b-kbm9orkqp8] { grid-template-columns: 1fr; } }
/* _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);
}

/* .bo-card is passed as Class into FluentCard, so ::deep; everything inside the card is plain
   markup authored in this file and needs no ::deep. Same icon-row language as ExpenseOverview. */
[b-9lqrg1yode] .bo-card {
    padding: 16px;
    width: 100%;
}

.bo-card-head[b-9lqrg1yode] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.bo-card-head h2[b-9lqrg1yode] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.bo-logo-row[b-9lqrg1yode] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.bo-logo-text[b-9lqrg1yode] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 180px;
}

.bo-logo-title[b-9lqrg1yode] {
    font-weight: 600;
}

.bo-grid[b-9lqrg1yode] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 32px;
}

@media (max-width: 620px) {
    .bo-grid[b-9lqrg1yode] {
        grid-template-columns: 1fr;
    }
}

.bo-row[b-9lqrg1yode] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.bo-row-icon[b-9lqrg1yode] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--colorNeutralBackground3, #f0f1f3);
    color: var(--colorNeutralForeground2, #424242);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bo-row-text[b-9lqrg1yode],
.bo-list-text[b-9lqrg1yode] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bo-label[b-9lqrg1yode] {
    font-size: 11px;
    font-weight: 600;
    color: var(--colorNeutralForeground3, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
}

.bo-value[b-9lqrg1yode] {
    font-size: 14px;
    color: var(--colorNeutralForeground1, #1f2937);
    word-break: break-word;
}

.bo-muted[b-9lqrg1yode] {
    font-size: 12px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.bo-list[b-9lqrg1yode] {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
}

.bo-list li[b-9lqrg1yode] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--colorNeutralStroke2, #e1e1e1);
}

.bo-list li:last-child[b-9lqrg1yode] {
    border-bottom: none;
}

.bo-empty[b-9lqrg1yode] {
    padding: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--colorNeutralForeground3, #6b7280);
    border: 1px dashed var(--colorNeutralStroke2, #e1e1e1);
    border-radius: 6px;
}
/* _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);
}

[b-p44rro15nk] .cpm-info-bar {
    margin-top: 8px;
}

/* Compacts DetailCard's own global .card-header/.card-body spacing (app.css), scoped to just this
   page's left details column via the .cp-detail-col ancestor so other pages using DetailCard keep
   their normal spacing. .card-body's gap is set via DetailCard's own inline VerticalGap="10" —
   an !important stylesheet rule is what it takes to win over that inline style. */
[b-p44rro15nk] .cp-detail-col .card-header {
    padding: 8px 16px;
    min-height: auto;
    margin-bottom: 6px;
}

[b-p44rro15nk] .cp-detail-col .card-body {
    padding: 0 16px 10px;
    gap: 6px !important;
}

/* Caps the Branches card to the left "company details" column's own natural height, scrolling its
   content internally instead of growing the page/tab taller than the shorter details column.
   Relies on FluentGrid's flex-row default (siblings on the same wrapped line stretch to match each
   other) — .cp-detail-col is left with no height override, so it alone still reports its full
   content height to the row; .cp-scroll-col overrides the default flex-item min-height:auto down
   to 0 so it's allowed to be *shorter* than its own content once stretched to that same row
   height, and .cp-scroll-body is what actually scrolls inside that capped box. Passed as Class
   into child components (FluentGridItem/FluentCard), so need ::deep. */
[b-p44rro15nk] .cp-scroll-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

[b-p44rro15nk] .cp-scroll-card {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.cp-scroll-body[b-p44rro15nk] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.cpm-grid[b-p44rro15nk] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 12px;
}

.cpm-card[b-p44rro15nk] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
    border-radius: 10px;
    min-width: 0;
}

.cpm-card-top[b-p44rro15nk] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.cpm-card-badge[b-p44rro15nk] {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 10px;
    /* background + text color are set inline via TypeBadgeStyle */
}

.cpm-card-body[b-p44rro15nk] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 180px;
    min-width: 0;
}

.cpm-card-qr-box[b-p44rro15nk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
    border-radius: 8px;
    flex: 0 0 auto;
}

.cpm-card-qr-label[b-p44rro15nk] {
    font-size: 11px;
    font-weight: 700;
    /* text color is set inline via TypeAccentStyle */
}

.cpm-card-qr[b-p44rro15nk] {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 4px;
    flex: 0 0 auto;
}

.cpm-card-actions[b-p44rro15nk] {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    flex: 0 0 auto;
}

/* Branches list (replaced FluentDataGrid 2026-10-02 with a custom card-per-branch list to fit a
   bigger logo and more per-branch detail than a data grid row comfortably shows). Every element
   below is plain HTML authored directly in CompanyProfile.razor, so none need ::deep. */
.cp-branch-header-icon[b-p44rro15nk] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--colorBrandBackground2, #e6f4f4);
    color: var(--colorBrandBackground, #0f6c6c);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cp-branch-list[b-p44rro15nk] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 12px;
}

.cp-branch-row[b-p44rro15nk] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px;
    border: 1px solid var(--neutral-stroke-divider-rest, #e0e0e0);
    border-radius: 12px;
    cursor: pointer;
    flex-wrap: wrap;
}

.cp-branch-row:hover[b-p44rro15nk] {
    border-color: var(--colorNeutralStroke1, #d7d9e0);
    background: var(--colorNeutralBackground2, #fafafa);
}

.cp-branch-avatar-wrap[b-p44rro15nk] {
    flex: 0 0 auto;
}

.cp-branch-avatar[b-p44rro15nk] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    cursor: pointer;
}

.cp-branch-avatar--photo[b-p44rro15nk] {
    object-fit: cover;
    background: var(--colorNeutralBackground3, #e1e1e1);
}

.cp-branch-identity[b-p44rro15nk] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 0 auto;
    min-width: 160px;
}

.cp-branch-name-badge[b-p44rro15nk] {
    display: inline-flex;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--colorBrandBackground2, #e8f1fd);
    color: var(--colorBrandBackground, #2f7ce4);
    font-size: 13px;
    font-weight: 600;
}

.cp-branch-fields[b-p44rro15nk] {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    flex: 1 1 320px;
}

.cp-branch-field[b-p44rro15nk] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 150px;
}

.cp-branch-field-icon[b-p44rro15nk] {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--colorBrandBackground2, #e6f4f4);
    color: var(--colorBrandBackground, #0f6c6c);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.cp-branch-field-text[b-p44rro15nk] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cp-branch-field-label[b-p44rro15nk] {
    font-size: 12px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.cp-branch-field-value[b-p44rro15nk] {
    font-size: 14px;
    color: var(--colorNeutralForeground1, #1f2937);
    word-break: break-word;
}

.cp-branch-meta-item[b-p44rro15nk] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 0 auto;
}

/* Branch card Actions: the shared View button group (RowActionButtons), sized to its content. */
.cp-branch-actions[b-p44rro15nk] { display: flex; align-items: center; }
.cp-branch-actions[b-p44rro15nk]  .rab { width: auto; height: auto; justify-content: flex-start; }
/* _content/PSMS.Web/Components/Pages/CompanyProfile/Dialogs/IntegrationConfigureDialog.razor.rz.scp.css */
.cfg-label[b-1tvxd91r4v] { display: block; font-size: 12px; color: var(--colorNeutralForeground2, #374151); margin-bottom: 4px; }
.cfg-secret[b-1tvxd91r4v] { display: flex; gap: 8px; align-items: center; }
.cfg-mask[b-1tvxd91r4v] {
    flex: 1; min-width: 0; height: 32px; line-height: 32px; padding: 0 10px; letter-spacing: 2px;
    border: 1px solid var(--colorNeutralStroke1, #d1d5db); border-radius: 4px;
    background: var(--colorNeutralBackground2, #f9fafb); overflow: hidden; white-space: nowrap;
}

/* Native password box styled like a Fluent input; reveal eye hidden (Edge/IE), so a key can't be shown. */
.cfg-secret-input[b-1tvxd91r4v] {
    width: 100%; height: 32px; box-sizing: border-box; padding: 0 10px;
    font: inherit; font-size: 14px; letter-spacing: 1px;
    border: 1px solid var(--colorNeutralStroke1, #d1d5db); border-bottom-color: var(--colorNeutralStrokeAccessible, #616161);
    border-radius: 4px; background: var(--colorNeutralBackground1, #fff); color: inherit;
}
.cfg-secret-input:focus[b-1tvxd91r4v] { outline: none; border-bottom: 2px solid var(--colorCompoundBrandStroke, #0f6cbd); }
.cfg-secret-input[b-1tvxd91r4v]::placeholder { letter-spacing: normal; color: var(--colorNeutralForeground4, #9ca3af); }
.cfg-secret-input[b-1tvxd91r4v]::-ms-reveal, .cfg-secret-input[b-1tvxd91r4v]::-ms-clear { display: none; }
/* _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/CompanyProfile/DocumentLayoutsTab.razor.rz.scp.css */
.dl-page[b-rhrnttou8u] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 12px;
}

.dl-page[b-rhrnttou8u]  .dl-muted { color: #616161; }

.dl-muted[b-rhrnttou8u] { color: #616161; font-size: 12px; }

/* ── top bar ── */
.dl-page[b-rhrnttou8u]  .dl-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border-radius: 8px;
}

.dl-top-title[b-rhrnttou8u] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.dl-top-icon[b-rhrnttou8u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: #e8f1fb;
    flex-shrink: 0;
}

.dl-top-icon-sm[b-rhrnttou8u] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
}

.dl-top-name[b-rhrnttou8u] {
    font-size: 18px;
    font-weight: 700;
}

.dl-top-actions[b-rhrnttou8u] {
    display: flex;
    gap: 8px;
}

/* ── two columns ── */
.dl-layout[b-rhrnttou8u] {
    display: grid;
    grid-template-columns: minmax(420px, 1fr) minmax(420px, 1fr);
    gap: 14px;
    align-items: start;
}

@media (max-width: 1200px) {
    .dl-layout[b-rhrnttou8u] { grid-template-columns: 1fr; }
}

.dl-layout[b-rhrnttou8u]  .dl-panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px 16px;
    border-radius: 8px;
    min-width: 0;
}

/* ── numbered steps ── */
.dl-step[b-rhrnttou8u] {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #eef0f2;
}

.dl-step:last-of-type[b-rhrnttou8u] { border-bottom: 0; }

.dl-num[b-rhrnttou8u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #3b82f6;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.dl-step-body[b-rhrnttou8u] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.dl-step-title[b-rhrnttou8u] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
}

.dl-sub[b-rhrnttou8u] { font-weight: 400; }

.dl-info[b-rhrnttou8u] { display: inline-flex; cursor: help; }

.dl-note[b-rhrnttou8u] { margin-top: -2px; }

/* ── chips ── */
.dl-chips[b-rhrnttou8u] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dl-chip[b-rhrnttou8u] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid #d6d9de;
    border-radius: 6px;
    background: #fff;
    color: #242424;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.dl-chip:hover[b-rhrnttou8u] { background: #fafafa; }

.dl-chip.is-on[b-rhrnttou8u] {
    border-color: #0f7b6c;
    background: #e6f4f1;
    color: #0b5a4f;
    font-weight: 600;
}

/* ── template thumbnails ── */
.dl-thumbs[b-rhrnttou8u] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 10px;
}

.dl-thumb-card[b-rhrnttou8u] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
}

.dl-thumb[b-rhrnttou8u] {
    --dl-accent: #3b5ba9;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    aspect-ratio: 3 / 3.4;
    padding: 10px;
    border: 1px solid #d6d9de;
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;
}

.dl-thumb-card.is-on .dl-thumb[b-rhrnttou8u] {
    border-color: #0f7b6c;
    box-shadow: 0 0 0 2px #0f7b6c;
}

.dl-thumb > i[b-rhrnttou8u] {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: #e3e6ea;
}

.dl-thumb > i.short[b-rhrnttou8u] { width: 60%; }

.dl-thumb-head[b-rhrnttou8u] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-bottom: 5px;
    margin-bottom: 3px;
    border-bottom: 1px solid #e3e6ea;
}

.dl-thumb-head.is-center[b-rhrnttou8u] { flex-direction: column; }

.dl-thumb.has-bar .dl-thumb-head[b-rhrnttou8u] {
    margin: -10px -10px 3px;
    padding: 8px 10px;
    border-radius: 5px 5px 0 0;
    background: var(--dl-accent);
}

.dl-thumb-logo[b-rhrnttou8u] {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: #c50f1f;
    flex-shrink: 0;
}

.dl-thumb.has-bar .dl-thumb-logo[b-rhrnttou8u] { background: #fff; }

.dl-thumb-lines[b-rhrnttou8u] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    width: 100%;
}

.dl-thumb-lines i[b-rhrnttou8u] {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: #c9ced6;
}

.dl-thumb-lines i + i[b-rhrnttou8u] { width: 70%; }

.dl-thumb-auto[b-rhrnttou8u] {
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-style: dashed;
    color: #616161;
    font-size: 11px;
    text-align: center;
}

.dl-thumb-name[b-rhrnttou8u] {
    font-size: 12.5px;
    color: #242424;
}

.dl-check[b-rhrnttou8u] {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    border-radius: 50%;
    background: #fff;
}

/* ── sections ── */
.dl-sections[b-rhrnttou8u] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

@media (max-width: 700px) {
    .dl-sections[b-rhrnttou8u] { grid-template-columns: 1fr; }
}

.dl-section[b-rhrnttou8u] {
    border: 1px solid #d6d9de;
    border-radius: 6px;
    background: #fff;
}

.dl-section.is-dragging[b-rhrnttou8u] { opacity: .45; }

.dl-section.is-off .dl-section-name[b-rhrnttou8u] { color: #8a8a8a; }

.dl-section-row[b-rhrnttou8u] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
}

.dl-grip[b-rhrnttou8u] {
    display: inline-flex;
    cursor: grab;
}

.dl-section-name[b-rhrnttou8u] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dl-section-edit[b-rhrnttou8u] {
    padding: 0 10px 10px;
}

.dl-icon-btn[b-rhrnttou8u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: none;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
}

.dl-icon-btn:hover[b-rhrnttou8u] { background: #f0f0f0; }

.dl-icon-boxed[b-rhrnttou8u] {
    width: 34px;
    height: 34px;
    border: 1px solid #d6d9de;
    background: #fff;
}

/* ── footer tab ── */
.dl-list[b-rhrnttou8u] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dl-list-row[b-rhrnttou8u] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dl-toggles[b-rhrnttou8u] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.dl-reset[b-rhrnttou8u] {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
}

.dl-empty[b-rhrnttou8u] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px 0;
    font-size: 13px;
    color: #616161;
}

/* ── preview ── */
.dl-preview-head[b-rhrnttou8u] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
}

.dl-preview-title[b-rhrnttou8u] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.dl-preview-title strong[b-rhrnttou8u] { font-size: 16px; }

.dl-zoom[b-rhrnttou8u] {
    height: 34px;
    padding: 0 8px;
    border: 1px solid #d6d9de;
    border-radius: 6px;
    background: #fff;
    font: inherit;
    font-size: 13px;
}

/* Real 210mm sheets, scaled with the zoom picker. */
.dl-preview[b-rhrnttou8u] {
    overflow: auto;
    max-height: calc(100dvh - 260px);
    min-height: 480px;
    background: #eef0f3;
    border-radius: 6px;
}

.dl-preview[b-rhrnttou8u]  .psms-print-area--preview {
    zoom: var(--dl-zoom, .75);
}

.dl-layout[b-rhrnttou8u]  .dl-preview-card.is-fullscreen {
    position: fixed;
    inset: 16px;
    z-index: 1000;
    box-shadow: 0 12px 40px rgb(0 0 0 / 25%);
}

.dl-layout[b-rhrnttou8u]  .dl-preview-card.is-fullscreen .dl-preview {
    max-height: none;
    flex: 1;
}

/* ── document catalog picker ── */
.dl-search[b-rhrnttou8u] {
    height: 34px;
    padding: 0 10px;
    border: 1px solid #d6d9de;
    border-radius: 6px;
    font: inherit;
    font-size: 13px;
}

.dl-group-label[b-rhrnttou8u] {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #8a8a8a;
}

.dl-soon[b-rhrnttou8u] {
    padding: 0 6px;
    border-radius: 999px;
    background: #fff4ce;
    color: #8a5300;
    font-size: 10px;
    font-weight: 700;
}

/* ── compact searchable document picker ── */
.dl-picker[b-rhrnttou8u] {
    position: relative;
    max-width: 380px;
}

.dl-picker-btn[b-rhrnttou8u] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #d6d9de;
    border-radius: 6px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
}

.dl-picker-btn:hover[b-rhrnttou8u],
.dl-picker-btn.is-open[b-rhrnttou8u] {
    border-color: #0f7b6c;
}

.dl-picker-label[b-rhrnttou8u] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dl-picker-backdrop[b-rhrnttou8u] {
    position: fixed;
    inset: 0;
    z-index: 20;
}

.dl-picker-panel[b-rhrnttou8u] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 21;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border: 1px solid #d6d9de;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgb(0 0 0 / 14%);
}

.dl-picker-list[b-rhrnttou8u] {
    display: flex;
    flex-direction: column;
    max-height: 260px;
    overflow-y: auto;
}

.dl-picker-list .dl-group-label[b-rhrnttou8u] {
    padding: 6px 8px 2px;
}

.dl-picker-item[b-rhrnttou8u] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #242424;
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.dl-picker-item:hover[b-rhrnttou8u] { background: #f3f4f6; }

.dl-picker-item.is-on[b-rhrnttou8u] {
    background: #e6f4f1;
    color: #0b5a4f;
    font-weight: 600;
}

.dl-picker-empty[b-rhrnttou8u] { padding: 8px; }

/* production & images */
.dl-label-sm[b-rhrnttou8u] { margin-top: 2px; font-size: 12px; font-weight: 600; color: #424242; }
.dl-inline[b-rhrnttou8u] { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.dl-warn[b-rhrnttou8u] { padding: 6px 10px; border-radius: 6px; background: #fff4ce; color: #8a5300; font-size: 12px; }
/* _content/PSMS.Web/Components/Pages/CompanyProfile/ReportSettingsTab.razor.rz.scp.css */
.rs-layout[b-yzq8qdksnu] {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(420px, 1.5fr) minmax(360px, 1.3fr);
    gap: 16px;
    align-items: start;
    padding-top: 12px;
}

.rs-layout[b-yzq8qdksnu]  .rs-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
    min-width: 0;
}

.rs-layout[b-yzq8qdksnu]  .rs-muted { color: #616161; }

.rs-layout[b-yzq8qdksnu]  .rs-label {
    display: block;
    margin-top: 16px;
    margin-bottom: 8px;
}

.rs-panel-head[b-yzq8qdksnu] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.rs-panel-head > div[b-yzq8qdksnu],
.rs-section-head > div[b-yzq8qdksnu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ── Template list ── */
.rs-template-list[b-yzq8qdksnu] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rs-template[b-yzq8qdksnu] {
    display: grid;
    grid-template-columns: auto 64px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    cursor: pointer;
}

.rs-template:hover[b-yzq8qdksnu] { background: #fafafa; }

.rs-template.is-selected[b-yzq8qdksnu] {
    background: #eaf6f3;
    border-color: #9fd6c9;
}

.rs-template-copy[b-yzq8qdksnu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.rs-template-copy strong[b-yzq8qdksnu] { font-size: 14px; }
.rs-template-copy span[b-yzq8qdksnu] { font-size: 12px; color: #616161; }

.rs-radio[b-yzq8qdksnu] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid #8a8a8a;
    background: #fff;
    padding: 0;
    cursor: pointer;
}

.rs-radio.is-on[b-yzq8qdksnu] {
    border-color: #0f7b6c;
    box-shadow: inset 0 0 0 3px #fff;
    background: #0f7b6c;
}

.rs-thumb[b-yzq8qdksnu] {
    --rs-accent: #3b5ba9;
    width: 64px;
    height: 76px;
    padding: 6px;
    border: 1px solid #e1e4e8;
    border-radius: 4px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rs-thumb > i[b-yzq8qdksnu] {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: #e3e6ea;
}

.rs-thumb > i.short[b-yzq8qdksnu] { width: 60%; }

.rs-thumb-head[b-yzq8qdksnu] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-bottom: 4px;
    margin-bottom: 2px;
    border-bottom: 1px solid #e3e6ea;
}

.rs-thumb.has-bar .rs-thumb-head[b-yzq8qdksnu] {
    background: var(--rs-accent);
    margin: -6px -6px 2px;
    padding: 6px;
}

.rs-thumb-logocenter[b-yzq8qdksnu] { flex-direction: column; }

.rs-thumb-logo[b-yzq8qdksnu] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--rs-accent);
    flex-shrink: 0;
}

.rs-thumb.has-bar .rs-thumb-logo[b-yzq8qdksnu] { background: #fff; }

.rs-thumb-lines[b-yzq8qdksnu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.rs-thumb-lines i[b-yzq8qdksnu] {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: #c9ced6;
}

.rs-thumb-lines i + i[b-yzq8qdksnu] { width: 70%; }

/* ── Editor ── */
.rs-section-head[b-yzq8qdksnu] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.rs-style-grid[b-yzq8qdksnu] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.rs-style[b-yzq8qdksnu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
}

.rs-style-art[b-yzq8qdksnu] {
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    background: #fafbfc;
    color: #5b6b8c;
}

.rs-art-logocenter[b-yzq8qdksnu] { flex-direction: column; gap: 4px; }
.rs-art-custom[b-yzq8qdksnu] { border-style: dashed; }

.rs-style.is-on .rs-style-art[b-yzq8qdksnu] {
    border-color: #0f7b6c;
    box-shadow: 0 0 0 1px #0f7b6c;
    background: #f2faf8;
}

.rs-art-logo[b-yzq8qdksnu] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: #dde5f5;
    flex-shrink: 0;
}

.rs-art-lines[b-yzq8qdksnu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.rs-art-lines i[b-yzq8qdksnu] {
    display: block;
    height: 5px;
    border-radius: 3px;
    background: #d5dbe5;
}

.rs-art-lines i + i[b-yzq8qdksnu] { width: 70%; }
.rs-art-logocenter .rs-art-lines i[b-yzq8qdksnu] { margin: 0 auto; width: 70%; }

.rs-style-label[b-yzq8qdksnu] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.rs-dot[b-yzq8qdksnu] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid #8a8a8a;
}

.rs-style.is-on .rs-dot[b-yzq8qdksnu] {
    border-color: #0f7b6c;
    background: #0f7b6c;
    box-shadow: inset 0 0 0 3px #fff;
}

.rs-rows[b-yzq8qdksnu] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.rs-row[b-yzq8qdksnu] {
    display: grid;
    grid-template-columns: 180px auto 1fr;
    align-items: center;
    gap: 12px;
}

.rs-row-label[b-yzq8qdksnu] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
}

.rs-row[b-yzq8qdksnu]  .rs-row-input,
.rs-row > .rs-row-input[b-yzq8qdksnu] {
    min-width: 0;
    font-size: 13px;
}

.rs-chips[b-yzq8qdksnu] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rs-chip[b-yzq8qdksnu] {
    padding: 6px 14px;
    border: 1px solid #d1d1d1;
    border-radius: 6px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.rs-chip.is-on[b-yzq8qdksnu] {
    border-color: #0f7b6c;
    background: #eaf6f3;
    color: #0f7b6c;
    font-weight: 600;
}

.rs-swatch[b-yzq8qdksnu] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #d1d1d1;
    cursor: pointer;
    padding: 0;
}

.rs-swatch.is-on[b-yzq8qdksnu] { box-shadow: 0 0 0 2px #242424; }

.rs-swatch-none[b-yzq8qdksnu] {
    background: linear-gradient(135deg, #fff 45%, #c50f1f 45%, #c50f1f 55%, #fff 55%);
}

/* ── Preview ── */
.rs-paper[b-yzq8qdksnu] {
    aspect-ratio: 210 / 297;
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: #fff;
    border: 1px solid #e1e4e8;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    font-size: 10px;
    color: #242424;
    overflow: hidden;
}

.rs-paper.is-landscape[b-yzq8qdksnu] { aspect-ratio: 297 / 210; }

.rs-doc-head[b-yzq8qdksnu] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 10px;
}

.rs-doc-head.is-center[b-yzq8qdksnu] {
    flex-direction: column;
    text-align: center;
    gap: 6px;
}

.rs-doc-head.has-bar[b-yzq8qdksnu] {
    color: #fff;
    margin: -20px -20px 0;
    padding: 16px 20px;
}

.rs-doc-logo[b-yzq8qdksnu] {
    width: 52px;
    height: 52px;
    object-fit: contain;
    flex-shrink: 0;
}

.rs-doc-logo-empty[b-yzq8qdksnu] {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #c8c8c8;
    border-radius: 6px;
    color: #8a8a8a;
}

.rs-doc-info[b-yzq8qdksnu] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.rs-doc-info strong[b-yzq8qdksnu] { font-size: 14px; }

.rs-doc-rule[b-yzq8qdksnu] {
    height: 1px;
    background: #3d3d3d;
}

.rs-doc-date[b-yzq8qdksnu] {
    text-align: right;
    margin-top: 10px;
}

.rs-doc-title[b-yzq8qdksnu] {
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    margin-top: 14px;
}

.rs-doc-sub[b-yzq8qdksnu] {
    text-align: center;
    margin-bottom: 12px;
}

.rs-doc-lines[b-yzq8qdksnu] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rs-doc-lines i[b-yzq8qdksnu],
.rs-doc-table i[b-yzq8qdksnu] {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: #e6e8eb;
}

.rs-doc-table[b-yzq8qdksnu] {
    margin-top: 14px;
    border: 1px solid #e6e8eb;
}

.rs-doc-table > div[b-yzq8qdksnu] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 6px;
    border-top: 1px solid #eef0f2;
}

.rs-doc-table > div.is-head[b-yzq8qdksnu] { background: #d9dcdf; border-top: none; }
.rs-doc-table > div.is-head i[b-yzq8qdksnu] { background: transparent; }

.rs-doc-foot[b-yzq8qdksnu] {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid #3d3d3d;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 9px;
}

.rs-doc-foot > div[b-yzq8qdksnu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rs-doc-foot-right[b-yzq8qdksnu] { text-align: right; }

.rs-actions[b-yzq8qdksnu] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 1366px) {
    .rs-layout[b-yzq8qdksnu] { grid-template-columns: 1fr 1fr; }
    .rs-layout[b-yzq8qdksnu]  .rs-panel:first-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .rs-layout[b-yzq8qdksnu] { grid-template-columns: 1fr; }
    .rs-style-grid[b-yzq8qdksnu] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rs-row[b-yzq8qdksnu] { grid-template-columns: 1fr auto; }
    .rs-row > .rs-row-input[b-yzq8qdksnu],
    .rs-row[b-yzq8qdksnu]  .rs-row-input { grid-column: 1 / -1; }
}

/* ── Full-size A4 export copy (Export PDF) ── */
.rs-export[b-yzq8qdksnu] {
    font-size: 12px;
    color: #242424;
}

.rs-export .rs-doc-head[b-yzq8qdksnu] { gap: 18px; padding-bottom: 14px; }
.rs-export .rs-doc-head.has-bar[b-yzq8qdksnu] { margin: -16mm -16mm 0; padding: 10mm 16mm; }
.rs-export .rs-doc-logo[b-yzq8qdksnu] { width: 80px; height: 80px; }
.rs-export .rs-doc-info[b-yzq8qdksnu] { gap: 3px; }
.rs-export .rs-doc-info strong[b-yzq8qdksnu] { font-size: 20px; }
.rs-export .rs-doc-date[b-yzq8qdksnu] { margin-top: 16px; }
.rs-export .rs-doc-title[b-yzq8qdksnu] { font-size: 22px; margin-top: 22px; }
.rs-export .rs-doc-sub[b-yzq8qdksnu] { font-size: 13px; margin-bottom: 20px; }
.rs-export .rs-doc-lines[b-yzq8qdksnu] { gap: 10px; }
.rs-export .rs-doc-lines i[b-yzq8qdksnu],
.rs-export .rs-doc-table i[b-yzq8qdksnu] { height: 9px; }
.rs-export .rs-doc-table[b-yzq8qdksnu] { margin-top: 22px; }
.rs-export .rs-doc-table > div[b-yzq8qdksnu] { padding: 10px; gap: 18px; }
.rs-export .rs-doc-foot[b-yzq8qdksnu] { font-size: 11px; padding-top: 10px; }

.rs-scope[b-yzq8qdksnu] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px !important;
    color: #616161;
}
/* _content/PSMS.Web/Components/Pages/Crm/CrmOverview.razor.rz.scp.css */
.crm-kpis[b-gkzji8ffz9] { width: 100%; }

.crm-kpis[b-gkzji8ffz9]  .basic-value-card { display: block; width: 100%; height: 100%; }

.crm-row[b-gkzji8ffz9] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}

.crm-row-wide[b-gkzji8ffz9] { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

@media (max-width: 1000px) {
    .crm-row[b-gkzji8ffz9],
    .crm-row-wide[b-gkzji8ffz9] { grid-template-columns: minmax(0, 1fr); }
}

.crm-card[b-gkzji8ffz9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 8px;
    background: var(--colorNeutralBackground1, #fff);
    box-sizing: border-box;
}

.crm-card-head[b-gkzji8ffz9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.crm-title[b-gkzji8ffz9] { font-size: 14px; font-weight: 700; }

.crm-hint[b-gkzji8ffz9] { font-size: 12px; color: var(--colorNeutralForeground3, #6b7280); }

.crm-link[b-gkzji8ffz9] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--colorBrandForegroundLink, #0f6cbd);
    cursor: pointer;
}

.crm-link:hover[b-gkzji8ffz9] { text-decoration: underline; }

/* ── top customers ── */
.crm-table[b-gkzji8ffz9] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.crm-table th[b-gkzji8ffz9] {
    padding: 6px 8px;
    border-bottom: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    font-size: 11px;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    color: var(--colorNeutralForeground3, #6b7280);
}

.crm-table td[b-gkzji8ffz9] {
    padding: 7px 8px;
    border-bottom: 1px solid var(--colorNeutralStroke3, #f0f0f0);
    vertical-align: middle;
    white-space: nowrap;
}

.crm-table tr:last-child td[b-gkzji8ffz9] { border-bottom: 0; }

.crm-table .num[b-gkzji8ffz9] { text-align: right; }

.crm-rank[b-gkzji8ffz9] { width: 24px; font-weight: 700; color: var(--colorNeutralForeground3, #6b7280); }

.crm-avatar[b-gkzji8ffz9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-right: 8px;
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    vertical-align: middle;
}

@media (max-width: 700px) {
    .crm-card:has(.crm-table)[b-gkzji8ffz9] { overflow-x: auto; }
}

/* ── follow-ups ── */
.crm-follow[b-gkzji8ffz9] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.crm-follow li[b-gkzji8ffz9] {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--colorNeutralStroke3, #f0f0f0);
}

.crm-follow li:last-child[b-gkzji8ffz9] { border-bottom: 0; }

.crm-follow-icon[b-gkzji8ffz9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    flex-shrink: 0;
    background: #eef2f7;
    color: #0f6cbd;
}

.crm-type-call[b-gkzji8ffz9] { background: #e8f1fb; color: #0f6cbd; }
.crm-type-quotation[b-gkzji8ffz9] { background: #f1ecfb; color: #8764b8; }
.crm-type-payment[b-gkzji8ffz9] { background: #e6f4f1; color: #0f7b6c; }
.crm-type-pickup[b-gkzji8ffz9] { background: #fdf0e6; color: #ca5010; }

.crm-follow-body[b-gkzji8ffz9] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.crm-follow-top[b-gkzji8ffz9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}
/* _content/PSMS.Web/Components/Pages/CustomerIdentity/CustomerLeads.razor.rz.scp.css */
.leads-summary-grid[b-viaulx2yl1] {
    width: 100%;
}

/* each stat card fills its FluentGrid cell and matches its row's height */
.leads-summary-grid[b-viaulx2yl1]  .basic-value-card {
    display: block;
    width: 100%;
    height: 100%;
}

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

/* Card keeps its rounded corners; the inner container is the horizontal scroller so the
   footer/paginator row below it stays put. */
[b-viaulx2yl1] .leads-grid-card {
    overflow: hidden;
}

.leads-grid-container[b-viaulx2yl1] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* FluentDataGrid (Table mode) renders <table class="fluent-data-grid"> with width:auto and cells
   that clip their overflow — in a narrow container it collapses the columns to unreadable
   slivers. A hard min-width keeps them at full size and lets the container scroll instead. */
.leads-grid-container[b-viaulx2yl1]  table.fluent-data-grid {
    min-width: 720px;
}

.leads-grid-container[b-viaulx2yl1]  th {
    white-space: nowrap;
}

.grid-footer-text[b-viaulx2yl1] {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    color: var(--neutral-foreground-3, #6b7280);
}
/* _content/PSMS.Web/Components/Pages/Dashboard/Dashboard.razor.rz.scp.css */
/* Same 12px rhythm as every other page (their FluentStack VerticalGap="12"). The page header only
   keeps a 4px margin, so the first row adds 8px to land on 12px below it. */
.dashboard-kpi-row[b-0l935a6a0a] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 8px; margin-bottom: 12px; align-items: stretch; }
.dashboard-summary-row[b-0l935a6a0a] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; align-items: stretch; }
.kpi-cell[b-0l935a6a0a] { min-width: 0; display: flex; }
/* flex + stretch (not height:100%) so every card fills its row regardless of how its own
   percentage height resolves; height:auto beats Fluent's own ".fluent-card { height: fit-content }". */
.kpi-cell[b-0l935a6a0a]  > * { display: block; flex: 1 1 auto; width: 100%; min-width: 0; height: auto !important; box-sizing: border-box; }
/* Same 3-column track as the summary row above and the charts row below, so column edges line
   up down the page; Recent Job Orders spans two of them. */
.dashboard-sections[b-0l935a6a0a] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.dashboard-sections[b-0l935a6a0a]  > .fluent-card:first-child { grid-column: span 2; }
/* Fluent sets ".fluent-card { height: fit-content }", which stops a card that is itself the grid
   item from stretching to its row - reset it so cards in one row are equal height. */
.dashboard-sections[b-0l935a6a0a]  > .fluent-card,
.dashboard-charts-grid[b-0l935a6a0a]  > .fluent-card { height: auto !important; width: 100%; min-width: 0; box-sizing: border-box; }
/* ::deep: the class is passed to FluentCard (a child component), so a plain scoped rule never matched it.
   Same panel look as the overview dashboards (css/overview-dashboard.css .ovd-card). */
[b-0l935a6a0a] .dashboard-section { padding: 16px 18px; border-radius: 16px !important; border: 1px solid var(--colorNeutralStroke2, #e5e7eb); }
.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: 15px; font-weight: 700; }
.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(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; align-items: stretch; }
.chart-section[b-0l935a6a0a] { min-height: 0; }
.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], .dashboard-charts-grid[b-0l935a6a0a], .dashboard-sections[b-0l935a6a0a] { grid-template-columns: 1fr; } .dashboard-sections[b-0l935a6a0a]  > .fluent-card:first-child { grid-column: auto; } }
@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/ActiveUsersPage.razor.rz.scp.css */
/* ---- "Last updated" in the page header actions ---- */
.au-updated[b-9ar3ka5bcf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.au-updated[b-9ar3ka5bcf]  svg {
    width: 15px;
    height: 15px;
}

.au-updated-text[b-9ar3ka5bcf] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    font-size: 12px;
}

.au-updated-label[b-9ar3ka5bcf] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--colorNeutralForeground4, #9aa0a8);
}

/* ---- summary stat cards ---- */
.au-summary[b-9ar3ka5bcf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 0 0 14px;
}

.au-sc[b-9ar3ka5bcf] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid var(--colorNeutralStroke2, #e6e8ec);
    background: var(--colorNeutralBackground1, #fff);
}

.au-sc-icon[b-9ar3ka5bcf] {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.au-sc-icon[b-9ar3ka5bcf]  svg {
    width: 22px;
    height: 22px;
}

.au-sc-body[b-9ar3ka5bcf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.au-sc-count[b-9ar3ka5bcf] {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--colorNeutralForeground1, #1f2430);
}

.au-sc-status[b-9ar3ka5bcf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
}

.au-sc-desc[b-9ar3ka5bcf] {
    font-size: 11.5px;
    color: var(--colorNeutralForeground3, #8a90a0);
}

.au-swatch[b-9ar3ka5bcf] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* status palette — shared by the summary cards, swatches and avatars */
.au-sc-online[b-9ar3ka5bcf]  { background: #edf8f1; border-color: #c6e8d3; }
.au-sc-away[b-9ar3ka5bcf]    { background: #fef4e6; border-color: #f4dcb0; }
.au-sc-busy[b-9ar3ka5bcf]    { background: #fdecec; border-color: #f2c9c9; }
.au-sc-offline[b-9ar3ka5bcf] { background: #f2f4f7; border-color: #e0e4ea; }

.au-sc-online  .au-sc-icon[b-9ar3ka5bcf] { background: #d8efe1; color: #16a34a; }
.au-sc-away    .au-sc-icon[b-9ar3ka5bcf] { background: #fbe6c8; color: #d97706; }
.au-sc-busy    .au-sc-icon[b-9ar3ka5bcf] { background: #f8d4d4; color: #dc2626; }
.au-sc-offline .au-sc-icon[b-9ar3ka5bcf] { background: #e4e8ee; color: #64748b; }

.au-swatch.au-online[b-9ar3ka5bcf]  { background: #16a34a; }
.au-swatch.au-away[b-9ar3ka5bcf]    { background: #d97706; }
.au-swatch.au-busy[b-9ar3ka5bcf]    { background: #dc2626; }
.au-swatch.au-offline[b-9ar3ka5bcf] { background: #9aa0a8; }

.au-sc-online  .au-sc-status[b-9ar3ka5bcf] { color: #15803d; }
.au-sc-away    .au-sc-status[b-9ar3ka5bcf] { color: #b45309; }
.au-sc-busy    .au-sc-status[b-9ar3ka5bcf] { color: #b91c1c; }
.au-sc-offline .au-sc-status[b-9ar3ka5bcf] { color: #64748b; }

/* ---- toolbar ---- */
/* flex sizing is set inline on the Fluent inputs (Style="flex: ..."), not here — a Class on
   FluentTextInput / FluentSelect / FluentCheckbox lands on their own rendered element, outside
   this file's scope (same reason MyTasks.razor.css uses ::deep for .mt-search). */
.au-toolbar[b-9ar3ka5bcf] {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px 12px;
    margin: 0 0 14px;
}

/* ---- user cards ---- */
.au-grid[b-9ar3ka5bcf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}

.au-card[b-9ar3ka5bcf] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
}

.au-card.is-you[b-9ar3ka5bcf] {
    border-color: var(--colorBrandStroke1, #7aa7e0);
    box-shadow: inset 0 0 0 1px var(--colorBrandStroke1, #7aa7e0);
}

.au-card-head[b-9ar3ka5bcf] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.au-avatar[b-9ar3ka5bcf] {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #b4356b;
    background: #fde4ee;
}

.au-avatar.au-offline[b-9ar3ka5bcf] { opacity: .65; }

.au-avatar-dot[b-9ar3ka5bcf] {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--colorNeutralBackground1, #fff);
    background: #9aa0a8;
}

.au-avatar.au-online  .au-avatar-dot[b-9ar3ka5bcf] { background: #16a34a; }
.au-avatar.au-away    .au-avatar-dot[b-9ar3ka5bcf] { background: #d97706; }
.au-avatar.au-busy    .au-avatar-dot[b-9ar3ka5bcf] { background: #dc2626; }

.au-id[b-9ar3ka5bcf] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.au-name[b-9ar3ka5bcf] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
}

.au-name-text[b-9ar3ka5bcf] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.au-you[b-9ar3ka5bcf] {
    flex: 0 0 auto;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    background: var(--colorBrandBackground2, #e6f0ff);
    color: var(--colorBrandForeground1, #0f6cbd);
}

.au-role[b-9ar3ka5bcf] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.au-role[b-9ar3ka5bcf]  svg {
    width: 13px;
    height: 13px;
}

/* ---- meta strip (2x2 in a card) ---- */
.au-meta[b-9ar3ka5bcf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    margin-top: 2px;
    padding-top: 12px;
    border-top: 1px solid var(--colorNeutralStroke2, #e6e8ec);
}

.au-meta-cell[b-9ar3ka5bcf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 13px;
    color: var(--colorNeutralForeground1, #242424);
}

/* the value line (second child) — allow long strings like "Android · Chrome" to wrap */
.au-meta-cell > span:nth-child(2)[b-9ar3ka5bcf] {
    overflow-wrap: anywhere;
}

.au-meta-label[b-9ar3ka5bcf] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--colorNeutralForeground3, #8a90a0);
}

.au-meta-label[b-9ar3ka5bcf]  svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}

.au-meta-sub[b-9ar3ka5bcf] {
    font-size: 11px;
    color: var(--colorNeutralForeground3, #9aa0a8);
}

/* ---- empty ---- */
.au-empty[b-9ar3ka5bcf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 16px;
    color: var(--colorNeutralForeground3, #6b7280);
    font-size: 13px;
}
/* _content/PSMS.Web/Components/Pages/DevTools/AssistantBlocksGallery.razor.rz.scp.css */
.abg-grid[b-i7zb739g1c] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.abg-wide[b-i7zb739g1c] { grid-column: 1 / -1; }
.abg-item[b-i7zb739g1c] { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.abg-head[b-i7zb739g1c] { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 12px; color: #6b7280; }
.abg-head code[b-i7zb739g1c] { font-size: 12px; font-weight: 600; color: #5b3fbf; background: #efeafd; padding: 2px 8px; border-radius: 6px; }
@media (max-width: 900px) { .abg-grid[b-i7zb739g1c] { 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/DevTools/TenantAgentMonitor.razor.rz.scp.css */
.ta-proto[b-0x7h15htau] {
    font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
    background: #fff4ce; color: #8a5300; align-self: center;
}

.ta-grid[b-0x7h15htau] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ta-wide[b-0x7h15htau] { grid-column: 1 / -1; }

.ta-card[b-0x7h15htau] {
    background: var(--colorNeutralBackground1, #fff);
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 8px;
    padding: 14px 16px;
    min-width: 0;
}
.ta-card-title[b-0x7h15htau] { font-weight: 600; margin-bottom: 8px; }
.ta-muted[b-0x7h15htau] { font-size: 12px; color: var(--colorNeutralForeground3, #6b7280); }

/* Status */
.ta-status.is-online[b-0x7h15htau] { border-color: #bbf7d0; background: #f0fdf4; }
.ta-status.is-offline[b-0x7h15htau] { border-color: #fecaca; background: #fef2f2; }
.ta-status-head[b-0x7h15htau] { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ta-dot[b-0x7h15htau] { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.is-online .ta-dot[b-0x7h15htau] { background: #16a34a; box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.2); animation: ta-pulse-b-0x7h15htau 1.6s infinite; }
.is-offline .ta-dot[b-0x7h15htau] { background: #dc2626; }
.ta-status-label[b-0x7h15htau] { font-size: 22px; font-weight: 700; line-height: 1.1; }

@keyframes ta-pulse-b-0x7h15htau {
    0%, 100% { box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.25); }
    50% { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0.05); }
}

.ta-facts[b-0x7h15htau] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.ta-facts > div[b-0x7h15htau] { display: flex; flex-direction: column; gap: 2px; }

.ta-beats[b-0x7h15htau] { display: flex; gap: 3px; height: 18px; }
.ta-beat[b-0x7h15htau] { flex: 1; max-width: 14px; border-radius: 2px; }
.ta-beat.ok[b-0x7h15htau] { background: #22c55e; }
.ta-beat.miss[b-0x7h15htau] { background: #f87171; }

/* Rules */
.ta-rules[b-0x7h15htau] { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7; }

/* Dependent action */
.ta-dep[b-0x7h15htau] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ta-dep-name[b-0x7h15htau] { font-weight: 600; }
.ta-dep-note[b-0x7h15htau] { margin-top: 8px; }

/* Simulator */
.ta-sim[b-0x7h15htau] { display: flex; gap: 8px; flex-wrap: wrap; }

/* Checklist */
.ta-check[b-0x7h15htau] { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.ta-pending[b-0x7h15htau] { color: var(--colorNeutralForeground3, #6b7280); }

@media (max-width: 900px) {
    .ta-grid[b-0x7h15htau] { grid-template-columns: 1fr; }
    .ta-facts[b-0x7h15htau] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* _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/Finance/AccountsPayable.razor.rz.scp.css */
.ap-page[b-ys36r1b5ox] { display: flex; flex-direction: column; gap: 14px; width: 100%; }

/* ---- Value cards: total + six aging buckets, green to red ---- */
.ap-cards[b-ys36r1b5ox] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 1400px) {
    .ap-cards[b-ys36r1b5ox] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .ap-cards[b-ys36r1b5ox] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ap-card[b-ys36r1b5ox] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--ap-border);
    border-radius: 10px;
    background: var(--ap-soft);
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
    min-width: 0;
}

.ap-card.is-on[b-ys36r1b5ox] { box-shadow: 0 0 0 2px var(--ap-ink); }

.ap-card--total[b-ys36r1b5ox] { --ap-soft: #eef4ff; --ap-border: #d6e4fb; --ap-tile: #dbe9fd; --ap-ink: #2563eb; }
.ap-card--current[b-ys36r1b5ox] { --ap-soft: #effaf3; --ap-border: #cfeedb; --ap-tile: #d8f1e0; --ap-ink: #16a34a; }
.ap-card--days15to30[b-ys36r1b5ox] { --ap-soft: #fffbea; --ap-border: #fbeab0; --ap-tile: #fdf0c4; --ap-ink: #ca8a04; }
.ap-card--days31to45[b-ys36r1b5ox] { --ap-soft: #fff6e9; --ap-border: #fbdcae; --ap-tile: #fde6c2; --ap-ink: #ea8a00; }
.ap-card--days46to60[b-ys36r1b5ox] { --ap-soft: #fff0e6; --ap-border: #fbcfae; --ap-tile: #fdd9c0; --ap-ink: #ea580c; }
.ap-card--days61to90[b-ys36r1b5ox] { --ap-soft: #fdeeee; --ap-border: #f8c9c9; --ap-tile: #fbd5d5; --ap-ink: #dc2626; }
.ap-card--over90[b-ys36r1b5ox] { --ap-soft: #fce7e7; --ap-border: #f4b4b4; --ap-tile: #f8c4c4; --ap-ink: #b91c1c; }

.ap-card-icon[b-ys36r1b5ox] {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--ap-tile);
}

.ap-card-icon[b-ys36r1b5ox]  svg { fill: var(--ap-ink); }

.ap-card-body[b-ys36r1b5ox] { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.3; }

.ap-card-title[b-ys36r1b5ox] { font-size: 12px; color: var(--colorNeutralForeground2, #424242); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ap-card-value[b-ys36r1b5ox] { font-size: 19px; font-weight: 700; white-space: nowrap; }

.ap-card-sub[b-ys36r1b5ox] { font-size: 12px; color: var(--colorNeutralForeground3, #6b7280); }

/* ---- Ledger ---- */
.ap-ledger[b-ys36r1b5ox] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 10px;
    background: var(--colorNeutralBackground1, #fff);
    overflow: hidden;
}

.ap-ledger-head[b-ys36r1b5ox] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 14px 16px;
}

.ap-ledger-title[b-ys36r1b5ox] { font-size: 16px; font-weight: 700; }

.ap-count[b-ys36r1b5ox] {
    padding: 1px 10px;
    border-radius: 999px;
    background: var(--colorNeutralBackground3, #f0f2f5);
    font-size: 12px;
    font-weight: 600;
}

.ap-head-note[b-ys36r1b5ox] { margin-left: auto; }

.ap-hint[b-ys36r1b5ox] { font-size: 12px; color: var(--colorNeutralForeground3, #6b7280); }

.ap-block[b-ys36r1b5ox] { display: block; }

.ap-empty[b-ys36r1b5ox] { padding: 28px 16px; font-size: 13px; text-align: center; color: var(--colorNeutralForeground3, #6b7280); }

.ap-table-wrap[b-ys36r1b5ox] { overflow-x: auto; }

.ap-table[b-ys36r1b5ox] { width: 100%; border-collapse: collapse; font-size: 13px; }

.ap-table > thead th[b-ys36r1b5ox] {
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    color: var(--colorNeutralForeground2, #424242);
    border-top: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-bottom: 1px solid var(--colorNeutralStroke2, #e5e7eb);
}

.ap-table > tbody > tr > td[b-ys36r1b5ox] { padding: 10px 12px; border-bottom: 1px solid var(--colorNeutralStroke3, #f0f0f0); vertical-align: middle; }

.ap-table > tfoot td[b-ys36r1b5ox] {
    padding: 12px;
    font-weight: 700;
    border-top: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    background: var(--colorNeutralBackground2, #fafafa);
}

/* Aging columns tinted green to red, like the cards. */
.ap-col--current[b-ys36r1b5ox] { background: #f3fbf6; }
.ap-col--days15to30[b-ys36r1b5ox] { background: #fffdf2; }
.ap-col--days31to45[b-ys36r1b5ox] { background: #fff9f0; }
.ap-col--days46to60[b-ys36r1b5ox] { background: #fff5ee; }
.ap-col--days61to90[b-ys36r1b5ox] { background: #fef3f3; }
.ap-col--over90[b-ys36r1b5ox] { background: #fdeded; }

.ap-num[b-ys36r1b5ox] { text-align: right !important; white-space: nowrap; }

.ap-idx[b-ys36r1b5ox] { width: 36px; color: var(--colorNeutralForeground3, #6b7280); }

.ap-total[b-ys36r1b5ox] { font-weight: 700; }

.ap-cust[b-ys36r1b5ox] { display: flex; flex-direction: column; line-height: 1.3; }

.ap-overdue[b-ys36r1b5ox] { color: #dc2626; font-weight: 600; }

.ap-docs-col[b-ys36r1b5ox] { white-space: nowrap; text-align: center !important; }

.ap-link[b-ys36r1b5ox] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    text-align: left;
    color: var(--colorBrandForegroundLink, #0f6cbd);
    cursor: pointer;
}

.ap-link:hover[b-ys36r1b5ox] { text-decoration: underline; }

.ap-row--open > td[b-ys36r1b5ox] { background-color: var(--colorNeutralBackground2, #fafafa); }

/* ---- Expanded documents ---- */
.ap-detail-row > td[b-ys36r1b5ox] { padding: 0 12px 12px !important; background: var(--colorNeutralBackground2, #fafafa); }

.ap-docs[b-ys36r1b5ox] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 8px;
    background: var(--colorNeutralBackground1, #fff);
}

.ap-docs th[b-ys36r1b5ox] {
    padding: 6px 10px;
    font-weight: 600;
    text-align: left;
    color: var(--colorNeutralForeground3, #6b7280);
    border-bottom: 1px solid var(--colorNeutralStroke2, #e5e7eb);
}

.ap-docs td[b-ys36r1b5ox] { padding: 6px 10px; border-bottom: 1px solid var(--colorNeutralStroke3, #f0f0f0); }

.ap-docs tbody tr:last-child td[b-ys36r1b5ox] { border-bottom: 0; }

.ap-tag[b-ys36r1b5ox] { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.ap-tag--current[b-ys36r1b5ox] { background: #d8f1e0; color: #15803d; }
.ap-tag--days15to30[b-ys36r1b5ox] { background: #fdf0c4; color: #a16207; }
.ap-tag--days31to45[b-ys36r1b5ox] { background: #fde6c2; color: #c2410c; }
.ap-tag--days46to60[b-ys36r1b5ox] { background: #fdd9c0; color: #c2410c; }
.ap-tag--days61to90[b-ys36r1b5ox] { background: #fbd5d5; color: #b91c1c; }
.ap-tag--over90[b-ys36r1b5ox] { background: #f8c4c4; color: #991b1b; }
/* _content/PSMS.Web/Components/Pages/Finance/AccountsReceivable.razor.rz.scp.css */
.ar-page[b-uop5j66xhj] { display: flex; flex-direction: column; gap: 14px; width: 100%; }

/* ---- Value cards: total + six aging buckets, green to red ---- */
.ar-cards[b-uop5j66xhj] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 1400px) {
    .ar-cards[b-uop5j66xhj] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .ar-cards[b-uop5j66xhj] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ar-card[b-uop5j66xhj] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--ar-border);
    border-radius: 10px;
    background: var(--ar-soft);
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
    min-width: 0;
}

.ar-card.is-on[b-uop5j66xhj] { box-shadow: 0 0 0 2px var(--ar-ink); }

.ar-card--total[b-uop5j66xhj] { --ar-soft: #eef4ff; --ar-border: #d6e4fb; --ar-tile: #dbe9fd; --ar-ink: #2563eb; }
.ar-card--current[b-uop5j66xhj] { --ar-soft: #effaf3; --ar-border: #cfeedb; --ar-tile: #d8f1e0; --ar-ink: #16a34a; }
.ar-card--days15to30[b-uop5j66xhj] { --ar-soft: #fffbea; --ar-border: #fbeab0; --ar-tile: #fdf0c4; --ar-ink: #ca8a04; }
.ar-card--days31to45[b-uop5j66xhj] { --ar-soft: #fff6e9; --ar-border: #fbdcae; --ar-tile: #fde6c2; --ar-ink: #ea8a00; }
.ar-card--days46to60[b-uop5j66xhj] { --ar-soft: #fff0e6; --ar-border: #fbcfae; --ar-tile: #fdd9c0; --ar-ink: #ea580c; }
.ar-card--days61to90[b-uop5j66xhj] { --ar-soft: #fdeeee; --ar-border: #f8c9c9; --ar-tile: #fbd5d5; --ar-ink: #dc2626; }
.ar-card--over90[b-uop5j66xhj] { --ar-soft: #fce7e7; --ar-border: #f4b4b4; --ar-tile: #f8c4c4; --ar-ink: #b91c1c; }

.ar-card-icon[b-uop5j66xhj] {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--ar-tile);
}

.ar-card-icon[b-uop5j66xhj]  svg { fill: var(--ar-ink); }

.ar-card-body[b-uop5j66xhj] { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.3; }

.ar-card-title[b-uop5j66xhj] { font-size: 12px; color: var(--colorNeutralForeground2, #424242); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ar-card-value[b-uop5j66xhj] { font-size: 19px; font-weight: 700; white-space: nowrap; }

.ar-card-sub[b-uop5j66xhj] { font-size: 12px; color: var(--colorNeutralForeground3, #6b7280); }

/* ---- Ledger ---- */
.ar-ledger[b-uop5j66xhj] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 10px;
    background: var(--colorNeutralBackground1, #fff);
    overflow: hidden;
}

.ar-ledger-head[b-uop5j66xhj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 14px 16px;
}

.ar-ledger-title[b-uop5j66xhj] { font-size: 16px; font-weight: 700; }

.ar-count[b-uop5j66xhj] {
    padding: 1px 10px;
    border-radius: 999px;
    background: var(--colorNeutralBackground3, #f0f2f5);
    font-size: 12px;
    font-weight: 600;
}

.ar-head-note[b-uop5j66xhj] { margin-left: auto; }

.ar-hint[b-uop5j66xhj] { font-size: 12px; color: var(--colorNeutralForeground3, #6b7280); }

.ar-block[b-uop5j66xhj] { display: block; }

.ar-empty[b-uop5j66xhj] { padding: 28px 16px; font-size: 13px; text-align: center; color: var(--colorNeutralForeground3, #6b7280); }

.ar-table-wrap[b-uop5j66xhj] { overflow-x: auto; }

.ar-table[b-uop5j66xhj] { width: 100%; border-collapse: collapse; font-size: 13px; }

.ar-table > thead th[b-uop5j66xhj] {
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    color: var(--colorNeutralForeground2, #424242);
    border-top: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-bottom: 1px solid var(--colorNeutralStroke2, #e5e7eb);
}

.ar-table > tbody > tr > td[b-uop5j66xhj] { padding: 10px 12px; border-bottom: 1px solid var(--colorNeutralStroke3, #f0f0f0); vertical-align: middle; }

.ar-table > tfoot td[b-uop5j66xhj] {
    padding: 12px;
    font-weight: 700;
    border-top: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    background: var(--colorNeutralBackground2, #fafafa);
}

/* Aging columns tinted green to red, like the cards. */
.ar-col--current[b-uop5j66xhj] { background: #f3fbf6; }
.ar-col--days15to30[b-uop5j66xhj] { background: #fffdf2; }
.ar-col--days31to45[b-uop5j66xhj] { background: #fff9f0; }
.ar-col--days46to60[b-uop5j66xhj] { background: #fff5ee; }
.ar-col--days61to90[b-uop5j66xhj] { background: #fef3f3; }
.ar-col--over90[b-uop5j66xhj] { background: #fdeded; }

.ar-num[b-uop5j66xhj] { text-align: right !important; white-space: nowrap; }

.ar-idx[b-uop5j66xhj] { width: 36px; color: var(--colorNeutralForeground3, #6b7280); }

.ar-total[b-uop5j66xhj] { font-weight: 700; }

.ar-cust[b-uop5j66xhj] { display: flex; flex-direction: column; line-height: 1.3; }

.ar-overdue[b-uop5j66xhj] { color: #dc2626; font-weight: 600; }

.ar-docs-col[b-uop5j66xhj] { white-space: nowrap; text-align: center !important; }

.ar-link[b-uop5j66xhj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    text-align: left;
    color: var(--colorBrandForegroundLink, #0f6cbd);
    cursor: pointer;
}

.ar-link:hover[b-uop5j66xhj] { text-decoration: underline; }

.ar-row--open > td[b-uop5j66xhj] { background-color: var(--colorNeutralBackground2, #fafafa); }

/* ---- Expanded documents ---- */
.ar-detail-row > td[b-uop5j66xhj] { padding: 0 12px 12px !important; background: var(--colorNeutralBackground2, #fafafa); }

.ar-docs[b-uop5j66xhj] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 8px;
    background: var(--colorNeutralBackground1, #fff);
}

.ar-docs th[b-uop5j66xhj] {
    padding: 6px 10px;
    font-weight: 600;
    text-align: left;
    color: var(--colorNeutralForeground3, #6b7280);
    border-bottom: 1px solid var(--colorNeutralStroke2, #e5e7eb);
}

.ar-docs td[b-uop5j66xhj] { padding: 6px 10px; border-bottom: 1px solid var(--colorNeutralStroke3, #f0f0f0); }

.ar-docs tbody tr:last-child td[b-uop5j66xhj] { border-bottom: 0; }

.ar-tag[b-uop5j66xhj] { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.ar-tag--current[b-uop5j66xhj] { background: #d8f1e0; color: #15803d; }
.ar-tag--days15to30[b-uop5j66xhj] { background: #fdf0c4; color: #a16207; }
.ar-tag--days31to45[b-uop5j66xhj] { background: #fde6c2; color: #c2410c; }
.ar-tag--days46to60[b-uop5j66xhj] { background: #fdd9c0; color: #c2410c; }
.ar-tag--days61to90[b-uop5j66xhj] { background: #fbd5d5; color: #b91c1c; }
.ar-tag--over90[b-uop5j66xhj] { background: #f8c4c4; color: #991b1b; }
.ar-tag--pending[b-uop5j66xhj] { background: var(--colorNeutralBackground3, #f0f2f5); color: var(--colorNeutralForeground2, #424242); }
/* _content/PSMS.Web/Components/Pages/Finance/FinanceOverview.razor.rz.scp.css */
/* Plain wrapper so every rule here (including the ::deep ones) has a scoped ancestor - the page's
   children are mostly Fluent components, which don't carry this file's scope attribute. */
.fo-page[b-z38em61cgg] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* Header chips: month stepper + branch. */
.fo-chip[b-z38em61cgg] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--colorNeutralStroke2, #e1e1e1);
    border-radius: 8px;
    padding: 6px 12px;
    min-height: 44px;
    background: var(--colorNeutralBackground1, #fff);
}

.fo-chip-value[b-z38em61cgg] {
    font-weight: 600;
    font-size: 13px;
}

.fo-chip-month[b-z38em61cgg] {
    min-width: 120px;
}

/* Stat tiles: tinted background per metric, matching the icon tile inside (same look as the
   Employees list tiles). */
.fo-stats[b-z38em61cgg] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.fo-stat[b-z38em61cgg] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    border: 1px solid var(--fo-border);
    border-radius: 10px;
    background: var(--fo-soft);
    min-width: 0;
}

.fo-stat--green[b-z38em61cgg] { --fo-soft: #f1faf4; --fo-border: #d7efdf; --fo-tile: #d8f1e0; --fo-ink: #16a34a; --fo-value: #0f766e; }
.fo-stat--blue[b-z38em61cgg] { --fo-soft: #f1f6fe; --fo-border: #dbe8fb; --fo-tile: #dbe9fd; --fo-ink: #2563eb; --fo-value: #1f2a44; }
.fo-stat--purple[b-z38em61cgg] { --fo-soft: #f7f3fe; --fo-border: #e6dcfb; --fo-tile: #e9dffc; --fo-ink: #7c3aed; --fo-value: #1f2a44; }
.fo-stat--red[b-z38em61cgg] { --fo-soft: #fef4f4; --fo-border: #fbdcdc; --fo-tile: #fcdada; --fo-ink: #dc2626; --fo-value: #991b1b; }

.fo-stat-icon[b-z38em61cgg] {
    display: grid;
    place-items: center;
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background: var(--fo-tile);
    color: var(--fo-ink);
}

.fo-stat-icon[b-z38em61cgg]  svg {
    fill: var(--fo-ink);
}

.fo-stat-body[b-z38em61cgg] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.fo-stat-title[b-z38em61cgg],
.fo-stat-sub[b-z38em61cgg] {
    font-size: 13px;
    color: var(--colorNeutralForeground2, #424242);
}

.fo-stat-value[b-z38em61cgg] {
    font-size: 26px;
    font-weight: 700;
    color: var(--fo-value);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fo-delta[b-z38em61cgg] {
    display: inline-block;
    padding: 1px 8px;
    margin-right: 4px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 12px;
}

.fo-delta--up[b-z38em61cgg] {
    background: #d8f1e0;
    color: #15803d;
}

.fo-delta--down[b-z38em61cgg] {
    background: #fcdada;
    color: #b91c1c;
}

/* A FluentGridItem has to be a flex container itself for its card's height:100% to resolve, so
   cards in the same row match the tallest one (same fix as ProductionAnalytics' pa-grid-item). */
[b-z38em61cgg] .fo-grid-item {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

[b-z38em61cgg] .fo-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Donuts: conic-gradient ring with a white hole for the centre label. */
.fo-donut-row[b-z38em61cgg] {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    flex: 1;
}

.fo-donut[b-z38em61cgg] {
    position: relative;
    flex: 0 0 150px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

.fo-donut--lg[b-z38em61cgg] {
    flex-basis: 180px;
    width: 180px;
    height: 180px;
}

.fo-donut-hole[b-z38em61cgg] {
    position: absolute;
    inset: 18%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--colorNeutralBackground1, #fff);
    line-height: 1.2;
}

.fo-donut-value[b-z38em61cgg] {
    font-size: 18px;
    font-weight: 700;
    color: var(--colorNeutralForeground1, #1f2a44);
}

.fo-donut-label[b-z38em61cgg] {
    font-size: 12px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.fo-legend[b-z38em61cgg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 220px;
    min-width: 0;
}

.fo-legend-row[b-z38em61cgg] {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto 48px;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.fo-dot[b-z38em61cgg] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.fo-legend-name[b-z38em61cgg] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fo-legend-amount[b-z38em61cgg] {
    font-weight: 600;
    text-align: right;
}

.fo-legend-percent[b-z38em61cgg] {
    color: var(--colorNeutralForeground3, #6b7280);
    text-align: right;
}

/* Payroll by Department bars. */
.fo-dept-list[b-z38em61cgg] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fo-dept-row[b-z38em61cgg] {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.fo-dept-name[b-z38em61cgg] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fo-dept-fill[b-z38em61cgg] {
    height: 14px;
    border-radius: 3px;
}

.fo-dept-count[b-z38em61cgg] {
    font-weight: 600;
}

/* Top payroll cost by employee. */
.fo-top-list[b-z38em61cgg] {
    display: flex;
    flex-direction: column;
}

.fo-top-row[b-z38em61cgg] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--colorNeutralStroke2, #f0f0f0);
}

.fo-top-row:last-child[b-z38em61cgg] {
    border-bottom: none;
}

.fo-avatar[b-z38em61cgg] {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
}

.fo-top-text[b-z38em61cgg] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    line-height: 1.35;
}

.fo-top-name[b-z38em61cgg] {
    font-weight: 600;
    font-size: 13px;
    color: var(--colorNeutralForeground1, #1f2a44);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fo-top-name:hover[b-z38em61cgg] {
    color: var(--colorBrandForeground1, #0f6cbd);
    text-decoration: underline;
}

.fo-top-sub[b-z38em61cgg] {
    font-size: 12px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.fo-top-amount[b-z38em61cgg] {
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}

/* Recent payroll runs. */
.fo-table-container[b-z38em61cgg] {
    overflow-x: auto;
}

.fo-table[b-z38em61cgg] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.fo-table th[b-z38em61cgg] {
    text-align: left;
    color: var(--colorNeutralForeground3, #6b7280);
    font-weight: 600;
    padding: 8px;
    background: var(--colorNeutralBackground2, #fafafa);
    border-bottom: 1px solid var(--colorNeutralStroke2, #e1e1e1);
    white-space: nowrap;
}

.fo-table td[b-z38em61cgg] {
    padding: 6px 8px;
    border-bottom: 1px solid var(--colorNeutralStroke2, #f0f0f0);
    white-space: nowrap;
}

.fo-table .fo-col-no[b-z38em61cgg] {
    width: 28px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.fo-table .fo-align-end[b-z38em61cgg] {
    text-align: right;
}

.fo-table .fo-align-center[b-z38em61cgg] {
    text-align: center;
}

/* Upcoming schedules timeline. */
.fo-schedule[b-z38em61cgg] {
    display: flex;
    flex-direction: column;
}

.fo-schedule-row[b-z38em61cgg] {
    position: relative;
    display: grid;
    grid-template-columns: 12px 120px 40px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.fo-schedule--encoding[b-z38em61cgg] { --fo-tone: #2563eb; --fo-tone-soft: #dbe9fd; }
.fo-schedule--review[b-z38em61cgg] { --fo-tone: #ea8a00; --fo-tone-soft: #fdecc8; }
.fo-schedule--processing[b-z38em61cgg] { --fo-tone: #7c3aed; --fo-tone-soft: #e9dffc; }
.fo-schedule--paydate[b-z38em61cgg] { --fo-tone: #16a34a; --fo-tone-soft: #d8f1e0; }

.fo-schedule-marker[b-z38em61cgg] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--fo-tone);
    background: var(--colorNeutralBackground1, #fff);
    box-sizing: border-box;
    z-index: 1;
}

/* Connector line between one marker and the next. */
.fo-schedule-row:not(:last-child)[b-z38em61cgg]::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    height: 100%;
    width: 2px;
    background: var(--colorNeutralStroke2, #e1e1e1);
}

.fo-schedule-date[b-z38em61cgg] {
    font-size: 13px;
    color: var(--colorNeutralForeground2, #424242);
    white-space: nowrap;
}

.fo-schedule-icon[b-z38em61cgg] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--fo-tone-soft);
}

.fo-schedule-icon[b-z38em61cgg]  svg {
    fill: var(--fo-tone);
}

.fo-schedule-text[b-z38em61cgg] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

.fo-schedule-title[b-z38em61cgg] {
    font-weight: 600;
    font-size: 13px;
}

.fo-schedule-sub[b-z38em61cgg] {
    font-size: 12px;
    color: var(--colorNeutralForeground3, #6b7280);
}

@media (max-width: 1199.98px) {
    .fo-stats[b-z38em61cgg] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599.98px) {
    .fo-stats[b-z38em61cgg] {
        grid-template-columns: minmax(0, 1fr);
    }

    .fo-schedule-row[b-z38em61cgg] {
        grid-template-columns: 12px 40px minmax(0, 1fr);
    }

    .fo-schedule-date[b-z38em61cgg] {
        grid-column: 3;
        grid-row: 1;
    }

    .fo-schedule-icon[b-z38em61cgg] {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .fo-schedule-text[b-z38em61cgg] {
        grid-column: 3;
        grid-row: 2;
    }
}

/* Finance-only additions (everything above mirrors PayrollOverview.razor.css). */
.fo-stat-split[b-z38em61cgg] {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    gap: 0 18px;
    font-size: 13px;
    color: var(--colorNeutralForeground2, #424242);
}

.fo-stat-split span:nth-child(even)[b-z38em61cgg] {
    font-weight: 600;
    text-align: right;
}

.fo-accounts[b-z38em61cgg] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fo-account[b-z38em61cgg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--colorNeutralStroke2, #e1e1e1);
    border-radius: 8px;
    font-size: 13px;
}

.fo-account-balance[b-z38em61cgg] {
    font-weight: 600;
    white-space: nowrap;
}
/* _content/PSMS.Web/Components/Pages/Help/HelpTutorials.razor.rz.scp.css */
.ht-page[b-mny900t06r] { display: flex; flex-direction: column; gap: 16px; width: 100%; }

/* ---- Hero ---- */
.ht-hero[b-mny900t06r] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 0;
    padding: 14px 24px;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(100deg, #f8fbff 0%, #eef5ff 45%, #dbeafe 100%);
}

.ht-hero-text[b-mny900t06r] { position: relative; z-index: 1; }

.ht-eyebrow[b-mny900t06r] { font-size: 12px; font-weight: 600; color: #1e293b; }

.ht-hero h1[b-mny900t06r] { margin: 2px 0 4px; font-size: 24px; font-weight: 800; color: #0f172a; }

.ht-hero p[b-mny900t06r] { margin: 0; font-size: 13px; color: #334155; }

.ht-hero-art[b-mny900t06r] { position: relative; display: flex; flex-shrink: 0; align-items: center; gap: 10px; }

.ht-scribble[b-mny900t06r] { font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; font-size: 12px; line-height: 1.3; color: #1e293b; transform: rotate(-8deg); }

.ht-arrow[b-mny900t06r] { width: 50px; margin-top: 18px; }

.ht-screen[b-mny900t06r] {
    position: relative;
    width: 170px;
    height: 92px;
    overflow: hidden;
    border: 5px solid #1e3a5f;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 20px 40px rgb(30 58 138 / 25%);
    transform: perspective(700px) rotateY(-12deg);
}

.ht-screen-bar[b-mny900t06r] { display: flex; gap: 4px; padding: 6px 8px; background: #f1f5f9; }

.ht-screen-bar i[b-mny900t06r] { width: 6px; height: 6px; border-radius: 50%; background: #f87171; }

.ht-screen-bar i:nth-child(2)[b-mny900t06r] { background: #fbbf24; }

.ht-screen-bar i:nth-child(3)[b-mny900t06r] { background: #34d399; }

.ht-screen-body[b-mny900t06r] { display: flex; gap: 8px; padding: 8px; }

.ht-screen-side[b-mny900t06r],
.ht-screen-main[b-mny900t06r] { display: flex; flex-direction: column; gap: 7px; }

.ht-screen-side[b-mny900t06r] { width: 50px; }

.ht-screen-main[b-mny900t06r] { flex: 1; }

.ht-screen-body b[b-mny900t06r],
.ht-float b[b-mny900t06r] { display: block; height: 7px; border-radius: 4px; background: #dbeafe; }

.ht-screen-side b[b-mny900t06r] { background: #e2e8f0; }

.ht-screen-body b.w60[b-mny900t06r],
.ht-float b.w60[b-mny900t06r] { width: 60%; }

.ht-screen-body b.w40[b-mny900t06r] { width: 40%; }

.ht-play svg[b-mny900t06r] { width: 20px; height: 20px; }

.ht-play[b-mny900t06r] {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #0f6cbd;
    box-shadow: 0 0 0 6px rgb(15 108 189 / 18%);
    transform: translate(-50%, -50%);
    animation: ht-pulse-b-mny900t06r 2s ease-in-out infinite;
}

@keyframes ht-pulse-b-mny900t06r { 50% { box-shadow: 0 0 0 16px rgb(15 108 189 / 8%); } }

.ht-float[b-mny900t06r] {
    position: absolute;
    right: -10px;
    bottom: -8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 64px;
    padding: 6px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 24px rgb(30 58 138 / 20%);
}

.ht-float i[b-mny900t06r] { width: 14px; height: 14px; border-radius: 50%; background: #0f6cbd; }

/* ---- Filters ---- */
.ht-filters[b-mny900t06r] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 12px;
    background: var(--colorNeutralBackground1, #fff);
}

.ht-filter-row[b-mny900t06r] { display: flex; flex-wrap: wrap; gap: 12px; }

.ht-search[b-mny900t06r] {
    display: flex;
    flex: 1 1 320px;
    align-items: center;
    gap: 10px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--colorNeutralStroke1, #d1d5db);
    border-radius: 8px;
    background: #fff;
}

.ht-search:focus-within[b-mny900t06r] { border-color: #0f6cbd; box-shadow: 0 0 0 3px #dbeafe; }

.ht-search input[b-mny900t06r] { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 13px; background: transparent; }

.ht-sort[b-mny900t06r] { flex: 0 0 200px; height: 34px; padding: 0 12px; border: 1px solid var(--colorNeutralStroke1, #d1d5db); border-radius: 8px; font: inherit; font-size: 13px; background: #fff; }

.ht-chips[b-mny900t06r] { display: flex; flex-wrap: wrap; gap: 8px; }

.ht-chip[b-mny900t06r] {
    padding: 4px 14px;
    border: 1px solid var(--colorNeutralStroke2, #e1e1e1);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: 14px;
    color: #1e293b;
    cursor: pointer;
}

.ht-chip:hover[b-mny900t06r] { border-color: #0f6cbd; }

.ht-chip.is-on[b-mny900t06r] { border-color: #0f6cbd; background: #0f6cbd; color: #fff; font-weight: 600; }

/* ---- Section head ---- */
.ht-section-head[b-mny900t06r] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }

.ht-section-head h2[b-mny900t06r] { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 19px; font-weight: 700; }

.ht-count[b-mny900t06r] { padding: 2px 10px; border-radius: 8px; background: var(--colorNeutralBackground3, #eef0f3); font-size: 14px; font-weight: 600; }

.ht-back[b-mny900t06r] { padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: #0f6cbd; cursor: pointer; }

.ht-spacer[b-mny900t06r] { flex: 1; }

.ht-view[b-mny900t06r] { display: inline-flex; gap: 6px; }

.ht-view button[b-mny900t06r] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--colorNeutralStroke2, #e1e1e1);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.ht-view button.is-on[b-mny900t06r] { border-color: #0f6cbd; background: #0f6cbd; color: #fff; font-weight: 600; }

/* ---- Cards ---- */
.ht-cards[b-mny900t06r] { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }

.ht-cards.is-list[b-mny900t06r] { grid-template-columns: minmax(0, 1fr); gap: 8px; }

.ht-card[b-mny900t06r] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 110px;
    padding: 18px 18px 18px 20px;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 12px;
    background: var(--colorNeutralBackground1, #fff);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.ht-card:hover[b-mny900t06r] { border-color: #93c5fd; box-shadow: 0 8px 20px rgb(15 23 42 / 8%); transform: translateY(-1px); }

.ht-cards.is-list .ht-card[b-mny900t06r] { min-height: 0; padding: 12px 16px; }

.ht-card-icon[b-mny900t06r] { display: grid; flex-shrink: 0; place-items: center; width: 64px; height: 64px; border-radius: 12px; }

.ht-card-icon[b-mny900t06r]  svg { width: 30px; height: 30px; }

.ht-cards.is-list .ht-card-icon[b-mny900t06r] { width: 44px; height: 44px; }

.ht-cards.is-list .ht-card-icon[b-mny900t06r]  svg { width: 22px; height: 22px; }

.ht-card-text[b-mny900t06r] { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; font-size: 14px; color: #475569; }

.ht-card-text strong[b-mny900t06r] { font-size: 17px; color: #0f172a; }

.ht-card-module[b-mny900t06r] { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #0f6cbd; }

.ht-card-side[b-mny900t06r] { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; align-self: stretch; gap: 10px; }

.ht-cards.is-list .ht-card-side[b-mny900t06r] { flex-direction: row; align-items: center; }

.ht-pill[b-mny900t06r] { padding: 3px 10px; border-radius: 999px; background: #f1f5f9; font-size: 12px; color: #475569; white-space: nowrap; }

.ht-pill--demo[b-mny900t06r] { background: #fef3c7; font-weight: 600; color: #92400e; }

/* ---- FAQ + contact ---- */
.ht-faqs[b-mny900t06r] { display: flex; flex-direction: column; gap: 6px; }

.ht-faq[b-mny900t06r] { border: 1px solid var(--colorNeutralStroke2, #e5e7eb); border-radius: 8px; background: var(--colorNeutralBackground1, #fff); }

.ht-faq summary[b-mny900t06r] { display: flex; align-items: center; gap: 10px; padding: 12px; font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }

.ht-faq summary[b-mny900t06r]::-webkit-details-marker { display: none; }

.ht-faq p[b-mny900t06r] { margin: 0; padding: 0 12px 12px 38px; font-size: 13px; color: var(--colorNeutralForeground2, #424242); }

.ht-muted[b-mny900t06r] { font-size: 12px; color: var(--colorNeutralForeground3, #6b7280); }

.ht-empty[b-mny900t06r] {
    padding: 20px;
    border: 1px dashed var(--colorNeutralStroke2, #e1e1e1);
    border-radius: 6px;
    font-size: 13px;
    text-align: center;
    color: var(--colorNeutralForeground3, #6b7280);
}

.ht-contact[b-mny900t06r] { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 8px; background: #e8f1fe; color: #1e3a8a; }

@media (max-width: 1000px) {
    .ht-scribble[b-mny900t06r],
    .ht-arrow[b-mny900t06r] { display: none; }
}

@media (max-width: 760px) {
    .ht-hero[b-mny900t06r] { padding: 22px 20px; }
    .ht-hero h1[b-mny900t06r] { font-size: 26px; }
    .ht-hero-art[b-mny900t06r] { display: none; }
    .ht-sort[b-mny900t06r] { flex: 1 1 100%; }
    .ht-cards[b-mny900t06r] { grid-template-columns: minmax(0, 1fr); }
}
/* _content/PSMS.Web/Components/Pages/Help/TutorialOverlay.razor.rz.scp.css */
/* Fills the whole viewport, above the app's navigation (top layer). */
.tov-dialog[b-2mfhk4jl6d] {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--colorNeutralBackground2, #f5f5f5);
    overflow: hidden;
}

.tov-dialog[b-2mfhk4jl6d]::backdrop {
    background: rgba(17, 24, 39, 0.6);
}

.tov-panel[b-2mfhk4jl6d] {
    box-sizing: border-box;
    height: 100%;
    padding: 0;
    overflow-y: auto;
}
/* _content/PSMS.Web/Components/Pages/Help/TutorialPlayer.razor.rz.scp.css */
.tp-page[b-z2vn86yyxp] { display: flex; flex-direction: column; gap: 8px; width: 100%; }

.tp-head[b-z2vn86yyxp] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 6px 20px;
    padding: 8px 14px;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 10px;
    background: var(--colorNeutralBackground1, #fff);
}

.tp-head h1[b-z2vn86yyxp] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 17px; font-weight: 800; line-height: 1.3; }

.tp-head p[b-z2vn86yyxp] { margin: 0; font-size: 12px; color: var(--colorNeutralForeground3, #6b7280); }

.tp-badge[b-z2vn86yyxp] { padding: 1px 8px; border-radius: 999px; background: #fef3c7; font-size: 11px; line-height: 1.5; font-weight: 600; color: #92400e; }

.tp-meta[b-z2vn86yyxp] { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 12px; color: var(--colorNeutralForeground2, #424242); }

.tp-meta > span[b-z2vn86yyxp] { display: inline-flex; align-items: center; gap: 6px; }

.tp-demo-mode[b-z2vn86yyxp] { display: inline-flex; align-items: center; gap: 8px; padding-left: 14px; line-height: 1.25; border-left: 1px solid var(--colorNeutralStroke2, #e5e7eb); line-height: 1.3; }

.tp-switch[b-z2vn86yyxp] { position: relative; display: inline-block; flex-shrink: 0; width: 32px; height: 18px; border-radius: 999px; background: #0f6cbd; }

.tp-switch span[b-z2vn86yyxp] { position: absolute; top: 3px; right: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }

.tp-muted[b-z2vn86yyxp] { font-size: 12px; color: var(--colorNeutralForeground3, #6b7280); }

.tp-layout[b-z2vn86yyxp] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

.tp-panel[b-z2vn86yyxp] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 10px;
    background: var(--colorNeutralBackground1, #fff);
}

/* Modules */
.tp-search[b-z2vn86yyxp] { display: flex; align-items: center; gap: 6px; height: 32px; margin-bottom: 6px; padding: 0 10px; border: 1px solid var(--colorNeutralStroke1, #d1d1d1); border-radius: 6px; }

.tp-search input[b-z2vn86yyxp] { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 13px; background: transparent; }

.tp-module[b-z2vn86yyxp] { display: flex; flex-direction: column; border-radius: 8px; }

.tp-module.is-on[b-z2vn86yyxp] { background: #f0f6ff; }

.tp-module-row[b-z2vn86yyxp] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 8px;
    background: none;
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.tp-module-row:hover[b-z2vn86yyxp] { background: var(--colorNeutralBackground2, #f5f5f5); }

.tp-module.is-on .tp-module-name[b-z2vn86yyxp] { font-weight: 700; color: #0f6cbd; }

.tp-module-icon[b-z2vn86yyxp] { display: inline-grid; flex-shrink: 0; place-items: center; width: 30px; height: 30px; border-radius: 8px; }

.tp-module-name[b-z2vn86yyxp] { flex: 1; }

.tp-guide-link[b-z2vn86yyxp] { display: block; margin: 0 6px 2px 48px; padding: 4px 8px; border-radius: 6px; font-size: 13px; color: var(--colorNeutralForeground2, #424242); text-decoration: none; }

.tp-guide-link:hover[b-z2vn86yyxp] { background: #e2ecfb; }

.tp-guide-link.is-on[b-z2vn86yyxp] { background: #0f6cbd; color: #fff; font-weight: 600; }

/* Steps */
.tp-steps-head[b-z2vn86yyxp] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 15px; }

.tp-step-list[b-z2vn86yyxp] { position: relative; margin: 0; padding: 0; list-style: none; }

.tp-step-list li[b-z2vn86yyxp] {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 10px 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .2s;
}

.tp-step-list li:not(:last-child)[b-z2vn86yyxp]::after {
    content: "";
    position: absolute;
    top: 40px;
    bottom: -6px;
    left: 21px;
    width: 2px;
    background: var(--colorNeutralStroke2, #e5e7eb);
}

.tp-step-list li:hover[b-z2vn86yyxp] { background: var(--colorNeutralBackground2, #f5f5f5); }

.tp-step-list li.is-on[b-z2vn86yyxp] { background: #e8f1fe; }

.tp-step-list li > span:last-child[b-z2vn86yyxp] { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }

.tp-step-list li.is-on strong[b-z2vn86yyxp] { color: #0f6cbd; }

.tp-step-no[b-z2vn86yyxp] {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #94a3b8;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    z-index: 1;
}

.tp-step-list li.is-on .tp-step-no[b-z2vn86yyxp] { background: #0f6cbd; box-shadow: 0 0 0 4px #cfe1fb; }

.tp-step-list li.is-done .tp-step-no[b-z2vn86yyxp] { background: #16a34a; }

/* Stage */
.tp-stage-wrap[b-z2vn86yyxp] { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--colorNeutralStroke2, #e5e7eb); border-radius: 10px; background: var(--colorNeutralBackground1, #fff); }

.tp-stage[b-z2vn86yyxp] { min-width: 0; }

.tp-static[b-z2vn86yyxp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 360px;
    padding: 24px;
    border: 1px dashed var(--colorNeutralStroke2, #e1e1e1);
    border-radius: 10px;
    background: #f8fafc;
    text-align: center;
}

.tp-static p[b-z2vn86yyxp] { max-width: 460px; margin: 0; font-size: 17px; line-height: 1.5; }

.tp-static-no[b-z2vn86yyxp] { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #0f6cbd; font-size: 22px; font-weight: 800; color: #fff; }

.tp-foot[b-z2vn86yyxp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding: 14px 16px;
    border-radius: 10px;
    background: #eef5ff;
}

.tp-foot-no[b-z2vn86yyxp] { display: grid; flex-shrink: 0; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #0f6cbd; font-weight: 800; color: #fff; }

.tp-foot-text[b-z2vn86yyxp] { display: flex; flex: 1 1 240px; flex-direction: column; gap: 2px; min-width: 0; }

.tp-foot-text strong[b-z2vn86yyxp] { font-size: 18px; }

.tp-foot-count[b-z2vn86yyxp] { font-size: 12px; font-weight: 600; color: #0f6cbd; }

.tp-foot-actions[b-z2vn86yyxp] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.tp-speed[b-z2vn86yyxp] { height: 32px; padding: 0 8px; border: 1px solid var(--colorNeutralStroke1, #d1d1d1); border-radius: 6px; font: inherit; font-size: 13px; background: #fff; }

.tp-try[b-z2vn86yyxp] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; }

.tp-try a[b-z2vn86yyxp] { font-weight: 600; color: var(--colorBrandForegroundLink, #0f6cbd); }

/* Slim step column */
.tp-steps[b-z2vn86yyxp] { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid var(--colorNeutralStroke2, #e5e7eb); border-radius: 10px; background: var(--colorNeutralBackground1, #fff); }

.tp-steps .tp-step-list li[b-z2vn86yyxp] { gap: 8px; padding: 7px 6px 10px; font-size: 13px; align-items: center; }

.tp-steps .tp-step-list li:not(:last-child)[b-z2vn86yyxp]::after { top: 32px; left: 17px; }

.tp-steps .tp-step-no[b-z2vn86yyxp] { width: 24px; height: 24px; font-size: 12px; }

.tp-steps .tp-step-list li.is-on span:last-child[b-z2vn86yyxp] { font-weight: 700; color: #0f6cbd; }

.tp-all[b-z2vn86yyxp] { margin-top: 6px; padding: 6px; font-size: 12px; font-weight: 600; color: var(--colorBrandForegroundLink, #0f6cbd); text-decoration: none; }

/* Real page panel: sized by psmsTour.fit (--fw/--fh = the page's own size, --s = scale to fit the panel). */
.tp-frame[b-z2vn86yyxp] { position: relative; width: 100%; overflow: hidden; border: 1px solid var(--colorNeutralStroke2, #e5e7eb); border-radius: 10px; background: #f5f6f8; }

.tp-frame iframe[b-z2vn86yyxp] { position: absolute; top: 0; left: 0; width: var(--fw, 1366px); height: var(--fh, 768px); border: 0; transform: scale(var(--s, 0.6)); transform-origin: 0 0; }

.tp-frame-loading[b-z2vn86yyxp] { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(245 246 248 / 85%); font-size: 14px; font-weight: 600; color: #475569; }

@media (max-width: 900px) {
    .tp-layout[b-z2vn86yyxp] { grid-template-columns: minmax(0, 1fr); }
    .tp-steps[b-z2vn86yyxp] { position: static; order: 2; }
}

/* Steps as one compact row in the header (replaces the old left column) */
.tp-head-main[b-z2vn86yyxp] { flex: 0 1 auto; min-width: 0; }

.tp-hsteps[b-z2vn86yyxp] { display: flex; flex: 1 1 520px; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin: 0; padding: 0; list-style: none; }

.tp-hsteps li[b-z2vn86yyxp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 190px;
    padding: 3px 10px 3px 3px;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    color: #334155;
    cursor: pointer;
}

.tp-hsteps li:hover[b-z2vn86yyxp] { border-color: #93c5fd; }

.tp-hsteps li.is-on[b-z2vn86yyxp] { border-color: #0f6cbd; background: #e8f1fe; font-weight: 700; color: #0f6cbd; }

.tp-hsteps .tp-step-no[b-z2vn86yyxp] { width: 20px; height: 20px; font-size: 11px; }

.tp-hsteps li.is-on .tp-step-no[b-z2vn86yyxp] { background: #0f6cbd; box-shadow: none; }

.tp-hsteps li.is-done .tp-step-no[b-z2vn86yyxp] { background: #16a34a; }

.tp-hstep-text[b-z2vn86yyxp] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Play gate over the real page */
.tp-start[b-z2vn86yyxp] {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px;
    border: 0;
    background: rgb(15 23 42 / 55%);
    backdrop-filter: blur(3px);
    text-align: center;
    font: inherit;
    color: #fff;
    cursor: pointer;
}

.tp-start strong[b-z2vn86yyxp] { font-size: 20px; line-height: 1.3; text-shadow: 0 1px 3px rgb(0 0 0 / 35%); }

.tp-start > span:last-child[b-z2vn86yyxp] { max-width: 420px; font-size: 14px; line-height: 1.5; opacity: .92; text-shadow: 0 1px 2px rgb(0 0 0 / 30%); }

.tp-start-btn[b-z2vn86yyxp] {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #0f6cbd;
    box-shadow: 0 0 0 12px rgb(255 255 255 / 18%);
    /* clears the 12px ring above so it never touches the title */
    margin-bottom: 26px;
    transition: transform .15s;
}

.tp-start:hover .tp-start-btn[b-z2vn86yyxp] { transform: scale(1.08); }

@media (max-width: 900px) {
    .tp-hsteps[b-z2vn86yyxp] { justify-content: flex-start; }
    .tp-hstep-text[b-z2vn86yyxp] { display: none; }
    .tp-hsteps li[b-z2vn86yyxp] { padding-right: 3px; }
    .tp-hsteps li.is-on .tp-hstep-text[b-z2vn86yyxp] { display: inline; }
}

/* Header = title + all controls on one row, step pills underneath */
.tp-head-row[b-z2vn86yyxp] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

.tp-head-row h1[b-z2vn86yyxp] { margin-left: -4px; }

.tp-spacer[b-z2vn86yyxp] { flex: 1 1 auto; }

.tp-controls[b-z2vn86yyxp] { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.tp-controls .tp-speed[b-z2vn86yyxp] { height: 32px; }

.tp-head .tp-hsteps[b-z2vn86yyxp] { flex: 0 0 auto; justify-content: flex-start; }

.tp-stage-wrap[b-z2vn86yyxp] { padding: 8px; }

/* ── Full-screen dialog mode (TutorialOverlay) ──
   Title and step chips stay at the top; the demo stage fills the rest of the screen; only the
   playback controls (speed, voice, music, autoplay, previous/next, record, close) float over the
   demo as a pill at the bottom centre, like video controls. Faded until hovered. */
.tp-page--dialog[b-z2vn86yyxp] {
    padding: 10px 14px 0;
}

.tp-page--dialog .tp-stage-wrap[b-z2vn86yyxp] {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.tp-page--dialog .tp-controls[b-z2vn86yyxp] {
    position: fixed;
    left: 50%;
    bottom: 18px;
    z-index: 10;
    transform: translateX(-50%);
    padding: 8px 12px;
    border: 1px solid rgb(255 255 255 / 60%);
    border-radius: 999px;
    background: rgb(255 255 255 / 92%);
    box-shadow: 0 12px 40px rgb(15 23 42 / 30%);
    backdrop-filter: blur(8px);
    /* Faded while the mouse is elsewhere (the demo is an iframe, so mouse moves over it never
       reach this page; hover on the pill itself is the reliable signal). */
    opacity: 0.3;
    transition: opacity 0.25s ease;
}

.tp-page--dialog .tp-controls:hover[b-z2vn86yyxp],
.tp-page--dialog .tp-controls:focus-within[b-z2vn86yyxp] {
    opacity: 1;
}

@media (max-width: 600px) {
    .tp-page--dialog .tp-controls[b-z2vn86yyxp] {
        bottom: 0;
        left: 0;
        right: 0;
        transform: none;
        justify-content: center;
        border-radius: 14px 14px 0 0;
    }
}
/* _content/PSMS.Web/Components/Pages/Infrastructure/InfraStatCard.razor.rz.scp.css */
.infra-stat-card[b-8tnhq5c21d] {
    padding: 16px 18px;
}

.stat-row[b-8tnhq5c21d] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
}

.stat-icon[b-8tnhq5c21d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    background: #ffffff;
}

.stat-icon.accent-blue[b-8tnhq5c21d] { color: #1769d1; }
.stat-icon.accent-teal[b-8tnhq5c21d] { color: #0f7b6c; }
.stat-icon.accent-amber[b-8tnhq5c21d] { color: #c76c00; }
.stat-icon.accent-purple[b-8tnhq5c21d] { color: #5b3fbf; }
.stat-icon.accent-green[b-8tnhq5c21d] { color: #107c10; }

.stat-text[b-8tnhq5c21d] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.stat-title[b-8tnhq5c21d] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
}

.stat-value[b-8tnhq5c21d] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--neutral-foreground-rest);
    overflow-wrap: break-word;
}

.stat-sub[b-8tnhq5c21d] {
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
}
/* _content/PSMS.Web/Components/Pages/Infrastructure/InfrastructureStatus.razor.rz.scp.css */
/* ============================================================
   Infrastructure page
   1. Header actions
   2. Overview strip
   3. Section scaffolding
   4. Billing footnote
   5. Usage Overview cards
   6. Droplet cards
   7. External-link buttons
   8. Shared bits + responsive
   ============================================================ */

/* 1. Header actions --------------------------------------- */

.header-actions[b-s4ydv4f39f] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.header-subnote[b-s4ydv4f39f] {
    font-size: 0.78rem;
    color: var(--neutral-foreground-hint);
}

/* 2. Overview strip -------------------------------------- */

.overview-strip[b-s4ydv4f39f] {
    width: 100%;
}

.ov-row[b-s4ydv4f39f] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 14px;
    width: 100%;
}

.ov-brand[b-s4ydv4f39f],
.ov-item[b-s4ydv4f39f] {
    padding: 2px 26px;
}

.ov-brand[b-s4ydv4f39f] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ov-item + .ov-item[b-s4ydv4f39f],
.ov-brand + .ov-item[b-s4ydv4f39f] {
    border-left: 1px solid var(--neutral-stroke-divider-rest, rgba(120, 120, 120, 0.22));
}

.ov-brand-mark[b-s4ydv4f39f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #e8f1fc;
    color: #1769d1;
}

.ov-brand-name[b-s4ydv4f39f] {
    font-size: 1rem;
    font-weight: 700;
    color: #1769d1;
}

.ov-item[b-s4ydv4f39f] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ov-label[b-s4ydv4f39f] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--neutral-foreground-hint);
}

.ov-value[b-s4ydv4f39f] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

/* 3. Section scaffolding --------------------------------- */

.infra-section[b-s4ydv4f39f] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.infra-heading-row[b-s4ydv4f39f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.infra-heading[b-s4ydv4f39f] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.infra-heading-note[b-s4ydv4f39f] {
    font-size: 0.82rem;
    color: var(--neutral-foreground-hint);
}

/* 4. Billing footnote ----------------------------------- */

.billing-footnote[b-s4ydv4f39f] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    padding-top: 14px;
    border-top: 1px solid var(--neutral-stroke-divider-rest, rgba(120, 120, 120, 0.18));
    font-size: 0.83rem;
    color: var(--neutral-foreground-hint);
}

.fn-item[b-s4ydv4f39f] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fn-item strong[b-s4ydv4f39f] {
    color: var(--neutral-foreground-rest);
    font-weight: 600;
}

/* 5. Usage Overview cards ------------------------------- */

.usage-card[b-s4ydv4f39f] {
    width: 100%;
    height: 100%;
}

.usage-row[b-s4ydv4f39f] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
}

.usage-icon[b-s4ydv4f39f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
}

.usage-icon.accent-blue[b-s4ydv4f39f] {
    background: #e8f1fc;
    color: #1769d1;
}

.usage-icon.accent-teal[b-s4ydv4f39f] {
    background: #e5f7f6;
    color: #0f7b6c;
}

.usage-icon.accent-green[b-s4ydv4f39f] {
    background: #e6f4ea;
    color: #107c10;
}

/* 6. Droplet cards ------------------------------------- */

.droplet-card[b-s4ydv4f39f] {
    width: 100%;
}

.droplet-header[b-s4ydv4f39f] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.droplet-name[b-s4ydv4f39f] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
}

.droplet-region[b-s4ydv4f39f] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    color: var(--neutral-foreground-hint);
}

/* ::deep: the class is passed to FluentDivider, whose rendered element is outside this scope. */
[b-s4ydv4f39f] .droplet-rule {
    margin: 16px 0;
}

.droplet-details[b-s4ydv4f39f] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 56px;
}

.detail-col[b-s4ydv4f39f] {
    display: grid;
    grid-template-columns: minmax(120px, max-content) 1fr;
    gap: 12px 24px;
    align-items: baseline;
    margin: 0;
    align-content: start;
}

.detail-col dt[b-s4ydv4f39f] {
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
}

.detail-col dd[b-s4ydv4f39f] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--neutral-foreground-rest);
    overflow-wrap: anywhere;
}

.detail-hint[b-s4ydv4f39f] {
    color: var(--neutral-foreground-hint);
}

.tag-cell[b-s4ydv4f39f] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* 7. External-link buttons ---------------------------- */

.do-icon-link[b-s4ydv4f39f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--neutral-foreground-hint);
    text-decoration: none;
}

.do-icon-link:hover[b-s4ydv4f39f] {
    background: rgba(120, 120, 120, 0.12);
    color: var(--neutral-foreground-rest);
}

/* 8. Shared bits + responsive ------------------------- */

.dot[b-s4ydv4f39f] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-on[b-s4ydv4f39f] {
    background: #107c10;
    box-shadow: 0 0 0 3px rgba(16, 124, 16, 0.16);
}

.dot-off[b-s4ydv4f39f] {
    background: #d13438;
    box-shadow: 0 0 0 3px rgba(209, 52, 56, 0.16);
}

.empty-state[b-s4ydv4f39f] {
    padding: 32px 16px;
    text-align: center;
    color: var(--neutral-foreground-hint);
}

@media (max-width: 860px) {
    .ov-item + .ov-item[b-s4ydv4f39f],
    .ov-brand + .ov-item[b-s4ydv4f39f] {
        border-left: none;
    }

    .droplet-details[b-s4ydv4f39f] {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}
/* _content/PSMS.Web/Components/Pages/Infrastructure/UsageMeter.razor.rz.scp.css */
.usage-meter[b-njr6lsvk81] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    flex: 1;
}

.usage-meter-label[b-njr6lsvk81] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
}

.usage-meter-value[b-njr6lsvk81] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--neutral-foreground-rest);
    margin-bottom: 3px;
}

.usage-meter-bar[b-njr6lsvk81] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.usage-meter-track[b-njr6lsvk81] {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: var(--neutral-fill-secondary-rest, rgba(128, 128, 128, 0.18));
    overflow: hidden;
}

.usage-meter-fill[b-njr6lsvk81] {
    height: 100%;
    border-radius: 999px;
    min-width: 2px;
    transition: width 0.4s ease;
}

.usage-meter-fill.accent-blue[b-njr6lsvk81] {
    background: #1769d1;
}

.usage-meter-fill.accent-teal[b-njr6lsvk81] {
    background: #0f7b6c;
}

.usage-meter-fill.accent-green[b-njr6lsvk81] {
    background: #107c10;
}

.usage-meter-fill.accent-amber[b-njr6lsvk81] {
    background: #c76c00;
}

.usage-meter-fill.accent-purple[b-njr6lsvk81] {
    background: #5b3fbf;
}

.usage-meter-pct[b-njr6lsvk81] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    min-width: 3ch;
    text-align: right;
}

.usage-meter-pct.is-muted[b-njr6lsvk81] {
    color: var(--neutral-foreground-hint);
    font-weight: 500;
}

.usage-meter-caption[b-njr6lsvk81] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
}
/* _content/PSMS.Web/Components/Pages/Inventory/Dialogs/InventoryVariantImageDialog.razor.rz.scp.css */
.ivi-grid[b-uyqd2waqlz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 12px;
    width: 100%;
}

.ivi-cell[b-uyqd2waqlz] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ivi-tile[b-uyqd2waqlz] {
    position: relative;
    height: 104px;
    padding: 0;
    overflow: hidden;
    border: 2px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    background: var(--colorNeutralBackground2);
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.ivi-tile:hover[b-uyqd2waqlz] {
    border-color: var(--colorNeutralStroke1);
}

.ivi-tile--on[b-uyqd2waqlz],
.ivi-tile--on:hover[b-uyqd2waqlz] {
    border-color: var(--colorBrandStroke1, #2563eb);
    box-shadow: 0 0 0 2px var(--colorBrandStroke1, #2563eb);
}

.ivi-tile img[b-uyqd2waqlz] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ivi-none[b-uyqd2waqlz] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    text-align: center;
    font-size: 12px;
    color: var(--colorNeutralForeground3);
}

.ivi-badge[b-uyqd2waqlz] {
    position: absolute;
    top: 4px;
    left: 4px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--colorBrandBackground, #2563eb);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

/* Round tick on the chosen tile. */
.ivi-check[b-uyqd2waqlz] {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--colorBrandBackground, #2563eb);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.ivi-caption[b-uyqd2waqlz] {
    overflow: hidden;
    font-size: 12px;
    color: var(--colorNeutralForeground3);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ivi-summary[b-uyqd2waqlz] {
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--colorNeutralBackground2);
    font-size: 13px;
}

.ivi-apply[b-uyqd2waqlz] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ivi-apply-title[b-uyqd2waqlz] {
    font-size: 14px;
    font-weight: 600;
}

.ivi-hint[b-uyqd2waqlz] {
    font-size: 12px;
    color: var(--colorNeutralForeground3);
}

/* Bordered list: one fixed-height row per option value. */
.ivi-apply-list[b-uyqd2waqlz] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
}

.ivi-apply-row[b-uyqd2waqlz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 36px;
    padding: 0 12px;
    border-bottom: 1px solid var(--colorNeutralStroke3);
}

.ivi-apply-row:last-child[b-uyqd2waqlz] { border-bottom: 0; }

.ivi-apply-row--on[b-uyqd2waqlz] {
    background: var(--colorBrandBackground2, #eff6ff);
}

/* The checkbox's own intrinsic height is larger than a row, so it sits in a fixed-height wrapper. */
.ivi-apply-check[b-uyqd2waqlz] {
    display: flex;
    flex: 1;
    align-items: center;
    height: 32px;
    overflow: hidden;
}

/* ===== Refreshed look (2026-10-04, from the user's mockup) =====
   Larger tiles showing the whole product (not cropped), a light backdrop behind each photo, a white
   round tick on a brand circle, the summary as an info bar, and roomier "also apply" rows. */

.ivi-grid[b-uyqd2waqlz] {
    /* Fixed small tiles (they no longer stretch to fill a row), so more photos fit per row. */
    grid-template-columns: repeat(auto-fill, 104px);
    gap: 10px;
}

.ivi-cell[b-uyqd2waqlz] { gap: 6px; }

.ivi-tile[b-uyqd2waqlz] {
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    background: var(--colorNeutralBackground2, #fafafa);
    transition: border-color 0.12s, box-shadow 0.12s;
}

.ivi-tile img[b-uyqd2waqlz] {
    object-fit: contain;
    padding: 8px;
    box-sizing: border-box;
}

.ivi-tile--on[b-uyqd2waqlz],
.ivi-tile--on:hover[b-uyqd2waqlz] {
    border-color: var(--colorBrandBackground, #0f6cbd);
    box-shadow: 0 0 0 1px var(--colorBrandBackground, #0f6cbd);
}

.ivi-none[b-uyqd2waqlz] {
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    font-size: 13px;
    line-height: 1.3;
}

.ivi-badge[b-uyqd2waqlz] {
    top: 6px;
    left: 6px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
}

.ivi-check[b-uyqd2waqlz] {
    top: 8px;
    right: 8px;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    background: var(--colorBrandBackground, #0f6cbd);
    box-shadow: 0 0 0 2px #ffffff;
}

.ivi-caption[b-uyqd2waqlz] {
    font-size: 13px;
    color: var(--colorNeutralForeground2);
}

.ivi-summary[b-uyqd2waqlz] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--colorBrandStroke2, #c7dcf6);
    border-radius: 8px;
    background: var(--colorBrandBackground2, #ebf3fc);
    font-size: 14px;
}

.ivi-divider[b-uyqd2waqlz] {
    width: 100%;
    margin: 2px 0 6px;
    border: 0;
    border-top: 1px solid var(--colorNeutralStroke2);
}

.ivi-apply[b-uyqd2waqlz] { gap: 8px; }

.ivi-apply-title[b-uyqd2waqlz] { font-size: 15px; font-weight: 700; }

.ivi-apply-row[b-uyqd2waqlz] {
    height: 44px;
    padding: 0 14px;
}

.ivi-apply-row--on[b-uyqd2waqlz] {
    background: var(--colorBrandBackground2, #ebf3fc);
}

/* The vertical FluentStack around the dialog content sizes its children to their content, which left
   the summary bar and the "also apply" list narrower than the dialog. Stretch them to full width. */
.ivi-grid[b-uyqd2waqlz],
.ivi-summary[b-uyqd2waqlz],
.ivi-apply[b-uyqd2waqlz],
.ivi-apply-list[b-uyqd2waqlz],
.ivi-divider[b-uyqd2waqlz] {
    width: 100%;
    box-sizing: border-box;
}

.ivi-none[b-uyqd2waqlz] { font-size: 12px; }
.ivi-caption[b-uyqd2waqlz] { font-size: 12px; }
/* _content/PSMS.Web/Components/Pages/Inventory/InventoryItemDetail.razor.rz.scp.css */
.inv-code[b-3kly77byym] {
    padding: 2px 8px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 4px;
    background: var(--colorNeutralBackground3);
    font-size: 12px;
    font-weight: 600;
}

/* Overview tab: a small image card on the left, the info cards in two columns on the right. */
.inv-detail-grid[b-3kly77byym] {
    display: grid;
    /* Compact: a narrow image column on the left, the info cards on the right. */
    grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
    gap: 12px;
    /* Top-aligned: the image card keeps its own (small) height instead of stretching to the info cards. */
    align-items: start;
    width: 100%;
}

.inv-detail-side[b-3kly77byym] {
    /* Info cards in two columns, so the Overview is short instead of one tall stack. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    align-items: start;
    min-width: 0;
}

@media (max-width: 1000px) {
    .inv-detail-grid[b-3kly77byym] { grid-template-columns: minmax(0, 1fr); }
}

/* The hint ("This item has 4 variants. View them in the Variants tab.") sits over the empty right side of
   the tab strip. The strip is 44px tall (measured), so the hint is 44px tall and centred; .inv-tabs-wrap is
   its positioning box. Hidden on narrow screens where the tabs would run into it. */
.inv-tabs-wrap[b-3kly77byym] { position: relative; }

.inv-tabs-hint[b-3kly77byym] {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    font-size: 13px;
    color: var(--colorNeutralForeground3);
}

@media (max-width: 1000px) {
    .inv-tabs-hint[b-3kly77byym] { display: none; }
}

/* A text-style button: switches tab, doesn't navigate. */
.inv-link[b-3kly77byym] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--colorBrandForegroundLink, #0f6cbd);
    cursor: pointer;
}

.inv-link:hover[b-3kly77byym] { text-decoration: underline; }

.inv-card[b-3kly77byym] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    background: var(--colorNeutralBackground1);
}

.inv-card-title[b-3kly77byym] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

/* Content of one FluentTab: breathing room under the tab strip, cards stacked with the page's 16px gap. */
.inv-tab[b-3kly77byym] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 12px;
}

.inv-card-head[b-3kly77byym] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.inv-hint[b-3kly77byym] {
    font-size: 12px;
    color: var(--colorNeutralForeground3);
}

.inv-dl[b-3kly77byym] {
    display: grid;
    /* Fixed label column so every card's values start at the same x. */
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 5px 12px;
    margin: 0;
    font-size: 13px;
}

/* font-weight: Bootstrap's reboot makes every <dt> bold; labels should read as muted regular text. */
.inv-dl dt[b-3kly77byym] { color: var(--colorNeutralForeground3); font-weight: 400; }
.inv-dl dd[b-3kly77byym] { margin: 0; }

.inv-branches[b-3kly77byym] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

.inv-branches li[b-3kly77byym] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* One big image (whole product visible, never cropped) with a labelled thumbnail row underneath. */
.inv-gallery-main[b-3kly77byym] {
    display: block;
    width: 100%;
    /* Square and capped, so a tall photo never stretches the page. */
    aspect-ratio: 1 / 1;
    max-height: 260px;
    object-fit: contain;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    background: var(--colorNeutralBackground3);
}

.inv-gallery-thumbs[b-3kly77byym] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 6px;
}

/* One thumbnail: the picture in a bordered tile with its label (the image's alt text, e.g. the variant
   colour) under it. The selected one gets a brand border and brand-coloured label. */
.inv-gallery-thumb[b-3kly77byym] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
}

.inv-gallery-thumb-img[b-3kly77byym] {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 2px solid var(--colorNeutralStroke2);
    border-radius: 6px;
    background: var(--colorNeutralBackground3);
}

.inv-gallery-thumb--on .inv-gallery-thumb-img[b-3kly77byym] {
    border-color: var(--colorBrandStroke1, #2563eb);
}

.inv-gallery-thumb-img img[b-3kly77byym] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.inv-gallery-thumb-label[b-3kly77byym] {
    overflow: hidden;
    font-size: 11px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--colorNeutralForeground3);
}

.inv-gallery-thumb--on .inv-gallery-thumb-label[b-3kly77byym] {
    font-weight: 600;
    color: var(--colorBrandForegroundLink, #0f6cbd);
}

/* No image yet: a neutral tile instead of a blank card. */
.inv-gallery-empty[b-3kly77byym] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    aspect-ratio: 4 / 3;
    max-height: 200px;
    border: 1px dashed var(--colorNeutralStroke1);
    border-radius: 8px;
    background: var(--colorNeutralBackground2);
    color: var(--colorNeutralForeground3);
    font-size: 13px;
    text-align: center;
}

.inv-gallery-badge[b-3kly77byym] {
    position: absolute;
    top: 2px;
    left: 2px;
    padding: 0 4px;
    border-radius: 3px;
    background: var(--colorBrandBackground, #2563eb);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
}

.inv-variant-cell[b-3kly77byym] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.inv-vthumb[b-3kly77byym] {
    flex: none;
    width: 32px;
    height: 32px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 4px;
    background: var(--colorNeutralBackground3);
    cursor: pointer;
}

.inv-vthumb--empty[b-3kly77byym] { cursor: default; }

.inv-vthumb img[b-3kly77byym] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inv-table-wrap[b-3kly77byym] { overflow-x: auto; }

.inv-table[b-3kly77byym] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.inv-table th[b-3kly77byym] {
    padding: 6px 10px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--colorNeutralForeground3);
    border-bottom: 1px solid var(--colorNeutralStroke2);
}

.inv-table td[b-3kly77byym] {
    padding: 6px 10px;
    vertical-align: middle;
    border-bottom: 1px solid var(--colorNeutralStroke3);
}

/* Physical package tracking */
.inv-stats[b-3kly77byym] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

@media (max-width: 640px) {
    .inv-stats[b-3kly77byym] { grid-template-columns: minmax(0, 1fr); }
}

.inv-stat[b-3kly77byym] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 12px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 6px;
    background: var(--colorNeutralBackground2);
}

.inv-stat-label[b-3kly77byym] {
    font-size: 12px;
    color: var(--colorNeutralForeground3);
}

.inv-stat-value[b-3kly77byym] {
    font-size: 15px;
    font-weight: 600;
}

.inv-pkg-grid[b-3kly77byym] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

@media (max-width: 1000px) {
    .inv-pkg-grid[b-3kly77byym] { grid-template-columns: minmax(0, 1fr); }
}

.inv-sim[b-3kly77byym] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
}

.inv-sim h4[b-3kly77byym] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

/* Setup checklist on the Overview tab. */
.inv-setup[b-3kly77byym] { margin-bottom: 16px; border-color: var(--colorBrandStroke2, #c7dcf6); }

.inv-setup-count[b-3kly77byym] {
    font-size: 13px;
    font-weight: 600;
    color: var(--colorBrandForeground1, #0f6cbd);
}

.inv-setup-bar[b-3kly77byym] {
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--colorNeutralBackground4, #ebebeb);
}

.inv-setup-bar span[b-3kly77byym] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--colorBrandBackground, #0f6cbd);
    transition: width 0.3s ease;
}

.inv-setup-list[b-3kly77byym],
.inv-store-checks[b-3kly77byym] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.inv-setup-list li[b-3kly77byym],
.inv-store-checks li[b-3kly77byym] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 0;
    border-bottom: 1px solid var(--colorNeutralStroke3, #f0f0f0);
}

.inv-setup-list li:last-child[b-3kly77byym],
.inv-store-checks li:last-child[b-3kly77byym] { border-bottom: 0; }

.inv-setup-text[b-3kly77byym] {
    flex: 1;
    min-width: 0;
    font-size: 14px;
}

.inv-setup-done .inv-setup-text[b-3kly77byym] { color: var(--colorNeutralForeground3); }

/* Empty states (Stock tab). */
.inv-empty[b-3kly77byym] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 12px;
    text-align: center;
    color: var(--colorNeutralForeground2);
}

.inv-stock-filter[b-3kly77byym] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.inv-store-title[b-3kly77byym] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Setup stepper, a full-width card above the tabs while required steps are open.
   Top row: what to do now, plus a "Next: <step>" button when the user isn't on that step yet.
   Bottom row: the steps spread across the full width, joined by connector lines. Done = filled
   check, the step up next = brand ring, the step whose tab is open = tinted pill. Every step is a
   button. Scrolls sideways on narrow screens instead of wrapping. */
.inv-stepper[b-3kly77byym] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    margin: 4px 0 8px;
    padding: 12px 16px;
    border: 1px solid var(--colorBrandStroke2, #c7dcf6);
    border-radius: 10px;
    background: var(--colorNeutralBackground1, #ffffff);
}

.inv-stepper-top[b-3kly77byym] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}

.inv-stepper-heading[b-3kly77byym] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.inv-stepper-title[b-3kly77byym] {
    font-size: 14px;
    font-weight: 700;
    color: var(--colorNeutralForeground1);
}

.inv-stepper-sub[b-3kly77byym] {
    font-size: 13px;
    color: var(--colorNeutralForeground2);
}

.inv-stepper-list[b-3kly77byym] {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
}

.inv-step-item[b-3kly77byym] {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    min-width: max-content;
}

.inv-step-item:last-child[b-3kly77byym] { flex: 0 0 auto; }

/* The connector line from one step to the next; filled once the step is done. */
.inv-step-item:not(:last-child)[b-3kly77byym]::after {
    content: "";
    flex: 1;
    min-width: 24px;
    height: 2px;
    margin: 0 8px;
    border-radius: 2px;
    background: var(--colorNeutralStroke2);
}

.inv-step-item--done:not(:last-child)[b-3kly77byym]::after { background: var(--colorBrandBackground, #0f6cbd); }

.inv-step-btn[b-3kly77byym] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.inv-step-btn:hover[b-3kly77byym] { background: var(--colorNeutralBackground1Hover, #f5f5f5); }

.inv-step-item--here .inv-step-btn[b-3kly77byym] {
    border-color: var(--colorBrandStroke2, #c7dcf6);
    background: var(--colorNeutralBackground1, #ffffff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.inv-step-dot[b-3kly77byym] {
    display: grid;
    flex: none;
    width: 26px;
    height: 26px;
    place-items: center;
    border: 2px solid var(--colorNeutralStroke1, #d1d1d1);
    border-radius: 50%;
    box-sizing: border-box;
    font-size: 12px;
    font-weight: 700;
    color: var(--colorNeutralForeground3);
    background: var(--colorNeutralBackground1);
}

.inv-step-item--done .inv-step-dot[b-3kly77byym] {
    border-color: var(--colorBrandBackground, #0f6cbd);
    background: var(--colorBrandBackground, #0f6cbd);
}

.inv-step-item--next .inv-step-dot[b-3kly77byym] {
    border-color: var(--colorBrandBackground, #0f6cbd);
    color: var(--colorBrandForeground1, #0f6cbd);
    box-shadow: 0 0 0 3px var(--colorBrandBackground2, #ebf3fc);
}

.inv-step-label[b-3kly77byym] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.inv-step-name[b-3kly77byym] {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--colorNeutralForeground2);
}

.inv-step-item--next .inv-step-name[b-3kly77byym],
.inv-step-item--here .inv-step-name[b-3kly77byym] { color: var(--colorBrandForeground1, #0f6cbd); }

.inv-step-hint[b-3kly77byym] {
    font-size: 11px;
    white-space: nowrap;
    color: var(--colorNeutralForeground3);
}

.inv-step-item--done .inv-step-hint[b-3kly77byym] { color: var(--colorStatusSuccessForeground1, #0e700e); }

/* ===== Overview tab (2026-10-04, from the user's mockup) =====
   Wide screens: Images | Item Details | (Inventory Summary, Available In, Online Store) on the right,
   with the Variant Summary under the first two columns. Narrower: the right column drops below,
   then everything stacks. */
.ov-grid[b-3kly77byym] {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(300px, 400px);
    grid-template-areas:
        "images details side"
        "variants variants side";
    gap: 12px;
    align-items: start;
}

.ov-images[b-3kly77byym] { grid-area: images; }
.ov-details[b-3kly77byym] { grid-area: details; }
.ov-side[b-3kly77byym] { grid-area: side; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ov-variants[b-3kly77byym] { grid-area: variants; }

@media (max-width: 1300px) {
    .ov-grid[b-3kly77byym] {
        grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
        grid-template-areas:
            "images details"
            "side side"
            "variants variants";
    }
}

@media (max-width: 760px) {
    .ov-grid[b-3kly77byym] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "images" "details" "side" "variants";
    }
}

/* Card header with a tinted icon tile. */
.ov-head[b-3kly77byym] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ov-head-icon[b-3kly77byym] {
    display: grid;
    flex: none;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    background: var(--colorBrandBackground2, #ebf3fc);
}

/* Images */
.ov-main-img[b-3kly77byym] {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    background: var(--colorNeutralBackground3);
}

.ov-main-img img[b-3kly77byym] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ov-badge[b-3kly77byym] {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--colorBrandBackground, #0f6cbd);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.ov-thumbs[b-3kly77byym] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 6px;
}

.ov-thumb[b-3kly77byym] {
    aspect-ratio: 1 / 1;
    padding: 0;
    overflow: hidden;
    border: 2px solid var(--colorNeutralStroke2);
    border-radius: 6px;
    background: var(--colorNeutralBackground3);
    cursor: pointer;
}

.ov-thumb--on[b-3kly77byym] { border-color: var(--colorBrandStroke1, #0f6cbd); }

.ov-thumb img[b-3kly77byym] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Item details list */
.ov-dl[b-3kly77byym] {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: 9px 12px;
    margin: 0;
    font-size: 13px;
    align-items: center;
}

.ov-dl dt[b-3kly77byym] { color: var(--colorNeutralForeground3); font-weight: 400; }
.ov-dl dd[b-3kly77byym] { margin: 0; min-width: 0; }

.ov-audit[b-3kly77byym] {
    padding-top: 10px;
    border-top: 1px solid var(--colorNeutralStroke2);
    font-size: 12px;
}

.ov-chips[b-3kly77byym] { display: inline-flex; flex-wrap: wrap; gap: 6px; }

.ov-chip[b-3kly77byym] {
    display: inline-flex;
    align-items: center;
    padding: 1px 10px;
    border: 1px solid var(--colorBrandStroke2, #c7dcf6);
    border-radius: 999px;
    background: var(--colorBrandBackground2, #ebf3fc);
    color: var(--colorBrandForeground1, #0f6cbd);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.ov-chip--red[b-3kly77byym] { border-color: #f5c2c2; background: #fdecec; color: #b42318; }
.ov-chip--green[b-3kly77byym] { border-color: #b7e4c7; background: #e9f7ef; color: #0e7c4a; }

/* Stat tiles */
.ov-stats[b-3kly77byym] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.ov-stats--wide[b-3kly77byym] { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

.ov-stat[b-3kly77byym] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--colorNeutralBackground2, #f6f7f9);
}

.ov-stat--blue[b-3kly77byym] { background: #eef4ff; }
.ov-stat--purple[b-3kly77byym] { background: #f3efff; }
.ov-stat--green[b-3kly77byym] { background: #e9f7ef; }

.ov-stat-label[b-3kly77byym] { font-size: 12px; color: var(--colorNeutralForeground3); }

.ov-stat-value[b-3kly77byym] {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--colorNeutralForeground1);
}

.ov-stat-value--sm[b-3kly77byym] { font-size: 15px; }

.ov-stat-unit[b-3kly77byym] {
    overflow: hidden;
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--colorNeutralForeground3);
}

.ov-prices[b-3kly77byym] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--colorNeutralStroke2);
}

.ov-price[b-3kly77byym] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.ov-price-value[b-3kly77byym] { font-size: 16px; font-weight: 700; color: var(--colorNeutralForeground1); }

.ov-empty[b-3kly77byym] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border: 1px dashed var(--colorNeutralStroke1);
    border-radius: 8px;
    font-size: 13px;
    color: var(--colorNeutralForeground2);
}

/* Available In */
.ov-branches[b-3kly77byym] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

.ov-branches li[b-3kly77byym] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--colorNeutralStroke3, #f0f0f0);
}

.ov-branches li:last-child[b-3kly77byym] { border-bottom: 0; }
.ov-branches li > span:first-of-type[b-3kly77byym] { flex: 1; }

/* Online Store */
.ov-store[b-3kly77byym] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--colorNeutralBackground2, #f6f7f9);
}

.ov-store--on[b-3kly77byym] { background: #e9f7ef; }

.ov-store-dot[b-3kly77byym] {
    width: 10px;
    height: 10px;
    flex: none;
    border-radius: 50%;
    background: var(--colorNeutralStroke1, #c7c7c7);
}

.ov-store--on .ov-store-dot[b-3kly77byym] { background: #16a34a; }

.ov-store-text[b-3kly77byym] { display: flex; flex-direction: column; gap: 1px; font-size: 13px; }

.ov-store-facts[b-3kly77byym] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 8px;
    font-size: 13px;
}

.ov-store-facts > span[b-3kly77byym] { display: flex; flex-direction: column; gap: 1px; }

/* Variant summary */
.ov-sub[b-3kly77byym] { margin: 4px 0 0; font-size: 13px; font-weight: 700; }

.ov-groups[b-3kly77byym] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}

.ov-group[b-3kly77byym] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    background: var(--colorNeutralBackground1);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ov-group:hover[b-3kly77byym] { border-color: var(--colorBrandStroke1, #0f6cbd); }

.ov-group-img[b-3kly77byym] {
    display: grid;
    flex: none;
    width: 48px;
    height: 48px;
    place-items: center;
    overflow: hidden;
    border-radius: 6px;
    background: var(--colorNeutralBackground3);
}

.ov-group-img img[b-3kly77byym] { width: 100%; height: 100%; object-fit: contain; }

.ov-group-swatch[b-3kly77byym] {
    width: 24px;
    height: 24px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 50%;
}

.ov-group-text[b-3kly77byym] { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 13px; }

.ov-group-price[b-3kly77byym] { font-size: 12px; font-weight: 600; color: var(--colorNeutralForeground2); }

/* ===== Stock tab (2026-10-04, from the user's mockup) ===== */
.inv-card-title--lg[b-3kly77byym] { font-size: 16px; font-weight: 700; }

.inv-head-stack[b-3kly77byym] { display: flex; flex-direction: column; gap: 1px; }

/* Filter row: branch, search, one dropdown per option, status. filter-row (app.css) cancels Fluent's
   field margins so the labelled selects line up with the unlabelled search box. */
.st-filters[b-3kly77byym] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px 12px;
}

[b-3kly77byym] .st-filter { min-width: 150px; flex: 1 1 150px; }
[b-3kly77byym] .st-search { min-width: 220px; flex: 2 1 260px; }

/* Summary tiles with a tinted icon. */
.st-stats[b-3kly77byym] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}

.st-stat[b-3kly77byym] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 10px;
    background: var(--colorNeutralBackground1);
}

.st-stat-icon[b-3kly77byym] {
    display: grid;
    flex: none;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 10px;
}

.st-blue[b-3kly77byym] { background: #eef4ff; color: #2563eb; }
.st-green[b-3kly77byym] { background: #e9f7ef; color: #16a34a; }
.st-purple[b-3kly77byym] { background: #f3efff; color: #7c3aed; }
.st-amber[b-3kly77byym] { background: #fff7e6; color: #d97706; }
.st-red[b-3kly77byym] { background: #fdecec; color: #dc2626; }

.st-stat-text[b-3kly77byym] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.st-red-text[b-3kly77byym] { color: #dc2626; }

/* Table */
.st-table th[b-3kly77byym] { background: var(--colorNeutralBackground2, #fafafa); }

.st-table .st-num[b-3kly77byym] { text-align: right; white-space: nowrap; }

.st-variant[b-3kly77byym] { display: inline-flex; align-items: center; gap: 8px; }

.st-thumb[b-3kly77byym] {
    display: inline-flex;
    flex: none;
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--colorNeutralBackground3);
}

.st-thumb img[b-3kly77byym] { width: 100%; height: 100%; object-fit: contain; }

.st-variant-name[b-3kly77byym] { font-weight: 600; white-space: nowrap; }

.st-swatch-cell[b-3kly77byym] { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

.st-swatch[b-3kly77byym] {
    width: 12px;
    height: 12px;
    flex: none;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 50%;
}

.st-pill[b-3kly77byym] {
    display: inline-block;
    min-width: 24px;
    padding: 1px 8px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 999px;
    background: var(--colorNeutralBackground2, #fafafa);
    font-size: 12px;
    text-align: center;
}

.st-ok[b-3kly77byym] { color: #0e7c4a; font-weight: 600; }
.st-bad[b-3kly77byym] { color: #dc2626; font-weight: 600; }

.st-status[b-3kly77byym] {
    display: inline-block;
    padding: 1px 10px;
    border: 1px solid;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.st-status--ok[b-3kly77byym] { border-color: #b7e4c7; background: #e9f7ef; color: #0e7c4a; }
.st-status--warn[b-3kly77byym] { border-color: #fde2a7; background: #fff7e6; color: #b45309; }
.st-status--out[b-3kly77byym] { border-color: #f5c2c2; background: #fdecec; color: #b42318; }
.st-status--none[b-3kly77byym] { border-color: var(--colorNeutralStroke2); background: var(--colorNeutralBackground2, #fafafa); color: var(--colorNeutralForeground3); }

.st-actions-col[b-3kly77byym] { width: 1%; white-space: nowrap; text-align: right; }

.st-pager[b-3kly77byym] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.st-pager-buttons[b-3kly77byym] { display: inline-flex; align-items: center; gap: 8px; }

.st-page-no[b-3kly77byym] { font-size: 13px; font-weight: 600; }

/* ===== Online Store tab (2026-10-04, from the user's mockup) =====
   Left: header + summary tiles, then Readiness Checklist beside Branches + Visibility. Right: Store
   Preview with link and dates. Stacks below 1200px. */
.os2-grid[b-3kly77byym] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: 12px;
    align-items: start;
}

@media (max-width: 1200px) {
    .os2-grid[b-3kly77byym] { grid-template-columns: minmax(0, 1fr); }
}

.os2-main[b-3kly77byym],
.os2-stack[b-3kly77byym] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.os2-row[b-3kly77byym] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
    align-items: start;
}

.os2-title[b-3kly77byym] { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.os2-tiles[b-3kly77byym] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
}

.os2-tile[b-3kly77byym] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 10px;
    background: var(--colorNeutralBackground1);
}

.os2-tile--green[b-3kly77byym] { border-color: #b7e4c7; background: #e9f7ef; }

.os2-tile .inv-hint[b-3kly77byym] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.os2-setting[b-3kly77byym] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--colorNeutralStroke3, #f0f0f0);
}

.os2-setting-text[b-3kly77byym] { display: flex; flex-direction: column; gap: 1px; font-size: 13px; }

/* Store preview */
.os2-link-btn[b-3kly77byym] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    border-radius: 6px;
    color: var(--colorNeutralForeground1);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.os2-link-btn:hover[b-3kly77byym] { background: var(--colorNeutralBackground1Hover, #f5f5f5); }

.os2-preview[b-3kly77byym] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}

@media (max-width: 480px) {
    .os2-preview[b-3kly77byym] { grid-template-columns: minmax(0, 1fr); }
}

.os2-preview-media[b-3kly77byym] { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.os2-preview-img[b-3kly77byym] {
    display: grid;
    aspect-ratio: 1 / 1;
    place-items: center;
    overflow: hidden;
    border-radius: 10px;
    background: var(--colorNeutralBackground3, #f3f4f6);
}

.os2-preview-img img[b-3kly77byym] { width: 100%; height: 100%; object-fit: contain; }

.os2-preview-thumbs[b-3kly77byym] { display: flex; flex-wrap: wrap; gap: 6px; }

.os2-preview-thumb[b-3kly77byym] {
    width: 44px;
    height: 44px;
    padding: 0;
    overflow: hidden;
    border: 2px solid var(--colorNeutralStroke2);
    border-radius: 6px;
    background: var(--colorNeutralBackground3);
    cursor: pointer;
}

.os2-preview-thumb--on[b-3kly77byym] { border-color: var(--colorBrandStroke1, #0f6cbd); }

.os2-preview-thumb img[b-3kly77byym] { width: 100%; height: 100%; object-fit: contain; }

.os2-preview-info[b-3kly77byym] { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.os2-preview-name[b-3kly77byym] { font-size: 16px; }

.os2-preview-price[b-3kly77byym] { font-size: 17px; font-weight: 700; color: var(--colorNeutralForeground1); }

.os2-option-label[b-3kly77byym] { margin-top: 4px; font-size: 13px; font-weight: 600; }

.os2-option-values[b-3kly77byym] { display: flex; flex-wrap: wrap; gap: 8px; }

.os2-swatch[b-3kly77byym] {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    cursor: pointer;
}

.os2-swatch--on[b-3kly77byym] { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--colorNeutralForeground1, #242424); }

.os2-size[b-3kly77byym] {
    min-width: 36px;
    padding: 4px 10px;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    border-radius: 6px;
    background: var(--colorNeutralBackground1);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.os2-size--on[b-3kly77byym] {
    border-color: var(--colorBrandBackground, #0f6cbd);
    background: var(--colorBrandBackground2, #ebf3fc);
    color: var(--colorBrandForeground1, #0f6cbd);
}

.os2-cart[b-3kly77byym] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
    padding: 8px 12px;
    border: 0;
    border-radius: 6px;
    background: var(--colorBrandBackground, #0f6cbd);
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    opacity: 0.9;
    cursor: default;
}

.os2-viewonly[b-3kly77byym] {
    margin-top: 6px;
    padding: 8px 10px;
    border: 1px dashed var(--colorNeutralStroke1);
    border-radius: 6px;
    font-size: 12px;
    text-align: center;
    color: var(--colorNeutralForeground3);
}

.os2-linkbox[b-3kly77byym] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--colorBrandStroke2, #c7dcf6);
    border-radius: 10px;
    background: var(--colorBrandBackground2, #ebf3fc);
    font-size: 13px;
}

.os2-link-row[b-3kly77byym] { display: flex; gap: 8px; }

.os2-link-input[b-3kly77byym] {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    border-radius: 6px;
    background: var(--colorNeutralBackground1);
    font: inherit;
    font-size: 13px;
    color: var(--colorNeutralForeground2);
}

.os2-dates[b-3kly77byym] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    font-size: 13px;
}

.os2-dates > span[b-3kly77byym] { display: flex; align-items: flex-start; gap: 8px; }
/* _content/PSMS.Web/Components/Pages/Inventory/InventoryItemForm.razor.rz.scp.css */
.inv-form[b-6ysobmlkr5] {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
}

.inv-card[b-6ysobmlkr5] {
    grid-column: span 12;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 16px 20px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    background: var(--colorNeutralBackground1);
}

.inv-span-4[b-6ysobmlkr5] { grid-column: span 4; }
.inv-span-8[b-6ysobmlkr5] { grid-column: span 8; }

@media (max-width: 900px) {
    .inv-span-4[b-6ysobmlkr5],
    .inv-span-8[b-6ysobmlkr5] { grid-column: span 12; }
}

.inv-card-title[b-6ysobmlkr5] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.inv-hint[b-6ysobmlkr5] {
    font-size: 12px;
    font-weight: 400;
    color: var(--colorNeutralForeground3);
}

.inv-row[b-6ysobmlkr5] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
}

/* A. Basic Information: Code (1/4) + Category (3/4) on top, Name and Description full width below. */
.inv-basic[b-6ysobmlkr5] {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(0, 3fr);
    gap: 16px;
    align-items: start;
}

.inv-basic-full[b-6ysobmlkr5] { grid-column: 1 / -1; }

@media (max-width: 700px) {
    .inv-basic[b-6ysobmlkr5] { grid-template-columns: minmax(0, 1fr); }
}

/* Checkbox rows: the checkbox's own intrinsic height is larger than we want, so each sits in a
   fixed-height, vertically centred wrapper. */
.inv-check[b-6ysobmlkr5] {
    display: flex;
    align-items: center;
    height: 32px;
    overflow: hidden;
}

/* B. Item Usage: selectable option tiles that light up when ticked. */
.inv-opt[b-6ysobmlkr5] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 6px 12px 10px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    transition: border-color 0.12s, background-color 0.12s;
}

.inv-opt--on[b-6ysobmlkr5] {
    border-color: var(--colorBrandStroke1, #2563eb);
    background: var(--colorBrandBackground2, #eff6ff);
}

.inv-opt .inv-hint[b-6ysobmlkr5] { padding-left: 28px; }

/* C. Units of Measurement: two aligned columns, secondary unit in an inset panel. */
.inv-unit-grid[b-6ysobmlkr5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px 24px;
    align-items: end;
}

@media (max-width: 700px) {
    .inv-unit-grid[b-6ysobmlkr5] { grid-template-columns: minmax(0, 1fr); }
}

.inv-unit-toggles[b-6ysobmlkr5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 24px;
}

.inv-subpanel[b-6ysobmlkr5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    background: var(--colorNeutralBackground2);
}

.inv-conv[b-6ysobmlkr5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.inv-conv-text[b-6ysobmlkr5] {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

/* "+ Add description": a text-style button that reveals the field. */
.inv-link[b-6ysobmlkr5] {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    color: var(--colorBrandForegroundLink, #0f6cbd);
    cursor: pointer;
}

.inv-link:hover[b-6ysobmlkr5] { text-decoration: underline; }

/* Item type: two radio cards, Single item / Item with variants. */
.inv-type-cards[b-6ysobmlkr5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 700px) {
    .inv-type-cards[b-6ysobmlkr5] { grid-template-columns: minmax(0, 1fr); }
}

.inv-type-card[b-6ysobmlkr5] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    background: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground2);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s, background-color 0.12s;
}

.inv-type-card:hover:not(:disabled)[b-6ysobmlkr5] { border-color: var(--colorNeutralStroke1); }

.inv-type-card--on[b-6ysobmlkr5] {
    border-color: var(--colorBrandStroke1, #2563eb);
    background: var(--colorBrandBackground2, #eff6ff);
    color: var(--colorBrandForeground1, #0f6cbd);
}

.inv-type-card:disabled[b-6ysobmlkr5] { cursor: not-allowed; opacity: 0.55; }

.inv-type-text[b-6ysobmlkr5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.inv-type-title[b-6ysobmlkr5] {
    font-size: 14px;
    font-weight: 600;
    color: var(--colorNeutralForeground1);
}
/* _content/PSMS.Web/Components/Pages/Inventory/InventoryItemImages.razor.rz.scp.css */
.iig[b-h878dipm6a] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.iig-strip[b-h878dipm6a] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.iig-item[b-h878dipm6a] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}


.iig-tile[b-h878dipm6a] {
    position: relative;
    width: 88px;
    height: 88px;
    overflow: hidden;
    border: 2px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    background: var(--colorNeutralBackground3);
}

.iig-tile--large[b-h878dipm6a] {
    width: 128px;
    height: 128px;
}

.iig-tile--primary[b-h878dipm6a] {
    border-color: var(--colorBrandStroke1, #2563eb);
}

.iig-tile img[b-h878dipm6a] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.iig-badge[b-h878dipm6a] {
    position: absolute;
    top: 4px;
    left: 4px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--colorBrandBackground, #2563eb);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

/* Floating white pill of actions, centred at the bottom of the photo. */
.iig-actions[b-h878dipm6a] {
    position: absolute;
    bottom: 6px;
    left: 50%;
    display: flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--colorNeutralStroke2, #e0e0e0);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    transform: translateX(-50%);
}

.iig-hint[b-h878dipm6a] {
    font-size: 12px;
    color: var(--colorNeutralForeground3);
}
/* _content/PSMS.Web/Components/Pages/Inventory/InventoryItemImagesEditor.razor.rz.scp.css */
.inv-card[b-v1wie7u6dp] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    background: var(--colorNeutralBackground1);
}

/* The two cards (upload, then assign) sit one under the other. */
.inv-card + .inv-card[b-v1wie7u6dp] { margin-top: 12px; }

.inv-card-head[b-v1wie7u6dp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}

.inv-card-title[b-v1wie7u6dp] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.inv-sub-title[b-v1wie7u6dp] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.inv-hint[b-v1wie7u6dp] {
    font-size: 12px;
    font-weight: 400;
    color: var(--colorNeutralForeground3);
}

.inv-empty-note[b-v1wie7u6dp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font-size: 13px;
    color: var(--colorNeutralForeground2);
}

/* Per-variant photo tiles: thumbnail + name, click to change. */
.inv-variant-grid[b-v1wie7u6dp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px;
}

.inv-variant-tile[b-v1wie7u6dp] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 6px 6px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    background: var(--colorNeutralBackground1);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.inv-variant-tile:hover[b-v1wie7u6dp] { border-color: var(--colorBrandStroke1, #2563eb); }

.inv-variant-tile-img[b-v1wie7u6dp] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    overflow: hidden;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 6px;
    background: var(--colorNeutralBackground3);
}

.inv-variant-tile-img img[b-v1wie7u6dp] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inv-variant-tile-text[b-v1wie7u6dp] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.inv-variant-tile-name[b-v1wie7u6dp] {
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* No photo of its own: shows the main photo, dimmed. */
.inv-thumb-fallback[b-v1wie7u6dp] { opacity: 0.45; }

.inv-thumb-empty[b-v1wie7u6dp] {
    font-size: 16px;
    line-height: 1;
    color: var(--colorNeutralForeground3);
}

/* "Assign images to variants": one card per option value (Red / Black / Blue) with its image. */
.inv-assign[b-v1wie7u6dp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    background: var(--colorNeutralBackground2);
}

.inv-assign-head[b-v1wie7u6dp] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 16px;
}

.inv-assign-title[b-v1wie7u6dp] {
    font-size: 14px;
    font-weight: 600;
}

.inv-assign-list[b-v1wie7u6dp] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.inv-assign-row[b-v1wie7u6dp] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
    padding: 8px 12px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    background: var(--colorNeutralBackground1);
}

.inv-assign-thumb[b-v1wie7u6dp] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 6px;
    background: var(--colorNeutralBackground3);
    cursor: pointer;
}

.inv-assign-thumb:hover[b-v1wie7u6dp] { border-color: var(--colorBrandStroke1, #2563eb); }

.inv-assign-thumb img[b-v1wie7u6dp] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inv-assign-text[b-v1wie7u6dp] {
    display: flex;
    flex-direction: column;
}

.inv-assign-value[b-v1wie7u6dp] {
    font-size: 14px;
    font-weight: 600;
}


/* ===== Refreshed look (2026-10-04, from the user's mockup) ===== */

/* Card header: icon tile + title and one-line description. */
.inv-head-title[b-v1wie7u6dp] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.inv-head-icon[b-v1wie7u6dp] {
    display: grid;
    flex: none;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 10px;
    background: var(--colorBrandBackground2, #ebf3fc);
}

.inv-head-text[b-v1wie7u6dp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.inv-assign-tools[b-v1wie7u6dp] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 12px;
}

/* One collapsible group per option value (Red / Black / Blue). */
.inv-groups[b-v1wie7u6dp] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.inv-group[b-v1wie7u6dp] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 10px 10px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 10px;
}

.inv-group-head[b-v1wie7u6dp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.inv-group-toggle[b-v1wie7u6dp] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border: 0;
    border-radius: 6px;
    background: none;
    font: inherit;
    color: var(--colorNeutralForeground2);
    cursor: pointer;
}

.inv-group-toggle:hover[b-v1wie7u6dp] { background: var(--colorNeutralBackground1Hover, #f5f5f5); }

.inv-group-swatch[b-v1wie7u6dp] {
    width: 14px;
    height: 14px;
    flex: none;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 50%;
}

.inv-group-name[b-v1wie7u6dp] {
    font-size: 14px;
    font-weight: 700;
    color: var(--colorNeutralForeground1);
}

/* Variant tiles: photo, name + "Own photo / Main photo", change and clear buttons. */
.inv-variant-grid[b-v1wie7u6dp] { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }

.inv-variant-tile[b-v1wie7u6dp] {
    padding: 6px 8px;
    border-radius: 8px;
    cursor: default;
}

.inv-variant-tile:hover[b-v1wie7u6dp] { border-color: var(--colorNeutralStroke1); }

.inv-variant-tile--inactive[b-v1wie7u6dp] { opacity: 0.6; }

.inv-variant-tile-img[b-v1wie7u6dp] { width: 44px; height: 44px; }

.inv-variant-tile-text[b-v1wie7u6dp] { flex: 1 1 auto; }

.inv-variant-tile-actions[b-v1wie7u6dp] {
    display: flex;
    flex: none;
    gap: 4px;
}
/* _content/PSMS.Web/Components/Pages/Inventory/InventoryItemVariantsEditor.razor.rz.scp.css */
.inv-card[b-or64e1uhbt] {
    
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    background: var(--colorNeutralBackground1);
}

.inv-card-head[b-or64e1uhbt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}

.inv-card-title[b-or64e1uhbt] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.inv-hint[b-or64e1uhbt] {
    font-size: 12px;
    font-weight: 400;
    color: var(--colorNeutralForeground3);
}

/* Variant builder: options | combinations | details. Kept compact: small inputs, tight rows, and the
   combination list and details table are height-capped so many variants scroll inside their own
   panel instead of stretching the page. */
.inv-steps[b-or64e1uhbt] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.8fr);
    /* One shared row height: every panel stretches to it. The combination list and the details grid
       fill whatever is left and scroll inside their panel instead of making it taller. */
    grid-auto-rows: minmax(0, 1fr);
    flex: 1 1 auto;
    min-height: 420px;
    gap: 12px;
    align-items: stretch;
}

@media (max-width: 1200px) {
    .inv-steps[b-or64e1uhbt] {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
    }
}

.inv-step[b-or64e1uhbt] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
}

.inv-step-head[b-or64e1uhbt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.inv-step-head h4[b-or64e1uhbt] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.inv-option[b-or64e1uhbt] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 6px;
    background: var(--colorNeutralBackground2);
}

.inv-option-head[b-or64e1uhbt] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.inv-chips[b-or64e1uhbt] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.inv-chip[b-or64e1uhbt] {
    display: inline-flex;
    align-items: center;
    padding: 0 2px 0 10px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 999px;
    background: var(--colorNeutralBackground1);
    font-size: 13px;
}

/* Combination picker: one column, list-style rows with divider lines. Every row has a fixed height
   (the checkbox's own intrinsic height is larger than we want) and the body scrolls in place. */
.inv-combo-list[b-or64e1uhbt] {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 6px;
    overflow: hidden;
}

.inv-combo-row[b-or64e1uhbt] {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 10px;
    overflow: hidden;
    border-bottom: 1px solid var(--colorNeutralStroke3);
}

.inv-combo-row:hover[b-or64e1uhbt] { background: var(--colorNeutralBackground1Hover); }

.inv-combo-row:last-child[b-or64e1uhbt] { border-bottom: none; }

.inv-combo-head[b-or64e1uhbt] {
    background: var(--colorNeutralBackground2);
    border-bottom: 1px solid var(--colorNeutralStroke2);
}

.inv-combos[b-or64e1uhbt] {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}

/* Excel-like variant grid (mirrors the production TABLE field, TableField.razor.css): cells butt
   together with a 1px gridline, inputs fill the whole cell with no chrome of their own, and a blue
   inset focus ring marks the active cell. Height-capped so many variants scroll inside the panel;
   border-collapse: separate so the sticky header keeps its gridlines while rows scroll under it. */
.inv-sheet-scroll[b-or64e1uhbt] {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--colorNeutralStroke2, #d1d5db);
    border-radius: 4px;
}

.inv-sheet[b-or64e1uhbt] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    background: var(--colorNeutralBackground1, #ffffff);
}

.inv-sheet th[b-or64e1uhbt],
.inv-sheet td[b-or64e1uhbt] {
    padding: 0;
    border-right: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-bottom: 1px solid var(--colorNeutralStroke2, #e5e7eb);
}

/* Outer edges: the scroll container's border stands in, so it isn't doubled. */
.inv-sheet tr > *:last-child[b-or64e1uhbt] { border-right: 0; }
.inv-sheet tbody tr:last-child > *[b-or64e1uhbt] { border-bottom: 0; }

.inv-sheet th[b-or64e1uhbt] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 5px 8px;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
    background: var(--colorNeutralBackground3, #f3f4f6);
    color: var(--colorNeutralForeground2, #374151);
}

.inv-sheet tbody tr:hover td[b-or64e1uhbt] {
    background: var(--colorNeutralBackground2, #f9fafb);
}

/* Variant name: read-only label cell. */
.inv-sheet .inv-sheet-name[b-or64e1uhbt] {
    padding: 5px 8px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--colorNeutralBackground2, #f9fafb);
}

.inv-cell[b-or64e1uhbt] {
    display: block;
    width: 100%;
    min-width: 110px;
    box-sizing: border-box;
    margin: 0;
    padding: 5px 8px;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    line-height: 1.4;
}

.inv-cell:focus[b-or64e1uhbt] {
    outline: 2px solid var(--colorBrandStroke1, #2563eb);
    outline-offset: -2px;
    background: var(--colorNeutralBackground1, #ffffff);
}

.inv-sheet .inv-sheet-num .inv-cell[b-or64e1uhbt] {
    min-width: 90px;
    text-align: right;
}

/* "Assign images to variants": one card per option value (Red / Black / Blue) with its image. */
.inv-assign[b-or64e1uhbt] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    background: var(--colorNeutralBackground2);
}

.inv-assign-head[b-or64e1uhbt] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 16px;
}

.inv-assign-title[b-or64e1uhbt] {
    font-size: 14px;
    font-weight: 600;
}

.inv-assign-list[b-or64e1uhbt] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.inv-assign-row[b-or64e1uhbt] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
    padding: 8px 12px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    background: var(--colorNeutralBackground1);
}

.inv-assign-thumb[b-or64e1uhbt] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 6px;
    background: var(--colorNeutralBackground3);
    cursor: pointer;
}

.inv-assign-thumb:hover[b-or64e1uhbt] { border-color: var(--colorBrandStroke1, #2563eb); }

.inv-assign-thumb img[b-or64e1uhbt] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inv-assign-text[b-or64e1uhbt] {
    display: flex;
    flex-direction: column;
}

.inv-assign-value[b-or64e1uhbt] {
    font-size: 14px;
    font-weight: 600;
}

/* Image column: a small thumbnail button that opens the picker. */
.inv-sheet .inv-sheet-img[b-or64e1uhbt] {
    width: 52px;
    padding: 3px 8px;
    text-align: center;
}

.inv-thumb[b-or64e1uhbt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 4px;
    background: var(--colorNeutralBackground3);
    cursor: pointer;
    vertical-align: middle;
}

.inv-thumb:disabled[b-or64e1uhbt] { cursor: not-allowed; opacity: 0.6; }

.inv-thumb img[b-or64e1uhbt] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* No image of its own: shows the item's primary image, dimmed, to signal the fallback. */
.inv-thumb .inv-thumb-fallback[b-or64e1uhbt] { opacity: 0.45; }

.inv-thumb-empty[b-or64e1uhbt] {
    font-size: 16px;
    line-height: 1;
    color: var(--colorNeutralForeground3);
}

.inv-sheet .inv-sheet-check[b-or64e1uhbt] {
    width: 60px;
    text-align: center;
}

.inv-sheet-check input[type="checkbox"][b-or64e1uhbt] {
    display: block;
    margin: 0 auto;
    accent-color: var(--colorBrandBackground, #2563eb);
}

/* Variant builder, stacked on narrow screens: there is no shared row height to fill, so the combination
   list and the details grid fall back to fixed scroll caps. Kept last so it wins over the base rules. */
@media (max-width: 1200px) {
    .inv-combo-list[b-or64e1uhbt] { flex: none; }
    .inv-combos[b-or64e1uhbt] { flex: none; max-height: 256px; }
    .inv-sheet-scroll[b-or64e1uhbt] { flex: none; max-height: 360px; }
}

/* Full-height Variants tab (wide screens): the card fills the space left below the top bar, page
   header, setup stepper and tab strip (~320px together), and the three builder panels stretch to the bottom, so the
   combination list and the details grid scroll inside their panels instead of the page. The assign-
   images panel, when shown, takes its height first and the panels shrink to fit. Below 1200px the
   panels stack and fall back to the fixed scroll caps above. */
@media (min-width: 1201px) {
    .inv-card--fill[b-or64e1uhbt] {
        height: max(520px, calc(100dvh - 320px));
        box-sizing: border-box;
    }

    /* Grid items default to min-height: auto, which would let a long list push the panel past the
       card instead of scrolling inside it. */
    .inv-card--fill .inv-step[b-or64e1uhbt] { min-height: 0; }

    /* The Options panel has no list of its own to scroll, so the panel itself scrolls when many
       values are added. */
    .inv-card--fill .inv-step:first-child[b-or64e1uhbt] { overflow-y: auto; }
}

@media (max-width: 1200px) {
    .inv-steps[b-or64e1uhbt] { flex: none; min-height: 0; }
}

/* Read-only photo preview: photos are assigned on the Images tab. */
.inv-thumb--static[b-or64e1uhbt] { cursor: default; }

/* ===== Refreshed look (2026-10-04, from the user's mockup) =====
   Kept as one block after the base rules so it reads as the current design: bigger titles, white
   option cards with a bold editable name, pill chips with colour swatches, icon bulk links, and a
   clean table with boxed inputs instead of the spreadsheet gridlines. */

.inv-card-title--lg[b-or64e1uhbt] { font-size: 17px; font-weight: 700; }

.inv-step[b-or64e1uhbt] { padding: 12px 14px; border-radius: 10px; }
.inv-step-head h4[b-or64e1uhbt] { font-size: 15px; font-weight: 700; }
.inv-step-head--wrap[b-or64e1uhbt] { flex-wrap: wrap; row-gap: 6px; }

/* Option card: white, the option name reads as its heading but stays editable in place. */
.inv-option[b-or64e1uhbt] {
    gap: 10px;
    padding: 10px 12px 12px;
    border-radius: 8px;
    background: var(--colorNeutralBackground1);
}

.inv-option-name[b-or64e1uhbt] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--colorNeutralForeground1);
}

.inv-option-name:hover[b-or64e1uhbt] { border-color: var(--colorNeutralStroke2); }

.inv-option-name:focus[b-or64e1uhbt] {
    outline: none;
    border-color: var(--colorBrandStroke1, #2563eb);
    background: var(--colorNeutralBackground1);
}

.inv-option-name[b-or64e1uhbt]::placeholder { font-weight: 400; color: var(--colorNeutralForeground4, #a0a0a0); }

.inv-chips[b-or64e1uhbt] { gap: 8px; }

.inv-chip[b-or64e1uhbt] {
    gap: 6px;
    padding: 3px 4px 3px 10px;
    background: var(--colorNeutralBackground2, #fafafa);
    font-size: 13px;
}

.inv-chip-swatch[b-or64e1uhbt] {
    width: 12px;
    height: 12px;
    flex: none;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 50%;
}

.inv-chip-remove[b-or64e1uhbt] {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--colorNeutralForeground3);
    cursor: pointer;
}

.inv-chip-remove:hover[b-or64e1uhbt] { background: var(--colorNeutralBackground3); color: var(--colorNeutralForeground1); }

/* Bulk actions as icon links. */
.inv-bulk[b-or64e1uhbt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
}

.inv-bulk-link[b-or64e1uhbt] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--colorBrandForeground1, #0f6cbd);
    cursor: pointer;
}

.inv-bulk-link:hover[b-or64e1uhbt] { text-decoration: underline; }

/* Variant table: horizontal row lines only, boxed inputs, a tick column on the left. */
.inv-sheet-scroll[b-or64e1uhbt] { border-radius: 8px; }

.inv-sheet th[b-or64e1uhbt],
.inv-sheet td[b-or64e1uhbt] { border-right: 0; }

.inv-sheet th[b-or64e1uhbt] {
    padding: 8px 8px;
    font-size: 12px;
    background: var(--colorNeutralBackground2, #fafafa);
}

.inv-sheet td[b-or64e1uhbt] { padding: 5px 6px; }

.inv-sheet .inv-sheet-name[b-or64e1uhbt] {
    padding: 5px 8px;
    font-weight: 500;
    background: transparent;
}

.inv-cell[b-or64e1uhbt] {
    min-width: 100px;
    padding: 5px 8px;
    border: 1px solid var(--colorNeutralStroke2, #d1d5db);
    border-radius: 4px;
    background: var(--colorNeutralBackground1, #ffffff);
}

.inv-cell[b-or64e1uhbt]::placeholder { color: var(--colorNeutralForeground4, #a0a0a0); }

.inv-cell:focus[b-or64e1uhbt] {
    outline: none;
    border-color: var(--colorBrandStroke1, #2563eb);
    box-shadow: 0 0 0 2px var(--colorBrandBackground2, #ebf3fc);
}

.inv-sheet .inv-sheet-num .inv-cell[b-or64e1uhbt] { min-width: 84px; text-align: left; }

.inv-sheet .inv-sheet-check[b-or64e1uhbt] { width: 44px; }

.inv-sheet input[type="checkbox"][b-or64e1uhbt] {
    width: 16px;
    height: 16px;
    margin: 0 auto;
    display: block;
    accent-color: var(--colorBrandBackground, #0f6cbd);
}

.inv-thumb[b-or64e1uhbt] { width: 32px; height: 32px; border-radius: 6px; }

.inv-sheet tbody tr.inv-row--picked td[b-or64e1uhbt] { background: var(--colorBrandBackground2, #ebf3fc); }

/* An inactive variant stays editable but reads as switched off. */
.inv-sheet tbody tr.inv-row--inactive td[b-or64e1uhbt] { color: var(--colorNeutralForeground3); }
.inv-sheet tbody tr.inv-row--inactive .inv-cell[b-or64e1uhbt] { background: var(--colorNeutralBackground2, #fafafa); }
/* _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/Inventory/StoreProductPageEditor.razor.rz.scp.css */
.ec-layout[b-ix5impszsw] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: start; width: 100%; }

.ec-card[b-ix5impszsw] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 12px;
    background: var(--colorNeutralBackground1, #fff);
}

.ec-preview-card[b-ix5impszsw] { position: sticky; top: 12px; background: var(--colorNeutralBackground2, #f8fafc); }

.ec-empty[b-ix5impszsw] { padding: 32px; text-align: center; color: var(--colorNeutralForeground3, #6b7280); }

.ec-unsaved[b-ix5impszsw] { padding: 1px 8px; border-radius: 999px; background: #fff4ce; font-size: 12px; color: #8a6100; }

.ec-head[b-ix5impszsw] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.ec-head-icon[b-ix5impszsw] { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: #e8f1fe; }

.ec-head-text[b-ix5impszsw] { display: flex; flex: 1; flex-direction: column; min-width: 180px; }

.ec-head-text strong[b-ix5impszsw] { font-size: 16px; }

.ec-head-text span[b-ix5impszsw], .ec-hint[b-ix5impszsw], .ec-muted[b-ix5impszsw] { font-size: 12px; color: var(--colorNeutralForeground3, #6b7280); }

.ec-muted[b-ix5impszsw] { font-style: normal; }

.ec-chip[b-ix5impszsw] { padding: 3px 10px; border-radius: 999px; background: #f1f5f9; font-size: 12px; font-weight: 600; color: #64748b; }

.ec-chip.is-on[b-ix5impszsw] { background: #dcfce7; color: #15803d; }

.ec-body[b-ix5impszsw] { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; }

.ec-block[b-ix5impszsw] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 10px;
}

.ec-block-head[b-ix5impszsw] { display: flex; align-items: flex-start; gap: 10px; color: #0f6cbd; }

.ec-block-head > span[b-ix5impszsw] { display: flex; flex-direction: column; color: var(--colorNeutralForeground1, #1f2937); }

.ec-block-head strong[b-ix5impszsw] { font-size: 14px; }

.ec-block-head em[b-ix5impszsw] { font-style: normal; font-size: 13px; color: var(--colorNeutralForeground3, #6b7280); }

.ec-block-head span span[b-ix5impszsw] { font-size: 12px; color: var(--colorNeutralForeground3, #6b7280); }

.ec-feature[b-ix5impszsw] { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }

.ec-move[b-ix5impszsw] { display: flex; flex-direction: column; }

.ec-move button[b-ix5impszsw] { height: 14px; padding: 0 4px; border: 0; background: none; font-size: 9px; color: #94a3b8; cursor: pointer; }

.ec-move button:hover:not(:disabled)[b-ix5impszsw] { color: #0f6cbd; }

.ec-move button:disabled[b-ix5impszsw] { opacity: .3; cursor: default; }

.ec-check[b-ix5impszsw] { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #0f6cbd; font-size: 12px; font-weight: 700; color: #fff; }

.ec-input[b-ix5impszsw] {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    border-radius: 6px;
    font: inherit;
    font-size: 13px;
    box-sizing: border-box;
}

.ec-input:focus[b-ix5impszsw] { border-color: #0f6cbd; outline: 1px solid #0f6cbd; }

.ec-del[b-ix5impszsw] { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 6px; background: none; cursor: pointer; }

.ec-del:hover[b-ix5impszsw] { background: #fde7e9; }

.ec-add[b-ix5impszsw] {
    padding: 8px;
    border: 0;
    border-radius: 8px;
    background: #eef5fe;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #0f6cbd;
    cursor: pointer;
}

.ec-add:hover[b-ix5impszsw] { background: #e0edfd; }

.ec-rows[b-ix5impszsw] { display: flex; flex-direction: column; gap: 8px; }

.ec-rowline[b-ix5impszsw] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: 8px; }

.ec-row2[b-ix5impszsw] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.ec-note[b-ix5impszsw] { padding: 10px 12px; border-radius: 8px; background: var(--colorNeutralBackground3, #f3f4f6); font-size: 13px; }

.ec-error[b-ix5impszsw] { padding: 8px 12px; border-radius: 8px; background: #fde7e9; font-size: 13px; color: #a4262c; }

/* Preview */
.ec-devices[b-ix5impszsw] { display: inline-flex; overflow: hidden; border: 1px solid var(--colorNeutralStroke1, #d1d1d1); border-radius: 6px; }

.ec-devices button[b-ix5impszsw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 0;
    border-left: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    background: #fff;
    font: inherit;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
}

.ec-devices button:first-child[b-ix5impszsw] { border-left: 0; }

.ec-devices button.is-active[b-ix5impszsw] { background: #0f6cbd; color: #fff; }

.ec-stage[b-ix5impszsw] { display: flex; justify-content: center; }

.ec-device[b-ix5impszsw] {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 12px;
    background: #fff;
    transition: max-width .25s ease;
}

.ec-device--desktop[b-ix5impszsw] { max-width: 100%; }

.ec-device--tablet[b-ix5impszsw] { max-width: 600px; }

.ec-device--mobile[b-ix5impszsw] { max-width: 360px; }

.ec-ptabs[b-ix5impszsw] { display: flex; gap: 4px; overflow-x: auto; padding: 0 12px; border-bottom: 1px solid #e5e7eb; }

.ec-ptabs button[b-ix5impszsw] {
    flex-shrink: 0;
    padding: 12px 10px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font: inherit;
    font-size: 13px;
    color: #475569;
    cursor: pointer;
}

.ec-ptabs button.is-active[b-ix5impszsw] { border-bottom-color: #0f6cbd; font-weight: 600; color: #0f6cbd; }

.ec-ptabs button.is-hidden[b-ix5impszsw] { text-decoration: line-through; opacity: .55; }

.ec-pbody[b-ix5impszsw] { padding: 18px; font-size: 14px; color: #334155; }

.ec-pbody p[b-ix5impszsw] { margin: 0 0 10px; }

.ec-pre[b-ix5impszsw] { white-space: pre-line; }

.ec-pdesc[b-ix5impszsw] { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: start; }

.ec-device--mobile .ec-pdesc[b-ix5impszsw] { grid-template-columns: minmax(0, 1fr); }

.ec-device--mobile .ec-pimg[b-ix5impszsw] { order: -1; }

.ec-pchecks[b-ix5impszsw] { margin: 10px 0 0; padding: 0; list-style: none; }

.ec-pchecks li[b-ix5impszsw] { position: relative; padding: 5px 0 5px 30px; }

.ec-pchecks li[b-ix5impszsw]::before {
    content: "✓";
    position: absolute;
    top: 5px;
    left: 0;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #0f6cbd;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}

.ec-pnotes[b-ix5impszsw] { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: #f8fafc; font-size: 13px; color: #475569; }

.ec-pimg[b-ix5impszsw] { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: #f1f5f9; font-size: 12px; color: #94a3b8; }

.ec-pimg img[b-ix5impszsw] { width: 100%; height: 100%; object-fit: contain; }

.ec-ptable[b-ix5impszsw] { width: 100%; border-collapse: collapse; font-size: 13px; }

.ec-ptable th[b-ix5impszsw], .ec-ptable td[b-ix5impszsw] { padding: 8px 10px; border-bottom: 1px solid #eef2f7; text-align: left; }

.ec-ptable tbody th[b-ix5impszsw] { width: 40%; font-weight: 600; color: #0f172a; }

.ec-ptable thead th[b-ix5impszsw] { background: #f8fafc; }

.ec-hidden-note[b-ix5impszsw] { padding: 14px; border: 1px dashed #cbd5e1; border-radius: 8px; text-align: center; font-size: 13px; color: #64748b; }

.ec-rating[b-ix5impszsw] { display: flex; align-items: center; gap: 14px; color: #f59e0b; }

.ec-rating small[b-ix5impszsw] { color: #64748b; }

.ec-score[b-ix5impszsw] { font-size: 32px; font-weight: 700; color: #0f172a; }

.ec-variants[b-ix5impszsw] { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 10px; background: #fff; font-size: 14px; }

.ec-variant-row[b-ix5impszsw] { display: flex; flex-wrap: wrap; gap: 8px; }

.ec-variant[b-ix5impszsw] {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    overflow: hidden;
    padding: 0;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: #f8fafc;
    font-size: 10px;
    cursor: pointer;
}

.ec-variant img[b-ix5impszsw] { width: 100%; height: 100%; object-fit: cover; }

.ec-variant.is-active[b-ix5impszsw] { border-color: #0f6cbd; }

@media (max-width: 1200px) {
    .ec-layout[b-ix5impszsw] { grid-template-columns: minmax(0, 1fr); }
    .ec-preview-card[b-ix5impszsw] { position: static; }
}

@media (max-width: 600px) {
    .ec-row2[b-ix5impszsw], .ec-pdesc[b-ix5impszsw] { grid-template-columns: minmax(0, 1fr); }
    .ec-devices button[b-ix5impszsw] { padding: 6px 8px; }
}
/* _content/PSMS.Web/Components/Pages/JobOrder/Dialogs/CompleteJobOrderDialog.razor.rz.scp.css */
.cjo-wrap[b-wxw42u98b4] { display: flex; flex-direction: column; gap: 14px; width: 100%; }

.cjo-head[b-wxw42u98b4] { display: flex; align-items: center; gap: 12px; }

.cjo-icon[b-wxw42u98b4] {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #e6f4ea;
}

.cjo-sub[b-wxw42u98b4] { font-size: 13px; color: var(--colorNeutralForeground3, #6b7280); }

.cjo-money[b-wxw42u98b4] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }

.cjo-money-item[b-wxw42u98b4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--colorNeutralBackground2, #f7f7f7);
}

.cjo-money-item--due .cjo-value[b-wxw42u98b4] { color: var(--accent-fill-rest, #0f6cbd); }

.cjo-label[b-wxw42u98b4] { font-size: 12px; color: var(--colorNeutralForeground3, #6b7280); }

.cjo-value[b-wxw42u98b4] { font-size: 16px; font-weight: 700; }

.cjo-grid[b-wxw42u98b4] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    width: 100%;
    align-items: start;
}

.cjo-hint[b-wxw42u98b4] { font-size: 12px; color: var(--colorNeutralForeground3, #6b7280); }

.cjo-preview[b-wxw42u98b4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border-radius: 8px;
    background: #eaf3ff;
}

.cjo-preview-icon[b-wxw42u98b4] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.7);
}

.cjo-preview-main[b-wxw42u98b4] { display: flex; flex-direction: column; gap: 2px; }

.cjo-preview-value[b-wxw42u98b4] { font-size: 18px; font-weight: 700; color: var(--accent-fill-rest, #0f6cbd); }

.cjo-preview-note[b-wxw42u98b4] { margin-left: auto; font-size: 12px; color: var(--colorNeutralForeground2, #424242); }

.cjo-error[b-wxw42u98b4] { font-size: 12px; font-weight: 600; color: var(--colorStatusDangerForeground1, #b10e1c); }

@media (max-width: 560px) {
    .cjo-money[b-wxw42u98b4],
    .cjo-grid[b-wxw42u98b4] { grid-template-columns: minmax(0, 1fr); }
}
/* _content/PSMS.Web/Components/Pages/JobOrder/Dialogs/UpdateItemStatusDialog.razor.rz.scp.css */
.uis-meta[b-4uvdonlls4] {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 10px 12px;
    background: var(--colorNeutralBackground2, #f7f7f7);
    border-radius: 6px;
    font-size: 13px;
}

.uis-label[b-4uvdonlls4] {
    min-width: 40px;
    font-weight: 600;
    color: var(--colorNeutralForeground3, #6b7280);
}

/* Override ProductionTrackingFields' default 3-up grid for this dialog:
   Status + Completion Date on one 2-column row, Remarks full-width beneath.
   !important is needed because ProductionFieldWrap sets grid-column inline. */
[b-4uvdonlls4] .production-tracking-fields-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

[b-4uvdonlls4] .production-tracking-fields-grid .production-field:last-child {
    grid-column: 1 / -1 !important;
}
/* _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(7, 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;
    /* colour comes from an inline style — PriorityColors.Solid (shared contract) */
}

.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, 3fr);
    gap: 16px;
    width: 100%;
    align-items: start;
    overflow-x: auto;
}

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

/* The Production Details panel can get very tall (long dynamic form / overview). Cap it to the
   viewport and keep only the *body* scrolling — the header stays put. `position: sticky` on the
   header doesn't work here: FluentCard projects slotted content through its shadow DOM, so the
   header's sticky containing block is the card's clipped shadow wrapper, not this scroll area —
   it just scrolls away. Instead the card is a fixed-height flex column that never scrolls itself,
   the header is a non-shrinking flex row, and only .job-order-detail-body scrolls. */
[b-aqsciod8wf] .job-order-detail-panel {
    max-height: calc(100vh - 170px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

[b-aqsciod8wf] .job-order-detail-panel .builder-panel-header {
    flex: 0 0 auto;
    z-index: 3;
    background: var(--colorNeutralBackground1, #ffffff);
    padding-bottom: 14px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #e1e1e1);
}

[b-aqsciod8wf] .job-order-detail-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-top: 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: flex-start;
    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;
    line-height: 1.35;
    padding-top: 2px;
}

.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;
    gap: 12px;
    font-size: 12px;
    padding-left: 28px;
}

.job-order-item-due[b-aqsciod8wf] {
    color: var(--colorPaletteRedForeground1, #b3261e);
    font-weight: 600;
}

.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-actionable[b-aqsciod8wf] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.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;
}

/* ---- Production Details overview (read-only mode) ---- */

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

@media (max-width: 640px) {
    .pdv-grid[b-aqsciod8wf] {
        grid-template-columns: 1fr;
    }
}

.pdv-field[b-aqsciod8wf] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.pdv-label[b-aqsciod8wf] {
    font-size: 11px;
    font-weight: 600;
    color: var(--colorNeutralForeground3, #8a8a8a);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.pdv-value[b-aqsciod8wf] {
    font-size: 13px;
    color: var(--colorNeutralForeground1, #1f1f1f);
    word-break: break-word;
}

/* ---- Workflow timeline (read-only configured flow) ---- */

.job-order-workflow-count[b-aqsciod8wf] {
    font-size: 11px;
    font-weight: 600;
    color: var(--neutral-foreground-3, #6b7280);
    background: var(--neutral-fill-secondary-rest, #f2f3f5);
    border-radius: 999px;
    padding: 1px 8px;
}

.job-order-workflow[b-aqsciod8wf] {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.job-order-workflow-step[b-aqsciod8wf] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 14px;
}

.job-order-workflow-step:last-child[b-aqsciod8wf] {
    padding-bottom: 0;
}

/* connector line between markers */
.job-order-workflow-step[b-aqsciod8wf]::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 24px;
    bottom: -2px;
    width: 2px;
    background: var(--neutral-stroke-divider-rest, #e1e1e1);
}

.job-order-workflow-step:last-child[b-aqsciod8wf]::before {
    display: none;
}

.job-order-workflow-marker[b-aqsciod8wf] {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--accent-fill-rest, #b91c1c);
    background: var(--neutral-layer-1, #ffffff);
    color: var(--accent-fill-rest, #b91c1c);
    font-size: 12px;
    font-weight: 700;
}

.job-order-workflow-body[b-aqsciod8wf] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 26px;
    font-size: 13px;
}

.job-order-workflow-name[b-aqsciod8wf] {
    font-weight: 600;
    color: var(--colorNeutralForeground1, #1f1f1f);
}

.job-order-workflow-optional[b-aqsciod8wf] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--neutral-fill-secondary-rest, #f2f3f5);
    color: var(--neutral-foreground-3, #6b7280);
}

/* no workflow configured — status-only tracking */
.job-order-workflow-none[b-aqsciod8wf] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border: 1px dashed var(--neutral-stroke-divider-rest, #e1e1e1);
    border-radius: 8px;
    background: var(--neutral-fill-secondary-rest, #fafbfc);
}

/* ::deep — class lands on FluentIcon's rendered element, not a tag in this file */
.job-order-workflow-none[b-aqsciod8wf]  .job-order-workflow-none-icon {
    color: var(--neutral-foreground-3, #8a93a3);
    flex: 0 0 auto;
}

.job-order-workflow-none-text[b-aqsciod8wf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.job-order-workflow-none-title[b-aqsciod8wf] {
    font-size: 13px;
    font-weight: 600;
    color: var(--colorNeutralForeground1, #1f1f1f);
}

.job-order-workflow-none-status[b-aqsciod8wf] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}


/* Order Status card (manual header-status control) */
.job-order-status-card[b-aqsciod8wf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    width: 100%;
}

.job-order-status-main[b-aqsciod8wf] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.job-order-status-heading[b-aqsciod8wf],
.job-order-status-note[b-aqsciod8wf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.job-order-status-note[b-aqsciod8wf] {
    font-size: 13px;
    color: var(--colorNeutralForeground3, #616161);
}

/* Wizard-style status stepper: circle + inline label per step, joined by connector lines.
   Inline labels keep it ~32px tall, the same height the old button row had. */
.job-order-status-steps[b-aqsciod8wf] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    max-width: 640px;
    min-width: 0;
}

.status-step[b-aqsciod8wf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font: inherit;
    font-size: 13px;
    color: var(--colorNeutralForeground3, #616161);
    cursor: pointer;
    white-space: nowrap;
    flex: 0 0 auto;
}

.status-step:hover:not(:disabled)[b-aqsciod8wf] {
    background: var(--colorNeutralBackground1Hover, #f5f5f5);
}

.status-step:disabled[b-aqsciod8wf] {
    cursor: default;
}

.status-step-circle[b-aqsciod8wf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--colorNeutralStroke1, #d1d1d1);
    background: #ffffff;
    font-size: 12px;
    font-weight: 600;
    box-sizing: border-box;
}

.status-step.done[b-aqsciod8wf] {
    color: var(--colorNeutralForeground1, #242424);
}

.status-step.done .status-step-circle[b-aqsciod8wf] {
    background: var(--step-color);
    border-color: var(--step-color);
}

.status-step.current[b-aqsciod8wf] {
    color: var(--step-color);
    font-weight: 600;
}

.status-step.current .status-step-circle[b-aqsciod8wf] {
    background: var(--step-color);
    border-color: var(--step-color);
    color: #ffffff;
    box-shadow: 0 0 0 4px var(--step-soft);
}

.status-step-line[b-aqsciod8wf] {
    flex: 1 1 24px;
    min-width: 16px;
    height: 2px;
    border-radius: 1px;
    background: var(--colorNeutralStroke2, #e0e0e0);
}

.status-step-line.reached[b-aqsciod8wf] {
    background: var(--step-color);
}

@media (max-width: 700px) {
    .job-order-status-steps[b-aqsciod8wf] {
        max-width: none;
        width: 100%;
    }

    .status-step-label[b-aqsciod8wf] {
        display: none;
    }

    .status-step.current .status-step-label[b-aqsciod8wf] {
        display: inline;
    }
}

/* Payment Due card: terms under the date; "After completion" muted while the job is still in production. */
.job-order-info-sub[b-aqsciod8wf] { font-size: 12px; color: var(--colorNeutralForeground3, #6b7280); }

.job-order-info-muted[b-aqsciod8wf] { color: var(--colorNeutralForeground3, #6b7280); font-weight: 500; }

/* Item row badges/menu: never shrink when the item name wraps to two lines (the status badge was
   being squeezed into an unreadable sliver). FluentBadge/FluentButton are child components, so ::deep. */
.job-order-item-row-top[b-aqsciod8wf]  fluent-badge,
.job-order-item-row-top[b-aqsciod8wf]  .fluent-badge,
.job-order-item-row-top[b-aqsciod8wf]  fluent-button,
.job-order-item-row-top[b-aqsciod8wf] >  * {
    flex-shrink: 0;
}

.job-order-item-row-top[b-aqsciod8wf]  fluent-badge,
.job-order-item-row-top[b-aqsciod8wf]  .fluent-badge {
    white-space: nowrap;
    margin-top: 1px;
}

.job-order-item-row-top .job-order-item-name[b-aqsciod8wf] {
    flex-shrink: 1;
}

.job-order-item-price > span:first-child[b-aqsciod8wf] {
    min-width: 0;
}

.job-order-item-due[b-aqsciod8wf] {
    white-space: nowrap;
}

.job-order-item-due[b-aqsciod8wf] {
    margin-left: 4px;
}

/* Side column tabs (Pricing / Production): small tab strip, a little air before the cards, and
   tab panels that don't add their own padding. FluentTabs is a child component, so ::deep. */
.job-order-side-tabs[b-aqsciod8wf] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.job-order-side-tabs[b-aqsciod8wf]  [role="tabpanel"] {
    padding: 10px 0 0;
}

/* Dividers inside the Production Details body (between the item header/stat tiles and the form,
   and before the price components) had no vertical margin, so the blocks touched. */
[b-aqsciod8wf] .job-order-detail-body fluent-divider,
[b-aqsciod8wf] .job-order-detail-body [role="separator"],
[b-aqsciod8wf] .job-order-detail-body hr {
    margin: 14px 0;
}

/* Pending discount approval (prototype, JobOrderDiscountApprovalDemoData) */
.jo-discount-approval[b-aqsciod8wf] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 10px;
    margin: 2px 0 4px;
    border: 1px solid #f2c94c;
    border-radius: 8px;
    background: #fff8e1;
    font-size: 13px;
}

.jo-discount-approval > div:first-child[b-aqsciod8wf] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.jo-discount-approval-meta[b-aqsciod8wf] {
    font-size: 12px;
    color: #6b5b00;
}
/* _content/PSMS.Web/Components/Pages/JobOrder/Print/JobOrderDocument.razor.rz.scp.css */
.jo-doc[b-2heefzok3e] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 10.5px;
    line-height: 1.45;
    color: #242424;
}

/* ── title block (letterhead aside) ── */
.jo-title[b-2heefzok3e] {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .02em;
}

.jo-code[b-2heefzok3e] {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
}

.jo-date[b-2heefzok3e] {
    margin-top: 2px;
    color: #424242;
}

.jo-copy[b-2heefzok3e] {
    margin-top: 4px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    color: #616161;
}

.jo-muted[b-2heefzok3e] {
    color: #616161;
    font-size: 9.5px;
}

/* ── cards ── */
.jo-card[b-2heefzok3e] {
    padding: 10px 12px;
    border: 1px solid #d6d9de;
    border-radius: 4px;
}

.jo-card-flush[b-2heefzok3e] {
    padding: 0;
    overflow: hidden;
}

.jo-card-title[b-2heefzok3e] {
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e6e8eb;
    font-size: 11.5px;
    font-weight: 700;
}

.jo-info[b-2heefzok3e] {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 10px;
}

.jo-kv[b-2heefzok3e] {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 3px 10px;
}

.jo-kv > span:nth-child(odd)[b-2heefzok3e] {
    color: #616161;
}

.jo-pill[b-2heefzok3e] {
    display: inline-block;
    padding: 0 8px;
    border-radius: 999px;
    background: #e3f0fb;
    color: #0f6cbd;
    font-size: 9.5px;
    font-weight: 600;
}

/* ── tables ── */
.jo-table th[b-2heefzok3e],
.jo-table td[b-2heefzok3e],
.jo-prod-table th[b-2heefzok3e],
.jo-prod-table td[b-2heefzok3e] {
    padding: 6px 10px;
    border-bottom: 1px solid #e6e8eb;
    text-align: left;
    vertical-align: top;
}

.jo-table th[b-2heefzok3e] {
    background: #f1f2f4;
    font-weight: 700;
}

.jo-table tr:last-child td[b-2heefzok3e] {
    border-bottom: 0;
}

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

.jo-prod-table th[b-2heefzok3e],
.jo-prod-table td[b-2heefzok3e] {
    padding: 4px 6px;
}

.jo-prod-table th[b-2heefzok3e] {
    color: #616161;
    font-weight: 600;
}

/* ── payment + terms ── */
.jo-pair[b-2heefzok3e] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: start;
}

.jo-totals > div:not(.jo-card-title)[b-2heefzok3e] {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
}

.jo-totals .is-total[b-2heefzok3e] {
    margin-top: 4px;
    padding-top: 5px !important;
    border-top: 1px solid #3d3d3d;
    font-size: 12px;
    font-weight: 700;
}

.jo-totals .is-balance[b-2heefzok3e] {
    font-weight: 700;
}

.jo-terms p[b-2heefzok3e] {
    margin: 0;
    white-space: pre-wrap;
}
/* _content/PSMS.Web/Components/Pages/JobOrder/Print/ProductionFormDocument.razor.rz.scp.css */
.pf-doc[b-nbh476zogp] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 10.5px;
    line-height: 1.45;
    color: #242424;
}

.pf-title[b-nbh476zogp] { font-size: 20px; font-weight: 800; letter-spacing: .02em; }
.pf-code[b-nbh476zogp] { margin-top: 4px; font-size: 13px; font-weight: 700; }
.pf-date[b-nbh476zogp] { margin-top: 2px; color: #424242; }
.pf-copy[b-nbh476zogp] { margin-top: 4px; font-size: 9px; font-weight: 700; text-transform: uppercase; color: #616161; }

.pf-card[b-nbh476zogp] {
    padding: 8px 12px;
    border: 1px solid #d6d9de;
    border-radius: 4px;
}

.pf-card-title[b-nbh476zogp] { margin-bottom: 4px; font-size: 11px; font-weight: 700; }

.pf-info[b-nbh476zogp] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 10px;
}

.pf-kv[b-nbh476zogp] {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 2px 10px;
}

.pf-kv > span:nth-child(odd)[b-nbh476zogp] { color: #616161; }

.pf-pill[b-nbh476zogp] {
    display: inline-block;
    padding: 0 8px;
    border-radius: 999px;
    background: #e3f0fb;
    color: #0f6cbd;
    font-size: 9.5px;
    font-weight: 600;
}

/* ── item ── */
.pf-item[b-nbh476zogp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pf-item-head[b-nbh476zogp] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 4px;
    background: #f1f2f4;
}

.pf-item-no[b-nbh476zogp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #242424;
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
}

.pf-item-title[b-nbh476zogp] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.pf-item-title strong[b-nbh476zogp] { font-size: 13px; }
.pf-item-title span[b-nbh476zogp] { color: #616161; }

.pf-item-meta[b-nbh476zogp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px 12px;
}

.pf-section[b-nbh476zogp] {
    border: 1px solid #d6d9de;
    border-radius: 4px;
}

.pf-section-name[b-nbh476zogp] {
    padding: 5px 10px;
    border-bottom: 1px solid #e6e8eb;
    background: #fafafa;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #424242;
}

.pf-grid[b-nbh476zogp] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pf-field[b-nbh476zogp] {
    grid-column: span var(--pf-span, 1);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
    border-bottom: 1px solid #eef0f2;
    border-right: 1px solid #eef0f2;
    min-width: 0;
}

.pf-label[b-nbh476zogp] {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    color: #616161;
}

.pf-value[b-nbh476zogp] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
    overflow-wrap: anywhere;
}

.pf-blank[b-nbh476zogp], .pf-ref[b-nbh476zogp] { color: #8a8a8a; }
.pf-file[b-nbh476zogp] { font-size: 10px; }
.pf-empty[b-nbh476zogp] { color: #8a5300; }

.pf-remarks[b-nbh476zogp] {
    padding: 6px 10px;
    border-left: 3px solid #ca5010;
    background: #fdf6f0;
}

.pf-table th[b-nbh476zogp], .pf-table td[b-nbh476zogp] {
    padding: 3px 6px;
    border: 1px solid #e6e8eb;
    text-align: left;
    font-size: 10px;
}

.pf-table th[b-nbh476zogp] { background: #f5f5f5; }

/* ── images ── */
.pf-images[b-nbh476zogp] {
    display: grid;
    grid-template-columns: repeat(var(--pf-cols, 2), minmax(0, 1fr));
    gap: 8px;
    padding: 4px 0;
}

.pf-section > .pf-images[b-nbh476zogp] { padding: 8px 10px; }

.pf-figure[b-nbh476zogp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 0;
}

.pf-figure img[b-nbh476zogp] {
    max-width: 100%;
    object-fit: contain;
    border: 1px solid #e6e8eb;
    background: #fff;
}

.pf-images.is-thumb .pf-figure img[b-nbh476zogp] { max-height: 30mm; }
.pf-images.is-medium .pf-figure img[b-nbh476zogp] { max-height: 65mm; }
.pf-images.is-full .pf-figure img[b-nbh476zogp] { width: 100%; max-height: 200mm; }

.pf-figure figcaption[b-nbh476zogp],
.pf-caption[b-nbh476zogp] {
    font-size: 9px;
    color: #616161;
    text-align: center;
    overflow-wrap: anywhere;
}

.pf-image-page[b-nbh476zogp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.pf-image-page .pf-section-name[b-nbh476zogp] { align-self: stretch; }

.pf-image-page img[b-nbh476zogp] {
    max-width: 100%;
    max-height: 230mm;
    object-fit: contain;
}

.pf-notes p[b-nbh476zogp] { margin: 0; white-space: pre-wrap; }
/* _content/PSMS.Web/Components/Pages/JobOrder/ProductionAssignmentCard.razor.rz.scp.css */
/* Class lands on FluentCard's rendered element (a child component), so it needs ::deep —
   and it can't inherit JobOrderDetail.razor.css's own .job-order-panel rule, which is scoped
   to that component. Kept in step with the sibling panels (Pricing Summary / Computed Price):
   16px padding, small semibold title, theme body text. */
[b-xfsyxicp1v] .assignment-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
}

/* ---- header ---- */

.assignment-head[b-xfsyxicp1v] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.assignment-head-icon[b-xfsyxicp1v] {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--colorBrandBackground2, #e6f4f4);
    color: var(--colorBrandBackground, #0f6c6c);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.assignment-head-text[b-xfsyxicp1v] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.assignment-subtitle[b-xfsyxicp1v] {
    margin: 0;
    font-size: 11px;
    line-height: 1.4;
    color: var(--neutral-foreground-3, #6b7280);
}

/* ---- context bar ---- */

.assignment-context[b-xfsyxicp1v] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--neutral-fill-secondary-rest, #f5f6f8);
}

.assignment-seq[b-xfsyxicp1v] {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-fill-rest, #2563eb);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.assignment-step-name[b-xfsyxicp1v] {
    font-size: 13px;
    font-weight: 700;
    color: var(--colorNeutralForeground1, #1f2937);
}

.assignment-optional[b-xfsyxicp1v] {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--neutral-layer-1, #fff);
    color: var(--neutral-foreground-3, #6b7280);
}

.assignment-context-sep[b-xfsyxicp1v] {
    width: 1px;
    align-self: stretch;
    min-height: 16px;
    background: var(--neutral-stroke-rest, #d5d9e2);
    margin: 0 2px;
}

.assignment-status[b-xfsyxicp1v] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.assignment-status.is-done[b-xfsyxicp1v] {
    background: #e7f6ec;
    color: #1a7f37;
}

.assignment-status.is-progress[b-xfsyxicp1v] {
    background: #e6ecff;
    color: #2f43a8;
}

.assignment-status.is-queued[b-xfsyxicp1v] {
    background: var(--neutral-fill-3-rest, #eef0f3);
    color: var(--neutral-foreground-2, #4b5563);
}

.assignment-status.is-hold[b-xfsyxicp1v] {
    background: #fdeaea;
    color: #b3261e;
}

.assignment-status[b-xfsyxicp1v]  svg {
    flex: 0 0 auto;
}

/* ---- assign field ---- */

.assignment-field[b-xfsyxicp1v] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.assignment-field-label[b-xfsyxicp1v] {
    font-size: 12px;
    font-weight: 600;
    color: var(--colorNeutralForeground1, #1f2937);
}

.assignment-picker[b-xfsyxicp1v] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.assignment-picker > *:first-child[b-xfsyxicp1v] {
    flex: 1 1 auto;
    min-width: 0;
}

/* ---- footer ---- */

.assignment-foot[b-xfsyxicp1v] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--neutral-stroke-divider-rest, #e5e7eb);
    font-size: 11px;
    color: var(--neutral-foreground-3, #6b7280);
}

.assignment-foot[b-xfsyxicp1v]  svg {
    color: var(--neutral-foreground-3, #8a93a3);
    flex: 0 0 auto;
}

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

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

/* ---- spacing: FluentCard's own flex gap doesn't reach its content, so space the blocks
   with margins on these plain elements instead ---- */

.assignment-context[b-xfsyxicp1v],
.assignment-empty[b-xfsyxicp1v] {
    margin-top: 12px;
}

.assignee-wrap[b-xfsyxicp1v] {
    margin-top: 10px;
}

.assignment-foot[b-xfsyxicp1v] {
    margin-top: 12px;
    padding-top: 12px;
}
/* _content/PSMS.Web/Components/Pages/JobOrder/Settings/JobOrderBranchFormSettingsDialog.razor.rz.scp.css */
/* Plain divs are styled directly; the Fluent fields inside the grids are child components, so
   their width needs ::deep (see CLAUDE.md, Razor CSS Isolation). */
.jobf-form[b-kek6c295j8] { display: flex; flex-direction: column; gap: 14px; }

.jobf-top[b-kek6c295j8] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; }
.jobf-active[b-kek6c295j8] { padding-bottom: 6px; }

.jobf-group[b-kek6c295j8] { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--colorNeutralStroke2); border-radius: 10px; background: var(--colorNeutralBackground2); }
.jobf-group-title[b-kek6c295j8] { font-weight: 600; font-size: 13px; }

.jobf-grid[b-kek6c295j8] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.jobf-grid[b-kek6c295j8]  * { min-width: 0; }

.jobf-hint[b-kek6c295j8] { font-size: 12px; color: var(--colorNeutralForeground3); }
[b-kek6c295j8] .jobf-affix { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; color: var(--colorNeutralForeground3); font-weight: 600; }

@media (max-width: 700px) {
    .jobf-grid[b-kek6c295j8] { grid-template-columns: minmax(0, 1fr); }
    .jobf-top[b-kek6c295j8] { grid-template-columns: minmax(0, 1fr); }
}
/* _content/PSMS.Web/Components/Pages/JobOrder/SubcontractCard.razor.rz.scp.css */
/* Subcontracting card. Header classes share names with ProductionAssignmentCard (CSS isolation is per
   component, so they're redeclared here). Content uses plain wrappers styled directly: FluentCard's
   own gap doesn't reliably reach its content. */
[b-yezh0wf12n] .assignment-card {
    display: flex;
    flex-direction: column;
    padding: 16px;
}

/* ---- header ---- */

.assignment-head[b-yezh0wf12n] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.assignment-head-icon[b-yezh0wf12n] {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--colorBrandBackground2, #e6f4f4);
    color: var(--colorBrandBackground, #0f6c6c);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.assignment-head-text[b-yezh0wf12n] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.assignment-subtitle[b-yezh0wf12n] {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--neutral-foreground-3, #6b7280);
}

.sc-proto[b-yezh0wf12n] {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 2px 6px;
    margin-left: 4px;
    border-radius: 4px;
    background: #fff4ce;
    color: #8a6100;
    vertical-align: middle;
}

/* ---- body ---- */

.sc-body[b-yezh0wf12n] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 14px;
}

/* ---- supplier bar ---- */

.sc-supplier[b-yezh0wf12n] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--neutral-stroke-divider-rest, #e5e7eb);
    background: var(--neutral-fill-secondary-rest, #f7f8fa);
}

.sc-supplier-icon[b-yezh0wf12n] {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #e8f0fe;
    color: #1f5fbf;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sc-supplier-name[b-yezh0wf12n] {
    font-size: 14px;
    font-weight: 700;
    color: var(--colorNeutralForeground1, #1f2937);
    min-width: 0;
}

.sc-code[b-yezh0wf12n] {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid var(--neutral-stroke-rest, #d5d9e2);
    background: var(--neutral-layer-1, #fff);
    color: var(--neutral-foreground-2, #4b5563);
}

.sc-sep[b-yezh0wf12n] {
    width: 1px;
    align-self: stretch;
    min-height: 18px;
    background: var(--neutral-stroke-rest, #d5d9e2);
}

.sc-pill[b-yezh0wf12n] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.sc-dot[b-yezh0wf12n] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.sc-pill.is-queued[b-yezh0wf12n] {
    background: #e6f4f4;
    color: #0f6c6c;
}

.sc-pill.is-progress[b-yezh0wf12n] {
    background: #e6ecff;
    color: #2f43a8;
}

.sc-pill.is-done[b-yezh0wf12n] {
    background: #e7f6ec;
    color: #1a7f37;
}

.sc-pill.is-hold[b-yezh0wf12n] {
    background: #fdeaea;
    color: #b3261e;
}

/* ---- section boxes ---- */

.sc-box[b-yezh0wf12n] {
    border: 1px solid var(--neutral-stroke-divider-rest, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
}

.sc-box > header[b-yezh0wf12n] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: var(--neutral-fill-secondary-rest, #f5f6f8);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--neutral-foreground-2, #4b5563);
}

.sc-box > header[b-yezh0wf12n]  svg {
    color: var(--neutral-foreground-2, #4b5563);
}

.sc-line[b-yezh0wf12n] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0 12px;
    padding: 9px 0;
    font-size: 13px;
}

.sc-line + .sc-line[b-yezh0wf12n] {
    border-top: 1px solid var(--neutral-stroke-divider-rest, #eef0f3);
}

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

.sc-line > span:last-child[b-yezh0wf12n] {
    font-weight: 600;
    text-align: right;
}

.sc-line.sc-line-total[b-yezh0wf12n] {
    border-top: 1px dashed var(--neutral-stroke-rest, #d5d9e2);
}

.is-good[b-yezh0wf12n] {
    color: #1a7f37;
}

.is-bad[b-yezh0wf12n] {
    color: #b3261e;
}

/* ---- access chips ---- */

.sc-chips[b-yezh0wf12n] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
}

.sc-chip[b-yezh0wf12n] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--neutral-fill-3-rest, #eef0f3);
    color: var(--neutral-foreground-2, #4b5563);
}

.sc-chip.is-on[b-yezh0wf12n] {
    background: #e6f4f4;
    color: #0f6c6c;
}

/* ---- notes ---- */

.sc-note[b-yezh0wf12n] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    font-size: 13px;
    white-space: pre-line;
}

.sc-note + .sc-note[b-yezh0wf12n] {
    border-top: 1px solid var(--neutral-stroke-divider-rest, #eef0f3);
}

.sc-note strong[b-yezh0wf12n] {
    font-size: 11px;
    color: var(--neutral-foreground-3, #6b7280);
}

/* ---- actions ---- */

.sc-actions[b-yezh0wf12n],
.sc-actions-row[b-yezh0wf12n] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.sc-actions[b-yezh0wf12n] {
    padding-top: 14px;
    border-top: 1px solid var(--neutral-stroke-divider-rest, #e5e7eb);
}

.sc-spacer[b-yezh0wf12n] {
    flex: 1 1 auto;
}

.sc-cancel[b-yezh0wf12n] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--neutral-stroke-divider-rest, #e5e7eb);
}

/* ---- footer ---- */

.assignment-foot[b-yezh0wf12n] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--neutral-foreground-3, #6b7280);
}

.assignment-foot[b-yezh0wf12n]  svg {
    color: var(--neutral-foreground-3, #8a93a3);
    flex: 0 0 auto;
}

/* ---- empty state ---- */

.sc-empty[b-yezh0wf12n] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 10px;
    background: var(--neutral-fill-secondary-rest, #f5f6f8);
}

.sc-empty-icon[b-yezh0wf12n] {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--neutral-layer-1, #fff);
    color: var(--colorBrandBackground, #0f6c6c);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sc-empty-text[b-yezh0wf12n] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--neutral-foreground-3, #6b7280);
}

.sc-empty-text strong[b-yezh0wf12n] {
    font-size: 13px;
    color: var(--colorNeutralForeground1, #1f2937);
}

/* ---- compact pass: the card lives in the narrow side column ---- */

.assignment-head-icon[b-yezh0wf12n] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
}

.sc-body[b-yezh0wf12n] {
    gap: 10px;
    margin-top: 12px;
}

.sc-supplier[b-yezh0wf12n] {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px 10px;
}

.sc-supplier-icon[b-yezh0wf12n] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
}

.sc-supplier-name[b-yezh0wf12n] {
    flex: 1 1 auto;
    font-size: 13px;
    line-height: 1.3;
}

.sc-code[b-yezh0wf12n] {
    flex: 0 0 auto;
    font-size: 10px;
    padding: 1px 6px;
}

.sc-pill[b-yezh0wf12n] {
    flex: 0 0 auto;
    font-size: 11px;
    padding: 2px 8px;
    gap: 5px;
}

.sc-box > header[b-yezh0wf12n] {
    padding: 6px 10px;
    font-size: 10px;
}

.sc-line[b-yezh0wf12n] {
    margin: 0 10px;
    padding: 6px 0;
    font-size: 12px;
}

.sc-chips[b-yezh0wf12n] {
    gap: 6px;
    padding: 8px 10px;
}

.sc-chip[b-yezh0wf12n] {
    font-size: 11px;
    padding: 2px 9px;
    gap: 4px;
}

.sc-note[b-yezh0wf12n] {
    padding: 7px 10px;
    font-size: 12px;
}

.sc-actions[b-yezh0wf12n],
.sc-actions-row[b-yezh0wf12n] {
    gap: 6px;
}

.sc-actions[b-yezh0wf12n],
.sc-cancel[b-yezh0wf12n] {
    padding-top: 10px;
}

.sc-empty[b-yezh0wf12n] {
    padding: 10px 12px;
}

.sc-chip[b-yezh0wf12n]  svg {
    width: 12px;
    height: 12px;
}
/* _content/PSMS.Web/Components/Pages/LalamoveBooking/LalamoveBooking.razor.rz.scp.css */
.lb-summary-grid[b-jes8i8lxtt] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
}

@media (max-width: 699.98px) {
    .lb-summary-grid[b-jes8i8lxtt] {
        grid-template-columns: 1fr;
    }
}

[b-jes8i8lxtt] .lb-form-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

[b-jes8i8lxtt] .lb-step-subtitle {
    display: block;
    color: var(--colorNeutralForeground3, #6b7280);
}

.lb-step-header[b-jes8i8lxtt] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 16px 0 12px;
}

.lb-step-number[b-jes8i8lxtt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: var(--accent-fill-rest, #0f6cbd);
    color: white;
    font-weight: 700;
    font-size: 13px;
}

.lb-field-grid[b-jes8i8lxtt] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.lb-field-grid-2[b-jes8i8lxtt] {
    grid-template-columns: repeat(2, 1fr);
}

.lb-field-grid-3[b-jes8i8lxtt] {
    grid-template-columns: repeat(3, 1fr);
}

.lb-field-grid-4[b-jes8i8lxtt] {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 699.98px) {
    .lb-field-grid-2[b-jes8i8lxtt],
    .lb-field-grid-3[b-jes8i8lxtt],
    .lb-field-grid-4[b-jes8i8lxtt] {
        grid-template-columns: 1fr;
    }
}

.lb-char-count[b-jes8i8lxtt] {
    display: block;
    text-align: right;
    font-size: 11px;
    color: var(--colorNeutralForeground3, #6b7280);
    margin-top: 2px;
}

.lb-hint[b-jes8i8lxtt] {
    display: block;
    font-size: 12px;
    color: var(--colorNeutralForeground3, #6b7280);
    margin: -6px 0 12px;
}

[b-jes8i8lxtt] .lb-toggle-row {
    margin-top: 6px;
    margin-bottom: 12px;
}

.lb-quote-placeholder[b-jes8i8lxtt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 16px;
    text-align: center;
    color: var(--colorNeutralForeground3, #6b7280);
    border: 1px dashed var(--colorNeutralStroke2, #e1e1e1);
    border-radius: 8px;
}

.lb-quote-card[b-jes8i8lxtt] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--colorNeutralStroke2, #e1e1e1);
    border-radius: 8px;
    background: #eaf3ff;
}

.lb-quote-id[b-jes8i8lxtt] {
    font-weight: 600;
}

.lb-quote-expiry[b-jes8i8lxtt] {
    font-size: 12px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.lb-quote-rows[b-jes8i8lxtt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
}

.lb-quote-row[b-jes8i8lxtt] {
    display: flex;
    justify-content: space-between;
}

.lb-quote-row.lb-quote-total[b-jes8i8lxtt] {
    font-weight: 700;
    font-size: 16px;
    border-top: 1px solid var(--colorNeutralStroke2, #e1e1e1);
    padding-top: 6px;
    margin-top: 2px;
}

.lb-quote-source[b-jes8i8lxtt] {
    font-size: 11px;
    color: var(--colorNeutralForeground3, #6b7280);
}

[b-jes8i8lxtt] .lb-actions {
    margin-top: 16px;
}

[b-jes8i8lxtt] .lb-map-card,
[b-jes8i8lxtt] .lb-preview-card,
[b-jes8i8lxtt] .lb-notes-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lb-map-canvas[b-jes8i8lxtt] {
    width: 100%;
    height: 220px;
    border-radius: 8px;
    margin: 10px 0;
    z-index: 0;
}

/* Toggled by lalamove-map.js while "pick on map" mode is armed (the pin button next to an
   address field was just clicked) - the crosshair cursor is the only cue that the next click
   places a pin rather than panning the map. */
.lb-map-canvas.lb-map-armed[b-jes8i8lxtt] {
    cursor: crosshair;
}

.lb-route-line[b-jes8i8lxtt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 12px 0;
}

.lb-route-point[b-jes8i8lxtt] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.lb-route-point > div[b-jes8i8lxtt] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.lb-route-label[b-jes8i8lxtt] {
    font-size: 12px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.lb-route-value[b-jes8i8lxtt] {
    font-weight: 600;
    word-break: break-word;
}

.lb-route-connector[b-jes8i8lxtt] {
    width: 1px;
    height: 18px;
    margin-left: 9px;
    border-left: 2px dashed var(--colorNeutralStroke2, #e1e1e1);
}

.lb-preview-rows[b-jes8i8lxtt] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    font-size: 13px;
}

.lb-preview-row[b-jes8i8lxtt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.lb-preview-row > span:first-child[b-jes8i8lxtt] {
    color: var(--colorNeutralForeground3, #6b7280);
}

.lb-preview-row > span:last-child[b-jes8i8lxtt] {
    font-weight: 600;
    text-align: right;
}

.lb-preview-value-stack[b-jes8i8lxtt] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lb-note-row[b-jes8i8lxtt] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 12px;
    color: var(--colorNeutralForeground2, #424242);
    margin-top: 10px;
}

.lb-note-index[b-jes8i8lxtt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 50%;
    background: var(--colorNeutralStroke2, #e1e1e1);
    font-size: 10px;
    font-weight: 700;
}
/* _content/PSMS.Web/Components/Pages/LalamoveBooking/LalamoveBookings.razor.rz.scp.css */
.lbl-summary-grid[b-q7uuuw27un] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    width: 100%;
}

@media (max-width: 899.98px) {
    .lbl-summary-grid[b-q7uuuw27un] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 479.98px) {
    .lbl-summary-grid[b-q7uuuw27un] {
        grid-template-columns: 1fr;
    }
}

[b-q7uuuw27un] .lbl-filter-card,
[b-q7uuuw27un] .lbl-list-card,
[b-q7uuuw27un] .lbl-donut-card,
[b-q7uuuw27un] .lbl-activity-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

[b-q7uuuw27un] .lbl-step-subtitle {
    display: block;
    color: var(--colorNeutralForeground3, #6b7280);
}

.lbl-empty[b-q7uuuw27un] {
    padding: 32px 16px;
    text-align: center;
    color: var(--colorNeutralForeground3, #6b7280);
}

.lbl-grid-container[b-q7uuuw27un] {
    overflow-x: auto;
}

[b-q7uuuw27un] .lbl-grid-footer {
    color: var(--colorNeutralForeground3, #6b7280);
    font-size: 13px;
}

.lbl-activity-rows[b-q7uuuw27un] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 6px;
}

.lbl-activity-row[b-q7uuuw27un] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.lbl-activity-dot[b-q7uuuw27un] {
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 50%;
    margin-top: 5px;
}

.lbl-dot-green[b-q7uuuw27un] { background: #1a9e54; }
.lbl-dot-purple[b-q7uuuw27un] { background: #5b3fbf; }
.lbl-dot-orange[b-q7uuuw27un] { background: #e56b00; }
.lbl-dot-blue[b-q7uuuw27un] { background: #1675ce; }
.lbl-dot-red[b-q7uuuw27un] { background: #d13438; }

.lbl-activity-body[b-q7uuuw27un] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    flex: 1 1 auto;
    min-width: 0;
}

.lbl-activity-message[b-q7uuuw27un] {
    font-weight: 600;
    font-size: 13px;
}

.lbl-activity-ref[b-q7uuuw27un] {
    font-size: 11px;
    color: var(--colorNeutralForeground3, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lbl-activity-time[b-q7uuuw27un] {
    font-size: 11px;
    color: var(--colorNeutralForeground3, #6b7280);
    white-space: nowrap;
}
/* _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/Payments/JobOrderPayment.razor.rz.scp.css */
/* Two-column working area: form on the left, live allocation summary pinned on the right.
   The left column takes minmax(0, …) so it can shrink freely; the right column keeps a real
   floor. No overflow-x here on purpose — making .jop-layout a scroll container would also make
   the sticky .jop-side stick to *its* top edge and render offset downward at scroll 0 (the card
   would sit lower than the form card). The 900px breakpoint stacks before it gets that tight. */
.jop-layout[b-e3014bhtol] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr);
    gap: 14px;
    width: 100%;
    align-items: start;
}

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

.jop-main[b-e3014bhtol] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.jop-side[b-e3014bhtol] {
    position: sticky;
    top: 12px;
}

[b-e3014bhtol] .jop-card {
    padding: 16px;
    width: 100%;
}

.jop-card-head[b-e3014bhtol] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.jop-card-head h2[b-e3014bhtol] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

/* Rich header for the Payment Information card: icon tile + title/subtitle + "required" note. */
.jop-info-head[b-e3014bhtol] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.jop-info-head-icon[b-e3014bhtol] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--colorBrandBackground2, #eff4fc);
}

.jop-info-head-text h2[b-e3014bhtol] {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.jop-info-head-text p[b-e3014bhtol] {
    margin: 1px 0 0;
    font-size: 12px;
    color: var(--neutral-foreground-3, #6b7280);
}

.jop-req-note[b-e3014bhtol] {
    font-size: 11px;
    color: var(--neutral-foreground-3, #6b7280);
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 720px) {
    .jop-req-note[b-e3014bhtol] {
        display: none;
    }
}

.jop-req[b-e3014bhtol] {
    color: var(--error, #d13438);
    font-weight: 700;
}

.jop-field-grid[b-e3014bhtol] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    align-items: start;
}

@media (max-width: 620px) {
    .jop-field-grid[b-e3014bhtol] {
        grid-template-columns: 1fr;
    }
}

.jop-field[b-e3014bhtol] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.jop-field--full[b-e3014bhtol] {
    grid-column: 1 / -1;
}

/* Tinted background so the payment total reads as the primary input, kept tight for space. */
.jop-field--amount[b-e3014bhtol] {
    background: var(--colorBrandBackground2, #eef4fd);
    border: 1px solid var(--colorBrandStroke2, #cfe0f5);
    border-radius: 8px;
    padding: 8px 10px 10px;
}

.jop-group-divider[b-e3014bhtol] {
    grid-column: 1 / -1;
    border-top: 1px solid var(--neutral-stroke-divider-rest, #e5e7eb);
    margin: 0;
}

.jop-label[b-e3014bhtol] {
    font-size: 12px;
    font-weight: 600;
    color: var(--neutral-foreground-2, #374151);
    margin-bottom: 4px;
}

.jop-hint[b-e3014bhtol] {
    margin-top: 3px;
    font-size: 11px;
    color: var(--neutral-foreground-3, #6b7280);
    line-height: 1.35;
}

/* Bolder labels on the Fluent inputs to match the custom .jop-label / the mockup. */
.jop-field-grid[b-e3014bhtol]  label,
.jop-field-grid[b-e3014bhtol]  .fluent-field-label {
    font-weight: 600;
}

/* ₱ shown as a divided prefix segment inside the amount input, like the mockup. */
[b-e3014bhtol] .jop-peso {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    padding-right: 8px;
    margin-right: 8px;
    border-right: 1px solid var(--colorNeutralStroke2, #d1d5db);
    font-weight: 700;
    color: var(--accent-fill-rest, #0f6cbd);
}

.jop-payment-no[b-e3014bhtol] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--colorNeutralStroke2, #d1d5db);
    border-radius: 6px;
    background: var(--colorNeutralBackground3, #f3f4f6);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.jop-payment-no span[b-e3014bhtol] {
    margin-right: auto;
}

.jop-empty[b-e3014bhtol] {
    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;
}

/* Dense allocation grid, same treatment as PriceComponentsGrid's spreadsheet table. */
.jop-alloc-scroll[b-e3014bhtol] {
    overflow-x: auto;
    border: 1px solid var(--colorNeutralStroke2, #d1d5db);
    border-radius: 4px;
}

.jop-alloc-table[b-e3014bhtol] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: var(--colorNeutralBackground1, #ffffff);
}

.jop-alloc-table th[b-e3014bhtol],
.jop-alloc-table td[b-e3014bhtol] {
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    padding: 6px 10px;
    text-align: left;
    white-space: nowrap;
}

.jop-alloc-table th[b-e3014bhtol] {
    font-weight: 600;
    background: var(--colorNeutralBackground3, #f3f4f6);
    color: var(--colorNeutralForeground2, #374151);
}

.jop-alloc-table th.num[b-e3014bhtol],
.jop-alloc-table td.num[b-e3014bhtol] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.jop-col-num[b-e3014bhtol] { width: 40px; }
.jop-col-action[b-e3014bhtol] { width: 40px; text-align: center; padding: 0; }

.jop-alloc-table tr > *:first-child[b-e3014bhtol] { border-left: 0; }
.jop-alloc-table tr > *:last-child[b-e3014bhtol] { border-right: 0; }
.jop-alloc-table thead tr > *[b-e3014bhtol] { border-top: 0; }

.jop-alloc-table tbody tr:hover td[b-e3014bhtol] {
    background: var(--colorNeutralBackground2, #f9fafb);
}

.jop-alloc-table tfoot td[b-e3014bhtol] {
    font-weight: 700;
    background: var(--colorNeutralBackground3, #f3f4f6);
    border-bottom: 0;
}

.jop-foot-total[b-e3014bhtol] {
    font-variant-numeric: tabular-nums;
}

.jop-cell[b-e3014bhtol] {
    display: block;
    width: 100%;
    min-width: 90px;
    box-sizing: border-box;
    border: 1px solid transparent;
    margin: 0;
    padding: 4px 6px;
    background: transparent;
    font: inherit;
    color: inherit;
    line-height: 1.4;
    border-radius: 3px;
}

.jop-cell.num[b-e3014bhtol] {
    text-align: right;
}

.jop-cell:focus[b-e3014bhtol] {
    outline: 2px solid var(--colorBrandStroke1, #2563eb);
    outline-offset: -2px;
    background: var(--colorNeutralBackground1, #ffffff);
}

.jop-cell.is-error[b-e3014bhtol] {
    border-color: var(--error, #d13438);
    background: #fdf3f4;
}

/* Allocation summary */
[b-e3014bhtol] .jop-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.jop-sum-row[b-e3014bhtol] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.jop-sum-body[b-e3014bhtol] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.jop-sum-label[b-e3014bhtol] {
    font-size: 11px;
    color: var(--neutral-foreground-3, #6b7280);
}

.jop-sum-value[b-e3014bhtol] {
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.jop-sum-value.jop-ok[b-e3014bhtol] {
    color: var(--success, #0f7b0f);
}

.jop-sum-value.jop-bad[b-e3014bhtol] {
    color: var(--error, #d13438);
}

.jop-summary-actions[b-e3014bhtol] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.jop-alloc-table a[b-e3014bhtol] {
    color: var(--accent-fill-rest, #0f6cbd);
    font-weight: 600;
    text-decoration: none;
}

.jop-alloc-table a:hover[b-e3014bhtol] {
    text-decoration: underline;
}
/* _content/PSMS.Web/Components/Pages/Payments/JobOrderPaymentDetail.razor.rz.scp.css */
[b-9s8qcmg8ve] .pd-card {
    padding: 16px;
    width: 100%;
}

.pd-card-head[b-9s8qcmg8ve] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.pd-card-head h2[b-9s8qcmg8ve] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.pd-grid[b-9s8qcmg8ve] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 32px;
}

@media (max-width: 620px) {
    .pd-grid[b-9s8qcmg8ve] {
        grid-template-columns: 1fr;
    }
}

.pd-item[b-9s8qcmg8ve] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pd-item--full[b-9s8qcmg8ve] {
    grid-column: 1 / -1;
}

.pd-row[b-9s8qcmg8ve] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.pd-row-icon[b-9s8qcmg8ve] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--colorNeutralBackground3, #f0f1f3);
    color: var(--colorNeutralForeground2, #424242);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pd-row-text[b-9s8qcmg8ve] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pd-label[b-9s8qcmg8ve] {
    font-size: 11px;
    font-weight: 600;
    color: var(--neutral-foreground-3, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
}

.pd-value[b-9s8qcmg8ve] {
    font-size: 14px;
    color: var(--neutral-foreground-1, #1f2937);
    word-break: break-word;
}

.pd-value.pd-amount[b-9s8qcmg8ve] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pd-progress-row[b-9s8qcmg8ve] {
    margin-bottom: 6px;
}

.pd-progress-caption[b-9s8qcmg8ve] {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--colorNeutralForeground3, #6b7280);
    margin-bottom: 12px;
}

.pd-empty[b-9s8qcmg8ve] {
    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;
}

.pd-scroll[b-9s8qcmg8ve] {
    overflow-x: auto;
    border: 1px solid var(--colorNeutralStroke2, #d1d5db);
    border-radius: 4px;
}

.pd-table[b-9s8qcmg8ve] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: var(--colorNeutralBackground1, #ffffff);
}

.pd-table th[b-9s8qcmg8ve],
.pd-table td[b-9s8qcmg8ve] {
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    padding: 6px 10px;
    text-align: left;
    white-space: nowrap;
}

.pd-table th[b-9s8qcmg8ve] {
    font-weight: 600;
    background: var(--colorNeutralBackground3, #f3f4f6);
    color: var(--colorNeutralForeground2, #374151);
}

.pd-table th.num[b-9s8qcmg8ve],
.pd-table td.num[b-9s8qcmg8ve] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.pd-col-num[b-9s8qcmg8ve] { width: 40px; }

.pd-table tr > *:first-child[b-9s8qcmg8ve] { border-left: 0; }
.pd-table tr > *:last-child[b-9s8qcmg8ve] { border-right: 0; }
.pd-table thead tr > *[b-9s8qcmg8ve] { border-top: 0; }

.pd-table tfoot td[b-9s8qcmg8ve] {
    font-weight: 700;
    background: var(--colorNeutralBackground3, #f3f4f6);
    border-bottom: 0;
}

.pd-table a[b-9s8qcmg8ve] {
    color: var(--accent-fill-rest, #0f6cbd);
    font-weight: 600;
    text-decoration: none;
}

.pd-table a:hover[b-9s8qcmg8ve] {
    text-decoration: underline;
}
/* _content/PSMS.Web/Components/Pages/Payments/JobOrderPayments.razor.rz.scp.css */
.payments-summary-grid[b-g3is8n4jwa] {
    width: 100%;
}

/* each stat card fills its FluentGrid cell and matches its row's height */
.payments-summary-grid[b-g3is8n4jwa]  .basic-value-card {
    display: block;
    width: 100%;
    height: 100%;
}

/* Card keeps its rounded corners; the inner container is the horizontal scroller so the
   footer/paginator row below it stays put. */
[b-g3is8n4jwa] .payments-grid-card {
    overflow: hidden;
}

.payments-grid-container[b-g3is8n4jwa] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* FluentDataGrid (Table mode) renders <table class="fluent-data-grid"> with width:auto and cells
   that clip their overflow — in a narrow container it collapses the 8 columns to unreadable
   slivers. A hard min-width keeps them at full size and lets the container scroll instead. */
.payments-grid-container[b-g3is8n4jwa]  table.fluent-data-grid {
    min-width: 900px;
}

.payments-grid-container[b-g3is8n4jwa]  th {
    white-space: nowrap;
}

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

.payments-footer-text[b-g3is8n4jwa] {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    color: var(--neutral-foreground-rest);
}

[b-g3is8n4jwa] .payments-grid-card a {
    color: var(--accent-fill-rest, #0f6cbd);
    font-weight: 600;
    text-decoration: none;
}

[b-g3is8n4jwa] .payments-grid-card a:hover {
    text-decoration: underline;
}
/* _content/PSMS.Web/Components/Pages/PayrollManagement/CashAdvances.razor.rz.scp.css */
/* Plain wrapper so every rule here has a scoped ancestor (the page's children are mostly Fluent
   components, which don't carry this file's scope attribute themselves). Same look as the
   Employees list. */
.ca-page[b-u76zrqu8wy] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.ca-stats[b-u76zrqu8wy] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.ca-stat[b-u76zrqu8wy] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    border: 1px solid var(--ca-border);
    border-radius: 10px;
    background: var(--ca-soft);
    min-width: 0;
}

.ca-stat--blue[b-u76zrqu8wy] { --ca-soft: #f1f6fe; --ca-border: #dbe8fb; --ca-tile: #dbe9fd; --ca-ink: #2563eb; }
.ca-stat--green[b-u76zrqu8wy] { --ca-soft: #f1faf4; --ca-border: #d7efdf; --ca-tile: #d8f1e0; --ca-ink: #16a34a; }
.ca-stat--amber[b-u76zrqu8wy] { --ca-soft: #fffaf0; --ca-border: #fbe9c6; --ca-tile: #fdecc8; --ca-ink: #ea8a00; }
.ca-stat--red[b-u76zrqu8wy] { --ca-soft: #fef4f4; --ca-border: #fbdcdc; --ca-tile: #fcdada; --ca-ink: #dc2626; }

.ca-stat-icon[b-u76zrqu8wy] {
    display: grid;
    place-items: center;
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background: var(--ca-tile);
}

.ca-stat-icon[b-u76zrqu8wy]  svg {
    fill: var(--ca-ink);
}

.ca-stat-body[b-u76zrqu8wy] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.ca-stat-title[b-u76zrqu8wy],
.ca-stat-sub[b-u76zrqu8wy] {
    font-size: 13px;
    color: var(--colorNeutralForeground2, #424242);
}

.ca-stat-value[b-u76zrqu8wy] {
    font-size: 24px;
    font-weight: 700;
    color: var(--colorNeutralForeground1, #242424);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ca-person[b-u76zrqu8wy] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.ca-avatar[b-u76zrqu8wy] {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

.ca-person-text[b-u76zrqu8wy] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

.ca-name[b-u76zrqu8wy] {
    font-weight: 600;
    color: var(--colorNeutralForeground1, #1f2a44);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ca-name:hover[b-u76zrqu8wy] {
    color: var(--colorBrandForeground1, #0f6cbd);
    text-decoration: underline;
}

.ca-sub[b-u76zrqu8wy] {
    font-size: 12px;
    color: var(--colorNeutralForeground3, #616161);
}

/* Repayment column: paid share of the advance over the remaining balance. */
.ca-repay[b-u76zrqu8wy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ca-repay-track[b-u76zrqu8wy] {
    height: 6px;
    border-radius: 3px;
    background: var(--colorNeutralBackground3, #eceef1);
    overflow: hidden;
}

.ca-repay-fill[b-u76zrqu8wy] {
    height: 100%;
    border-radius: 3px;
    background: #16a34a;
}

.ca-empty[b-u76zrqu8wy] {
    padding: 28px 16px;
    text-align: center;
    color: var(--colorNeutralForeground3, #616161);
}

.ca-footer[b-u76zrqu8wy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--colorNeutralStroke2, #e1e1e1);
    font-size: 13px;
}

/* Two-line rows need the cell content to wrap instead of Fluent's single-line ellipsis. */
.ca-page[b-u76zrqu8wy]  .fluent-data-grid td {
    white-space: normal;
    padding-top: 8px;
    padding-bottom: 8px;
}

@media (max-width: 1100px) {
    .ca-stats[b-u76zrqu8wy] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .ca-stats[b-u76zrqu8wy] {
        grid-template-columns: 1fr;
    }
}
/* _content/PSMS.Web/Components/Pages/PayrollManagement/EmployeeOverview.razor.rz.scp.css */
/* .emp-page is a plain wrapper so the ::deep rules below have a scoped ancestor (PageHeader,
   FluentTabs and FluentIcon are components and don't carry this file's scope attribute). */
.emp-page[b-jgmlwfyk13] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* Sidebar + tabs. */
.emp-layout[b-jgmlwfyk13] {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.emp-main[b-jgmlwfyk13] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.emp-tab[b-jgmlwfyk13] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 14px;
}

/* Shared card surface (plain element, so no shadow and no FluentCard height quirks). */
.emp-card[b-jgmlwfyk13] {
    box-sizing: border-box;
    padding: 18px 20px;
    border: 1px solid var(--colorNeutralStroke2, #e1e1e1);
    border-radius: 8px;
    background: var(--colorNeutralBackground1, #ffffff);
}

.emp-card h2[b-jgmlwfyk13] {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 600;
}

.emp-card-head[b-jgmlwfyk13] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--colorNeutralStroke2, #e1e1e1);
}

.emp-card-head h2[b-jgmlwfyk13] {
    margin: 0;
}

/* ---------- Sidebar ---------- */
.emp-side[b-jgmlwfyk13] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.emp-avatar[b-jgmlwfyk13] {
    display: grid;
    place-items: center;
    align-self: center;
    width: 112px;
    height: 112px;
    margin-bottom: 10px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 38px;
    font-weight: 600;
}

.emp-side-name[b-jgmlwfyk13] {
    font-size: 16px;
    font-weight: 700;
}

.emp-side-code[b-jgmlwfyk13] {
    font-size: 13px;
    color: var(--colorNeutralForeground3, #616161);
}

.emp-side-lines[b-jgmlwfyk13] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--colorNeutralStroke2, #e1e1e1);
    font-size: 13px;
}

.emp-side-lines span[b-jgmlwfyk13] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.emp-side-lines[b-jgmlwfyk13]  svg {
    flex: 0 0 auto;
    fill: var(--colorBrandForeground1, #0f6cbd);
}

.emp-side-facts[b-jgmlwfyk13] {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 12px 0 0;
}

.emp-side-facts dt[b-jgmlwfyk13] {
    margin-top: 12px;
    font-size: 12px;
    color: var(--colorNeutralForeground3, #616161);
}

.emp-side-facts dt:first-child[b-jgmlwfyk13] {
    margin-top: 0;
}

.emp-side-facts dd[b-jgmlwfyk13] {
    margin: 2px 0 0;
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* ---------- Stat tiles ---------- */
.emp-tiles[b-jgmlwfyk13] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.emp-tile[b-jgmlwfyk13] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--et-border);
    border-radius: 8px;
    background: var(--et-soft);
}

.emp-tile--purple[b-jgmlwfyk13] { --et-soft: #f7f3fe; --et-border: #e7defb; --et-tile: #e9defc; --et-ink: #7c3aed; }
.emp-tile--blue[b-jgmlwfyk13] { --et-soft: #f1f6fe; --et-border: #dbe8fb; --et-tile: #dbe9fd; --et-ink: #2563eb; }
.emp-tile--green[b-jgmlwfyk13] { --et-soft: #f1faf4; --et-border: #d7efdf; --et-tile: #d8f1e0; --et-ink: #16a34a; }
.emp-tile--amber[b-jgmlwfyk13] { --et-soft: #fffaf0; --et-border: #fbe9c6; --et-tile: #fdecc8; --et-ink: #ea8a00; }

.emp-tile-icon[b-jgmlwfyk13] {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--et-tile);
}

.emp-tile-icon[b-jgmlwfyk13]  svg {
    fill: var(--et-ink);
}

.emp-tile-body[b-jgmlwfyk13] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.emp-tile-title[b-jgmlwfyk13],
.emp-tile-sub[b-jgmlwfyk13] {
    font-size: 12px;
    color: var(--colorNeutralForeground3, #616161);
}

.emp-tile-value[b-jgmlwfyk13] {
    font-size: 18px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Detail rows: two label/value columns side by side ---------- */
.emp-cols[b-jgmlwfyk13] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 40px;
}

.emp-rows[b-jgmlwfyk13] {
    display: grid;
    grid-template-columns: minmax(120px, max-content) 1fr;
    gap: 12px 24px;
    align-content: start;
    margin: 0;
    font-size: 13px;
}

.emp-rows dt[b-jgmlwfyk13] {
    color: var(--colorNeutralForeground3, #616161);
}

.emp-rows dd[b-jgmlwfyk13] {
    margin: 0;
    overflow-wrap: anywhere;
}

.emp-empty[b-jgmlwfyk13] {
    font-size: 13px;
    color: var(--colorNeutralForeground3, #616161);
}

/* ---------- Setup checklist ---------- */
.emp-setup[b-jgmlwfyk13] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 24px;
}

.emp-setup-steps[b-jgmlwfyk13] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.emp-step[b-jgmlwfyk13] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--colorNeutralForeground3, #616161);
}

.emp-step--done[b-jgmlwfyk13] {
    color: #16a34a;
}

.emp-step--done[b-jgmlwfyk13]  svg {
    fill: #16a34a;
}

/* ---------- Contact persons ---------- */
.emp-contacts[b-jgmlwfyk13] {
    display: flex;
    flex-direction: column;
}

.emp-contact[b-jgmlwfyk13] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--colorNeutralStroke2, #f0f0f0);
}

.emp-contact:first-child[b-jgmlwfyk13] {
    padding-top: 0;
}

.emp-contact:last-child[b-jgmlwfyk13] {
    padding-bottom: 0;
    border-bottom: none;
}

.emp-contact-main[b-jgmlwfyk13] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.emp-contact-name[b-jgmlwfyk13] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 13px;
}

.emp-contact-sub[b-jgmlwfyk13] {
    font-size: 12px;
    color: var(--colorNeutralForeground3, #616161);
    overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
    .emp-tiles[b-jgmlwfyk13] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

    .emp-cols[b-jgmlwfyk13] {
        grid-template-columns: 1fr;
    }
}
/* _content/PSMS.Web/Components/Pages/PayrollManagement/Employees.razor.rz.scp.css */
/* Plain wrapper so every rule here has a scoped ancestor (the page's children are mostly Fluent
   components, which don't carry this file's scope attribute themselves). */
.el-page[b-xzva966aur] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* Stat tiles: tinted background per status, matching the icon tile inside. */
.el-stats[b-xzva966aur] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.el-stat[b-xzva966aur] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    border: 1px solid var(--el-border);
    border-radius: 10px;
    background: var(--el-soft);
}

.el-stat--blue[b-xzva966aur] { --el-soft: #f1f6fe; --el-border: #dbe8fb; --el-tile: #dbe9fd; --el-ink: #2563eb; }
.el-stat--green[b-xzva966aur] { --el-soft: #f1faf4; --el-border: #d7efdf; --el-tile: #d8f1e0; --el-ink: #16a34a; }
.el-stat--amber[b-xzva966aur] { --el-soft: #fffaf0; --el-border: #fbe9c6; --el-tile: #fdecc8; --el-ink: #ea8a00; }
.el-stat--red[b-xzva966aur] { --el-soft: #fef4f4; --el-border: #fbdcdc; --el-tile: #fcdada; --el-ink: #dc2626; }

.el-stat-icon[b-xzva966aur] {
    display: grid;
    place-items: center;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    background: var(--el-tile);
    color: var(--el-ink);
}

.el-stat-icon[b-xzva966aur]  svg {
    fill: var(--el-ink);
}

.el-stat-body[b-xzva966aur] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.el-stat-title[b-xzva966aur],
.el-stat-sub[b-xzva966aur] {
    font-size: 13px;
    color: var(--colorNeutralForeground2, #424242);
}

.el-stat-value[b-xzva966aur] {
    font-size: 26px;
    font-weight: 700;
    color: var(--colorNeutralForeground1, #242424);
}

/* Employee cell: avatar + name over gender/birthday. */
.el-person[b-xzva966aur] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.el-avatar[b-xzva966aur] {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

.el-person-text[b-xzva966aur] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

.el-name[b-xzva966aur] {
    font-weight: 600;
    color: var(--colorNeutralForeground1, #1f2a44);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

.el-name:hover[b-xzva966aur] {
    color: var(--colorBrandForeground1, #0f6cbd);
    text-decoration: underline;
}

.el-sub[b-xzva966aur] {
    font-size: 12px;
    color: var(--colorNeutralForeground3, #616161);
}

.el-contact[b-xzva966aur] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    line-height: 1.35;
}

.el-contact span[b-xzva966aur] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.el-contact[b-xzva966aur]  svg {
    flex: 0 0 auto;
    fill: var(--colorBrandForeground1, #0f6cbd);
}

.el-empty[b-xzva966aur] {
    padding: 28px 16px;
    text-align: center;
    color: var(--colorNeutralForeground3, #616161);
}

.el-footer[b-xzva966aur] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--colorNeutralStroke2, #e1e1e1);
    font-size: 13px;
}

/* Two-line rows need the cell content to wrap instead of Fluent's single-line ellipsis. */
.el-page[b-xzva966aur]  .fluent-data-grid td {
    white-space: normal;
    padding-top: 8px;
    padding-bottom: 8px;
}

@media (max-width: 1100px) {
    .el-stats[b-xzva966aur] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .el-stats[b-xzva966aur] {
        grid-template-columns: 1fr;
    }
}
/* _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/PayrollManagement/PayrollOverview.razor.rz.scp.css */
/* Plain wrapper so every rule here (including the ::deep ones) has a scoped ancestor - the page's
   children are mostly Fluent components, which don't carry this file's scope attribute. */
.po-page[b-knh5pzwwx2] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* Header chips: month stepper + branch. */
.po-chip[b-knh5pzwwx2] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--colorNeutralStroke2, #e1e1e1);
    border-radius: 8px;
    padding: 6px 12px;
    min-height: 44px;
    background: var(--colorNeutralBackground1, #fff);
}

.po-chip-value[b-knh5pzwwx2] {
    font-weight: 600;
    font-size: 13px;
}

.po-chip-month[b-knh5pzwwx2] {
    min-width: 120px;
}

/* Stat tiles: tinted background per metric, matching the icon tile inside (same look as the
   Employees list tiles). */
.po-stats[b-knh5pzwwx2] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.po-stat[b-knh5pzwwx2] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    border: 1px solid var(--po-border);
    border-radius: 10px;
    background: var(--po-soft);
    min-width: 0;
}

.po-stat--green[b-knh5pzwwx2] { --po-soft: #f1faf4; --po-border: #d7efdf; --po-tile: #d8f1e0; --po-ink: #16a34a; --po-value: #0f766e; }
.po-stat--blue[b-knh5pzwwx2] { --po-soft: #f1f6fe; --po-border: #dbe8fb; --po-tile: #dbe9fd; --po-ink: #2563eb; --po-value: #1f2a44; }
.po-stat--purple[b-knh5pzwwx2] { --po-soft: #f7f3fe; --po-border: #e6dcfb; --po-tile: #e9dffc; --po-ink: #7c3aed; --po-value: #1f2a44; }
.po-stat--red[b-knh5pzwwx2] { --po-soft: #fef4f4; --po-border: #fbdcdc; --po-tile: #fcdada; --po-ink: #dc2626; --po-value: #991b1b; }

.po-stat-icon[b-knh5pzwwx2] {
    display: grid;
    place-items: center;
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    background: var(--po-tile);
    color: var(--po-ink);
}

.po-stat-icon[b-knh5pzwwx2]  svg {
    fill: var(--po-ink);
}

.po-stat-body[b-knh5pzwwx2] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.po-stat-title[b-knh5pzwwx2],
.po-stat-sub[b-knh5pzwwx2] {
    font-size: 13px;
    color: var(--colorNeutralForeground2, #424242);
}

.po-stat-value[b-knh5pzwwx2] {
    font-size: 26px;
    font-weight: 700;
    color: var(--po-value);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.po-delta[b-knh5pzwwx2] {
    display: inline-block;
    padding: 1px 8px;
    margin-right: 4px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 12px;
}

.po-delta--up[b-knh5pzwwx2] {
    background: #d8f1e0;
    color: #15803d;
}

.po-delta--down[b-knh5pzwwx2] {
    background: #fcdada;
    color: #b91c1c;
}

/* A FluentGridItem has to be a flex container itself for its card's height:100% to resolve, so
   cards in the same row match the tallest one (same fix as ProductionAnalytics' pa-grid-item). */
[b-knh5pzwwx2] .po-grid-item {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

[b-knh5pzwwx2] .po-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Donuts: conic-gradient ring with a white hole for the centre label. */
.po-donut-row[b-knh5pzwwx2] {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    flex: 1;
}

.po-donut[b-knh5pzwwx2] {
    position: relative;
    flex: 0 0 150px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

.po-donut--lg[b-knh5pzwwx2] {
    flex-basis: 180px;
    width: 180px;
    height: 180px;
}

.po-donut-hole[b-knh5pzwwx2] {
    position: absolute;
    inset: 18%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--colorNeutralBackground1, #fff);
    line-height: 1.2;
}

.po-donut-value[b-knh5pzwwx2] {
    font-size: 18px;
    font-weight: 700;
    color: var(--colorNeutralForeground1, #1f2a44);
}

.po-donut-label[b-knh5pzwwx2] {
    font-size: 12px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.po-legend[b-knh5pzwwx2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 220px;
    min-width: 0;
}

.po-legend-row[b-knh5pzwwx2] {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto 48px;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.po-dot[b-knh5pzwwx2] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.po-legend-name[b-knh5pzwwx2] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.po-legend-amount[b-knh5pzwwx2] {
    font-weight: 600;
    text-align: right;
}

.po-legend-percent[b-knh5pzwwx2] {
    color: var(--colorNeutralForeground3, #6b7280);
    text-align: right;
}

/* Payroll by Department bars. */
.po-dept-list[b-knh5pzwwx2] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.po-dept-row[b-knh5pzwwx2] {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.po-dept-name[b-knh5pzwwx2] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.po-dept-fill[b-knh5pzwwx2] {
    height: 14px;
    border-radius: 3px;
}

.po-dept-count[b-knh5pzwwx2] {
    font-weight: 600;
}

/* Top payroll cost by employee. */
.po-top-list[b-knh5pzwwx2] {
    display: flex;
    flex-direction: column;
}

.po-top-row[b-knh5pzwwx2] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--colorNeutralStroke2, #f0f0f0);
}

.po-top-row:last-child[b-knh5pzwwx2] {
    border-bottom: none;
}

.po-avatar[b-knh5pzwwx2] {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
}

.po-top-text[b-knh5pzwwx2] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    line-height: 1.35;
}

.po-top-name[b-knh5pzwwx2] {
    font-weight: 600;
    font-size: 13px;
    color: var(--colorNeutralForeground1, #1f2a44);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.po-top-name:hover[b-knh5pzwwx2] {
    color: var(--colorBrandForeground1, #0f6cbd);
    text-decoration: underline;
}

.po-top-sub[b-knh5pzwwx2] {
    font-size: 12px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.po-top-amount[b-knh5pzwwx2] {
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}

/* Recent payroll runs. */
.po-table-container[b-knh5pzwwx2] {
    overflow-x: auto;
}

.po-table[b-knh5pzwwx2] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.po-table th[b-knh5pzwwx2] {
    text-align: left;
    color: var(--colorNeutralForeground3, #6b7280);
    font-weight: 600;
    padding: 8px;
    background: var(--colorNeutralBackground2, #fafafa);
    border-bottom: 1px solid var(--colorNeutralStroke2, #e1e1e1);
    white-space: nowrap;
}

.po-table td[b-knh5pzwwx2] {
    padding: 6px 8px;
    border-bottom: 1px solid var(--colorNeutralStroke2, #f0f0f0);
    white-space: nowrap;
}

.po-table .po-col-no[b-knh5pzwwx2] {
    width: 28px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.po-table .po-align-end[b-knh5pzwwx2] {
    text-align: right;
}

.po-table .po-align-center[b-knh5pzwwx2] {
    text-align: center;
}

/* Upcoming schedules timeline. */
.po-schedule[b-knh5pzwwx2] {
    display: flex;
    flex-direction: column;
}

.po-schedule-row[b-knh5pzwwx2] {
    position: relative;
    display: grid;
    grid-template-columns: 12px 120px 40px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.po-schedule--encoding[b-knh5pzwwx2] { --po-tone: #2563eb; --po-tone-soft: #dbe9fd; }
.po-schedule--review[b-knh5pzwwx2] { --po-tone: #ea8a00; --po-tone-soft: #fdecc8; }
.po-schedule--processing[b-knh5pzwwx2] { --po-tone: #7c3aed; --po-tone-soft: #e9dffc; }
.po-schedule--paydate[b-knh5pzwwx2] { --po-tone: #16a34a; --po-tone-soft: #d8f1e0; }

.po-schedule-marker[b-knh5pzwwx2] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--po-tone);
    background: var(--colorNeutralBackground1, #fff);
    box-sizing: border-box;
    z-index: 1;
}

/* Connector line between one marker and the next. */
.po-schedule-row:not(:last-child)[b-knh5pzwwx2]::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    height: 100%;
    width: 2px;
    background: var(--colorNeutralStroke2, #e1e1e1);
}

.po-schedule-date[b-knh5pzwwx2] {
    font-size: 13px;
    color: var(--colorNeutralForeground2, #424242);
    white-space: nowrap;
}

.po-schedule-icon[b-knh5pzwwx2] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--po-tone-soft);
}

.po-schedule-icon[b-knh5pzwwx2]  svg {
    fill: var(--po-tone);
}

.po-schedule-text[b-knh5pzwwx2] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

.po-schedule-title[b-knh5pzwwx2] {
    font-weight: 600;
    font-size: 13px;
}

.po-schedule-sub[b-knh5pzwwx2] {
    font-size: 12px;
    color: var(--colorNeutralForeground3, #6b7280);
}

@media (max-width: 1199.98px) {
    .po-stats[b-knh5pzwwx2] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599.98px) {
    .po-stats[b-knh5pzwwx2] {
        grid-template-columns: minmax(0, 1fr);
    }

    .po-schedule-row[b-knh5pzwwx2] {
        grid-template-columns: 12px 40px minmax(0, 1fr);
    }

    .po-schedule-date[b-knh5pzwwx2] {
        grid-column: 3;
        grid-row: 1;
    }

    .po-schedule-icon[b-knh5pzwwx2] {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .po-schedule-text[b-knh5pzwwx2] {
        grid-column: 3;
        grid-row: 2;
    }
}
/* _content/PSMS.Web/Components/Pages/Portfolio/PortfolioProjectEditor.razor.rz.scp.css */
.pe-layout[b-3krlei59ui] { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; width: 100%; box-sizing: border-box; }

.pe-main[b-3krlei59ui] { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.pe-side[b-3krlei59ui] { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 14px; }

.pe-card[b-3krlei59ui] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 12px;
    background: var(--colorNeutralBackground1, #fff);
}

.pe-card-head[b-3krlei59ui] { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 4px; }

.pe-card-head h2[b-3krlei59ui] { margin: 0; font-size: 16px; font-weight: 700; }

.pe-card-head p[b-3krlei59ui] { margin: 2px 0 0; font-size: 13px; color: var(--colorNeutralForeground3, #6b7280); }

.pe-step[b-3krlei59ui] {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e8f1fe;
    font-size: 13px;
    font-weight: 700;
    color: #0f6cbd;
}

.pe-grid[b-3krlei59ui] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.pe-span-2[b-3krlei59ui] { grid-column: 1 / -1; }

.pe-count[b-3krlei59ui] { align-self: flex-end; margin-top: -6px; font-size: 11px; color: var(--colorNeutralForeground3, #9ca3af); }

.pe-muted[b-3krlei59ui] { display: block; font-size: 12px; font-weight: 400; color: var(--colorNeutralForeground3, #6b7280); }

.pe-unsaved[b-3krlei59ui] { padding: 1px 8px; border-radius: 999px; background: #fff4ce; font-size: 12px; color: #8a6100; }

/* Upload zone */
.pe-drop[b-3krlei59ui] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 100%;
    font-size: 13px;
    color: var(--colorNeutralForeground3, #6b7280);
    text-align: center;
}

.pe-drop strong[b-3krlei59ui] { font-size: 14px; color: var(--colorNeutralForeground1, #1f2937); }

.pe-drop label[b-3krlei59ui] { color: #0f6cbd; text-decoration: underline; cursor: pointer; }

/* Photo grid */
.pe-photos[b-3krlei59ui] { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }

.pe-photo[b-3krlei59ui] { display: flex; flex-direction: column; gap: 6px; }

.pe-photo-img[b-3krlei59ui] {
    position: relative;
    height: 130px;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 10px;
    background: linear-gradient(135deg, #e0e7ff, #f1f5f9);
}

.pe-photo.is-cover .pe-photo-img[b-3krlei59ui] { border-color: #0f6cbd; }

.pe-photo-img img[b-3krlei59ui] { width: 100%; height: 100%; object-fit: cover; }

.pe-cover[b-3krlei59ui] { position: absolute; top: 6px; left: 6px; padding: 2px 8px; border-radius: 999px; background: #0f6cbd; font-size: 11px; font-weight: 700; color: #fff; }

.pe-photo-tools[b-3krlei59ui] { position: absolute; right: 6px; bottom: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }

.pe-photo:hover .pe-photo-tools[b-3krlei59ui],
.pe-photo:focus-within .pe-photo-tools[b-3krlei59ui] { opacity: 1; }

.pe-photo-tools button[b-3krlei59ui] {
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 6px;
    background: rgb(255 255 255 / 92%);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.pe-photo-tools button:disabled[b-3krlei59ui] { opacity: .4; cursor: default; }

.pe-photo-tools .is-danger[b-3krlei59ui] { color: #d13438; }

.pe-caption[b-3krlei59ui] { height: 30px; padding: 0 8px; border: 1px solid var(--colorNeutralStroke1, #d1d1d1); border-radius: 6px; font: inherit; font-size: 12px; }

.pe-link[b-3krlei59ui] { align-self: flex-start; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: #0f6cbd; cursor: pointer; }

/* Visibility */
.pe-setting[b-3krlei59ui] { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--colorNeutralStroke3, #f0f0f0); font-size: 14px; }

.pe-setting:last-child[b-3krlei59ui] { border-bottom: 0; }

/* Side panel */
.pe-side-title[b-3krlei59ui] { display: flex; align-items: baseline; justify-content: space-between; margin: 0; font-size: 14px; font-weight: 700; }

.pe-preview[b-3krlei59ui] { overflow: hidden; border: 1px solid var(--colorNeutralStroke2, #e5e7eb); border-radius: 12px; }

.pe-preview-img[b-3krlei59ui] { position: relative; height: 170px; }

.pe-preview-img img[b-3krlei59ui] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.pe-preview-cat[b-3krlei59ui],
.pe-preview-count[b-3krlei59ui] {
    position: absolute;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgb(255 255 255 / 92%);
    font-size: 11px;
    font-weight: 600;
    color: #1f2937;
}

.pe-preview-cat[b-3krlei59ui] { top: 8px; left: 8px; }

.pe-preview-count[b-3krlei59ui] { right: 8px; bottom: 8px; }

.pe-preview-body[b-3krlei59ui] { display: flex; flex-direction: column; gap: 4px; padding: 12px; font-size: 13px; color: #475569; }

.pe-preview-body strong[b-3krlei59ui] { font-size: 15px; color: #0f172a; }

.pe-check[b-3krlei59ui] { margin: 0; padding: 0; list-style: none; font-size: 13px; }

.pe-check li[b-3krlei59ui] { display: flex; align-items: center; gap: 8px; padding: 5px 0; color: var(--colorNeutralForeground3, #6b7280); }

.pe-check li > span[b-3krlei59ui] {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 1.5px solid #cbd5e1;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}

.pe-check li.is-done[b-3krlei59ui] { color: var(--colorNeutralForeground1, #1f2937); }

.pe-check li.is-done > span[b-3krlei59ui] { border-color: #16a34a; background: #16a34a; }

.pe-actions[b-3krlei59ui] { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }

@media (max-width: 1100px) {
    .pe-layout[b-3krlei59ui] { grid-template-columns: minmax(0, 1fr); }
    .pe-side[b-3krlei59ui] { position: static; order: -1; }
}

@media (max-width: 600px) {
    .pe-grid[b-3krlei59ui] { grid-template-columns: minmax(0, 1fr); }
}
/* _content/PSMS.Web/Components/Pages/Portfolio/PortfolioProjects.razor.rz.scp.css */
.pf-project[b-jkmbqg3jef] { display: flex; align-items: center; gap: 10px; min-width: 0; }

.pf-thumb[b-jkmbqg3jef] {
    position: relative;
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}

.pf-thumb img[b-jkmbqg3jef] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.pf-project-text[b-jkmbqg3jef] { display: flex; flex-direction: column; min-width: 0; }

.pf-title[b-jkmbqg3jef] { font-size: 13px; font-weight: 600; color: var(--colorNeutralForeground1, #1f2937); text-decoration: none; }

.pf-title:hover[b-jkmbqg3jef] { color: #0f6cbd; text-decoration: underline; }

.pf-muted[b-jkmbqg3jef] {
    overflow: hidden;
    max-width: 320px;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--colorNeutralForeground3, #6b7280);
}

.pf-warn[b-jkmbqg3jef] {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #fff4ce;
    font-size: 11px;
    color: #8a6100;
}

.pf-empty[b-jkmbqg3jef] { padding: 24px; font-size: 13px; text-align: center; color: var(--colorNeutralForeground3, #6b7280); }
/* _content/PSMS.Web/Components/Pages/Pos/CheckoutPaymentDialog.razor.rz.scp.css */
.cpd[b-rywg2vp5ts] { display: flex; flex-direction: column; gap: 14px; width: 100%; }

.cpd-due[b-rywg2vp5ts] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    box-sizing: border-box;
    padding: 14px;
    border-radius: 10px;
    background: #e8f1fe;
}

.cpd-due-label[b-rywg2vp5ts] { font-size: 13px; font-weight: 600; color: #1e3a8a; }

.cpd-due-value[b-rywg2vp5ts] { font-size: 34px; color: var(--accent-fill-rest, #0f6cbd); }

.cpd-muted[b-rywg2vp5ts] { font-size: 12px; color: var(--colorNeutralForeground3, #6b7280); }

.cpd-label[b-rywg2vp5ts] { font-size: 13px; font-weight: 700; }

.cpd-methods[b-rywg2vp5ts] { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; width: 100%; }

.cpd-method[b-rywg2vp5ts] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 42px;
    padding: 0 8px;
    border: 1px solid var(--colorNeutralStroke2, #e1e1e1);
    border-radius: 8px;
    background: var(--colorNeutralBackground1, #fff);
    font: inherit;
    font-size: 13px;
    color: var(--colorNeutralForeground2, #424242);
    cursor: pointer;
    white-space: nowrap;
}

.cpd-method:hover[b-rywg2vp5ts] { border-color: var(--accent-fill-rest, #0f6cbd); }

.cpd-method.is-on[b-rywg2vp5ts] { border-color: var(--accent-fill-rest, #0f6cbd); background: #e8f1fe; color: var(--accent-fill-rest, #0f6cbd); font-weight: 700; }

.cpd-cash[b-rywg2vp5ts] { display: flex; flex-direction: column; gap: 6px; width: 100%; }

.cpd-money[b-rywg2vp5ts] {
    display: flex;
    align-items: center;
    height: 52px;
    overflow: hidden;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    border-radius: 8px;
    background: var(--colorNeutralBackground1, #fff);
}

.cpd-money span[b-rywg2vp5ts] { display: grid; place-items: center; width: 44px; height: 100%; background: var(--colorNeutralBackground2, #f7f7f7); font-size: 18px; color: var(--colorNeutralForeground3, #6b7280); }

.cpd-money input[b-rywg2vp5ts] { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 12px; border: 0; outline: none; font: inherit; font-size: 24px; font-weight: 700; text-align: right; }

.cpd-quick[b-rywg2vp5ts] { display: flex; flex-wrap: wrap; gap: 6px; }

.cpd-chip[b-rywg2vp5ts] {
    padding: 4px 12px;
    border: 1px solid var(--colorNeutralStroke2, #e1e1e1);
    border-radius: 999px;
    background: var(--colorNeutralBackground1, #fff);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.cpd-chip:hover[b-rywg2vp5ts] { border-color: var(--accent-fill-rest, #0f6cbd); color: var(--accent-fill-rest, #0f6cbd); }

.cpd-noncash[b-rywg2vp5ts] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }

.cpd-split[b-rywg2vp5ts] { display: flex; flex-direction: column; gap: 8px; width: 100%; box-sizing: border-box; padding: 10px; border-radius: 8px; background: var(--colorNeutralBackground2, #f7f8fa); }

.cpd-split-row[b-rywg2vp5ts] { display: grid; grid-template-columns: minmax(0, 1fr) 140px 32px; align-items: center; gap: 8px; }

.cpd-split-account[b-rywg2vp5ts] { grid-column: 1 / -1; }

.cpd-select[b-rywg2vp5ts],
.cpd-amount[b-rywg2vp5ts] {
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    border-radius: 4px;
    font: inherit;
    font-size: 14px;
    background: var(--colorNeutralBackground1, #fff);
}

.cpd-amount[b-rywg2vp5ts] { text-align: right; font-weight: 700; }

.cpd-split-foot[b-rywg2vp5ts] { display: flex; justify-content: space-between; }

.cpd-link[b-rywg2vp5ts] { padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--colorBrandForegroundLink, #0f6cbd); cursor: pointer; }

.cpd-result[b-rywg2vp5ts] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 10px;
    width: 100%;
}

.cpd-result-item[b-rywg2vp5ts] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--colorNeutralBackground2, #f7f8fa);
    font-size: 13px;
}

.cpd-result-item strong[b-rywg2vp5ts] { font-size: 20px; }

.cpd-result-main[b-rywg2vp5ts] { background: #e6f6ec; color: #166534; }

.cpd-result-main strong[b-rywg2vp5ts] { font-size: 30px; text-align: right; color: #16a34a; }

.cpd-result--short .cpd-result-main[b-rywg2vp5ts] { background: #fdecec; color: #991b1b; }

.cpd-result--short .cpd-result-main strong[b-rywg2vp5ts] { color: #d13438; }

.cpd-error[b-rywg2vp5ts] { font-size: 12px; font-weight: 600; color: var(--colorStatusDangerForeground1, #b10e1c); }

@media (max-width: 520px) {
    .cpd-noncash[b-rywg2vp5ts],
    .cpd-result[b-rywg2vp5ts] { grid-template-columns: minmax(0, 1fr); }
}
/* _content/PSMS.Web/Components/Pages/Pos/PosReceiptDialog.razor.rz.scp.css */
.rcpt-change[b-itpjm0uio2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 12px;
    padding: 14px;
    border-radius: 10px;
    background: #e6f6ec;
    font-size: 14px;
    font-weight: 600;
    color: #166534;
}

.rcpt-change strong[b-itpjm0uio2] { font-size: 36px; color: #16a34a; }

/* The receipt sits on a grey "counter" so its real roll width is visible. */
/* Long receipts scroll inside the mat so the dialog (and its Print / Done buttons) keeps a fixed
   height. Printing/exporting captures the whole receipt regardless (qz-print.js / pdf-export.js
   undo this clip on their copy). */
.rcpt-mat[b-itpjm0uio2] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    max-height: max(260px, calc(100dvh - 380px));
    overflow-y: auto;
    padding: 14px 0;
    border-radius: 8px;
    background: #eef0f3;
}

.rcpt-mat[b-itpjm0uio2]  .tr {
    padding-left: 3mm;
    padding-right: 3mm;
    box-sizing: content-box;
    box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
}

.rcpt-paper-note[b-itpjm0uio2] {
    margin-top: 6px;
    text-align: center;
    font-size: 12px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.rcpt-print-note[b-itpjm0uio2] { color: #8a5300; }
/* _content/PSMS.Web/Components/Pages/Pos/SalesExpress.razor.rz.scp.css */
/* Terminal page: fills MainLayout's .terminal-shell (full viewport). Slim bar on top, then the catalog and
   cart take all remaining height and scroll inside themselves, so the page itself never scrolls. */
.sx-page[b-yicski3j2h] { display: flex; flex-direction: column; gap: 6px; width: 100%; height: 100%; min-height: 0; }

/* ---- Slim bar (~44px) ---- */
.sx-bar[b-yicski3j2h] {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    min-height: 38px;
    padding: 2px 8px;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 8px;
    background: var(--colorNeutralBackground1, #fff);
    box-sizing: border-box;
}

.sx-exit[b-yicski3j2h] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 6px;
    background: var(--colorNeutralBackground1, #fff);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--colorNeutralForeground2, #424242);
    cursor: pointer;
}

.sx-exit:hover[b-yicski3j2h] { border-color: var(--accent-fill-rest, #0f6cbd); color: var(--accent-fill-rest, #0f6cbd); }

.sx-brand[b-yicski3j2h] { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; white-space: nowrap; }

.sx-proto[b-yicski3j2h] {
    padding: 0 6px;
    border-radius: 4px;
    background: #fff4ce;
    font-size: 11px;
    font-weight: 600;
    color: #8a6100;
}

.sx-bar-spacer[b-yicski3j2h] { flex: 1 1 auto; }

.sx-chip[b-yicski3j2h] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 6px;
    background: var(--colorNeutralBackground1, #fff);
    font-size: 12px;
    white-space: nowrap;
}

/* ---- Main layout ---- */
/* Fills the height left under the bar. Each panel scrolls inside itself. */
.sx-layout[b-yicski3j2h] {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 520px);
    gap: 6px;
    min-height: 0;
}

.sx-catalog[b-yicski3j2h],
.sx-cart[b-yicski3j2h] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    min-height: 0;
    padding: 10px;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 10px;
    background: var(--colorNeutralBackground1, #fff);
    overflow: hidden;
}

/* Product grid scrolls; search + category chips stay put above it. */
.sx-catalog .sx-grid[b-yicski3j2h],
.sx-catalog .sx-empty[b-yicski3j2h] { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; padding-right: 2px; }

/* Cart: header, customer and totals stay put; the item list takes (and scrolls in) the spare height. */
/* flex-basis 0: the list takes exactly the spare height and scrolls inside it, instead of growing with its items. */
.sx-cart .sx-lines[b-yicski3j2h] { flex: 1 1 0; min-height: 120px; max-height: none; overflow-y: auto; }

.sx-cart > *[b-yicski3j2h] { flex-shrink: 0; }

.sx-cart > .sx-lines[b-yicski3j2h] { flex-shrink: 1; }

/* Narrow screens: stack, and let the page scroll normally instead. */
@media (max-width: 1100px) {
    .sx-page[b-yicski3j2h] { height: auto; }
    .sx-layout[b-yicski3j2h] { grid-template-columns: minmax(0, 1fr); }
    .sx-catalog[b-yicski3j2h],
    .sx-cart[b-yicski3j2h] { overflow: visible; }
    .sx-catalog .sx-grid[b-yicski3j2h] { overflow: visible; }
    .sx-cart .sx-lines[b-yicski3j2h] { max-height: 320px; }
}

.sx-tools[b-yicski3j2h] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.sx-scan[b-yicski3j2h] {
    display: inline-flex;
    flex: 1 1 220px;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    box-sizing: border-box;
    border-radius: 4px;
    background: var(--colorNeutralBackground1, #fff);
}

.sx-scan input[b-yicski3j2h] { flex: 1 1 auto; min-width: 0; border: 0; outline: none; font: inherit; font-size: 13px; background: transparent; }

.sx-chips[b-yicski3j2h] { display: flex; flex-wrap: wrap; gap: 6px; }

.sx-cat[b-yicski3j2h] {
    padding: 3px 12px;
    border: 1px solid var(--colorNeutralStroke2, #e1e1e1);
    border-radius: 999px;
    background: var(--colorNeutralBackground1, #fff);
    font: inherit;
    font-size: 12px;
    color: var(--colorNeutralForeground2, #424242);
    cursor: pointer;
    white-space: nowrap;
}

.sx-cat:hover[b-yicski3j2h] { border-color: var(--accent-fill-rest, #0f6cbd); }

.sx-cat.is-on[b-yicski3j2h] { border-color: var(--accent-fill-rest, #0f6cbd); background: var(--accent-fill-rest, #0f6cbd); color: #fff; font-weight: 600; }

/* ---- Product tiles ---- */
.sx-grid[b-yicski3j2h] { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; }

.sx-tile[b-yicski3j2h] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 8px;
    background: var(--colorNeutralBackground1, #fff);
    min-width: 0;
}

.sx-tile.is-in[b-yicski3j2h] { border-color: var(--accent-fill-rest, #0f6cbd); }

.sx-tile.is-out[b-yicski3j2h] { opacity: 0.6; }

.sx-tile-img[b-yicski3j2h] {
    position: relative;
    display: grid;
    place-items: center;
    height: 72px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--colorNeutralBackground3, #f3f4f6);
}

.sx-tile-img img[b-yicski3j2h] { width: 100%; height: 100%; object-fit: contain; }

.sx-tile-badge[b-yicski3j2h] {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 22px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--accent-fill-rest, #0f6cbd);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    color: #fff;
}

.sx-tile-name[b-yicski3j2h] { overflow: hidden; margin-top: 2px; font-size: 12px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }

.sx-tile-price[b-yicski3j2h] { font-size: 14px; }

.sx-add[b-yicski3j2h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 26px;
    margin-top: 2px;
    border: 0;
    border-radius: 5px;
    background: #e8f1fe;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-fill-rest, #0f6cbd);
    cursor: pointer;
}

.sx-add:hover:not(:disabled)[b-yicski3j2h] { background: #d6e7fd; }

.sx-add:disabled[b-yicski3j2h] { cursor: not-allowed; opacity: 0.6; }

/* ---- Cart ---- */
.sx-cart-head[b-yicski3j2h] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.sx-cart-title[b-yicski3j2h] { font-size: 16px; }

.sx-cart-title-wrap[b-yicski3j2h] { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }

.sx-txn-no[b-yicski3j2h] { font-size: 13px; font-weight: 700; color: var(--accent-fill-rest, #0f6cbd); }

.sx-cart-actions[b-yicski3j2h] { display: inline-flex; align-items: center; gap: 8px; }

.sx-client[b-yicski3j2h] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }

.sx-lines[b-yicski3j2h] { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; border: 1px solid var(--colorNeutralStroke2, #e5e7eb); border-radius: 8px; }

/* Two rows per cart line so the full item name and variant are never cut off:
     [#] [thumb] [name + variant ............] [delete]
     [#] [thumb] [SKU · price] [- qty +] [line total]   */
.sx-line[b-yicski3j2h] {
    display: grid;
    grid-template-columns: 16px 34px minmax(0, 1fr) auto auto;
    grid-template-areas:
        "no thumb name name del"
        "no thumb meta qty  total";
    align-items: center;
    gap: 2px 8px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--colorNeutralStroke3, #f0f0f0);
    font-size: 12px;
}

.sx-line:last-child[b-yicski3j2h] { border-bottom: 0; }

.sx-line-no[b-yicski3j2h] { grid-area: no; align-self: start; padding-top: 2px; color: var(--colorNeutralForeground3, #6b7280); }

.sx-thumb[b-yicski3j2h] {
    grid-area: thumb;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--colorNeutralBackground3, #f3f4f6);
}

.sx-thumb img[b-yicski3j2h] { width: 100%; height: 100%; object-fit: contain; }

.sx-line-name[b-yicski3j2h] { grid-area: name; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; line-height: 1.3; }

.sx-line-name strong[b-yicski3j2h] { font-size: 13px; overflow-wrap: anywhere; }

.sx-variant[b-yicski3j2h] {
    padding: 1px 8px;
    border-radius: 999px;
    background: #e8f1fe;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-fill-rest, #0f6cbd);
    white-space: nowrap;
}

[b-yicski3j2h] .sx-line-del { grid-area: del; justify-self: end; align-self: start; }

.sx-line-meta[b-yicski3j2h] { grid-area: meta; min-width: 0; overflow-wrap: anywhere; }

.sx-line-qty[b-yicski3j2h] { grid-area: qty; }

.sx-line-total[b-yicski3j2h] { grid-area: total; min-width: 72px; font-size: 13px; text-align: right; white-space: nowrap; }

.sx-stepper[b-yicski3j2h] { display: inline-flex; align-items: center; justify-self: center; border: 1px solid var(--colorNeutralStroke1, #d1d1d1); border-radius: 6px; overflow: hidden; }

.sx-stepper button[b-yicski3j2h] { width: 24px; height: 24px; border: 0; background: var(--colorNeutralBackground2, #f7f7f7); font: inherit; font-size: 15px; cursor: pointer; }

.sx-stepper button:disabled[b-yicski3j2h] { opacity: 0.4; cursor: default; }

.sx-stepper input[b-yicski3j2h] { width: 32px; height: 24px; border: 0; font: inherit; text-align: center; }

[b-yicski3j2h] .sx-remove svg { fill: #d13438; }

.sx-cart-buttons[b-yicski3j2h] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }

[b-yicski3j2h] .sx-danger { color: #d13438; }

.sx-totals[b-yicski3j2h] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; margin: 0; font-size: 13px; }

.sx-totals dt[b-yicski3j2h] { color: var(--colorNeutralForeground2, #424242); }

.sx-totals dd[b-yicski3j2h] { margin: 0; text-align: right; }

.sx-grand[b-yicski3j2h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    background: #e8f1fe;
    font-size: 15px;
    font-weight: 700;
    color: #1e3a8a;
}

.sx-grand strong[b-yicski3j2h] { font-size: 21px; color: var(--accent-fill-rest, #0f6cbd); }

.sx-section-label[b-yicski3j2h] { font-size: 13px; font-weight: 700; }

.sx-methods[b-yicski3j2h] { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }

.sx-method[b-yicski3j2h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--colorNeutralStroke2, #e1e1e1);
    border-radius: 8px;
    background: var(--colorNeutralBackground1, #fff);
    font: inherit;
    font-size: 13px;
    color: var(--colorNeutralForeground2, #424242);
    cursor: pointer;
    white-space: nowrap;
}

.sx-method:hover[b-yicski3j2h] { border-color: var(--accent-fill-rest, #0f6cbd); }

.sx-method.is-on[b-yicski3j2h] { border-color: var(--accent-fill-rest, #0f6cbd); background: #e8f1fe; color: var(--accent-fill-rest, #0f6cbd); font-weight: 700; }

/* ---- Tender ---- */
.sx-tender-row[b-yicski3j2h] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: stretch; }

.sx-tender[b-yicski3j2h] { display: flex; flex-direction: column; gap: 6px; }

.sx-money-input[b-yicski3j2h] {
    display: flex;
    align-items: center;
    height: 34px;
    overflow: hidden;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    border-radius: 6px;
    background: var(--colorNeutralBackground1, #fff);
}

.sx-money-input span[b-yicski3j2h] { display: grid; place-items: center; width: 34px; height: 100%; background: var(--colorNeutralBackground2, #f7f7f7); color: var(--colorNeutralForeground3, #6b7280); }

.sx-money-input input[b-yicski3j2h] { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 10px; border: 0; outline: none; font: inherit; font-size: 15px; font-weight: 700; }

.sx-quick[b-yicski3j2h] { display: flex; flex-wrap: wrap; gap: 6px; }

.sx-quick .sx-cat[b-yicski3j2h] { padding: 3px 10px; font-size: 12px; }

.sx-change[b-yicski3j2h] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #e6f6ec;
    font-size: 13px;
    color: #166534;
}

.sx-change strong[b-yicski3j2h] { font-size: 21px; text-align: right; color: #16a34a; }

.sx-change--short[b-yicski3j2h] { background: #fdecec; color: #991b1b; }

.sx-change--short strong[b-yicski3j2h] { color: #d13438; }

.sx-noncash[b-yicski3j2h] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }

.sx-split[b-yicski3j2h] { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 8px; background: var(--colorNeutralBackground2, #f7f8fa); }

.sx-split-row[b-yicski3j2h] { display: grid; grid-template-columns: minmax(0, 1fr) 120px 32px; align-items: center; gap: 8px; }

.sx-split-account[b-yicski3j2h] { grid-column: 1 / -1; }

.sx-select[b-yicski3j2h],
.sx-amount[b-yicski3j2h] {
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    border-radius: 4px;
    font: inherit;
    font-size: 13px;
    background: var(--colorNeutralBackground1, #fff);
}

.sx-amount[b-yicski3j2h] { text-align: right; font-weight: 700; }

.sx-split-foot[b-yicski3j2h] { display: flex; align-items: center; justify-content: space-between; }

.sx-checkout[b-yicski3j2h] { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }

[b-yicski3j2h] .sx-checkout fluent-button,
.sx-checkout[b-yicski3j2h]  .fluent-button { height: 38px; }

/* ---- Misc ---- */
.sx-link[b-yicski3j2h] { padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--colorBrandForegroundLink, #0f6cbd); cursor: pointer; }

.sx-muted[b-yicski3j2h] { color: var(--colorNeutralForeground3, #6b7280); }

.sx-small[b-yicski3j2h] { font-size: 12px; }

.sx-bad[b-yicski3j2h] { color: #d13438; }

.sx-num[b-yicski3j2h] { text-align: right; white-space: nowrap; }

.sx-center[b-yicski3j2h] { text-align: center; }

.sx-error[b-yicski3j2h] { font-size: 12px; font-weight: 600; color: var(--colorStatusDangerForeground1, #b10e1c); }

.sx-empty[b-yicski3j2h] { padding: 32px 12px; font-size: 13px; text-align: center; color: var(--colorNeutralForeground3, #6b7280); }

.sx-empty--cart[b-yicski3j2h] { padding: 20px 12px; }

/* Desktop / tablet: no back button or cart bar; both panels show side by side or stacked. */
.sx-back[b-yicski3j2h],
.sx-mobilebar[b-yicski3j2h] { display: none; }

.sx-branch[b-yicski3j2h] { display: block; min-width: 190px; }

/* ---- Phone: one panel at a time (Products, or Cart via the sticky bar) ---- */
@media (max-width: 768px) {
    .sx-page[b-yicski3j2h] { gap: 6px; min-height: 100%; }

    .sx-bar[b-yicski3j2h] { gap: 6px; padding: 6px 8px; }
    .sx-proto[b-yicski3j2h],
    .sx-chip--clock[b-yicski3j2h],
    .sx-bar-spacer[b-yicski3j2h] { display: none; }
    .sx-brand[b-yicski3j2h] { flex: 1 1 auto; font-size: 15px; }
    .sx-branch[b-yicski3j2h] { flex: 1 1 100%; min-width: 0; width: 100%; }
    .sx-chip[b-yicski3j2h] { display: none; }

    .sx-layout.sx-show-catalog .sx-cart[b-yicski3j2h],
    .sx-layout.sx-show-cart .sx-catalog[b-yicski3j2h] { display: none; }

    .sx-catalog[b-yicski3j2h],
    .sx-cart[b-yicski3j2h] { padding: 10px; }

    /* Room for the sticky cart bar so the last tiles aren't hidden behind it. */
    .sx-layout.sx-show-catalog[b-yicski3j2h] { padding-bottom: 64px; }

    .sx-grid[b-yicski3j2h] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .sx-tile[b-yicski3j2h] { padding: 8px; }
    .sx-tile-img[b-yicski3j2h] { height: 64px; }
    .sx-tile-price[b-yicski3j2h] { font-size: 15px; }

    .sx-chips[b-yicski3j2h] { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
    .sx-tools[b-yicski3j2h] { gap: 8px; }
    .sx-scan[b-yicski3j2h] { flex-basis: 100%; }

    .sx-cart .sx-lines[b-yicski3j2h] { max-height: none; min-height: 0; }
    .sx-cart-head[b-yicski3j2h] { flex-wrap: wrap; }
    .sx-cart-title[b-yicski3j2h] { flex: 1 1 auto; font-size: 16px; }
    .sx-grand strong[b-yicski3j2h] { font-size: 22px; }
    .sx-checkout[b-yicski3j2h] { position: sticky; bottom: 0; padding: 8px 0 2px; background: var(--colorNeutralBackground1, #fff); }

    .sx-back[b-yicski3j2h] {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        height: 30px;
        padding: 0 10px;
        border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
        border-radius: 6px;
        background: var(--colorNeutralBackground1, #fff);
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        color: var(--colorNeutralForeground2, #424242);
        cursor: pointer;
    }

    .sx-mobilebar[b-yicski3j2h] {
        position: fixed;
        right: 8px;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        left: 8px;
        z-index: 20;
        display: flex;
        align-items: center;
        gap: 10px;
        height: 52px;
        padding: 0 16px;
        border: 0;
        border-radius: 12px;
        background: var(--accent-fill-rest, #0f6cbd);
        box-shadow: 0 6px 20px rgb(0 0 0 / 22%);
        font: inherit;
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
    }

    .sx-mobilebar strong[b-yicski3j2h] { margin-left: auto; font-size: 18px; }

    .sx-mobilebar-count[b-yicski3j2h] {
        display: grid;
        place-items: center;
        min-width: 26px;
        height: 26px;
        padding: 0 6px;
        border-radius: 999px;
        background: #fff;
        font-size: 13px;
        font-weight: 800;
        color: var(--accent-fill-rest, #0f6cbd);
    }
}

@media (max-width: 560px) {
    .sx-client[b-yicski3j2h],
    .sx-tender-row[b-yicski3j2h],
    .sx-noncash[b-yicski3j2h],
    .sx-cart-buttons[b-yicski3j2h] { grid-template-columns: minmax(0, 1fr); }
    .sx-line[b-yicski3j2h] {
        grid-template-columns: 18px 40px minmax(0, 1fr) auto;
        grid-template-areas:
            "no thumb name  del"
            "no thumb meta  meta"
            "no thumb qty   total";
    }
}

/* ---- Loading / leaving skeleton (full-screen overlay) ---- */
.sx-skeleton[b-yicski3j2h] {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    background: var(--colorNeutralBackground2, #f5f6f8);
    box-sizing: border-box;
}

.sx-sk-bar[b-yicski3j2h] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 4px 10px;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 10px;
    background: var(--colorNeutralBackground1, #fff);
    box-sizing: border-box;
}

.sx-sk-layout[b-yicski3j2h] { display: grid; flex: 1 1 auto; grid-template-columns: minmax(0, 1fr) minmax(420px, 520px); gap: 8px; min-height: 0; }

.sx-sk-panel[b-yicski3j2h] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 12px;
    overflow: hidden;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 10px;
    background: var(--colorNeutralBackground1, #fff);
}

.sx-sk-chips[b-yicski3j2h] { display: flex; gap: 8px; overflow: hidden; }

.sx-sk-grid[b-yicski3j2h] { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; }

.sx-sk-label[b-yicski3j2h] {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--colorNeutralBackground1, #fff);
    box-shadow: 0 4px 14px rgb(0 0 0 / 12%);
    font-size: 13px;
    font-weight: 600;
    color: var(--colorNeutralForeground2, #424242);
}

@media (max-width: 1100px) {
    .sx-sk-layout[b-yicski3j2h] { grid-template-columns: minmax(0, 1fr); }
    .sx-sk-cart[b-yicski3j2h] { display: none; }
}

@media (max-width: 768px) {
    .sx-sk-grid[b-yicski3j2h] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Grid / List toggle + list view ---- */
.sx-view[b-yicski3j2h] { display: inline-flex; margin-left: auto; overflow: hidden; border: 1px solid var(--colorNeutralStroke2, #e1e1e1); border-radius: 6px; }

.sx-view button[b-yicski3j2h] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 0;
    background: var(--colorNeutralBackground1, #fff);
    font: inherit;
    font-size: 12px;
    color: var(--colorNeutralForeground2, #424242);
    cursor: pointer;
}

.sx-view button.is-on[b-yicski3j2h] { background: var(--accent-fill-rest, #0f6cbd); color: #fff; font-weight: 600; }

.sx-catalog .sx-listwrap[b-yicski3j2h] { flex: 1 1 auto; min-height: 0; overflow: auto; }

.sx-list[b-yicski3j2h] { width: 100%; border-collapse: collapse; font-size: 12px; }

.sx-list th[b-yicski3j2h] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 6px 8px;
    border-bottom: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    background: var(--colorNeutralBackground2, #f7f8fa);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.sx-list th.sx-num[b-yicski3j2h] { text-align: right; }

.sx-list td[b-yicski3j2h] { padding: 4px 8px; border-bottom: 1px solid var(--colorNeutralStroke3, #f0f0f0); vertical-align: middle; }

.sx-list tr.is-in td[b-yicski3j2h] { background: #f3f8ff; }

.sx-list tr.is-out[b-yicski3j2h] { opacity: 0.6; }

.sx-list-thumb[b-yicski3j2h] { width: 32px; padding-right: 0 !important; }

.sx-list-thumb img[b-yicski3j2h] { display: block; width: 30px; height: 30px; border-radius: 4px; object-fit: contain; }

.sx-list-name[b-yicski3j2h] { font-size: 13px; font-weight: 600; }

.sx-dot[b-yicski3j2h] { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #16a34a; vertical-align: middle; }

.sx-dot.is-bad[b-yicski3j2h] { background: #d13438; }

.sx-list-badge[b-yicski3j2h] { position: static; display: inline-block; margin-left: 6px; }

.sx-list-add[b-yicski3j2h] { height: 24px; margin: 0; padding: 0 10px; }

@media (max-width: 768px) {
    .sx-list th:nth-child(2)[b-yicski3j2h],
    .sx-list td:nth-child(3)[b-yicski3j2h] { display: none; }
}
/* _content/PSMS.Web/Components/Pages/Pos/SalesExpressHistory.razor.rz.scp.css */
.seh-summary-grid[b-wkleinqq5y] { width: 100%; }

.seh-summary-grid[b-wkleinqq5y]  .basic-value-card { display: block; width: 100%; height: 100%; }

.seh-link[b-wkleinqq5y] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--colorBrandForegroundLink, #0f6cbd);
    cursor: pointer;
}

.seh-link:hover[b-wkleinqq5y] { text-decoration: underline; }

.seh-struck[b-wkleinqq5y] { color: var(--colorNeutralForeground3); text-decoration: line-through; }

.seh-status[b-wkleinqq5y] {
    display: inline-flex;
    padding: 1px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.seh-status--ok[b-wkleinqq5y] { background: #e6f6ec; color: #166534; }

.seh-status--void[b-wkleinqq5y] { background: #fdecec; color: #b10e1c; }

.seh-empty[b-wkleinqq5y] { padding: 24px 16px; font-size: 13px; text-align: center; color: var(--colorNeutralForeground3); }
/* _content/PSMS.Web/Components/Pages/Pos/SalesExpressOverview.razor.rz.scp.css */
.seo-summary-grid[b-h31kqsdktw] { width: 100%; }

.seo-summary-grid[b-h31kqsdktw]  .basic-value-card { display: block; width: 100%; height: 100%; }

.seo-row[b-h31kqsdktw] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }

.seo-row-wide[b-h31kqsdktw] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

.seo-row-3[b-h31kqsdktw] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1200px) {
    .seo-row-3[b-h31kqsdktw] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .seo-row[b-h31kqsdktw],
    .seo-row-wide[b-h31kqsdktw],
    .seo-row-3[b-h31kqsdktw] { grid-template-columns: minmax(0, 1fr); }
}

.seo-card[b-h31kqsdktw] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 16px 18px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 16px;
    background: var(--colorNeutralBackground1);
    box-sizing: border-box;
}

.seo-card-head[b-h31kqsdktw] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.seo-title[b-h31kqsdktw] { font-size: 15px; font-weight: 700; }

.seo-hint[b-h31kqsdktw] { font-size: 12px; color: var(--colorNeutralForeground3); }

.seo-empty[b-h31kqsdktw] { padding: 16px 0; font-size: 13px; text-align: center; color: var(--colorNeutralForeground3); }

.seo-link[b-h31kqsdktw] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--colorBrandForegroundLink, #0f6cbd);
    cursor: pointer;
    text-align: left;
}

.seo-link:hover[b-h31kqsdktw] { text-decoration: underline; }

.seo-struck[b-h31kqsdktw] { color: var(--colorNeutralForeground3); text-decoration: line-through; }

/* 7-day bars */
.seo-bars[b-h31kqsdktw] { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; height: 170px; }

.seo-bar-col[b-h31kqsdktw] { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }

.seo-bar-value[b-h31kqsdktw] { font-size: 11px; color: var(--colorNeutralForeground3); white-space: nowrap; }

.seo-bar-track[b-h31kqsdktw] { display: flex; flex: 1 1 auto; align-items: flex-end; width: 100%; max-width: 44px; }

.seo-bar[b-h31kqsdktw] { width: 100%; min-height: 2px; border-radius: 6px 6px 2px 2px; background: #b9d5f5; }

.seo-bar.is-today[b-h31kqsdktw] { background: #0f6cbd; }

.seo-bar-label[b-h31kqsdktw] { font-size: 12px; color: var(--colorNeutralForeground2); }

/* donut */
.seo-donut-wrap[b-h31kqsdktw] { display: flex; align-items: center; gap: 18px; flex: 1; }

.seo-donut[b-h31kqsdktw] {
    position: relative;
    flex-shrink: 0;
    width: 140px;
    height: 140px;
    border-radius: 50%;
}

.seo-donut-hole[b-h31kqsdktw] {
    position: absolute;
    inset: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--colorNeutralBackground1, #fff);
}

.seo-donut-hole strong[b-h31kqsdktw] { font-size: 16px; }
.seo-donut-hole span[b-h31kqsdktw] { font-size: 11px; color: var(--colorNeutralForeground3); }

.seo-legend[b-h31kqsdktw] { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; min-width: 0; flex: 1; }

.seo-legend li[b-h31kqsdktw] { display: flex; align-items: center; gap: 8px; font-size: 13px; }

.seo-legend-name[b-h31kqsdktw] { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.seo-swatch[b-h31kqsdktw] { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* hourly */
.seo-hours[b-h31kqsdktw] { display: flex; align-items: flex-end; gap: 3px; height: 110px; }

.seo-hour[b-h31kqsdktw] { flex: 1; min-width: 0; border-radius: 3px 3px 1px 1px; background: #b9d5f5; }

.seo-hour.is-peak[b-h31kqsdktw] { background: #0f6cbd; }

.seo-hours-axis[b-h31kqsdktw] { display: flex; justify-content: space-between; font-size: 11px; color: var(--colorNeutralForeground3); }

/* horizontal bars / meters */
.seo-hbar[b-h31kqsdktw] { display: flex; flex-direction: column; gap: 4px; }

.seo-hbar-head[b-h31kqsdktw] { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }

.seo-meter[b-h31kqsdktw] { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: var(--colorNeutralBackground3, #f0f0f0); }

.seo-meter span[b-h31kqsdktw] { display: block; height: 100%; border-radius: 999px; background: #0f6cbd; }

.seo-meter.is-danger span[b-h31kqsdktw] { background: #c50f1f; }

/* stat tiles */
.seo-stats[b-h31kqsdktw] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.seo-stats > div[b-h31kqsdktw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--colorNeutralBackground2, #fafafa);
}

.seo-stats strong[b-h31kqsdktw] { font-size: 15px; }

/* compact lists: one line per row */
.seo-list[b-h31kqsdktw] { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }

.seo-list li[b-h31kqsdktw] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid var(--colorNeutralStroke3, #f0f0f0);
    font-size: 13px;
    line-height: 18px;
}

.seo-list li:last-child[b-h31kqsdktw] { border-bottom: 0; }

.seo-list li > strong[b-h31kqsdktw] { margin-left: auto; white-space: nowrap; }

.seo-list-name[b-h31kqsdktw] { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.seo-list-receipt[b-h31kqsdktw] { flex-shrink: 0; }

.seo-list-qty[b-h31kqsdktw] { flex-shrink: 0; white-space: nowrap; }

.seo-list-bar[b-h31kqsdktw] { flex: 0 0 70px; height: 6px; overflow: hidden; border-radius: 999px; background: var(--colorNeutralBackground3, #f0f0f0); }

.seo-list-bar span[b-h31kqsdktw] { display: block; height: 100%; border-radius: 999px; background: #0f7b6c; }

@media (max-width: 600px) {
    .seo-list-bar[b-h31kqsdktw] { display: none; }
}
/* _content/PSMS.Web/Components/Pages/Pos/SalesExpressSettings.razor.rz.scp.css */
.ses-layout[b-x27196bys2] {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr);
    gap: 12px;
    width: 100%;
    align-items: start;
}

@media (max-width: 1000px) {
    .ses-layout[b-x27196bys2] { grid-template-columns: minmax(0, 1fr); }
}

.ses-col[b-x27196bys2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.ses-card[b-x27196bys2] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 16px 18px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    background: var(--colorNeutralBackground1);
    box-sizing: border-box;
}

.ses-title[b-x27196bys2] { font-size: 15px; font-weight: 700; }

.ses-label[b-x27196bys2] { margin-top: 4px; font-size: 13px; font-weight: 600; }

.ses-opt[b-x27196bys2] { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }

.ses-hint[b-x27196bys2] { font-size: 12px; color: var(--colorNeutralForeground3); }

/* ── paper size cards ── */
.ses-sizes[b-x27196bys2] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.ses-size[b-x27196bys2] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px 10px;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    border-radius: 8px;
    background: var(--colorNeutralBackground1, #fff);
    font: inherit;
    cursor: pointer;
}

.ses-size.is-on[b-x27196bys2] {
    border-color: #0f7b6c;
    box-shadow: 0 0 0 1px #0f7b6c;
    background: #f2faf8;
}

/* Little paper roll drawn to relative width. */
.ses-roll[b-x27196bys2] {
    height: 34px;
    border: 1px solid #c8c8c8;
    border-radius: 3px 3px 0 0;
    background: repeating-linear-gradient(#fff 0 5px, #eceef1 5px 6px);
}

.ses-tag[b-x27196bys2] {
    position: absolute;
    top: -8px;
    padding: 0 6px;
    border-radius: 999px;
    background: #0f7b6c;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
}

.ses-chips[b-x27196bys2] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ses-chip[b-x27196bys2] {
    padding: 5px 14px;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    border-radius: 6px;
    background: var(--colorNeutralBackground1, #fff);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.ses-chip.is-on[b-x27196bys2] {
    border-color: #0f7b6c;
    background: #e6f4f1;
    color: #0b5a4f;
    font-weight: 600;
}

.ses-toggles[b-x27196bys2] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
}

@media (max-width: 600px) {
    .ses-toggles[b-x27196bys2],
    .ses-sizes[b-x27196bys2] { grid-template-columns: minmax(0, 1fr); }
}

/* ── live preview ── */
.ses-preview-card[b-x27196bys2] {
    position: sticky;
    top: 12px;
}

.ses-preview-head[b-x27196bys2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ses-mat[b-x27196bys2] {
    display: flex;
    justify-content: center;
    max-height: calc(100dvh - 220px);
    overflow: auto;
    padding: 16px 0;
    border-radius: 8px;
    background: #eef0f3;
}

.ses-mat[b-x27196bys2]  .tr {
    padding-left: 3mm;
    padding-right: 3mm;
    box-sizing: content-box;
    box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
}

/* this computer */
.ses-device[b-x27196bys2] { border-color: #b9d5f5; background: #f7fbff; }
.ses-device .ses-title[b-x27196bys2] { display: inline-flex; align-items: center; gap: 6px; }
.ses-howto[b-x27196bys2] { padding: 8px 12px; border: 1px dashed var(--colorNeutralStroke1, #d1d1d1); border-radius: 6px; background: var(--colorNeutralBackground1, #fff); font-size: 13px; }
.ses-howto summary[b-x27196bys2] { font-weight: 600; cursor: pointer; }
.ses-howto ol[b-x27196bys2] { margin: 8px 0; padding-left: 20px; line-height: 1.6; }
.ses-howto code[b-x27196bys2] { padding: 1px 5px; border-radius: 4px; background: #f0f0f0; font-size: 12px; overflow-wrap: anywhere; }
.ses-device-actions[b-x27196bys2] { display: flex; justify-content: flex-end; gap: 8px; }

.ses-preview-actions[b-x27196bys2] { display: flex; align-items: center; gap: 8px; }

/* tabs */
.ses-tab-note[b-x27196bys2] { display: flex; align-items: center; gap: 6px; margin: 12px 0 10px; padding: 8px 12px; border-radius: 6px; background: #f0f6fd; font-size: 13px; color: #24425f; }

/* page-level tabs; shop cards side by side */
.ses-tabs[b-x27196bys2] { width: 100%; min-width: 0; }
.ses-shop-grid[b-x27196bys2] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 900px) { .ses-shop-grid[b-x27196bys2] { grid-template-columns: minmax(0, 1fr); } }

/* computer name + printer */
.ses-name-row[b-x27196bys2] { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.ses-printer[b-x27196bys2] { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--colorNeutralStroke2, #e5e7eb); border-radius: 8px; background: var(--colorNeutralBackground1, #fff); }
.ses-printer-body[b-x27196bys2] { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-size: 13px; }

/* printer helper downloads */
.ses-helper[b-x27196bys2] { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px dashed #9cc3ea; border-radius: 8px; background: #fff; }
.ses-helper-head[b-x27196bys2] { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.ses-helper-steps[b-x27196bys2] { margin: 2px 0; padding-left: 20px; font-size: 13px; line-height: 1.6; }
.ses-helper-links[b-x27196bys2] { display: flex; flex-wrap: wrap; gap: 8px; }
.ses-link-btn[b-x27196bys2] { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--colorNeutralStroke1, #d1d1d1); border-radius: 6px; background: #fff; color: #242424; font-size: 13px; font-weight: 600; text-decoration: none; }
.ses-link-btn:hover[b-x27196bys2] { background: #f5f5f5; }
.ses-link-btn.is-primary[b-x27196bys2] { border-color: #0f6cbd; background: #0f6cbd; color: #fff; }
.ses-link-btn.is-primary:hover[b-x27196bys2] { background: #115ea3; }

/* QZ Tray printer picker */
.ses-printer-pick[b-x27196bys2] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ses-select[b-x27196bys2] { flex: 1; min-width: 200px; height: 32px; padding: 0 8px; border: 1px solid var(--colorNeutralStroke1, #d1d1d1); border-radius: 6px; background: #fff; font: inherit; font-size: 13px; }
.ses-use-host[b-x27196bys2] { align-self: flex-start; padding: 4px 10px; border: 1px dashed #0f6cbd; border-radius: 6px; background: #f0f6fd; color: #0f6cbd; font: inherit; font-size: 12px; cursor: pointer; }
/* _content/PSMS.Web/Components/Pages/Pos/SalesExpressTransactionDetail.razor.rz.scp.css */
/* Details, items, payments on the left; summary sticky on the right (same as the PO / stock receipt pages). */
.sed-row[b-q0gjtzmmrx] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 12px;
    align-items: start;
    width: 100%;
}

.sed-main[b-q0gjtzmmrx] { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.sed-side[b-q0gjtzmmrx] { position: sticky; top: 0; }

@media (max-width: 1000px) {
    .sed-row[b-q0gjtzmmrx] { grid-template-columns: minmax(0, 1fr); }
    .sed-side[b-q0gjtzmmrx] { position: static; }
}

.sed-card[b-q0gjtzmmrx] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    background: var(--colorNeutralBackground1);
    box-sizing: border-box;
}

.sed-title[b-q0gjtzmmrx] { font-size: 15px; font-weight: 700; }

.sed-details[b-q0gjtzmmrx] { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: 14px; }

.sed-details dt[b-q0gjtzmmrx] { color: var(--colorNeutralForeground3); }

.sed-details dd[b-q0gjtzmmrx] { margin: 0; }

.sed-table-wrap[b-q0gjtzmmrx] { overflow-x: auto; }

.sed-table[b-q0gjtzmmrx] { width: 100%; border-collapse: collapse; font-size: 13px; }

.sed-table th[b-q0gjtzmmrx] {
    padding: 8px 10px;
    border-bottom: 1px solid var(--colorNeutralStroke2);
    font-weight: 600;
    text-align: left;
    color: var(--colorNeutralForeground3);
    white-space: nowrap;
}

.sed-table td[b-q0gjtzmmrx] { padding: 10px; border-bottom: 1px solid var(--colorNeutralStroke3, #f0f0f0); }

.sed-table tr:last-child td[b-q0gjtzmmrx] { border-bottom: 0; }

.sed-num[b-q0gjtzmmrx] { text-align: right !important; white-space: nowrap; }

.sed-hint[b-q0gjtzmmrx] { color: var(--colorNeutralForeground3); }

.sed-chip[b-q0gjtzmmrx] {
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #e8f1fe;
    font-size: 11px;
    font-weight: 600;
    color: #0f6cbd;
}

.sed-sum[b-q0gjtzmmrx] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; margin: 0; font-size: 14px; }

.sed-sum dt[b-q0gjtzmmrx] { color: var(--colorNeutralForeground2); }

.sed-sum dd[b-q0gjtzmmrx] { margin: 0; text-align: right; }

.sed-grand[b-q0gjtzmmrx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 8px;
    background: #e8f1fe;
    font-weight: 700;
    color: #1e3a8a;
}

.sed-grand strong[b-q0gjtzmmrx] { font-size: 22px; color: #0f6cbd; }

.sed-status[b-q0gjtzmmrx] { display: inline-flex; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }

.sed-status--ok[b-q0gjtzmmrx] { background: #e6f6ec; color: #166534; }

.sed-status--void[b-q0gjtzmmrx] { background: #fdecec; color: #b10e1c; }

.sed-void-note[b-q0gjtzmmrx] {
    padding: 10px 14px;
    border: 1px solid #f5c2c2;
    border-radius: 8px;
    background: #fdecec;
    font-size: 13px;
    color: #8a1c1c;
}

[b-q0gjtzmmrx] .sed-danger { color: #d13438; }
/* _content/PSMS.Web/Components/Pages/Pos/ThermalReceipt.razor.rz.scp.css */
.tr[b-c9tv2ew15p] {
    box-sizing: border-box;
    width: var(--tr-width, 72mm);
    padding: 3mm 0;
    background: #fff;
    color: #000;
    font-family: "Consolas", "Courier New", ui-monospace, monospace;
    font-size: var(--tr-font, 11px);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.tr-head[b-c9tv2ew15p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.tr-logo[b-c9tv2ew15p] {
    max-width: 60%;
    max-height: 18mm;
    object-fit: contain;
    filter: grayscale(1) contrast(1.4);
}

.tr-shop[b-c9tv2ew15p] {
    font-size: 1.25em;
    text-transform: uppercase;
}

.tr-pre[b-c9tv2ew15p] { white-space: pre-line; }

.tr-void[b-c9tv2ew15p] {
    margin-top: 2px;
    font-size: 1.15em;
}

.tr-rule[b-c9tv2ew15p] {
    margin: 4px 0;
    border-top: 1px dashed #000;
}

.tr-meta > div[b-c9tv2ew15p],
.tr-sum > div[b-c9tv2ew15p],
.tr-row[b-c9tv2ew15p] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.tr-meta > div > span:last-child[b-c9tv2ew15p],
.tr-sum > div > span:last-child[b-c9tv2ew15p],
.tr-amt[b-c9tv2ew15p] {
    text-align: right;
    white-space: nowrap;
}

.tr-lines[b-c9tv2ew15p] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.tr-name[b-c9tv2ew15p] { min-width: 0; }

.tr-sub[b-c9tv2ew15p] {
    padding-left: 1.5em;
    color: #333;
}

.tr-total[b-c9tv2ew15p] {
    margin: 3px 0;
    font-size: 1.3em;
    font-weight: 700;
}

.tr-change[b-c9tv2ew15p] { font-weight: 700; }

.tr-foot[b-c9tv2ew15p] {
    margin-top: 4px;
    text-align: center;
    font-weight: 600;
}
/* _content/PSMS.Web/Components/Pages/PreOrder/Dialogs/PreOrderItemDialog.razor.rz.scp.css */
.poid-services[b-haycux30nb] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 320px;
    overflow-y: auto;
}

.poid-service[b-haycux30nb] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    text-align: left;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 10px;
    background: var(--colorNeutralBackground1, #ffffff);
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.poid-service:hover[b-haycux30nb] {
    background: #f7f9ff;
    border-color: #2563eb;
    box-shadow: 0 2px 12px rgba(37, 99, 235, 0.12);
}

.poid-service-thumb[b-haycux30nb] {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--colorNeutralBackground3, #eef2f6);
    color: var(--colorNeutralForeground3, #556683);
}

.poid-service-info[b-haycux30nb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.poid-service-name[b-haycux30nb] {
    font-size: 13px;
    font-weight: 600;
    color: var(--colorNeutralForeground1, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.poid-service-cat[b-haycux30nb] {
    font-size: 12px;
    color: var(--colorNeutralForeground3, #6b7280);
}

[b-haycux30nb] .poid-service-chev {
    flex: 0 0 auto;
    color: var(--colorNeutralForeground3, #9ca3af);
}

.poid-empty[b-haycux30nb] {
    font-size: 13px;
    color: var(--colorNeutralForeground3, #9ca3af);
    margin: 4px 2px;
}

.poid-picked[b-haycux30nb] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid #dbe4ff;
    border-radius: 10px;
    background: #f5f8ff;
}

.poid-picked-thumb[b-haycux30nb] {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--colorNeutralBackground3, #eef2f6);
    color: var(--colorNeutralForeground3, #556683);
}

.poid-picked-info[b-haycux30nb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.poid-picked-name[b-haycux30nb] {
    font-size: 14px;
    font-weight: 700;
    color: var(--colorNeutralForeground1, #111827);
}

.poid-picked-cat[b-haycux30nb] {
    font-size: 12px;
    color: var(--colorNeutralForeground3, #6b7280);
}
/* _content/PSMS.Web/Components/Pages/PreOrder/PreOrderReview.razor.rz.scp.css */
.por-info-row[b-pnyud5sura] {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 12px;
    overflow-x: auto;
}

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

.por-info-card-wide[b-pnyud5sura] {
    grid-column: auto;
}

.por-info-label[b-pnyud5sura] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.por-info-value[b-pnyud5sura] {
    font-size: 14px;
    font-weight: 600;
    color: var(--colorNeutralForeground1, #242424);
}

.por-loading[b-pnyud5sura] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 16px;
    font-size: 13px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.por-item-head[b-pnyud5sura] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--colorNeutralStroke2, #e5e7eb);
}

.por-item-head > div[b-pnyud5sura] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.por-item-head-wide[b-pnyud5sura] {
    flex-basis: 100%;
}

.por-layout[b-pnyud5sura] {
    display: grid;
    /* Matches JobOrderDetail's .job-order-layout: fixed floors + overflow-x fallback (not
       minmax(0, Nfr)) so a narrow window scrolls the whole layout instead of squeezing a column
       to near-0. */
    grid-template-columns: minmax(280px, 3fr) minmax(400px, 6fr) minmax(280px, 4fr);
    gap: 16px;
    align-items: start;
    width: 100%;
    overflow-x: auto;
}

.por-panel[b-pnyud5sura] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    min-width: 0;
    background: var(--colorNeutralBackground1, #ffffff);
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 8px;
}

.por-panel-head[b-pnyud5sura] {
    font-size: 14px;
    font-weight: 700;
    color: var(--colorNeutralForeground1, #242424);
}

.por-panel-head-row[b-pnyud5sura] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.por-mode-switch[b-pnyud5sura] {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

/* Item card — cloned from PSMS.Customer.Web's PreOrderDetail (.pod-item-row family). */
.por-item-row[b-pnyud5sura] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
}

.por-item-row:hover[b-pnyud5sura] {
    background: var(--colorNeutralBackground2, #fafafa);
}

.por-item-row.is-selected[b-pnyud5sura] {
    border-color: var(--colorBrandStroke1, #2563eb);
    background: #eef2ff;
}

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

.por-item-number[b-pnyud5sura] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--colorNeutralForeground3, #6b7280);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
}

.por-item-name[b-pnyud5sura] {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 13px;
    color: var(--colorNeutralForeground1, #111827);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.por-item-spec[b-pnyud5sura] {
    font-size: 12px;
    color: var(--colorNeutralForeground3, #6b7280);
    padding-left: 28px;
}

.por-item-price[b-pnyud5sura] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--colorNeutralForeground2, #374151);
    padding-left: 28px;
}

.por-items-footer[b-pnyud5sura] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--colorNeutralForeground2, #374151);
}

.por-items-footer-total[b-pnyud5sura] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.por-note[b-pnyud5sura] {
    font-size: 13px;
    line-height: 1.5;
    color: var(--colorNeutralForeground2, #4b5563);
    margin: 0;
}

.por-muted[b-pnyud5sura] {
    color: var(--colorNeutralForeground3, #9ca3af);
}

.por-review-cta[b-pnyud5sura] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: var(--colorNeutralBackground2, #f7f8fa);
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 6px;
    font-size: 13px;
}

.por-quote-head[b-pnyud5sura] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.por-quote-head .por-note[b-pnyud5sura] {
    margin: 0;
}

.por-quote-input[b-pnyud5sura],
.por-quote-line[b-pnyud5sura] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}

.por-quote-breakdown[b-pnyud5sura] {
    margin: 4px 0 12px;
    padding: 8px 10px;
    background: var(--colorNeutralBackground2, #f7f8fa);
    border-radius: 6px;
    font-size: 12px;
}

.por-quote-breakdown > div[b-pnyud5sura] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
    color: var(--colorNeutralForeground2, #4b5563);
}

.por-quote-breakdown-total[b-pnyud5sura] {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    font-weight: 600;
    color: var(--colorNeutralForeground1, #242424) !important;
}

.por-quote-total[b-pnyud5sura] {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    font-weight: 700;
}

.por-quote-lines[b-pnyud5sura] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.por-quote-actions[b-pnyud5sura] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

@media (max-width: 1000px) {
    .por-layout[b-pnyud5sura] {
        grid-template-columns: 1fr;
    }
}
/* _content/PSMS.Web/Components/Pages/PreOrder/PreOrders.razor.rz.scp.css */
.preorders-summary-grid[b-h7uejcldvg] {
    width: 100%;
}

/* each stat card fills its FluentGrid cell and matches its row's height */
.preorders-summary-grid[b-h7uejcldvg]  .basic-value-card {
    display: block;
    width: 100%;
    height: 100%;
}

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

/* Card keeps its rounded corners (overflow hidden); the inner container is the horizontal
   scroller so the footer/paginator row below stays put. */
[b-h7uejcldvg] .preorders-grid-card {
    overflow: hidden;
}

.preorders-grid-container[b-h7uejcldvg] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* FluentDataGrid (Table mode) renders <table class="fluent-data-grid"> with width:auto and cells
   that clip their overflow — in a narrow container it collapses the 7 columns to unreadable
   slivers. A hard min-width keeps them at full size and lets the container scroll instead. */
.preorders-grid-container[b-h7uejcldvg]  table.fluent-data-grid {
    min-width: 820px;
}

.preorders-grid-container[b-h7uejcldvg]  th {
    white-space: nowrap;
}

.grid-footer-text[b-h7uejcldvg] {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    color: var(--neutral-foreground-3, #6b7280);
}
/* _content/PSMS.Web/Components/Pages/PrintingService/Dialogs/BannerCropperDialog.razor.rz.scp.css */
.banner-dropzone-text[b-lg3m4x1cxt] {
    margin-top: 6px;
    text-align: center;
    font-size: 13px;
    color: var(--colorNeutralForeground2, #616161);
}

.banner-dropzone-text label[b-lg3m4x1cxt] {
    color: var(--accent-fill-rest, #2563eb);
    cursor: pointer;
    text-decoration: underline;
}

.banner-current-preview[b-lg3m4x1cxt] {
    width: 100%;
    max-width: 360px;
    aspect-ratio: 3 / 1;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--colorNeutralStroke2, #e0e0e0);
}

.banner-crop-stage[b-lg3m4x1cxt] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 14px;
    background:
        repeating-conic-gradient(#eef1f4 0% 25%, #ffffff 0% 50%) 0 / 16px 16px;
    border-radius: 10px;
    border: 1px solid var(--colorNeutralStroke2, #e0e0e0);
    overflow-x: auto;
}

/* Width/height are set inline by banner-cropper.js (the crop frame). */
.banner-crop-host[b-lg3m4x1cxt] {
    border-radius: 6px;
    box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.15), 0 6px 18px rgba(17, 24, 39, 0.18);
    background: #0f172a;
}

.banner-crop-zoom[b-lg3m4x1cxt] {
    flex: 1 1 auto;
    accent-color: #2563eb;
    cursor: pointer;
}
/* _content/PSMS.Web/Components/Pages/PrintingService/PrintingServiceOverview.razor.rz.scp.css */
/* ::deep — .banner-card lands on FluentCard's rendered element, outside this file's scope. */
[b-2zgtwcfbih] .banner-card {
    width: 100%;
    margin-bottom: 8px;
    padding: 0;
}

/* ---- Header row ---- */
.banner-head[b-2zgtwcfbih] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0);
}

.banner-head-info[b-2zgtwcfbih] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.banner-head-title[b-2zgtwcfbih] {
    font-size: 14px;
    font-weight: 600;
    color: var(--colorNeutralForeground1, #1b1a19);
}

.banner-head-sub[b-2zgtwcfbih] {
    font-size: 12px;
    line-height: 1.45;
    color: var(--colorNeutralForeground3, #616161);
    max-width: 62ch;
}

.banner-head-actions[b-2zgtwcfbih] {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

/* ---- Preview area ---- */
.banner-preview-wrap[b-2zgtwcfbih] {
    display: flex;
    justify-content: center;
    padding: 18px;
}

.banner-figure[b-2zgtwcfbih] {
    margin: 0;
    width: 100%;
    max-width: 760px;
}

.banner-figure img[b-2zgtwcfbih] {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 1;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--colorNeutralStroke2, #e0e0e0);
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.08);
}

.banner-figure figcaption[b-2zgtwcfbih] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--colorNeutralForeground3, #616161);
}

.banner-figure--loading[b-2zgtwcfbih] {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 1;
    border: 1px solid var(--colorNeutralStroke2, #e0e0e0);
    border-radius: 12px;
    background: var(--colorNeutralBackground2, #f5f5f5);
}

/* ---- Empty / fallback dropzone ---- */
.banner-dropzone[b-2zgtwcfbih] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 760px;
    aspect-ratio: 3 / 1;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    border: 1.5px dashed var(--colorNeutralStroke2, #c7c7c7);
    border-radius: 12px;
    background: var(--colorNeutralBackground2, #f7f8fa);
    text-align: center;
}

.banner-dropzone strong[b-2zgtwcfbih] {
    font-size: 14px;
    font-weight: 600;
    color: var(--colorNeutralForeground1, #1b1a19);
}

.banner-dropzone span[b-2zgtwcfbih] {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--colorNeutralForeground3, #616161);
    max-width: 46ch;
}

.banner-dropzone--action[b-2zgtwcfbih] {
    font: inherit;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.banner-dropzone--action:hover[b-2zgtwcfbih] {
    border-color: var(--accent-fill-rest, #2563eb);
    background: #f0f6ff;
    box-shadow: 0 2px 14px rgba(37, 99, 235, 0.12);
}

.banner-dropzone--action:focus-visible[b-2zgtwcfbih] {
    outline: 2px solid var(--accent-fill-rest, #2563eb);
    outline-offset: 2px;
}

.banner-caption-sep[b-2zgtwcfbih] {
    opacity: 0.5;
}

.banner-caption-link[b-2zgtwcfbih] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 11.5px;
    color: var(--accent-fill-rest, #2563eb);
    cursor: pointer;
}

.banner-caption-link:hover[b-2zgtwcfbih] {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .banner-head[b-2zgtwcfbih] {
        flex-direction: column;
    }

    .banner-head-actions[b-2zgtwcfbih] {
        width: 100%;
    }
}

/* ---- Stat cards ---- */
.ps-stats[b-2zgtwcfbih] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    width: 100%;
    margin-bottom: 8px;
}

.ps-stat[b-2zgtwcfbih] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--colorNeutralBackground1, #fff);
    border: 1px solid var(--colorNeutralStroke2, #e0e0e0);
    border-radius: 10px;
}

.ps-stat-icon[b-2zgtwcfbih] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: #f1efff;
    color: #5b3fbf;
}

.ps-stat-icon--blue[b-2zgtwcfbih] { background: #e8f1fc; color: #1769d1; }
.ps-stat-icon--green[b-2zgtwcfbih] { background: #e6f4ea; color: #107c10; }
.ps-stat-icon--amber[b-2zgtwcfbih] { background: #fff4e5; color: #c76c00; }
.ps-stat-icon--purple[b-2zgtwcfbih] { background: #f1efff; color: #5b3fbf; }

.ps-stat-body[b-2zgtwcfbih] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ps-stat-label[b-2zgtwcfbih] {
    font-size: 12px;
    color: var(--colorNeutralForeground3, #616161);
}

.ps-stat-value[b-2zgtwcfbih] {
    font-size: 17px;
    font-weight: 700;
    color: var(--colorNeutralForeground1, #1b1a19);
}

@media (max-width: 1000px) {
    .ps-stats[b-2zgtwcfbih] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .ps-stats[b-2zgtwcfbih] { grid-template-columns: 1fr; }
}

/* ---- Shared card head ---- */
[b-2zgtwcfbih] .ps-detail-card,
[b-2zgtwcfbih] .ps-setup-card {
    width: 100%;
    padding: 0;
    margin-bottom: 8px;
}

.ps-card-head[b-2zgtwcfbih] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--colorNeutralForeground1, #1b1a19);
    border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0);
}

.ps-card-head--stacked[b-2zgtwcfbih] {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.ps-card-sub[b-2zgtwcfbih] {
    font-size: 12px;
    font-weight: 400;
    color: var(--colorNeutralForeground3, #616161);
}

/* ---- Service details ---- */
.ps-detail-list[b-2zgtwcfbih] {
    display: flex;
    flex-direction: column;
    padding: 6px 18px 12px;
}

.ps-detail-row[b-2zgtwcfbih] {
    display: grid;
    grid-template-columns: 28px 130px 1fr;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--colorNeutralStroke3, #f0f0f0);
}

.ps-detail-row:last-child[b-2zgtwcfbih] {
    border-bottom: 0;
}

[b-2zgtwcfbih] .ps-detail-icon {
    color: var(--colorNeutralForeground3, #8a8886);
}

.ps-detail-label[b-2zgtwcfbih] {
    font-size: 12.5px;
    color: var(--colorNeutralForeground3, #616161);
}

.ps-detail-value[b-2zgtwcfbih] {
    font-size: 13.5px;
    color: var(--colorNeutralForeground1, #1b1a19);
    word-break: break-word;
}

/* ---- Branch availability ---- */
.ps-branch-empty[b-2zgtwcfbih] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 16px 32px;
    color: var(--colorNeutralForeground3, #616161);
    font-size: 13px;
}

.ps-branch-list[b-2zgtwcfbih] {
    display: flex;
    flex-direction: column;
    padding: 8px 12px 12px;
    gap: 6px;
}

.ps-branch-row[b-2zgtwcfbih] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--colorNeutralStroke2, #e6e6e6);
    border-radius: 8px;
}

.ps-branch-icon[b-2zgtwcfbih] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 8px;
    background: #eef2f8;
    color: #556683;
}

.ps-branch-info[b-2zgtwcfbih] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}

.ps-branch-name[b-2zgtwcfbih] {
    font-size: 13px;
    font-weight: 600;
    color: var(--colorNeutralForeground1, #1b1a19);
}

.ps-branch-toggle[b-2zgtwcfbih] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

.ps-branch-toggle.is-on[b-2zgtwcfbih] {
    background: #e6f4ea;
    color: #107c10;
}

.ps-branch-toggle.is-on:hover[b-2zgtwcfbih] {
    border-color: #107c10;
}

.ps-branch-toggle.is-off[b-2zgtwcfbih] {
    background: var(--colorNeutralBackground2, #f3f3f3);
    color: var(--colorNeutralForeground3, #616161);
}

.ps-branch-toggle.is-off:hover[b-2zgtwcfbih] {
    border-color: var(--colorNeutralStroke1, #b0b0b0);
}

/* ---- Service setup ---- */
.ps-setup-list[b-2zgtwcfbih] {
    display: flex;
    flex-direction: column;
    padding: 8px 12px 12px;
    gap: 4px;
}

.ps-setup-row[b-2zgtwcfbih] {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

.ps-setup-row:hover[b-2zgtwcfbih] {
    background: var(--colorNeutralBackground2, #f7f8fa);
    border-color: var(--colorNeutralStroke2, #e0e0e0);
}

.ps-setup-icon[b-2zgtwcfbih] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 8px;
}

.ps-setup-info[b-2zgtwcfbih] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.ps-setup-name[b-2zgtwcfbih] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--colorNeutralForeground1, #1b1a19);
}

.ps-setup-meta[b-2zgtwcfbih] {
    font-size: 12px;
    color: var(--colorNeutralForeground3, #616161);
}

.ps-setup-cta[b-2zgtwcfbih] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent-fill-rest, #2563eb);
}
/* _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/CombinationPricingPanel.razor.rz.scp.css */
/* Same class names as PricingFieldsStep.razor.css — CSS isolation is per-component, so this is
   its own copy of the shared "pricing-panel" look rather than a reuse of that file's rules (see
   ProductionSettings.razor.css for the same convention elsewhere in this codebase). */

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

.combination-pricing-panel[b-k80slcuxko] {
    margin-bottom: 16px;
}

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

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

[b-k80slcuxko] .pricing-panel .builder-panel-header h3 {
    font-size: 13px;
}

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

.combination-body[b-k80slcuxko] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.combination-rules-section[b-k80slcuxko] {
    flex: 1 1 64%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.combination-tester-section[b-k80slcuxko] {
    flex: 0 1 36%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Live tester (PricingRuleTester component) has its own .razor.css now — pricing-preview-row,
   matched-rule-card, breakdown-card etc. moved there when the tester was extracted (2026-09-05)
   so SummaryStep could embed the same widget. .pricing-hint and .field-options-empty stay here
   too since the rules/add-ons tables in this file also use them. */
.pricing-hint[b-k80slcuxko] {
    display: block;
    font-size: 11px;
    color: var(--neutral-foreground-3, #6b7280);
    margin-top: 2px;
}

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

.addon-rules-card[b-k80slcuxko] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--neutral-stroke-divider-rest, #e1e1e1);
    background: var(--neutral-fill-2-rest, #fafafa);
}

/* Rules grid (2026-10-12 redesign): compact 12px, inline-editable cells, toolbar + pager.
   Plain inputs instead of Fluent ones so each row stays ~30px tall. */
.cr-toolbar[b-k80slcuxko] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.cr-spacer[b-k80slcuxko] { flex: 1 1 auto; }

.cr-btn[b-k80slcuxko],
.cr-ctl[b-k80slcuxko],
.cr-page[b-k80slcuxko] {
    height: 28px;
    font: inherit;
    font-size: 12px;
    border: 1px solid var(--colorNeutralStroke1, #d1d5db);
    border-radius: 4px;
    background: var(--colorNeutralBackground1, #fff);
    color: var(--colorNeutralForeground1, #1f2937);
}

.cr-btn[b-k80slcuxko] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    font-weight: 600;
    cursor: pointer;
}

.cr-btn:hover:not(:disabled)[b-k80slcuxko] { background: var(--colorNeutralBackground2, #f3f4f6); }
.cr-btn:disabled[b-k80slcuxko], .cr-ctl:disabled[b-k80slcuxko] { opacity: .5; cursor: not-allowed; }

.cr-btn-primary[b-k80slcuxko] {
    background: #0f6b6f;
    border-color: #0f6b6f;
    color: #fff;
}

.cr-btn-primary:hover:not(:disabled)[b-k80slcuxko] { background: #0c5a5d; }

.cr-ctl[b-k80slcuxko] { padding: 0 6px; }

.cr-search[b-k80slcuxko] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid var(--colorNeutralStroke1, #d1d5db);
    border-radius: 4px;
    background: var(--colorNeutralBackground1, #fff);
    width: 190px;
}

.cr-search input[b-k80slcuxko] {
    border: 0;
    outline: 0;
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 12px;
    background: transparent;
}

.cr-scroll[b-k80slcuxko] {
    overflow: auto;
    max-height: 480px;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 6px;
}

.cr-table[b-k80slcuxko] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    background: var(--colorNeutralBackground1, #fff);
}

.cr-table th[b-k80slcuxko],
.cr-table td[b-k80slcuxko] {
    border-bottom: 1px solid var(--colorNeutralStroke2, #eef0f3);
    padding: 3px 6px;
    white-space: nowrap;
    vertical-align: middle;
}

.cr-table th[b-k80slcuxko] {
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    background: var(--colorNeutralBackground3, #f6f7f9);
    color: var(--colorNeutralForeground2, #374151);
    position: sticky;
    top: 0;
    z-index: 1;
    height: 28px;
}

.cr-table th.num[b-k80slcuxko], .cr-table td.num[b-k80slcuxko] { text-align: right; }
.cr-table tbody tr:hover td[b-k80slcuxko] { background: var(--colorNeutralBackground2, #f9fafb); }
.cr-table tr.cr-inactive td.cr-combo[b-k80slcuxko] { color: var(--colorNeutralForeground3, #9ca3af); }

.cr-chk[b-k80slcuxko] { width: 26px; text-align: center; }
.cr-idx[b-k80slcuxko] { width: 28px; color: var(--colorNeutralForeground3, #6b7280); }
.cr-center[b-k80slcuxko] { text-align: center !important; }

.cr-combo[b-k80slcuxko] {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cr-method-col[b-k80slcuxko] { width: 104px; }

.cr-cell[b-k80slcuxko] {
    height: 24px;
    font: inherit;
    font-size: 12px;
    padding: 0 4px;
    border: 1px solid var(--colorNeutralStroke1, #d1d5db);
    border-radius: 3px;
    background: var(--colorNeutralBackground1, #fff);
    width: 100%;
    box-sizing: border-box;
}

.cr-cell:focus[b-k80slcuxko] { outline: 2px solid #0f6b6f; outline-offset: -1px; }
.cr-cell:disabled[b-k80slcuxko] { background: transparent; border-color: transparent; color: inherit; }

.cr-num[b-k80slcuxko] { text-align: right; }
.cr-min[b-k80slcuxko] { width: 76px; }
.cr-prio[b-k80slcuxko] { width: 48px; }

.cr-affix[b-k80slcuxko] {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--colorNeutralStroke1, #d1d5db);
    border-radius: 3px;
    height: 24px;
    overflow: hidden;
    background: var(--colorNeutralBackground1, #fff);
}

.cr-affix .cr-cell[b-k80slcuxko] { border: 0; width: 70px; height: 22px; border-radius: 0; }
.cr-pre[b-k80slcuxko] { padding-left: 5px; color: var(--colorNeutralForeground3, #6b7280); }

.cr-suf[b-k80slcuxko] {
    padding: 0 5px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    color: var(--colorNeutralForeground3, #6b7280);
    background: var(--colorNeutralBackground3, #f3f4f6);
    border-left: 1px solid var(--colorNeutralStroke2, #e5e7eb);
}

/* Small switch for the Active column */
.cr-toggle[b-k80slcuxko] {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 16px;
    cursor: pointer;
    vertical-align: middle;
}

.cr-toggle input[b-k80slcuxko] { opacity: 0; width: 0; height: 0; position: absolute; }

.cr-toggle span[b-k80slcuxko] {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: #c4c8ce;
    transition: background .15s;
}

.cr-toggle span[b-k80slcuxko]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s;
}

.cr-toggle input:checked + span[b-k80slcuxko] { background: #14833b; }
.cr-toggle input:checked + span[b-k80slcuxko]::after { transform: translateX(12px); }
.cr-toggle input:disabled + span[b-k80slcuxko] { opacity: .5; cursor: not-allowed; }

.cr-table .row-action[b-k80slcuxko] { width: 84px; text-align: center; }
[b-k80slcuxko] .cr-del svg { fill: #d13438; }

.cr-pager[b-k80slcuxko] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--colorNeutralForeground2, #4b5563);
}

.cr-page[b-k80slcuxko] {
    min-width: 28px;
    padding: 0 6px;
    cursor: pointer;
}

.cr-page:disabled[b-k80slcuxko] { opacity: .4; cursor: not-allowed; }

.cr-page-on[b-k80slcuxko] {
    background: #0f6b6f;
    border-color: #0f6b6f;
    color: #fff;
    font-weight: 600;
}

.cr-ellipsis[b-k80slcuxko] { padding: 0 2px; }

@media (max-width: 900px) {
    .combination-body[b-k80slcuxko] { flex-direction: column; }
    .combination-rules-section[b-k80slcuxko], .combination-tester-section[b-k80slcuxko] { width: 100%; }
    .cr-search[b-k80slcuxko] { width: 100%; }
}

/* The ::deep header rules above never matched (the FluentCard root carries no scope attribute),
   so the browser's default h2/h3 sizes showed. Plain scoped rules, since these tags live here. */
.builder-panel-header h2[b-k80slcuxko] { margin: 0; font-size: 15px; font-weight: 600; }
.builder-panel-header h3[b-k80slcuxko] { margin: 0; font-size: 13px; font-weight: 600; }
.builder-panel-header p[b-k80slcuxko] { margin: 1px 0 0; font-size: 11px; color: var(--colorNeutralForeground3, #6b7280); }

/* Read-only status pill (the grid is preview-only; edits go through the Edit dialog). */
.cr-status[b-k80slcuxko] {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    background: #e3f5e9;
    color: #14833b;
}

.cr-status-off[b-k80slcuxko] { background: #f3f4f6; color: #6b7280; }
.cr-table td[b-k80slcuxko] { height: 28px; }
/* _content/PSMS.Web/Components/Pages/PrintingService/Settings/Dialogs/GenerateCombinationsDialog.razor.rz.scp.css */
/* Same dense, Excel-like grid treatment as PriceComponentsGrid.razor.css (cells butt together on
   a 1px gridline, inputs fill their cell with no chrome) — its own copy since CSS isolation is
   per-component and this dialog's rows/columns differ. */

.gc-defaults-card[b-w9fl1ruayf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 6px;
    background: var(--colorNeutralBackground2, #f9fafb);
}

.gc-info-chip[b-w9fl1ruayf] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--colorPaletteBlueBackground2, #e7f0fe);
    color: var(--colorPaletteBlueForeground2, #0f6cbd);
    font-size: 12px;
}

.gc-method-col[b-w9fl1ruayf] {
    min-width: 130px;
}

.gc-scroll[b-w9fl1ruayf] {
    overflow-x: auto;
    max-height: 360px;
    overflow-y: auto;
    border: 1px solid var(--colorNeutralStroke2, #d1d5db);
    border-radius: 4px;
}

.gc-table[b-w9fl1ruayf] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: var(--colorNeutralBackground1, #ffffff);
}

.gc-table th[b-w9fl1ruayf],
.gc-table td[b-w9fl1ruayf] {
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    padding: 0;
}

.gc-table th[b-w9fl1ruayf] {
    padding: 5px 8px;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
    background: var(--colorNeutralBackground3, #f3f4f6);
    color: var(--colorNeutralForeground2, #374151);
    position: sticky;
    top: 0;
    z-index: 1;
}

.gc-table th.num[b-w9fl1ruayf],
.gc-table td.num[b-w9fl1ruayf] {
    text-align: right;
}

.gc-table tr > *:first-child[b-w9fl1ruayf] { border-left: 0; }
.gc-table tr > *:last-child[b-w9fl1ruayf] { border-right: 0; }

.gc-table tbody tr:hover td[b-w9fl1ruayf] {
    background: var(--colorNeutralBackground2, #f9fafb);
}

.gc-table tr.gc-row-unpriced td[b-w9fl1ruayf] {
    background: var(--colorPaletteYellowBackground1, #fef9e7);
}

.gc-cell[b-w9fl1ruayf] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 0;
    margin: 0;
    padding: 5px 8px;
    background: transparent;
    font: inherit;
    color: inherit;
    line-height: 1.4;
}

.gc-table td.num .gc-cell[b-w9fl1ruayf] {
    text-align: right;
}

.gc-cell:focus[b-w9fl1ruayf] {
    outline: 2px solid var(--colorBrandStroke1, #2563eb);
    outline-offset: -2px;
    background: var(--colorNeutralBackground1, #ffffff);
}

.gc-table .row-action[b-w9fl1ruayf] {
    width: 34px;
    text-align: center;
    padding: 0;
}

.gc-table td:first-child[b-w9fl1ruayf] {
    padding: 5px 8px;
    white-space: nowrap;
}

.gc-table td:nth-last-child(2)[b-w9fl1ruayf] {
    text-align: center;
}
/* _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);
}


/* _content/PSMS.Web/Components/Pages/PrintingService/Settings/PricingRuleTester.razor.rz.scp.css */
/* Live Pricing Tester, compact 12px layout (redesigned 2026-10-12 from a mockup). Every styled
   element is a plain tag in PricingRuleTester.razor, so no ::deep except for Fluent icons. Scoped
   under .pricing-rule-tester so it works in CombinationPricingPanel and SummaryStep alike. */

.pricing-rule-tester[b-yas9r9f2au] {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 8px;
    background: var(--colorNeutralBackground1, #fff);
    overflow: hidden;
}

.prt-head[b-yas9r9f2au] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--colorNeutralBackground3, #f4f7fb);
    border-bottom: 1px solid var(--colorNeutralStroke2, #e5e7eb);
}

.prt-head-icon[b-yas9r9f2au] {
    display: inline-flex;
    padding: 4px;
    border-radius: 6px;
    background: #e3eefc;
    color: #1f6fd1;
}

.prt-head-text[b-yas9r9f2au] { flex: 1; min-width: 0; }
.prt-head-text h3[b-yas9r9f2au] { margin: 0; font-size: 13px; }
.prt-head-text p[b-yas9r9f2au] { margin: 0; font-size: 11px; color: var(--colorNeutralForeground3, #6b7280); }

.prt-btn[b-yas9r9f2au],
.prt-swap[b-yas9r9f2au],
.prt-preset[b-yas9r9f2au] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 26px;
    padding: 0 8px;
    font: inherit;
    font-size: 12px;
    border: 1px solid var(--colorNeutralStroke1, #d1d5db);
    border-radius: 4px;
    background: var(--colorNeutralBackground1, #fff);
    cursor: pointer;
}

.prt-btn:hover[b-yas9r9f2au], .prt-swap:hover[b-yas9r9f2au], .prt-preset:hover:not(:disabled)[b-yas9r9f2au] { background: var(--colorNeutralBackground2, #f3f4f6); }

.prt-body[b-yas9r9f2au] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
}

.prt-label[b-yas9r9f2au] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    margin-top: 2px;
}

.prt-grid[b-yas9r9f2au] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 6px 8px;
}

.prt-field[b-yas9r9f2au] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 11px;
    color: var(--colorNeutralForeground2, #4b5563);
}

.prt-field select[b-yas9r9f2au],
.prt-field input[b-yas9r9f2au] {
    height: 26px;
    font: inherit;
    font-size: 12px;
    padding: 0 6px;
    border: 1px solid var(--colorNeutralStroke1, #d1d5db);
    border-radius: 4px;
    background: var(--colorNeutralBackground1, #fff);
    color: var(--colorNeutralForeground1, #1f2937);
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.prt-field select:focus[b-yas9r9f2au], .prt-field input:focus[b-yas9r9f2au] { outline: 2px solid #0f6b6f; outline-offset: -1px; }

.prt-dims[b-yas9r9f2au] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 6px;
}

.prt-dims .prt-field[b-yas9r9f2au] { flex: 1 1 90px; }
.prt-swap[b-yas9r9f2au] { padding: 0 6px; }

.prt-presets[b-yas9r9f2au] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.prt-preset[b-yas9r9f2au] { padding: 0 4px; }
.prt-preset:disabled[b-yas9r9f2au] { cursor: default; }

.prt-preset-on[b-yas9r9f2au] {
    background: #e3eefc;
    border-color: #9cc2f2;
    color: #1f6fd1;
    font-weight: 600;
}

.prt-match[b-yas9r9f2au] {
    border: 1px solid #8fd3a5;
    border-radius: 6px;
    background: #effaf2;
    overflow: hidden;
}

.prt-match-head[b-yas9r9f2au] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 10px 4px;
}

.prt-match-title[b-yas9r9f2au] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.prt-match-title strong[b-yas9r9f2au] { font-size: 13px; }
.prt-match-title span[b-yas9r9f2au] { color: var(--colorNeutralForeground3, #4b5563); }

.prt-pill[b-yas9r9f2au] {
    padding: 1px 8px;
    border-radius: 10px;
    background: #14833b;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.prt-lines[b-yas9r9f2au] {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 2px 8px;
    margin: 0;
    padding: 4px 10px 8px 34px;
}

.prt-lines dt[b-yas9r9f2au] { color: var(--colorNeutralForeground2, #4b5563); }
.prt-lines dd[b-yas9r9f2au] { margin: 0; }

.prt-total[b-yas9r9f2au] {
    display: flex;
    justify-content: space-between;
    padding: 6px 10px;
    background: #d9f2e1;
    font-size: 14px;
    font-weight: 700;
}

.prt-nomatch[b-yas9r9f2au],
.prt-tip[b-yas9r9f2au] {
    display: flex;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 11px;
}

.prt-nomatch[b-yas9r9f2au] { background: #fff7e6; border: 1px solid #f3d08a; }
.prt-tip[b-yas9r9f2au] { background: #eaf3ff; color: #374151; }
.prt-tip strong[b-yas9r9f2au] { color: #1f6fd1; font-size: 12px; }

.breakdown-card[b-yas9r9f2au] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
}

.breakdown-header[b-yas9r9f2au] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.breakdown-formula[b-yas9r9f2au] {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 11px;
}

.breakdown-explanation[b-yas9r9f2au] {
    margin: 0;
    font-size: 11px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.pricing-hint[b-yas9r9f2au] {
    display: block;
    font-size: 11px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.field-options-empty[b-yas9r9f2au] {
    padding: 12px;
    text-align: center;
    color: var(--colorNeutralForeground3, #6b7280);
}
/* _content/PSMS.Web/Components/Pages/PrintingService/Settings/ProductionWorkflowStep.razor.rz.scp.css */
.pw-head[b-ozqwons02e] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.pw-head h3[b-ozqwons02e] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.pw-head p[b-ozqwons02e] {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.pw-grid[b-ozqwons02e] {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 16px;
    align-items: start;
    width: 100%;
}

@media (max-width: 1080px) {
    .pw-grid[b-ozqwons02e] {
        grid-template-columns: 1fr;
    }
}

.pw-card[b-ozqwons02e] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.pw-card-head[b-ozqwons02e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pw-card-head h4[b-ozqwons02e] {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
}

/* ---- available stages ---- */

.pw-avail[b-ozqwons02e] {
    display: flex;
    flex-direction: column;
    max-height: 480px;
    overflow-y: auto;
    border: 1px solid var(--colorNeutralStroke2, #e6e8ec);
    border-radius: 10px;
}

.pw-avail-item[b-ozqwons02e] {
    border-bottom: 1px solid var(--colorNeutralStroke2, #f0f1f3);
}

.pw-avail-item:last-child[b-ozqwons02e] {
    border-bottom: 0;
}

.pw-avail-row[b-ozqwons02e] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
}

.pw-avail-toggle[b-ozqwons02e] {
    display: inline-flex;
    padding: 2px;
    border: 0;
    background: transparent;
    color: var(--colorNeutralForeground3, #8a8a8a);
    cursor: pointer;
}

.pw-avail-num[b-ozqwons02e] {
    flex: 0 0 auto;
    color: var(--colorNeutralForeground3, #8a8a8a);
    font-size: 12px;
    font-weight: 600;
}

.pw-avail-name[b-ozqwons02e] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
}

.pw-avail-count[b-ozqwons02e] {
    flex: 0 0 auto;
    color: var(--colorNeutralForeground3, #9aa0aa);
    font-size: 11px;
}

.pw-avail-flow[b-ozqwons02e] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 10px 10px 34px;
}

.pw-legend[b-ozqwons02e] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 2px;
    font-size: 11px;
    color: var(--colorNeutralForeground3, #8a8a8a);
}

.pw-legend-item[b-ozqwons02e] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.pw-dot[b-ozqwons02e] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.pw-dot.is-queued[b-ozqwons02e] { background: #2563eb; }
.pw-dot.is-inprogress[b-ozqwons02e] { background: #d97706; }
.pw-dot.is-completed[b-ozqwons02e] { background: #16a34a; }

/* ---- status pills ---- */

.pw-pill[b-ozqwons02e] {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.pw-pill.is-queued[b-ozqwons02e] { background: #eaf1fe; color: #2563eb; }
.pw-pill.is-inprogress[b-ozqwons02e] { background: #fef2e2; color: #c2660c; }
.pw-pill.is-completed[b-ozqwons02e] { background: #e7f7ec; color: #15803d; }

.pw-chev[b-ozqwons02e] {
    margin: 0 4px;
    color: var(--colorNeutralForeground3, #b8bcc4);
    font-size: 12px;
}

/* ---- selected workflow ---- */

.pw-sel-headrow[b-ozqwons02e],
.pw-sel-row[b-ozqwons02e] {
    display: grid;
    grid-template-columns: 56px minmax(120px, 1.1fr) minmax(0, 3fr) 108px;
    align-items: center;
    gap: 10px;
}

.pw-sel-headrow[b-ozqwons02e] {
    padding: 6px 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--colorNeutralForeground3, #9aa0aa);
    border-bottom: 1px solid var(--colorNeutralStroke2, #e6e8ec);
}

[b-ozqwons02e] .pw-sel-dz {
    border-bottom: 1px solid var(--colorNeutralStroke2, #f0f1f3);
}

[b-ozqwons02e] .pw-sel-dz:last-child {
    border-bottom: 0;
}

.pw-sel-row[b-ozqwons02e] {
    padding: 9px 10px;
    background: var(--colorNeutralBackground1, #ffffff);
}

.pw-sel-row:hover[b-ozqwons02e] {
    background: var(--colorNeutralBackground2, #fafbfc);
}

.pw-sel-c-num[b-ozqwons02e] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--colorNeutralForeground2, #444444);
}

.pw-drag[b-ozqwons02e] {
    color: var(--colorNeutralForeground3, #c0c4cc);
    cursor: grab;
}

.pw-sel-c-stage[b-ozqwons02e] {
    font-size: 13px;
    font-weight: 600;
}

.pw-sel-c-flow[b-ozqwons02e] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 0;
    min-width: 0;
}

.pw-sel-c-act[b-ozqwons02e] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* ---- preview (landscape wizard strip) ---- */

.pw-wizard[b-ozqwons02e] {
    list-style: none;
    margin: 0;
    padding: 6px 2px 10px;
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow-x: auto;
}

.pw-wiz-step[b-ozqwons02e] {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--colorNeutralStroke2, #e6e8ec);
    border-radius: 10px;
    background: var(--colorNeutralBackground1, #ffffff);
}

.pw-wiz-step:not(:first-child)[b-ozqwons02e] {
    margin-left: 26px;
}

.pw-wiz-marker[b-ozqwons02e] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--colorBrandBackground2, #dbe9fb);
    color: var(--colorBrandForeground1, #1a6dc4);
    font-size: 13px;
    font-weight: 700;
}

.pw-wiz-body[b-ozqwons02e] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.pw-wiz-name[b-ozqwons02e] {
    font-size: 13px;
    font-weight: 600;
    color: var(--colorNeutralForeground1, #1f1f1f);
    white-space: nowrap;
}

.pw-wiz-meta[b-ozqwons02e] {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--colorNeutralForeground3, #9aa0aa);
    white-space: nowrap;
}

/* chevron bridging this step to the next, sitting in the 26px gap.
   ::deep — the class is on FluentIcon's rendered output, not a tag in this file. */
.pw-wiz-step[b-ozqwons02e]  .pw-wiz-chev {
    position: absolute;
    right: -23px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--colorNeutralForeground3, #b8bcc4);
}

.pw-empty[b-ozqwons02e] {
    padding: 22px 12px;
    color: var(--colorNeutralForeground3, #8a8a8a);
    font-size: 12px;
    text-align: center;
}
/* _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%;
    /* stretch, not start: the three columns line up as one aligned row (equal height, tops and
       bottoms flush) instead of three ragged-bottom stacks. */
    align-items: stretch;
    overflow-x: auto;
}

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

/* The preview / tester cards fill their column height (align-items: stretch above); their content
   still flows from the top via .summary-panel's flex-direction: column. */

[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-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-pricing-meta[b-zo2duk7h0u] {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--neutral-foreground-3, #6b7280);
    white-space: nowrap;
}


/* Pricing Rules Summary (grouped) */
.psum-stats[b-zo2duk7h0u] { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--neutral-foreground-3, #6b7280); }
.psum-stats strong[b-zo2duk7h0u] { font-size: 13px; color: var(--neutral-foreground-1, #1f2937); }
.psum-groups[b-zo2duk7h0u] { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
.psum-group[b-zo2duk7h0u] { flex-shrink: 0; }
.psum-group[b-zo2duk7h0u] { overflow: hidden; border: 1px solid var(--neutral-stroke-divider-rest, #e5e7eb); border-radius: 8px; }
.psum-group-head[b-zo2duk7h0u] { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 7px 10px; background: var(--neutral-layer-2, #f8fafc); font-size: 13px; font-weight: 600; }
.psum-group-head small[b-zo2duk7h0u] { font-size: 11px; font-weight: 400; color: var(--neutral-foreground-3, #6b7280); }
.psum-rule[b-zo2duk7h0u] { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-top: 1px solid var(--neutral-stroke-divider-rest, #f0f0f0); }
.psum-rule.is-off[b-zo2duk7h0u] { opacity: .55; }
.psum-chips[b-zo2duk7h0u] { display: flex; flex: 1; flex-wrap: wrap; gap: 4px; min-width: 0; }
.psum-chip[b-zo2duk7h0u] { padding: 1px 8px; border-radius: 999px; background: #eef5fe; font-size: 11px; color: #0f548c; }
.psum-chip--any[b-zo2duk7h0u] { background: #f1f5f9; color: #64748b; }
.psum-chip--off[b-zo2duk7h0u] { background: #f1f5f9; color: #64748b; font-weight: 600; }
.psum-rate[b-zo2duk7h0u] { display: flex; flex-shrink: 0; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.psum-rate strong[b-zo2duk7h0u] { font-size: 13px; }
.psum-rate small[b-zo2duk7h0u] { font-size: 11px; color: var(--neutral-foreground-3, #6b7280); }
/* _content/PSMS.Web/Components/Pages/PrintingService/Tabs/ProductionWorkflowTab.razor.rz.scp.css */
.wf-card[b-gqvo8ds6nq] {
    width: 100%;
}

.wf-table-scroll[b-gqvo8ds6nq] {
    width: 100%;
    overflow-x: auto;
}

.wf-table[b-gqvo8ds6nq] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.wf-table th[b-gqvo8ds6nq],
.wf-table td[b-gqvo8ds6nq] {
    padding: 9px 14px;
    text-align: left;
    border-bottom: 1px solid var(--colorNeutralStroke2, #f0f0f0);
    white-space: nowrap;
}

.wf-table th[b-gqvo8ds6nq] {
    background: var(--colorNeutralBackground2, #f7f7f7);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--colorNeutralForeground2, #444444);
    position: sticky;
    top: 0;
}

.wf-table tbody tr:last-child td[b-gqvo8ds6nq] {
    border-bottom: 0;
}

.wf-table tbody tr:hover td[b-gqvo8ds6nq] {
    background: var(--colorNeutralBackground2, #fafafa);
}

.wf-col-num[b-gqvo8ds6nq] {
    width: 40px;
    color: var(--colorNeutralForeground3, #8a8a8a);
}

.wf-step[b-gqvo8ds6nq] {
    font-weight: 600;
    color: var(--colorNeutralForeground1, #1f1f1f);
}

.wf-approval[b-gqvo8ds6nq] {
    color: var(--colorNeutralForeground2, #555555);
}

.wf-arrow[b-gqvo8ds6nq] {
    margin: 0 4px;
    color: var(--colorNeutralForeground3, #8a8a8a);
}
/* _content/PSMS.Web/Components/Pages/Production/Dialogs/UpdateWorkflowStepDialog.razor.rz.scp.css */
.wsd[b-5v9aybap57] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wsd-subtitle[b-5v9aybap57] {
    margin: 0;
    font-size: 13px;
    color: var(--colorNeutralForeground3, #6b7280);
}

/* ---- context bar ---- */

.wsd-context[b-5v9aybap57] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 28px;
    padding: 12px 16px;
    background: var(--colorNeutralBackground2, #f4f6fb);
    border-radius: 8px;
}

.wsd-context-cell[b-5v9aybap57] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wsd-context-sep[b-5v9aybap57] {
    width: 1px;
    align-self: stretch;
    min-height: 32px;
    background: var(--colorNeutralStroke2, #dfe2e8);
}

[b-5v9aybap57] .wsd-context-icon {
    color: var(--colorBrandForeground1, #3b5bdb);
    background: var(--colorBrandBackground2, #eef1fd);
    border-radius: 8px;
    padding: 7px;
    box-sizing: content-box;
}

.wsd-context-cell > div[b-5v9aybap57] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.wsd-context-label[b-5v9aybap57] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--colorNeutralForeground3, #6b7280);
}

.wsd-context-value[b-5v9aybap57] {
    font-size: 14px;
    font-weight: 700;
}

/* ---- section titles ---- */

.wsd-section-title[b-5v9aybap57] {
    font-size: 13px;
    font-weight: 700;
}

.wsd-section-title--minor[b-5v9aybap57] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--colorNeutralForeground3, #6b7280);
    padding-top: 4px;
    border-top: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    margin-top: 4px;
}

/* ---- option rows ---- */

.wsd-list[b-5v9aybap57] {
    display: flex;
    flex-direction: column;
}

.wsd-row[b-5v9aybap57] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 12px;
    margin: 3px 0;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 8px;
    background: var(--colorNeutralBackground1, #fff);
    cursor: pointer;
    font: inherit;
    transition: border-color .12s ease, background .12s ease;
}

.wsd-row:hover[b-5v9aybap57] {
    border-color: var(--colorNeutralStroke1, #c8ccd4);
}

.wsd-row.is-current[b-5v9aybap57] {
    background: var(--colorBrandBackground2, #eef2ff);
    border-color: transparent;
}

.wsd-row.is-selected[b-5v9aybap57] {
    background: var(--colorBrandBackground2, #eef2ff);
    border-color: var(--colorBrandForeground1, #3b5bdb);
    box-shadow: 0 0 0 1px var(--colorBrandForeground1, #3b5bdb) inset;
}

/* connector line between phase markers (not on the flat "Other Action" rows) */
.wsd-row:not(.wsd-row--flat)[b-5v9aybap57]::before {
    content: "";
    position: absolute;
    left: 23px;
    top: calc(50% + 12px);
    height: calc(100% - 24px + 6px);
    width: 2px;
    background: var(--colorNeutralStroke2, #e5e7eb);
}

.wsd-row.is-last[b-5v9aybap57]::before,
.wsd-row--flat[b-5v9aybap57]::before {
    display: none;
}

.wsd-marker[b-5v9aybap57] {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--colorNeutralStroke2, #cbd2dc);
    background: var(--colorNeutralBackground1, #fff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.wsd-marker.is-done[b-5v9aybap57] {
    background: var(--colorPaletteGreenBackground3, #1a7f37);
    border-color: var(--colorPaletteGreenBackground3, #1a7f37);
}

.wsd-marker.is-current[b-5v9aybap57],
.wsd-marker.is-selected[b-5v9aybap57] {
    border-color: var(--colorBrandForeground1, #3b5bdb);
}

.wsd-marker-dot[b-5v9aybap57] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--colorBrandForeground1, #3b5bdb);
}

.wsd-marker--action[b-5v9aybap57] {
    border-style: none;
    background: var(--colorNeutralBackground3, #eef0f3);
    color: var(--colorNeutralForeground3, #6b7280);
}

.wsd-marker--action.is-selected[b-5v9aybap57] {
    background: var(--colorBrandForeground1, #3b5bdb);
    color: #fff;
}

.wsd-row-text[b-5v9aybap57] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.wsd-row-name[b-5v9aybap57] {
    font-size: 13px;
    font-weight: 600;
    color: var(--colorNeutralForeground1, #1f2937);
}

.wsd-row-desc[b-5v9aybap57] {
    font-size: 12px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.wsd-tag[b-5v9aybap57] {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.wsd-tag.is-done[b-5v9aybap57] {
    background: #e7f5ec;
    color: #1a7f37;
}

.wsd-tag.is-current[b-5v9aybap57],
.wsd-tag.is-rec[b-5v9aybap57] {
    background: #e6ecff;
    color: #2f43a8;
}
/* _content/PSMS.Web/Components/Pages/Production/MyTasks/MyTasks.razor.rz.scp.css */
/* Query context for the stat grid — its width shrinks when the docked detail panel opens even
   though the viewport doesn't, so column count keys off THIS element's width, not @media. */
.mt-stats-cq[b-9l5gda3lxp] {
    container-type: inline-size;
    width: 100%;
}

.mt-stats[b-9l5gda3lxp] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}

/* FluentCard is a shadow-DOM web component and doesn't reliably stretch to fill a CSS grid cell
   on its own — force it to fill the column so the stat cards go edge-to-edge in every layout.
   Same fix as Dashboard.razor.css's .kpi-cell rule. */
.mt-stats[b-9l5gda3lxp]  .basic-value-card {
    display: block;
    width: 100%;
}

/* Not enough room for 4 readable cards (panel open on a tablet, or a genuinely small screen)
   -> 2 across, so 4 cards become 2 rows. */
@container (max-width: 720px) {
    .mt-stats[b-9l5gda3lxp] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}

/* Cards themselves get compact once the column is narrow, so the label + value + hint still fit. */
@container (max-width: 480px) {
    .mt-stats[b-9l5gda3lxp] {
        gap: 8px;
    }

    .mt-stats[b-9l5gda3lxp]  .basic-value-card {
        min-height: 0;
        padding: 12px 14px;
        border-radius: 12px;
    }

    .mt-stats[b-9l5gda3lxp]  .bvc-layout {
        gap: 10px;
    }

    .mt-stats[b-9l5gda3lxp]  .bvc-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        border-radius: 9px;
    }

    .mt-stats[b-9l5gda3lxp]  .bvc-icon svg {
        width: 18px;
        height: 18px;
    }

    .mt-stats[b-9l5gda3lxp]  .bvc-value {
        font-size: 19px;
    }

    .mt-stats[b-9l5gda3lxp]  .bvc-title,
    .mt-stats[b-9l5gda3lxp]  .bvc-supporting {
        font-size: 11px;
    }
}

.mt-toolbar[b-9l5gda3lxp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* ::deep — Class lands on the Fluent input's own rendered element, outside this file's scope */
.mt-toolbar[b-9l5gda3lxp]  .mt-search {
    flex: 1 1 240px;
}

.mt-toolbar[b-9l5gda3lxp]  .mt-filter {
    min-width: 150px;
}

@media (max-width: 640px) {
    .mt-toolbar[b-9l5gda3lxp] {
        gap: 8px;
    }

    /* search takes its own full row, the two selects split the next one */
    .mt-toolbar[b-9l5gda3lxp]  .mt-search {
        flex-basis: 100%;
    }

    .mt-toolbar[b-9l5gda3lxp]  .mt-filter {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
    }

    .mt-toolbar[b-9l5gda3lxp]  .mt-overdue-check {
        flex: 1 1 100%;
    }

    /* the flex-grow spacer only makes sense when the toggle shares a row with the filters */
    .mt-toolbar[b-9l5gda3lxp]  fluent-spacer {
        display: none;
    }

    /* view toggle drops to its own full-width row with equal halves */
    .mt-view-toggle[b-9l5gda3lxp] {
        flex: 1 1 100%;
    }

    .mt-view-toggle button[b-9l5gda3lxp] {
        flex: 1 1 0;
        justify-content: center;
    }
}

/* segmented board / list toggle */
.mt-view-toggle[b-9l5gda3lxp] {
    display: inline-flex;
    border: 1px solid var(--neutral-stroke-rest, #d1d5db);
    border-radius: 8px;
    overflow: hidden;
}

.mt-view-toggle button[b-9l5gda3lxp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: var(--neutral-layer-1, #ffffff);
    color: var(--neutral-foreground-2, #4b5563);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    cursor: pointer;
}

.mt-view-toggle button + button[b-9l5gda3lxp] {
    border-left: 1px solid var(--neutral-stroke-rest, #d1d5db);
}

.mt-view-toggle button.is-active[b-9l5gda3lxp] {
    background: var(--accent-fill-rest, #2563eb);
    color: #ffffff;
}

/* ---- board ---- */

.mt-board[b-9l5gda3lxp] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 8px;
}

.mt-column[b-9l5gda3lxp] {
    flex: 1 1 240px;
    min-width: 240px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    background: var(--neutral-fill-secondary-rest, #f6f7f9);
    border: 1px solid var(--neutral-stroke-divider-rest, #e8eaed);
    border-top: 3px solid var(--mt-accent, #64748b);
}

/* On phones the board pages one column at a time, with a sliver of the next as a scroll cue */
@media (max-width: 560px) {
    .mt-board[b-9l5gda3lxp] {
        gap: 10px;
        scroll-snap-type: x mandatory;
    }

    .mt-column[b-9l5gda3lxp] {
        flex-basis: 84vw;
        min-width: 84vw;
        max-width: 84vw;
        scroll-snap-align: start;
    }
}

.mt-column-head[b-9l5gda3lxp] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mt-column-dot[b-9l5gda3lxp] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mt-accent, #64748b);
    flex: 0 0 auto;
}

.mt-column-title[b-9l5gda3lxp] {
    font-size: 13px;
    font-weight: 700;
    color: var(--mt-accent, #334155);
    flex: 1 1 auto;
    min-width: 0;
}

.mt-column-count[b-9l5gda3lxp] {
    font-size: 11px;
    font-weight: 700;
    color: var(--neutral-foreground-3, #6b7280);
    background: var(--neutral-layer-1, #ffffff);
    border: 1px solid var(--neutral-stroke-divider-rest, #e1e1e1);
    border-radius: 999px;
    padding: 1px 8px;
}

.mt-column-body[b-9l5gda3lxp] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mt-card[b-9l5gda3lxp] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 11px;
    border: 1px solid var(--neutral-stroke-divider-rest, #e6e8eb);
    border-radius: 10px;
    background: var(--neutral-layer-1, #ffffff);
    cursor: pointer;
    transition: border-color .12s ease;
}

.mt-card:hover[b-9l5gda3lxp] {
    border-color: var(--colorNeutralStroke1Hover, #b3b8c2);
}

.mt-card.is-selected[b-9l5gda3lxp] {
    border-color: var(--mt-accent, #2563eb);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mt-accent, #2563eb) 22%, transparent);
}

.mt-card-top[b-9l5gda3lxp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.mt-card-code[b-9l5gda3lxp] {
    font-size: 12px;
    font-weight: 700;
    color: var(--neutral-foreground-1, #1f2937);
}

.mt-card-due[b-9l5gda3lxp] {
    font-size: 11px;
    color: var(--neutral-foreground-3, #6b7280);
}

.mt-card-due.is-delayed[b-9l5gda3lxp] {
    color: var(--colorPaletteRedForeground1, #b3261e);
    font-weight: 700;
}

.mt-card-customer[b-9l5gda3lxp] {
    font-size: 13px;
    font-weight: 600;
}

.mt-card-desc[b-9l5gda3lxp] {
    font-size: 12px;
    color: var(--neutral-foreground-3, #6b7280);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mt-card-meta[b-9l5gda3lxp] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mt-card-qty[b-9l5gda3lxp] {
    font-size: 11px;
    color: var(--neutral-foreground-3, #6b7280);
}

.mt-dots[b-9l5gda3lxp] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mt-dot[b-9l5gda3lxp] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--neutral-stroke-divider-rest, #d8dbe0);
    flex: 0 0 auto;
}

.mt-dot.is-filled[b-9l5gda3lxp] {
    background: var(--success, #16a34a);
}

.mt-dot.is-current[b-9l5gda3lxp] {
    background: var(--accent-fill-rest, #2563eb);
}

.mt-dots-label[b-9l5gda3lxp] {
    margin-left: auto;
    font-size: 11px;
    color: var(--neutral-foreground-3, #6b7280);
}

.mt-card-foot[b-9l5gda3lxp] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--neutral-foreground-2, #4b5563);
}

/* ::deep — the class lands on FluentIcon's rendered element */
.mt-card-foot[b-9l5gda3lxp]  svg {
    color: var(--neutral-foreground-3, #8a93a3);
    flex: 0 0 auto;
}

.mt-card-actions[b-9l5gda3lxp] {
    display: flex;
    gap: 6px;
    margin-top: 2px;
}

/* ---- empty / list ---- */

[b-9l5gda3lxp] .mt-empty-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 44px 16px;
    text-align: center;
    color: var(--neutral-foreground-3, #6b7280);
    font-size: 13px;
}

[b-9l5gda3lxp] .mt-list-card {
    display: block;
    /* flex item of the vertical FluentStack — without an explicit floor it balloons to the wide
       grid's width and the whole card overflows the viewport instead of the grid scrolling
       inside it */
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}

/* The 7-column grid can't fit a phone (or a tablet with the detail panel open) — scroll it
   horizontally inside this wrapper instead of collapsing the columns. The footer/paginator below
   is a sibling of this div, so it stays put and doesn't scroll with the grid. */
.mt-list-scroll[b-9l5gda3lxp] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* FluentDataGrid (Table mode) renders <table class="fluent-data-grid"> with width:auto and cells
   that clip their overflow — so in a narrow container it shrinks every column to an unreadable
   sliver instead of overflowing. A hard floor on the table keeps the columns at their real size
   and hands the horizontal scroll to .mt-list-scroll. */
.mt-list-scroll[b-9l5gda3lxp]  table.fluent-data-grid {
    min-width: 960px;
}

.mt-list-scroll[b-9l5gda3lxp]  th {
    white-space: nowrap;
}

.mt-list-footer[b-9l5gda3lxp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 16px;
    font-size: 12px;
    color: var(--neutral-foreground-3, #6b7280);
}

.mt-cell[b-9l5gda3lxp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mt-cell-sub[b-9l5gda3lxp] {
    font-size: 11px;
    color: var(--neutral-foreground-3, #6b7280);
}

.mt-delayed-text[b-9l5gda3lxp] {
    color: var(--colorPaletteRedForeground1, #b3261e);
    font-weight: 600;
}
/* _content/PSMS.Web/Components/Pages/Production/MyTasks/MyTasksDetailPanel.razor.rz.scp.css */
.mtp[b-4ynsw2iu5s] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--neutral-layer-1, #ffffff);
}

/* ---- header ---- */

.mtp-head[b-4ynsw2iu5s] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px 14px 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #e5e5e5);
}

.mtp-head-icon[b-4ynsw2iu5s] {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--colorBrandBackground2, #e6f4f4);
    color: var(--colorBrandBackground, #0f6c6c);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mtp-head-text[b-4ynsw2iu5s] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 auto;
    min-width: 0;
}

.mtp-head-title[b-4ynsw2iu5s] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.mtp-code[b-4ynsw2iu5s] {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mtp-head-sub[b-4ynsw2iu5s] {
    font-size: 12px;
    color: var(--neutral-foreground-3, #6b7280);
}

/* ---- scroll region ---- */

.mtp-scroll[b-4ynsw2iu5s] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.mtp-hero[b-4ynsw2iu5s] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #eceef1);
}

.mtp-hero-icon[b-4ynsw2iu5s] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--colorBrandBackground2, #e6f0ff);
    color: var(--accent-fill-rest, #2563eb);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mtp-hero-text[b-4ynsw2iu5s] {
    min-width: 0;
}

.mtp-customer[b-4ynsw2iu5s] {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
}

.mtp-desc[b-4ynsw2iu5s] {
    margin-top: 2px;
    font-size: 12px;
    color: var(--neutral-foreground-3, #6b7280);
}

.mtp-body[b-4ynsw2iu5s] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
}

/* ---- status bar ---- */

.mtp-statusbar[b-4ynsw2iu5s] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 10px;
    padding: 14px;
    border-radius: 10px;
    background: var(--neutral-fill-secondary-rest, #f5f7fa);
    border: 1px solid var(--neutral-stroke-divider-rest, #eceef1);
}

.mtp-stat[b-4ynsw2iu5s] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 130px;
    min-width: 0;
}

.mtp-stat-icon[b-4ynsw2iu5s] {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--neutral-layer-1, #ffffff);
    color: var(--colorBrandBackground, #0f6c6c);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mtp-stat-body[b-4ynsw2iu5s] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.mtp-stat-label[b-4ynsw2iu5s] {
    font-size: 11px;
    color: var(--neutral-foreground-3, #6b7280);
}

.mtp-stat-value[b-4ynsw2iu5s] {
    font-size: 13px;
    font-weight: 700;
}

.mtp-progress[b-4ynsw2iu5s] {
    flex: 1 1 100%;
    height: 8px;
    border-radius: 999px;
    background: var(--neutral-stroke-rest, #dfe3e8);
    overflow: hidden;
}

.mtp-progress-fill[b-4ynsw2iu5s] {
    height: 100%;
    border-radius: 999px;
    background: var(--colorBrandBackground, #0f6c6c);
    transition: width .3s ease;
}

/* ---- tab bar ---- */

.mtp-tabbar[b-4ynsw2iu5s] {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #e5e7eb);
}

.mtp-tabbar button[b-4ynsw2iu5s] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--neutral-foreground-3, #6b7280);
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
}

.mtp-tabbar button:hover:not(.is-active)[b-4ynsw2iu5s] {
    color: var(--neutral-foreground-1, #1f2937);
}

.mtp-tabbar button.is-active[b-4ynsw2iu5s] {
    color: var(--colorBrandBackground, #0f6c6c);
    border-bottom-color: var(--colorBrandBackground, #0f6c6c);
}

/* ---- detail card ---- */

.mtp-card[b-4ynsw2iu5s] {
    border: 1px solid var(--neutral-stroke-divider-rest, #e5e7eb);
    border-radius: 10px;
    padding: 14px;
}

.mtp-card-head[b-4ynsw2iu5s] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #eceef1);
}

.mtp-card-icon[b-4ynsw2iu5s] {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--colorBrandBackground2, #e6f4f4);
    color: var(--colorBrandBackground, #0f6c6c);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mtp-card-title[b-4ynsw2iu5s] {
    display: block;
    font-size: 14px;
    font-weight: 700;
}

.mtp-card-sub[b-4ynsw2iu5s] {
    display: block;
    margin-top: 1px;
    font-size: 12px;
    color: var(--neutral-foreground-3, #6b7280);
}

.mtp-rows[b-4ynsw2iu5s] {
    display: flex;
    flex-direction: column;
}

.mtp-row[b-4ynsw2iu5s] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #f0f1f3);
    font-size: 13px;
}

.mtp-row:last-child[b-4ynsw2iu5s] {
    border-bottom: none;
    padding-bottom: 0;
}

.mtp-row-label[b-4ynsw2iu5s] {
    flex: 0 0 auto;
    color: var(--neutral-foreground-3, #6b7280);
}

.mtp-row-value[b-4ynsw2iu5s] {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    font-weight: 500;
    word-break: break-word;
}

.mtp-delayed[b-4ynsw2iu5s] {
    color: var(--colorPaletteRedForeground1, #b3261e);
    font-weight: 600;
}

/* ---- timeline (unchanged) ---- */

.mtp-empty[b-4ynsw2iu5s] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 16px 0;
    font-size: 12px;
    color: var(--neutral-foreground-3, #6b7280);
}

.mtp-timeline[b-4ynsw2iu5s] {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.mtp-tl-step[b-4ynsw2iu5s] {
    position: relative;
    display: flex;
    gap: 10px;
    padding-bottom: 16px;
}

.mtp-tl-step:last-child[b-4ynsw2iu5s] {
    padding-bottom: 0;
}

.mtp-tl-step[b-4ynsw2iu5s]::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 16px;
    bottom: -2px;
    width: 2px;
    background: var(--neutral-stroke-divider-rest, #e1e1e1);
}

.mtp-tl-step:last-child[b-4ynsw2iu5s]::before {
    display: none;
}

.mtp-tl-dot[b-4ynsw2iu5s] {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    margin-top: 3px;
    border-radius: 50%;
    border: 2px solid var(--neutral-stroke-rest, #c8ccd4);
    background: var(--neutral-layer-1, #ffffff);
}

.mtp-tl-step.is-done .mtp-tl-dot[b-4ynsw2iu5s] {
    background: var(--success, #16a34a);
    border-color: var(--success, #16a34a);
}

.mtp-tl-step.is-active .mtp-tl-dot[b-4ynsw2iu5s] {
    background: var(--accent-fill-rest, #2563eb);
    border-color: var(--accent-fill-rest, #2563eb);
}

.mtp-tl-step.is-hold .mtp-tl-dot[b-4ynsw2iu5s] {
    background: var(--colorPaletteRedForeground1, #b3261e);
    border-color: var(--colorPaletteRedForeground1, #b3261e);
}

.mtp-tl-body[b-4ynsw2iu5s] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mtp-tl-name[b-4ynsw2iu5s] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 600;
}

.mtp-tl-status[b-4ynsw2iu5s] {
    font-size: 11px;
    font-weight: 500;
    color: var(--neutral-foreground-3, #6b7280);
}

.mtp-tl-meta[b-4ynsw2iu5s] {
    font-size: 11px;
    color: var(--neutral-foreground-3, #6b7280);
}

/* ---- actions ---- */

.mtp-actions[b-4ynsw2iu5s] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--neutral-stroke-divider-rest, #e5e5e5);
}

.mtp-actions-row[b-4ynsw2iu5s] {
    display: flex;
    gap: 8px;
}
/* _content/PSMS.Web/Components/Pages/Production/ProductionAnalytics/ProductionAnalytics.razor.rz.scp.css */
.pa-filter-chip[b-5zsrk8i0zu],
.pa-live-chip[b-5zsrk8i0zu] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--colorNeutralStroke2, #e1e1e1);
    border-radius: 8px;
    padding: 8px 12px;
    background: var(--colorNeutralBackground1, #fff);
}

.pa-live-chip[b-5zsrk8i0zu] {
    background: #e8f6ec;
    border-color: #b7e4c3;
    color: #1a9e54;
}

.pa-filter-chip > div[b-5zsrk8i0zu],
.pa-live-chip > div[b-5zsrk8i0zu] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.pa-filter-label[b-5zsrk8i0zu] {
    font-size: 11px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.pa-live-chip .pa-filter-label[b-5zsrk8i0zu] {
    color: #1a9e54;
}

.pa-filter-value[b-5zsrk8i0zu] {
    font-weight: 600;
    font-size: 13px;
}

/* Plain wrapper element so this file's ::deep rules have a scoped ancestor to anchor to - the
   page root is FluentStack (a component), which doesn't carry this file's scope attribute, so
   without it ::deep .pa-grid-item / .pa-card silently matched nothing. */
.pa-page[b-5zsrk8i0zu] {
    width: 100%;
}

/* gap must equal FluentGrid Spacing="2"'s 16px so the KPI columns line up with the card columns
   below (2 KPI tiles + 1 gap == one Md="4" card). */
.pa-kpi-grid[b-5zsrk8i0zu] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    width: 100%;
}

.pa-kpi-item[b-5zsrk8i0zu] {
    display: flex;
}

[b-5zsrk8i0zu] .pa-kpi-item .basic-value-card {
    width: 100%;
    height: 100%;
}

@media (max-width: 1199.98px) {
    .pa-kpi-grid[b-5zsrk8i0zu] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 699.98px) {
    .pa-kpi-grid[b-5zsrk8i0zu] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* FluentGrid's own row of FluentGridItems stretches to match the tallest item by default (normal
   flex/grid cross-axis behavior), but a FluentGridItem has no height of its own to redistribute
   down into its single FluentCard child unless it's itself a flex container - without this,
   .pa-card's height:100% below has nothing meaningful to resolve against, so cards in the same
   row sized to their own content instead of matching each other. Same fix CompanyProfile.razor's
   cp-scroll-col already uses for the identical problem. */
[b-5zsrk8i0zu] .pa-grid-item {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

[b-5zsrk8i0zu] .pa-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[b-5zsrk8i0zu] .pa-filters {
    margin: 2px 0;
}

.pa-status-list[b-5zsrk8i0zu] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pa-status-row[b-5zsrk8i0zu] {
    display: grid;
    grid-template-columns: 1fr 2fr auto auto;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.pa-status-name[b-5zsrk8i0zu] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pa-status-bar-track[b-5zsrk8i0zu] {
    height: 8px;
    border-radius: 4px;
    background: var(--colorNeutralBackground3, #f0f1f3);
    overflow: hidden;
}

.pa-status-bar-fill[b-5zsrk8i0zu] {
    height: 100%;
    border-radius: 4px;
}

.pa-status-count[b-5zsrk8i0zu] {
    font-weight: 600;
    text-align: right;
    min-width: 24px;
}

.pa-status-percent[b-5zsrk8i0zu] {
    color: var(--colorNeutralForeground3, #6b7280);
    min-width: 34px;
    text-align: right;
}

.pa-table[b-5zsrk8i0zu] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.pa-table th[b-5zsrk8i0zu] {
    text-align: left;
    color: var(--colorNeutralForeground3, #6b7280);
    font-weight: 600;
    padding: 6px 8px;
    border-bottom: 1px solid var(--colorNeutralStroke2, #e1e1e1);
}

.pa-table td[b-5zsrk8i0zu] {
    padding: 8px;
    border-bottom: 1px solid var(--colorNeutralStroke2, #f0f0f0);
}

.pa-table .pa-align-end[b-5zsrk8i0zu] {
    text-align: right;
}

.pa-table tr.pa-row-high[b-5zsrk8i0zu] {
    background: #fdecec;
}

.pa-table tr.pa-row-high td:first-child[b-5zsrk8i0zu] {
    color: #d13438;
    font-weight: 600;
}

.pa-table tr.pa-row-medium[b-5zsrk8i0zu] {
    background: #fdf3e3;
}

.pa-table tr.pa-row-medium td:first-child[b-5zsrk8i0zu] {
    color: #c76c00;
    font-weight: 600;
}

.pa-grid-container[b-5zsrk8i0zu] {
    overflow-x: auto;
}

.pa-empty[b-5zsrk8i0zu] {
    padding: 24px 16px;
    text-align: center;
    color: var(--colorNeutralForeground3, #6b7280);
}
/* _content/PSMS.Web/Components/Pages/Production/ProductionItem.razor.rz.scp.css */
.pi-page[b-9jxg9w0lkx] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.pi-page > *[b-9jxg9w0lkx] {
    width: 100%;
}

.pi-topbar[b-9jxg9w0lkx] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pi-topbar h1[b-9jxg9w0lkx] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

/* ---- info card ---- */
.pi-info-card[b-9jxg9w0lkx] {
    padding: 14px 16px;
}

.pi-info-grid[b-9jxg9w0lkx] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px 24px;
}

@media (max-width: 1100px) {
    .pi-info-grid[b-9jxg9w0lkx] { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
    .pi-info-grid[b-9jxg9w0lkx] { grid-template-columns: repeat(2, 1fr); }
}

.pi-info-cell[b-9jxg9w0lkx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pi-info-label[b-9jxg9w0lkx] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--colorNeutralForeground3, #9098a4);
}

.pi-info-cell > span:last-child[b-9jxg9w0lkx],
.pi-info-cell > fluent-badge[b-9jxg9w0lkx] {
    font-size: 13px;
}

/* Badge sizes to its text, not the full grid cell (flex column stretches children by default). */
.pi-info-cell > fluent-badge[b-9jxg9w0lkx] {
    align-self: flex-start;
    width: auto;
}

.pi-info-strong[b-9jxg9w0lkx] {
    font-weight: 600;
    color: var(--colorBrandForeground1, #2f43a8);
}

.pi-due[b-9jxg9w0lkx] {
    color: #b91c1c;
    font-weight: 600;
}

/* ---- panels ---- */
.pi-panel[b-9jxg9w0lkx] {
    padding: 16px;
}

.pi-panel-header[b-9jxg9w0lkx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.pi-panel-header h2[b-9jxg9w0lkx] {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--colorNeutralForeground2, #4b5563);
}

.pi-count[b-9jxg9w0lkx] {
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--colorNeutralBackground3, #eef1f5);
    color: var(--colorNeutralForeground2, #4b5563);
}

/* ---- two-column body ---- */
.pi-grid[b-9jxg9w0lkx] {
    display: grid;
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: 12px;
    align-items: start;
}

@media (max-width: 1000px) {
    .pi-grid[b-9jxg9w0lkx] { grid-template-columns: 1fr; }
}

.pi-details[b-9jxg9w0lkx] {
    min-width: 0;
}

.pi-side[b-9jxg9w0lkx] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 12px;
}

@media (max-width: 1000px) {
    .pi-side[b-9jxg9w0lkx] { position: static; }
}

.pi-empty[b-9jxg9w0lkx] {
    padding: 14px 4px;
    font-size: 13px;
    color: var(--colorNeutralForeground3, #6b7280);
}

/* ---- item status ---- */
.pi-item-head[b-9jxg9w0lkx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--colorNeutralStroke2, #e6e8ec);
}

.pi-item-name[b-9jxg9w0lkx] {
    font-weight: 600;
    font-size: 13px;
}

.pi-item-spec[b-9jxg9w0lkx] {
    font-size: 12px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.pi-status-lead[b-9jxg9w0lkx] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.pi-detail-grid[b-9jxg9w0lkx] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 7px 14px;
    font-size: 13px;
}

.pi-detail-label[b-9jxg9w0lkx] {
    font-weight: 600;
    color: var(--colorNeutralForeground3, #6b7280);
}

.pi-assign[b-9jxg9w0lkx] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--colorNeutralStroke2, #eceef1);
}

.pi-assign-label[b-9jxg9w0lkx] {
    font-size: 12px;
    font-weight: 600;
    color: var(--colorNeutralForeground3, #6b7280);
}

/* ---- activity timeline ---- */
.pi-activity[b-9jxg9w0lkx] {
    display: flex;
    flex-direction: column;
    max-height: 460px;
    overflow-y: auto;
    /* gutter so rows don't sit under the scrollbar */
    padding-right: 6px;
}

.pi-activity-row[b-9jxg9w0lkx] {
    position: relative;
    padding: 0 0 16px 20px;
}

.pi-activity-row:last-child[b-9jxg9w0lkx] {
    padding-bottom: 0;
}

.pi-activity-row[b-9jxg9w0lkx]::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 6px;
    bottom: -6px;
    width: 2px;
    background: var(--colorNeutralStroke2, #e0e4ea);
}

.pi-activity-row:last-child[b-9jxg9w0lkx]::before {
    display: none;
}

.pi-activity-dot[b-9jxg9w0lkx] {
    position: absolute;
    left: 0;
    top: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd2dc;
    border: 2px solid var(--colorNeutralBackground1, #fff);
    box-shadow: 0 0 0 1px #cbd2dc;
}

.pi-activity-dot.is-done[b-9jxg9w0lkx] { background: #107c10; box-shadow: 0 0 0 1px #107c10; }
.pi-activity-dot.is-active[b-9jxg9w0lkx] { background: #eaa300; box-shadow: 0 0 0 1px #eaa300; }
.pi-activity-dot.is-hold[b-9jxg9w0lkx] { background: #b91c1c; box-shadow: 0 0 0 1px #b91c1c; }

.pi-activity-title[b-9jxg9w0lkx] {
    font-size: 13px;
    font-weight: 600;
}

.pi-activity-note[b-9jxg9w0lkx] {
    font-size: 12px;
    color: var(--colorNeutralForeground2, #4b5563);
    margin-top: 1px;
}

.pi-activity-meta[b-9jxg9w0lkx] {
    font-size: 11px;
    color: var(--colorNeutralForeground3, #9aa0a8);
    margin-top: 2px;
}
/* _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);
}

/* two-line text cell (Item, Status) — badge/first line on top, muted sub-line below */
.pq-cell[b-7ikxjfjorv] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}

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

/* Job / Customer cell — priority shows as the coloured bar on the left */
.pq-primary[b-7ikxjfjorv] {
    display: flex;
    align-items: stretch;
    gap: 10px;
    min-width: 0;
}

.pq-accent-bar[b-7ikxjfjorv] {
    flex: 0 0 3px;
    align-self: stretch;
    min-height: 30px;
    border-radius: 2px;
    background: var(--pq-accent, #94a3b8);
}

.pq-primary-text[b-7ikxjfjorv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pq-code[b-7ikxjfjorv] {
    font-weight: 600;
    font-size: 13px;
}

/* Only High / Urgent get a text tag — Low / Medium are just the bar colour, no clutter */
.pq-priority-tag[b-7ikxjfjorv] {
    align-self: flex-start;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
}

.pq-priority-tag.is-high[b-7ikxjfjorv] { color: #c2410c; }
.pq-priority-tag.is-urgent[b-7ikxjfjorv] { color: #dc2626; }

/* due line under the status badge (folds in the old Due Date column + Delayed badge) */
.pq-due[b-7ikxjfjorv] {
    font-size: 12px;
    color: var(--neutral-foreground-3, #6b7280);
}

.pq-due.is-delayed[b-7ikxjfjorv] {
    color: #b91c1c;
    font-weight: 600;
}

/* progress cell — bar with a step/assignee caption underneath */
.pq-progress[b-7ikxjfjorv] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 110px;
}

[b-7ikxjfjorv] .pq-progress fluent-progress {
    width: 100%;
}
/* _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/PurchaseOrder/Print/PurchaseOrderPrintDocument.razor.rz.scp.css */
/* Same look as SalesOrderPrintDocument (copied, po- prefix so the two can diverge). */
.po-doc[b-5gnmo92rzd] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 10.5px;
    line-height: 1.45;
    color: #242424;
}

/* ── title block (letterhead aside) ── */
.po-title[b-5gnmo92rzd] {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .02em;
}

.po-code[b-5gnmo92rzd] {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
}

.po-date[b-5gnmo92rzd] {
    margin-top: 2px;
    color: #424242;
}

.po-copy[b-5gnmo92rzd] {
    margin-top: 4px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    color: #616161;
}

.po-muted[b-5gnmo92rzd] {
    color: #616161;
    font-size: 9.5px;
}

/* ── cards ── */
.po-card[b-5gnmo92rzd] {
    padding: 10px 12px;
    border: 1px solid #d6d9de;
    border-radius: 4px;
}

.po-card-flush[b-5gnmo92rzd] {
    padding: 0;
    overflow: hidden;
}

.po-card-title[b-5gnmo92rzd] {
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e6e8eb;
    font-size: 11.5px;
    font-weight: 700;
}

.po-info[b-5gnmo92rzd] {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 10px;
}

.po-kv[b-5gnmo92rzd] {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 3px 10px;
}

.po-kv > span:nth-child(odd)[b-5gnmo92rzd] {
    color: #616161;
}

.po-pill[b-5gnmo92rzd] {
    display: inline-block;
    padding: 0 8px;
    border-radius: 999px;
    background: #e3f0fb;
    color: #0f6cbd;
    font-size: 9.5px;
    font-weight: 600;
}

/* ── tables ── */
.po-table th[b-5gnmo92rzd],
.po-table td[b-5gnmo92rzd],
.po-prod-table th[b-5gnmo92rzd],
.po-prod-table td[b-5gnmo92rzd] {
    padding: 6px 10px;
    border-bottom: 1px solid #e6e8eb;
    text-align: left;
    vertical-align: top;
}

.po-table th[b-5gnmo92rzd] {
    background: #f1f2f4;
    font-weight: 700;
}

.po-table tr:last-child td[b-5gnmo92rzd] {
    border-bottom: 0;
}

.po-table .num[b-5gnmo92rzd] {
    text-align: right;
    white-space: nowrap;
}

.po-prod-table th[b-5gnmo92rzd],
.po-prod-table td[b-5gnmo92rzd] {
    padding: 4px 6px;
}

.po-prod-table th[b-5gnmo92rzd] {
    color: #616161;
    font-weight: 600;
}

/* ── payment + terms ── */
.po-pair[b-5gnmo92rzd] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: start;
}

.po-totals > div:not(.po-card-title)[b-5gnmo92rzd] {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
}

.po-totals .is-total[b-5gnmo92rzd] {
    margin-top: 4px;
    padding-top: 5px !important;
    border-top: 1px solid #3d3d3d;
    font-size: 12px;
    font-weight: 700;
}

.po-totals .is-balance[b-5gnmo92rzd] {
    font-weight: 700;
}

.po-terms p[b-5gnmo92rzd] {
    margin: 0;
    white-space: pre-wrap;
}

.po-pill.is-good[b-5gnmo92rzd] {
    background: #e6f4ea;
    color: #107c10;
}

.po-pay-table th[b-5gnmo92rzd],
.po-pay-table td[b-5gnmo92rzd] {
    padding: 4px 6px;
    border-bottom: 1px solid #e6e8eb;
    text-align: left;
}

.po-pay-table th[b-5gnmo92rzd] {
    color: #616161;
    font-weight: 600;
}

.po-pay-table .num[b-5gnmo92rzd] {
    text-align: right;
    white-space: nowrap;
}

/* Hint lines under a number (unit conversion, "per kg") may wrap instead of running into the next column. */
.po-table .num .po-muted[b-5gnmo92rzd] {
    white-space: normal;
    line-height: 1.25;
}
/* _content/PSMS.Web/Components/Pages/PurchaseOrder/PurchaseOrderDetail.razor.rz.scp.css */
/* Sales order page: full width. Order Status across the top, Order Details beside Summary, then Items.
   The page sits in a vertical FluentStack (which sizes children to their content), so the wrapper is
   stretched to 100% explicitly. Cards use the theme's 8px corners. */
.pod-page[b-cmwo2mll5d] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

.pod-row[b-cmwo2mll5d] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    gap: 12px;
    align-items: stretch;
}

@media (max-width: 1000px) {
    .pod-row[b-cmwo2mll5d] { grid-template-columns: minmax(0, 1fr); }
}

.pod-card[b-cmwo2mll5d] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    background: var(--colorNeutralBackground1);
}

.pod-card-head[b-cmwo2mll5d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}

.pod-head[b-cmwo2mll5d] { display: flex; align-items: center; gap: 12px; }

.pod-head-icon[b-cmwo2mll5d] {
    display: grid;
    flex: none;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 8px;
    background: var(--colorBrandBackground2, #ebf3fc);
}

.pod-head-text[b-cmwo2mll5d] { display: flex; flex-direction: column; gap: 1px; }

.pod-title[b-cmwo2mll5d] { font-size: 15px; font-weight: 700; color: var(--colorNeutralForeground1); }

.pod-hint[b-cmwo2mll5d] { font-size: 12px; color: var(--colorNeutralForeground3); }

.pod-note[b-cmwo2mll5d] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--colorNeutralForeground3);
}

/* ---- Order status: centred steps joined by a line ---- */
.pod-steps[b-cmwo2mll5d] {
    display: flex;
    margin: 0;
    padding: 4px 0 0;
    overflow-x: auto;
    list-style: none;
}

.pod-hstep[b-cmwo2mll5d] {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 140px;
    text-align: center;
}

/* Connector from this step's circle to the next one's: dashed until the step is done. */
.pod-hstep:not(:last-child)[b-cmwo2mll5d]::after {
    content: "";
    position: absolute;
    top: 14px;
    left: calc(50% + 18px);
    right: calc(-50% + 18px);
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--colorNeutralStroke1, #c7c7c7) 0 4px, transparent 4px 8px);
}

.pod-hstep--done:not(:last-child)[b-cmwo2mll5d]::after { background: var(--colorBrandBackground, #0f6cbd); }

.pod-dot[b-cmwo2mll5d] {
    position: relative;
    z-index: 1;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    box-sizing: border-box;
    border: 2px solid var(--colorNeutralStroke1, #c7c7c7);
    border-radius: 50%;
    background: var(--colorNeutralBackground1);
}

.pod-hstep--done .pod-dot[b-cmwo2mll5d] {
    border-color: var(--colorBrandBackground, #0f6cbd);
    background: var(--colorBrandBackground, #0f6cbd);
}

/* The step up next: a ring with a filled centre. */
.pod-hstep--next .pod-dot[b-cmwo2mll5d] {
    border-color: var(--colorBrandBackground, #0f6cbd);
    box-shadow: 0 0 0 3px var(--colorBrandBackground2, #ebf3fc);
}

.pod-hstep--next .pod-dot[b-cmwo2mll5d]::after {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--colorBrandBackground, #0f6cbd);
}

.pod-hstep--cancelled .pod-dot[b-cmwo2mll5d] { border-color: #dc2626; background: #dc2626; }

.pod-hstep--skipped[b-cmwo2mll5d] { opacity: 0.45; }

.pod-step-text[b-cmwo2mll5d] { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }

/* ---- Order details: icon tiles in three columns ---- */
.pod-facts[b-cmwo2mll5d] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 0;
}

@media (max-width: 760px) {
    .pod-facts[b-cmwo2mll5d] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pod-fact[b-cmwo2mll5d] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 0 16px;
    border-left: 1px solid var(--colorNeutralStroke2);
}

.pod-fact:nth-child(3n + 1)[b-cmwo2mll5d] { padding-left: 0; border-left: 0; }

.pod-fact--wide[b-cmwo2mll5d] {
    grid-column: 1 / -1;
    padding-left: 0;
    border-left: 0;
}

.pod-fact-icon[b-cmwo2mll5d] {
    display: grid;
    flex: none;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 8px;
    background: var(--colorNeutralBackground3, #f3f4f6);
}

.pod-fact-text[b-cmwo2mll5d] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.pod-fact-value[b-cmwo2mll5d] {
    overflow: hidden;
    font-size: 15px;
    font-weight: 500;
    text-overflow: ellipsis;
    color: var(--colorNeutralForeground1);
}

/* ---- Summary ---- */
.pod-sum[b-cmwo2mll5d] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 16px;
    margin: 0;
    font-size: 13px;
}

.pod-sum dt[b-cmwo2mll5d] { color: var(--colorNeutralForeground3); font-weight: 400; }
.pod-sum dd[b-cmwo2mll5d] { margin: 0; text-align: right; color: var(--colorNeutralForeground1); }

.pod-sum--small[b-cmwo2mll5d] { padding-top: 10px; border-top: 1px solid var(--colorNeutralStroke2); font-size: 12px; }

.pod-grand[b-cmwo2mll5d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--colorBrandBackground2, #ebf3fc);
    font-weight: 700;
}

.pod-grand strong[b-cmwo2mll5d] {
    font-size: 22px;
    color: var(--colorBrandForeground1, #0f6cbd);
}

/* ---- Items table ---- */
.pod-table-wrap[b-cmwo2mll5d] { overflow-x: auto; border: 1px solid var(--colorNeutralStroke2); border-radius: 8px; }

.pod-table[b-cmwo2mll5d] { width: 100%; border-collapse: collapse; font-size: 13px; }

.pod-table th[b-cmwo2mll5d] {
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    color: var(--colorNeutralForeground2);
    background: var(--colorNeutralBackground2, #fafafa);
    border-bottom: 1px solid var(--colorNeutralStroke2);
}

.pod-table td[b-cmwo2mll5d] { padding: 8px 12px; border-bottom: 1px solid var(--colorNeutralStroke3, #f0f0f0); vertical-align: middle; }
.pod-table tbody tr:last-child td[b-cmwo2mll5d] { border-bottom: 0; }

.pod-table tfoot td[b-cmwo2mll5d] {
    padding: 10px 12px;
    font-weight: 600;
    background: var(--colorNeutralBackground2, #fafafa);
    border-top: 1px solid var(--colorNeutralStroke2);
}

.pod-foot-total[b-cmwo2mll5d] { font-size: 18px; font-weight: 700; color: var(--colorBrandForeground1, #0f6cbd); }

.pod-num[b-cmwo2mll5d] { text-align: right; white-space: nowrap; }

.pod-idx[b-cmwo2mll5d] { width: 40px; text-align: center; color: var(--colorNeutralForeground3); }

.pod-sku[b-cmwo2mll5d] { white-space: nowrap; color: var(--colorNeutralForeground2); }

.pod-item[b-cmwo2mll5d] { display: flex; align-items: center; gap: 12px; }

.pod-thumb[b-cmwo2mll5d] {
    display: grid;
    flex: none;
    width: 38px;
    height: 38px;
    place-items: center;
    overflow: hidden;
    border-radius: 8px;
    background: var(--colorNeutralBackground3, #f3f4f6);
}

.pod-thumb img[b-cmwo2mll5d] { width: 100%; height: 100%; object-fit: contain; }

.pod-item-text[b-cmwo2mll5d] { display: flex; flex-direction: column; line-height: 1.3; }

.pod-link[b-cmwo2mll5d] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    text-align: left;
    color: var(--colorBrandForegroundLink, #0f6cbd);
    cursor: pointer;
}

.pod-link:hover[b-cmwo2mll5d] { text-decoration: underline; }

/* Number columns: header and values both right-aligned. */
.pod-table th.pod-num[b-cmwo2mll5d] { text-align: right; }
.pod-table th.pod-idx[b-cmwo2mll5d] { text-align: center; }

.pod-wrap[b-cmwo2mll5d] { white-space: normal; }

.pod-due[b-cmwo2mll5d] { color: #b45309; font-weight: 600; }

/* ---- Received progress ---- */
.pod-recv[b-cmwo2mll5d] { display: flex; flex-direction: column; gap: 6px; }

.pod-recv-bar[b-cmwo2mll5d] {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--colorNeutralBackground3, #f0f0f0);
}

.pod-recv-bar span[b-cmwo2mll5d] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #16a34a;
}

.pod-notes[b-cmwo2mll5d] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--colorNeutralBackground2, #f7f8fa);
    font-size: 13px;
    white-space: pre-line;
}

.pod-pr-chip[b-cmwo2mll5d] {
    align-self: flex-start;
    padding: 0 6px;
    border: 0;
    border-radius: 4px;
    background: var(--colorBrandBackground2, #ebf3fc);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--colorBrandForeground1, #0f6cbd);
    cursor: pointer;
}

.pod-pr-chip:hover[b-cmwo2mll5d] { text-decoration: underline; }

/* ---- Deliveries ---- */
.pod-po-list[b-cmwo2mll5d] { display: flex; flex-direction: column; gap: 8px; }

.pod-po[b-cmwo2mll5d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
}

.pod-po-text[b-cmwo2mll5d] { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }

.pod-po-title[b-cmwo2mll5d] { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.pod-po-total[b-cmwo2mll5d] { font-size: 14px; font-weight: 700; white-space: nowrap; }

/* ---- Two-column layout: content left, totals card right (sticky) ---- */
.pod-layout[b-cmwo2mll5d] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 12px;
    align-items: start;
}

.pod-main[b-cmwo2mll5d] { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.pod-side[b-cmwo2mll5d] { min-width: 0; }

/* Stays in view while the details, items and linked documents scroll past. */
.pod-sticky[b-cmwo2mll5d] { position: sticky; top: 12px; }

@media (max-width: 1000px) {
    .pod-layout[b-cmwo2mll5d] { grid-template-columns: minmax(0, 1fr); }
    .pod-side[b-cmwo2mll5d] { order: -1; }
    .pod-sticky[b-cmwo2mll5d] { position: static; }
}
/* _content/PSMS.Web/Components/Pages/PurchaseOrder/PurchaseOrderForm.razor.rz.scp.css */
/* Full-width sales order form: Order Information, Items, then Remarks + Totals, each a full-width card. */

.pof-no[b-va6w05oesv] {
    padding: 2px 8px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 4px;
    background: var(--colorNeutralBackground3);
    font-size: 12px;
    font-weight: 600;
}

.pof-card[b-va6w05oesv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    background: var(--colorNeutralBackground1);
}

.pof-card-head[b-va6w05oesv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pof-head[b-va6w05oesv] { display: flex; align-items: center; gap: 10px; }

.pof-head-icon[b-va6w05oesv] {
    display: grid;
    flex: none;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    background: var(--colorBrandBackground2, #ebf3fc);
}

.pof-head-text[b-va6w05oesv] { display: flex; flex-direction: column; gap: 1px; }

.pof-title[b-va6w05oesv] { font-size: 15px; font-weight: 700; }

.pof-hint[b-va6w05oesv] { font-size: 12px; color: var(--colorNeutralForeground3); }

.pof-label[b-va6w05oesv] { font-size: 13px; color: var(--colorNeutralForeground1); }

/* Customer | Branch | Order date | Expected date */
.pof-fields[b-va6w05oesv] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px 16px;
    align-items: end;
}

@media (max-width: 1100px) {
    .pof-fields[b-va6w05oesv] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .pof-fields[b-va6w05oesv] { grid-template-columns: minmax(0, 1fr); }
}

.pof-fulfil[b-va6w05oesv] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 20px;
}

.pof-fulfil-pick[b-va6w05oesv] { display: flex; flex-direction: column; gap: 4px; }

.pof-fulfil-note[b-va6w05oesv] { padding-bottom: 9px; }

.pof-choice[b-va6w05oesv] { display: flex; flex-wrap: wrap; gap: 8px; }

.pof-choice-btn[b-va6w05oesv] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 6px;
    background: var(--colorNeutralBackground1);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--colorNeutralForeground2);
    cursor: pointer;
}

.pof-choice-btn--on[b-va6w05oesv] {
    border-color: var(--colorBrandStroke1, #0f6cbd);
    background: var(--colorBrandBackground2, #ebf3fc);
    color: var(--colorBrandForeground1, #0f6cbd);
}

.pof-ok[b-va6w05oesv] { color: #0e7c4a; }
.pof-bad[b-va6w05oesv] { color: #dc2626; }

.pof-empty[b-va6w05oesv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 16px;
    border: 1px dashed var(--colorNeutralStroke1);
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
    color: var(--colorNeutralForeground3);
}

/* Items table */
.pof-table-wrap[b-va6w05oesv] { overflow-x: auto; border: 1px solid var(--colorNeutralStroke2); border-radius: 8px; }

.pof-table[b-va6w05oesv] { width: 100%; border-collapse: collapse; font-size: 13px; }

.pof-table th[b-va6w05oesv] {
    padding: 9px 10px;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    color: var(--colorNeutralForeground3);
    background: var(--colorNeutralBackground2, #fafafa);
    border-bottom: 1px solid var(--colorNeutralStroke2);
}

.pof-table td[b-va6w05oesv] { padding: 7px 10px; border-bottom: 1px solid var(--colorNeutralStroke3, #f0f0f0); vertical-align: middle; }
.pof-table td:has(input)[b-va6w05oesv], .pof-table td:has(select)[b-va6w05oesv] { vertical-align: top; }

.pof-table tbody tr:last-child td[b-va6w05oesv] { border-bottom: 0; }
.pof-table tbody tr:hover td[b-va6w05oesv] { background: var(--colorNeutralBackground2, #fafafa); }

.pof-num[b-va6w05oesv] { text-align: right; white-space: nowrap; }

.pof-idx[b-va6w05oesv] { width: 32px; text-align: center; color: var(--colorNeutralForeground3); }

.pof-sku[b-va6w05oesv] { white-space: nowrap; color: var(--colorNeutralForeground2); }

.pof-item[b-va6w05oesv] { display: flex; align-items: center; gap: 10px; }

.pof-thumb[b-va6w05oesv] {
    display: inline-flex;
    flex: none;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--colorNeutralBackground3);
}

.pof-thumb img[b-va6w05oesv] { width: 100%; height: 100%; object-fit: contain; }

.pof-item-text[b-va6w05oesv] { display: flex; flex-direction: column; line-height: 1.3; }

.pof-cell[b-va6w05oesv] {
    width: 96px;
    box-sizing: border-box;
    padding: 5px 8px;
    border: 1px solid var(--colorNeutralStroke2, #d1d5db);
    border-radius: 4px;
    background: var(--colorNeutralBackground1);
    font: inherit;
    text-align: right;
}

.pof-cell:focus[b-va6w05oesv] { outline: none; border-color: var(--colorBrandStroke1, #0f6cbd); box-shadow: 0 0 0 2px var(--colorBrandBackground2, #ebf3fc); }

.pof-cell--wide[b-va6w05oesv] { width: 130px; }

.pof-warn[b-va6w05oesv] { display: block; font-size: 11px; color: #b45309; }

.pof-warn-line[b-va6w05oesv] {
    padding: 8px 10px;
    border: 1px solid #fde2a7;
    border-radius: 6px;
    background: #fff7e6;
    font-size: 12px;
    color: #92400e;
}

/* Remarks (left) + totals (right) */
.pof-bottom[b-va6w05oesv] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 16px 32px;
    align-items: start;
}

@media (max-width: 800px) {
    .pof-bottom[b-va6w05oesv] { grid-template-columns: minmax(0, 1fr); }
}

.pof-remarks[b-va6w05oesv] { display: flex; flex-direction: column; gap: 6px; }

.pof-totals[b-va6w05oesv] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 16px;
    margin: 0;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--colorNeutralBackground2, #f7f8fa);
    font-size: 13px;
    align-items: center;
}

.pof-totals dt[b-va6w05oesv] { color: var(--colorNeutralForeground3); font-weight: 400; }
.pof-totals dd[b-va6w05oesv] { margin: 0; text-align: right; }

.pof-total-label[b-va6w05oesv] { padding-top: 10px; border-top: 1px solid var(--colorNeutralStroke2); font-weight: 700 !important; color: var(--colorNeutralForeground1) !important; }
.pof-total[b-va6w05oesv] { padding-top: 10px; border-top: 1px solid var(--colorNeutralStroke2); font-size: 20px; font-weight: 700; }

/* Totals: discount type toggle, tax picker, withholding. */
.pof-totals-box[b-va6w05oesv] { display: flex; flex-direction: column; gap: 8px; }

.pof-totals-label[b-va6w05oesv] { display: inline-flex; align-items: center; gap: 8px; }

.pof-totals-span[b-va6w05oesv] { grid-column: 1 / -1; padding-top: 4px; }

.pof-inline[b-va6w05oesv] { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }

.pof-cell--sm[b-va6w05oesv] { width: 64px; }

.pof-seg[b-va6w05oesv] {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    border-radius: 4px;
}

.pof-seg button[b-va6w05oesv] {
    min-width: 26px;
    padding: 1px 6px;
    border: 0;
    background: var(--colorNeutralBackground1);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--colorNeutralForeground2);
    cursor: pointer;
}

.pof-seg button + button[b-va6w05oesv] { border-left: 1px solid var(--colorNeutralStroke1, #d1d1d1); }

.pof-seg .pof-seg--on[b-va6w05oesv] {
    background: var(--colorBrandBackground, #0f6cbd);
    color: #ffffff;
}

/* Number columns: header and values both right-aligned (the generic "th { text-align: left }" rule
   above would otherwise win over .pof-num on the header cells). */
.pof-table th.pof-num[b-va6w05oesv] { text-align: right; }
.pof-table th.pof-idx[b-va6w05oesv] { text-align: center; }

.pof-block[b-va6w05oesv] { display: block; }

/* Unit picker per line (base unit / fixed secondary unit). */
.pof-unit[b-va6w05oesv] {
    min-width: 110px;
    padding: 5px 8px;
    border: 1px solid var(--colorNeutralStroke2, #d1d5db);
    border-radius: 4px;
    background: var(--colorNeutralBackground1);
    font: inherit;
    font-size: 13px;
}

.pof-unit:focus[b-va6w05oesv] { outline: none; border-color: var(--colorBrandStroke1, #0f6cbd); box-shadow: 0 0 0 2px var(--colorBrandBackground2, #ebf3fc); }

.pof-unit-text[b-va6w05oesv] { color: var(--colorNeutralForeground2); }

.pof-supplier[b-va6w05oesv] { min-width: 160px; max-width: 220px; }

/* Payment terms | Supplier ref | Delivery address */
.pof-fields--second[b-va6w05oesv] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); }

@media (max-width: 1100px) {
    .pof-fields--second[b-va6w05oesv] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .pof-fields--second[b-va6w05oesv] { grid-template-columns: minmax(0, 1fr); }
}

.pof-supplier-card[b-va6w05oesv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--colorNeutralBackground2, #f7f8fa);
    font-size: 12px;
    color: var(--colorNeutralForeground2);
}

.pof-remarks[b-va6w05oesv] { display: flex; flex-direction: column; gap: 12px; }

.pof-pr-chip[b-va6w05oesv] {
    align-self: flex-start;
    padding: 0 6px;
    border-radius: 4px;
    background: var(--colorBrandBackground2, #ebf3fc);
    font-size: 11px;
    font-weight: 600;
    color: var(--colorBrandForeground1, #0f6cbd);
}

/* Quantity boxes (Quantity / 2nd Unit Qty columns): input with its short unit inside on the right. */
.pof-qbox[b-va6w05oesv] {
    display: inline-flex;
    align-items: center;
    width: 92px;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    border-radius: 6px;
    background: var(--colorNeutralBackground1);
    overflow: hidden;
}

.pof-qbox:focus-within[b-va6w05oesv] { border-color: var(--colorBrandStroke1, #0f6cbd); }

.pof-qbox input[b-va6w05oesv] {
    width: 100%;
    min-width: 0;
    padding: 4px 4px 4px 6px;
    border: 0;
    font: inherit;
    text-align: right;
    background: transparent;
}

.pof-qbox input:focus[b-va6w05oesv] { outline: none; }

.pof-qbox span[b-va6w05oesv] {
    flex: 0 0 auto;
    padding-right: 6px;
    font-size: 11px;
    color: var(--colorNeutralForeground3, #6b7280);
}

/* The input fills the whole box (unit tag drawn over it, click-through), so a click anywhere in the box
   lands in the field instead of selecting the unit text. */
.pof-qbox[b-va6w05oesv] { position: relative; padding: 0; cursor: text; }
.pof-qbox input[b-va6w05oesv] { width: 88px; height: 100%; padding: 0 30px 0 8px; box-sizing: border-box; }
.pof-qbox span[b-va6w05oesv] { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); pointer-events: none; user-select: none; }
/* _content/PSMS.Web/Components/Pages/PurchaseOrder/PurchaseOrders.razor.rz.scp.css */
.po-summary-grid[b-mempdec0fw] {
    width: 100%;
}

/* each stat card fills its FluentGrid cell and matches its row's height (same as Payments) */
.po-summary-grid[b-mempdec0fw]  .basic-value-card {
    display: block;
    width: 100%;
    height: 100%;
}

.po-link[b-mempdec0fw] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--colorBrandForegroundLink, #0f6cbd);
    cursor: pointer;
}

.po-link:hover[b-mempdec0fw] { text-decoration: underline; }

.po-cell-stack[b-mempdec0fw] { display: flex; flex-direction: column; line-height: 1.3; }

.po-hint[b-mempdec0fw] { font-size: 12px; color: var(--colorNeutralForeground3); }

.po-empty[b-mempdec0fw] {
    padding: 24px 16px;
    font-size: 13px;
    text-align: center;
    color: var(--colorNeutralForeground3);
}

.po-purpose[b-mempdec0fw] {
    display: -webkit-box;
    max-width: 360px;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.po-priority[b-mempdec0fw] {
    display: inline-flex;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
/* _content/PSMS.Web/Components/Pages/PurchaseOrder/PurchaseOrderStatusPill.razor.rz.scp.css */
.po-pill[b-dsnadhlm0p] {
    display: inline-flex;
    align-items: center;
    padding: 1px 10px;
    border: 1px solid;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.po-pill--draft[b-dsnadhlm0p] { border-color: #d9dce1; background: #f3f4f6; color: #4b5563; }
.po-pill--pendingapproval[b-dsnadhlm0p] { border-color: #fde2a7; background: #fff7e6; color: #b45309; }
.po-pill--approved[b-dsnadhlm0p] { border-color: #c7d2fe; background: #eef2ff; color: #4338ca; }
.po-pill--sent[b-dsnadhlm0p] { border-color: #bfd4fb; background: #eef4ff; color: #1d4ed8; }
.po-pill--partiallyreceived[b-dsnadhlm0p] { border-color: #a5e3e8; background: #ecfbfc; color: #0e7490; }
.po-pill--received[b-dsnadhlm0p] { border-color: #b7e4c7; background: #e9f7ef; color: #0e7c4a; }
.po-pill--closed[b-dsnadhlm0p] { border-color: #d9dce1; background: #f3f4f6; color: #374151; }
.po-pill--cancelled[b-dsnadhlm0p] { border-color: #f5c2c2; background: #fdecec; color: #b42318; }
.po-pill--supplierconfirmed[b-dsnadhlm0p] { border-color: #a7e3f0; background: #ecfeff; color: #0e7490; }
/* _content/PSMS.Web/Components/Pages/PurchaseOverview/PurchaseOverview.razor.rz.scp.css */
/* Plain wrapper so every rule (including ::deep) has a scoped ancestor. */
.pov-page[b-4jwcfhdme0] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* ---- KPI tiles: white cards, tinted icon tile per metric ---- */
.pov-stats[b-4jwcfhdme0] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 1300px) {
    .pov-stats[b-4jwcfhdme0] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .pov-stats[b-4jwcfhdme0] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
    .pov-stats[b-4jwcfhdme0] { grid-template-columns: minmax(0, 1fr); }
}

.pov-stat[b-4jwcfhdme0] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 10px;
    background: var(--colorNeutralBackground1, #fff);
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
    min-width: 0;
}

.pov-stat:hover[b-4jwcfhdme0] { border-color: var(--pov-ink); }

.pov-stat--blue[b-4jwcfhdme0] { --pov-tile: #dbe9fd; --pov-ink: #2563eb; }
.pov-stat--red[b-4jwcfhdme0] { --pov-tile: #fde2e2; --pov-ink: #dc2626; }
.pov-stat--indigo[b-4jwcfhdme0] { --pov-tile: #e0e7ff; --pov-ink: #4f46e5; }
.pov-stat--green[b-4jwcfhdme0] { --pov-tile: #d8f1e0; --pov-ink: #16a34a; }
.pov-stat--purple[b-4jwcfhdme0] { --pov-tile: #ede4fd; --pov-ink: #7c3aed; }

.pov-stat-icon[b-4jwcfhdme0] {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: var(--pov-tile);
}

.pov-stat-icon[b-4jwcfhdme0]  svg { fill: var(--pov-ink); }

.pov-stat-body[b-4jwcfhdme0] { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.3; }

.pov-stat-title[b-4jwcfhdme0] { font-size: 13px; color: var(--colorNeutralForeground2, #424242); }

.pov-stat-value[b-4jwcfhdme0] { font-size: 26px; font-weight: 700; color: var(--colorNeutralForeground1, #1f2937); }

.pov-stat-sub[b-4jwcfhdme0] { font-size: 12px; color: var(--colorNeutralForeground3, #6b7280); }

.pov-bad[b-4jwcfhdme0] { color: #dc2626 !important; font-weight: 600; }

/* ---- Rows of cards ---- */
.pov-row[b-4jwcfhdme0] { display: grid; gap: 14px; align-items: stretch; }

.pov-row--charts[b-4jwcfhdme0] { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
.pov-row--two[b-4jwcfhdme0] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pov-row--three[b-4jwcfhdme0] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1200px) {
    .pov-row--charts[b-4jwcfhdme0],
    .pov-row--three[b-4jwcfhdme0] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 800px) {
    .pov-row--charts[b-4jwcfhdme0],
    .pov-row--two[b-4jwcfhdme0],
    .pov-row--three[b-4jwcfhdme0] { grid-template-columns: minmax(0, 1fr); }
}

.pov-card[b-4jwcfhdme0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 16px;
    background: var(--colorNeutralBackground1, #fff);
    min-width: 0;
}

.pov-card-head[b-4jwcfhdme0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 32px;
}

.pov-card-title[b-4jwcfhdme0] { font-size: 15px; font-weight: 700; }

.pov-hint[b-4jwcfhdme0] { font-size: 12px; color: var(--colorNeutralForeground3, #6b7280); }

.pov-empty[b-4jwcfhdme0] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 12px;
    font-size: 13px;
    text-align: center;
    color: var(--colorNeutralForeground3, #6b7280);
}

.pov-link[b-4jwcfhdme0] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--colorBrandForegroundLink, #0f6cbd);
    cursor: pointer;
}

.pov-link:hover[b-4jwcfhdme0] { text-decoration: underline; }

/* ---- Donut ---- */
.pov-donut-row[b-4jwcfhdme0] { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; flex: 1 1 auto; }

.pov-donut[b-4jwcfhdme0] {
    display: grid;
    place-items: center;
    flex: 0 0 150px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

.pov-donut-hole[b-4jwcfhdme0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--colorNeutralBackground1, #fff);
}

.pov-donut-value[b-4jwcfhdme0] { font-size: 24px; font-weight: 700; line-height: 1; }

.pov-donut-label[b-4jwcfhdme0] { font-size: 12px; color: var(--colorNeutralForeground3, #6b7280); }

.pov-legend[b-4jwcfhdme0] { display: flex; flex: 1 1 160px; flex-direction: column; gap: 8px; min-width: 0; }

.pov-legend-row[b-4jwcfhdme0] { display: flex; align-items: center; gap: 8px; font-size: 13px; }

.pov-dot[b-4jwcfhdme0] { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; }

.pov-legend-name[b-4jwcfhdme0] { flex: 1 1 auto; min-width: 0; color: var(--colorNeutralForeground2, #424242); }

.pov-legend-value[b-4jwcfhdme0] { font-weight: 600; white-space: nowrap; }

/* ---- AP aging: vertical bars ---- */
.pov-aging[b-4jwcfhdme0] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    flex: 1 1 auto;
    min-height: 200px;
}

.pov-aging-col[b-4jwcfhdme0] { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }

.pov-aging-amount[b-4jwcfhdme0] { font-size: 12px; font-weight: 700; white-space: nowrap; }

.pov-aging-track[b-4jwcfhdme0] {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-end;
    width: 100%;
    max-width: 64px;
    border-bottom: 1px solid var(--colorNeutralStroke2, #e5e7eb);
}

.pov-aging-bar[b-4jwcfhdme0] { display: block; width: 100%; border-radius: 4px 4px 0 0; }

.pov-aging-label[b-4jwcfhdme0] { font-size: 12px; text-align: center; color: var(--colorNeutralForeground3, #6b7280); }

/* ---- Top suppliers: horizontal bars ---- */
.pov-bars[b-4jwcfhdme0] { display: flex; flex-direction: column; gap: 12px; }

.pov-bar-row[b-4jwcfhdme0] {
    display: grid;
    grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

.pov-bar-name[b-4jwcfhdme0] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pov-bar-track[b-4jwcfhdme0] { height: 18px; overflow: hidden; border-radius: 4px; background: var(--colorNeutralBackground3, #f0f2f5); }

.pov-bar-fill[b-4jwcfhdme0] { display: block; height: 100%; border-radius: 4px; background: #60a5fa; }

.pov-bar-value[b-4jwcfhdme0] { font-weight: 700; white-space: nowrap; }

/* ---- Alerts ---- */
.pov-alert-chips[b-4jwcfhdme0] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.pov-alert-chip[b-4jwcfhdme0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid;
    border-radius: 8px;
    font-size: 12px;
}

.pov-alert-chip strong[b-4jwcfhdme0] { font-size: 20px; }

.pov-alert-chip--urgent[b-4jwcfhdme0] { border-color: #fbd0d0; background: #fef4f4; }
.pov-alert-chip--urgent strong[b-4jwcfhdme0] { color: #dc2626; }
.pov-alert-chip--soon[b-4jwcfhdme0] { border-color: #fde5b4; background: #fffaf0; }
.pov-alert-chip--soon strong[b-4jwcfhdme0] { color: #d97706; }
.pov-alert-chip--pending[b-4jwcfhdme0] { border-color: #d6e4fb; background: #f3f7fe; }
.pov-alert-chip--pending strong[b-4jwcfhdme0] { color: #2563eb; }

.pov-alerts[b-4jwcfhdme0] { display: flex; flex-direction: column; border: 1px solid var(--colorNeutralStroke2, #e5e7eb); border-radius: 8px; }

.pov-alert[b-4jwcfhdme0] {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto 16px;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid var(--colorNeutralStroke3, #f0f0f0);
    background: none;
    font: inherit;
    font-size: 13px;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.pov-alert:last-child[b-4jwcfhdme0] { border-bottom: 0; }
.pov-alert:hover[b-4jwcfhdme0] { background: var(--colorNeutralBackground2, #fafafa); }

.pov-alert-count[b-4jwcfhdme0] { font-size: 15px; font-weight: 700; text-align: center; }
.pov-alert-count--urgent[b-4jwcfhdme0] { color: #dc2626; }
.pov-alert-count--soon[b-4jwcfhdme0] { color: #d97706; }
.pov-alert-count--pending[b-4jwcfhdme0] { color: #2563eb; }

.pov-alert-text[b-4jwcfhdme0] { min-width: 0; }

.pov-alert-tag[b-4jwcfhdme0] { padding: 1px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pov-alert-tag--urgent[b-4jwcfhdme0] { background: #fde2e2; color: #b42318; }
.pov-alert-tag--soon[b-4jwcfhdme0] { background: #fef3c7; color: #b45309; }
.pov-alert-tag--pending[b-4jwcfhdme0] { background: #e0ecfe; color: #1d4ed8; }

/* ---- Tables ---- */
.pov-table[b-4jwcfhdme0] { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }

.pov-table th[b-4jwcfhdme0] {
    padding: 6px 8px;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    color: var(--colorNeutralForeground3, #6b7280);
    border-bottom: 1px solid var(--colorNeutralStroke2, #e5e7eb);
}

.pov-table td[b-4jwcfhdme0] { padding: 8px; border-bottom: 1px solid var(--colorNeutralStroke3, #f0f0f0); vertical-align: middle; }

.pov-table tbody tr:last-child td[b-4jwcfhdme0] { border-bottom: 0; }

.pov-num[b-4jwcfhdme0] { text-align: right !important; white-space: nowrap; }

.pov-ellipsis[b-4jwcfhdme0] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pov-click[b-4jwcfhdme0] { cursor: pointer; }
.pov-click:hover td[b-4jwcfhdme0] { background: var(--colorNeutralBackground2, #fafafa); }

.pov-due[b-4jwcfhdme0] { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.pov-due--overdue[b-4jwcfhdme0] { background: #fde2e2; color: #b42318; }
.pov-due--soon[b-4jwcfhdme0] { background: #fef3c7; color: #b45309; }
.pov-due--upcoming[b-4jwcfhdme0] { background: #e0ecfe; color: #1d4ed8; }
/* _content/PSMS.Web/Components/Pages/PurchaseRequisition/CreatePurchaseOrdersDialog.razor.rz.scp.css */
.cpo-wrap[b-ks79ws9xwx] { display: flex; flex-direction: column; gap: 12px; width: 100%; }

.cpo-hint[b-ks79ws9xwx] { font-size: 12px; color: var(--colorNeutralForeground3); }

.cpo-error[b-ks79ws9xwx] { font-size: 12px; font-weight: 600; color: var(--colorStatusDangerForeground1, #b10e1c); }

.cpo-bulk[b-ks79ws9xwx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}

.cpo-bulk-pick[b-ks79ws9xwx] {
    flex-wrap: wrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--colorNeutralForeground2);
}

.cpo-table-wrap[b-ks79ws9xwx] {
    max-height: 340px;
    overflow: auto;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
}

.cpo-table[b-ks79ws9xwx] { width: 100%; border-collapse: collapse; font-size: 13px; }

.cpo-table th[b-ks79ws9xwx] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    color: var(--colorNeutralForeground2);
    background: var(--colorNeutralBackground2, #fafafa);
    border-bottom: 1px solid var(--colorNeutralStroke2);
}

.cpo-table td[b-ks79ws9xwx] {
    padding: 6px 10px;
    border-bottom: 1px solid var(--colorNeutralStroke3, #f0f0f0);
    vertical-align: middle;
}

.cpo-table tbody tr:last-child td[b-ks79ws9xwx] { border-bottom: 0; }

.cpo-off td[b-ks79ws9xwx] { opacity: 0.5; }
.cpo-off td.cpo-check[b-ks79ws9xwx] { opacity: 1; }

.cpo-check[b-ks79ws9xwx] { width: 32px; text-align: center; }
.cpo-check input[b-ks79ws9xwx] { width: 16px; height: 16px; cursor: pointer; }

.cpo-num[b-ks79ws9xwx] { text-align: right; white-space: nowrap; }
.cpo-table th.cpo-num[b-ks79ws9xwx] { text-align: right; }

.cpo-item[b-ks79ws9xwx] { display: flex; flex-direction: column; line-height: 1.3; }

.cpo-cell[b-ks79ws9xwx] {
    width: 90px;
    height: 28px;
    box-sizing: border-box;
    padding: 0 8px;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    border-radius: 4px;
    font: inherit;
    text-align: right;
    background: var(--colorNeutralBackground1);
}

.cpo-select[b-ks79ws9xwx] {
    width: 100%;
    min-width: 170px;
    height: 28px;
    padding: 0 6px;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    border-radius: 4px;
    font: inherit;
    font-size: 13px;
    background: var(--colorNeutralBackground1);
}

.cpo-select--missing[b-ks79ws9xwx] { border-color: #d13438; }

.cpo-preview[b-ks79ws9xwx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    background: #eaf3ff;
}

.cpo-preview-title[b-ks79ws9xwx] { font-size: 13px; font-weight: 700; }

.cpo-po[b-ks79ws9xwx] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--colorNeutralBackground1, #ffffff);
}

.cpo-po-text[b-ks79ws9xwx] { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; font-size: 13px; }

.cpo-po-total[b-ks79ws9xwx] { font-weight: 700; white-space: nowrap; }
/* _content/PSMS.Web/Components/Pages/PurchaseRequisition/Print/PurchaseRequisitionPrintDocument.razor.rz.scp.css */
/* Same look as SalesOrderPrintDocument (copied, prq- prefix so the two can diverge). */
.prq-doc[b-odmm1piesz] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 10.5px;
    line-height: 1.45;
    color: #242424;
}

/* ── title block (letterhead aside) ── */
.prq-title[b-odmm1piesz] {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .02em;
}

.prq-code[b-odmm1piesz] {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
}

.prq-date[b-odmm1piesz] {
    margin-top: 2px;
    color: #424242;
}

.prq-copy[b-odmm1piesz] {
    margin-top: 4px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    color: #616161;
}

.prq-muted[b-odmm1piesz] {
    color: #616161;
    font-size: 9.5px;
}

/* ── cards ── */
.prq-card[b-odmm1piesz] {
    padding: 10px 12px;
    border: 1px solid #d6d9de;
    border-radius: 4px;
}

.prq-card-flush[b-odmm1piesz] {
    padding: 0;
    overflow: hidden;
}

.prq-card-title[b-odmm1piesz] {
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e6e8eb;
    font-size: 11.5px;
    font-weight: 700;
}

.prq-info[b-odmm1piesz] {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 10px;
}

.prq-kv[b-odmm1piesz] {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 3px 10px;
}

.prq-kv > span:nth-child(odd)[b-odmm1piesz] {
    color: #616161;
}

.prq-pill[b-odmm1piesz] {
    display: inline-block;
    padding: 0 8px;
    border-radius: 999px;
    background: #e3f0fb;
    color: #0f6cbd;
    font-size: 9.5px;
    font-weight: 600;
}

/* ── tables ── */
.prq-table th[b-odmm1piesz],
.prq-table td[b-odmm1piesz],
.prq-prod-table th[b-odmm1piesz],
.prq-prod-table td[b-odmm1piesz] {
    padding: 6px 10px;
    border-bottom: 1px solid #e6e8eb;
    text-align: left;
    vertical-align: top;
}

.prq-table th[b-odmm1piesz] {
    background: #f1f2f4;
    font-weight: 700;
}

.prq-table tr:last-child td[b-odmm1piesz] {
    border-bottom: 0;
}

.prq-table .num[b-odmm1piesz] {
    text-align: right;
    white-space: nowrap;
}

.prq-prod-table th[b-odmm1piesz],
.prq-prod-table td[b-odmm1piesz] {
    padding: 4px 6px;
}

.prq-prod-table th[b-odmm1piesz] {
    color: #616161;
    font-weight: 600;
}

/* ── payment + terms ── */
.prq-pair[b-odmm1piesz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: start;
}

.prq-totals > div:not(.prq-card-title)[b-odmm1piesz] {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
}

.prq-totals .is-total[b-odmm1piesz] {
    margin-top: 4px;
    padding-top: 5px !important;
    border-top: 1px solid #3d3d3d;
    font-size: 12px;
    font-weight: 700;
}

.prq-totals .is-balance[b-odmm1piesz] {
    font-weight: 700;
}

.prq-terms p[b-odmm1piesz] {
    margin: 0;
    white-space: pre-wrap;
}

.prq-pill.is-good[b-odmm1piesz] {
    background: #e6f4ea;
    color: #107c10;
}

.prq-pay-table th[b-odmm1piesz],
.prq-pay-table td[b-odmm1piesz] {
    padding: 4px 6px;
    border-bottom: 1px solid #e6e8eb;
    text-align: left;
}

.prq-pay-table th[b-odmm1piesz] {
    color: #616161;
    font-weight: 600;
}

.prq-pay-table .num[b-odmm1piesz] {
    text-align: right;
    white-space: nowrap;
}

/* Hint lines under a number (unit conversion, "per kg") may wrap instead of running into the next column. */
.prq-table .num .prq-muted[b-odmm1piesz] {
    white-space: normal;
    line-height: 1.25;
}
/* _content/PSMS.Web/Components/Pages/PurchaseRequisition/PurchaseRequisitionDetail.razor.rz.scp.css */
/* Sales order page: full width. Order Status across the top, Order Details beside Summary, then Items.
   The page sits in a vertical FluentStack (which sizes children to their content), so the wrapper is
   stretched to 100% explicitly. Cards use the theme's 8px corners. */
.prd-page[b-36m708p8vq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

.prd-row[b-36m708p8vq] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    gap: 12px;
    align-items: stretch;
}

@media (max-width: 1000px) {
    .prd-row[b-36m708p8vq] { grid-template-columns: minmax(0, 1fr); }
}

.prd-card[b-36m708p8vq] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    background: var(--colorNeutralBackground1);
}

.prd-card-head[b-36m708p8vq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}

.prd-head[b-36m708p8vq] { display: flex; align-items: center; gap: 12px; }

.prd-head-icon[b-36m708p8vq] {
    display: grid;
    flex: none;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 8px;
    background: var(--colorBrandBackground2, #ebf3fc);
}

.prd-head-text[b-36m708p8vq] { display: flex; flex-direction: column; gap: 1px; }

.prd-title[b-36m708p8vq] { font-size: 15px; font-weight: 700; color: var(--colorNeutralForeground1); }

.prd-hint[b-36m708p8vq] { font-size: 12px; color: var(--colorNeutralForeground3); }

.prd-note[b-36m708p8vq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--colorNeutralForeground3);
}

/* ---- Order status: centred steps joined by a line ---- */
.prd-steps[b-36m708p8vq] {
    display: flex;
    margin: 0;
    padding: 4px 0 0;
    overflow-x: auto;
    list-style: none;
}

.prd-hstep[b-36m708p8vq] {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 140px;
    text-align: center;
}

/* Connector from this step's circle to the next one's: dashed until the step is done. */
.prd-hstep:not(:last-child)[b-36m708p8vq]::after {
    content: "";
    position: absolute;
    top: 14px;
    left: calc(50% + 18px);
    right: calc(-50% + 18px);
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--colorNeutralStroke1, #c7c7c7) 0 4px, transparent 4px 8px);
}

.prd-hstep--done:not(:last-child)[b-36m708p8vq]::after { background: var(--colorBrandBackground, #0f6cbd); }

.prd-dot[b-36m708p8vq] {
    position: relative;
    z-index: 1;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    box-sizing: border-box;
    border: 2px solid var(--colorNeutralStroke1, #c7c7c7);
    border-radius: 50%;
    background: var(--colorNeutralBackground1);
}

.prd-hstep--done .prd-dot[b-36m708p8vq] {
    border-color: var(--colorBrandBackground, #0f6cbd);
    background: var(--colorBrandBackground, #0f6cbd);
}

/* The step up next: a ring with a filled centre. */
.prd-hstep--next .prd-dot[b-36m708p8vq] {
    border-color: var(--colorBrandBackground, #0f6cbd);
    box-shadow: 0 0 0 3px var(--colorBrandBackground2, #ebf3fc);
}

.prd-hstep--next .prd-dot[b-36m708p8vq]::after {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--colorBrandBackground, #0f6cbd);
}

.prd-hstep--cancelled .prd-dot[b-36m708p8vq] { border-color: #dc2626; background: #dc2626; }

.prd-hstep--skipped[b-36m708p8vq] { opacity: 0.45; }

.prd-step-text[b-36m708p8vq] { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }

/* ---- Order details: icon tiles in three columns ---- */
.prd-facts[b-36m708p8vq] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 0;
}

@media (max-width: 760px) {
    .prd-facts[b-36m708p8vq] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.prd-fact[b-36m708p8vq] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 0 16px;
    border-left: 1px solid var(--colorNeutralStroke2);
}

.prd-fact:nth-child(3n + 1)[b-36m708p8vq] { padding-left: 0; border-left: 0; }

.prd-fact--wide[b-36m708p8vq] {
    grid-column: 1 / -1;
    padding-left: 0;
    border-left: 0;
}

.prd-fact-icon[b-36m708p8vq] {
    display: grid;
    flex: none;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 8px;
    background: var(--colorNeutralBackground3, #f3f4f6);
}

.prd-fact-text[b-36m708p8vq] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.prd-fact-value[b-36m708p8vq] {
    overflow: hidden;
    font-size: 15px;
    font-weight: 500;
    text-overflow: ellipsis;
    color: var(--colorNeutralForeground1);
}

/* ---- Summary ---- */
.prd-sum[b-36m708p8vq] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 16px;
    margin: 0;
    font-size: 13px;
}

.prd-sum dt[b-36m708p8vq] { color: var(--colorNeutralForeground3); font-weight: 400; }
.prd-sum dd[b-36m708p8vq] { margin: 0; text-align: right; color: var(--colorNeutralForeground1); }

.prd-sum--small[b-36m708p8vq] { padding-top: 10px; border-top: 1px solid var(--colorNeutralStroke2); font-size: 12px; }

.prd-grand[b-36m708p8vq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--colorBrandBackground2, #ebf3fc);
    font-weight: 700;
}

.prd-grand strong[b-36m708p8vq] {
    font-size: 22px;
    color: var(--colorBrandForeground1, #0f6cbd);
}

/* ---- Items table ---- */
.prd-table-wrap[b-36m708p8vq] { overflow-x: auto; border: 1px solid var(--colorNeutralStroke2); border-radius: 8px; }

.prd-table[b-36m708p8vq] { width: 100%; border-collapse: collapse; font-size: 13px; }

.prd-table th[b-36m708p8vq] {
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    color: var(--colorNeutralForeground2);
    background: var(--colorNeutralBackground2, #fafafa);
    border-bottom: 1px solid var(--colorNeutralStroke2);
}

.prd-table td[b-36m708p8vq] { padding: 8px 12px; border-bottom: 1px solid var(--colorNeutralStroke3, #f0f0f0); vertical-align: middle; }
.prd-table tbody tr:last-child td[b-36m708p8vq] { border-bottom: 0; }

.prd-table tfoot td[b-36m708p8vq] {
    padding: 10px 12px;
    font-weight: 600;
    background: var(--colorNeutralBackground2, #fafafa);
    border-top: 1px solid var(--colorNeutralStroke2);
}

.prd-foot-total[b-36m708p8vq] { font-size: 18px; font-weight: 700; color: var(--colorBrandForeground1, #0f6cbd); }

.prd-num[b-36m708p8vq] { text-align: right; white-space: nowrap; }

.prd-idx[b-36m708p8vq] { width: 40px; text-align: center; color: var(--colorNeutralForeground3); }

.prd-sku[b-36m708p8vq] { white-space: nowrap; color: var(--colorNeutralForeground2); }

.prd-item[b-36m708p8vq] { display: flex; align-items: center; gap: 12px; }

.prd-thumb[b-36m708p8vq] {
    display: grid;
    flex: none;
    width: 38px;
    height: 38px;
    place-items: center;
    overflow: hidden;
    border-radius: 8px;
    background: var(--colorNeutralBackground3, #f3f4f6);
}

.prd-thumb img[b-36m708p8vq] { width: 100%; height: 100%; object-fit: contain; }

.prd-item-text[b-36m708p8vq] { display: flex; flex-direction: column; line-height: 1.3; }

.prd-link[b-36m708p8vq] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    text-align: left;
    color: var(--colorBrandForegroundLink, #0f6cbd);
    cursor: pointer;
}

.prd-link:hover[b-36m708p8vq] { text-decoration: underline; }

/* Number columns: header and values both right-aligned. */
.prd-table th.prd-num[b-36m708p8vq] { text-align: right; }
.prd-table th.prd-idx[b-36m708p8vq] { text-align: center; }

/* ---- Purchase order preview ---- */
.prd-po-list[b-36m708p8vq] { display: flex; flex-direction: column; gap: 8px; }

.prd-po[b-36m708p8vq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
}

.prd-po-text[b-36m708p8vq] { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }

.prd-po-total[b-36m708p8vq] { font-size: 14px; font-weight: 700; white-space: nowrap; }

.prd-wrap[b-36m708p8vq] { white-space: normal; }

.prd-bad[b-36m708p8vq] { color: #dc2626; font-weight: 600; }

.prd-po-title[b-36m708p8vq] { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.prd-ok[b-36m708p8vq] { color: #0e7c4a; font-weight: 600; }

.prd-due[b-36m708p8vq] { color: #b45309; font-weight: 600; }

/* ---- Two-column layout: content left, totals card right (sticky) ---- */
.prd-layout[b-36m708p8vq] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 12px;
    align-items: start;
}

.prd-main[b-36m708p8vq] { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.prd-side[b-36m708p8vq] { min-width: 0; }

/* Stays in view while the details, items and linked documents scroll past. */
.prd-sticky[b-36m708p8vq] { position: sticky; top: 12px; }

@media (max-width: 1000px) {
    .prd-layout[b-36m708p8vq] { grid-template-columns: minmax(0, 1fr); }
    .prd-side[b-36m708p8vq] { order: -1; }
    .prd-sticky[b-36m708p8vq] { position: static; }
}
/* _content/PSMS.Web/Components/Pages/PurchaseRequisition/PurchaseRequisitionForm.razor.rz.scp.css */
/* Full-width sales order form: Order Information, Items, then Remarks + Totals, each a full-width card. */

.prf-no[b-ry58iwu810] {
    padding: 2px 8px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 4px;
    background: var(--colorNeutralBackground3);
    font-size: 12px;
    font-weight: 600;
}

.prf-card[b-ry58iwu810] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    background: var(--colorNeutralBackground1);
}

.prf-card-head[b-ry58iwu810] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.prf-head[b-ry58iwu810] { display: flex; align-items: center; gap: 10px; }

.prf-head-icon[b-ry58iwu810] {
    display: grid;
    flex: none;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    background: var(--colorBrandBackground2, #ebf3fc);
}

.prf-head-text[b-ry58iwu810] { display: flex; flex-direction: column; gap: 1px; }

.prf-title[b-ry58iwu810] { font-size: 15px; font-weight: 700; }

.prf-hint[b-ry58iwu810] { font-size: 12px; color: var(--colorNeutralForeground3); }

.prf-label[b-ry58iwu810] { font-size: 13px; color: var(--colorNeutralForeground1); }

/* Customer | Branch | Order date | Expected date */
.prf-fields[b-ry58iwu810] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px 16px;
    align-items: end;
}

@media (max-width: 1100px) {
    .prf-fields[b-ry58iwu810] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .prf-fields[b-ry58iwu810] { grid-template-columns: minmax(0, 1fr); }
}

.prf-fulfil[b-ry58iwu810] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 20px;
}

.prf-fulfil-pick[b-ry58iwu810] { display: flex; flex-direction: column; gap: 4px; }

.prf-fulfil-note[b-ry58iwu810] { padding-bottom: 9px; }

.prf-choice[b-ry58iwu810] { display: flex; flex-wrap: wrap; gap: 8px; }

.prf-choice-btn[b-ry58iwu810] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 6px;
    background: var(--colorNeutralBackground1);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--colorNeutralForeground2);
    cursor: pointer;
}

.prf-choice-btn--on[b-ry58iwu810] {
    border-color: var(--colorBrandStroke1, #0f6cbd);
    background: var(--colorBrandBackground2, #ebf3fc);
    color: var(--colorBrandForeground1, #0f6cbd);
}

.prf-ok[b-ry58iwu810] { color: #0e7c4a; }
.prf-bad[b-ry58iwu810] { color: #dc2626; }

.prf-empty[b-ry58iwu810] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 16px;
    border: 1px dashed var(--colorNeutralStroke1);
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
    color: var(--colorNeutralForeground3);
}

/* Items table */
.prf-table-wrap[b-ry58iwu810] { overflow-x: auto; border: 1px solid var(--colorNeutralStroke2); border-radius: 8px; }

.prf-table[b-ry58iwu810] { width: 100%; border-collapse: collapse; font-size: 13px; }

.prf-table th[b-ry58iwu810] {
    padding: 9px 10px;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    color: var(--colorNeutralForeground3);
    background: var(--colorNeutralBackground2, #fafafa);
    border-bottom: 1px solid var(--colorNeutralStroke2);
}

.prf-table td[b-ry58iwu810] { padding: 7px 10px; border-bottom: 1px solid var(--colorNeutralStroke3, #f0f0f0); vertical-align: middle; }
.prf-table td:has(input)[b-ry58iwu810], .prf-table td:has(select)[b-ry58iwu810] { vertical-align: top; }

.prf-table tbody tr:last-child td[b-ry58iwu810] { border-bottom: 0; }
.prf-table tbody tr:hover td[b-ry58iwu810] { background: var(--colorNeutralBackground2, #fafafa); }

.prf-num[b-ry58iwu810] { text-align: right; white-space: nowrap; }

.prf-idx[b-ry58iwu810] { width: 32px; text-align: center; color: var(--colorNeutralForeground3); }

.prf-sku[b-ry58iwu810] { white-space: nowrap; color: var(--colorNeutralForeground2); }

.prf-item[b-ry58iwu810] { display: flex; align-items: center; gap: 10px; }

.prf-thumb[b-ry58iwu810] {
    display: inline-flex;
    flex: none;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--colorNeutralBackground3);
}

.prf-thumb img[b-ry58iwu810] { width: 100%; height: 100%; object-fit: contain; }

.prf-item-text[b-ry58iwu810] { display: flex; flex-direction: column; line-height: 1.3; }

.prf-cell[b-ry58iwu810] {
    width: 96px;
    box-sizing: border-box;
    padding: 5px 8px;
    border: 1px solid var(--colorNeutralStroke2, #d1d5db);
    border-radius: 4px;
    background: var(--colorNeutralBackground1);
    font: inherit;
    text-align: right;
}

.prf-cell:focus[b-ry58iwu810] { outline: none; border-color: var(--colorBrandStroke1, #0f6cbd); box-shadow: 0 0 0 2px var(--colorBrandBackground2, #ebf3fc); }

.prf-cell--wide[b-ry58iwu810] { width: 130px; }

.prf-warn[b-ry58iwu810] { display: block; font-size: 11px; color: #b45309; }

.prf-warn-line[b-ry58iwu810] {
    padding: 8px 10px;
    border: 1px solid #fde2a7;
    border-radius: 6px;
    background: #fff7e6;
    font-size: 12px;
    color: #92400e;
}

/* Remarks (left) + totals (right) */
.prf-bottom[b-ry58iwu810] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 16px 32px;
    align-items: start;
}

@media (max-width: 800px) {
    .prf-bottom[b-ry58iwu810] { grid-template-columns: minmax(0, 1fr); }
}

.prf-remarks[b-ry58iwu810] { display: flex; flex-direction: column; gap: 6px; }

.prf-totals[b-ry58iwu810] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 16px;
    margin: 0;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--colorNeutralBackground2, #f7f8fa);
    font-size: 13px;
    align-items: center;
}

.prf-totals dt[b-ry58iwu810] { color: var(--colorNeutralForeground3); font-weight: 400; }
.prf-totals dd[b-ry58iwu810] { margin: 0; text-align: right; }

.prf-total-label[b-ry58iwu810] { padding-top: 10px; border-top: 1px solid var(--colorNeutralStroke2); font-weight: 700 !important; color: var(--colorNeutralForeground1) !important; }
.prf-total[b-ry58iwu810] { padding-top: 10px; border-top: 1px solid var(--colorNeutralStroke2); font-size: 20px; font-weight: 700; }

/* Totals: discount type toggle, tax picker, withholding. */
.prf-totals-box[b-ry58iwu810] { display: flex; flex-direction: column; gap: 8px; }

.prf-totals-label[b-ry58iwu810] { display: inline-flex; align-items: center; gap: 8px; }

.prf-totals-span[b-ry58iwu810] { grid-column: 1 / -1; padding-top: 4px; }

.prf-inline[b-ry58iwu810] { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }

.prf-cell--sm[b-ry58iwu810] { width: 64px; }

.prf-seg[b-ry58iwu810] {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    border-radius: 4px;
}

.prf-seg button[b-ry58iwu810] {
    min-width: 26px;
    padding: 1px 6px;
    border: 0;
    background: var(--colorNeutralBackground1);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--colorNeutralForeground2);
    cursor: pointer;
}

.prf-seg button + button[b-ry58iwu810] { border-left: 1px solid var(--colorNeutralStroke1, #d1d1d1); }

.prf-seg .prf-seg--on[b-ry58iwu810] {
    background: var(--colorBrandBackground, #0f6cbd);
    color: #ffffff;
}

/* Number columns: header and values both right-aligned (the generic "th { text-align: left }" rule
   above would otherwise win over .prf-num on the header cells). */
.prf-table th.prf-num[b-ry58iwu810] { text-align: right; }
.prf-table th.prf-idx[b-ry58iwu810] { text-align: center; }

.prf-block[b-ry58iwu810] { display: block; }

/* Unit picker per line (base unit / fixed secondary unit). */
.prf-unit[b-ry58iwu810] {
    min-width: 110px;
    padding: 5px 8px;
    border: 1px solid var(--colorNeutralStroke2, #d1d5db);
    border-radius: 4px;
    background: var(--colorNeutralBackground1);
    font: inherit;
    font-size: 13px;
}

.prf-unit:focus[b-ry58iwu810] { outline: none; border-color: var(--colorBrandStroke1, #0f6cbd); box-shadow: 0 0 0 2px var(--colorBrandBackground2, #ebf3fc); }

.prf-unit-text[b-ry58iwu810] { color: var(--colorNeutralForeground2); }

.prf-supplier[b-ry58iwu810] { min-width: 160px; max-width: 220px; }

/* Small inline input for the estimated kg under a fabric line's roll count. */
.prf-cell-sm[b-ry58iwu810] {
    width: 64px;
    padding: 1px 4px;
    font-size: 11px;
}

/* Quantity boxes (base unit and 2nd unit columns): input with its short unit inside on the right. */
.prf-qbox[b-ry58iwu810] {
    display: inline-flex;
    align-items: center;
    width: 92px;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    border-radius: 6px;
    background: var(--colorNeutralBackground1);
    overflow: hidden;
}

.prf-qbox:focus-within[b-ry58iwu810] { border-color: var(--colorBrandStroke1, #0f6cbd); }

.prf-qbox input[b-ry58iwu810] {
    width: 100%;
    min-width: 0;
    padding: 4px 4px 4px 6px;
    border: 0;
    font: inherit;
    text-align: right;
    background: transparent;
}

.prf-qbox input:focus[b-ry58iwu810] { outline: none; }

.prf-qbox span[b-ry58iwu810] {
    flex: 0 0 auto;
    padding-right: 6px;
    font-size: 11px;
    color: var(--colorNeutralForeground3, #6b7280);
}

/* The input fills the whole box (unit tag drawn over it, click-through), so a click anywhere in the box
   lands in the field instead of selecting the unit text. */
.prf-qbox[b-ry58iwu810] { position: relative; padding: 0; cursor: text; }
.prf-qbox input[b-ry58iwu810] { width: 88px; height: 100%; padding: 0 30px 0 8px; box-sizing: border-box; }
.prf-qbox span[b-ry58iwu810] { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); pointer-events: none; user-select: none; }
/* _content/PSMS.Web/Components/Pages/PurchaseRequisition/PurchaseRequisitions.razor.rz.scp.css */
.pr-summary-grid[b-3zxgzmustb] {
    width: 100%;
}

/* each stat card fills its FluentGrid cell and matches its row's height (same as Payments) */
.pr-summary-grid[b-3zxgzmustb]  .basic-value-card {
    display: block;
    width: 100%;
    height: 100%;
}

.pr-link[b-3zxgzmustb] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--colorBrandForegroundLink, #0f6cbd);
    cursor: pointer;
}

.pr-link:hover[b-3zxgzmustb] { text-decoration: underline; }

.pr-cell-stack[b-3zxgzmustb] { display: flex; flex-direction: column; line-height: 1.3; }

.pr-hint[b-3zxgzmustb] { font-size: 12px; color: var(--colorNeutralForeground3); }

.pr-empty[b-3zxgzmustb] {
    padding: 24px 16px;
    font-size: 13px;
    text-align: center;
    color: var(--colorNeutralForeground3);
}

.pr-purpose[b-3zxgzmustb] {
    display: -webkit-box;
    max-width: none;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.pr-priority[b-3zxgzmustb] {
    display: inline-flex;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* Fixed widths for the short columns; Purpose takes everything left so its text isn't cut early. */
[b-3zxgzmustb] .pr-grid th:nth-child(1), [b-3zxgzmustb] .pr-grid td:nth-child(1) { width: 110px; }
[b-3zxgzmustb] .pr-grid th:nth-child(2), [b-3zxgzmustb] .pr-grid td:nth-child(2),
[b-3zxgzmustb] .pr-grid th:nth-child(3), [b-3zxgzmustb] .pr-grid td:nth-child(3) { width: 110px; }
[b-3zxgzmustb] .pr-grid th:nth-child(4), [b-3zxgzmustb] .pr-grid td:nth-child(4) { width: auto; min-width: 280px; }
[b-3zxgzmustb] .pr-grid th:nth-child(5), [b-3zxgzmustb] .pr-grid td:nth-child(5) { width: 90px; }
[b-3zxgzmustb] .pr-grid th:nth-child(6), [b-3zxgzmustb] .pr-grid td:nth-child(6) { width: 60px; }
[b-3zxgzmustb] .pr-grid th:nth-child(7), [b-3zxgzmustb] .pr-grid td:nth-child(7) { width: 130px; }
[b-3zxgzmustb] .pr-grid th:nth-child(8), [b-3zxgzmustb] .pr-grid td:nth-child(8) { width: 150px; }
[b-3zxgzmustb] .pr-grid th:nth-child(9), [b-3zxgzmustb] .pr-grid td:nth-child(9) { width: 120px; }
/* _content/PSMS.Web/Components/Pages/PurchaseRequisition/PurchaseRequisitionStatusPill.razor.rz.scp.css */
.pr-pill[b-8ht1qjp16a] {
    display: inline-flex;
    align-items: center;
    padding: 1px 10px;
    border: 1px solid;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.pr-pill--draft[b-8ht1qjp16a] { border-color: #d9dce1; background: #f3f4f6; color: #4b5563; }
.pr-pill--submitted[b-8ht1qjp16a] { border-color: #fde2a7; background: #fff7e6; color: #b45309; }
.pr-pill--approved[b-8ht1qjp16a] { border-color: #b7e4c7; background: #e9f7ef; color: #0e7c4a; }
.pr-pill--rejected[b-8ht1qjp16a] { border-color: #f5c2c2; background: #fdecec; color: #b42318; }
.pr-pill--cancelled[b-8ht1qjp16a] { border-color: #d9dce1; background: #f3f4f6; color: #6b7280; text-decoration: line-through; }
.pr-pill--partiallyordered[b-8ht1qjp16a] { border-color: #a5e3e8; background: #ecfbfc; color: #0e7490; }
.pr-pill--ordered[b-8ht1qjp16a] { border-color: #bfd4fb; background: #eef4ff; color: #1d4ed8; }
/* _content/PSMS.Web/Components/Pages/PurchaseStock/StockReceiptDetail.razor.rz.scp.css */
/* Sales order page: full width. Order Status across the top, Order Details beside Summary, then Items.
   The page sits in a vertical FluentStack (which sizes children to their content), so the wrapper is
   stretched to 100% explicitly. Cards use the theme's 8px corners. */
.srd-page[b-5zkd9467gf] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

.srd-row[b-5zkd9467gf] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    gap: 12px;
    align-items: stretch;
}

@media (max-width: 1000px) {
    .srd-row[b-5zkd9467gf] { grid-template-columns: minmax(0, 1fr); }
}

.srd-card[b-5zkd9467gf] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    background: var(--colorNeutralBackground1);
}

.srd-card-head[b-5zkd9467gf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}

.srd-head[b-5zkd9467gf] { display: flex; align-items: center; gap: 12px; }

.srd-head-icon[b-5zkd9467gf] {
    display: grid;
    flex: none;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 8px;
    background: var(--colorBrandBackground2, #ebf3fc);
}

.srd-head-text[b-5zkd9467gf] { display: flex; flex-direction: column; gap: 1px; }

.srd-title[b-5zkd9467gf] { font-size: 15px; font-weight: 700; color: var(--colorNeutralForeground1); }

.srd-hint[b-5zkd9467gf] { font-size: 12px; color: var(--colorNeutralForeground3); }

.srd-note[b-5zkd9467gf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--colorNeutralForeground3);
}

/* ---- Order status: centred steps joined by a line ---- */
.srd-steps[b-5zkd9467gf] {
    display: flex;
    margin: 0;
    padding: 4px 0 0;
    overflow-x: auto;
    list-style: none;
}

.srd-hstep[b-5zkd9467gf] {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 140px;
    text-align: center;
}

/* Connector from this step's circle to the next one's: dashed until the step is done. */
.srd-hstep:not(:last-child)[b-5zkd9467gf]::after {
    content: "";
    position: absolute;
    top: 14px;
    left: calc(50% + 18px);
    right: calc(-50% + 18px);
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--colorNeutralStroke1, #c7c7c7) 0 4px, transparent 4px 8px);
}

.srd-hstep--done:not(:last-child)[b-5zkd9467gf]::after { background: var(--colorBrandBackground, #0f6cbd); }

.srd-dot[b-5zkd9467gf] {
    position: relative;
    z-index: 1;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    box-sizing: border-box;
    border: 2px solid var(--colorNeutralStroke1, #c7c7c7);
    border-radius: 50%;
    background: var(--colorNeutralBackground1);
}

.srd-hstep--done .srd-dot[b-5zkd9467gf] {
    border-color: var(--colorBrandBackground, #0f6cbd);
    background: var(--colorBrandBackground, #0f6cbd);
}

/* The step up next: a ring with a filled centre. */
.srd-hstep--next .srd-dot[b-5zkd9467gf] {
    border-color: var(--colorBrandBackground, #0f6cbd);
    box-shadow: 0 0 0 3px var(--colorBrandBackground2, #ebf3fc);
}

.srd-hstep--next .srd-dot[b-5zkd9467gf]::after {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--colorBrandBackground, #0f6cbd);
}

.srd-hstep--cancelled .srd-dot[b-5zkd9467gf] { border-color: #dc2626; background: #dc2626; }

.srd-hstep--skipped[b-5zkd9467gf] { opacity: 0.45; }

.srd-step-text[b-5zkd9467gf] { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }

/* ---- Order details: icon tiles in three columns ---- */
.srd-facts[b-5zkd9467gf] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 0;
}

@media (max-width: 760px) {
    .srd-facts[b-5zkd9467gf] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.srd-fact[b-5zkd9467gf] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 0 16px;
    border-left: 1px solid var(--colorNeutralStroke2);
}

.srd-fact:nth-child(3n + 1)[b-5zkd9467gf] { padding-left: 0; border-left: 0; }

.srd-fact--wide[b-5zkd9467gf] {
    grid-column: 1 / -1;
    padding-left: 0;
    border-left: 0;
}

.srd-fact-icon[b-5zkd9467gf] {
    display: grid;
    flex: none;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 8px;
    background: var(--colorNeutralBackground3, #f3f4f6);
}

.srd-fact-text[b-5zkd9467gf] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.srd-fact-value[b-5zkd9467gf] {
    overflow: hidden;
    font-size: 15px;
    font-weight: 500;
    text-overflow: ellipsis;
    color: var(--colorNeutralForeground1);
}

/* ---- Summary ---- */
.srd-sum[b-5zkd9467gf] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 16px;
    margin: 0;
    font-size: 13px;
}

.srd-sum dt[b-5zkd9467gf] { color: var(--colorNeutralForeground3); font-weight: 400; }
.srd-sum dd[b-5zkd9467gf] { margin: 0; text-align: right; color: var(--colorNeutralForeground1); }

.srd-sum--small[b-5zkd9467gf] { padding-top: 10px; border-top: 1px solid var(--colorNeutralStroke2); font-size: 12px; }

.srd-grand[b-5zkd9467gf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--colorBrandBackground2, #ebf3fc);
    font-weight: 700;
}

.srd-grand strong[b-5zkd9467gf] {
    font-size: 22px;
    color: var(--colorBrandForeground1, #0f6cbd);
}

/* ---- Items table ---- */
.srd-table-wrap[b-5zkd9467gf] { overflow-x: auto; border: 1px solid var(--colorNeutralStroke2); border-radius: 8px; }

.srd-table[b-5zkd9467gf] { width: 100%; border-collapse: collapse; font-size: 13px; }

.srd-table th[b-5zkd9467gf] {
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    color: var(--colorNeutralForeground2);
    background: var(--colorNeutralBackground2, #fafafa);
    border-bottom: 1px solid var(--colorNeutralStroke2);
}

.srd-table td[b-5zkd9467gf] { padding: 8px 12px; border-bottom: 1px solid var(--colorNeutralStroke3, #f0f0f0); vertical-align: middle; }
.srd-table tbody tr:last-child td[b-5zkd9467gf] { border-bottom: 0; }

.srd-table tfoot td[b-5zkd9467gf] {
    padding: 10px 12px;
    font-weight: 600;
    background: var(--colorNeutralBackground2, #fafafa);
    border-top: 1px solid var(--colorNeutralStroke2);
}

.srd-foot-total[b-5zkd9467gf] { font-size: 18px; font-weight: 700; color: var(--colorBrandForeground1, #0f6cbd); }

.srd-num[b-5zkd9467gf] { text-align: right; white-space: nowrap; }

.srd-idx[b-5zkd9467gf] { width: 40px; text-align: center; color: var(--colorNeutralForeground3); }

.srd-sku[b-5zkd9467gf] { white-space: nowrap; color: var(--colorNeutralForeground2); }

.srd-item[b-5zkd9467gf] { display: flex; align-items: center; gap: 12px; }

.srd-thumb[b-5zkd9467gf] {
    display: grid;
    flex: none;
    width: 38px;
    height: 38px;
    place-items: center;
    overflow: hidden;
    border-radius: 8px;
    background: var(--colorNeutralBackground3, #f3f4f6);
}

.srd-thumb img[b-5zkd9467gf] { width: 100%; height: 100%; object-fit: contain; }

.srd-item-text[b-5zkd9467gf] { display: flex; flex-direction: column; line-height: 1.3; }

.srd-link[b-5zkd9467gf] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    text-align: left;
    color: var(--colorBrandForegroundLink, #0f6cbd);
    cursor: pointer;
}

.srd-link:hover[b-5zkd9467gf] { text-decoration: underline; }

/* Number columns: header and values both right-aligned. */
.srd-table th.srd-num[b-5zkd9467gf] { text-align: right; }
.srd-table th.srd-idx[b-5zkd9467gf] { text-align: center; }

.srd-wrap[b-5zkd9467gf] { white-space: normal; }

.srd-due[b-5zkd9467gf] { color: #b45309; font-weight: 600; }

/* ---- Received progress ---- */
.srd-recv[b-5zkd9467gf] { display: flex; flex-direction: column; gap: 6px; }

.srd-recv-bar[b-5zkd9467gf] {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--colorNeutralBackground3, #f0f0f0);
}

.srd-recv-bar span[b-5zkd9467gf] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #16a34a;
}

.srd-notes[b-5zkd9467gf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--colorNeutralBackground2, #f7f8fa);
    font-size: 13px;
    white-space: pre-line;
}

.srd-pr-chip[b-5zkd9467gf] {
    align-self: flex-start;
    padding: 0 6px;
    border: 0;
    border-radius: 4px;
    background: var(--colorBrandBackground2, #ebf3fc);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--colorBrandForeground1, #0f6cbd);
    cursor: pointer;
}

.srd-pr-chip:hover[b-5zkd9467gf] { text-decoration: underline; }

/* ---- Bill / payments ---- */
.srd-balance-label[b-5zkd9467gf] { font-weight: 600; color: var(--colorNeutralForeground1) !important; }
.srd-balance[b-5zkd9467gf] { font-weight: 700; }
.srd-balance--due[b-5zkd9467gf] { color: #d13438 !important; }

.srd-pay-empty[b-5zkd9467gf] { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 0; }

.srd-pay-amount[b-5zkd9467gf] { font-weight: 600; }

.srd-pay-voided td[b-5zkd9467gf] { color: var(--colorNeutralForeground3); }
.srd-pay-voided .srd-pay-amount[b-5zkd9467gf] { text-decoration: line-through; }

/* ---- Two-column layout: content left, Bill right (sticky) ---- */
.srd-layout[b-5zkd9467gf] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 12px;
    align-items: start;
}

.srd-main[b-5zkd9467gf] { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.srd-side[b-5zkd9467gf] { min-width: 0; }

/* Stays in view while the details, payments and items scroll past. */
.srd-sticky[b-5zkd9467gf] { position: sticky; top: 12px; }

@media (max-width: 1000px) {
    .srd-layout[b-5zkd9467gf] { grid-template-columns: minmax(0, 1fr); }
    .srd-side[b-5zkd9467gf] { order: -1; }
    .srd-sticky[b-5zkd9467gf] { position: static; }
}
/* _content/PSMS.Web/Components/Pages/PurchaseStock/StockReceiptForm.razor.rz.scp.css */
/* Full-width sales order form: Order Information, Items, then Remarks + Totals, each a full-width card. */

.srf-no[b-pjnkvh3kwd] {
    padding: 2px 8px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 4px;
    background: var(--colorNeutralBackground3);
    font-size: 12px;
    font-weight: 600;
}

.srf-card[b-pjnkvh3kwd] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    background: var(--colorNeutralBackground1);
}

.srf-card-head[b-pjnkvh3kwd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.srf-head[b-pjnkvh3kwd] { display: flex; align-items: center; gap: 10px; }

.srf-head-icon[b-pjnkvh3kwd] {
    display: grid;
    flex: none;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    background: var(--colorBrandBackground2, #ebf3fc);
}

.srf-head-text[b-pjnkvh3kwd] { display: flex; flex-direction: column; gap: 1px; }

.srf-title[b-pjnkvh3kwd] { font-size: 15px; font-weight: 700; }

.srf-hint[b-pjnkvh3kwd] { font-size: 12px; color: var(--colorNeutralForeground3); }

.srf-label[b-pjnkvh3kwd] { font-size: 13px; color: var(--colorNeutralForeground1); }

/* Customer | Branch | Order date | Expected date */
.srf-fields[b-pjnkvh3kwd] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px 16px;
    align-items: end;
}

@media (max-width: 1100px) {
    .srf-fields[b-pjnkvh3kwd] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .srf-fields[b-pjnkvh3kwd] { grid-template-columns: minmax(0, 1fr); }
}

.srf-fulfil[b-pjnkvh3kwd] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 20px;
}

.srf-fulfil-pick[b-pjnkvh3kwd] { display: flex; flex-direction: column; gap: 4px; }

.srf-fulfil-note[b-pjnkvh3kwd] { padding-bottom: 9px; }

.srf-choice[b-pjnkvh3kwd] { display: flex; flex-wrap: wrap; gap: 8px; }

.srf-choice-btn[b-pjnkvh3kwd] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 6px;
    background: var(--colorNeutralBackground1);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--colorNeutralForeground2);
    cursor: pointer;
}

.srf-choice-btn--on[b-pjnkvh3kwd] {
    border-color: var(--colorBrandStroke1, #0f6cbd);
    background: var(--colorBrandBackground2, #ebf3fc);
    color: var(--colorBrandForeground1, #0f6cbd);
}

.srf-ok[b-pjnkvh3kwd] { color: #0e7c4a; }
.srf-bad[b-pjnkvh3kwd] { color: #dc2626; }

.srf-empty[b-pjnkvh3kwd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 16px;
    border: 1px dashed var(--colorNeutralStroke1);
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
    color: var(--colorNeutralForeground3);
}

/* Items table */
.srf-table-wrap[b-pjnkvh3kwd] { overflow-x: auto; border: 1px solid var(--colorNeutralStroke2); border-radius: 8px; }

.srf-table[b-pjnkvh3kwd] { width: 100%; border-collapse: collapse; font-size: 13px; }

.srf-table th[b-pjnkvh3kwd] {
    padding: 9px 10px;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    color: var(--colorNeutralForeground3);
    background: var(--colorNeutralBackground2, #fafafa);
    border-bottom: 1px solid var(--colorNeutralStroke2);
}

.srf-table td[b-pjnkvh3kwd] { padding: 7px 10px; border-bottom: 1px solid var(--colorNeutralStroke3, #f0f0f0); vertical-align: middle; }
.srf-table td:has(input)[b-pjnkvh3kwd], .srf-table td:has(select)[b-pjnkvh3kwd] { vertical-align: top; }

.srf-table tbody tr:last-child td[b-pjnkvh3kwd] { border-bottom: 0; }
.srf-table tbody tr:hover td[b-pjnkvh3kwd] { background: var(--colorNeutralBackground2, #fafafa); }

.srf-num[b-pjnkvh3kwd] { text-align: right; white-space: nowrap; }

.srf-idx[b-pjnkvh3kwd] { width: 32px; text-align: center; color: var(--colorNeutralForeground3); }

.srf-sku[b-pjnkvh3kwd] { white-space: nowrap; color: var(--colorNeutralForeground2); }

.srf-item[b-pjnkvh3kwd] { display: flex; align-items: center; gap: 10px; }

.srf-thumb[b-pjnkvh3kwd] {
    display: inline-flex;
    flex: none;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--colorNeutralBackground3);
}

.srf-thumb img[b-pjnkvh3kwd] { width: 100%; height: 100%; object-fit: contain; }

.srf-item-text[b-pjnkvh3kwd] { display: flex; flex-direction: column; line-height: 1.3; }

.srf-cell[b-pjnkvh3kwd] {
    width: 96px;
    box-sizing: border-box;
    padding: 5px 8px;
    border: 1px solid var(--colorNeutralStroke2, #d1d5db);
    border-radius: 4px;
    background: var(--colorNeutralBackground1);
    font: inherit;
    text-align: right;
}

.srf-cell:focus[b-pjnkvh3kwd] { outline: none; border-color: var(--colorBrandStroke1, #0f6cbd); box-shadow: 0 0 0 2px var(--colorBrandBackground2, #ebf3fc); }

.srf-cell--wide[b-pjnkvh3kwd] { width: 130px; }

.srf-warn[b-pjnkvh3kwd] { display: block; font-size: 11px; color: #b45309; }

.srf-warn-line[b-pjnkvh3kwd] {
    padding: 8px 10px;
    border: 1px solid #fde2a7;
    border-radius: 6px;
    background: #fff7e6;
    font-size: 12px;
    color: #92400e;
}

/* Remarks (left) + totals (right) */
.srf-bottom[b-pjnkvh3kwd] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 16px 32px;
    align-items: start;
}

@media (max-width: 800px) {
    .srf-bottom[b-pjnkvh3kwd] { grid-template-columns: minmax(0, 1fr); }
}

.srf-remarks[b-pjnkvh3kwd] { display: flex; flex-direction: column; gap: 6px; }

.srf-totals[b-pjnkvh3kwd] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 16px;
    margin: 0;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--colorNeutralBackground2, #f7f8fa);
    font-size: 13px;
    align-items: center;
}

.srf-totals dt[b-pjnkvh3kwd] { color: var(--colorNeutralForeground3); font-weight: 400; }
.srf-totals dd[b-pjnkvh3kwd] { margin: 0; text-align: right; }

.srf-total-label[b-pjnkvh3kwd] { padding-top: 10px; border-top: 1px solid var(--colorNeutralStroke2); font-weight: 700 !important; color: var(--colorNeutralForeground1) !important; }
.srf-total[b-pjnkvh3kwd] { padding-top: 10px; border-top: 1px solid var(--colorNeutralStroke2); font-size: 20px; font-weight: 700; }

/* Totals: discount type toggle, tax picker, withholding. */
.srf-totals-box[b-pjnkvh3kwd] { display: flex; flex-direction: column; gap: 8px; }

.srf-totals-label[b-pjnkvh3kwd] { display: inline-flex; align-items: center; gap: 8px; }

.srf-totals-span[b-pjnkvh3kwd] { grid-column: 1 / -1; padding-top: 4px; }

.srf-inline[b-pjnkvh3kwd] { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }

.srf-cell--sm[b-pjnkvh3kwd] { width: 64px; }

.srf-seg[b-pjnkvh3kwd] {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    border-radius: 4px;
}

.srf-seg button[b-pjnkvh3kwd] {
    min-width: 26px;
    padding: 1px 6px;
    border: 0;
    background: var(--colorNeutralBackground1);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--colorNeutralForeground2);
    cursor: pointer;
}

.srf-seg button + button[b-pjnkvh3kwd] { border-left: 1px solid var(--colorNeutralStroke1, #d1d1d1); }

.srf-seg .srf-seg--on[b-pjnkvh3kwd] {
    background: var(--colorBrandBackground, #0f6cbd);
    color: #ffffff;
}

/* Number columns: header and values both right-aligned (the generic "th { text-align: left }" rule
   above would otherwise win over .srf-num on the header cells). */
.srf-table th.srf-num[b-pjnkvh3kwd] { text-align: right; }
.srf-table th.srf-idx[b-pjnkvh3kwd] { text-align: center; }

.srf-block[b-pjnkvh3kwd] { display: block; }

/* Unit picker per line (base unit / fixed secondary unit). */
.srf-unit[b-pjnkvh3kwd] {
    min-width: 110px;
    padding: 5px 8px;
    border: 1px solid var(--colorNeutralStroke2, #d1d5db);
    border-radius: 4px;
    background: var(--colorNeutralBackground1);
    font: inherit;
    font-size: 13px;
}

.srf-unit:focus[b-pjnkvh3kwd] { outline: none; border-color: var(--colorBrandStroke1, #0f6cbd); box-shadow: 0 0 0 2px var(--colorBrandBackground2, #ebf3fc); }

.srf-unit-text[b-pjnkvh3kwd] { color: var(--colorNeutralForeground2); }

.srf-supplier[b-pjnkvh3kwd] { min-width: 160px; max-width: 220px; }

/* Payment terms | Supplier ref | Delivery address */
.srf-fields--second[b-pjnkvh3kwd] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); }

@media (max-width: 1100px) {
    .srf-fields--second[b-pjnkvh3kwd] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .srf-fields--second[b-pjnkvh3kwd] { grid-template-columns: minmax(0, 1fr); }
}

.srf-supplier-card[b-pjnkvh3kwd] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--colorNeutralBackground2, #f7f8fa);
    font-size: 12px;
    color: var(--colorNeutralForeground2);
}

.srf-remarks[b-pjnkvh3kwd] { display: flex; flex-direction: column; gap: 12px; }

.srf-pr-chip[b-pjnkvh3kwd] {
    align-self: flex-start;
    padding: 0 6px;
    border-radius: 4px;
    background: var(--colorBrandBackground2, #ebf3fc);
    font-size: 11px;
    font-weight: 600;
    color: var(--colorBrandForeground1, #0f6cbd);
}

.srf-link[b-pjnkvh3kwd] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--colorBrandForegroundLink, #0f6cbd);
    cursor: pointer;
}

.srf-link:hover[b-pjnkvh3kwd] { text-decoration: underline; }

/* Variable-weight items: the quantity comes from the roll weights. */
.srf-rolls[b-pjnkvh3kwd] {
    padding: 4px 10px;
    border: 1px solid var(--colorBrandStroke1, #0f6cbd);
    border-radius: 6px;
    background: var(--colorBrandBackground2, #ebf3fc);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--colorBrandForeground1, #0f6cbd);
    white-space: nowrap;
    cursor: pointer;
}

.srf-rolls--missing[b-pjnkvh3kwd] {
    border-color: #d13438;
    background: #fdecec;
    color: #b42318;
}

.srf-qty2[b-pjnkvh3kwd] { display: inline-flex; gap: 6px; justify-content: flex-end; }
.srf-qbox[b-pjnkvh3kwd] { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--colorNeutralStroke1, #d1d1d1); border-radius: 4px; padding: 0 6px; background: var(--colorNeutralBackground1, #fff); height: 30px; }
.srf-qbox:focus-within[b-pjnkvh3kwd] { border-color: var(--colorBrandStroke1, #0f6cbd); }
.srf-qbox input[b-pjnkvh3kwd] { width: 56px; border: 0; outline: 0; text-align: right; font: inherit; background: transparent; }
.srf-qbox span[b-pjnkvh3kwd] { font-size: 11px; color: var(--colorNeutralForeground3, #707070); }

/* The input fills the whole box (unit tag drawn over it, click-through), so a click anywhere in the box
   lands in the field instead of selecting the unit text. */
.srf-qbox[b-pjnkvh3kwd] { position: relative; padding: 0; cursor: text; }
.srf-qbox input[b-pjnkvh3kwd] { width: 88px; height: 100%; padding: 0 30px 0 8px; box-sizing: border-box; }
.srf-qbox span[b-pjnkvh3kwd] { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); pointer-events: none; user-select: none; }
/* _content/PSMS.Web/Components/Pages/PurchaseStock/StockReceiptPaymentDialog.razor.rz.scp.css */
.srpd-balance[b-9x9pukuqvy] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.srpd-balance-item[b-9x9pukuqvy] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--colorNeutralBackground2, #f7f7f7);
}

.srpd-balance-item--due[b-9x9pukuqvy] {
    background: #eaf3ff;
}

.srpd-balance-item--due .srpd-value[b-9x9pukuqvy] {
    color: var(--accent-fill-rest, #0f6cbd);
}

.srpd-label[b-9x9pukuqvy] {
    font-size: 12px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.srpd-value[b-9x9pukuqvy] {
    font-size: 16px;
    font-weight: 700;
}

.srpd-grid[b-9x9pukuqvy] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    align-items: start;
}

.srpd-amount[b-9x9pukuqvy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.srpd-quick[b-9x9pukuqvy] {
    display: flex;
    gap: 6px;
}

.srpd-chip[b-9x9pukuqvy] {
    padding: 2px 10px;
    border: 1px solid var(--colorNeutralStroke2, #e1e1e1);
    border-radius: 999px;
    background: var(--colorNeutralBackground1, #ffffff);
    font: inherit;
    font-size: 12px;
    color: var(--colorNeutralForeground2, #424242);
    cursor: pointer;
}

.srpd-chip:hover[b-9x9pukuqvy] {
    border-color: var(--accent-fill-rest, #0f6cbd);
    color: var(--accent-fill-rest, #0f6cbd);
}

.srpd-suffix[b-9x9pukuqvy] {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    font-size: 13px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.srpd-hint[b-9x9pukuqvy] {
    font-size: 12px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.srpd-error[b-9x9pukuqvy] {
    font-size: 12px;
    color: var(--colorStatusDangerForeground1, #b10e1c);
}

@media (max-width: 600px) {
    .srpd-balance[b-9x9pukuqvy],
    .srpd-grid[b-9x9pukuqvy] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* FluentStack doesn't stretch its children, so the summary tiles and the field grid are set to the
   dialog's full width explicitly (otherwise they shrink to their content). */
.srpd-balance[b-9x9pukuqvy],
.srpd-grid[b-9x9pukuqvy] {
    width: 100%;
    box-sizing: border-box;
}
/* _content/PSMS.Web/Components/Pages/PurchaseStock/StockReceiptPills.razor.rz.scp.css */
.sr-pills[b-r5a80c118u] { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.sr-pill[b-r5a80c118u] {
    display: inline-flex;
    align-items: center;
    padding: 1px 10px;
    border: 1px solid;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.sr-pill--draft[b-r5a80c118u] { border-color: #d9dce1; background: #f3f4f6; color: #4b5563; }
.sr-pill--posted[b-r5a80c118u] { border-color: #bfd4fb; background: #eef4ff; color: #1d4ed8; }
.sr-pill--voided[b-r5a80c118u] { border-color: #d9dce1; background: #f3f4f6; color: #6b7280; text-decoration: line-through; }
.sr-pill--unpaid[b-r5a80c118u] { border-color: #f5c2c2; background: #fdecec; color: #b42318; }
.sr-pill--partiallypaid[b-r5a80c118u] { border-color: #fde2a7; background: #fff7e6; color: #b45309; }
.sr-pill--paid[b-r5a80c118u] { border-color: #b7e4c7; background: #e9f7ef; color: #0e7c4a; }
.sr-pill--overdue[b-r5a80c118u] { border-color: #d13438; background: #d13438; color: #ffffff; }

.sr-pills--sm[b-r5a80c118u] { gap: 4px; }
.sr-pills--sm .sr-pill[b-r5a80c118u] { padding: 0 7px; font-size: 11px; line-height: 18px; }
/* _content/PSMS.Web/Components/Pages/PurchaseStock/StockReceiptRollsDialog.razor.rz.scp.css */
.srr-wrap[b-5guzaohlek] { display: flex; flex-direction: column; gap: 10px; width: 100%; }

.srr-hint[b-5guzaohlek] { font-size: 12px; color: var(--colorNeutralForeground3); }

.srr-list[b-5guzaohlek] {
    display: flex;
    flex-direction: column;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
}

.srr-row[b-5guzaohlek] {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 130px 36px;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--colorNeutralStroke3, #f0f0f0);
    font-size: 13px;
}

.srr-row:last-child[b-5guzaohlek] { border-bottom: 0; }

.srr-head[b-5guzaohlek] {
    font-size: 12px;
    font-weight: 600;
    color: var(--colorNeutralForeground3);
    background: var(--colorNeutralBackground2, #fafafa);
}

.srr-idx[b-5guzaohlek] { text-align: center; color: var(--colorNeutralForeground3); }

.srr-num[b-5guzaohlek] { text-align: right; }

.srr-cell[b-5guzaohlek] {
    width: 100%;
    height: 28px;
    box-sizing: border-box;
    padding: 0 8px;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    border-radius: 4px;
    font: inherit;
    background: var(--colorNeutralBackground1);
}

.srr-cell--num[b-5guzaohlek] { text-align: right; }

.srr-foot[b-5guzaohlek] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.srr-total[b-5guzaohlek] { font-size: 13px; font-weight: 700; }

.srr-error[b-5guzaohlek] { font-size: 12px; font-weight: 600; color: var(--colorStatusDangerForeground1, #b10e1c); }
/* _content/PSMS.Web/Components/Pages/PurchaseStock/StockReceipts.razor.rz.scp.css */
.sr-summary-grid[b-9nocvyalau] {
    width: 100%;
}

/* each stat card fills its FluentGrid cell and matches its row's height (same as Payments) */
.sr-summary-grid[b-9nocvyalau]  .basic-value-card {
    display: block;
    width: 100%;
    height: 100%;
}

.sr-link[b-9nocvyalau] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--colorBrandForegroundLink, #0f6cbd);
    cursor: pointer;
}

.sr-link:hover[b-9nocvyalau] { text-decoration: underline; }

.sr-cell-stack[b-9nocvyalau] { display: flex; flex-direction: column; line-height: 1.3; }

.sr-hint[b-9nocvyalau] { font-size: 12px; color: var(--colorNeutralForeground3); }

.sr-empty[b-9nocvyalau] {
    padding: 24px 16px;
    font-size: 13px;
    text-align: center;
    color: var(--colorNeutralForeground3);
}

.sr-purpose[b-9nocvyalau] {
    display: -webkit-box;
    max-width: 360px;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.sr-priority[b-9nocvyalau] {
    display: inline-flex;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
/* _content/PSMS.Web/Components/Pages/Quotation/Print/QuotationPrintDocument.razor.rz.scp.css */
.qd-doc[b-ahp1rx159j] {
    font-size: 11px;
    line-height: 1.45;
    color: #242424;
}

.qd-title[b-ahp1rx159j] {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .02em;
}

.qd-code[b-ahp1rx159j] {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
}

.qd-date[b-ahp1rx159j] {
    margin-top: 2px;
    color: #424242;
}

.qd-info[b-ahp1rx159j] {
    margin-top: 12px;
}

.qd-copy[b-ahp1rx159j] {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    color: #616161;
}

.qd-ref[b-ahp1rx159j] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.qd-ref strong[b-ahp1rx159j] { font-size: 14px; }

.qd-label[b-ahp1rx159j] { color: #616161; }

.qd-muted[b-ahp1rx159j] {
    color: #616161;
    font-size: 10px;
}

.qd-section-label[b-ahp1rx159j] {
    margin: 14px 0 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #424242;
}

.qd-info[b-ahp1rx159j] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 10px 12px;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
}

.qd-info-col[b-ahp1rx159j] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.qd-info-col strong[b-ahp1rx159j] { font-size: 13px; }

.qd-info-grid[b-ahp1rx159j] {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 2px 10px;
}

.qd-table th[b-ahp1rx159j],
.qd-table td[b-ahp1rx159j] {
    padding: 6px 8px;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
    vertical-align: top;
}

.qd-table th[b-ahp1rx159j] {
    background: #f0f0f0;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.qd-table .num[b-ahp1rx159j] {
    text-align: right;
    white-space: nowrap;
}

.qd-table .qd-group td[b-ahp1rx159j] {
    padding-top: 10px;
    background: #fafafa;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #424242;
}

.qd-components[b-ahp1rx159j] {
    margin-top: 4px;
    padding-left: 8px;
    border-left: 2px solid #e0e0e0;
    font-size: 10px;
    color: #424242;
}

.qd-components > div[b-ahp1rx159j] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.qd-totals[b-ahp1rx159j] {
    width: 46%;
    margin: 12px 0 0 auto;
}

.qd-totals > div[b-ahp1rx159j] {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
}

.qd-totals .is-total[b-ahp1rx159j] {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid #3d3d3d;
    font-size: 14px;
    font-weight: 700;
}

.qd-terms p[b-ahp1rx159j] {
    margin: 0 0 4px;
    white-space: pre-wrap;
}

.qd-signs[b-ahp1rx159j] {
    display: flex;
    gap: 24px;
    margin-top: 36px;
}

.qd-sign[b-ahp1rx159j] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: #424242;
}

.qd-sign-line[b-ahp1rx159j] {
    width: 100%;
    border-top: 1px solid #3d3d3d;
    margin-top: 28px;
}
/* _content/PSMS.Web/Components/Pages/Quotation/Settings/QuotationBranchFormSettingsDialog.razor.rz.scp.css */
/* Same compact layout as JobOrderBranchFormSettingsDialog.razor.css. Fluent fields are child
   components, so their sizing needs ::deep (see CLAUDE.md, Razor CSS Isolation). */
.qbf-form[b-klh8h7yzok] { display: flex; flex-direction: column; gap: 14px; }

.qbf-top[b-klh8h7yzok] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; }
.qbf-active[b-klh8h7yzok] { padding-bottom: 6px; }

.qbf-group[b-klh8h7yzok] { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--colorNeutralStroke2); border-radius: 10px; background: var(--colorNeutralBackground2); }
.qbf-group-title[b-klh8h7yzok] { font-weight: 600; font-size: 13px; }

.qbf-grid[b-klh8h7yzok] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.qbf-grid[b-klh8h7yzok]  * { min-width: 0; }
.qbf-grid[b-klh8h7yzok]  .qbf-wide { grid-column: 1 / -1; }

.qbf-hint[b-klh8h7yzok] { font-size: 12px; color: var(--colorNeutralForeground3); }
[b-klh8h7yzok] .qbf-affix { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; color: var(--colorNeutralForeground3); font-weight: 600; }

@media (max-width: 700px) {
    .qbf-grid[b-klh8h7yzok] { grid-template-columns: minmax(0, 1fr); }
    .qbf-top[b-klh8h7yzok] { grid-template-columns: minmax(0, 1fr); }
}
/* _content/PSMS.Web/Components/Pages/Reports/ReportsHub.razor.rz.scp.css */
.rh-card[b-01c9lx2cf1] {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 12px;
    background: var(--colorNeutralBackground1, #fff);
}

.rh-filters[b-01c9lx2cf1] { flex-direction: row; flex-wrap: wrap; align-items: center; }

[b-01c9lx2cf1] .rh-search { flex: 1 1 260px; }

.rh-muted[b-01c9lx2cf1] { font-size: 12px; color: var(--colorNeutralForeground3, #6b7280); }

/* KPI strip */
.rh-kpis[b-01c9lx2cf1] { width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }

.rh-kpi[b-01c9lx2cf1] { flex-direction: row; align-items: center; gap: 14px; }

.rh-kpi-icon[b-01c9lx2cf1], .rh-cat-icon[b-01c9lx2cf1] { display: grid; flex-shrink: 0; place-items: center; width: 52px; height: 52px; border-radius: 12px; }

.rh-kpi-text[b-01c9lx2cf1] { display: flex; flex-direction: column; min-width: 0; }

.rh-kpi-label[b-01c9lx2cf1] { font-size: 13px; color: var(--colorNeutralForeground2, #374151); }

.rh-kpi-text strong[b-01c9lx2cf1] { font-size: 20px; white-space: nowrap; }

.rh-kpi-trend[b-01c9lx2cf1] { font-size: 12px; font-weight: 600; }

.rh-kpi-trend.is-up[b-01c9lx2cf1] { color: #16a34a; }

.rh-kpi-trend.is-down[b-01c9lx2cf1] { color: #d13438; }

.rh-kpi-trend em[b-01c9lx2cf1] { margin-left: 4px; font-style: normal; font-weight: 400; color: var(--colorNeutralForeground3, #6b7280); }

/* Sections */
.rh-section-head[b-01c9lx2cf1] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.rh-section-head h2[b-01c9lx2cf1] { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; font-weight: 700; }

.rh-link[b-01c9lx2cf1] { padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: #0f6cbd; cursor: pointer; }

/* Categories */
.rh-cats[b-01c9lx2cf1] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

.rh-cat[b-01c9lx2cf1] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 10px;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.rh-cat:hover[b-01c9lx2cf1] { border-color: var(--cat); box-shadow: 0 2px 10px rgb(0 0 0 / 6%); }

.rh-cat.is-active[b-01c9lx2cf1] { border-color: var(--cat); background: var(--cat-soft); }

.rh-cat-icon[b-01c9lx2cf1] { width: 46px; height: 46px; background: var(--cat-soft); color: var(--cat); }

.rh-cat.is-active .rh-cat-icon[b-01c9lx2cf1] { background: #fff; }

.rh-cat-text[b-01c9lx2cf1] { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; color: var(--colorNeutralForeground3, #6b7280); }

.rh-cat-text strong[b-01c9lx2cf1] { font-size: 14px; color: var(--colorNeutralForeground1, #1f2937); }

.rh-cat-text em[b-01c9lx2cf1] { margin-top: 4px; font-style: normal; font-weight: 600; color: var(--cat); text-decoration: underline; }

.rh-chevron[b-01c9lx2cf1] { font-size: 20px; line-height: 1; color: #94a3b8; }

/* Bottom row */
.rh-bottom[b-01c9lx2cf1] { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; align-items: start; }

.rh-list[b-01c9lx2cf1] { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; }

.rh-report[b-01c9lx2cf1] { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--colorNeutralStroke3, #f0f0f0); }

.rh-report:last-child[b-01c9lx2cf1] { border-bottom: 0; }

.rh-report-icon[b-01c9lx2cf1], .rh-quick-icon[b-01c9lx2cf1] { display: grid; flex-shrink: 0; place-items: center; width: 32px; height: 32px; border-radius: 8px; }

.rh-report-text[b-01c9lx2cf1] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12px;
    text-align: left;
    color: var(--colorNeutralForeground3, #6b7280);
    cursor: pointer;
}

.rh-report-text strong[b-01c9lx2cf1] { font-size: 13px; color: var(--colorNeutralForeground1, #1f2937); }

.rh-report-text:hover strong[b-01c9lx2cf1] { color: #0f6cbd; text-decoration: underline; }

.rh-empty[b-01c9lx2cf1] { padding: 20px; font-size: 13px; text-align: center; color: var(--colorNeutralForeground3, #6b7280); }

.rh-table-wrap[b-01c9lx2cf1] { overflow-x: auto; }

.rh-table[b-01c9lx2cf1] { width: 100%; border-collapse: collapse; font-size: 13px; }

.rh-table th[b-01c9lx2cf1] { padding: 8px; border-bottom: 1px solid var(--colorNeutralStroke2, #e5e7eb); background: var(--colorNeutralBackground2, #f8fafc); font-weight: 600; text-align: left; }

.rh-table td[b-01c9lx2cf1] { padding: 6px 8px; border-bottom: 1px solid var(--colorNeutralStroke3, #f0f0f0); }

.rh-nowrap[b-01c9lx2cf1] { white-space: nowrap; }

.rh-status[b-01c9lx2cf1] { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }

.rh-status.is-ok[b-01c9lx2cf1] { background: #dcfce7; color: #15803d; }

.rh-status.is-failed[b-01c9lx2cf1] { background: #fde7e9; color: #a4262c; }

.rh-quick[b-01c9lx2cf1] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.rh-quick-item[b-01c9lx2cf1] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 10px;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.rh-quick-item:hover[b-01c9lx2cf1] { border-color: #0f6cbd; }

.rh-quick-text[b-01c9lx2cf1] { display: flex; flex-direction: column; min-width: 0; font-size: 11px; color: var(--colorNeutralForeground3, #6b7280); }

.rh-quick-text strong[b-01c9lx2cf1] { font-size: 13px; color: var(--colorNeutralForeground1, #1f2937); }

@media (max-width: 1400px) {
    .rh-kpis[b-01c9lx2cf1] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rh-bottom[b-01c9lx2cf1] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .rh-bottom > :last-child[b-01c9lx2cf1] { grid-column: 1 / -1; }
    .rh-quick[b-01c9lx2cf1] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
    .rh-cats[b-01c9lx2cf1] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
    .rh-kpis[b-01c9lx2cf1] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rh-bottom[b-01c9lx2cf1] { grid-template-columns: minmax(0, 1fr); }
    .rh-quick[b-01c9lx2cf1] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
    .rh-kpis[b-01c9lx2cf1], .rh-cats[b-01c9lx2cf1] { grid-template-columns: minmax(0, 1fr); }
}

.rh-cell-link[b-01c9lx2cf1] { padding: 0; border: 0; background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; }

.rh-cell-link:hover[b-01c9lx2cf1] { color: #0f6cbd; text-decoration: underline; }
/* _content/PSMS.Web/Components/Pages/Reports/ReportView.razor.rz.scp.css */
.rv-card[b-u1lxib1o93] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 12px;
    background: var(--colorNeutralBackground1, #fff);
}

.rv-cat[b-u1lxib1o93] { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }

.rv-filters[b-u1lxib1o93] { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }

.rv-output[b-u1lxib1o93] { align-items: center; padding: 48px 16px; text-align: center; }

.rv-output-icon[b-u1lxib1o93] { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 20px; }

.rv-output h2[b-u1lxib1o93] { margin: 0; font-size: 18px; }

.rv-output p[b-u1lxib1o93] { max-width: 520px; margin: 0; font-size: 14px; color: var(--colorNeutralForeground3, #6b7280); }

.rv-empty[b-u1lxib1o93] { align-items: center; padding: 40px; }

.rv-related-title[b-u1lxib1o93] { margin: 0; font-size: 15px; }

.rv-related[b-u1lxib1o93] { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }

.rv-related-item[b-u1lxib1o93] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 10px;
    background: none;
    font: inherit;
    font-size: 12px;
    text-align: left;
    color: var(--colorNeutralForeground3, #6b7280);
    cursor: pointer;
}

.rv-related-item strong[b-u1lxib1o93] { font-size: 13px; color: var(--colorNeutralForeground1, #1f2937); }

.rv-related-item:hover[b-u1lxib1o93] { border-color: #0f6cbd; }
/* _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/SalesOrder/Print/SalesOrderPrintDocument.razor.rz.scp.css */
.so-doc[b-gyvjv8r7g9] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 10.5px;
    line-height: 1.45;
    color: #242424;
}

/* ── title block (letterhead aside) ── */
.so-title[b-gyvjv8r7g9] {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .02em;
}

.so-code[b-gyvjv8r7g9] {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
}

.so-date[b-gyvjv8r7g9] {
    margin-top: 2px;
    color: #424242;
}

.so-copy[b-gyvjv8r7g9] {
    margin-top: 4px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    color: #616161;
}

.so-muted[b-gyvjv8r7g9] {
    color: #616161;
    font-size: 9.5px;
}

/* ── cards ── */
.so-card[b-gyvjv8r7g9] {
    padding: 10px 12px;
    border: 1px solid #d6d9de;
    border-radius: 4px;
}

.so-card-flush[b-gyvjv8r7g9] {
    padding: 0;
    overflow: hidden;
}

.so-card-title[b-gyvjv8r7g9] {
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e6e8eb;
    font-size: 11.5px;
    font-weight: 700;
}

.so-info[b-gyvjv8r7g9] {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 10px;
}

.so-kv[b-gyvjv8r7g9] {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 3px 10px;
}

.so-kv > span:nth-child(odd)[b-gyvjv8r7g9] {
    color: #616161;
}

.so-pill[b-gyvjv8r7g9] {
    display: inline-block;
    padding: 0 8px;
    border-radius: 999px;
    background: #e3f0fb;
    color: #0f6cbd;
    font-size: 9.5px;
    font-weight: 600;
}

/* ── tables ── */
.so-table th[b-gyvjv8r7g9],
.so-table td[b-gyvjv8r7g9],
.so-prod-table th[b-gyvjv8r7g9],
.so-prod-table td[b-gyvjv8r7g9] {
    padding: 6px 10px;
    border-bottom: 1px solid #e6e8eb;
    text-align: left;
    vertical-align: top;
}

.so-table th[b-gyvjv8r7g9] {
    background: #f1f2f4;
    font-weight: 700;
}

.so-table tr:last-child td[b-gyvjv8r7g9] {
    border-bottom: 0;
}

.so-table .num[b-gyvjv8r7g9] {
    text-align: right;
    white-space: nowrap;
}

.so-prod-table th[b-gyvjv8r7g9],
.so-prod-table td[b-gyvjv8r7g9] {
    padding: 4px 6px;
}

.so-prod-table th[b-gyvjv8r7g9] {
    color: #616161;
    font-weight: 600;
}

/* ── payment + terms ── */
.so-pair[b-gyvjv8r7g9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: start;
}

.so-totals > div:not(.so-card-title)[b-gyvjv8r7g9] {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
}

.so-totals .is-total[b-gyvjv8r7g9] {
    margin-top: 4px;
    padding-top: 5px !important;
    border-top: 1px solid #3d3d3d;
    font-size: 12px;
    font-weight: 700;
}

.so-totals .is-balance[b-gyvjv8r7g9] {
    font-weight: 700;
}

.so-terms p[b-gyvjv8r7g9] {
    margin: 0;
    white-space: pre-wrap;
}

.so-pill.is-good[b-gyvjv8r7g9] {
    background: #e6f4ea;
    color: #107c10;
}

.so-pay-table th[b-gyvjv8r7g9],
.so-pay-table td[b-gyvjv8r7g9] {
    padding: 4px 6px;
    border-bottom: 1px solid #e6e8eb;
    text-align: left;
}

.so-pay-table th[b-gyvjv8r7g9] {
    color: #616161;
    font-weight: 600;
}

.so-pay-table .num[b-gyvjv8r7g9] {
    text-align: right;
    white-space: nowrap;
}
/* _content/PSMS.Web/Components/Pages/SalesOrder/SalesOrderDetail.razor.rz.scp.css */
/* Sales order page: full width. Order Status across the top, Order Details beside Summary, then Items.
   The page sits in a vertical FluentStack (which sizes children to their content), so the wrapper is
   stretched to 100% explicitly. Cards use the theme's 8px corners. */
.sod-page[b-u30xfreta2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

.sod-row[b-u30xfreta2] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    gap: 12px;
    align-items: stretch;
}

@media (max-width: 1000px) {
    .sod-row[b-u30xfreta2] { grid-template-columns: minmax(0, 1fr); }
}

.sod-card[b-u30xfreta2] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    background: var(--colorNeutralBackground1);
}

.sod-card-head[b-u30xfreta2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}

.sod-head[b-u30xfreta2] { display: flex; align-items: center; gap: 12px; }

.sod-head-icon[b-u30xfreta2] {
    display: grid;
    flex: none;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 8px;
    background: var(--colorBrandBackground2, #ebf3fc);
}

.sod-head-text[b-u30xfreta2] { display: flex; flex-direction: column; gap: 1px; }

.sod-title[b-u30xfreta2] { font-size: 15px; font-weight: 700; color: var(--colorNeutralForeground1); }

.sod-hint[b-u30xfreta2] { font-size: 12px; color: var(--colorNeutralForeground3); }

.sod-note[b-u30xfreta2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--colorNeutralForeground3);
}

/* ---- Order status: centred steps joined by a line ---- */
.sod-steps[b-u30xfreta2] {
    display: flex;
    margin: 0;
    padding: 4px 0 0;
    overflow-x: auto;
    list-style: none;
}

.sod-hstep[b-u30xfreta2] {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 140px;
    text-align: center;
}

/* Connector from this step's circle to the next one's: dashed until the step is done. */
.sod-hstep:not(:last-child)[b-u30xfreta2]::after {
    content: "";
    position: absolute;
    top: 14px;
    left: calc(50% + 18px);
    right: calc(-50% + 18px);
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--colorNeutralStroke1, #c7c7c7) 0 4px, transparent 4px 8px);
}

.sod-hstep--done:not(:last-child)[b-u30xfreta2]::after { background: var(--colorBrandBackground, #0f6cbd); }

.sod-dot[b-u30xfreta2] {
    position: relative;
    z-index: 1;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    box-sizing: border-box;
    border: 2px solid var(--colorNeutralStroke1, #c7c7c7);
    border-radius: 50%;
    background: var(--colorNeutralBackground1);
}

.sod-hstep--done .sod-dot[b-u30xfreta2] {
    border-color: var(--colorBrandBackground, #0f6cbd);
    background: var(--colorBrandBackground, #0f6cbd);
}

/* The step up next: a ring with a filled centre. */
.sod-hstep--next .sod-dot[b-u30xfreta2] {
    border-color: var(--colorBrandBackground, #0f6cbd);
    box-shadow: 0 0 0 3px var(--colorBrandBackground2, #ebf3fc);
}

.sod-hstep--next .sod-dot[b-u30xfreta2]::after {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--colorBrandBackground, #0f6cbd);
}

.sod-hstep--cancelled .sod-dot[b-u30xfreta2] { border-color: #dc2626; background: #dc2626; }

.sod-hstep--skipped[b-u30xfreta2] { opacity: 0.45; }

.sod-step-text[b-u30xfreta2] { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }

/* ---- Order details: icon tiles in three columns ---- */
.sod-facts[b-u30xfreta2] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 0;
}

@media (max-width: 760px) {
    .sod-facts[b-u30xfreta2] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sod-fact[b-u30xfreta2] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 0 16px;
    border-left: 1px solid var(--colorNeutralStroke2);
}

.sod-fact:nth-child(3n + 1)[b-u30xfreta2] { padding-left: 0; border-left: 0; }

.sod-fact--wide[b-u30xfreta2] {
    grid-column: 1 / -1;
    padding-left: 0;
    border-left: 0;
}

.sod-fact-icon[b-u30xfreta2] {
    display: grid;
    flex: none;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 8px;
    background: var(--colorNeutralBackground3, #f3f4f6);
}

.sod-fact-text[b-u30xfreta2] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.sod-fact-value[b-u30xfreta2] {
    overflow: hidden;
    font-size: 15px;
    font-weight: 500;
    text-overflow: ellipsis;
    color: var(--colorNeutralForeground1);
}

/* ---- Summary ---- */
.sod-sum[b-u30xfreta2] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 16px;
    margin: 0;
    font-size: 13px;
}

.sod-sum dt[b-u30xfreta2] { color: var(--colorNeutralForeground3); font-weight: 400; }
.sod-sum dd[b-u30xfreta2] { margin: 0; text-align: right; color: var(--colorNeutralForeground1); }

.sod-sum--small[b-u30xfreta2] { padding-top: 10px; border-top: 1px solid var(--colorNeutralStroke2); font-size: 12px; }

.sod-grand[b-u30xfreta2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--colorBrandBackground2, #ebf3fc);
    font-weight: 700;
}

.sod-grand strong[b-u30xfreta2] {
    font-size: 22px;
    color: var(--colorBrandForeground1, #0f6cbd);
}

/* ---- Items table ---- */
.sod-table-wrap[b-u30xfreta2] { overflow-x: auto; border: 1px solid var(--colorNeutralStroke2); border-radius: 8px; }

.sod-table[b-u30xfreta2] { width: 100%; border-collapse: collapse; font-size: 13px; }

.sod-table th[b-u30xfreta2] {
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    color: var(--colorNeutralForeground2);
    background: var(--colorNeutralBackground2, #fafafa);
    border-bottom: 1px solid var(--colorNeutralStroke2);
}

.sod-table td[b-u30xfreta2] { padding: 8px 12px; border-bottom: 1px solid var(--colorNeutralStroke3, #f0f0f0); vertical-align: middle; }
.sod-table tbody tr:last-child td[b-u30xfreta2] { border-bottom: 0; }

.sod-table tfoot td[b-u30xfreta2] {
    padding: 10px 12px;
    font-weight: 600;
    background: var(--colorNeutralBackground2, #fafafa);
    border-top: 1px solid var(--colorNeutralStroke2);
}

.sod-foot-total[b-u30xfreta2] { font-size: 18px; font-weight: 700; color: var(--colorBrandForeground1, #0f6cbd); }

.sod-num[b-u30xfreta2] { text-align: right; white-space: nowrap; }

.sod-idx[b-u30xfreta2] { width: 40px; text-align: center; color: var(--colorNeutralForeground3); }

.sod-sku[b-u30xfreta2] { white-space: nowrap; color: var(--colorNeutralForeground2); }

.sod-item[b-u30xfreta2] { display: flex; align-items: center; gap: 12px; }

.sod-thumb[b-u30xfreta2] {
    display: grid;
    flex: none;
    width: 38px;
    height: 38px;
    place-items: center;
    overflow: hidden;
    border-radius: 8px;
    background: var(--colorNeutralBackground3, #f3f4f6);
}

.sod-thumb img[b-u30xfreta2] { width: 100%; height: 100%; object-fit: contain; }

.sod-item-text[b-u30xfreta2] { display: flex; flex-direction: column; line-height: 1.3; }

.sod-link[b-u30xfreta2] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    text-align: left;
    color: var(--colorBrandForegroundLink, #0f6cbd);
    cursor: pointer;
}

.sod-link:hover[b-u30xfreta2] { text-decoration: underline; }

/* Number columns: header and values both right-aligned. */
.sod-table th.sod-num[b-u30xfreta2] { text-align: right; }
.sod-table th.sod-idx[b-u30xfreta2] { text-align: center; }

/* ---- Payments ---- */
.sod-title[b-u30xfreta2] { display: inline-flex; align-items: center; gap: 8px; }

.sod-balance-label[b-u30xfreta2] { font-weight: 600; color: var(--colorNeutralForeground1) !important; }
.sod-balance[b-u30xfreta2] { font-weight: 700; }
.sod-balance--due[b-u30xfreta2] { color: #d13438 !important; }

.sod-pay-pill[b-u30xfreta2] {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
}

.sod-pay-pill--unpaid[b-u30xfreta2] { background: #fde7e9; color: #d13438; }
.sod-pay-pill--partiallypaid[b-u30xfreta2] { background: #fff4e0; color: #b36b00; }
.sod-pay-pill--paid[b-u30xfreta2] { background: #e6f4ea; color: #16a34a; }
.sod-pay-pill--voided[b-u30xfreta2] { margin-left: 6px; background: var(--colorNeutralBackground3, #f0f0f0); color: var(--colorNeutralForeground3); }

.sod-pay-progress[b-u30xfreta2] { display: flex; flex-direction: column; gap: 6px; }

.sod-pay-bar[b-u30xfreta2] {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--colorNeutralBackground3, #f0f0f0);
}

.sod-pay-bar span[b-u30xfreta2] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #16a34a;
}

.sod-pay-empty[b-u30xfreta2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 0;
}

.sod-pay-amount[b-u30xfreta2] { font-weight: 600; }

.sod-pay-voided td[b-u30xfreta2] { color: var(--colorNeutralForeground3); }
.sod-pay-voided .sod-pay-amount[b-u30xfreta2] { text-decoration: line-through; }

/* ---- Two-column layout: content left, Summary right (sticky) ---- */
.sod-layout[b-u30xfreta2] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 460px);
    gap: 12px;
    align-items: start;
}

.sod-main[b-u30xfreta2] { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.sod-side[b-u30xfreta2] { min-width: 0; }

/* Stays in view while the details, items and payments scroll past. */
.sod-sticky[b-u30xfreta2] { position: sticky; top: 12px; }

@media (max-width: 1000px) {
    .sod-layout[b-u30xfreta2] { grid-template-columns: minmax(0, 1fr); }
    .sod-side[b-u30xfreta2] { order: -1; }
    .sod-sticky[b-u30xfreta2] { position: static; }
}
/* _content/PSMS.Web/Components/Pages/SalesOrder/SalesOrderForm.razor.rz.scp.css */
/* Full-width sales order form: Order Information, Items, then Remarks + Totals, each a full-width card. */

.sof-no[b-9qbah7sqoi] {
    padding: 2px 8px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 4px;
    background: var(--colorNeutralBackground3);
    font-size: 12px;
    font-weight: 600;
}

.sof-card[b-9qbah7sqoi] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    background: var(--colorNeutralBackground1);
}

.sof-card-head[b-9qbah7sqoi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.sof-head[b-9qbah7sqoi] { display: flex; align-items: center; gap: 10px; }

.sof-head-icon[b-9qbah7sqoi] {
    display: grid;
    flex: none;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    background: var(--colorBrandBackground2, #ebf3fc);
}

.sof-head-text[b-9qbah7sqoi] { display: flex; flex-direction: column; gap: 1px; }

.sof-title[b-9qbah7sqoi] { font-size: 15px; font-weight: 700; }

.sof-hint[b-9qbah7sqoi] { font-size: 12px; color: var(--colorNeutralForeground3); }

.sof-label[b-9qbah7sqoi] { font-size: 13px; color: var(--colorNeutralForeground1); }

/* Customer | Branch | Order date | Expected date */
.sof-fields[b-9qbah7sqoi] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px 16px;
    align-items: end;
}

@media (max-width: 1100px) {
    .sof-fields[b-9qbah7sqoi] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .sof-fields[b-9qbah7sqoi] { grid-template-columns: minmax(0, 1fr); }
}

.sof-fulfil[b-9qbah7sqoi] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 20px;
}

.sof-fulfil-pick[b-9qbah7sqoi] { display: flex; flex-direction: column; gap: 4px; }

.sof-fulfil-note[b-9qbah7sqoi] { padding-bottom: 9px; }

.sof-choice[b-9qbah7sqoi] { display: flex; flex-wrap: wrap; gap: 8px; }

.sof-choice-btn[b-9qbah7sqoi] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 6px;
    background: var(--colorNeutralBackground1);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--colorNeutralForeground2);
    cursor: pointer;
}

.sof-choice-btn--on[b-9qbah7sqoi] {
    border-color: var(--colorBrandStroke1, #0f6cbd);
    background: var(--colorBrandBackground2, #ebf3fc);
    color: var(--colorBrandForeground1, #0f6cbd);
}

.sof-ok[b-9qbah7sqoi] { color: #0e7c4a; }
.sof-bad[b-9qbah7sqoi] { color: #dc2626; }

.sof-empty[b-9qbah7sqoi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 16px;
    border: 1px dashed var(--colorNeutralStroke1);
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
    color: var(--colorNeutralForeground3);
}

/* Items table */
.sof-table-wrap[b-9qbah7sqoi] { overflow-x: auto; border: 1px solid var(--colorNeutralStroke2); border-radius: 8px; }

.sof-table[b-9qbah7sqoi] { width: 100%; border-collapse: collapse; font-size: 13px; }

.sof-table th[b-9qbah7sqoi] {
    padding: 9px 10px;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    color: var(--colorNeutralForeground3);
    background: var(--colorNeutralBackground2, #fafafa);
    border-bottom: 1px solid var(--colorNeutralStroke2);
}

.sof-table td[b-9qbah7sqoi] { padding: 7px 10px; border-bottom: 1px solid var(--colorNeutralStroke3, #f0f0f0); vertical-align: middle; }
/* Cells with an input sit at the top so the boxes line up even when a hint shows under one of them. */
.sof-table td:has(input)[b-9qbah7sqoi] { vertical-align: top; }

.sof-table tbody tr:last-child td[b-9qbah7sqoi] { border-bottom: 0; }
.sof-table tbody tr:hover td[b-9qbah7sqoi] { background: var(--colorNeutralBackground2, #fafafa); }

.sof-num[b-9qbah7sqoi] { text-align: right; white-space: nowrap; }

.sof-idx[b-9qbah7sqoi] { width: 32px; text-align: center; color: var(--colorNeutralForeground3); }

.sof-sku[b-9qbah7sqoi] { white-space: nowrap; color: var(--colorNeutralForeground2); }

.sof-item[b-9qbah7sqoi] { display: flex; align-items: center; gap: 10px; }

.sof-thumb[b-9qbah7sqoi] {
    display: inline-flex;
    flex: none;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--colorNeutralBackground3);
}

.sof-thumb img[b-9qbah7sqoi] { width: 100%; height: 100%; object-fit: contain; }

.sof-item-text[b-9qbah7sqoi] { display: flex; flex-direction: column; line-height: 1.3; }

.sof-cell[b-9qbah7sqoi] {
    width: 96px;
    box-sizing: border-box;
    padding: 5px 8px;
    border: 1px solid var(--colorNeutralStroke2, #d1d5db);
    border-radius: 4px;
    background: var(--colorNeutralBackground1);
    font: inherit;
    text-align: right;
}

.sof-cell:focus[b-9qbah7sqoi] { outline: none; border-color: var(--colorBrandStroke1, #0f6cbd); box-shadow: 0 0 0 2px var(--colorBrandBackground2, #ebf3fc); }

.sof-cell--wide[b-9qbah7sqoi] { width: 130px; }

.sof-warn[b-9qbah7sqoi] { display: block; font-size: 11px; color: #b45309; }

.sof-warn-line[b-9qbah7sqoi] {
    padding: 8px 10px;
    border: 1px solid #fde2a7;
    border-radius: 6px;
    background: #fff7e6;
    font-size: 12px;
    color: #92400e;
}

/* Remarks (left) + totals (right) */
.sof-bottom[b-9qbah7sqoi] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 16px 32px;
    align-items: start;
}

@media (max-width: 800px) {
    .sof-bottom[b-9qbah7sqoi] { grid-template-columns: minmax(0, 1fr); }
}

.sof-remarks[b-9qbah7sqoi] { display: flex; flex-direction: column; gap: 6px; }

.sof-totals[b-9qbah7sqoi] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 16px;
    margin: 0;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--colorNeutralBackground2, #f7f8fa);
    font-size: 13px;
    align-items: center;
}

.sof-totals dt[b-9qbah7sqoi] { color: var(--colorNeutralForeground3); font-weight: 400; }
.sof-totals dd[b-9qbah7sqoi] { margin: 0; text-align: right; }

.sof-total-label[b-9qbah7sqoi] { padding-top: 10px; border-top: 1px solid var(--colorNeutralStroke2); font-weight: 700 !important; color: var(--colorNeutralForeground1) !important; }
.sof-total[b-9qbah7sqoi] { padding-top: 10px; border-top: 1px solid var(--colorNeutralStroke2); font-size: 20px; font-weight: 700; }

/* Totals: discount type toggle, tax picker, withholding. */
.sof-totals-box[b-9qbah7sqoi] { display: flex; flex-direction: column; gap: 8px; }

.sof-totals-label[b-9qbah7sqoi] { display: inline-flex; align-items: center; gap: 8px; }

.sof-totals-span[b-9qbah7sqoi] { grid-column: 1 / -1; padding-top: 4px; }

.sof-inline[b-9qbah7sqoi] { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }

.sof-cell--sm[b-9qbah7sqoi] { width: 64px; }

.sof-seg[b-9qbah7sqoi] {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    border-radius: 4px;
}

.sof-seg button[b-9qbah7sqoi] {
    min-width: 26px;
    padding: 1px 6px;
    border: 0;
    background: var(--colorNeutralBackground1);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--colorNeutralForeground2);
    cursor: pointer;
}

.sof-seg button + button[b-9qbah7sqoi] { border-left: 1px solid var(--colorNeutralStroke1, #d1d1d1); }

.sof-seg .sof-seg--on[b-9qbah7sqoi] {
    background: var(--colorBrandBackground, #0f6cbd);
    color: #ffffff;
}

/* Number columns: header and values both right-aligned (the generic "th { text-align: left }" rule
   above would otherwise win over .sof-num on the header cells). */
.sof-table th.sof-num[b-9qbah7sqoi] { text-align: right; }
.sof-table th.sof-idx[b-9qbah7sqoi] { text-align: center; }

.sof-block[b-9qbah7sqoi] { display: block; }

/* Unit picker per line (base unit / fixed secondary unit). */
.sof-unit[b-9qbah7sqoi] {
    min-width: 110px;
    padding: 5px 8px;
    border: 1px solid var(--colorNeutralStroke2, #d1d5db);
    border-radius: 4px;
    background: var(--colorNeutralBackground1);
    font: inherit;
    font-size: 13px;
}

.sof-unit:focus[b-9qbah7sqoi] { outline: none; border-color: var(--colorBrandStroke1, #0f6cbd); box-shadow: 0 0 0 2px var(--colorBrandBackground2, #ebf3fc); }

.sof-unit-text[b-9qbah7sqoi] { color: var(--colorNeutralForeground2); }

.sof-qbox[b-9qbah7sqoi] { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--colorNeutralStroke1, #d1d1d1); border-radius: 4px; padding: 0 6px; background: var(--colorNeutralBackground1, #fff); height: 30px; }
.sof-qbox:focus-within[b-9qbah7sqoi] { border-color: var(--colorBrandStroke1, #0f6cbd); }
.sof-qbox input[b-9qbah7sqoi] { width: 56px; border: 0; outline: 0; text-align: right; font: inherit; background: transparent; }
.sof-qbox span[b-9qbah7sqoi] { font-size: 11px; color: var(--colorNeutralForeground3, #707070); }

/* The input fills the whole box (unit tag drawn over it, click-through), so a click anywhere in the box
   lands in the field instead of selecting the unit text. */
.sof-qbox[b-9qbah7sqoi] { position: relative; padding: 0; cursor: text; }
.sof-qbox input[b-9qbah7sqoi] { width: 88px; height: 100%; padding: 0 30px 0 8px; box-sizing: border-box; }
.sof-qbox span[b-9qbah7sqoi] { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); pointer-events: none; user-select: none; }

/* Terms & Conditions / Remarks tabs */
.sof-tab-body[b-9qbah7sqoi] { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; width: 100%; }
.sof-reset-link[b-9qbah7sqoi] { align-self: flex-end; font-size: 12px; color: var(--colorBrandForeground1); text-decoration: none; }
.sof-reset-link:hover[b-9qbah7sqoi] { text-decoration: underline; }
/* _content/PSMS.Web/Components/Pages/SalesOrder/SalesOrderPaymentDialog.razor.rz.scp.css */
.sopd-balance[b-lcs6lvrhad] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.sopd-balance-item[b-lcs6lvrhad] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--colorNeutralBackground2, #f7f7f7);
}

.sopd-balance-item--due[b-lcs6lvrhad] {
    background: #eaf3ff;
}

.sopd-balance-item--due .sopd-value[b-lcs6lvrhad] {
    color: var(--accent-fill-rest, #0f6cbd);
}

.sopd-label[b-lcs6lvrhad] {
    font-size: 12px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.sopd-value[b-lcs6lvrhad] {
    font-size: 16px;
    font-weight: 700;
}

.sopd-grid[b-lcs6lvrhad] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    align-items: start;
}

.sopd-amount[b-lcs6lvrhad] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.sopd-quick[b-lcs6lvrhad] {
    display: flex;
    gap: 6px;
}

.sopd-chip[b-lcs6lvrhad] {
    padding: 2px 10px;
    border: 1px solid var(--colorNeutralStroke2, #e1e1e1);
    border-radius: 999px;
    background: var(--colorNeutralBackground1, #ffffff);
    font: inherit;
    font-size: 12px;
    color: var(--colorNeutralForeground2, #424242);
    cursor: pointer;
}

.sopd-chip:hover[b-lcs6lvrhad] {
    border-color: var(--accent-fill-rest, #0f6cbd);
    color: var(--accent-fill-rest, #0f6cbd);
}

.sopd-suffix[b-lcs6lvrhad] {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    font-size: 13px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.sopd-hint[b-lcs6lvrhad] {
    font-size: 12px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.sopd-error[b-lcs6lvrhad] {
    font-size: 12px;
    color: var(--colorStatusDangerForeground1, #b10e1c);
}

@media (max-width: 600px) {
    .sopd-balance[b-lcs6lvrhad],
    .sopd-grid[b-lcs6lvrhad] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* FluentStack doesn't stretch its children, so the summary tiles and the field grid are set to the
   dialog's full width explicitly (otherwise they shrink to their content). */
.sopd-balance[b-lcs6lvrhad],
.sopd-grid[b-lcs6lvrhad] {
    width: 100%;
    box-sizing: border-box;
}
/* _content/PSMS.Web/Components/Pages/SalesOrder/SalesOrders.razor.rz.scp.css */
.so-summary-grid[b-a9iqa8z024] {
    width: 100%;
}

/* each stat card fills its FluentGrid cell and matches its row's height (same as Payments) */
.so-summary-grid[b-a9iqa8z024]  .basic-value-card {
    display: block;
    width: 100%;
    height: 100%;
}

.so-link[b-a9iqa8z024] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--colorBrandForegroundLink, #0f6cbd);
    cursor: pointer;
}

.so-link:hover[b-a9iqa8z024] { text-decoration: underline; }

.so-cell-stack[b-a9iqa8z024] { display: flex; flex-direction: column; line-height: 1.3; }

.so-hint[b-a9iqa8z024] { font-size: 12px; color: var(--colorNeutralForeground3); }

.so-empty[b-a9iqa8z024] {
    padding: 24px 16px;
    font-size: 13px;
    text-align: center;
    color: var(--colorNeutralForeground3);
}
/* _content/PSMS.Web/Components/Pages/SalesOrder/SalesOrderStatusPill.razor.rz.scp.css */
.so-pill[b-2buj24hf73] {
    display: inline-flex;
    align-items: center;
    padding: 1px 10px;
    border: 1px solid;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.so-pill--draft[b-2buj24hf73] { border-color: #d9dce1; background: #f3f4f6; color: #4b5563; }
.so-pill--confirmed[b-2buj24hf73] { border-color: #bfd4fb; background: #eef4ff; color: #1d4ed8; }
.so-pill--readyforrelease[b-2buj24hf73] { border-color: #fde2a7; background: #fff7e6; color: #b45309; }
.so-pill--completed[b-2buj24hf73] { border-color: #b7e4c7; background: #e9f7ef; color: #0e7c4a; }
.so-pill--cancelled[b-2buj24hf73] { border-color: #f5c2c2; background: #fdecec; color: #b42318; }
/* _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/Pages/User/Overview/UserProductionAccess.razor.rz.scp.css */
/* ::deep — .upa-card lands on FluentCard's own rendered element, outside this file's scope. */
[b-24dv2i1rzq] .upa-card {
    width: 100%;
    max-width: 720px;
    padding: 0;
}

.upa-header[b-24dv2i1rzq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--colorNeutralStroke2, #e5e7eb);
}

.upa-header-text[b-24dv2i1rzq] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.upa-title[b-24dv2i1rzq] {
    font-size: 14px;
    font-weight: 600;
    color: var(--colorNeutralForeground1, #1b1a19);
}

.upa-subtitle[b-24dv2i1rzq] {
    font-size: 12px;
    line-height: 1.45;
    color: var(--colorNeutralForeground3, #6b7280);
    max-width: 52ch;
}

.upa-header-side[b-24dv2i1rzq] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
    line-height: 1.1;
}

.upa-count[b-24dv2i1rzq] {
    font-size: 20px;
    font-weight: 700;
    color: var(--colorNeutralForeground1, #1b1a19);
}

.upa-count-sep[b-24dv2i1rzq] {
    margin: 0 2px;
    font-weight: 400;
    color: var(--colorNeutralForeground3, #9ca3af);
}

.upa-count-label[b-24dv2i1rzq] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--colorNeutralForeground3, #9ca3af);
}

.upa-loading[b-24dv2i1rzq],
.upa-empty[b-24dv2i1rzq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 16px;
    font-size: 13px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.upa-error[b-24dv2i1rzq] {
    padding: 12px 14px 0;
}

.upa-toolbar[b-24dv2i1rzq] {
    display: flex;
    gap: 6px;
    padding: 12px 16px 4px;
}

/* ---- Pipeline ---- */
.upa-pipeline[b-24dv2i1rzq] {
    list-style: none;
    margin: 0;
    padding: 6px 16px 14px;
}

.upa-step[b-24dv2i1rzq] {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: 12px;
    min-height: 54px;
}

.upa-node[b-24dv2i1rzq] {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upa-node[b-24dv2i1rzq]::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background: var(--colorNeutralStroke2, #e5e7eb);
}

.upa-step:first-child .upa-node[b-24dv2i1rzq]::before {
    top: 50%;
}

.upa-step:last-child .upa-node[b-24dv2i1rzq]::before {
    bottom: 50%;
}

.upa-step.is-granted .upa-node[b-24dv2i1rzq]::before {
    background: var(--colorBrandStroke2, #9ec2f7);
}

.upa-node-dot[b-24dv2i1rzq] {
    position: relative;
    z-index: 1;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    background: var(--colorNeutralBackground1, #ffffff);
    border: 2px solid var(--colorNeutralStroke2, #d5d9df);
    color: var(--colorNeutralForeground3, #6b7280);
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.upa-step.is-granted .upa-node-dot[b-24dv2i1rzq] {
    background: var(--colorBrandBackground, #2563eb);
    border-color: var(--colorBrandBackground, #2563eb);
    color: #ffffff;
}

.upa-step.is-pending[b-24dv2i1rzq] {
    opacity: 0.55;
}

.upa-step-body[b-24dv2i1rzq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 8px 0;
}

.upa-step-main[b-24dv2i1rzq] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.upa-step-name[b-24dv2i1rzq] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--colorNeutralForeground1, #1b1a19);
}

.upa-step.is-granted .upa-step-name[b-24dv2i1rzq] {
    color: var(--colorNeutralForeground1, #1b1a19);
}

.upa-step:not(.is-granted) .upa-step-name[b-24dv2i1rzq] {
    color: var(--colorNeutralForeground2, #4b5563);
}

.upa-step-hint[b-24dv2i1rzq] {
    font-size: 11.5px;
    color: var(--colorNeutralForeground3, #9ca3af);
}

.upa-step-toggle[b-24dv2i1rzq] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

@media (max-width: 520px) {
    .upa-header[b-24dv2i1rzq] {
        flex-direction: column;
    }

    .upa-header-side[b-24dv2i1rzq] {
        flex-direction: row;
        align-items: baseline;
        gap: 4px;
    }
}
/* _content/PSMS.Web/Components/Shared/Assistant/AssistantBlock.razor.rz.scp.css */
.ab-block[b-mg2qwbvwmq] {
    background: var(--colorNeutralBackground1, #fff);
    border: 1px solid #e8e8ef;
    border-radius: 10px;
    padding: 12px 14px;
    min-width: 0;
}
.ab-title[b-mg2qwbvwmq] { font-weight: 600; font-size: 13px; margin-bottom: 10px; color: #111827; }
/* _content/PSMS.Web/Components/Shared/Assistant/AssistantChartBlock.razor.rz.scp.css */
.ab-chart[b-a3h0s2hjvp] { min-width: 0; width: 100%; }
/* _content/PSMS.Web/Components/Shared/Assistant/AssistantJobOrdersBlock.razor.rz.scp.css */
.ab-jo-grid[b-iuyir8fmmn] { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ab-jo[b-iuyir8fmmn] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
    font: inherit;
    color: inherit;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: var(--colorNeutralBackground1, #fff);
    cursor: pointer;
    min-width: 0;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ab-jo:hover[b-iuyir8fmmn] { border-color: #c4b8f0; box-shadow: 0 2px 8px rgba(91, 63, 191, 0.08); }
.ab-jo:focus-visible[b-iuyir8fmmn] { outline: 2px solid #5b3fbf; outline-offset: 2px; }
.ab-jo-head[b-iuyir8fmmn] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ab-jo-no[b-iuyir8fmmn] { font-weight: 700; font-size: 13px; }
.ab-jo-status[b-iuyir8fmmn] { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.ab-jo-customer[b-iuyir8fmmn] { font-size: 13px; font-weight: 500; }
.ab-jo-items[b-iuyir8fmmn] { font-size: 12px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-jo-dates[b-iuyir8fmmn] { font-size: 11px; color: #6b7280; display: flex; gap: 4px; flex-wrap: wrap; }
.ab-jo-money[b-iuyir8fmmn] { display: flex; gap: 16px; margin-top: 6px; padding-top: 8px; border-top: 1px dashed #e5e7eb; }
.ab-jo-money div[b-iuyir8fmmn] { display: flex; flex-direction: column; }
.ab-jo-money span[b-iuyir8fmmn] { font-size: 11px; color: #6b7280; }
.ab-jo-money strong[b-iuyir8fmmn] { font-size: 13px; font-variant-numeric: tabular-nums; }
.ab-jo-money .has-balance strong[b-iuyir8fmmn] { color: #b45309; }
/* _content/PSMS.Web/Components/Shared/Assistant/AssistantStatsBlock.razor.rz.scp.css */
.ab-stats[b-mlt8h46cep] { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
/* _content/PSMS.Web/Components/Shared/Assistant/AssistantTableBlock.razor.rz.scp.css */
.ab-table-wrap[b-5bj5uu9f75] { overflow-x: auto; max-width: 100%; border: 1px solid #eceef2; border-radius: 8px; }
.ab-table[b-5bj5uu9f75] { width: 100%; border-collapse: collapse; font-size: 13px; }
.ab-table th[b-5bj5uu9f75],
.ab-table td[b-5bj5uu9f75] { padding: 8px 12px; text-align: left; white-space: nowrap; border-bottom: 1px solid #eef0f3; }
.ab-table th[b-5bj5uu9f75] {
    background: #f8f7fc;
    font-size: 12px;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    user-select: none;
    position: sticky;
    top: 0;
}
.ab-table th:hover[b-5bj5uu9f75] { color: #111827; }
.ab-table .num[b-5bj5uu9f75] { text-align: right; font-variant-numeric: tabular-nums; }
.ab-table tbody tr:last-child td[b-5bj5uu9f75] { border-bottom: 0; }
.ab-table tbody tr.is-link[b-5bj5uu9f75] { cursor: pointer; }
.ab-table tbody tr:hover td[b-5bj5uu9f75] { background: #faf9ff; }
.ab-sort[b-5bj5uu9f75] { font-size: 9px; margin-left: 4px; }
.ab-status[b-5bj5uu9f75] {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid;
}
.ab-more[b-5bj5uu9f75] { margin-top: 6px; font-size: 12px; color: #6b7280; }
/* _content/PSMS.Web/Components/Shared/AssistantReplyRenderer.razor.rz.scp.css */
.pia-md[b-o2aq2gcmfw] { line-height: 1.55; overflow-wrap: anywhere; min-width: 0; }
.pia-md[b-o2aq2gcmfw]  p { margin: 0 0 8px; }
.pia-md[b-o2aq2gcmfw]  p:last-child,
.pia-md[b-o2aq2gcmfw]  ul:last-child,
.pia-md[b-o2aq2gcmfw]  ol:last-child,
.pia-md[b-o2aq2gcmfw]  pre:last-child { margin-bottom: 0; }
.pia-md[b-o2aq2gcmfw]  ul,
.pia-md[b-o2aq2gcmfw]  ol { margin: 0 0 8px; padding-left: 22px; }
.pia-md[b-o2aq2gcmfw]  li { margin: 3px 0; }
.pia-md[b-o2aq2gcmfw]  h3,
.pia-md[b-o2aq2gcmfw]  h4,
.pia-md[b-o2aq2gcmfw]  h5,
.pia-md[b-o2aq2gcmfw]  h6 { margin: 10px 0 6px; font-size: 14px; font-weight: 600; line-height: 1.3; }
.pia-md[b-o2aq2gcmfw]  h3 { font-size: 15px; }
.pia-md[b-o2aq2gcmfw]  strong { font-weight: 600; }
.pia-md[b-o2aq2gcmfw]  code {
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: 12.5px;
    background: rgba(0, 0, 0, 0.06);
    padding: 1px 5px;
    border-radius: 4px;
}
.pia-md[b-o2aq2gcmfw]  pre {
    margin: 0 0 8px;
    padding: 10px 12px;
    border-radius: 6px;
    overflow-x: auto;
    background: #1f2937;
    color: #f3f4f6;
}
.pia-md[b-o2aq2gcmfw]  pre code { background: none; padding: 0; color: inherit; white-space: pre; }
.pia-md[b-o2aq2gcmfw]  a { color: var(--colorBrandForeground1, #0f6cbd); text-decoration: underline; }
.pia-md[b-o2aq2gcmfw]  .md-table { overflow-x: auto; margin: 4px 0 10px; max-width: 100%; }
.pia-md[b-o2aq2gcmfw]  .md-table:last-child { margin-bottom: 0; }
.pia-md[b-o2aq2gcmfw]  table {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    background: var(--colorNeutralBackground1, #fff);
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    min-width: 100%;
}
.pia-md[b-o2aq2gcmfw]  th,
.pia-md[b-o2aq2gcmfw]  td { padding: 7px 12px; text-align: left; white-space: nowrap; border-bottom: 1px solid #eef0f3; }
.pia-md[b-o2aq2gcmfw]  th { background: #f8f7fc; font-weight: 600; font-size: 12px; color: #4b5563; }
.pia-md[b-o2aq2gcmfw]  tbody tr:last-child td { border-bottom: 0; }
.pia-md[b-o2aq2gcmfw]  tbody tr:hover td { background: #faf9ff; }

.pia-chart[b-o2aq2gcmfw] {
    margin: 8px 0 10px;
    padding: 12px;
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    border-radius: 8px;
    background: var(--colorNeutralBackground1, #fff);
}
.pia-chart-title[b-o2aq2gcmfw] { display: block; margin-bottom: 8px; font-weight: 600; font-size: 13px; }
/* _content/PSMS.Web/Components/Shared/AuditCard.razor.rz.scp.css */
.audit-card[b-vediwx4voj] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    border: 1px solid var(--colorNeutralStroke2, #e1e1e1);
    border-radius: 8px;
    background: var(--colorNeutralBackground1, #ffffff);
    font-size: 13px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.audit-card-half[b-vediwx4voj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.audit-card-icon[b-vediwx4voj] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--colorNeutralForeground3, #6b7280);
}

.audit-card-avatar[b-vediwx4voj] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.audit-card-avatar--muted[b-vediwx4voj] {
    background: var(--colorNeutralBackground3, #e1e1e1);
    color: var(--colorNeutralForeground3, #6b7280);
}

.audit-card-avatar--photo[b-vediwx4voj] {
    object-fit: cover;
    background: var(--colorNeutralBackground3, #e1e1e1);
}

.audit-card-text[b-vediwx4voj] {
    color: var(--colorNeutralForeground2, #424242);
}

.audit-card-text strong[b-vediwx4voj] {
    font-weight: 600;
    color: var(--colorNeutralForeground1, #1f2937);
}

.audit-card-text--muted[b-vediwx4voj] {
    color: var(--colorNeutralForeground3, #6b7280);
}

.audit-card-sep[b-vediwx4voj] {
    margin: 0 2px;
    color: var(--colorNeutralStroke2, #d1d5db);
}

.audit-card-divider[b-vediwx4voj] {
    width: 1px;
    height: 20px;
    background: var(--colorNeutralStroke2, #d1d5db);
}

.audit-card-version[b-vediwx4voj] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--colorNeutralBackground3, #f0f1f3);
    color: var(--colorNeutralForeground2, #424242);
    font-weight: 600;
    font-size: 12px;
}

@@media (max-width: 599.98px) {
    .audit-card[b-vediwx4voj] {
        gap: 10px;
    }

    .audit-card-divider[b-vediwx4voj] {
        display: none;
    }
}
/* _content/PSMS.Web/Components/Shared/CompanyProfile/BranchMultiSelect.razor.rz.scp.css */
/* Tiles layout (opt-in via the Tiles parameter): a count header, then one card per branch. */
.bms-header[b-64z0ldeaid] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.bms-count[b-64z0ldeaid] {
    font-size: 12px;
    color: var(--colorNeutralForeground3);
}

.bms-tiles[b-64z0ldeaid] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    width: 100%;
}

.bms-tile[b-64z0ldeaid] {
    display: flex;
    flex-direction: column;
    padding: 6px 12px 8px;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    transition: border-color 0.12s, background-color 0.12s;
}

.bms-tile--on[b-64z0ldeaid] {
    border-color: var(--colorBrandStroke1, #2563eb);
    background: var(--colorBrandBackground2, #eff6ff);
}

/* The checkbox's own intrinsic height is larger than wanted, so it sits in a fixed-height row. */
.bms-check[b-64z0ldeaid] {
    display: flex;
    align-items: center;
    height: 32px;
    overflow: hidden;
}

.bms-sub[b-64z0ldeaid] {
    padding-left: 28px;
    font-size: 12px;
    color: var(--colorNeutralForeground3);
}
/* _content/PSMS.Web/Components/Shared/DashboardSkeleton.razor.rz.scp.css */
.dash-skeleton[b-sjn2otqune] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.ds-stats[b-sjn2otqune],
.ds-panels[b-sjn2otqune] {
    display: grid;
    grid-template-columns: var(--ds-template, repeat(var(--ds-cols), minmax(0, 1fr)));
    gap: 12px;
}

.ds-card[b-sjn2otqune] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
    padding: 16px;
    border: 1px solid var(--colorNeutralStroke2, #e1e1e1);
    border-radius: 8px;
    background: var(--colorNeutralBackground1, #ffffff);
}

.ds-stat[b-sjn2otqune] { min-height: 104px; }

.ds-header[b-sjn2otqune] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0 8px;
}

.ds-bar--title[b-sjn2otqune] { height: 22px; width: 30%; }

.ds-bar[b-sjn2otqune],
.ds-block[b-sjn2otqune] {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, #eceef1 25%, #f6f7f9 37%, #eceef1 63%);
    background-size: 400% 100%;
    animation: ds-shimmer-b-sjn2otqune 1.4s ease infinite;
}

.ds-bar[b-sjn2otqune] { height: 12px; }
.ds-bar--value[b-sjn2otqune] { height: 24px; width: 35%; }
.ds-block[b-sjn2otqune] { height: 220px; width: 100%; }

@media (max-width: 1100px) {
    .ds-stats[b-sjn2otqune], .ds-panels[b-sjn2otqune] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .ds-stats[b-sjn2otqune], .ds-panels[b-sjn2otqune] { grid-template-columns: minmax(0, 1fr); }
}

@keyframes ds-shimmer-b-sjn2otqune {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .ds-bar[b-sjn2otqune], .ds-block[b-sjn2otqune] { animation: none; }
}
/* _content/PSMS.Web/Components/Shared/Inventory/ItemPickerDialog.razor.rz.scp.css */
.ipk-wrap[b-7ume6oko0g] { display: flex; flex-direction: column; gap: 10px; width: 100%; }

.ipk-list[b-7ume6oko0g] {
    display: flex;
    flex-direction: column;
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
}

.ipk-row[b-7ume6oko0g] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px 100px 168px;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--colorNeutralStroke3, #f0f0f0);
    font-size: 13px;
}

.ipk-row:last-child[b-7ume6oko0g] { border-bottom: 0; }

.ipk-head[b-7ume6oko0g] {
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: 12px;
    font-weight: 600;
    color: var(--colorNeutralForeground3);
    background: var(--colorNeutralBackground2, #fafafa);
}

.ipk-row--on[b-7ume6oko0g] { background: var(--colorBrandBackground2, #ebf3fc); }

.ipk-item[b-7ume6oko0g] { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }

.ipk-hint[b-7ume6oko0g] { font-size: 12px; color: var(--colorNeutralForeground3); }

.ipk-num[b-7ume6oko0g] { text-align: right; white-space: nowrap; }

.ipk-ok[b-7ume6oko0g] { color: #0e7c4a; }
.ipk-bad[b-7ume6oko0g] { color: #dc2626; }

.ipk-stepper[b-7ume6oko0g] {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    border-radius: 6px;
    background: var(--colorNeutralBackground1);
}

.ipk-stepper button[b-7ume6oko0g] {
    width: 28px;
    padding: 0;
    border: 0;
    background: var(--colorNeutralBackground2, #fafafa);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.ipk-stepper button:disabled[b-7ume6oko0g] { cursor: default; opacity: 0.4; }

.ipk-stepper input[b-7ume6oko0g] {
    width: 52px;
    padding: 4px 6px;
    border: 0;
    border-left: 1px solid var(--colorNeutralStroke2);
    border-right: 1px solid var(--colorNeutralStroke2);
    font: inherit;
    text-align: center;
}

.ipk-stepper input:focus[b-7ume6oko0g] { outline: none; background: var(--colorBrandBackground2, #ebf3fc); }

.ipk-empty[b-7ume6oko0g] {
    padding: 20px;
    font-size: 13px;
    text-align: center;
    color: var(--colorNeutralForeground3);
}

.ipk-tools[b-7ume6oko0g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

/* Unit the quantity is typed in (Roll for weighed-per-roll items like fabric), under the stepper. */
.ipk-unit[b-7ume6oko0g] {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: var(--colorNeutralForeground3, #6b7280);
    text-align: right;
}

/* Two-unit entry (base + secondary) for items with a secondary unit: two small boxes side by side,
   each with its unit name inside on the right. */
.ipk-qty2[b-7ume6oko0g] {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}

.ipk-qbox[b-7ume6oko0g] {
    display: inline-flex;
    align-items: center;
    width: 81px;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    border-radius: 6px;
    background: var(--colorNeutralBackground1);
    overflow: hidden;
}

.ipk-qbox:focus-within[b-7ume6oko0g] { border-color: var(--colorBrandStroke1, #0f6cbd); }

.ipk-qbox input[b-7ume6oko0g] {
    width: 100%;
    min-width: 0;
    padding: 4px 4px 4px 6px;
    border: 0;
    font: inherit;
    text-align: right;
    background: transparent;
}

.ipk-qbox input:focus[b-7ume6oko0g] { outline: none; }

.ipk-qbox span[b-7ume6oko0g] {
    flex: 0 0 auto;
    max-width: 38px;
    padding-right: 6px;
    font-size: 10px;
    color: var(--colorNeutralForeground3, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ipk-block[b-7ume6oko0g] { display: block; }


.ipk-unit[b-7ume6oko0g] { margin-left: 6px; font-size: 11px; color: var(--colorNeutralForeground3, #6b7280); }
.ipk-qty2[b-7ume6oko0g] { align-items: center; }

/* The input fills the whole box (unit tag drawn over it, click-through), so a click anywhere in the box
   lands in the field instead of selecting the unit text. */
.ipk-qbox[b-7ume6oko0g] { position: relative; padding: 0; cursor: text; }
.ipk-qbox input[b-7ume6oko0g] { width: 100%; padding: 4px 30px 4px 6px; box-sizing: border-box; }
.ipk-qbox span[b-7ume6oko0g] { position: absolute; right: 0; top: 50%; transform: translateY(-50%); pointer-events: none; user-select: none; }
/* _content/PSMS.Web/Components/Shared/KpiCards/AlertCard.razor.rz.scp.css */
.alert-card[b-t937e8oiyb] {
    height: 100%;
    min-height: 132px;
    padding: 20px 22px;
    border-radius: 16px;
    background-color: var(--colorNeutralBackground1, #ffffff);
    border: 1px solid var(--colorNeutralStroke2, #ececf0);
    box-sizing: border-box;
    transition: box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;
}

.alert-card:hover[b-t937e8oiyb] {
    transform: translateY(-2px);
    border-color: var(--colorNeutralStroke1, #d7d9e0);
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.10);
}

.ac-layout[b-t937e8oiyb] {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 100%;
}

.ac-icon[b-t937e8oiyb] {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 14px;
    background: #fdecec;
    color: #e0484d;
}

.ac-icon[b-t937e8oiyb]  svg {
    width: 24px;
    height: 24px;
}

.ac-body[b-t937e8oiyb] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ac-title[b-t937e8oiyb] {
    font-size: 14px;
    line-height: 1.35;
    color: var(--colorNeutralForeground3, #5b6172);
}

.ac-value[b-t937e8oiyb] {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: #d1242b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ac-alert[b-t937e8oiyb] {
    font-size: 13px;
    line-height: 1.35;
    color: #d1242b;
}
/* _content/PSMS.Web/Components/Shared/KpiCards/BasicValueCard.razor.rz.scp.css */
.basic-value-card[b-969ep4ige3] {
    height: 100%;
    min-height: 132px;
    padding: 20px 22px;
    border-radius: 16px;
    background-color: var(--colorNeutralBackground1, #ffffff) !important;
    border: 1px solid var(--colorNeutralStroke2, #ececf0);
    box-sizing: border-box;
    transition: box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;
}

.basic-value-card:hover[b-969ep4ige3] {
    transform: translateY(-2px);
    border-color: var(--colorNeutralStroke1, #d7d9e0);
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.10);
}

.bvc-layout[b-969ep4ige3] {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 100%;
}

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

.bvc-icon[b-969ep4ige3]  svg {
    width: 24px;
    height: 24px;
}

.bvc-body[b-969ep4ige3] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.bvc-title[b-969ep4ige3] {
    font-size: 14px;
    line-height: 1.35;
    color: var(--colorNeutralForeground3, #5b6172);
}

.bvc-value[b-969ep4ige3] {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--colorNeutralForeground1, #1f2430);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.basic-value-card--compact .bvc-value[b-969ep4ige3] {
    font-size: 18px;
}

.bvc-supporting[b-969ep4ige3] {
    font-size: 13px;
    line-height: 1.35;
    color: var(--colorNeutralForeground3, #8a90a0);
}
/* _content/PSMS.Web/Components/Shared/KpiCards/ComparisonCard.razor.rz.scp.css */
.comparison-card[b-9a8z6cdxqt] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--colorNeutralStroke2, #ececf0);
    box-sizing: border-box;
    background-color: var(--colorNeutralBackground1, #ffffff) !important;
}

/* Header: icon tile, title + description, optional "..." button */
.cc-header[b-9a8z6cdxqt] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cc-icon[b-9a8z6cdxqt] {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border-radius: 10px;
    background: #f1efff;
}

.cc-heading[b-9a8z6cdxqt] {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
    padding-top: 1px;
}

.cc-title[b-9a8z6cdxqt] {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--colorNeutralForeground1);
}

.cc-description[b-9a8z6cdxqt] {
    font-size: 12px;
    line-height: 1.3;
    color: var(--colorNeutralForeground3);
}

.cc-more[b-9a8z6cdxqt] {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--colorNeutralBackground3, #f3f3f6);
    color: var(--colorNeutralForeground3);
    cursor: pointer;
}

.cc-more:hover[b-9a8z6cdxqt] {
    background: var(--colorNeutralBackground3Hover, #ebebef);
}

/* Left / right value rows */
.cc-rows[b-9a8z6cdxqt] {
    display: flex;
    flex-direction: column;
}

.cc-row[b-9a8z6cdxqt] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.cc-row + .cc-row[b-9a8z6cdxqt] {
    border-top: 1px solid var(--colorNeutralStroke2);
}

.cc-dot[b-9a8z6cdxqt] {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    margin: 0 4px;
    border-radius: 50%;
}

.cc-dot--left[b-9a8z6cdxqt] {
    background: #60a5fa;
    box-shadow: 0 0 0 4px #e8f2ff;
}

.cc-dot--right[b-9a8z6cdxqt] {
    background: #34b77a;
    box-shadow: 0 0 0 4px #e3f6ec;
}

.cc-label[b-9a8z6cdxqt] {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--colorNeutralForeground2);
}

.cc-value[b-9a8z6cdxqt] {
    overflow: hidden;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cc-value--left[b-9a8z6cdxqt] {
    color: #1f5fe0;
}

.cc-value--right[b-9a8z6cdxqt] {
    color: #15935f;
}

/* Summary panel with percentage + progress bar */
.cc-summary[b-9a8z6cdxqt] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 8px 12px;
    border-radius: 10px;
    background: #f6f4ff;
}

.cc-summary-icon[b-9a8z6cdxqt] {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border-radius: 50%;
    background: #e6e0ff;
    color: #5b3fbf;
    font-size: 13px;
    font-weight: 700;
}

.cc-summary-body[b-9a8z6cdxqt] {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}

.cc-summary-top[b-9a8z6cdxqt] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.cc-summary-label[b-9a8z6cdxqt] {
    font-size: 12px;
    font-weight: 600;
    color: var(--colorNeutralForeground2);
}

.cc-summary-value[b-9a8z6cdxqt] {
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
    color: #4f2fd8;
}

.cc-progress[b-9a8z6cdxqt] {
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #e9e5fb;
}

.cc-progress-fill[b-9a8z6cdxqt] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #5b3fe0;
    transition: width 0.4s ease;
}
/* _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: 16px;
    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/SplitValueCard.razor.rz.scp.css */
.split-value-card[b-h2ccef9n4g] {
    height: 100%;
    min-height: 0;
    padding: 14px 16px;
    border-radius: 16px;
    background-color: var(--colorNeutralBackground1, #ffffff);
    border: 1px solid var(--colorNeutralStroke2, #ececf0);
    box-sizing: border-box;
    transition: box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;
}

.split-value-card:hover[b-h2ccef9n4g] {
    transform: translateY(-2px);
    border-color: var(--colorNeutralStroke1, #d7d9e0);
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.10);
}

.svc-layout[b-h2ccef9n4g] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.svc-icon[b-h2ccef9n4g] {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 11px;
    /* background + text color are set inline per-card via the Accent parameter */
}

.svc-icon[b-h2ccef9n4g]  svg {
    width: 18px;
    height: 18px;
}

.svc-body[b-h2ccef9n4g] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.svc-title[b-h2ccef9n4g] {
    font-size: 13px;
    line-height: 1.3;
    color: var(--colorNeutralForeground3, #5b6172);
}

.svc-value[b-h2ccef9n4g] {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--colorNeutralForeground1, #1f2430);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.svc-segments[b-h2ccef9n4g] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
}

.svc-segment[b-h2ccef9n4g] {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding: 4px 6px;
    border-radius: 7px;
    /* background is set inline per-segment via its own Accent */
}

.svc-segment-icon[b-h2ccef9n4g] {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 999px;
    /* background + text color are set inline per-segment via its own Accent */
}

.svc-segment-icon[b-h2ccef9n4g]  svg {
    width: 9px;
    height: 9px;
}

.svc-segment-body[b-h2ccef9n4g] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.svc-segment-label[b-h2ccef9n4g] {
    font-size: 10px;
    line-height: 1.2;
    color: var(--colorNeutralForeground3, #5b6172);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.svc-segment-value[b-h2ccef9n4g] {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--colorNeutralForeground1, #1f2430);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* _content/PSMS.Web/Components/Shared/KpiCards/StatusCountCard.razor.rz.scp.css */
.status-count-card[b-x2pfhdykl9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--colorNeutralStroke2, #ececf0);
    box-sizing: border-box;
    background-color: var(--colorNeutralBackground1, #ffffff) !important;
}

/* Header: icon tile + title/description */
.sc-header[b-x2pfhdykl9] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.sc-icon[b-x2pfhdykl9] {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border-radius: 10px;
}

.sc-heading[b-x2pfhdykl9] {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
    padding-top: 1px;
}

.sc-title[b-x2pfhdykl9] {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--colorNeutralForeground1);
}

.sc-description[b-x2pfhdykl9] {
    font-size: 12px;
    line-height: 1.3;
    color: var(--colorNeutralForeground3);
}

/* Status rows: tinted dot, label, coloured count */
.sc-rows[b-x2pfhdykl9] {
    display: flex;
    flex-direction: column;
}

.sc-row[b-x2pfhdykl9] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.sc-row + .sc-row[b-x2pfhdykl9] {
    border-top: 1px solid var(--colorNeutralStroke2);
}

.sc-dot[b-x2pfhdykl9] {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    margin: 0 4px;
    border-radius: 50%;
}

.sc-label[b-x2pfhdykl9] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--colorNeutralForeground2);
}

.sc-value[b-x2pfhdykl9] {
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}
/* _content/PSMS.Web/Components/Shared/KpiCards/TargetProgressCard.razor.rz.scp.css */
.target-progress-card[b-q9fvs9vlid] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--colorNeutralStroke2, #ececf0);
    box-sizing: border-box;
    background-color: var(--colorNeutralBackground1, #ffffff) !important;
}

/* Header: icon tile + title/description, divider below */
.tp-header[b-q9fvs9vlid] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--colorNeutralStroke2);
}

.tp-icon[b-q9fvs9vlid] {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border-radius: 10px;
}

.tp-heading[b-q9fvs9vlid] {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
    padding-top: 1px;
}

.tp-title[b-q9fvs9vlid] {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--colorNeutralForeground1);
}

.tp-description[b-q9fvs9vlid] {
    font-size: 12px;
    line-height: 1.3;
    color: var(--colorNeutralForeground3);
}

/* Value / target on the left, percentage on the right, bar below */
.tp-body[b-q9fvs9vlid] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
}

.tp-figures[b-q9fvs9vlid] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.tp-amounts[b-q9fvs9vlid] {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 6px;
}

.tp-value[b-q9fvs9vlid] {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    color: #4f2fd8;
}

.tp-target[b-q9fvs9vlid] {
    font-size: 13px;
    white-space: nowrap;
    color: var(--colorNeutralForeground3);
}

.tp-percent[b-q9fvs9vlid] {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
}

.tp-percent-value[b-q9fvs9vlid] {
    font-size: 18px;
    font-weight: 700;
    color: #4f2fd8;
}

.tp-percent-label[b-q9fvs9vlid] {
    font-size: 11px;
    color: var(--colorNeutralForeground3);
}

.tp-progress[b-q9fvs9vlid] {
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #e9e9ef;
}

.tp-progress-fill[b-q9fvs9vlid] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #5b3fe0;
    transition: width 0.4s ease;
}
/* _content/PSMS.Web/Components/Shared/KpiCards/TrendCard.razor.rz.scp.css */
.trend-card[b-3glfui3nse] {
    height: 100%;
    min-height: 132px;
    padding: 20px 22px;
    border-radius: 16px;
    background-color: var(--colorNeutralBackground1, #ffffff);
    border: 1px solid var(--colorNeutralStroke2, #ececf0);
    box-sizing: border-box;
    transition: box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;
}

.trend-card:hover[b-3glfui3nse] {
    transform: translateY(-2px);
    border-color: var(--colorNeutralStroke1, #d7d9e0);
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.10);
}

.tc-layout[b-3glfui3nse] {
    display: flex;
    align-items: center;
    gap: 18px;
    height: 100%;
}

.tc-icon[b-3glfui3nse] {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 14px;
    background: #e5f4ec;
    color: #1a9e54;
}

.tc-icon.trend-down[b-3glfui3nse] {
    background: #fdecec;
    color: #e0484d;
}

.tc-icon[b-3glfui3nse]  svg {
    width: 24px;
    height: 24px;
}

.tc-body[b-3glfui3nse] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tc-title[b-3glfui3nse] {
    font-size: 14px;
    line-height: 1.35;
    color: var(--colorNeutralForeground3, #5b6172);
}

.tc-value[b-3glfui3nse] {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--colorNeutralForeground1, #1f2430);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tc-trend[b-3glfui3nse] {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    color: #1a9e54;
}

.tc-trend.trend-down[b-3glfui3nse] {
    color: #e0484d;
}
/* _content/PSMS.Web/Components/Shared/ListSkeleton.razor.rz.scp.css */
.list-skeleton[b-o4ub22klb0] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--colorNeutralStroke2, #e1e1e1);
    border-radius: 8px;
    background: var(--colorNeutralBackground1, #ffffff);
    overflow: hidden;
}

.ls-row[b-o4ub22klb0] {
    display: grid;
    align-items: center;
    gap: 16px;
    height: 44px;
    padding: 0 18px;
    border-bottom: 1px solid var(--colorNeutralStroke2, #f0f0f0);
}

.ls-row:last-child[b-o4ub22klb0] {
    border-bottom: none;
}

.ls-header[b-o4ub22klb0] {
    background: var(--colorNeutralBackground2, #fafafa);
}

.ls-bar[b-o4ub22klb0] {
    display: block;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, #eceef1 25%, #f6f7f9 37%, #eceef1 63%);
    background-size: 400% 100%;
    animation: ls-shimmer-b-o4ub22klb0 1.4s ease infinite;
}

.ls-bar--header[b-o4ub22klb0] {
    width: 55%;
    height: 10px;
}

@keyframes ls-shimmer-b-o4ub22klb0 {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .ls-bar[b-o4ub22klb0] {
        animation: none;
    }
}
/* _content/PSMS.Web/Components/Shared/Pricing/PriceComponentsGrid.razor.rz.scp.css */
.price-components[b-3h9gdxj5uw] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.price-components-header[b-3h9gdxj5uw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.price-components-title[b-3h9gdxj5uw] {
    font-weight: 600;
}

.price-components-hint[b-3h9gdxj5uw] {
    margin: 2px 0 0;
    font-size: 11px;
    color: var(--neutral-foreground-3, #6b7280);
}

.price-components-empty[b-3h9gdxj5uw] {
    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;
}

/* Excel-like dense grid — same treatment as the TABLE production field: cells butt together on a
   1px gridline, inputs fill their cell with no chrome, a blue inset ring marks the active cell. */
.price-components-scroll[b-3h9gdxj5uw] {
    overflow-x: auto;
    border: 1px solid var(--colorNeutralStroke2, #d1d5db);
    border-radius: 4px;
}

.price-components-table[b-3h9gdxj5uw] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: var(--colorNeutralBackground1, #ffffff);
    table-layout: fixed;
}

/* Fixed layout needs every column's width set somewhere — Qty/Unit Price/Amount/row-action get an
   explicit narrow width via these <col>s, and Description (no <col> width) takes whatever's left,
   so a long matched-rule name (e.g. "Jersey Only · NBA Cut · Polydex 180gsm") gets priority over
   the numeric columns instead of being squeezed by them. */
.pc-col-qty[b-3h9gdxj5uw] { width: 64px; }
.pc-col-price[b-3h9gdxj5uw] { width: 100px; }
.pc-col-amount[b-3h9gdxj5uw] { width: 100px; }
.pc-col-action[b-3h9gdxj5uw] { width: 34px; }

.price-components-table th[b-3h9gdxj5uw],
.price-components-table td[b-3h9gdxj5uw] {
    border: 1px solid var(--colorNeutralStroke2, #e5e7eb);
    padding: 0;
}

.price-components-table th[b-3h9gdxj5uw] {
    padding: 5px 8px;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
    background: var(--colorNeutralBackground3, #f3f4f6);
    color: var(--colorNeutralForeground2, #374151);
}

.price-components-table th.num[b-3h9gdxj5uw],
.price-components-table td.num[b-3h9gdxj5uw] {
    text-align: right;
}

/* Outer edges: let the scroll container's border stand in, so it isn't doubled. */
.price-components-table tr > *:first-child[b-3h9gdxj5uw] { border-left: 0; }
.price-components-table tr > *:last-child[b-3h9gdxj5uw] { border-right: 0; }
.price-components-table thead tr > *[b-3h9gdxj5uw] { border-top: 0; }

.price-components-table tbody tr:hover td[b-3h9gdxj5uw] {
    background: var(--colorNeutralBackground2, #f9fafb);
}

.pc-cell[b-3h9gdxj5uw] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 0;
    margin: 0;
    padding: 5px 8px;
    background: transparent;
    font: inherit;
    color: inherit;
    line-height: 1.4;
}

.price-components-table td.num .pc-cell[b-3h9gdxj5uw] {
    text-align: right;
}

.pc-cell:focus[b-3h9gdxj5uw] {
    outline: 2px solid var(--colorBrandStroke1, #2563eb);
    outline-offset: -2px;
    background: var(--colorNeutralBackground1, #ffffff);
}

.pc-amount[b-3h9gdxj5uw] {
    padding: 5px 8px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.price-components-table .row-action[b-3h9gdxj5uw] {
    width: 34px;
    text-align: center;
    padding: 0;
}

.price-components-table td.row-action[b-3h9gdxj5uw],
.price-components-table tbody tr:hover td.row-action[b-3h9gdxj5uw] {
    background: var(--colorNeutralBackground1, #ffffff);
}

.price-components-table tfoot td[b-3h9gdxj5uw] {
    padding: 5px 8px;
    font-weight: 700;
    background: var(--colorNeutralBackground3, #f3f4f6);
    border-bottom: 0;
}
/* _content/PSMS.Web/Components/Shared/PrintTemplates/PrintSignatureBlock.razor.rz.scp.css */
.ps-signs[b-m7iwfwe2jt] {
    display: flex;
    gap: 28px;
    margin-top: 40px;
}

.ps-sign[b-m7iwfwe2jt] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: #424242;
}

.ps-line[b-m7iwfwe2jt] {
    width: 100%;
    border-top: 1px solid #3d3d3d;
    margin-top: 24px;
}

.ps-label[b-m7iwfwe2jt] {
    font-weight: 600;
}

.ps-name[b-m7iwfwe2jt] {
    color: #242424;
}

.ps-date[b-m7iwfwe2jt] {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    margin-top: 6px;
}

.ps-date-line[b-m7iwfwe2jt] {
    display: inline-block;
    width: 90px;
    border-bottom: 1px solid #616161;
}
/* _content/PSMS.Web/Components/Shared/PrintTemplates/ReportFooterBar.razor.rz.scp.css */
.rf-foot[b-34cjs1r4qb] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
    padding-top: 8px;
    border-top: 1px solid #3d3d3d;
    font-size: 10px;
    color: #424242;
}

.rf-foot > div[b-34cjs1r4qb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rf-right[b-34cjs1r4qb] {
    text-align: right;
}
/* _content/PSMS.Web/Components/Shared/PrintTemplates/ReportLetterhead.razor.rz.scp.css */
.rl-row[b-imku5zneqx] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 10px;
    color: #242424;
}

.rl-row.is-center[b-imku5zneqx] {
    flex-direction: column;
    align-items: center;
}

/* Coloured bar bleeds to the sheet edges (sheet padding is 16mm). */
.rl-row.has-bar[b-imku5zneqx] {
    color: #ffffff;
    margin: 0 -16mm;
    padding: 8mm 16mm;
}

.rl-head[b-imku5zneqx] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.rl-row.is-center .rl-head[b-imku5zneqx] {
    flex-direction: column;
    text-align: center;
    gap: 6px;
}

.rl-row.is-center .rl-aside[b-imku5zneqx] {
    align-self: stretch;
}

.rl-logo[b-imku5zneqx] {
    width: 72px;
    height: 72px;
    object-fit: contain;
    flex-shrink: 0;
}

.rl-info[b-imku5zneqx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 10.5px;
}

.rl-info strong[b-imku5zneqx] {
    font-size: 15px;
    line-height: 1.25;
}

.rl-aside[b-imku5zneqx] {
    flex-shrink: 0;
    text-align: right;
}

.rl-rule[b-imku5zneqx] {
    height: 1px;
    background: #3d3d3d;
}
/* _content/PSMS.Web/Components/Shared/Production/AssigneeRow.razor.rz.scp.css */
.assignee[b-kdopvxu2j9] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--neutral-stroke-divider-rest, #e5e7eb);
}

.assignee-avatar[b-kdopvxu2j9] {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.assignee-avatar--empty[b-kdopvxu2j9] {
    background: var(--neutral-fill-3-rest, #eef0f3);
    color: var(--neutral-foreground-3, #6b7280);
    border: 1px dashed var(--neutral-stroke-rest, #c9ced8);
}

.assignee-text[b-kdopvxu2j9] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.assignee-text strong[b-kdopvxu2j9] {
    font-size: 13px;
    color: var(--colorNeutralForeground1, #1f2937);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assignee-text span[b-kdopvxu2j9] {
    font-size: 11px;
    color: var(--neutral-foreground-3, #6b7280);
}
/* _content/PSMS.Web/Components/Shared/Production/AuthorizedUserSelect.razor.rz.scp.css */
/* Option rows for the FluentAutocomplete popup. Authored inside this component's <OptionTemplate>,
   so they carry this component's scope id even though FluentAutocomplete renders them in its own
   popup — no ::deep needed. */

.aus-opt[b-miwnu03rjz] {
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 2px 0;
}

.aus-opt-name[b-miwnu03rjz] {
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aus-opt-count[b-miwnu03rjz] {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--neutral-foreground-3, #6b7280);
}
/* _content/PSMS.Web/Components/Shared/Production/WorkflowStepper.razor.rz.scp.css */
.wf-empty[b-huo07ymoe7] {
    padding: 24px 12px;
    text-align: center;
    font-size: 13px;
    color: var(--colorNeutralForeground3, #6b7280);
    background: var(--colorNeutralBackground2, #f7f7f7);
    border-radius: 6px;
}

.wf-strip[b-huo07ymoe7] {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    overflow-x: auto;
    padding: 4px 2px 8px;
}

.wf-node[b-huo07ymoe7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 104px;
    flex: 0 0 auto;
}

/* --step / --step-soft are set inline per node (ProductionStepColors) — the step's stable
   identity colour. Status (done / active / hold / queued) layers on top of it. */
.wf-dot[b-huo07ymoe7] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid var(--step, var(--colorNeutralStroke2, #cbd2dc));
    background: var(--colorNeutralBackground1, #fff);
    color: var(--step, var(--colorNeutralForeground2, #6b7280));
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: box-shadow .12s ease;
}

.wf-dot:hover:not(:disabled)[b-huo07ymoe7] {
    box-shadow: 0 0 0 4px var(--step-soft, rgba(59, 91, 219, .16));
}

.wf-dot:disabled[b-huo07ymoe7] {
    cursor: default;
}

.wf-node.is-done .wf-dot[b-huo07ymoe7] {
    background: var(--step, var(--colorBrandBackground, #3b5bdb));
    border-color: var(--step, var(--colorBrandBackground, #3b5bdb));
    color: #fff;
}

.wf-node.is-active .wf-dot[b-huo07ymoe7] {
    border-color: var(--step, var(--colorBrandBackground, #3b5bdb));
    color: var(--step, var(--colorBrandBackground, #3b5bdb));
    background: var(--step-soft, transparent);
    box-shadow: 0 0 0 3px var(--step-soft, rgba(59, 91, 219, .14));
}

.wf-node.is-hold .wf-dot[b-huo07ymoe7] {
    border-color: #b91c1c;
    color: #b91c1c;
    background: #fdf1f1;
}

.wf-node.is-queued .wf-dot[b-huo07ymoe7] {
    /* the step colour is there but muted — it hasn't been reached yet */
    opacity: .55;
}

.wf-node.is-skipped .wf-dot[b-huo07ymoe7] {
    border-style: dashed;
    border-color: var(--colorNeutralStroke2, #cbd2dc);
    color: var(--colorNeutralForeground3, #9aa0a8);
}

/* Template step with no runtime row yet — shown for context but not actionable. */
.wf-node.is-locked[b-huo07ymoe7] {
    opacity: .5;
}

.wf-name[b-huo07ymoe7] {
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    max-width: 100px;
}

.wf-sub[b-huo07ymoe7] {
    font-size: 10px;
    color: var(--colorNeutralForeground3, #9aa0a8);
}

.wf-pill[b-huo07ymoe7] {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid var(--colorNeutralStroke2, #d5dbe3);
    color: var(--colorNeutralForeground2, #4b5563);
    background: var(--colorNeutralBackground1, #fff);
}

.wf-pill.is-done[b-huo07ymoe7] { background: #eaf0ff; border-color: #c7d4fb; color: #2f43a8; }
.wf-pill.is-active[b-huo07ymoe7] { background: #fdf1d8; border-color: #f2dca6; color: #8a6100; }
.wf-pill.is-hold[b-huo07ymoe7] { background: #fde3e3; border-color: #f4c4c4; color: #a81a1a; }

.wf-arrow[b-huo07ymoe7] {
    margin-top: 8px;
    color: var(--colorNeutralForeground3, #c2c8d0);
    flex: 0 0 auto;
}
/* _content/PSMS.Web/Components/Shared/PullToRefresh.razor.rz.scp.css */
.ptr-root[b-rvyl2drbkn] {
    --ptr-pull: 0px;
    --ptr-progress: 0;
    position: relative;
}

.ptr-loading-screen[b-rvyl2drbkn] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: var(--colorNeutralBackground1, #ffffff);
    color: var(--colorNeutralForeground1, #242424);
    font-size: 1rem;
    font-weight: 600;
}

.ptr-loading-screen img[b-rvyl2drbkn] {
    width: 76px;
    height: 76px;
    object-fit: contain;
    animation: ptr-logo-pulse-b-rvyl2drbkn 900ms ease-in-out infinite alternate;
}

@keyframes ptr-logo-pulse-b-rvyl2drbkn {
    from { opacity: .65; transform: scale(.96); }
    to { opacity: 1; transform: scale(1); }
}

/* Rubber-band: the whole content rides down with the finger while pulling. */
.ptr-content[b-rvyl2drbkn] {
    transform: translateY(var(--ptr-pull));
}

.ptr-root.ptr-animating .ptr-content[b-rvyl2drbkn] {
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Circular badge that drops down from under the top bar as the pull grows.
   position: fixed (not absolute) so .admin-content's overflow-y:auto can't clip it — an
   absolutely-positioned indicator inside the scroll pane gets cut off above the content top. */
.ptr-indicator[b-rvyl2drbkn] {
    position: fixed;
    top: var(--topbar-height, 52px);
    left: 50%;
    z-index: 60;
    display: grid;
    width: 34px;
    height: 34px;
    margin-left: -17px;
    place-items: center;
    border-radius: 50%;
    background: var(--colorNeutralBackground1, #ffffff);
    box-shadow: 0 3px 12px rgb(0 0 0 / 22%);
    opacity: var(--ptr-progress);
    transform: translateY(calc(var(--ptr-pull) - 40px));
    pointer-events: none;
}

.ptr-root.ptr-animating .ptr-indicator[b-rvyl2drbkn] {
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 160ms linear;
}

.ptr-spinner[b-rvyl2drbkn] {
    width: 17px;
    height: 17px;
    border: 2px solid var(--colorBrandStroke1, #0f6cbd);
    border-top-color: transparent;
    border-radius: 50%;
    /* Pre-release: wind up proportionally to how far the user has pulled. */
    transform: rotate(calc(var(--ptr-progress) * 280deg));
}

/* Past the trigger threshold — signal that releasing now will refresh. */
.ptr-root.ptr-ready .ptr-spinner[b-rvyl2drbkn] {
    border-color: var(--colorPaletteGreenBorderActive, #0e700e);
    border-top-color: transparent;
}

/* Refresh running: park the badge just below the top bar and spin freely. */
.ptr-root.ptr-refreshing .ptr-indicator[b-rvyl2drbkn] {
    opacity: 1;
    transform: translateY(24px);
}

.ptr-root.ptr-refreshing .ptr-spinner[b-rvyl2drbkn] {
    transform: none;
    animation: ptr-spin-b-rvyl2drbkn 700ms linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .ptr-root.ptr-animating .ptr-content[b-rvyl2drbkn],
    .ptr-root.ptr-animating .ptr-indicator[b-rvyl2drbkn] {
        transition-duration: 1ms;
    }

    .ptr-root.ptr-refreshing .ptr-spinner[b-rvyl2drbkn] {
        animation-duration: 1400ms;
    }
}
/* _content/PSMS.Web/Components/Shared/RowActionButtons.razor.rz.scp.css */
/* .rab is a plain wrapper so the ::deep rules below have a scoped ancestor - the buttons are
   Fluent components, which don't carry this file's scope attribute themselves. */
/* Block-level flex (not inline-flex): an inline box sits on the text baseline inside the grid cell,
   which leaves descender space under it and pushes the buttons above the row's true centre. */
.rab[b-aj0vxr2hp3] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    line-height: 0;
}

/* color covers an icon drawn with currentColor; the svg fill rule covers one that sets its own. */
[b-aj0vxr2hp3] .rab-view,
[b-aj0vxr2hp3] .rab-view svg {
    color: #3aa0f3 !important;
    fill: #3aa0f3 !important;
}

[b-aj0vxr2hp3] .rab-edit,
[b-aj0vxr2hp3] .rab-edit svg {
    color: #eaa300 !important;
    fill: #eaa300 !important;
}

[b-aj0vxr2hp3] .rab-delete,
[b-aj0vxr2hp3] .rab-delete svg {
    color: #d13438 !important;
    fill: #d13438 !important;
}

[b-aj0vxr2hp3] [disabled].rab-view, [b-aj0vxr2hp3] [disabled].rab-edit, [b-aj0vxr2hp3] [disabled].rab-delete {
    opacity: 0.45;
}

/* Each action sits in its own tinted, bordered box (same hue as its icon) so the three read as
   separate buttons rather than loose icons. */
[b-aj0vxr2hp3] .rab-view,
[b-aj0vxr2hp3] .rab-edit,
[b-aj0vxr2hp3] .rab-delete {
    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    line-height: 1;
    margin: 0 !important;
    vertical-align: middle;
    padding: 0 !important;
    border-radius: 5px !important;
    border: 1px solid transparent !important;
}

[b-aj0vxr2hp3] .rab-view {
    background: #eaf4fe !important;
    border-color: #b9dcfb !important;
}

[b-aj0vxr2hp3] .rab-view:hover {
    background: #d5eafd !important;
}

[b-aj0vxr2hp3] .rab-edit {
    background: #fff7e0 !important;
    border-color: #f5d98a !important;
}

[b-aj0vxr2hp3] .rab-edit:hover {
    background: #ffedbd !important;
}

[b-aj0vxr2hp3] .rab-delete {
    background: #fdecec !important;
    border-color: #f3b9bb !important;
}

[b-aj0vxr2hp3] .rab-delete:hover {
    background: #fbd9da !important;
}
/* _content/PSMS.Web/Components/Shared/SlideToConfirm.razor.rz.scp.css */
.stc[b-giiqh8z2q8] {
    --stc-height: 52px;
    --stc-knob: 44px;
    --stc-color: var(--accent-fill-rest, #0f6cbd);
    position: relative;
    width: 100%;
    height: var(--stc-height);
    overflow: hidden;
    border-radius: 999px;
    background: #e8f1fe;
    user-select: none;
}

/* Colour follows the knob so it's clear how far there is to go. */
.stc-fill[b-giiqh8z2q8] {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--stc-knob) + (100% - var(--stc-knob)) * var(--stc-pct) / 100);
    border-radius: 999px;
    background: var(--stc-color);
    opacity: 0.18;
    transition: width 0.15s ease;
}

.stc-label[b-giiqh8z2q8] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding-left: var(--stc-knob);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--stc-color);
    pointer-events: none;
}

.stc-range[b-giiqh8z2q8] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 4px;
    background: transparent;
    cursor: grab;
    -webkit-appearance: none;
    appearance: none;
}

.stc-range:active[b-giiqh8z2q8] { cursor: grabbing; }

.stc-range:focus-visible[b-giiqh8z2q8] { outline: 2px solid var(--stc-color); outline-offset: 2px; border-radius: 999px; }

.stc-range[b-giiqh8z2q8]::-webkit-slider-runnable-track { height: 100%; background: transparent; }

.stc-range[b-giiqh8z2q8]::-moz-range-track { height: 100%; background: transparent; }

/* The knob: a solid circle with a white arrow. */
.stc-range[b-giiqh8z2q8]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: var(--stc-knob);
    height: var(--stc-knob);
    margin-top: calc((var(--stc-height) - var(--stc-knob)) / 2);
    border: 0;
    border-radius: 50%;
    background: var(--stc-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M13.3 5.3a1 1 0 0 1 1.4 0l6 6a1 1 0 0 1 0 1.4l-6 6a1 1 0 1 1-1.4-1.4L17.6 13H4a1 1 0 1 1 0-2h13.6l-4.3-4.3a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E") center / 22px no-repeat;
    box-shadow: 0 2px 6px rgba(15, 108, 189, 0.35);
}

.stc-range[b-giiqh8z2q8]::-moz-range-thumb {
    width: var(--stc-knob);
    height: var(--stc-knob);
    border: 0;
    border-radius: 50%;
    background: var(--stc-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M13.3 5.3a1 1 0 0 1 1.4 0l6 6a1 1 0 0 1 0 1.4l-6 6a1 1 0 1 1-1.4-1.4L17.6 13H4a1 1 0 1 1 0-2h13.6l-4.3-4.3a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E") center / 22px no-repeat;
    box-shadow: 0 2px 6px rgba(15, 108, 189, 0.35);
}

.stc--done[b-giiqh8z2q8] { --stc-color: #16a34a; background: #e6f6ec; }

.stc--done .stc-fill[b-giiqh8z2q8] { opacity: 0.25; }

.stc--disabled[b-giiqh8z2q8] { opacity: 0.5; }

.stc--disabled .stc-range[b-giiqh8z2q8] { cursor: not-allowed; }
/* _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; }
/* _content/PSMS.Web/Components/Shared/Totals/PercentOrAmountFields.razor.rz.scp.css */
.poa-icon[b-xcbuf8wr78] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #eaf3ff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.poa-subtitle[b-xcbuf8wr78] {
    font-size: 13px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.poa-type-section[b-xcbuf8wr78] {
    width: 100%;
    box-sizing: border-box;
}

.poa-section-label[b-xcbuf8wr78] {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 8px;
}

.poa-type-grid[b-xcbuf8wr78] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
}

.poa-type-card[b-xcbuf8wr78] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid var(--colorNeutralStroke2, #e1e1e1);
    border-radius: 8px;
    background: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}

.poa-type-card.is-selected[b-xcbuf8wr78] {
    border-color: var(--accent-fill-rest, #0f6cbd);
    background: #eaf3ff;
}

.poa-type-radio[b-xcbuf8wr78] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--colorNeutralStroke2, #c8c8c8);
    flex: 0 0 auto;
    margin-top: 2px;
    position: relative;
}

.poa-type-card.is-selected .poa-type-radio[b-xcbuf8wr78] {
    border-color: var(--accent-fill-rest, #0f6cbd);
}

.poa-type-card.is-selected .poa-type-radio[b-xcbuf8wr78]::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--accent-fill-rest, #0f6cbd);
}

.poa-type-text[b-xcbuf8wr78] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.poa-type-title[b-xcbuf8wr78] {
    font-weight: 600;
    font-size: 14px;
}

.poa-type-desc[b-xcbuf8wr78] {
    font-size: 12px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.poa-suffix[b-xcbuf8wr78] {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    font-size: 13px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.poa-estimate[b-xcbuf8wr78] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border-radius: 8px;
    background: #eaf3ff;
}

.poa-estimate-icon[b-xcbuf8wr78] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.poa-estimate-main[b-xcbuf8wr78] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.poa-estimate-label[b-xcbuf8wr78] {
    font-size: 12px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.poa-estimate-value[b-xcbuf8wr78] {
    font-weight: 700;
    font-size: 18px;
    color: var(--accent-fill-rest, #0f6cbd);
}

.poa-estimate-divider[b-xcbuf8wr78] {
    width: 1px;
    align-self: stretch;
    background: var(--colorNeutralStroke2, #d0d7e2);
}

.poa-estimate-base[b-xcbuf8wr78] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: auto;
    text-align: right;
}

.poa-estimate-base-value[b-xcbuf8wr78] {
    font-weight: 600;
    font-size: 14px;
}
/* _content/PSMS.Web/Components/Shared/Totals/TaxSchemePickerDialog.razor.rz.scp.css */
/* Mirrors PercentOrAmountFields.razor.css (poa-*) so the tax picker looks like the
   Discount / Withholding dialogs. */
.tsp-icon[b-8zexb8l5de] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #eaf3ff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.tsp-subtitle[b-8zexb8l5de] {
    font-size: 13px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.tsp-section-label[b-8zexb8l5de] {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 8px;
}

.tsp-list[b-8zexb8l5de] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
}

.tsp-card[b-8zexb8l5de] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--colorNeutralStroke2, #e1e1e1);
    border-radius: 8px;
    background: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    flex: 0 0 auto;
}

.tsp-card:hover[b-8zexb8l5de] {
    border-color: var(--colorNeutralStroke1, #c8c8c8);
}

.tsp-card.is-selected[b-8zexb8l5de] {
    border-color: var(--accent-fill-rest, #0f6cbd);
    background: #eaf3ff;
}

.tsp-radio[b-8zexb8l5de] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--colorNeutralStroke2, #c8c8c8);
    flex: 0 0 auto;
    position: relative;
}

.tsp-card.is-selected .tsp-radio[b-8zexb8l5de] {
    border-color: var(--accent-fill-rest, #0f6cbd);
}

.tsp-card.is-selected .tsp-radio[b-8zexb8l5de]::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--accent-fill-rest, #0f6cbd);
}

.tsp-card-text[b-8zexb8l5de] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}

.tsp-card-title[b-8zexb8l5de] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 14px;
}

.tsp-card-desc[b-8zexb8l5de] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.tsp-code[b-8zexb8l5de] {
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
}

.tsp-tag[b-8zexb8l5de] {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
}

.tsp-tag--default[b-8zexb8l5de] {
    background: #e6f4ea;
    color: #16a34a;
}

.tsp-tag--kind[b-8zexb8l5de] {
    background: #eaf3ff;
    color: var(--accent-fill-rest, #0f6cbd);
}

.tsp-card.is-selected .tsp-tag--kind[b-8zexb8l5de] {
    background: #ffffff;
}

.tsp-tag--muted[b-8zexb8l5de] {
    background: var(--colorNeutralBackground3, #f0f0f0);
    color: var(--colorNeutralForeground3, #6b7280);
}

.tsp-rate[b-8zexb8l5de] {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 16px;
    color: var(--accent-fill-rest, #0f6cbd);
}

.tsp-rate--muted[b-8zexb8l5de] {
    color: var(--colorNeutralForeground3, #6b7280);
}

.tsp-estimate[b-8zexb8l5de] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border-radius: 8px;
    background: #eaf3ff;
}

.tsp-estimate-icon[b-8zexb8l5de] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.tsp-estimate-main[b-8zexb8l5de],
.tsp-estimate-base[b-8zexb8l5de] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tsp-estimate-base[b-8zexb8l5de] {
    margin-left: auto;
    text-align: right;
}

.tsp-estimate-label[b-8zexb8l5de] {
    font-size: 12px;
    color: var(--colorNeutralForeground3, #6b7280);
}

.tsp-estimate-value[b-8zexb8l5de] {
    font-weight: 700;
    font-size: 18px;
    color: var(--accent-fill-rest, #0f6cbd);
}

.tsp-estimate-divider[b-8zexb8l5de] {
    width: 1px;
    align-self: stretch;
    background: var(--colorNeutralStroke2, #d0d7e2);
}

.tsp-estimate-base-value[b-8zexb8l5de] {
    font-weight: 600;
    font-size: 14px;
}

/* The FluentStack doesn't stretch its children, so the list's wrapper (and the estimate panel)
   are set to full width explicitly; otherwise the cards shrink to their text. */
.tsp-section[b-8zexb8l5de] {
    width: 100%;
    box-sizing: border-box;
}
/* _content/PSMS.Web/Components/Shared/UploadTile.razor.rz.scp.css */
.upload-tile[b-6b4j9mr7rz] {
    display: inline-flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    box-sizing: border-box;
    padding: 6px;
    border: 1.5px dashed var(--colorNeutralStroke1, #c7c7c7);
    border-radius: 8px;
    background: var(--colorNeutralBackground1, #ffffff);
    font: inherit;
    color: var(--colorNeutralForeground3, #616161);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.12s, background-color 0.12s, color 0.12s;
}

.upload-tile:hover:not(:disabled)[b-6b4j9mr7rz] {
    border-color: var(--colorBrandStroke1, #0f6cbd);
    background: var(--colorBrandBackground2, #ebf3fc);
    color: var(--colorBrandForeground1, #0f6cbd);
}

.upload-tile:focus-visible[b-6b4j9mr7rz] {
    outline: 2px solid var(--colorBrandStroke1, #0f6cbd);
    outline-offset: 2px;
}

.upload-tile:disabled[b-6b4j9mr7rz] {
    cursor: not-allowed;
    opacity: 0.5;
}

.upload-tile-label[b-6b4j9mr7rz] {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.upload-tile-hint[b-6b4j9mr7rz] {
    font-size: 11px;
    line-height: 1.2;
    color: var(--colorNeutralForeground3, #616161);
}
/* _content/PSMS.Web/Components/Shared/UserAvatar.razor.rz.scp.css */
.user-avatar[b-z6ouv099bg] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    object-fit: cover;
    color: #fff;
    font-weight: 700;
    line-height: 1;
}