/* ============================================ */
/* Design System — CSS Custom Properties        */
/* ============================================ */

/* --- Type Scale --- */
:root {
    --font-xs: 0.75rem;    /* 12px */
    --font-sm: 0.8125rem;  /* 13px */
    --font-base: 0.875rem; /* 14px */
    --font-md: 1rem;       /* 16px */
    --font-lg: 1.125rem;   /* 18px */
    --font-xl: 1.25rem;    /* 20px */
    --font-2xl: 1.5rem;    /* 24px */
    --font-3xl: 2rem;      /* 32px */
}

/* --- Spacing Scale (4px base) --- */
:root {
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.5rem;    /* 24px */
    --space-6: 2rem;      /* 32px */
    --space-8: 3rem;      /* 48px */
}

/* --- Layout mode: compact (phones AND tablets) vs wide (desktop) ---
   The app's layout switches are NOT width-only. A phone-sized window, or ANY
   touch-first device whatever its width — an Android tablet, an iPad, the native
   app on either — gets the compact (mobile) layout: bottom tabs, bottom sheets,
   the catalog's department tabs. Only a wide window driven by a mouse/trackpad
   gets the desktop layout (side rail, centered dialogs, the catalog side nav).
   Width alone put tablets in between: 768–991px got a half-desktop catalog (a
   wall of category chips above the header, no account/filter buttons) and
   ≥992px the desktop rail.

   Every structural breakpoint therefore pairs with the primary pointer:
     compact:  @media (max-width: 767.98px), (hover: none)
     wide:     @media (min-width: 768px) and (hover: hover)   (also 600/640/992px)
   (hover: none) is the primary input of phones and tablets; laptops — touch
   screens included — report hover: hover. The two are exact complements, so a
   device always gets exactly one of them. Size-only refinements (more grid
   columns, ≤576px tweaks) stay width-based on purpose: a tablet has room for them.

   Bootstrap's d-md-* utilities are width-only — use these instead in v4 markup. */
@media (max-width: 767.98px), (hover: none) {
    .chapo-wide-only { display: none !important; }
}
@media (min-width: 768px) and (hover: hover) {
    .chapo-compact-only { display: none !important; }
}

/* --- Color System — Light Theme (default) --- */
:root,
[data-bs-theme="light"] {
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-subtle: rgba(37, 99, 235, 0.1);
    --color-primary-shadow: rgba(37, 99, 235, 0.25);

    --color-success: #16a34a;
    --color-success-subtle: rgba(22, 163, 74, 0.1);
    --color-warning: #d97706;
    --color-warning-subtle: rgba(217, 119, 6, 0.12);
    --color-danger: #dc2626;
    --color-danger-subtle: rgba(220, 38, 38, 0.1);
    --color-info: #0891b2;

    --color-surface: #ffffff;
    --color-surface-elevated: #ffffff;
    --color-surface-muted: #f8fafc;
    --color-surface-overlay: rgba(0, 0, 0, 0.5);

    --color-text-primary: #1e293b;
    --color-text-secondary: #64748b;
    --color-text-muted: #94a3b8;
    --color-text-inverse: #ffffff;

    --color-border: #e2e8f0;
    --color-border-strong: #cbd5e1;

    --color-link: #2563eb;
    --color-link-hover: #1d4ed8;

    /* Component-specific */
    --color-card-bg: #ffffff;
    --color-card-border: #e2e8f0;
    --color-input-bg: #ffffff;
    --color-input-border: #d1d5db;
    --color-modal-bg: #ffffff;

    /* Sidebar */
    --color-sidebar-bg: linear-gradient(180deg, #00884B 0%, #005c33 100%);
    --color-sidebar-text: rgba(255, 255, 255, 0.8);
    --color-sidebar-text-active: #ffffff;
    --color-sidebar-hover-bg: rgba(255, 255, 255, 0.15);
    --color-sidebar-active-bg: rgba(255, 255, 255, 0.2);

    /* Refresh CTA */
    --cta-bg: linear-gradient(135deg, #eff6ff 0%, #f8faff 100%);
    --cta-border: rgba(37, 99, 235, 0.18);
    --cta-shadow: rgba(37, 99, 235, 0.14);
    --cta-btn-bg: linear-gradient(135deg, #2563eb 0%, #6d28d9 50%, #1d4ed8 100%);
    --cta-btn-shadow: rgba(37, 99, 235, 0.4);
    --cta-btn-glow: rgba(37, 99, 235, 0.2);
    --cta-warning-bg: rgba(217, 119, 6, 0.12);
    --cta-warning-text: #92400e;

    /* Skeleton loaders */
    --skeleton-bg: linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.10));
    --skeleton-shimmer: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
    --loading-overlay-bg: rgba(255, 255, 255, 0.85);
    --spinner-border-color: rgba(0, 0, 0, 0.08);
    --spinner-active-color: #2563eb;
}

/* --- Color System — Dark Theme --- */
[data-bs-theme="dark"] {
    --color-primary: #60a5fa;
    --color-primary-hover: #93bbfd;
    --color-primary-subtle: rgba(96, 165, 250, 0.15);
    --color-primary-shadow: rgba(96, 165, 250, 0.25);

    --color-success: #4ade80;
    --color-success-subtle: rgba(74, 222, 128, 0.15);
    --color-warning: #fbbf24;
    --color-warning-subtle: rgba(251, 191, 36, 0.18);
    --color-danger: #f87171;
    --color-danger-subtle: rgba(248, 113, 113, 0.15);
    --color-info: #22d3ee;

    --color-surface: #121212;
    --color-surface-elevated: #1e1e1e;
    --color-surface-muted: #2d2d2d;
    --color-surface-overlay: rgba(0, 0, 0, 0.7);

    --color-text-primary: #f1f5f9;
    --color-text-secondary: #94a3b8;
    --color-text-muted: #64748b;
    --color-text-inverse: #1e293b;

    --color-border: #374151;
    --color-border-strong: #4b5563;

    --color-link: #60a5fa;
    --color-link-hover: #93bbfd;

    /* Component-specific */
    --color-card-bg: #1e1e1e;
    --color-card-border: #374151;
    --color-input-bg: #2d2d2d;
    --color-input-border: #4b5563;
    --color-modal-bg: #1e1e1e;

    /* Sidebar */
    --color-sidebar-bg: linear-gradient(180deg, #0d4f2e 0%, #08331e 100%);
    --color-sidebar-text: rgba(255, 255, 255, 0.7);
    --color-sidebar-text-active: #ffffff;
    --color-sidebar-hover-bg: rgba(255, 255, 255, 0.1);
    --color-sidebar-active-bg: rgba(255, 255, 255, 0.2);

    /* Refresh CTA */
    --cta-bg: linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(30, 64, 175, 0.2) 100%);
    --cta-border: rgba(96, 165, 250, 0.28);
    --cta-shadow: rgba(0, 0, 0, 0.45);
    --cta-btn-bg: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #3b82f6 100%);
    --cta-btn-shadow: rgba(96, 165, 250, 0.35);
    --cta-btn-glow: rgba(96, 165, 250, 0.18);
    --cta-warning-bg: rgba(251, 191, 36, 0.18);
    --cta-warning-text: #fde68a;

    /* Skeleton loaders */
    --skeleton-bg: linear-gradient(90deg, rgba(148, 163, 184, 0.10), rgba(148, 163, 184, 0.18));
    --skeleton-shimmer: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.35), transparent);
    --loading-overlay-bg: rgba(15, 23, 42, 0.88);
    --spinner-border-color: rgba(148, 163, 184, 0.12);
    --spinner-active-color: #60a5fa;
}


/* ============================================ */
/* Typography                                    */
/* ============================================ */
html, body {
    font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background-color: var(--color-surface);
    color: var(--color-text-primary);
}

body {
    font-size: var(--font-base);
}


/* ============================================ */
/* Base Element Theming                          */
/* ============================================ */
body,
.page,
main,
.content {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
}

.container,
.container-fluid {
    background-color: transparent;
    color: var(--color-text-primary);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-primary);
}

p {
    color: var(--color-text-primary);
}

small {
    color: var(--color-text-secondary);
}

hr {
    border-color: var(--color-border);
}


/* ============================================ */
/* Links                                         */
/* ============================================ */
a, .btn-link {
    color: var(--color-link);
    transition: color 0.2s ease-in-out;
}

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


/* ============================================ */
/* Cards                                         */
/* ============================================ */
.card {
    background-color: var(--color-card-bg);
    border-color: var(--color-card-border);
    color: var(--color-text-primary);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.card-header {
    background-color: var(--color-surface-muted);
    border-bottom-color: var(--color-card-border);
    color: var(--color-text-primary);
    padding: var(--space-3) var(--space-4);
}

.card-body {
    background-color: var(--color-card-bg);
    color: var(--color-text-primary);
}

/* Section title — consistent across all pages */
.section-title {
    font-size: var(--font-lg);
    font-weight: 700;
    white-space: nowrap;
}


/* ============================================ */
/* Buttons                                       */
/* ============================================ */
.btn-primary {
    color: var(--color-text-inverse);
    background: var(--color-primary);
    border: none;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 0.625rem 1.5rem;
    border-radius: 8px;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 6px var(--color-primary-shadow);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--color-primary-hover);
    box-shadow: 0 6px 12px var(--color-primary-shadow);
}

@media (hover: hover) {
    .btn-primary:hover {
        transform: translateY(-1px);
    }
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px var(--color-primary-shadow);
}

[data-bs-theme="dark"] .btn-primary {
    color: var(--color-text-inverse);
}

.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
    border-width: 2px;
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn-outline-primary:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
}

@media (hover: hover) {
    .btn-outline-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px var(--color-primary-shadow);
    }
}

.btn-success {
    background-color: var(--color-success);
    border-color: var(--color-success);
}

[data-bs-theme="dark"] .btn-success {
    color: var(--color-text-inverse);
}

.btn-outline-danger {
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.btn-outline-danger:hover {
    background-color: var(--color-danger);
    color: var(--color-text-inverse);
}


/* ============================================ */
/* Focus — accessible for High Contrast Mode     */
/* ============================================ */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 3px var(--color-primary-shadow);
    outline: 2px solid transparent;
    outline-offset: 2px;
}


/* ============================================ */
/* Form Controls                                 */
/* ============================================ */
.form-control,
.form-select {
    background-color: var(--color-input-bg);
    border-color: var(--color-input-border);
    color: var(--color-text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--color-input-bg);
    border-color: var(--color-primary);
    color: var(--color-text-primary);
    box-shadow: 0 0 0 0.25rem var(--color-primary-shadow);
}

.form-label {
    color: var(--color-text-primary);
}

::placeholder {
    color: var(--color-text-muted) !important;
}

.form-control::placeholder {
    color: var(--color-text-muted);
}


/* ============================================ */
/* Alerts                                        */
/* ============================================ */
[data-bs-theme="dark"] .alert-info {
    background-color: rgba(8, 145, 178, 0.15);
    border-color: var(--color-info);
    color: #67e8f9;
}

[data-bs-theme="dark"] .alert-warning {
    background-color: var(--color-warning-subtle);
    border-color: var(--color-warning);
    color: #fde68a;
}

[data-bs-theme="dark"] .alert-success {
    background-color: var(--color-success-subtle);
    border-color: var(--color-success);
    color: #bbf7d0;
}

[data-bs-theme="dark"] .alert-danger {
    background-color: var(--color-danger-subtle);
    border-color: var(--color-danger);
    color: #fecaca;
}


/* ============================================ */
/* Badges                                        */
/* ============================================ */
[data-bs-theme="dark"] .badge.bg-secondary {
    background-color: #4b5563 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .badge.bg-success {
    background-color: var(--color-success) !important;
    color: var(--color-text-inverse) !important;
}

[data-bs-theme="dark"] .badge.bg-warning {
    background-color: var(--color-warning) !important;
    color: var(--color-text-inverse) !important;
}

[data-bs-theme="dark"] .badge.bg-info {
    background-color: var(--color-info) !important;
    color: var(--color-text-inverse) !important;
}


/* ============================================ */
/* Text Utility Overrides (dark)                 */
/* ============================================ */
[data-bs-theme="dark"] .text-muted {
    color: var(--color-text-secondary) !important;
}

[data-bs-theme="dark"] .text-success {
    color: var(--color-success) !important;
}

[data-bs-theme="dark"] .text-danger {
    color: var(--color-danger) !important;
}

[data-bs-theme="dark"] .text-warning {
    color: var(--color-warning) !important;
}

[data-bs-theme="dark"] .text-info {
    color: var(--color-info) !important;
}


/* ============================================ */
/* Tables                                        */
/* ============================================ */
[data-bs-theme="dark"] .table {
    background-color: var(--color-card-bg);
    color: var(--color-text-primary);
}

[data-bs-theme="dark"] .table th {
    background-color: var(--color-surface-muted);
    color: var(--color-text-primary);
    border-color: var(--color-border);
}

[data-bs-theme="dark"] .table td {
    border-color: var(--color-border);
    color: var(--color-text-primary);
}


/* ============================================ */
/* Borders                                       */
/* ============================================ */
[data-bs-theme="dark"] .border {
    border-color: var(--color-border) !important;
}

[data-bs-theme="dark"] .border-success {
    border-color: var(--color-success) !important;
}

[data-bs-theme="dark"] .border-warning {
    border-color: var(--color-warning) !important;
}

[data-bs-theme="dark"] .border-info {
    border-color: var(--color-info) !important;
}


/* ============================================ */
/* Navigation dark overrides                     */
/* ============================================ */
[data-bs-theme="dark"] .nav-link {
    color: var(--color-text-primary);
}

[data-bs-theme="dark"] .nav-link:hover,
[data-bs-theme="dark"] .nav-link.active {
    color: var(--color-text-inverse);
}


/* ============================================ */
/* Dropdown                                      */
/* ============================================ */
[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--color-surface-muted);
    border-color: var(--color-border);
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--color-text-primary);
}

[data-bs-theme="dark"] .dropdown-item:hover {
    background-color: var(--color-border);
    color: var(--color-text-inverse);
}


/* ============================================ */
/* Background Utilities (dark)                   */
/* ============================================ */
[data-bs-theme="dark"] .bg-light {
    background-color: var(--color-surface-muted) !important;
    color: var(--color-text-primary) !important;
}

[data-bs-theme="dark"] .bg-white {
    background-color: var(--color-surface-elevated) !important;
    color: var(--color-text-primary) !important;
}


/* ============================================ */
/* Sidebar & Top Row Dark                        */
/* ============================================ */
[data-bs-theme="dark"] article.content {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
}

[data-bs-theme="dark"] .container-fluid {
    background-color: var(--color-surface);
}


/* ============================================ */
/* Close Button                                  */
/* ============================================ */
[data-bs-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%);
    opacity: 0.85;
}

[data-bs-theme="dark"] .btn-close:hover {
    opacity: 1;
}


/* ============================================ */
/* Icons                                         */
/* ============================================ */
[data-bs-theme="dark"] .bi {
    filter: brightness(0.9);
}

[data-bs-theme="dark"] .alert .bi,
[data-bs-theme="dark"] .card .bi {
    filter: none;
}


/* ============================================ */
/* Content                                       */
/* ============================================ */
.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

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

.invalid {
    outline: 1px solid var(--color-danger);
}

.validation-message {
    color: var(--color-danger);
}

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

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}


/* ============================================ */
/* Global Refresh CTA Button                    */
/* ============================================ */
@keyframes cta-shimmer {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.refresh-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-4);
    padding: var(--space-5) 1.75rem;
    margin: 0;
    width: 100%;
    font-size: var(--font-md);
    line-height: 1.6;
    background: var(--cta-bg);
    border: 1px solid var(--cta-border);
    border-radius: 18px;
    box-shadow: 0 18px 40px var(--cta-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
    .refresh-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 24px 48px var(--cta-shadow);
    }
}

.refresh-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: 1rem 3rem;
    border-radius: 8px;
    background: var(--cta-btn-bg);
    background-size: 200% auto;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 16px var(--cta-btn-shadow), 0 0 32px var(--cta-btn-glow);
    cursor: pointer;
    animation: cta-shimmer 3s linear infinite;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

@media (hover: hover) {
    .refresh-cta-button:hover {
        transform: translateY(-1px);
        box-shadow: 0 18px 32px var(--cta-btn-shadow);
    }
}

.refresh-cta-button:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px var(--cta-btn-shadow);
}

.refresh-cta-button:disabled {
    cursor: not-allowed;
    opacity: 0.65;
    box-shadow: none;
    animation: none;
}

/* Compact variant for use inside footer bars — matches btn-sm sizing */
.refresh-cta-button.cta-compact {
    padding: 0.45rem 1.25rem;
    font-size: var(--font-base);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.refresh-cta-warning {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: 14px;
    background: var(--cta-warning-bg);
    color: var(--cta-warning-text);
    font-weight: 500;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
}

.refresh-cta-warning i {
    font-size: var(--font-lg);
    flex-shrink: 0;
}

.refresh-cta-warning span {
    flex: 1;
    min-width: 0;
}

@media (max-width: 768px), (hover: none) {
    .refresh-cta {
        padding: var(--space-4) var(--space-4);
        border-radius: 16px;
    }

    .refresh-cta-button:not(.cta-compact) {
        width: 100%;
        padding: 0.85rem var(--space-5);
    }

    .refresh-cta-warning {
        flex-direction: column;
        text-align: center;
        gap: 0.35rem;
    }
}


/* ============================================ */
/* Store Logo — shared utility                   */
/* ============================================ */
.store-logo {
    height: 48px;
    max-width: 120px;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    padding: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}


/* ============================================ */
/* Modals                                        */
/* ============================================ */
.modal {
    z-index: 9999 !important;
}

.modal-backdrop {
    z-index: 9998 !important;
}

.modal-content {
    background-color: var(--color-modal-bg);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[data-bs-theme="dark"] .modal-content {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.03), 0 8px 28px rgba(0,0,0,0.65);
}

.modal-header,
.modal-footer {
    background-color: var(--color-modal-bg);
    border-color: var(--color-border);
    color: var(--color-text-primary);
    flex-shrink: 0;
}

.modal-body {
    background-color: var(--color-modal-bg);
    color: var(--color-text-primary);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Width-only on purpose: a phone-size gutter. On a tablet it would stretch every
   dialog edge to edge; touch tablets get the bottom sheet instead (chapo-v4-theme.css). */
@media (max-width: 767.98px) {
    .modal-dialog {
        margin: 0.5rem auto;
        max-width: calc(100vw - 1rem);
    }

    .modal-content {
        max-height: calc(100vh - 1rem);
    }
}

[data-bs-theme="dark"] .modal-body {
    scrollbar-width: thin;
}

/* ---- Scroll lock behind an open modal ----
   The class is applied and removed by modal-scroll-lock.js. This was originally a pure-CSS
   `html:has(.modal.show)` rule, but WKWebView did not reliably re-evaluate the :has() once
   the modal was removed from the DOM: the lock stuck and the page could not be scrolled
   until it was reloaded (seen on the compare page after closing the optimize sheet). A
   MutationObserver re-checks explicitly, so releasing never depends on :has() invalidation.
   Applied to <html> as well as <body> because on iOS WKWebView the document is the
   scrolling element and overflow:hidden on <body> alone does not stop it.
   Scrolling INSIDE a modal is unaffected — .modal-body / .chapo-modal-body own their
   overflow, and .modal-body already sets overscroll-behavior: contain. */
html.chapo-scroll-locked,
body.chapo-scroll-locked {
    overflow: hidden;
}

[data-bs-theme="dark"] .modal-body::-webkit-scrollbar { width: 8px; }
[data-bs-theme="dark"] .modal-body::-webkit-scrollbar-track { background: var(--color-card-bg); }
[data-bs-theme="dark"] .modal-body::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }
[data-bs-theme="dark"] .modal-body::-webkit-scrollbar-thumb:hover { background: var(--color-border-strong); }

/* App-wide scrollbars in dark mode — keep main scroll + any scrollable container
   consistent with the surface colors instead of showing the default light track. */
[data-bs-theme="dark"] {
    color-scheme: dark;
    scrollbar-color: var(--color-border) var(--color-surface);
}
[data-bs-theme="dark"] *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
[data-bs-theme="dark"] *::-webkit-scrollbar-track {
    background: var(--color-surface);
}
[data-bs-theme="dark"] *::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}
[data-bs-theme="dark"] *::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-strong);
}
[data-bs-theme="dark"] *::-webkit-scrollbar-corner {
    background: var(--color-surface);
}

.modal-body hr {
    border-color: var(--color-border);
}

/* RTL support for modal close button */
[dir="rtl"] .modal-header .btn-close {
    margin-left: 0;
    margin-right: 0;
    margin-inline-end: auto;
    order: -1;
}

/* Modal animation */
.modal.fade .modal-dialog {
    transition: transform .18s ease-out;
    transform: scale(.96);
}

.modal.fade.show .modal-dialog {
    transform: scale(1);
}


/* ============================================ */
/* List Groups                                   */
/* ============================================ */
.list-group-item {
    background-color: var(--color-surface-muted);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

[data-bs-theme="dark"] .list-group-item .btn-link {
    color: var(--color-link);
}

[data-bs-theme="dark"] .list-group-item .btn-link:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

[data-bs-theme="dark"] .list-group-item .btn-outline-secondary {
    color: var(--color-text-primary);
    border-color: var(--color-border-strong);
}

[data-bs-theme="dark"] .list-group-item .btn-outline-secondary:hover {
    background-color: var(--color-border-strong);
    color: var(--color-text-inverse);
}


/* Page enter animation: chapo-motion.css (.chapo-page). The old contentFadeIn
   on .app-main-contents replayed on every layout re-render (theme/language/
   badge updates), not once per navigation — deliberately removed. */

/* ============================================ */
/* Loading Overlay & Skeletons                   */
/* ============================================ */
.app-loading-overlay {
    position: absolute;
    inset: 0;
    background: var(--loading-overlay-bg);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 50;
    padding: var(--space-6);
    /* Delayed appearance, with `backwards` fill holding it at opacity 0 through
       the delay. A load that finishes inside the delay therefore removes this
       node while it is still invisible, so quick loads never flash a spinner at
       all — measured on the catalog, which put the overlay up at 10ms and took
       it down at 101ms, a 90ms flicker that landed in the middle of the page
       transition and was the main reason that page looked blinky. Slow loads are
       unaffected: they still get the overlay, just a beat later. */
    animation: fadeInOverlay .25s ease 220ms backwards;
}

/* Unified full-page loading overlay: covers content area + grocery-list footer
   (z-index 1100) but NOT the top navbar (3.25rem) or the mobile bottom nav
   (z-index 3000). Applied on Home, Catalog (GroceryList) and Orders. */
.app-loading-overlay-fullscreen {
    position: fixed !important;
    top: 3.25rem;
    bottom: 0;
    inset-inline: 0;
    z-index: 2500;
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--space-6);
    animation: fadeInOverlay .25s ease;
}
@media (max-width: 767.98px), (hover: none) {
    .app-loading-overlay-fullscreen {
        bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
    }
}

@keyframes fadeInOverlay { from { opacity: 0; } to { opacity: 1; } }

.app-main-contents.app-blur {
    filter: blur(3px);
    opacity: .35;
    pointer-events: none;
    user-select: none;
    transition: filter .25s ease, opacity .25s ease;
}

/* Spinner */
.loader-spinner {
    width: 72px;
    height: 72px;
    border: 5px solid var(--spinner-border-color);
    border-top-color: var(--spinner-active-color);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Skeleton lines */
.skeleton-line {
    height: 12px;
    width: 100%;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    background: var(--skeleton-bg);
}

.skeleton-line-lg { height: 20px; }

.skeleton-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--skeleton-shimmer);
    animation: shimmer 1.4s ease-in-out infinite;
}

@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* Skeleton pill chips */
.skeleton-pill {
    height: 28px;
    width: 110px;
    border-radius: 50px;
    background: var(--skeleton-bg);
    position: relative;
    overflow: hidden;
}

.skeleton-pill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--skeleton-shimmer);
    animation: shimmer 1.6s ease-in-out infinite;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .loader-spinner, .skeleton-line::after, .skeleton-pill::after { animation-duration: 2.4s; }
}


/* ============================================ */
/* Blazor Error UI                               */
/* ============================================ */
[data-bs-theme="dark"] #blazor-error-ui {
    background-color: var(--color-danger);
    color: #ffffff;
}


/* ============================================ */
/* Toast Notification System                     */
/* ============================================ */
.toast-container {
    position: fixed;
    bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    pointer-events: none;
}

.toast-item {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: 999px;
    background: var(--color-text-primary);
    color: var(--color-surface);
    font-size: var(--font-sm);
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    animation: toastSlideIn 0.3s ease-out;
    max-width: 90vw;
}

.toast-item.toast-exit {
    animation: toastSlideOut 0.25s ease-in forwards;
}

.toast-item i {
    font-size: var(--font-md);
    color: var(--color-success);
}

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes toastSlideOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(20px); }
}

/* Bottom nav spacing — push toasts above bottom nav on mobile */
@media (max-width: 767.98px), (hover: none) {
    .toast-container {
        bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
    }
}


/* ============================================ */
/* Mobile Catalog Overrides (global, high prio)  */
/* ============================================ */
@media (max-width: 767.98px), (hover: none) {
    /* Categories: horizontal scrollable compact chips */
    .catalog-nav {
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        padding: 4px 0 !important;
        background: transparent !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        align-self: auto !important;
        max-height: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    .catalog-nav-title {
        display: none !important;
    }

    .catalog-nav-list {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 6px !important;
        padding-bottom: 6px !important;
        padding-inline-end: 0 !important;
        scrollbar-width: thin;
        scrollbar-color: var(--color-border) transparent;
        -webkit-overflow-scrolling: touch;
    }

    .catalog-nav-list::-webkit-scrollbar {
        height: 4px;
    }

    .catalog-nav-list::-webkit-scrollbar-track {
        background: var(--color-surface-muted);
        border-radius: 4px;
    }

    .catalog-nav-list::-webkit-scrollbar-thumb {
        background: var(--color-primary);
        border-radius: 4px;
    }

    .catalog-nav-group {
        flex: 0 0 auto !important;
        display: contents !important;
    }

    .catalog-nav-item,
    .catalog-nav-item.catalog-nav-item-mid {
        flex: 0 0 auto !important;
        width: auto !important;
        padding: 6px 16px !important;
        border-radius: 999px !important;
        font-size: 0.8125rem !important;
        min-height: 32px !important;
        white-space: nowrap !important;
        background: var(--color-surface-muted) !important;
        border: 1px solid var(--color-border) !important;
        box-shadow: none !important;
    }

    .catalog-nav-item.active,
    .catalog-nav-item.catalog-nav-item-mid.active {
        background: var(--color-primary) !important;
        color: #fff !important;
        border-color: transparent !important;
    }


    .catalog-nav-children {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin-inline-start: 0 !important;
        border-inline-start: none !important;
        padding-inline-start: 0 !important;
        gap: 6px !important;
    }

    /* Search toolbar: compact, single row.
       Radius and padding are the context bar card's exact values — the two cards
       stack as the page's fixed header and any difference between them reads as a
       mistake. The padding comes from the shared token, NOT a copy of its value:
       this !important beat the scoped sheet, so a hardcoded number here silently
       held the catalog bar 4px shorter than every other page's after the bar was
       resized. Kept here rather than in the scoped sheet because the !important
       declarations around it would otherwise override it; see .catalog-toolbar in
       GroceryList.razor.css. */
    .catalog-toolbar {
        border-radius: var(--chapo-radius-md, 10px) !important;
        padding: var(--chapo-bar-pad-block) var(--chapo-bar-pad-inline) !important;
    }

    .catalog-toolbar-row {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0.6rem !important;
        align-items: center !important;
    }

    .catalog-toolbar-group {
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .catalog-label {
        display: none !important;
    }

    .catalog-search-input {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .catalog-sort-select {
        min-width: 100px !important;
        font-size: 0.8125rem !important;
        padding: 6px 8px !important;
    }

    /* Filters: compact horizontal scroll */
    .catalog-filters-toolbar {
        margin-top: 6px !important;
        padding: 8px 10px !important;
        border-radius: 10px !important;
    }

    .catalog-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 4px !important;
        scrollbar-width: thin !important;
        scrollbar-color: var(--color-border) transparent;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px !important;
    }

    .catalog-tabs::-webkit-scrollbar {
        height: 4px;
    }

    .catalog-tabs::-webkit-scrollbar-track {
        background: var(--color-surface-muted);
        border-radius: 4px;
    }

    .catalog-tabs::-webkit-scrollbar-thumb {
        background: var(--color-primary);
        border-radius: 4px;
    }

    .catalog-tab {
        padding: 4px 10px !important;
        font-size: 0.75rem !important;
        min-height: 28px !important;
    }

    /* Product grid: 2 columns, compact cards */
    .catalog-content {
        margin-top: 8px !important;
    }

    .catalog-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin-top: 8px !important;
    }

    .catalog-card {
        min-height: auto !important;
        padding: 8px !important;
        border-radius: 12px !important;
        gap: 6px !important;
    }

    .catalog-card-image {
        height: 100px !important;
        border-radius: 8px !important;
    }

    .catalog-card-tag {
        font-size: 0.6rem !important;
        padding: 1px 5px !important;
    }

    .catalog-card-title {
        font-size: 0.75rem !important;
        min-height: 2.2em !important;
        line-height: 1.25 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden !important;
    }

    .catalog-card-actions .btn {
        width: 34px !important;
        height: 34px !important;
        border-radius: 8px !important;
        font-size: 0.8125rem !important;
    }

    .catalog-card-quantity {
        font-size: 0.8125rem !important;
    }

    /* Page title smaller on mobile */
    /* :not() exempts the catalog's own section titles — this legacy rule's
       !important was overriding .catalog-home-title and making them 20px while
       every other section heading sat at 16px. */
    .grocery-page-wrapper h3:not(.catalog-home-title),
    .catalog-section h3:not(.catalog-home-title) {
        font-size: 1.25rem !important;
        margin-bottom: 4px !important;
    }

    /* Section spacing tighter */
    .catalog-section {
        padding: 0 8px 60px !important;
        gap: 4px !important;
    }

    /* Reduce footer content padding */
    .grocery-page-wrapper .app-main-contents {
        padding-bottom: 100px !important;
    }
}

/* ============================================ */
/* Mobile Header Bar                             */
/* ============================================ */
.mobile-header {
    display: none;
}

@media (max-width: 767.98px), (hover: none) {
    .mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-2) var(--space-4);
        background: var(--color-surface-elevated);
        border-bottom: 1px solid var(--color-border);
        position: sticky;
        top: 0;
        z-index: 2000;
    }
}

.mobile-header-brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    color: inherit;
}

.mobile-header-brand:hover {
    text-decoration: none;
    color: inherit;
}

.mobile-header-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.mobile-header-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.mobile-header-title {
    font-size: var(--font-lg);
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mobile-header-tagline {
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-variant: small-caps;
}

.mobile-header-about {
    color: var(--color-text-secondary);
    padding: var(--space-1);
}

/* ============================================ */
/* Bottom Tab Navigation (mobile)                */
/* ============================================ */
.bottom-nav {
    display: none;
}

@media (max-width: 767.98px), (hover: none) {
    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(3.5rem + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background-color: var(--color-surface-elevated);
        border-top: 1px solid var(--color-border);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
        z-index: 3000;
        align-items: stretch;
        justify-content: space-around;
        /* Prevent iPhone Safari dynamic toolbar bounce */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }

    /* Extend background below the nav to cover iPhone Safari gap */
    .bottom-nav::after {
        content: '';
        position: absolute;
        bottom: calc(-1 * env(safe-area-inset-bottom, 0px) - 50px);
        left: 0;
        right: 0;
        height: calc(env(safe-area-inset-bottom, 0px) + 50px);
        background-color: var(--color-surface-elevated);
        z-index: -1;
    }

    [data-bs-theme="dark"] .bottom-nav {
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    }

    [data-bs-theme="dark"] .bottom-nav::after {
        background-color: var(--color-surface-elevated);
    }

    .bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: var(--space-1) 0;
        text-decoration: none;
        color: var(--color-text-secondary);
        font-size: var(--font-xs);
        font-weight: 500;
        transition: color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        min-width: 0;
    }

    .bottom-nav-item svg {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    .bottom-nav-item.active,
    .bottom-nav-item.active:hover {
        color: var(--color-primary);
        font-weight: 600;
    }

    .bottom-nav-item:hover {
        color: var(--color-primary);
        text-decoration: none;
    }

    .bottom-nav-item:focus {
        outline: none;
        color: var(--color-primary);
    }

    /* Settings tab: icon-only on mobile to save space */
    .bottom-nav-settings {
        flex: 0 0 auto;
        padding: var(--space-1) var(--space-3);
    }

    .bottom-nav-settings-label {
        display: none;
    }

    /* Add bottom padding to page content so it doesn't hide behind bottom nav */
    .page main {
        padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
    }
}


/* ============================================ */
/* Tabular numbers for prices                    */
/* ============================================ */
.price-display {
    font-variant-numeric: tabular-nums;
}


/* ============================================ */
/* Skip-to-content (accessibility)               */
/* ============================================ */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 10001;
    padding: var(--space-2) var(--space-4);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 8px 0;
}

.skip-link:focus {
    top: 0;
}

/* Prevent horizontal page scroll from any child overflow */
.page {
    overflow-x: hidden !important;
    max-width: 100vw;
}

/* On desktop, constrain main to viewport minus sidebar */
@media (min-width: 768px) and (hover: hover) {
    .page > main {
        overflow-x: hidden !important;
        max-width: calc(100vw - 250px);
    }
}

/* On mobile, main takes full width (no sidebar) */
@media (max-width: 767.98px), (hover: none) {
    .page > main {
        overflow-x: hidden !important;
        max-width: 100vw;
        width: 100%;
    }
}

/* Price Axis - Horizontal Scrolling Strip */
.price-axis-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) transparent;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

.price-axis-scroll::-webkit-scrollbar {
    height: 6px;
}

.price-axis-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.price-axis-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-hover));
    border-radius: 3px;
}

.price-axis-scroll .card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.price-axis-scroll .card:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    z-index: 5;
}

/* Discount Horizontal Scroll */
.discount-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) transparent;
}

.discount-scroll::-webkit-scrollbar {
    height: 6px;
}

.discount-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.discount-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-hover));
    border-radius: 3px;
}

/* Split Cart Slider */
.form-range::-webkit-slider-thumb {
    background: var(--color-primary);
}

.form-range::-moz-range-thumb {
    background: var(--color-primary);
}


/* ============================================ */
/* Similar Products Accordion (dark mode)        */
/* ============================================ */
[data-bs-theme="dark"] .accordion-item {
    background-color: var(--color-card-bg);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

[data-bs-theme="dark"] .accordion-button {
    background-color: var(--color-surface-muted);
    color: var(--color-text-primary);
    border-color: var(--color-border);
    box-shadow: none;
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--color-surface-muted);
    color: var(--color-text-primary);
}

[data-bs-theme="dark"] .accordion-button::after {
    filter: invert(1) brightness(2);
}

[data-bs-theme="dark"] .accordion-body {
    background-color: var(--color-card-bg);
    color: var(--color-text-primary);
}

[data-bs-theme="dark"] .accordion-body .card {
    background-color: var(--color-surface-muted);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

[data-bs-theme="dark"] .accordion-body .btn-outline-info {
    color: var(--color-info);
    border-color: var(--color-info);
}

[data-bs-theme="dark"] .accordion-body .btn-outline-info:hover {
    background-color: var(--color-info);
    color: var(--color-text-inverse);
}


/* ============================================ */
/* Report Section Headers — dark mode fixes      */
/* ============================================ */
/* Ensure product-overview-header styles apply globally (not just scoped) */
.product-overview-header {
    background: #1e293b;
    color: #f8fafc;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-overview-header h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #f8fafc;
}

.product-overview-header .badge {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    font-weight: 500;
}

.product-overview-card {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
}

/* Product accordion images and badges — global for cross-component use */
.product-accordion-img {
    height: 36px;
    width: 36px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
}

/* Product accordion row: image left, text+badges stacked right */
.product-accordion-row {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
}

.product-accordion-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: start;
}

.product-accordion-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-sm);
}

.product-accordion-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: center;
}

.product-price-badge {
    /* Was a hardcoded blue wash; --color-primary-subtle tracks the accent the
       badge's own text already uses, so the pill stays green under the v4 remap. */
    background: var(--color-primary-subtle) !important;
    color: var(--color-primary) !important;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.product-offer-logo {
    height: 20px;
    width: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Product offers list — replaces table for better alignment */
.product-offers-list {
    display: flex;
    flex-direction: column;
}

.product-offer-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-sm);
}

.product-offer-row:last-child {
    border-bottom: none;
}

.product-offer-store {
    flex: 1 1 40%;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
}

.product-offer-price {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.product-offer-meta {
    flex: 0 0 auto;
    display: flex;
    gap: var(--space-1);
    align-items: center;
}

/* RTL support for product accordion and offer rows —
   dir="rtl" on the flex container reverses visual order natively */
[dir="rtl"] .product-accordion-info,
[dir="rtl"] .product-offers-list {
    text-align: right;
}

/* Override Bootstrap accordion button arrow position for RTL */
[dir="rtl"] .accordion-button::after {
    margin-right: auto;
    margin-left: 0;
}

[dir="rtl"] .accordion-button {
    text-align: right;
}

/* Dark mode range slider */
[data-bs-theme="dark"] .form-range::-webkit-slider-runnable-track {
    background: var(--color-border);
}

[data-bs-theme="dark"] .form-range::-moz-range-track {
    background: var(--color-border);
}

[data-bs-theme="dark"] .form-range::-webkit-slider-thumb {
    background: var(--color-primary);
}

[data-bs-theme="dark"] .form-range::-moz-range-thumb {
    background: var(--color-primary);
}

[data-bs-theme="dark"] .price-range-header,
[data-bs-theme="dark"] .product-overview-header {
    background: #0f172a;
}

/* Cheapest cart card — dark mode */
[data-bs-theme="dark"] .cheapest-cart-card {
    background: var(--color-surface-elevated) !important;
    border-color: var(--color-border) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .cheapest-cart-card .card-header,
[data-bs-theme="dark"] .cheapest-cart-header {
    background: var(--color-surface-muted) !important;
    border-bottom-color: var(--color-border) !important;
}

[data-bs-theme="dark"] .price-axis-card {
    background: var(--color-surface-muted);
    border-color: var(--color-border);
}

[data-bs-theme="dark"] .price-axis-logo {
    background: var(--color-surface-muted);
    border-color: var(--color-border);
}

[data-bs-theme="dark"] .store-result-card {
    border-color: var(--color-border);
}

[data-bs-theme="dark"] .discount-item {
    background: var(--color-surface-muted);
    border-color: var(--color-border);
}

/* Similar Products / accordion horizontal scroll — dark mode scrollbar */
[data-bs-theme="dark"] .accordion-body {
    scrollbar-color: var(--color-border-strong) transparent;
}

[data-bs-theme="dark"] .accordion-body::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
}

[data-bs-theme="dark"] .accordion-body .card {
    border-color: var(--color-border);
}

/* Accordion chevron icons — consistent position and style */
.accordion-button {
    position: relative;
}

.accordion-button::after {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-inline-start: auto;
    position: absolute;
    inset-inline-end: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
}

.accordion-button:not(.collapsed)::after {
    transform: translateY(-50%) rotate(-180deg);
}

.accordion-button {
    padding-inline-end: calc(var(--space-4) + 1.5rem);
}

/* ── NavMenu user section ─────────────────────────────────────────────────── */
.nav-user-section {
    border-top: 1px solid var(--color-border, rgba(255,255,255,0.1));
}

.nav-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nav-user-email {
    max-width: 140px;
    color: var(--color-text-secondary, rgba(255,255,255,0.7));
}

/* ============================================ */
/* Shared Grocery List Footer Bar               */
/* (Used on both Catalog and Home pages)        */
/* ============================================ */
.catalog-footer {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    padding: 0;
    z-index: 1100;
    display: flex;
    justify-content: center;
    pointer-events: none;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

@media (max-width: 767.98px), (hover: none) {
    .catalog-footer {
        bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
    }
}

.catalog-footer-inner {
    width: min(calc(100% - 2rem), 1120px);
    margin-inline: auto;
    padding: 0.85rem 1.1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    backdrop-filter: blur(12px);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
    border-radius: 24px 24px 0 0;
    color: var(--color-text-primary);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    pointer-events: auto;
}

[data-bs-theme="dark"] .catalog-footer-inner {
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
}

.catalog-footer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.catalog-footer-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: var(--font-md);
}

.catalog-footer-title i { font-size: var(--font-xl); }
.catalog-footer-title-text { white-space: nowrap; }
.catalog-footer-count { font-size: var(--font-base); color: var(--color-text-secondary); font-weight: 600; }

.catalog-footer-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.catalog-footer-actions .btn {
    border-color: var(--color-border-strong);
    color: var(--color-text-primary);
}

[data-bs-theme="dark"] .catalog-footer-actions .btn {
    color: var(--color-text-primary);
    border-color: var(--color-border-strong);
    background: rgba(255, 255, 255, 0.1);
}

.catalog-footer-body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.catalog-footer-products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
}

.catalog-footer-product {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: 14px;
}

.catalog-footer-product img {
    width: 48px; height: 48px; object-fit: contain; border-radius: 10px;
    background: var(--color-surface); padding: 0.25rem;
}

.catalog-footer-product-placeholder {
    width: 48px; height: 48px; border-radius: 10px;
    background: var(--color-surface); display: flex; align-items: center; justify-content: center;
    color: var(--color-text-muted); font-size: var(--font-lg);
}

.catalog-footer-product-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.catalog-footer-product-title { font-size: var(--font-base); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.catalog-footer-product-quantity { font-size: var(--font-sm); color: var(--color-text-secondary); font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 767.98px), (hover: none) {
    .catalog-footer-inner { width: calc(100% - 0.5rem); padding: var(--space-2) var(--space-3); border-radius: 16px 16px 0 0; }
    .catalog-footer-title { font-size: var(--font-md); gap: var(--space-1); }
    .catalog-footer-title i { font-size: var(--font-xl); }
    .catalog-footer-count { font-size: var(--font-md); }
    .catalog-footer-actions .btn { font-size: var(--font-sm); padding: var(--space-1) var(--space-3); }
    .catalog-footer-products { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); }
    .catalog-footer-product { padding: var(--space-1) var(--space-2); border-radius: 10px; gap: var(--space-2); }
    .catalog-footer-product img, .catalog-footer-product-placeholder { width: 36px; height: 36px; border-radius: 8px; }
    .catalog-footer-product-title { font-size: var(--font-base); }
    .catalog-footer-product-quantity { font-size: var(--font-sm); }
}