/* CellPoint Pro Web — built on Bootstrap 5.3.
   Theme tokens first (light and dark), then shared pieces, the sign-in screens, the register and the other screens.
   The printed slips (receipts, repair slips, labels) are in print.css.

   The look follows the desktop app (Windows 11 light, indigo #4F46E5): a light grey frame (side menu and top bars)
   around the screen's content, white cards with thin borders, neutral greys and indigo for actions and selection.
   The dark theme is the same design in soft greys. Which one shows is chosen on each device (the user menu:
   Light / Dark / Auto, Auto follows the computer) and applied before the first paint (App.razor, cellpoint.js).
   Colours are tokens (--cp-…) everywhere, so both themes stay in step; Bootstrap's own variables are set from them. */

/* ---------- Light theme (default). Printed slips and their previews always use it. ---------- */

:root,
[data-bs-theme=light],
.print-area,
.set-receipt-preview {
    color-scheme: light;

    /* Brand (the logo's colours) */
    --cp-brand-navy: #031d48;
    --cp-brand-orange: #fa8e08;
    --cp-navy: #0f1e46;

    /* Accent: the desktop's indigo. -fill is for solid backgrounds with white text, -text for indigo text on tints. */
    --cp-primary: #4f46e5;
    --cp-primary-rgb: 79, 70, 229;
    --cp-primary-fill: #4f46e5;
    --cp-primary-600: #4338ca;
    --cp-primary-700: #3730a3;
    --cp-primary-text: #4338ca;
    --cp-primary-text-rgb: 67, 56, 202;
    --cp-primary-50: #eef2ff;
    --cp-primary-100: #e0e7ff;
    --cp-primary-200: #c7d2fe;

    /* Neutrals: the frame, the content behind the cards, cards, fills, lines and text */
    --cp-chrome: #f5f5f5;
    --cp-bg: #fafafa;
    --cp-surface: #ffffff;
    --cp-surface-rgb: 255, 255, 255;
    --cp-surface-2: #fafafa;
    --cp-fill: #f4f4f5;
    --cp-fill-2: #e9e9ec;
    --cp-hover: rgba(0, 0, 0, .045);
    --cp-press: rgba(0, 0, 0, .08);
    --cp-border: #e5e5e5;
    --cp-border-strong: #d4d4d4;
    --cp-divider: #efefef;
    --cp-input-bg: #f5f5f5;
    --cp-input-border: #e0e0e0;
    --cp-text: #171717;
    --cp-text-rgb: 23, 23, 23;
    --cp-text-2: #404040;
    --cp-muted: #6b6b6b;
    --cp-muted-rgb: 107, 107, 107;
    --cp-subtle: #a3a3a3;
    --cp-scrim: rgba(10, 10, 10, .42);
    --cp-tip-bg: #262626;
    --cp-tip-text: #fafafa;
    --cp-status-default: #343a40;

    /* Side menu */
    --cp-nav-text: #404040;
    --cp-nav-icon: #6b6b6b;
    --cp-nav-active-bg: #e0e7ff;
    --cp-nav-active-text: #3730a3;
    --cp-nav-active-icon: #4f46e5;

    /* Tones: solid (dots, icons, borders), -fill (solid background with white text), -text (text on a tint or on a card),
       -50 / -100 tints (soft backgrounds), -200 (soft borders) */
    --cp-success: #16a34a;
    --cp-success-rgb: 22, 163, 74;
    --cp-success-fill: #16a34a;
    --cp-success-600: #15803d;
    --cp-success-text: #15803d;
    --cp-success-50: #f0fdf4;
    --cp-success-100: #dcfce7;
    --cp-success-200: #bbf7d0;

    --cp-warning: #f59e0b;
    --cp-warning-rgb: 245, 158, 11;
    --cp-warning-text: #b45309;
    --cp-warning-50: #fffbeb;
    --cp-warning-100: #fef3c7;
    --cp-warning-200: #fcd34d;

    --cp-danger: #dc2626;
    --cp-danger-rgb: 220, 38, 38;
    --cp-danger-fill: #dc2626;
    --cp-danger-600: #b91c1c;
    --cp-danger-text: #b91c1c;
    --cp-danger-50: #fef2f2;
    --cp-danger-100: #fee2e2;
    --cp-danger-200: #fecaca;

    --cp-info: #3b82f6;
    --cp-info-rgb: 59, 130, 246;
    --cp-info-text: #1d4ed8;
    --cp-info-50: #eff6ff;
    --cp-info-100: #dbeafe;
    --cp-info-200: #bfdbfe;

    --cp-orange: #f97316;
    --cp-orange-text: #c2410c;
    --cp-orange-50: #fff7ed;
    --cp-orange-100: #ffedd5;
    --cp-orange-200: #fed7aa;

    --cp-violet: #7c3aed;
    --cp-violet-text: #6d28d9;
    --cp-violet-50: #f5f3ff;
    --cp-violet-100: #ede9fe;
    --cp-violet-200: #ddd6fe;

    --cp-pink: #db2777;
    --cp-pink-text: #be185d;
    --cp-pink-50: #fdf2f8;
    --cp-pink-100: #fce7f3;
    --cp-pink-200: #fbcfe8;

    --cp-cyan: #0891b2;
    --cp-cyan-text: #0e7490;
    --cp-cyan-50: #ecfeff;
    --cp-cyan-100: #cffafe;

    /* Product category types (the desktop register's tile colours; Sale/CategoryStyle.cs) */
    --cp-cat-serialized-bg: #ffedd5;  --cp-cat-serialized-fg: #ea580c;
    --cp-cat-itemized-bg: #dcfce7;    --cp-cat-itemized-fg: #16a34a;
    --cp-cat-payments-bg: #fce7f3;    --cp-cat-payments-fg: #db2777;
    --cp-cat-services-bg: #dbeafe;    --cp-cat-services-fg: #2563eb;
    --cp-cat-parts-bg: #ede9fe;       --cp-cat-parts-fg: #7c3aed;
    --cp-cat-used-bg: #f1f1ec;        --cp-cat-used-fg: #6b6b57;
    --cp-cat-devices-bg: #fef3c7;     --cp-cat-devices-fg: #b45309;
    --cp-cat-other-bg: #f1f5f9;       --cp-cat-other-fg: #475569;

    /* Shape and depth */
    --cp-radius: 12px;
    --cp-radius-sm: 8px;
    --cp-radius-lg: 16px;
    --cp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
    --cp-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 18px rgba(0, 0, 0, .07);
    --cp-shadow-lg: 0 18px 50px rgba(0, 0, 0, .18);
    --cp-shadow-up: 0 -6px 18px rgba(0, 0, 0, .06);
    --cp-topbar-h: 60px;

    /* Bootstrap, from the tokens above */
    --bs-body-bg: var(--cp-surface);
    --bs-body-bg-rgb: var(--cp-surface-rgb);
    --bs-body-color: var(--cp-text);
    --bs-body-color-rgb: var(--cp-text-rgb);
    --bs-emphasis-color: var(--cp-text);
    --bs-emphasis-color-rgb: var(--cp-text-rgb);
    --bs-secondary-color: var(--cp-muted);
    --bs-secondary-color-rgb: var(--cp-muted-rgb);
    --bs-secondary-rgb: var(--cp-muted-rgb);
    --bs-secondary-bg: var(--cp-fill);
    --bs-tertiary-color: var(--cp-subtle);
    --bs-tertiary-bg: var(--cp-surface-2);
    --bs-border-color: var(--cp-border);
    --bs-border-color-translucent: var(--cp-border);
    --bs-heading-color: inherit;
    --bs-primary: var(--cp-primary);
    --bs-primary-rgb: var(--cp-primary-rgb);
    --bs-success-rgb: var(--cp-success-rgb);
    --bs-danger-rgb: var(--cp-danger-rgb);
    --bs-warning-rgb: var(--cp-warning-rgb);
    --bs-info-rgb: var(--cp-info-rgb);
    --bs-link-color: var(--cp-primary);
    --bs-link-color-rgb: var(--cp-primary-rgb);
    --bs-link-hover-color: var(--cp-primary-text);
    --bs-link-hover-color-rgb: var(--cp-primary-text-rgb);
    --bs-primary-text-emphasis: var(--cp-primary-text);
    --bs-primary-bg-subtle: var(--cp-primary-50);
    --bs-primary-border-subtle: var(--cp-primary-200);
    --bs-success-text-emphasis: var(--cp-success-text);
    --bs-success-bg-subtle: var(--cp-success-50);
    --bs-success-border-subtle: var(--cp-success-200);
    --bs-danger-text-emphasis: var(--cp-danger-text);
    --bs-danger-bg-subtle: var(--cp-danger-50);
    --bs-danger-border-subtle: var(--cp-danger-200);
    --bs-warning-text-emphasis: var(--cp-warning-text);
    --bs-warning-bg-subtle: var(--cp-warning-50);
    --bs-warning-border-subtle: var(--cp-warning-200);
    --bs-info-text-emphasis: var(--cp-info-text);
    --bs-info-bg-subtle: var(--cp-info-50);
    --bs-info-border-subtle: var(--cp-info-200);
    --bs-secondary-text-emphasis: var(--cp-text-2);
    --bs-secondary-bg-subtle: var(--cp-fill);
    --bs-secondary-border-subtle: var(--cp-border);
    --bs-light-text-emphasis: var(--cp-text-2);
    --bs-light-bg-subtle: var(--cp-surface-2);
    --bs-light-border-subtle: var(--cp-border);
    --bs-focus-ring-color: rgba(var(--cp-primary-rgb), .25);
    --bs-form-valid-color: var(--cp-success-text);
    --bs-form-valid-border-color: var(--cp-success);
    --bs-form-invalid-color: var(--cp-danger-text);
    --bs-form-invalid-border-color: var(--cp-danger);
    --bs-highlight-bg: var(--cp-warning-100);
    --bs-highlight-color: var(--cp-text);
    --bs-code-color: var(--cp-pink-text);
    --bs-border-radius: 8px;
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: 10px;
    --bs-border-radius-xl: 14px;
}

/* ---------- Dark theme: the same design in soft greys (not black), lighter accents for contrast ---------- */

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

    --cp-primary: #939bfa;
    --cp-primary-rgb: 147, 155, 250;
    --cp-primary-fill: #5b5ef0;
    --cp-primary-600: #5250e2;
    --cp-primary-700: #4a44d4;
    --cp-primary-text: #a5b4fc;
    --cp-primary-text-rgb: 165, 180, 252;
    --cp-primary-50: #383851;
    --cp-primary-100: #3c3d60;
    --cp-primary-200: #44457e;

    --cp-chrome: #242428;
    --cp-bg: #2a2a2f;
    --cp-surface: #313137;
    --cp-surface-rgb: 49, 49, 55;
    --cp-surface-2: #2d2d33;
    --cp-fill: #3a3a41;
    --cp-fill-2: #45454d;
    --cp-hover: rgba(255, 255, 255, .06);
    --cp-press: rgba(255, 255, 255, .1);
    --cp-border: #3f3f46;
    --cp-border-strong: #52525b;
    --cp-divider: #38383e;
    --cp-input-bg: #29292e;
    --cp-input-border: #48484f;
    --cp-text: #ececef;
    --cp-text-rgb: 236, 236, 239;
    --cp-text-2: #d4d4d8;
    --cp-muted: #acacb4;
    --cp-muted-rgb: 172, 172, 180;
    --cp-subtle: #71717a;
    --cp-scrim: rgba(0, 0, 0, .55);
    --cp-tip-bg: #f4f4f5;
    --cp-tip-text: #18181b;
    --cp-status-default: #a1a1aa;

    --cp-nav-text: #d4d4d8;
    --cp-nav-icon: #acacb4;
    --cp-nav-active-bg: #333458;
    --cp-nav-active-text: #c7d2fe;
    --cp-nav-active-icon: #a5b4fc;

    --cp-success: #22c55e;
    --cp-success-rgb: 34, 197, 94;
    --cp-success-fill: #15803d;
    --cp-success-600: #166534;
    --cp-success-text: #86efac;
    --cp-success-50: #2f463c;
    --cp-success-100: #2e5240;
    --cp-success-200: #2b6946;

    --cp-warning: #f59e0b;
    --cp-warning-rgb: 245, 158, 11;
    --cp-warning-text: #fcd34d;
    --cp-warning-50: #4c4031;
    --cp-warning-100: #5c492d;
    --cp-warning-200: #7b5a26;

    --cp-danger: #f87171;
    --cp-danger-rgb: 248, 113, 113;
    --cp-danger-fill: #dc2626;
    --cp-danger-600: #b91c1c;
    --cp-danger-text: #fca5a5;
    --cp-danger-50: #4c3439;
    --cp-danger-100: #5b353a;
    --cp-danger-200: #79383c;

    --cp-info: #60a5fa;
    --cp-info-rgb: 96, 165, 250;
    --cp-info-text: #93c5fd;
    --cp-info-50: #323c52;
    --cp-info-100: #334361;
    --cp-info-200: #355080;

    --cp-orange: #fb923c;
    --cp-orange-text: #fdba74;
    --cp-orange-50: #4d3a32;
    --cp-orange-100: #5d4030;
    --cp-orange-200: #7d4a2a;

    --cp-violet: #a78bfa;
    --cp-violet-text: #c4b5fd;
    --cp-violet-50: #3e3752;
    --cp-violet-100: #453a61;
    --cp-violet-200: #534180;

    --cp-pink: #f472b6;
    --cp-pink-text: #f9a8d4;
    --cp-pink-50: #4b3445;
    --cp-pink-100: #5a364d;
    --cp-pink-200: #783a5c;

    --cp-cyan: #22d3ee;
    --cp-cyan-text: #67e8f9;
    --cp-cyan-50: #2b444d;
    --cp-cyan-100: #284e5a;

    --cp-cat-serialized-bg: #593e30;  --cp-cat-serialized-fg: #fdba74;
    --cp-cat-itemized-bg: #2e4f3f;    --cp-cat-itemized-fg: #86efac;
    --cp-cat-payments-bg: #56364b;    --cp-cat-payments-fg: #f9a8d4;
    --cp-cat-services-bg: #33415d;    --cp-cat-services-fg: #93c5fd;
    --cp-cat-parts-bg: #433a5d;       --cp-cat-parts-fg: #c4b5fd;
    --cp-cat-used-bg: #464644;        --cp-cat-used-fg: #d9d9c6;
    --cp-cat-devices-bg: #58472e;     --cp-cat-devices-fg: #fcd34d;
    --cp-cat-other-bg: #3a3a41;       --cp-cat-other-fg: #d4d4d8;

    --cp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .25);
    --cp-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 8px 24px rgba(0, 0, 0, .28);
    --cp-shadow-lg: 0 20px 56px rgba(0, 0, 0, .5);
    --cp-shadow-up: 0 -6px 18px rgba(0, 0, 0, .3);
}

/* ---------- Base ---------- */

:root {
    --cp-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, "Noto Sans", "Liberation Sans", Arial, sans-serif;
    --bs-body-font-family: var(--cp-font);
}

html, body {
    height: 100%;
}

body {
    background: var(--cp-chrome);
    color: var(--cp-text);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "tnum" 1;
}

::selection { background: rgba(var(--cp-primary-rgb), .28); }

/* Thin scroll bars in the theme's greys (wide screens). */
@media (pointer: fine) {
    * { scrollbar-width: thin; scrollbar-color: var(--cp-border-strong) transparent; }
}

/* Keyboard focus: a clear indigo ring everywhere (mouse and touch taps don't show it). */
:focus-visible { outline: 2px solid rgba(var(--cp-primary-rgb), .7); outline-offset: 2px; }
.form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible { outline: 0; }

/* Less motion when the computer asks for it (the start-up bar, toasts, loading shimmer and slide-ins). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .cp-toast, .pos-menu, .auth-card, .pay, .pay-overlay, .done-overlay, .done-card, .done-check, .pos-upsell, .cp-shake { animation: none !important; }
}

/* Pieces that differ per theme: the logo's colours (BrandMark), for example. */
:root:not([data-bs-theme=dark]) .cp-for-dark,
[data-bs-theme=dark] .cp-for-light { display: none !important; }

.min-w-0 { min-width: 0; }

/* ---------- Bootstrap tweaks ---------- */

:root,
[data-bs-theme=light] {
    /* The desktop's standard button: white, a thin border, slightly darker at the bottom (Windows 11). */
    --cp-btn-bg: #ffffff;
    --cp-btn-hover: #f6f6f6;
    --cp-btn-active: #efefef;
    --cp-btn-border: #dedede;
    --cp-btn-border-bottom: #cbcbcb;
}

[data-bs-theme=dark] {
    --cp-btn-bg: #3b3b42;
    --cp-btn-hover: #44444c;
    --cp-btn-active: #36363c;
    --cp-btn-border: #4a4a52;
    --cp-btn-border-bottom: #404047;
}

.btn { font-weight: 500; border-radius: 8px; }
.btn-sm { border-radius: 6px; }
.btn-lg { border-radius: 10px; padding-top: .7rem; padding-bottom: .7rem; }

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--cp-primary-fill);
    --bs-btn-border-color: var(--cp-primary-fill);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cp-primary-600);
    --bs-btn-hover-border-color: var(--cp-primary-600);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cp-primary-700);
    --bs-btn-active-border-color: var(--cp-primary-700);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--cp-primary-fill);
    --bs-btn-disabled-border-color: var(--cp-primary-fill);
    --bs-btn-focus-shadow-rgb: var(--cp-primary-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--cp-primary);
    --bs-btn-border-color: var(--cp-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cp-primary-fill);
    --bs-btn-hover-border-color: var(--cp-primary-fill);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cp-primary-600);
    --bs-btn-active-border-color: var(--cp-primary-600);
    --bs-btn-disabled-color: var(--cp-primary);
    --bs-btn-disabled-border-color: var(--cp-primary);
    --bs-btn-focus-shadow-rgb: var(--cp-primary-rgb);
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--cp-success-fill);
    --bs-btn-border-color: var(--cp-success-fill);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cp-success-600);
    --bs-btn-hover-border-color: var(--cp-success-600);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cp-success-600);
    --bs-btn-active-border-color: var(--cp-success-600);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--cp-success-fill);
    --bs-btn-disabled-border-color: var(--cp-success-fill);
    --bs-btn-focus-shadow-rgb: var(--cp-success-rgb);
}

.btn-outline-success {
    --bs-btn-color: var(--cp-success-text);
    --bs-btn-border-color: var(--cp-success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cp-success-fill);
    --bs-btn-hover-border-color: var(--cp-success-fill);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cp-success-600);
    --bs-btn-active-border-color: var(--cp-success-600);
    --bs-btn-disabled-color: var(--cp-success-text);
    --bs-btn-disabled-border-color: var(--cp-success);
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--cp-danger-fill);
    --bs-btn-border-color: var(--cp-danger-fill);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cp-danger-600);
    --bs-btn-hover-border-color: var(--cp-danger-600);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cp-danger-600);
    --bs-btn-active-border-color: var(--cp-danger-600);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--cp-danger-fill);
    --bs-btn-disabled-border-color: var(--cp-danger-fill);
    --bs-btn-focus-shadow-rgb: var(--cp-danger-rgb);
}

.btn-outline-danger {
    --bs-btn-color: var(--cp-danger);
    --bs-btn-border-color: var(--cp-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--cp-danger-fill);
    --bs-btn-hover-border-color: var(--cp-danger-fill);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--cp-danger-600);
    --bs-btn-active-border-color: var(--cp-danger-600);
    --bs-btn-disabled-color: var(--cp-danger);
    --bs-btn-disabled-border-color: var(--cp-danger);
    --bs-btn-focus-shadow-rgb: var(--cp-danger-rgb);
}

.btn-warning {
    --bs-btn-color: #1c1400;
    --bs-btn-bg: #f59e0b;
    --bs-btn-border-color: #f59e0b;
    --bs-btn-hover-color: #1c1400;
    --bs-btn-hover-bg: #fbb22e;
    --bs-btn-hover-border-color: #fbb22e;
    --bs-btn-active-color: #1c1400;
    --bs-btn-active-bg: #e8930a;
    --bs-btn-active-border-color: #e8930a;
    --bs-btn-disabled-color: #1c1400;
    --bs-btn-disabled-bg: #f59e0b;
    --bs-btn-disabled-border-color: #f59e0b;
}

/* Standard buttons (btn-light, used for most secondary actions) */
.btn-light {
    --bs-btn-color: var(--cp-text);
    --bs-btn-bg: var(--cp-btn-bg);
    --bs-btn-border-color: var(--cp-btn-border);
    --bs-btn-hover-color: var(--cp-text);
    --bs-btn-hover-bg: var(--cp-btn-hover);
    --bs-btn-hover-border-color: var(--cp-btn-border);
    --bs-btn-active-color: var(--cp-text);
    --bs-btn-active-bg: var(--cp-btn-active);
    --bs-btn-active-border-color: var(--cp-btn-border);
    --bs-btn-disabled-color: var(--cp-muted);
    --bs-btn-disabled-bg: var(--cp-btn-bg);
    --bs-btn-disabled-border-color: var(--cp-btn-border);
    --bs-btn-focus-shadow-rgb: var(--cp-primary-rgb);
    border-bottom-color: var(--cp-btn-border-bottom);
}

.btn-light:active, .btn-light.active { border-bottom-color: var(--cp-btn-border); }

.btn-secondary,
.btn-outline-secondary {
    --bs-btn-color: var(--cp-text-2);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--cp-border-strong);
    --bs-btn-hover-color: var(--cp-text);
    --bs-btn-hover-bg: var(--cp-hover);
    --bs-btn-hover-border-color: var(--cp-border-strong);
    --bs-btn-active-color: var(--cp-text);
    --bs-btn-active-bg: var(--cp-press);
    --bs-btn-active-border-color: var(--cp-border-strong);
    --bs-btn-disabled-color: var(--cp-muted);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--cp-border);
    --bs-btn-focus-shadow-rgb: var(--cp-primary-rgb);
}

.btn-link {
    --bs-btn-color: var(--cp-primary);
    --bs-btn-hover-color: var(--cp-primary-text);
    --bs-btn-active-color: var(--cp-primary-text);
    --bs-btn-disabled-color: var(--cp-muted);
}

.btn-icon {
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--cp-muted);
    border: 0;
    background: transparent;
}

.btn-icon:hover:not(:disabled) { background: var(--cp-hover); color: var(--cp-text); }
.btn-icon:active:not(:disabled) { background: var(--cp-press); }
.btn-icon:disabled { opacity: .4; }

/* Text boxes: the desktop's filled boxes (light grey, thin border); white with an indigo ring while typing. */
.form-control,
.form-select {
    background-color: var(--cp-input-bg);
    border-color: var(--cp-input-border);
    color: var(--cp-text);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-color .15s ease-in-out;
}

.form-control:hover:not(:disabled):not(:focus),
.form-select:hover:not(:disabled):not(:focus) { border-color: var(--cp-border-strong); }

.form-control:focus,
.form-select:focus {
    background-color: var(--cp-surface);
    border-color: var(--cp-primary);
    color: var(--cp-text);
    box-shadow: 0 0 0 .2rem rgba(var(--cp-primary-rgb), .18);
}

.form-control:disabled,
.form-select:disabled { background-color: var(--cp-surface-2); border-color: var(--cp-divider); color: var(--cp-muted); }
.form-control::placeholder { color: var(--cp-muted); opacity: .85; }
.form-control-lg { border-radius: 10px; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--cp-danger); }
.form-control.is-valid, .form-select.is-valid { border-color: var(--cp-success); }
.input-group-text { background: var(--cp-fill); border-color: var(--cp-input-border); color: var(--cp-muted); }
.input-group-text.cp-addon-plain { background: var(--cp-input-bg); }
.form-check-input { background-color: var(--cp-surface); border-color: var(--cp-border-strong); }
.form-check-input:checked { background-color: var(--cp-primary-fill); border-color: var(--cp-primary-fill); }
.form-check-input:focus { border-color: var(--cp-primary); box-shadow: 0 0 0 .2rem rgba(var(--cp-primary-rgb), .2); }
.form-label { font-weight: 600; font-size: .92rem; color: var(--cp-text-2); }

kbd {
    background: var(--cp-fill);
    color: var(--cp-muted);
    border: 1px solid var(--cp-border-strong);
    border-bottom-width: 2px;
    border-radius: 6px;
    padding: .05rem .35rem;
    font-size: .72rem;
    font-family: inherit;
    font-weight: 600;
    box-shadow: none;
}

.btn kbd { background: rgba(255, 255, 255, .2); color: inherit; border-color: rgba(255, 255, 255, .35); }
.btn-light kbd, .btn-outline-secondary kbd { background: var(--cp-fill); border-color: var(--cp-border-strong); }

.alert { border-radius: 10px; }
.alert-light { --bs-alert-bg: var(--cp-surface-2); --bs-alert-color: var(--cp-text-2); --bs-alert-border-color: var(--cp-border); }
.alert-secondary { --bs-alert-bg: var(--cp-fill); --bs-alert-color: var(--cp-text-2); --bs-alert-border-color: var(--cp-border); }

.badge.text-bg-primary-subtle { background: var(--cp-primary-100) !important; color: var(--cp-primary-text) !important; }
.badge.text-bg-light { background: var(--cp-fill) !important; color: var(--cp-text-2) !important; }
.badge.text-bg-success { background: var(--cp-success-fill) !important; }
.badge.text-bg-danger { background: var(--cp-danger-fill) !important; }
[data-bs-theme=dark] .badge.text-bg-secondary { background: var(--cp-fill-2) !important; color: var(--cp-text) !important; }

.list-group { --bs-list-group-bg: var(--cp-surface); --bs-list-group-color: var(--cp-text); --bs-list-group-border-color: var(--cp-border); --bs-list-group-action-hover-bg: var(--cp-surface-2); --bs-list-group-action-active-bg: var(--cp-fill); }
.progress { --bs-progress-bg: var(--cp-fill-2); }
.modal { --bs-modal-bg: var(--cp-surface); --bs-modal-color: var(--cp-text); }
.dropdown-menu { --bs-dropdown-bg: var(--cp-surface); --bs-dropdown-link-hover-bg: var(--cp-hover); --bs-dropdown-border-color: var(--cp-border); }
.text-bg-light { background-color: var(--cp-fill) !important; color: var(--cp-text-2) !important; }
hr { color: var(--cp-border); opacity: 1; }

/* ---------- Start-up splash, reconnect and error UI ---------- */

.boot-splash {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(900px 520px at 15% -10%, rgba(var(--cp-primary-rgb), .13), transparent 60%),
        radial-gradient(760px 520px at 105% 110%, rgba(250, 142, 8, .1), transparent 60%),
        var(--cp-chrome);
    color: var(--cp-text);
}

.boot-splash-inner { text-align: center; }
.boot-splash-logo { display: block; width: min(220px, 58vw); height: auto; margin: 0 auto 1.6rem; }

.boot-splash-bar {
    width: 160px;
    height: 4px;
    border-radius: 4px;
    background: rgba(var(--cp-text-rgb), .1);
    overflow: hidden;
    margin: 0 auto;
}

.boot-splash-bar span {
    display: block;
    width: 40%;
    height: 100%;
    background: var(--cp-brand-orange);
    border-radius: 4px;
    animation: boot-bar 1.1s ease-in-out infinite;
}

@keyframes boot-bar {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(260%); }
}

#components-reconnect-modal { display: none; }

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 4000;
    align-items: center;
    justify-content: center;
    background: var(--cp-scrim);
    padding: 16px;
}

.reconnect-card {
    background: var(--cp-surface);
    border-radius: var(--cp-radius-lg);
    box-shadow: var(--cp-shadow-lg);
    padding: 2rem;
    width: min(380px, 100%);
    text-align: center;
}

.reconnect-show, .reconnect-failed, .reconnect-rejected { display: none; }
.components-reconnect-show .reconnect-show,
.components-reconnect-failed .reconnect-failed,
.components-reconnect-rejected .reconnect-rejected { display: block; }

.blazor-error {
    display: none;
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 3500;
    background: var(--cp-orange-50);
    color: var(--cp-orange-text);
    border: 1px solid var(--cp-orange-200);
    border-radius: 12px;
    box-shadow: var(--cp-shadow-lg);
    padding: .75rem 1rem;
    width: max-content;
    max-width: calc(100vw - 32px);
}

.blazor-error i { margin-right: .4rem; }
.blazor-error .reload { margin-left: .75rem; font-weight: 600; color: var(--cp-orange-text); }
.blazor-error .dismiss { margin-left: .75rem; cursor: pointer; color: var(--cp-orange-text); text-decoration: none; }

/* ---------- Brand: the CellPoint Pro logo (BrandMark; pictures in img/brand) ---------- */

.cp-logo { display: inline-block; max-width: 100%; height: auto; vertical-align: middle; }
.cp-logo-inline { display: inline-flex; align-items: center; gap: calc(var(--cp-logo-h) * .3); white-space: nowrap; vertical-align: middle; }
.cp-logo-inline img { display: block; flex-shrink: 0; }
.cp-logo-inline .cp-logo-mark { width: var(--cp-logo-h); height: var(--cp-logo-h); }
.cp-logo-inline .cp-logo-name { height: calc(var(--cp-logo-h) * .5); width: auto; }

@media (max-width: 575.98px) {
    .cp-logo-setup { width: 144px; }
}

/* ---------- Theme switch: Light / Dark / Auto (the user menu; the sign-in screens' footer) ---------- */

.cp-theme-switch {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 9px;
    background: var(--cp-fill);
    border: 1px solid var(--cp-border);
}

.cp-theme-opt {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    height: 30px;
    padding: 0 .55rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--cp-muted);
    font-size: .84rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .12s ease, color .12s ease;
}

.cp-theme-opt:hover { color: var(--cp-text); background: var(--cp-hover); }

html[data-cp-theme=light] .cp-theme-opt[data-theme-choice=light],
html[data-cp-theme=dark] .cp-theme-opt[data-theme-choice=dark],
html[data-cp-theme=auto] .cp-theme-opt[data-theme-choice=auto] {
    background: var(--cp-surface);
    color: var(--cp-primary-text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.cp-theme-switch.compact { display: inline-flex; }
.cp-theme-switch.compact .cp-theme-opt { flex: 0 0 auto; width: 30px; height: 26px; padding: 0; font-size: .82rem; }

.pos-menu-theme { padding: .4rem .7rem .55rem; }
.pos-menu-theme-label { display: flex; align-items: center; gap: .65rem; font-size: .92rem; color: var(--cp-text); margin-bottom: .4rem; }
.pos-menu-theme-label i { width: 18px; text-align: center; color: var(--cp-muted); }

/* ---------- Toasts ---------- */

.cp-toasts {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}

.cp-toasts-bottom-left { top: auto; right: auto; bottom: 16px; left: 16px; flex-direction: column-reverse; }

@media (max-width: 991.98px) {
    /* Phones and tablets: bottom of the screen belongs to the cart bar and dialog buttons. */
    .cp-toasts-bottom-left { top: 12px; bottom: auto; left: 12px; right: 12px; width: auto; flex-direction: column; }
}

.cp-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: 12px;
    box-shadow: var(--cp-shadow-lg);
    padding: .8rem .9rem;
    border-left: 4px solid var(--cp-primary);
    animation: toast-in .22s ease-out;
    font-size: .92rem;
}

.cp-toast-icon { font-size: 1.15rem; line-height: 1.3; color: var(--cp-primary); }
.cp-toast-success { border-left-color: var(--cp-success); }
.cp-toast-success .cp-toast-icon { color: var(--cp-success); }
.cp-toast-warning { border-left-color: var(--cp-warning); }
.cp-toast-warning .cp-toast-icon { color: var(--cp-warning); }
.cp-toast-error { border-left-color: var(--cp-danger); }
.cp-toast-error .cp-toast-icon { color: var(--cp-danger); }
.cp-toast-text { color: var(--cp-text-2); }
.btn-close-sm { transform: scale(.8); }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(-8px) scale(.98); }
    to { opacity: 1; transform: none; }
}

/* ---------- Modals ---------- */

.cp-modal { overflow-y: auto; }
.cp-modal .modal-content { background: var(--cp-surface); color: var(--cp-text); border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); box-shadow: var(--cp-shadow-lg); }
.cp-modal .modal-header { border-bottom-color: var(--cp-border); padding: 1rem 1.25rem; }
.cp-modal .modal-body { padding: 1.25rem; }
.cp-modal .modal-footer { border-top-color: var(--cp-border); padding: .75rem 1.25rem; gap: .5rem; }
.cp-modal .modal-footer > * { margin: 0; }
.modal-backdrop.show { opacity: .45; }

.cp-modal-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cp-primary-50);
    color: var(--cp-primary);
    font-size: 1.15rem;
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .cp-modal .modal-content { border-radius: 0; }
}

.cp-list .list-group-item { padding: .8rem 1rem; border-color: var(--cp-border); }
/* Bootstrap mutes action items; lists here are the main content of their dialog. */
.cp-list .list-group-item-action { color: var(--cp-text); }
.cp-list .list-group-item-action:hover, .cp-list .list-group-item-action:focus-visible { background: var(--cp-surface-2); color: var(--cp-text); }
.cp-list .list-group-item:first-child { border-top-left-radius: 12px; border-top-right-radius: 12px; }
.cp-list .list-group-item:last-child { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
.cp-list .list-group-item.active-soft { background: var(--cp-primary-50); box-shadow: inset 3px 0 0 var(--cp-primary); }
.cp-list .list-group-item:disabled { opacity: .75; }

.cp-empty-inline {
    text-align: center;
    padding: 1.75rem 1rem;
    border: 1px dashed var(--cp-border-strong);
    border-radius: 12px;
}

.cp-empty-inline > i { font-size: 1.8rem; display: block; margin-bottom: .35rem; color: var(--cp-subtle); }

.cp-type-dot {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.cp-shortcuts { display: grid; grid-template-columns: auto 1fr; gap: .55rem 1rem; align-items: center; }
.cp-shortcuts dt { font-weight: 500; white-space: nowrap; }
.cp-shortcuts dd { margin: 0; color: var(--cp-muted); }

/* ---------- Avatars ---------- */

.cp-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--cp-subtle);
    letter-spacing: .02em;
}

.cp-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-avatar-sm { width: 32px; height: 32px; font-size: .75rem; }
.cp-avatar-md { width: 42px; height: 42px; font-size: .9rem; }
.cp-avatar-lg { width: 64px; height: 64px; font-size: 1.3rem; }
.cp-avatar-xl { width: 88px; height: 88px; font-size: 1.8rem; }

/* ---------- Sign-in screens ---------- */

.auth-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(900px 520px at 12% -10%, rgba(var(--cp-primary-rgb), .14), transparent 60%),
        radial-gradient(760px 520px at 108% 112%, rgba(250, 142, 8, .12), transparent 60%),
        var(--cp-chrome);
}

.auth-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
}

.auth-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .45rem .9rem;
    color: var(--cp-muted);
    font-size: .8rem;
    padding: 0 16px 18px;
}

.auth-footer-brand { display: inline-flex; align-items: center; gap: .45rem; }

/* The card: white, a thin border and a soft shadow, with the brand's indigo-to-orange line along the top. */
.auth-card {
    background:
        linear-gradient(90deg, var(--cp-primary-fill), #8b5cf6 55%, var(--cp-brand-orange)) top / 100% 4px no-repeat,
        var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 24px 64px rgba(30, 27, 75, .12);
    padding: 2rem;
    width: min(100%, 460px);
    animation: card-in .28s ease-out;
}

.auth-card-narrow { width: min(100%, 430px); }
.auth-card-wide { width: min(100%, 680px); }

@media (max-width: 575.98px) {
    .auth-main { padding: 16px 12px; align-items: flex-start; }
    .auth-card { padding: 1.4rem 1.1rem; border-radius: 16px; }
}

[data-bs-theme=dark] .auth-card { box-shadow: 0 24px 64px rgba(0, 0, 0, .45); }

@keyframes card-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.cp-steps {
    list-style: none;
    display: flex;
    gap: .5rem;
    padding: 0;
    margin: 0;
}

.cp-steps li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--cp-muted);
    padding: .35rem .75rem .35rem .4rem;
    border-radius: 999px;
    background: var(--cp-fill);
}

.cp-steps li span {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cp-subtle);
    color: #fff;
    font-size: .75rem;
}

.cp-steps li.active { background: var(--cp-primary-50); color: var(--cp-primary-text); }
.cp-steps li.active span { background: var(--cp-primary-fill); }
.cp-steps li.done { color: var(--cp-success-text); background: var(--cp-success-50); }
.cp-steps li.done span { background: var(--cp-success-fill); }

.cp-choice-list { display: flex; flex-direction: column; gap: .6rem; }

.cp-choice {
    display: flex;
    align-items: center;
    gap: .9rem;
    width: 100%;
    text-align: left;
    background: var(--cp-surface);
    border: 1.5px solid var(--cp-border);
    border-radius: var(--cp-radius);
    padding: .85rem 1rem;
    transition: border-color .15s, box-shadow .15s, background .15s;
    color: inherit;
}

button.cp-choice:hover:not(:disabled) { border-color: var(--cp-primary); box-shadow: var(--cp-shadow); }
.cp-choice.selected { border-color: var(--cp-primary); background: var(--cp-primary-50); }
.cp-choice-static { cursor: default; }

.cp-choice-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--cp-primary-50);
    color: var(--cp-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.cp-choice-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cp-choice-title { font-weight: 600; }
.cp-choice-sub { font-size: .85rem; color: var(--cp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cp-employee-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: .75rem;
}

.cp-employee {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1.1rem .5rem .9rem;
    background: var(--cp-surface);
    border: 1.5px solid var(--cp-border);
    border-radius: 16px;
    transition: border-color .15s, box-shadow .15s, transform .1s;
    color: inherit;
}

.cp-employee:hover { border-color: var(--cp-primary); box-shadow: var(--cp-shadow); }
.cp-employee:active { transform: scale(.98); }
.cp-employee.current { border-color: var(--cp-primary); background: var(--cp-primary-50); }
.cp-employee-name { font-weight: 600; text-align: center; line-height: 1.2; word-break: break-word; }
.cp-employee-role { font-size: .75rem; color: var(--cp-muted); }

.cp-signin-panel { max-width: 360px; margin: 0 auto; }
.cp-pin-input { letter-spacing: .3em; font-weight: 600; }
.cp-pin-input::placeholder { letter-spacing: normal; font-weight: 400; }

/* Phones: name and password, number pad, then the button. Wider screens: pad on the right. */
.cp-signin-grid { display: grid; grid-template-areas: "who" "pad" "btn"; gap: .9rem; }
.cp-signin-who { grid-area: who; text-align: center; }
.cp-signin-pad { grid-area: pad; }
.cp-signin-pad .cp-pinpad { margin-top: 0; }
.cp-signin-submit { grid-area: btn; }

@media (min-width: 720px) {
    .cp-signin-panel { max-width: none; }
    .cp-signin-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "who pad" "btn pad";
        column-gap: 2rem;
        row-gap: .9rem;
        align-items: end;
    }
    .cp-signin-submit { align-self: start; }
}

.cp-pinpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .55rem;
    margin-top: .5rem;
}

.cp-pinpad-key {
    height: 54px;
    border-radius: 14px;
    border: 1px solid var(--cp-border);
    background: var(--cp-surface);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--cp-text);
    transition: background .1s, transform .08s;
}

.cp-pinpad-key:hover:not(:disabled) { background: var(--cp-surface-2); }
.cp-pinpad-key:active:not(:disabled) { transform: scale(.97); background: var(--cp-primary-50); }
.cp-pinpad-muted { font-size: .95rem; color: var(--cp-muted); }

.cp-shake { animation: shake .4s; }

@keyframes shake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-6px); }
    40%, 60% { transform: translateX(6px); }
}

.cp-info-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: var(--cp-surface-2);
    border: 1px solid var(--cp-border);
    border-radius: 12px;
    padding: .7rem .9rem;
}

.cp-info-row > i { color: var(--cp-primary); font-size: 1.1rem; }

.cp-cash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem 1.25rem;
    border: 1px solid var(--cp-border);
    border-radius: 14px;
    padding: .8rem 1rem;
}

@media (max-width: 575.98px) {
    .cp-cash-grid { grid-template-columns: 1fr; }
}

.cp-cash-row { display: flex; align-items: center; gap: .6rem; }
.cp-cash-denom { width: 3.8rem; font-weight: 600; }
.cp-cash-stepper { width: 128px; flex-shrink: 0; }
.cp-cash-stepper input { -moz-appearance: textfield; }
.cp-cash-sub { margin-left: auto; color: var(--cp-muted); font-size: .88rem; }

.cp-total-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--cp-primary-50);
    border-radius: 12px;
    padding: .75rem 1rem;
    font-weight: 600;
}

.cp-total-bar strong { font-size: 1.35rem; color: var(--cp-primary-text); }

/* ---------- App shell: side menu + screen ---------- */
/* Like the desktop (and Windows 11): the side menu and the top bars sit on the light grey frame; each screen's content
   is a slightly lighter sheet with a rounded top-left corner. */

:root {
    --nav-w: 256px;
    --nav-rail-w: 72px;
}

.shell { display: flex; height: 100vh; height: 100dvh; overflow: hidden; background: var(--cp-chrome); }
.shell-main { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; }
.shell-main > * { flex: 1; min-height: 0; }

.shell-nav {
    width: var(--nav-w);
    flex-shrink: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--cp-chrome);
    color: var(--cp-nav-text);
    transition: width .18s ease;
    position: relative;
    z-index: 30;
}

.shell-nav-head {
    height: var(--cp-topbar-h);
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .55rem 0 1.1rem;
    flex-shrink: 0;
}

.shell-nav-brand { display: flex; align-items: center; color: var(--cp-text); text-decoration: none; min-width: 0; flex: 1; border-radius: 8px; }
.shell-nav-brand:hover { color: var(--cp-text); }

.shell-nav-icon-btn {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--cp-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.shell-nav-icon-btn:hover { background: var(--cp-hover); color: var(--cp-text); }
.shell-nav-icon-btn:active { background: var(--cp-press); }
.shell-nav-icon-btn i { transition: transform .18s ease; }
.shell-nav-close { display: none; }

.shell-nav-context { padding: .3rem .75rem .45rem; display: flex; flex-direction: column; gap: .45rem; flex-shrink: 0; }

/* The store and register: a white card with an indigo tile (the desktop's store card). */
.shell-nav-where {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem .6rem;
    border-radius: 10px;
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    box-shadow: var(--cp-shadow-sm);
    min-width: 0;
}

.shell-nav-where .shell-nav-text,
.shell-nav-user .shell-nav-text { display: block; min-width: 0; }

.shell-nav-where-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--cp-primary-fill);
    color: #fff;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.shell-nav-store { display: block; color: var(--cp-text); font-weight: 600; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell-nav-register { display: block; font-size: .76rem; color: var(--cp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.shell-nav-status {
    position: relative;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .65rem;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--cp-warning-text);
    text-decoration: none;
    background: var(--cp-warning-100);
}

.shell-nav-status:hover { color: var(--cp-warning-text); box-shadow: inset 0 0 0 1px var(--cp-warning-200); }
.shell-nav-status.open { color: var(--cp-success-text); background: var(--cp-success-100); }
.shell-nav-status.open:hover { color: var(--cp-success-text); box-shadow: inset 0 0 0 1px var(--cp-success-200); }
.shell-nav-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cp-warning); flex-shrink: 0; }
.shell-nav-status.open .shell-nav-dot { background: var(--cp-success); box-shadow: 0 0 0 3px rgba(var(--cp-success-rgb), .22); }

.shell-nav-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: .1rem .75rem 1rem; }

.shell-nav-section {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--cp-muted);
    padding: .95rem .65rem .35rem;
}

.shell-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 40px;
    padding: 0 .7rem;
    margin-bottom: 2px;
    border-radius: 8px;
    color: var(--cp-nav-text);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color .12s ease, color .12s ease;
}

.shell-nav-link i { font-size: 1.1rem; width: 22px; text-align: center; flex-shrink: 0; color: var(--cp-nav-icon); transition: color .12s ease; }
.shell-nav-link:hover { background: var(--cp-hover); color: var(--cp-text); }
.shell-nav-link:hover i { color: var(--cp-text); }
.shell-nav-link:active { background: var(--cp-press); }
.shell-nav-link.active { background: var(--cp-nav-active-bg); color: var(--cp-nav-active-text); font-weight: 600; }
.shell-nav-link.active i { color: var(--cp-nav-active-icon); }

/* The selected item's indigo pill (Windows 11 navigation). */
.shell-nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: 18px;
    margin-top: -9px;
    width: 3px;
    border-radius: 3px;
    background: var(--cp-primary);
}

.shell-nav-alert { margin-left: auto; color: var(--cp-warning); }
.shell-nav-alert i { font-size: .95rem; width: auto; color: inherit; }
.shell-nav-link:hover .shell-nav-alert i, .shell-nav-link.active .shell-nav-alert i { color: inherit; }

.shell-nav-foot { padding: .6rem .75rem .75rem; flex-shrink: 0; }

.shell-nav-user {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
    padding: .45rem .55rem;
    border-radius: 10px;
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    box-shadow: var(--cp-shadow-sm);
}

.shell-nav-user-name { display: block; color: var(--cp-text); font-weight: 600; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell-nav-user-role { display: block; color: var(--cp-muted); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.shell-burger {
    display: none;
    width: 40px;
    height: 40px;
    margin-left: -.35rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--cp-text);
    font-size: 1.45rem;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.shell-burger:hover { background: var(--cp-hover); }

/* Wide screens: expanded column, or an icon rail when collapsed. The screen's sheet gets its rounded corner. */
@media (min-width: 992px) {
    .shell-nav-backdrop { display: none; }
    .pos-top-brand { display: none; }

    .shell .page-body,
    .shell .pos-body { border-left: 1px solid var(--cp-border); border-top-left-radius: 14px; }
    .shell .page-body ~ .set-savebar { border-left: 1px solid var(--cp-border); }

    html.nav-collapsed .shell-nav { width: var(--nav-rail-w); }
    html.nav-collapsed .shell-nav-text { display: none !important; }
    html.nav-collapsed .shell-nav-head { padding: 0 .3rem; gap: .1rem; justify-content: center; }
    html.nav-collapsed .shell-nav-brand { flex: 0 0 auto; }
    html.nav-collapsed .shell-nav-brand .cp-logo-name { display: none; }
    html.nav-collapsed .shell-nav-collapse i { transform: rotate(180deg); }
    html.nav-collapsed .shell-nav-context { padding: .6rem .6rem .25rem; align-items: center; }
    html.nav-collapsed .shell-nav-where { padding: .3rem; background: transparent; border-color: transparent; box-shadow: none; }
    html.nav-collapsed .shell-nav-status { padding: .55rem; justify-content: center; }
    html.nav-collapsed .shell-nav-scroll { overflow: visible; padding: .1rem .6rem 1rem; }
    html.nav-collapsed .shell-nav-section { padding: .7rem .3rem .45rem; }
    html.nav-collapsed .shell-nav-section::after { content: ""; display: block; height: 1px; background: var(--cp-border); }
    html.nav-collapsed .shell-nav-link { justify-content: center; padding: 0; }
    html.nav-collapsed .shell-nav-alert { position: absolute; top: 4px; right: 6px; }
    html.nav-collapsed .shell-nav-foot { padding: .6rem .4rem .75rem; }
    html.nav-collapsed .shell-nav-user { justify-content: center; padding: .3rem; background: transparent; border-color: transparent; box-shadow: none; }

    html.nav-collapsed .shell-nav-link:hover::after,
    html.nav-collapsed .shell-nav-status:hover::after {
        content: attr(data-label);
        position: absolute;
        left: calc(100% + 14px);
        top: 50%;
        transform: translateY(-50%);
        background: var(--cp-tip-bg);
        color: var(--cp-tip-text);
        font-size: .8rem;
        font-weight: 600;
        padding: .32rem .6rem;
        border-radius: 6px;
        white-space: nowrap;
        box-shadow: var(--cp-shadow);
        pointer-events: none;
        z-index: 50;
    }

    /* Toasts sit to the right of the menu. */
    .shell ~ .cp-toasts-bottom-left { left: calc(var(--nav-w) + 16px); }
    html.nav-collapsed .shell ~ .cp-toasts-bottom-left { left: calc(var(--nav-rail-w) + 16px); }
}

/* Phones and tablets: the menu is a drawer. */
@media (max-width: 991.98px) {
    .shell-burger { display: inline-flex; }

    .shell-nav {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(300px, 86vw);
        transform: translateX(-102%);
        transition: transform .22s ease-out;
        z-index: 1045;
        box-shadow: var(--cp-shadow-lg);
        border-right: 1px solid var(--cp-border);
    }

    html.nav-open .shell-nav { transform: none; }
    .shell-nav-collapse { display: none; }
    .shell-nav-close { display: inline-flex; }

    .shell-nav-backdrop {
        position: fixed;
        inset: 0;
        background: var(--cp-scrim);
        z-index: 1040;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s;
    }

    html.nav-open .shell-nav-backdrop { opacity: 1; pointer-events: auto; }
}

/* ---------- Screens inside the shell (Home, shift and batch) ---------- */

.page { height: 100%; display: flex; flex-direction: column; min-height: 0; }

.page-top {
    height: var(--cp-topbar-h);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 0 1rem 0 1.25rem;
    background: var(--cp-chrome);
    position: relative;
    z-index: 20;
}

.page-top-title { min-width: 0; line-height: 1.2; }
.page-top-h { font-size: 1.1rem; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-top-sub { font-size: .78rem; color: var(--cp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-top-right { margin-left: auto; display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }

.page-body { flex: 1; min-height: 0; overflow-y: auto; background: var(--cp-bg); border-top: 1px solid var(--cp-border); }
.page-inner { max-width: 1320px; margin: 0 auto; padding: 1.25rem 1.25rem 2rem; }
.page-narrow { max-width: 760px; }

@media (max-width: 575.98px) {
    .page-inner { padding: .9rem .75rem 1.5rem; }
    .page-top { padding: 0 .6rem 0 .75rem; gap: .45rem; }
    .page-top-sub { display: none; }
    .page-top-right { gap: .35rem; }
}

.card-surface {
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    box-shadow: var(--cp-shadow-sm);
}

/* Card headings in forms (settings, products, the repair ticket, new repairs and layaways, bill payments, closing a
   shift or batch): the desktop's group boxes, a light indigo band across the top of the card with the title in indigo. */
.set-card > .set-card-title:first-child,
.close-card > .close-card-head:first-child,
.rticket-card > .rticket-card-title:first-child,
.rticket-card > .rticket-section-head:first-child,
.rticket-card > div:first-child:has(> .rticket-card-title),
.bpnew-summary > .rticket-card-title:first-child,
.rnew-summary > .rnew-card-title:first-child,
.rnew-card > .rnew-card-title:first-child,
.rnew-card > .rnew-card-head:first-child {
    margin: -1.1rem -1.2rem .95rem;
    padding: .6rem 1.2rem;
    background: var(--cp-primary-50);
    border-bottom: 1px solid var(--cp-primary-100);
    border-radius: calc(var(--cp-radius) - 1px) calc(var(--cp-radius) - 1px) 0 0;
}

/* The same on cards with a little less padding. */
.rticket-card > .rticket-card-title:first-child,
.rticket-card > .rticket-section-head:first-child,
.rticket-card > div:first-child:has(> .rticket-card-title),
.bpnew-summary > .rticket-card-title:first-child,
.rnew-summary > .rnew-card-title:first-child,
.rnew-card > .rnew-card-title:first-child,
.rnew-card > .rnew-card-head:first-child { margin: -1rem -1.1rem .85rem; padding: .55rem 1.1rem; }

.set-card > .set-card-title:first-child,
.rticket-card > .rticket-card-title:first-child,
.rticket-card > .rticket-section-head:first-child .rticket-card-title,
.rticket-card > div:first-child > .rticket-card-title,
.bpnew-summary > .rticket-card-title:first-child,
.rnew-summary > .rnew-card-title:first-child,
.rnew-card > .rnew-card-title:first-child,
.close-card > .close-card-head:first-child .close-card-title,
.rnew-card > .rnew-card-head:first-child .rnew-card-title { color: var(--cp-primary-text); font-size: .95rem; }

.cp-empty-note { color: var(--cp-muted); text-align: center; padding: 1.5rem .5rem; font-size: .92rem; }
.cp-empty-note i { display: block; font-size: 1.6rem; margin-bottom: .35rem; color: var(--cp-subtle); }
.cp-empty-state { text-align: center; padding: 2.5rem 1.25rem; max-width: 520px; margin: 1rem auto; }
.cp-empty-state > i { font-size: 2rem; color: var(--cp-primary); }

.cp-skeleton,
.cp-skeleton-block {
    background: linear-gradient(90deg, var(--cp-fill-2) 25%, var(--cp-surface-2) 50%, var(--cp-fill-2) 75%);
    background-size: 200% 100%;
    animation: cp-shimmer 1.2s infinite linear;
}

.cp-skeleton { display: inline-block; height: .9em; border-radius: 6px; vertical-align: middle; }
.cp-skeleton-block { border-radius: 10px; }

@keyframes cp-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* Shift pill pop-over (all top bars) */
.pos-shift-wrap { position: relative; }
.shift-pop { width: 310px; padding: .8rem; }
.shift-pop-head { display: flex; gap: .65rem; align-items: center; margin-bottom: .6rem; }
.shift-pop-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cp-warning); flex-shrink: 0; }
.shift-pop-dot.open { background: var(--cp-success); box-shadow: 0 0 0 3px rgba(var(--cp-success-rgb), .18); }
.shift-pop-facts { display: grid; grid-template-columns: auto 1fr; gap: .3rem .75rem; font-size: .88rem; margin: 0 0 .8rem; }
.shift-pop-facts dt { color: var(--cp-muted); font-weight: 500; }
.shift-pop-facts dd { margin: 0; text-align: right; }
.shift-pop-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

@media (max-width: 575.98px) {
    .shift-pop { position: fixed; top: calc(var(--cp-topbar-h) + 6px); left: 10px; right: 10px; width: auto; }
}

/* ---------- Home ---------- */

.home-hello { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.home-greeting { font-size: 1.5rem; font-weight: 700; margin: 0 0 .1rem; letter-spacing: -.01em; }
.home-sell { flex-shrink: 0; }

.home-shift {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .9rem 1.25rem;
    align-items: center;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.5rem;
    border-left: 5px solid var(--cp-warning);
}

.home-shift.is-open { border-left-color: var(--cp-success); }

.home-shift-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    background: var(--cp-warning-50);
    color: var(--cp-warning-text);
}

.home-shift.is-open .home-shift-icon { background: var(--cp-success-50); color: var(--cp-success); }
.home-shift-title { font-weight: 700; font-size: 1.12rem; }
.home-shift-facts { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; color: var(--cp-muted); font-size: .9rem; margin-top: .2rem; }
.home-shift-facts i { margin-right: .3rem; }
.home-shift-stat { text-align: right; }
.home-shift-stat-label { font-size: .72rem; color: var(--cp-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.home-shift-stat-value { font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
.home-shift-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; }

@media (max-width: 767.98px) {
    .home-hello { flex-direction: column; align-items: stretch; }
    .home-greeting { font-size: 1.3rem; }
    .home-shift { grid-template-columns: auto minmax(0, 1fr); padding: 1rem; }
    .home-shift-stat { grid-column: 1 / -1; text-align: left; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
    .home-shift-actions .btn { flex: 1 1 auto; }
}

.home-section { margin-bottom: 1.5rem; }
.home-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.home-section-title { font-size: 1.05rem; font-weight: 700; margin: 0; }
.home-filters { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.home-period .btn { min-width: 64px; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: .9rem; }

.kpi {
    --kpi-color: #3b82f6;
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    padding: 1rem 1rem .7rem;
    box-shadow: var(--cp-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 0;
}

.kpi-head { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.kpi-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 1.05rem; flex-shrink: 0; background: var(--cp-primary-100); color: var(--kpi-color); }
.kpi-title {
    font-weight: 600;
    color: var(--cp-text-2);
    font-size: .9rem;
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.kpi-value { font-size: 1.55rem; font-weight: 700; letter-spacing: -.01em; margin-top: .35rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-compare { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .4rem; font-size: .78rem; min-height: 1.5em; }
.kpi-delta { font-weight: 700; border-radius: 999px; padding: .05rem .45rem; white-space: nowrap; }
.kpi-up { color: var(--cp-success-text); background: var(--cp-success-100); }
.kpi-down { color: var(--cp-danger-text); background: var(--cp-danger-100); }
.kpi-flat { color: var(--cp-muted); background: var(--cp-fill); }
.kpi-vs { color: var(--cp-muted); white-space: nowrap; }
.kpi-spark { width: 100%; height: 42px; margin-top: .2rem; display: block; overflow: visible; }
.kpi-line { fill: none; stroke: var(--kpi-color); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.kpi-area { fill: var(--kpi-color); opacity: .12; }

.kpi-green { --kpi-color: #16a34a; }
.kpi-green .kpi-icon { background: var(--cp-success-100); }
.kpi-orange { --kpi-color: #f97316; }
.kpi-orange .kpi-icon { background: var(--cp-pink-100); }
.kpi-blue { --kpi-color: #3b82f6; }
.kpi-blue .kpi-icon { background: var(--cp-primary-100); }
.kpi-indigo { --kpi-color: #6366f1; }
.kpi-indigo .kpi-icon { background: var(--cp-primary-100); }
.kpi-amber { --kpi-color: #f59e0b; }
.kpi-amber .kpi-icon { background: var(--cp-fill); }

@media (max-width: 575.98px) {
    /* Phones: two KPIs per row. */
    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .kpi { padding: .75rem .75rem .55rem; }
    .kpi-icon { width: 28px; height: 28px; font-size: .9rem; border-radius: 8px; }
    .kpi-title { font-size: .8rem; }
    .kpi-value { font-size: 1.15rem; margin-top: .2rem; }
    .kpi-compare { font-size: .72rem; }
    .kpi-spark { height: 32px; }
    .home-filters { width: 100%; }
}

.home-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1rem; }
.home-grid.single { grid-template-columns: minmax(0, 1fr); }
.home-panel { padding: 1rem 1.15rem 1.1rem; }
.home-panel-head { margin-bottom: .8rem; }

@media (max-width: 991.98px) {
    .home-grid { grid-template-columns: minmax(0, 1fr); }
}

.donut-wrap { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.donut { position: relative; width: 168px; height: 168px; flex-shrink: 0; }
.donut svg { width: 100%; height: 100%; display: block; }
.donut-track { fill: none; stroke: var(--cp-fill-2); stroke-width: 6; }
.donut-slice { fill: none; stroke-width: 6; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.donut-total { font-weight: 700; font-size: 1.05rem; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-label { font-size: .7rem; color: var(--cp-muted); text-transform: uppercase; letter-spacing: .06em; }
.donut-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 210px; }

.donut-legend li {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto auto;
    gap: .6rem;
    align-items: center;
    padding: .33rem 0;
    border-bottom: 1px solid var(--cp-divider);
    font-size: .9rem;
}

.donut-legend li:last-child { border-bottom: 0; }
.donut-swatch { width: 12px; height: 12px; border-radius: 4px; }
.donut-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.donut-pct { color: var(--cp-muted); font-size: .8rem; }
.donut-amt { font-weight: 600; text-align: right; white-space: nowrap; }

.top-list { list-style: none; margin: 0; padding: 0; }
.top-row { display: flex; align-items: center; gap: .75rem; padding: .45rem 0; }
.top-rank { width: 24px; height: 24px; border-radius: 50%; background: var(--cp-primary-50); color: var(--cp-primary-text); font-weight: 700; font-size: .78rem; display: grid; place-items: center; flex-shrink: 0; }
.top-main { flex: 1; min-width: 0; }
.top-line { display: flex; justify-content: space-between; gap: .75rem; font-size: .9rem; }
.top-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-value { font-weight: 600; white-space: nowrap; }
.top-bar { height: 6px; background: var(--cp-fill-2); border-radius: 99px; margin-top: .32rem; overflow: hidden; }
.top-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--cp-primary-fill), var(--cp-violet)); border-radius: 99px; }

.store-filter { position: relative; }
.store-filter-btn { display: inline-flex; align-items: center; gap: .4rem; max-width: 230px; }
.store-filter-menu { right: 0; width: 270px; }
.store-filter-item { cursor: pointer; margin: 0; }

/* ---------- Close shift / close batch ---------- */

.close-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.close-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.close-side { position: sticky; top: 0; min-width: 0; }

@media (max-width: 991.98px) {
    .close-grid { grid-template-columns: minmax(0, 1fr); }
    .close-side { position: static; }
}

.close-card { padding: 1.1rem 1.2rem; }
.close-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.close-card-title { font-size: 1rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: .5rem; }
.close-card-title i { color: var(--cp-primary); }

.drawer-math { background: var(--cp-surface-2); border: 1px solid var(--cp-border); border-radius: 12px; padding: .45rem .9rem; }
.drawer-math > div { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; font-size: .92rem; }
.drawer-math > div.strong { font-weight: 700; border-top: 1px dashed var(--cp-border-strong); margin-top: .2rem; padding-top: .45rem; }
.leave-input { max-width: 190px; }

.drawer-result {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    background: var(--cp-primary-50);
    border-radius: 12px;
    padding: .75rem .95rem;
    margin-top: .6rem;
}

.drawer-result > div { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.drawer-result span { font-size: .76rem; }
.drawer-result strong { font-size: 1.05rem; }

.count-table { display: flex; flex-direction: column; }

.count-row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) minmax(170px, 1.25fr) minmax(0, .9fr);
    gap: .75rem;
    align-items: center;
    padding: .5rem 0;
    border-bottom: 1px solid var(--cp-divider);
    font-size: .92rem;
}

.count-row:last-child { border-bottom: 0; }
.count-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cp-muted); font-weight: 600; padding-top: 0; }
.count-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 575.98px) {
    .count-row { grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .75rem; }
    .count-head { display: none; }
    .count-input { grid-column: 1 / -1; order: 3; }
    .drawer-result { grid-template-columns: minmax(0, 1fr); }
}

.close-footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    background: rgba(var(--cp-surface-rgb), .97);
    backdrop-filter: blur(6px);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius);
    padding: .75rem 1rem;
    margin-top: 1rem;
    box-shadow: var(--cp-shadow);
}

.close-footer-total { margin-right: auto; display: flex; flex-direction: column; min-width: 0; }
.close-footer-total strong { font-size: 1.15rem; }

@media (max-width: 575.98px) {
    /* Phones: total and "Print" on one line, the buttons on the next. */
    .close-footer { border-radius: 14px 14px 0 0; margin: 1rem -.75rem -1.5rem; gap: .5rem .75rem; padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom)); }
    .close-footer-total { flex: 1 1 auto; }
    .close-footer-total strong { font-size: 1rem; }
    .close-footer .btn { flex: 1 1 40%; }
}

.confirm-list { list-style: none; padding: 0; margin: 0; }
.confirm-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .38rem 0; border-bottom: 1px solid var(--cp-divider); }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; }
.stat { padding: .85rem 1rem; }
.stat-label { font-size: .72rem; color: var(--cp-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.stat-value { font-size: 1.3rem; font-weight: 700; }

.shift-list { display: flex; flex-direction: column; gap: .5rem; }

.shift-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: .9rem;
    align-items: center;
    padding: .75rem .9rem;
    border: 1px solid var(--cp-border);
    border-radius: 12px;
}

.shift-item.open { border-color: var(--cp-warning-200); background: var(--cp-warning-50); }
.shift-item-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cp-subtle); }
.shift-item.open .shift-item-dot { background: var(--cp-warning); box-shadow: 0 0 0 4px rgba(var(--cp-warning-rgb), .2); }
.shift-item-sales { text-align: right; }

@media (max-width: 575.98px) {
    .shift-item { grid-template-columns: auto minmax(0, 1fr) auto; }
    .shift-item-action { grid-column: 1 / -1; }
    .shift-item-action .btn { width: 100%; }
}

.summary-group + .summary-group { margin-top: .95rem; }
.summary-heading { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--cp-primary-text); margin-bottom: .2rem; }
.summary-line { display: flex; justify-content: space-between; gap: 1rem; padding: .28rem 0; font-size: .9rem; border-bottom: 1px dashed var(--cp-divider); }
.summary-line.strong { font-weight: 700; }
.summary-line.zero .summary-amt { color: var(--cp-subtle); }
.summary-amt { white-space: nowrap; }

/* Manager approval */
.cp-approver-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .6rem; }

.cp-approver {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    padding: .9rem .5rem;
    border: 1px solid var(--cp-border);
    border-radius: 14px;
    background: var(--cp-surface);
    color: inherit;
}

.cp-approver:hover { border-color: var(--cp-primary); background: var(--cp-primary-50); }
.cp-approver-name { font-weight: 600; font-size: .9rem; text-align: center; }

/* ---------- Register layout ---------- */

.pos {
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--cp-topbar-h) minmax(0, 1fr);
}

.pos-top {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem 0 1.25rem;
    background: var(--cp-chrome);
    position: relative;
    z-index: 20;
}

.pos-top-store { border-left: 1px solid var(--cp-border); padding-left: 1rem; min-width: 0; line-height: 1.2; }
.pos-top-store-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32vw; }
.pos-top-store-sub { font-size: .78rem; color: var(--cp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-top-right { margin-left: auto; display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }

/* Wide screens: the logo is in the side menu, so the store name starts the bar (no divider). */
@media (min-width: 992px) {
    .pos-top-store { border-left: 0; padding-left: 0; }
}

@media (max-width: 767.98px) {
    /* Phones: the store name matters more than the product name. */
    .pos-top { gap: .6rem; padding: 0 .75rem; }
    .pos-top .cp-logo-name { display: none; }
    .pos-top-store { padding-left: .6rem; }
    .pos-top-store-name { max-width: 40vw; font-size: .92rem; }
    .pos-top-right { gap: .35rem; }
    .pos-shift { padding: .25rem .6rem; font-size: .8rem; }
}

.pos-shift {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 1px solid var(--cp-border);
    background: var(--cp-surface);
    border-radius: 999px;
    padding: .3rem .8rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--cp-text);
    white-space: nowrap;
}

.pos-shift-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cp-subtle); }
.pos-shift.open .pos-shift-dot { background: var(--cp-success); box-shadow: 0 0 0 3px rgba(var(--cp-success-rgb), .18); }
.pos-shift.closed { color: var(--cp-warning-text); border-color: var(--cp-warning-200); background: var(--cp-warning-50); }
.pos-shift.closed .pos-shift-dot { background: var(--cp-warning); }

.pos-user { position: relative; }

.pos-user-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: .2rem .6rem .2rem .2rem;
    font-weight: 600;
    color: var(--cp-text);
}

.pos-user-btn:hover { background: var(--cp-fill); }

.pos-menu-backdrop { position: fixed; inset: 0; z-index: 40; }

.pos-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 41;
    width: 290px;
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: 14px;
    box-shadow: var(--cp-shadow-lg);
    padding: .4rem;
    animation: toast-in .15s ease-out;
}

.pos-menu-head { padding: .55rem .7rem .65rem; border-bottom: 1px solid var(--cp-border); margin-bottom: .3rem; }
.pos-menu-sep { height: 1px; background: var(--cp-border); margin: .3rem 0; }

.pos-menu-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: .55rem .7rem;
    border-radius: 9px;
    font-size: .92rem;
    color: var(--cp-text);
}

.pos-menu-item:hover { background: var(--cp-fill); }
.pos-menu-item i { width: 18px; text-align: center; color: var(--cp-muted); }
.pos-menu-item.text-danger i { color: var(--cp-danger); }

.pos-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 410px;
    min-height: 0;
    background: var(--cp-bg);
    border-top: 1px solid var(--cp-border);
}

@media (min-width: 1400px) {
    .pos-body { grid-template-columns: minmax(0, 1fr) 450px; }
}

.pos-left {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 1rem 1rem 0;
}

.pos-right {
    background: var(--cp-surface);
    border-left: 1px solid var(--cp-border);
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.pos-mobile-bar { display: none; }

@media (max-width: 991.98px) {
    .pos-body { grid-template-columns: minmax(0, 1fr); }
    .pos-left { padding: .75rem .75rem 0; padding-bottom: 84px; }

    .pos-right {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(460px, 100vw);
        z-index: 1030;
        transform: translateX(100%);
        transition: transform .22s ease-out;
        box-shadow: var(--cp-shadow-lg);
    }

    .pos-right.open { transform: none; }

    .pos-mobile-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1020;
        gap: .6rem;
        padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
        background: rgba(var(--cp-surface-rgb), .96);
        backdrop-filter: blur(8px);
        border-top: 1px solid var(--cp-border);
    }

    .pos-mobile-bar .btn { min-width: 34%; }
}

.pos-mobile-cart {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .7rem;
    border: 1px solid var(--cp-border);
    background: var(--cp-surface);
    border-radius: 12px;
    padding: .35rem .7rem;
    color: inherit;
}

.pos-mobile-count {
    min-width: 30px;
    height: 30px;
    padding: 0 .4rem;
    border-radius: 999px;
    background: var(--cp-primary-fill);
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s;
}

.pos-mobile-count.bump { transform: scale(1.25); }

/* ---------- Search ---------- */

.pos-search { position: relative; margin-bottom: .75rem; }

.pos-search-box {
    display: flex;
    align-items: center;
    background: var(--cp-surface);
    border: 2px solid var(--cp-border);
    border-radius: 14px;
    height: 56px;
    padding: 0 .6rem 0 .95rem;
    transition: border-color .15s, box-shadow .15s;
    box-shadow: var(--cp-shadow-sm);
}

.pos-search-box:focus-within { border-color: var(--cp-primary); box-shadow: 0 0 0 4px rgba(var(--cp-primary-rgb), .12); }
.pos-search-icon { font-size: 1.3rem; color: var(--cp-primary); margin-right: .6rem; }

.pos-search-box input {
    flex: 1;
    min-width: 0;
    border: 0;
    box-shadow: none !important;
    background: transparent;
    font-size: 1.05rem;
    padding: 0;
    height: 100%;
}

.pos-search-box input::-webkit-search-cancel-button { display: none; }
.pos-search-spinner { margin: 0 .5rem; }
.pos-search-clear { color: var(--cp-subtle); padding: .25rem .5rem; border: 0; }
.pos-search-clear:hover { color: var(--cp-muted); }
.pos-search-hint { margin-left: .35rem; }

.pos-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 30;
    list-style: none;
    margin: 0;
    padding: .35rem;
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: 14px;
    box-shadow: var(--cp-shadow-lg);
    max-height: min(60vh, 460px);
    overflow-y: auto;
}

.pos-suggest li {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .7rem;
    border-radius: 10px;
    cursor: pointer;
}

.pos-suggest li.active { background: var(--cp-primary-50); }
.pos-suggest-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pos-suggest-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pos-suggest-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-suggest-sub { font-size: .8rem; color: var(--cp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-suggest-side { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }

/* "Often bought with …" strip under the search box */
.pos-upsell {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: -.15rem 0 .75rem;
    padding: .45rem .5rem .45rem .8rem;
    background: var(--cp-warning-50);
    border: 1px solid var(--cp-warning-200);
    border-radius: 12px;
    min-width: 0;
    animation: toast-in .2s ease-out;
}

.pos-upsell-title { font-size: .8rem; font-weight: 700; color: var(--cp-warning-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30%; flex-shrink: 0; }
.pos-upsell-list { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.pos-upsell-list::-webkit-scrollbar { display: none; }

.pos-upsell-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    max-width: 260px;
    flex-shrink: 0;
    border: 1px solid var(--cp-warning-200);
    background: var(--cp-surface);
    border-radius: 999px;
    padding: .25rem .4rem .25rem .75rem;
    font-size: .85rem;
    color: var(--cp-text);
}

.pos-upsell-chip:hover { border-color: var(--cp-warning); box-shadow: var(--cp-shadow-sm); }
.pos-upsell-chip i { color: var(--cp-primary); font-size: 1rem; }
.pos-upsell-close { font-size: .65rem; flex-shrink: 0; }

@media (max-width: 575.98px) {
    .pos-upsell { flex-wrap: wrap; }
    .pos-upsell-title { max-width: none; flex: 1; }
    .pos-upsell-list { order: 3; flex-basis: 100%; }
}

/* ---------- Catalog ---------- */

.catalog { display: flex; flex-direction: column; min-height: 0; flex: 1; }

.catalog-types {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding-bottom: .6rem;
    scrollbar-width: none;
}

.catalog-types::-webkit-scrollbar { display: none; }

.catalog-type {
    --type-bg: var(--cp-primary-50);
    --type-fg: var(--cp-primary);
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    white-space: nowrap;
    border: 1.5px solid var(--cp-border);
    background: var(--cp-surface);
    color: var(--cp-text);
    border-radius: 999px;
    padding: .45rem .95rem;
    font-weight: 600;
    font-size: .9rem;
    transition: background .15s, border-color .15s, color .15s;
}

.catalog-type i { color: var(--type-fg); }
.catalog-type:hover { border-color: var(--type-fg); }
.catalog-type.active { background: var(--type-bg); border-color: var(--type-fg); color: var(--type-fg); }
.catalog-type:first-child { --type-bg: var(--cp-warning-50); --type-fg: var(--cp-warning-text); }

.catalog-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .6rem;
    font-size: .92rem;
    min-height: 34px;
}

.catalog-crumbs > .bi-chevron-right { color: var(--cp-subtle); font-size: .75rem; }
.catalog-back { width: 32px; height: 32px; padding: 0; border-radius: 9px; }

.catalog-crumb {
    border: 0;
    background: transparent;
    padding: .2rem .35rem;
    border-radius: 7px;
    color: var(--cp-primary);
    font-weight: 600;
}

.catalog-crumb:hover { background: var(--cp-primary-50); }
.catalog-crumb.current { color: var(--cp-text); cursor: default; }
.catalog-crumb.current:hover { background: transparent; }
.catalog-filter { max-width: 220px; }

.catalog-body { flex: 1; overflow-y: auto; min-height: 0; padding-bottom: 1rem; margin: 0 -.25rem; padding-left: .25rem; padding-right: .25rem; }

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: .75rem;
}

@media (max-width: 575.98px) {
    .catalog-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: .55rem; }
}

.catalog-empty {
    text-align: center;
    color: var(--cp-muted);
    padding: 3rem 1rem;
    border: 1.5px dashed var(--cp-border-strong);
    border-radius: 16px;
    background: rgba(var(--cp-surface-rgb), .6);
}

.catalog-empty > i { font-size: 2.2rem; display: block; margin-bottom: .5rem; color: var(--cp-subtle); }

.tile {
    --type-bg: var(--cp-cat-other-bg);
    --type-fg: var(--cp-cat-other-fg);
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: .55rem;
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: 16px;
    text-align: left;
    color: inherit;
    transition: box-shadow .15s, transform .08s, border-color .15s;
    box-shadow: var(--cp-shadow-sm);
    min-width: 0;
}

.tile:hover { box-shadow: var(--cp-shadow); border-color: var(--cp-border-strong); }
.tile:active { transform: scale(.975); }
.tile-muted { opacity: .7; }

.tile-media {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 11px;
    background: var(--type-bg);
    color: var(--type-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    overflow: hidden;
}

.tile-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--cp-surface); }

.tile-flag {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(var(--cp-surface-rgb), .92);
    color: var(--type-fg);
    border-radius: 7px;
    font-size: .8rem;
    padding: 0 .3rem;
    line-height: 1.5;
}

.tile-name {
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em;
    padding: 0 .15rem;
}

.tile-folder .tile-name { min-height: 0; }
.tile-foot { display: flex; align-items: center; justify-content: space-between; gap: .35rem; padding: 0 .15rem .1rem; flex-wrap: wrap; }
.tile-price { font-weight: 700; }

.tile-skeleton {
    height: 180px;
    border: 0;
    background: linear-gradient(90deg, var(--cp-fill-2) 25%, var(--cp-fill) 37%, var(--cp-fill-2) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.3s ease infinite;
}

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

.cp-stock { font-size: .75rem; font-weight: 600; white-space: nowrap; }
.cp-stock.ok { color: var(--cp-success-text); }
.cp-stock.none { color: var(--cp-danger); }

/* ---------- Cart ---------- */

.cart { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .85rem 1rem .6rem;
}

.cart-title { font-weight: 700; font-size: 1.1rem; }
.cart-sub { font-size: .82rem; color: var(--cp-muted); }
.cart-head-actions { display: flex; align-items: center; gap: .15rem; }

.cart-held-btn {
    border-radius: 999px;
    background: var(--cp-warning-100);
    color: var(--cp-warning-text);
    font-weight: 600;
    font-size: .8rem;
    padding: .25rem .65rem;
    margin-right: .25rem;
    white-space: nowrap;
}

.cart-held-btn:hover { background: var(--cp-warning-200); color: var(--cp-warning-text); }

.cart-customer {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0 1rem .6rem;
    padding: .6rem .75rem;
    border: 1.5px solid var(--cp-border);
    border-radius: 14px;
    background: var(--cp-surface-2);
    text-align: left;
    color: inherit;
}

.cart-customer:hover { border-color: var(--cp-primary); }
.cart-customer.missing { border-style: dashed; border-color: var(--cp-warning); background: var(--cp-warning-50); }

.cart-customer-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cp-fill-2);
    color: var(--cp-text-2);
    flex-shrink: 0;
}

.cart-customer.missing .cart-customer-icon { background: var(--cp-warning-200); color: var(--cp-warning-text); }
.cart-customer-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.cart-customer-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-customer-sub { font-size: .78rem; color: var(--cp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-customer-change { font-size: .82rem; font-weight: 600; color: var(--cp-primary); }

.cart-lines {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    border-top: 1px solid var(--cp-border);
}

.cart-empty { text-align: center; padding: 3rem 1.5rem; }

.cart-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--cp-primary-50);
    color: var(--cp-primary);
    font-size: 1.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .75rem;
}

.cart-line { border-bottom: 1px solid var(--cp-border); }
.cart-line.editing { background: var(--cp-primary-50); box-shadow: inset 3px 0 0 var(--cp-primary); }
.cart-line.flash .cart-line-main { animation: line-flash 1.4s ease-out; }

@keyframes line-flash {
    0% { background: var(--cp-warning-100); }
    100% { background: transparent; }
}

.cart-line-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .6rem;
    padding: .7rem 1rem;
    cursor: pointer;
    outline: none;
}

.cart-line-main:hover { background: var(--cp-hover); }
.cart-line-main:focus-visible { box-shadow: inset 0 0 0 2px var(--cp-primary); }
.cart-line-name { font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }

.cart-line-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .45rem;
    font-size: .8rem;
    color: var(--cp-muted);
    margin-top: .15rem;
}

.cart-line-total { font-weight: 700; text-align: right; min-width: 72px; }

.cp-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    border-radius: 6px;
    padding: .05rem .4rem;
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
}

.cp-chip-serial { background: var(--cp-fill); color: var(--cp-text-2); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 500; }
.cp-chip-discount { background: var(--cp-success-50); color: var(--cp-success-text); }
.cp-chip-info { background: var(--cp-primary-50); color: var(--cp-primary-text); }

.cart-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--cp-border);
    border-radius: 999px;
    background: var(--cp-surface);
    height: 32px;
}

.cart-qty .btn { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; color: var(--cp-muted); }
.cart-qty .btn:hover:not(:disabled) { color: var(--cp-primary); background: var(--cp-primary-50); }
.cart-qty-value { min-width: 24px; text-align: center; font-weight: 700; font-size: .9rem; }

/* Item editor dialog */
.line-editor-section { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--cp-border); }

.line-editor-summary {
    margin-top: 1rem;
    background: var(--cp-surface-2);
    border: 1px solid var(--cp-border);
    border-radius: 12px;
    padding: .6rem .9rem;
    font-size: .92rem;
}

.line-editor-summary > div { display: flex; justify-content: space-between; padding: .1rem 0; }
.line-editor-summary > div > span:first-child { color: var(--cp-muted); }
.line-editor-summary > div.text-success > span:first-child { color: inherit; }
.line-editor-total { font-weight: 700; font-size: 1.1rem; border-top: 1px dashed var(--cp-border-strong); margin-top: .3rem; padding-top: .35rem !important; }
.line-editor-total > span:first-child { color: var(--cp-text) !important; }

.cart-tax {
    display: flex;
    align-items: center;
    gap: .25rem;
    font-size: .88rem;
    padding: .25rem 0;
    cursor: pointer;
}

.cart-cost { width: 130px; }

.cart-foot {
    border-top: 1px solid var(--cp-border);
    padding: .6rem 1rem 1rem;
    background: var(--cp-surface);
}

.cart-totals { font-size: .92rem; }
.cart-totals > div { display: flex; justify-content: space-between; padding: .12rem 0; }
.cart-totals > div > span:first-child { color: var(--cp-muted); }
.cart-totals > div.text-success > span:first-child { color: inherit; }

.cart-grand {
    font-size: 1.35rem;
    font-weight: 800;
    padding-top: .45rem !important;
    margin-top: .3rem;
    border-top: 1px dashed var(--cp-border-strong);
}

.cart-grand > span:first-child { color: var(--cp-text) !important; }

.cart-charge {
    margin-top: .75rem;
    height: 60px;
    font-size: 1.15rem;
    font-weight: 700;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(var(--cp-success-rgb), .25);
}

.cart-charge:disabled { box-shadow: none; }

/* An exchange: what's coming back, then what's taken instead */
.cart-sec-title {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    padding: .55rem 1rem .35rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--cp-muted);
    background: var(--cp-surface-2);
    border-bottom: 1px solid var(--cp-border);
}

.cart-sec-title > span { font-weight: 500; text-transform: none; letter-spacing: 0; }
.cart-return .cart-line-main { cursor: default; }
.cart-return .cart-line-main:hover { background: transparent; }
.cart-return .cart-line-total { color: var(--cp-danger-text); }
.cart-exchange-empty { padding: 1rem; font-size: .85rem; color: var(--cp-muted); }
.cart-customer.locked { cursor: default; opacity: 1; }
.cart-customer.locked:hover { border-color: var(--cp-border); }
.cart-customer.locked .cart-customer-change { color: var(--cp-muted); }
.cart-grand.back { color: var(--cp-danger-text); }

/* ---------- Payment ---------- */

.pay-overlay {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: var(--cp-scrim);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fade-in .15s ease-out;
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.pay {
    background: var(--cp-surface);
    border-radius: 22px;
    box-shadow: var(--cp-shadow-lg);
    width: min(1100px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: card-in .2s ease-out;
}

.pay-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1.25rem;
    border-bottom: 1px solid var(--cp-border);
}

.pay-head-title { min-width: 0; flex: 1; }
.pay-due { text-align: right; line-height: 1.1; }
.pay-due span { display: block; font-size: .78rem; color: var(--cp-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.pay-due strong { font-size: 1.9rem; font-weight: 800; }

.pay-body {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    min-height: 0;
    overflow-y: auto;
}

.pay-methods { padding: 1.25rem; border-right: 1px solid var(--cp-border); background: var(--cp-surface-2); }
.pay-tender { padding: 1.25rem; }

.pay-section-title {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: var(--cp-muted);
    margin-bottom: .6rem;
}

.pay-method-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .6rem;
}

.pay-method {
    --pm: var(--cp-primary);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    border: 1.5px solid var(--cp-border);
    background: var(--cp-surface);
    border-radius: 14px;
    padding: .8rem .85rem;
    text-align: left;
    color: inherit;
    min-height: 88px;
    transition: border-color .15s, box-shadow .15s, transform .08s;
}

.pay-method > i { font-size: 1.45rem; color: var(--pm); }
.pay-method:hover:not(:disabled) { border-color: var(--pm); box-shadow: var(--cp-shadow); }
.pay-method:active:not(:disabled) { transform: scale(.98); }
.pay-method:disabled { opacity: 1; }
.pay-method.added { border-color: var(--pm); background: color-mix(in srgb, var(--pm) 8%, var(--cp-surface)); }
.pay-method-name { font-weight: 700; }
.pay-method-note { font-size: .75rem; color: var(--cp-muted); }
.pay-method-check { position: absolute; top: .55rem; right: .6rem; color: var(--pm); }

.pay-quick { display: flex; flex-wrap: wrap; gap: .5rem; }
.pay-quick-btn { min-width: 96px; font-weight: 700; padding: .55rem .8rem; border-radius: 12px; line-height: 1.15; }
.pay-quick-btn .small { font-weight: 500; }

.pay-line {
    border: 1px solid var(--cp-border);
    border-radius: 14px;
    padding: .6rem .7rem;
    margin-bottom: .6rem;
}

.pay-line-main { display: flex; align-items: center; gap: .6rem; }

.pay-line-icon {
    --pm: var(--cp-primary);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--pm) 12%, var(--cp-surface));
    color: var(--pm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pay-line-name { font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-line-amount { width: 160px; flex-shrink: 0; }
.pay-line-amount input { font-size: 1.15rem; font-weight: 700; }
.pay-line-surcharge { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; margin: .4rem 0 0 2.8rem; }

.pay-summary {
    background: var(--cp-surface-2);
    border-radius: 14px;
    padding: .7rem .9rem;
    margin-top: .9rem;
}

.pay-summary > div { display: flex; justify-content: space-between; padding: .12rem 0; }
.pay-remaining { color: var(--cp-warning-text); font-weight: 700; font-size: 1.15rem; border-top: 1px dashed var(--cp-border-strong); margin-top: .35rem; padding-top: .45rem !important; }
.pay-change { color: var(--cp-success-text); font-weight: 800; font-size: 1.35rem; border-top: 1px dashed var(--cp-border-strong); margin-top: .35rem; padding-top: .45rem !important; }
.pay-complete { height: 62px; font-size: 1.15rem; font-weight: 700; border-radius: 14px; }

@media (max-width: 767.98px) {
    .pay-overlay { padding: 0; align-items: stretch; }
    .pay { border-radius: 0; width: 100%; height: 100%; }
    .pay-head { padding: .7rem .9rem; gap: .7rem; }
    .pay-body { grid-template-columns: minmax(0, 1fr); }
    .pay-methods, .pay-tender { padding: 1rem .9rem; }
    .pay-methods { border-right: 0; border-bottom: 1px solid var(--cp-border); }
    .pay-due strong { font-size: 1.45rem; }
    .pay-line-icon { display: none; }
    .pay-line-amount { width: 165px; }
    .pay-line-surcharge { margin-left: 0; }
    /* Keep "Complete sale" in reach while scrolling through the methods. */
    .pay-complete { position: sticky; bottom: 12px; z-index: 2; box-shadow: 0 10px 28px rgba(var(--cp-success-rgb), .35); }
}

/* ---------- Sale complete ---------- */

.done-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: var(--cp-scrim);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: fade-in .15s ease-out;
}

.done-card {
    background: var(--cp-surface);
    border-radius: 24px;
    box-shadow: var(--cp-shadow-lg);
    width: min(470px, 100%);
    padding: 2.2rem 2rem 1.8rem;
    text-align: center;
    animation: pop-in .3s cubic-bezier(.2, 1.3, .5, 1);
}

@keyframes pop-in {
    from { opacity: 0; transform: scale(.92); }
    to { opacity: 1; transform: none; }
}

.done-check {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--cp-success-fill);
    color: #fff;
    font-size: 2.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    box-shadow: 0 0 0 10px rgba(var(--cp-success-rgb), .14);
    animation: pop-in .4s .08s cubic-bezier(.2, 1.4, .5, 1) both;
}

.done-change {
    background: var(--cp-success-50);
    border: 1px solid var(--cp-success-200);
    border-radius: 16px;
    padding: .9rem 1rem;
    margin-bottom: 1rem;
}

.done-change span { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--cp-success-text); }
.done-change strong { font-size: 2.6rem; font-weight: 800; color: var(--cp-success-text); line-height: 1.1; }

.done-payments { text-align: left; font-size: .92rem; }
.done-payments > div { display: flex; justify-content: space-between; padding: .3rem .2rem; border-bottom: 1px solid var(--cp-border); }
.done-payments > div:last-child { border-bottom: 0; }

/* ---------- Activation ---------- */

.cp-activation-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .55rem;
}

@media (max-width: 575.98px) {
    .cp-activation-grid { grid-template-columns: repeat(2, 1fr); }
}

.cp-activation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: .8rem .5rem;
    border: 1.5px solid var(--cp-border);
    background: var(--cp-surface);
    border-radius: 14px;
    font-weight: 600;
    font-size: .9rem;
    color: inherit;
}

.cp-activation i { font-size: 1.4rem; color: var(--cp-primary); }
.cp-activation:hover { border-color: var(--cp-primary); }
.cp-activation.selected { border-color: var(--cp-primary); background: var(--cp-primary-50); color: var(--cp-primary-text); }

/* ---------- Repairs: status pills ---------- */

.rstatus-wrap { position: relative; display: inline-flex; max-width: 100%; }
.rstatus-wrap.block { display: flex; }

.rstatus {
    --rs: var(--cp-status-default);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    max-width: 100%;
    border: 1px solid color-mix(in srgb, var(--rs) 35%, transparent);
    background: color-mix(in srgb, var(--rs) 10%, var(--cp-surface));
    color: color-mix(in srgb, var(--rs) 72%, var(--cp-text));
    font-weight: 600;
    font-size: .85rem;
    line-height: 1.2;
    padding: .32rem .7rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* Dark theme: status colours come from the desktop (often dark ones), so the text leans more on the light text colour. */
[data-bs-theme=dark] .rstatus { color: color-mix(in srgb, var(--rs) 40%, var(--cp-text)); }
.rstatus.sm { font-size: .78rem; padding: .22rem .55rem; }
button.rstatus:hover:not(:disabled) { background: color-mix(in srgb, var(--rs) 18%, var(--cp-surface)); }
button.rstatus:disabled { opacity: .75; }
.rstatus.static { cursor: default; }
.rstatus-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rs); flex-shrink: 0; }
.rstatus-name { overflow: hidden; text-overflow: ellipsis; }
.rstatus-caret { font-size: .7rem; opacity: .7; }

.rstatus-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 41;
    list-style: none;
    margin: 0;
    padding: .3rem;
    min-width: 210px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: 12px;
    box-shadow: var(--cp-shadow-lg);
}

.rstatus-option {
    --rs: var(--cp-status-default);
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    border: 0;
    background: transparent;
    padding: .5rem .6rem;
    border-radius: 8px;
    font-size: .9rem;
    color: var(--cp-text);
}

.rstatus-option:hover { background: var(--cp-fill); }
.rstatus-option.selected { font-weight: 700; }

/* ---------- Repairs: pattern lock ---------- */

.pattern-pad { max-width: 250px; }

.pattern-pad-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    aspect-ratio: 1;
    background: var(--cp-surface-2);
    border: 1px solid var(--cp-border);
    border-radius: 16px;
    user-select: none;
    touch-action: manipulation;
}

.pattern-pad-lines { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--cp-primary); opacity: .6; pointer-events: none; }
.pattern-pad-dot { position: relative; z-index: 1; border: 0; background: transparent; display: grid; place-items: center; padding: 0; }

.pattern-pad-knob {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--cp-subtle);
    background: var(--cp-surface);
    display: grid;
    place-items: center;
    font-size: .8rem;
    font-weight: 700;
    color: #fff;
    transition: transform .1s, background .1s;
}

.pattern-pad-dot:hover .pattern-pad-knob { border-color: var(--cp-primary); }
.pattern-pad-dot:active .pattern-pad-knob { transform: scale(.92); }
.pattern-pad-dot.on .pattern-pad-knob { background: var(--cp-primary-fill); border-color: var(--cp-primary-fill); }
.pattern-pad-dot.first .pattern-pad-knob { box-shadow: 0 0 0 5px rgba(var(--cp-primary-rgb), .22); }
.pattern-pad-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .4rem; }

.pattern-diagram { width: 72px; height: 72px; display: inline-block; vertical-align: middle; color: var(--cp-text); }
.rdev-pattern { width: 54px; height: 54px; margin-left: .35rem; color: var(--cp-primary); }

/* ---------- Repairs: device editor ---------- */

.devedit-body { padding-top: .8rem !important; }

.devedit-steps { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; margin: 0 -.25rem .9rem; padding: 0 .25rem .15rem; }
.devedit-steps::-webkit-scrollbar { display: none; }

.devedit-step {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 1px solid var(--cp-border);
    background: var(--cp-surface);
    border-radius: 999px;
    padding: .3rem .8rem .3rem .35rem;
    font-weight: 600;
    font-size: .88rem;
    color: var(--cp-muted);
    white-space: nowrap;
}

.devedit-step:hover:not(:disabled) { border-color: var(--cp-primary); color: var(--cp-primary-text); }
.devedit-step:disabled { opacity: .5; }
.devedit-step-num { width: 24px; height: 24px; border-radius: 50%; background: var(--cp-fill-2); color: var(--cp-text-2); display: grid; place-items: center; font-size: .78rem; }
.devedit-step.done .devedit-step-num { background: var(--cp-success-fill); color: #fff; }
.devedit-step.active { border-color: var(--cp-primary); color: var(--cp-primary-text); background: var(--cp-primary-50); }
.devedit-step.active .devedit-step-num { background: var(--cp-primary-fill); color: #fff; }

.devedit-pane { min-height: 330px; }
.devedit-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.devedit-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 .15rem; }
.devedit-parts { display: flex; flex-direction: column; gap: .4rem; }
.devedit-part { border: 1px solid var(--cp-border); border-radius: 12px; padding: .45rem .5rem .5rem .75rem; background: var(--cp-surface); }
.devedit-part-top { display: flex; align-items: center; gap: .5rem; }
.devedit-part-top .btn-icon { margin: -.2rem -.1rem -.2rem 0; }
.devedit-part-bottom { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-top: .3rem; }
.devedit-qty { width: 108px; flex-shrink: 0; }
.devedit-qty .form-control { padding-left: 0; padding-right: 0; }
.devedit-part-price { width: 124px; flex-shrink: 0; }
.devedit-part-total { white-space: nowrap; }
.devedit-foot-total { display: flex; align-items: baseline; gap: .5rem; font-size: 1.1rem; min-width: 0; }

.issue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .55rem; }

.issue-card {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 62px;
    text-align: left;
    border: 1.5px solid var(--cp-border);
    background: var(--cp-surface);
    border-radius: 14px;
    padding: .6rem .8rem;
    color: inherit;
}

.issue-card:hover { border-color: var(--cp-primary); }
.issue-card.selected { border-color: var(--cp-primary); background: var(--cp-primary-50); }
.issue-card-check { font-size: 1.2rem; color: var(--cp-subtle); flex-shrink: 0; }
.issue-card.selected .issue-card-check { color: var(--cp-primary); }
.issue-card-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.issue-card-name { font-weight: 600; overflow-wrap: break-word; }
.issue-card-price { font-size: .85rem; font-weight: 700; color: var(--cp-primary-text); white-space: nowrap; }
.issue-card:not(.selected) .issue-card-price { color: var(--cp-muted); }

.dpick .catalog-grid { margin-top: .75rem; }
.dpick-skeleton { height: 150px; }

.ppick-list { display: flex; flex-direction: column; gap: .35rem; margin-top: .6rem; max-height: 46vh; overflow-y: auto; padding-right: .15rem; }

.ppick-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    text-align: left;
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: 12px;
    padding: .55rem .75rem;
    color: inherit;
}

.ppick-item:hover:not(:disabled) { border-color: var(--cp-primary); background: var(--cp-primary-50); }

/* Parts vs. repair price */
.palloc { margin-top: .75rem; }
.palloc-bar { height: 8px; border-radius: 99px; background: var(--cp-fill-2); overflow: hidden; }
.palloc-bar span { display: block; height: 100%; border-radius: 99px; background: var(--cp-primary); transition: width .2s; }
.palloc.balanced .palloc-bar span { background: var(--cp-success); }
.palloc.over .palloc-bar span { background: var(--cp-danger); }
.palloc-text { display: flex; gap: .4rem; align-items: baseline; font-size: .82rem; color: var(--cp-muted); margin-top: .3rem; }
.palloc.balanced .palloc-text { color: var(--cp-success-text); }
.palloc.over .palloc-text { color: var(--cp-danger); }

/* ---------- Repairs: device card ---------- */

.rdev { padding: .9rem 1rem; }
.rdev.overdue { box-shadow: inset 4px 0 0 var(--cp-danger), var(--cp-shadow-sm); }
.rdev-head { display: flex; align-items: flex-start; gap: .75rem; }

.rdev-icon {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--cp-warning-100);
    color: var(--cp-warning-text);
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    overflow: hidden;
}

.rdev-icon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--cp-surface); }
.rdev-title { flex: 1; }
.rdev-name { font-size: 1.02rem; font-weight: 700; margin: 0 0 .25rem; overflow-wrap: anywhere; }
.rdev-issues { display: flex; flex-wrap: wrap; gap: .3rem; }
.rdev-issue { font-size: .75rem; font-weight: 600; background: var(--cp-fill); color: var(--cp-text-2); border-radius: 999px; padding: .12rem .55rem; }
.rdev-head-side { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.rdev-head-actions { display: inline-flex; align-items: center; gap: .3rem; }

.rdev-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem 1rem; margin: .85rem 0 0; }
.rdev-facts dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cp-muted); font-weight: 600; }
.rdev-facts dd { margin: 0; font-size: .9rem; overflow-wrap: anywhere; }

.rdev-notes { margin-top: .75rem; display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; }
.rdev-notes > div { display: flex; gap: .45rem; }
.rdev-notes i { color: var(--cp-muted); margin-top: .1rem; }
.rdev-parts { margin-top: .75rem; }
.rdev-section { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cp-muted); font-weight: 600; margin-bottom: .2rem; }
.rdev-part { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; padding: .12rem 0; }

.rdev-money {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem 1rem;
    margin-top: .8rem;
    padding-top: .65rem;
    border-top: 1px dashed var(--cp-border-strong);
    font-size: .85rem;
    color: var(--cp-muted);
}

.rdev-money strong { font-size: 1.05rem; color: var(--cp-text); }
.rdev-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .65rem; }

@media (max-width: 575.98px) {
    .rdev-head { flex-wrap: wrap; }
    .rdev-head-side { width: 100%; justify-content: space-between; }
}

/* ---------- Repairs: list ---------- */

.rlist-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.rlist-search { flex: 1 1 280px; }
.rlist-days, .rlist-sort { width: auto; }

@media (max-width: 575.98px) {
    .rlist-search { flex-basis: 100%; }
    .rlist-filter { flex: 1 1 100%; }
    .rlist-filter .btn { flex: 1 1 0; }
    .rlist-days, .rlist-sort { flex: 1 1 0; min-width: 0; }
}

.rlist-chips { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .15rem; margin-bottom: .75rem; }
.rlist-chips::-webkit-scrollbar { display: none; }

.rchip {
    --rs: var(--cp-primary);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
    border: 1px solid var(--cp-border);
    background: var(--cp-surface);
    border-radius: 999px;
    padding: .3rem .75rem;
    font-size: .84rem;
    font-weight: 600;
    color: var(--cp-text);
}

.rchip:hover { border-color: var(--rs); }
.rchip.active { background: color-mix(in srgb, var(--rs) 12%, var(--cp-surface)); border-color: var(--rs); }
.rchip-count { font-weight: 700; color: var(--cp-muted); font-size: .78rem; }

.rlist { display: flex; flex-direction: column; gap: .6rem; }
.rrow { padding: .75rem .9rem; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.rrow:hover { border-color: var(--cp-border-strong); box-shadow: var(--cp-shadow); }
.rrow.closed { background: var(--cp-surface-2); }
.rrow-head { display: flex; align-items: center; gap: .75rem; }
.rrow-num { font-weight: 800; font-size: 1.02rem; color: var(--cp-primary-text); text-decoration: none; min-width: 58px; }
.rrow-num:hover { text-decoration: underline; }
.rrow-who { flex: 1; }
.rrow-customer { font-weight: 600; }
.rrow-sub { font-size: .8rem; color: var(--cp-muted); display: flex; gap: .2rem .8rem; flex-wrap: wrap; }
.rrow-money { text-align: right; line-height: 1.3; flex-shrink: 0; }

.rbadge { display: inline-block; font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .08rem .5rem; white-space: nowrap; }
.rbadge.due { background: var(--cp-warning-100); color: var(--cp-warning-text); }
.rbadge.paid { background: var(--cp-success-50); color: var(--cp-success-text); }
.rbadge.done { background: var(--cp-fill); color: var(--cp-text-2); }

.rrow-dev {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.7fr) auto auto;
    grid-template-areas: "main meta status actions";
    align-items: center;
    gap: .45rem .9rem;
    margin-top: .55rem;
    padding-top: .55rem;
    border-top: 1px solid var(--cp-divider);
}

.rrow-dev-main { grid-area: main; display: flex; flex-direction: column; }
.rrow-dev-name { font-weight: 600; font-size: .92rem; }
.rrow-imei { font-size: .78rem; color: var(--cp-muted); }
.rrow-dev-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: .15rem .9rem; font-size: .8rem; color: var(--cp-muted); }
.rrow-dev-meta i { margin-right: .15rem; }
.rrow-dev-status { grid-area: status; justify-self: end; min-width: 0; }
.rrow-dev-actions { grid-area: actions; display: flex; gap: .1rem; }

@media (max-width: 767.98px) {
    .rrow-dev { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main status" "meta actions"; }
    .rrow-num { min-width: 0; }
    .rrow-actions { display: none; }
}

/* ---------- Repairs: new repair ---------- */

.rnew { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1rem; align-items: start; }
.rnew-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.rnew-side { position: sticky; top: 0; min-width: 0; }

@media (max-width: 991.98px) {
    .rnew { grid-template-columns: minmax(0, 1fr); }
    .rnew-side { position: static; }
}

.rnew-card { padding: 1rem 1.1rem; }
.rnew-card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.rnew-card-title { font-size: 1rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: .55rem; }
.rnew-step { width: 26px; height: 26px; border-radius: 50%; background: var(--cp-primary-fill); color: #fff; display: grid; place-items: center; font-size: .8rem; flex-shrink: 0; }
.rnew-customer { display: flex; align-items: center; gap: .75rem; min-width: 0; }

.rnew-pick,
.rnew-add {
    display: flex;
    align-items: center;
    gap: .9rem;
    width: 100%;
    text-align: left;
    border: 2px dashed var(--cp-border-strong);
    background: var(--cp-surface-2);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    color: inherit;
}

.rnew-pick > i, .rnew-add > i { font-size: 1.6rem; color: var(--cp-primary); }
.rnew-pick:hover:not(:disabled), .rnew-add:hover:not(:disabled) { border-color: var(--cp-primary); background: var(--cp-primary-50); }
.rnew-pick:disabled, .rnew-add:disabled { opacity: .6; }
.rnew-add.first { padding: 1.6rem 1.2rem; background: var(--cp-surface); }
.rnew-devices { display: flex; flex-direction: column; gap: .75rem; }
.rnew-summary { padding: 1rem 1.1rem 1.1rem; }
.rnew-deposit { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--cp-border); }
.rnew-print { margin: 1rem 0; padding-top: .9rem; border-top: 1px solid var(--cp-border); }
.rnew-save { height: 56px; font-weight: 700; border-radius: 14px; }
.rnew-locked .rnew-main { opacity: .8; }

.rpending .rpending-confirm { margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--cp-border-strong); }

/* Repair saved */
.rdone { width: min(500px, 100%); }

.rdone-track {
    display: flex;
    gap: .9rem;
    align-items: center;
    background: var(--cp-surface-2);
    border: 1px solid var(--cp-border);
    border-radius: 14px;
    padding: .7rem;
    margin-bottom: .9rem;
}

.rdone-qr { width: 96px; flex-shrink: 0; }
.rdone-prints { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }

/* ---------- Repairs: ticket ---------- */

.rticket { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; }
.rticket-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.rticket-side { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 0; min-width: 0; }

@media (max-width: 991.98px) {
    /* One column: the money first, then the devices, then the rest. */
    .rticket { display: flex; flex-direction: column; align-items: stretch; }
    .rticket-main, .rticket-side { display: contents; }
    .rmoney { order: -1; }
}

.rticket-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .5rem; }
.rticket-section-title { font-size: 1.02rem; font-weight: 700; margin: 0; }
.rticket-card { padding: 1rem 1.1rem; }
.rticket-card-title { font-size: .95rem; font-weight: 700; margin: 0 0 .75rem; display: flex; align-items: center; gap: .5rem; }
.rticket-card-title i { color: var(--cp-primary); }
.rticket-prints { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .8rem; }

.rmoney-due { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-radius: 12px; padding: .6rem .8rem; margin-top: .75rem; }
.rmoney-due span { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.rmoney-due strong { font-size: 1.5rem; font-weight: 800; }
.rmoney-due.owing { background: var(--cp-warning-100); color: var(--cp-warning-text); }
.rmoney-due.settled { background: var(--cp-success-50); color: var(--cp-success-text); }
.rmoney-due.over { background: var(--cp-danger-50); color: var(--cp-danger-text); }
.rmoney-actions { display: flex; flex-direction: column; gap: .5rem; margin-top: .85rem; }

.rfacts { margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.rfacts > div { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.rfacts dt { color: var(--cp-muted); font-weight: 500; white-space: nowrap; }
.rfacts dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }

.rpay-list { list-style: none; margin: 0; padding: 0; }
.rpay-list li { padding: .6rem 0; border-bottom: 1px solid var(--cp-divider); }
.rpay-list li:first-child { padding-top: 0; }
.rpay-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.rpay-main { display: flex; justify-content: space-between; gap: 1rem; }
.rpay-amount { font-weight: 700; white-space: nowrap; }
.rpay-list li.refund .rpay-amount { color: var(--cp-danger); }
.rpay-methods { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .8rem; color: var(--cp-muted); margin-top: .2rem; }

.rtrack-body { display: flex; gap: .9rem; align-items: center; }
.rtrack-qr { width: 104px; flex-shrink: 0; }
.rtrack-qr svg, .rdone-qr svg { width: 100%; height: auto; display: block; border-radius: 8px; }

.rclosed { display: flex; gap: .75rem; align-items: center; border-radius: 14px; padding: .8rem 1rem; margin-bottom: 1rem; }
.rclosed > i { font-size: 1.5rem; }
.rclosed.delivered { background: var(--cp-success-50); color: var(--cp-success-text); border: 1px solid var(--cp-success-200); }
.rclosed.refunded { background: var(--cp-orange-50); color: var(--cp-orange-text); border: 1px solid var(--cp-orange-200); }

.ramount-due {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    background: var(--cp-surface-2);
    border: 1px solid var(--cp-border);
    border-radius: 12px;
    padding: .6rem .8rem;
    margin-bottom: 1rem;
}

.ramount-due span { color: var(--cp-muted); font-size: .85rem; }
.ramount-due strong { font-size: 1.35rem; }

.refund-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.25rem; }

@media (max-width: 767.98px) {
    .refund-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Bill payments: form ---------- */

.bp-editor { display: flex; flex-direction: column; }
.bp-section + .bp-section { border-top: 1px solid var(--cp-border); margin-top: 1.25rem; padding-top: 1.15rem; }
.bp-section-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .8rem; min-width: 0; }
.bp-section-title { font-size: 1rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: .55rem; flex-shrink: 0; }
.bp-step { width: 26px; height: 26px; border-radius: 50%; background: var(--cp-primary-fill); color: #fff; display: grid; place-items: center; font-size: .8rem; flex-shrink: 0; }

.bp-tag { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; font-weight: 700; border-radius: 999px; padding: .15rem .6rem; white-space: nowrap; }
.bp-tag.known { background: var(--cp-success-50); color: var(--cp-success-text); }
.bp-tag.new { background: var(--cp-primary-50); color: var(--cp-primary-text); }

.bp-readonly {
    display: flex;
    align-items: center;
    min-height: calc(1.5em + 1rem + 2px);
    background: var(--cp-surface-2);
    border: 1px solid var(--cp-border);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.bp-note {
    white-space: pre-line;
    overflow-wrap: anywhere;
    background: var(--cp-surface-2);
    border: 1px solid var(--cp-border);
    border-radius: 10px;
    padding: .5rem .7rem;
}

.bp-history { margin-top: 1rem; border: 1px solid var(--cp-border); border-radius: 12px; overflow: hidden; }
.bp-history-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .5rem .8rem; background: var(--cp-surface-2); font-size: .85rem; font-weight: 600; }
.bp-history-list { list-style: none; margin: 0; padding: 0; }

.bp-history-list li {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr) minmax(0, 9rem) auto 5.6rem;
    align-items: center;
    gap: .35rem .75rem;
    padding: .45rem .8rem;
    border-top: 1px solid var(--cp-divider);
    font-size: .86rem;
}

.bp-history-list li.current { background: var(--cp-primary-50); }
.bp-history-when { color: var(--cp-muted); white-space: nowrap; }
.bp-history-carrier { font-weight: 600; }
.bp-history-id { color: var(--cp-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; }
.bp-history-amount { font-weight: 700; text-align: right; white-space: nowrap; }
.bp-history-action { justify-self: end; white-space: nowrap; }

@media (max-width: 575.98px) {
    .bp-history-list li { grid-template-columns: minmax(0, 1fr) auto auto; }
    .bp-history-when { grid-column: 1 / -1; font-size: .78rem; }
    .bp-history-id { display: none; }
}

.bp-prefill { display: flex; gap: .45rem; align-items: flex-start; background: var(--cp-primary-50); color: var(--cp-primary-text); border-radius: 10px; padding: .5rem .75rem; margin-bottom: .85rem; }

.bp-taxes { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; margin-top: 1rem; padding: .55rem .8rem; background: var(--cp-surface-2); border-radius: 10px; }
.bp-taxes-label { font-weight: 600; font-size: .85rem; color: var(--cp-muted); }

/* Carriers */
.bp-carriers { display: flex; flex-direction: column; gap: .6rem; }
.bp-carrier-filter { max-width: 320px; }
.bp-carrier-group { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--cp-muted); margin-top: .25rem; }
.bp-carrier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }

.bp-carrier {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .1rem;
    min-height: 58px;
    padding: .6rem .8rem;
    text-align: left;
    border: 1.5px solid var(--cp-border);
    background: var(--cp-surface);
    border-radius: 12px;
    color: inherit;
    font-weight: 600;
    transition: border-color .12s, background-color .12s;
}

.bp-carrier:hover:not(:disabled) { border-color: var(--cp-primary); }
.bp-carrier:disabled { opacity: .6; }
.bp-carrier.selected { border-color: var(--cp-primary); background: var(--cp-primary-50); box-shadow: 0 0 0 3px rgba(var(--cp-primary-rgb), .12); opacity: 1; }
.bp-carrier-name { padding-right: 1.3rem; line-height: 1.25; overflow-wrap: anywhere; }
.bp-carrier-fee { font-size: .76rem; font-weight: 500; color: var(--cp-muted); }
.bp-carrier-check { position: absolute; top: .55rem; right: .6rem; color: var(--cp-primary); }

@media (max-width: 575.98px) {
    .bp-carrier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Totals */
.bp-totals { margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.bp-totals > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .92rem; }
.bp-totals dt { font-weight: 500; color: var(--cp-muted); }
.bp-totals dd { margin: 0; font-weight: 600; white-space: nowrap; }
.bp-totals-grand { border-top: 1px solid var(--cp-border); padding-top: .55rem; margin-top: .2rem; }
.bp-totals .bp-totals-grand dt { color: var(--cp-text); font-weight: 700; }
.bp-totals .bp-totals-grand dd { font-size: 1.6rem; font-weight: 800; }
.bp-totals.compact .bp-totals-grand dd { font-size: 1.2rem; }

/* Payment ID */
.bp-payid { max-width: 420px; }
.bp-payid.small-size { width: 220px; max-width: 100%; }

/* New / change page */
.bpnew { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; }
.bpnew-main { padding: 1.1rem 1.2rem 1.25rem; min-width: 0; }
.bpnew-side { position: sticky; top: 0; min-width: 0; }
.bpnew-summary { padding: 1rem 1.1rem 1.1rem; }
.bpnew-who { padding: .55rem .75rem; background: var(--cp-surface-2); border-radius: 10px; margin-bottom: .85rem; min-width: 0; }
.bpnew-locked .bpnew-main { opacity: .8; }

@media (max-width: 991.98px) {
    .bpnew { grid-template-columns: minmax(0, 1fr); }
    .bpnew-side { position: static; }
    .bpnew-page .page-inner { padding-bottom: 96px; }
}

.bpnew-mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom));
    background: rgba(var(--cp-surface-rgb), .96);
    border-top: 1px solid var(--cp-border);
    box-shadow: var(--cp-shadow-up);
}

.bpnew-mobile-total { font-size: 1.35rem; font-weight: 800; line-height: 1.15; }

@media (max-width: 575.98px) {
    .bpnew-main { padding: .9rem .85rem 1rem; }
}

/* Saved */
.bp-done { width: min(500px, 100%); }
.bp-done-note { display: flex; gap: .45rem; align-items: center; justify-content: center; font-size: .88rem; color: var(--cp-muted); margin-bottom: .85rem; }
.bp-done-note.ok { color: var(--cp-success-text); }
.bp-done-note.warn { color: var(--cp-warning-text); }
.bp-done-payid { text-align: left; background: var(--cp-surface-2); border: 1px solid var(--cp-border); border-radius: 14px; padding: .75rem .9rem; }
.bp-done-payid .bp-payid { max-width: none; }

/* On the register */
.bp-dialog-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; width: 100%; }
.bp-dialog-total { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.bp-dialog-total strong { font-size: 1.35rem; font-weight: 800; }

@media (max-width: 575.98px) {
    .bp-dialog-total { flex: 1 1 100%; }
    .bp-dialog-foot .btn-primary { flex: 1 1 auto; }
}

.cp-chip-bill { background: var(--cp-pink-100); color: var(--cp-pink-text); }
.tile-price-note { font-weight: 600; font-size: .78rem; color: var(--type-fg, var(--cp-muted)); }

.done-note {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    text-align: left;
    background: var(--cp-primary-50);
    color: var(--cp-primary-text);
    border-radius: 14px;
    padding: .7rem .9rem;
    margin-bottom: 1rem;
    font-size: .88rem;
}

.done-note > i { font-size: 1.1rem; line-height: 1.2; }

/* ---------- Bill payments: list, detail, reminders ---------- */

.bp-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--cp-border); margin-bottom: 1rem; overflow-x: auto; scrollbar-width: none; }
.bp-tabs::-webkit-scrollbar { display: none; }

.bp-tab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .9rem;
    font-weight: 600;
    color: var(--cp-muted);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.bp-tab:hover { color: var(--cp-text); }
.bp-tab.active { color: var(--cp-primary-text); border-bottom-color: var(--cp-primary); }
.bp-tab-count { background: var(--cp-warning-100); color: var(--cp-warning-text); border-radius: 999px; font-size: .72rem; font-weight: 800; padding: .05rem .45rem; }

.bp-count { display: inline-block; min-width: 1.35rem; margin-left: .25rem; padding: 0 .35rem; border-radius: 999px; font-size: .72rem; font-weight: 700; background: rgba(var(--cp-text-rgb), .08); }
.btn-primary .bp-count { background: rgba(255, 255, 255, .25); }

.bp-range { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin: -.25rem 0 .75rem; }
.bp-range input { width: auto; }

.bprow-split { font-size: .78rem; color: var(--cp-muted); white-space: nowrap; }

.bprow-bill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin-top: .55rem;
    padding-top: .55rem;
    border-top: 1px solid var(--cp-divider);
}

.bprow-carrier { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .6rem; font-size: .9rem; min-width: 0; }
.bprow-payid { display: flex; align-items: center; gap: .5rem; min-width: 0; max-width: 100%; cursor: default; }

@media (max-width: 575.98px) {
    .bprow-payid { flex: 1 1 100%; }
    .bprow-payid .bp-payid.small-size { flex: 1; width: auto; }
}

.bp-sums { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.5rem; padding: .7rem 1rem; margin-top: 1rem; font-size: .9rem; }
.bp-sums > div { display: flex; gap: .4rem; align-items: baseline; }
.bp-sums span { color: var(--cp-muted); }
.bp-sums-total { margin-left: auto; }
.bp-sums-total strong { font-size: 1.15rem; }

/* Detail */
.bpview { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; }
.bpview-main, .bpview-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.bpview-side { position: sticky; top: 0; }

@media (max-width: 991.98px) {
    .bpview { grid-template-columns: minmax(0, 1fr); }
    .bpview-side { position: static; }
}

.bpview-status.pending { border-color: var(--cp-warning-200); background: var(--cp-warning-50); }
.bpview-status.done { border-color: var(--cp-success-200); background: var(--cp-success-50); }
.bpview-status-icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 1.35rem; flex-shrink: 0; }
.bpview-status.pending .bpview-status-icon { background: var(--cp-warning-100); color: var(--cp-warning-text); }
.bpview-status.done .bpview-status-icon { background: var(--cp-success-100); color: var(--cp-success-text); }
.rfacts .bpview-total { border-top: 1px solid var(--cp-border); padding-top: .45rem; }
.rfacts .bpview-total dt, .rfacts .bpview-total dd { font-weight: 800; color: var(--cp-text); font-size: 1.05rem; }

/* Reminders */
.bprem { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.bprem-message { position: sticky; top: 0; }

@media (max-width: 991.98px) {
    .bprem { grid-template-columns: minmax(0, 1fr); }
    .bprem-message { position: static; }
}

.bprem-price { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: .85rem; padding: .55rem .75rem; background: var(--cp-surface-2); border-radius: 10px; font-size: .88rem; }
.bprem-price strong { font-size: 1.1rem; }
.bprem-rows { list-style: none; margin: 0; padding: 0; }
.bprem-rows li + li { border-top: 1px solid var(--cp-divider); }
.bprem-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .25rem; margin: 0; cursor: pointer; }
.bprem-row .form-check-input { margin: 0; flex-shrink: 0; width: 1.2em; height: 1.2em; }
.bprem-rows li.disabled .bprem-row { cursor: default; opacity: .7; }
.bprem-who { flex: 1; display: flex; flex-direction: column; }
.bprem-due { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }

/* ---------- Layaways ---------- */

/* Items (new layaway, and a saved one): the register's cart lines in a bordered list. */
.llines { border: 1px solid var(--cp-border); border-radius: 12px; overflow: hidden; background: var(--cp-surface); }
.llines .cart-line:last-child { border-bottom: 0; }
.lline-static .cart-line-main { cursor: default; }
.lline-static .cart-line-main:hover { background: transparent; }
.lchip-noserial { background: var(--cp-warning-100); color: var(--cp-warning-text); }

/* Adding items: the register's search box with a Browse button; the catalog opens in a dialog. */
.ladd-bar { display: flex; gap: .5rem; align-items: flex-start; }
.ladd-search { flex: 1; min-width: 0; }
.ladd-browse { height: 56px; border-radius: 14px; flex-shrink: 0; }
.ladd-catalog { height: min(68vh, 640px); display: flex; flex-direction: column; min-height: 0; }

.lkbd { margin-left: .5rem; font-size: .7rem; padding: .1rem .35rem; border-radius: 4px; background: rgba(255, 255, 255, .22); color: inherit; vertical-align: middle; }

/* Saved */
.ldone { width: min(480px, 100%); }

/* Layaway page */
.lediting { border-color: var(--cp-primary); box-shadow: 0 0 0 3px rgba(var(--cp-primary-rgb), .12); }
.ledit-foot { margin-top: .9rem; padding-top: .8rem; border-top: 1px dashed var(--cp-border-strong); }
.ledit-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .6rem; }
.ledit-total > span:first-child { color: var(--cp-muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.ledit-total strong { font-size: 1.25rem; font-weight: 800; }
.lnote { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--cp-divider); }
.lnote-label { color: var(--cp-muted); font-size: .9rem; font-weight: 500; }
.lnote-text { white-space: pre-line; overflow-wrap: anywhere; }
.lrow-note { max-width: 260px; }

/* ---------- Software settings ---------- */

/* Menu on the left (desktop SOFTWARE SETTINGS), the section on the right. */
.set-shell { display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: 1.25rem; align-items: start; max-width: 1320px; margin: 0 auto; padding: 1.25rem 1.25rem 2rem; }
.set-nav { position: sticky; top: 1.25rem; display: flex; flex-direction: column; gap: .15rem; background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: var(--cp-radius); padding: .6rem; box-shadow: var(--cp-shadow-sm); }
.set-nav-title { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-primary-text); padding: .35rem .6rem .45rem; }
.set-nav-item { display: flex; align-items: center; gap: .6rem; padding: .55rem .65rem; border-radius: 10px; color: var(--cp-text); text-decoration: none; font-weight: 500; white-space: nowrap; }
.set-nav-item > i { color: var(--cp-muted); font-size: 1.05rem; }
.set-nav-item:hover { background: var(--cp-surface-2); color: var(--cp-text); }
.set-nav-item.active { background: var(--cp-primary-50); color: var(--cp-primary-text); font-weight: 600; }
.set-nav-item.active > i { color: var(--cp-primary); }
.set-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.set-nav-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cp-warning); flex-shrink: 0; }
.set-main { min-width: 0; }
.set-inner { max-width: 1040px; }

@media (max-width: 991.98px) {
    .set-shell { grid-template-columns: minmax(0, 1fr); gap: .75rem; padding: .75rem .75rem 1.5rem; }
    .set-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; padding: .4rem; }
    .set-nav::-webkit-scrollbar { display: none; }
    .set-nav-title { display: none; }
    .set-nav-item { padding: .45rem .7rem; }
}

.set-head { margin-bottom: 1rem; }
.set-title { font-size: 1.25rem; font-weight: 700; margin: 0; }
.set-lead { color: var(--cp-muted); margin: .2rem 0 0; font-size: .92rem; }

.set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.set-grid-aside { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
@media (max-width: 1199.98px) {
    .set-grid, .set-grid-aside { grid-template-columns: minmax(0, 1fr); }
}

.set-card { padding: 1.1rem 1.2rem; }
.set-card + .set-card { margin-top: 1rem; }
.set-grid > .set-card + .set-card { margin-top: 0; }
.set-card-title { font-size: .98rem; font-weight: 700; margin: 0 0 .75rem; display: flex; align-items: center; gap: .5rem; }
.set-card-title i { color: var(--cp-primary); }
.set-card-lead { color: var(--cp-muted); font-size: .88rem; margin: -.4rem 0 .8rem; }
.set-narrow { max-width: 640px; }

.set-field { margin-bottom: .9rem; }
.set-field:last-child { margin-bottom: 0; }
.set-indent { margin: .45rem 0 .8rem 2.9em; }
.set-input-short { max-width: 160px; }
.set-input-medium { max-width: 260px; }
.set-help { color: var(--cp-muted); font-size: .82rem; margin-top: .25rem; }
.set-tag { display: inline-block; margin-left: .35rem; padding: 0 .4rem; border-radius: 6px; background: var(--cp-fill); color: var(--cp-muted); font-size: .68rem; font-weight: 700; letter-spacing: .02em; vertical-align: middle; text-transform: uppercase; }

.set-switch { padding: .55rem 0; border-bottom: 1px solid var(--cp-divider); }
.set-switch:last-of-type { border-bottom: 0; }
.set-switch .form-check { display: flex; align-items: flex-start; gap: .6rem; padding-left: 0; }
.set-switch .form-check-input { margin: .15rem 0 0; flex-shrink: 0; float: none; width: 2.3em; height: 1.25em; }
.set-switch .form-check-label { font-weight: 500; }
.set-switch .set-help { margin-left: 2.9em; }

/* Tabs inside a section (policies; employees / templates) */
.set-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--cp-border); overflow-x: auto; scrollbar-width: none; }
.set-tabs::-webkit-scrollbar { display: none; }
.set-tab { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 600; color: var(--cp-muted); white-space: nowrap; }
.set-tab:hover { color: var(--cp-text); }
.set-tab.active { color: var(--cp-primary-text); border-bottom-color: var(--cp-primary); }
.set-policy { font-size: .92rem; }

/* Logo and the top of the receipt */
.set-logo { display: flex; align-items: center; justify-content: center; height: 110px; border: 1px dashed var(--cp-border-strong); border-radius: 12px; background: var(--cp-surface-2); margin-bottom: .5rem; overflow: hidden; }
.set-logo img { max-width: 90%; max-height: 90px; object-fit: contain; }
.set-logo.empty { color: var(--cp-muted); text-align: center; font-size: .85rem; }
.set-logo.empty i { font-size: 1.6rem; }
.set-receipt-preview { background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: 10px; padding: .8rem .5rem; box-shadow: var(--cp-shadow-sm); overflow: hidden; }
.set-receipt-preview .receipt { --receipt-width: 100%; max-width: 72mm; }

/* Links to the notification windows */
.set-link-list { display: flex; flex-direction: column; gap: .5rem; }
.set-link { display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left; padding: .7rem .8rem; border: 1px solid var(--cp-border); border-radius: 12px; background: var(--cp-surface); color: var(--cp-text); }
.set-link:hover { background: var(--cp-surface-2); border-color: var(--cp-border-strong); }
.set-link > i:first-child { font-size: 1.2rem; color: var(--cp-primary); }
.set-link > i:last-child { color: var(--cp-muted); }
.set-link > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.set-link small { color: var(--cp-muted); }

/* Unsaved changes */
.set-savebar { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1.25rem; background: var(--cp-surface); border-top: 1px solid var(--cp-border); box-shadow: var(--cp-shadow-up); }
.set-savebar-text { min-width: 0; font-weight: 500; }
.set-savebar-actions { display: flex; gap: .5rem; flex-shrink: 0; }
@media (max-width: 575.98px) {
    .set-savebar { flex-direction: column; align-items: stretch; padding: .6rem .75rem; gap: .5rem; }
    .set-savebar-actions > .btn { flex: 1; }
}

/* Lists (employees, templates, taxes, payment types, email recipients) */
.set-toolbar { display: flex; justify-content: flex-end; gap: .5rem; margin-bottom: .75rem; }
.set-list { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.set-list.card-surface { padding: 0; }
.set-row { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; border-bottom: 1px solid var(--cp-divider); }
.set-row:last-child { border-bottom: 0; }
.set-row.editing { background: var(--cp-primary-50); }
.set-row-main { flex: 1; min-width: 0; }
.set-row-actions { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }
.set-row-icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--cp-primary-50); color: var(--cp-primary); flex-shrink: 0; }
.set-pay-cash { background: var(--cp-success-50); color: var(--cp-success-text); }
.set-pay-credit, .set-pay-debit { background: var(--cp-primary-50); color: var(--cp-primary-text); }
.set-pay-account, .set-pay-store_credit { background: var(--cp-violet-50); color: var(--cp-violet-text); }
.set-pay-trade_in { background: var(--cp-orange-50); color: var(--cp-orange-text); }
.set-pay-custom { background: var(--cp-warning-100); color: var(--cp-warning-text); }
.set-badge { display: inline-block; margin-left: .35rem; padding: .05rem .45rem; border-radius: 999px; background: var(--cp-fill); color: var(--cp-text-2); font-size: .72rem; font-weight: 600; vertical-align: middle; white-space: nowrap; }
.set-badge.on { background: var(--cp-success-50); color: var(--cp-success-text); }
.set-badge.off { background: var(--cp-danger-50); color: var(--cp-danger-text); }

/* Dialog pieces */
.set-subcard { border: 1px solid var(--cp-border); border-radius: 12px; padding: .8rem .9rem; height: 100%; }
.set-subcard-title { font-weight: 700; font-size: .9rem; margin-bottom: .6rem; }
.set-alert-time { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .35rem 0; }
.set-alert-time input[type=time] { max-width: 130px; }
.set-light { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; margin-right: .3rem; vertical-align: -1px; }
.set-light.yellow { background: var(--cp-warning); }
.set-light.green { background: var(--cp-success); }
.set-subgroup { margin-top: .6rem; padding: .6rem .8rem; border-radius: 12px; background: var(--cp-surface-2); }
.set-subgroup-title { font-weight: 700; font-size: .85rem; color: var(--cp-muted); }
.set-subgroup .set-switch { border-bottom-color: var(--cp-border); }

/* Employee */
.set-user-form { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 1.25rem; }
.set-user-picture { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; }
@media (max-width: 575.98px) {
    .set-user-form { grid-template-columns: minmax(0, 1fr); }
}

/* Rights template */
.set-rights { border: 1px solid var(--cp-border); border-radius: 12px; max-height: min(56vh, 560px); overflow-y: auto; }
.set-rights-head, .set-rights-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 64px); align-items: center; gap: .25rem; padding: .45rem .8rem; }
.set-rights-head { position: sticky; top: 0; z-index: 1; background: var(--cp-surface-2); border-bottom: 1px solid var(--cp-border); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--cp-muted); }
.set-rights-head span:not(:first-child), .set-rights-row span:not(:first-child) { text-align: center; }
.set-rights-group { display: flex; justify-content: space-between; align-items: center; padding: .5rem .8rem .3rem; font-weight: 700; font-size: .85rem; color: var(--cp-primary-text); border-top: 1px solid var(--cp-divider); }
.set-rights-group-actions { font-weight: 500; display: inline-flex; gap: .35rem; align-items: center; }
.set-rights-row { border-top: 1px solid var(--cp-divider); }
.set-rights-row.off .set-rights-name { color: var(--cp-muted); }
.set-rights-row .form-check-input { margin: 0; }
@media (max-width: 575.98px) {
    .set-rights-head, .set-rights-row { grid-template-columns: minmax(0, 1fr) repeat(4, 40px); padding: .45rem .5rem; }
    .set-rights-head { font-size: .62rem; }
}

/* Printers */
.set-helper { border-left: 4px solid var(--cp-warning); }
.set-helper.ok { border-left-color: var(--cp-success); }
.set-helper-head { display: flex; align-items: center; gap: .8rem; }
.set-helper-icon { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--cp-warning-50); color: var(--cp-warning); font-size: 1.3rem; flex-shrink: 0; }
.set-helper.ok .set-helper-icon { background: var(--cp-success-50); color: var(--cp-success-text); }
.set-helper-error { margin-top: .7rem; padding: .5rem .7rem; border-radius: 10px; background: var(--cp-warning-50); color: var(--cp-warning-text); }
.set-helper-note { margin-top: .7rem; padding: .5rem .7rem; border-radius: 10px; background: var(--cp-primary-50); color: var(--cp-primary-text); }
.set-helper-allow { margin-top: .8rem; padding: .7rem .8rem; border-radius: 12px; background: var(--cp-surface-2); border: 1px solid var(--cp-border); font-size: .9rem; }
.set-downloads { display: flex; flex-wrap: wrap; gap: .5rem; margin: .45rem 0 .2rem; }
.set-steps { margin: .8rem 0 0; padding-left: 1.2rem; font-size: .9rem; }
.set-steps li + li { margin-top: .3rem; }
.set-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.set-choice-item { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .8rem; border: 1px solid var(--cp-border-strong); border-radius: 12px; cursor: pointer; margin: 0; }
.set-choice-item.active { border-color: var(--cp-primary); background: var(--cp-primary-50); }
.set-choice-item .form-check-input { margin-top: .2rem; flex-shrink: 0; }
.set-choice-item > span { display: flex; flex-direction: column; }
.set-choice-item small { color: var(--cp-muted); }
@media (max-width: 767.98px) {
    .set-choice { grid-template-columns: minmax(0, 1fr); }
}