/* /Components/Common/Pagination.razor.rz.scp.css */
.pagination-list[b-j9tqcn3q8z] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}

.page-btn[b-j9tqcn3q8z] {
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    border: 1px solid var(--app-border);
    background: var(--app-input-background);
    color: var(--app-text-primary);
    border-radius: 0.5rem;
    font-size: 0.85rem;
    line-height: 1;
}

    .page-btn:hover:not(:disabled)[b-j9tqcn3q8z] {
        background: var(--app-hover);
    }

    .page-btn:disabled[b-j9tqcn3q8z] {
        color: var(--app-disabled-text);
        cursor: not-allowed;
    }

    .page-btn.active[b-j9tqcn3q8z] {
        background: var(--app-accent);
        border-color: var(--app-accent);
        color: var(--app-accent-contrast);
        font-weight: 600;
    }

.page-btn-nav[b-j9tqcn3q8z] {
    padding: 0 0.75rem;
}

.page-ellipsis[b-j9tqcn3q8z] {
    padding: 0 0.35rem;
    color: var(--app-text-secondary);
}

.pagination-list[b-j9tqcn3q8z] { gap: .35rem; }
.page-btn[b-j9tqcn3q8z] { min-width: 2.25rem; height: 2.25rem; border-radius: .62rem; font-size: .8rem; font-weight: 650; box-shadow: 0 1px 2px rgba(0,0,0,.035); transition: transform .14s ease, background-color .14s ease, border-color .14s ease, box-shadow .14s ease; }
.page-btn:hover:not(:disabled)[b-j9tqcn3q8z] { transform: translateY(-1px); border-color: color-mix(in srgb, var(--app-accent) 25%, var(--app-border)); box-shadow: 0 4px 10px rgba(0,0,0,.06); }
.page-btn.active[b-j9tqcn3q8z] { box-shadow: 0 5px 14px color-mix(in srgb, var(--app-accent) 22%, transparent); }
.page-btn-nav[b-j9tqcn3q8z] { padding-inline: .85rem; }

.pagination-mobile[b-j9tqcn3q8z] { display: none; }
@media (max-width: 767.98px) {
    .pagination-nav[b-j9tqcn3q8z] { width: 100%; min-width: 0; }
    .pagination-list[b-j9tqcn3q8z] { justify-content: space-between; flex-wrap: nowrap; gap: .5rem; }
    .pagination-desktop[b-j9tqcn3q8z] { display: none; }
    .pagination-mobile[b-j9tqcn3q8z] { display: block; color: var(--app-text-secondary); font-size: .85rem; white-space: nowrap; }
    .page-btn[b-j9tqcn3q8z] { min-width: 2.75rem; height: 2.75rem; }
}
/* /Components/Common/SearchableSelect.razor.rz.scp.css */
/* Brand Searchable Combobox task: reuses .form-select (trigger) and .form-control (search box)
   for pixel-consistent styling with every other select/input in the app — including Bootstrap's
   own chevron background-image on the trigger, so no separate caret icon was needed. The floating
   panel reuses the same tokens app.css already applies to .dropdown-menu/.modal-content
   (--app-modal-surface, --app-shadow-md, --app-radius), so dark mode and the dynamic accent both
   work with zero new color rules. */

.searchable-select[b-2khhubd36n] {
    position: relative;
}

.searchable-select-trigger[b-2khhubd36n] {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.searchable-select-value[b-2khhubd36n] {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.searchable-select-placeholder[b-2khhubd36n] {
    color: var(--app-text-secondary);
}

.searchable-select-panel[b-2khhubd36n] {
    position: absolute;
    z-index: 1050;
    top: calc(100% + .35rem);
    left: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 16rem;
    max-height: 20rem;
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-modal-surface);
    box-shadow: var(--app-shadow-md);
}

.searchable-select-search-row[b-2khhubd36n] {
    position: relative;
    flex: 0 0 auto;
    padding: .6rem .6rem .4rem;
}

.searchable-select-search[b-2khhubd36n] {
    padding-right: 2rem;
}

.searchable-select-clear[b-2khhubd36n] {
    position: absolute;
    top: .95rem;
    right: 1rem;
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--app-text-secondary);
    font-size: 1.1rem;
    line-height: 1;
}

.searchable-select-clear:hover[b-2khhubd36n] {
    background: var(--app-hover);
    color: var(--app-text-primary);
}

.searchable-select-list[b-2khhubd36n] {
    flex: 1 1 auto;
    margin: 0;
    padding: .3rem;
    overflow-y: auto;
    list-style: none;
}

.searchable-select-option[b-2khhubd36n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .55rem .65rem;
    border-radius: .6rem;
    color: var(--app-text-primary);
    font-size: .9rem;
    cursor: pointer;
}

.searchable-select-option span:first-child[b-2khhubd36n] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.searchable-select-option-active[b-2khhubd36n] {
    background: var(--app-hover);
}

.searchable-select-option-selected[b-2khhubd36n] {
    color: var(--app-accent);
    font-weight: 650;
}

.searchable-select-check[b-2khhubd36n] {
    flex: 0 0 auto;
    color: var(--app-accent);
}

.searchable-select-empty[b-2khhubd36n] {
    padding: 1rem .65rem;
    color: var(--app-text-secondary);
    font-size: .85rem;
    text-align: center;
}

/* Touch targets stay >= 44px tall on phones, and the panel can't run off the right/bottom edge of
   a narrow viewport. */
@media (max-width: 767.98px) {
    .searchable-select-option[b-2khhubd36n] {
        min-height: 2.75rem;
    }

    .searchable-select-panel[b-2khhubd36n] {
        left: 0;
        right: 0;
        width: auto;
    }
}
/* /Components/Common/SearchInput.razor.rz.scp.css */
.search-input-group[b-mn1xx9ysi3] {
    position: relative;
    width: 100%;
}

.search-input-icon-btn[b-mn1xx9ysi3] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    color: var(--app-text-secondary);
}

.search-input[b-mn1xx9ysi3] {
    padding-left: 2.25rem;
    padding-right: 2rem;
}

.search-input-clear-btn[b-mn1xx9ysi3] {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 50%;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--app-text-secondary);
}

    .search-input-clear-btn:hover[b-mn1xx9ysi3] {
        background: var(--app-hover);
        color: var(--app-text-primary);
    }

.search-input-icon-btn[b-mn1xx9ysi3] { left: .15rem; width: 2.5rem; color: var(--app-accent); }
.search-input[b-mn1xx9ysi3] { padding-left: 2.65rem; padding-right: 2.4rem; }
.search-input-clear-btn[b-mn1xx9ysi3] { right: .35rem; }
.search-input-group:focus-within .search-input-icon[b-mn1xx9ysi3] { transform: scale(1.05); }
.search-input-icon[b-mn1xx9ysi3] { transition: transform .14s ease; }

.search-input-group[b-mn1xx9ysi3] { min-width: 0; max-width: 100%; }
@media (max-width: 767.98px) {
    .search-input[b-mn1xx9ysi3] { min-width: 0; min-height: 2.75rem; padding-inline: 2.85rem; font-size: 1rem; }
    .search-input-icon-btn[b-mn1xx9ysi3], .search-input-clear-btn[b-mn1xx9ysi3] { width: 2.75rem; height: 2.75rem; }
    .search-input-icon-btn[b-mn1xx9ysi3] { left: 0; }
    .search-input-clear-btn[b-mn1xx9ysi3] { right: 0; }
}
/* /Components/Layout/LoginLayout.razor.rz.scp.css */
.login-layout[b-3tbgphgsw9] {
    min-height: 100vh;
    min-height: 100dvh;
    padding: 1rem;
    background: var(--app-page-background);
    color: var(--app-text-primary);
}

.login-card[b-3tbgphgsw9] {
    width: min(360px, 100%);
    background: var(--app-surface);
    color: var(--app-text-primary);
    border-color: var(--app-border);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Tailwind migration: the .page/.sidebar/.top-row/.content layout rules that used to live here
   were moved into MainLayout.razor itself as Tailwind utility classes (see that file's own
   comment) — Tailwind utilities cannot be applied from a CSS file, only from markup, so once a
   rule became "just Tailwind classes" there was nothing left to keep here. #blazor-error-ui has
   no Tailwind equivalent worth reaching for (a single fixed-position banner, not part of the
   Tailwind-migrated shell) and stays as plain scoped CSS. */
#blazor-error-ui[b-e9y63b51gm] {
    background: var(--app-warning-background);
    color: var(--app-warning-text);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-e9y63b51gm] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Store Admin Web Navigation Redesign task: the top header's own layout (brand row, global
   actions, and the grouped horizontal nav below it) — see the icon-mask block further down for
   what stayed exactly as it was (untouched by this task; every icon class is still referenced the
   same way, from inside each dropdown panel instead of a flat vertical list). */
.navbar-toggler[b-j7jo4esb2n] {
    appearance: none;
    cursor: pointer;
    width: 2.75rem;
    height: 2.35rem;
    flex: 0 0 auto;
    color: white;
    display: none;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: .6rem;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.6rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler[aria-expanded="true"][b-j7jo4esb2n] {
    background-color: rgba(255, 255, 255, 0.5);
}

.navbar-toggler:focus-visible[b-j7jo4esb2n] {
    outline: 2px solid var(--app-accent-soft);
    outline-offset: 2px;
}

/* Row 1: brand identity (left) + user identity / logout (right). Always a single row, even on
   narrow screens — only the grouped nav row below it collapses/scrolls. */
.topnav-brand-row[b-j7jo4esb2n] {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 4.25rem;
    padding: .65rem 1.25rem;
}

/* margin-right: auto keeps the brand pinned to the far left while pushing the user identity/
   logout cluster to the far right on desktop — previously this was done via margin-left: auto on
   the global Add Product action that used to sit here (removed: the Products Catalog page already
   has its own Add Product action, so the header one was a duplicate). Below 1024px,
   .nav-user-desktop is hidden and the mobile nav toggler needs the same far-right placement
   instead — see that rule's own comment in the @media (max-width: 1023.98px) block below for why
   it needs its own explicit margin-left: auto rather than inheriting this one. */
.navbar-brand[b-j7jo4esb2n] {
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: white;
    text-decoration: none;
    margin-right: auto;
}

.navbar-brand-logo[b-j7jo4esb2n] {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.app-user-area[b-j7jo4esb2n] {
    color: white;
}

.app-user-copy strong[b-j7jo4esb2n],
.app-user-copy span[b-j7jo4esb2n] {
    color: white;
}

.app-user-copy span[b-j7jo4esb2n] {
    color: rgba(255, 255, 255, .62);
}

.app-user-avatar[b-j7jo4esb2n] {
    border-color: rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .12);
    color: white;
}

/* Navigation Icons task: every icon below is masked from the SAME Bootstrap Icons SVG path data
   this app already used for Catalog (tags-fill)/Distributors (list-nested) — no new icon library
   was introduced. The mechanism changed from `background-image` (a flat image, baked to a fixed
   fill color) to `mask-image` + `background-color: currentColor`: a CSS mask only reads the source
   image's shape/alpha, not its color, so the visible icon is painted with whatever color the
   browser resolves `currentColor` to on this element — i.e. .nav-link's own text color. That is
   what makes icons automatically track inactive (#d7d7d7) vs. active/hover (white) state, Light/
   Dark/System theme, and any selected Accent, with zero extra CSS: the icon and the label next to
   it always share literally the same computed color, by construction, instead of needing to be
   kept in sync by hand. The SVG data URIs' own `fill='black'` is irrelevant to the final color for
   this same reason (a mask only cares about opaque vs. transparent pixels) — only the path shapes
   matter. `-webkit-mask-*` is included alongside the unprefixed `mask-*` for Safari. */
.bi[b-j7jo4esb2n] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.nav-item[b-j7jo4esb2n] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-j7jo4esb2n] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-j7jo4esb2n] {
        padding-bottom: 1rem;
    }

    .nav-item[b-j7jo4esb2n]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        text-decoration: none;
        /* Transparent baseline so the active state's colored left border (below) doesn't shift
           content by its own width when applied. */
        border-left: 3px solid transparent;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

/* A pale accent-soft stripe on the leading edge signals the active item; the background stays the
   existing translucent white and only the border carries the Accent identity. Navigation Icons
   task: icons are masked from currentColor (see the .bi rule above), so they automatically
   brighten from #d7d7d7 to white right along with the label's own `color: white` below — no
   separate icon color rule is needed here for the active state to look correct. This is the
   mobile/stacked-drawer presentation's active look (dark, translucent-white) — see the
   1024px+ override below for the desktop floating-panel presentation. */
.nav-item[b-j7jo4esb2n]  a.active {
    background-color: rgba(255,255,255,0.15);
    border-left: 3px solid var(--app-accent-soft);
    color: white;
}

.nav-item[b-j7jo4esb2n]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

/* Row 2: Dashboard (a direct link) plus one <details class="nav-group"> dropdown per
   Inventory & Sales / Financials / Operations / Administration group. */
.topnav-groups[b-j7jo4esb2n] {
    display: flex;
    align-items: flex-start;
    gap: .3rem;
    flex-wrap: wrap;
    padding: 0 1.25rem .75rem;
}

/* ::deep: Dashboard's <NavLink class="topnav-link"> is a CHILD COMPONENT, not plain markup written
   directly in this file — Blazor's CSS isolation does not stamp this file's scope attribute onto a
   child component's own rendered root element (only markup written directly here gets it), so an
   unscoped `.topnav-link { }` would never match without ::deep. Mirrors the exact same reasoning
   `.nav-item ::deep .nav-link` already uses below for the dropdown items' own NavLinks. */
[b-j7jo4esb2n] .topnav-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .9rem;
    border-radius: .65rem;
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 640;
    border: 1px solid transparent;
    line-height: 1.3;
}

    [b-j7jo4esb2n] .topnav-link:hover {
        color: white;
        background: rgba(255, 255, 255, .08);
    }

    [b-j7jo4esb2n] .topnav-link.active {
        color: white;
        background: rgba(255, 255, 255, .14);
        border-color: color-mix(in srgb, var(--app-accent-soft) 55%, transparent);
        box-shadow: inset 0 -2px 0 var(--app-accent-soft);
    }

.nav-group[b-j7jo4esb2n] {
    position: relative;
}

.nav-group-trigger[b-j7jo4esb2n] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .9rem;
    border-radius: .65rem;
    color: rgba(255, 255, 255, .78);
    font-size: .875rem;
    font-weight: 640;
    cursor: pointer;
    border: 1px solid transparent;
    -webkit-user-select: none;
    user-select: none;
    list-style: none;
}

    .nav-group-trigger[b-j7jo4esb2n]::-webkit-details-marker {
        display: none;
    }

    .nav-group-trigger[b-j7jo4esb2n]::marker {
        content: '';
    }

    .nav-group-trigger:hover[b-j7jo4esb2n] {
        color: white;
        background: rgba(255, 255, 255, .08);
    }

    .nav-group-trigger:focus-visible[b-j7jo4esb2n] {
        outline: 2px solid var(--app-accent-soft);
        outline-offset: 2px;
    }

.nav-group-caret[b-j7jo4esb2n] {
    width: .45rem;
    height: .45rem;
    flex: 0 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .15s ease;
    opacity: .75;
}

.nav-group[open] > .nav-group-trigger .nav-group-caret[b-j7jo4esb2n] {
    transform: rotate(-135deg) translateY(1px);
}

/* Active-group indicator: whichever group actually contains the current route's active NavLink
   gets the same accent treatment as .topnav-link.active — purely via :has(), reading NavLink's own
   .active class (which Blazor already keeps in sync on every navigation) rather than a
   hand-maintained route-to-group map in code-behind. */
.nav-group:has(.nav-link.active) > .nav-group-trigger[b-j7jo4esb2n],
.nav-group[open] > .nav-group-trigger[b-j7jo4esb2n] {
    color: white;
    background: rgba(255, 255, 255, .14);
    border-color: color-mix(in srgb, var(--app-accent-soft) 55%, transparent);
}

.nav-group:has(.nav-link.active) > .nav-group-trigger[b-j7jo4esb2n] {
    box-shadow: inset 0 -2px 0 var(--app-accent-soft);
}

.nav-group-panel[b-j7jo4esb2n] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .35rem .5rem .5rem;
}

/* Rich Dropdown Menu task: the group title/description that opens every panel, and the shared
   rich-item layout (icon tile + title/description body + trailing chevron) every destination now
   uses instead of a plain icon+label line. Base rules below target the MOBILE stacked-drawer
   context (dark, translucent-white palette, matching .nav-item ::deep .nav-link's own base
   colors); the 1024px+ block further down re-points icon/title/desc colors at the light floating
   panel's own tokens — the row's background/hover/active treatment itself is untouched, inherited
   from the existing .nav-item ::deep .nav-link / a.active rules (locked in by
   NavigationIconsMarkupTests.ActiveStateRule_WasNotWeakened), since .nav-rich-item is just an
   ADDITIONAL class on the same <NavLink>, not a replacement for .nav-link. */
.nav-group-panel-header[b-j7jo4esb2n] {
    padding: .5rem .75rem .6rem;
    margin-bottom: .15rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.nav-group-panel-title[b-j7jo4esb2n] {
    font-size: .68rem;
    font-weight: 760;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--app-accent-soft);
}

.nav-group-panel-desc[b-j7jo4esb2n] {
    margin-top: .2rem;
    font-size: .74rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, .58);
}

.nav-item[b-j7jo4esb2n]  .nav-rich-item {
    height: auto;
    min-height: 3rem;
    line-height: 1.3;
    align-items: flex-start;
    gap: .65rem;
    padding: .55rem .6rem;
}

.nav-item[b-j7jo4esb2n]  .nav-rich-icon {
    display: grid;
    place-items: center;
    width: 2.15rem;
    height: 2.15rem;
    flex: 0 0 auto;
    margin-top: .05rem;
    border-radius: .6rem;
    background: rgba(255, 255, 255, .1);
}

    .nav-item[b-j7jo4esb2n]  .nav-rich-icon .bi {
        margin-right: 0;
        width: 1.05rem;
        height: 1.05rem;
    }

.nav-item[b-j7jo4esb2n]  .nav-rich-body {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .1rem;
}

.nav-item[b-j7jo4esb2n]  .nav-rich-title {
    font-size: .875rem;
    font-weight: 660;
    line-height: 1.3;
    color: inherit;
}

.nav-item[b-j7jo4esb2n]  .nav-rich-desc {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: .72rem;
    font-weight: 460;
    line-height: 1.35;
    color: rgba(255, 255, 255, .55);
    white-space: normal;
}

.nav-item[b-j7jo4esb2n]  .nav-rich-chevron {
    width: .4rem;
    height: .4rem;
    flex: 0 0 auto;
    margin-top: .7rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    opacity: .45;
    transition: transform .14s ease, opacity .14s ease;
}

.nav-item[b-j7jo4esb2n]  .nav-rich-item:hover .nav-rich-chevron,
.nav-item[b-j7jo4esb2n]  a.nav-rich-item.active .nav-rich-chevron {
    opacity: .8;
    transform: rotate(-45deg) translateX(2px);
}

.nav-scrollable[b-j7jo4esb2n] {
    display: none;
}

/* :has() rather than the `~` general-sibling combinator (the old sidebar's own mechanism): the
   checkbox now lives inside .topnav-brand-row's flex layout for correct visual placement, not as
   a direct sibling of .nav-scrollable — .nav-root (their nearest shared ancestor, rendered by this
   same component) is what makes this still just plain CSS, no script. */
.nav-root[data-mobile-open="true"] .nav-scrollable[b-j7jo4esb2n] {
    display: block;
}

@media (min-width: 1024px) {
    .navbar-toggler[b-j7jo4esb2n] {
        display: none;
    }

    .nav-scrollable[b-j7jo4esb2n] {
        /* Never collapse the grouped nav row for wide screens. */
        display: block;
    }

    /* The dropdown panel floats below its trigger, like a conventional SaaS nav menu, instead of
       the mobile drawer's inline stacked block. Uses the app's light modal-surface token (which
       already flips to a dark surface under dark mode automatically) rather than the dark header's
       own translucent-white palette, for a legible, conventional dropdown regardless of theme. */
    .nav-group-panel[b-j7jo4esb2n] {
        position: absolute;
        top: calc(100% + .5rem);
        left: 0;
        z-index: 40;
        min-width: 230px;
        padding: .5rem;
        border: 1px solid color-mix(in srgb, var(--app-border) 70%, transparent);
        border-radius: .85rem;
        background: var(--app-modal-surface);
        box-shadow: var(--app-shadow-lg, 0 24px 70px rgba(0, 0, 0, .24));
    }

    /* Rich Dropdown Menu task: every current group has enough items/descriptions to want the
       wider panel — recommended ~320-380px range — rather than the old compact 230px minimum,
       which would clip 2-line descriptions. */
    .nav-group-wide .nav-group-panel[b-j7jo4esb2n] {
        width: 340px;
    }

    .nav-group-panel[b-j7jo4esb2n]  .nav-link {
        color: var(--app-text-primary);
        height: 2.6rem;
        line-height: 2.6rem;
        border-radius: .6rem;
        text-decoration: none;
        font-size: .875rem;
        font-weight: 550;
    }

    .nav-group-panel[b-j7jo4esb2n]  .nav-link:hover {
        background-color: var(--app-hover);
        color: var(--app-text-primary);
    }

    .nav-group-panel[b-j7jo4esb2n]  a.active {
        background-color: var(--app-selected-background);
        border-left-color: var(--app-accent);
        color: var(--app-text-primary);
    }

    /* Light-panel color context for rich items — the icon tile switches from the dark drawer's
       translucent white to an accent-soft tint (icon color follows via currentColor, same
       mechanism as the shared .bi rule), and title/description switch to the app's own text
       tokens. The row's own hover/active background above (:hover / a.active) is unchanged. The
       higher-specificity `.nav-link.nav-rich-item` compound selector is what lets this win over
       the single-class `.nav-group-panel ::deep .nav-link` height rule just above it, regardless
       of source order. */
    .nav-group-panel[b-j7jo4esb2n]  .nav-link.nav-rich-item {
        height: auto;
        min-height: 3.1rem;
        line-height: 1.3;
        padding: .55rem .65rem;
    }

    .nav-group-panel[b-j7jo4esb2n]  .nav-rich-icon {
        background: var(--app-accent-soft);
        color: var(--app-accent);
    }

    .nav-group-panel[b-j7jo4esb2n]  .nav-rich-title {
        color: var(--app-text-primary);
    }

    .nav-group-panel[b-j7jo4esb2n]  .nav-rich-desc {
        color: var(--app-text-secondary);
    }

    .nav-group-panel[b-j7jo4esb2n]  .nav-rich-chevron {
        color: var(--app-text-secondary);
    }

    .nav-group-panel[b-j7jo4esb2n]  a.active .nav-rich-icon {
        background: var(--app-accent);
        color: var(--app-accent-contrast);
    }

    /* The panel header (group title/description) also switches to light-surface tokens here. */
    .nav-group-panel-header[b-j7jo4esb2n] {
        border-bottom-color: var(--app-border-subtle);
    }

    .nav-group-panel-title[b-j7jo4esb2n] {
        color: var(--app-accent);
    }

    .nav-group-panel-desc[b-j7jo4esb2n] {
        color: var(--app-text-secondary);
    }
}

/* Tablet/mobile (below 1024px, matching the sidebar-era cutover this app already used): the
   grouped nav row becomes a hamburger-revealed stacked drawer instead of a horizontal bar, and
   each dropdown's panel is a plain inline block (no floating position) since the whole row is
   already a vertical stack at this width. */
@media (max-width: 1023.98px) {
    .navbar-toggler[b-j7jo4esb2n] {
        display: block;
    }

    /* .nav-user-desktop (the other element .navbar-brand's own margin-right: auto normally pushes
       right) is display:none below this width, so the toggler needs its own auto margin to stay
       pinned to the far right instead. Needs this specific a selector (3 classes) to outrank
       mobile-foundation.css's own `.nav-root .navbar-toggler { margin: 0; }` reset at this same
       breakpoint (2 classes) regardless of stylesheet load order. */
    .nav-root .topnav-brand-row .navbar-toggler[b-j7jo4esb2n] {
        margin-left: auto;
    }

    .topnav-brand-row[b-j7jo4esb2n] {
        flex-wrap: wrap;
        min-height: 3.75rem;
        padding: .6rem 1rem;
    }

    .topnav-groups[b-j7jo4esb2n] {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0 .75rem .85rem;
    }

    [b-j7jo4esb2n] .topnav-link {
        width: 100%;
    }

    .nav-group-trigger[b-j7jo4esb2n] {
        width: 100%;
        justify-content: space-between;
    }

    .nav-group-panel[b-j7jo4esb2n] {
        padding-left: .5rem;
    }
}

/* Below 768px: keep the header to a single readable row — trim the secondary user copy (LoginId)
   down, matching how the old sidebar-era header avoided clipping/collisions at this width (see the
   equivalent app.css rule this replaces). The avatar/name and Log out control remain, so identity
   and the sign-out action are always visible. */
@media (max-width: 767.98px) {
    .app-user-copy span[b-j7jo4esb2n] {
        display: none;
    }
}

@media (max-width: 520px) {
    .app-user-avatar[b-j7jo4esb2n] {
        display: none;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-c4thyvjftq],
.components-reconnect-repeated-attempt-visible[b-c4thyvjftq],
.components-reconnect-failed-visible[b-c4thyvjftq],
.components-pause-visible[b-c4thyvjftq],
.components-resume-failed-visible[b-c4thyvjftq],
.components-rejoining-animation[b-c4thyvjftq] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-c4thyvjftq],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-c4thyvjftq],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-c4thyvjftq],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-c4thyvjftq],
#components-reconnect-modal.components-reconnect-retrying[b-c4thyvjftq],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-c4thyvjftq],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-c4thyvjftq],
#components-reconnect-modal.components-reconnect-failed[b-c4thyvjftq],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-c4thyvjftq] {
    display: block;
}


#components-reconnect-modal[b-c4thyvjftq] {
    background-color: var(--app-modal-surface);
    color: var(--app-text-primary);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-c4thyvjftq 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-c4thyvjftq 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-c4thyvjftq 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-c4thyvjftq]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-c4thyvjftq 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-c4thyvjftq {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-c4thyvjftq {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-c4thyvjftq {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-c4thyvjftq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-c4thyvjftq] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-c4thyvjftq] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-c4thyvjftq] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-c4thyvjftq] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-c4thyvjftq] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-c4thyvjftq] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-c4thyvjftq 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-c4thyvjftq] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-c4thyvjftq {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Authentication/Login.razor.rz.scp.css */
/* The RV Store brand mark — mirrors login_page.dart's own treatment: the source asset is already
   a self-contained circular badge (gold ring, dark teal fill, monogram) with its own transparent
   surround, so it renders directly with no extra colored container wrapping it (which would fight
   the logo's own frame). drop-shadow (not box-shadow) follows the image's own alpha-channel
   silhouette, giving the same circular shadow mobile gets from a BoxShape.circle decoration
   instead of a shadow on the image's square canvas. The source PNG is 1254x1254, far above any
   on-screen size here, so it stays crisp at any pixel density. */
.login-logo-wrap[b-wbvf3jjhda] {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.login-logo[b-wbvf3jjhda] {
    width: 88px;
    height: 88px;
    object-fit: contain;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.18));
}

/* Email OTP MFA verification step — reuses the same card/layout the password step already sits
   in (LoginLayout.razor.css), so only the step-specific bits need their own rules here. Colors
   all come from the app's existing theme tokens, so dark mode/accent follow automatically. */
.mfa-instructions[b-wbvf3jjhda] {
    color: var(--app-text-secondary, var(--app-text-primary));
}

.mfa-code-input[b-wbvf3jjhda] {
    font-size: 1.5rem;
    letter-spacing: 0.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.mfa-expiry-note[b-wbvf3jjhda] {
    font-size: 0.85rem;
    color: var(--app-text-secondary, var(--app-text-primary));
    margin-bottom: 0.75rem;
}

.mfa-resend[b-wbvf3jjhda] {
    margin-bottom: 0.5rem;
}

.mfa-resend-cooldown[b-wbvf3jjhda] {
    font-size: 0.85rem;
    color: var(--app-text-secondary, var(--app-text-primary));
}

.mfa-back-link[b-wbvf3jjhda] {
    display: block;
    width: 100%;
    text-align: center;
}
/* /Components/Pages/Catalog/CatalogPage.razor.rz.scp.css */
/* Mirrors Product List's visual language (neutral backdrop + white card + compact toolbar) so
   Catalog reads as part of the same design system. */
.catalog-page[b-j47xwnlyo1] {
    background: var(--app-page-background);
    border-radius: 1rem;
    padding: 1.25rem;
    margin: -0.25rem -0.25rem 0;
}

.catalog-page-header[b-j47xwnlyo1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.catalog-page-title[b-j47xwnlyo1] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.catalog-page-subtitle[b-j47xwnlyo1] {
    color: var(--app-text-secondary);
    font-size: 0.9rem;
    margin: 0.15rem 0 0;
}

/* Tabs mirror the mobile app's own two-tab CatalogPage (Brands / Categories). */
.catalog-tabs[b-j47xwnlyo1] {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.catalog-tab[b-j47xwnlyo1] {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.55rem 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--app-text-secondary);
}

    .catalog-tab:hover[b-j47xwnlyo1] {
        color: var(--app-text-primary);
    }

.catalog-tab-active[b-j47xwnlyo1] {
    color: var(--app-accent);
    border-bottom-color: var(--app-accent);
}

.catalog-card[b-j47xwnlyo1] {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 0.75rem;
    overflow: hidden;
}

.catalog-toolbar[b-j47xwnlyo1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--app-border-subtle);
}

.catalog-toolbar-search[b-j47xwnlyo1] {
    flex: 1 1 260px;
    min-width: 200px;
}

.catalog-toolbar-select[b-j47xwnlyo1] {
    width: auto;
    min-width: 140px;
}

.catalog-add-btn[b-j47xwnlyo1] {
    border-radius: 0.5rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    white-space: nowrap;
    margin-left: auto;
}

.catalog-state-block[b-j47xwnlyo1] {
    padding: 3rem 1.5rem;
    text-align: center;
}

.catalog-table thead th[b-j47xwnlyo1] {
    background: var(--app-table-header);
    color: var(--app-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--app-border-subtle);
    padding: 0.75rem 1rem;
    white-space: nowrap;
}

.catalog-table tbody td[b-j47xwnlyo1] {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--app-border-subtle);
    font-size: 0.9rem;
}

.catalog-table tbody tr:last-child td[b-j47xwnlyo1] {
    border-bottom: none;
}

.catalog-name-cell[b-j47xwnlyo1] {
    font-weight: 600;
    color: var(--app-text-primary);
}

/* Row hover/selection — same green-fill treatment as Product List, applied to <td> so Bootstrap's
   own cell backgrounds don't paint over it. */
.catalog-row[b-j47xwnlyo1] {
    cursor: pointer;
}

.catalog-row:hover > td[b-j47xwnlyo1] {
    background-color: var(--app-selected-background);
}

.catalog-row-selected > td[b-j47xwnlyo1] {
    background-color: var(--app-selected-hover);
}

.catalog-row-selected:hover > td[b-j47xwnlyo1] {
    background-color: var(--app-selected-active);
}

.catalog-row-selected > td:first-child[b-j47xwnlyo1] {
    box-shadow: inset 4px 0 0 var(--app-selected-indicator);
}

.catalog-row:focus-visible[b-j47xwnlyo1] {
    outline: 2px solid var(--app-selected-indicator);
    outline-offset: -2px;
}

/* Same compact pen-icon Edit button as Product List — one action, no dropdown. */
.catalog-edit-btn[b-j47xwnlyo1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--app-border);
    border-radius: 0.4rem;
    background: transparent;
    color: var(--app-accent);
}

    .catalog-edit-btn:hover[b-j47xwnlyo1],
    .catalog-edit-btn:focus-visible[b-j47xwnlyo1] {
        background: var(--app-accent-soft);
        border-color: var(--app-accent);
    }

.catalog-page[b-j47xwnlyo1] { max-width: 1320px; padding: 0; margin: 0 auto; background: transparent; }
.catalog-page-header[b-j47xwnlyo1] { align-items: flex-end; margin-bottom: 1.75rem; }
.catalog-page-title[b-j47xwnlyo1] { font-size: 2rem; font-weight: 780; letter-spacing: -.04em; }
.catalog-page-subtitle[b-j47xwnlyo1] { margin-top: .4rem; font-size: .95rem; }
.catalog-tabs[b-j47xwnlyo1] { display: inline-flex; margin-bottom: 1.25rem; padding: .3rem; border: 1px solid var(--app-border); border-radius: .8rem; background: var(--app-surface); box-shadow: 0 1px 3px rgba(0,0,0,.035); }
.catalog-tab[b-j47xwnlyo1] { min-height: 2.35rem; border: 0; border-radius: .6rem; padding: .5rem 1rem; }
.catalog-tab-active[b-j47xwnlyo1] { color: var(--app-accent); background: var(--app-accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-accent) 22%, transparent); }
.catalog-card[b-j47xwnlyo1] { border-color: color-mix(in srgb, var(--app-border) 84%, transparent); border-radius: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 14px 34px rgba(0,0,0,.06); }
.catalog-toolbar[b-j47xwnlyo1] { padding: 1.15rem 1.25rem; background: linear-gradient(135deg, var(--app-surface), color-mix(in srgb, var(--app-accent-soft) 25%, var(--app-surface))); }
.catalog-table thead th[b-j47xwnlyo1] { padding: .85rem 1rem; font-size: .68rem; font-weight: 760; letter-spacing: .075em; }
.catalog-table tbody td[b-j47xwnlyo1] { padding: .9rem 1rem; }
.catalog-edit-btn[b-j47xwnlyo1] { width: 36px; height: 36px; border-radius: .65rem; background: var(--app-surface); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
/* /Components/Pages/Consignments/NewConsignment.razor.rz.scp.css */
/* New Consignment redesign: a dedicated two-column workspace mirroring the New Sale POS
   redesign's .pos-* class family (Blazor scoped CSS isolates identically-named classes per
   component via its own [b-xxxx] attribute, so reusing these names here is safe and gives the
   two workspaces a consistent visual language, per this task's own "visually consistent with the
   redesigned New Sale POS workspace" requirement). CompleteSale and NewSettlement are
   intentionally UNCHANGED and keep using the shared .transaction-* family (wwwroot/app.css).
   Every color/spacing value below reads the same --app-* theme tokens as the rest of the app, so
   dark mode and the dynamic accent color both work with zero extra code. */

.pos-workspace[b-tp2cojdqn2] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Bootstrap's plain .alert-info has never been re-themed for dark mode anywhere in this app (it
   has exactly one other, rarely-hit caller) — override its colors here with theme tokens rather
   than touch the shared class, so this banner reads correctly in both themes without affecting
   that other caller. */
.pos-banner[b-tp2cojdqn2] {
    margin-bottom: 1rem;
    border-color: color-mix(in srgb, var(--app-accent) 30%, var(--app-border));
    background: var(--app-accent-soft);
    color: var(--app-text-primary);
}

/* Two-column workspace: catalog (left) noticeably wider than the transaction panel (right), with
   a subtle divider between them so the two halves stay visually distinct, per the reference. */
.pos-split[b-tp2cojdqn2] {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(20rem, 1fr);
    gap: 1.25rem;
    align-items: start;
    min-height: 0;
}

.pos-catalog[b-tp2cojdqn2] {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    min-width: 0;
    padding-right: 1.25rem;
    border-right: 1px solid var(--app-border-subtle);
}

.pos-search-row[b-tp2cojdqn2] {
    display: flex;
    gap: .6rem;
}

.pos-filter-row[b-tp2cojdqn2] {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.pos-filter-row .form-select[b-tp2cojdqn2],
.pos-filter-row .searchable-select[b-tp2cojdqn2] {
    flex: 1 1 12rem;
    min-width: 0;
}

/* Quick category chips — reuses the exact same _categoryId + SearchProducts() the Category
   dropdown already uses; purely an additional way to set the same filter, no new logic. */
.pos-chip-row[b-tp2cojdqn2] {
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .15rem;
    scrollbar-width: thin;
}

.pos-chip[b-tp2cojdqn2] {
    flex: 0 0 auto;
    padding: .38rem .85rem;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    background: var(--app-surface);
    color: var(--app-text-secondary);
    font-size: .76rem;
    font-weight: 650;
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.pos-chip:hover:not(:disabled)[b-tp2cojdqn2] {
    border-color: color-mix(in srgb, var(--app-text-secondary) 46%, var(--app-border));
    color: var(--app-text-primary);
}

.pos-chip-active[b-tp2cojdqn2] {
    border-color: transparent;
    background: var(--app-accent);
    color: var(--app-accent-contrast);
}

.pos-chip:disabled[b-tp2cojdqn2] { opacity: .6; }

.pos-catalog-body[b-tp2cojdqn2] {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    padding-right: .25rem;
}

.pos-product-grid[b-tp2cojdqn2] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

@media (min-width: 1400px) {
    .pos-product-grid[b-tp2cojdqn2] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pos-product-card[b-tp2cojdqn2] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .85rem;
    border: 1px solid color-mix(in srgb, var(--app-border) 84%, transparent);
    border-radius: .9rem;
    background: var(--app-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03), 0 6px 16px rgba(15, 23, 42, .03);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.pos-product-card-added[b-tp2cojdqn2] {
    border-color: color-mix(in srgb, var(--app-accent) 45%, transparent);
    background: color-mix(in srgb, var(--app-accent-soft) 55%, var(--app-surface));
}

.pos-product-card-disabled[b-tp2cojdqn2] { opacity: .62; }

.pos-product-top[b-tp2cojdqn2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.pos-product-stock[b-tp2cojdqn2] {
    color: var(--app-text-secondary);
    font-size: .68rem;
    font-weight: 650;
}

.pos-product-brand[b-tp2cojdqn2] {
    overflow: hidden;
    min-width: 0;
    color: var(--app-text-secondary);
    font-size: .68rem;
    font-weight: 650;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Grid + place-items:center lets an unconstrained <img>'s own intrinsic pixel size leak into the
   grid track's auto sizing (a real bug caught during New Sale QA: it silently overflowed the
   whole page at every viewport width). Flex with an explicit min-width:0 sidesteps that. */
.pos-product-media[b-tp2cojdqn2] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5.5rem;
    min-width: 0;
    overflow: hidden;
    border-radius: .65rem;
    background: var(--app-table-header);
}

.pos-product-media img[b-tp2cojdqn2] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pos-product-placeholder[b-tp2cojdqn2] {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    border-radius: 50%;
    background: var(--app-accent-soft);
    color: var(--app-accent);
    font-weight: 760;
    font-size: 1.1rem;
}

.pos-product-copy[b-tp2cojdqn2] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.pos-product-copy strong[b-tp2cojdqn2] {
    overflow: hidden;
    color: var(--app-text-primary);
    font-size: .84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-product-copy small[b-tp2cojdqn2] {
    overflow: hidden;
    color: var(--app-text-secondary);
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-product-footer[b-tp2cojdqn2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: auto;
}

/* Distributor Price is primary (bold, full size); Selling Price — when the API already returned
   one — is a smaller strike-through reference beneath it. Neither value is recalculated here. */
.pos-product-prices[b-tp2cojdqn2] {
    display: flex;
    flex-direction: column;
    gap: .05rem;
    min-width: 0;
}

.pos-product-price[b-tp2cojdqn2] {
    color: var(--app-text-primary);
    font-size: .9rem;
}

.pos-product-price-secondary[b-tp2cojdqn2] {
    color: var(--app-text-secondary);
    font-size: .7rem;
    text-decoration: line-through;
}

.pos-product-added[b-tp2cojdqn2] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .6rem;
    border-radius: 999px;
    background: var(--app-accent-soft);
    color: var(--app-accent);
    font-size: .72rem;
    font-weight: 700;
}

/* ---- Transaction / Released Items panel ---- */

.pos-order-panel[b-tp2cojdqn2] {
    display: flex;
    position: sticky;
    top: 0;
    flex-direction: column;
    gap: .75rem;
    min-height: 0;
    max-height: calc(100dvh - 11rem);
}

.pos-order-header[b-tp2cojdqn2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.pos-order-header-items[b-tp2cojdqn2] {
    margin-top: .25rem;
    padding-top: .75rem;
    border-top: 1px solid var(--app-border-subtle);
}

.pos-order-header h2[b-tp2cojdqn2] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    color: var(--app-text-primary);
    font-size: 1rem;
    font-weight: 760;
}

.pos-order-count[b-tp2cojdqn2] {
    padding: .18rem .55rem;
    border-radius: 999px;
    background: var(--app-accent-soft);
    color: var(--app-accent);
    font-size: .68rem;
    font-weight: 720;
}

.pos-clear-all[b-tp2cojdqn2] {
    padding: 0;
    color: var(--app-text-secondary);
}

.pos-distributor-field[b-tp2cojdqn2],
.pos-field[b-tp2cojdqn2] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.pos-distributor-field .form-label[b-tp2cojdqn2],
.pos-field .form-label[b-tp2cojdqn2] {
    margin: 0;
    color: var(--app-text-secondary);
    font-size: .78rem;
    font-weight: 650;
}

/* Distributor selection is the most important field in this workflow — a visually prominent,
   accent-tinted field distinguishes it from the plain Due Date / Remarks fields below it. */
.pos-distributor-field[b-tp2cojdqn2] {
    padding: .65rem .75rem;
    border: 1px solid color-mix(in srgb, var(--app-accent) 30%, var(--app-border));
    border-radius: .65rem;
    background: var(--app-accent-soft);
}

.pos-distributor-field .form-select[b-tp2cojdqn2] {
    font-weight: 650;
}

.pos-remarks-input[b-tp2cojdqn2] {
    font-size: .8rem;
}

.pos-order-items[b-tp2cojdqn2] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-height: 3rem;
    overflow-y: auto;
    padding-right: .15rem;
}

.pos-order-empty[b-tp2cojdqn2] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: 1.75rem 1rem;
    border: 1px dashed var(--app-border);
    border-radius: .75rem;
    color: var(--app-text-secondary);
    text-align: center;
}

.pos-order-empty-icon[b-tp2cojdqn2] { color: var(--app-text-secondary); opacity: .55; }

.pos-order-empty p[b-tp2cojdqn2] {
    margin: .25rem 0 0;
    color: var(--app-text-primary);
    font-weight: 650;
}

.pos-order-empty span[b-tp2cojdqn2] {
    font-size: .78rem;
}

.pos-order-item[b-tp2cojdqn2] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "copy remove" "qty total";
    align-items: center;
    gap: .3rem .5rem;
    padding: .65rem .75rem;
    border: 1px solid var(--app-border-subtle);
    border-radius: .75rem;
    background: var(--app-surface);
}

.pos-order-item-copy[b-tp2cojdqn2] {
    grid-area: copy;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pos-order-item-copy strong[b-tp2cojdqn2] {
    overflow: hidden;
    color: var(--app-text-primary);
    font-size: .82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-order-item-copy small[b-tp2cojdqn2] {
    color: var(--app-text-secondary);
    font-size: .7rem;
}

.pos-order-item-remove[b-tp2cojdqn2] {
    display: grid;
    grid-area: remove;
    width: 1.6rem;
    height: 1.6rem;
    place-items: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--app-text-secondary);
    font-size: 1rem;
    line-height: 1;
}

.pos-order-item-remove:hover:not(:disabled)[b-tp2cojdqn2] {
    background: var(--app-error-background);
    color: var(--app-error-text);
}

.pos-order-item-qty[b-tp2cojdqn2] {
    display: flex;
    grid-area: qty;
    align-items: center;
    gap: .3rem;
}

.pos-qty-btn[b-tp2cojdqn2] {
    display: grid;
    width: 1.6rem;
    height: 1.6rem;
    place-items: center;
    padding: 0;
    border: 1px solid var(--app-border);
    border-radius: .5rem;
    background: var(--app-surface);
    color: var(--app-text-primary);
    font-size: .9rem;
    line-height: 1;
}

.pos-qty-btn:hover:not(:disabled)[b-tp2cojdqn2] {
    border-color: var(--app-accent);
    color: var(--app-accent);
}

.pos-qty-btn:disabled[b-tp2cojdqn2] { opacity: .4; }

.pos-qty-input[b-tp2cojdqn2] {
    width: 2.6rem;
    padding: .2rem;
    border: 1px solid var(--app-border);
    border-radius: .4rem;
    background: var(--app-surface);
    color: var(--app-text-primary);
    text-align: center;
    font-size: .8rem;
    -moz-appearance: textfield;
}

.pos-order-item-total[b-tp2cojdqn2] {
    grid-area: total;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.pos-order-item-total small[b-tp2cojdqn2] {
    color: var(--app-text-secondary);
    font-size: .65rem;
}

.pos-order-item-total strong[b-tp2cojdqn2] {
    color: var(--app-text-primary);
    font-size: .84rem;
}

.pos-order-summary[b-tp2cojdqn2] {
    flex: 0 0 auto;
    padding-top: .6rem;
    border-top: 1px solid var(--app-border);
}

.pos-summary-row[b-tp2cojdqn2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .2rem 0;
    color: var(--app-text-secondary);
    font-size: .8rem;
}

.pos-summary-row strong[b-tp2cojdqn2] { color: var(--app-text-primary); }

.pos-summary-total[b-tp2cojdqn2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .5rem;
    padding: .75rem .9rem;
    border-radius: .75rem;
    background: var(--app-accent-soft);
    color: var(--app-text-primary);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.pos-summary-total strong[b-tp2cojdqn2] {
    color: var(--app-accent);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

.pos-order-actions[b-tp2cojdqn2] {
    position: sticky;
    bottom: 0;
    flex: 0 0 auto;
    padding-top: .65rem;
    background: var(--app-page-background);
}

.pos-action-buttons[b-tp2cojdqn2] {
    display: flex;
    gap: .6rem;
}

.pos-primary-action[b-tp2cojdqn2] {
    min-height: 2.75rem;
    font-weight: 700;
}

.pos-confirm-copy[b-tp2cojdqn2] {
    margin-bottom: .5rem;
    color: var(--app-text-secondary);
    font-size: .78rem;
}

.pos-confirm-copy strong[b-tp2cojdqn2] {
    display: block;
    color: var(--app-text-primary);
    font-size: .88rem;
}

@media (max-width: 1099.98px) {
    .pos-split[b-tp2cojdqn2] {
        grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 1fr);
    }

    .pos-product-grid[b-tp2cojdqn2] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Below the phone breakpoint: stack the catalog above the transaction/released-items panel
   instead of forcing the desktop split — the same order already validated for the New Sale POS
   mobile layout (search/browse first, then the details needed to complete the transaction).
   Phase 1-3 mobile work stays intact — this only changes NewConsignment's own layout. */
@media (max-width: 767.98px) {
    .pos-split[b-tp2cojdqn2] {
        display: flex;
        flex-direction: column;
    }

    .pos-catalog[b-tp2cojdqn2] {
        padding-right: 0;
        border-right: none;
        border-top: 1px solid var(--app-border-subtle);
        padding-top: 1rem;
    }

    .pos-order-panel[b-tp2cojdqn2] {
        position: static;
        max-height: none;
    }

    .pos-order-items[b-tp2cojdqn2] {
        max-height: 22rem;
    }

    .pos-order-actions[b-tp2cojdqn2] {
        position: sticky;
        bottom: 0;
        margin-inline: calc(-1 * var(--app-page-gutter, 1rem));
        padding: .65rem var(--app-page-gutter, 1rem) calc(.65rem + env(safe-area-inset-bottom));
        border-top: 1px solid var(--app-border);
    }
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* Executive-dashboard visual system for the Dashboard page. Every color is a reference to the
   app-wide design tokens in wwwroot/app.css (--app-accent*, --app-*-background/text, --app-chart-*,
   --app-font-family via inheritance) — nothing here hardcodes a color or font, so the page follows
   whichever Accent/Font/Theme Mode the user has selected, in both light and dark mode. */

.dashboard-page[b-g6h32ql3zf] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    max-width: 1600px;
    margin: 0 auto;
}

/* ---------- Header ---------- */

.dashboard-header[b-g6h32ql3zf] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.dashboard-header-title h1[b-g6h32ql3zf] {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 700;
}

.dashboard-header-title p[b-g6h32ql3zf] {
    margin: 0.2rem 0 0;
    color: var(--app-text-secondary);
    font-size: 0.9rem;
}

.dashboard-header-actions[b-g6h32ql3zf] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.dashboard-range[b-g6h32ql3zf] {
    display: inline-flex;
    background: var(--app-page-background);
    border: 1px solid var(--app-border);
    border-radius: 0.6rem;
    padding: 0.2rem;
    gap: 0.15rem;
}

.dashboard-range-btn[b-g6h32ql3zf] {
    border: none;
    background: transparent;
    color: var(--app-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.35rem 0.7rem;
    border-radius: 0.45rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

    .dashboard-range-btn:hover:not(:disabled)[b-g6h32ql3zf] {
        background: var(--app-hover);
        color: var(--app-text-primary);
    }

    .dashboard-range-btn:disabled[b-g6h32ql3zf] {
        cursor: default;
        opacity: 0.6;
    }

.dashboard-range-btn-active[b-g6h32ql3zf],
.dashboard-range-btn-active:hover:not(:disabled)[b-g6h32ql3zf] {
    background: var(--app-accent);
    color: var(--app-accent-contrast);
}

.dashboard-refresh-btn[b-g6h32ql3zf] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 0.6rem;
}

.dashboard-refresh-icon[b-g6h32ql3zf] {
    flex-shrink: 0;
}

.dashboard-refresh-spin[b-g6h32ql3zf] {
    animation: dashboard-spin-b-g6h32ql3zf 1s linear infinite;
}

@keyframes dashboard-spin-b-g6h32ql3zf {
    to { transform: rotate(360deg); }
}

.dashboard-state[b-g6h32ql3zf] {
    text-align: center;
    padding: 3rem 1rem;
    background: var(--app-surface);
    border: 1px dashed var(--app-border);
    border-radius: 1rem;
}

/* ---------- Shared card chrome ---------- */

.dashboard-card[b-g6h32ql3zf],
.dashboard-kpi-card[b-g6h32ql3zf] {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 24px rgba(0, 0, 0, 0.04);
    padding: 1.25rem;
}

.dashboard-card-head[b-g6h32ql3zf],
.dashboard-kpi-head[b-g6h32ql3zf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.dashboard-card-head h2[b-g6h32ql3zf],
.dashboard-kpi-head h2[b-g6h32ql3zf] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
}

.dashboard-card-sub[b-g6h32ql3zf] {
    color: var(--app-text-secondary);
    font-size: 0.8rem;
}

.dashboard-period-badge[b-g6h32ql3zf] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--app-accent-dark);
    background: var(--app-accent-soft);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

.dashboard-empty[b-g6h32ql3zf] {
    color: var(--app-text-secondary);
    text-align: center;
    padding: 1.5rem 0.5rem 0.5rem;
    margin: 0;
}

/* ---------- Top KPI row ---------- */

.dashboard-kpi-row[b-g6h32ql3zf] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 1rem;
}

.dashboard-kpi-dominant[b-g6h32ql3zf] {
    display: grid;
    gap: 0.25rem;
}

.dashboard-kpi-label[b-g6h32ql3zf] {
    color: var(--app-text-secondary);
    font-size: 0.8rem;
}

.dashboard-kpi-value[b-g6h32ql3zf] {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.15;
}

/* A stacked label/value list rather than a 3-equal-column grid: at the card's real desktop width
   a fixed-column grid collided/overlapped longer labels like "Distributor/Consignment" against
   their neighbors (caught in visual verification), whereas a vertical stack has no fixed column
   to overflow regardless of label length or how narrow the card gets responsively. */
.dashboard-kpi-support-row[b-g6h32ql3zf] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.45rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--app-border-subtle);
}

.dashboard-kpi-support[b-g6h32ql3zf] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
}

    .dashboard-kpi-support span[b-g6h32ql3zf] {
        color: var(--app-text-secondary);
        font-size: 0.78rem;
    }

    .dashboard-kpi-support strong[b-g6h32ql3zf] {
        font-size: 0.9rem;
        font-weight: 600;
        white-space: nowrap;
    }

.dashboard-sparkline[b-g6h32ql3zf] {
    width: 100%;
    height: 40px;
    margin-top: 0.75rem;
    display: block;
}

.dashboard-sparkline-line[b-g6h32ql3zf] {
    fill: none;
    stroke: var(--app-accent);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.dashboard-sparkline-area[b-g6h32ql3zf] {
    fill: var(--app-accent-soft);
    stroke: none;
}

.dashboard-inventory-blocks[b-g6h32ql3zf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.75rem;
}

.dashboard-inv-block[b-g6h32ql3zf] {
    display: grid;
    gap: 0.2rem;
    padding: 0.6rem 0.7rem;
    border-radius: 0.65rem;
    background: var(--app-page-background);
}

    .dashboard-inv-block span[b-g6h32ql3zf] {
        color: var(--app-text-secondary);
        font-size: 0.72rem;
    }

    .dashboard-inv-block strong[b-g6h32ql3zf] {
        font-size: 1.05rem;
        font-weight: 700;
    }

.dashboard-inv-block-warning[b-g6h32ql3zf] {
    background: var(--app-warning-background);
}

    .dashboard-inv-block-warning span[b-g6h32ql3zf],
    .dashboard-inv-block-warning strong[b-g6h32ql3zf] {
        color: var(--app-warning-text);
    }

.dashboard-alert[b-g6h32ql3zf] {
    margin: 0;
}

/* ---------- Quick actions ---------- */

.dashboard-quick-actions[b-g6h32ql3zf] {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.dashboard-action-btn[b-g6h32ql3zf] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    color: var(--app-text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.55rem 0.9rem;
    border-radius: 0.65rem;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

    .dashboard-action-btn:hover[b-g6h32ql3zf] {
        background: var(--app-hover);
    }

.dashboard-action-icon[b-g6h32ql3zf] {
    color: var(--app-text-secondary);
    flex-shrink: 0;
}

.dashboard-action-btn-primary[b-g6h32ql3zf] {
    background: var(--app-accent);
    border-color: var(--app-accent-hover);
    color: var(--app-accent-contrast);
}

    .dashboard-action-btn-primary:hover[b-g6h32ql3zf] {
        background: var(--app-accent-hover);
    }

    .dashboard-action-btn-primary .dashboard-action-icon[b-g6h32ql3zf] {
        color: inherit;
    }

/* ---------- Sales Trend + Sales by Source ---------- */

.dashboard-trend-row[b-g6h32ql3zf] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1rem;
}

.dashboard-trend-chart-wrap[b-g6h32ql3zf] {
    display: grid;
    gap: 0.4rem;
}

.dashboard-trend-chart[b-g6h32ql3zf] {
    width: 100%;
    height: 220px;
    display: block;
}

.dashboard-trend-grid[b-g6h32ql3zf] {
    stroke: var(--app-border-subtle);
    stroke-width: 1;
}

.dashboard-trend-area[b-g6h32ql3zf] {
    fill: var(--app-accent-soft);
    stroke: none;
}

.dashboard-trend-line[b-g6h32ql3zf] {
    fill: none;
    stroke: var(--app-accent);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.dashboard-trend-dot[b-g6h32ql3zf] {
    fill: var(--app-accent);
}

.dashboard-trend-labels[b-g6h32ql3zf] {
    display: flex;
    justify-content: space-between;
    color: var(--app-text-secondary);
    font-size: 0.75rem;
    padding: 0 0.25rem;
}

.dashboard-trend-details[b-g6h32ql3zf] {
    margin-top: 0.9rem;
    border-top: 1px solid var(--app-border-subtle);
    padding-top: 0.6rem;
}

    .dashboard-trend-details summary[b-g6h32ql3zf] {
        cursor: pointer;
        color: var(--app-accent);
        font-size: 0.82rem;
        font-weight: 600;
    }

    .dashboard-trend-details table[b-g6h32ql3zf] {
        margin-top: 0.75rem;
    }

.dashboard-donut-wrap[b-g6h32ql3zf] {
    display: grid;
    justify-items: center;
    gap: 1rem;
}

.dashboard-donut[b-g6h32ql3zf] {
    width: 150px;
    height: 150px;
}

.dashboard-donut-track[b-g6h32ql3zf] {
    fill: none;
    stroke: var(--app-border-subtle);
    stroke-width: 16;
}

.dashboard-donut-segment[b-g6h32ql3zf] {
    fill: none;
    stroke-width: 16;
    stroke-linecap: butt;
}

.dashboard-donut-color-0[b-g6h32ql3zf], .dashboard-donut-swatch.dashboard-donut-color-0[b-g6h32ql3zf] { stroke: var(--app-chart-1); background: var(--app-chart-1); }
.dashboard-donut-color-1[b-g6h32ql3zf], .dashboard-donut-swatch.dashboard-donut-color-1[b-g6h32ql3zf] { stroke: var(--app-chart-2); background: var(--app-chart-2); }
.dashboard-donut-color-2[b-g6h32ql3zf], .dashboard-donut-swatch.dashboard-donut-color-2[b-g6h32ql3zf] { stroke: var(--app-chart-3); background: var(--app-chart-3); }
.dashboard-donut-color-3[b-g6h32ql3zf], .dashboard-donut-swatch.dashboard-donut-color-3[b-g6h32ql3zf] { stroke: var(--app-chart-4); background: var(--app-chart-4); }

.dashboard-donut-legend[b-g6h32ql3zf] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    width: 100%;
}

    .dashboard-donut-legend li[b-g6h32ql3zf] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.82rem;
    }

.dashboard-donut-swatch[b-g6h32ql3zf] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dashboard-donut-legend-label[b-g6h32ql3zf] {
    flex: 1 1 auto;
    font-weight: 600;
}

.dashboard-donut-legend-value[b-g6h32ql3zf] {
    color: var(--app-text-secondary);
    font-size: 0.78rem;
    white-space: nowrap;
}

/* ---------- Lower content grid ---------- */

.dashboard-lower-grid[b-g6h32ql3zf] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.dashboard-bar-list[b-g6h32ql3zf], .dashboard-rank-list[b-g6h32ql3zf] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
}

.dashboard-bar-list-row[b-g6h32ql3zf] {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
}

.dashboard-bar-list-label[b-g6h32ql3zf] {
    font-weight: 600;
}

.dashboard-bar-list-value[b-g6h32ql3zf] {
    color: var(--app-text-secondary);
    font-size: 0.78rem;
    white-space: nowrap;
}

.dashboard-bar-track[b-g6h32ql3zf] {
    height: 8px;
    border-radius: 999px;
    background: var(--app-border-subtle);
    overflow: hidden;
}

.dashboard-bar-track-compact[b-g6h32ql3zf] {
    height: 5px;
    margin: 0.3rem 0;
}

.dashboard-bar-fill[b-g6h32ql3zf] {
    height: 100%;
    border-radius: inherit;
    background: var(--app-accent);
}

.dashboard-rank-list[b-g6h32ql3zf] {
    counter-reset: none;
}

    .dashboard-rank-list li[b-g6h32ql3zf] {
        display: flex;
        gap: 0.75rem;
        align-items: flex-start;
    }

.dashboard-rank-index[b-g6h32ql3zf] {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--app-page-background);
    color: var(--app-text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
}

.dashboard-rank-body[b-g6h32ql3zf] {
    flex: 1 1 auto;
    min-width: 0;
}

.dashboard-rank-row[b-g6h32ql3zf] {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.85rem;
}

.dashboard-rank-name[b-g6h32ql3zf] {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-rank-value[b-g6h32ql3zf] {
    white-space: nowrap;
    font-weight: 600;
}

.dashboard-rank-meta[b-g6h32ql3zf] {
    display: block;
    color: var(--app-text-secondary);
    font-size: 0.72rem;
}

/* Applied only to out-of-stock rows in the Inventory Attention card — a subtle tint, not a wall of
   red, since the alert panel above already carries the strong warning treatment for the section. */
.dashboard-attention-row[b-g6h32ql3zf] {
    background: color-mix(in srgb, var(--app-error-background) 55%, var(--app-surface));
}

/* ---------- Loading skeleton ---------- */

.dashboard-skeleton[b-g6h32ql3zf] {
    display: grid;
    gap: 1.25rem;
}

.dashboard-skeleton-row[b-g6h32ql3zf] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.dashboard-skeleton-block[b-g6h32ql3zf] {
    background: linear-gradient(90deg, var(--app-hover) 25%, var(--app-border-subtle) 37%, var(--app-hover) 63%);
    background-size: 400% 100%;
    animation: dashboard-shimmer-b-g6h32ql3zf 1.4s ease infinite;
    border-radius: 1rem;
    border: 1px solid var(--app-border);
}

.dashboard-skeleton-kpi[b-g6h32ql3zf] {
    height: 140px;
}

.dashboard-skeleton-chart[b-g6h32ql3zf] {
    height: 280px;
    grid-column: span 2;
}

.dashboard-skeleton-donut[b-g6h32ql3zf] {
    height: 280px;
}

.dashboard-skeleton-card[b-g6h32ql3zf] {
    height: 220px;
}

@keyframes dashboard-shimmer-b-g6h32ql3zf {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1199px) {
    .dashboard-kpi-row[b-g6h32ql3zf] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-kpi-inventory[b-g6h32ql3zf] {
        grid-column: span 2;
    }

    .dashboard-trend-row[b-g6h32ql3zf] {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-skeleton-row[b-g6h32ql3zf] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-skeleton-chart[b-g6h32ql3zf] {
        grid-column: span 2;
    }
}

@media (max-width: 900px) {
    .dashboard-lower-grid[b-g6h32ql3zf] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 700px) {
    .dashboard-header[b-g6h32ql3zf] {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-header-actions[b-g6h32ql3zf] {
        justify-content: space-between;
    }

    .dashboard-kpi-row[b-g6h32ql3zf] {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-kpi-inventory[b-g6h32ql3zf] {
        grid-column: span 1;
    }

    .dashboard-skeleton-row[b-g6h32ql3zf] {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashboard-skeleton-chart[b-g6h32ql3zf] {
        grid-column: span 1;
    }
}

/* Visual redesign pass: stronger hierarchy and a more spacious executive-dashboard composition. */
.dashboard-page[b-g6h32ql3zf] { gap: 1.5rem; }
.dashboard-header[b-g6h32ql3zf] {
    align-items: center;
    padding: 0;
}
.dashboard-header-title[b-g6h32ql3zf] { min-width: 0; max-width: 100%; }
.dashboard-header-title h1[b-g6h32ql3zf] { font-size: 2rem; font-weight: 780; letter-spacing: -.04em; }
.dashboard-header-title p[b-g6h32ql3zf] { margin-top: .4rem; font-size: .92rem; }
.dashboard-range[b-g6h32ql3zf] { padding: .28rem; border-color: color-mix(in srgb, var(--app-border) 80%, transparent); background: color-mix(in srgb, var(--app-surface) 82%, transparent); box-shadow: 0 1px 4px rgba(0,0,0,.04); }
.dashboard-range-btn[b-g6h32ql3zf] { min-width: 2.45rem; min-height: 2.25rem; padding: .45rem .7rem; border-radius: .55rem; }
.dashboard-kpi-row[b-g6h32ql3zf] { gap: 1.15rem; }
.dashboard-card[b-g6h32ql3zf], .dashboard-kpi-card[b-g6h32ql3zf] {
    border-color: color-mix(in srgb, var(--app-border) 84%, transparent);
    border-radius: 1.15rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.045), 0 14px 34px rgba(0,0,0,.06);
}
.dashboard-kpi-card[b-g6h32ql3zf] {
    position: relative;
    min-height: 12rem;
    overflow: hidden;
    padding: 1.4rem;
    background: linear-gradient(145deg, var(--app-surface), color-mix(in srgb, var(--app-accent-soft) 18%, var(--app-surface)));
}
.dashboard-kpi-card[b-g6h32ql3zf]::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--app-accent);
}
.dashboard-kpi-card:nth-child(2)[b-g6h32ql3zf]::before { background: var(--app-success-text); }
.dashboard-kpi-card:nth-child(3)[b-g6h32ql3zf]::before { background: var(--app-warning-text); }
.dashboard-kpi-head h2[b-g6h32ql3zf] { font-size: .78rem; letter-spacing: .075em; text-transform: uppercase; color: var(--app-text-secondary); }
.dashboard-kpi-value[b-g6h32ql3zf] { margin-top: .18rem; font-size: 2.25rem; font-weight: 790; letter-spacing: -.045em; }
.dashboard-kpi-label[b-g6h32ql3zf] { font-size: .76rem; font-weight: 620; }
.dashboard-inventory-blocks[b-g6h32ql3zf] { gap: .65rem; }
.dashboard-inv-block[b-g6h32ql3zf] { min-height: 4.1rem; justify-content: center; padding: .7rem .8rem; border: 1px solid var(--app-border-subtle); border-radius: .8rem; background: color-mix(in srgb, var(--app-page-background) 78%, var(--app-surface)); }
.dashboard-quick-actions[b-g6h32ql3zf] {
    align-items: center;
    padding: .9rem;
    border: 1px solid var(--app-border);
    border-radius: 1rem;
    background: var(--app-surface);
    box-shadow: 0 1px 3px rgba(0,0,0,.035);
}
.dashboard-quick-actions[b-g6h32ql3zf]::before { content: 'Quick actions'; margin: 0 .35rem; color: var(--app-text-secondary); font-size: .7rem; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.dashboard-action-btn[b-g6h32ql3zf] { min-height: 2.55rem; padding: .6rem .9rem; border-radius: .72rem; }
.dashboard-card[b-g6h32ql3zf] { padding: 1.4rem; }
.dashboard-card-head[b-g6h32ql3zf] { margin-bottom: 1.15rem; }
.dashboard-card-head h2[b-g6h32ql3zf] { font-size: 1rem; letter-spacing: -.012em; }
.dashboard-trend-chart[b-g6h32ql3zf] { height: 250px; }
.dashboard-donut[b-g6h32ql3zf] { width: 165px; height: 165px; }
.dashboard-bar-track[b-g6h32ql3zf] { height: 9px; background: color-mix(in srgb, var(--app-border-subtle) 82%, var(--app-hover)); }
.dashboard-rank-index[b-g6h32ql3zf] { background: var(--app-accent-soft); color: var(--app-accent); }

@media (max-width: 1023.98px) {
    .dashboard-kpi-row[b-g6h32ql3zf] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-kpi-inventory[b-g6h32ql3zf] { grid-column: span 2; }
}
@media (max-width: 767.98px) {
    .dashboard-page[b-g6h32ql3zf] { gap: 1rem; }
    .dashboard-header[b-g6h32ql3zf] { align-items: stretch; }
    .dashboard-header-title h1[b-g6h32ql3zf] { font-size: 1.7rem; }
    .dashboard-header-actions[b-g6h32ql3zf] { justify-content: space-between; }
    .dashboard-kpi-row[b-g6h32ql3zf] { grid-template-columns: 1fr; }
    .dashboard-kpi-inventory[b-g6h32ql3zf] { grid-column: span 1; }
    .dashboard-kpi-card[b-g6h32ql3zf] { min-height: auto; }
    .dashboard-quick-actions[b-g6h32ql3zf]::before { width: 100%; }
    .dashboard-action-btn[b-g6h32ql3zf] { flex: 1 1 10rem; }
}

/* ---------- Inventory by Category / Top Products insight cards ---------- */

.dashboard-card-head[b-g6h32ql3zf] { align-items: flex-start; }
.dashboard-card-head > div:first-child[b-g6h32ql3zf] { min-width: 0; }
.dashboard-card-head h2[b-g6h32ql3zf] { margin: 0; }
.dashboard-card-sub[b-g6h32ql3zf] { display: block; margin-top: .2rem; }

.dashboard-category-summary[b-g6h32ql3zf],
.dashboard-product-summary[b-g6h32ql3zf] {
    margin-bottom: 1.1rem;
}

/* A row of proportional segments (category share of on-hand stock) — the same "no chart library,
   inline element + CSS token color" convention as the donut/sparkline above, just laid out as a
   straight strip instead of an arc. Segment colors cycle through the same --app-chart-* tokens the
   Sales by Source donut already uses, so the two stay visually related. */
.dashboard-category-strip[b-g6h32ql3zf] {
    display: flex;
    width: 100%;
    height: 10px;
    margin-bottom: .75rem;
    border-radius: 999px;
    overflow: hidden;
    background: var(--app-border-subtle);
}

.dashboard-category-strip-seg[b-g6h32ql3zf] {
    height: 100%;
    min-width: 2px;
}

.dashboard-category-strip-legend[b-g6h32ql3zf] {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
}

    .dashboard-category-strip-legend li[b-g6h32ql3zf] {
        display: flex;
        align-items: center;
        gap: .4rem;
        font-size: .78rem;
    }

.dashboard-category-strip-legend-label[b-g6h32ql3zf] {
    font-weight: 600;
}

.dashboard-category-strip-legend-value[b-g6h32ql3zf] {
    color: var(--app-text-secondary);
    white-space: nowrap;
}

.dashboard-category-split[b-g6h32ql3zf] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
}

.dashboard-category-group-title[b-g6h32ql3zf] {
    margin: 0 0 .65rem;
    color: var(--app-text-secondary);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Tail rows show label/units/share as plain text without a progress bar underneath — the leaders
   above already carry the visual-weight bars, so the secondary list stays a clean, quick-scan
   list rather than a column of near-invisible slivers. */
.dashboard-bar-list-plain[b-g6h32ql3zf] {
    gap: .6rem;
}

.dashboard-category-tail-summary .dashboard-bar-list-label[b-g6h32ql3zf],
.dashboard-category-tail-summary .dashboard-bar-list-value[b-g6h32ql3zf] {
    color: var(--app-text-secondary);
    font-style: italic;
}

.dashboard-card-footer[b-g6h32ql3zf] {
    margin-top: 1.15rem;
    padding-top: .9rem;
    border-top: 1px solid var(--app-border-subtle);
}

.dashboard-card-link[b-g6h32ql3zf] {
    color: var(--app-accent);
    font-size: .82rem;
    font-weight: 650;
    text-decoration: none;
}

    .dashboard-card-link:hover[b-g6h32ql3zf],
    .dashboard-card-link:focus-visible[b-g6h32ql3zf] {
        text-decoration: underline;
    }

/* The top-ranked product gets a slightly stronger surface, not a louder color, so the emphasis
   still reads correctly if color perception/contrast is limited. */
.dashboard-rank-item-lead[b-g6h32ql3zf] {
    padding: .6rem .65rem;
    margin: -.6rem -.65rem .1rem;
    border-radius: .75rem;
    background: var(--app-accent-soft);
}

    .dashboard-rank-item-lead .dashboard-rank-index[b-g6h32ql3zf] {
        background: var(--app-accent);
        color: var(--app-accent-contrast);
    }

    .dashboard-rank-item-lead .dashboard-rank-name[b-g6h32ql3zf] {
        font-weight: 700;
    }

.dashboard-rank-footer[b-g6h32ql3zf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .4rem .6rem;
    margin-top: .2rem;
}

.dashboard-rank-meta[b-g6h32ql3zf] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Source-mix tag: derived directly from a product's own walk-in/consignment unit split, never a
   fabricated analytics label. Text carries the meaning, color is a secondary reinforcement. */
.dashboard-source-tag[b-g6h32ql3zf] {
    flex-shrink: 0;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.dashboard-source-tag-walkin[b-g6h32ql3zf] {
    /* --app-success-background/-text is a properly theme-aware pair (redefined for dark mode),
       unlike --app-accent-soft/--app-accent-dark which stays a near-black green in dark mode and
       loses contrast against a dark chip background. */
    background: var(--app-success-background);
    color: var(--app-success-text);
}

.dashboard-source-tag-consignment[b-g6h32ql3zf] {
    background: var(--app-warning-background);
    color: var(--app-warning-text);
}

.dashboard-source-tag-mixed[b-g6h32ql3zf] {
    background: var(--app-border-subtle);
    color: var(--app-text-secondary);
}

@media (max-width: 599.98px) {
    .dashboard-category-split[b-g6h32ql3zf] {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.1rem;
    }
}

/* ---------- Recent Sales / Inventory Attention operational cards ---------- */

.dashboard-sale-summary[b-g6h32ql3zf] {
    margin-bottom: 1.1rem;
}

/* Neutral coloring for a generic type badge (Recent Sales' Walk-in/Distributor tag) — shares
   .dashboard-source-tag for shape/padding, just overrides the semantic walk-in/consignment/mixed
   colors with a plain neutral chip since a sale's type isn't a "good/bad" signal. */
.dashboard-type-tag[b-g6h32ql3zf] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    background: var(--app-border-subtle);
    color: var(--app-text-secondary);
}

.dashboard-sale-list[b-g6h32ql3zf],
.dashboard-attention-list[b-g6h32ql3zf] {
    list-style: none;
    margin: 0 0 .5rem;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .6rem;
}

.dashboard-sale-row[b-g6h32ql3zf],
.dashboard-attention-item[b-g6h32ql3zf] {
    min-width: 0;
    padding: .75rem .85rem;
    border: 1px solid var(--app-border-subtle);
    border-radius: .8rem;
    background: var(--app-page-background);
}

.dashboard-sale-row-top[b-g6h32ql3zf] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}

.dashboard-sale-reference[b-g6h32ql3zf] {
    min-width: 0;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-sale-amount[b-g6h32ql3zf] {
    flex-shrink: 0;
    font-size: 1.05rem;
    font-weight: 750;
}

.dashboard-sale-row-badges[b-g6h32ql3zf] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .4rem;
}

.dashboard-sale-row-meta[b-g6h32ql3zf] {
    margin-top: .35rem;
    color: var(--app-text-secondary);
    font-size: .76rem;
}

/* A strong, semantically-colored panel for the headline attention figure — the one element on
   this card allowed to be loud, since everything below it (chips, rows) stays comparatively quiet. */
.dashboard-alert-panel[b-g6h32ql3zf] {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin-bottom: 1rem;
    padding: .85rem .95rem;
    border: 1px solid transparent;
    border-radius: .85rem;
}

    .dashboard-alert-panel p[b-g6h32ql3zf] {
        margin: .2rem 0 0;
        font-size: .8rem;
        font-weight: 500;
    }

.dashboard-alert-panel-critical[b-g6h32ql3zf] {
    border-color: color-mix(in srgb, var(--app-error-text) 30%, transparent);
    background: var(--app-error-background);
    color: var(--app-error-text);
}

.dashboard-alert-panel-warning[b-g6h32ql3zf] {
    border-color: color-mix(in srgb, var(--app-warning-text) 30%, transparent);
    background: var(--app-warning-background);
    color: var(--app-warning-text);
}

.dashboard-alert-icon[b-g6h32ql3zf] {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 18%, transparent);
    font-weight: 800;
}

.dashboard-chip-row[b-g6h32ql3zf] {
    list-style: none;
    margin: 0 0 1.1rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.dashboard-chip[b-g6h32ql3zf] {
    max-width: 100%;
    padding: .25rem .65rem;
    border: 1px solid var(--app-border-subtle);
    border-radius: 999px;
    background: var(--app-surface);
    color: var(--app-text-secondary);
    font-size: .74rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.dashboard-attention-item-top[b-g6h32ql3zf] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

/* The shared .status-pill (app.css) has never needed overflow handling before — every other
   caller only ever feeds it a short, fixed status word. Scoped here (not touching the shared
   class) because these two cards are the first to render it next to arbitrary-length API text
   (a sale's type name, an out-of-stock product's name) that could in principle be long. */
.dashboard-sale-row .status-pill[b-g6h32ql3zf],
.dashboard-attention-item .status-pill[b-g6h32ql3zf] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.dashboard-attention-item-name[b-g6h32ql3zf] {
    min-width: 0;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.dashboard-attention-item-meta[b-g6h32ql3zf] {
    min-width: 0;
    margin-top: .3rem;
    color: var(--app-text-secondary);
    font-size: .78rem;
    overflow-wrap: anywhere;
}

.dashboard-attention-item .dashboard-card-link[b-g6h32ql3zf] {
    display: inline-block;
    margin-top: .45rem;
    font-size: .76rem;
}

@media (max-width: 599.98px) {
    .dashboard-sale-row-top[b-g6h32ql3zf],
    .dashboard-attention-item-top[b-g6h32ql3zf] {
        flex-wrap: wrap;
    }
}
/* /Components/Pages/Products/ProductList.razor.rz.scp.css */
/* Tailwind migration (Modernize the Store Admin Website UI task, Phase 5): the page background,
   header, card, toolbar, table cell, and footer rules that used to live here were re-expressed as
   Tailwind utility classes directly in ProductList.razor (Tailwind utilities only work from
   markup, not from a CSS file). What remains here are the few things DELIBERATELY left as plain
   CSS — row hover/selection, the thumbnail, and the edit-action button — because
   AccentThemeVariableUsageTests asserts their exact --app-* variable usage at the source-text
   level, and because moving already-correct, already-tested, already-token-driven rules into
   Tailwind utilities would add migration risk for no visual or behavioral benefit. */

/* Row hover/selection: hover is a light green fill, selected is a stronger green fill plus a
   left accent bar so the two states stay visually distinct while keeping all cell content
   (badges, prices, thumbnails) fully readable on top of either background. Applied to the <td>
   cells themselves (not just <tr>) because Bootstrap's table styles set background-color on
   individual cells, which would otherwise paint over a background set only on the row. This is a
   fixed selection-green, NOT themed by the selected Accent — see AccentThemeVariableUsageTests'
   ProductRowGreenSelection_IsUnchangedByAccent. */
.product-row[b-thgdo0zcfj] {
    cursor: pointer;
}

.product-row:hover > td[b-thgdo0zcfj] {
    background-color: var(--app-selected-background);
}

.product-row-selected > td[b-thgdo0zcfj] {
    background-color: var(--app-selected-hover);
}

.product-row-selected:hover > td[b-thgdo0zcfj] {
    background-color: var(--app-selected-active);
}

.product-row-selected > td:first-child[b-thgdo0zcfj] {
    box-shadow: inset 4px 0 0 var(--app-selected-indicator);
}

.product-row:focus-visible[b-thgdo0zcfj] {
    outline: 2px solid var(--app-selected-indicator);
    outline-offset: -2px;
}

.product-thumb[b-thgdo0zcfj] {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border: 1px solid var(--app-border);
    border-radius: 0.5rem;
    display: block;
}

.product-thumb-empty[b-thgdo0zcfj] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--app-hover);
    font-size: 0.6rem;
    text-align: center;
}

/* .status-pill* moved to wwwroot/app.css — shared verbatim with Stock Movement's status badges,
   so there is exactly one definition instead of two pages disagreeing on "Confirmed" green. */

/* Single direct Edit action (pen icon) replaces the old three-dot dropdown menu — there was only
   ever one menu item, so the dropdown added a click for no benefit. */
.product-edit-btn[b-thgdo0zcfj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--app-border);
    border-radius: 0.4rem;
    background: transparent;
    color: var(--app-accent);
}

    .product-edit-btn:hover[b-thgdo0zcfj],
    .product-edit-btn:focus-visible[b-thgdo0zcfj] {
        background: var(--app-accent-soft);
        border-color: var(--app-accent);
    }

/* Focused visual pass: roomier product identity cells and a clearer accent-led selection. */
.product-thumb[b-thgdo0zcfj] { width: 52px; height: 52px; border-radius: .75rem; box-shadow: 0 3px 10px rgba(0,0,0,.07); }
.product-row > td[b-thgdo0zcfj] { transition: background-color .14s ease; }
.product-row:hover > td[b-thgdo0zcfj] { background-color: color-mix(in srgb, var(--app-selected-background) 62%, var(--app-surface)); }
.product-row-selected > td[b-thgdo0zcfj] { background-color: color-mix(in srgb, var(--app-selected-hover) 72%, var(--app-surface)); }
.product-edit-btn[b-thgdo0zcfj] {
    width: 36px;
    height: 36px;
    border-radius: .65rem;
    background: var(--app-surface);
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    transition: transform .14s ease, background-color .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.product-edit-btn:hover[b-thgdo0zcfj], .product-edit-btn:focus-visible[b-thgdo0zcfj] { transform: translateY(-1px); box-shadow: 0 5px 14px color-mix(in srgb, var(--app-accent) 14%, transparent); }

/* Keep the separated product rows, with a neutral, theme-aware column header. */
.product-table[b-thgdo0zcfj] {
    border-collapse: separate;
    border-spacing: 0 .6rem;
}

.product-table thead th[b-thgdo0zcfj] {
    background: var(--app-table-header) !important;
    color: var(--app-text-primary) !important;
    border-bottom: 1px solid var(--app-border) !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
}

/* Each <tr> is its own rounded, bordered surface — the "separated card rows" look — rather than a
   single continuous table body with horizontal rules. border-spacing above (not margin, which
   <tr> cannot use) is what creates the visible gap between rows. */
.product-table tbody tr[b-thgdo0zcfj] {
    background: var(--app-table-row);
    box-shadow: var(--app-shadow-sm, 0 1px 2px rgba(15, 23, 42, .04));
}

    .product-table tbody tr > td:first-child[b-thgdo0zcfj] { border-top-left-radius: .85rem; border-bottom-left-radius: .85rem; }
    .product-table tbody tr > td:last-child[b-thgdo0zcfj] { border-top-right-radius: .85rem; border-bottom-right-radius: .85rem; }
    .product-table tbody tr > td[b-thgdo0zcfj] { border-top: 1px solid var(--app-border-subtle); border-bottom: 1px solid var(--app-border-subtle); }
    .product-table tbody tr > td:first-child[b-thgdo0zcfj] { border-left: 1px solid var(--app-border-subtle); }
    .product-table tbody tr > td:last-child[b-thgdo0zcfj] { border-right: 1px solid var(--app-border-subtle); }

.product-row-selected > td:first-child[b-thgdo0zcfj] {
    /* The existing selection indicator (left accent bar) still reads correctly on a rounded card
       row — just needs the row's own corner radius to keep it from looking clipped. */
    border-top-left-radius: .85rem;
    border-bottom-left-radius: .85rem;
}

/* Product column secondary attribute (ProductSizeName — an existing field, never invented) shown
   as a small neutral tag beneath the product name. Deliberately NOT a rating/star treatment. */
.product-size-tag[b-thgdo0zcfj] {
    display: inline-block;
    margin-top: .25rem;
    padding: .15rem .5rem;
    border-radius: .35rem;
    background: var(--app-hover);
    color: var(--app-text-secondary);
    font-size: .68rem;
    font-weight: 650;
    letter-spacing: .03em;
    text-transform: uppercase;
}
/* /Components/Pages/Reports.razor.rz.scp.css */
/* Standardized Reports page shell — every color reference is one of the app-wide --app-* design
   tokens (wwwroot/app.css), so this follows whichever Accent/Font/Theme Mode the user has
   selected, in both light and dark mode, matching Dashboard.razor.css's own approach. */

.reports-page[b-gjuenq8gxa] {
    display: grid;
    gap: 1rem;
    max-width: 1600px;
    margin: 0 auto;
}

.reports-header[b-gjuenq8gxa] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

    .reports-header h1[b-gjuenq8gxa] {
        margin: 0;
        font-size: 1.55rem;
        font-weight: 700;
    }

    .reports-header p[b-gjuenq8gxa] {
        margin: 0.2rem 0 0;
        color: var(--app-text-secondary);
        font-size: 0.9rem;
    }

.report-state[b-gjuenq8gxa] {
    text-align: center;
    padding: 3rem 1rem;
    background: var(--app-surface);
    border: 1px dashed var(--app-border);
    border-radius: 1rem;
}

/* The one standardized content card every report type renders inside — same rounded/bordered
   surface, same toolbar (title + Filter/Download PDF/Export Excel action group) placement,
   regardless of which report is active. */
.report-content-card[b-gjuenq8gxa] {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 24px rgba(0, 0, 0, 0.04);
    padding: 1.25rem;
}

.report-toolbar[b-gjuenq8gxa] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

    .report-toolbar h2[b-gjuenq8gxa] {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 700;
    }

    .report-toolbar small[b-gjuenq8gxa] {
        color: var(--app-text-secondary);
    }

.report-actions[b-gjuenq8gxa] {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.report-filter-btn[b-gjuenq8gxa] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.report-filter-icon[b-gjuenq8gxa] {
    flex-shrink: 0;
}

/* ---------- PDF-first preview ---------- */
/* The embedded PDF preview is now the primary report content (see Reports.razor's
   GeneratePreviewAsync) — sized per the PDF-first task's own suggested desktop minimum
   (700-850px) via responsive clamping rather than a fixed height, so it stays usable from
   desktop down to laptop/narrower widths without ever forcing the page itself to scroll
   horizontally. The iframe's own document is the hand-built report PDF's fixed "paper" styling
   (see ReportDocumentBuilder), which intentionally does not follow the surrounding page's
   Accent/Font/Theme Mode — only the chrome around it (border/background) does. */
.report-pdf-preview-wrap[b-gjuenq8gxa] {
    width: 100%;
}

.report-pdf-preview[b-gjuenq8gxa] {
    display: block;
    width: 100%;
    height: 75vh;
    min-height: 700px;
    max-height: 850px;
    border: 1px solid var(--app-border);
    border-radius: 0.65rem;
    background: #fff;
}

.report-preview-loading[b-gjuenq8gxa] {
    display: grid;
    place-items: center;
    min-height: 320px;
    border: 1px dashed var(--app-border);
    border-radius: 0.65rem;
    background: var(--app-page-background);
}

@media (max-width: 700px) {
    .report-pdf-preview[b-gjuenq8gxa] {
        height: 65vh;
        min-height: 480px;
        max-height: none;
    }
}

/* ---------- Loading skeleton ---------- */

.report-skeleton[b-gjuenq8gxa] {
    display: grid;
    gap: 1rem;
}

.report-skeleton-block[b-gjuenq8gxa] {
    background: linear-gradient(90deg, var(--app-hover) 25%, var(--app-border-subtle) 37%, var(--app-hover) 63%);
    background-size: 400% 100%;
    animation: report-shimmer-b-gjuenq8gxa 1.4s ease infinite;
    border-radius: 1rem;
    border: 1px solid var(--app-border);
}

/* A single block standing in for the PDF preview — the sole primary content below the toolbar
   now that the on-page summary/KPI card row is gone (Remove Duplicate Summary Cards task). */
.report-skeleton-preview[b-gjuenq8gxa] {
    height: 480px;
}

@keyframes report-shimmer-b-gjuenq8gxa {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (max-width: 700px) {
    .reports-header[b-gjuenq8gxa], .report-toolbar[b-gjuenq8gxa] {
        flex-direction: column;
    }
}
/* /Components/Pages/Sales/NewSale.razor.rz.scp.css */
/* New Sale POS Redesign task: a dedicated two-column point-of-sale workspace, replacing the
   generic stacked-card/table layout every other multi-step transactional page (CompleteSale,
   NewConsignment, NewSettlement) still uses. Those pages are intentionally UNCHANGED and keep
   using the shared .transaction-* family (wwwroot/app.css) — this file only ever targets classes
   scoped to this component, so nothing else in the app is affected. Every color/spacing value
   below reads the same --app-* theme tokens as the rest of the app, so dark mode and the dynamic
   accent color both work with zero extra code. */

.pos-workspace[b-435rkvm0gl] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.pos-ref-field[b-435rkvm0gl] {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--app-text-secondary);
    font-size: .78rem;
}

.pos-ref-input[b-435rkvm0gl] {
    width: 13rem;
    max-width: 40vw;
    padding: .3rem .55rem;
    border: 1px solid var(--app-border);
    border-radius: .5rem;
    background: var(--app-surface);
    color: var(--app-text-primary);
    font-size: .78rem;
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

.pos-ref-input:focus[b-435rkvm0gl] {
    outline: none;
    border-color: var(--app-accent);
    box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--app-accent) 18%, transparent);
}

/* Two-column workspace: catalog (left) noticeably wider than the order panel (right), with a
   subtle divider between them so the two halves stay visually distinct, per the reference. */
.pos-split[b-435rkvm0gl] {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(19rem, 1fr);
    gap: 1.25rem;
    align-items: start;
    min-height: 0;
}

.pos-catalog[b-435rkvm0gl] {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    min-width: 0;
    padding-right: 1.25rem;
    border-right: 1px solid var(--app-border-subtle);
}

.pos-search-row[b-435rkvm0gl] {
    display: flex;
    gap: .6rem;
}

.pos-filter-row[b-435rkvm0gl] {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.pos-filter-row .form-select[b-435rkvm0gl],
.pos-filter-row .searchable-select[b-435rkvm0gl] {
    flex: 1 1 12rem;
    min-width: 0;
}

/* Quick category chips — reuses the exact same _categoryId + SearchProducts() the Category
   dropdown already uses; purely an additional way to set the same filter, no new logic. */
.pos-chip-row[b-435rkvm0gl] {
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .15rem;
    scrollbar-width: thin;
}

.pos-chip[b-435rkvm0gl] {
    flex: 0 0 auto;
    padding: .38rem .85rem;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    background: var(--app-surface);
    color: var(--app-text-secondary);
    font-size: .76rem;
    font-weight: 650;
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.pos-chip:hover:not(:disabled)[b-435rkvm0gl] {
    border-color: color-mix(in srgb, var(--app-text-secondary) 46%, var(--app-border));
    color: var(--app-text-primary);
}

.pos-chip-active[b-435rkvm0gl] {
    border-color: transparent;
    background: var(--app-accent);
    color: var(--app-accent-contrast);
}

.pos-chip:disabled[b-435rkvm0gl] { opacity: .6; }

.pos-catalog-body[b-435rkvm0gl] {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    padding-right: .25rem;
}

.pos-product-grid[b-435rkvm0gl] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

@media (min-width: 1400px) {
    .pos-product-grid[b-435rkvm0gl] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pos-product-card[b-435rkvm0gl] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .85rem;
    border: 1px solid color-mix(in srgb, var(--app-border) 84%, transparent);
    border-radius: .9rem;
    background: var(--app-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03), 0 6px 16px rgba(15, 23, 42, .03);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.pos-product-card-added[b-435rkvm0gl] {
    border-color: color-mix(in srgb, var(--app-accent) 45%, transparent);
    background: color-mix(in srgb, var(--app-accent-soft) 55%, var(--app-surface));
}

.pos-product-card-disabled[b-435rkvm0gl] { opacity: .62; }

.pos-product-top[b-435rkvm0gl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.pos-product-stock[b-435rkvm0gl] {
    color: var(--app-text-secondary);
    font-size: .68rem;
    font-weight: 650;
}

.pos-product-brand[b-435rkvm0gl] {
    overflow: hidden;
    min-width: 0;
    color: var(--app-text-secondary);
    font-size: .68rem;
    font-weight: 650;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-product-media[b-435rkvm0gl] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5.5rem;
    min-width: 0;
    overflow: hidden;
    border-radius: .65rem;
    background: var(--app-table-header);
}

.pos-product-media img[b-435rkvm0gl] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pos-product-placeholder[b-435rkvm0gl] {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    border-radius: 50%;
    background: var(--app-accent-soft);
    color: var(--app-accent);
    font-weight: 760;
    font-size: 1.1rem;
}

.pos-product-copy[b-435rkvm0gl] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.pos-product-copy strong[b-435rkvm0gl] {
    overflow: hidden;
    color: var(--app-text-primary);
    font-size: .84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-product-copy small[b-435rkvm0gl] {
    overflow: hidden;
    color: var(--app-text-secondary);
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-product-footer[b-435rkvm0gl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: auto;
}

.pos-product-price[b-435rkvm0gl] {
    color: var(--app-text-primary);
    font-size: .9rem;
}

.pos-product-added[b-435rkvm0gl] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .6rem;
    border-radius: 999px;
    background: var(--app-accent-soft);
    color: var(--app-accent);
    font-size: .72rem;
    font-weight: 700;
}

/* ---- Current Order panel ---- */

.pos-order-panel[b-435rkvm0gl] {
    display: flex;
    position: sticky;
    top: 0;
    flex-direction: column;
    gap: .75rem;
    min-height: 0;
    max-height: calc(100dvh - 11rem);
}

.pos-order-header[b-435rkvm0gl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.pos-order-header h2[b-435rkvm0gl] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    color: var(--app-text-primary);
    font-size: 1rem;
    font-weight: 760;
}

.pos-order-count[b-435rkvm0gl] {
    padding: .18rem .55rem;
    border-radius: 999px;
    background: var(--app-accent-soft);
    color: var(--app-accent);
    font-size: .68rem;
    font-weight: 720;
}

.pos-clear-all[b-435rkvm0gl] {
    padding: 0;
    color: var(--app-text-secondary);
}

.pos-order-customer[b-435rkvm0gl] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .75rem;
    border: 1px solid var(--app-border-subtle);
    border-radius: .65rem;
    background: var(--app-table-header);
    color: var(--app-text-secondary);
    font-size: .78rem;
}

.pos-order-customer strong[b-435rkvm0gl] { color: var(--app-text-primary); }

.pos-order-customer-icon[b-435rkvm0gl] {
    display: grid;
    width: 1.6rem;
    height: 1.6rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--app-accent-soft);
    color: var(--app-accent);
}

.pos-order-customer-icon .bi[b-435rkvm0gl] {
    width: .85rem;
    height: .85rem;
    margin-right: 0;
}

.pos-remarks-toggle[b-435rkvm0gl] {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: 0;
    color: var(--app-text-secondary);
    font-size: .76rem;
    font-weight: 650;
}

.pos-remarks-toggle:hover[b-435rkvm0gl] { color: var(--app-text-primary); }

.pos-remarks-input[b-435rkvm0gl] {
    margin-top: .4rem;
    font-size: .8rem;
}

.pos-order-items[b-435rkvm0gl] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-height: 3rem;
    overflow-y: auto;
    padding-right: .15rem;
}

.pos-order-empty[b-435rkvm0gl] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: 1.75rem 1rem;
    border: 1px dashed var(--app-border);
    border-radius: .75rem;
    color: var(--app-text-secondary);
    text-align: center;
}

.pos-order-empty-icon[b-435rkvm0gl] { color: var(--app-text-secondary); opacity: .55; }

.pos-order-empty p[b-435rkvm0gl] {
    margin: .25rem 0 0;
    color: var(--app-text-primary);
    font-weight: 650;
}

.pos-order-empty span[b-435rkvm0gl] {
    font-size: .78rem;
}

.pos-order-item[b-435rkvm0gl] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "copy remove" "qty total";
    align-items: center;
    gap: .3rem .5rem;
    padding: .65rem .75rem;
    border: 1px solid var(--app-border-subtle);
    border-radius: .75rem;
    background: var(--app-surface);
}

.pos-order-item-copy[b-435rkvm0gl] {
    grid-area: copy;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pos-order-item-copy strong[b-435rkvm0gl] {
    overflow: hidden;
    color: var(--app-text-primary);
    font-size: .82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-order-item-copy small[b-435rkvm0gl] {
    color: var(--app-text-secondary);
    font-size: .7rem;
}

.pos-order-item-remove[b-435rkvm0gl] {
    display: grid;
    grid-area: remove;
    width: 1.6rem;
    height: 1.6rem;
    place-items: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--app-text-secondary);
    font-size: 1rem;
    line-height: 1;
}

.pos-order-item-remove:hover:not(:disabled)[b-435rkvm0gl] {
    background: var(--app-error-background);
    color: var(--app-error-text);
}

.pos-order-item-qty[b-435rkvm0gl] {
    display: flex;
    grid-area: qty;
    align-items: center;
    gap: .3rem;
}

.pos-qty-btn[b-435rkvm0gl] {
    display: grid;
    width: 1.6rem;
    height: 1.6rem;
    place-items: center;
    padding: 0;
    border: 1px solid var(--app-border);
    border-radius: .5rem;
    background: var(--app-surface);
    color: var(--app-text-primary);
    font-size: .9rem;
    line-height: 1;
}

.pos-qty-btn:hover:not(:disabled)[b-435rkvm0gl] {
    border-color: var(--app-accent);
    color: var(--app-accent);
}

.pos-qty-btn:disabled[b-435rkvm0gl] { opacity: .4; }

.pos-qty-input[b-435rkvm0gl] {
    width: 2.6rem;
    padding: .2rem;
    border: 1px solid var(--app-border);
    border-radius: .4rem;
    background: var(--app-surface);
    color: var(--app-text-primary);
    text-align: center;
    font-size: .8rem;
    -moz-appearance: textfield;
}

.pos-order-item-total[b-435rkvm0gl] {
    grid-area: total;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.pos-order-item-total small[b-435rkvm0gl] {
    color: var(--app-text-secondary);
    font-size: .65rem;
}

.pos-order-item-total strong[b-435rkvm0gl] {
    color: var(--app-text-primary);
    font-size: .84rem;
}

.pos-order-summary[b-435rkvm0gl] {
    flex: 0 0 auto;
    padding-top: .6rem;
    border-top: 1px solid var(--app-border);
}

.pos-summary-row[b-435rkvm0gl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .2rem 0;
    color: var(--app-text-secondary);
    font-size: .8rem;
}

.pos-summary-row strong[b-435rkvm0gl] { color: var(--app-text-primary); }

.pos-summary-total[b-435rkvm0gl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .5rem;
    padding: .75rem .9rem;
    border-radius: .75rem;
    background: var(--app-accent-soft);
    color: var(--app-text-primary);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.pos-summary-total strong[b-435rkvm0gl] {
    color: var(--app-accent);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

.pos-order-actions[b-435rkvm0gl] {
    position: sticky;
    bottom: 0;
    flex: 0 0 auto;
    padding-top: .65rem;
    background: var(--app-page-background);
}

.pos-action-buttons[b-435rkvm0gl] {
    display: flex;
    gap: .6rem;
}

.pos-action-buttons-stacked[b-435rkvm0gl] {
    flex-direction: column-reverse;
}

.pos-primary-action[b-435rkvm0gl] {
    min-height: 2.75rem;
    font-weight: 700;
}

.pos-confirm-copy[b-435rkvm0gl] {
    margin-bottom: .5rem;
    color: var(--app-text-secondary);
    font-size: .78rem;
}

.pos-confirm-copy strong[b-435rkvm0gl] {
    display: block;
    color: var(--app-text-primary);
    font-size: .88rem;
}

@media (max-width: 1099.98px) {
    .pos-split[b-435rkvm0gl] {
        grid-template-columns: minmax(0, 1.6fr) minmax(17rem, 1fr);
    }

    .pos-product-grid[b-435rkvm0gl] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Below the phone breakpoint: stack catalog above Current Order instead of forcing the desktop
   split (Phase 1-3 mobile work stays intact — this only changes NewSale's own layout). */
@media (max-width: 767.98px) {
    .pos-split[b-435rkvm0gl] {
        display: flex;
        flex-direction: column;
    }

    .pos-catalog[b-435rkvm0gl] {
        padding-right: 0;
        border-right: none;
        border-bottom: 1px solid var(--app-border-subtle);
        padding-bottom: 1rem;
    }

    .pos-order-panel[b-435rkvm0gl] {
        position: static;
        max-height: none;
    }

    .pos-order-items[b-435rkvm0gl] {
        max-height: 22rem;
    }

    .pos-order-actions[b-435rkvm0gl] {
        position: sticky;
        bottom: 0;
        margin-inline: calc(-1 * var(--app-page-gutter, 1rem));
        padding: .65rem var(--app-page-gutter, 1rem) calc(.65rem + env(safe-area-inset-bottom));
        border-top: 1px solid var(--app-border);
    }

    .pos-ref-input[b-435rkvm0gl] { width: 9rem; }
}
/* /Components/Pages/Settings/Distributors.razor.rz.scp.css */
.distributors-page[b-k14rkcns4d] {
    background: var(--app-page-background);
    border-radius: 1rem;
    padding: 1.25rem;
    margin: -0.25rem -0.25rem 0;
}

.distributors-header[b-k14rkcns4d] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.distributors-header h1[b-k14rkcns4d] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.distributors-header p[b-k14rkcns4d] {
    color: var(--app-text-secondary);
    font-size: 0.9rem;
    margin: 0.15rem 0 0;
}

.distributors-header-actions[b-k14rkcns4d],
.distributor-actions[b-k14rkcns4d] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.distributor-summary[b-k14rkcns4d] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.summary-card[b-k14rkcns4d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 0.75rem;
    padding: 0.85rem 1rem;
}

.summary-card span[b-k14rkcns4d] {
    color: var(--app-text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
}

.summary-card strong[b-k14rkcns4d] {
    color: var(--app-text-primary);
    font-size: 1.25rem;
}

.distributors-card[b-k14rkcns4d] {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 0.75rem;
    overflow: hidden;
}

.distributors-toolbar[b-k14rkcns4d] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--app-border-subtle);
}

.distributors-state[b-k14rkcns4d] {
    padding: 3rem 1.5rem;
    text-align: center;
}

.distributor-table thead th[b-k14rkcns4d] {
    background: var(--app-table-header);
    color: var(--app-text-secondary);
    border-bottom: 1px solid var(--app-border-subtle);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 0.75rem 1rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.distributor-table tbody td[b-k14rkcns4d] {
    border-bottom: 1px solid var(--app-border-subtle);
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
}

.distributor-table tbody tr:last-child td[b-k14rkcns4d] {
    border-bottom: none;
}

.distributor-table tbody tr:hover td[b-k14rkcns4d] {
    background: var(--app-hover);
}

.distributor-name[b-k14rkcns4d] {
    color: var(--app-text-primary);
    font-weight: 600;
}

.distributor-secondary[b-k14rkcns4d] {
    color: var(--app-text-secondary);
    font-size: 0.8rem;
}

@media (max-width: 720px) {
    .distributors-page[b-k14rkcns4d] {
        padding: 1rem;
    }

    .distributors-header[b-k14rkcns4d] {
        flex-direction: column;
    }

    .distributors-header-actions[b-k14rkcns4d] {
        width: 100%;
        flex-wrap: wrap;
    }

    .distributors-header-actions .btn[b-k14rkcns4d] {
        flex: 1 1 auto;
    }

    .distributor-summary[b-k14rkcns4d] {
        grid-template-columns: 1fr;
    }
}

.distributors-page[b-k14rkcns4d] { max-width: 1320px; padding: 0; margin: 0 auto; background: transparent; }
.distributors-header[b-k14rkcns4d] { align-items: flex-end; margin-bottom: 1.75rem; }
.distributors-header h1[b-k14rkcns4d] { font-size: 2rem; font-weight: 780; letter-spacing: -.04em; }
.distributors-header p[b-k14rkcns4d] { margin-top: .4rem; font-size: .95rem; }
.distributor-summary[b-k14rkcns4d] { gap: 1rem; margin-bottom: 1.25rem; }
.summary-card[b-k14rkcns4d] { min-height: 6.5rem; padding: 1rem 1.2rem; border-color: color-mix(in srgb, var(--app-border) 84%, transparent); border-radius: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 10px 24px rgba(0,0,0,.05); }
.summary-card strong[b-k14rkcns4d] { font-size: 1.55rem; letter-spacing: -.03em; }
.distributors-card[b-k14rkcns4d] { border-color: color-mix(in srgb, var(--app-border) 84%, transparent); border-radius: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 14px 34px rgba(0,0,0,.06); }
.distributors-toolbar[b-k14rkcns4d] { padding: 1.15rem 1.25rem; background: linear-gradient(135deg, var(--app-surface), color-mix(in srgb, var(--app-accent-soft) 25%, var(--app-surface))); }
.distributor-table thead th[b-k14rkcns4d] { padding: .85rem 1rem; font-size: .68rem; font-weight: 760; letter-spacing: .075em; }
.distributor-table tbody td[b-k14rkcns4d] { padding: .9rem 1rem; }
@media (max-width: 767.98px) { .distributors-page[b-k14rkcns4d] { padding: 0; } .distributors-header[b-k14rkcns4d] { align-items: stretch; } }
/* /Components/Pages/Settings/RoleAccess.razor.rz.scp.css */
.role-access-page[b-8e4uyd4btl] {
    background: var(--app-page-background);
    border-radius: 1rem;
    padding: 1.25rem;
    margin: -0.25rem -0.25rem 0;
}

.role-access-header[b-8e4uyd4btl] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.role-access-header h1[b-8e4uyd4btl] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.role-access-header p[b-8e4uyd4btl] {
    color: var(--app-text-secondary);
    font-size: 0.9rem;
    margin: 0.15rem 0 0;
}

.role-access-header-actions[b-8e4uyd4btl] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.role-access-card[b-8e4uyd4btl] {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 0.75rem;
    padding: 1.25rem;
}

.role-access-state[b-8e4uyd4btl] {
    padding: 3rem 1.5rem;
    text-align: center;
}

.role-selector[b-8e4uyd4btl] {
    margin-bottom: 1.25rem;
}

.role-access-modules[b-8e4uyd4btl] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.role-access-module[b-8e4uyd4btl] {
    background: var(--app-page-background);
    border: 1px solid var(--app-border-subtle);
    border-radius: 0.65rem;
    padding: 0.9rem 1rem;
}

.role-access-module h2[b-8e4uyd4btl] {
    color: var(--app-text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin: 0 0 0.6rem;
    text-transform: uppercase;
}

.role-access-permission-list[b-8e4uyd4btl] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.role-access-permission-item[b-8e4uyd4btl] {
    align-items: flex-start;
    cursor: pointer;
    display: flex;
    gap: 0.6rem;
    margin: 0;
}

.role-access-permission-item input[b-8e4uyd4btl] {
    margin-top: 0.2rem;
}

.role-access-permission-text[b-8e4uyd4btl] {
    display: flex;
    flex-direction: column;
}

.role-access-permission-name[b-8e4uyd4btl] {
    color: var(--app-text-primary);
    font-size: 0.9rem;
    font-weight: 600;
}

.role-access-permission-description[b-8e4uyd4btl] {
    color: var(--app-text-secondary);
    font-size: 0.78rem;
}

.role-access-footer[b-8e4uyd4btl] {
    align-items: center;
    border-top: 1px solid var(--app-border-subtle);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
}

.role-access-footer-hint[b-8e4uyd4btl] {
    color: var(--app-text-secondary);
    font-size: 0.85rem;
}

@media (max-width: 900px) {
    .role-access-modules[b-8e4uyd4btl] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .role-access-page[b-8e4uyd4btl] {
        padding: 1rem;
    }

    .role-access-header[b-8e4uyd4btl] {
        flex-direction: column;
    }

    .role-access-header-actions[b-8e4uyd4btl] {
        width: 100%;
        flex-wrap: wrap;
    }

    .role-access-header-actions .btn[b-8e4uyd4btl] {
        flex: 1 1 auto;
    }

    .role-access-footer[b-8e4uyd4btl] {
        flex-direction: column;
        align-items: stretch;
    }

    .role-access-footer .btn[b-8e4uyd4btl] {
        width: 100%;
    }
}

/* Role Access now reads as an administration workspace while preserving every permission rule. */
.role-access-page[b-8e4uyd4btl] { max-width: 1320px; padding: 0; margin: 0 auto; background: transparent; }
.role-access-header[b-8e4uyd4btl] { align-items: flex-end; margin-bottom: 1.75rem; }
.role-access-header h1[b-8e4uyd4btl] { font-size: 2rem; font-weight: 780; letter-spacing: -.04em; }
.role-access-header p[b-8e4uyd4btl] { margin-top: .4rem; font-size: .95rem; }
.role-access-card[b-8e4uyd4btl] { padding: 1.5rem; border-color: color-mix(in srgb, var(--app-border) 84%, transparent); border-radius: 1.1rem; box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 14px 34px rgba(0,0,0,.06); }
.role-selector[b-8e4uyd4btl] { display: flex; align-items: end; gap: 1rem; margin: -.1rem -.1rem 1.5rem; padding: 1rem; border: 1px solid var(--app-border-subtle); border-radius: .9rem; background: linear-gradient(135deg, var(--app-table-header), color-mix(in srgb, var(--app-accent-soft) 28%, var(--app-surface))); }
.role-selector .form-label[b-8e4uyd4btl] { margin-bottom: .75rem; }
.role-access-modules[b-8e4uyd4btl] { gap: 1.15rem; }
.role-access-module[b-8e4uyd4btl] { padding: 1.1rem; border-color: var(--app-border); border-radius: .9rem; background: color-mix(in srgb, var(--app-page-background) 72%, var(--app-surface)); }
.role-access-module h2[b-8e4uyd4btl] { margin-bottom: .8rem; color: var(--app-accent); letter-spacing: .075em; }
.role-access-permission-list[b-8e4uyd4btl] { gap: .35rem; }
.role-access-permission-item[b-8e4uyd4btl] { padding: .7rem .75rem; border: 1px solid transparent; border-radius: .72rem; transition: background-color .14s ease, border-color .14s ease; }
.role-access-permission-item:hover[b-8e4uyd4btl] { border-color: var(--app-border-subtle); background: var(--app-surface); }
.role-access-footer[b-8e4uyd4btl] { position: sticky; bottom: .75rem; z-index: 2; margin: 1.5rem -.25rem -.25rem; padding: 1rem 1.25rem; border: 1px solid var(--app-border); border-radius: .9rem; background: color-mix(in srgb, var(--app-surface) 94%, transparent); box-shadow: 0 10px 30px rgba(0,0,0,.1); backdrop-filter: blur(12px); }
@media (max-width: 767.98px) { .role-access-page[b-8e4uyd4btl] { padding: 0; } .role-access-card[b-8e4uyd4btl] { padding: 1rem; } .role-selector[b-8e4uyd4btl] { align-items: stretch; flex-direction: column; } .role-selector select[b-8e4uyd4btl] { max-width: none !important; } }
/* /Components/Pages/Settings/SystemSettings.razor.rz.scp.css */
/* Mirrors Product List / Catalog's visual language (neutral backdrop + white card). */
.settings-page[b-em87y136vl] {
    background: var(--app-page-background);
    border-radius: 1rem;
    padding: 1.25rem;
    margin: -0.25rem -0.25rem 0;
}

.settings-page-header[b-em87y136vl] {
    margin-bottom: 1rem;
}

.settings-page-title[b-em87y136vl] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.settings-page-subtitle[b-em87y136vl] {
    color: var(--app-text-secondary);
    font-size: 0.9rem;
    margin: 0.15rem 0 0;
}

.settings-card[b-em87y136vl] {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    max-width: 480px;
}

.settings-card-header[b-em87y136vl] {
    margin-bottom: 1.25rem;
}

.settings-card-title[b-em87y136vl] {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

.settings-card-description[b-em87y136vl] {
    color: var(--app-text-secondary);
    font-size: 0.85rem;
    margin: 0.35rem 0 0;
}

.settings-state-block[b-em87y136vl] {
    padding: 2rem 0;
    text-align: center;
}

/* Accent picker — a compact swatch-per-option grid rather than a plain <select>, per the visual
   accent-picker guidance. Selection applies immediately (no Save button), matching mobile's own
   Color Theme onTap-immediate behavior exactly. */
.accent-options[b-em87y136vl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.accent-option[b-em87y136vl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--app-border);
    border-radius: 0.6rem;
    background: var(--app-input-background);
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--app-text-primary);
}

    .accent-option:hover[b-em87y136vl] {
        border-color: var(--app-text-secondary);
        background: var(--app-hover);
    }

.accent-option-selected[b-em87y136vl] {
    border-color: var(--app-accent);
    background: var(--app-accent-soft);
    color: var(--app-accent-dark);
}

    .accent-option-selected:hover[b-em87y136vl] {
        border-color: var(--app-accent);
        background: var(--app-accent-soft);
    }

.accent-swatch[b-em87y136vl] {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    /* Dark Mode Audit task: was a fixed black-based rgba border — nearly invisible against a dark
       page/card, leaving each swatch's edge poorly defined. --app-border adapts with the theme
       like every other subtle divider/outline in the app. */
    border: 1px solid var(--app-border);
    flex-shrink: 0;
}

.accent-option-check[b-em87y136vl] {
    color: var(--app-accent-dark);
    font-size: 0.8rem;
}

/* A compact, honest live preview: these are the same global classes/variables the rest of the
   app already uses, so this reflects the Accent that is actually applied right now (selecting an
   option above updates it immediately, before this renders again). */
.accent-preview[b-em87y136vl] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--app-border-subtle);
}

.accent-preview-nav[b-em87y136vl] {
    background: var(--app-accent-soft);
    color: var(--app-accent-dark);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
}

.accent-preview-link[b-em87y136vl] {
    color: var(--app-accent);
    font-size: 0.85rem;
    font-weight: 500;
}

/* Font picker — a plain dropdown, mirroring mobile's own DropdownButtonFormField exactly (a
   single compact dropdown, not a swatch grid like Accent's). Each option previews itself in its
   own typeface where the browser supports styling <option> elements. Selection applies
   immediately (no Save button), matching mobile's onChanged-immediate behavior. */
.font-select[b-em87y136vl] {
    max-width: 320px;
}

.font-preview[b-em87y136vl] {
    color: var(--app-text-primary);
    font-size: 0.95rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--app-border-subtle);
}

.theme-mode-options[b-em87y136vl] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

.theme-mode-option[b-em87y136vl] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-height: 5.25rem;
    padding: 0.75rem;
    text-align: left;
    color: var(--app-text-primary);
    background: var(--app-input-background);
    border: 1px solid var(--app-border);
    border-radius: 0.6rem;
}

.theme-mode-option:hover[b-em87y136vl] { background: var(--app-hover); }

.theme-mode-option-selected[b-em87y136vl] {
    border-color: var(--app-accent);
    background: var(--app-accent-soft);
}

.theme-mode-option-name[b-em87y136vl] { font-size: 0.85rem; font-weight: 700; }
.theme-mode-option-description[b-em87y136vl] { color: var(--app-text-secondary); font-size: 0.75rem; line-height: 1.25; }
.theme-mode-option-check[b-em87y136vl] { position: absolute; top: 0.5rem; right: 0.6rem; color: var(--app-accent); }

@media (max-width: 640.98px) {
    .settings-page[b-em87y136vl] { padding: 0.85rem; margin: 0; }
    .settings-card[b-em87y136vl] { padding: 1rem; max-width: none; }
    .theme-mode-options[b-em87y136vl] { grid-template-columns: 1fr; }
    .theme-mode-option[b-em87y136vl] { min-height: auto; }
}

/* Deliberate settings-screen treatment: wider sections, stronger grouping, tablet-safe choices. */
.settings-page[b-em87y136vl] { max-width: 1080px; padding: 0; margin: 0 auto; background: transparent; }
.settings-page-header[b-em87y136vl] { margin-bottom: 1.75rem; }
.settings-page-title[b-em87y136vl] { font-size: 2rem; font-weight: 780; letter-spacing: -.04em; }
.settings-page-subtitle[b-em87y136vl] { margin-top: .4rem; font-size: .95rem; }
.settings-card[b-em87y136vl] { max-width: none; margin-bottom: 1rem !important; padding: 1.6rem; border-color: color-mix(in srgb, var(--app-border) 84%, transparent); border-radius: 1.1rem; box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 12px 30px rgba(0,0,0,.055); }
.settings-card-header[b-em87y136vl] { margin-bottom: 1.35rem; }
.settings-card-title[b-em87y136vl] { font-size: 1.1rem; letter-spacing: -.012em; }
.settings-card-description[b-em87y136vl] { max-width: 44rem; line-height: 1.5; }
.theme-mode-options[b-em87y136vl] { gap: .85rem; }
.theme-mode-option[b-em87y136vl] { min-height: 6rem; padding: 1rem; border-radius: .85rem; transition: transform .14s ease, border-color .14s ease, background-color .14s ease, box-shadow .14s ease; }
.theme-mode-option:hover[b-em87y136vl] { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.055); }
.theme-mode-option-selected[b-em87y136vl] { border-color: var(--app-accent); box-shadow: inset 0 0 0 1px var(--app-accent); }
.accent-options[b-em87y136vl] { gap: .75rem; }
.accent-option[b-em87y136vl] { min-height: 2.8rem; padding: .6rem .85rem; border-radius: .75rem; }
.accent-option-selected[b-em87y136vl] { box-shadow: inset 0 0 0 1px var(--app-accent); }
.accent-preview[b-em87y136vl], .font-preview[b-em87y136vl] { margin-top: 1.25rem !important; padding: 1rem; border: 1px solid var(--app-border-subtle); border-radius: .8rem; background: var(--app-page-background); }
@media (max-width: 767.98px) { .settings-page[b-em87y136vl] { padding: 0; } .settings-card[b-em87y136vl] { padding: 1.15rem; } .theme-mode-options[b-em87y136vl] { grid-template-columns: 1fr; } }
/* /Components/Pages/Settings/Users.razor.rz.scp.css */
.users-page[b-wnj9vzi5z6] {
    background: var(--app-page-background);
    border-radius: 1rem;
    padding: 1.25rem;
    margin: -0.25rem -0.25rem 0;
}

.users-header[b-wnj9vzi5z6] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.users-header h1[b-wnj9vzi5z6] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.users-header p[b-wnj9vzi5z6],
.user-secondary[b-wnj9vzi5z6] {
    color: var(--app-text-secondary);
}

.users-header p[b-wnj9vzi5z6] {
    font-size: 0.9rem;
    margin: 0.15rem 0 0;
}

.users-header-actions[b-wnj9vzi5z6],
.user-actions[b-wnj9vzi5z6] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.user-summary[b-wnj9vzi5z6] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.summary-card[b-wnj9vzi5z6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 0.75rem;
    padding: 0.85rem 1rem;
}

.summary-card span[b-wnj9vzi5z6] {
    color: var(--app-text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
}

.summary-card strong[b-wnj9vzi5z6] {
    color: var(--app-text-primary);
    font-size: 1.25rem;
}

.users-card[b-wnj9vzi5z6] {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 0.75rem;
    overflow: hidden;
}

.users-state[b-wnj9vzi5z6] {
    padding: 3rem 1.5rem;
    text-align: center;
}

.user-table thead th[b-wnj9vzi5z6] {
    background: var(--app-table-header);
    color: var(--app-text-secondary);
    border-bottom: 1px solid var(--app-border-subtle);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 0.75rem 1rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.user-table tbody td[b-wnj9vzi5z6] {
    border-bottom: 1px solid var(--app-border-subtle);
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
}

.user-table tbody tr:last-child td[b-wnj9vzi5z6] {
    border-bottom: none;
}

.user-table tbody tr:hover td[b-wnj9vzi5z6] {
    background: var(--app-hover);
}

.user-name[b-wnj9vzi5z6] {
    color: var(--app-text-primary);
    font-weight: 600;
}

.role-pill[b-wnj9vzi5z6] {
    background: var(--app-selected-background);
    color: var(--app-selected-indicator);
}

.password-required-pill[b-wnj9vzi5z6] {
    background: var(--app-warning-background);
    color: var(--app-warning-text);
}

@media (max-width: 720px) {
    .users-page[b-wnj9vzi5z6] {
        padding: 1rem;
    }

    .users-header[b-wnj9vzi5z6] {
        flex-direction: column;
    }

    .users-header-actions[b-wnj9vzi5z6] {
        width: 100%;
        flex-wrap: wrap;
    }

    .users-header-actions .btn[b-wnj9vzi5z6] {
        flex: 1 1 auto;
    }

    .user-summary[b-wnj9vzi5z6] {
        grid-template-columns: 1fr;
    }
}

.users-page[b-wnj9vzi5z6] { max-width: 1320px; padding: 0; margin: 0 auto; background: transparent; }
.users-header[b-wnj9vzi5z6] { align-items: flex-end; margin-bottom: 1.75rem; }
.users-header h1[b-wnj9vzi5z6] { font-size: 2rem; font-weight: 780; letter-spacing: -.04em; }
.users-header p[b-wnj9vzi5z6] { margin-top: .4rem; font-size: .95rem; }
.user-summary[b-wnj9vzi5z6] { gap: 1rem; margin-bottom: 1.25rem; }
.summary-card[b-wnj9vzi5z6] { min-height: 6.5rem; padding: 1rem 1.2rem; border-color: color-mix(in srgb, var(--app-border) 84%, transparent); border-radius: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 10px 24px rgba(0,0,0,.05); }
.summary-card strong[b-wnj9vzi5z6] { font-size: 1.55rem; letter-spacing: -.03em; }
.users-card[b-wnj9vzi5z6] { border-color: color-mix(in srgb, var(--app-border) 84%, transparent); border-radius: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 14px 34px rgba(0,0,0,.06); }
.user-table thead th[b-wnj9vzi5z6] { padding: .85rem 1rem; font-size: .68rem; font-weight: 760; letter-spacing: .075em; }
.user-table tbody td[b-wnj9vzi5z6] { padding: .9rem 1rem; }
@media (max-width: 767.98px) { .users-page[b-wnj9vzi5z6] { padding: 0; } .users-header[b-wnj9vzi5z6] { align-items: stretch; } .users-header-actions .btn[b-wnj9vzi5z6] { flex: 1 1 auto; } }
/* /Components/Pages/StockMovements/StockMovementList.razor.rz.scp.css */
/* Tailwind migration (Phase 7): every rule this file used to have was a page background/header/
   card/table-chrome rule with no row-selection or other specialized behavior — all re-expressed
   as Tailwind utility classes directly in StockMovementList.razor. Nothing needs to stay here. */
/* /Components/Products/FacebookPublishingPanel.razor.rz.scp.css */
.facebook-panel[b-ebd4l8w1gs] {
    margin-bottom: 1.25rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--app-accent) 40%, var(--app-border));
    border-radius: 0.75rem;
    background: var(--app-surface);
}

.facebook-panel-header[b-ebd4l8w1gs],
.facebook-panel-summary[b-ebd4l8w1gs] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.facebook-panel-header[b-ebd4l8w1gs] {
    justify-content: space-between;
    margin-bottom: 1rem;
}

.facebook-panel-title[b-ebd4l8w1gs] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.facebook-panel-subtitle[b-ebd4l8w1gs] {
    margin: 0.25rem 0 0;
    color: var(--app-text-muted);
    font-size: 0.82rem;
}

.facebook-product-image[b-ebd4l8w1gs] {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: 0.6rem;
    background: var(--app-surface-muted);
    color: var(--app-text-muted);
    font-size: 0.72rem;
    text-align: center;
}

.facebook-product-image img[b-ebd4l8w1gs] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.facebook-panel-state[b-ebd4l8w1gs] {
    min-width: 0;
    flex: 1 1 auto;
}

.facebook-panel-action[b-ebd4l8w1gs] {
    flex: 0 0 auto;
}

.facebook-publish-button[b-ebd4l8w1gs] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid var(--app-accent);
    color: var(--app-accent);
    background: transparent;
}

.facebook-publish-button:hover:not(:disabled)[b-ebd4l8w1gs],
.facebook-publish-button:focus-visible:not(:disabled)[b-ebd4l8w1gs] {
    color: var(--app-accent-contrast);
    background: var(--app-accent);
}

.facebook-status-published[b-ebd4l8w1gs] {
    color: var(--app-accent-contrast);
    background: var(--app-accent);
}

.facebook-status-failed[b-ebd4l8w1gs] {
    color: var(--app-accent-contrast);
    background: #b42318;
}

.facebook-status-processing[b-ebd4l8w1gs] {
    /* Dark Mode Audit task: was a fixed light-gray chip (#e5e7eb bg / #1f2937 text) regardless of
       theme — a "light-mode leak" bright rectangle against a dark page. The neutral disabled
       tokens already exist for exactly this "in-progress/undetermined" meaning and adapt with
       the theme, matching .status-pill-inactive's own treatment elsewhere in the app. */
    color: var(--app-disabled-text);
    background: var(--app-disabled-background);
}

@media (max-width: 760px) {
    .facebook-panel-summary[b-ebd4l8w1gs] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .facebook-panel-action[b-ebd4l8w1gs] {
        width: 100%;
    }

    .facebook-publish-button[b-ebd4l8w1gs] {
        width: 100%;
        justify-content: center;
    }
}

/* Compact publishing card for the product workspace. */
.facebook-panel[b-ebd4l8w1gs] {
    margin-bottom: 1rem;
    padding: .9rem 1rem;
    border-color: color-mix(in srgb, var(--app-accent) 18%, var(--app-border));
    border-radius: 1rem;
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--app-accent-soft) 26%, var(--app-surface)), var(--app-surface) 42%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .035), 0 8px 24px rgba(15, 23, 42, .035);
}

.facebook-panel-header[b-ebd4l8w1gs] {
    align-items: center;
    margin-bottom: .7rem;
}

.facebook-panel-heading[b-ebd4l8w1gs] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .7rem;
}

.facebook-panel-icon[b-ebd4l8w1gs] {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: .62rem;
    color: var(--app-accent-contrast);
    background: var(--app-accent);
    font-family: Arial, sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
}

.facebook-panel-title[b-ebd4l8w1gs] {
    color: var(--app-text-primary);
    font-size: .88rem;
    letter-spacing: -.01em;
}

.facebook-panel-subtitle[b-ebd4l8w1gs] {
    margin-top: .1rem;
    font-size: .68rem;
}

.facebook-status-badge[b-ebd4l8w1gs] {
    display: inline-flex;
    min-height: 1.55rem;
    flex: 0 0 auto;
    align-items: center;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    padding: .25rem .55rem;
    font-size: .61rem;
    font-weight: 740;
}

.facebook-panel-summary[b-ebd4l8w1gs] {
    gap: .75rem;
    padding-top: .7rem;
    border-top: 1px solid var(--app-border-subtle);
}

.facebook-product-image[b-ebd4l8w1gs] {
    width: 3.35rem;
    height: 3.35rem;
    border-radius: .68rem;
    font-size: .58rem;
}

.facebook-panel-label[b-ebd4l8w1gs] {
    color: var(--app-text-secondary);
    font-size: .61rem;
    font-weight: 650;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.facebook-product-name[b-ebd4l8w1gs] {
    overflow: hidden;
    color: var(--app-text-primary);
    font-size: .78rem;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.facebook-panel-time[b-ebd4l8w1gs],
.facebook-panel-note[b-ebd4l8w1gs] {
    margin-top: .12rem;
    color: var(--app-text-secondary);
    font-size: .62rem;
}

.facebook-panel-note[b-ebd4l8w1gs] {
    margin-top: .3rem;
}

.facebook-publish-button[b-ebd4l8w1gs] {
    min-height: 2.35rem;
    border-color: var(--app-accent);
    border-radius: .68rem;
    color: var(--app-accent-contrast);
    background: var(--app-accent);
    font-size: .7rem;
    font-weight: 700;
    box-shadow: 0 5px 14px color-mix(in srgb, var(--app-accent) 20%, transparent);
}

.facebook-publish-button:hover:not(:disabled)[b-ebd4l8w1gs],
.facebook-publish-button:focus-visible:not(:disabled)[b-ebd4l8w1gs] {
    border-color: var(--app-accent-hover);
    color: var(--app-accent-contrast);
    background: var(--app-accent-hover);
}

.facebook-status-published[b-ebd4l8w1gs] {
    border-color: color-mix(in srgb, var(--app-success-text) 22%, transparent);
    color: var(--app-success-text);
    background: var(--app-success-background);
}

.facebook-status-failed[b-ebd4l8w1gs] {
    border-color: color-mix(in srgb, var(--app-error-text) 22%, transparent);
    color: var(--app-error-text);
    background: var(--app-error-background);
}

.facebook-status-processing[b-ebd4l8w1gs] {
    border-color: var(--app-border);
    color: var(--app-disabled-text);
    background: var(--app-disabled-background);
}

@media (max-width: 767.98px) {
    .facebook-panel[b-ebd4l8w1gs] {
        padding: .85rem;
    }

    .facebook-panel-summary[b-ebd4l8w1gs] {
        display: grid;
        grid-template-columns: 3.35rem minmax(0, 1fr);
    }

    .facebook-panel-action[b-ebd4l8w1gs] {
        grid-column: 1 / -1;
    }

    .facebook-panel-note[b-ebd4l8w1gs] {
        display: none;
    }
}
/* /Components/Products/ProductDetailsModal.razor.rz.scp.css */
/* Outer chrome (backdrop/dialog surface/header/close button) now comes from the shared
   .app-modal-* system (Application-wide Modal Consistency Redesign task) — see wwwroot/app.css.
   Only this component's own wider width and its header-copy/actions layout stay here. */
.product-details-dialog[b-7xg4pq8s5l] {
    width: min(1180px, 96vw);
}

.product-details-header-copy[b-7xg4pq8s5l] {
    min-width: 0;
}

.product-details-header-actions[b-7xg4pq8s5l] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: .65rem;
}

.product-details-body[b-7xg4pq8s5l] {
    min-height: 0;
    padding: 1.4rem;
    overflow-y: auto;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--app-accent-soft) 42%, transparent), transparent 28rem),
        color-mix(in srgb, var(--app-table-header) 54%, var(--app-modal-surface));
}

.product-details-body > .loading-indicator[b-7xg4pq8s5l],
.product-details-body > .alert[b-7xg4pq8s5l] {
    width: 100%;
}

.product-details-workspace[b-7xg4pq8s5l] {
    display: grid;
    grid-template-columns: minmax(18rem, 21rem) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.product-details-media-column[b-7xg4pq8s5l] {
    position: sticky;
    top: 0;
}

.product-details-content[b-7xg4pq8s5l] {
    display: grid;
    min-width: 0;
    gap: 1rem;
}

.product-details-section[b-7xg4pq8s5l] {
    padding: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--app-border) 84%, transparent);
    border-radius: 1rem;
    background: var(--app-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .035), 0 8px 24px rgba(15, 23, 42, .035);
}

.product-details-media-card[b-7xg4pq8s5l],
.product-details-pricing-card[b-7xg4pq8s5l] {
    background:
        linear-gradient(155deg, color-mix(in srgb, var(--app-accent-soft) 30%, var(--app-surface)), var(--app-surface) 13rem);
}

.product-details-section-heading[b-7xg4pq8s5l] {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    margin-bottom: 1.15rem;
}

.product-details-section-heading > div[b-7xg4pq8s5l] {
    min-width: 0;
}

.product-details-section-heading h3[b-7xg4pq8s5l] {
    margin: 0;
    color: var(--app-text-primary);
    font-size: .98rem;
    font-weight: 760;
    letter-spacing: -.015em;
}

.product-details-section-heading p[b-7xg4pq8s5l] {
    margin: .22rem 0 0;
    color: var(--app-text-secondary);
    font-size: .76rem;
    line-height: 1.45;
}

.product-details-section-index[b-7xg4pq8s5l] {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--app-accent) 22%, transparent);
    border-radius: .62rem;
    color: var(--app-accent);
    background: var(--app-accent-soft);
    font-size: .65rem;
    font-weight: 800;
}

.product-details-preview[b-7xg4pq8s5l] {
    display: grid;
    height: 18rem;
    place-items: center;
    overflow: hidden;
    padding: .75rem;
    border: 1px solid color-mix(in srgb, var(--app-border) 80%, transparent);
    border-radius: .9rem;
    color: var(--app-text-secondary);
    background: linear-gradient(145deg, color-mix(in srgb, var(--app-hover) 74%, var(--app-surface)), var(--app-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-border-subtle) 45%, transparent);
}

.product-details-preview img[b-7xg4pq8s5l] {
    max-width: 100%;
    max-height: 100%;
    border-radius: .55rem;
    object-fit: contain;
}

.product-details-image-empty[b-7xg4pq8s5l] {
    display: grid;
    justify-items: center;
    gap: .25rem;
    text-align: center;
}

.product-details-image-empty > span[b-7xg4pq8s5l] {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border-radius: 999px;
    color: var(--app-accent);
    background: var(--app-accent-soft);
    font-size: 1rem;
    font-weight: 800;
}

.product-details-image-empty strong[b-7xg4pq8s5l] {
    color: var(--app-text-primary);
    font-size: .8rem;
}

.product-details-image-empty small[b-7xg4pq8s5l] {
    font-size: .7rem;
}

.product-details-gallery-label[b-7xg4pq8s5l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1rem;
    color: var(--app-text-primary);
    font-size: .68rem;
    font-weight: 740;
    letter-spacing: .065em;
    text-transform: uppercase;
}

.product-details-gallery-label span:last-child[b-7xg4pq8s5l] {
    color: var(--app-text-secondary);
    font-size: .6rem;
    font-weight: 680;
    letter-spacing: .02em;
    text-transform: none;
}

.product-details-thumbnails[b-7xg4pq8s5l] {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: .65rem;
}

.product-details-thumbnail[b-7xg4pq8s5l] {
    position: relative;
    display: grid;
    width: 3.7rem;
    height: 3.7rem;
    padding: 0;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--app-border);
    border-radius: .75rem;
    background: var(--app-input-background);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.product-details-thumbnail:hover[b-7xg4pq8s5l] {
    transform: translateY(-1px);
}

.product-details-thumbnail.selected[b-7xg4pq8s5l] {
    border: 2px solid var(--app-accent);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--app-accent) 14%, transparent);
}

.product-details-thumbnail img[b-7xg4pq8s5l] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-details-thumbnail span[b-7xg4pq8s5l] {
    position: absolute;
    inset: auto 2px 2px;
    padding: .1rem .2rem;
    border-radius: .25rem;
    color: var(--app-accent-contrast);
    background: var(--app-accent);
    font-size: .5rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.product-details-name[b-7xg4pq8s5l] {
    margin-bottom: 1rem;
    color: var(--app-text-primary);
    font-size: 1.35rem;
    font-weight: 760;
    letter-spacing: -.025em;
}

.product-details-description[b-7xg4pq8s5l] {
    padding-top: .9rem;
    border-top: 1px solid var(--app-border-subtle);
}

.product-details-description h4[b-7xg4pq8s5l] {
    margin: 0 0 .4rem;
    color: var(--app-text-primary);
    font-size: .7rem;
    font-weight: 760;
    letter-spacing: .065em;
    text-transform: uppercase;
}

.product-details-description p[b-7xg4pq8s5l] {
    margin: 0;
    color: var(--app-text-secondary);
    font-size: .84rem;
    line-height: 1.55;
    white-space: pre-wrap;
}

.product-details-readonly-grid[b-7xg4pq8s5l] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin: 0;
}

.product-details-readonly-grid > div[b-7xg4pq8s5l] {
    min-width: 0;
    padding: .85rem;
    border: 1px solid var(--app-border-subtle);
    border-radius: .78rem;
    background: color-mix(in srgb, var(--app-table-header) 72%, var(--app-surface));
}

.product-details-readonly-grid dt[b-7xg4pq8s5l],
.product-details-price-list dt[b-7xg4pq8s5l],
.product-details-feature-value span[b-7xg4pq8s5l] {
    color: var(--app-text-secondary);
    font-size: .66rem;
    font-weight: 720;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.product-details-readonly-grid dd[b-7xg4pq8s5l],
.product-details-price-list dd[b-7xg4pq8s5l] {
    margin: .32rem 0 0;
    color: var(--app-text-primary);
    font-size: .88rem;
    font-weight: 680;
    overflow-wrap: anywhere;
}

.product-details-split[b-7xg4pq8s5l] {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 1rem;
}

.product-details-feature-value[b-7xg4pq8s5l] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.product-details-feature-value strong[b-7xg4pq8s5l] {
    color: var(--app-text-primary);
    font-size: 2rem;
    font-weight: 790;
    letter-spacing: -.04em;
    line-height: 1;
}

.product-details-price-list[b-7xg4pq8s5l] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: 0;
}

.product-details-price-list > div[b-7xg4pq8s5l] {
    padding: .8rem;
    border: 1px solid color-mix(in srgb, var(--app-accent) 16%, var(--app-border));
    border-radius: .78rem;
    background: color-mix(in srgb, var(--app-accent-soft) 40%, var(--app-surface));
}

.product-details-price-list dd[b-7xg4pq8s5l] {
    color: var(--app-accent);
    font-size: 1.05rem;
    font-weight: 760;
}

@media (max-width: 1023.98px) {
    .product-details-workspace[b-7xg4pq8s5l] {
        grid-template-columns: 1fr;
    }

    .product-details-media-column[b-7xg4pq8s5l] {
        position: static;
    }

    .product-details-media-card[b-7xg4pq8s5l] {
        display: grid;
        grid-template-columns: minmax(15rem, .8fr) minmax(0, 1.2fr);
        gap: 0 1.15rem;
    }

    .product-details-media-card > .product-details-section-heading[b-7xg4pq8s5l] {
        grid-column: 1 / -1;
    }

    .product-details-media-card > .product-details-preview[b-7xg4pq8s5l] {
        grid-row: 2 / span 3;
    }
}

@media (max-width: 767.98px) {
    /* Backdrop/dialog width-height/header sizing/subtitle-hiding all now come from the shared
       .app-modal-* mobile rules (Application-wide Modal Consistency Redesign task). Only this
       component's own body/workspace layout stays here. */
    .product-details-workspace[b-7xg4pq8s5l],
    .product-details-content[b-7xg4pq8s5l] {
        gap: .8rem;
    }

    .product-details-section[b-7xg4pq8s5l] {
        padding: 1rem;
        border-radius: .88rem;
    }

    .product-details-media-card[b-7xg4pq8s5l] {
        display: block;
    }

    .product-details-preview[b-7xg4pq8s5l] {
        height: 13rem;
    }

    .product-details-readonly-grid[b-7xg4pq8s5l],
    .product-details-split[b-7xg4pq8s5l],
    .product-details-price-list[b-7xg4pq8s5l] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Products/ProductEditorModal.razor.rz.scp.css */
/* Backdrop/dialog surface/header/eyebrow/title/subtitle/status badge/close button — every one of
   these visual rules was extracted verbatim into the shared .app-modal-* system in
   wwwroot/app.css (Application-wide Modal Consistency Redesign task: Product Edit is that
   system's own benchmark, so this component now simply consumes it via .app-modal-workspace
   instead of redeclaring the same values a second time). Only the two rules genuinely specific to
   this component's own body content remain here. */

.product-modal-state[b-85pcydr67e] {
    display: grid;
    min-height: 18rem;
    place-content: center;
    padding: 2rem;
}

/* .app-modal-body has zero padding for the workspace variant (ProductForm supplies its own), so
   any loose content dropped directly into the body — the discard-confirm alert, the loading/error
   state — needs its own margin. */
.app-modal-body > .alert[b-85pcydr67e],
.app-modal-body > .d-flex[b-85pcydr67e],
.app-modal-body > :not(.product-editor-form)[b-85pcydr67e] {
    margin: 1rem 1.4rem;
}
/* /Components/Products/ProductForm.razor.rz.scp.css */
.form-label[b-p5prkj918h] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--app-text-primary);
    margin-bottom: 0.3rem;
}

/* Image panel: fixed height, contain (never crop), light neutral background — a tall bottle or
   short jar both sit centered without distortion. */
.product-image-preview[b-p5prkj918h] {
    width: 100%;
    height: 240px;
    overflow: hidden;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
}

    .product-image-preview img[b-p5prkj918h] {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
    }

/* Subtle grouped container for the three pricing fields, matching the reference. */
.product-pricing-group[b-p5prkj918h] {
    background: var(--app-table-header);
    border: 1px solid var(--app-border-subtle);
    border-radius: 0.5rem;
    padding: 0.85rem 1rem 0.25rem;
}

.product-section-label[b-p5prkj918h] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--app-text-secondary);
    margin-bottom: 0.4rem;
}

/* Computed CAD/PHP preview fields (Tax Amount, Cost After Tax, Landed Cost, ...) — visually
   distinct from real inputs since the user can never type into them. These are raw <input>
   elements authored directly in this file (not InputText components), so they get this
   component's CSS-isolation scope attribute normally — no ::deep needed here. */
.product-pricing-group input[readonly][b-p5prkj918h] {
    background: var(--app-disabled-background);
    color: var(--app-disabled-text);
    cursor: default;
}

.product-price-reset[b-p5prkj918h] {
    border: none;
    background: none;
    padding: 0;
    margin-left: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--app-accent);
}

    .product-price-reset:hover[b-p5prkj918h] {
        text-decoration: underline;
    }

/* ::deep is required here: InputTextArea is a child component (Microsoft.AspNetCore.Components.
   Forms), so the <textarea> it renders never receives ProductForm's own CSS-isolation scope
   attribute — a plain scoped selector silently never matches it. ::deep also gives this rule
   enough specificity to beat Bootstrap's own textarea.form-control sizing. */
[b-p5prkj918h] textarea.product-description-input {
    min-height: 110px;
    resize: vertical;
}

/* Keeps Save/Cancel reachable at the bottom of the viewport when this form is hosted inside a
   scrollable modal body, without needing to split the buttons out of this component. Inert (no
   visual effect) on the standalone Add/Edit Product pages, which don't scroll internally. */
.product-form-actions[b-p5prkj918h] {
    position: sticky;
    bottom: 0;
    background: var(--app-modal-surface);
    border-top: 1px solid var(--app-border-subtle);
    padding-top: 0.85rem;
    padding-bottom: 0.25rem;
}

/* Additional/gallery images — Edit mode only. Mirrors product_form_page.dart's compact
   [PRIMARY][extra][extra][+ Add] thumbnail row, adapted to a wrapping grid for desktop instead
   of a horizontal mobile scroller. */
.product-gallery-notice[b-p5prkj918h] {
    font-size: 0.8rem;
    color: var(--app-text-secondary);
    background: var(--app-table-header);
    border: 1px solid var(--app-border-subtle);
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
}

.product-gallery-label[b-p5prkj918h] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--app-text-secondary);
    margin-bottom: 0.4rem;
}

.product-gallery-preview[b-p5prkj918h] {
    width: 100%;
    height: 160px;
    overflow: hidden;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

    .product-gallery-preview img[b-p5prkj918h] {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.product-gallery-thumbnails[b-p5prkj918h] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.product-gallery-thumb[b-p5prkj918h] {
    position: relative;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 1px solid var(--app-border);
    border-radius: 0.5rem;
    background: var(--app-table-header);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .product-gallery-thumb img[b-p5prkj918h] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .product-gallery-thumb:disabled[b-p5prkj918h] {
        opacity: 0.5;
    }

.product-gallery-thumb-selected[b-p5prkj918h] {
    border-color: var(--app-accent);
    border-width: 2px;
}

.product-gallery-thumb-placeholder[b-p5prkj918h] {
    font-size: 1.1rem;
    color: var(--app-text-secondary);
}

.product-gallery-badge[b-p5prkj918h] {
    position: absolute;
    left: 2px;
    bottom: 2px;
    background: var(--app-accent);
    color: var(--app-accent-contrast);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 1px 4px;
    border-radius: 3px;
}

.product-gallery-thumb-wrapper[b-p5prkj918h] {
    position: relative;
}

.product-gallery-remove-btn[b-p5prkj918h] {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    line-height: 16px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--app-error-text);
    color: var(--app-accent-contrast);
    font-size: 0.75rem;
}

    .product-gallery-remove-btn:disabled[b-p5prkj918h] {
        opacity: 0.6;
    }

.product-gallery-add-btn[b-p5prkj918h] {
    position: relative;
    width: 56px;
    height: 56px;
    border: 1px dashed var(--app-accent);
    border-radius: 0.5rem;
    background: var(--app-accent-soft);
    color: var(--app-accent);
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-gallery-add-btn-disabled[b-p5prkj918h] {
    opacity: 0.5;
}

/* ::deep required: InputFile is a child component whose rendered <input> never receives this
   component's own CSS-isolation scope attribute (same reason as textarea.product-description-input
   above). Stretched over the whole tile and made invisible so the visible "+" glyph underneath
   acts as its label — a plain-CSS equivalent of triggering a hidden file input by click, without
   JS interop. */
[b-p5prkj918h] .product-gallery-add-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Product workspace redesign. The layout stays shared by modal and standalone Add/Edit hosts. */
.product-editor-form[b-p5prkj918h] {
    margin: 0;
}

.product-editor-workspace[b-p5prkj918h] {
    display: grid;
    grid-template-columns: minmax(17.5rem, 20.5rem) minmax(0, 1fr);
    gap: 1.35rem;
    align-items: start;
    padding: 1.4rem;
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--app-accent-soft) 42%, transparent), transparent 28rem),
        color-mix(in srgb, var(--app-table-header) 54%, var(--app-modal-surface));
}

.product-media-column[b-p5prkj918h] {
    position: sticky;
    top: 1.4rem;
}

.product-details-column[b-p5prkj918h],
.product-details-stack[b-p5prkj918h] {
    min-width: 0;
}

.product-details-stack[b-p5prkj918h] {
    display: grid;
    gap: 1rem;
}

.product-editor-section[b-p5prkj918h] {
    padding: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--app-border) 84%, transparent);
    border-radius: 1rem;
    background: var(--app-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .035), 0 8px 24px rgba(15, 23, 42, .035);
}

.product-media-panel[b-p5prkj918h] {
    overflow: hidden;
    background:
        linear-gradient(155deg, color-mix(in srgb, var(--app-accent-soft) 30%, var(--app-surface)), var(--app-surface) 13rem);
}

.product-section-heading[b-p5prkj918h] {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    margin-bottom: 1.15rem;
}

.product-section-heading > div[b-p5prkj918h] {
    min-width: 0;
}

.product-section-heading h3[b-p5prkj918h],
.product-availability-section h3[b-p5prkj918h] {
    margin: 0;
    color: var(--app-text-primary);
    font-size: .98rem;
    font-weight: 760;
    letter-spacing: -.015em;
}

.product-section-heading p[b-p5prkj918h],
.product-availability-section p[b-p5prkj918h] {
    margin: .22rem 0 0;
    color: var(--app-text-secondary);
    font-size: .76rem;
    line-height: 1.45;
}

.product-section-icon[b-p5prkj918h] {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--app-accent) 22%, transparent);
    border-radius: .62rem;
    color: var(--app-accent);
    background: var(--app-accent-soft);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .02em;
}

.product-media-subheading[b-p5prkj918h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .55rem;
    color: var(--app-text-primary);
    font-size: .73rem;
    font-weight: 720;
    text-transform: uppercase;
    letter-spacing: .075em;
}

.product-media-badge[b-p5prkj918h],
.product-media-count[b-p5prkj918h] {
    border-radius: 999px;
    padding: .22rem .5rem;
    color: var(--app-accent);
    background: var(--app-accent-soft);
    font-size: .61rem;
    font-weight: 760;
    letter-spacing: .035em;
}

.product-media-divider[b-p5prkj918h] {
    height: 1px;
    margin: 1.1rem 0;
    background: var(--app-border-subtle);
}

.product-image-preview[b-p5prkj918h] {
    height: 17.5rem;
    padding: .75rem;
    border: 1px solid color-mix(in srgb, var(--app-border) 80%, transparent);
    border-radius: .9rem;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--app-hover) 74%, var(--app-surface)), var(--app-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-border-subtle) 45%, transparent);
}

.product-image-preview img[b-p5prkj918h] {
    max-width: 100%;
    max-height: 100%;
    border-radius: .55rem;
    object-fit: contain;
}

.product-image-empty-state[b-p5prkj918h] {
    display: flex;
    max-width: 14rem;
    flex-direction: column;
    align-items: center;
    gap: .28rem;
    color: var(--app-text-secondary);
    text-align: center;
    overflow-wrap: anywhere;
}

.product-image-empty-state strong[b-p5prkj918h] {
    color: var(--app-text-primary);
    font-size: .8rem;
}

.product-image-empty-state span:last-child[b-p5prkj918h] {
    font-size: .7rem;
}

.product-image-empty-icon[b-p5prkj918h] {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: .3rem;
    place-items: center;
    border-radius: 999px;
    color: var(--app-accent);
    background: var(--app-accent-soft);
    font-size: 1rem;
    font-weight: 800;
}

[b-p5prkj918h] .product-primary-file-input {
    height: auto;
    margin-top: .7rem;
    padding: .24rem;
    border-radius: .72rem;
    font-size: .72rem;
}

[b-p5prkj918h] .product-primary-file-input::file-selector-button {
    margin: -.24rem .65rem -.24rem -.24rem;
    padding: .62rem .75rem;
    border: 0;
    border-right: 1px solid var(--app-border);
    color: var(--app-text-primary);
    background: var(--app-hover);
    font-size: .72rem;
    font-weight: 680;
}

.product-file-helper[b-p5prkj918h] {
    margin-top: .42rem;
    color: var(--app-text-secondary);
    font-size: .67rem;
    line-height: 1.4;
}

.product-inline-error[b-p5prkj918h] {
    margin-top: .45rem;
    color: var(--app-error-text);
    font-size: .72rem;
}

.product-gallery-notice[b-p5prkj918h] {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .8rem;
    border: 1px dashed color-mix(in srgb, var(--app-accent) 30%, var(--app-border));
    border-radius: .75rem;
    background: color-mix(in srgb, var(--app-accent-soft) 34%, var(--app-surface));
}

.product-gallery-notice > span:last-child[b-p5prkj918h] {
    display: flex;
    flex-direction: column;
    gap: .08rem;
    font-size: .68rem;
}

.product-gallery-notice strong[b-p5prkj918h] {
    color: var(--app-text-primary);
    font-size: .72rem;
}

.product-gallery-notice-icon[b-p5prkj918h] {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: .52rem;
    color: var(--app-accent);
    background: var(--app-accent-soft);
    font-weight: 800;
}

.product-gallery-preview[b-p5prkj918h] {
    height: 8.75rem;
    margin-bottom: .65rem;
    border-radius: .8rem;
    background: color-mix(in srgb, var(--app-hover) 72%, var(--app-surface));
}

.product-gallery-empty[b-p5prkj918h] {
    color: var(--app-text-secondary);
    font-size: .7rem;
}

.product-gallery-feedback[b-p5prkj918h],
.product-remove-confirmation[b-p5prkj918h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin: .6rem 0;
    padding: .65rem .7rem;
    border-radius: .7rem;
    color: var(--app-text-secondary);
    background: var(--app-hover);
    font-size: .69rem;
}

.product-gallery-feedback-error[b-p5prkj918h] {
    color: var(--app-error-text);
    background: var(--app-error-background);
}

.product-remove-confirmation[b-p5prkj918h] {
    flex-wrap: wrap;
    color: var(--app-warning-text);
    background: var(--app-warning-background);
}

.product-remove-confirmation > div[b-p5prkj918h] {
    display: flex;
    gap: .4rem;
}

.product-gallery-thumbnails[b-p5prkj918h] {
    gap: .55rem;
}

.product-gallery-thumb[b-p5prkj918h],
.product-gallery-add-btn[b-p5prkj918h] {
    width: 3.7rem;
    height: 3.7rem;
    border-radius: .75rem;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.product-gallery-thumb:hover:not(:disabled)[b-p5prkj918h],
.product-gallery-add-btn:hover:not(.product-gallery-add-btn-disabled)[b-p5prkj918h] {
    transform: translateY(-1px);
}

.product-gallery-thumb-selected[b-p5prkj918h] {
    border-color: var(--app-accent);
    border-width: 2px;
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--app-accent) 14%, transparent);
}

.product-details-column > .facebook-panel[b-p5prkj918h] {
    margin-bottom: 1rem;
}

.product-details-stack .row[b-p5prkj918h] {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

.form-label[b-p5prkj918h] {
    display: flex;
    align-items: center;
    min-height: 1.1rem;
    margin-bottom: .38rem;
    color: var(--app-text-primary);
    font-size: .74rem;
    font-weight: 680;
}

[b-p5prkj918h] .form-control,
[b-p5prkj918h] .form-select {
    min-height: 2.8rem;
    border-color: color-mix(in srgb, var(--app-border) 90%, transparent);
    border-radius: .72rem;
    color: var(--app-text-primary);
    background-color: color-mix(in srgb, var(--app-surface) 96%, var(--app-hover));
    font-size: .82rem;
}

[b-p5prkj918h] .form-control:hover:not(:disabled):not([readonly]),
[b-p5prkj918h] .form-select:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--app-text-secondary) 46%, var(--app-border));
}

[b-p5prkj918h] .form-control:focus,
[b-p5prkj918h] .form-select:focus {
    border-color: var(--app-accent);
    box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--app-accent) 15%, transparent);
}

[b-p5prkj918h] textarea.product-description-input {
    min-height: 7.5rem;
    padding-block: .75rem;
    line-height: 1.55;
    resize: vertical;
}

.form-text[b-p5prkj918h] {
    margin-top: .38rem;
    font-size: .68rem;
    line-height: 1.4;
}

.product-section-alert[b-p5prkj918h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem .85rem;
    border: 1px solid color-mix(in srgb, var(--app-warning-text) 24%, transparent);
    border-radius: .8rem;
    color: var(--app-warning-text);
    background: var(--app-warning-background);
    font-size: .75rem;
}

.product-pricing-section[b-p5prkj918h] {
    border-color: color-mix(in srgb, var(--app-accent) 22%, var(--app-border));
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--app-accent-soft) 24%, var(--app-surface)), var(--app-surface) 15rem);
}

.product-pricing-group[b-p5prkj918h] {
    padding: 1rem;
    border-color: var(--app-border-subtle);
    border-radius: .82rem;
    background: color-mix(in srgb, var(--app-table-header) 72%, var(--app-surface));
}

.product-pricing-toolbar[b-p5prkj918h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .9rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--app-border-subtle);
    color: var(--app-text-primary);
    font-size: .72rem;
    font-weight: 720;
}

.product-pricing-legend[b-p5prkj918h] {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--app-text-secondary);
    font-size: .62rem;
    font-weight: 650;
}

.product-pricing-legend span[b-p5prkj918h] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.product-pricing-legend span[b-p5prkj918h]::before {
    width: .48rem;
    height: .48rem;
    border-radius: 999px;
    background: var(--app-surface);
    box-shadow: inset 0 0 0 1px var(--app-border);
    content: "";
}

.product-pricing-legend-calculated[b-p5prkj918h]::before {
    background: var(--app-accent-soft) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-accent) 28%, transparent) !important;
}

.product-computed-field[b-p5prkj918h] {
    position: relative;
}

.product-computed-field[b-p5prkj918h]::after {
    position: absolute;
    top: .05rem;
    right: .8rem;
    color: var(--app-accent);
    font-size: .57rem;
    font-weight: 760;
    letter-spacing: .04em;
    text-transform: uppercase;
    content: "Auto";
}

.product-pricing-group[b-p5prkj918h]  input[readonly] {
    border-color: color-mix(in srgb, var(--app-accent) 16%, var(--app-border));
    color: var(--app-text-primary);
    background: color-mix(in srgb, var(--app-accent-soft) 46%, var(--app-surface));
    font-weight: 680;
}

.product-price-reset[b-p5prkj918h] {
    margin-left: auto;
    padding: .15rem .35rem;
    border-radius: .35rem;
    font-size: .62rem;
}

.product-price-reset:hover[b-p5prkj918h],
.product-price-reset:focus-visible[b-p5prkj918h] {
    text-decoration: none;
    background: var(--app-accent-soft);
}

.product-availability-section[b-p5prkj918h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: color-mix(in srgb, var(--app-table-header) 62%, var(--app-surface));
}

.product-availability-control[b-p5prkj918h] {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 7.25rem;
    margin: 0;
    padding: .55rem .75rem;
    border: 1px solid var(--app-border);
    border-radius: .75rem;
    background: var(--app-surface);
}

.product-availability-control .form-check-input[b-p5prkj918h],
.product-availability-control .form-check-label[b-p5prkj918h] {
    margin: 0;
    cursor: pointer;
}

.product-form-actions[b-p5prkj918h] {
    position: sticky;
    z-index: 8;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: .95rem 1.4rem;
    border-top: 1px solid var(--app-border);
    background: color-mix(in srgb, var(--app-modal-surface) 94%, transparent);
    box-shadow: 0 -12px 30px rgba(15, 23, 42, .07);
    backdrop-filter: blur(14px);
}

.product-form-action-context[b-p5prkj918h] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .08rem;
}

.product-form-action-context strong[b-p5prkj918h] {
    color: var(--app-text-primary);
    font-size: .78rem;
    font-weight: 720;
}

.product-form-action-context span[b-p5prkj918h] {
    color: var(--app-text-secondary);
    font-size: .67rem;
}

.product-form-action-buttons[b-p5prkj918h] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .65rem;
}

.product-form-action-buttons .btn[b-p5prkj918h] {
    min-width: 6.5rem;
    min-height: 2.65rem;
}

.product-submit-button[b-p5prkj918h] {
    display: inline-flex;
    min-width: 9.5rem !important;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--app-accent) 24%, transparent);
}

@media (max-width: 1099.98px) {
    .product-editor-workspace[b-p5prkj918h] {
        grid-template-columns: 1fr;
    }

    .product-media-column[b-p5prkj918h] {
        position: static;
    }

    .product-media-panel[b-p5prkj918h] {
        display: grid;
        grid-template-columns: minmax(15rem, .8fr) minmax(0, 1.2fr);
        gap: 0 1.15rem;
    }

    .product-media-panel > .product-section-heading[b-p5prkj918h],
    .product-media-panel > .product-media-subheading:first-of-type[b-p5prkj918h] {
        grid-column: 1 / -1;
    }

    .product-media-panel > .product-image-preview[b-p5prkj918h],
    .product-media-panel > .product-primary-file-input[b-p5prkj918h],
    .product-media-panel > .product-inline-error[b-p5prkj918h],
    .product-media-panel > .product-file-helper[b-p5prkj918h] {
        grid-column: 1;
    }

    .product-media-panel > .product-media-divider[b-p5prkj918h] {
        display: none;
    }

    .product-media-panel > div:last-child[b-p5prkj918h] {
        grid-column: 2;
        grid-row: 3 / span 4;
    }

    .product-gallery-preview[b-p5prkj918h] {
        height: 10rem;
    }
}

@media (max-width: 767.98px) {
    .product-editor-workspace[b-p5prkj918h] {
        gap: .8rem;
        padding: .8rem;
    }

    .product-editor-section[b-p5prkj918h] {
        padding: 1rem;
        border-radius: .88rem;
    }

    .product-media-panel[b-p5prkj918h] {
        display: block;
    }

    .product-media-panel > .product-media-divider[b-p5prkj918h] {
        display: block;
    }

    .product-image-preview[b-p5prkj918h] {
        height: 13rem;
    }

    .product-details-stack[b-p5prkj918h] {
        gap: .8rem;
    }

    .product-section-heading[b-p5prkj918h] {
        margin-bottom: .95rem;
    }

    .product-pricing-toolbar[b-p5prkj918h],
    .product-availability-section[b-p5prkj918h],
    .product-form-actions[b-p5prkj918h] {
        align-items: flex-start;
        flex-direction: column;
    }

    .product-pricing-legend[b-p5prkj918h] {
        flex-wrap: wrap;
    }

    .product-availability-control[b-p5prkj918h],
    .product-form-action-buttons[b-p5prkj918h] {
        width: 100%;
    }

    .product-form-actions[b-p5prkj918h] {
        padding: .8rem;
    }

    .product-form-action-context[b-p5prkj918h] {
        display: none;
    }

    .product-form-action-buttons .btn[b-p5prkj918h] {
        min-width: 0;
        flex: 1 1 0;
    }
}

@media (max-width: 430px) {
    .product-form-action-buttons[b-p5prkj918h] {
        flex-direction: column-reverse;
    }

    .product-form-action-buttons .btn[b-p5prkj918h] {
        width: 100%;
    }
}