/* ==========================================================================
   HiFi Holdings POS - monochrome design system on top of Tabler 1.4 / Bootstrap 5.3
   Source of truth: docs/design-dna.json  ·  Contract: docs/UI_GUIDE.md

   Sections
     1. Tokens (light + dark) and Tabler/Bootstrap variable mapping
     2. Base typography and focus
     3. App shell: top bar, sidebar (rail / off-canvas), main, POS mode
     4. Tabler component overrides (buttons, forms, cards, tables, pills, alerts,
        dropdowns, modals, toasts, pagination, segmented, breadcrumb, empty, misc)
     5. App patterns (page header, sub-navigation, stat tiles, row actions,
        form actions, danger zone, sidebar call-out, POS, receipt)
     6. Motion (entrance, press, theme cross-fade, reduced motion/transparency)
     7. Print

   Rule: every colour in this file is white, black or a gray (R = G = B ± 2).
   ========================================================================== */

/* ------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------ */
:root,
[data-bs-theme=light] {
    color-scheme: light;

    /* design-dna neutrals */
    --hifi-canvas: #F6F6F4;
    --hifi-card: #FFFFFF;
    --hifi-elevated: #FFFFFF;
    --hifi-fill: #EEEEEC;            /* soft pill / active nav / table head */
    --hifi-fill-hover: #F3F3F1;
    --hifi-hairline: #E2E2E0;
    --hifi-hairline-strong: #CFCFCD;
    --hifi-faint: #A8A8A6;
    --hifi-subtle: #8A8A8A;
    --hifi-muted: #6B6B6B;
    --hifi-charcoal: #4A4A4A;
    --hifi-charcoal-2: #2A2A2A;
    --hifi-ink: #111111;
    --hifi-ink-rgb: 17, 17, 17;
    --hifi-ink-contrast: #FFFFFF;
    --hifi-ink-contrast-rgb: 255, 255, 255;
    --hifi-sidebar-bg: #FFFFFF;
    --hifi-callout-bg: #111111;
    --hifi-callout-fg: #FFFFFF;
    --hifi-callout-border: #111111;
    --hifi-chart-line: #111111;
    --hifi-chart-bar: #4A4A4A;
    --hifi-chart-grid: #EEEEEC;

    --hifi-shadow-low: 0 1px 2px rgba(0, 0, 0, .04);
    --hifi-shadow-med: 0 4px 12px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
    --hifi-shadow-high: 0 16px 40px rgba(0, 0, 0, .12), 0 2px 6px rgba(0, 0, 0, .06);

    --hifi-radius-sm: 8px;
    --hifi-radius-md: 12px;
    --hifi-radius-lg: 16px;
    --hifi-radius-pill: 999px;

    --hifi-ease: cubic-bezier(.2, 0, 0, 1);
    --hifi-dur-micro: 120ms;
    --hifi-dur: 200ms;
    --hifi-dur-macro: 320ms;

    /* layout */
    --app-sidebar-w: 248px;
    --app-sidebar-rail: 68px;
    --app-navbar-h: 60px;
    --app-content-max: 1320px;
    --app-page-px: 1.5rem;
    --app-page-py: 1.5rem;

    /* ---- Tabler neutral scale (drives surfaces, borders, text) ---- */
    --tblr-gray-50: #F6F6F4;
    --tblr-gray-100: #EEEEEC;
    --tblr-gray-200: #E2E2E0;
    --tblr-gray-300: #CFCFCD;
    --tblr-gray-400: #A8A8A6;
    --tblr-gray-500: #8A8A8A;
    --tblr-gray-600: #6B6B6B;
    --tblr-gray-700: #4A4A4A;
    --tblr-gray-800: #2A2A2A;
    --tblr-gray-900: #111111;
    --tblr-gray-950: #0A0A0A;

    --tblr-body-bg: var(--hifi-canvas);
    --tblr-body-bg-rgb: 246, 246, 244;
    --tblr-body-color: #111111;
    --tblr-body-color-rgb: 17, 17, 17;
    --tblr-emphasis-color: #111111;
    --tblr-emphasis-color-rgb: 17, 17, 17;
    --tblr-heading-color: #111111;
    --tblr-secondary-color: #6B6B6B;
    --tblr-secondary-color-rgb: 107, 107, 107;
    --tblr-secondary-bg: #EEEEEC;
    --tblr-secondary-bg-rgb: 238, 238, 236;
    --tblr-tertiary-color: #8A8A8A;
    --tblr-tertiary-color-rgb: 138, 138, 138;
    --tblr-tertiary-bg: #F6F6F4;
    --tblr-tertiary-bg-rgb: 246, 246, 244;

    --tblr-bg-surface: #FFFFFF;
    --tblr-bg-surface-primary: #FFFFFF;
    --tblr-bg-surface-secondary: #F6F6F4;
    --tblr-bg-surface-tertiary: #F6F6F4;
    --tblr-bg-surface-dark: #111111;
    --tblr-bg-surface-inverted: #111111;
    --tblr-text-inverted: #FFFFFF;
    --tblr-bg-forms: #FFFFFF;

    --tblr-border-color: #E2E2E0;
    --tblr-border-color-translucent: rgba(0, 0, 0, .08);
    --tblr-border-dark-color: #CFCFCD;
    --tblr-border-active-color: #8A8A8A;
    --tblr-active-bg: rgba(17, 17, 17, .05);
    --tblr-disabled-color: rgba(17, 17, 17, .4);
    --tblr-icon-color: #6B6B6B;
    --tblr-code-color: #111111;
    --tblr-code-bg: #EEEEEC;
    --tblr-highlight-color: #111111;
    --tblr-highlight-bg: #E2E2E0;

    --tblr-link-color: #111111;
    --tblr-link-color-rgb: 17, 17, 17;
    --tblr-link-hover-color: #4A4A4A;
    --tblr-link-hover-color-rgb: 74, 74, 74;
    --tblr-link-decoration: none;
    --tblr-link-hover-decoration: underline;

    /* theme colours: everything maps to ink or a gray */
    --tblr-primary: #111111;   --tblr-primary-rgb: 17, 17, 17;     --tblr-primary-fg: #FFFFFF;   --tblr-primary-darken: #000000;  --tblr-primary-lt: rgba(17, 17, 17, .08);
    --tblr-secondary: #6B6B6B; --tblr-secondary-rgb: 107, 107, 107; --tblr-secondary-fg: #FFFFFF; --tblr-secondary-darken: #4A4A4A; --tblr-secondary-lt: rgba(107, 107, 107, .1);
    --tblr-success: #111111;   --tblr-success-rgb: 17, 17, 17;     --tblr-success-fg: #FFFFFF;   --tblr-success-darken: #000000;  --tblr-success-lt: rgba(17, 17, 17, .08);
    --tblr-danger: #111111;    --tblr-danger-rgb: 17, 17, 17;      --tblr-danger-fg: #FFFFFF;    --tblr-danger-darken: #000000;   --tblr-danger-lt: rgba(17, 17, 17, .08);
    --tblr-warning: #4A4A4A;   --tblr-warning-rgb: 74, 74, 74;     --tblr-warning-fg: #FFFFFF;   --tblr-warning-darken: #2A2A2A;  --tblr-warning-lt: rgba(74, 74, 74, .1);
    --tblr-info: #6B6B6B;      --tblr-info-rgb: 107, 107, 107;     --tblr-info-fg: #FFFFFF;      --tblr-info-darken: #4A4A4A;     --tblr-info-lt: rgba(107, 107, 107, .1);
    --tblr-light: #F6F6F4;     --tblr-light-rgb: 246, 246, 244;    --tblr-light-fg: #111111;     --tblr-light-darken: #E2E2E0;    --tblr-light-lt: rgba(246, 246, 244, .5);
    --tblr-dark: #111111;      --tblr-dark-rgb: 17, 17, 17;        --tblr-dark-fg: #FFFFFF;      --tblr-dark-darken: #000000;     --tblr-dark-lt: rgba(17, 17, 17, .08);
    --tblr-muted: #6B6B6B;     --tblr-muted-rgb: 107, 107, 107;
    --tblr-blue: #6B6B6B;      --tblr-blue-rgb: 107, 107, 107;     --tblr-blue-fg: #FFFFFF;      --tblr-blue-darken: #4A4A4A;     --tblr-blue-lt: rgba(107, 107, 107, .1);
    --tblr-azure: #8A8A8A;     --tblr-azure-rgb: 138, 138, 138;    --tblr-azure-fg: #FFFFFF;     --tblr-azure-darken: #6B6B6B;    --tblr-azure-lt: rgba(138, 138, 138, .1);
    --tblr-indigo: #4A4A4A;    --tblr-indigo-rgb: 74, 74, 74;      --tblr-indigo-fg: #FFFFFF;    --tblr-indigo-darken: #2A2A2A;   --tblr-indigo-lt: rgba(74, 74, 74, .1);
    --tblr-purple: #4A4A4A;    --tblr-purple-rgb: 74, 74, 74;      --tblr-purple-fg: #FFFFFF;    --tblr-purple-darken: #2A2A2A;   --tblr-purple-lt: rgba(74, 74, 74, .1);
    --tblr-pink: #6B6B6B;      --tblr-pink-rgb: 107, 107, 107;     --tblr-pink-fg: #FFFFFF;      --tblr-pink-darken: #4A4A4A;     --tblr-pink-lt: rgba(107, 107, 107, .1);
    --tblr-red: #111111;       --tblr-red-rgb: 17, 17, 17;         --tblr-red-fg: #FFFFFF;       --tblr-red-darken: #000000;      --tblr-red-lt: rgba(17, 17, 17, .08);
    --tblr-orange: #4A4A4A;    --tblr-orange-rgb: 74, 74, 74;      --tblr-orange-fg: #FFFFFF;    --tblr-orange-darken: #2A2A2A;   --tblr-orange-lt: rgba(74, 74, 74, .1);
    --tblr-yellow: #8A8A8A;    --tblr-yellow-rgb: 138, 138, 138;   --tblr-yellow-fg: #FFFFFF;    --tblr-yellow-darken: #6B6B6B;   --tblr-yellow-lt: rgba(138, 138, 138, .1);
    --tblr-lime: #8A8A8A;      --tblr-lime-rgb: 138, 138, 138;     --tblr-lime-fg: #FFFFFF;      --tblr-lime-darken: #6B6B6B;     --tblr-lime-lt: rgba(138, 138, 138, .1);
    --tblr-green: #111111;     --tblr-green-rgb: 17, 17, 17;       --tblr-green-fg: #FFFFFF;     --tblr-green-darken: #000000;    --tblr-green-lt: rgba(17, 17, 17, .08);
    --tblr-teal: #6B6B6B;      --tblr-teal-rgb: 107, 107, 107;     --tblr-teal-fg: #FFFFFF;      --tblr-teal-darken: #4A4A4A;     --tblr-teal-lt: rgba(107, 107, 107, .1);
    --tblr-cyan: #8A8A8A;      --tblr-cyan-rgb: 138, 138, 138;     --tblr-cyan-fg: #FFFFFF;      --tblr-cyan-darken: #6B6B6B;     --tblr-cyan-lt: rgba(138, 138, 138, .1);

    --tblr-primary-text-emphasis: #111111;   --tblr-primary-bg-subtle: #EEEEEC;   --tblr-primary-border-subtle: #CFCFCD;
    --tblr-secondary-text-emphasis: #4A4A4A; --tblr-secondary-bg-subtle: #F6F6F4; --tblr-secondary-border-subtle: #E2E2E0;
    --tblr-success-text-emphasis: #111111;   --tblr-success-bg-subtle: #EEEEEC;   --tblr-success-border-subtle: #CFCFCD;
    --tblr-info-text-emphasis: #4A4A4A;      --tblr-info-bg-subtle: #F6F6F4;      --tblr-info-border-subtle: #E2E2E0;
    --tblr-warning-text-emphasis: #2A2A2A;   --tblr-warning-bg-subtle: #EEEEEC;   --tblr-warning-border-subtle: #CFCFCD;
    --tblr-danger-text-emphasis: #111111;    --tblr-danger-bg-subtle: #EEEEEC;    --tblr-danger-border-subtle: #CFCFCD;
    --tblr-light-text-emphasis: #4A4A4A;     --tblr-light-bg-subtle: #F6F6F4;     --tblr-light-border-subtle: #E2E2E0;
    --tblr-dark-text-emphasis: #111111;      --tblr-dark-bg-subtle: #CFCFCD;      --tblr-dark-border-subtle: #8A8A8A;

    --tblr-form-valid-color: #111111;
    --tblr-form-valid-border-color: #111111;
    --tblr-form-invalid-color: #111111;
    --tblr-form-invalid-border-color: #111111;
    --tblr-focus-ring-width: 1.5px;
    --tblr-focus-ring-opacity: 1;
    --tblr-focus-ring-color: #111111;

    /* type, shape, depth */
    --tblr-font-sans-serif: Inter, -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --tblr-body-font-family: var(--tblr-font-sans-serif);
    --tblr-font-monospace: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --tblr-body-font-size: 0.875rem;
    --tblr-body-line-height: 1.5;
    --tblr-font-weight-medium: 500;
    --tblr-font-weight-bold: 600;
    --tblr-font-weight-headings: 600;
    --tblr-font-size-h1: 1.5rem;
    --tblr-font-size-h2: 1.25rem;
    --tblr-font-size-h3: 1.125rem;
    --tblr-font-size-h4: 1rem;
    --tblr-border-radius: 8px;
    --tblr-border-radius-sm: 6px;
    --tblr-border-radius-lg: 16px;
    --tblr-border-radius-xl: 20px;
    --tblr-border-radius-xxl: 24px;
    --tblr-border-radius-pill: 999px;
    --tblr-shadow-card: none;
    --tblr-shadow-input: none;
    --tblr-box-shadow: var(--hifi-shadow-high);
    --tblr-box-shadow-sm: var(--hifi-shadow-med);
    --tblr-box-shadow-lg: var(--hifi-shadow-high);
    --tblr-shadow-dropdown: var(--hifi-shadow-high);
    --tblr-page-padding: 1.5rem;
    --tblr-page-padding-y: 1.5rem;

    /* --bs-* aliases for markup that still uses Bootstrap variables */
    --bs-primary: #111111;
    --bs-primary-rgb: 17, 17, 17;
    --bs-secondary: #6B6B6B;
    --bs-success: #111111;
    --bs-danger: #111111;
    --bs-warning: #4A4A4A;
    --bs-info: #6B6B6B;
    --bs-body-bg: var(--hifi-canvas);
    --bs-body-color: #111111;
    --bs-secondary-color: #6B6B6B;
    --bs-border-color: #E2E2E0;
    --bs-link-color: #111111;
    --bs-link-hover-color: #4A4A4A;
    --bs-font-sans-serif: var(--tblr-font-sans-serif);
    --bs-border-radius: 8px;
    --bs-focus-ring-color: rgba(17, 17, 17, .35);
}

[data-bs-theme=dark] {
    color-scheme: dark;

    --hifi-canvas: #0F0F0F;
    --hifi-card: #181818;
    --hifi-elevated: #202020;
    --hifi-fill: #242424;
    --hifi-fill-hover: #1F1F1F;
    --hifi-hairline: #2A2A2A;
    --hifi-hairline-strong: #3A3A3A;
    --hifi-faint: #6B6B6B;
    --hifi-subtle: #8A8A8A;
    --hifi-muted: #A8A8A6;
    --hifi-charcoal: #CFCFCD;
    --hifi-charcoal-2: #E2E2E0;
    --hifi-ink: #F5F5F5;
    --hifi-ink-rgb: 245, 245, 245;
    --hifi-ink-contrast: #0F0F0F;
    --hifi-ink-contrast-rgb: 15, 15, 15;
    --hifi-sidebar-bg: #181818;
    --hifi-callout-bg: #202020;
    --hifi-callout-fg: #F5F5F5;
    --hifi-callout-border: #2A2A2A;
    --hifi-chart-line: #F5F5F5;
    --hifi-chart-bar: #CFCFCD;
    --hifi-chart-grid: #242424;

    --hifi-shadow-low: 0 1px 2px rgba(0, 0, 0, .3);
    --hifi-shadow-med: 0 4px 12px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .3);
    --hifi-shadow-high: 0 16px 40px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .35);

    --tblr-gray-50: #F5F5F5;
    --tblr-gray-100: #F0F0EE;
    --tblr-gray-200: #E8E8E6;
    --tblr-gray-300: #CFCFCD;
    --tblr-gray-400: #A8A8A6;
    --tblr-gray-500: #8A8A8A;
    --tblr-gray-600: #6B6B6B;
    --tblr-gray-700: #2A2A2A;
    --tblr-gray-800: #181818;
    --tblr-gray-900: #0F0F0F;
    --tblr-gray-950: #0A0A0A;

    --tblr-body-bg: var(--hifi-canvas);
    --tblr-body-bg-rgb: 15, 15, 15;
    --tblr-body-color: #E8E8E6;
    --tblr-body-color-rgb: 232, 232, 230;
    --tblr-emphasis-color: #F5F5F5;
    --tblr-emphasis-color-rgb: 245, 245, 245;
    --tblr-heading-color: #F5F5F5;
    --tblr-secondary-color: #A8A8A6;
    --tblr-secondary-color-rgb: 168, 168, 166;
    --tblr-secondary-bg: #242424;
    --tblr-secondary-bg-rgb: 36, 36, 36;
    --tblr-tertiary-color: #8A8A8A;
    --tblr-tertiary-color-rgb: 138, 138, 138;
    --tblr-tertiary-bg: #181818;
    --tblr-tertiary-bg-rgb: 24, 24, 24;

    --tblr-bg-surface: #181818;
    --tblr-bg-surface-primary: #181818;
    --tblr-bg-surface-secondary: #1E1E1E;
    --tblr-bg-surface-tertiary: #1C1C1C;
    --tblr-bg-surface-dark: #0A0A0A;
    --tblr-bg-surface-inverted: #F5F5F5;
    --tblr-text-inverted: #0F0F0F;
    --tblr-bg-forms: #141414;

    --tblr-border-color: #2A2A2A;
    --tblr-border-color-translucent: rgba(255, 255, 255, .09);
    --tblr-border-dark-color: #3A3A3A;
    --tblr-border-active-color: #6B6B6B;
    --tblr-dark-mode-border-color-translucent: rgba(255, 255, 255, .09);
    --tblr-dark-mode-border-dark-color: #3A3A3A;
    --tblr-dark-mode-border-active-color: #6B6B6B;
    --tblr-active-bg: rgba(245, 245, 245, .06);
    --tblr-disabled-color: rgba(232, 232, 230, .4);
    --tblr-icon-color: #A8A8A6;
    --tblr-code-color: #E8E8E6;
    --tblr-code-bg: #242424;
    --tblr-highlight-color: #F5F5F5;
    --tblr-highlight-bg: #3A3A3A;

    --tblr-link-color: #F5F5F5;
    --tblr-link-color-rgb: 245, 245, 245;
    --tblr-link-hover-color: #CFCFCD;
    --tblr-link-hover-color-rgb: 207, 207, 205;

    --tblr-primary: #F5F5F5;   --tblr-primary-rgb: 245, 245, 245;   --tblr-primary-fg: #0F0F0F;   --tblr-primary-darken: #FFFFFF;  --tblr-primary-lt: rgba(245, 245, 245, .1);
    --tblr-secondary: #A8A8A6; --tblr-secondary-rgb: 168, 168, 166; --tblr-secondary-fg: #0F0F0F; --tblr-secondary-darken: #CFCFCD; --tblr-secondary-lt: rgba(168, 168, 166, .1);
    --tblr-success: #F5F5F5;   --tblr-success-rgb: 245, 245, 245;   --tblr-success-fg: #0F0F0F;   --tblr-success-darken: #FFFFFF;  --tblr-success-lt: rgba(245, 245, 245, .1);
    --tblr-danger: #F5F5F5;    --tblr-danger-rgb: 245, 245, 245;    --tblr-danger-fg: #0F0F0F;    --tblr-danger-darken: #FFFFFF;   --tblr-danger-lt: rgba(245, 245, 245, .1);
    --tblr-warning: #CFCFCD;   --tblr-warning-rgb: 207, 207, 205;   --tblr-warning-fg: #0F0F0F;   --tblr-warning-darken: #E2E2E0;  --tblr-warning-lt: rgba(207, 207, 205, .1);
    --tblr-info: #A8A8A6;      --tblr-info-rgb: 168, 168, 166;      --tblr-info-fg: #0F0F0F;      --tblr-info-darken: #CFCFCD;     --tblr-info-lt: rgba(168, 168, 166, .1);
    --tblr-light: #242424;     --tblr-light-rgb: 36, 36, 36;        --tblr-light-fg: #F5F5F5;     --tblr-light-darken: #2E2E2E;    --tblr-light-lt: rgba(36, 36, 36, .5);
    --tblr-dark: #F5F5F5;      --tblr-dark-rgb: 245, 245, 245;      --tblr-dark-fg: #0F0F0F;      --tblr-dark-darken: #FFFFFF;     --tblr-dark-lt: rgba(245, 245, 245, .1);
    --tblr-muted: #A8A8A6;     --tblr-muted-rgb: 168, 168, 166;
    --tblr-blue: #A8A8A6;      --tblr-blue-rgb: 168, 168, 166;      --tblr-blue-fg: #0F0F0F;      --tblr-blue-darken: #CFCFCD;     --tblr-blue-lt: rgba(168, 168, 166, .1);
    --tblr-azure: #8A8A8A;     --tblr-azure-rgb: 138, 138, 138;     --tblr-azure-fg: #0F0F0F;     --tblr-azure-darken: #A8A8A6;    --tblr-azure-lt: rgba(138, 138, 138, .1);
    --tblr-indigo: #CFCFCD;    --tblr-indigo-rgb: 207, 207, 205;    --tblr-indigo-fg: #0F0F0F;    --tblr-indigo-darken: #E2E2E0;   --tblr-indigo-lt: rgba(207, 207, 205, .1);
    --tblr-purple: #CFCFCD;    --tblr-purple-rgb: 207, 207, 205;    --tblr-purple-fg: #0F0F0F;    --tblr-purple-darken: #E2E2E0;   --tblr-purple-lt: rgba(207, 207, 205, .1);
    --tblr-pink: #A8A8A6;      --tblr-pink-rgb: 168, 168, 166;      --tblr-pink-fg: #0F0F0F;      --tblr-pink-darken: #CFCFCD;     --tblr-pink-lt: rgba(168, 168, 166, .1);
    --tblr-red: #F5F5F5;       --tblr-red-rgb: 245, 245, 245;       --tblr-red-fg: #0F0F0F;       --tblr-red-darken: #FFFFFF;      --tblr-red-lt: rgba(245, 245, 245, .1);
    --tblr-orange: #CFCFCD;    --tblr-orange-rgb: 207, 207, 205;    --tblr-orange-fg: #0F0F0F;    --tblr-orange-darken: #E2E2E0;   --tblr-orange-lt: rgba(207, 207, 205, .1);
    --tblr-yellow: #8A8A8A;    --tblr-yellow-rgb: 138, 138, 138;    --tblr-yellow-fg: #0F0F0F;    --tblr-yellow-darken: #A8A8A6;   --tblr-yellow-lt: rgba(138, 138, 138, .1);
    --tblr-lime: #8A8A8A;      --tblr-lime-rgb: 138, 138, 138;      --tblr-lime-fg: #0F0F0F;      --tblr-lime-darken: #A8A8A6;     --tblr-lime-lt: rgba(138, 138, 138, .1);
    --tblr-green: #F5F5F5;     --tblr-green-rgb: 245, 245, 245;     --tblr-green-fg: #0F0F0F;     --tblr-green-darken: #FFFFFF;    --tblr-green-lt: rgba(245, 245, 245, .1);
    --tblr-teal: #A8A8A6;      --tblr-teal-rgb: 168, 168, 166;      --tblr-teal-fg: #0F0F0F;      --tblr-teal-darken: #CFCFCD;     --tblr-teal-lt: rgba(168, 168, 166, .1);
    --tblr-cyan: #8A8A8A;      --tblr-cyan-rgb: 138, 138, 138;      --tblr-cyan-fg: #0F0F0F;      --tblr-cyan-darken: #A8A8A6;     --tblr-cyan-lt: rgba(138, 138, 138, .1);

    --tblr-primary-text-emphasis: #F5F5F5;   --tblr-primary-bg-subtle: #242424;   --tblr-primary-border-subtle: #3A3A3A;
    --tblr-secondary-text-emphasis: #CFCFCD; --tblr-secondary-bg-subtle: #1E1E1E; --tblr-secondary-border-subtle: #2A2A2A;
    --tblr-success-text-emphasis: #F5F5F5;   --tblr-success-bg-subtle: #242424;   --tblr-success-border-subtle: #3A3A3A;
    --tblr-info-text-emphasis: #CFCFCD;      --tblr-info-bg-subtle: #1E1E1E;      --tblr-info-border-subtle: #2A2A2A;
    --tblr-warning-text-emphasis: #E2E2E0;   --tblr-warning-bg-subtle: #242424;   --tblr-warning-border-subtle: #3A3A3A;
    --tblr-danger-text-emphasis: #F5F5F5;    --tblr-danger-bg-subtle: #242424;    --tblr-danger-border-subtle: #3A3A3A;
    --tblr-light-text-emphasis: #CFCFCD;     --tblr-light-bg-subtle: #1E1E1E;     --tblr-light-border-subtle: #2A2A2A;
    --tblr-dark-text-emphasis: #F5F5F5;      --tblr-dark-bg-subtle: #3A3A3A;      --tblr-dark-border-subtle: #6B6B6B;

    --tblr-form-valid-color: #F5F5F5;
    --tblr-form-valid-border-color: #F5F5F5;
    --tblr-form-invalid-color: #F5F5F5;
    --tblr-form-invalid-border-color: #F5F5F5;
    --tblr-focus-ring-color: #F5F5F5;
    --tblr-box-shadow: var(--hifi-shadow-high);
    --tblr-box-shadow-sm: var(--hifi-shadow-med);
    --tblr-box-shadow-lg: var(--hifi-shadow-high);
    --tblr-shadow-dropdown: var(--hifi-shadow-high);

    --bs-primary: #F5F5F5;
    --bs-primary-rgb: 245, 245, 245;
    --bs-secondary: #A8A8A6;
    --bs-success: #F5F5F5;
    --bs-danger: #F5F5F5;
    --bs-warning: #CFCFCD;
    --bs-info: #A8A8A6;
    --bs-body-bg: var(--hifi-canvas);
    --bs-body-color: #E8E8E6;
    --bs-secondary-color: #A8A8A6;
    --bs-border-color: #2A2A2A;
    --bs-link-color: #F5F5F5;
    --bs-link-hover-color: #CFCFCD;
    --bs-focus-ring-color: rgba(245, 245, 245, .35);
}

@media (min-width: 1400px) {
    :root { --app-page-px: 2rem; }
}

/* ------------------------------------------------------------------------
   2. Base typography and focus
   ------------------------------------------------------------------------ */
html { background: var(--tblr-body-bg); }
body.app-body {
    margin: 0;
    min-height: 100vh;
    background: var(--tblr-body-bg);
    color: var(--tblr-body-color);
    font-family: var(--tblr-font-sans-serif);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .page-title, .card-title, .modal-title, .empty-title {
    letter-spacing: -0.02em;
    font-weight: var(--tblr-font-weight-headings);
    color: var(--tblr-heading-color);
}
h3, h4, .h3, .h4, .card-title, .modal-title { letter-spacing: -0.01em; }
.subheader, .page-pretitle, .datagrid-title, .hr-text, .overline {
    letter-spacing: 0.06em;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--tblr-secondary);
}
.text-money, .text-qty, .tabular { font-variant-numeric: tabular-nums; white-space: nowrap; }
td.text-money, th.text-money, td.text-qty, th.text-qty { text-align: right; }
a { color: var(--tblr-link-color); }
a:hover { color: var(--tblr-link-hover-color); }
code { color: var(--tblr-code-color); background: var(--tblr-code-bg); padding: .125rem .375rem; border-radius: 6px; font-size: .8125em; }
::selection { background: var(--hifi-ink); color: var(--hifi-ink-contrast); }

/* One focus treatment everywhere: a 1.5px ink ring, only for keyboard users */
:focus { outline: none; }
:focus-visible { outline: 1.5px solid var(--hifi-ink); outline-offset: 2px; box-shadow: none !important; }
.btn:focus-visible, .form-check-input:focus-visible, .nav-link:focus-visible, .dropdown-item:focus-visible, .page-link:focus-visible {
    outline: 1.5px solid var(--hifi-ink);
    outline-offset: 2px;
    box-shadow: none !important;
}
.skip-link {
    position: absolute; left: .75rem; top: -3rem; z-index: 2000;
    padding: .5rem .75rem; border-radius: 8px; background: var(--hifi-ink); color: var(--hifi-ink-contrast); font-weight: 500;
    transition: top var(--hifi-dur-micro) var(--hifi-ease);
}
.skip-link:focus { top: .75rem; color: var(--hifi-ink-contrast); }

/* ------------------------------------------------------------------------
   3. App shell
   ------------------------------------------------------------------------ */
.app-shell {
    display: grid;
    grid-template-columns: var(--app-sidebar-w) minmax(0, 1fr);
    grid-template-rows: var(--app-navbar-h) minmax(0, 1fr);
    min-height: 100vh;
    transition: grid-template-columns var(--hifi-dur) var(--hifi-ease);
}

/* Top bar: translucent, hairline only once content scrolls under it */
.app-navbar.navbar {
    grid-column: 1 / -1;
    grid-row: 1;
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--app-navbar-h);
    min-height: var(--app-navbar-h);
    padding: 0;
    border: 0;
    box-shadow: inset 0 -1px 0 transparent;
    background: color-mix(in srgb, var(--tblr-body-bg) 72%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    color: var(--tblr-body-color);
    transition: box-shadow var(--hifi-dur) var(--hifi-ease), background-color var(--hifi-dur) var(--hifi-ease);
}
.app-navbar.is-scrolled { box-shadow: inset 0 -1px 0 var(--hifi-hairline); }
.app-navbar-inner { display: flex; flex-wrap: nowrap; align-items: center; gap: .75rem; width: 100%; height: 100%; min-width: 0; padding: 0 1rem 0 .75rem; }
.app-navbar-start { display: flex; align-items: center; gap: .5rem; min-width: 0; flex: 1 1 auto; }
.app-navbar-end { display: flex; align-items: center; gap: .375rem; margin-left: auto; flex: 0 0 auto; white-space: nowrap; }
.app-brand.navbar-brand {
    display: inline-flex; align-items: center; gap: .625rem; margin: 0; padding: .25rem .375rem .25rem .25rem; min-width: 0; flex: 0 1 auto;
    font-size: .9375rem; font-weight: 600; letter-spacing: -0.01em; color: var(--tblr-body-color); border-radius: 10px;
}
.app-brand.navbar-brand:hover { color: var(--tblr-body-color); background: var(--tblr-active-bg); }
.app-brand-mark {
    width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto;
    background: var(--hifi-ink); color: var(--hifi-ink-contrast);
    display: inline-grid; place-items: center; font-size: 1.125rem; line-height: 1;
}
.app-brand-logo { height: 32px; width: auto; border-radius: 8px; }
.app-brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16rem; min-width: 0; }
/* The date is information, not a control: plain muted text, no pill (a pill reads as a date picker) */
.app-navbar-date { align-items: center; font-size: .8125rem; color: var(--tblr-secondary); padding: 0 .5rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.app-navbar-back { gap: .375rem; flex: 0 0 auto; }
.app-navbar-back span { white-space: nowrap; }
.app-navbar-mode { margin-left: .25rem; flex: 0 0 auto; }
.app-navbar-links { flex: 0 0 auto; flex-wrap: nowrap; }
.app-navbar-links .btn { gap: .375rem; white-space: nowrap; }
@media (max-width: 1199.98px) {
    /* POS bar on a tablet: Held bills / Sales become icon-only (aria-label + title carry the name) */
    .app-navbar-links .app-navbar-link { --tblr-btn-padding-x: 0; width: 2.5rem; min-width: 2.5rem; justify-content: center; }
    .app-navbar-links .app-navbar-link-text { display: none; }
    body.pos-mode .app-brand-name { max-width: 11rem; }
}
@media (max-width: 575.98px) { .app-navbar-links .app-navbar-link-text { display: none; } }
.theme-toggle .theme-icon-dark { display: none; }
[data-bs-theme=dark] .theme-toggle .theme-icon-light { display: none; }
[data-bs-theme=dark] .theme-toggle .theme-icon-dark { display: inline-block; }
.app-user-menu { list-style: none; }
.app-user-menu > .nav-link { gap: .625rem; color: var(--tblr-body-color); padding: .25rem .5rem .25rem .25rem !important; border-radius: 999px; }
.app-user-menu > .nav-link:hover, .app-user-menu > .nav-link.show { background: var(--tblr-active-bg); color: var(--tblr-body-color); }
.app-user-text { display: flex; flex-direction: column; text-align: left; line-height: 1.15; }
.app-user-name { font-size: .8125rem; font-weight: 600; white-space: nowrap; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
.app-user-role { font-size: .6875rem; color: var(--tblr-secondary); margin-top: 2px; }
.app-user-caret { font-size: .875rem; color: var(--tblr-secondary); }
.app-navbar .dropdown-menu { margin-top: .5rem; }

/* Sidebar */
.app-sidebar.navbar {
    grid-column: 1;
    grid-row: 2;
    position: sticky;
    top: var(--app-navbar-h);
    height: calc(100vh - var(--app-navbar-h));
    min-height: 0;
    width: auto;
    z-index: 1020;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
    background: var(--hifi-sidebar-bg);
    box-shadow: inset -1px 0 0 var(--hifi-hairline);
    --tblr-navbar-bg: var(--hifi-sidebar-bg);
    --tblr-navbar-border-width: 0;
    transition: background-color var(--hifi-dur) var(--hifi-ease);
}
/* Vertical rhythm is tight on purpose: 17 items + 5 labels + the call-out must fit a 900px laptop viewport */
.app-sidebar-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; padding: .5rem .75rem 0; scrollbar-width: thin; position: relative; }
.app-sidebar-nav { flex: 0 0 auto; }
.app-sidebar-group { margin-bottom: 0; }
/* Every group break is identical: Tabler gives .navbar-nav a 3rem min-height, which made one-item groups (Insights) taller */
.app-sidebar-group + .app-sidebar-group { margin-top: .375rem; }
.app-sidebar .navbar-nav { min-height: 0; }
.app-sidebar-label { padding: .375rem .75rem .125rem; white-space: nowrap; overflow: hidden; color: var(--tblr-tertiary-color); font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; }
.app-sidebar-group:first-child .app-sidebar-label { padding-top: .125rem; }
.app-sidebar .navbar-nav { flex-direction: column; gap: 0; --tblr-navbar-nav-link-padding-x: .75rem; }
.app-sidebar .nav-item { width: 100%; }
/* Strict left-aligned rail: this selector outranks Tabler's .navbar-expand .navbar-nav .nav-link (which centres) */
.app-sidebar.navbar .navbar-nav .nav-link, .app-sidebar .nav-item .nav-link, .app-sidebar .nav-link {
    display: flex; align-items: center; justify-content: flex-start !important; width: 100%; gap: .625rem; height: 2rem; min-height: 2rem; padding: 0 .75rem; border-radius: 9px;
    color: var(--tblr-secondary); font-size: .875rem; font-weight: 500; white-space: nowrap; overflow: hidden; margin: 0; line-height: 1;
    transition: background-color var(--hifi-dur-micro) var(--hifi-ease), color var(--hifi-dur-micro) var(--hifi-ease);
}
.app-sidebar .nav-link .nav-link-title { flex: 1 1 auto; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; }
/* Bottom fade when the nav overflows, so hidden items are signalled (toggled by app.js) */
.app-sidebar-scroll.has-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); }
.app-sidebar .nav-link:hover { background: var(--hifi-fill-hover); color: var(--tblr-body-color); }
.app-sidebar .nav-link.active { background: var(--hifi-fill); color: var(--hifi-ink); font-weight: 600; }
.app-sidebar .nav-link .nav-link-icon { width: 1.25rem; height: 1.25rem; margin: 0; display: inline-grid; place-items: center; font-size: 1.25rem; line-height: 1; flex: 0 0 auto; color: inherit; }
.app-sidebar-footer { margin-top: auto; padding: .375rem .25rem .375rem; display: flex; align-items: center; gap: .5rem; border-top: 1px solid var(--hifi-hairline); position: sticky; bottom: 0; background: var(--hifi-sidebar-bg); }
/* "Soon" pill on items whose module has not shipped yet (hidden in the icon rail with the other labels) */
.app-sidebar .nav-link .status.nav-link-soon { flex: 0 0 auto; height: 1.125rem; padding: 0 .4375rem; font-size: .625rem; font-weight: 500; letter-spacing: .02em; color: var(--tblr-tertiary-color); --tblr-status-color: var(--hifi-hairline-strong); border-color: var(--hifi-hairline-strong); }
.app-sidebar .nav-link.active .status.nav-link-soon { color: var(--tblr-secondary); }
/* Version lives in the user menu as a muted, non-clickable line (no footer text in the chrome) */
.dropdown-item-text.app-version { font-size: .75rem; color: var(--tblr-tertiary-color); padding: .25rem .75rem .375rem; cursor: default; user-select: text; }
.sidebar-collapse-btn .ti { transition: transform var(--hifi-dur) var(--hifi-ease); }
.app-sidebar-backdrop { display: none; }

/* Sidebar call-out (the reference's "Upgrade" card, repurposed for the counter) - compact so it stays above the fold */
.sidebar-callout {
    margin: auto 0 .5rem; padding: .75rem;   /* auto top: pinned above the collapse button even when the nav is short */ border-radius: 14px;
    background: var(--hifi-callout-bg); color: var(--hifi-callout-fg); border: 1px solid var(--hifi-callout-border);
}
.sidebar-callout-head { display: flex; align-items: center; gap: .5rem; }
.sidebar-callout-icon { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; font-size: 1rem; background: color-mix(in srgb, var(--hifi-callout-fg) 14%, transparent); }
.sidebar-callout-title { font-size: .875rem; font-weight: 600; letter-spacing: -0.01em; }
.sidebar-callout-text { font-size: .75rem; line-height: 1.4; opacity: .72; margin: .375rem 0 .625rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-callout-btn.btn { background: var(--hifi-callout-fg); color: var(--hifi-callout-bg); border-color: transparent; font-weight: 600; min-height: 2.125rem; --tblr-btn-padding-y: .375rem; }
.sidebar-callout-btn.btn:hover { background: var(--hifi-callout-fg); color: var(--hifi-callout-bg); opacity: .92; }
[data-bs-theme=dark] .sidebar-callout-btn.btn { background: var(--hifi-ink); color: var(--hifi-ink-contrast); }

.sidebar-callout + .app-sidebar-footer { margin-top: 0; }

/* Collapsed icon rail (persisted; auto below 1024px) */
@media (min-width: 768px) {
    html[data-sidebar=collapsed] .app-shell { grid-template-columns: var(--app-sidebar-rail) minmax(0, 1fr); }
    html[data-sidebar=collapsed] .app-sidebar-scroll { padding-left: .5rem; padding-right: .5rem; }
    html[data-sidebar=collapsed] .app-sidebar.navbar .navbar-nav .nav-link, html[data-sidebar=collapsed] .app-sidebar .nav-link { justify-content: center !important; padding: 0; width: 2.5rem; height: 2.25rem; margin: 2px auto; }
    html[data-sidebar=collapsed] .app-sidebar .nav-link > span:not(.nav-link-icon) { display: none; }
    html[data-sidebar=collapsed] .app-sidebar-label { height: 1px; padding: 0; margin: .5rem .5rem .625rem; background: var(--hifi-hairline); }
    html[data-sidebar=collapsed] .app-sidebar-label span { display: none; }
    html[data-sidebar=collapsed] .app-sidebar-group:first-child .app-sidebar-label { display: none; }
    html[data-sidebar=collapsed] .sidebar-callout { display: none; }
    html[data-sidebar=collapsed] .app-sidebar-version { display: none; }
    html[data-sidebar=collapsed] .app-sidebar-footer { justify-content: center; padding-left: 0; padding-right: 0; }
    html[data-sidebar=collapsed] .sidebar-collapse-btn .ti { transform: scaleX(-1); }
}

/* Main content */
.app-main.page-body {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    margin: 0;
    padding: var(--app-page-py) var(--app-page-px) 3rem;
    display: block;
}
.app-content { max-width: var(--app-content-max); margin: 0 auto; }

/* Off-canvas below 768px */
@media (max-width: 767.98px) {
    .app-shell { grid-template-columns: minmax(0, 1fr); }
    .app-main.page-body { grid-column: 1; padding: 1rem 1rem 2.5rem; }
    .app-sidebar.navbar {
        position: fixed; left: 0; top: var(--app-navbar-h); bottom: 0; width: var(--app-sidebar-w); height: auto; z-index: 1040;
        transform: translateX(-100%); box-shadow: none;
        transition: transform var(--hifi-dur) var(--hifi-ease);
    }
    body.sidebar-open .app-sidebar.navbar { transform: none; box-shadow: var(--hifi-shadow-high); }
    .app-sidebar-backdrop { position: fixed; inset: var(--app-navbar-h) 0 0 0; background: rgba(0, 0, 0, .4); z-index: 1035; }
    body.sidebar-open .app-sidebar-backdrop { display: block; }
    .app-brand-name { max-width: 9rem; }
    .app-navbar-inner { padding: 0 .75rem 0 .5rem; }
}

/* POS "app mode": no sidebar, compact bar, full-bleed content */
body.pos-mode .app-shell { grid-template-columns: minmax(0, 1fr); }
body.pos-mode .app-sidebar, body.pos-mode .app-sidebar-backdrop { display: none !important; }
body.pos-mode .app-main.page-body { grid-column: 1; padding: 1rem 1.25rem 1.5rem; }
body.pos-mode .app-content { max-width: none; }

/* ------------------------------------------------------------------------
   4. Tabler component overrides
   ------------------------------------------------------------------------ */

/* Buttons: primary = ink, secondary = hairline outline, ghost = text; nothing coloured */
.btn {
    --tblr-btn-border-radius: var(--hifi-radius-sm);
    --tblr-btn-font-weight: 500;
    --tblr-btn-box-shadow: none;
    --tblr-btn-active-shadow: none;
    gap: .375rem;
    transition: background-color var(--hifi-dur-micro) var(--hifi-ease), border-color var(--hifi-dur-micro) var(--hifi-ease), color var(--hifi-dur-micro) var(--hifi-ease), transform var(--hifi-dur-micro) var(--hifi-ease), opacity var(--hifi-dur-micro);
}
.btn:active:not(:disabled):not(.disabled) { transform: scale(.98); }
.btn .icon, .btn .ti { font-size: 1.125rem; line-height: 1; }
.btn-sm .icon, .btn-sm .ti { font-size: 1rem; }
.btn-lg { --tblr-btn-padding-y: .75rem; --tblr-btn-padding-x: 1.25rem; --tblr-btn-font-size: .9375rem; --tblr-btn-border-radius: 10px; }
.btn-primary, .btn-success, .btn-danger, .btn-dark, .btn-danger-ink {
    --tblr-btn-color: var(--hifi-ink-contrast);
    --tblr-btn-bg: var(--hifi-ink);
    --tblr-btn-border-color: var(--hifi-ink);
    --tblr-btn-hover-color: var(--hifi-ink-contrast);
    --tblr-btn-hover-bg: var(--hifi-charcoal-2);
    --tblr-btn-hover-border-color: var(--hifi-charcoal-2);
    --tblr-btn-active-color: var(--hifi-ink-contrast);
    --tblr-btn-active-bg: var(--hifi-charcoal-2);
    --tblr-btn-active-border-color: var(--hifi-charcoal-2);
    --tblr-btn-disabled-bg: var(--hifi-ink);
    --tblr-btn-disabled-color: var(--hifi-ink-contrast);
    --tblr-btn-disabled-border-color: var(--hifi-ink);
}
[data-bs-theme=dark] .btn-primary, [data-bs-theme=dark] .btn-success, [data-bs-theme=dark] .btn-danger, [data-bs-theme=dark] .btn-dark, [data-bs-theme=dark] .btn-danger-ink {
    --tblr-btn-hover-bg: #FFFFFF; --tblr-btn-hover-border-color: #FFFFFF; --tblr-btn-active-bg: #FFFFFF; --tblr-btn-active-border-color: #FFFFFF;
}
.btn-secondary, .btn-warning, .btn-info, .btn-light,
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-info, .btn-outline-dark, .btn-outline-light {
    --tblr-btn-color: var(--tblr-body-color);
    --tblr-btn-bg: var(--tblr-bg-surface);
    --tblr-btn-border-color: var(--hifi-hairline-strong);
    --tblr-btn-hover-color: var(--tblr-body-color);
    --tblr-btn-hover-bg: var(--hifi-fill);
    --tblr-btn-hover-border-color: var(--tblr-border-active-color);
    --tblr-btn-active-color: var(--tblr-body-color);
    --tblr-btn-active-bg: var(--hifi-fill);
    --tblr-btn-active-border-color: var(--tblr-border-active-color);
    --tblr-btn-disabled-color: var(--tblr-body-color);
    --tblr-btn-disabled-bg: var(--tblr-bg-surface);
    --tblr-btn-disabled-border-color: var(--hifi-hairline);
}
.btn:not([class*="btn-"]), .btn.btn-default { --tblr-btn-border-color: var(--hifi-hairline-strong); --tblr-btn-hover-bg: var(--hifi-fill); --tblr-btn-hover-border-color: var(--tblr-border-active-color); --tblr-btn-active-bg: var(--hifi-fill); --tblr-btn-active-color: var(--tblr-body-color); --tblr-btn-active-border-color: var(--tblr-border-active-color); }
.btn-ghost-secondary, .btn-ghost-primary, .btn-ghost-danger, .btn-ghost-success, .btn-ghost-warning, .btn-ghost-info, .btn-ghost-dark, .btn-link {
    --tblr-btn-color: var(--tblr-secondary);
    --tblr-btn-bg: transparent;
    --tblr-btn-border-color: transparent;
    --tblr-btn-hover-color: var(--tblr-body-color);
    --tblr-btn-hover-bg: var(--hifi-fill);
    --tblr-btn-hover-border-color: transparent;
    --tblr-btn-active-color: var(--tblr-body-color);
    --tblr-btn-active-bg: var(--hifi-fill);
    --tblr-btn-active-border-color: transparent;
    --tblr-btn-disabled-color: var(--tblr-secondary);
}
.btn-link { --tblr-btn-color: var(--tblr-body-color); --tblr-btn-hover-bg: transparent; text-decoration: underline; text-underline-offset: 3px; }
.btn-icon { --tblr-btn-padding-x: 0; width: 2.25rem; min-width: 2.25rem; }
.btn-icon.btn-sm { width: 1.875rem; min-width: 1.875rem; }
.btn-icon.btn-lg { width: 2.875rem; min-width: 2.875rem; }
.btn-list { --tblr-list-gap: .5rem; align-items: center; }
.btn-check:checked + .btn { --tblr-btn-active-bg: var(--hifi-ink); --tblr-btn-active-color: var(--hifi-ink-contrast); --tblr-btn-active-border-color: var(--hifi-ink); }
.btn.is-loading { pointer-events: none; opacity: .75; }
.btn .btn-spinner { width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; animation: hifi-spin .6s linear infinite; }
.btn-close { --tblr-btn-close-color: var(--tblr-body-color); filter: none; }
.btn-close-white { filter: invert(1) grayscale(1) brightness(2); }
[data-bs-theme=dark] .btn-close { --tblr-btn-close-color: var(--tblr-body-color); }

/* Forms */
.form-control, .form-select, .form-selectgroup-label, .input-group-text {
    border-radius: var(--hifi-radius-sm);
    box-shadow: none;
    min-height: 2.5rem;
    border-color: var(--hifi-hairline-strong);
    background-color: var(--tblr-bg-forms);
    color: var(--tblr-body-color);
}
.form-control-sm, .form-select-sm, .input-group-sm > .form-control, .input-group-sm > .form-select, .input-group-sm > .input-group-text { min-height: 2rem; border-radius: 6px; }
.form-control-lg, .form-select-lg, .input-group-lg > .form-control, .input-group-lg > .input-group-text { min-height: 2.75rem; font-size: 1rem; border-radius: 10px; }
.form-control:focus, .form-select:focus, .form-control:focus-visible, .form-select:focus-visible {
    border-color: var(--hifi-ink);
    box-shadow: 0 0 0 .5px var(--hifi-ink) !important;
    outline: none !important;
    background-color: var(--tblr-bg-forms);
}
.form-control::placeholder { color: var(--tblr-tertiary-color); }
.form-control-rounded { border-radius: var(--hifi-radius-pill); padding-left: 1rem; padding-right: 1rem; }
.form-control:disabled, .form-select:disabled { background: var(--hifi-fill); color: var(--tblr-secondary); }
.input-group-text { color: var(--tblr-secondary); background: var(--tblr-bg-surface-secondary); }
.input-icon-addon { color: var(--tblr-secondary); font-size: 1.125rem; }
.form-label { font-weight: 500; font-size: .8125rem; margin-bottom: .375rem; color: var(--tblr-body-color); }
.form-label.required::after { color: var(--tblr-secondary); margin-left: .125rem; }
.form-label .text-danger { color: var(--tblr-secondary) !important; font-weight: 400; }
.form-text, .form-hint { color: var(--tblr-secondary); font-size: .75rem; margin-top: .375rem; }
.form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid, .was-validated .form-select:invalid {
    border-color: var(--hifi-ink); background-image: none; padding-right: 1rem; box-shadow: inset 3px 0 0 var(--hifi-ink);
}
.form-control.is-valid, .form-select.is-valid, .was-validated .form-control:valid, .was-validated .form-select:valid { border-color: var(--hifi-hairline-strong); background-image: none; padding-right: 1rem; }
.invalid-feedback, .valid-feedback { color: var(--tblr-body-color); font-weight: 500; font-size: .75rem; margin-left: 0; }
.invalid-feedback::before { content: "\2192\00a0"; color: var(--tblr-secondary); }
.form-check-input { border-color: var(--hifi-hairline-strong); background-color: var(--tblr-bg-forms); width: 1.125rem; height: 1.125rem; margin-top: .1875rem; }
.form-check-input:checked { background-color: var(--hifi-ink); border-color: var(--hifi-ink); }
.form-check-input:focus { border-color: var(--hifi-ink); box-shadow: 0 0 0 1.5px rgba(var(--hifi-ink-rgb), .35); }
.form-switch .form-check-input { width: 2.25rem; height: 1.25rem; margin-top: .125rem; }
/* Checked radios draw their dot from tokens, so dark mode shows ring + dot instead of a pale blob */
.form-check-input[type=radio]:checked,
.form-selectgroup-input[type=radio]:checked + .form-selectgroup-label .form-selectgroup-check { background-image: radial-gradient(circle, var(--hifi-ink-contrast) 0 30%, transparent 34%); }
[data-bs-theme=dark] .form-check-input[type=radio]:checked { background-color: var(--hifi-ink); border-color: var(--hifi-ink); }
[data-bs-theme=dark] .form-switch .form-check-input:checked { --tblr-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230F0F0F'/%3e%3c/svg%3e"); }
.form-selectgroup-input:checked + .form-selectgroup-label { color: var(--hifi-ink); border-color: var(--hifi-ink); background: var(--hifi-fill); }
.form-selectgroup-input:checked + .form-selectgroup-label .form-selectgroup-check { background-color: var(--hifi-ink); border-color: var(--hifi-ink); }
.form-selectgroup-pills .form-selectgroup-label { border-radius: var(--hifi-radius-pill); }

/* Cards: white, 16px radius, hairline, no shadow */
.card {
    --tblr-card-border-radius: var(--hifi-radius-lg);
    --tblr-card-border-color: var(--hifi-hairline);
    --tblr-card-bg: var(--tblr-bg-surface);
    --tblr-card-cap-bg: transparent;
    --tblr-card-spacer-x: 1.25rem;
    --tblr-card-spacer-y: 1.25rem;
    --tblr-card-cap-padding-x: 1.25rem;
    --tblr-card-cap-padding-y: .875rem;
    box-shadow: none;
    border: 1px solid var(--tblr-card-border-color);
}
.card > .card-header { border-bottom: 1px solid var(--tblr-card-border-color); background: transparent; display: flex; align-items: center; gap: .75rem; }
.card-header .card-title { margin: 0; font-size: .9375rem; font-weight: 600; letter-spacing: -0.01em; }
.card-header .card-subtitle { margin: .125rem 0 0; font-size: .75rem; color: var(--tblr-secondary); font-weight: 400; }
.card-title { font-size: .9375rem; font-weight: 600; letter-spacing: -0.01em; }
.card-actions { margin: -.25rem -.5rem -.25rem auto; display: flex; align-items: center; gap: .25rem; }
.card-actions .btn-icon { color: var(--tblr-secondary); }
.card-footer { background: transparent; border-top: 1px solid var(--tblr-card-border-color); color: var(--tblr-secondary); }
.card-body + .card-body { border-top: 1px solid var(--tblr-card-border-color); }
.card-link { color: var(--tblr-secondary); font-size: .8125rem; font-weight: 500; }
.card-link:hover { color: var(--tblr-body-color); }
.card.card-flush { border: 0; background: transparent; }
.row-cards { --tblr-gutter-x: 1.25rem; --tblr-gutter-y: 1.25rem; }
.card-table-empty .empty { padding: 2.5rem 1rem; }

/* Tables: quiet header, 48px rows, hairlines, right-aligned numbers */
.table { --tblr-table-border-color: var(--hifi-hairline); --tblr-table-hover-bg: var(--tblr-active-bg); --tblr-table-striped-bg: var(--tblr-bg-surface-secondary); }
.table th, .table thead th, .table > thead > tr > th {
    font-size: .75rem; font-weight: 500; text-transform: none; letter-spacing: 0;
    color: var(--tblr-secondary); background: var(--tblr-bg-surface-secondary); border-bottom-color: var(--hifi-hairline); white-space: nowrap;
}
.table > :not(caption) > * > * { padding: .625rem .75rem; border-bottom-color: var(--hifi-hairline); }
.table > tbody > tr > td { height: 48px; vertical-align: middle; }
.table-sm > :not(caption) > * > * { padding: .4rem .5rem; }
.table-sm > tbody > tr > td { height: 40px; }
.table-sticky thead th { position: sticky; top: 0; z-index: 2; }
.table tbody tr:last-child > td { border-bottom: 0; }
.card-table > :not(caption) > * > :first-child { padding-left: 1.25rem; }
.card-table > :not(caption) > * > :last-child { padding-right: 1.25rem; }
.table-light { --tblr-table-bg: var(--tblr-bg-surface-secondary); --tblr-table-color: var(--tblr-secondary); }
.table-secondary { --tblr-table-bg: var(--hifi-fill); --tblr-table-color: var(--tblr-secondary); }
.table-active { --tblr-table-bg: var(--hifi-fill); }
.table-warning, .table-danger, .table-success, .table-info, .table-primary { --tblr-table-bg: var(--tblr-bg-surface-secondary); --tblr-table-color: var(--tblr-body-color); }
.table a:not(.btn) { color: var(--tblr-body-color); font-weight: 500; }
.table a:not(.btn):hover { text-decoration: underline; text-underline-offset: 3px; }
.ui-table-footer { padding: .75rem 1.25rem; font-size: .8125rem; }
.ui-table-wrap { border-radius: 0 0 calc(var(--hifi-radius-lg) - 1px) calc(var(--hifi-radius-lg) - 1px); }
.card > .ui-table-wrap:first-child { border-radius: calc(var(--hifi-radius-lg) - 1px) calc(var(--hifi-radius-lg) - 1px) 0 0; }
.card-table { border-top: 0; }
.table-responsive { scrollbar-width: thin; }
/* Ledger rhythm: identifiers, names and figures never wrap; a wide table scrolls inside its wrapper instead of squeezing */
.ui-table td > code, .table td > code, .ui-table .status, .ui-table td.text-money, .ui-table td.text-qty, .ui-table td.cell-nowrap, .ui-table td:first-child { white-space: nowrap; }
.ui-table td.cell-truncate { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-table td.cell-invoice, .ui-table th.cell-invoice { min-width: 7.5rem; white-space: nowrap; }
@media (max-width: 1199.98px) { .ui-table.table-wide { min-width: 900px; } }
/* Columns worth less than the row actions (cost, reorder level...) drop out below 1200px: th + td get "d-none d-xl-table-cell" */
/* When a table still scrolls sideways (app.js flags .is-scrollable) the Actions column pins to the right edge with a hairline */
.ui-table-wrap.is-scrollable .ui-table .cell-actions { position: sticky; right: 0; z-index: 1; background: var(--tblr-bg-surface); }
.ui-table-wrap.is-scrollable .ui-table thead .cell-actions { background: var(--tblr-bg-surface-secondary); z-index: 3; }
.ui-table-wrap.is-scrollable .ui-table .cell-actions::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--hifi-hairline); }

/* Status pills: filled (critical), outline (neutral/pending), soft (done) - always icon + text */
.status {
    --tblr-status-color: var(--hifi-ink);
    --tblr-status-color-rgb: var(--hifi-ink-rgb);
    height: 1.5rem; padding: 0 .625rem 0 .5rem; gap: .3125rem; font-size: .75rem; font-weight: 500; line-height: 1;
    color: var(--tblr-body-color); background: var(--hifi-fill); border-radius: var(--hifi-radius-pill); white-space: nowrap;
}
.status .ti, .status .bi { font-size: .9375rem; line-height: 1; }
.status-filled { background: var(--hifi-ink); color: var(--hifi-ink-contrast); }
.status-outline { background: transparent; box-shadow: inset 0 0 0 1px var(--hifi-hairline-strong); color: var(--tblr-body-color); }
.status-soft { background: var(--hifi-fill); color: var(--tblr-body-color); }
.status-sm { height: 1.25rem; font-size: .6875rem; padding: 0 .5rem 0 .375rem; gap: .25rem; }
.status-sm .ti { font-size: .8125rem; }
.status-lg { height: 1.875rem; font-size: .8125rem; padding: 0 .875rem 0 .625rem; }
.status-dot { --tblr-status-dot-color: var(--hifi-ink); }
.status-dot-animated::before { background: var(--hifi-ink); }
/* legacy Bootstrap badges render as monochrome pills */
.badge { border-radius: var(--hifi-radius-pill); text-transform: none; letter-spacing: 0; font-size: .6875rem; font-weight: 500; padding: .25em .6em; line-height: 1.3; color: var(--tblr-body-color); background: var(--hifi-fill); border: 0; }
.badge.bg-primary, .badge.bg-danger, .badge.bg-dark, .badge.text-bg-danger, .badge.text-bg-primary, .badge.text-bg-dark { background: var(--hifi-ink) !important; color: var(--hifi-ink-contrast) !important; }
.badge.bg-success, .badge.bg-info, .badge.bg-secondary, .badge.bg-light, .badge.text-bg-success, .badge.text-bg-info, .badge.text-bg-secondary, .badge.text-bg-light { background: var(--hifi-fill) !important; color: var(--tblr-body-color) !important; }
.badge.bg-warning, .badge.text-bg-warning { background: transparent !important; color: var(--tblr-body-color) !important; box-shadow: inset 0 0 0 1px var(--hifi-hairline-strong); }
.badge-outline { background: transparent; box-shadow: inset 0 0 0 1px var(--hifi-hairline-strong); border: 0; }
.bg-primary:not(.badge), .bg-danger:not(.badge), .bg-success:not(.badge), .bg-dark:not(.badge) { color: var(--hifi-ink-contrast); }

/* Alerts: white/black cards with an icon - never a colour */
.alert {
    --tblr-alert-color: var(--tblr-body-color);
    background: var(--tblr-bg-surface); color: var(--tblr-body-color);
    border: 1px solid var(--hifi-hairline); border-radius: var(--hifi-radius-md);
    padding: .875rem 2.5rem .875rem 1rem; box-shadow: none;
}
.alert-danger, .alert-warning { border-color: var(--hifi-hairline-strong); box-shadow: inset 4px 0 0 var(--hifi-ink); }
.alert-icon { font-size: 1.25rem; line-height: 1.1; color: var(--hifi-ink); flex: 0 0 auto; }
.alert-body { min-width: 0; }
.alert-title { font-weight: 600; margin-bottom: .125rem; }
.alert .alert-link { color: inherit; font-weight: 600; }
.alert-dismissible .btn-close { top: .625rem; right: .625rem; padding: .5rem; }
.alert .bi { color: var(--hifi-ink); }

/* Dropdowns */
.dropdown-menu {
    --tblr-dropdown-bg: var(--hifi-elevated);
    --tblr-dropdown-border-color: var(--hifi-hairline);
    --tblr-dropdown-border-radius: var(--hifi-radius-md);
    --tblr-dropdown-min-width: 12rem;
    --tblr-dropdown-padding-y: .375rem;
    --tblr-dropdown-padding-x: .375rem;
    --tblr-dropdown-link-hover-bg: var(--hifi-fill);
    --tblr-dropdown-link-hover-color: var(--tblr-body-color);
    --tblr-dropdown-link-active-bg: var(--hifi-fill);
    --tblr-dropdown-link-active-color: var(--tblr-body-color);
    --tblr-dropdown-divider-bg: var(--hifi-hairline);
    --tblr-dropdown-header-color: var(--tblr-tertiary-color);
    box-shadow: var(--hifi-shadow-high);
}
.dropdown-item { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: 8px; font-weight: 500; color: var(--tblr-body-color); }
.dropdown-item-icon { font-size: 1.125rem; line-height: 1; color: var(--tblr-secondary); margin: 0; width: 1.25rem; text-align: center; }
.dropdown-item:hover .dropdown-item-icon, .dropdown-item:focus .dropdown-item-icon { color: var(--tblr-body-color); }
.dropdown-item-danger { font-weight: 600; }
.dropdown-item-danger .dropdown-item-icon { color: inherit; }
.dropdown-item.text-danger { color: var(--tblr-body-color) !important; font-weight: 600; }
.dropdown-header { font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; padding: .5rem .75rem .25rem; }
.dropdown-divider { margin: .375rem 0; }
.dropdown-menu-arrow::before { border-color: var(--hifi-hairline); }

/* Modals and toasts (floating = the only surfaces with a shadow) */
.modal-content { border-radius: var(--hifi-radius-lg); border: 1px solid var(--hifi-hairline); box-shadow: var(--hifi-shadow-high); background: var(--hifi-elevated); }
.modal-header { border-bottom: 1px solid var(--hifi-hairline); padding: 1rem 1.25rem; }
.modal-title { font-size: 1rem; }
.modal-body { padding: 1.25rem; }
.modal-footer { background: transparent; border-top: 1px solid var(--hifi-hairline); padding: .875rem 1.25rem; gap: .5rem; justify-content: flex-end; }
.modal-sm .modal-body { text-align: center; padding: 1.5rem 1.5rem 1rem; }
.modal-icon { font-size: 2.5rem; line-height: 1; color: var(--hifi-ink); margin-bottom: .5rem; }
.modal-backdrop { --tblr-backdrop-bg: #000; --tblr-backdrop-opacity: .45; }
.modal-blur { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.toast { --tblr-toast-bg: var(--hifi-elevated); --tblr-toast-border-color: var(--hifi-hairline); --tblr-toast-border-radius: var(--hifi-radius-md); box-shadow: var(--hifi-shadow-high); border: 1px solid var(--hifi-hairline); background: var(--hifi-elevated); color: var(--tblr-body-color); }
.toast .toast-body { display: flex; align-items: flex-start; gap: .625rem; padding: .75rem .875rem; }
.toast-icon { font-size: 1.25rem; line-height: 1.1; color: var(--hifi-ink); flex: 0 0 auto; }
.toast-text { flex: 1 1 auto; min-width: 0; }
.toast-title { font-weight: 600; }
.toast .btn-close { margin-left: auto; padding: .375rem; }
.toast.text-bg-success, .toast.text-bg-danger, .toast.text-bg-warning, .toast.text-bg-info, .toast.text-bg-primary { background: var(--hifi-ink) !important; color: var(--hifi-ink-contrast) !important; border-color: var(--hifi-ink); }
[data-bs-theme=dark] .toast .btn-close-white { filter: none; }
.toast-container { z-index: 1090; }

/* Pagination */
.pagination { --tblr-pagination-border-radius: 8px; --tblr-pagination-active-bg: var(--hifi-ink); --tblr-pagination-active-color: var(--hifi-ink-contrast); --tblr-pagination-active-border-color: var(--hifi-ink); --tblr-pagination-hover-bg: var(--hifi-fill); --tblr-pagination-hover-color: var(--tblr-body-color); --tblr-pagination-focus-bg: var(--hifi-fill); --tblr-pagination-focus-box-shadow: none; --tblr-pagination-disabled-color: var(--tblr-disabled-color); }
.page-link { min-width: 2rem; text-align: center; border-radius: 8px; }
.page-item.active .page-link { background: var(--hifi-ink); color: var(--hifi-ink-contrast); border-color: var(--hifi-ink); font-weight: 600; }

/* Segmented controls: quiet (white pill on gray track) for navigation, ink (black pill) for the ONE filter of a view */
.nav-segmented {
    --tblr-nav-bg: var(--hifi-fill);
    --tblr-nav-active-bg: var(--tblr-bg-surface);
    --tblr-nav-radius: 999px;
    --tblr-nav-height: 2.25rem;
    --tblr-nav-padding: 3px;
    --tblr-nav-link-padding-x: .875rem;
    border-radius: 999px; box-shadow: none;
}
.nav-segmented .nav-link { border-radius: 999px; color: var(--tblr-secondary); font-weight: 500; font-size: .8125rem; border: 0; gap: .375rem; cursor: pointer; margin: 0; }
.nav-segmented label.nav-item { margin: 0; display: inline-flex; }
.nav-segmented .nav-link-input:focus-visible + .nav-link { outline: 1.5px solid var(--hifi-ink); outline-offset: 2px; }
.nav-segmented .nav-link .ti { font-size: 1rem; }
.nav-segmented .nav-link:hover:not(.active) { background: rgba(var(--hifi-ink-rgb), .05); color: var(--tblr-body-color); }
.nav-segmented .nav-link.active, .nav-segmented .nav-link-input:checked + .nav-link { color: var(--tblr-body-color); background: var(--tblr-bg-surface); font-weight: 600; box-shadow: var(--hifi-shadow-low); }
.nav-segmented-ink .nav-link.active, .nav-segmented-ink .nav-link-input:checked + .nav-link { background: var(--hifi-ink); color: var(--hifi-ink-contrast); box-shadow: none; }
/* Compact segmented control inside a card header (scopes one card, e.g. the dashboard chart period) */
.card-header .nav-segmented { --tblr-nav-height: 2rem; --tblr-nav-link-padding-x: .75rem; flex-wrap: nowrap; }
.card-header .nav-segmented .nav-link { font-size: .75rem; }
/* legacy nav-pills sub-navigation (billing/stock _nav.php) become quiet segmented pills */
.nav-pills { display: inline-flex; gap: .25rem; padding: 3px; background: var(--hifi-fill); border-radius: 999px; --tblr-nav-pills-link-active-bg: var(--tblr-bg-surface); --tblr-nav-pills-link-active-color: var(--tblr-body-color); --tblr-nav-link-color: var(--tblr-secondary); }
.nav-pills .nav-link { border-radius: 999px; padding: .375rem .875rem; font-size: .8125rem; font-weight: 500; color: var(--tblr-secondary); }
.nav-pills .nav-link:hover:not(.active) { color: var(--tblr-body-color); background: rgba(var(--hifi-ink-rgb), .05); }
.nav-pills .nav-link.active { background: var(--tblr-bg-surface); color: var(--tblr-body-color); font-weight: 600; box-shadow: var(--hifi-shadow-low); }
.nav-tabs { --tblr-nav-tabs-link-active-color: var(--tblr-body-color); --tblr-nav-tabs-link-active-bg: transparent; --tblr-nav-tabs-border-color: var(--hifi-hairline); }
.nav-tabs .nav-link { color: var(--tblr-secondary); font-weight: 500; border: 0; border-bottom: 2px solid transparent; }
.nav-tabs .nav-link.active { border-color: transparent; border-bottom: 2px solid var(--hifi-ink); color: var(--tblr-body-color); background: transparent; }

/* Breadcrumbs */
.breadcrumb { --tblr-breadcrumb-divider-color: var(--tblr-tertiary-color); --tblr-breadcrumb-item-active-font-weight: 500; --tblr-breadcrumb-item-active-color: var(--tblr-body-color); --tblr-breadcrumb-link-color: var(--tblr-secondary); margin: 0; font-size: .75rem; }
.breadcrumb a { color: var(--tblr-secondary); }
.breadcrumb a:hover { color: var(--tblr-body-color); }
.breadcrumb-arrows .breadcrumb-item + .breadcrumb-item::before { content: "\203A"; }
.page-pretitle .breadcrumb { text-transform: none; letter-spacing: 0; font-size: .75rem; font-weight: 500; }

/* Empty states */
.empty { padding: 3rem 1.5rem; }
.empty-icon { width: auto; height: auto; margin-bottom: 1rem; color: var(--tblr-secondary); }
.empty-icon .ti, .empty-icon .bi { font-size: 3rem; line-height: 1; display: block; }
.empty-title { font-size: 1.125rem; margin-bottom: .375rem; }
.empty-subtitle { max-width: 34rem; margin: 0 auto; color: var(--tblr-secondary); }
.empty-action { margin-top: 1.25rem; }
.empty-compact { padding: 2rem 1rem; }
.empty-compact .empty-icon .ti { font-size: 2.25rem; }
.empty-compact .empty-title { font-size: 1rem; }

/* Steps, progress, list groups, avatar, tooltip, kbd, misc */
.steps { --tblr-steps-color: var(--hifi-ink); --tblr-steps-inactive-color: var(--hifi-hairline-strong); border: 0; padding-left: 0; margin-left: 0; }
.steps .step-item { font-size: .8125rem; font-weight: 500; color: var(--tblr-secondary); }
.steps .step-item.active { color: var(--tblr-body-color); font-weight: 600; }
/* Counter digits sit on the ink dot: use the ink-contrast token (Tabler's white vanishes on the light dot in dark mode) */
.steps-counter .step-item::before { color: var(--hifi-ink-contrast); font-weight: 600; }
.steps-counter .step-item.active ~ .step-item::before { color: var(--tblr-secondary); }
.progress { --tblr-progress-bg: var(--hifi-fill); --tblr-progress-bar-bg: var(--hifi-ink); --tblr-progress-border-radius: 999px; background: var(--hifi-fill); }
.progress-bar { background: var(--hifi-ink); }
.progress-bar.bg-success, .progress-bar.bg-danger, .progress-bar.bg-primary { background: var(--hifi-ink) !important; }
.progress-bar.bg-warning, .progress-bar.bg-info, .progress-bar.bg-secondary { background: var(--hifi-charcoal) !important; }
.list-group { --tblr-list-group-border-color: var(--hifi-hairline); --tblr-list-group-active-bg: var(--hifi-fill); --tblr-list-group-active-color: var(--tblr-body-color); --tblr-list-group-active-border-color: var(--hifi-hairline); --tblr-list-group-action-hover-bg: var(--tblr-active-bg); --tblr-list-group-bg: transparent; }
.list-group-item { color: var(--tblr-body-color); }
.list-group-item.active { background: var(--hifi-fill); color: var(--tblr-body-color); border-color: var(--hifi-hairline); }
/* Type-ahead menus (product-search.js): elevated surface, hairline, 12px radius, the only shadow outside modals/menus */
.product-search-menu, .customer-search-menu {
    z-index: 1050; max-height: 320px; overflow-y: auto; margin-top: 4px;
    background: var(--hifi-elevated); border: 1px solid var(--hifi-hairline); border-radius: var(--hifi-radius-md); box-shadow: var(--hifi-shadow-high); padding: .25rem;
}
.product-search-menu .list-group-item { border: 0; border-radius: 8px; background: transparent; }
.product-search-menu .list-group-item + .list-group-item { margin-top: 1px; }
.product-search-menu .list-group-item-action:hover, .product-search-menu .list-group-item-action:focus { background: var(--tblr-active-bg); }
.product-search-menu .list-group-item.active { background: var(--hifi-fill); }
.product-search-menu .list-group-item code { font-size: .75em; }
.avatar { background: var(--hifi-fill); color: var(--tblr-body-color); font-weight: 600; box-shadow: none; border-radius: 50%; }
.avatar-circle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--hifi-ink); color: var(--hifi-ink-contrast); }
.tooltip { --tblr-tooltip-bg: var(--hifi-ink); --tblr-tooltip-color: var(--hifi-ink-contrast); --tblr-tooltip-border-radius: 8px; --tblr-tooltip-opacity: 1; --tblr-tooltip-font-size: .75rem; font-weight: 500; }
kbd, .kbd-chip {
    display: inline-block; font-family: inherit; font-size: .6875rem; font-weight: 600; line-height: 1.2; padding: .125rem .375rem;
    color: var(--tblr-secondary); background: var(--hifi-fill); border: 1px solid var(--hifi-hairline); border-radius: 6px; vertical-align: middle; white-space: nowrap;
}
.pos-shortcuts kbd + kbd { margin-left: 2px; }
.text-danger, .text-success, .text-primary, .link-primary, .link-danger, .link-success { color: var(--hifi-ink) !important; }
.text-warning, .text-info { color: var(--hifi-charcoal) !important; }
.border-primary, .border-danger, .border-success { border-color: var(--hifi-ink) !important; }
.border-warning, .border-info { border-color: var(--hifi-hairline-strong) !important; }
hr { border-color: var(--hifi-hairline); opacity: 1; }
.datagrid { --tblr-datagrid-padding: 1.25rem; }
.datagrid-content { font-weight: 500; }
.divide-y > :not(:last-child) { border-bottom: 1px solid var(--hifi-hairline); }
.ribbon { background: var(--hifi-ink); color: var(--hifi-ink-contrast); border-color: var(--hifi-ink); }
.spinner-border, .spinner-grow { color: var(--hifi-ink); }
.placeholder { background: var(--hifi-fill); }

/* ------------------------------------------------------------------------
   5. App patterns
   ------------------------------------------------------------------------ */

/* Page header (Tabler page-header, tuned) */
.page-header.ui-page-header, .page-header { margin: 0 0 1.25rem; min-height: 0; }
.page-header > .row { align-items: flex-end; }
.page-pretitle { margin-bottom: .25rem; }
.page-title { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; gap: .5rem; flex-wrap: wrap; }
.page-title-icon { font-size: 1.375rem; color: var(--tblr-secondary); }
.page-title-count { display: inline-flex; align-items: center; height: 1.5rem; padding: 0 .5rem; border-radius: 999px; background: var(--hifi-fill); color: var(--tblr-secondary); font-size: .8125rem; font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.page-title-status { display: inline-flex; align-items: center; }
.page-subtitle { color: var(--tblr-secondary); font-size: .875rem; margin-top: .25rem; }
.page-back { display: inline-flex; align-items: center; gap: .25rem; font-size: .8125rem; font-weight: 500; color: var(--tblr-secondary); margin-bottom: .5rem; }
.page-back:hover { color: var(--tblr-body-color); }
.page-back .ti { font-size: 1rem; }
.page-actions { justify-content: flex-end; }
/* legacy page-header markup (h1 with icon + button row) keeps working until refit */
.page-header > h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.page-header > h1 .bi, .page-header > h1 .ti { color: var(--tblr-secondary); font-size: 1.25rem; }
.page-header > h1 small { font-size: .8125rem; font-weight: 500; color: var(--tblr-secondary); }
.page-header:not(.ui-page-header) { display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; }

/* Sub-navigation */
.ui-subnav { margin: -.25rem 0 1.25rem; overflow-x: auto; scrollbar-width: none; }
.ui-subnav .nav-segmented { flex-wrap: nowrap; }
.ui-subnav .nav-link { white-space: nowrap; }
.ui-subnav-count { font-size: .6875rem; font-weight: 600; min-width: 1.25rem; height: 1.25rem; padding: 0 .375rem; border-radius: 999px; background: rgba(var(--hifi-ink-rgb), .08); display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.nav-segmented .nav-link.active .ui-subnav-count { background: rgba(var(--hifi-ink-rgb), .1); }
.nav-segmented-ink .nav-link.active .ui-subnav-count { background: rgba(var(--hifi-ink-contrast-rgb), .2); }

/* Toolbar row on list pages */
.ui-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .875rem 1.25rem; border-bottom: 1px solid var(--hifi-hairline); }
.ui-toolbar .ui-search { flex: 1 1 12rem; min-width: 10rem; max-width: 26rem; }
.ui-toolbar .form-select { width: auto; min-width: 8rem; flex: 0 0 auto; }
.ui-toolbar .form-control:not(.ui-search .form-control), .ui-toolbar .input-group.w-auto, .ui-toolbar .input-icon:not(.ui-search) { width: auto; flex: 0 0 auto; }
.ui-toolbar .form-control[type=date] { width: auto; min-width: 9.5rem; }
.ui-toolbar-count { font-size: .8125rem; color: var(--tblr-secondary); margin-left: auto; white-space: nowrap; }
.ui-toolbar-break { flex-basis: 100%; height: 0; margin: -.25rem 0 0; }
/* Labelled date range ("From … To …") for toolbars with many filters */
.ui-daterange.input-group { width: auto; flex: 0 0 auto; }
.ui-daterange .input-group-text { font-size: .75rem; font-weight: 500; }
.ui-daterange .form-control[type=date] { min-width: 9rem; }
.ui-search .form-control { padding-left: 2.5rem; }

/* Stat tiles */
.stat-card { height: 100%; margin-bottom: 0; display: block; color: inherit; text-decoration: none; transition: border-color var(--hifi-dur) var(--hifi-ease), transform var(--hifi-dur) var(--hifi-ease); }
a.stat-card:hover { color: inherit; border-color: var(--tblr-border-active-color); text-decoration: none; }
.stat-card .card-body { padding: 1.125rem 1.25rem; display: flex; flex-direction: column; gap: .25rem; }
.stat-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.stat-card-label { font-size: .8125rem; font-weight: 500; color: var(--tblr-secondary); }
.stat-card-icon { font-size: 1.125rem; line-height: 1; color: var(--tblr-secondary); }
.stat-card-value { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin-top: .125rem; font-variant-numeric: normal; white-space: nowrap; }
.stat-card-delta { display: flex; align-items: center; gap: .25rem; font-size: .8125rem; color: var(--tblr-secondary); margin-top: .125rem; flex-wrap: wrap; }
.stat-card-delta .ti { font-size: 1rem; line-height: 1; }
.stat-card-delta strong { font-weight: 600; color: var(--tblr-body-color); }
.stat-card-delta.is-flat strong { font-weight: 500; color: var(--tblr-secondary); }
.stat-card-delta.is-none { color: var(--tblr-secondary); }
.stat-card-unit { font-size: .875rem; font-weight: 500; color: var(--tblr-secondary); letter-spacing: 0; }
.stat-card-hero .stat-card-unit { color: rgba(var(--hifi-ink-contrast-rgb), .72); }
.stat-card-spark { height: 36px; margin: .5rem 0 -.25rem; position: relative; }
.stat-card-spark canvas { width: 100% !important; height: 36px !important; display: block; }
/* Tile footer in the sparkline slot (same height), e.g. a part-to-whole meter */
.stat-card-foot { min-height: 36px; margin: .5rem 0 -.25rem; display: flex; flex-direction: column; justify-content: flex-end; gap: .375rem; }
.stat-card-meter { display: flex; gap: 2px; height: 8px; }
.stat-card-meter > span { display: block; height: 100%; border-radius: 999px; min-width: 4px; }
.stat-card-foot .is-out { background: var(--hifi-ink); }
.stat-card-foot .is-low { background: var(--hifi-charcoal); }
.stat-card-foot .is-ok { background: var(--hifi-fill); box-shadow: inset 0 0 0 1px var(--hifi-hairline-strong); }
.stat-card-legend { display: flex; flex-wrap: wrap; gap: .125rem .75rem; font-size: .75rem; color: var(--tblr-secondary); line-height: 1.3; }
.stat-card-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: .3125rem; vertical-align: 0; }
.stat-card-hero { background: var(--hifi-ink); border-color: var(--hifi-ink); color: var(--hifi-ink-contrast); }
.stat-card-hero .stat-card-label, .stat-card-hero .stat-card-icon, .stat-card-hero .stat-card-delta { color: rgba(var(--hifi-ink-contrast-rgb), .72); }
.stat-card-hero .stat-card-delta strong, .stat-card-hero .stat-card-value { color: var(--hifi-ink-contrast); }
a.stat-card-hero:hover { border-color: var(--hifi-ink); color: var(--hifi-ink-contrast); }
.hero-figure { font-size: 3rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.stat-card-lg .stat-card-value { font-size: 2.25rem; }

/* Dashboard bits */
.dash-greeting { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin: 0; }
.dash-date { color: var(--tblr-secondary); font-size: .875rem; margin-top: .25rem; }
.quick-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.quick-actions .btn { gap: .375rem; }
.chart-card-body { position: relative; height: 300px; }
.chart-card-body canvas { display: block; }
.chart-card-body.is-stale { opacity: .6; transition: opacity var(--hifi-dur); }
.chart-card-body-sm { height: 240px; }
.list-rows > .list-row { display: flex; align-items: center; gap: .75rem; padding: .625rem 1.25rem; border-bottom: 1px solid var(--hifi-hairline); }
.list-rows > .list-row:last-child { border-bottom: 0; }
.list-row-main { flex: 1 1 auto; min-width: 0; }
.list-row-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row-sub { font-size: .75rem; color: var(--tblr-secondary); }
.list-row-end { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; }
.pos-hero-btn.btn { min-height: 4rem; font-size: 1.125rem; border-radius: 14px; gap: .625rem; }
.pos-hero-btn .ti { font-size: 1.5rem; }

/* Horizontal bar list (top products): <=24px bars, 4px rounded data end, square baseline, #1 in ink */
.bar-list { display: flex; flex-direction: column; gap: .75rem; container-type: inline-size; }
/* Every row shares the SAME three column widths, so every track has the same length and bars compare */
.bar-row { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) 4.75rem; grid-template-areas: "label bar value"; gap: .625rem; align-items: center; }
.bar-label { grid-area: label; font-size: .8125rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { grid-area: bar; min-width: 0; height: 20px; }
.bar-fill { height: 100%; background: var(--hifi-chart-bar); border-radius: 0 4px 4px 0; transition: width var(--hifi-dur-macro) var(--hifi-ease); }
.bar-fill.is-top { background: var(--hifi-chart-line); }
.bar-value { grid-area: value; text-align: right; font-size: .75rem; font-weight: 500; color: var(--tblr-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Narrow card (the 4-column card below ~1600px): label + value on one line, a full-width bar under it */
@container (max-width: 26rem) {
    .bar-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "bar bar"; row-gap: .3125rem; column-gap: .75rem; }
    .bar-track { height: 10px; }
    .bar-fill { border-radius: 0 3px 3px 0; }
}

/* Row actions (list pages) */
.row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: .125rem; white-space: nowrap; }
.row-actions .btn-icon { width: 2rem; min-width: 2rem; height: 2rem; min-height: 2rem; padding: 0; color: var(--tblr-secondary); }
.row-actions .btn-icon .ti { font-size: 1.125rem; }
.row-actions .btn-icon:hover { color: var(--tblr-body-color); }
.row-actions form { display: inline; }
/* Reserved "..." slot on rows without a menu; collapses when no row of the table has one */
table:not(:has(.row-actions .dropdown)) .row-actions-spacer { display: none; }
td .btn-group .btn-sm, td .btn-sm { --tblr-btn-padding-y: .25rem; }

/* Form actions (sticky bottom bar) and danger zone */
.form-actions {
    position: sticky; bottom: 1rem; z-index: 5;
    display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; margin-top: 1.25rem;
    background: var(--tblr-bg-surface);   /* fully opaque: scrolled content never ghosts through the bar */
    border: 1px solid var(--hifi-hairline); border-radius: var(--hifi-radius-md); box-shadow: var(--hifi-shadow-med);
}
.form-actions-right { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.form-actions-note { font-size: .8125rem; }
/* Canvas band under the floating bar: form content never shows through the 1rem gap above the viewport edge */
.form-actions::after { content: ""; position: absolute; left: -1px; right: -1px; top: calc(100% + 1px); height: calc(1rem + 1px); background: var(--tblr-body-bg); pointer-events: none; }
.danger-zone { border-color: var(--hifi-hairline-strong); margin-top: 1.5rem; box-shadow: inset 4px 0 0 var(--hifi-ink); }
.form-section + .form-section { margin-top: 1.25rem; }
/* Quantity + "All" as one bordered input group inside a table cell */
.return-qty-group { width: 8.5rem; flex-wrap: nowrap; }
.return-qty-group .form-control { min-width: 0; }

/* ---------------------------------------------------------------- POS --- */
body.pos-mode .sidebar-toggle { display: none; }
body.pos-mode .app-footer { display: none; }
body.pos-mode .btn:not(.btn-sm):not(.btn-icon) { min-height: 2.75rem; }
.pos-layout { display: flex; gap: 1rem; align-items: flex-start; }
.pos-products { flex: 1 1 60%; min-width: 0; }
.pos-cart { flex: 0 0 440px; max-width: 100%; position: sticky; top: calc(var(--app-navbar-h) + 1rem); }
@media (max-width: 1023.98px) {
    .pos-layout { flex-direction: column; }
    .pos-cart { flex-basis: auto; width: 100%; position: static; }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
    .pos-cart { flex: 0 0 380px; }
}
.pos-search { font-size: 1.0625rem; }
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .625rem; max-height: calc(100vh - 230px); overflow-y: auto; padding: 2px; }
.pos-tile {
    background: var(--tblr-bg-surface); border: 1px solid var(--hifi-hairline); border-radius: var(--hifi-radius-md); padding: .625rem .75rem; cursor: pointer;
    display: flex; flex-direction: column; gap: .2rem; min-height: 96px; user-select: none;
    transition: border-color var(--hifi-dur-micro) var(--hifi-ease), box-shadow var(--hifi-dur-micro) var(--hifi-ease), transform var(--hifi-dur-micro) var(--hifi-ease);
}
.pos-tile:hover { border-color: var(--tblr-border-active-color); }
.pos-tile:focus, .pos-tile.active { border-color: var(--hifi-ink); box-shadow: 0 0 0 .5px var(--hifi-ink); outline: 0; }
.pos-tile:active { transform: scale(.98); }
.pos-tile.out-of-stock { opacity: .5; cursor: not-allowed; }
.pos-tile .tile-name { font-weight: 600; line-height: 1.25; font-size: .875rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pos-tile .tile-code { font-size: .6875rem; color: var(--tblr-secondary); font-variant-numeric: tabular-nums; }
.pos-tile .tile-price { font-weight: 600; margin-top: auto; font-variant-numeric: tabular-nums; }
.pos-tile .tile-stock { font-size: .75rem; }
.pos-cart-table { max-height: 42vh; overflow-y: auto; }
.pos-cart-table td, .pos-cart-table th { vertical-align: middle; padding: .3rem .35rem; height: auto; }
.pos-cart-table input.qty-input { width: 64px; text-align: center; }
.pos-cart-table input.disc-input { width: 72px; text-align: right; }
.pos-totals .row + .row { margin-top: .25rem; }
.pos-grand-total { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pos-shortcuts kbd { font-size: .6875rem; }
.pos-payment-row .form-select, .pos-payment-row .form-control { font-size: .875rem; }
.customer-search-menu { z-index: 1050; max-height: 260px; overflow-y: auto; }
.pos-change { font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pos-cart .card { border-radius: var(--hifi-radius-lg); }
.pos-cart .card-header, .pos-cart .card-footer { background: transparent !important; }

/* POS screen parts (moved from pos.php so the chip / stepper / payment rows are reusable) */
.pos-search-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .625rem; }
.pos-search-row .input-icon { flex: 1 1 auto; }
.pos-search-row .form-control-lg { min-height: 3rem; padding-left: 3rem; font-size: 1.0625rem; }
.pos-search-row .input-icon-addon { width: 3rem; font-size: 1.25rem; }
.pos-hints { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; font-size: .8125rem; color: var(--tblr-secondary); }
.pos-hints .kbd-chip + .kbd-chip { margin-left: 2px; }
.pos-hint-item { display: inline-flex; align-items: center; gap: .3rem; }
.pos-hint-item + .pos-hint-item { margin-left: .625rem; }
.pos-tile { min-height: 112px; gap: .25rem; }
.pos-tile .tile-stock { margin-top: .375rem; align-self: flex-start; }
.pos-tile.out-of-stock .tile-stock { opacity: 1; }
.pos-grid .empty { grid-column: 1 / -1; }
/* More tiles below the fold: fade the bottom edge (toggled by pos.js on render/scroll/resize) */
.pos-grid.has-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); }
/* Column headings only make sense over lines */
#cartTable.is-empty thead { display: none; }
.pos-cart-head { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--hifi-hairline); }
.pos-cart-title { font-weight: 600; display: inline-flex; align-items: center; gap: .5rem; }
.pos-cart-title .ti { font-size: 1.125rem; color: var(--tblr-secondary); }
.pos-cart-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.375rem; height: 1.375rem; padding: 0 .4rem; border-radius: 999px; background: var(--hifi-fill); font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pos-customer { position: relative; padding: .75rem 1rem .25rem; display: flex; gap: .5rem; align-items: center; }
.pos-customer .input-icon { flex: 1 1 auto; min-width: 0; }
.pos-customer .form-control { min-height: 2.75rem; }
.pos-customer-new { flex: 0 0 auto; gap: .25rem; white-space: nowrap; }
.pos-customer-chip { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .625rem; min-height: 2.75rem; padding: .25rem .25rem .25rem .5rem; border: 1px solid var(--hifi-hairline-strong); border-radius: var(--hifi-radius-pill); background: var(--hifi-fill); cursor: pointer; }
.pos-customer-chip .avatar { flex: 0 0 auto; background: var(--hifi-ink); color: var(--hifi-ink-contrast); }
.pos-customer-chip-text { flex: 1 1 auto; min-width: 0; line-height: 1.2; }
.pos-customer-chip-name { font-weight: 600; font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-customer-chip-sub { font-size: .6875rem; color: var(--tblr-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-customer-chip .btn-icon { flex: 0 0 auto; width: 2rem; min-width: 2rem; height: 2rem; min-height: 2rem; border-radius: 50%; }
.pos-customer-menu { position: absolute; top: calc(100% - .125rem); left: 1rem; right: 1rem; margin: 0; max-height: 280px; overflow-y: auto; display: none; }
.pos-customer-menu.show { display: block; }
.pos-customer-menu .dropdown-item { white-space: normal; }
.pos-customer-menu .dropdown-item.active { background: var(--hifi-fill); color: var(--tblr-body-color); }
.pos-customer-menu .pos-customer-none { color: var(--tblr-secondary); cursor: default; pointer-events: none; }
.pos-customer-item { display: flex; flex-direction: column; min-width: 0; font-size: .8125rem; line-height: 1.3; }
.pos-cart-table { max-height: 38vh; }
.pos-cart-table table { margin: 0; }
.pos-cart-table th { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tblr-secondary); font-weight: 600; background: transparent; padding: .5rem .5rem; height: auto; }
.pos-cart-table td { padding: .5rem .375rem; height: auto; }
.pos-cart-table tr > :first-child { padding-left: 1rem; }
.pos-cart-table tr > :last-child { padding-right: .75rem; }
.pos-cart-table tr.is-added td { background: var(--hifi-fill); transition: background-color var(--hifi-dur) var(--hifi-ease); }
.pos-line-name { font-weight: 600; font-size: .875rem; line-height: 1.25; }
.pos-line-sub { font-size: .6875rem; color: var(--tblr-secondary); font-variant-numeric: tabular-nums; }
.pos-stepper { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--hifi-hairline-strong); border-radius: 8px; overflow: hidden; }
.pos-stepper .btn { width: 2rem; min-width: 2rem; height: 2.375rem; min-height: 2.375rem; border: 0; border-radius: 0; padding: 0; }
.pos-stepper input.qty-input { width: 3rem; min-height: 2.375rem; height: 2.375rem; border: 0; border-radius: 0; text-align: center; padding: 0; box-shadow: none; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.pos-stepper input.qty-input:focus { box-shadow: inset 0 0 0 1.5px var(--hifi-ink) !important; }
.pos-stepper input::-webkit-outer-spin-button, .pos-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pos-cart-table input.disc-input { width: 5.25rem; min-height: 2.375rem; height: 2.375rem; text-align: right; padding: 0 .375rem; font-variant-numeric: tabular-nums; }
.pos-totals { padding: .875rem 1rem .5rem; border-top: 1px solid var(--hifi-hairline); font-size: .875rem; }
.pos-totals .row { align-items: center; }
.pos-totals .row + .row { margin-top: .375rem; }
.pos-totals .col-auto { font-variant-numeric: tabular-nums; }
.pos-total-row { border-top: 1px solid var(--hifi-hairline); margin-top: .625rem !important; padding-top: .625rem; }
.pos-total-label { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tblr-secondary); font-weight: 600; }
.pos-grand-total { font-size: 1.875rem; line-height: 1.1; }
.pos-grand-total .pos-cur { font-size: 1rem; font-weight: 500; color: var(--tblr-secondary); margin-right: .25rem; letter-spacing: 0; }
.pos-discount-group { width: 200px; }
.pos-discount-group .form-select { max-width: 5.25rem; padding-left: .5rem; padding-right: 1.5rem; background-position: right .375rem center; }
.pos-discount-group .form-control { text-align: right; }
.pos-payment { padding: .75rem 1rem; border-top: 1px solid var(--hifi-hairline); }
.pos-section-label { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tblr-secondary); font-weight: 600; }
.pos-payment-row { display: flex; flex-direction: column; gap: .5rem; }
.pos-payment-row + .pos-payment-row { margin-top: .625rem; padding-top: .625rem; border-top: 1px dashed var(--hifi-hairline); }
/* Row 1: the three methods as one evenly split pill group (+ remove on split rows) */
.pos-pay-methods { display: flex; align-items: center; gap: .375rem; }
.pos-pay-methods .form-selectgroup { flex: 1 1 auto; display: flex; flex-wrap: nowrap; gap: .25rem; margin: 0; }
.pos-pay-methods .form-selectgroup-item { flex: 1 1 0; min-width: 0; margin: 0; }
.pos-pay-methods .form-selectgroup-label { width: 100%; justify-content: center; padding: .5rem .5rem; min-height: 2.75rem; display: inline-flex; align-items: center; gap: .3rem; font-size: .8125rem; white-space: nowrap; }
.pos-pay-methods .form-selectgroup-label .ti { font-size: 1rem; flex: 0 0 auto; }
.pos-pay-methods .form-selectgroup-input:checked + .form-selectgroup-label { background: var(--hifi-fill); color: var(--tblr-body-color); border-color: var(--hifi-ink); box-shadow: inset 0 0 0 1px var(--hifi-ink); }
.pos-pay-methods .pay-remove { flex: 0 0 auto; }
/* Row 2: a labelled amount ("Cash received") with a currency prefix - never mistaken for a fourth method */
.pos-pay-amount-row { display: flex; align-items: center; gap: .75rem; }
.pos-pay-amount-label { flex: 1 1 auto; margin: 0; font-size: .875rem; font-weight: 500; color: var(--tblr-body-color); }
.pos-pay-amount-group { flex: 0 0 13rem; max-width: 60%; flex-wrap: nowrap; }
.pos-pay-amount-group .input-group-text { min-height: 2.75rem; font-size: .8125rem; color: var(--tblr-secondary); }
.pos-pay-amount-group .pay-amount { text-align: right; min-height: 2.75rem; font-size: 1rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.pos-payment-row .pay-ref { min-height: 2.5rem; }
.pos-pay-summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-top: .625rem; font-size: .875rem; min-height: 1.75rem; }
.pos-change { font-size: 1.375rem; }
.pos-change .pos-change-label { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tblr-secondary); font-weight: 600; margin-right: .375rem; }
.pos-actions { display: flex; gap: .5rem; padding: .75rem 1rem 1rem; border-top: 1px solid var(--hifi-hairline); }
.pos-actions .btn { min-height: 3.5rem; border-radius: 12px; }
.pos-actions .btn kbd { margin-left: .375rem; }
.pos-charge-btn { flex: 1 1 auto; font-size: 1.0625rem; font-weight: 600; justify-content: center; letter-spacing: -0.01em; }
.pos-charge-btn .pos-charge-amount { font-variant-numeric: tabular-nums; }
.pos-charge-btn kbd { background: rgba(var(--hifi-ink-contrast-rgb), .14); border-color: transparent; color: inherit; }
.pos-charge-btn:disabled kbd { opacity: .7; }
.pos-hold-btn { flex: 0 0 auto; }
.pos-done-figure { font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
#posError .alert-body ul { margin: 0; padding-left: 1rem; }
@media (max-width: 1023.98px) {
    .pos-cart-table { max-height: none; }
    .pos-grid { max-height: none; }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
    .pos-discount-group { width: 160px; }
    .pos-pay-methods .form-selectgroup-label { padding: .5rem .375rem; }
}

/* ------------------------------------------------------------ receipt --- */
.receipt-page { background: var(--tblr-body-bg); min-height: 100vh; padding: 1rem 0; font-family: "Courier New", Courier, monospace; color: var(--tblr-body-color); }
.receipt { width: 80mm; max-width: 100%; margin: 0 auto; background: #FFFFFF; padding: 4mm 3mm; font-size: 12px; line-height: 1.35; color: #000000; border: 1px solid var(--hifi-hairline); border-radius: 4px; box-shadow: var(--hifi-shadow-med); }
.receipt h1 { font-size: 16px; margin: 0; text-align: center; font-weight: 700; letter-spacing: 0; color: #000; }
.receipt .center { text-align: center; }
.receipt .right { text-align: right; }
.receipt .muted { color: #444444; }
.receipt hr { border: 0; border-top: 1px dashed #000; margin: 4px 0; }
.receipt table { width: 100%; border-collapse: collapse; }
.receipt td, .receipt th { padding: 1px 0; vertical-align: top; font-size: 12px; background: transparent; color: #000; border: 0; height: auto; }
.receipt .total-row td { font-weight: 700; font-size: 14px; }
.receipt-actions { text-align: center; margin: 0 auto 1rem; width: 80mm; max-width: 100%; }
/* Receipt screen toolbar: ONE row centred over the paper - back + invoice/status left, actions right */
.receipt-toolbar { width: 100%; max-width: 50rem; margin: 0 auto 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: nowrap; text-align: left; font-family: var(--tblr-font-sans-serif); }
.receipt-toolbar-start, .receipt-toolbar-end { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.receipt-toolbar-end { flex: 0 0 auto; }
.receipt-title { font-weight: 600; font-size: .9375rem; letter-spacing: -0.01em; white-space: nowrap; }
.receipt-hint { text-align: center; font-family: var(--tblr-font-sans-serif); font-size: .75rem; color: var(--tblr-secondary); margin-top: 1rem; }
@media (max-width: 767.98px) { .receipt-toolbar { flex-wrap: wrap; } .receipt-toolbar-end { flex: 1 1 100%; justify-content: flex-end; } }

/* ------------------------------------------------------------------------
   6. Motion
   ------------------------------------------------------------------------ */
@keyframes hifi-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes hifi-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hifi-spin { to { transform: rotate(360deg); } }
.page-enter { animation: hifi-rise var(--hifi-dur-macro) var(--hifi-ease) both; }
.page-enter.is-done { animation: none; transform: none; }
.stat-card { animation: hifi-rise var(--hifi-dur-macro) var(--hifi-ease) both; animation-delay: calc(var(--i, 0) * 30ms); }
html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after {
    transition: background-color var(--hifi-dur) var(--hifi-ease), color var(--hifi-dur) var(--hifi-ease), border-color var(--hifi-dur) var(--hifi-ease), box-shadow var(--hifi-dur) var(--hifi-ease), fill var(--hifi-dur) var(--hifi-ease), stroke var(--hifi-dur) var(--hifi-ease) !important;
    transition-delay: 0s !important;
}
.dropdown-menu.show { animation: hifi-rise var(--hifi-dur-micro) var(--hifi-ease) both; }
.toast.showing, .toast.show { animation: hifi-rise var(--hifi-dur) var(--hifi-ease) both; }

@media (prefers-reduced-motion: reduce) {
    .page-enter, .stat-card, .dropdown-menu.show, .toast.show, .toast.showing { animation-name: hifi-fade; animation-duration: var(--hifi-dur); animation-delay: 0s; }
    .btn:active:not(:disabled), .pos-tile:active { transform: none; }
    html.theme-transition, html.theme-transition *, html.theme-transition *::before, html.theme-transition *::after { transition: none !important; }
    .app-shell, .app-sidebar.navbar, .btn, .app-navbar.navbar { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
    .app-navbar.navbar { background: var(--tblr-body-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ------------------------------------------------------------------------
   7. Print (always black on white)
   ------------------------------------------------------------------------ */
@media print {
    html, body.app-body { background: #fff !important; color: #000 !important; }
    .app-navbar, .app-sidebar, .app-sidebar-backdrop, .form-actions, .sidebar-callout, .no-print, .d-print-none, .toast-container, .skip-link { display: none !important; }
    .app-shell { display: block; }
    .app-main.page-body { padding: 0; }
    .app-content { max-width: none; animation: none; }
    .card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
    .stat-card-hero { background: #fff !important; color: #000 !important; border-color: #000 !important; }
    .stat-card-hero * { color: #000 !important; }
    /* Normal pages print at paper size; the 80mm receipt uses a named page so list pages never print at receipt width */
    @page { size: auto; margin: 12mm; }
    @page receipt { size: 80mm auto; margin: 0; }
    body.receipt-page, body.receipt-print { page: receipt; }
    .receipt-page { background: #fff; padding: 0; }
    .receipt { box-shadow: none; border: 0; width: 100%; padding: 2mm; }
    .receipt-actions { display: none !important; }
    body.receipt-print { padding: 0; }
}

/* ------------------------------------------------------------------------ */
/* Purchase-order builder (modules/purchases/_form.php) + sticky summary card */
/* ------------------------------------------------------------------------ */
.sticky-summary { position: sticky; top: calc(var(--app-navbar-h) + 1rem); }
@media (max-width: 991.98px) { .sticky-summary { position: static; } }
.po-search-wrap { max-width: 36rem; }
.po-lines-table .po-qty { width: 5rem; margin-left: auto; }
.po-lines-table .po-cost { width: 8.5rem; margin-left: auto; }
.po-cost-note { font-size: .75rem; color: var(--tblr-secondary); margin-top: .25rem; }
.po-line-error { font-size: .75rem; font-weight: 500; color: var(--tblr-body-color); margin-top: .25rem; }
.po-line.is-invalid > td:first-child { box-shadow: inset 3px 0 0 var(--hifi-ink); }
.po-summary-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2.25rem; }
.po-summary-label { color: var(--tblr-secondary); margin: 0; }
.po-summary-input { width: 9.5rem; flex-wrap: nowrap; }
.po-summary-input .form-control { min-width: 0; }
.po-summary-total { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin: .75rem 0 .25rem; padding-top: .875rem; border-top: 1px solid var(--hifi-hairline); }
.po-grand-total { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; }
.pay-summary .po-summary-row + .po-summary-row { border-top: 1px solid var(--hifi-hairline); }