/* ==========================================================================
   GroceryPOS.Web — application-wide Tailwind design system (entry file)
   --------------------------------------------------------------------------
   Compiled by PostCSS: postcss-import inlines the partials below, Tailwind
   compiles the utilities and @apply (config in tailwind.config.js, preflight
   DISABLED), autoprefixer adds vendor prefixes. Output goes to
   wwwroot/app-tailwind.css and is linked once in App.razor after Bootstrap.

   Bootstrap CSS is still loaded before this — its grid and layout utility
   classes are used across many pages. This file owns the GroceryPOS visual
   system on top of it.

   Partials, in cascade order:
     tokens                design tokens on :root (runtime accent from App.razor)
     base                  element defaults, accent focus ring, the .pos-page shell
     components/buttons     .btn and .app-btn families; primary equals the accent
     components/forms       .form-control and .app-input families; accent focus
     components/tables      .table and .pos-table-wrap
     components/cards       .card, .pos-card, .pos-metric, .pos-total, .pos-status-card, .pos-kv
     components/badges      .badge, .text-bg, .alert; semantic colours kept
     components/toolbars    .pos-toolbar, .pos-confirm, .pos-empty, .pos-actions, .pos-pagination
     components/modals      .pos-modal and .app-modal
     components/row-action-menu  .row-action-menu__item(-icon) — global because callers supply
                            these as ChildContent, so they carry the CALLER's own CSS-isolation
                            scope, never RowActionMenu.razor's
     components/navigation  in-content nav helpers (the shell nav is scoped CSS)
     components/pos         the /pos register screen
     components/dashboard   Home and the Register Dashboard
     components/reports     the printable receipt
     components/settings    Settings, Appearance preview
     components/misc        product image field, thumbnails, product view, receipt lookup, POS status pills
   ========================================================================== */
/* ==========================================================================
   GroceryPOS — design tokens
   --------------------------------------------------------------------------
   Plain CSS custom properties, emitted at the top of app-tailwind.css. These
   are the single source of truth for colour, spacing, radius and shadow across
   the whole application. The configurable accent (`--pos-accent*`) is written
   over these at runtime by an inline <style> in App.razor from
   Settings › Appearance — never rebuild-time.
   ========================================================================== */
:root {
    --pos-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --pos-bg: #eef1f5;
    --pos-surface: #ffffff;
    --pos-surface-alt: #f7f9fc;
    --pos-border: #dfe3ea;
    --pos-border-strong: #c7cdd8;

    --pos-text: #1f2733;
    --pos-text-muted: #5b6675;
    --pos-text-faint: #8a94a3;

    /* Legacy brand blue. Kept only for a few non-primary accents (tender-mix
       "debit" slice, sidebar brand-mark gradient). Primary buttons, focus,
       links, active nav/tabs/pills all use --pos-accent below. */
    --pos-primary: #0b5cab;
    --pos-primary-hover: #094c8e;
    --pos-primary-soft: #e7f0fb;

    /* Configurable UI accent (Settings › Appearance). Fallbacks = approved Emerald;
       overridden at runtime by App.razor. Semantic status colours are NOT derived
       from these. */
    --pos-accent: #10B981;
    --pos-accent-hover: #059669;
    --pos-accent-soft: rgba(16, 185, 129, 0.12);
    --pos-accent-border: rgba(16, 185, 129, 0.45);
    --pos-accent-text: #04241A;

    --pos-success: #1a7f45;
    --pos-success-soft: #e4f3ea;
    --pos-warning: #a76a00;
    --pos-warning-soft: #fbf0dd;
    --pos-danger: #b3261e;
    --pos-danger-soft: #fbe7e6;
    --pos-info: #0c6b83;
    --pos-info-soft: #e2f2f6;

    --pos-sidebar-bg: #14202e;
    --pos-sidebar-bg-accent: #1b2c3f;
    --pos-sidebar-fg: #c4ccd6;
    --pos-sidebar-fg-strong: #ffffff;
    --pos-sidebar-section: #7f8ea0;
    --pos-sidebar-active: var(--pos-accent);
    --pos-sidebar-width: 264px;

    --pos-radius: 12px;
    --pos-radius-sm: 8px;
    --pos-radius-pill: 999px;

    --pos-shadow-sm: 0 1px 2px rgba(20, 32, 46, 0.06), 0 1px 3px rgba(20, 32, 46, 0.08);
    --pos-shadow: 0 2px 8px rgba(20, 32, 46, 0.08), 0 1px 3px rgba(20, 32, 46, 0.06);

    --pos-space-1: 0.25rem;
    --pos-space-2: 0.5rem;
    --pos-space-3: 0.75rem;
    --pos-space-4: 1rem;
    --pos-space-5: 1.5rem;
    --pos-space-6: 2rem;

    /* Keyboard focus ring — now the configured accent, not the legacy blue. */
    --pos-focus-ring: 0 0 0 3px var(--pos-accent-border);
}
/* ==========================================================================
   Base / typography / app-content shell
   Element-level defaults + the page container every routed page renders into.
   Bootstrap is still loaded before this for its grid + utility classes; these
   rules define the GroceryPOS look on top.
   ========================================================================== */
html, body {
    font-family: var(--pos-font);
    color: var(--pos-text);
    background-color: var(--pos-bg);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--pos-text);
    font-weight: 600;
    letter-spacing: -0.01em;
}
a { color: var(--pos-accent); }
a:hover { color: var(--pos-accent-hover); }
code {
    font-size: 0.85em;
    color: var(--pos-text-muted);
    background: var(--pos-surface-alt);
    border: 1px solid var(--pos-border);
    border-radius: 4px;
    padding: 0.05rem 0.3rem;
}
/* One visible keyboard-focus treatment everywhere — the configured accent. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid transparent;
    box-shadow: var(--pos-focus-ring);
}
@media (min-width: 992px) {
    .pos-grid--2 { grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); }
    .pos-grid--2-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1400px) {
    .pos-page { max-width: 100%; }
}
@media (max-width: 991.98px) {
    .pos-page { padding-left: var(--pos-space-2); padding-right: var(--pos-space-2); }
}
@media print {
    .pos-page-header__actions,
    .pos-toolbar,
    .d-print-none { display: none !important; }
}
/* ==========================================================================
   Button system
   Restyles the Bootstrap `.btn*` classes the pages already use, and exposes
   `app-btn*` aliases for new markup. PRIMARY = configured accent (never
   Tailwind / Bootstrap blue). Behaviour and event handlers are untouched.
   ========================================================================== */
/* ==========================================================================
   Form system — labels, inputs, selects, textareas, check/radio, help text,
   validation. Restyles the Bootstrap form classes the pages use; `app-input` /
   `app-select` / `app-label` aliases for new markup. Focus ring = accent.
   Validation logic is untouched (Blazor EditForm / DataAnnotations).
   ========================================================================== */
/* ==========================================================================
   Table system — clean uppercase headers, subtle row separators, hover, numeric
   alignment, compact density, horizontal overflow wrapper. Restyles Bootstrap
   `.table`; `.pos-table-wrap` / `.app-table` for markup.
   ========================================================================== */
/* ==========================================================================
   Card / panel / metric / status-card / key-value system
   White surface, neutral border, subtle radius, restrained shadow, consistent
   padding. Restyles Bootstrap `.card`; `.pos-card*`, `.pos-metric*`,
   `.pos-total`, `.pos-status-card*`, `.pos-kv*` for the shared components.
   ========================================================================== */
/* ==========================================================================
   Badges + alerts + status pills
   Consistent pill badges and semantic alerts. Semantic colours (success /
   warning / danger / info) are deliberately NOT the configured accent.
   ========================================================================== */
/* ==========================================================================
   Toolbars / filter rows / confirm panels / empty states / quick-action tiles /
   pagination. Shared chrome used by list, report and settings pages.
   ========================================================================== */
/* ==========================================================================
   Modals / dialogs (PosModal.razor and every modal built on it: product
   view/edit, payment, receipt lookup, void, confirmations). Blazor modal
   mechanics (open/close state, focus) are untouched — this is styling only.
   ========================================================================== */
/* lock the page behind the modal so it does not scroll under the overlay */
body:has(.pos-modal),
body:has(.app-modal) { overflow: hidden; }
@media (max-width: 640px) {
    .pos-modal,
    .app-modal {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
    .pos-modal__dialog--md,
    .pos-modal__dialog--lg,
    .pos-modal__dialog--xl { max-width: 100%; }
}
/* ==========================================================================
   Row-action overflow menu — item styling (global, NOT component-scoped)
   --------------------------------------------------------------------------
   RowActionMenu.razor.css (Blazor CSS isolation) still owns `.row-action-menu`,
   `.row-action-menu__trigger` and `.row-action-menu__panel` — those elements are
   rendered directly by RowActionMenu.razor itself, so its own scope attribute
   correctly reaches them.

   `.row-action-menu__item` and `.row-action-menu__item-icon`, however, are
   rendered by EACH CALLER as `ChildContent` (e.g. Inventory.razor supplies its
   own "Adjust stock" / "View movements" / "Reorder settings" buttons). Blazor's
   CSS isolation scopes an element to whichever .razor FILE the markup is
   literally written in — so a menu item written inside Inventory.razor carries
   Inventory's own scope attribute (confirmed by rendering it and inspecting the
   real DOM), never RowActionMenu's. A scoped rule in RowActionMenu.razor.css
   targeting `.row-action-menu__item` would therefore never match any caller's
   actual items — every caller would need to redefine this styling itself,
   defeating the point of a shared, reusable menu component. Defining it here,
   globally, is what makes "any caller's menu items look right for free" true.
   ========================================================================== */
.row-action-menu__item {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .55rem .75rem;
    margin: 0;
    border: none;
    border-radius: var(--pos-radius-sm);
    background: transparent;
    color: var(--pos-text);
    font: inherit;
    font-size: .875rem;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
/* One smooth accent hover surface — no per-item border, on either input method. */
.row-action-menu__item:hover,
.row-action-menu__item:focus-visible {
    background: var(--pos-accent-soft);
    outline: none;
}
/* Optional per-item leading icon slot (caller-supplied, e.g. Inventory.razor's own
   .pos-inventory-row-icon--adjust/--movements/--reorder). A fixed-size mask so every item's icon
   occupies the same column width regardless of glyph shape, and paints in `currentColor` (set to
   the app's muted-text token here) rather than a hardcoded colour, so it follows the same
   light/dark-aware tokens as everything else — the caller only supplies the glyph shape via
   `mask-image`/`-webkit-mask-image`, never a colour. */
.row-action-menu__item-icon {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    color: var(--pos-text-muted);
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}
/* ==========================================================================
   Navigation
   --------------------------------------------------------------------------
   The application shell (sidebar rail, top header, brand, responsive toggle)
   lives in Blazor SCOPED CSS which the Tailwind CLI does not process:
     - Components/Layout/MainLayout.razor.css   (.pos-shell*)
     - Components/Layout/NavMenu.razor.css      (.nav-*, .nav-group*)
   Those files are retained. They are already token-driven, so the active
   navigation item now follows the configured accent automatically:
   NavMenu uses `--pos-sidebar-active`, which tokens.css maps to `var(--pos-accent)`.

   This partial only adds page-level nav helpers used inside the content area
   (breadcrumb strip, in-page tab strip) so they share one accent treatment.
   ========================================================================== */
/* ==========================================================================
   POS register screen (/pos) — command bar, category pills, product grid,
   Current Sale panel, cart lines, summary, Review & Pay, status footer.
   Compiled from Tailwind utilities; hooks (.pos-cat-tab, .pos-card, .pos-cart-*,
   .pos-pay-btn) are unchanged so Pos.razor markup and its tests are unaffected.
   ========================================================================== */
/* ==========================================================================
   Responsive — tablet-first POS. Desktop (>=1201px) keeps the compact
   two-column register + a table-style cart row (product name gets the only
   flexible column; unit/qty/total/remove are sized to their content, never an
   equal fraction). At <=1200px the register stacks and each cart line becomes
   a compact 3-row block instead — see the @media (max-width: 1200px) block
   below for the exact row layout. Either way the product name always wraps at
   word boundaries and never breaks character-by-character.
   ========================================================================== */
@media (min-width: 1600px) {
    .pos-register { grid-template-columns: minmax(0, 1fr) minmax(400px, 480px); }
    .pos-catalogue__grid { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); }
}
/* Tablet / narrow cart: below this, even the widened desktop cart cannot fit a
   readable product-name column next to a full row of controls, so each cart
   line becomes a compact 3-row block instead of forcing 5 columns:
     row 1: product name (flexible) + remove button
     row 2: unit price, alone, full width
     row 3: quantity control (left) + line total (right)
   The desktop column header row is hidden — it no longer describes a table
   that exists at this width. */
@media (max-width: 1200px) {
    .pos-register { grid-template-columns: 1fr; }

    .pos-catalogue,
    .pos-cart { height: auto; }

    .pos-catalogue__body { max-height: 30rem; }

    .pos-cart-lines__head { display: none; }

    .pos-cart-line {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name  remove"
            "unit  unit"
            "qty   total";
        -moz-column-gap: 0.75rem;
             column-gap: 0.75rem;
        row-gap: 0.3rem;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    /* Row 1: full-width name, wraps by WORDS (never mid-word/character-by-
       character), capped at 2 lines so one long name can't push the row tall. */
    .pos-cart-line__name {
        grid-area: name;
        font-size: 0.95rem;
        min-width: 0;
        white-space: normal;
        word-break: normal;
        overflow-wrap: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }

    /* Row 2: unit price on its own line, left-aligned (overriding the
       Bootstrap `.text-end` utility class already on this element, which is
       correct for the desktop numeric column but not for a standalone line). */
    .pos-cart-line__unit {
        grid-area: unit;
        text-align: left !important;
        white-space: nowrap;
        font-size: 0.9rem;
    }

    /* Row 3: quantity control on the left, line total on the right. */
    .pos-cart-line__total {
        grid-area: total;
        text-align: right;
        white-space: nowrap;
        font-size: 0.95rem;
        align-self: center;
    }

    .pos-cart-line__remove {
        grid-area: remove;
        text-align: right;
    }

    .pos-cart-line__qty {
        grid-area: qty;
        justify-self: start;
        flex-wrap: nowrap;
        gap: 0.5rem;
    }

    .pos-cart-line__qty .pos-qty-btn { flex: 0 0 auto; }

    .pos-cart-line__remove .btn {
        min-width: 2.5rem;
        min-height: 2.5rem;
    }
}
@media (max-width: 480px) {
    .pos-cart-line { -moz-column-gap: 0.5rem; column-gap: 0.5rem; }
    .pos-cart-line__name { font-size: 0.9rem; }
    .pos-cart-line__unit { font-size: 0.82rem; }
}
@media print {
    .pos-reg-cmdbar,
    .pos-reg-footer,
    .pos-catalogue { display: none !important; }
}
/* ==========================================================================
   Register Dashboard / Home (/, /pos/dashboard)
   Operational hero, terminal-operations tiles, tender-mix bar, reconciliation
   summary, environment / user / clock chips. Token-driven; moved verbatim from
   the old pos-theme.css section 13 into the Tailwind build.
   ========================================================================== */
.pos-env-chip,
.pos-user-chip,
.pos-clock {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: var(--pos-radius-pill);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    white-space: nowrap;
}
.pos-env-chip { background: var(--pos-warning-soft); color: var(--pos-warning); text-transform: uppercase; letter-spacing: 0.04em; }
.pos-user-chip { background: var(--pos-surface-alt); color: var(--pos-text); }
.pos-user-chip__role { color: var(--pos-text-muted); font-weight: 500; }
.pos-clock { background: var(--pos-surface-alt); color: var(--pos-text-muted); font-variant-numeric: tabular-nums; }
.pos-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--pos-space-4);
    padding: var(--pos-space-5);
    margin-bottom: var(--pos-space-4);
    border-radius: var(--pos-radius);
    background: linear-gradient(135deg, var(--pos-sidebar-bg) 0%, var(--pos-sidebar-bg-accent) 100%);
    color: #fff;
}
.pos-hero__eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; font-weight: 700; opacity: 0.75; }
.pos-hero__title { color: #fff; margin: 0.25rem 0 0.15rem; font-size: 1.6rem; }
.pos-hero__text { margin: 0; opacity: 0.8; font-size: 0.9rem; }
.pos-hero__status { margin-top: var(--pos-space-3); }
.pos-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pos-space-3);
    flex: 1 1 22rem;
    justify-content: flex-end;
}
.pos-hero__scan { max-width: 24rem; }
.pos-hero__cta { white-space: nowrap; }
.pos-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--pos-space-2);
    border-radius: var(--pos-radius-pill);
    padding: 0.35rem 0.85rem;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
}
.pos-pill--open { background: var(--pos-success-soft); color: var(--pos-success); }
.pos-pill--closed { background: rgba(255, 255, 255, 0.15); color: #fff; }
.pos-pill--pending { background: rgba(255, 255, 255, 0.15); color: #fff; }
.pos-register-home {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pos-space-4);
    align-items: start;
}
@media (min-width: 1180px) {
    .pos-register-home { grid-template-columns: minmax(0, 2fr) minmax(20rem, 1fr); }
}
.pos-register-home__main,
.pos-register-home__side {
    display: flex;
    flex-direction: column;
    gap: var(--pos-space-4);
    min-width: 0;
}
.pos-metric-grid--sub .pos-metric { background: var(--pos-surface-alt); }
.pos-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pos-space-2);
}
.pos-op-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--pos-space-2); }
.pos-op-tile {
    display: flex;
    align-items: center;
    gap: var(--pos-space-3);
    padding: var(--pos-space-3);
    border: 1px solid var(--pos-border);
    border-radius: var(--pos-radius-sm);
    background: var(--pos-surface);
    text-decoration: none;
    color: var(--pos-text);
}
.pos-op-tile:hover { border-color: var(--pos-accent); box-shadow: var(--pos-shadow-sm); }
.pos-op-tile:focus-visible { outline: none; box-shadow: var(--pos-focus-ring); }
.pos-op-tile__icon { font-size: 1.1rem; flex: 0 0 1.6rem; text-align: center; }
.pos-op-tile__body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.pos-op-tile__title { font-weight: 600; font-size: 0.9rem; }
.pos-op-tile__text { font-size: 0.78rem; color: var(--pos-text-muted); }
.pos-op-tile__badge {
    flex: 0 0 auto;
    border-radius: var(--pos-radius-pill);
    padding: 0.15rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 700;
}
.pos-op-tile__badge--ok { background: var(--pos-success-soft); color: var(--pos-success); }
.pos-op-tile__badge--warn { background: var(--pos-warning-soft); color: var(--pos-warning); }
.pos-tender-bar {
    display: flex;
    width: 100%;
    height: 0.6rem;
    border-radius: var(--pos-radius-pill);
    overflow: hidden;
    background: var(--pos-surface-alt);
}
.pos-tender-bar__slice { height: 100%; }
.pos-tender-bar__slice--cash { background: var(--pos-success); }
.pos-tender-bar__slice--debit { background: var(--pos-primary); }
.pos-tender-bar__slice--credit { background: var(--pos-info); }
.pos-recon-summary { display: flex; align-items: baseline; gap: var(--pos-space-2); }
.pos-recon-summary__count { font-size: 1.8rem; font-weight: 800; color: var(--pos-success); font-variant-numeric: tabular-nums; }
.pos-recon-summary__count.is-flagged { color: var(--pos-warning); }
.pos-recon-summary__label { color: var(--pos-text-muted); }
/* ---- hero shift tag (real shift id + elapsed time, next to the status pill) --- */
.pos-hero__shift-tag {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    font-variant-numeric: tabular-nums;
}
/* ---- small uppercase section kicker (a static label, not a tab control) ------ */
.pos-section-kicker {
    margin: 0 0 var(--pos-space-2);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pos-text-faint);
}
/* ---- emphasized metric (Drawer cash) — configured accent, not a fixed hex ---- */
.pos-metric--accent {
    border-color: var(--pos-accent-border);
    background: var(--pos-accent-soft);
    padding: var(--pos-space-4);
}
.pos-metric--accent .pos-metric__label { color: var(--pos-accent); }
.pos-metric--accent .pos-metric__value { font-size: 1.7rem; }
/* ---- tactile POS shortcut strip ---------------------------------------- */
.pos-tactile-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pos-space-2);
}
.pos-tactile-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.95rem;
    border-radius: var(--pos-radius-sm);
    border: 1px solid var(--pos-border-strong);
    background: var(--pos-surface);
    color: var(--pos-text);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    line-height: 1;
}
.pos-tactile-btn:hover { border-color: var(--pos-accent); color: var(--pos-accent); }
.pos-tactile-btn:focus-visible { outline: none; box-shadow: var(--pos-focus-ring); }
.pos-tactile-btn--primary { background: var(--pos-accent); border-color: var(--pos-accent); color: #fff; }
.pos-tactile-btn--primary:hover { background: var(--pos-accent-hover); border-color: var(--pos-accent-hover); color: #fff; }
.pos-tactile-btn--danger { border-color: var(--pos-danger); color: var(--pos-danger); }
.pos-tactile-btn--danger:hover { background: var(--pos-danger); border-color: var(--pos-danger); color: #fff; }
/* ---- terminal-operations tile: navigation affordance -------------------- */
.pos-op-tile__chevron { color: var(--pos-text-faint); flex: 0 0 auto; }
/* ---- live-activity filter toggle (client-side over already-loaded rows) --- */
.pos-activity-filter { display: inline-flex; gap: 0.3rem; }
.pos-activity-filter button {
    border: 1px solid var(--pos-border-strong);
    background: var(--pos-surface);
    color: var(--pos-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.65rem;
    border-radius: var(--pos-radius-pill);
    cursor: pointer;
}
.pos-activity-filter button.is-active { background: var(--pos-accent); border-color: var(--pos-accent); color: #fff; }
.pos-activity-filter button:focus-visible { outline: none; box-shadow: var(--pos-focus-ring); }
/* ---- workstation footer ------------------------------------------------- */
.pos-workstation-footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pos-space-2) var(--pos-space-4);
    justify-content: space-between;
    margin-top: var(--pos-space-4);
    padding-top: var(--pos-space-3);
    border-top: 1px solid var(--pos-border);
    color: var(--pos-text-faint);
    font-size: 0.78rem;
}
@media print {
    .pos-hero,
    .pos-register-home__side,
    .pos-workstation-footer { display: none !important; }
}
/* ==========================================================================
   Reports — filter areas, result tables, summary totals, and the printable
   sale / return receipt. Filter grids + `.pos-total` live in cards.css /
   toolbars.css; this file owns the print receipt. PDF/report generation logic
   is untouched.
   ========================================================================== */
.pos-print-receipt {
    max-width: 32rem;
    margin: 0 auto;
    color: #111;
    background: #fff;
}
.pos-print-receipt__head { text-align: center; margin-bottom: var(--pos-space-3); }
.pos-print-receipt__brand { font-weight: 700; font-size: 1.15rem; margin: 0; letter-spacing: 0.04em; }
.pos-print-receipt__title { margin: 0; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.08em; }
.pos-print-receipt__meta { margin: 0 0 var(--pos-space-3) 0; font-size: 0.85rem; }
.pos-print-receipt__meta > div { display: flex; justify-content: space-between; gap: var(--pos-space-3); padding: 0.1rem 0; }
.pos-print-receipt__meta dt { font-weight: 600; margin: 0; }
.pos-print-receipt__meta dd { margin: 0; text-align: right; }
.pos-print-receipt__lines { font-size: 0.85rem; }
.pos-print-receipt__foot { margin-top: var(--pos-space-3); font-size: 0.78rem; text-align: center; }
@media print {
    .pos-shell__sidebar,
    .pos-shell__header,
    #blazor-error-ui { display: none !important; }

    .pos-shell,
    .pos-shell__main,
    .pos-shell__content,
    .pos-page {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    .pos-print-receipt {
        max-width: 80mm;
        font-size: 11px;
        color: #000;
    }

    .pos-print-receipt__lines th,
    .pos-print-receipt__lines td { padding: 2px 3px; }
}
/* ==========================================================================
   Settings › Appearance — accent preview swatches + hex colour field.
   Drives the runtime accent system; App_Data/ui.settings.json,
   AccentSettingsProvider and App.razor variable injection are untouched.
   ========================================================================== */
/* ==========================================================================
   Shared odds & ends used by product / inventory / POS-adjacent screens:
   product image field & list thumbnail, product view panel, receipt-lookup
   panel, and the POS top status strip (shift / connectivity pills).
   Token-driven; moved verbatim from the old pos-theme.css.
   ========================================================================== */
/* ---- POS top status strip (shift / connectivity) --------------------- */
.pos-register-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--pos-space-3);
    margin-bottom: var(--pos-space-3);
}
.pos-register-topbar__status {
    display: flex;
    align-items: center;
    gap: var(--pos-space-2);
    flex-wrap: wrap;
}
.pos-shift-pill,
.pos-conn-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--pos-space-2);
    padding: 0.35rem 0.8rem;
    border-radius: var(--pos-radius-pill);
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1;
    white-space: nowrap;
}
.pos-shift-pill--open { background: var(--pos-success-soft); color: var(--pos-success); }
.pos-shift-pill--closed { background: var(--pos-danger-soft); color: var(--pos-danger); }
.pos-shift-pill--pending { background: var(--pos-surface-alt); color: var(--pos-text-muted); }
.pos-conn-pill { font-size: 0.8rem; padding: 0.3rem 0.7rem; }
.pos-conn-pill--ok { background: var(--pos-success-soft); color: var(--pos-success); }
.pos-conn-pill--bad { background: var(--pos-danger-soft); color: var(--pos-danger); }
.pos-conn-pill--pending { background: var(--pos-surface-alt); color: var(--pos-text-muted); }
.pos-conn-toggle { text-decoration: none; font-size: 0.8rem; }
.pos-conn-details {
    background: var(--pos-surface);
    border: 1px solid var(--pos-border);
    border-radius: var(--pos-radius-sm);
    padding: var(--pos-space-3);
    margin-bottom: var(--pos-space-3);
}
/* ---- product image field (create/edit forms) ---------------------------- */
.pos-image-field__row {
    display: flex;
    gap: var(--pos-space-3);
    align-items: flex-start;
    flex-wrap: wrap;
}
/* A larger preview area (was 7rem) reads better as its own panel in the Add Product modal's
   two-column layout; it wraps onto its own line above the controls whenever the containing
   column is narrower than preview + controls, so this also still looks right in the tighter
   single-image-column layout the standalone edit page uses. */
.pos-image-field__preview {
    width: 9rem;
    height: 9rem;
    -o-object-fit: contain;
       object-fit: contain;
    background: var(--pos-surface-alt);
    border: 1px solid var(--pos-border);
    border-radius: var(--pos-radius-sm);
}
.pos-image-field__empty {
    margin-top: var(--pos-space-2);
    font-size: 0.8rem;
    color: var(--pos-text-faint);
}
.pos-image-field__controls { flex: 1 1 16rem; min-width: 14rem; }
/* ---- product-list thumbnail (first table column) --------------------- */
.pos-thumb-col { width: 3.5rem; }
.pos-thumb-cell {
    width: 3.5rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    vertical-align: middle;
}
.pos-thumb {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    -o-object-fit: contain;
       object-fit: contain;
    display: block;
    background: var(--pos-surface-alt);
    border: 1px solid var(--pos-border);
    border-radius: var(--pos-radius-sm);
}
/* ---- product view panel (modal + standalone detail page) ------------- */
.pos-product-view__image {
    display: flex;
    justify-content: center;
    margin-bottom: var(--pos-space-4);
}
.pos-product-view__image img {
    width: 100%;
    max-width: 240px;
    height: 190px;
    -o-object-fit: contain;
       object-fit: contain;
    background: var(--pos-surface-alt);
    border: 1px solid var(--pos-border);
    border-radius: var(--pos-radius-sm);
}
/* ---- receipt lookup (POS) --------------------------------------------- */
.pos-receipt-lookup {
    margin-top: var(--pos-space-4);
    background: var(--pos-surface);
    border: 1px solid var(--pos-border);
    border-radius: var(--pos-radius);
    box-shadow: var(--pos-shadow-sm);
    padding: var(--pos-space-3) var(--pos-space-4);
}
.pos-receipt-lookup > summary {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.pos-receipt-lookup__summary { font-weight: 600; font-size: 1rem; }
.pos-receipt-lookup__body { padding-top: var(--pos-space-3); }
.container {
    width: 100%;
}
@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}
@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}
@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}
@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}
@media (min-width: 1536px) {
    .container {
        max-width: 1536px;
    }
}
.pos-page {
    margin-left: auto;
    margin-right: auto;
    max-width: 1500px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}
.pos-page-header {
    margin-bottom: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-bottom-width: 1px;
    border-color: var(--pos-border);
    padding-bottom: 1rem;
}
.pos-page-header__titles {
    min-width: 0px;
}
.pos-page-header__title {
    margin: 0px;
    font-size: 1.5rem;
    line-height: 2rem;
    line-height: 1.25;
}
.pos-page-header__subtitle {
    margin-top: 0.25rem;
    max-width: 60ch;
    font-size: 0.925rem;
    color: var(--pos-text-muted);
}
.pos-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.pos-section-title {
    margin-bottom: 0.75rem;
    margin-top: 1.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pos-text-faint);
}
.pos-muted {
    font-size: 0.9rem;
    color: var(--pos-text-muted);
}
.pos-grid {
    display: grid;
    gap: 1rem;
}
.pos-grid--2 { grid-template-columns: minmax(0, 1fr); }
.btn {
        --bs-btn-border-radius: var(--pos-radius-sm);
        border-radius: var(--pos-radius-sm);
        padding-left: 0.9rem;
        padding-right: 0.9rem;
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
        font-weight: 600;
        transition: background-color .12s ease, border-color .12s ease, color .12s ease;
    }
.btn-sm {
    padding-left: 0.65rem;
    padding-right: 0.65rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    font-size: 0.85rem;
}
.btn-lg {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    font-size: 1rem;
}
/* Primary — accent */
.btn-primary,
    .app-btn-primary {
    border-color: var(--pos-accent);
    background-color: var(--pos-accent);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.btn-primary:hover, .btn-primary:focus,
    .app-btn-primary:hover, .app-btn-primary:focus {
    border-color: var(--pos-accent-hover);
    background-color: var(--pos-accent-hover);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.btn-outline-primary,
    .app-btn-outline {
    border-color: var(--pos-accent);
    background-color: transparent;
    color: var(--pos-accent);
}
.btn-outline-primary:hover,
    .app-btn-outline:hover {
    background-color: var(--pos-accent);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
/* Secondary / ghost — neutral */
.btn-outline-secondary,
    .app-btn-secondary {
    border-color: var(--pos-border-strong);
    color: var(--pos-text-muted);
}
.btn-outline-secondary:hover,
    .app-btn-secondary:hover {
    background-color: var(--pos-surface-alt);
    color: var(--pos-text);
}
.app-btn-ghost {
    border-color: transparent;
    background-color: transparent;
    color: var(--pos-text-muted);
}
.app-btn-ghost:hover {
    background-color: var(--pos-surface-alt);
    color: var(--pos-text);
}
/* Danger / destructive — stays semantic red */
.btn-danger,
    .app-btn-danger {
    border-color: var(--pos-danger);
    background-color: var(--pos-danger);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.btn-danger:hover,
    .app-btn-danger:hover {
        background-color: #8f1e17;
        border-color: #8f1e17;
    }
.btn-outline-danger {
    border-color: var(--pos-danger);
    color: var(--pos-danger);
}
.btn-outline-danger:hover {
    background-color: var(--pos-danger);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.btn-outline-success {
    border-color: var(--pos-success);
    color: var(--pos-success);
}
.btn-outline-success:hover {
    background-color: var(--pos-success);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.btn-outline-warning {
    border-color: var(--pos-warning);
    color: var(--pos-warning);
}
.btn-outline-warning:hover {
    background-color: var(--pos-warning);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.btn:disabled,
    .btn.disabled {
    cursor: not-allowed;
    opacity: 0.55;
}
/* Icon-only helper */
.app-btn-icon {
    display: inline-flex;
    height: 2.25rem;
    width: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--pos-radius-sm);
    border-width: 1px;
    border-color: var(--pos-border-strong);
    background-color: var(--pos-surface);
    color: var(--pos-text-muted);
}
.app-btn-icon:hover {
    border-color: var(--pos-accent);
    color: var(--pos-accent);
}
.form-label,
    .app-label {
    margin-bottom: 0.25rem;
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--pos-text-muted);
}
.form-control,
    .form-select,
    .app-input,
    .app-select {
    border-radius: var(--pos-radius-sm);
    color: var(--pos-text);
        border-color: var(--pos-border-strong);
}
.form-control::-moz-placeholder, .app-input::-moz-placeholder { color: var(--pos-text-faint); }
.form-control::placeholder,
    .app-input::placeholder { color: var(--pos-text-faint); }
.form-control:focus,
    .form-select:focus,
    .app-input:focus,
    .app-select:focus {
        border-color: var(--pos-accent);
        box-shadow: var(--pos-focus-ring);
    }
.form-control:disabled,
    .form-select:disabled,
    .form-control[readonly] {
    color: var(--pos-text-faint);
        background-color: var(--pos-surface-alt);
}
.form-text,
    .app-help {
    font-size: 0.8rem;
    color: var(--pos-text-faint);
}
/* Checkbox / radio — accent tick + accent focus ring */
.form-check-input:checked {
        background-color: var(--pos-accent);
        border-color: var(--pos-accent);
    }
.form-check-input:focus {
        border-color: var(--pos-accent);
        box-shadow: var(--pos-focus-ring);
    }
/* Validation states (Blazor adds .valid / .invalid) */
.form-control.invalid,
    .form-select.invalid,
    .invalid > .form-control {
        border-color: var(--pos-danger);
    }
.validation-message,
    .field-validation-error,
    .app-field-error {
    margin-top: 0.25rem;
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--pos-danger);
}
.input-group .btn { border-radius: 0 var(--pos-radius-sm) var(--pos-radius-sm) 0; }
.input-group .form-control:first-child { border-radius: var(--pos-radius-sm) 0 0 var(--pos-radius-sm); }
/* Standard, not-full-width input sizes */
.pos-input-sm {
    max-width: 12rem;
}
.pos-input-md {
    max-width: 20rem;
}
.pos-input-lg {
    max-width: 28rem;
}
.pos-table-wrap,
    .app-table-wrap {
    overflow-x: auto;
    border-radius: var(--pos-radius-sm);
    border-width: 1px;
    border-color: var(--pos-border);
}
.table,
    .app-table {
        --bs-table-bg: transparent;
        margin: 0px;
        font-size: 0.9rem;
        color: var(--pos-text);
    }
.table > thead > tr > th,
    .app-table > thead > tr > th {
    white-space: nowrap;
    background-color: var(--pos-surface-alt);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pos-text-muted);
        border-bottom: 1px solid var(--pos-border-strong);
}
.table > tbody > tr > td,
    .table > tfoot > tr > th,
    .table > tfoot > tr > td,
    .app-table > tbody > tr > td {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    vertical-align: middle;
        border-bottom: 1px solid var(--pos-border);
}
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table > tbody > tr:hover > td { background: var(--pos-surface-alt); }
.table td.text-end,
    .table th.text-end { font-variant-numeric: tabular-nums; }
.table > tfoot {
    font-weight: 600;
        background: var(--pos-surface-alt);
}
/* Row highlight (payment-history table) */
.table-warning,
    .table-warning > td { background: var(--pos-warning-soft) !important; }
.card,
    .pos-card,
    .app-card {
    border-radius: var(--pos-radius);
    border-width: 1px;
    border-color: var(--pos-border);
    background-color: var(--pos-surface);
        box-shadow: var(--pos-shadow-sm);
}
.card {
    margin-bottom: 0px;
}
.card-body,
    .pos-card__body,
    .app-card__body {
    padding: 1.5rem;
}
.pos-card__header,
    .app-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom-width: 1px;
    border-color: var(--pos-border);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.pos-card__title,
    .card-title,
    .app-card__title {
    margin-bottom: 0.75rem;
    font-size: 1.05rem;
    font-weight: 600;
}
.pos-card__header .pos-card__title,
    .pos-card__header .card-title {
    margin: 0px;
}
/* Key/value grid */
.pos-kv {
    margin: 0px;
    display: grid;
    -moz-column-gap: 1rem;
         column-gap: 1rem;
    row-gap: 0.5rem;
    font-size: 0.9rem;
        grid-template-columns: max-content 1fr;
}
.pos-kv dt {
    font-weight: 500;
    color: var(--pos-text-muted);
}
.pos-kv dd {
    margin: 0px;
    text-align: right;
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
    color: var(--pos-text);
}
.pos-kv dd.pos-kv__strong {
    font-weight: 600;
}
.pos-kv--recon dt.pos-kv__strong,
    .pos-kv--recon dd.pos-kv__strong {
        border-top: 1px solid var(--pos-border);
        padding-top: 0.5rem;
    }
.pos-kv--recon .pos-recon-refund {
    font-style: italic;
}
.pos-kv--recon dt.pos-recon-refund {
    padding-left: 0.5rem;
        border-left: 3px solid var(--pos-warning);
}
/* Big single total row */
.pos-total {
    margin-top: 0.75rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    border-radius: var(--pos-radius-sm);
    border-width: 1px;
    border-color: var(--pos-border);
    background-color: var(--pos-surface-alt);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.pos-total__label {
    font-weight: 600;
    color: var(--pos-text-muted);
}
.pos-total__value {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
    color: var(--pos-text);
}
/* Metric grid + metric card */
.pos-metric-grid {
    display: grid;
    gap: 0.75rem;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.pos-metric,
    .app-metric {
    border-radius: var(--pos-radius-sm);
    border-width: 1px;
    border-color: var(--pos-border);
    background-color: var(--pos-surface-alt);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.pos-metric__label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pos-text-faint);
}
.pos-metric__value {
    margin-top: 0.25rem;
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
    color: var(--pos-text);
}
/* Status card (StatusCard.razor) */
.pos-status-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border-radius: var(--pos-radius-sm);
    border-width: 1px;
    border-color: var(--pos-border);
    background-color: var(--pos-surface);
    padding: 1rem;
        border-left-width: 5px;
}
.pos-status-card__icon {
    font-size: 1.25rem;
    line-height: 1;
}
.pos-status-card__body {
    min-width: 0px;
}
.pos-status-card__title {
    margin-bottom: 0.25rem;
    font-weight: 600;
}
.pos-status-card__text {
    margin: 0px;
    font-size: 0.9rem;
    color: var(--pos-text-muted);
}
.pos-status-card--success { border-left-color: var(--pos-success); background: var(--pos-success-soft); }
.pos-status-card--warning { border-left-color: var(--pos-warning); background: var(--pos-warning-soft); }
.pos-status-card--danger  { border-left-color: var(--pos-danger);  background: var(--pos-danger-soft); }
.pos-status-card--neutral { border-left-color: var(--pos-border-strong); background: var(--pos-surface-alt); }
.pos-status-card--info    { border-left-color: var(--pos-info);    background: var(--pos-info-soft); }
/* Grids used by filter rows / narrow forms */
.pos-filter-grid {
    display: grid;
    gap: 0.75rem;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.pos-form-grid {
    display: grid;
    max-width: 720px;
    gap: 0.75rem;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.badge,
    .app-badge {
    border-radius: 9999px;
    padding-left: 0.7em;
    padding-right: 0.7em;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.text-bg-success   { background-color: var(--pos-success) !important; color: #fff !important; }
.text-bg-warning   { background-color: var(--pos-warning) !important; color: #fff !important; }
.text-bg-danger    { background-color: var(--pos-danger) !important; color: #fff !important; }
.text-bg-info      { background-color: var(--pos-info) !important; color: #fff !important; }
.text-bg-secondary { background-color: var(--pos-text-faint) !important; color: #fff !important; }
.app-badge--success { background: var(--pos-success-soft); color: var(--pos-success); }
.app-badge--warning { background: var(--pos-warning-soft); color: var(--pos-warning); }
.app-badge--danger  { background: var(--pos-danger-soft);  color: var(--pos-danger); }
.app-badge--neutral { background: var(--pos-surface-alt);  color: var(--pos-text-muted); }
.alert {
    border-radius: var(--pos-radius-sm);
    font-size: 0.9rem;
        border: 1px solid transparent;
}
.alert-success   { background: var(--pos-success-soft); border-color: #bfe3cc; color: #125c33; }
.alert-warning   { background: var(--pos-warning-soft); border-color: #ecd6ac; color: #7d4f00; }
.alert-danger    { background: var(--pos-danger-soft);  border-color: #ecbdba; color: #862019; }
.alert-secondary { background: var(--pos-surface-alt);  border-color: var(--pos-border); color: var(--pos-text-muted); }
.pos-toolbar,
    .app-toolbar {
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    border-radius: var(--pos-radius-sm);
    border-width: 1px;
    border-color: var(--pos-border);
    background-color: var(--pos-surface-alt);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.pos-toolbar__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.pos-toolbar__spacer {
    flex: 1 1 0%;
}
/* Destructive confirmation panel (ConfirmPanel.razor) */
.pos-confirm {
    border-radius: var(--pos-radius-sm);
    padding: 1rem;
        border: 1px solid var(--pos-danger);
        background: var(--pos-danger-soft);
}
.pos-confirm__title {
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--pos-danger);
}
.pos-confirm__text {
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}
/* Empty state (EmptyState.razor) */
.pos-empty,
    .app-empty {
    border-radius: var(--pos-radius-sm);
    background-color: var(--pos-surface-alt);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    text-align: center;
    color: var(--pos-text-muted);
        border: 1px dashed var(--pos-border-strong);
}
.pos-empty__title {
    margin-bottom: 0.25rem;
    font-weight: 600;
    color: var(--pos-text);
}
.pos-empty__text {
    margin: 0px;
    font-size: 0.9rem;
}
/* Quick-action tiles (Home / Settings landing) */
.pos-actions {
    display: grid;
    gap: 0.75rem;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.pos-action-tile {
    display: block;
    border-radius: var(--pos-radius-sm);
    border-width: 1px;
    border-color: var(--pos-border);
    background-color: var(--pos-surface);
    padding: 1rem;
    color: var(--pos-text);
    text-decoration-line: none;
        transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.pos-action-tile:hover {
    --tw-translate-y: -1px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    color: var(--pos-text);
        border-color: var(--pos-accent);
        box-shadow: var(--pos-shadow);
}
.pos-action-tile__title {
    display: block;
    font-weight: 600;
}
.pos-action-tile__text {
    margin-top: 0.25rem;
    display: block;
    font-size: 0.85rem;
    color: var(--pos-text-muted);
}
/* Pagination (Pagination.razor) */
.pos-pagination {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.pos-pagination .btn-group .btn.disabled {
    opacity: 1;
        color: var(--pos-text-muted);
}
/* active page marker follows the accent */
.pos-pagination__current,
    .pagination .page-item.active .page-link {
        background: var(--pos-accent);
        border-color: var(--pos-accent);
        color: #fff;
    }
.pos-modal,
    .app-modal {
    position: fixed;
    inset: 0px;
    z-index: 1050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.pos-modal__backdrop,
    .app-modal__backdrop {
    position: fixed;
    inset: 0px;
        background: rgba(20, 32, 46, 0.45);
}
.pos-modal__dialog,
    .app-modal__dialog {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    flex-direction: column;
    border-radius: var(--pos-radius);
    border-width: 1px;
    border-color: var(--pos-border);
    background-color: var(--pos-surface);
        max-height: calc(100vh - 6rem);
        box-shadow: 0 12px 44px rgba(20, 32, 46, 0.28);
}
.pos-modal__dialog--sm {
    max-width: 460px;
}
.pos-modal__dialog--md {
    max-width: 640px;
}
.pos-modal__dialog--lg {
    max-width: 860px;
}
/* Data-heavy modals (e.g. a product-scoped movement ledger with several columns) need more
       breathing room than --lg without going full-screen. */
.pos-modal__dialog--xl {
    max-width: 1040px;
}
.pos-modal__header,
    .app-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom-width: 1px;
    border-color: var(--pos-border);
    padding: 1rem;
}
.pos-modal__header-text {
    min-width: 0px;
}
.pos-modal__title {
    margin: 0px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
    font-weight: 600;
}
.pos-modal__subtitle {
    margin-bottom: 0px;
    margin-top: 0.25rem;
    font-size: 0.82rem;
    color: var(--pos-text-muted);
}
/* Optional small icon chip before a modal title (PosModal's Icon parameter) — dynamic accent,
       not a hard-coded brand color, so it follows Settings > Appearance like every other
       theme-driven UI element. */
.pos-modal__icon {
    display: inline-flex;
    height: 1.75rem;
    width: 1.75rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--pos-radius-sm);
    font-size: 0.95rem;
        background: var(--pos-accent-soft);
        color: var(--pos-accent-hover);
        border: 1px solid var(--pos-accent-border);
}
.pos-modal__body,
    .app-modal__body {
    overflow-y: auto;
    padding: 1rem;
}
/* A modal whose body is otherwise sparse (e.g. Product Detail's "Add Supplier": one label plus
       one SearchableSelect trigger) has almost no natural content height, so the flex-column
       dialog collapses around it. SearchableSelect's own dropdown panel is `position: absolute`
       relative to an ancestor *inside* this `overflow-y: auto` body — and per the CSS Overflow
       spec, an `overflow: auto` container's scrollable region includes any absolutely-positioned
       descendant that visually extends past its box, regardless of z-index. So once the body has
       collapsed to a sliver, opening the dropdown (up to 280px, see SearchableSelect.razor.css)
       gets clipped by the body's own tiny box and forces a second, unreadable internal scrollbar.
       This min-height applies to EVERY modal body that embeds a SearchableSelect (not just Add
       Supplier), and only ever grows a box that would otherwise be shorter — a modal whose real
       content is already taller (Add Product's full form, etc.) is unaffected. 400px comfortably
       fits a label + trigger + the dropdown's full 280px panel without the body ever needing to
       scroll for it. */
.pos-modal__body:has(.searchable-select),
    .app-modal__body:has(.searchable-select) {
        min-height: 400px;
    }
.pos-modal__footer,
    .app-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    border-top-width: 1px;
    border-color: var(--pos-border);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.app-breadcrumb {
    margin-bottom: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.82rem;
    color: var(--pos-text-muted);
}
.app-breadcrumb a {
    color: var(--pos-text-muted);
    text-decoration-line: none;
}
.app-breadcrumb a:hover {
    color: var(--pos-accent);
    text-decoration-line: underline;
}
.app-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom-width: 1px;
    border-color: var(--pos-border);
}
.app-tab {
    margin-bottom: -1px;
    cursor: pointer;
    border-top-left-radius: var(--pos-radius-sm);
    border-top-right-radius: var(--pos-radius-sm);
    border-bottom-width: 2px;
    border-color: transparent;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--pos-text-muted);
}
.app-tab:hover {
    color: var(--pos-accent);
}
.app-tab.is-active {
    color: var(--pos-accent);
        border-bottom-color: var(--pos-accent);
}
/* ---- page shell (light workspace) ---------------------------------- */
.pos-register-page {
    display: flex;
    min-height: calc(100vh - 4rem);
    flex-direction: column;
    gap: 0.75rem;
    color: var(--pos-text);
}
/* ---- operational header ------------------------------------------------ */
.pos-reg-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    -moz-column-gap: 1rem;
         column-gap: 1rem;
    row-gap: 0.5rem;
    border-radius: var(--pos-radius);
    border-width: 1px;
    border-color: var(--pos-border);
    background-color: var(--pos-surface);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    --tw-shadow: var(--pos-shadow-sm);
    --tw-shadow-colored: var(--pos-shadow-sm);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.pos-reg-header__brand {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.pos-reg-header__mark {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.pos-reg-header__name {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--pos-text);
}
.pos-reg-header__title {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: var(--pos-text-muted);
}
.pos-reg-header__env {
    border-radius: 9999px;
    border-width: 1px;
    border-color: var(--pos-border);
    background-color: var(--pos-surface-alt);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    color: var(--pos-text-muted);
}
.pos-reg-header__ctx {
    display: flex;
    flex: 1 1 0%;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.pos-reg-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
    border-radius: 9999px;
    border-width: 1px;
    border-color: var(--pos-border);
    background-color: var(--pos-surface-alt);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.pos-reg-chip__k {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--pos-text-faint);
}
.pos-reg-chip__v {
    font-weight: 700;
    color: var(--pos-text);
}
.pos-reg-chip__sub {
    font-weight: 500;
    color: var(--pos-text-muted);
}
.pos-reg-header__clock {
    font-size: 0.8rem;
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
    color: var(--pos-text-muted);
}
.pos-reg-header__keys {
    display: flex;
    gap: 0.375rem;
}
.pos-key {
    border-radius: var(--pos-radius-sm);
    border-width: 1px;
    border-color: var(--pos-border);
    background-color: var(--pos-surface-alt);
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--pos-text-muted);
}
/* ---- command bar (search + scan + quick actions) --------------------- */
.pos-reg-cmdbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    border-radius: var(--pos-radius);
    border-width: 1px;
    border-color: var(--pos-border);
    background-color: var(--pos-surface);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    --tw-shadow: var(--pos-shadow-sm);
    --tw-shadow-colored: var(--pos-shadow-sm);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.pos-reg-cmdbar__search {
    max-width: 46rem;
    flex: 1 1 0%;
    flex-basis: 26rem;
}
.pos-reg-cmdbar__hint {
    display: none;
    white-space: nowrap;
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    color: var(--pos-text-faint);
}
@media (min-width: 640px) {
    .pos-reg-cmdbar__hint {
        display: inline-flex;
    }
}
.pos-reg-cmdbar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.pos-catalogue__scan-msg {
    border-radius: var(--pos-radius-sm);
    background-color: var(--pos-surface-alt);
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--pos-text);
}
.pos-catalogue__scan-msg--bar {
    border-width: 1px;
    border-color: var(--pos-border);
}
/* ---- register split: catalogue (left) + current sale (right) -------- */
/* Cart gets a responsive range, not a single fixed width: it can grow up to
       460px when the register has room (every desktop target we support does),
       but never drops below 380px, which is what the cart-line column math in
       this file needs to keep the product name column above ~140px — see the
       "Current Sale" investigation report for the exact numbers. */
.pos-register {
    display: grid;
    align-items: flex-start;
    gap: 1rem;
        grid-template-columns: minmax(0, 1fr) minmax(380px, 460px);
}
.pos-catalogue,
    .pos-cart {
    display: flex;
    min-height: 30rem;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--pos-radius);
    border-width: 1px;
    border-color: var(--pos-border);
    background-color: var(--pos-surface);
    --tw-shadow: var(--pos-shadow-sm);
    --tw-shadow-colored: var(--pos-shadow-sm);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        height: calc(100vh - 19rem);
}
/* ---- category pills ------------------------------------------------- */
.pos-cat-tabs {
    display: flex;
    flex: none;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    border-bottom-width: 1px;
    border-color: var(--pos-border);
    padding: 0.75rem;
        scrollbar-width: thin;
        overscroll-behavior-x: contain;
}
.pos-cat-tabs > * {
    flex: none;
}
.pos-cat-tab {
    display: inline-flex;
    cursor: pointer;
    align-items: center;
    white-space: nowrap;
    border-radius: 9999px;
    border-width: 1px;
    border-color: var(--pos-border-strong);
    background-color: var(--pos-surface);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: var(--pos-text-muted);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.pos-cat-tab:hover {
    border-color: var(--pos-accent);
    color: var(--pos-accent);
}
/* Selected "All" and selected category pill — configured accent, white text. */
.pos-cat-tab.is-active {
    border-color: var(--pos-accent);
    background-color: var(--pos-accent);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.pos-cat-tab.is-active:hover {
    border-color: var(--pos-accent-hover);
    background-color: var(--pos-accent-hover);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.pos-cat-tab:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
        box-shadow: 0 0 0 3px var(--pos-accent-border);
}
/* ---- product grid + cards ----------------------------------------- */
.pos-catalogue__body {
    min-height: 0px;
    flex: 1 1 0%;
    overflow-y: auto;
    padding: 0.75rem;
}
.pos-catalogue__grid {
    display: grid;
    gap: 0.75rem;
        grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}
.pos-card {
    display: flex;
    cursor: pointer;
    flex-direction: column;
    gap: 0.5rem;
    border-radius: var(--pos-radius-sm);
    border-width: 1px;
    border-color: var(--pos-border);
    background-color: var(--pos-surface);
    padding: 0.5rem;
    text-align: left;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    transition-property: border-color,box-shadow,transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 100ms;
}
.pos-card:hover:not(:disabled) {
    --tw-translate-y: -1px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    border-color: var(--pos-accent);
    --tw-shadow: var(--pos-shadow-sm);
    --tw-shadow-colored: var(--pos-shadow-sm);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.pos-card:active:not(:disabled) {
    --tw-translate-y: 1px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.pos-card:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
        box-shadow: 0 0 0 3px var(--pos-accent-border);
}
.pos-card:disabled,
    .pos-card--unavailable {
    cursor: not-allowed;
    opacity: 0.55;
}
.pos-card--added {
    border-color: var(--pos-success);
        box-shadow: 0 0 0 2px var(--pos-success-soft);
}
.pos-card__media {
    position: relative;
    display: flex;
    aspect-ratio: 1 / 1;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--pos-radius-sm);
    background-color: var(--pos-surface-alt);
}
.pos-card__img {
    height: 100%;
    width: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}
.pos-card__badge {
    position: absolute;
    left: 0.375rem;
    top: 0.375rem;
    border-radius: var(--pos-radius-sm);
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.66rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
        background: color-mix(in srgb, var(--pos-text) 85%, transparent);
}
.pos-card__stock {
    position: absolute;
    right: 0.375rem;
    top: 0.375rem;
    border-radius: var(--pos-radius-sm);
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.25;
}
.pos-card__stock--ok {
    background-color: var(--pos-success-soft);
    color: var(--pos-success);
}
.pos-card__stock--low {
    background-color: var(--pos-warning-soft);
    color: var(--pos-warning);
}
.pos-card__stock--out {
    background-color: var(--pos-danger-soft);
    color: var(--pos-danger);
}
.pos-card__name {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--pos-text);
}
.pos-card__meta {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}
.pos-card__sku {
    font-size: 0.72rem;
    color: var(--pos-text-faint);
}
.pos-card__price {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--pos-text);
}
/* ---- current sale panel ------------------------------------------- */
.pos-cart__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom-width: 1px;
    border-color: var(--pos-border);
    padding: 0.75rem;
}
.pos-cart__scroll {
    min-height: 0px;
    flex: 1 1 0%;
    overflow-y: auto;
    padding: 0.75rem;
}
.pos-cart__empty {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: center;
}
.pos-cart__footer {
    border-top-width: 1px;
    border-color: var(--pos-border);
    background-color: var(--pos-surface-alt);
    padding: 0.75rem;
}
.pos-cart-lines {
    margin: 0px;
    list-style-type: none;
    padding: 0px;
}
/* Desktop cart-line grid: the product column is the ONLY flexible (fr)
       track and carries a 140px floor so it can never collapse to near-zero.
       The other four columns are `minmax(<realistic-min>, auto)` — sized to
       what their content actually needs (a touch-friendly qty control, a
       currency amount, the remove button), never an equal fraction, and never
       a bigger fixed box than necessary. Because every .pos-cart-line (and the
       header row) is its own independent grid, giving each of those four
       columns the same realistic minimum is what keeps them visually aligned
       row-to-row instead of jittering with digit count. */
.pos-cart-line,
    .pos-cart-lines__head {
    display: grid;
    align-items: center;
    gap: 0.5rem;
    border-bottom-width: 1px;
    border-color: var(--pos-border);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
        grid-template-columns:
            minmax(140px, 1fr)
            minmax(3.5rem, auto)
            minmax(6.5rem, auto)
            minmax(4rem, auto)
            minmax(2.25rem, auto);
}
.pos-cart-lines__head {
    border-bottom-width: 2px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--pos-text-faint);
}
/* Product name — wraps normally at word boundaries (never mid-word/
       character-by-character) and never grows the row past 2 lines. */
.pos-cart-line__name {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-width: 0px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--pos-text);
    overflow-wrap: normal;
    word-break: normal;
}
/* Monetary values never wrap, on any width. */
.pos-cart-line__unit,
    .pos-cart-line__total {
    white-space: nowrap;
    font-size: 0.85rem;
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.pos-cart-line__total {
    font-weight: 700;
}
/* Quantity control — kept together, never compressed. */
.pos-cart-line__qty {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}
.pos-qty-btn {
    height: 2rem;
    width: 2rem;
    flex: none;
    border-radius: var(--pos-radius-sm);
    border-width: 1px;
    border-color: var(--pos-border-strong);
    background-color: var(--pos-surface);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    color: var(--pos-text);
}
.pos-qty-btn:hover:not(:disabled) {
    border-color: var(--pos-accent);
    color: var(--pos-accent);
}
.pos-qty-btn:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}
.pos-qty-btn:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
        box-shadow: 0 0 0 3px var(--pos-accent-border);
}
.pos-qty-value {
    min-width: 1.75rem;
    text-align: center;
    font-weight: 700;
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
/* ---- cart summary ------------------------------------------------- */
.pos-cart-totals {
    margin: 0px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.pos-cart-totals > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}
.pos-cart-totals dt {
    margin: 0px;
    font-weight: 500;
    color: var(--pos-text-muted);
}
.pos-cart-totals dd {
    margin: 0px;
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.pos-cart-totals__grand dt {
    font-weight: 700;
    color: var(--pos-text);
}
.pos-cart-totals__grand dd {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pos-text);
}
.pos-cart-totals__note {
    font-size: 0.75rem;
    color: var(--pos-text-muted);
}
/* Review & Pay — prominent, follows the configured accent. */
.pos-pay-btn {
    width: 100%;
    border-radius: var(--pos-radius-sm);
    border-width: 0px;
    background-color: var(--pos-accent);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.025em;
    color: var(--pos-accent-text);
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
        box-shadow: 0 6px 18px var(--pos-accent-border);
}
.pos-pay-btn:hover:not(:disabled) {
    background-color: var(--pos-accent-hover);
    color: var(--pos-accent-text);
}
.pos-pay-btn:disabled {
    cursor: not-allowed;
    background-color: var(--pos-border);
    color: var(--pos-text-faint);
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.pos-pay-btn:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
        box-shadow: 0 0 0 3px var(--pos-accent-border);
}
/* ---- status footer --------------------------------------------------- */
.pos-reg-footer {
    position: sticky;
    bottom: 0px;
    z-index: 5;
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    -moz-column-gap: 1rem;
         column-gap: 1rem;
    row-gap: 0.5rem;
    border-radius: var(--pos-radius);
    border-width: 1px;
    border-color: var(--pos-border);
    background-color: var(--pos-surface);
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.78rem;
    color: var(--pos-text-muted);
    --tw-shadow: var(--pos-shadow-sm);
    --tw-shadow-colored: var(--pos-shadow-sm);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.pos-reg-footer__item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.pos-reg-footer__k {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--pos-text-faint);
}
.pos-reg-footer__item--push {
    margin-left: auto;
}
.pos-reg-footer__item.is-ok .pos-reg-footer__k {
    color: var(--pos-success);
}
.pos-reg-footer__item.is-bad {
    color: var(--pos-danger);
}
.pos-reg-footer__toggle {
    color: var(--pos-text-muted);
    text-decoration-line: underline;
}
.pos-appearance-preview {
    border-radius: var(--pos-radius-sm);
    border-width: 1px;
    border-color: var(--pos-border);
    background-color: var(--pos-surface-alt);
    padding: 1rem;
}
.pos-appearance-preview__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}
.pos-appearance-preview__btn {
    cursor: default;
    border-radius: var(--pos-radius-sm);
    padding-left: 0.9rem;
    padding-right: 0.9rem;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
        border: 1px solid transparent;
}
.pos-appearance-preview__pill {
    border-radius: 9999px;
    padding-left: 0.95rem;
    padding-right: 0.95rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
        border: 1px solid transparent;
}
.pos-appearance-preview__badge {
    border-radius: 9999px;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
    font-size: 0.78rem;
    font-weight: 700;
        border: 1px solid;
}
.pos-color-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.pos-color-field .form-control-color {
    flex: none;
    padding: 0.15rem;
        width: 2.5rem;
}
.visible {
    visibility: visible;
}
.invisible {
    visibility: hidden;
}
.collapse {
    visibility: collapse;
}
.static {
    position: static;
}
.fixed {
    position: fixed;
}
.absolute {
    position: absolute;
}
.relative {
    position: relative;
}
.sticky {
    position: sticky;
}
.inset-0 {
    inset: 0px;
}
.bottom-0 {
    bottom: 0px;
}
.left-1\.5 {
    left: 0.375rem;
}
.right-1\.5 {
    right: 0.375rem;
}
.top-1\.5 {
    top: 0.375rem;
}
.z-\[1050\] {
    z-index: 1050;
}
.z-\[1\] {
    z-index: 1;
}
.z-\[5\] {
    z-index: 5;
}
.m-0 {
    margin: 0px;
}
.m-3 {
    margin: 0.75rem;
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.my-3 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}
.my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.-mb-px {
    margin-bottom: -1px;
}
.mb-0 {
    margin-bottom: 0px;
}
.mb-1 {
    margin-bottom: 0.25rem;
}
.mb-2 {
    margin-bottom: 0.5rem;
}
.mb-3 {
    margin-bottom: 0.75rem;
}
.mb-4 {
    margin-bottom: 1rem;
}
.mb-6 {
    margin-bottom: 1.5rem;
}
.me-1 {
    margin-inline-end: 0.25rem;
}
.me-2 {
    margin-inline-end: 0.5rem;
}
.ms-1 {
    margin-inline-start: 0.25rem;
}
.ms-2 {
    margin-inline-start: 0.5rem;
}
.mt-0 {
    margin-top: 0px;
}
.mt-1 {
    margin-top: 0.25rem;
}
.mt-2 {
    margin-top: 0.5rem;
}
.mt-3 {
    margin-top: 0.75rem;
}
.mt-6 {
    margin-top: 1.5rem;
}
.mt-auto {
    margin-top: auto;
}
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.block {
    display: block;
}
.inline {
    display: inline;
}
.flex {
    display: flex;
}
.inline-flex {
    display: inline-flex;
}
.table {
    display: table;
}
.grid {
    display: grid;
}
.hidden {
    display: none;
}
.aspect-square {
    aspect-ratio: 1 / 1;
}
.h-7 {
    height: 1.75rem;
}
.h-8 {
    height: 2rem;
}
.h-9 {
    height: 2.25rem;
}
.h-full {
    height: 100%;
}
.min-h-0 {
    min-height: 0px;
}
.min-h-\[30rem\] {
    min-height: 30rem;
}
.min-h-\[calc\(100vh-4rem\)\] {
    min-height: calc(100vh - 4rem);
}
.w-7 {
    width: 1.75rem;
}
.w-8 {
    width: 2rem;
}
.w-9 {
    width: 2.25rem;
}
.w-full {
    width: 100%;
}
.min-w-0 {
    min-width: 0px;
}
.min-w-\[1\.75rem\] {
    min-width: 1.75rem;
}
.max-w-\[1040px\] {
    max-width: 1040px;
}
.max-w-\[12rem\] {
    max-width: 12rem;
}
.max-w-\[1500px\] {
    max-width: 1500px;
}
.max-w-\[20rem\] {
    max-width: 20rem;
}
.max-w-\[28rem\] {
    max-width: 28rem;
}
.max-w-\[460px\] {
    max-width: 460px;
}
.max-w-\[46rem\] {
    max-width: 46rem;
}
.max-w-\[60ch\] {
    max-width: 60ch;
}
.max-w-\[640px\] {
    max-width: 640px;
}
.max-w-\[720px\] {
    max-width: 720px;
}
.max-w-\[860px\] {
    max-width: 860px;
}
.flex-1 {
    flex: 1 1 0%;
}
.flex-none {
    flex: none;
}
.shrink-0 {
    flex-shrink: 0;
}
.grow {
    flex-grow: 1;
}
.basis-\[26rem\] {
    flex-basis: 26rem;
}
.-translate-y-px {
    --tw-translate-y: -1px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-default {
    cursor: default;
}
.cursor-not-allowed {
    cursor: not-allowed;
}
.cursor-pointer {
    cursor: pointer;
}
.resize {
    resize: both;
}
.list-none {
    list-style-type: none;
}
.flex-col {
    flex-direction: column;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-nowrap {
    flex-wrap: nowrap;
}
.items-start {
    align-items: flex-start;
}
.items-end {
    align-items: flex-end;
}
.items-center {
    align-items: center;
}
.items-baseline {
    align-items: baseline;
}
.justify-end {
    justify-content: flex-end;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}
.gap-1 {
    gap: 0.25rem;
}
.gap-1\.5 {
    gap: 0.375rem;
}
.gap-2 {
    gap: 0.5rem;
}
.gap-3 {
    gap: 0.75rem;
}
.gap-4 {
    gap: 1rem;
}
.gap-x-4 {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
}
.gap-y-2 {
    row-gap: 0.5rem;
}
.overflow-hidden {
    overflow: hidden;
}
.overflow-x-auto {
    overflow-x: auto;
}
.overflow-y-auto {
    overflow-y: auto;
}
.overflow-y-hidden {
    overflow-y: hidden;
}
.whitespace-nowrap {
    white-space: nowrap;
}
.text-nowrap {
    text-wrap: nowrap;
}
.rounded-full {
    border-radius: 9999px;
}
.rounded-pos {
    border-radius: var(--pos-radius);
}
.rounded-pos-sm {
    border-radius: var(--pos-radius-sm);
}
.rounded-t-pos-sm {
    border-top-left-radius: var(--pos-radius-sm);
    border-top-right-radius: var(--pos-radius-sm);
}
.border {
    border-width: 1px;
}
.border-0 {
    border-width: 0px;
}
.border-b {
    border-bottom-width: 1px;
}
.border-b-2 {
    border-bottom-width: 2px;
}
.border-t {
    border-top-width: 1px;
}
.border-accent {
    border-color: var(--pos-accent);
}
.border-accent-hover {
    border-color: var(--pos-accent-hover);
}
.border-pos-border {
    border-color: var(--pos-border);
}
.border-pos-border-strong {
    border-color: var(--pos-border-strong);
}
.border-pos-danger {
    border-color: var(--pos-danger);
}
.border-pos-success {
    border-color: var(--pos-success);
}
.border-pos-warning {
    border-color: var(--pos-warning);
}
.border-transparent {
    border-color: transparent;
}
.bg-accent {
    background-color: var(--pos-accent);
}
.bg-accent-hover {
    background-color: var(--pos-accent-hover);
}
.bg-pos-border {
    background-color: var(--pos-border);
}
.bg-pos-danger {
    background-color: var(--pos-danger);
}
.bg-pos-danger-soft {
    background-color: var(--pos-danger-soft);
}
.bg-pos-success {
    background-color: var(--pos-success);
}
.bg-pos-success-soft {
    background-color: var(--pos-success-soft);
}
.bg-pos-surface {
    background-color: var(--pos-surface);
}
.bg-pos-surface-alt {
    background-color: var(--pos-surface-alt);
}
.bg-pos-warning {
    background-color: var(--pos-warning);
}
.bg-pos-warning-soft {
    background-color: var(--pos-warning-soft);
}
.bg-transparent {
    background-color: transparent;
}
.p-0 {
    padding: 0px;
}
.p-2 {
    padding: 0.5rem;
}
.p-3 {
    padding: 0.75rem;
}
.p-4 {
    padding: 1rem;
}
.p-\[0\.15rem\] {
    padding: 0.15rem;
}
.px-1\.5 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}
.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.px-\[0\.65rem\] {
    padding-left: 0.65rem;
    padding-right: 0.65rem;
}
.px-\[0\.6rem\] {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}
.px-\[0\.7em\] {
    padding-left: 0.7em;
    padding-right: 0.7em;
}
.px-\[0\.95rem\] {
    padding-left: 0.95rem;
    padding-right: 0.95rem;
}
.px-\[0\.9rem\] {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
}
.px-\[1\.1rem\] {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
}
.py-0\.5 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}
.py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}
.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.py-\[0\.15rem\] {
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}
.py-\[0\.3em\] {
    padding-top: 0.3em;
    padding-bottom: 0.3em;
}
.py-\[0\.3rem\] {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}
.py-\[0\.45rem\] {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}
.py-\[0\.4rem\] {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}
.py-\[0\.55rem\] {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}
.py-\[0\.6rem\] {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}
.pt-6 {
    padding-top: 1.5rem;
}
.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.text-start {
    text-align: start;
}
.text-end {
    text-align: end;
}
.align-middle {
    vertical-align: middle;
}
.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}
.text-\[0\.66rem\] {
    font-size: 0.66rem;
}
.text-\[0\.68rem\] {
    font-size: 0.68rem;
}
.text-\[0\.72rem\] {
    font-size: 0.72rem;
}
.text-\[0\.75rem\] {
    font-size: 0.75rem;
}
.text-\[0\.78rem\] {
    font-size: 0.78rem;
}
.text-\[0\.82rem\] {
    font-size: 0.82rem;
}
.text-\[0\.85rem\] {
    font-size: 0.85rem;
}
.text-\[0\.88rem\] {
    font-size: 0.88rem;
}
.text-\[0\.8rem\] {
    font-size: 0.8rem;
}
.text-\[0\.925rem\] {
    font-size: 0.925rem;
}
.text-\[0\.92rem\] {
    font-size: 0.92rem;
}
.text-\[0\.95rem\] {
    font-size: 0.95rem;
}
.text-\[0\.9rem\] {
    font-size: 0.9rem;
}
.text-\[1\.05rem\] {
    font-size: 1.05rem;
}
.text-\[1\.25rem\] {
    font-size: 1.25rem;
}
.text-\[1\.35rem\] {
    font-size: 1.35rem;
}
.text-\[1rem\] {
    font-size: 1rem;
}
.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}
.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}
.font-bold {
    font-weight: 700;
}
.font-extrabold {
    font-weight: 800;
}
.font-medium {
    font-weight: 500;
}
.font-semibold {
    font-weight: 600;
}
.uppercase {
    text-transform: uppercase;
}
.italic {
    font-style: italic;
}
.tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-none {
    line-height: 1;
}
.tracking-\[0\.02em\] {
    letter-spacing: 0.02em;
}
.tracking-\[0\.04em\] {
    letter-spacing: 0.04em;
}
.tracking-\[0\.06em\] {
    letter-spacing: 0.06em;
}
.tracking-tight {
    letter-spacing: -0.025em;
}
.tracking-wide {
    letter-spacing: 0.025em;
}
.text-accent {
    color: var(--pos-accent);
}
.text-accent-text {
    color: var(--pos-accent-text);
}
.text-pos-faint {
    color: var(--pos-text-faint);
}
.text-pos-muted {
    color: var(--pos-text-muted);
}
.text-pos-text {
    color: var(--pos-text);
}
.underline {
    text-decoration-line: underline;
}
.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.opacity-\[0\.55\] {
    opacity: 0.55;
}
.shadow {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-none {
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
    outline-style: solid;
}
.ring {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-\[border-color\2c box-shadow\2c transform\] {
    transition-property: border-color,box-shadow,transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.\[overflow-wrap\:normal\] {
    overflow-wrap: normal;
}
.\[word-break\:normal\] {
    word-break: normal;
}