/* /Components/Layout/MainLayout.razor.rz.scp.css */
.pos-shell[b-nkq8hpemxt] {
display: flex;
flex-direction: column;
min-height: 100vh;
background: var(--pos-bg);
}
.pos-shell__sidebar[b-nkq8hpemxt] {
background: var(--pos-sidebar-bg);
transition: width .18s ease;
}
.pos-shell__main[b-nkq8hpemxt] {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.pos-shell__header[b-nkq8hpemxt] {
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
height: 3.5rem;
padding: 0 1.5rem;
background: var(--pos-surface);
border-bottom: 1px solid var(--pos-border);
}
.pos-shell__brand[b-nkq8hpemxt] {
display: flex;
align-items: center;
gap: 0.6rem;
font-weight: 700;
color: var(--pos-text);
}
/* The header sits on the light --pos-surface background (unlike the dark sidebar), so the icon's
own white background blends in with no "chip" treatment needed here. */
.pos-shell__brand-mark[b-nkq8hpemxt] {
width: 1.4rem;
height: 1.4rem;
border-radius: 6px;
object-fit: contain;
}
.pos-shell__brand-name[b-nkq8hpemxt] {
font-size: 1.05rem;
letter-spacing: -0.01em;
}
.pos-shell__header-meta[b-nkq8hpemxt] {
display: flex;
align-items: center;
gap: 0.65rem;
}
/* The clock pill (.pos-clock, shared with the Register Dashboard) sits between the
environment badge and the account controls. It never grows past its own content
and never wraps onto a second line. */
.pos-shell__header-meta .pos-clock[b-nkq8hpemxt] {
flex: 0 0 auto;
white-space: nowrap;
}
.pos-shell__env[b-nkq8hpemxt] {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--pos-warning);
background: var(--pos-warning-soft);
border: 1px solid #ecd6ac;
border-radius: 999px;
padding: 0.15rem 0.6rem;
}
.pos-shell__session[b-nkq8hpemxt] {
font-size: 0.85rem;
font-weight: 600;
color: var(--pos-text-muted);
background: var(--pos-surface-alt);
border: 1px solid var(--pos-border);
border-radius: 999px;
padding: 0.25rem 0.75rem;
}
.pos-shell__content[b-nkq8hpemxt] {
flex: 1;
min-width: 0;
}
@media (min-width: 768px) {
.pos-shell[b-nkq8hpemxt] {
flex-direction: row;
}
.pos-shell__sidebar[b-nkq8hpemxt] {
width: var(--pos-sidebar-width);
flex-shrink: 0;
height: 100vh;
position: sticky;
top: 0;
}
/* Collapsed icon rail. NavMenu (a child component) owns the collapsed/expanded
state and toggle button; this class is applied here, on the shell MainLayout
itself renders, so the sidebar and the content area both resize from one
source of truth. Never applied below 768px, so the mobile drawer is
unaffected regardless of the stored preference. */
.pos-shell--nav-collapsed .pos-shell__sidebar[b-nkq8hpemxt] {
width: 68px;
}
/* Applied by the inline script in App.razor's , before MainLayout's own
interactive state loads, so a previously-collapsed sidebar renders collapsed
from the very first paint instead of flashing expanded first. */
html.pos-nav-preload-collapsed .pos-shell__sidebar[b-nkq8hpemxt] {
width: 68px;
}
}
/* Compact the clock before it can crowd the account controls: drop the weekday
first (leaving e.g. "19 Sep 2026 · 18:15 UTC") at and below 1024px-wide
screens (a common small-laptop/tablet-landscape target), then hide it
outright on very narrow widths where only the account controls have room. */
@media (max-width: 1099px) {
.pos-shell__clock-day[b-nkq8hpemxt] {
display: none;
}
}
@media (max-width: 640px) {
.pos-shell__header-meta .pos-clock[b-nkq8hpemxt] {
display: none;
}
}
#blazor-error-ui[b-nkq8hpemxt] {
color-scheme: light only;
background: lightyellow;
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-nkq8hpemxt] {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* GroceryPOS side navigation.
Dark slate rail, grouped sections, no text wrapping, clear active/hover/focus.
Collapsible to a compact icon rail on desktop/tablet widths (>= 768px) — see the
".nav-shell.is-collapsed" rules below. Below 768px the existing hamburger-drawer
behaviour is unchanged; the collapsed rail is never forced onto that layout. */
.nav-shell[b-fx51r81cgw] {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.nav-brand[b-fx51r81cgw] {
display: flex;
align-items: center;
height: 3.5rem;
padding: 0 1.25rem;
background: rgba(0, 0, 0, 0.25);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nav-brand__link[b-fx51r81cgw] {
display: flex;
align-items: center;
gap: 0.6rem;
color: var(--pos-sidebar-fg-strong);
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.01em;
text-decoration: none;
min-width: 0;
}
.nav-brand__link:hover[b-fx51r81cgw] {
color: var(--pos-sidebar-fg-strong);
}
/* Compact brand mark: the PamaligyaPOS icon (cropped from the supplied logo — bag/receipt symbol
only, see wwwroot/images/branding/pamaligyapos-icon.png) on a small white "chip". The source
PNG has an opaque white background (and the receipt inside the bag is itself white artwork, so
it cannot be safely color-keyed transparent without punching a hole in the icon) — a plain white
square would otherwise sit awkwardly on the dark sidebar, so it is deliberately framed as a
rounded badge instead of left to bleed into the dark background. Always visible; the only thing
that disappears in the collapsed rail is the "PamaligyaPOS" text next to it. */
.nav-brand__mark[b-fx51r81cgw] {
display: block;
flex: 0 0 auto;
width: 1.75rem;
height: 1.75rem;
padding: 2px;
border-radius: 6px;
background: #fff;
object-fit: contain;
}
.nav-brand__name[b-fx51r81cgw] {
overflow: hidden;
text-overflow: ellipsis;
}
.nav-toggler[b-fx51r81cgw] {
appearance: none;
cursor: pointer;
width: 2.75rem;
height: 2.25rem;
margin-left: auto;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 6px;
background: rgba(255, 255, 255, 0.06) 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.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center / 1.5rem;
}
.nav-toggler:checked[b-fx51r81cgw] {
background-color: rgba(255, 255, 255, 0.18);
}
/* Desktop/tablet expand-collapse button. Hidden below 768px, where the hamburger
checkbox above (.nav-toggler) drives the mobile drawer instead. */
.nav-collapse-toggle[b-fx51r81cgw] {
display: none;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 2rem;
height: 2rem;
margin-left: auto;
padding: 0;
cursor: pointer;
color: var(--pos-sidebar-fg);
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 6px;
font-size: 0.9rem;
line-height: 1;
transition: background-color .12s ease, color .12s ease;
}
.nav-collapse-toggle:hover[b-fx51r81cgw] {
background: rgba(255, 255, 255, 0.16);
color: var(--pos-sidebar-fg-strong);
}
.nav-collapse-toggle:focus-visible[b-fx51r81cgw] {
outline: 2px solid transparent;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}
.nav-scrollable[b-fx51r81cgw] {
display: none;
padding: 0.75rem 0.75rem 1.5rem;
}
.nav-toggler:checked ~ .nav-scrollable[b-fx51r81cgw] {
display: block;
}
.nav-groups[b-fx51r81cgw] {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.nav-group[b-fx51r81cgw] {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.nav-group__title[b-fx51r81cgw] {
padding: 0 0.75rem 0.35rem;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--pos-sidebar-section);
white-space: nowrap;
overflow: hidden;
transition: opacity .15s ease;
}
.nav-group[b-fx51r81cgw] .nav-group__link {
display: flex;
align-items: center;
gap: 0.7rem;
min-height: 2.6rem;
padding: 0.35rem 0.75rem;
border-radius: 8px;
color: var(--pos-sidebar-fg);
text-decoration: none;
font-size: 0.925rem;
font-weight: 500;
white-space: nowrap;
transition: background-color .12s ease, color .12s ease, padding .18s ease, justify-content .18s ease;
}
.nav-group[b-fx51r81cgw] .nav-group__link:hover {
background: var(--pos-sidebar-bg-accent);
color: var(--pos-sidebar-fg-strong);
}
.nav-group[b-fx51r81cgw] .nav-group__link:focus-visible {
outline: 2px solid transparent;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}
.nav-group[b-fx51r81cgw] .nav-group__link.active {
background: var(--pos-sidebar-active);
color: #fff;
font-weight: 600;
}
.nav-group[b-fx51r81cgw] .nav-group__label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
transition: opacity .15s ease;
}
/* The learning-tooltip bubble (see LearningTooltip.razor / learning-tooltip.css) is an absolutely
positioned ::after nested inside .nav-group__label, which pops it above the label's own box —
but .nav-group__label's overflow:hidden above (needed for the label's own text-ellipsis
truncation) silently clips that pop-up too: the pseudo-element still computes opacity:1 and
visibility:visible on hover, but nothing is actually painted on screen, because it renders
outside its clipping ancestor's box. Confirmed directly in a real browser: with only the rule
above, hovering a nav item's tooltip produced a correctly-computed but completely invisible
::after (proven via elementsFromPoint returning no trace of it), while relaxing overflow to
visible specifically during hover/focus (leaving the base ellipsis-clipping state untouched
otherwise) made it render and paint correctly with no other change needed. Overflow does not
affect box layout/sizing, so this never shifts neighbouring rows or widens the sidebar. */
.nav-group[b-fx51r81cgw] .nav-group__link:hover .nav-group__label,
.nav-group[b-fx51r81cgw] .nav-group__link:focus-within .nav-group__label {
overflow: visible;
}
/* Same clipping problem, same fix, for a section title's own tooltip (.nav-group__title also has
overflow:hidden above, for its own truncation). */
.nav-group__title:hover[b-fx51r81cgw],
.nav-group__title:focus-within[b-fx51r81cgw] {
overflow: visible;
}
.nav-group__icon[b-fx51r81cgw] {
flex-shrink: 0;
width: 1.15rem;
height: 1.15rem;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.9;
transition: width .18s ease, height .18s ease;
}
.nav-group[b-fx51r81cgw] .nav-group__link.active .nav-group__icon { opacity: 1; }
/* Icons (inline SVG data URIs, white so they sit on the dark rail). */
.bi-house-door-fill-nav-menu[b-fx51r81cgw] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}
.bi-cart-fill-nav-menu[b-fx51r81cgw] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5M5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4m7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4m-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2m7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2'/%3E%3C/svg%3E");
}
.bi-cash-stack-nav-menu[b-fx51r81cgw] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M1 3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1H1Zm7 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z'/%3E%3Cpath d='M0 5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V5Zm3 0a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h10a2 2 0 0 1 2-2V7a2 2 0 0 1-2-2H3Z'/%3E%3C/svg%3E");
}
.bi-list-check-nav-menu[b-fx51r81cgw] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M3.854 2.146a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 3.293l1.146-1.147a.5.5 0 0 1 .708 0m0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 7.293l1.146-1.147a.5.5 0 0 1 .708 0m0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0'/%3E%3C/svg%3E");
}
.bi-exclamation-triangle-nav-menu[b-fx51r81cgw] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .062.016.15.15 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.2.2 0 0 1-.054.06.1.1 0 0 1-.066.017H1.146a.1.1 0 0 1-.066-.017.2.2 0 0 1-.054-.06.18.18 0 0 1 .002-.183L7.884 2.073a.15.15 0 0 1 .054-.057m1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767z'/%3E%3Cpath d='M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E");
}
.bi-receipt-nav-menu[b-fx51r81cgw] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .866.36V15a.5.5 0 0 1-.866.348l-.646-.647-.646.647a.5.5 0 0 1-.708 0L11 14.708l-.646.646a.5.5 0 0 1-.708 0L9 14.708l-.646.646a.5.5 0 0 1-.708 0L7 14.708l-.646.646a.5.5 0 0 1-.708 0L5 14.708l-.646.646a.5.5 0 0 1-.708 0L3 14.708l-.646.646A.5.5 0 0 1 1.5 15V1a.5.5 0 0 1 .42-.494M3 4.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 0-1h-9a.5.5 0 0 0-.5.5M3.5 7a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1zM3 10.5a.5.5 0 0 0 .5.5h6a.5.5 0 0 0 0-1h-6a.5.5 0 0 0-.5.5'/%3E%3C/svg%3E");
}
.bi-graph-up-nav-menu[b-fx51r81cgw] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M0 0h1v15h15v1H0zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07'/%3E%3C/svg%3E");
}
.bi-palette-nav-menu[b-fx51r81cgw] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 5.5a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1M4.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1m0 3a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1m6.5-3a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1'/%3E%3Cpath d='M8 1a7 7 0 1 0 0 14c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1-.23-.27-.38-.62-.38-1a1.5 1.5 0 0 1 1.5-1.5H12a3 3 0 0 0 3-3c0-3.87-3.13-7-7-7m0 13a6 6 0 0 1 0-12c3.31 0 6 2.69 6 6a2 2 0 0 1-2 2h-1.77a2.5 2.5 0 0 0-2.5 2.5c0 .61.23 1.16.61 1.6.06.07.16.2.16.4a.5.5 0 0 1-.5.5'/%3E%3C/svg%3E");
}
.bi-arrow-left-right-nav-menu[b-fx51r81cgw] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 11.5a.5.5 0 0 0 .5.5h11.793l-3.147 3.146a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 11H1.5a.5.5 0 0 0-.5.5m14-7a.5.5 0 0 1-.5.5H2.707l3.147 3.146a.5.5 0 1 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 4H14.5a.5.5 0 0 1 .5.5'/%3E%3C/svg%3E");
}
.bi-box-seam-nav-menu[b-fx51r81cgw] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2zm3.564 1.426L5.596 5 8 5.961 14.154 3.5zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464z'/%3E%3C/svg%3E");
}
.bi-boxes-nav-menu[b-fx51r81cgw] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M7.752.066a.5.5 0 0 1 .496 0l3.75 2.143a.5.5 0 0 1 .252.434v3.995l3.498 2A.5.5 0 0 1 16 9.07v4.286a.5.5 0 0 1-.252.434l-3.75 2.143a.5.5 0 0 1-.496 0l-3.502-2-3.502 2.001a.5.5 0 0 1-.496 0l-3.75-2.143A.5.5 0 0 1 0 13.357V9.071a.5.5 0 0 1 .252-.434L3.75 6.638V2.643a.5.5 0 0 1 .252-.434zM4.25 7.504 1.508 9.071l2.742 1.567 2.742-1.567zM7.5 9.933l-2.75 1.571v3.134l2.75-1.571zm1 3.134 2.75 1.571v-3.134L8.5 9.933zm.508-3.996 2.742 1.567 2.742-1.567-2.742-1.567zm2.242-2.433V3.504L8.5 5.076V8.21zM7.5 8.21V5.076L4.75 3.504v3.134zM5.258 2.643 8 4.21l2.742-1.567L8 1.076zM15 9.933l-2.75 1.571v3.134L15 13.067zM3.75 14.638v-3.134L1 9.933v3.134z'/%3E%3C/svg%3E");
}
.bi-cart-plus-nav-menu[b-fx51r81cgw] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M9 5.5a.5.5 0 0 0-1 0V7H6.5a.5.5 0 0 0 0 1H8v1.5a.5.5 0 0 0 1 0V8h1.5a.5.5 0 0 0 0-1H9z'/%3E%3Cpath d='M.5 1a.5.5 0 0 0 0 1h1.11l.401 1.607 1.498 7.985A.5.5 0 0 0 4 12h1a2 2 0 1 0 0 4 2 2 0 0 0 0-4h7a2 2 0 1 0 0 4 2 2 0 0 0 0-4h1a.5.5 0 0 0 .491-.408l1.5-8A.5.5 0 0 0 14.5 3H2.89l-.405-1.621A.5.5 0 0 0 2 1zm3.915 10L3.102 4h10.796l-1.313 7zM6 14a1 1 0 1 1-2 0 1 1 0 0 1 2 0m7 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0'/%3E%3C/svg%3E");
}
.bi-cash-coin-nav-menu[b-fx51r81cgw] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M11 15a4 4 0 1 0 0-8 4 4 0 0 0 0 8m5-4a5 5 0 1 1-10 0 5 5 0 0 1 10 0'/%3E%3Cpath d='M9.438 11.944c.047.596.518 1.06 1.363 1.116v.44h.375v-.443c.875-.061 1.386-.529 1.386-1.207 0-.618-.39-.936-1.09-1.1l-.296-.07v-1.2c.376.043.614.248.671.532h.658c-.047-.575-.54-1.024-1.329-1.073V8.5h-.375v.45c-.747.073-1.255.522-1.255 1.158 0 .562.378.92 1.007 1.066l.248.061v1.272c-.384-.058-.639-.27-.696-.563h-.668zm1.36-1.354c-.369-.085-.569-.26-.569-.522 0-.294.216-.514.572-.578v1.1zm.432.746c.449.104.655.272.655.569 0 .339-.257.571-.709.614v-1.195z'/%3E%3Cpath d='M1 0a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h4.083q.088-.517.258-1H3a2 2 0 0 0-2-2V3a2 2 0 0 0 2-2h10a2 2 0 0 0 2 2v3.528c.38.34.717.728 1 1.154V1a1 1 0 0 0-1-1z'/%3E%3Cpath d='M9.998 5.083 10 5a2 2 0 1 0-3.132 1.65 6 6 0 0 1 3.13-1.567'/%3E%3C/svg%3E");
}
.bi-clipboard-check-nav-menu[b-fx51r81cgw] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0'/%3E%3Cpath d='M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z'/%3E%3Cpath d='M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0z'/%3E%3C/svg%3E");
}
.bi-clipboard-data-nav-menu[b-fx51r81cgw] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M4 11a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0zm6-4a1 1 0 1 1 2 0v5a1 1 0 1 1-2 0zM7 9a1 1 0 0 1 2 0v3a1 1 0 1 1-2 0z'/%3E%3Cpath d='M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z'/%3E%3Cpath d='M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0z'/%3E%3C/svg%3E");
}
.bi-clock-history-nav-menu[b-fx51r81cgw] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022zm2.004.45a7 7 0 0 0-.985-.299l.219-.976q.576.129 1.126.342zm1.37.71a7 7 0 0 0-.439-.27l.493-.87a8 8 0 0 1 .979.654l-.615.789a7 7 0 0 0-.418-.302zm1.834 1.79a7 7 0 0 0-.653-.796l.724-.69q.406.429.747.91zm.744 1.352a7 7 0 0 0-.214-.468l.893-.45a8 8 0 0 1 .45 1.088l-.95.313a7 7 0 0 0-.179-.483m.53 2.507a7 7 0 0 0-.1-1.025l.985-.17q.1.58.116 1.17zm-.131 1.538q.05-.254.081-.51l.993.123a8 8 0 0 1-.23 1.155l-.964-.267q.069-.247.12-.501m-.952 2.379q.276-.436.486-.908l.914.405q-.24.54-.555 1.038zm-.964 1.205q.183-.183.35-.378l.758.653a8 8 0 0 1-.401.432z'/%3E%3Cpath d='M8 1a7 7 0 1 0 4.95 11.95l.707.707A8.001 8.001 0 1 1 8 0z'/%3E%3Cpath d='M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E");
}
.bi-gear-nav-menu[b-fx51r81cgw] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0'/%3E%3Cpath d='M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z'/%3E%3C/svg%3E");
}
.bi-people-nav-menu[b-fx51r81cgw] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1zm-7.978-1L7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002-.014.002zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4m3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0M6.936 9.28a6 6 0 0 0-1.23-.247A7 7 0 0 0 5 9c-4 0-5 3-5 4q0 1 1 1h4.216A2.24 2.24 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816M4.92 10A5.5 5.5 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0m3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4'/%3E%3C/svg%3E");
}
.bi-percent-nav-menu[b-fx51r81cgw] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M13.442 2.558a.625.625 0 0 1 0 .884l-10 10a.625.625 0 1 1-.884-.884l10-10a.625.625 0 0 1 .884 0M4.5 6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m0 1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5m7 6a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m0 1a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5'/%3E%3C/svg%3E");
}
.bi-shield-lock-nav-menu[b-fx51r81cgw] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M5.338 1.59a61 61 0 0 0-2.837.856.48.48 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.7 10.7 0 0 0 2.287 2.233c.346.244.652.42.893.533q.18.085.293.118a1 1 0 0 0 .101.025 1 1 0 0 0 .1-.025q.114-.034.294-.118c.24-.113.547-.29.893-.533a10.7 10.7 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.8 11.8 0 0 1-2.517 2.453 7 7 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7 7 0 0 1-1.048-.625 11.8 11.8 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 63 63 0 0 1 5.072.56'/%3E%3Cpath d='M9.5 6.5a1.5 1.5 0 0 1-1 1.415l.385 1.99a.5.5 0 0 1-.491.595h-.788a.5.5 0 0 1-.49-.595l.384-1.99a1.5 1.5 0 1 1 2-1.415'/%3E%3C/svg%3E");
}
.bi-sliders-nav-menu[b-fx51r81cgw] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M11.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M9.05 3a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0V3zM4.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M2.05 8a2.5 2.5 0 0 1 4.9 0H16v1H6.95a2.5 2.5 0 0 1-4.9 0H0V8zm9.45 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m-2.45 1a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0v-1z'/%3E%3C/svg%3E");
}
.bi-tags-nav-menu[b-fx51r81cgw] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M3 2v4.586l7 7L14.586 9l-7-7zM2 2a1 1 0 0 1 1-1h4.586a1 1 0 0 1 .707.293l7 7a1 1 0 0 1 0 1.414l-4.586 4.586a1 1 0 0 1-1.414 0l-7-7A1 1 0 0 1 2 6.586z'/%3E%3Cpath d='M5.5 5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1m0 1a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M1 7.086a1 1 0 0 0 .293.707L8.75 15.25l-.043.043a1 1 0 0 1-1.414 0l-7-7A1 1 0 0 1 0 7.586V3a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}
.bi-translate-nav-menu[b-fx51r81cgw] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286zm1.634-.736L5.5 3.956h-.049l-.679 2.022z'/%3E%3Cpath d='M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2v-3H4a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm7.138 9.995q.289.451.63.846c-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6 6 0 0 1-.415-.492 2 2 0 0 1-.94.31'/%3E%3C/svg%3E");
}
.bi-truck-nav-menu[b-fx51r81cgw] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M0 3.5A1.5 1.5 0 0 1 1.5 2h9A1.5 1.5 0 0 1 12 3.5V5h1.02a1.5 1.5 0 0 1 1.17.563l1.481 1.85a1.5 1.5 0 0 1 .329.938V10.5a1.5 1.5 0 0 1-1.5 1.5H14a2 2 0 1 1-4 0H5a2 2 0 1 1-3.998-.085A1.5 1.5 0 0 1 0 10.5zm1.294 7.456A2 2 0 0 1 4.732 11h5.536a2 2 0 0 1 .732-.732V3.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .294.456M12 10a2 2 0 0 1 1.732 1h.768a.5.5 0 0 0 .5-.5V8.35a.5.5 0 0 0-.11-.312l-1.48-1.85A.5.5 0 0 0 13.02 6H12zm-9 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2m9 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2'/%3E%3C/svg%3E");
}
@media (min-width: 768px) {
.nav-toggler[b-fx51r81cgw] {
display: none;
}
.nav-scrollable[b-fx51r81cgw] {
display: block;
height: calc(100vh - 3.5rem);
overflow-y: auto;
}
/* The desktop/tablet collapse button only makes sense once the mobile drawer
checkbox above is gone. */
.nav-collapse-toggle[b-fx51r81cgw] {
display: inline-flex;
}
/* ==================================================================
Collapsed icon rail (desktop/tablet only — see MainLayout.razor.css
for the matching .pos-shell__sidebar width). Every rule here is
scoped to .nav-shell.is-collapsed so nothing here can ever affect
the mobile drawer, which does not use this class.
Each selector is paired with an "html.pos-nav-preload-collapsed"
variant: that class is stamped on by the inline script in
App.razor's , synchronously, before Blazor's circuit connects,
so a previously-collapsed sidebar looks collapsed from the very
first paint instead of flashing open first. Once MainLayout's own
interactive state loads it removes that class and .is-collapsed
(driven by C#) takes over as the only source of truth — the two
never both apply "live" at once, only during that brief handoff,
and they produce the same result either way. ================================================================== */
.nav-shell.is-collapsed .nav-brand[b-fx51r81cgw],
html.pos-nav-preload-collapsed .nav-brand[b-fx51r81cgw] {
flex-direction: column;
height: auto;
padding: 0.75rem 0.4rem;
gap: 0.6rem;
}
.nav-shell.is-collapsed .nav-brand__link[b-fx51r81cgw],
html.pos-nav-preload-collapsed .nav-brand__link[b-fx51r81cgw] {
justify-content: center;
}
.nav-shell.is-collapsed .nav-brand__name[b-fx51r81cgw],
html.pos-nav-preload-collapsed .nav-brand__name[b-fx51r81cgw] {
display: none;
}
.nav-shell.is-collapsed .nav-collapse-toggle[b-fx51r81cgw],
html.pos-nav-preload-collapsed .nav-collapse-toggle[b-fx51r81cgw] {
margin-left: 0;
}
.nav-shell.is-collapsed .nav-scrollable[b-fx51r81cgw],
html.pos-nav-preload-collapsed .nav-scrollable[b-fx51r81cgw] {
padding-left: 0.4rem;
padding-right: 0.4rem;
}
/* Section headings disappear; a subtle rule between groups keeps them
visually separated instead (task: "retain subtle separators"). */
.nav-shell.is-collapsed .nav-group__title[b-fx51r81cgw],
html.pos-nav-preload-collapsed .nav-group__title[b-fx51r81cgw] {
height: 0;
margin: 0;
padding: 0;
opacity: 0;
overflow: hidden;
}
.nav-shell.is-collapsed .nav-group:not(:first-child)[b-fx51r81cgw],
html.pos-nav-preload-collapsed .nav-group:not(:first-child)[b-fx51r81cgw] {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 0.6rem;
}
/* Icon-only pill: centred, no leftover label gap, but still a full-width
clickable/tappable target with the same active/hover/focus treatment. */
.nav-shell.is-collapsed .nav-group[b-fx51r81cgw] .nav-group__link,
html.pos-nav-preload-collapsed .nav-group[b-fx51r81cgw] .nav-group__link {
justify-content: center;
gap: 0;
padding: 0.5rem;
min-height: 2.75rem;
}
.nav-shell.is-collapsed .nav-group[b-fx51r81cgw] .nav-group__label,
html.pos-nav-preload-collapsed .nav-group[b-fx51r81cgw] .nav-group__label {
flex: 0 1 0;
opacity: 0;
overflow: hidden;
}
.nav-shell.is-collapsed .nav-group__icon[b-fx51r81cgw],
html.pos-nav-preload-collapsed .nav-group__icon[b-fx51r81cgw] {
width: 1.3rem;
height: 1.3rem;
}
}
.bi-hourglass-split-nav-menu[b-fx51r81cgw] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 15a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h1v-1.5a4.5 4.5 0 0 1 2.557-4.063A4.5 4.5 0 0 1 3.5 3.5V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1.5a4.5 4.5 0 0 1-2.557 4.063A4.5 4.5 0 0 1 12.5 11.5V13h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5zm2-13v1.5a3.5 3.5 0 0 0 7 0V2zm7 11v-1.5a3.5 3.5 0 0 0-7 0V13z'/%3E%3C/svg%3E");
}
/* Sidebar icon consistency fix: Branches and Registers previously had an IconClass assigned in
NavMenuModel.cs but no matching CSS rule here, so the icon area rendered empty. Same encoding,
fill, size and viewBox convention as every other icon above. */
.bi-shop-nav-menu[b-fx51r81cgw] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M2.97 1.35A1 1 0 0 1 3.73 1h8.54a1 1 0 0 1 .76.35l2.609 3.044A1.5 1.5 0 0 1 16 5.37v.255a2.375 2.375 0 0 1-4.25 1.458A2.37 2.37 0 0 1 9.875 8 2.37 2.37 0 0 1 8 7.083 2.37 2.37 0 0 1 6.125 8a2.37 2.37 0 0 1-1.875-.917A2.375 2.375 0 0 1 0 5.625V5.37a1.5 1.5 0 0 1 .361-.976zm1.78 4.275a1.375 1.375 0 0 0 2.75 0 .5.5 0 0 1 1 0 1.375 1.375 0 0 0 2.75 0 .5.5 0 0 1 1 0 1.375 1.375 0 1 0 2.75 0V5.37a.5.5 0 0 0-.12-.325L12.27 2H3.73L1.12 5.045A.5.5 0 0 0 1 5.37v.255a1.375 1.375 0 0 0 2.75 0 .5.5 0 0 1 1 0M1.5 8.5A.5.5 0 0 1 2 9v6h1v-5a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v5h6V9a.5.5 0 0 1 1 0v6h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1V9a.5.5 0 0 1 .5-.5M4 15h3v-5H4zm5-5v5h2v-5z'/%3E%3C/svg%3E");
}
.bi-pc-display-nav-menu[b-fx51r81cgw] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M0 4s0-2 2-2h12s2 0 2 2v6s0 2-2 2h-4c0 .667.083 1.167.25 1.5H11a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1h.75c.167-.333.25-.833.25-1.5H2s-2 0-2-2zm1.398-.855a.76.76 0 0 0-.254.302A1.5 1.5 0 0 0 1 4.01V10c0 .326.079.577.145.717.07.146.154.288.396.397.1.045.181.129.319.153.15.026.2.036.7.036h11c.5 0 .55-.01.699-.037.138-.024.219-.107.319-.152.242-.11.325-.252.396-.397.066-.14.145-.391.145-.717V4.01a1.5 1.5 0 0 0-.144-.563.76.76 0 0 0-.254-.302C13.51 3 13 3 12.5 3h-9C2.5 3 2 3 1.398 3.145'/%3E%3C/svg%3E");
}
/* Keyboard-accessible section disclosures, using the existing sidebar palette. */
button.nav-group__title[b-fx51r81cgw] {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
border: 0;
background: transparent;
text-align: left;
cursor: pointer;
}
button.nav-group__title[b-fx51r81cgw]::after { content: "\25BE"; margin-left: .5rem; }
button.nav-group__title[aria-expanded="false"][b-fx51r81cgw]::after { content: "\25B8"; }
button.nav-group__title:hover[b-fx51r81cgw] { color: var(--pos-sidebar-fg-strong); }
button.nav-group__title:focus-visible[b-fx51r81cgw] {
outline: 2px solid var(--pos-sidebar-fg-strong);
outline-offset: 2px;
border-radius: 4px;
}
.nav-group__items[b-fx51r81cgw] { display: flex; flex-direction: column; gap: .15rem; }
.nav-group__items[hidden][b-fx51r81cgw] { display: none; }
@media (min-width: 768px) {
.nav-shell.is-collapsed button.nav-group__title[b-fx51r81cgw],
html.pos-nav-preload-collapsed button.nav-group__title[b-fx51r81cgw] { display: none; }
.nav-shell.is-collapsed .nav-group__items[hidden][b-fx51r81cgw],
html.pos-nav-preload-collapsed .nav-group__items[hidden][b-fx51r81cgw] { display: flex; }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-93stc6vfx6],
.components-reconnect-repeated-attempt-visible[b-93stc6vfx6],
.components-reconnect-failed-visible[b-93stc6vfx6],
.components-pause-visible[b-93stc6vfx6],
.components-resume-failed-visible[b-93stc6vfx6],
.components-rejoining-animation[b-93stc6vfx6] {
display: none;
}
#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-93stc6vfx6],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-93stc6vfx6],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-93stc6vfx6],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-93stc6vfx6],
#components-reconnect-modal.components-reconnect-retrying[b-93stc6vfx6],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-93stc6vfx6],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-93stc6vfx6],
#components-reconnect-modal.components-reconnect-failed[b-93stc6vfx6],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-93stc6vfx6] {
display: block;
}
#components-reconnect-modal[b-93stc6vfx6] {
background-color: white;
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-93stc6vfx6 0.5s both;
&[open]
{
animation: components-reconnect-modal-slideUp-b-93stc6vfx6 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-93stc6vfx6 0.5s ease-in-out 0.3s;
animation-fill-mode: both;
}
}
#components-reconnect-modal[b-93stc6vfx6]::backdrop {
background-color: rgba(0, 0, 0, 0.4);
animation: components-reconnect-modal-fadeInOpacity-b-93stc6vfx6 0.5s ease-in-out;
opacity: 1;
}
@keyframes components-reconnect-modal-slideUp-b-93stc6vfx6 {
0% {
transform: translateY(30px) scale(0.95);
}
100% {
transform: translateY(0);
}
}
@keyframes components-reconnect-modal-fadeInOpacity-b-93stc6vfx6 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes components-reconnect-modal-fadeOutOpacity-b-93stc6vfx6 {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.components-reconnect-container[b-93stc6vfx6] {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
#components-reconnect-modal p[b-93stc6vfx6] {
margin: 0;
text-align: center;
}
#components-reconnect-modal button[b-93stc6vfx6] {
border: 0;
background-color: #6b9ed2;
color: white;
padding: 4px 24px;
border-radius: 4px;
}
#components-reconnect-modal button:hover[b-93stc6vfx6] {
background-color: #3b6ea2;
}
#components-reconnect-modal button:active[b-93stc6vfx6] {
background-color: #6b9ed2;
}
.components-rejoining-animation[b-93stc6vfx6] {
position: relative;
width: 80px;
height: 80px;
}
.components-rejoining-animation div[b-93stc6vfx6] {
position: absolute;
border: 3px solid #0087ff;
opacity: 1;
border-radius: 50%;
animation: components-rejoining-animation-b-93stc6vfx6 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.components-rejoining-animation div:nth-child(2)[b-93stc6vfx6] {
animation-delay: -0.5s;
}
@keyframes components-rejoining-animation-b-93stc6vfx6 {
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/Categories.razor.rz.scp.css */
/* Category List row actions: Edit / Deactivate-Activate are hidden at rest and revealed only when
the row is actually being interacted with (mouse hover or keyboard focus) — the same pattern
already established for the Product List (see Products.razor.css). Duplicated here rather than
shared: Blazor CSS isolation scopes a .razor.css file to the elements its own .razor component
renders, so a rule in Products.razor.css cannot reach Categories.razor's table at all; the block
is small and self-contained enough that a cross-page shared stylesheet would be a bigger change
than this task calls for. The action buttons stay in the DOM and keep their layout space
(visibility, not display) so revealing them never shifts the row height or column width. */
.pos-actions-col[b-qgkg9gsuan] {
width: 1%;
white-space: nowrap;
}
/* ==========================================================================
Row hover / focus: the dynamic Appearance accent, not a fixed grey.
Overrides the app-wide `.table > tbody > tr:hover > td` rule in
Styles/components/tables.css for this table only — Blazor's CSS isolation
scopes this rule to the elements Categories.razor itself renders, so
every other page's table keeps its existing grey hover untouched.
--pos-accent-soft is the same translucent accent tint already used for
hover/selected state elsewhere (the Product List, SearchableSelect's
option highlight), so it stays readable (it is not the full solid accent)
and follows Settings > Appearance automatically — no hard-coded color.
Focus gets the identical treatment: a keyboard user tabbing into a row's
Edit/Deactivate button (which already reveals the actions via the
:focus-within rule below) sees the same accent-tinted row background a
mouse user gets on hover, instead of no background change at all.
========================================================================== */
.table > tbody > tr:hover > td[b-qgkg9gsuan],
.table > tbody > tr:focus-within > td[b-qgkg9gsuan] {
background: var(--pos-accent-soft);
}
.category-row-actions[b-qgkg9gsuan] {
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 120ms ease;
}
/* :focus-within (not just :hover) is what keeps this keyboard-accessible: Tabbing onto Edit or
Deactivate/Activate focuses a descendant of the , which reveals the group exactly the same
way hovering the row does — a keyboard-only user is never locked out of these actions. */
tr:hover .category-row-actions[b-qgkg9gsuan],
tr:focus-within .category-row-actions[b-qgkg9gsuan] {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Hover is unreliable-to-absent on touch/coarse-pointer devices (tablets), so there the actions
stay visible by default rather than requiring a hover that may never fire. */
@media (hover: none), (pointer: coarse) {
.category-row-actions[b-qgkg9gsuan] {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
/* /Components/Pages/ExpiryManagement.razor.rz.scp.css */
/* Expiry Management filter bar and row actions follow the exact conventions already established
for the Inventory list page (Inventory.razor.css): Apply/Clear align to the bottom of the grid
(align-items: end), the two short selects (Status, Expiry horizon) stay compact rather than
stretching to a full grid share, and row actions (View, Adjust) are hidden at rest and revealed
on hover/keyboard-focus, with touch devices keeping them always visible. */
.pos-actions-col[b-pztfufj9su] {
width: 1%;
white-space: nowrap;
}
.pos-expiry-filter-grid[b-pztfufj9su] {
align-items: end;
}
.pos-expiry-filter-compact[b-pztfufj9su] {
max-width: 160px;
}
.pos-expiry-filter-action[b-pztfufj9su] {
align-self: end;
}
@media (min-width: 1000px) {
.pos-expiry-filter-grid[b-pztfufj9su] {
grid-template-columns:
minmax(220px, 1.4fr)
minmax(130px, 150px)
minmax(130px, 150px)
minmax(180px, 1fr)
auto
auto;
}
}
/* Row hover / focus: the dynamic accent, not a fixed grey — identical to Inventory.razor.css. */
.table > tbody > tr:hover > td[b-pztfufj9su],
.table > tbody > tr:focus-within > td[b-pztfufj9su] {
background: var(--pos-accent-soft);
}
.expiry-row-actions[b-pztfufj9su] {
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 120ms ease;
}
tr:hover .expiry-row-actions[b-pztfufj9su],
tr:focus-within .expiry-row-actions[b-pztfufj9su] {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
@media (hover: none), (pointer: coarse) {
.expiry-row-actions[b-pztfufj9su] {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
/* /Components/Pages/Inventory.razor.rz.scp.css */
/* Inventory stock list row actions: Adjust stock / View movements / Reorder settings are combined
into a single "⋮" RowActionMenu trigger (Components/Shared/RowActionMenu.razor) per row, hidden
at rest and revealed only when the row is actually being interacted with (mouse hover or
keyboard focus), matching the reveal pattern already established for the Product List
(Products.razor.css) and Category List (Categories.razor.css). The hidden group keeps its layout
space (visibility, not display) so revealing it never shifts the row height or column width. The
row-level "Product" shortcut (a link to /pos/products/{id}) was removed — this screen already is
the product's inventory context, so it was a redundant hop; the Product Detail page and its
route are untouched and still reachable from the Product List. */
.pos-actions-col[b-s9jl1yh3m8] {
width: 1%;
white-space: nowrap;
}
/* ==========================================================================
Filter bar: Apply filters / Clear sit on the same row as the five filter
controls on desktop, aligned to the bottom of the grid cell (align-items:
end) so a bare lines up with the actual input/select control
beneath each label. Inventory has more controls than the Product List's
own equivalent override (Products.razor.css), so it gets its own, wider
breakpoint (1100px) below which the grid falls back to the app-wide
.pos-filter-grid auto-fit wrapping (Styles/components/cards.css) — narrower
screens keep the existing, already-responsive stacking instead of forcing
the fixed 7-column desktop layout into too little space.
========================================================================== */
.pos-inventory-filter-grid[b-s9jl1yh3m8] {
align-items: end;
}
/* Stock status and Product status each offer only two or three short option labels — compact at
every width, not just on the desktop row, so neither ever stretches to a full 1fr share when
the grid wraps at narrower widths either. */
.pos-inventory-filter-status[b-s9jl1yh3m8] {
max-width: 160px;
}
.pos-inventory-filter-action[b-s9jl1yh3m8] {
align-self: end;
}
@media (min-width: 1100px) {
.pos-inventory-filter-grid[b-s9jl1yh3m8] {
grid-template-columns:
minmax(200px, 1.3fr)
minmax(180px, 1.1fr)
minmax(130px, 150px)
minmax(130px, 150px)
minmax(150px, 170px)
auto
auto;
}
}
/* ==========================================================================
Row hover / focus: the dynamic Appearance accent, not a fixed grey.
Overrides the app-wide `.table > tbody > tr:hover > td` rule in
Styles/components/tables.css for this table only — Blazor's CSS isolation
scopes this rule to the elements Inventory.razor itself renders, so
every other page's table keeps its existing grey hover untouched.
--pos-accent-soft is the same translucent accent tint already used for
hover/selected state elsewhere (Product List, Category List, SearchableSelect's
option highlight), so it stays readable (it is not the full solid accent)
and follows Settings > Appearance automatically — no hard-coded color.
Focus gets the identical treatment: a keyboard user tabbing into a row's
⋮ action trigger (which already reveals it via the existing :focus-within
rule below) sees the same accent-tinted row background a mouse user gets
on hover.
========================================================================== */
.table > tbody > tr:hover > td[b-s9jl1yh3m8],
.table > tbody > tr:focus-within > td[b-s9jl1yh3m8] {
background: var(--pos-accent-soft);
}
.inventory-row-actions[b-s9jl1yh3m8] {
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 120ms ease;
}
/* :focus-within (not just :hover) is what keeps this keyboard-accessible: Tabbing onto the ⋮
trigger focuses a descendant of the , which reveals the group exactly the same way hovering
the row does — a keyboard-only user is never locked out of it. */
tr:hover .inventory-row-actions[b-s9jl1yh3m8],
tr:focus-within .inventory-row-actions[b-s9jl1yh3m8],
/* Once the row's menu is open, the group must stay fully visible/interactive even if the pointer
moves away from the row while heading toward the menu panel — RowActionMenu positions its open
panel as `position: fixed` (see row-action-menu.js), which visually sits outside the 's own
box, so `tr:hover` alone would otherwise go false the instant the mouse leaves the row on its way
to a menu item, hiding the whole group (opacity/visibility/pointer-events) out from under the
user mid-click. :has() (already used the same way in Styles/components/modals.css) keeps the
group visible for as long as an open .row-action-menu__panel exists in the DOM, independent of
hover/focus-within. */
.inventory-row-actions:has(.row-action-menu__panel)[b-s9jl1yh3m8] {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Hover is unreliable-to-absent on touch/coarse-pointer devices (tablets), so there the ⋮ trigger
stays visible and tappable by default rather than requiring a hover that may never fire. */
@media (hover: none), (pointer: coarse) {
.inventory-row-actions[b-s9jl1yh3m8] {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
/* Row-action menu item icons — the exact same Bootstrap Icons glyphs already used elsewhere in the
app (NavMenu.razor.css: bi-box-seam, bi-clock-history, bi-gear), the app's one existing icon set.
NavMenu's own copies are hardcoded `fill='white'` background-images because they sit on the dark
sidebar rail; that isn't reusable as-is on this light popover, so these are re-emitted as
`mask-image` (shape only, no colour baked in) and painted via `.row-action-menu__item-icon`'s
`background-color: currentColor` — the same design-token colour every other icon/text in this
component already uses, so it stays light/dark-theme-correct with no hardcoded colour here. */
.pos-inventory-row-icon--adjust[b-s9jl1yh3m8] {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2zm3.564 1.426L5.596 5 8 5.961 14.154 3.5zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2zm3.564 1.426L5.596 5 8 5.961 14.154 3.5zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464z'/%3E%3C/svg%3E");
}
.pos-inventory-row-icon--movements[b-s9jl1yh3m8] {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022zm2.004.45a7 7 0 0 0-.985-.299l.219-.976q.576.129 1.126.342zm1.37.71a7 7 0 0 0-.439-.27l.493-.87a8 8 0 0 1 .979.654l-.615.789a7 7 0 0 0-.418-.302zm1.834 1.79a7 7 0 0 0-.653-.796l.724-.69q.406.429.747.91zm.744 1.352a7 7 0 0 0-.214-.468l.893-.45a8 8 0 0 1 .45 1.088l-.95.313a7 7 0 0 0-.179-.483m.53 2.507a7 7 0 0 0-.1-1.025l.985-.17q.1.58.116 1.17zm-.131 1.538q.05-.254.081-.51l.993.123a8 8 0 0 1-.23 1.155l-.964-.267q.069-.247.12-.501m-.952 2.379q.276-.436.486-.908l.914.405q-.24.54-.555 1.038zm-.964 1.205q.183-.183.35-.378l.758.653a8 8 0 0 1-.401.432z'/%3E%3Cpath d='M8 1a7 7 0 1 0 4.95 11.95l.707.707A8.001 8.001 0 1 1 8 0z'/%3E%3Cpath d='M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022zm2.004.45a7 7 0 0 0-.985-.299l.219-.976q.576.129 1.126.342zm1.37.71a7 7 0 0 0-.439-.27l.493-.87a8 8 0 0 1 .979.654l-.615.789a7 7 0 0 0-.418-.302zm1.834 1.79a7 7 0 0 0-.653-.796l.724-.69q.406.429.747.91zm.744 1.352a7 7 0 0 0-.214-.468l.893-.45a8 8 0 0 1 .45 1.088l-.95.313a7 7 0 0 0-.179-.483m.53 2.507a7 7 0 0 0-.1-1.025l.985-.17q.1.58.116 1.17zm-.131 1.538q.05-.254.081-.51l.993.123a8 8 0 0 1-.23 1.155l-.964-.267q.069-.247.12-.501m-.952 2.379q.276-.436.486-.908l.914.405q-.24.54-.555 1.038zm-.964 1.205q.183-.183.35-.378l.758.653a8 8 0 0 1-.401.432z'/%3E%3Cpath d='M8 1a7 7 0 1 0 4.95 11.95l.707.707A8.001 8.001 0 1 1 8 0z'/%3E%3Cpath d='M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E");
}
.pos-inventory-row-icon--reorder[b-s9jl1yh3m8] {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0'/%3E%3Cpath d='M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.291.159a.873.873 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0'/%3E%3Cpath d='M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.291.159a.873.873 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z'/%3E%3C/svg%3E");
}
/* Movements modal product-context header: name/SKU/current-stock are already loaded on the
Inventory row (WebInventoryItem), so this is a plain read of state passed in from OpenMovements
— no extra API call just to show data the page already has. */
.pos-movement-modal-context__name[b-s9jl1yh3m8] {
margin-bottom: 0.25rem;
font-weight: 600;
font-size: 1rem;
}
.pos-movement-modal-context__meta[b-s9jl1yh3m8] {
margin-bottom: 0;
display: flex;
flex-wrap: wrap;
gap: 0.25rem 0.75rem;
}
.pos-inventory-row-icon--expiry[b-s9jl1yh3m8] {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 15a.5.5 0 0 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06A4.5 4.5 0 0 1 3.5 4.88V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v2.88a4.5 4.5 0 0 1-2.557 4.06A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1zm2-13v2.88a3.5 3.5 0 0 0 2.241 3.266.5.5 0 0 1 0 .938A3.5 3.5 0 0 0 4.5 13v1h7v-1a3.5 3.5 0 0 0-2.241-3.916.5.5 0 0 1 0-.938A3.5 3.5 0 0 0 11.5 4.88V2z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 15a.5.5 0 0 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06A4.5 4.5 0 0 1 3.5 4.88V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v2.88a4.5 4.5 0 0 1-2.557 4.06A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1zm2-13v2.88a3.5 3.5 0 0 0 2.241 3.266.5.5 0 0 1 0 .938A3.5 3.5 0 0 0 4.5 13v1h7v-1a3.5 3.5 0 0 0-2.241-3.916.5.5 0 0 1 0-.938A3.5 3.5 0 0 0 11.5 4.88V2z'/%3E%3C/svg%3E");
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* Sign-in is a standalone, unauthenticated screen (BareLayout, no sidebar/header) — the one place
in the app where the full PamaligyaPOS logo (icon + wordmark + tagline) is shown at a
professional, non-dominating size rather than the compact icon+name treatment used in the
sidebar/header. object-fit: contain keeps it crisp and undistorted at any width. */
.pos-login-logo[b-ue55tm508m] {
display: block;
width: 100%;
max-width: 15rem;
height: auto;
margin-inline: auto;
object-fit: contain;
}
/* /Components/Pages/Products.razor.rz.scp.css */
/* Product List row actions: Edit / Deactivate-Activate are hidden at rest and revealed only when
the row is actually being interacted with (mouse hover or keyboard focus), so a page full of
products doesn't show three-plus buttons per row all the time. The action buttons stay in the
DOM and keep their layout space (visibility, not display) so revealing them never shifts the
row height or column width. */
.pos-actions-col[b-4s3iq6rp2i] {
width: 1%;
white-space: nowrap;
}
/* ==========================================================================
Filter bar: Apply filters / Clear sit on the same row as the inputs on
desktop, aligned to the bottom of the grid cell (align-items: end) so a
bare lines up with the actual input/select control beneath each
label — not the label text above it — using the buttons' own existing
.btn-sm height (already matched to .form-control-sm/.form-select-sm
elsewhere in the app; nothing here changes button sizing). Below the
this-page-only 992px breakpoint, the grid falls back to the app-wide
.pos-filter-grid auto-fit wrapping (Styles/components/cards.css), so
narrower screens keep the existing, already-responsive stacking instead
of forcing the fixed 6-column desktop layout into too little space.
========================================================================== */
.pos-product-filter-grid[b-4s3iq6rp2i] {
align-items: end;
}
/* Status has only three short option labels — compact at every width, not
just on the desktop 6-column row, so it never stretches to a full 1fr
share when the grid wraps at narrower widths either. */
.pos-product-filter-status[b-4s3iq6rp2i] {
max-width: 160px;
}
.pos-product-filter-action[b-4s3iq6rp2i] {
align-self: end;
}
@media (min-width: 992px) {
.pos-product-filter-grid[b-4s3iq6rp2i] {
grid-template-columns: minmax(220px, 1.2fr) minmax(200px, 1fr) minmax(200px, 1fr) minmax(120px, 160px) auto auto;
}
}
/* ==========================================================================
Row hover / focus: the dynamic Appearance accent, not a fixed grey.
Overrides the app-wide `.table > tbody > tr:hover > td` rule in
Styles/components/tables.css for this table only — Blazor's CSS isolation
scopes this rule to the elements Products.razor itself renders, so
every other page's table keeps its existing grey hover untouched, per
this task's explicit "only within the Product List scope" instruction.
--pos-accent-soft is the same translucent accent tint already used for
hover/selected state elsewhere (e.g. SearchableSelect's option highlight),
so it stays readable (it is not the full solid accent) and follows
Settings > Appearance automatically — no hard-coded color. Focus gets the
identical treatment: a keyboard user tabbing into a row's Edit/Deactivate
button (which already reveals the actions via the existing :focus-within
rule below) sees the same accent-tinted row background a mouse user gets
on hover, instead of no background change at all.
========================================================================== */
.table > tbody > tr:hover > td[b-4s3iq6rp2i],
.table > tbody > tr:focus-within > td[b-4s3iq6rp2i] {
background: var(--pos-accent-soft);
}
.product-row-actions[b-4s3iq6rp2i] {
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 120ms ease;
}
/* :focus-within (not just :hover) is what keeps this keyboard-accessible: Tabbing onto Edit or
Deactivate/Activate focuses a descendant of the , which reveals the group exactly the same
way hovering the row does — a keyboard-only user is never locked out of these actions. */
tr:hover .product-row-actions[b-4s3iq6rp2i],
tr:focus-within .product-row-actions[b-4s3iq6rp2i],
.product-row-actions:has(.row-action-menu__panel)[b-4s3iq6rp2i] {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Hover is unreliable-to-absent on touch/coarse-pointer devices (tablets), so there the actions
stay visible by default rather than requiring a hover that may never fire. */
@media (hover: none), (pointer: coarse) {
.product-row-actions[b-4s3iq6rp2i] {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
/* Product master-data action glyphs use the same Bootstrap Icons mask treatment as the Stock
menu, so both RowActionMenu instances share icon size, alignment, theme colour and focus state. */
.pos-product-row-icon--edit[b-4s3iq6rp2i] {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0zM13.752 4.396l-2-2L4.939 9.21a1 1 0 0 0-.263.465l-.604 2.415a.5.5 0 0 0 .606.606l2.415-.604a1 1 0 0 0 .465-.263z'/%3E%3Cpath fill-rule='evenodd' d='M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0zM13.752 4.396l-2-2L4.939 9.21a1 1 0 0 0-.263.465l-.604 2.415a.5.5 0 0 0 .606.606l2.415-.604a1 1 0 0 0 .465-.263z'/%3E%3Cpath fill-rule='evenodd' d='M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z'/%3E%3C/svg%3E");
}
.pos-product-row-icon--suppliers[b-4s3iq6rp2i] {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5 8c1.657 0 3-1.567 3-3.5S6.657 1 5 1 2 2.567 2 4.5 3.343 8 5 8m-4 7s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm9-1c0 .37-.097.756-.283 1H15s1 0 1-1-1-4-5-4q-.504 0-.936.057c.584.76.936 1.77.936 2.943zM9.5 8c1.38 0 2.5-1.567 2.5-3.5S10.88 1 9.5 1c-.223 0-.438.041-.642.118C9.547 2.016 10 3.205 10 4.5s-.453 2.484-1.142 3.382c.204.077.419.118.642.118'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M5 8c1.657 0 3-1.567 3-3.5S6.657 1 5 1 2 2.567 2 4.5 3.343 8 5 8m-4 7s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm9-1c0 .37-.097.756-.283 1H15s1 0 1-1-1-4-5-4q-.504 0-.936.057c.584.76.936 1.77.936 2.943zM9.5 8c1.38 0 2.5-1.567 2.5-3.5S10.88 1 9.5 1c-.223 0-.438.041-.642.118C9.547 2.016 10 3.205 10 4.5s-.453 2.484-1.142 3.382c.204.077.419.118.642.118'/%3E%3C/svg%3E");
}
.pos-product-row-icon--lifecycle[b-4s3iq6rp2i] {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 1v7h1V1z'/%3E%3Cpath d='M3 8.812a5 5 0 1 0 7.9-4.093l.6-.8A6 6 0 1 1 4.5 3.92l.6.8A5 5 0 0 0 3 8.812'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 1v7h1V1z'/%3E%3Cpath d='M3 8.812a5 5 0 1 0 7.9-4.093l.6-.8A6 6 0 1 1 4.5 3.92l.6.8A5 5 0 0 0 3 8.812'/%3E%3C/svg%3E");
}
/* /Components/Pages/Suppliers.razor.rz.scp.css */
/* Supplier List row actions: Edit / Deactivate-Activate are hidden at rest and revealed only when
the row is actually being interacted with (mouse hover or keyboard focus), matching the reveal
pattern already established for the Product List (Products.razor.css) and Category List
(Categories.razor.css). The action buttons stay in the DOM and keep their layout space
(visibility, not display) so revealing them never shifts the row height or column width. The
row-level "View" shortcut was removed entirely — this list already links to Edit, and the
read-only Supplier Detail page remains reachable directly by URL and from elsewhere in the app. */
.pos-actions-col[b-iwgwo4urw3] {
width: 1%;
white-space: nowrap;
}
/* ==========================================================================
Filter bar: Apply filters / Clear sit on the same row as the inputs on
desktop, aligned to the bottom of the grid cell (align-items: end) so a
bare lines up with the actual input/select control beneath each
label — not the label text above it. Below the this-page-only breakpoint,
the grid falls back to the app-wide .pos-filter-grid auto-fit wrapping
(Styles/components/cards.css), so narrower screens keep the existing,
already-responsive stacking instead of forcing the fixed 4-column desktop
layout into too little space.
========================================================================== */
.pos-supplier-filter-grid[b-iwgwo4urw3] {
align-items: end;
}
/* Status has only three short option labels — compact at every width, not just on the desktop
4-column row, so it never stretches to a full 1fr share when the grid wraps at narrower widths
either. */
.pos-supplier-filter-status[b-iwgwo4urw3] {
max-width: 160px;
}
.pos-supplier-filter-action[b-iwgwo4urw3] {
align-self: end;
}
@media (min-width: 760px) {
.pos-supplier-filter-grid[b-iwgwo4urw3] {
grid-template-columns: minmax(240px, 1fr) minmax(120px, 160px) auto auto;
}
}
/* ==========================================================================
Row hover / focus: the dynamic Appearance accent, not a fixed grey.
Overrides the app-wide `.table > tbody > tr:hover > td` rule in
Styles/components/tables.css for this table only — Blazor's CSS isolation
scopes this rule to the elements Suppliers.razor itself renders, so
every other page's table keeps its existing grey hover untouched.
--pos-accent-soft is the same translucent accent tint already used for
hover/selected state elsewhere (Product List, Category List, Inventory),
so it stays readable (it is not the full solid accent) and follows
Settings > Appearance automatically — no hard-coded color. Focus gets the
identical treatment: a keyboard user tabbing into a row's Edit/Deactivate
button (which already reveals the actions via the existing :focus-within
rule below) sees the same accent-tinted row background a mouse user gets
on hover.
========================================================================== */
.table > tbody > tr:hover > td[b-iwgwo4urw3],
.table > tbody > tr:focus-within > td[b-iwgwo4urw3] {
background: var(--pos-accent-soft);
}
.supplier-row-actions[b-iwgwo4urw3] {
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 120ms ease;
}
/* :focus-within (not just :hover) is what keeps this keyboard-accessible: Tabbing onto Edit or
Deactivate/Activate focuses a descendant of the , which reveals the group exactly the same
way hovering the row does — a keyboard-only user is never locked out of these actions. */
tr:hover .supplier-row-actions[b-iwgwo4urw3],
tr:focus-within .supplier-row-actions[b-iwgwo4urw3] {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Hover is unreliable-to-absent on touch/coarse-pointer devices (tablets), so there the actions
stay visible by default rather than requiring a hover that may never fire. */
@media (hover: none), (pointer: coarse) {
.supplier-row-actions[b-iwgwo4urw3] {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
/* /Components/Shared/ExpiryLotInventoryModal.razor.rz.scp.css */
/* Expiry & Lot Inventory modal — redesigned for stronger visual hierarchy over the previous flat
layout. Vertical rhythm, top to bottom: product identity -> divider -> summary cards -> lot
table -> info callout. (The header title/subtitle and the footer's Close button are PosModal's
own markup/CSS, untouched here.) The lot table reuses the app's shared `.pos-table-wrap` (border/
radius/horizontal-scroll) and `.table` (uppercase compact headers, row separators, hover) —
the same table chrome every other list/table screen already uses — rather than a one-off. */
.expiry-lot-identity[b-66c0lt528a] {
display: flex;
align-items: center;
gap: 1rem;
padding-bottom: 1rem;
}
.expiry-lot-identity__image[b-66c0lt528a] {
width: 3.5rem;
height: 3.5rem;
flex: 0 0 auto;
object-fit: cover;
border-radius: var(--pos-radius-sm);
border: 1px solid var(--pos-border);
background: var(--pos-surface-alt);
}
.expiry-lot-identity__text[b-66c0lt528a] {
min-width: 0;
}
.expiry-lot-identity__name[b-66c0lt528a] {
margin: 0;
font-size: 1.15rem;
font-weight: 700;
color: var(--pos-text);
overflow-wrap: anywhere;
}
.expiry-lot-identity__sku[b-66c0lt528a] {
margin: .3rem 0 0;
color: var(--pos-text-muted);
font-size: .85rem;
}
.expiry-lot-divider[b-66c0lt528a] {
margin: 0 0 1.25rem;
border: none;
border-top: 1px solid var(--pos-border);
}
.expiry-lot-summary[b-66c0lt528a] {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: .75rem;
margin-bottom: 1.25rem;
}
.expiry-lot-summary__card[b-66c0lt528a] {
display: flex;
flex-direction: column;
gap: .3rem;
padding: .7rem .85rem;
border: 1px solid var(--pos-border);
border-radius: var(--pos-radius-sm);
background: var(--pos-surface-alt);
}
.expiry-lot-summary__label[b-66c0lt528a] {
font-size: .72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--pos-text-muted);
}
.expiry-lot-summary__value[b-66c0lt528a] {
font-size: 1.1rem;
font-weight: 700;
color: var(--pos-text);
line-height: 1.25;
}
/* Subtle semantic differentiation — existing design tokens only, never a hard-coded colour.
"Tracked lots" is a neutral count of the product's own lots (not a status), so it takes the
dynamic accent per Settings > Appearance; "Expiring soon" reuses the SAME warning token the
per-row status badges below use, so it stays visually tied to that meaning rather than
introducing a separate colour language; "Next expiry" takes the informational/calendar token.
"Total on hand" stays fully neutral (plain surface-alt) — it is not a status of any kind. */
.expiry-lot-summary__card--accent[b-66c0lt528a] {
background: var(--pos-accent-soft);
border-color: var(--pos-accent-border);
}
.expiry-lot-summary__card--accent .expiry-lot-summary__value[b-66c0lt528a] { color: var(--pos-accent-text); }
.expiry-lot-summary__card--warning[b-66c0lt528a] {
background: var(--pos-warning-soft);
border-color: var(--pos-warning);
}
.expiry-lot-summary__card--warning .expiry-lot-summary__value[b-66c0lt528a] { color: var(--pos-warning); }
.expiry-lot-summary__card--info[b-66c0lt528a] {
background: var(--pos-info-soft);
border-color: var(--pos-info);
}
.expiry-lot-summary__card--info .expiry-lot-summary__value[b-66c0lt528a] { color: var(--pos-info); }
.expiry-lot-table-wrap[b-66c0lt528a] {
margin-bottom: 1.25rem;
}
.expiry-lot-table[b-66c0lt528a] {
margin-bottom: 0;
}
.expiry-lot-info[b-66c0lt528a] {
display: flex;
gap: .6rem;
align-items: flex-start;
padding: .75rem 1rem;
border: 1px solid var(--pos-border);
border-radius: var(--pos-radius-sm);
background: var(--pos-surface-alt);
color: var(--pos-text-muted);
font-size: .85rem;
}
.expiry-lot-info__icon[b-66c0lt528a] {
flex: 0 0 auto;
color: var(--pos-text-faint);
}
@media (max-width: 700px) {
.expiry-lot-summary[b-66c0lt528a] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
.expiry-lot-summary[b-66c0lt528a] { grid-template-columns: 1fr; }
}
/* /Components/Shared/MultiStockAdjustmentForm.razor.rz.scp.css */
.multi-adjust-search[b-bi46mupy4c] { position: relative; margin-bottom: 1rem; }
.multi-adjust-results[b-bi46mupy4c] { position: absolute; z-index: 5; width: 100%; max-height: 15rem; overflow-y: auto; border: 1px solid var(--pos-border); border-radius: .5rem; background: var(--pos-surface); box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.multi-adjust-result[b-bi46mupy4c] { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem .8rem; border: 0; border-bottom: 1px solid var(--pos-border); background: transparent; color: inherit; text-align: left; }
.multi-adjust-result:hover[b-bi46mupy4c],.multi-adjust-result:focus-visible[b-bi46mupy4c] { background: var(--pos-accent-soft); outline: 2px solid var(--pos-accent); outline-offset: -2px; }
.multi-adjust-result small[b-bi46mupy4c],.multi-adjust-row small[b-bi46mupy4c] { display: block; color: var(--pos-muted); }
.multi-adjust-heading[b-bi46mupy4c],.multi-adjust-actions[b-bi46mupy4c],.multi-adjust-row header[b-bi46mupy4c] { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.multi-adjust-empty[b-bi46mupy4c] { padding: 2rem; border: 1px dashed var(--pos-border); border-radius: .5rem; color: var(--pos-muted); text-align: center; }
.multi-adjust-list[b-bi46mupy4c],.multi-adjust-review-list[b-bi46mupy4c] { display: grid; gap: .75rem; }
.multi-adjust-row[b-bi46mupy4c],.multi-adjust-review-row[b-bi46mupy4c] { padding: .85rem; border: 1px solid var(--pos-border); border-radius: .55rem; background: var(--pos-surface); }
.multi-adjust-fields[b-bi46mupy4c] { display: grid; grid-template-columns: 90px minmax(130px,1fr) minmax(110px,.8fr) 90px minmax(170px,1.4fr) minmax(170px,1.4fr); gap: .65rem; align-items: end; margin-top: .75rem; }
.multi-adjust-current[b-bi46mupy4c] { display: grid; align-content: center; min-height: 3.5rem; }
.multi-adjust-current span[b-bi46mupy4c],.multi-adjust-review-row span[b-bi46mupy4c] { color: var(--pos-muted); font-size: .75rem; }
.multi-adjust-lot[b-bi46mupy4c] { display: grid; grid-template-columns: minmax(240px,1.5fr) minmax(150px,1fr) minmax(170px,1fr); gap: .65rem; align-items: end; margin-top: .65rem; padding-top: .65rem; border-top: 1px solid var(--pos-border); }
.multi-adjust-lot-summary[b-bi46mupy4c] { grid-column: span 2; color: var(--pos-muted); padding-bottom: .4rem; }
.multi-adjust-actions[b-bi46mupy4c] { margin-top: 1rem; }
.multi-adjust-actions-spacer[b-bi46mupy4c] { flex: 1; }
.multi-adjust-review-row[b-bi46mupy4c] { display: grid; grid-template-columns: minmax(180px,2fr) repeat(4,minmax(80px,1fr)); gap: .75rem; }
.multi-adjust-review-row > div[b-bi46mupy4c] { display: grid; }
.multi-adjust-review-lot[b-bi46mupy4c] { grid-column: 1/-1; }
@media (max-width: 900px) {
.multi-adjust-fields[b-bi46mupy4c] { grid-template-columns: repeat(2,minmax(0,1fr)); }
.multi-adjust-lot[b-bi46mupy4c] { grid-template-columns: 1fr 1fr; }
.multi-adjust-review-row[b-bi46mupy4c] { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
.multi-adjust-fields[b-bi46mupy4c],.multi-adjust-lot[b-bi46mupy4c],.multi-adjust-review-row[b-bi46mupy4c] { grid-template-columns: 1fr; }
.multi-adjust-review-lot[b-bi46mupy4c],.multi-adjust-lot-summary[b-bi46mupy4c] { grid-column: auto; }
.multi-adjust-actions[b-bi46mupy4c] { flex-wrap: wrap; }
.multi-adjust-actions-spacer[b-bi46mupy4c] { display: none; }
}
/* /Components/Shared/ProductBranchManager.razor.rz.scp.css */
.product-branch-row:hover[b-79x43z3mj4] {
background: color-mix(in srgb, var(--pos-accent) 8%, transparent);
}
.product-branch-price-input[b-79x43z3mj4] {
width: 6.5rem;
}
@media (max-width: 575.98px) {
.product-branch-price-input[b-79x43z3mj4] {
width: 5rem;
}
}
/* /Components/Shared/ProductCreateForm.razor.rz.scp.css */
/* Add Product modal redesign: a two-column layout (fields | image) with subtle labeled field
groups, replacing the old single flat pos-form-grid. Desktop shows both columns side by side;
narrower widths (the modal itself goes full-width below 640px per modals.css) stack a single
column, fields first then the image panel, so nothing overflows horizontally. */
.pos-product-create-grid[b-zjsdm1uu77] {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 700px) {
.pos-product-create-grid[b-zjsdm1uu77] {
/* Fields column carries more content, so it gets a bit more width than the image panel. */
grid-template-columns: 1.35fr 1fr;
align-items: start;
}
}
.pos-product-create-section + .pos-product-create-section[b-zjsdm1uu77] {
margin-top: 1rem;
}
.pos-product-create-section__label[b-zjsdm1uu77] {
margin: 0 0 0.5rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--pos-text-faint);
}
/* Paired fields within a section (SKU + Category, Selling + Cost price). Collapses to one
column on very narrow widths so two short-label fields never get cramped side by side. */
.pos-product-create-subgrid[b-zjsdm1uu77] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
@media (max-width: 480px) {
.pos-product-create-subgrid[b-zjsdm1uu77] {
grid-template-columns: 1fr;
}
}
.pos-product-create-image[b-zjsdm1uu77] {
border-top: 1px solid var(--pos-border);
padding-top: 1rem;
}
/* ProductImageField's own top margin is meant to separate it from fields stacked above it
elsewhere (the standalone edit form); here it is the image column's only/first element. */
.pos-product-create-image[b-zjsdm1uu77] .pos-image-field {
margin-top: 0;
}
@media (min-width: 700px) {
.pos-product-create-image[b-zjsdm1uu77] {
border-top: none;
border-left: 1px solid var(--pos-border);
padding-top: 0;
padding-left: 1.5rem;
}
}
.pos-product-create-actions[b-zjsdm1uu77] {
border-top: 1px solid var(--pos-border);
padding-top: 1rem;
}
/* /Components/Shared/ProductSupplierManager.razor.rz.scp.css */
.product-supplier-inline-add[b-6iijkm1lsp] {
padding: 1rem;
border: 1px solid var(--pos-border);
border-radius: var(--pos-radius);
background: var(--pos-surface-alt);
}
.product-supplier-row:hover[b-6iijkm1lsp] {
background: color-mix(in srgb, var(--pos-accent) 8%, transparent);
}
@media (max-width: 575.98px) {
.product-supplier-inline-add .pos-input-md[b-6iijkm1lsp] {
width: 100%;
max-width: none;
flex-basis: 100%;
}
}
/* /Components/Shared/RowActionMenu.razor.rz.scp.css */
/* Row-action overflow menu ("⋮"). The trigger reuses the app's existing `.app-btn-icon` utility
(Styles/components/buttons.css) — the design system's own compact icon-button style — instead of
a Bootstrap `.btn`, so it reads as a small icon affordance, not a full button. The floating panel
uses the exact same surface/border/radius/shadow tokens SearchableSelect's own floating panel
already uses, for a visually consistent "small floating menu" language across the app.
IMPORTANT — this file only reaches `.row-action-menu`, `.row-action-menu__trigger` and
`.row-action-menu__panel`, because those three are rendered directly by RowActionMenu.razor
itself. The individual `.row-action-menu__item` / `.row-action-menu__item-icon` elements are
supplied by each CALLER as `ChildContent` (e.g. Inventory.razor's own "Adjust stock" button) —
Blazor's CSS isolation scopes an element to whichever .razor FILE its markup is literally written
in, so a menu item written inside Inventory.razor carries Inventory's own scope attribute, never
this component's (confirmed by rendering it and inspecting the real DOM). A scoped rule here for
`.row-action-menu__item` would silently never match any caller's actual items. That styling
therefore lives in the GLOBAL stylesheet instead: Styles/components/row-action-menu.css. */
.row-action-menu[b-a92g55lsqx] {
position: relative;
display: inline-flex;
}
/* Sizing/glyph come from this rule; border colour/width, background, radius, muted text colour and
the dynamic-accent hover come from `.app-btn-icon` (applied alongside this class in
RowActionMenu.razor) so the trigger matches the one icon-button style already defined for the
rest of the app, instead of inventing another.
`border-style: solid` + `appearance: none` are set explicitly here rather than relying on
`.app-btn-icon` alone: Tailwind's own reset (`preflight`) — which normally supplies
`border-style: solid` and strips native control chrome globally — is deliberately disabled
app-wide (tailwind.config.js), and `.app-btn-icon` was previously unused anywhere in the app, so
this gap was never exposed before. Without it, a real keeps the browser's native
`border-style: outset` (a faint 3D bevel) even with `.app-btn-icon`'s width/colour applied —
the same class of "looks like a native control" defect fixed globally for the menu items.
Scoped to this trigger rather than edited into the shared `.app-btn-icon` utility itself, to
keep this change limited to the component this task is about. */
.row-action-menu__trigger[b-a92g55lsqx] {
font-size: 1.15rem;
line-height: 1;
border-style: solid;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.row-action-menu__trigger[aria-expanded="true"][b-a92g55lsqx] {
border-color: var(--pos-accent);
color: var(--pos-accent);
}
/* Positioned to `position: fixed` by row-action-menu.js right after it renders (measured from the
trigger's real viewport position, flipping upward near the bottom of the viewport) — the values
here are just sane fallbacks before that JS call runs on the very first paint. */
.row-action-menu__panel[b-a92g55lsqx] {
position: absolute;
top: calc(100% + .3rem);
right: 0;
z-index: 1050;
min-width: 11.25rem;
max-width: 16rem;
padding: .35rem;
display: flex;
flex-direction: column;
gap: .1rem;
border: 1px solid var(--pos-border);
border-radius: var(--pos-radius-sm);
background: var(--pos-surface);
box-shadow: var(--pos-shadow);
}
/* /Components/Shared/SearchableSelect.razor.rz.scp.css */
/* Searchable lookup combobox: reuses .form-select (trigger) and .form-control (search box) for
pixel-consistent styling with every other select/input in the app (border, radius and the
accent focus ring already come from Styles/components/forms.css) — including Bootstrap's own
chevron background-image on the trigger, so no separate caret icon is needed. The floating
panel uses the app's own surface/border/shadow tokens plus --pos-accent* for hover/selected
state, so Settings > Appearance's dynamic accent applies with no extra wiring. */
.searchable-select[b-re86nc66tt] {
position: relative;
}
.searchable-select-trigger[b-re86nc66tt] {
display: flex;
align-items: center;
width: 100%;
padding-right: 2.25rem;
text-align: left;
cursor: pointer;
}
.searchable-select-trigger:disabled[b-re86nc66tt] {
cursor: not-allowed;
}
.searchable-select-value[b-re86nc66tt] {
overflow: hidden;
min-width: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
.searchable-select-placeholder[b-re86nc66tt] {
color: var(--pos-text-faint);
}
/* Small "x" that sits over the trigger's own chevron area once a real value is selected in
AllowClear (filter) mode — the same visual slot native has no equivalent for, but
this app's filter bars want a one-click way back to "All ...". */
.searchable-select-inline-clear[b-re86nc66tt] {
position: absolute;
top: 50%;
right: .5rem;
display: grid;
width: 1.35rem;
height: 1.35rem;
place-items: center;
padding: 0;
border: none;
border-radius: var(--pos-radius-pill);
background: transparent;
color: var(--pos-text-muted);
font-size: 1.05rem;
line-height: 1;
transform: translateY(-50%);
}
.searchable-select-inline-clear:hover[b-re86nc66tt] {
background: var(--pos-surface-alt);
color: var(--pos-text);
}
.searchable-select-panel[b-re86nc66tt] {
position: absolute;
z-index: 1050;
top: calc(100% + .35rem);
left: 0;
display: flex;
flex-direction: column;
width: 100%;
min-width: 14rem;
max-height: 280px;
overflow: hidden;
border: 1px solid var(--pos-border);
border-radius: var(--pos-radius-sm);
background: var(--pos-surface);
box-shadow: var(--pos-shadow);
}
.searchable-select-search-row[b-re86nc66tt] {
position: relative;
flex: 0 0 auto;
padding: .6rem .6rem .4rem;
}
.searchable-select-search[b-re86nc66tt] {
padding-right: 2rem;
}
.searchable-select-search:focus[b-re86nc66tt] {
border-color: var(--pos-accent);
box-shadow: var(--pos-focus-ring);
}
.searchable-select-clear[b-re86nc66tt] {
position: absolute;
top: .95rem;
right: 1rem;
display: grid;
width: 1.5rem;
height: 1.5rem;
place-items: center;
padding: 0;
border: none;
border-radius: var(--pos-radius-pill);
background: transparent;
color: var(--pos-text-muted);
font-size: 1.1rem;
line-height: 1;
}
.searchable-select-clear:hover[b-re86nc66tt] {
background: var(--pos-surface-alt);
color: var(--pos-text);
}
.searchable-select-list[b-re86nc66tt] {
flex: 1 1 auto;
margin: 0;
padding: .3rem;
overflow-y: auto;
list-style: none;
}
.searchable-select-option[b-re86nc66tt] {
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
padding: .5rem .65rem;
border-radius: var(--pos-radius-sm);
color: var(--pos-text);
font-size: .875rem;
cursor: pointer;
}
.searchable-select-option span:first-child[b-re86nc66tt] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.searchable-select-option-active[b-re86nc66tt] {
background: var(--pos-accent-soft);
}
.searchable-select-option-selected[b-re86nc66tt] {
color: var(--pos-accent-text);
font-weight: 650;
}
.searchable-select-check[b-re86nc66tt] {
flex: 0 0 auto;
color: var(--pos-accent);
}
.searchable-select-empty[b-re86nc66tt] {
padding: 1rem .65rem;
color: var(--pos-text-muted);
font-size: .85rem;
text-align: center;
}
/* Touch targets stay comfortably tappable on tablets/phones, and the panel can't run off the
right edge of a narrow viewport (it still overlays content rather than expanding any card or
table it sits inside — position: absolute above never affects layout flow). */
@media (max-width: 767.98px) {
.searchable-select-option[b-re86nc66tt] {
min-height: 2.75rem;
}
.searchable-select-panel[b-re86nc66tt] {
left: 0;
right: 0;
width: auto;
}
}
/* /Components/Shared/StockAdjustmentForm.razor.rz.scp.css */
/* Stock Adjustment modal/page redesign: subtle section labels, a two-column form (Direction +
Reason | Quantity + Note), an accent-tinted projected-stock preview bar, and an accent-tinted
review/confirm panel (not the shared ConfirmPanel's semantic danger/red — a routine stock
adjustment is not a destructive action). Every accent color here is a CSS variable
(--pos-accent-soft / --pos-accent-border / --pos-accent), never hard-coded, so the whole
workflow follows Settings > Appearance automatically. */
.pos-stock-adjustment-section__label[b-gktm577325] {
margin: 0 0 0.5rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--pos-text-faint);
}
/* Direction + Reason on the left, Quantity + Note on the right at desktop widths; a single
stacked column below 640px (the same breakpoint PosModal itself already collapses to full
width at), so nothing overflows horizontally on a phone-width viewport. */
.pos-stock-adjustment-grid[b-gktm577325] {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 640px) {
.pos-stock-adjustment-grid[b-gktm577325] {
grid-template-columns: 1fr 1fr;
}
}
.pos-stock-adjustment-preview[b-gktm577325] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem;
border-radius: var(--pos-radius-sm);
border: 1px solid var(--pos-accent-border);
background: var(--pos-accent-soft);
padding: 0.75rem 1rem;
font-size: 0.85rem;
}
.pos-stock-adjustment-preview__arrow[b-gktm577325] {
color: var(--pos-text-faint);
}
.pos-stock-adjustment-preview__figure--result strong[b-gktm577325] {
color: var(--pos-accent-hover);
}
.pos-stock-adjustment-confirm[b-gktm577325] {
border-radius: var(--pos-radius-sm);
border: 1px solid var(--pos-accent-border);
background: var(--pos-accent-soft);
padding: 1rem;
}
.pos-stock-adjustment-confirm__title[b-gktm577325] {
margin: 0 0 0.75rem;
font-weight: 600;
}
/* /Components/Shared/StockMovementList.razor.rz.scp.css */
/* Stock Movement ledger: filter row (fewer columns and a tighter breakpoint when the product
search is hidden, since a row-scoped modal has 3 real filters instead of 4), an accent-based
row hover/focus (not the app-wide grey default), and a sensible minimum width on the
Reference/Note column so it never gets crushed into character-by-character wrapping — the
surrounding .pos-table-wrap already scrolls horizontally if the table genuinely needs it. */
.pos-movement-filter-grid[b-ga2nmo1bqn] {
align-items: end;
}
/* Movement type / From / To each offer a short, fixed set of values — compact at every width. */
.pos-movement-filter-compact[b-ga2nmo1bqn] {
max-width: 170px;
}
.pos-movement-filter-action[b-ga2nmo1bqn] {
align-self: end;
}
/* Row-scoped (modal): Movement type + From + To + two buttons = 5 columns, fits comfortably
inside the modal's own content width well below the standalone page's breakpoint. */
@media (min-width: 620px) {
.pos-movement-filter-grid--scoped[b-ga2nmo1bqn] {
grid-template-columns: minmax(150px, 170px) minmax(150px, 170px) minmax(150px, 170px) auto auto;
}
}
/* Full (standalone page): adds the Product name/SKU search box, so it needs more total width
before collapsing to one row is worthwhile. */
@media (min-width: 900px) {
.pos-movement-filter-grid--full[b-ga2nmo1bqn] {
grid-template-columns: minmax(220px, 1.3fr) minmax(150px, 170px) minmax(150px, 170px) minmax(150px, 170px) auto auto;
}
}
.pos-movement-note-col[b-ga2nmo1bqn] {
min-width: 180px;
}
/* Dynamic Appearance accent, not a fixed grey — overrides the app-wide
`.table > tbody > tr:hover > td` rule (Styles/components/tables.css) for this table only, via
Blazor's CSS isolation scoping this rule to the elements this component itself renders. */
.pos-movement-table > tbody > tr:hover > td[b-ga2nmo1bqn],
.pos-movement-table > tbody > tr:focus-within > td[b-ga2nmo1bqn] {
background: var(--pos-accent-soft);
}
/* /Components/Shared/SupplierEditForm.razor.rz.scp.css */
/* Supplier Edit modal content: a strong main "Supplier details" card beside a narrower column of
informational cards (Contact guidelines / Supplier record), matching the design direction for
this task. Desktop is a real two-column grid; below the breakpoint the aside stacks below the
form instead of squeezing into too little width. */
.pos-supplier-edit-grid[b-55oj0j49re] {
display: grid;
gap: 1.25rem;
grid-template-columns: 1fr;
}
@media (min-width: 860px) {
.pos-supplier-edit-grid[b-55oj0j49re] {
grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
align-items: start;
}
}
.pos-supplier-edit-aside[b-55oj0j49re] {
display: flex;
flex-direction: column;
gap: 1rem;
}
.pos-supplier-edit-header[b-55oj0j49re] {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.pos-supplier-edit-identity[b-55oj0j49re] {
display: flex;
align-items: center;
gap: 0.85rem;
min-width: 0;
}
/* Identity chip: dynamic accent (not a hard-coded brand color), same treatment as PosModal's own
Icon chip (Styles/components/modals.css .pos-modal__icon) — follows Settings > Appearance. */
.pos-supplier-edit-initials[b-55oj0j49re] {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 2.75rem;
height: 2.75rem;
border-radius: var(--pos-radius-sm);
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.02em;
background: var(--pos-accent-soft);
color: var(--pos-accent-hover);
border: 1px solid var(--pos-accent-border);
}
.pos-supplier-edit-guidelines[b-55oj0j49re] {
margin: 0;
padding-left: 1.1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
font-size: 0.85rem;
}