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

/* /Components/Layout/Breadcrumb.razor.rz.scp.css */
.pg-crumbs[b-osab3qqa2o] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-caption);
}

/* Mobile (<=768px, same breakpoint as the rest of the app-shell mobile rules): a deep crumb chain
   (e.g. list / SKU name / asset name) has nowhere to shrink to on a 375px page and would otherwise
   force horizontal page scroll. Wrap instead of clipping — additive only, no effect once the chain
   already fits on one line at this width. */
@media (max-width: 768px) {
    .pg-crumbs[b-osab3qqa2o] { flex-wrap: wrap; row-gap: var(--space-xs); }
}

.pg-crumb[b-osab3qqa2o] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-text-base-description-icon-form);
    text-decoration: none;
}

.pg-crumb:hover[b-osab3qqa2o] {
    color: var(--color-text-base-link);
}

.pg-crumb-home span[b-osab3qqa2o] {
    color: var(--color-text-base-placeholder-text);
}

.pg-crumb-sep[b-osab3qqa2o] {
    color: var(--color-text-base-button-cancel);
}

.pg-crumb-current[b-osab3qqa2o] {
    color: var(--color-neutral-title-content);
    font-weight: var(--font-weight-semibold);
}
/* /Components/Layout/BuSwitcher.razor.rz.scp.css */
.bu-switcher[b-vu2vrlsj4v] {
    position: relative;
}

.bu-chip[b-vu2vrlsj4v] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 8px 14px;
    background: var(--color-text-base-background-soft);
    border: 1px solid var(--color-navy-blue-100);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-tag);
    font-weight: var(--font-weight-semibold);
    color: var(--color-navy-blue-900);
    cursor: pointer;
    user-select: none;
    list-style: none;
}

/* Remove the native <details> disclosure triangle */
.bu-chip[b-vu2vrlsj4v]::-webkit-details-marker { display: none; }

/* BU logo (when present): slightly rounded, fixed square, never squeezed by a long name */
.bu-chip__logo[b-vu2vrlsj4v] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    object-fit: cover;
    flex: 0 0 auto;
    background: #ffffff;
}

.bu-switcher__logo[b-vu2vrlsj4v] {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    object-fit: cover;
    flex: 0 0 auto;
    background: #ffffff;
}

/* Cap the name width and ellipsize very long company names (full name shown via title tooltip) */
.bu-chip__label[b-vu2vrlsj4v] {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mobile header (<=768px, same breakpoint the rest of the app-shell mobile rules use): the chip
   shares a cramped row with the hamburger, bell, and profile avatar, so its label gets a tighter
   cap than desktop's 180px. Ellipsis + the existing title="" tooltip (Brand() above) still carry
   the full name. */
@media (max-width: 768px) {
    .bu-chip[b-vu2vrlsj4v] { padding: 6px 10px; }
    .bu-chip__label[b-vu2vrlsj4v] { max-width: 88px; }
}

.bu-chip--static[b-vu2vrlsj4v] { cursor: default; }

.bu-chip__chevron[b-vu2vrlsj4v] {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-base-description-icon-form);
    transition: transform 0.15s ease;
}

.bu-switcher[open] .bu-chip__chevron[b-vu2vrlsj4v] { transform: rotate(180deg); }

.bu-switcher__menu[b-vu2vrlsj4v] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 160px;
    background: var(--color-primary-surface);
    border: 1px solid var(--color-text-base-border);
    border-radius: var(--radius-input);
    box-shadow: var(--shadow-card-soft);
    padding: 6px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bu-switcher__menu form[b-vu2vrlsj4v] { margin: var(--space-0); }

.bu-switcher__item[b-vu2vrlsj4v] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-body);
    color: var(--color-navy-blue-900);
    text-align: left;
    cursor: pointer;
}

.bu-switcher__item:hover:not(:disabled)[b-vu2vrlsj4v] { background: var(--color-text-base-disabled-bg); }

/* Active BU: a background highlight marks which BU is currently selected (no checkmark) */
.bu-switcher__item--active[b-vu2vrlsj4v],
.bu-switcher__item:disabled[b-vu2vrlsj4v] {
    color: var(--color-primary-primary);
    font-weight: var(--font-weight-semibold);
    cursor: default;
    background: #EFF4FF;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.main-layout[b-d1rl7xyom7] {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.main-column[b-d1rl7xyom7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-header[b-d1rl7xyom7] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    height: 73px;
    padding: 10px 32px;
    background: var(--color-text-base-background);
    /* border-bottom: 1px solid var(--color-text-base-border); */
    box-sizing: border-box;
    flex-shrink: 0;
}

[b-d1rl7xyom7] .hdr-expand {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: var(--space-sm);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
}

[b-d1rl7xyom7] .hdr-expand:hover {
    background-color: var(--color-text-base-background-soft);
}

[b-d1rl7xyom7] .hdr-expand--hidden {
    display: none;
}

/* Mobile hamburger (MobileNavToggle.razor) — mirrors .hdr-expand's own button chrome exactly.
   Hidden on desktop (unscoped rule here); shown only inside the <=768px media query below, so
   desktop's header — which already has its own rail-collapse button (.hdr-expand above) — is
   completely unaffected by this addition. */
[b-d1rl7xyom7] .hdr-mobile-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: var(--space-sm);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
}

[b-d1rl7xyom7] .hdr-mobile-nav-toggle:hover {
    background-color: var(--color-text-base-background-soft);
}

.app-header__heading[b-d1rl7xyom7] {
    flex: 1;
    min-width: 0;
}

/* ::deep — rendered via SectionOutlet, declared in PageHeader (different scope) */
[b-d1rl7xyom7] .app-header__title {
    margin: var(--space-0);
    font-size: var(--font-size-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    color: var(--color-text-base-title-content);
}

[b-d1rl7xyom7] .app-header__desc {
    margin: 2px 0 0;
    font-size: var(--font-size-body);
    color: var(--color-text-base-description-icon-form);
}

.app-header__actions[b-d1rl7xyom7] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

/* Version tag — small + faint, sits just left of the bell */
.hdr-version[b-d1rl7xyom7] {
    font-size: var(--font-size-tiny);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.3px;
    color: var(--color-text-base-placeholder-text);
    opacity: 0.7;
    user-select: none;
    font-variant-numeric: tabular-nums;
    margin-right: -8px; /* pull a little closer to the bell than the 23px action gap */
}

/* Notification bell */
.hdr-noti[b-d1rl7xyom7] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm);
    background: var(--color-blue-100);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
}

.hdr-noti:hover[b-d1rl7xyom7] {
    background: var(--color-blue-200);
}

/* Profile dropdown */
.hdr-profile[b-d1rl7xyom7] {
    position: relative;
}

.hdr-profile__summary[b-d1rl7xyom7] {
    display: flex;
    align-items: center;
    gap: 12px;
    list-style: none;
    cursor: pointer;
}

.hdr-profile__summary[b-d1rl7xyom7]::-webkit-details-marker {
    display: none;
}

.hdr-avatar[b-d1rl7xyom7] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-navy-blue-900);
    flex-shrink: 0;
}

.hdr-profile__meta[b-d1rl7xyom7] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.hdr-profile__name[b-d1rl7xyom7] {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    color: var(--color-brown-800);
    white-space: nowrap;
}

.hdr-profile__role[b-d1rl7xyom7] {
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-description-icon-form-divider);
    white-space: nowrap;
}

.hdr-profile__menu[b-d1rl7xyom7] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: var(--color-primary-surface);
    border: 1px solid var(--color-text-base-border);
    border-radius: var(--radius-input);
    box-shadow: var(--shadow-card-soft);
    padding: var(--space-sm);
    z-index: 20;
}

/* ===========================================================================================
   Mobile header (<=768px, same breakpoint as the rest of the app's existing responsive rules).
   Additive only: every rule here either shows the mobile-only hamburger, hides chrome that
   doesn't fit a phone header (desktop's rail-collapse button, version tag, profile name/role
   text), or trims spacing/type-scale — nothing here changes an UNSCOPED declaration desktop
   depends on, so >768px renders exactly as it does today. FINAL decision after 2 reversals in
   this session: mobile nav is a hamburger-driven off-canvas drawer (fully hidden or fully shown,
   never a narrow icon-rail) — desktop's own `.hdr-expand` collapse-to-rail button is therefore
   hidden on mobile (it drives a rail state mobile doesn't have) and the hamburger replaces it. =========================== */
@media (max-width: 768px) {
    .app-header[b-d1rl7xyom7] {
        /* Desktop's 73px is a fixed HEIGHT tuned for one line of --font-size-heading (30px) title
           + no wrap. On mobile the title shrinks (below) and a long Thai title can still wrap to
           2 lines, which a fixed height would clip instead of growing to fit — min-height keeps
           the same floor for short titles but lets the row grow for long/wrapped ones. */
        height: auto;
        min-height: 73px;
        gap: var(--space-sm);
        padding: 10px var(--space-md);
    }

    /* Desktop's title/desc are sized for a wide header with room to spare (30px heading + 14px
       body) — on a 375px screen that pair alone can eat a large share of the viewport before any
       actual page content is visible. Brought down to the same mobile title scale already used
       for InstanceCreate's own card title (--font-size-base) and one step below body for the
       description (--font-size-caption). No `white-space` was ever set on either (confirmed by
       reading this file before adding these rules), so long Thai titles already wrap by default
       <h1>/<p> block behavior — this only needed the height/font-size fixes to stop clipping,
       not a new wrap rule. */
    [b-d1rl7xyom7] .app-header__title {
        font-size: var(--font-size-base);
        line-height: var(--line-height-tight);
    }

    /* Kept visible, not hidden — grepped every PageHeader call site's Desc value first: several
       carry real guidance ("read-only", "toggle rental options for this asset", etc.), not just
       decorative filler, so hiding it outright would remove information some pages actually rely
       on. Shrunk + clamped to 2 lines instead, so a long description can't push the header (and
       the fold) down indefinitely — the same tradeoff a mobile app header makes for a subtitle. */
    [b-d1rl7xyom7] .app-header__desc {
        font-size: var(--font-size-caption);
        line-height: var(--line-height-tight);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Desktop's rail-collapse button governs the 56px icon-only rail — a state mobile's drawer
       doesn't have (fully hidden or fully shown only) — so hide it and show the hamburger. */
    [b-d1rl7xyom7] .hdr-expand {
        display: none;
    }

    [b-d1rl7xyom7] .hdr-mobile-nav-toggle {
        display: flex;
    }

    .app-header__actions[b-d1rl7xyom7] {
        gap: var(--space-sm);
    }

    /* Least essential chrome on a phone header — drop it rather than let it fight the BU
       switcher/profile for room. */
    .hdr-version[b-d1rl7xyom7] {
        display: none;
    }

    /* Bell icon keeps its own tap target; profile keeps the avatar (tap target) but the
       name/role text column is dropped — a phone header reads the avatar as "that's me", the
       full name/role pairing is desktop-only real estate. */
    .hdr-profile__meta[b-d1rl7xyom7] {
        display: none;
    }

    .hdr-profile__summary[b-d1rl7xyom7] {
        gap: var(--space-xs);
    }

    .hdr-profile__menu[b-d1rl7xyom7] {
        min-width: 160px;
    }
}

.profile-menu__item[b-d1rl7xyom7] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    padding: 8px 12px;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-body);
    color: var(--color-neutral-description-icon-form-divider);
    text-decoration: none;
    box-sizing: border-box;
}

.profile-menu__item:hover[b-d1rl7xyom7] {
    background: var(--color-text-base-disabled-bg);
}

.profile-menu__sep[b-d1rl7xyom7] {
    height: 1px;
    background: var(--color-text-base-border);
    margin: var(--space-xs) 0;
}

.signout[b-d1rl7xyom7] {
    margin: var(--space-0);
}

.signout__btn[b-d1rl7xyom7] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    padding: 8px 12px;
    background: var(--color-primary-surface);
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-body);
    color: var(--color-neutral-description-icon-form-divider);
    cursor: pointer;
}

.signout__btn:hover[b-d1rl7xyom7] {
    background: var(--color-text-base-disabled-bg);
}

.content[b-d1rl7xyom7] {
    flex: 1;
    background-color: var(--color-text-base-background);
    overflow-y: auto;
    padding: var(--space-lg) var(--space-xl);
}

/* Mobile (<=768px): desktop's 24px/32px page padding eats a disproportionate share of a 375px
   viewport before any page content starts. Every page already renders inside this shared
   container, so tightening it here benefits every page consistently rather than each page
   patching its own inset. */
@media (max-width: 768px) {
    .content[b-d1rl7xyom7] {
        padding: var(--space-md);
    }
}
/* /Components/Layout/NavSidebar.razor.rz.scp.css */
.sidebar[b-9eku3qccug] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: var(--color-text-base-background);
    color: var(--color-neutral-title-content);
    overflow: hidden;
    border-right: 1px solid var(--color-text-base-border);
    /* Desktop rail width — `.sidebar` is itself a flex ITEM of `.main-layout` (display:flex), and
       with no `flex`/`width` set here it was relying on the browser's default `flex: 0 1 auto`
       plus `min-width`/`max-width` alone to pin its size. That leaves the actual used width to
       the flex-basis:auto content-sizing algorithm, clamped only at the end — which in practice
       let a WIDE `min-width:240px`-to-`max-width:600px` RANGE settle whenever it liked, and meant
       collapsing to `min-width:max-width:56px` only reliably shrank the box's size floor/ceiling,
       not a definitive width the sibling `.main-column{flex:1}` could unambiguously react to
       every time — the reported bug ("collapse only removes the label, the rail itself doesn't
       narrow"). `flex: 0 0 <width>` makes the flex-basis an EXPLICIT, unambiguous value per
       state instead of an auto-derived one, and transitioning that flex-basis (not min/max-width)
       is the standard, reliable way to animate a flex item's size — both ends of the transition
       are now a single definite number, not a content-dependent range. */
    /* 268px, not 240: FluentUI indents nested nav links by 24px of padding-inline-start, so a child
       label had 24px less room than a top-level one and long Thai labels ("จัดการคิวอาร์โค้ด")
       truncated mid-word once a group was expanded. Widening by exactly that indent gives children
       the same usable text width top-level items already had. */
    flex: 0 0 268px;
    transition: flex-basis 0.2s ease;
}

.sidebar.expanded[b-9eku3qccug] {
    flex-basis: 268px;
}

.sidebar.collapsed[b-9eku3qccug] {
    flex-basis: 56px;
}

/* ===========================================================================================
   Mobile off-canvas drawer (<=768px, matching this codebase's existing tablet breakpoint —
   app.css already uses 768px for .vd-row3/.sku-layout/.sd-tabs). FINAL decision after 2 reversals
   in this same session: the user explicitly wants a hamburger-driven drawer — fully hidden by
   default, fully shown when open, NEVER a narrow icon-rail state on mobile. (An icon-rail-only
   approach was tried and explicitly rejected; a drawer was the original attempt, reverted, then
   restored once the user clarified this is in fact what they want.) Desktop's permanent rail
   (rules above, all unscoped, including the `flex-basis` collapse-width fix) is completely
   untouched by anything below — at this width the sidebar becomes a position:fixed panel that
   slides in over the content instead of sitting in the flex row, driven by the SEPARATE
   `mobile-open` class (SidebarState.IsMobileOpen) that desktop never sets. */
@media (max-width: 768px) {
    .sidebar[b-9eku3qccug] {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        /* No shadow while off-canvas — box-shadow paints OUTSIDE the element's own box on its own
           layer, so it does not travel fully out of view with `transform: translateX(-100%)` the
           way the panel's visible content does; a 24px-blur shadow on the right edge still lands
           within ~24px of the viewport's left edge even fully translated off-screen, showing as a
           stray grey band if left unconditional. Zeroed here (closed/default state) and restored
           only in `.mobile-open` below, transitioning together with the slide so it fades in/out
           in sync with the panel instead of a hard cut. */
        box-shadow: 4px 0 24px rgba(15, 23, 42, 0);
    }

    /* Mobile always opens to the FULL nav (icons + labels) — there is no icon-rail state on
       mobile at all, so `collapsed`'s width is overridden back to the same width `expanded` uses
       whenever the drawer renders on a mobile viewport, regardless of what `Sidebar.IsCollapsed`
       happens to be (a value that only ever changes via the desktop-only SidebarToggle button,
       which mobile never shows — see MainLayout.razor.css). This does not change what
       `Sidebar.IsCollapsed` IS; it only changes how the drawer renders while open on a narrow
       screen. */
    .sidebar.collapsed[b-9eku3qccug],
    .sidebar.expanded[b-9eku3qccug] {
        min-width: 0;
        width: 78vw;
        max-width: 320px;
    }

    .sidebar.mobile-open[b-9eku3qccug] {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(15, 23, 42, .18);
    }

    /* Full-viewport tap-to-close backdrop — same button+@onclick idiom as
       PermissionGroups.razor's .bua-groupdd__backdrop (zero JS interop). */
    .sidebar-backdrop[b-9eku3qccug] {
        position: fixed;
        inset: 0;
        z-index: 999;
        border: none;
        background: rgba(15, 23, 42, .45);
        padding: 0;
        cursor: default;
    }

    /* The header button pushes to the right edge of the open drawer, where a close affordance is
       expected. Same element as desktop's collapse button — only its action and icon differ, and
       those are decided in the component, not here. */
    .sidebar-toggle[b-9eku3qccug] {
        margin-left: auto;
    }
}

.sidebar-header[b-9eku3qccug] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background-color: var(--color-text-base-background-soft);
    border-bottom: 1px solid var(--color-text-base-border);
}

.sidebar.collapsed .sidebar-header[b-9eku3qccug] {
    flex-direction: column;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-sm);
}

.app-logo[b-9eku3qccug] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.app-logo__img[b-9eku3qccug] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.app-title-block[b-9eku3qccug] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.app-title[b-9eku3qccug] {
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-bold);
    color: var(--color-red-700);
    white-space: nowrap;
}

.bu-subtitle[b-9eku3qccug] {
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-base-description-icon-form);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sidebar-toggle[b-9eku3qccug] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
    padding: 6px;
    cursor: pointer;
    border-radius: var(--radius-md);
    background: none;
    border: none;
}

.sidebar.collapsed .sidebar-toggle[b-9eku3qccug] {
    margin-left: var(--space-0);
}

.sidebar-toggle:hover[b-9eku3qccug] {
    background-color: var(--color-blue-100);
}

.sidebar-nav[b-9eku3qccug] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    /* Thin overlay scrollbar so it doesn't cover the narrow collapsed icons */
    scrollbar-width: thin;
    scrollbar-color: var(--color-text-base-button-cancel) transparent;
}

.sidebar-nav[b-9eku3qccug]::-webkit-scrollbar {
    width: 6px;
}

.sidebar-nav[b-9eku3qccug]::-webkit-scrollbar-thumb {
    background-color: var(--color-text-base-button-cancel);
    border-radius: 3px;
}

.sidebar-nav[b-9eku3qccug]::-webkit-scrollbar-track {
    background: transparent;
}

/* Collapsed sidebar: non-clickable group header icon above its flattened child icons.
   ::deep — these nodes are rendered by the child NavNodeView component, not NavSidebar. */
[b-9eku3qccug] .collapsed-group-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 6px 0;
    color: var(--color-neutral-description-icon-form-divider);
    background: none;
    border: none;
    cursor: pointer;
}

[b-9eku3qccug] .collapsed-group-icon:hover {
    background-color: var(--color-text-base-border);
}

/* Collapsed leaf: icon-only anchor mirroring the group-icon button (leaves can't use FluentNavLink
   collapsed — its icon lives in the label slot FluentNavMenu hides). */
[b-9eku3qccug] .collapsed-leaf-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 6px 0;
    color: var(--color-neutral-description-icon-form-divider);
    text-decoration: none;
}

[b-9eku3qccug] .collapsed-leaf-icon:hover {
    background-color: var(--color-text-base-border);
}

[b-9eku3qccug] .collapsed-leaf-icon.active {
    background-color: var(--color-text-base-disabled-bg);
    box-shadow: inset 5px 0 0 var(--color-red-700);
}

/* Open (expanded) group icon: gray bg only — NO red bar. The red bar is reserved for the
   actual active route; a group header is a toggle, not a navigable page. */
[b-9eku3qccug] .collapsed-group-icon.open {
    background-color: var(--color-text-base-disabled-bg);
}

/* Child-icon panel — gray BG mirrors the expanded submenu container */
[b-9eku3qccug] .collapsed-children {
    background-color: var(--color-text-base-border);
    padding: var(--space-xs) 0;
}

/* Collapsed: center the icon-only rows. FluentUI indents items via logical
   padding-inline-start (24/48px) — must zero the LOGICAL property, not padding-left. */
.sidebar.collapsed[b-9eku3qccug]  .positioning-region,
.sidebar.collapsed[b-9eku3qccug]  .fluent-nav-link,
.sidebar.collapsed[b-9eku3qccug]  .content-region {
    justify-content: center !important;
    padding-inline: var(--space-0) !important;
    margin-inline: var(--space-0) !important;
}

.sidebar.collapsed[b-9eku3qccug]  .collapsed-children .fluent-nav-link:hover .positioning-region {
    background-color: var(--color-neutral-disable) !important;
}

.nav-section-header[b-9eku3qccug] {
    padding: var(--space-md) var(--space-md) var(--space-sm);
    font-size: var(--font-size-tiny);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-base-placeholder-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sidebar-footer[b-9eku3qccug] {
    border-top: 1px solid var(--color-text-base-border);
}

.sidebar.collapsed .sidebar-footer[b-9eku3qccug] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-link[b-9eku3qccug] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 10px 8px;
    color: var(--color-neutral-description-icon-form-divider);
    text-decoration: none;
    font-size: var(--font-size-nav);
    transition: background-color 0.15s ease;
}

.footer-link-label[b-9eku3qccug] {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
}

.sidebar.collapsed .footer-link[b-9eku3qccug] {
    justify-content: center;
    padding: 10px 8px;
}

/* Footer collapsed anchors are NavSidebar's own DOM (not ::deep child-component nodes) */
.sidebar-footer .collapsed-leaf-icon[b-9eku3qccug] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 6px 0;
    text-decoration: none;
}

.sidebar-footer .collapsed-leaf-icon:hover[b-9eku3qccug] {
    background-color: var(--color-text-base-border);
}

.footer-link:hover[b-9eku3qccug] {
    background-color: var(--color-text-base-disabled-bg);
}

/* Active footer link: gray bg + red left bar (match menu) */
.footer-link.active[b-9eku3qccug] {
    background-color: var(--color-text-base-disabled-bg);
    box-shadow: inset 5px 0 0 var(--color-red-700);
}

/* Override FluentUI NavMenu defaults for light sidebar */
[b-9eku3qccug] .fluent-nav-menu {
    background-color: transparent;
    width: 100% !important;
    box-sizing: border-box;
    padding: var(--space-0) !important;
}

/* Kill FluentUI's built-in blue active accent indicator */
[b-9eku3qccug] .fluent-nav-link::before,
[b-9eku3qccug] .fluent-nav-link::after,
[b-9eku3qccug] .positioning-region::before,
[b-9eku3qccug] .positioning-region::after,
[b-9eku3qccug] .fluent-nav-link.active::before,
[b-9eku3qccug] .fluent-nav-link[aria-current="page"]::before {
    display: none !important;
    content: none !important;
    background: none !important;
    border: none !important;
}

/* Active bg fills the whole row (link is the full-width block) */
[b-9eku3qccug] .fluent-nav-link,
[b-9eku3qccug] .content-region {
    width: 100% !important;
    box-sizing: border-box;
}

/* Hide any FluentUI active indicator DOM node + accent border */
[b-9eku3qccug] .indicator,
[b-9eku3qccug] .fluent-nav-link .indicator,
[b-9eku3qccug] .fluent-nav-item .indicator {
    display: none !important;
}

[b-9eku3qccug] .fluent-nav-link.active,
[b-9eku3qccug] .fluent-nav-link[aria-current="page"] {
    border-inline-start: none !important;
}

[b-9eku3qccug] .positioning-region {
    background-color: transparent !important;
    border: none !important;
    margin: var(--space-0) !important;
    border-radius: var(--radius-none) !important;
    width: 100% !important;
    min-height: 48px !important;
    padding-left: var(--space-sm) !important;
    padding-right: var(--space-sm) !important;
}

/* Nav text size to match Figma (16px) */
[b-9eku3qccug] .fluent-nav-link,
[b-9eku3qccug] .fluent-nav-group,
[b-9eku3qccug] .content-region {
    font-size: var(--font-size-nav) !important;
}

[b-9eku3qccug] .fluent-nav-item,
[b-9eku3qccug] .fluent-nav-group {
    margin: var(--space-0) !important;
    width: 100% !important;
}

[b-9eku3qccug] .fluent-nav-item {
    color: var(--color-neutral-description-icon-form-divider);
}

[b-9eku3qccug] .fluent-nav-item:hover > .positioning-region {
    background-color: var(--color-text-base-border) !important;
}

[b-9eku3qccug] .fluent-nav-link {
    color: var(--color-neutral-description-icon-form-divider);
    text-decoration: none;
}

/* Active parent group: gray background + full red left bar (square) */
[b-9eku3qccug] .fluent-nav-link.active .positioning-region,
[b-9eku3qccug] .fluent-nav-link[aria-current="page"] .positioning-region {
    background-color: var(--color-text-base-disabled-bg) !important;
    box-shadow: inset 5px 0 0 var(--color-red-700) !important;
    border-radius: var(--radius-none) !important;
}

[b-9eku3qccug] .fluent-nav-link.active,
[b-9eku3qccug] .fluent-nav-link[aria-current="page"] {
    color: var(--color-neutral-description-icon-form-divider);
}

/* Prefix-match overlap ("/materials" vs "/materials/lots"): the less specific link still gets
   FluentUI's .active — strip its highlight so only the deepest matching row reads as active.
   Must out-specify `.fluent-nav-link.active .positioning-region` above (!important on both sides,
   so specificity decides, not source order). Two forms: FluentNavLink may put our Class on the
   anchor itself or on its wrapper. */
[b-9eku3qccug] .pec-nav-shadowed.fluent-nav-link.active .positioning-region,
[b-9eku3qccug] .pec-nav-shadowed .fluent-nav-link.active .positioning-region,
[b-9eku3qccug] .pec-nav-shadowed.fluent-nav-link[aria-current="page"] .positioning-region,
[b-9eku3qccug] .pec-nav-shadowed .fluent-nav-link[aria-current="page"] .positioning-region {
    background-color: transparent !important;
    box-shadow: none !important;
}

[b-9eku3qccug] .fluent-nav-group .pec-nav-shadowed.fluent-nav-link.active,
[b-9eku3qccug] .fluent-nav-group .pec-nav-shadowed .fluent-nav-link.active {
    font-weight: var(--font-weight-regular);
}

/* Active submenu child: keep default color + bold */
[b-9eku3qccug] .fluent-nav-group .fluent-nav-link.active,
[b-9eku3qccug] .fluent-nav-group .fluent-nav-link[aria-current="page"] {
    color: var(--color-neutral-description-icon-form-divider);
    font-weight: var(--font-weight-semibold);
}

[b-9eku3qccug] .fluent-nav-group {
    color: var(--color-neutral-description-icon-form-divider);
}

/* Kill blue accent on expandable group icon + label */
[b-9eku3qccug] .fluent-nav-group > .positioning-region .content-region,
[b-9eku3qccug] .fluent-nav-group > .positioning-region {
    color: var(--color-neutral-description-icon-form-divider) !important;
}

[b-9eku3qccug] .fluent-nav-group > .positioning-region .fluent-nav-icon svg,
[b-9eku3qccug] .fluent-nav-group > .positioning-region .content-region svg {
    fill: var(--color-neutral-description-icon-form-divider) !important;
    color: var(--color-neutral-description-icon-form-divider) !important;
}

/* Icons are Iconoir SVGs rendered inside fluent-nav-text (Title/TitleTemplate/ChildContent slot),
   not FluentUI's own Icon param (no longer set). FluentUI still renders its empty placeholder
   <span class="fluent-nav-icon" style="min-width:20px"> next to fluent-nav-text when Icon is null —
   zero it out so it doesn't leave a dead gutter before our injected icon, then lay the injected
   icon + label out as a row inside fluent-nav-text. */
[b-9eku3qccug] .fluent-nav-icon {
    min-width: 0 !important;
    width: 0 !important;
}

[b-9eku3qccug] .fluent-nav-text {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

[b-9eku3qccug] .fluent-nav-text .iconoir {
    flex-shrink: 0;
}

/* Expanded group: gray background + red left bar (square) */
[b-9eku3qccug] .fluent-nav-group.expanded > .positioning-region {
    background-color: var(--color-text-base-disabled-bg) !important;
    box-shadow: inset 5px 0 0 var(--color-red-700) !important;
    border-radius: var(--radius-none) !important;
}

[b-9eku3qccug] .fluent-nav-group .positioning-region {
    background-color: transparent !important;
    border: none !important;
}

/* Sub-items panel: gray BG on the inner collapsible container only (not the header) */
[b-9eku3qccug] .fluent-collapsible-region-container {
    background-color: var(--color-text-base-border) !important;
}

[b-9eku3qccug] .fluent-collapsible-region-container .fluent-nav-item:hover > .fluent-nav-link .positioning-region,
[b-9eku3qccug] .fluent-collapsible-region-container .fluent-nav-link:hover .positioning-region {
    background-color: var(--color-neutral-disable) !important;
}

[b-9eku3qccug] .expand-collapse-button {
    color: var(--color-text-base-placeholder-text);
    transition: transform 0.15s ease;
}

/* Open group: chevron points up */
[b-9eku3qccug] .fluent-nav-group .expand-collapse-button.rotate,
[b-9eku3qccug] .fluent-nav-group .expand-collapse-button.rotate svg,
[b-9eku3qccug] .fluent-nav-group .expand-collapse-button.rotate .expand-collapse-glyph {
    transform: rotate(-45deg) !important;
}

[b-9eku3qccug] .expand-collapse-button:hover,
[b-9eku3qccug] .expand-collapse-button:hover .expand-collapse-glyph {
    background: none !important;
    background-color: transparent !important;
}

[b-9eku3qccug] .fluent-nav-expand-icon svg {
    fill: var(--color-text-base-placeholder-text);
    width: 20px !important;
    height: 20px !important;
}

[b-9eku3qccug] .content-region {
    background-color: transparent;
    box-sizing: border-box;
}

[b-9eku3qccug] .expander {
    display: none !important;
}
/* /Components/Pages/Admin/AssetDocUploadModal.razor.rz.scp.css */
/* AssetDocUploadModal.razor
   Spacing polish (2026-08-06) — .ic-doc-upload-modal previously had no CSS at all (dead class),
   so the doc-type label, the no-expiry checkbox, the date-range row, and the dropzone all sat flush
   against each other with only whatever incidental margin each child control carried. Gap value and
   shape are matched to the sibling form-in-PecDialog convention (ProductCategoryModal.razor's own
   .vd-form in app.css: `gap: var(--space-md)`) rather than invented — PecDialog's FluentDialogBody
   already supplies the dialog's own outer padding, so this only adds the INTER-field rhythm, not a
   second layer of edge padding (ProductCategoryModal.razor's .vd-form padding: 0.25rem is that same
   "don't double up" call, scoped small since it's on top of Fluent's own inset). */
.ic-doc-upload-modal[b-94wa0ou5q8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 340px;
}

/* .ed-cell-muted (the DocTypeLabel line) reads as this form's title — pull it slightly closer to
   the field stack than a full --space-md gap would, matching ProductCategoryModal's own gap between
   its FieldName label and input row rhythm one level up. */
.ic-doc-upload-modal > .ed-cell-muted[b-94wa0ou5q8] {
    margin: 0 0 calc(-1 * var(--space-sm)) 0;
}
/* /Components/Pages/Auth/ChangePassword.razor.rz.scp.css */
/* Redeclared from Login.razor.css: Blazor CSS isolation scopes .razor.css to its own component, so
   the two pages cannot share styles by class name alone. Keep both files' shared blocks in sync if
   the login visual language changes (flagged in the must-change research brief as a known duplication
   — not resolved here since a shared non-isolated stylesheet is a separate sa/senior-dev call). */
.login[b-tkq6nw7ts5] {
    --login-navy: var(--color-navy-blue-900);
    --login-navy-hover: var(--color-navy-blue-950);
    display: flex;
    min-height: 100vh;
    width: 100%;
    background: var(--login-navy);
}

.login-stage[b-tkq6nw7ts5] {
    position: relative;
    flex: 1 1 58%;
    /* Vertical depth shading over the photo; the blue glass pane is layered on top. */
    background-image: linear-gradient(180deg, rgba(15, 23, 42, 0.30) 0%, rgba(15, 23, 42, 0.05) 35%, rgba(15, 23, 42, 0.40) 100%),
        url("login/background.png");
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* Frosted blue glass pane over the left half: blurs the photo behind it and a
   light sheen, then masks out toward the form so it dissolves into the sharp
   image. Sits behind the logo/copyright in DOM order so those stay crisp. */
.login-glass[b-tkq6nw7ts5] {
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg, rgba(40, 72, 138, 0.50) 0%, rgba(22, 44, 96, 0.38) 45%, rgba(22, 44, 96, 0.10) 60%, rgba(22, 44, 96, 0) 70%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 30%);
    backdrop-filter: blur(7px) saturate(118%);
    -webkit-backdrop-filter: blur(7px) saturate(118%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 66%);
    mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 66%);
    pointer-events: none;
}

.login-mark[b-tkq6nw7ts5] {
    position: absolute;
    top: 2rem;
    left: 2.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.login-mark img[b-tkq6nw7ts5] {
    height: 44px;
    width: 44px;
    border-radius: 50%;
    display: block;
}

.login-mark__title[b-tkq6nw7ts5] {
    color: #fff;
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
}

.login-panel[b-tkq6nw7ts5] {
    flex: 1 1 42%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 3rem;
    background: var(--color-text-base-surface-muted);
    border-top-left-radius: 44px;
    border-bottom-left-radius: 44px;
    margin-left: -44px;
}

.login-card[b-tkq6nw7ts5] {
    width: 100%;
    max-width: 22rem;
}

.login-title[b-tkq6nw7ts5] {
    margin: var(--space-0);
    font-size: var(--font-size-heading);
    font-weight: var(--font-weight-bold);
    color: var(--login-navy);
}

.login-subtitle[b-tkq6nw7ts5] {
    margin: 0.4rem 0 2rem;
    font-size: var(--font-size-caption);
    color: var(--color-text-base-disabled-text);
}

.login-error[b-tkq6nw7ts5] {
    background: var(--color-component-feedback-card-bg);
    color: var(--color-red-700);
    border: 1px solid var(--color-red-200);
    border-radius: var(--radius-lg);
    padding: 0.75rem 1rem;
    font-size: var(--font-size-body);
    margin: 0 0 1.25rem;
}

.login-field[b-tkq6nw7ts5] {
    margin-bottom: 1.25rem;
}

.login-field label[b-tkq6nw7ts5] {
    display: block;
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-medium);
    color: var(--color-neutral-description-icon-form-divider);
}

.login-field input[b-tkq6nw7ts5] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--color-neutral-disable);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-input);
    background: var(--color-primary-surface);
    color: var(--color-neutral-title-content);
}

.login-field input[b-tkq6nw7ts5]::placeholder {
    color: var(--color-text-base-placeholder-text);
}

.login-field input:focus[b-tkq6nw7ts5] {
    outline: none;
    border-color: var(--login-navy);
    box-shadow: 0 0 0 3px rgba(30, 42, 74, 0.12);
}

.login-password[b-tkq6nw7ts5] {
    position: relative;
}

.login-password input[b-tkq6nw7ts5] {
    padding-right: var(--space-3xl);
}

.login-reveal[b-tkq6nw7ts5] {
    position: absolute;
    top: 50%;
    right: 0.9rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: var(--space-0);
    font-size: var(--font-size-button);
    color: var(--color-text-base-disabled-text);
    cursor: pointer;
}

.login-reveal:hover[b-tkq6nw7ts5] {
    color: var(--login-navy);
}

.login-submit[b-tkq6nw7ts5] {
    width: 100%;
    padding: 0.8rem 1rem;
    background: var(--login-navy);
    color: var(--color-text-base-white-text);
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background 0.15s ease;
}

.login-submit:hover[b-tkq6nw7ts5] {
    background: var(--login-navy-hover);
}

.login-submit:focus-visible[b-tkq6nw7ts5] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(30, 42, 74, 0.3);
}

@media (max-width: 768px) {
    .login-stage[b-tkq6nw7ts5] {
        display: none;
    }

    .login-panel[b-tkq6nw7ts5] {
        flex: 1 1 100%;
        border-radius: var(--radius-none);
        margin-left: var(--space-0);
        padding: var(--space-xl) var(--space-lg);
    }
}

/* Realtime password-requirement checklist — state is driven by the .is-met class from
   js/password-checklist.js. Colour is never the sole signal: the ::before glyph and a
   visually-hidden state string carry the same information (WCAG 1.4.1). */
.login-req[b-tkq6nw7ts5] {
    margin: -0.5rem 0 1.25rem;
    padding: 0;
}

.login-req-legend[b-tkq6nw7ts5] {
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-medium);
    color: var(--color-neutral-description-icon-form-divider);
    margin-bottom: var(--space-sm);
}

.login-req ul[b-tkq6nw7ts5] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.25rem;
}

.login-req li[b-tkq6nw7ts5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-caption);
    color: var(--color-neutral-description-icon-form-divider);
    transition: color 0.15s ease;
}

.login-req li .login-req-mark[b-tkq6nw7ts5]::before {
    content: "\25CB"; /* ○ */
}

.login-req li.is-met[b-tkq6nw7ts5] {
    color: var(--color-status-success);
}

.login-req li.is-met .login-req-mark[b-tkq6nw7ts5]::before {
    content: "\2713"; /* ✓ */
}

.login-match[b-tkq6nw7ts5] {
    min-height: 1.25rem;
    margin: -0.9rem 0 1.25rem;
    font-size: var(--font-size-caption);
}

.login-match.is-ok[b-tkq6nw7ts5] {
    color: var(--color-status-success);
}

.login-match.is-no[b-tkq6nw7ts5] {
    color: var(--color-red-700);
}

@media (prefers-reduced-motion: reduce) {
    .login-req li[b-tkq6nw7ts5] {
        transition: none;
    }
}

/* No global sr-only utility exists in this codebase (verified) — standard clip-rect definition. */
.sr-only[b-tkq6nw7ts5] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
/* /Components/Pages/Auth/Login.razor.rz.scp.css */
/* Navy used for the primary action, checkbox and headings. Declared on the
   component root (not :root) so Blazor CSS isolation keeps the vars in scope. */
.login[b-maeeii7v4i] {
    --login-navy: var(--color-navy-blue-900);
    --login-navy-hover: var(--color-navy-blue-950);
    display: flex;
    min-height: 100vh;
    width: 100%;
    background: var(--login-navy);
}

/* Left: full-bleed photographic stage with the brand mark over it. */
.login-stage[b-maeeii7v4i] {
    position: relative;
    flex: 1 1 58%;
    /* Vertical depth shading over the photo; the blue glass pane is layered on top. */
    background-image: linear-gradient(180deg, rgba(15, 23, 42, 0.30) 0%, rgba(15, 23, 42, 0.05) 35%, rgba(15, 23, 42, 0.40) 100%),
        url("login/background.png");
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* Frosted blue glass pane over the left half: blurs the photo behind it and a
   light sheen, then masks out toward the form so it dissolves into the sharp
   image. Sits behind the logo/copyright in DOM order so those stay crisp. */
.login-glass[b-maeeii7v4i] {
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg, rgba(40, 72, 138, 0.50) 0%, rgba(22, 44, 96, 0.38) 45%, rgba(22, 44, 96, 0.10) 60%, rgba(22, 44, 96, 0) 70%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 30%);
    backdrop-filter: blur(7px) saturate(118%);
    -webkit-backdrop-filter: blur(7px) saturate(118%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 66%);
    mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 66%);
    pointer-events: none;
}

.login-mark[b-maeeii7v4i] {
    position: absolute;
    top: 2rem;
    left: 2.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.login-mark img[b-maeeii7v4i] {
    height: 44px;
    width: 44px;
    border-radius: 50%;
    display: block;
}

.login-mark__title[b-maeeii7v4i] {
    color: #fff;
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
}

/* Right: light panel that curves over the photo via a large left radius. */
.login-panel[b-maeeii7v4i] {
    flex: 1 1 42%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 3rem;
    background: var(--color-text-base-surface-muted);
    border-top-left-radius: 44px;
    border-bottom-left-radius: 44px;
    margin-left: -44px;
}

.login-card[b-maeeii7v4i] {
    width: 100%;
    max-width: 22rem;
}

.login-title[b-maeeii7v4i] {
    margin: var(--space-0);
    font-size: var(--font-size-heading);
    font-weight: var(--font-weight-bold);
    color: var(--login-navy);
}

.login-subtitle[b-maeeii7v4i] {
    margin: 0.4rem 0 2rem;
    font-size: var(--font-size-caption);
    color: var(--color-text-base-disabled-text);
}

.login-error[b-maeeii7v4i] {
    background: var(--color-component-feedback-card-bg);
    color: var(--color-red-700);
    border: 1px solid var(--color-red-200);
    border-radius: var(--radius-lg);
    padding: 0.75rem 1rem;
    font-size: var(--font-size-body);
    margin: 0 0 1.25rem;
}

.login-field[b-maeeii7v4i] {
    margin-bottom: 1.25rem;
}

.login-field label[b-maeeii7v4i] {
    display: block;
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-medium);
    color: var(--color-neutral-description-icon-form-divider);
}

.login-field input[b-maeeii7v4i] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--color-neutral-disable);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-input);
    background: var(--color-primary-surface);
    color: var(--color-neutral-title-content);
}

.login-field input[b-maeeii7v4i]::placeholder {
    color: var(--color-text-base-placeholder-text);
}

.login-field input:focus[b-maeeii7v4i] {
    outline: none;
    border-color: var(--login-navy);
    box-shadow: 0 0 0 3px rgba(30, 42, 74, 0.12);
}

/* Password field carries an inline reveal toggle on the trailing edge. */
.login-password[b-maeeii7v4i] {
    position: relative;
}

.login-password input[b-maeeii7v4i] {
    padding-right: var(--space-3xl);
}

.login-reveal[b-maeeii7v4i] {
    position: absolute;
    top: 50%;
    right: 0.9rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: var(--space-0);
    font-size: var(--font-size-button);
    color: var(--color-text-base-disabled-text);
    cursor: pointer;
}

.login-reveal:hover[b-maeeii7v4i] {
    color: var(--login-navy);
}

.login-remember[b-maeeii7v4i] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0.25rem 0 1.75rem;
    font-size: var(--font-size-label);
    color: var(--color-neutral-description-icon-form-divider);
    cursor: pointer;
}

.login-remember input[b-maeeii7v4i] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--login-navy);
    cursor: pointer;
}

.login-submit[b-maeeii7v4i] {
    width: 100%;
    padding: 0.8rem 1rem;
    background: var(--login-navy);
    color: var(--color-text-base-white-text);
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background 0.15s ease;
}

.login-submit:hover[b-maeeii7v4i] {
    background: var(--login-navy-hover);
}

.login-submit:focus-visible[b-maeeii7v4i] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(30, 42, 74, 0.3);
}

/* Subtle text link under the form — deliberately not styled like a CTA so it
   doesn't compete with .login-submit. */
.login-guide-trigger[b-maeeii7v4i] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    margin-top: 1.25rem;
    padding: var(--space-0);
    background: none;
    border: none;
    font-size: var(--font-size-label);
    color: var(--color-text-base-disabled-text);
    cursor: pointer;
}

.login-guide-trigger:hover[b-maeeii7v4i] {
    color: var(--login-navy);
}

.login-guide-trigger:focus-visible[b-maeeii7v4i] {
    outline: none;
    color: var(--login-navy);
    text-decoration: underline;
}

/* Native <dialog> for the infographic: no circuit is available on this static
   SSR page, so this is opened/closed via a plain onclick IIFE (same idiom as
   .login-reveal above), not a Blazor event handler. */
.login-guide-dialog[b-maeeii7v4i] {
    padding: var(--space-0);
    border: none;
    border-radius: var(--radius-lg);
    max-width: min(90vw, 640px);
    max-height: 85vh;
    background: transparent;
}

.login-guide-dialog[b-maeeii7v4i]::backdrop {
    background: rgba(15, 23, 42, 0.55);
}

.login-guide-dialog__panel[b-maeeii7v4i] {
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    background: var(--color-primary-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.login-guide-dialog__header[b-maeeii7v4i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-neutral-disable);
}

.login-guide-dialog__header h2[b-maeeii7v4i] {
    margin: var(--space-0);
    font-size: var(--font-size-heading);
    font-weight: var(--font-weight-bold);
    color: var(--login-navy);
}

.login-guide-dialog__close[b-maeeii7v4i] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    background: none;
    border: none;
    padding: var(--space-sm);
    color: var(--color-text-base-disabled-text);
    cursor: pointer;
}

.login-guide-dialog__close:hover[b-maeeii7v4i] {
    color: var(--login-navy);
}

.login-guide-dialog__body[b-maeeii7v4i] {
    overflow: auto;
    padding: 1.25rem;
}

.login-guide-dialog__body img[b-maeeii7v4i] {
    display: block;
    width: 100%;
    height: auto;
}

/* Stack to a single column on narrow screens: card over the photo. */
@media (max-width: 768px) {
    .login-stage[b-maeeii7v4i] {
        display: none;
    }

    .login-panel[b-maeeii7v4i] {
        flex: 1 1 100%;
        border-radius: var(--radius-none);
        margin-left: var(--space-0);
        padding: var(--space-xl) var(--space-lg);
    }
}
/* /Components/Pages/Orders/DeliveryPrep.razor.rz.scp.css */
/* src/PEC.Web/Components/Pages/Orders/DeliveryPrep.razor.css */

.dp-head-left[b-7vawzckvyz] { display: flex; align-items: center; gap: .6rem; }
.dp-accent-text[b-7vawzckvyz] { color: var(--color-status-pending); }

.dp-provider-group[b-7vawzckvyz] { padding: 8px 20px 16px; }
.dp-provider-group__head[b-7vawzckvyz] { display: flex; align-items: center; justify-content: space-between; padding: var(--space-sm) 0; }
.dp-provider-group__title[b-7vawzckvyz] { font-size: var(--font-size-body); font-weight: var(--font-weight-bold); color: var(--color-neutral-title-content); }
.dp-provider-group__count[b-7vawzckvyz] { color: var(--color-text-base-description-icon-form); font-size: var(--font-size-caption); margin-left: var(--space-sm); font-weight: var(--font-weight-regular); }

.dp-table[b-7vawzckvyz] { min-width: 860px; }
.dp-col-check[b-7vawzckvyz] { width: 36px; text-align: center; }
.dp-line-check[b-7vawzckvyz] { width: 17px; height: 17px; accent-color: var(--color-primary-primary); cursor: pointer; }
.dp-line-check:disabled[b-7vawzckvyz] { cursor: default; opacity: .5; }

.dp-item-cell[b-7vawzckvyz] { display: flex; align-items: center; gap: 10px; }
.dp-item-name[b-7vawzckvyz] { font-weight: var(--font-weight-semibold); color: var(--color-neutral-title-content); }
.dp-item-code[b-7vawzckvyz] { color: var(--color-status-error); font-size: var(--font-size-label); font-weight: var(--font-weight-semibold); margin-top: var(--space-px); }
.dp-asset-code[b-7vawzckvyz] { color: var(--color-text-base-placeholder-text); font-size: var(--font-size-label); margin-top: var(--space-px); }
.dp-asset-swapped[b-7vawzckvyz] { color: var(--color-status-waiting); font-size: var(--font-size-texthelp); text-decoration: line-through; margin-top: var(--space-px); }
.dp-cell-empty[b-7vawzckvyz] { color: var(--color-text-base-placeholder-text); }

.dp-qty-cell[b-7vawzckvyz] { font-variant-numeric: tabular-nums; font-weight: var(--font-weight-semibold); }
.dp-qty-input-cell[b-7vawzckvyz] { background: var(--color-component-reward-card-bg); }
.dp-qty-input[b-7vawzckvyz] {
    width: 76px; padding: 6px 8px; border: 1px solid var(--color-blue-200); border-radius: var(--radius-md);
    font-size: var(--font-size-input); font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; color: var(--color-primary-primary);
    background: var(--color-primary-surface);
}
.dp-qty-input:disabled[b-7vawzckvyz] { opacity: .6; }
.dp-remaining-hint[b-7vawzckvyz] { font-size: var(--font-size-texthelp); color: var(--color-text-base-placeholder-text); margin-top: 2px; }

.dp-action-cell[b-7vawzckvyz] { display: flex; align-items: center; gap: var(--space-xs); }
.dp-qr-permanent[b-7vawzckvyz] { color: var(--color-status-success); font-weight: var(--font-weight-bold); }

.dp-required-label[b-7vawzckvyz] { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.dp-required-mark[b-7vawzckvyz] { color: var(--color-status-error); }

.dp-method-toggle[b-7vawzckvyz] { display: flex; gap: 12px; max-width: 420px; }
.dp-method-btn[b-7vawzckvyz] {
    flex: 1; padding: 12px; border-radius: var(--radius-input); border: 1px solid var(--color-text-base-border);
    background: var(--color-primary-surface); color: var(--color-neutral-title-content); font-weight: var(--font-weight-bold); font-size: var(--font-size-button); cursor: pointer; text-align: center;
}
.dp-method-btn:disabled[b-7vawzckvyz] { cursor: default; opacity: .6; }
.dp-method-btn--active[b-7vawzckvyz] { background: var(--color-navy-blue-900); color: var(--color-text-base-white-text); border-color: var(--color-navy-blue-900); }

.dp-driver-subhead[b-7vawzckvyz] { padding-top: 14px; border-top: 1px solid var(--color-text-base-disabled-bg); margin-top: var(--space-xs); }
.dp-driver-subhead h3[b-7vawzckvyz] { font-size: var(--font-size-body); font-weight: var(--font-weight-bold); margin: var(--space-0); color: var(--color-neutral-title-content); }
.dp-grid-4[b-7vawzckvyz] { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .dp-grid-4[b-7vawzckvyz] { grid-template-columns: repeat(2, 1fr); } }

.dp-pickup-note[b-7vawzckvyz] {
    background: var(--color-neutral-background); border: 1px dashed var(--color-text-base-border); border-radius: var(--radius-input);
    padding: 20px; text-align: center; color: var(--color-text-base-description-icon-form); font-size: var(--font-size-caption);
}

.dp-textarea[b-7vawzckvyz] { width: 100%; }
.dp-char-count[b-7vawzckvyz] { text-align: right; font-size: var(--font-size-texthelp); color: var(--color-text-base-placeholder-text); }

.dp-photo-hint[b-7vawzckvyz] { color: var(--color-text-base-placeholder-text); font-size: var(--font-size-texthelp); margin-top: 2px; }
.dp-photo-body[b-7vawzckvyz] { padding: 0 20px 20px; }
.dp-photo-grid[b-7vawzckvyz] { display: flex; gap: 14px; flex-wrap: wrap; }
.dp-photo-thumb[b-7vawzckvyz] { width: 108px; display: flex; flex-direction: column; gap: var(--space-xs); align-items: center; }
.dp-photo-thumb__img[b-7vawzckvyz] {
    width: 108px; height: 108px; border-radius: var(--radius-input); border: 1px solid var(--color-text-base-border);
    display: flex; align-items: center; justify-content: center; color: var(--color-text-base-placeholder-text);
    background: linear-gradient(135deg, var(--color-text-base-border), var(--color-neutral-disable));
}
.dp-photo-thumb__caption[b-7vawzckvyz] {
    font-size: var(--font-size-texthelp); color: var(--color-text-base-description-icon-form); text-align: center; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; width: 100%;
}
.dp-photo-input[b-7vawzckvyz] { display: none; }
.dp-photo-upload-box[b-7vawzckvyz] {
    width: 108px; height: 108px; border-radius: var(--radius-input); border: 1.5px dashed var(--color-blue-200);
    background: var(--color-text-base-background); display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; color: var(--color-primary-primary); font-size: var(--font-size-texthelp); font-weight: var(--font-weight-semibold); cursor: pointer;
}
.dp-photo-upload-box:hover[b-7vawzckvyz] { background: var(--color-text-base-background-soft); }

.dp-validation-error[b-7vawzckvyz] { color: var(--color-status-error); font-size: var(--font-size-caption); margin-top: var(--space-sm); }

.dp-bottom-bar[b-7vawzckvyz] {
    position: sticky; bottom: 0; left: 0; right: 0;
    background: var(--color-primary-surface); border-top: 1px solid var(--color-text-base-border);
    display: flex; align-items: center; justify-content: flex-end; gap: 12px;
    padding: 14px 0; margin-top: var(--space-sm);
}
.dp-bottom-bar__spacer[b-7vawzckvyz] { flex: 1; }

.dp-modal-subtitle[b-7vawzckvyz] { font-size: var(--font-size-caption); color: var(--color-text-base-description-icon-form); margin: 0 0 12px; }
/* Warning, not error: shipping without a bound sticker is allowed, so this must read as something to
   notice rather than something that failed. Reuses the amber pair ProductCategory's group tag already
   uses, so no new colour value enters the sheet. */
.dp-modal-warning[b-7vawzckvyz] {
    font-size: var(--font-size-caption);
    color: var(--color-semantic-extra-warning-text);
    background: var(--color-semantic-extra-warning-bg);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    margin: 0 0 12px;
}
.dp-remain-cell[b-7vawzckvyz] { font-weight: var(--font-weight-bold); color: var(--color-red-700); font-variant-numeric: tabular-nums; }

/* ── Round strip ── */
.dp-round-strip[b-7vawzckvyz] {
    display: flex; gap: 10px; padding: var(--space-md) var(--space-lg);
    overflow-x: auto; background: var(--color-component-card-bg);
    border: 1px solid var(--color-text-base-border);
    border-radius: var(--radius-button) var(--radius-button) 0 0;
    border-bottom: none;
}

.dp-round-card[b-7vawzckvyz] {
    flex-shrink: 0; min-width: 190px; padding: 12px 16px;
    border: 2px solid var(--color-text-base-border); border-radius: var(--radius-button);
    background: var(--color-component-card-bg); cursor: pointer;
    transition: border-color .12s, background .12s;
}
.dp-round-card:hover[b-7vawzckvyz] { border-color: var(--color-primary-primary); }
.dp-round-card--selected[b-7vawzckvyz] {
    border-color: var(--color-primary-primary);
    background: var(--color-primary-surface);
}

.dp-rc-top[b-7vawzckvyz] { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-px); }
.dp-rc-label[b-7vawzckvyz] { font-size: var(--font-size-body); font-weight: var(--font-weight-bold); }
.dp-rc-dn[b-7vawzckvyz] { font-size: var(--font-size-label); color: var(--color-primary-primary); font-weight: var(--font-weight-semibold); }
.dp-rc-meta[b-7vawzckvyz] { font-size: var(--font-size-label); color: var(--color-text-base-placeholder-text); margin-top: 2px; }

/* ── Round badges ── */
.dp-badge[b-7vawzckvyz] {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--font-size-texthelp); font-weight: var(--font-weight-semibold);
    padding: 2px 8px; border-radius: 100px; white-space: nowrap;
}
.dp-badge[b-7vawzckvyz]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dp-badge--preparing[b-7vawzckvyz] { background: var(--color-neutral-disable); color: var(--color-text-base-description-icon-form); }
.dp-badge--preparing[b-7vawzckvyz]::before { background: var(--color-text-base-description-icon-form); }
.dp-badge--shipped[b-7vawzckvyz] { background: var(--color-component-reward-card-bg); color: var(--color-status-warning); }
.dp-badge--shipped[b-7vawzckvyz]::before { background: var(--color-status-warning); }
.dp-badge--received[b-7vawzckvyz] { background: var(--color-status-success-surface, #dcfce7); color: var(--color-status-success); }
.dp-badge--received[b-7vawzckvyz]::before { background: var(--color-status-success); }

/* ── Receipt dot (line-level receipt status) ── */
.dp-receipt-dot[b-7vawzckvyz] { display: inline-flex; align-items: center; gap: 5px; font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); }
.dp-receipt-dot[b-7vawzckvyz]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.dp-receipt-dot--ok[b-7vawzckvyz] { color: var(--color-status-success); }
.dp-receipt-dot--ok[b-7vawzckvyz]::before { background: var(--color-status-success); }
.dp-receipt-dot--no[b-7vawzckvyz] { color: var(--color-status-error); }
.dp-receipt-dot--no[b-7vawzckvyz]::before { background: var(--color-status-error); }

/* ── Receipt info card ── */
.dp-receipt-grid[b-7vawzckvyz] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md) var(--space-lg); }
.dp-receipt-remark[b-7vawzckvyz] { margin-top: var(--space-md); }

/* ── Photo display (read-only, for history view) ── */
.dp-photo-ro-grid[b-7vawzckvyz] { display: flex; gap: 10px; flex-wrap: wrap; }
.dp-photo-ro-thumb[b-7vawzckvyz] {
    width: 88px; height: 88px; border-radius: var(--radius-input);
    object-fit: cover; border: 1px solid var(--color-text-base-border); cursor: pointer;
}
.dp-photo-clickable:hover[b-7vawzckvyz] { opacity: 0.8; box-shadow: 0 0 0 2px var(--accent-fill-rest); }
.dp-photo-group + .dp-photo-group[b-7vawzckvyz] { margin-top: var(--space-md); }
.dp-photo-group-label[b-7vawzckvyz] { font-size: var(--font-size-label); color: var(--color-text-base-placeholder-text); margin-bottom: var(--space-sm); font-weight: var(--font-weight-semibold); }

/* ── Photo viewer modal ── */
.dp-photo-modal-body[b-7vawzckvyz] { display: flex; justify-content: center; align-items: center; }
.dp-photo-modal-img[b-7vawzckvyz] { max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--radius-input); }

/* ── Attached card (round strip → content, no top radius) ── */
.dp-card-attached[b-7vawzckvyz] { border-radius: 0 0 var(--radius-button) var(--radius-button); }

/* ── Asset swap scanner modal (mirrors the receipt page's dr-* scan styles) ── */
.dp-overlay[b-7vawzckvyz] {
    position: fixed; inset: 0;
    background: rgba(15, 18, 35, 0.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
}
.dp-modal[b-7vawzckvyz] {
    background: var(--color-primary-surface); border-radius: var(--radius-card);
    padding: 28px 24px 24px;
    min-width: 380px; max-width: 480px;
    display: flex; flex-direction: column; gap: 6px;
    box-shadow: 0 20px 60px rgba(27,37,89,0.18), 0 4px 16px rgba(27,37,89,0.08);
}
.dp-modal--scan[b-7vawzckvyz] { min-width: 340px; max-width: 420px; }
.dp-modal__title[b-7vawzckvyz] { font-size: var(--font-size-title); font-weight: var(--font-weight-bold); color: var(--color-blue-950); margin: var(--space-0); }
.dp-modal__actions[b-7vawzckvyz] { display: flex; gap: 10px; margin-top: 12px; justify-content: flex-end; }

.dp-scan-subtitle[b-7vawzckvyz] { font-size: var(--font-size-caption); color: var(--color-text-base-description-icon-form); margin: 2px 0 0; }

/* ── Scan feedback banner: what was wrong with the code ── */
.dp-scan-banner[b-7vawzckvyz] {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; margin-top: 10px;
    border: 1px solid; border-radius: var(--radius-input);
    font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold);
}
.dp-scan-banner__icon[b-7vawzckvyz] {
    flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--font-size-texthelp); font-weight: var(--font-weight-bold);
    color: var(--color-text-base-white-text);
}
.dp-scan-banner--warn[b-7vawzckvyz] { background: var(--color-component-reward-card-bg); border-color: var(--color-status-warning); color: var(--color-neutral-title-content); }
.dp-scan-banner--warn .dp-scan-banner__icon[b-7vawzckvyz] { background: var(--color-status-warning); }
.dp-scan-banner--error[b-7vawzckvyz] { background: var(--color-status-error-surface, #fee2e2); border-color: var(--color-status-error); color: var(--color-neutral-title-content); }
.dp-scan-banner--error .dp-scan-banner__icon[b-7vawzckvyz] { background: var(--color-status-error); }

/* ── Viewfinder + the acknowledge panel that sits over it ── */
.dp-scan-stage[b-7vawzckvyz] { position: relative; }
.dp-viewfinder[b-7vawzckvyz] {
    width: 100%; max-width: 300px; aspect-ratio: 1;
    margin: 8px auto; border-radius: var(--radius-input); overflow: hidden;
    background: var(--color-neutral-title-content);
}
.dp-scan-ack[b-7vawzckvyz] {
    position: absolute; left: -12px; right: -12px; top: 50%; transform: translateY(-50%);
    background: var(--color-primary-surface); border-radius: var(--radius-card);
    padding: 20px; display: flex; flex-direction: column; gap: 8px;
    box-shadow: 0 16px 40px rgba(27, 37, 89, 0.22), 0 2px 8px rgba(27, 37, 89, 0.1);
}
.dp-scan-ack__title[b-7vawzckvyz] { font-size: var(--font-size-body); font-weight: var(--font-weight-bold); color: var(--color-blue-950); margin: var(--space-0); }
.dp-scan-ack__message[b-7vawzckvyz] { font-size: var(--font-size-caption); color: var(--color-text-base-description-icon-form); margin: var(--space-0); }
.dp-scan-ack__ok[b-7vawzckvyz] { width: 100%; margin-top: 6px; }
.dp-scan-fallback[b-7vawzckvyz] { margin-top: var(--space-sm); }
.dp-scan-fallback__label[b-7vawzckvyz] { font-size: var(--font-size-label); color: var(--color-text-base-description-icon-form); display: block; margin-bottom: var(--space-xs); }
.dp-scan-fallback__row[b-7vawzckvyz] { display: flex; gap: var(--space-sm); }
.dp-scan-input[b-7vawzckvyz] {
    flex: 1; padding: 8px 10px; border: 1px solid var(--color-neutral-disable); border-radius: var(--radius-md);
    font-size: var(--font-size-input); font-family: inherit;
}
.dp-scan-status[b-7vawzckvyz] { font-size: var(--font-size-caption); color: var(--color-text-base-description-icon-form); display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-sm); }

.dp-swap-choices[b-7vawzckvyz] { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-sm); }
.dp-swap-choices__label[b-7vawzckvyz] { font-size: var(--font-size-body); font-weight: var(--font-weight-bold); color: var(--color-neutral-title-content); margin: var(--space-0) 0 4px; }

/* ── Candidate picker: which pinned unit the scanned one displaces ── */
.dp-swap-choice[b-7vawzckvyz] {
    display: flex; align-items: center; gap: 12px; cursor: pointer;
    padding: 10px 12px; border: 1px solid transparent; border-radius: var(--radius-input);
}
.dp-swap-choice:hover[b-7vawzckvyz] { background: var(--color-text-base-background-soft, var(--color-neutral-background)); }
.dp-swap-choice--chosen[b-7vawzckvyz] { background: var(--color-neutral-background); border-color: var(--color-text-base-border); }
.dp-swap-choice__radio[b-7vawzckvyz] {
    flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--color-neutral-title-content);
    display: inline-flex; align-items: center; justify-content: center;
}
.dp-swap-choice--chosen .dp-swap-choice__radio[b-7vawzckvyz]::after {
    content: ""; width: 10px; height: 10px; border-radius: 50%;
    background: var(--color-neutral-title-content);
}
.dp-swap-choice__text[b-7vawzckvyz] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dp-swap-choice__name[b-7vawzckvyz] { font-size: var(--font-size-caption); color: var(--color-neutral-title-content); }
.dp-swap-choice__serial[b-7vawzckvyz] { font-size: var(--font-size-label); font-weight: var(--font-weight-semibold); color: var(--color-status-error); }

.dp-scan-actions[b-7vawzckvyz] { justify-content: center; gap: 14px; }
/* /Components/Pages/Orders/DeliveryReceipt.razor.rz.scp.css */
/* src/PEC.Web/Components/Pages/Orders/DeliveryReceipt.razor.css */

.dr-line-count[b-4ptzocdlny] { color: var(--color-text-base-description-icon-form); font-size: var(--font-size-caption); margin-left: var(--space-sm); font-weight: var(--font-weight-regular); }

.dr-table[b-4ptzocdlny] { min-width: 640px; }

.dr-item-cell[b-4ptzocdlny] { display: flex; align-items: center; gap: 10px; }
.dr-item-name[b-4ptzocdlny] { font-weight: var(--font-weight-semibold); color: var(--color-neutral-title-content); }
.dr-item-serial[b-4ptzocdlny] { color: var(--color-navy-blue-400); font-size: var(--font-size-label); font-weight: var(--font-weight-semibold); margin-top: var(--space-px); }
.dr-item-dates[b-4ptzocdlny] { color: var(--color-text-base-placeholder-text); font-size: var(--font-size-label); margin-top: var(--space-px); }

.dr-qty-cell[b-4ptzocdlny] { font-variant-numeric: tabular-nums; font-weight: var(--font-weight-semibold); }

/* ── Status badges ── */
.dr-badge[b-4ptzocdlny] {
    display: inline-block;
    font-size: var(--font-size-status); font-weight: var(--font-weight-semibold);
    padding: 2px 8px; border-radius: var(--radius-input);
    white-space: nowrap;
}
.dr-badge--accepted[b-4ptzocdlny] { background: var(--color-green-50); color: var(--color-green-700); }
.dr-badge--pending[b-4ptzocdlny] { background: var(--color-component-feedback-card-bg); color: var(--color-red-700); }

/* ── Action buttons ── */
.dr-action-cell[b-4ptzocdlny] { display: flex; align-items: center; gap: 6px; }
.dr-action-btn[b-4ptzocdlny] {
    width: 28px; height: 28px; border-radius: var(--radius-md);
    border: 1px solid var(--color-text-base-border);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; background: var(--color-primary-surface);
    font-size: var(--font-size-caption); line-height: 1;
    transition: background 0.15s;
}
.dr-action-btn--accept[b-4ptzocdlny] { color: var(--color-status-success); }
.dr-action-btn--accept:hover[b-4ptzocdlny] { background: var(--color-green-50); }
.dr-action-btn--accept.dr-action-btn--active[b-4ptzocdlny] {
    background: var(--color-green-50); border-color: var(--color-status-success);
}
.dr-action-btn--remark[b-4ptzocdlny] { color: var(--color-navy-blue-400); }
.dr-action-btn--remark:hover[b-4ptzocdlny] { background: var(--color-text-base-background-soft); }

/* ── Photo upload ── */
.dr-photo-hint[b-4ptzocdlny] { color: var(--color-text-base-placeholder-text); font-size: var(--font-size-texthelp); margin-top: 2px; }
.dr-photo-body[b-4ptzocdlny] { padding: 0 20px 20px; }
.dr-photo-grid[b-4ptzocdlny] { display: flex; gap: 14px; flex-wrap: wrap; }
.dr-photo-thumb[b-4ptzocdlny] { width: 108px; display: flex; flex-direction: column; gap: var(--space-xs); align-items: center; }
.dr-photo-thumb__img[b-4ptzocdlny] {
    width: 108px; height: 108px; border-radius: var(--radius-input); border: 1px solid var(--color-text-base-border);
    display: flex; align-items: center; justify-content: center; color: var(--color-text-base-placeholder-text);
    background: linear-gradient(135deg, var(--color-text-base-border), var(--color-neutral-disable));
}
.dr-photo-thumb__caption[b-4ptzocdlny] {
    font-size: var(--font-size-texthelp); color: var(--color-text-base-description-icon-form); text-align: center; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; width: 100%;
}
.dr-photo-input[b-4ptzocdlny] { display: none; }
.dr-photo-upload-box[b-4ptzocdlny] {
    width: 108px; height: 108px; border-radius: var(--radius-input); border: 1.5px dashed var(--color-blue-200);
    background: var(--color-text-base-background); display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; color: var(--color-primary-primary); font-size: var(--font-size-texthelp); font-weight: var(--font-weight-semibold); cursor: pointer;
}
.dr-photo-upload-box:hover[b-4ptzocdlny] { background: var(--color-text-base-background-soft); }

/* ── Bottom bar ── */
.dr-bottom-bar[b-4ptzocdlny] {
    position: sticky; bottom: 0; left: 0; right: 0;
    background: var(--color-primary-surface); border-top: 1px solid var(--color-text-base-border);
    display: flex; align-items: center; justify-content: flex-end; gap: 12px;
    padding: 14px 0; margin-top: var(--space-sm);
}
.dr-bottom-bar__spacer[b-4ptzocdlny] { flex: 1; }

/* ── Modal overlay ── */
.dr-overlay[b-4ptzocdlny] {
    position: fixed; inset: 0;
    background: rgba(15, 18, 35, 0.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
}
.dr-modal[b-4ptzocdlny] {
    background: var(--color-primary-surface); border-radius: var(--radius-card);
    padding: 28px 24px 24px;
    min-width: 380px; max-width: 480px;
    display: flex; flex-direction: column; gap: 6px;
    box-shadow: 0 20px 60px rgba(27,37,89,0.18), 0 4px 16px rgba(27,37,89,0.08);
}
.dr-modal--scan[b-4ptzocdlny] { min-width: 340px; max-width: 420px; }
.dr-modal__title[b-4ptzocdlny] { font-size: var(--font-size-title); font-weight: var(--font-weight-bold); color: var(--color-blue-950); margin: var(--space-0); }
.dr-modal__desc[b-4ptzocdlny] { font-size: var(--font-size-caption); color: var(--color-neutral-description-icon-form-divider); line-height: 1.6; margin: 0 0 var(--space-sm); }
.dr-modal__label[b-4ptzocdlny] { font-size: var(--font-size-label); font-weight: var(--font-weight-semibold); color: var(--color-neutral-description-icon-form-divider); margin-top: var(--space-sm); }
.dr-modal__textarea[b-4ptzocdlny] {
    width: 100%; border: 1px solid var(--color-neutral-disable); border-radius: var(--radius-md);
    padding: 10px 12px; font-size: var(--font-size-input); font-family: inherit;
    resize: vertical; min-height: 64px; background: var(--color-primary-surface); color: var(--color-blue-950);
}
.dr-modal__textarea[b-4ptzocdlny]::placeholder { color: var(--color-text-base-placeholder-text); }
.dr-modal__actions[b-4ptzocdlny] { display: flex; gap: 10px; margin-top: 12px; justify-content: flex-end; }

.dr-char-count[b-4ptzocdlny] { text-align: right; font-size: var(--font-size-texthelp); color: var(--color-text-base-placeholder-text); margin-top: 2px; }

/* ── Warning banner for rejection modal ── */
.dr-warning-banner[b-4ptzocdlny] {
    display: flex; gap: 10px; align-items: start;
    padding: 12px 14px;
    background: var(--color-yellow-50); border-radius: var(--radius-md);
    border-left: 3px solid var(--color-status-waiting);
    margin-bottom: var(--space-sm);
}
.dr-warning-banner__icon[b-4ptzocdlny] { color: var(--color-status-waiting); font-size: var(--font-size-title); flex-shrink: 0; margin-top: var(--space-px); }
.dr-warning-banner div[b-4ptzocdlny] { font-size: var(--font-size-label); color: var(--color-orange-800); line-height: 1.5; }
.dr-warning-banner strong[b-4ptzocdlny] { font-weight: var(--font-weight-bold); }

/* ── Rejected items list ── */
.dr-rejected-list[b-4ptzocdlny] { margin-bottom: var(--space-sm); }
.dr-rejected-item[b-4ptzocdlny] {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--space-sm) 0; border-bottom: 1px solid var(--color-text-base-disabled-bg); font-size: var(--font-size-caption);
}
.dr-rejected-item:last-child[b-4ptzocdlny] { border-bottom: none; }
.dr-rejected-item__name[b-4ptzocdlny] { color: var(--color-blue-950); font-weight: var(--font-weight-medium); }
.dr-rejected-item__qty[b-4ptzocdlny] { color: var(--color-red-700); font-weight: var(--font-weight-semibold); font-size: var(--font-size-label); }

/* ── QR scan modal ── */
.dr-viewfinder[b-4ptzocdlny] {
    width: 100%; max-width: 300px; aspect-ratio: 1;
    margin: 8px auto; border-radius: var(--radius-input); overflow: hidden;
    background: var(--color-neutral-title-content);
}
.dr-scan-fallback[b-4ptzocdlny] { margin-top: var(--space-sm); }
.dr-scan-fallback__label[b-4ptzocdlny] { font-size: var(--font-size-label); color: var(--color-text-base-description-icon-form); display: block; margin-bottom: var(--space-xs); }
.dr-scan-fallback__row[b-4ptzocdlny] { display: flex; gap: var(--space-sm); }
.dr-scan-fallback__input[b-4ptzocdlny] {
    flex: 1; padding: 8px 10px; border: 1px solid var(--color-neutral-disable); border-radius: var(--radius-md);
    font-size: var(--font-size-input); font-family: inherit;
}
.dr-scan-status[b-4ptzocdlny] { font-size: var(--font-size-caption); color: var(--color-text-base-description-icon-form); display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-sm); }
/* /Components/Pages/Qr/QrAssetBindModal.razor.rz.scp.css */
/* QrAssetBindModal.razor
   2026-07-31: the inline asset picker (search field + table) moved out to its own component,
   QrAssetPickerModal.razor(.css) — this file keeps only the sticker-view rules (asset summary, QR
   sticker wrapper, url readout, footer actions). */
.qam[b-758033k5dq] { display: flex; flex-direction: column; gap: var(--space-md); min-width: 340px; max-width: 420px; }

.qam-asset[b-758033k5dq] {
    display: flex; gap: var(--space-md); align-items: center;
    border: 1px solid var(--color-neutral-200, #d9dee4);
    border-radius: 12px; padding: var(--space-md);
}
/* Fixed box either way, so swapping the SKU photo for the fallback glyph does not reflow the card. */
.qam-asset-thumb[b-758033k5dq] {
    color: var(--color-navy-blue-900, #12263f);
    flex: 0 0 auto; width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
}
.qam-asset-img[b-758033k5dq] { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.qam-asset-name[b-758033k5dq] { font-weight: 700; font-size: 1.05rem; color: var(--color-navy-blue-900, #12263f); }
.qam-asset-meta[b-758033k5dq] { font-size: .85rem; color: var(--color-text-base-placeholder-text, #667085); }

.qam-url[b-758033k5dq] { text-align: center; }
.qam-url-label[b-758033k5dq] { font-weight: 700; color: var(--color-navy-blue-900, #12263f); }
.qam-url-value[b-758033k5dq] { font-size: .85rem; color: var(--color-text-base-placeholder-text, #667085); word-break: break-all; }

/* Equal-width actions: the three labels differ in length (ปิด / แก้ไข / ไปหน้าวัสดุ), which left the
   row visibly ragged. flex:1 with a zero basis divides the row evenly regardless of label length;
   min-width keeps the longest label from wrapping when the dialog is at its narrow end. */
.qam-actions[b-758033k5dq] { display: flex; gap: var(--space-sm); justify-content: center; width: 100%; }
/* The buttons themselves carry Width="100%" (PecButton's own param, which also sizes the shadow
   ::part(control) — a bare CSS width here would only stretch the host). */
.qam-actions > *[b-758033k5dq] { flex: 1 1 0; min-width: 0; }
/* /Components/Pages/Qr/QrAssetPickerModal.razor.rz.scp.css */
/* QrAssetPickerModal.razor — the mirror of QrStickerPickerModal.razor.css (that one picks a sticker
   for a known asset; this one picks an asset for a known sticker). Same dialog sizing/scroll rules;
   the table itself is the shared PecTable (.pec-table* in wwwroot/components.css), same as that
   file's own picker. */
/* Fills whatever the dialog gives it — the width lives on pec-dialog--wide, same as .qsp. */
.qapm[b-w5h6tkhf4s] { display: flex; flex-direction: column; gap: var(--space-md); width: 100%; }

.qapm-header[b-w5h6tkhf4s] { font-weight: 700; font-size: 1.05rem; color: var(--color-navy-blue-900, #12263f); }

/* Scrolls inside the dialog rather than growing it. Same max-height as QrStickerPickerModal's
   .qsp-results so both pickers open at the same size. PecTable's own .pec-table__scroll only scrolls
   horizontally, so this wrapper still carries the vertical scroll. */
.qapm-results[b-w5h6tkhf4s] { max-height: min(56vh, 520px); overflow-y: auto; }
/* /Components/Pages/Qr/QrBatchCreate.razor.rz.scp.css */
/* QrBatchCreate.razor — combined create form + batch code table. */

.qrc-layout[b-c1nn4snkt0] {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-lg);
    align-items: start;
    margin-bottom: var(--space-lg);
}
.qrc-layout.no-preview[b-c1nn4snkt0] { grid-template-columns: 1fr; }

.qrc-card[b-c1nn4snkt0] {
    background: var(--color-component-card-bg, #fff);
    border-radius: var(--radius-card, 12px);
    box-shadow: var(--shadow-card-soft, 0 1px 3px rgba(0, 0, 0, .08));
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.qrc-title[b-c1nn4snkt0] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-navy-blue-900, #12263f);
    margin: 0;
}

/* จำนวน row: the preset PecChoiceGroup and the free-form "อื่นๆ" PecNumberField on one line.
   flex-end so the two input boxes bottom-align (each Pec wrapper owns its own label row above).
   Both wrappers style themselves, so the old hand-rolled qrc-field, qrc-label, qrc-req, qrc-seg,
   qrc-custom and qrc-input rules are gone along with the markup they styled. */
.qrc-qty-row[b-c1nn4snkt0] { display: flex; gap: var(--space-md); align-items: flex-end; flex-wrap: wrap; }
.qrc-qty-custom[b-c1nn4snkt0] { max-width: 160px; }

/* Unbound pre-print row: the number is a shape, not a value — greyed so it never reads as real. */
.qrc-qrno-blank[b-c1nn4snkt0] { color: var(--color-text-base-placeholder-text, #9aa5b1); font-style: italic; }

/* SKU cell: photo (when the Item has one) + code. Rows without a photo keep the code on the same
   baseline as rows with one — no per-row height jump down the table. */
.qrc-sku[b-c1nn4snkt0] { display: flex; align-items: center; gap: var(--space-sm, .5rem); min-height: 32px; }
.qrc-sku-img[b-c1nn4snkt0] { width: 32px; height: 32px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; }

.qrc-grid[b-c1nn4snkt0] { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-md); }
.qrc-grid-3[b-c1nn4snkt0] { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }

/* Sticker preview — the sticker chrome itself is the shared QrSticker component now
   (Components/Shared/Ui/QrSticker.razor + .razor.css); this page only owns the "no token yet"
   placeholder content passed into QrSticker's Empty fragment. Padding/gap mirror
   QrSticker.razor.css's own `.qr-sticker-body` so swapping the icon for the real canvas+code+strip
   doesn't visibly reflow the card. */
.qrc-preview-empty[b-c1nn4snkt0] { color: #0b1220; padding: 1rem; display: flex; flex-direction: column; align-items: center; gap: .6rem; }

/* The status pill is PecBadge and the row actions are PecButton IconOnly now — the hand-rolled
   .qrc-status / .qrc-ico rules that used to live here are gone with them. */
.qrc-actions[b-c1nn4snkt0] { display: flex; gap: .4rem; justify-content: center; }

/* Delete confirmation. Mirrors PrintStickerButton's own confirm dialog rules — the two are the
   page's only irreversible actions and should not look like two different products. The footer slot
   applies no layout of its own, so bare buttons in it sit however the dialog happens to stack them. */
.qrc-confirm__title[b-c1nn4snkt0] { margin: 0; font-size: 1rem; font-weight: var(--font-weight-bold); }
.qrc-confirm__lead[b-c1nn4snkt0] { margin: 0 0 .5rem; font-size: .95rem; color: var(--color-neutral-title-content); }
.qrc-confirm__note[b-c1nn4snkt0] { margin: .2rem 0; font-size: var(--font-size-caption); color: var(--color-text-base-description-icon-form); }
.qrc-confirm__actions[b-c1nn4snkt0] { display: flex; justify-content: center; align-items: center; gap: 12px; width: 100%; }

/* Sticky bottom action bar */
.qrc-actionbar[b-c1nn4snkt0] {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    padding: var(--space-md);
    background: #fff;
    border-top: 1px solid var(--color-neutral-200, #d9dee4);
    margin-top: var(--space-lg);
}

@media (max-width: 900px) {
    .qrc-layout[b-c1nn4snkt0] { grid-template-columns: 1fr; }
    .qrc-grid-3[b-c1nn4snkt0] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Qr/QrOrderModal.razor.rz.scp.css */
/* QrOrderModal.razor — same shape as QrAssetBindModal's own scoped rules (that file is the house
   pattern for a QR dialog), minus everything that only makes sense for an asset. No new colour
   values: every literal here is the one QrAssetBindModal.razor.css already pairs with that token. */
.qom[b-tefeiw7cve] { display: flex; flex-direction: column; gap: var(--space-md); min-width: 340px; max-width: 420px; }

.qom-header[b-tefeiw7cve] { font-weight: 700; font-size: 1.05rem; color: var(--color-navy-blue-900, #12263f); }

.qom-url[b-tefeiw7cve] { text-align: center; }
.qom-url-label[b-tefeiw7cve] { font-weight: 700; color: var(--color-navy-blue-900, #12263f); }
.qom-url-value[b-tefeiw7cve] { font-size: .85rem; color: var(--color-text-base-placeholder-text, #667085); word-break: break-all; }

/* Equal-width actions, same rule QrAssetBindModal uses: the labels differ in length, and the buttons
   carry Width="100%" themselves (PecButton's own param, which also sizes the shadow ::part(control) —
   a bare CSS width here would only stretch the host). */
.qom-actions[b-tefeiw7cve] { display: flex; gap: var(--space-sm); justify-content: center; width: 100%; }
.qom-actions > *[b-tefeiw7cve] { flex: 1 1 0; min-width: 0; }
/* /Components/Pages/Qr/QrStickerPickerModal.razor.rz.scp.css */
/* QrStickerPickerModal.razor — the mirror of QrAssetBindModal, so it reuses that component's
   result-list shape and the same design tokens. No new colour values are introduced here: every
   value is either a token or the identical literal fallback QrAssetBindModal.razor.css already
   pairs with that token.
   2026-07-31: the hand-rolled .qsp-table now uses the shared PecTable (PecTable.razor's head block
   is opt-in as of this change, so it fits inside this dialog) — only the dialog-sizing/scroll rules
   and the bound-row tint (applied via PecTable's RowClass) remain here; the table/thead/tbody rules
   are gone, PecTable owns that chrome now (.pec-table* in wwwroot/components.css). */
/* Fills whatever the dialog gives it. The WIDTH lives on the dialog (pec-dialog--wide in
   components.css): fluent-dialog sizes its own ::part(control), so a min-width here only pushed the
   table past the white panel instead of growing it. */
.qsp[b-6p8mo07hh3] { display: flex; flex-direction: column; gap: var(--space-md); width: 100%; }

.qsp-header[b-6p8mo07hh3] { font-weight: 700; font-size: 1.05rem; color: var(--color-navy-blue-900, #12263f); }

/* Scrolls inside the dialog rather than growing it — the sticker list is as long as the batch. Same
   max-height as .qam-results so the two pickers open at the same size. PecTable's own
   .pec-table__scroll only scrolls horizontally, so this wrapper still carries the vertical scroll. */
.qsp-results[b-6p8mo07hh3] { max-height: min(56vh, 520px); overflow-y: auto; }

/* Bound rows are shown, never selectable — a dimmed background is the only visual difference from
   an unbound row; the select button itself carries Disabled, which is the actual guard. Applied via
   PecTable's RowClass, so it targets PecTable's own <tr>, not a hand-rolled one. */
.qsp-row--bound[b-6p8mo07hh3] { background: var(--color-neutral-50, #f4f6f8); color: var(--color-text-base-placeholder-text, #667085); }
/* /Components/Pages/ScanQr.razor.rz.scp.css */
/* src/PEC.Web/Components/Pages/ScanQr.razor.css */

.sq-card[b-lxuroo24ea] { max-width: 480px; margin: 0 auto; }

.sq-viewfinder[b-lxuroo24ea] {
    width: 100%;
    min-height: 260px;
    border-radius: var(--radius-input);
    overflow: hidden;
    background: var(--color-neutral-title-content);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sq-fallback[b-lxuroo24ea] { margin-top: 1.25rem; }
.sq-fallback__label[b-lxuroo24ea] { display: block; font-size: var(--font-size-label); font-weight: var(--font-weight-semibold); color: var(--color-neutral-description-icon-form-divider); margin-bottom: 6px; }
.sq-fallback__row[b-lxuroo24ea] { display: flex; gap: var(--space-sm); }
.sq-fallback__input[b-lxuroo24ea] {
    flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--color-text-base-border); border-radius: var(--radius-lg);
    font-size: var(--font-size-input); font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}
.sq-fallback__input:disabled[b-lxuroo24ea] { background: var(--color-neutral-background); color: var(--color-text-base-placeholder-text); }

.sq-status[b-lxuroo24ea] {
    display: flex; align-items: center; gap: var(--space-sm);
    margin-top: var(--space-md); font-size: var(--font-size-caption); color: var(--color-text-base-description-icon-form);
}

.sq-asset[b-lxuroo24ea] { display: flex; flex-direction: column; gap: var(--space-xs); }
.sq-asset__code[b-lxuroo24ea] { font-size: var(--font-size-title); font-weight: var(--font-weight-bold); margin: 0; }
.sq-asset__name[b-lxuroo24ea] { font-size: var(--font-size-body); color: var(--color-text-base-description-icon-form); margin: 0; }
.sq-asset__status[b-lxuroo24ea] { font-size: var(--font-size-body); margin: 0; display: flex; align-items: center; gap: var(--space-xs); }
.sq-asset__detail[b-lxuroo24ea] { font-size: var(--font-size-caption); color: var(--color-text-base-description-icon-form); margin: 0; }
.sq-asset__actions[b-lxuroo24ea] { display: flex; flex-direction: column; gap: var(--space-sm); width: 100%; }
/* /Components/Shared/Order/AssetPickerDialog.razor.rz.scp.css */
/* src/PEC.Web/Components/Shared/Order/AssetPickerDialog.razor.css */

.apd-overlay[b-o3t81ys6mz] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: var(--space-lg);
}

.apd-modal[b-o3t81ys6mz] {
    background: var(--color-primary-surface);
    border-radius: var(--radius-input);
    width: 100%;
    max-width: 1100px;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
    display: flex;
    flex-direction: column;
}

/* ---- Header band (title-only — the picker is already scoped to a single ERPNext item) ---- */
.apd-header--simple[b-o3t81ys6mz] {
    display: flex;
    align-items: center;
    padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-xl);
    border-bottom: 1px solid var(--color-text-base-border);
}

.apd-header__info[b-o3t81ys6mz] { flex: 1 1 auto; min-width: 0; }
.apd-header__title[b-o3t81ys6mz] { font-size: var(--font-size-title); font-weight: var(--font-weight-bold); color: var(--color-neutral-title-content); }
.apd-header__sep[b-o3t81ys6mz] { margin: 0 var(--space-sm); color: var(--color-text-base-button-cancel); }

/* ---- Filters ---- */
.apd-filters[b-o3t81ys6mz] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: var(--space-md) var(--space-lg);
    flex-wrap: wrap;
}
.apd-filter-field[b-o3t81ys6mz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 180px;
}
.apd-filter-field label[b-o3t81ys6mz] { font-size: var(--font-size-label); color: var(--color-text-base-description-icon-form); font-weight: var(--font-weight-semibold); }

/* ---- Table ---- */
.apd-table thead th[b-o3t81ys6mz] { background: var(--color-navy-blue-900); color: var(--color-text-base-border); }
.apd-row--disabled[b-o3t81ys6mz] { opacity: .55; }
.apd-row--disabled td[b-o3t81ys6mz] { cursor: not-allowed; }
.apd-row--selected[b-o3t81ys6mz] { background: var(--color-component-reward-card-bg); }
.apd-empty[b-o3t81ys6mz] { text-align: center; padding: var(--space-xl); color: var(--color-text-base-placeholder-text); }
.apd-muted[b-o3t81ys6mz] { color: var(--color-text-base-placeholder-text); }

.apd-cell-input[b-o3t81ys6mz] { width: 110px; }

.apd-unit-name[b-o3t81ys6mz] { font-weight: var(--font-weight-semibold); color: var(--color-neutral-title-content); }
.apd-unit-meta[b-o3t81ys6mz] { font-size: var(--font-size-caption); color: var(--color-text-base-description-icon-form); margin-top: 2px; }

.apd-table input[type="date"][b-o3t81ys6mz] {
    border: 1px solid var(--color-text-base-button-cancel);
    border-radius: 4px;
    padding: 4px 6px;
    font-size: var(--font-size-input);
    color: var(--color-neutral-description-icon-form-divider);
    width: 128px;
}

/* ---- Footer ---- */
.apd-footer[b-o3t81ys6mz] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--color-text-base-border);
}
/* /Components/Shared/Order/MaterialLotPickerDialog.razor.rz.scp.css */
/* src/PEC.Web/Components/Shared/Order/MaterialLotPickerDialog.razor.css */

.mlp-overlay[b-jc16hk2ai7] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: var(--space-lg);
}

.mlp-modal[b-jc16hk2ai7] {
    background: var(--color-primary-surface);
    border-radius: var(--radius-input);
    width: 100%;
    max-width: 1100px;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
    display: flex;
    flex-direction: column;
}

/* ---- Header band ---- */
.mlp-header[b-jc16hk2ai7] {
    display: flex;
    align-items: stretch;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-text-base-border);
}

.mlp-header__panel[b-jc16hk2ai7] {
    flex: 1 1 100%;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid var(--color-text-base-border);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    min-width: 0;
}

.mlp-header__image[b-jc16hk2ai7] {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    object-fit: cover;
    background: var(--color-text-base-disabled-bg);
    flex-shrink: 0;
}

.mlp-header__image--placeholder[b-jc16hk2ai7] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-base-placeholder-text);
}

.mlp-header__info[b-jc16hk2ai7] { flex: 1 1 auto; min-width: 0; }
.mlp-header__title-row[b-jc16hk2ai7] { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); }
.mlp-header__title[b-jc16hk2ai7] { font-size: var(--font-size-title); font-weight: var(--font-weight-bold); color: var(--color-neutral-title-content); }
.mlp-header__sub[b-jc16hk2ai7] { font-size: var(--font-size-caption); color: var(--color-text-base-description-icon-form); margin-top: 2px; }
.mlp-header__sep[b-jc16hk2ai7] { margin: 0 var(--space-sm); color: var(--color-text-base-button-cancel); }
.mlp-header__badges[b-jc16hk2ai7] { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-sm); }

.mlp-badge-pill[b-jc16hk2ai7] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-status);
    font-weight: var(--font-weight-semibold);
    padding: .25rem .65rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-text-base-button-cancel);
    color: var(--color-neutral-description-icon-form-divider);
    background: var(--color-primary-surface);
    white-space: nowrap;
}
.mlp-badge-pill--accent[b-jc16hk2ai7] { border-color: var(--color-status-waiting); color: var(--color-semantic-extra-highlight-text); background: var(--color-yellow-50); }

/* ---- Table ---- */
.mlp-table thead th[b-jc16hk2ai7] { background: var(--color-navy-blue-900); color: var(--color-text-base-border); }
.mlp-empty[b-jc16hk2ai7] { text-align: center; padding: var(--space-xl); color: var(--color-text-base-placeholder-text); }

/* ---- Bottom bar ---- */
.mlp-bottom-bar[b-jc16hk2ai7] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--color-text-base-border);
    flex-wrap: wrap;
}

.mlp-bottom-bar__field[b-jc16hk2ai7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex: 1 1 0;
    min-width: 140px;
}

.mlp-bottom-bar__field label[b-jc16hk2ai7] {
    font-size: var(--font-size-label);
    color: var(--color-text-base-description-icon-form);
    font-weight: var(--font-weight-semibold);
}

.mlp-bottom-bar__value[b-jc16hk2ai7] {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    padding: 6px 10px;
    background: var(--color-text-base-disabled-bg);
    border-radius: var(--radius-input);
    border: 1px solid var(--color-text-base-border);
}

.mlp-bottom-bar__value--total[b-jc16hk2ai7] {
    color: var(--color-semantic-extra-highlight-text);
}

.mlp-bottom-bar__input[b-jc16hk2ai7] {
    max-width: 160px;
}

/* ---- Warning ---- */
.mlp-warning[b-jc16hk2ai7] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    color: var(--color-status-error);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-semibold);
}

/* ---- Footer ---- */
.mlp-footer[b-jc16hk2ai7] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--color-text-base-border);
}
/* /Components/Shared/Order/OrderStatusBar.razor.rz.scp.css */
/* src/PEC.Web/Components/Shared/Order/OrderStatusBar.razor.css */

/* ── Container ── */
.status-bar[b-66s2d131ai] {
    display: flex;
    background: var(--color-neutral-background);
    border: 1px solid var(--color-text-base-border);
    border-radius: var(--radius-button);
    padding: var(--space-0);
    margin: var(--space-md) 0 var(--space-lg);
    position: relative;
    overflow: hidden;
}

/* ── Step cell ── */
.status-bar__step[b-66s2d131ai] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md) var(--space-sm) var(--space-lg);
    position: relative;
    border-right: 1px solid var(--color-text-base-border);
    gap: var(--space-xs);
    color: var(--color-text-base-placeholder-text); /* future state default */
}

.status-bar__step:last-child[b-66s2d131ai] {
    border-right: none;
}

/* ── Label ── */
.status-bar__label[b-66s2d131ai] {
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
    color: inherit;
}

/* ── Icon ── */
.status-bar__icon[b-66s2d131ai] {
    font-size: var(--font-size-title);
    line-height: 1;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
}

/* ── Text-based icons (99, $←) ── */
.status-bar__text-icon[b-66s2d131ai] {
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-bold);
    color: inherit;
}

/* ── "ปัจจุบัน" indicator ── */
.status-bar__indicator[b-66s2d131ai] {
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-primary);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: 2px;
}

.status-bar__dot[b-66s2d131ai] {
    width: 6px;
    height: 6px;
    background: var(--color-component-button-primary-bg);
    border-radius: 50%;
    display: inline-block;
}

/* ── Completed state ── */
.status-bar__step--completed[b-66s2d131ai] {
    color: var(--color-text-base-description-icon-form);
}

/* ── Current state ── */
.status-bar__step--current[b-66s2d131ai] {
    color: var(--color-primary-primary);
}

.status-bar__step--current .status-bar__label[b-66s2d131ai] {
    font-weight: var(--font-weight-bold);
}

/* ── Cancelled state ── */
.status-bar--cancelled .status-bar__step[b-66s2d131ai] {
    color: var(--color-text-base-placeholder-text);
}

/* ── Clickable state ── */
.status-bar__step--clickable[b-66s2d131ai] {
    cursor: pointer;
    transition: background-color 0.15s;
}

.status-bar__step--clickable:hover[b-66s2d131ai] {
    background-color: var(--color-text-base-background-soft);
}

.status-bar__step:not(.status-bar__step--clickable)[b-66s2d131ai] {
    cursor: not-allowed;
}
/* /Components/Shared/Order/StageDetail/InvoiceAddItemDialog.razor.rz.scp.css */
/* src/PEC.Web/Components/Shared/Order/StageDetail/InvoiceAddItemDialog.razor.css
   Scoped styles for the "add invoice line" modal. Mirrors the overlay/panel pattern already used
   inline by OrderDocumentPanel's upload dialog (fixed, centered, dark backdrop). */

.dialog-overlay[b-fcjy5wdjdz] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.dialog-panel[b-fcjy5wdjdz] {
    background: var(--color-primary-surface);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    min-width: 380px;
    max-width: 480px;
    width: 100%;
    max-height: calc(100vh - var(--space-2xl));
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    box-shadow: var(--shadow-floating-card);
}

.invoice-add__title[b-fcjy5wdjdz] {
    margin: var(--space-0);
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-title-content);
}
.invoice-add__subtitle[b-fcjy5wdjdz] {
    margin: var(--space-0);
    color: var(--color-text-base-description-icon-form);
    font-size: var(--font-size-body);
}

.invoice-add__type-label[b-fcjy5wdjdz] {
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-description-icon-form-divider);
    margin-top: var(--space-sm);
}

.invoice-add__types[b-fcjy5wdjdz] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.invoice-add__type-btn[b-fcjy5wdjdz] {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-text-base-border);
    border-radius: var(--radius-pill);
    background: var(--color-primary-surface);
    color: var(--color-neutral-description-icon-form-divider);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}
.invoice-add__type-btn:hover[b-fcjy5wdjdz] {
    border-color: var(--color-navy-blue-300);
}
.invoice-add__type-btn--active[b-fcjy5wdjdz] {
    background: var(--color-navy-blue-900);
    border-color: var(--color-navy-blue-900);
    color: var(--color-text-base-white-text);
}

.invoice-add__divider[b-fcjy5wdjdz] {
    border: none;
    border-top: 2px solid var(--color-status-error);
    margin: var(--space-md) 0;
}

.invoice-add__fields[b-fcjy5wdjdz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.invoice-add__footer[b-fcjy5wdjdz] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.invoice-add__footer .btn-outline[b-fcjy5wdjdz] {
    background: var(--color-neutral-background);
    color: var(--color-neutral-description-icon-form-divider);
    border: 1px solid var(--color-text-base-border);
}
.invoice-add__footer .btn-outline:hover[b-fcjy5wdjdz] {
    background: var(--color-text-base-disabled-bg);
}
/* /Components/Shared/Order/StageDetail/InvoiceStageDetail.razor.rz.scp.css */
/* src/PEC.Web/Components/Shared/Order/StageDetail/InvoiceStageDetail.razor.css
   Scoped styles for the Invoice stage (stage 6): billing-note tabs, the line-items card, the
   discount accordion, the pricing summary, the image gallery, and the sticky footer. The reused
   list-card / list-table / status-badge / oh-card / oh-field classes come from app.css; the
   OrderDocumentPanel child brings its own styling and is not restyled here. */

.invoice-stage[b-xnfb8ulkr3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* ── Billing note tabs — folder-tab look: active tab merges into the card below via a red
     bottom accent, mirroring the .bua-tab pattern used for the permissions admin tabs. ── */
.invoice-stage__tabs[b-xnfb8ulkr3] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.invoice-stage__tab[b-xnfb8ulkr3] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
    min-width: 160px;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-component-card-bg);
    border: 1px solid var(--color-text-base-border);
    border-radius: var(--radius-button) var(--radius-button) 0 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.invoice-stage__tab:hover:not(:disabled)[b-xnfb8ulkr3] {
    background: var(--color-neutral-background);
}

.invoice-stage__tab-round[b-xnfb8ulkr3] {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-title-content);
}

.invoice-stage__tab-doc[b-xnfb8ulkr3] {
    font-size: var(--font-size-label);
    color: var(--color-primary-primary);
    font-weight: var(--font-weight-medium);
}

.invoice-stage__tab--active[b-xnfb8ulkr3] {
    background: var(--color-navy-blue-900);
    border-color: var(--color-navy-blue-900);
    box-shadow: inset 0 -3px 0 var(--color-status-error);
}
.invoice-stage__tab--active .invoice-stage__tab-round[b-xnfb8ulkr3],
.invoice-stage__tab--active .invoice-stage__tab-doc[b-xnfb8ulkr3] {
    color: var(--color-text-base-white-text);
}
/* badge--draft's default text color (#64748B) is low-contrast against the active tab's navy
   fill — lighten it here without touching the shared .badge--draft rule used elsewhere. */
.invoice-stage__tab--active .badge--draft[b-xnfb8ulkr3] {
    color: var(--color-text-base-border);
}

.invoice-stage__tab--create[b-xnfb8ulkr3] {
    flex-direction: row;
    align-items: center;
    gap: var(--space-xs);
    min-width: 0;
    color: var(--color-text-base-description-icon-form);
    background: var(--color-neutral-background);
    border-style: dashed;
    font-weight: var(--font-weight-semibold);
}
.invoice-stage__tab--create:disabled[b-xnfb8ulkr3] {
    opacity: .55;
    cursor: default;
}

/* ── Line items card — accent bar is a real element (not a border), same as .oh-card__accent,
     because .list-card's overflow:hidden + border-radius clips a border-top at the corners. ── */
.invoice-stage__item-name[b-xnfb8ulkr3] {
    font-weight: var(--font-weight-medium);
    color: var(--color-neutral-title-content);
}
.invoice-stage__item-code[b-xnfb8ulkr3] {
    color: var(--color-text-base-placeholder-text);
    font-size: var(--font-size-label);
}

.invoice-stage__status-col[b-xnfb8ulkr3] {
    text-align: center;
    white-space: nowrap;
}

.invoice-stage__date-range[b-xnfb8ulkr3] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}
.invoice-stage__date-input[b-xnfb8ulkr3] {
    width: 122px;
    height: 32px;
    padding: 0 var(--space-xs);
    border: 1px solid var(--color-text-base-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-caption);
    color: var(--color-neutral-title-content);
    background: var(--color-primary-surface);
}
.invoice-stage__date-sep[b-xnfb8ulkr3] {
    color: var(--color-text-base-placeholder-text);
}

/* Rental-date cells can hold two stacked date inputs in edit mode — let the row grow instead
   of clipping against .list-table's fixed 60px row height. (min-height is not honored on table
   cells by the table layout algorithm, so height:auto + padding is what actually does this.) */
.invoice-stage__lines-card .list-table tbody td[b-xnfb8ulkr3] {
    height: auto;
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
}

/* ── Discount accordion — built on the existing .oh-card pattern (icon+title head, red accent
     bar, padded body) with a native <details>/<summary> for accessible expand/collapse. ── */
.invoice-stage__discount[b-xnfb8ulkr3] {
    margin-bottom: 0;
}
.invoice-stage__discount summary[b-xnfb8ulkr3] {
    list-style: none;
}
.invoice-stage__discount summary[b-xnfb8ulkr3]::-webkit-details-marker {
    display: none;
}

.invoice-stage__discount-icon[b-xnfb8ulkr3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-orange-100);
    color: var(--color-orange-600);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-body);
}

.invoice-stage__discount-chevron[b-xnfb8ulkr3] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform .15s ease;
}
.invoice-stage__discount[open] .invoice-stage__discount-chevron[b-xnfb8ulkr3] {
    transform: rotate(180deg);
}

.invoice-stage__discount-form[b-xnfb8ulkr3] {
    display: grid;
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    gap: var(--space-md) var(--space-lg);
}
@media (max-width: 560px) {
    .invoice-stage__discount-form[b-xnfb8ulkr3] {
        grid-template-columns: 1fr;
    }
}
.invoice-stage__discount-amount[b-xnfb8ulkr3] {
    width: 100%;
}

/* ── Pricing summary — right-aligned rows on a soft panel; VAT/WHT rows use the danger accent
     color to match the mockup's red highlighting for post-VAT and withholding lines. ── */
.invoice-stage__summary[b-xnfb8ulkr3] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-sm);
    background: var(--color-neutral-background);
    border-radius: var(--radius-button);
    padding: var(--space-lg);
}

.invoice-stage__summary-row[b-xnfb8ulkr3] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-xl);
    width: 100%;
    max-width: 420px;
    font-size: var(--font-size-body);
    color: var(--color-neutral-description-icon-form-divider);
}
.invoice-stage__summary-row span:first-child[b-xnfb8ulkr3] {
    flex: 1 1 auto;
    text-align: left;
}

.invoice-stage__summary-row--accent[b-xnfb8ulkr3],
.invoice-stage__summary-row--wht[b-xnfb8ulkr3] {
    color: var(--color-status-error);
    font-weight: var(--font-weight-semibold);
}
.invoice-stage__summary-row--wht[b-xnfb8ulkr3] {
    font-weight: var(--font-weight-regular);
}

.invoice-stage__summary-row--total[b-xnfb8ulkr3] {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-title);
    color: var(--color-neutral-title-content);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-text-base-border);
}

/* ── Image gallery ── */
.invoice-stage__gallery-grid[b-xnfb8ulkr3] {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    padding: var(--space-md);
}
.invoice-stage__gallery-thumb[b-xnfb8ulkr3] {
    width: 120px;
    height: 90px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-text-base-border);
}
.invoice-stage__gallery-thumb img[b-xnfb8ulkr3] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Footer actions ── */
.invoice-stage__footer[b-xnfb8ulkr3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-neutral-background);
    border-radius: var(--radius-button);
    border-top: 1px solid var(--color-text-base-border);
}

.invoice-stage__footer .btn-outline[b-xnfb8ulkr3] {
    background: var(--color-neutral-background);
    color: var(--color-neutral-description-icon-form-divider);
    border: 1px solid var(--color-text-base-border);
}
.invoice-stage__footer .btn-outline:hover:not(:disabled)[b-xnfb8ulkr3] {
    background: var(--color-text-base-disabled-bg);
}

.invoice-stage__footer .btn-success[b-xnfb8ulkr3] {
    background: var(--color-status-success);
    color: var(--color-text-base-white-text);
}
.invoice-stage__footer .btn-success:hover:not(:disabled)[b-xnfb8ulkr3] {
    background: var(--color-green-700);
}
.invoice-stage__footer .btn-success:disabled[b-xnfb8ulkr3],
.invoice-stage__footer .btn-outline:disabled[b-xnfb8ulkr3] {
    opacity: .55;
    cursor: default;
}

/* ── Inline editable inputs ── */
.invoice-stage__inline-input[b-xnfb8ulkr3] {
    width: 90px;
    padding: 4px 8px;
    border: 1px solid var(--color-neutral-stroke-1);
    border-radius: 4px;
    font-family: inherit;
    font-size: var(--font-size-input, 14px);
    text-align: right;
}
.invoice-stage__inline-input--wide[b-xnfb8ulkr3] {
    width: 100%;
    text-align: left;
}
.invoice-stage__inline-input:focus[b-xnfb8ulkr3] {
    outline: 2px solid var(--color-brand-default);
    border-color: var(--color-brand-default);
}

/* ── Summary card white background ── */
.invoice-stage__summary-card[b-xnfb8ulkr3] {
    background: #fff;
}

/* ── Image gallery upload ── */
.invoice-stage__gallery-upload[b-xnfb8ulkr3] {
    width: 120px;
    height: 90px;
    border: 2px dashed var(--color-neutral-stroke-1);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    color: var(--color-text-base-description-icon-form);
    font-size: var(--font-size-caption, 12px);
    transition: border-color .15s, background .15s;
}
.invoice-stage__gallery-upload:hover[b-xnfb8ulkr3] {
    border-color: var(--color-brand-default);
    background: var(--color-brand-surface, rgba(0,90,158,.04));
}
.invoice-stage__gallery-upload-icon[b-xnfb8ulkr3] {
    font-size: 20px;
}

/* ── Empty state ── */
.stage-detail__empty[b-xnfb8ulkr3] {
    text-align: center;
    color: var(--color-text-base-description-icon-form);
    padding: var(--space-lg);
}
/* /Components/Shared/QrCodeModal.razor.rz.scp.css */
.qr-modal-body[b-7bhs81m0c7] {
    text-align: center;
    padding: var(--space-md);
}

.qr-modal-canvas[b-7bhs81m0c7] {
    margin: 0 auto 1rem;
    display: block;
}

.qr-modal-value[b-7bhs81m0c7] {
    font-size: var(--font-size-body);
    word-break: break-all;
    color: var(--neutral-foreground-rest);
}
/* /Components/Shared/Ui/Forms/PecSearchableSelect.razor.rz.scp.css */
/* PecSearchableSelect (Forms/PecSearchableSelect.razor) — renders its own plain trigger+panel DOM
   (not a Fluent inner element), so — same rule _FieldFrame's own header comment documents — this
   styling lives in a co-located scoped .razor.css, not the global wwwroot/components.css (that file
   is reserved for classes forwarded onto a Fluent inner element).

   Trigger box matches .pec-select's own token values exactly (components.css:528-565 — border
   1px var(--color-text-base-border), radius 4px, height 48px, padding 8px 8px 8px 12px, same
   font-size-input/neutral-title-content text color) so a searchable field looks identical to a
   plain PecSelect sitting next to it in the same form (task requirement — "กล่องหน้าตาเหมือน
   .pec-select"). Panel/backdrop follow this codebase's OWN established dropdown precedent
   (PermissionGroups.razor's .bua-groupdd__menu / .bua-groupdd__backdrop, BuSwitcher.razor's
   .bu-switcher__menu) rather than inventing new shadow/spacing/z-index values — same
   --shadow-card-soft, --radius-input/--radius-lg, 6px panel offset, z-index scale. */

.pec-searchable-select[b-58ww67vpjz] {
    position: relative;
    width: 100%;
    min-width: 0;
}

.pec-searchable-select__trigger[b-58ww67vpjz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    width: 100%;
    box-sizing: border-box;
    height: 48px;
    padding: 8px 8px 8px 12px;
    background: var(--color-primary-surface);
    border: 1px solid var(--color-text-base-border);
    border-radius: 4px;
    font-family: var(--font-family-base);
    font-size: var(--font-size-input);
    color: var(--color-neutral-title-content);
    cursor: pointer;
    text-align: left;
}

.pec-searchable-select__trigger:focus-visible[b-58ww67vpjz],
.pec-searchable-select--open .pec-searchable-select__trigger[b-58ww67vpjz] {
    border-color: var(--color-primary-primary);
    box-shadow: var(--shadow-active-state);
    outline: none;
}

.pec-searchable-select__trigger:disabled[b-58ww67vpjz] {
    background: var(--color-text-base-disabled-bg);
    border-color: var(--color-text-base-border);
    color: var(--color-text-base-disabled-text);
    cursor: default;
}

.pec-field--error .pec-searchable-select__trigger[b-58ww67vpjz] {
    border-color: var(--color-status-error);
}

.pec-field--error .pec-searchable-select--open .pec-searchable-select__trigger[b-58ww67vpjz] {
    border-color: var(--color-status-error);
    box-shadow: var(--shadow-danger-focus);
}

/* `width: 0` (with flex-grow taking it back to the trigger's real width) is what actually clamps the
   field — NOT `min-width: 0`, which was already here and is not sufficient on its own. A selected
   option's text is laid out inside this span, so the span's intrinsic width is the text's width;
   that intrinsic width propagates up through the trigger to whatever grid/flex ancestor the caller
   put the field in, and any such ancestor sized `auto`/`1fr`/`max-content` (a grid or flex item
   defaults to `min-width: auto` — "never shrink below content") widens its track to fit it. The
   field then grew every time a long option was picked. Declaring `width: 0` removes this span from
   intrinsic-width contribution entirely, so no ancestor can ever be widened by the selected text;
   `flex: 1 1 auto` then expands it to fill whatever width the trigger actually got, keeping the
   ellipsis behaviour unchanged. This keeps the fix inside the component rather than depending on
   each call site's container remembering `min-width: 0` (see app.css's .vd-row3 / .pcm-selects,
   where that same growth bug was patched per-container for the old PecSelect). */
.pec-searchable-select__value[b-58ww67vpjz] {
    flex: 1 1 auto;
    width: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pec-searchable-select__value--placeholder[b-58ww67vpjz] {
    color: var(--color-text-base-placeholder-text);
}

.pec-searchable-select__indicator[b-58ww67vpjz] {
    flex: none;
    color: var(--color-neutral-description-icon-form-divider);
    transition: transform .15s ease;
}

.pec-searchable-select--open .pec-searchable-select__indicator[b-58ww67vpjz] {
    transform: rotate(180deg);
}

/* Full-viewport invisible backdrop — closes the panel on any outside click. Same mechanism as
   PermissionGroups.razor's .bua-groupdd__backdrop. Sits just below the panel in the stacking order
   so the panel itself remains clickable. z-index 90/91 (bumped above BuSwitcher's own 50 — the
   highest dropdown z-index anywhere else in this codebase, confirmed via grep — since this field can
   sit inside an .ed-card, and .ed-card has `overflow: hidden` (app.css:908); a `position:absolute`
   panel gets clipped by that ancestor regardless of z-index, which is the actual bug being fixed
   here (2026-07-30) — `position:fixed` escapes the clipping ancestor entirely, but a fixed element
   still needs a z-index that beats whatever it's rendered near. Stays well below this app's modal
   scale (.img-preview/.dlg-overlay etc. sit at 1000-9999, app.css) since this field is never inside
   a modal — if a future caller ever nests it inside one, that gap is exactly why the number was kept
   this low rather than jumping straight to 9999. */
.pec-searchable-select__backdrop[b-58ww67vpjz] {
    position: fixed;
    inset: 0;
    z-index: 90;
    border: none;
    background: transparent;
    padding: 0;
    cursor: default;
}

/* position:fixed (NOT absolute) — escapes every overflow:hidden/overflow-x:auto ancestor (the
   .ed-card / tab-scroll clipping bug this was built to fix). A fixed element positions relative to
   the viewport, not the nearest positioned ancestor, so top/left/width can no longer be expressed
   in CSS (there's no "100% of the trigger" to anchor to without JS reading the trigger's real
   on-screen box) — set entirely via inline style from pec-searchable-select.js's positionPanel(),
   called on open + on every scroll/resize while open (see PecSearchableSelect.razor's
   OpenAsync/JS interop). No top/left/right here — would be dead CSS fighting the inline styles. */
.pec-searchable-select__panel[b-58ww67vpjz] {
    position: fixed;
    z-index: 91;
    background: var(--color-primary-surface);
    border: 1px solid var(--color-text-base-border);
    border-radius: var(--radius-input);
    box-shadow: var(--shadow-card-soft);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 320px;
    box-sizing: border-box;
}

.pec-searchable-select__search[b-58ww67vpjz] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 8px 10px;
    border: 1px solid var(--color-text-base-border);
    border-radius: var(--radius-md);
    background: var(--color-primary-surface);
}

.pec-searchable-select__search:focus-within[b-58ww67vpjz] {
    border-color: var(--color-primary-primary);
}

.pec-searchable-select__search-icon[b-58ww67vpjz] {
    flex: none;
    color: var(--color-text-base-placeholder-text);
}

.pec-searchable-select__search-input[b-58ww67vpjz] {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-family-base);
    font-size: var(--font-size-body);
    color: var(--color-neutral-title-content);
}

.pec-searchable-select__search-input[b-58ww67vpjz]::placeholder {
    color: var(--color-text-base-placeholder-text);
}

.pec-searchable-select__options[b-58ww67vpjz] {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pec-searchable-select__option[b-58ww67vpjz] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    flex: none;              /* never let the flex column shrink rows — with a long option list the
                                items were squashed until their text overlapped vertically */
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: var(--radius-lg);
    font-family: var(--font-family-base);
    font-size: var(--font-size-body);
    color: var(--color-neutral-title-content);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pec-searchable-select__option:hover[b-58ww67vpjz] {
    background: var(--color-text-base-disabled-bg);
}

.pec-searchable-select__option--selected[b-58ww67vpjz] {
    color: var(--color-primary-primary);
    font-weight: var(--font-weight-semibold);
    background: var(--color-primary-primary-very-bright);
}

.pec-searchable-select__empty[b-58ww67vpjz] {
    padding: 12px;
    text-align: center;
    font-size: var(--font-size-body);
    color: var(--color-text-base-placeholder-text);
}
/* /Components/Shared/Ui/Forms/_FieldFrame.razor.rz.scp.css */
/* _FieldFrame (formerly PecField, renamed + made internal by ADR Amendment D1 — see the header
   comment in _FieldFrame.razor) renders its own plain DOM (label/div), so Blazor's
   scoped-isolation attribute selector actually applies here — unlike PecButton/PecDialog, which
   style a Fluent inner element and must use the global wwwroot/components.css instead (see the
   ADR §4 rule). CSS class names were deliberately NOT renamed alongside the component (D1: they
   describe the frame's own DOM, renaming buys nothing while touching more files) — they stay
   `pec-field__*` even though the component is now `_FieldFrame`.

   Exception: .pec-field__tooltip-icon is NOT here — it targets <Iconoir>'s own rendered <svg>,
   which is a CHILD COMPONENT's render tree, not this component's own scope. Blazor's [b-xxxxx]
   scoping attribute only applies to markup a component renders directly, so a scoped rule here
   would be a dead selector for anything inside a nested component (same class of trap as the
   Fluent shadow-DOM ::part() issue, one level removed) — see components.css instead.

   Values below (Figma Input.css extraction, Wave 2):
   .knowledge-base/research/2026-07-14-pectextfield-figma-css-extraction.md */

.pec-field[b-vyudygjsc8] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* .35rem (not the --space-xs 4px token) — matches .ed-field__label's old
       margin-bottom: .35rem exactly (user decision: Pec* fields must look identical to the
       pre-migration .ed-field label on pages being migrated, see task brief 2026-07-15). .35rem
       is already an established repo gap value for flex-column stacks (app.css .filter-field,
       .ed-profile__id use the same literal), so this isn't a one-off magic number.
       2026-07-16: user requested a further 2px reduction, label-to-field only (.ed-field__label
       in app.css is untouched — other pages not yet migrated still rely on it). .35rem = 5.6px,
       5.6px - 2px = 3.6px. */
    gap: 3.6px;
}

.pec-field__label[b-vyudygjsc8] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-label);
    /* font-weight/color/letter-spacing below deliberately DEVIATE from the Figma Input.css
       extraction (font-weight-medium, --color-neutral-title-content, no letter-spacing) to match
       .ed-field__label in app.css instead (font-weight-semibold, --color-text-base-description-
       icon-form, letter-spacing: .01em) — user decision so every page migrated to Pec* fields
       stays visually identical to pages still using the old .ed-field label (2026-07-15 task
       brief). .ed-field__label itself is left untouched in app.css for the pages not yet
       migrated. */
    font-weight: var(--font-weight-semibold);
    letter-spacing: .01em;
    color: var(--color-text-base-description-icon-form);
}

.pec-field__label-text[b-vyudygjsc8] {
    /* separate span so gap:4px applies uniformly between title/*/optional/tooltip, matching the
       Figma "label" auto-layout row (gap: 4px) instead of relying on inline-text spacing */
}

.pec-field__required[b-vyudygjsc8] {
    color: var(--color-status-error);
}

.pec-field__optional[b-vyudygjsc8] {
    color: var(--color-neutral-description-icon-form-divider);
    font-weight: var(--font-weight-regular);
}

.pec-field__helper[b-vyudygjsc8] {
    font-size: var(--font-size-caption);
    color: var(--color-neutral-description-icon-form-divider);
}

.pec-field__error[b-vyudygjsc8] {
    font-size: var(--font-size-tiny);
    color: var(--color-status-error);
}

/* Note: per the Figma extraction, the LABEL TEXT keeps the same color in both normal and error
   state (every error-state block in Input.css keeps the "title" span un-reddened) — only the
   field border, the Required "*", and the error message itself turn red. Wave 1 had an incorrect
   .pec-field--error .pec-field__label{color:error} rule; removed here as part of the Wave 2
   Figma-accurate pass. (The label's own color value was later changed away from Figma's
   #0F172A/--color-neutral-title-content to match .ed-field__label — see the comment on
   .pec-field__label above — but this "no error-state override" behavior is unchanged.) */
/* /Components/Shared/Ui/PrinterStatusBadge.razor.rz.scp.css */
/* Moved here verbatim from PrintStickerButton.razor.css when the badge became shared — same pill, same
   three tones, now one definition instead of one component's private style plus two plain-text lines
   elsewhere. */
.printer-badge[b-zprlfyqw2g] { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700; padding: .3rem .6rem; border-radius: 999px; white-space: nowrap; }
.printer-badge[b-zprlfyqw2g]::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.printer-badge.is-ready[b-zprlfyqw2g] { color: #147a3d; background: #e8f6ee; }
.printer-badge.is-fault[b-zprlfyqw2g] { color: #b02a37; background: #fdecee; }
.printer-badge.is-unknown[b-zprlfyqw2g] { color: #6b7280; background: #f1f3f5; }
/* /Components/Shared/Ui/PrintStickerButton.razor.rz.scp.css */
.psb[b-xzjo8fayw4] { display: flex; flex-direction: column; gap: .6rem; align-items: stretch; }
/* Placement only — the pill itself (shape, three tones) belongs to PrinterStatusBadge, which every
   surface showing printer status shares. This is the flex-column child rule that centres it here.
   ::deep is REQUIRED, not decoration: the badge is rendered by a child component, so it carries that
   component's scope id and not this one's, and a plain `.psb-badge { align-self: center }` here
   silently matches nothing — which is exactly how the badge ended up jammed against the left edge
   when it moved out of this file. */
.psb[b-xzjo8fayw4]  .printer-badge { align-self: center; }

/* Confirmation dialog. Lives outside .psb (see the component's remarks) so none of the flex-column
   rules above reach it. */
.psb-confirm__title[b-xzjo8fayw4] { margin: 0; font-size: 1rem; font-weight: 700; }
.psb-confirm__lead[b-xzjo8fayw4] { margin: 0 0 .5rem; font-size: .95rem; color: #111827; }
.psb-confirm__note[b-xzjo8fayw4] { margin: .2rem 0; font-size: .82rem; color: #6b7280; }
.psb-confirm__printer[b-xzjo8fayw4] { display: flex; align-items: center; gap: .5rem; margin: .5rem 0; font-size: .82rem; color: #6b7280; }
.psb-confirm__actions[b-xzjo8fayw4] { display: flex; justify-content: center; align-items: center; gap: 12px; width: 100%; }
.psb-confirm__preview[b-xzjo8fayw4] { display: flex; justify-content: center; margin: .75rem 0; }
/* ::deep — the <img> is rendered by QrSticker, a child component, so this component's scope id is not
   on it. Capped on BOTH axes now that this previews the whole sheet: height keeps a portrait 40x60mm
   tag from pushing the dialog past the screen, width keeps the 100mm-wide 2-up sheet inside a narrow
   dialog on a phone. `object-fit: contain` so whichever cap bites, the sheet scales rather than
   stretches — a preview that lies about proportions is worse than no preview. */
.psb-confirm__preview[b-xzjo8fayw4]  img {
    max-height: 260px;
    max-width: 100%;
    height: auto;
    width: auto;
    object-fit: contain;
}
/* /Components/Shared/Ui/QrSticker.razor.rz.scp.css */
/* QrSticker.razor — copied verbatim from QrAssetBindModal.razor.css's `.qam-sticker*` rules (the
   canonical look), renamed to this component's own `.qr-sticker*` class family. Do not redesign,
   do not "improve" the values, do not introduce new colour literals. */
/* background: #fff comes from QrBatchCreate's original .qrc-preview, not from .qam-sticker — the bind
   modal never needed it because the dialog behind it is already white, but on a tinted page the
   sticker showed the page through its body. A printed tag is white; keep it white everywhere. */
/* --qr-sticker-w/h/head-h/foot-h are emitted by QrSticker.razor's GeometryStyle only when a caller
   passes a LabelPreset (Task 11) — the var()-with-fallback keeps every preset-less caller (the three
   QR pages) byte-identical to the literals below. --qr-sticker-qr-top/code-top are deliberately NOT
   emitted: they are absolute-offset-from-top print measurements that only mean something under an
   absolutely-positioned layout, and this flex/gap-flowed body is not being redesigned for this task. */
.qr-sticker[b-3ydk1qeo60] { border-radius: 14px; overflow: hidden; border: 1px solid var(--color-neutral-200, #d9dee4); align-self: center; width: var(--qr-sticker-w, 240px); height: var(--qr-sticker-h, auto); background: #fff; }
.qr-sticker-head[b-3ydk1qeo60] { background: #0b1220; color: #fff; text-align: center; font-weight: 800; letter-spacing: .04em; padding: .8rem; min-height: var(--qr-sticker-head-h, auto); }
.qr-sticker-body[b-3ydk1qeo60] { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1rem; }
.qr-sticker-canvas[b-3ydk1qeo60] { width: 160px; height: 160px; image-rendering: pixelated; }
/* Unbound pre-print sticker: the number is a shape, not a value. */
.qr-sticker-code.is-blank[b-3ydk1qeo60] { opacity: .6; font-style: italic; }

.qr-sticker-code[b-3ydk1qeo60] { border: 1.5px solid #0b1220; border-radius: 8px; padding: .4rem .9rem; font-weight: 700; }
/* The product name, centred (2026-08-06, replacing a two-ended category/lot strip). Wrapping is
   allowed here where the old strip could not: a product name is free text, and the printed label
   shrinks then truncates it, so the preview would misrepresent a long name by clipping it silently. */
.qr-sticker-sku[b-3ydk1qeo60] { width: 100%; text-align: center; font-size: .78rem; font-weight: 700; color: #0b1220; line-height: 1.2; overflow-wrap: anywhere; }
.qr-sticker-foot[b-3ydk1qeo60] { background: #0b1220; color: #fff; text-align: center; font-weight: 800; padding: .7rem; min-height: var(--qr-sticker-foot-h, auto); }

/* Task 6 (bitmap-render slice): image mode (Preset + Label both set) — the printed tag itself,
   fetched from LabelImage.cs, not a CSS-drawn approximation of it. border/radius mirror .qr-sticker's
   own so the swap is not visible as a style change, only a content one. */
.qr-sticker-image[b-3ydk1qeo60] { display: block; align-self: center; object-fit: contain; border: 1px solid var(--color-neutral-200, #d9dee4); background: #fff; }