/* ============================================================
   Meravie Shop — design system
   Brand tokens + component polish layered on top of Bootstrap 5.
   Loaded after bootstrap.min.css, so these rules win the cascade.
   ============================================================ */

:root {
    --brand-primary: #4f46e5;
    --brand-primary-dark: #4338ca;
    --brand-primary-darker: #3730a3;
    --brand-primary-light: #eef2ff;
    --brand-primary-rgb: 79, 70, 229;
    --brand-gradient: linear-gradient(135deg, #6366f1 0%, #4f46e5 60%, #4338ca 100%);
    /* The brand color as text (links, icons): itself in light mode, a lighter
       mix in dark mode (see the dark theme block), so a dark brand color
       stays readable on a dark page. */
    --brand-link: var(--brand-primary);
    --brand-link-hover: var(--brand-primary-dark);

    --accent-emerald: #059669;
    --accent-emerald-light: #ecfdf5;
    --accent-amber: #d97706;
    --accent-amber-light: #fffbeb;
    --accent-rose: #e11d48;
    --accent-rose-light: #fff1f2;
    --accent-sky: #0284c7;
    --accent-sky-light: #f0f9ff;
    --accent-violet: #7c3aed;
    --accent-violet-light: #f5f3ff;
    --accent-teal: #0d9488;
    --accent-teal-light: #f0fdfa;

    --surface: #ffffff;
    --surface-muted: #f8fafc;
    --body-bg: #f4f5fa;
    --border-subtle: #e7e8f0;
    --text-muted-2: #6b7280;
    --form-label-color: #374151;
    --pagination-disabled: #c3c6d4;

    --radius-sm: 0.5rem;
    --radius: 0.75rem;
    --radius-lg: 1rem;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12);
    --shadow-brand: 0 8px 20px -4px rgba(var(--brand-primary-rgb), 0.45);

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 130ms var(--ease);
    --transition: 200ms var(--ease);

    --bottom-nav-height: 64px;
}

/* ---------- Motion: respect reduced-motion preference everywhere ---------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--body-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    letter-spacing: -0.01em;
}

a {
    color: var(--brand-link);
    transition: color var(--transition-fast);
}
a:hover {
    color: var(--brand-link-hover);
}

::selection {
    background: var(--brand-primary);
    color: #fff;
}

:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* Page content: a soft, brief entrance instead of a hard pop-in on navigation. */
.page-enter {
    animation: page-enter-fade 280ms var(--ease) both;
}
@keyframes page-enter-fade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Buttons ---------- */

.btn {
    --bs-btn-border-radius: var(--radius-sm);
    font-weight: 600;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), filter var(--transition-fast);
}

.btn:hover {
    transform: translateY(-1px);
}
.btn:active {
    transform: translateY(0) scale(0.98);
}

.btn-primary {
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary-dark);
    --bs-btn-hover-border-color: var(--brand-primary-dark);
    --bs-btn-active-bg: var(--brand-primary-darker);
    --bs-btn-active-border-color: var(--brand-primary-darker);
    --bs-btn-disabled-bg: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
    --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
    box-shadow: var(--shadow-brand);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-link);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-bg: var(--brand-primary);
    --bs-btn-active-border-color: var(--brand-primary);
    --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
}

.btn-lg {
    --bs-btn-border-radius: var(--radius);
    --bs-btn-padding-y: 0.75rem;
}

.text-primary { color: var(--brand-link) !important; }
.link-primary { color: var(--brand-link) !important; }

/* ---------- Surfaces: cards & tables ---------- */

.card {
    --bs-card-bg: var(--surface);
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: box-shadow var(--transition), transform var(--transition);
}

/* Opt-in lift for cards that act like tappable rows (pointer devices only —
   avoids a "stuck hover" look on touch, which is most of this app's usage). */
@media (hover: hover) and (pointer: fine) {
    .card-hover:hover {
        box-shadow: var(--shadow-lg);
        transform: translateY(-2px);
    }
}

.bg-white {
    background-color: var(--surface) !important;
}

.table {
    --bs-table-bg: transparent;
}

.table-responsive-surface,
table.table {
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.table > :not(caption) > * > * {
    padding: 0.75rem 1rem;
}

.table thead th {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--text-muted-2);
    border-bottom-width: 1px;
    background: var(--surface-muted);
}

.table tbody tr {
    transition: background-color var(--transition-fast);
}
.table tbody tr:hover {
    background-color: var(--surface-muted);
}

/* A table wrapped for horizontal scroll on narrow screens, without losing
   the card-like rounded/shadowed look. */
.table-scroll {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.table-scroll > table {
    box-shadow: none;
    margin-bottom: 0;
}
.table-scroll::-webkit-scrollbar {
    height: 6px;
}
.table-scroll::-webkit-scrollbar-thumb {
    background: var(--border-subtle);
    border-radius: 999px;
}
.table-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted-2);
}

/* ---------- Forms ---------- */

.form-control, .form-select {
    border-radius: var(--radius-sm);
    border-color: var(--border-subtle);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.15);
}
.form-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--form-label-color);
}

/* ---------- Badges: soft tinted pills instead of solid saturated fills ---------- */

.badge {
    font-weight: 600;
    padding: 0.4em 0.75em;
    border-radius: 999px;
    letter-spacing: 0.01em;
}

.badge.text-bg-success {
    background-color: var(--accent-emerald-light) !important;
    color: var(--accent-emerald) !important;
}
.badge.text-bg-warning {
    background-color: var(--accent-amber-light) !important;
    color: var(--accent-amber) !important;
}
.badge.text-bg-danger {
    background-color: var(--accent-rose-light) !important;
    color: var(--accent-rose) !important;
}
.badge.text-bg-secondary {
    background-color: var(--surface-muted) !important;
    color: var(--text-muted-2) !important;
}

/* Charge categories: semantic/informational, deliberately NOT tied to
   --brand-* (a shop re-branding its color shouldn't reshuffle what LOYER
   vs SALAIRES looks like) - reuses the same accent tokens the rest of the
   design system already defines, just mapped by category instead of by
   success/warning/danger meaning. */
.badge-cat-loyer { background-color: var(--accent-violet-light); color: var(--accent-violet); }
.badge-cat-salaires { background-color: var(--accent-teal-light); color: var(--accent-teal); }
.badge-cat-transport { background-color: var(--accent-amber-light); color: var(--accent-amber); }
.badge-cat-electricite { background-color: var(--accent-sky-light); color: var(--accent-sky); }
.badge-cat-autre { background-color: var(--surface-muted); color: var(--text-muted-2); }

/* ---------- Alerts ---------- */

.alert {
    border: none;
    border-left: 3px solid transparent;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}
.alert i.bi,
.alert > i {
    margin-right: 0.35rem;
}
.alert-danger { border-left-color: var(--accent-rose); }
.alert-warning { border-left-color: var(--accent-amber); }
.alert-success { border-left-color: var(--accent-emerald); }
.alert-info { border-left-color: var(--accent-sky); }

/* ---------- Top navbar (desktop) ---------- */

.navbar {
    --bs-navbar-brand-font-weight: 800;
}
.navbar.bg-dark {
    background: linear-gradient(180deg, #1e1b3a 0%, #17152c 100%) !important;
}
.navbar-brand {
    letter-spacing: -0.02em;
}
.navbar-brand .brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.5rem;
    background: var(--brand-gradient);
    margin-right: 0.5rem;
    font-size: 1rem;
    overflow: hidden;
}

/* A shop's own logo (Shop.logo_url) dropped into one of the icon-badge
   spots (navbar brand mark, login screen) in place of the default glyph -
   fill the same footprint instead of overflowing/squashing it. */
.brand-mark img,
.icon-avatar img,
.login-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.login-brand-mark {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.15);
    font-size: 1.75rem;
    overflow: hidden;
}
.navbar .nav-link {
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.navbar .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}
/* The "Gestion" menu: Bootstrap only floats navbar dropdowns in its
   navbar-expand-* layouts, which this custom navbar doesn't use - without
   this the menu opened in flow and pushed the whole bar taller. */
.navbar .nav-item.dropdown .dropdown-menu {
    position: absolute;
    margin-top: 0.35rem;
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
}

/* ---------- Super-admin inside a shop (see shops.views.EnterShopView) ----------
   Amber, not the shop's brand color: it marks an elevated mode on top of
   whatever branding the entered shop has, so it must never blend into it. */

.superadmin-bar {
    background: #fef3c7;
    color: #78350f;
    border-bottom: 1px solid #fcd34d;
    font-size: 0.85rem;
    padding: 0.35rem 0;
}
.superadmin-bar-exit {
    --bs-btn-color: #78350f;
    --bs-btn-border-color: #f59e0b;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #d97706;
    --bs-btn-hover-border-color: #d97706;
    --bs-btn-padding-y: 0.15rem;
    font-weight: 600;
}

/* ---------- Bottom mobile nav ---------- */

.bottom-nav {
    display: none;
}

@media (max-width: 767.98px) {
    body {
        padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    }

    .bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        height: var(--bottom-nav-height);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--surface);
        border-top: 1px solid var(--border-subtle);
        box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.08);
    }

    .bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        color: var(--text-muted-2);
        text-decoration: none;
        font-size: 0.68rem;
        font-weight: 600;
        padding-top: 6px;
        transition: color var(--transition-fast);
    }

    .bottom-nav-item i {
        font-size: 1.25rem;
        line-height: 1;
        transition: transform var(--transition-fast);
    }

    .bottom-nav-item:active i {
        transform: scale(0.88);
    }

    .bottom-nav-item.active {
        color: var(--brand-primary);
    }

    .bottom-nav-fab .bottom-nav-fab-circle {
        width: 2.4rem;
        height: 2.4rem;
        border-radius: 50%;
        background: var(--brand-gradient);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: var(--shadow-brand);
        margin-top: -0.9rem;
        border: 3px solid var(--surface);
        transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    }

    .bottom-nav-fab:active .bottom-nav-fab-circle {
        transform: scale(0.92);
    }

    .bottom-nav-fab .bottom-nav-fab-circle i {
        color: #fff;
    }

    .bottom-nav-fab.active .bottom-nav-fab-circle,
    .bottom-nav-fab.active {
        color: var(--brand-primary);
    }

    /* Desktop-only detailed-form nav link collapses into the "Plus" sheet on mobile */
    .desktop-only-nav {
        display: none !important;
    }
}

/* ---------- Bottom sheet (offcanvas) ---------- */

.offcanvas-bottom {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.offcanvas-bottom::before {
    content: "";
    position: absolute;
    top: 0.55rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2.5rem;
    height: 0.28rem;
    border-radius: 999px;
    background: var(--border-subtle);
}
.offcanvas-bottom .list-group-item-action {
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.offcanvas-bottom .list-group-item-action:hover {
    background-color: var(--surface-muted);
}

/* ---------- Misc ---------- */

.kpi-card {
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: var(--surface);
    padding: 1rem 1.1rem;
    transition: box-shadow var(--transition), transform var(--transition);
}
@media (hover: hover) and (pointer: fine) {
    .kpi-card:hover {
        box-shadow: var(--shadow-lg);
        transform: translateY(-2px);
    }
}
.kpi-card .kpi-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-primary-light);
    color: var(--brand-primary);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}
/* Qualified as .kpi-icon.kpi-icon-* (not just .kpi-icon-*) to match
   .kpi-card .kpi-icon's specificity - both are two-selector compounds, so
   source order (these declared after) correctly decides the winner. A
   bare single-class .kpi-icon-amber would silently lose that fight and
   never override the base brand-tinted background/color at all. */
.kpi-icon.kpi-icon-emerald { background: var(--accent-emerald-light); color: var(--accent-emerald); }
.kpi-icon.kpi-icon-amber   { background: var(--accent-amber-light);   color: var(--accent-amber); }
.kpi-icon.kpi-icon-rose    { background: var(--accent-rose-light);    color: var(--accent-rose); }
.kpi-icon.kpi-icon-sky     { background: var(--accent-sky-light);     color: var(--accent-sky); }
.kpi-icon.kpi-icon-violet  { background: var(--accent-violet-light);  color: var(--accent-violet); }
.kpi-icon.kpi-icon-teal    { background: var(--accent-teal-light);    color: var(--accent-teal); }

.page-header {
    margin-bottom: 1.25rem;
}

.icon-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius);
    background: var(--brand-gradient);
    color: #fff;
    font-size: 1.4rem;
    overflow: hidden;
}
.icon-avatar-soft {
    background: var(--brand-primary-light);
    color: var(--brand-primary);
}
.icon-avatar-success {
    background: var(--accent-emerald-light);
    color: var(--accent-emerald);
}
.icon-avatar-circle {
    border-radius: 50%;
}
.icon-avatar-lg {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.75rem;
}

/* ---------- Chat (assistant) ---------- */

.chat-bubble {
    max-width: 85%;
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius);
    white-space: pre-line;
    animation: chat-bubble-in 220ms var(--ease) both;
}
@keyframes chat-bubble-in {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-bubble-user {
    background: var(--brand-gradient);
    color: #fff;
    border-bottom-right-radius: 0.25rem;
}
.chat-bubble-assistant {
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    border-bottom-left-radius: 0.25rem;
}

/* ---------- Pagination ---------- */

.pagination .page-link {
    border: none;
    color: var(--text-muted-2);
    font-weight: 600;
    border-radius: var(--radius-sm);
    margin: 0 0.15rem;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.pagination .page-link:hover {
    background-color: var(--brand-primary-light);
    color: var(--brand-primary);
}
.pagination .page-item.disabled .page-link {
    background: transparent;
    color: var(--pagination-disabled);
}
.pagination .page-item:not(.disabled):not(.active) .page-link {
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

/* ---------- Back navigation ---------- */

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-muted-2);
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    margin-bottom: 0.75rem;
    transition: color var(--transition-fast);
}

.back-link i {
    transition: transform var(--transition-fast);
}

.back-link:hover {
    color: var(--brand-primary);
    text-decoration: none;
}
.back-link:hover i {
    transform: translateX(-3px);
}

/* ---------- Autocomplete (unchanged behaviour, refreshed look) ---------- */

.autocomplete {
    position: relative;
}

.autocomplete-results {
    position: absolute;
    z-index: 1000;
    width: 100%;
    max-height: 240px;
    overflow-y: auto;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    margin-top: 0.25rem;
}

.autocomplete-results:empty {
    border: none;
    box-shadow: none;
}

.autocomplete-results .list-group {
    border-radius: var(--radius-sm);
    overflow: hidden;
    animation: autocomplete-in 150ms var(--ease) both;
}
@keyframes autocomplete-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.autocomplete-results .list-group-item-action {
    transition: background-color var(--transition-fast);
}

.autocomplete--scannable .autocomplete-input,
.autocomplete--quickcreate .autocomplete-input {
    padding-right: 2.6rem;
}

.autocomplete-scan-btn,
.autocomplete-quickcreate-btn {
    position: absolute;
    top: 50%;
    right: 0.4rem;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-primary-light);
    border: none;
    border-radius: 50%;
    color: var(--brand-primary);
    font-size: 1rem;
    z-index: 2;
    transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.autocomplete-scan-btn:hover,
.autocomplete-quickcreate-btn:hover {
    background: var(--brand-primary);
    color: #fff;
}
.autocomplete-scan-btn:active,
.autocomplete-quickcreate-btn:active {
    transform: translateY(-50%) scale(0.92);
}

/* ---------- Modals (scan + quick-create) ---------- */

.modal-content {
    --bs-modal-bg: var(--surface);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.modal-header {
    border-bottom: 1px solid var(--border-subtle);
    padding: 1rem 1.25rem;
}
.modal-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
}
.modal-title i {
    color: var(--brand-primary);
}
.modal-body {
    padding: 1.25rem;
}
.spinner-border {
    color: var(--brand-primary);
}

#scan-modal-reader {
    border-radius: var(--radius);
    overflow: hidden;
    background: #111;
    min-height: 240px;
}

/* A tappable hero scan button (e.g. quick-sale scan page): a soft brand-gradient
   fill with a gentle pulsing ring to invite the tap, instead of a plain flat button. */
.scan-cta {
    background: var(--brand-gradient) !important;
    border: none !important;
    animation: scan-cta-pulse 2.4s ease-in-out infinite;
}
@keyframes scan-cta-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--brand-primary-rgb), 0.35); }
    50% { box-shadow: 0 0 0 16px rgba(var(--brand-primary-rgb), 0); }
}

/* Bootstrap's own z-index (backdrop 1050 / modal 1055) already outranks the
   bottom nav (1030) on paper, but a fixed-position bottom nav can still
   appear to "win" visually depending on paint order — hide it outright
   while any modal is open so there's no ambiguity about what's tappable. */
body.modal-open .bottom-nav {
    display: none;
}

/* ---------- Shared "transactional form" page layout ----------
   Achat/Pertes/Charge all used a bare .card with a small inline max-width,
   left-stuck on wide screens with a lot of dead space beside it. One
   shared class, one fix. */
.form-page-card {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* Assistant chat: bubbles/input stretching edge-to-edge on a wide desktop
   screen is hard to read (this is exactly why chat UIs keep a centered
   column even on ultra-wide monitors) - same centering idea as
   .form-page-card, just a bit wider since chat benefits from more room
   than a form. */
.chat-page-shell {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* A small read-only summary/totals block (e.g. an invoice's HT/TVA/final
   breakdown) - capped and pushed to the right on desktop, echoing how the
   PDF version of the same invoice right-aligns its own totals table
   (table.totals { margin-left: 55% } in invoice_pdf.html), instead of
   sitting stuck against the left edge with dead space beside it. */
.summary-card {
    max-width: 360px;
    margin-left: auto;
}

/* WhatsApp is a fixed brand color, not this app's own brand - stays a
   literal hex rather than riding --brand-primary, but still gets the same
   hover/active/focus affordances every other button in the app gets. */
.btn-whatsapp {
    --bs-btn-color: #fff;
    --bs-btn-bg: #25d366;
    --bs-btn-border-color: #25d366;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1ebe5b;
    --bs-btn-hover-border-color: #1ebe5b;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1aa64f;
    --bs-btn-active-border-color: #1aa64f;
    --bs-btn-focus-shadow-rgb: 37, 211, 102;
}

/* ---------- Money fields (Prix, Remise, Montant, ...) ---------- */

.input-money .input-group-text {
    background: var(--surface-muted);
    border-color: var(--border-subtle);
    color: var(--text-muted-2);
    font-weight: 700;
    font-size: 0.8rem;
}

.input-money input {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.input-money.input-money-lg input {
    font-size: 1.1rem;
}

/* ---------- Empty states (empty tables/lists) ---------- */

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

.empty-state-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-primary-light);
    color: var(--brand-primary);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.empty-state h2 {
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
}

.empty-state p {
    color: var(--text-muted-2);
    margin-bottom: 1.25rem;
}

/* Bootstrap's .card is `display:flex;flex-direction:column`, so its direct
   children stretch to fill the cross axis (full width) by default - a giant
   edge-to-edge CTA button is fine on mobile but looks oversized once there's
   real desktop width to work with. Cap it back to a normal button size from
   tablet up, matching the same breakpoint the desktop navbar treatment uses. */
@media (min-width: 768px) {
    .empty-state .btn {
        align-self: center;
        width: auto;
    }
}

/* ---------- Login ---------- */

.login-shell {
    min-height: 100dvh;
    padding: 2rem 0;
}

.login-card {
    max-width: 860px;
    overflow: hidden;
}

.login-panel {
    background: linear-gradient(160deg, var(--brand-primary) 0%, var(--brand-primary-darker) 100%);
}

/* The second login step, for platform admins (templates/accounts/two_factor_*.html). */
.two-factor-card {
    max-width: 480px;
}
.two-factor-code-input {
    font-size: 1.5rem;
    letter-spacing: 0.25em;
    text-align: center;
}
.two-factor-steps {
    padding-left: 1.25rem;
}
.two-factor-steps li {
    margin-bottom: 0.75rem;
}
/* Black on white whatever the theme: that's what scanners read. */
.two-factor-qr {
    display: flex;
    justify-content: center;
    margin: 0.75rem 0 0.5rem;
}
.two-factor-qr svg {
    width: 200px;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}
.two-factor-help {
    font-size: 0.875rem;
    color: var(--text-muted-2);
}
.two-factor-help summary {
    cursor: pointer;
    color: var(--brand-link);
}
.two-factor-key {
    display: block;
    font-size: 1rem;
    letter-spacing: 0.05em;
    word-spacing: 0.25em;
}
.backup-codes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}
.backup-codes code {
    display: block;
    padding: 0.5rem;
    text-align: center;
    font-size: 1.05rem;
    letter-spacing: 0.1em;
    color: var(--bs-body-color);
    background: var(--surface-muted);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

/* ---------- Desktop navbar active link ---------- */

@media (min-width: 768px) {
    .navbar .nav-link {
        border-radius: var(--radius-sm);
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
        transition: background-color 0.15s ease;
    }

    .navbar .nav-link:hover {
        background: rgba(255, 255, 255, 0.08);
    }

    .navbar .nav-link.active {
        background: rgba(255, 255, 255, 0.14);
        color: #fff !important;
    }
}

/* ---------- Theme switch (light / dark, see core/static/theme.js) ---------- */

.theme-switch-app {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, 0.35);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.12);
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.5);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(255, 255, 255, 0.18);
    line-height: 1;
}
html[data-bs-theme="dark"] .theme-switch-icon-light,
html:not([data-bs-theme="dark"]) .theme-switch-icon-dark {
    display: none;
}

/* ---------- Dark theme ----------
   Bootstrap 5.3 restyles its own components from data-bs-theme (set on
   <html> by theme.js); this block re-themes the app's own tokens. It uses
   html[...] - not just [data-bs-theme] - because base.html re-declares a
   shop's brand tokens on :root after this file, and those must not undo
   the ones here. The page is navy-tinted like the platform admin's dark
   theme; a shop's brand color keeps its hue, lightened where it is text. */

html[data-bs-theme="dark"] {
    --surface: #16172b;
    --surface-muted: #1c1d33;
    --body-bg: #0e0f1c;
    --border-subtle: #2a2c47;
    --text-muted-2: #9ca3af;
    --form-label-color: #d1d5db;
    --pagination-disabled: #4b5563;

    --brand-primary-light: rgba(var(--brand-primary-rgb), 0.2);
    --brand-link: color-mix(in srgb, var(--brand-primary) 55%, #fff);
    --brand-link-hover: color-mix(in srgb, var(--brand-primary) 35%, #fff);

    --accent-emerald: #34d399;
    --accent-emerald-light: rgba(5, 150, 105, 0.2);
    --accent-amber: #fbbf24;
    --accent-amber-light: rgba(217, 119, 6, 0.2);
    --accent-rose: #fb7185;
    --accent-rose-light: rgba(225, 29, 72, 0.2);
    --accent-sky: #38bdf8;
    --accent-sky-light: rgba(2, 132, 199, 0.2);
    --accent-violet: #a78bfa;
    --accent-violet-light: rgba(124, 58, 237, 0.22);
    --accent-teal: #2dd4bf;
    --accent-teal-light: rgba(13, 148, 136, 0.2);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55);

    /* Bootstrap's own base colors, on the same navy palette. */
    --bs-body-bg: #0e0f1c;
    --bs-body-color: #e5e7eb;
    --bs-secondary-color: #9ca3af;
    --bs-tertiary-bg: #1c1d33;
    --bs-border-color: #2a2c47;
    --bs-emphasis-color: #fff;
}

html[data-bs-theme="dark"] .offcanvas {
    --bs-offcanvas-bg: var(--surface);
}
html[data-bs-theme="dark"] .list-group {
    --bs-list-group-bg: var(--surface);
}
html[data-bs-theme="dark"] .dropdown-menu {
    --bs-dropdown-bg: var(--surface);
}

/* The super-admin bar stays amber - an elevated mode, whatever the theme. */
html[data-bs-theme="dark"] .superadmin-bar {
    background: #3a2a05;
    color: #fde68a;
    border-bottom-color: #78350f;
}
html[data-bs-theme="dark"] .superadmin-bar-exit {
    --bs-btn-color: #fde68a;
    --bs-btn-border-color: #b45309;
}