/* System Appearance — centralized theme variables (Accent + Font). Defaults here are Store Green
   (AccentThemeCatalog.Default) and System Default (FontFamilyCatalog.Default), matching mobile's
   own defaults, so the very first paint already looks correct before AppearanceStyles' JS-interop
   calls resolve the saved preferences (see AppearanceStyles.razor). AppearanceStyles overrides
   these same six variable names at runtime; nothing else should ever redefine them.
   Accent is NOT the same thing as a status color (success/danger/warning/out-of-stock) and is
   NOT the Product List's green row-hover/selection, both of which stay independently defined
   wherever they already live. Font is independent of Accent — changing one never resets the
   other (see IFontThemeService / IAccentThemeService). */
:root {
    --app-accent: #087C36;
    --app-accent-hover: #066a2d;
    --app-accent-soft-base: #e6f6ec;
    --app-accent-soft: var(--app-accent-soft-base);
    --app-accent-contrast: #ffffff;
    --app-accent-dark: #055023;
    --app-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --app-page-background: #f7f8fa;
    --app-surface: #ffffff;
    --app-navigation-background: #0b0f14;
    --app-text-primary: #1f2937;
    --app-text-secondary: #6b7280;
    --app-border: #e5e7eb;
    --app-border-subtle: #eef0f2;
    --app-input-background: #ffffff;
    --app-input-text: #212529;
    --app-table-header: #f9fafb;
    --app-table-row: #ffffff;
    --app-hover: #f3f4f6;
    --app-selected-background: #e8f5e9;
    --app-selected-hover: #c8e6c9;
    --app-selected-active: #b9ddb9;
    --app-selected-indicator: #2e7d32;
    --app-modal-surface: #ffffff;
    --app-success-background: #e6f6ec;
    --app-success-text: #1a7f45;
    --app-warning-background: #fef3e2;
    --app-warning-text: #92400e;
    --app-error-background: #fdecec;
    --app-error-text: #c0392b;
    --app-disabled-background: #f1f2f4;
    --app-disabled-text: #8b929e;
    --app-link: var(--app-accent);
    /* Tailwind CSS integration (Modernize the Store Admin Website UI task): thin, one-way alias
       layer over the --app-* tokens above/below, so Tailwind's utility classes (bg-store-primary,
       text-store-text-muted, etc. — see Styles/tailwind.source.css's @theme block) read the
       SAME live values as every existing Bootstrap-based page, instead of Tailwind maintaining
       its own separate color system. These are declared ONLY here, once, on plain :root — NOT
       repeated inside :root[data-theme="dark"] or the prefers-color-scheme block below, because
       CSS custom properties resolve lazily at used-value time: `var(--store-primary)` always
       follows whatever --app-accent currently resolves to (including AppearanceStyles.razor's
       live runtime override and every dark-mode redefinition of --app-* tokens), with zero
       duplication and zero changes to AppearanceStyles.razor's own live-update mechanism. */
    --store-primary: var(--app-accent);
    --store-primary-hover: var(--app-accent-hover);
    --store-primary-foreground: var(--app-accent-contrast);
    --store-primary-soft: var(--app-accent-soft);
    --store-primary-dark: var(--app-accent-dark);
    --store-page: var(--app-page-background);
    --store-surface: var(--app-surface);
    --store-modal-surface: var(--app-modal-surface);
    --store-border: var(--app-border);
    --store-border-subtle: var(--app-border-subtle);
    --store-text: var(--app-text-primary);
    --store-text-muted: var(--app-text-secondary);
    --store-input-bg: var(--app-input-background);
    --store-input-text: var(--app-input-text);
    --store-hover: var(--app-hover);
    --store-success: var(--app-success-text);
    --store-success-bg: var(--app-success-background);
    --store-warning: var(--app-warning-text);
    --store-warning-bg: var(--app-warning-background);
    --store-danger: var(--app-error-text);
    --store-danger-bg: var(--app-error-background);
    --store-disabled-bg: var(--app-disabled-background);
    --store-disabled-text: var(--app-disabled-text);
    /* Dashboard chart palette — derived from the selected Accent/semantic tokens rather than a
       fixed hardcoded rainbow, so Sales by Source segments and the Sales Trend line always match
       whichever Accent (Store Green/Beauty Rose/Watsons/Store Gold) the user has selected, and
       stay legible in dark mode since every input token here is already dark-mode-aware. */
    --app-chart-1: var(--app-accent);
    --app-chart-2: var(--app-accent-dark);
    --app-chart-3: color-mix(in srgb, var(--app-accent) 45%, var(--app-surface));
    --app-chart-4: var(--app-text-secondary);
    color-scheme: light;
}

:root[data-theme="dark"] {
    --app-page-background: #101512;
    --app-surface: #19201c;
    --app-navigation-background: #080b09;
    --app-text-primary: #edf3ef;
    --app-text-secondary: #aebbb3;
    --app-border: #36413a;
    --app-border-subtle: #2b342f;
    --app-input-background: #222b26;
    --app-input-text: #edf3ef;
    --app-table-header: #222b26;
    --app-table-row: #19201c;
    --app-hover: #28332d;
    --app-selected-background: #193b2a;
    --app-selected-hover: #205036;
    --app-selected-active: #276140;
    --app-selected-indicator: #63c987;
    --app-modal-surface: #19201c;
    --app-success-background: #173a27;
    --app-success-text: #79d69b;
    --app-warning-background: #443318;
    --app-warning-text: #f4c56b;
    --app-error-background: #462323;
    --app-error-text: #ff9b96;
    --app-disabled-background: #252d29;
    --app-disabled-text: #7f8a83;
    --app-accent-soft: color-mix(in srgb, var(--app-accent) 22%, var(--app-surface));
    color-scheme: dark;

    /* Dark Mode Remediation Round 2: a number of pages (Sales/Consignments/Receivable/Web Orders'
       shared .sales-* classes; Stock Adjustments/Price Markup/Online Store Settings/Cash
       Remittances/Customers/Expenses' plain Bootstrap .card markup) were never migrated onto this
       app's own --app-* semantic tokens — they either use raw Bootstrap classes with no override
       at all, or reference Bootstrap's own CSS variables directly (var(--bs-body-bg),
       var(--bs-border-color), var(--bs-secondary-color), var(--bs-tertiary-bg),
       var(--bs-primary-bg-subtle)/-border-subtle). Bootstrap's variables only flip to a dark
       palette under [data-bs-theme="dark"], which this app never sets (it uses its own
       [data-theme] attribute), so every one of those consumers stayed permanently light — the
       exact "dark controls, light containers" mixed-theme symptom from the screenshots. Rather
       than hunting down and rewriting every legacy selector individually, re-pointing Bootstrap's
       own root variables at the equivalent --app-* tokens here fixes every current AND future
       unmigrated Bootstrap-default consumer centrally (.card, .card-header/.card-footer,
       .list-group-item, the .sales-* family, etc.) without duplicating the palette a second time.
       Light mode is untouched: these overrides only exist inside the dark scopes, and Bootstrap's
       own light defaults are visually equivalent to this app's light --app-* values already. */
    --bs-body-bg: var(--app-surface);
    --bs-body-color: var(--app-text-primary);
    --bs-body-color-rgb: 237, 243, 239;
    --bs-border-color: var(--app-border);
    --bs-border-color-translucent: var(--app-border);
    --bs-secondary-color: var(--app-text-secondary);
    --bs-secondary-bg: var(--app-hover);
    --bs-tertiary-bg: var(--app-hover);
    --bs-primary-bg-subtle: var(--app-accent-soft);
    --bs-primary-border-subtle: var(--app-accent);
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="system"] {
        --app-page-background: #101512;
        --app-surface: #19201c;
        --app-navigation-background: #080b09;
        --app-text-primary: #edf3ef;
        --app-text-secondary: #aebbb3;
        --app-border: #36413a;
        --app-border-subtle: #2b342f;
        --app-input-background: #222b26;
        --app-input-text: #edf3ef;
        --app-table-header: #222b26;
        --app-table-row: #19201c;
        --app-hover: #28332d;
        --app-selected-background: #193b2a;
        --app-selected-hover: #205036;
        --app-selected-active: #276140;
        --app-selected-indicator: #63c987;
        --app-modal-surface: #19201c;
        --app-success-background: #173a27;
        --app-success-text: #79d69b;
        --app-warning-background: #443318;
        --app-warning-text: #f4c56b;
        --app-error-background: #462323;
        --app-error-text: #ff9b96;
        --app-disabled-background: #252d29;
        --app-disabled-text: #7f8a83;
        --app-accent-soft: color-mix(in srgb, var(--app-accent) 22%, var(--app-surface));
        color-scheme: dark;

        /* Mirrors the Bootstrap-variable remediation in :root[data-theme="dark"] above — see that
           block's comment for the full explanation. Kept identical so Theme Mode = System resolves
           exactly the same as Theme Mode = Dark once the OS is in dark mode. */
        --bs-body-bg: var(--app-surface);
        --bs-body-color: var(--app-text-primary);
        --bs-body-color-rgb: 237, 243, 239;
        --bs-border-color: var(--app-border);
        --bs-border-color-translucent: var(--app-border);
        --bs-secondary-color: var(--app-text-secondary);
        --bs-secondary-bg: var(--app-hover);
        --bs-tertiary-bg: var(--app-hover);
        --bs-primary-bg-subtle: var(--app-accent-soft);
        --bs-primary-border-subtle: var(--app-accent);
    }
}

/* The Font Name setting's selectable UI fonts (Settings > System > Font), reused verbatim from
   mobile's own bundled assets (store_admin/assets/fonts) rather than an external Google Fonts
   CDN — this app is deployed under IIS and must not depend on third-party font availability.
   Inter/Roboto/Open Sans are variable fonts (same physical file covers the whole weight axis, so
   one @font-face per family with a weight range is enough); Poppins ships as separate static
   weight files upstream, so two @font-face rules are used instead — matching pubspec.yaml's own
   font declarations. "System Default" and "Courier / Monospace" need no font asset (see
   FontFamilyCatalog). */
@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter-VariableFont.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('fonts/Roboto-VariableFont.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-VariableFont.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

html, body {
    font-family: var(--app-font-family);
    background: var(--app-page-background);
    color: var(--app-text-primary);
}

a, .btn-link {
    color: var(--app-link);
}

.btn-primary {
    color: var(--app-accent-contrast);
    background-color: var(--app-accent);
    border-color: var(--app-accent-hover);
}

    .btn-primary:hover, .btn-primary:focus {
        background-color: var(--app-accent-hover);
        border-color: var(--app-accent-hover);
    }

.btn:focus-visible, .btn-link.nav-link:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus,
a:focus-visible, [tabindex="0"]:focus-visible {
  outline: 2px solid var(--app-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 0.15rem var(--app-surface), 0 0 0 0.3rem color-mix(in srgb, var(--app-accent) 55%, transparent);
}

.form-control, .form-select {
    background-color: var(--app-input-background);
    color: var(--app-input-text);
    border-color: var(--app-border);
}

.form-control:disabled, .form-select:disabled, .btn:disabled {
    background-color: var(--app-disabled-background);
    color: var(--app-disabled-text);
}

.form-control::placeholder { color: var(--app-text-secondary); }
.form-text, .text-muted { color: var(--app-text-secondary) !important; }

/* Dark Mode Audit task: checkboxes/radios/switches previously fell through to Bootstrap's own
   unthemed defaults (a hardcoded white #fff background + light-gray #dee2e6 border, and Bootstrap
   blue #0d6efd once checked) — invisible against a dark card and inconsistent with the app's
   configurable Accent everywhere else (buttons/links/focus rings all already use --app-accent).
   Unlike .form-control/.form-select, Bootstrap never routes .form-check-input through a CSS
   variable this app already overrides, so it needed its own explicit rule. */
.form-check-input {
    background-color: var(--app-input-background);
    border-color: var(--app-border);
}

.form-check-input:checked {
    background-color: var(--app-accent);
    border-color: var(--app-accent);
}

.form-check-input:disabled {
    background-color: var(--app-disabled-background);
    border-color: var(--app-border);
    opacity: 1;
}
.table { --bs-table-bg: var(--app-table-row); --bs-table-color: var(--app-text-primary); --bs-table-border-color: var(--app-border-subtle); }
.table > thead { --bs-table-bg: var(--app-table-header); --bs-table-color: var(--app-text-secondary); }
.modal-content, .dropdown-menu { background-color: var(--app-modal-surface); color: var(--app-text-primary); border-color: var(--app-border); }
/* Dark Mode Audit task: the .dropdown-menu container above already picked up the dark surface,
   but Bootstrap's .dropdown-item sets its own explicit (light-mode) text color rather than
   inheriting it — near-black text was landing on a dark menu (confirmed affecting
   ProductPicker.razor's brand/category dropdowns). Hover/focus/active follow the same
   row-highlight tokens already used for table hover and selected list rows elsewhere. */
.dropdown-item { color: var(--app-text-primary); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--app-hover); color: var(--app-text-primary); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--app-selected-background); color: var(--app-text-primary); }
.btn-close { filter: var(--app-close-filter, none); }
:root[data-resolved-theme="dark"] { --app-close-filter: invert(1) grayscale(100%) brightness(180%); }
.alert-success { background: var(--app-success-background); color: var(--app-success-text); border-color: var(--app-success-text); }
.alert-warning { background: var(--app-warning-background); color: var(--app-warning-text); border-color: var(--app-warning-text); }
.alert-danger { background: var(--app-error-background); color: var(--app-error-text); border-color: var(--app-error-text); }

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--app-success-text);
}

.invalid {
    outline: 1px solid var(--app-error-text);
}

.validation-message {
    color: var(--app-error-text);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--app-accent-contrast);
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: var(--app-text-secondary);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Soft pill status badges instead of solid Bootstrap colors — shared verbatim by Product List
   (Active/Inactive/Out of Stock) and Stock Movement (Pending/Confirmed/Cancelled) so both
   modules render the exact same "Confirmed"/"Active" green rather than two similar-but-different
   greens maintained in two scoped stylesheets. */
.status-pill {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.65rem;
}

.status-pill-active {
    background: var(--app-success-background);
    color: var(--app-success-text);
}

.status-pill-inactive {
    background: var(--app-disabled-background);
    color: var(--app-disabled-text);
}

.status-pill-out {
    background: var(--app-error-background);
    color: var(--app-error-text);
}

.status-pill-pending {
    background: var(--app-warning-background);
    color: var(--app-warning-text);
}

/* Catalog (Brand/Category) modal chrome fully migrated onto .app-modal-* / .app-modal-compact
   (Application-wide Modal Consistency Redesign task) — see that shared system above. No .razor
   file references .catalog-modal-* any more. */

/* Reports Filter modal chrome fully migrated onto .app-modal-* / .app-modal-large
   (Application-wide Modal Consistency Redesign task) — see that shared system above. Only the
   Clear All button's own distinct styling (not shared with the generic Cancel/Apply pair) still
   lives here. */
.report-filter-clear-btn {
    color: var(--app-text-secondary);
    text-decoration: none;
    padding-left: 0;
}

    .report-filter-clear-btn:hover {
        color: var(--app-text-primary);
    }

.report-filter-group-title {
    margin: 0 0 0.7rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--app-text-secondary);
}

.report-filter-group-fields {
    display: grid;
    gap: 0.85rem;
}

.report-filter-switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.4rem;
}

/* Shared report component (ReportTableShell.razor) — global rather than scoped to
   Reports.razor.css since this is a genuinely reusable piece (any future report-shaped page can
   drop it in and inherit the same standardized look) rather than page-specific markup.
   ReportSummaryStrip.razor and its ".report-summary-strip"/".report-summary-stat" styles were
   removed (Remove Duplicate Summary Cards task) — the PDF preview is now the sole on-page
   report-summary presentation. */
.report-table-card + .report-table-card {
    margin-top: 1.5rem;
}

.report-table-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.report-empty {
    color: var(--app-text-secondary);
    text-align: center;
    padding: 1.5rem;
    margin: 0;
}

.report-filter-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.6rem;
}

.report-filter-groups {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem 2rem;
}

@media (max-width: 700px) {
    .report-filter-groups {
        grid-template-columns: minmax(0, 1fr);
    }

    .report-filter-pair {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Expense modal chrome and the Confirmed Stock Movement picker chrome fully migrated onto
   .app-modal-* (Application-wide Modal Consistency Redesign task) — see that shared system above.
   No .razor file references .expense-modal-*/.stock-picker-* any more. */

/* =====================================================================================
   Modern SaaS visual system ? shared shell, surfaces, controls, tables and responsive rules.
   These rules intentionally sit after the compatibility layer above. They preserve Bootstrap
   behavior while replacing its visual defaults with the existing runtime --app-* theme tokens.
   ===================================================================================== */
:root {
    --app-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.035);
    --app-shadow-md: 0 1px 3px rgba(15, 23, 42, 0.06), 0 14px 34px rgba(15, 23, 42, 0.07);
    --app-shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.24);
    --app-radius: 1rem;
}

html { min-width: 320px; }
body {
    min-height: 100vh;
    letter-spacing: -0.005em;
    background-color: var(--app-page-background);
    background-image: linear-gradient(145deg, color-mix(in srgb, var(--app-accent) 3%, transparent), transparent 32rem);
}

.app-shell { background: transparent; }

/* Store Admin Web Navigation Redesign task: single full-width top header (replaces the old left
   `.app-sidebar` + separate `.app-topbar`) — a dark, deep-green identity per the approved
   reference screenshot, built from the same --app-accent-dark/--app-navigation-background tokens
   the old sidebar already used, so it stays correct under every selected Accent and in dark mode
   with no new tokens. Sticky so the nav stays reachable while a long page scrolls. */
.app-header {
    position: relative;
    z-index: 30;
    color: white;
    background: linear-gradient(180deg, var(--app-accent-dark) 0%, var(--app-navigation-background) 130%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
}

@media (min-width: 1024px) {
    .app-header {
        position: sticky;
        top: 0;
    }
}

.app-user-area,
.app-user-copy { display: flex; align-items: center; }
.app-user-area { gap: .75rem; }
.app-user-avatar {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--app-accent) 28%, var(--app-border));
    border-radius: .8rem;
    color: var(--app-accent);
    background: var(--app-accent-soft);
    font-size: .8rem;
    font-weight: 800;
}
.app-user-copy { align-items: flex-start; flex-direction: column; line-height: 1.2; }
.app-user-copy strong { color: var(--app-text-primary); font-size: .82rem; font-weight: 700; }
.app-user-copy span { color: var(--app-text-secondary); font-size: .72rem; }

.content {
    width: 100%;
    padding-top: 2.25rem;
    padding-bottom: 3.5rem;
}
.content > .bg-store-page.rounded-2xl {
    width: 100%;
    max-width: 1580px;
    margin: 0 auto;
    padding: 0 0 2rem !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.app-page-header { position: relative; }
.app-page-title {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    max-width: 100%;
    letter-spacing: 0 !important;
}
.app-page-title > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.app-page-icon {
    display: inline-block;
    flex: 0 0 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--app-accent);
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.app-page-meta { max-width: 100%; overflow-wrap: anywhere; }
.app-page-actions { padding-bottom: .1rem; }

/* Navigation: keep the existing permission-gated markup and icon masks, replace its chrome. Row
   layout/dropdown mechanics live in NavMenu.razor.css (component-scoped); this is just the shared
   brand identity + divider between the header's two rows. */
.topnav-brand-row {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .03);
}
.navbar-brand-logo {
    padding: .2rem;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: .7rem;
    background: rgba(255, 255, 255, .09);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
}
.navbar-brand-copy { display: flex; min-width: 0; flex-direction: column; line-height: 1.15; }
.navbar-brand-copy strong { font-size: 1rem; letter-spacing: -.015em; }
.navbar-brand-copy small { margin-top: .25rem; color: rgba(255,255,255,.52); font-size: .68rem; font-weight: 500; letter-spacing: .045em; }

/* Buttons */
.btn {
    min-height: 2.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    border-radius: .72rem;
    padding: .58rem .95rem;
    font-size: .85rem;
    font-weight: 680;
    line-height: 1.15;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    transition: transform .14s ease, box-shadow .14s ease, color .14s ease, background-color .14s ease, border-color .14s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(15,23,42,.09); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn-sm { min-height: 2.15rem; padding: .42rem .72rem; border-radius: .62rem; font-size: .78rem; }
.btn-primary {
    border-color: var(--app-accent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--app-accent) 88%, white), var(--app-accent));
    box-shadow: 0 5px 14px color-mix(in srgb, var(--app-accent) 24%, transparent);
}
.btn-primary:hover:not(:disabled), .btn-primary:focus {
    border-color: var(--app-accent-hover);
    background: var(--app-accent-hover);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--app-accent) 30%, transparent);
}
.btn-outline-primary { color: var(--app-accent); border-color: color-mix(in srgb, var(--app-accent) 55%, var(--app-border)); background: var(--app-surface); }
.btn-outline-primary:hover { color: var(--app-accent-contrast); border-color: var(--app-accent); background: var(--app-accent); }
.btn-outline-secondary { color: var(--app-text-primary); border-color: var(--app-border); background: var(--app-surface); }
.btn-outline-secondary:hover { color: var(--app-text-primary); border-color: color-mix(in srgb, var(--app-text-secondary) 38%, var(--app-border)); background: var(--app-hover); }
.btn-outline-danger { color: var(--app-error-text); border-color: color-mix(in srgb, var(--app-error-text) 45%, var(--app-border)); background: var(--app-surface); }
.btn-danger { border-color: var(--app-error-text); background: var(--app-error-text); color: white; }
.btn-success { border-color: var(--app-success-text); background: var(--app-success-text); color: white; }
.btn-link { min-height: auto; padding-inline: .55rem; box-shadow: none; text-decoration: none; }
.btn-link:hover { box-shadow: none; color: var(--app-accent-hover); background: var(--app-accent-soft); }
.btn:disabled { opacity: .54; box-shadow: none; cursor: not-allowed; transform: none; }
.app-button-icon { font-size: 1.15rem; font-weight: 500; line-height: .8; }

/* Forms */
.form-label,
.app-control-label {
    display: block;
    margin-bottom: .42rem;
    color: var(--app-text-primary);
    font-size: .78rem;
    font-weight: 680;
    letter-spacing: .012em;
}
.form-control,
.form-select {
    min-height: 2.7rem;
    border: 1px solid var(--app-border);
    border-radius: .72rem;
    padding: .62rem .8rem;
    box-shadow: inset 0 1px 2px rgba(15,23,42,.025);
    font-size: .875rem;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form-control:hover:not(:disabled), .form-select:hover:not(:disabled) { border-color: color-mix(in srgb, var(--app-text-secondary) 38%, var(--app-border)); }
.form-control:focus, .form-select:focus {
    border-color: var(--app-accent);
    outline: none;
    box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--app-accent) 16%, transparent);
}
.form-control-sm, .form-select-sm { min-height: 2.2rem; padding: .4rem .65rem; border-radius: .6rem; }
textarea.form-control { min-height: 6.5rem; line-height: 1.55; }
.form-text { margin-top: .4rem; font-size: .76rem; line-height: 1.45; }
.validation-message, .text-danger { font-size: .8rem; font-weight: 580; }
.form-check-input { width: 1.1rem; height: 1.1rem; border-radius: .32rem; }
.form-switch .form-check-input { width: 2.2rem; border-radius: 999px; }

/* Cards, filters and metric hierarchy */
.content .bg-store-surface.border-store-border,
.content .card {
    border-color: color-mix(in srgb, var(--app-border) 86%, transparent) !important;
    border-radius: var(--app-radius) !important;
    box-shadow: var(--app-shadow-sm);
}
.app-table-card,
.app-form-card,
.app-filter-bar {
    border-color: color-mix(in srgb, var(--app-border) 84%, transparent) !important;
    border-radius: var(--app-radius) !important;
    background: var(--app-surface);
    box-shadow: var(--app-shadow-md) !important;
}
.app-filter-bar {
    position: relative;
    background: linear-gradient(135deg, var(--app-surface), color-mix(in srgb, var(--app-accent-soft) 26%, var(--app-surface)));
}
.app-filter-intro { display: flex; flex: 1 0 100%; align-items: center; gap: .7rem; padding-bottom: .15rem; }
.app-filter-intro > div { display: flex; flex-direction: column; }
.app-filter-intro strong { color: var(--app-text-primary); font-size: .86rem; }
.app-filter-intro span:not(.app-filter-icon) { color: var(--app-text-secondary); font-size: .74rem; }
.app-filter-icon {
    position: relative;
    width: 2rem;
    height: 2rem;
    border-radius: .65rem;
    background: var(--app-accent-soft);
}
.app-filter-icon::before {
    content: '';
    position: absolute;
    inset: .55rem .48rem;
    border-top: 2px solid var(--app-accent);
    border-bottom: 2px solid var(--app-accent);
}
.app-filter-control { flex: 0 1 auto; }
.app-filter-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.app-metric-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem !important; }
.app-metric-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 6.8rem;
    flex-direction: column;
    justify-content: center;
    padding: 1.15rem 1.25rem !important;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--app-border) 82%, transparent) !important;
    border-radius: var(--app-radius) !important;
    background: var(--app-surface);
    box-shadow: var(--app-shadow-sm);
}
.app-metric-card::after {
    content: '';
    position: absolute;
    inset: .75rem auto .75rem 0;
    width: 3px;
    border-radius: 0 999px 999px 0;
    background: color-mix(in srgb, var(--app-accent) 42%, var(--app-border));
}
.app-metric-card > span { color: var(--app-text-secondary); font-size: .76rem !important; font-weight: 650; }
.app-metric-card > strong, .app-metric-card > div:not(.badge) { margin-top: .35rem; color: var(--app-text-primary); font-size: 1.45rem !important; font-weight: 760; letter-spacing: -.025em; }
.app-metric-card-primary::after { background: var(--app-accent); }
.app-metric-card-primary { background: linear-gradient(135deg, var(--app-surface), color-mix(in srgb, var(--app-accent-soft) 52%, var(--app-surface))); }
.app-metric-card-danger::after { background: var(--app-error-text); }

/* One table language for every module, including still-Bootstrap-backed pages. */
.content .table-responsive,
.content .overflow-x-auto { scrollbar-color: color-mix(in srgb, var(--app-text-secondary) 35%, transparent) transparent; }
.content table { width: 100%; color: var(--app-text-primary); border-collapse: separate !important; border-spacing: 0; }
.content table thead th {
    padding: .85rem 1rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--app-border-subtle) !important;
    color: var(--app-text-secondary) !important;
    background: color-mix(in srgb, var(--app-table-header) 88%, var(--app-accent-soft)) !important;
    font-size: .68rem !important;
    font-weight: 760 !important;
    letter-spacing: .075em !important;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
}
.content table tbody td {
    padding: .9rem 1rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--app-border-subtle) !important;
    background-color: transparent;
    vertical-align: middle;
}
.content table tbody tr:last-child td { border-bottom: 0 !important; }
.content table tbody tr { transition: background-color .13s ease, box-shadow .13s ease; }
.content table tbody tr:hover > td { background-color: var(--app-hover); }
.content .overflow-x-auto > table { min-width: 720px; }
.content table td.text-right, .content table th.text-right,
.content table td:last-child, .content table th:last-child { white-space: nowrap; }

/* Semantic badges */
.badge, .status-pill {
    display: inline-flex;
    min-height: 1.65rem;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px !important;
    padding: .28rem .62rem !important;
    font-size: .69rem !important;
    font-weight: 720 !important;
    letter-spacing: .018em;
}
.text-bg-success, .status-pill-active { color: var(--app-success-text) !important; border-color: color-mix(in srgb, var(--app-success-text) 22%, transparent); background: var(--app-success-background) !important; }
.text-bg-warning, .status-pill-pending { color: var(--app-warning-text) !important; border-color: color-mix(in srgb, var(--app-warning-text) 24%, transparent); background: var(--app-warning-background) !important; }
.text-bg-danger, .status-pill-out { color: var(--app-error-text) !important; border-color: color-mix(in srgb, var(--app-error-text) 22%, transparent); background: var(--app-error-background) !important; }
.text-bg-secondary, .status-pill-inactive { color: var(--app-disabled-text) !important; border-color: var(--app-border); background: var(--app-disabled-background) !important; }
.text-bg-info, .text-bg-primary { color: var(--app-accent) !important; border-color: color-mix(in srgb, var(--app-accent) 24%, transparent); background: var(--app-accent-soft) !important; }

.alert { border-radius: .85rem; border-width: 1px; padding: .85rem 1rem; }
.card-header, .card-footer { padding: 1rem 1.25rem; border-color: var(--app-border-subtle); background: color-mix(in srgb, var(--app-table-header) 88%, var(--app-accent-soft)); }
.card-body { padding: 1.25rem; }

/* ============================================================================================
   SHARED MODAL DESIGN SYSTEM (Application-wide Modal Consistency Redesign task)
   ============================================================================================
   Product Edit (Components/Products/ProductEditorModal.razor + ProductForm.razor's section/
   footer language) is the authoritative visual benchmark for every modal in the app, per that
   task's explicit instruction. These .app-modal-* classes extract its exact backdrop/surface/
   header/close-button/section/footer rules into one shared system so every other dialog can
   adopt the identical visual language while choosing an appropriately compact/medium/large/
   workspace/confirmation SIZE — same design language, different size, never the reverse.

   Every editor/confirmation modal in the app — Product, Product Details, Brand, Category,
   Distributor, User (+ password reset), Customer (+ Groups), Expense (+ Categories), Shipping
   Rates, the Confirmed Stock Movement picker, the Reports/Expenses/Customers filter modal, and
   the Distributor/User/Customer status-change confirmations — consumes these classes directly;
   no legacy per-family modal CSS remains. */

.app-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
    overflow: hidden;
    background: rgba(5, 10, 7, .72);
    backdrop-filter: blur(9px) saturate(.85);
}

.app-modal-dialog {
    display: flex;
    flex-direction: column;
    outline: none;
    overflow: hidden;
    color: var(--app-text-primary);
    background: var(--app-modal-surface);
    border: 1px solid color-mix(in srgb, var(--app-border) 72%, transparent);
    border-radius: 1.25rem;
    box-shadow: 0 32px 90px rgba(0, 0, 0, .38), 0 0 0 1px rgba(255, 255, 255, .025);
}

/* Size variants — width/height only. Same surface/header/footer/close-button language above and
   below; a Brand modal must stay compact, not become a Product-Edit-sized workspace. */
.app-modal-compact { width: min(480px, 92vw); max-height: calc(100vh - 4rem); }
.app-modal-medium { width: min(700px, 94vw); max-height: calc(100vh - 4rem); }
.app-modal-large { width: min(980px, 96vw); max-height: calc(100vh - 4rem); }
.app-modal-confirmation { width: min(440px, 90vw); max-height: calc(100vh - 4rem); }
.app-modal-workspace {
    width: min(1240px, calc(100vw - 3rem));
    height: min(900px, calc(100vh - 3rem));
    max-height: calc(100vh - 3rem);
}

/* For a picker/dialog that can itself be opened from inside another already-open modal (e.g. the
   Confirmed Stock Movement picker, launched from inside the Add/Edit Expense modal) — never
   render visually behind that first modal's own backdrop. */
.app-modal-backdrop-elevated { z-index: 1060; }

.app-modal-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4.5rem;
    padding: 1rem 1.4rem;
    border-bottom: 1px solid var(--app-border-subtle);
    background: linear-gradient(100deg, color-mix(in srgb, var(--app-accent-soft) 52%, var(--app-modal-surface)), var(--app-modal-surface) 48%);
}

.app-modal-workspace > .app-modal-header { min-height: 5.75rem; }

.app-modal-heading { min-width: 0; }

.app-modal-eyebrow {
    display: block;
    margin-bottom: .16rem;
    color: var(--app-accent);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .105em;
    text-transform: uppercase;
}

.app-modal-title-row {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.app-modal-title {
    margin: 0;
    color: var(--app-text-primary);
    font-size: 1.15rem;
    font-weight: 760;
    letter-spacing: -.02em;
}

.app-modal-workspace .app-modal-title { font-size: 1.3rem; }

.app-modal-subtitle {
    margin: .2rem 0 0;
    color: var(--app-text-secondary);
    font-size: .76rem;
    line-height: 1.4;
}

.app-modal-status {
    display: inline-flex;
    min-height: 1.4rem;
    align-items: center;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    padding: .18rem .5rem;
    font-size: .6rem;
    font-weight: 760;
}

.app-modal-status-active {
    border-color: color-mix(in srgb, var(--app-success-text) 22%, transparent);
    color: var(--app-success-text);
    background: var(--app-success-background);
}

.app-modal-status-inactive {
    color: var(--app-disabled-text);
    background: var(--app-disabled-background);
}

.app-modal-close {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: .72rem;
    color: var(--app-text-secondary);
    background: var(--app-hover);
    font-size: 1.35rem;
    line-height: 1;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.app-modal-close:hover:not(:disabled) {
    color: var(--app-text-primary);
    background: var(--app-surface);
    border-color: var(--app-border);
}

.app-modal-close:focus-visible {
    outline: 2px solid var(--app-accent);
    outline-offset: 2px;
}

.app-modal-close:disabled { opacity: .45; }

.app-modal-body {
    min-height: 0;
    flex: 1 1 auto;
    padding: 1.25rem 1.4rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: color-mix(in srgb, var(--app-text-secondary) 38%, transparent) transparent;
}

.app-modal-workspace > .app-modal-body { padding: 0; }

/* Section-card language — available for modals whose body is organized into distinct groups
   (e.g. a large multi-part editor). Compact/confirmation dialogs should NOT use this; a two-field
   Brand form does not need to be wrapped in a card. */
.app-modal-section {
    padding: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--app-border) 84%, transparent);
    border-radius: 1rem;
    background: var(--app-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .035), 0 8px 24px rgba(15, 23, 42, .035);
}

.app-modal-section-heading {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    margin-bottom: 1.15rem;
}

.app-modal-section-heading h3 {
    margin: 0;
    color: var(--app-text-primary);
    font-size: .98rem;
    font-weight: 760;
    letter-spacing: -.015em;
}

.app-modal-section-heading p {
    margin: .22rem 0 0;
    color: var(--app-text-secondary);
    font-size: .76rem;
    line-height: 1.45;
}

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

/* Footer/action bar — same philosophy as ProductForm's sticky .product-form-actions: reachable
   at the bottom of a scrolling body without needing a second scroll container. */
.app-modal-footer {
    position: sticky;
    z-index: 8;
    bottom: 0;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .95rem 1.4rem;
    border-top: 1px solid var(--app-border);
    background: color-mix(in srgb, var(--app-modal-surface) 94%, transparent);
    box-shadow: 0 -12px 30px rgba(15, 23, 42, .07);
    backdrop-filter: blur(14px);
}

.app-modal-footer-context {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .08rem;
}

.app-modal-footer-context strong {
    color: var(--app-text-primary);
    font-size: .78rem;
    font-weight: 720;
}

.app-modal-footer-context span {
    color: var(--app-text-secondary);
    font-size: .67rem;
}

.app-modal-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
}

.app-modal-actions .btn { min-width: 6.5rem; min-height: 2.65rem; }

/* Confirmation dialogs stay minimal: a focused message, no section-card wrapping, no sticky
   footer bar (the buttons sit directly in the body, same as Brand/Category's own discard-confirm
   pattern) — same surface/header/close/button language as every other size, deliberately less
   body chrome. */
.app-modal-confirm-message {
    margin: 0 0 1rem;
    color: var(--app-text-primary);
    font-size: .88rem;
    line-height: 1.5;
}

@media (max-width: 1023.98px) {
    .app-modal-backdrop { padding: 1.25rem; }
}

/* Workspace-only: narrows before the general 1023.98px tablet cutover, matching the point where
   ProductForm's own two-column layout collapses to one column — keeps the dialog from looking
   oversized once its content is already single-column. */
@media (max-width: 1099.98px) {
    .app-modal-workspace {
        width: min(980px, calc(100vw - 2rem));
        height: calc(100vh - 2rem);
        max-height: calc(100vh - 2rem);
    }
}

@media (max-width: 767.98px) {
    .app-modal-backdrop {
        align-items: flex-start !important;
        padding: .75rem !important;
    }

    .app-modal-compact, .app-modal-medium, .app-modal-large, .app-modal-confirmation {
        width: 100% !important;
        max-height: calc(100vh - 1.5rem) !important;
        border-radius: .9rem !important;
    }

    .app-modal-workspace {
        width: 100% !important;
        height: calc(100vh - 1rem) !important;
        max-height: calc(100vh - 1rem) !important;
        border-radius: .9rem !important;
    }

    .app-modal-header { min-height: 4.85rem; padding: .8rem 1rem; }
    .app-modal-workspace > .app-modal-header { min-height: 4.85rem; }
    .app-modal-subtitle { display: none; }
    .app-modal-title { font-size: 1.05rem; }
    .app-modal-workspace .app-modal-title { font-size: 1.12rem; }
    .app-modal-body { padding: 1rem; }
    .app-modal-workspace > .app-modal-body { padding: 0; }
    .app-modal-footer { padding: .85rem 1rem; flex-wrap: wrap; }
    .app-modal-actions .btn { flex: 1 1 auto; }
}

/* Product/ProductDetails/Catalog modal chrome fully migrated onto .app-modal-* (Application-wide
   Modal Consistency Redesign task) — see that shared system above. No .razor file references
   .product-modal-*/.product-details-backdrop/.product-details-header/.catalog-modal-* any more
   (.product-details-dialog survives only as a width-only modifier in ProductDetailsModal.razor.css).
   .btn-close remains a real, still-used generic Bootstrap close button style for every dialog/
   panel NOT part of this modal system (e.g. inline non-modal detail panels). */
.btn-close { width: 2rem; height: 2rem; padding: 0; border-radius: .6rem; background-color: var(--app-hover); background-size: .7rem; }

/* Existing scoped page families share the same spacious canvas. */
.settings-page, .role-access-page, .users-page, .catalog-page {
    width: 100%;
    max-width: 1580px;
    margin: 0 auto;
}

@media (max-width: 1023.98px) {
    .content { padding-top: 1.75rem; }
    .app-filter-intro { display: none; }
    .app-filter-control { flex: 1 1 160px; }
}

@media (max-width: 767.98px) {
    .content { padding-top: 1.4rem; padding-bottom: 2.5rem; }
    .content > .bg-store-page.rounded-2xl { padding-bottom: 1rem !important; }
    .app-page-header { margin-bottom: 1.35rem !important; }
    .app-page-header h1 { font-size: 1.7rem !important; }
    .app-page-actions { width: 100%; }
    .app-page-actions .btn { flex: 1 1 auto; }
    .app-filter-bar { padding: 1rem !important; }
    .app-filter-control, .app-filter-actions { width: 100%; flex: 1 1 100%; margin-left: 0; }
    .app-filter-actions .btn { flex: 1 1 auto; }
    .app-metric-grid { grid-template-columns: 1fr 1fr; }
    .app-metric-card { min-height: 5.8rem; }
}

@media (max-width: 520px) {
    .app-metric-grid { grid-template-columns: 1fr; }
    .app-user-avatar { display: none; }
}

/* Standalone Add/Edit Product routes use the same workspace surface as the editor modal. */
.product-editor-page-surface {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--app-border) 82%, transparent);
    border-radius: 1.15rem;
    background: var(--app-modal-surface);
    box-shadow: var(--app-shadow-sm);
}

@media (max-width: 767.98px) {
    .product-editor-page-surface {
        margin-inline: -.5rem;
        border-radius: .9rem;
    }
}

/* Final cross-page refinements for existing metric rows and the remittance editor. */
.content .flex.flex-wrap.gap-3 > .flex-1.bg-store-surface,
.remittance-metrics > div {
    position: relative;
    display: flex;
    min-width: 11rem;
    min-height: 6.4rem;
    flex-direction: column;
    justify-content: center;
    padding: 1.1rem 1.25rem !important;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--app-border) 82%, transparent) !important;
    border-radius: 1rem !important;
    background: var(--app-surface);
    box-shadow: var(--app-shadow-sm);
}
.content .flex.flex-wrap.gap-3 > .flex-1.bg-store-surface::after,
.remittance-metrics > div::after {
    content: '';
    position: absolute;
    inset: .75rem auto .75rem 0;
    width: 3px;
    border-radius: 0 999px 999px 0;
    background: var(--app-accent);
}
.content .flex.flex-wrap.gap-3 > .flex-1.bg-store-surface strong,
.content .flex.flex-wrap.gap-3 > .flex-1.bg-store-surface > div,
.remittance-metrics > div strong { margin-top: .3rem; font-size: 1.35rem !important; font-weight: 760; letter-spacing: -.025em; }
.remittance-metrics > div > span { color: var(--app-text-secondary); font-size: .76rem; font-weight: 650; }

.app-metric-grid > .flex-1.bg-store-surface {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 6.4rem;
    flex-direction: column;
    justify-content: center;
    padding: 1.1rem 1.25rem !important;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--app-border) 82%, transparent) !important;
    border-radius: 1rem !important;
    background: var(--app-surface);
    box-shadow: var(--app-shadow-sm);
}
.app-metric-grid > .flex-1.bg-store-surface::after {
    content: '';
    position: absolute;
    inset: .75rem auto .75rem 0;
    width: 3px;
    border-radius: 0 999px 999px 0;
    background: var(--app-accent);
}
.app-metric-grid > .flex-1.bg-store-surface strong,
.app-metric-grid > .flex-1.bg-store-surface > div { margin-top: .3rem; font-size: 1.35rem !important; font-weight: 760; letter-spacing: -.025em; }
.app-metric-card > div:first-child { margin-top: 0; color: var(--app-text-secondary); font-size: .76rem !important; font-weight: 650; letter-spacing: 0; }
.app-metric-card > div:last-child { margin-top: .3rem; color: var(--app-text-primary); font-size: 1.35rem !important; font-weight: 760; letter-spacing: -.025em; }

/* Product Editor-inspired transaction workspaces. Presentation only: the four transaction pages
   retain their existing request models, validation, API calls, and workflow transitions. */
.transaction-page {
    display: grid;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding-bottom: 2rem;
    gap: 1rem;
}
.transaction-page > .app-page-header { margin-bottom: .35rem !important; }
.transaction-grid {
    display: grid;
    grid-template-columns: minmax(18rem, .9fr) minmax(0, 1.35fr);
    gap: 1rem;
    align-items: start;
}
.transaction-card {
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--app-border) 84%, transparent);
    border-radius: 1rem;
    background: var(--app-surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .035), 0 8px 24px rgba(15, 23, 42, .035);
}
.transaction-picker-card,
.transaction-summary-card {
    background: linear-gradient(145deg, color-mix(in srgb, var(--app-accent-soft) 22%, var(--app-surface)), var(--app-surface) 15rem);
}
.transaction-section-heading {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    margin-bottom: 1.15rem;
}
.transaction-section-heading > div { min-width: 0; }
.transaction-section-heading h2 {
    margin: 0;
    color: var(--app-text-primary);
    font-size: .98rem;
    font-weight: 760;
    letter-spacing: -.015em;
}
.transaction-section-heading p {
    margin: .22rem 0 0;
    color: var(--app-text-secondary);
    font-size: .76rem;
    line-height: 1.45;
}
.transaction-section-index {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--app-accent) 22%, transparent);
    border-radius: .62rem;
    color: var(--app-accent);
    background: var(--app-accent-soft);
    font-size: .65rem;
    font-weight: 800;
}
.transaction-count-badge {
    flex: 0 0 auto;
    margin-left: auto;
    padding: .25rem .55rem;
    border: 1px solid color-mix(in srgb, var(--app-accent) 18%, transparent);
    border-radius: 999px;
    color: var(--app-accent);
    background: var(--app-accent-soft);
    font-size: .64rem;
    font-weight: 750;
}
.transaction-picker-filters {
    display: grid;
    grid-template-columns: minmax(12rem, 1.7fr) minmax(8rem, 1fr) minmax(8rem, 1fr) auto;
    gap: .65rem;
    margin-bottom: .85rem;
    padding: .8rem;
    border: 1px solid var(--app-border-subtle);
    border-radius: .82rem;
    background: color-mix(in srgb, var(--app-table-header) 70%, var(--app-surface));
}
.transaction-picker-results {
    max-height: 22rem;
    overflow: auto;
    border: 1px solid var(--app-border-subtle);
    border-radius: .82rem;
    background: var(--app-surface);
}
.transaction-picker-row {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .75rem;
    border-bottom: 1px solid var(--app-border-subtle);
    transition: background-color .14s ease;
}
.transaction-picker-row:hover { background: var(--app-hover); }
.transaction-picker-row:last-child { border-bottom: 0; }
.transaction-product-image {
    display: grid;
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--app-border);
    border-radius: .7rem;
    background: var(--app-hover);
    object-fit: cover;
}
.transaction-product-placeholder { color: var(--app-text-secondary); }
.transaction-product-copy {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    gap: .14rem;
}
.transaction-product-copy strong {
    overflow: hidden;
    color: var(--app-text-primary);
    font-size: .82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.transaction-product-copy small { color: var(--app-text-secondary); font-size: .68rem; }
.transaction-product-action {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .55rem;
}
.transaction-product-action > strong { color: var(--app-text-primary); font-size: .8rem; }
.transaction-load-more { width: 100%; border-radius: 0; }
.transaction-items-card { margin-top: .1rem; }
.transaction-table-shell {
    overflow: hidden;
    border: 1px solid var(--app-border-subtle);
    border-radius: .88rem;
}
.transaction-table-shell .table { margin: 0; }
.transaction-table-shell input[type="number"] { min-width: 6rem; }
.transaction-total {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.2rem;
    margin-top: .9rem;
    padding: .85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--app-accent) 18%, var(--app-border));
    border-radius: .82rem;
    background: color-mix(in srgb, var(--app-accent-soft) 40%, var(--app-surface));
}
.transaction-total span {
    color: var(--app-text-secondary);
    font-size: .75rem;
    font-weight: 680;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.transaction-total strong {
    color: var(--app-accent);
    font-size: 1.35rem;
    font-weight: 790;
    letter-spacing: -.025em;
}
.transaction-helper {
    margin: .8rem 0 0;
    color: var(--app-text-secondary);
    font-size: .7rem;
    line-height: 1.5;
}
.transaction-empty,
.transaction-state {
    display: grid;
    min-height: 8rem;
    place-items: center;
    padding: 1.5rem;
    border: 1px dashed var(--app-border);
    border-radius: .82rem;
    color: var(--app-text-secondary);
    background: color-mix(in srgb, var(--app-table-header) 60%, var(--app-surface));
    text-align: center;
}
.transaction-state {
    min-height: 12rem;
    border-style: solid;
    background: var(--app-surface);
}
.transaction-inline-error {
    padding: .7rem .8rem;
    border-radius: .72rem;
    color: var(--app-error-text);
    background: var(--app-error-background);
    font-size: .76rem;
}
.transaction-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .6rem;
}
.transaction-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}
.transaction-customer-summary {
    display: grid;
    gap: .18rem;
    margin-top: .75rem;
    padding: .8rem;
    border: 1px solid var(--app-border-subtle);
    border-radius: .75rem;
    background: var(--app-hover);
}
.transaction-customer-summary strong { color: var(--app-text-primary); font-size: .82rem; }
.transaction-customer-summary span { color: var(--app-text-secondary); font-size: .7rem; }
.transaction-readonly-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin: 0;
}
.transaction-readonly-grid > div {
    padding: .85rem;
    border: 1px solid var(--app-border-subtle);
    border-radius: .78rem;
    background: color-mix(in srgb, var(--app-table-header) 72%, var(--app-surface));
}
.transaction-readonly-grid dt {
    color: var(--app-text-secondary);
    font-size: .66rem;
    font-weight: 720;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.transaction-readonly-grid dd { margin: .32rem 0 0; color: var(--app-text-primary); font-size: .88rem; font-weight: 680; }
.transaction-financial-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    margin: 0;
}
.transaction-financial-summary > div {
    min-width: 0;
    padding: .9rem;
    border: 1px solid var(--app-border-subtle);
    border-radius: .8rem;
    background: color-mix(in srgb, var(--app-table-header) 68%, var(--app-surface));
}
.transaction-financial-summary dt { color: var(--app-text-secondary); font-size: .68rem; font-weight: 700; }
.transaction-financial-summary dd { margin: .35rem 0 0; color: var(--app-text-primary); font-size: 1.05rem; font-weight: 760; }
.transaction-financial-summary .transaction-financial-total {
    border-color: color-mix(in srgb, var(--app-accent) 24%, var(--app-border));
    background: var(--app-accent-soft);
}
.transaction-financial-total dd { color: var(--app-accent); font-size: 1.25rem; }
.transaction-credit-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
    margin-top: .9rem;
    padding: .85rem;
    border: 1px solid var(--app-border);
    border-radius: .82rem;
    background: var(--app-hover);
}
.transaction-credit-panel > div { display: grid; gap: .16rem; }
.transaction-credit-panel span { color: var(--app-text-secondary); font-size: .68rem; }
.transaction-credit-warning {
    border-color: color-mix(in srgb, var(--app-warning-text) 32%, var(--app-border));
    color: var(--app-warning-text);
    background: var(--app-warning-background);
}
.transaction-action-bar {
    position: sticky;
    z-index: 8;
    bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .95rem 1.15rem;
    border: 1px solid color-mix(in srgb, var(--app-border) 86%, transparent);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--app-modal-surface) 94%, transparent);
    box-shadow: 0 -12px 30px rgba(15, 23, 42, .07), 0 6px 18px rgba(15, 23, 42, .05);
    backdrop-filter: blur(14px);
}
.transaction-action-confirm {
    border-color: color-mix(in srgb, var(--app-accent) 28%, var(--app-border));
    background: color-mix(in srgb, var(--app-accent-soft) 38%, var(--app-modal-surface));
}
.transaction-action-copy { display: grid; min-width: 0; gap: .08rem; }
.transaction-action-copy strong { color: var(--app-text-primary); font-size: .8rem; font-weight: 740; }
.transaction-action-copy span { color: var(--app-text-secondary); font-size: .68rem; }
.transaction-action-buttons { display: flex; flex: 0 0 auto; align-items: center; gap: .65rem; }

@media (max-width: 1023.98px) {
    .transaction-grid { grid-template-columns: 1fr; }
    .transaction-financial-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    .transaction-picker-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .transaction-picker-filters .btn { width: 100%; }
}
@media (max-width: 767.98px) {
    .transaction-page { gap: .8rem; padding-bottom: 1rem; }
    .transaction-card { padding: 1rem; border-radius: .88rem; }
    .transaction-picker-filters,
    .transaction-field-grid,
    .transaction-readonly-grid,
    .transaction-financial-summary,
    .transaction-credit-panel { grid-template-columns: 1fr; }
    .transaction-picker-row { align-items: flex-start; flex-wrap: wrap; }
    .transaction-product-action { width: calc(100% - 3.8rem); margin-left: 3.8rem; justify-content: space-between; }
    .transaction-section-heading { flex-wrap: wrap; }
    .transaction-count-badge { margin-left: 2.8rem; }
    .transaction-total { justify-content: space-between; }
    .transaction-action-bar { bottom: .5rem; align-items: stretch; flex-direction: column; padding: .8rem; }
    .transaction-action-buttons { width: 100%; }
    .transaction-action-buttons .btn { min-width: 0; flex: 1 1 0; }
}
@media (max-width: 430px) {
    .transaction-search-row { grid-template-columns: 1fr; }
    .transaction-action-buttons { flex-direction: column-reverse; }
    .transaction-action-buttons .btn { width: 100%; }
}

/* Shared navigation and page-title icon masks; one definition per Bootstrap icon. */
.bi-house-door-fill-nav-menu {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-house-door-fill' 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");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-house-door-fill' 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-plus-square-fill-nav-menu {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-speedometer2-nav-menu {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-speedometer2' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4M3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707M2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10m9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5m.754-4.246a.39.39 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.39.39 0 0 0-.029-.518z'/%3E%3Cpath fill-rule='evenodd' d='M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A8 8 0 0 1 0 10m8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-speedometer2' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4M3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707M2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10m9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5m.754-4.246a.39.39 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.39.39 0 0 0-.029-.518z'/%3E%3Cpath fill-rule='evenodd' d='M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A8 8 0 0 1 0 10m8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3'/%3E%3C/svg%3E");
}

.bi-box-seam-fill-nav-menu {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-box-seam-fill' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M15.528 2.973a.75.75 0 0 1 .472.696v8.662a.75.75 0 0 1-.472.696l-7.25 2.9a.75.75 0 0 1-.557 0l-7.25-2.9A.75.75 0 0 1 0 12.331V3.669a.75.75 0 0 1 .471-.696L7.443.184l.01-.003.268-.108a.75.75 0 0 1 .558 0l.269.108.01.003zM10.404 2 4.25 4.461 1.846 3.5 1 3.839v.4l6.5 2.6v7.922l.5.2.5-.2V6.84l6.5-2.6v-.4l-.846-.339L8 5.961 5.596 5l6.154-2.461z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-box-seam-fill' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M15.528 2.973a.75.75 0 0 1 .472.696v8.662a.75.75 0 0 1-.472.696l-7.25 2.9a.75.75 0 0 1-.557 0l-7.25-2.9A.75.75 0 0 1 0 12.331V3.669a.75.75 0 0 1 .471-.696L7.443.184l.01-.003.268-.108a.75.75 0 0 1 .558 0l.269.108.01.003zM10.404 2 4.25 4.461 1.846 3.5 1 3.839v.4l6.5 2.6v7.922l.5.2.5-.2V6.84l6.5-2.6v-.4l-.846-.339L8 5.961 5.596 5l6.154-2.461z'/%3E%3C/svg%3E");
}

.bi-arrow-left-right-nav-menu {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-arrow-left-right' 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");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-arrow-left-right' 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-clipboard-check-nav-menu {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-clipboard-check' 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");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-clipboard-check' 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-tags-fill-nav-menu {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-tags-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 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.586zm3.5 4a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3'/%3E%3Cpath d='M1.293 7.793A1 1 0 0 1 1 7.086V2a1 1 0 0 0-1 1v4.586a1 1 0 0 0 .293.707l7 7a1 1 0 0 0 1.414 0l.043-.043-7.457-7.457z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-tags-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 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.586zm3.5 4a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3'/%3E%3Cpath d='M1.293 7.793A1 1 0 0 1 1 7.086V2a1 1 0 0 0-1 1v4.586a1 1 0 0 0 .293.707l7 7a1 1 0 0 0 1.414 0l.043-.043-7.457-7.457z'/%3E%3C/svg%3E");
}

.bi-rulers-nav-menu {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-rulers' viewBox='0 0 16 16'%3E%3Cpath d='M1 0a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1zm0 1h3.5v1h-2v1h2v1h-2v1h2v1h-2v1h2v1h-2v1h2v1h-2v1h2v1H1zm4.5 0h1v3h-1zm2 0h1v1h-1zm2 0h1v3h-1zm2 0h1v1h-1zm2 0H15v14H8.5v-1h1v-1h-1v-1h1v-1h-1v-1h1v-1h-1v-1h1v-1h-1v-1h1v-1h-1v-1h1v-1h-1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-rulers' viewBox='0 0 16 16'%3E%3Cpath d='M1 0a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1zm0 1h3.5v1h-2v1h2v1h-2v1h2v1h-2v1h2v1h-2v1h2v1h-2v1h2v1H1zm4.5 0h1v3h-1zm2 0h1v1h-1zm2 0h1v3h-1zm2 0h1v1h-1zm2 0H15v14H8.5v-1h1v-1h-1v-1h1v-1h-1v-1h1v-1h-1v-1h1v-1h-1v-1h1v-1h-1v-1h1v-1h-1z'/%3E%3C/svg%3E");
}

.bi-percent-nav-menu {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-percent' 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");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-percent' 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-shop-nav-menu {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-shop' 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-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1zm3 0h-2v3h2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-shop' 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-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1zm3 0h-2v3h2z'/%3E%3C/svg%3E");
}

.bi-receipt-nav-menu {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-receipt' 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 .801.13l.5 1A.5.5 0 0 1 15 2v12a.5.5 0 0 1-.053.224l-.5 1a.5.5 0 0 1-.8.13L13 14.707l-.646.647a.5.5 0 0 1-.708 0L11 14.707l-.646.647a.5.5 0 0 1-.708 0L9 14.707l-.646.647a.5.5 0 0 1-.708 0L7 14.707l-.646.647a.5.5 0 0 1-.708 0L5 14.707l-.646.647a.5.5 0 0 1-.708 0L3 14.707l-.646.647a.5.5 0 0 1-.801-.13l-.5-1A.5.5 0 0 1 1 14V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27m.217 1.338L2 2.118v11.764l.137.274.51-.51a.5.5 0 0 1 .707 0l.646.647.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.509.509.137-.274V2.118l-.137-.274-.51.51a.5.5 0 0 1-.707 0L12 1.707l-.646.647a.5.5 0 0 1-.708 0L10 1.707l-.646.647a.5.5 0 0 1-.708 0L8 1.707l-.646.647a.5.5 0 0 1-.708 0L6 1.707l-.646.647a.5.5 0 0 1-.708 0L4 1.707l-.646.647a.5.5 0 0 1-.708 0z'/%3E%3Cpath d='M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5m8-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-receipt' 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 .801.13l.5 1A.5.5 0 0 1 15 2v12a.5.5 0 0 1-.053.224l-.5 1a.5.5 0 0 1-.8.13L13 14.707l-.646.647a.5.5 0 0 1-.708 0L11 14.707l-.646.647a.5.5 0 0 1-.708 0L9 14.707l-.646.647a.5.5 0 0 1-.708 0L7 14.707l-.646.647a.5.5 0 0 1-.708 0L5 14.707l-.646.647a.5.5 0 0 1-.708 0L3 14.707l-.646.647a.5.5 0 0 1-.801-.13l-.5-1A.5.5 0 0 1 1 14V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27m.217 1.338L2 2.118v11.764l.137.274.51-.51a.5.5 0 0 1 .707 0l.646.647.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.509.509.137-.274V2.118l-.137-.274-.51.51a.5.5 0 0 1-.707 0L12 1.707l-.646.647a.5.5 0 0 1-.708 0L10 1.707l-.646.647a.5.5 0 0 1-.708 0L8 1.707l-.646.647a.5.5 0 0 1-.708 0L6 1.707l-.646.647a.5.5 0 0 1-.708 0L4 1.707l-.646.647a.5.5 0 0 1-.708 0z'/%3E%3Cpath d='M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5m8-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E");
}

.bi-truck-nav-menu {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-truck' 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");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-truck' 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");
}

.bi-cash-coin-nav-menu {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-cash-coin' 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");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-cash-coin' 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-bag-check-nav-menu {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-bag-check' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M10.854 8.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708 0'/%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-bag-check' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M10.854 8.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708 0'/%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.bi-wallet2-nav-menu {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-wallet2' viewBox='0 0 16 16'%3E%3Cpath d='M12.136.326A1.5 1.5 0 0 1 14 1.78V3h.5A1.5 1.5 0 0 1 16 4.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 13.5v-9a1.5 1.5 0 0 1 1.432-1.499zM5.562 3H13V1.78a.5.5 0 0 0-.621-.484zM1.5 4a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-wallet2' viewBox='0 0 16 16'%3E%3Cpath d='M12.136.326A1.5 1.5 0 0 1 14 1.78V3h.5A1.5 1.5 0 0 1 16 4.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 13.5v-9a1.5 1.5 0 0 1 1.432-1.499zM5.562 3H13V1.78a.5.5 0 0 0-.621-.484zM1.5 4a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5z'/%3E%3C/svg%3E");
}

.bi-cash-stack-nav-menu {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-cash-stack' viewBox='0 0 16 16'%3E%3Cpath d='M1 3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1zm7 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4'/%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-1zm3 0a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h10a2 2 0 0 1 2-2V7a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-cash-stack' viewBox='0 0 16 16'%3E%3Cpath d='M1 3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1zm7 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4'/%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-1zm3 0a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h10a2 2 0 0 1 2-2V7a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
}

.bi-bar-chart-fill-nav-menu {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-bar-chart-fill' viewBox='0 0 16 16'%3E%3Cpath d='M1 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm5-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-bar-chart-fill' viewBox='0 0 16 16'%3E%3Cpath d='M1 11a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm5-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1zm5-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-people-fill-nav-menu {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-people-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-people-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5'/%3E%3C/svg%3E");
}

.bi-person-badge-fill-nav-menu {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-person-badge-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm4.5 0a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zM8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6m5 2.755C12.146 12.825 10.623 12 8 12s-4.146.826-5 1.755V14a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-person-badge-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm4.5 0a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zM8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6m5 2.755C12.146 12.825 10.623 12 8 12s-4.146.826-5 1.755V14a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1z'/%3E%3C/svg%3E");
}

.bi-shield-lock-fill-nav-menu {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-shield-lock-fill' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 0c-.69 0-1.843.265-2.928.56-1.11.3-2.229.655-2.887.87a1.54 1.54 0 0 0-1.044 1.262c-.596 4.477.787 7.795 2.465 9.99a11.8 11.8 0 0 0 2.517 2.453c.386.273.744.482 1.048.625.28.132.581.24.829.24s.548-.108.829-.24a7 7 0 0 0 1.048-.625 11.8 11.8 0 0 0 2.517-2.453c1.678-2.195 3.061-5.513 2.465-9.99a1.54 1.54 0 0 0-1.044-1.262 62 62 0 0 0-2.887-.87C9.843.266 8.69 0 8 0m0 5a1.5 1.5 0 0 1 .5 2.915l.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 0 1 8 5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-shield-lock-fill' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 0c-.69 0-1.843.265-2.928.56-1.11.3-2.229.655-2.887.87a1.54 1.54 0 0 0-1.044 1.262c-.596 4.477.787 7.795 2.465 9.99a11.8 11.8 0 0 0 2.517 2.453c.386.273.744.482 1.048.625.28.132.581.24.829.24s.548-.108.829-.24a7 7 0 0 0 1.048-.625 11.8 11.8 0 0 0 2.517-2.453c1.678-2.195 3.061-5.513 2.465-9.99a1.54 1.54 0 0 0-1.044-1.262 62 62 0 0 0-2.887-.87C9.843.266 8.69 0 8 0m0 5a1.5 1.5 0 0 1 .5 2.915l.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 0 1 8 5'/%3E%3C/svg%3E");
}

.bi-key-fill-nav-menu {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-key-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 11.5a3.5 3.5 0 1 1 3.163-5H14L15.5 8 14 9.5l-1-1-1 1-1-1-1 1-1-1-1 1H6.663a3.5 3.5 0 0 1-3.163 2M2.5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-key-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 11.5a3.5 3.5 0 1 1 3.163-5H14L15.5 8 14 9.5l-1-1-1 1-1-1-1 1-1-1-1 1H6.663a3.5 3.5 0 0 1-3.163 2M2.5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E%3C/svg%3E");
}

.bi-gear-fill-nav-menu {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-gear-fill' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-gear-fill' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/%3E%3C/svg%3E");
}