/* ============================================================================
   Finivo POS — Theme Layer
   ----------------------------------------------------------------------------
   A cohesive design-token palette layered on top of CDN Bootstrap 5.3.
   Loaded AFTER bootstrap.min.css so it wins on specificity/order.

   How it works:
   - Brand + surface tokens live on :root (shared) and are remapped per theme.
   - We override Bootstrap's own `--bs-*` variables so ALL components (cards,
     tables, forms, modals, dropdowns, alerts, badges, utilities) inherit the
     palette automatically. Buttons are the exception — Bootstrap compiles
     literal colors into `.btn-*`, so those variants are re-declared here.
   - Theme is switched via `data-bs-theme="dark|light"` on <html>. Dark is the
     product default; a navbar toggle persists the choice to localStorage.
   ========================================================================== */

/* ---- Brand scale (theme-independent) ------------------------------------- */
:root {
    --fv-brand:        #5b7cfa;
    --fv-brand-600:    #4a6bf0;
    --fv-brand-700:    #3d5ce0;
    --fv-brand-300:    #90a8ff;
    --fv-brand-rgb:    91, 124, 250;

    --fv-success:      #2fbf71;
    --fv-success-rgb:  47, 191, 113;
    --fv-warning:      #f0b429;
    --fv-warning-rgb:  240, 180, 41;
    --fv-danger:       #ef4d5a;
    --fv-danger-rgb:   239, 77, 90;
    --fv-info:         #38b6d9;
    --fv-info-rgb:     56, 182, 217;

    --fv-radius:       0.65rem;
    --fv-radius-sm:    0.45rem;
    --fv-transition:   150ms ease;
}

/* ==========================================================================
   DARK THEME (default)
   ========================================================================== */
:root,
[data-bs-theme="dark"] {
    color-scheme: dark;

    /* Surface scale */
    --fv-bg:        #0e1420;   /* page */
    --fv-surface:   #161e2d;   /* cards, panels */
    --fv-surface-2: #1c2537;   /* card headers, inputs, elevated */
    --fv-surface-3: #232e43;   /* hover / active rows */
    --fv-border:    #2a3547;
    --fv-border-strong: #34425a;
    --fv-text:      #e6ebf3;
    --fv-text-muted:#93a1b8;
    --fv-shadow:    0 1px 2px rgba(0,0,0,.35), 0 8px 24px -12px rgba(0,0,0,.55);

    /* --- Map Bootstrap tokens onto our palette --- */
    --bs-body-bg:            var(--fv-bg);
    --bs-body-bg-rgb:        14, 20, 32;
    --bs-body-color:         var(--fv-text);
    --bs-body-color-rgb:     230, 235, 243;
    --bs-emphasis-color:     #ffffff;
    --bs-secondary-color:    var(--fv-text-muted);
    --bs-secondary-bg:       var(--fv-surface-2);
    --bs-tertiary-bg:        var(--fv-surface);
    --bs-tertiary-color:     var(--fv-text-muted);

    --bs-border-color:       var(--fv-border);
    --bs-border-color-translucent: rgba(255,255,255,.08);

    --bs-primary:            var(--fv-brand);
    --bs-primary-rgb:        var(--fv-brand-rgb);
    --bs-primary-text-emphasis: var(--fv-brand-300);
    --bs-link-color:         var(--fv-brand-300);
    --bs-link-color-rgb:     144, 168, 255;
    --bs-link-hover-color:   #b8c7ff;

    --bs-success-rgb:        var(--fv-success-rgb);
    --bs-warning-rgb:        var(--fv-warning-rgb);
    --bs-danger-rgb:         var(--fv-danger-rgb);
    --bs-info-rgb:           var(--fv-info-rgb);

    --bs-heading-color:      #f3f6fb;

    /* Component surfaces */
    --bs-card-bg:            var(--fv-surface);
    --bs-card-cap-bg:        var(--fv-surface-2);
    --bs-card-border-color:  var(--fv-border);
    --bs-modal-bg:           var(--fv-surface);
    --bs-modal-header-border-color: var(--fv-border);
    --bs-modal-footer-border-color: var(--fv-border);
    --bs-dropdown-bg:        var(--fv-surface-2);
    --bs-dropdown-border-color: var(--fv-border);
    --bs-dropdown-link-color:   var(--fv-text);
    --bs-dropdown-link-hover-bg: var(--fv-surface-3);
    --bs-dropdown-link-hover-color: #ffffff;
    --bs-list-group-bg:      var(--fv-surface);
    --bs-list-group-border-color: var(--fv-border);

    /* Tables */
    --bs-table-bg:           transparent;
    --bs-table-color:        var(--fv-text);
    --bs-table-border-color: var(--fv-border);
    --bs-table-striped-bg:   rgba(255,255,255,.025);
    --bs-table-hover-bg:     var(--fv-surface-3);
    --bs-table-hover-color:  #ffffff;
}

/* ==========================================================================
   LIGHT THEME
   ========================================================================== */
[data-bs-theme="light"] {
    color-scheme: light;

    --fv-bg:        #f4f6fb;
    --fv-surface:   #ffffff;
    --fv-surface-2: #f6f8fc;
    --fv-surface-3: #eef2f9;
    --fv-border:    #e2e8f0;
    --fv-border-strong: #cbd5e1;
    --fv-text:      #1e293b;
    --fv-text-muted:#64748b;
    --fv-shadow:    0 1px 2px rgba(16,24,40,.06), 0 12px 24px -16px rgba(16,24,40,.2);

    --bs-body-bg:            var(--fv-bg);
    --bs-body-bg-rgb:        244, 246, 251;
    --bs-body-color:         var(--fv-text);
    --bs-body-color-rgb:     30, 41, 59;
    --bs-emphasis-color:     #0b1220;
    --bs-secondary-color:    var(--fv-text-muted);
    --bs-secondary-bg:       var(--fv-surface-2);
    --bs-tertiary-bg:        var(--fv-surface-3);

    --bs-border-color:       var(--fv-border);
    --bs-border-color-translucent: rgba(16,24,40,.08);

    --bs-primary:            var(--fv-brand-600);
    --bs-primary-rgb:        var(--fv-brand-rgb);
    --bs-link-color:         var(--fv-brand-700);
    --bs-link-color-rgb:     61, 92, 224;
    --bs-link-hover-color:   var(--fv-brand);

    --bs-heading-color:      #0f172a;

    --bs-card-bg:            var(--fv-surface);
    --bs-card-cap-bg:        var(--fv-surface-2);
    --bs-card-border-color:  var(--fv-border);
    --bs-modal-bg:           var(--fv-surface);
    --bs-dropdown-bg:        var(--fv-surface);
    --bs-dropdown-border-color: var(--fv-border);
    --bs-dropdown-link-hover-bg: var(--fv-surface-3);
    --bs-list-group-bg:      var(--fv-surface);

    --bs-table-bg:           transparent;
    --bs-table-border-color: var(--fv-border);
    --bs-table-striped-bg:   rgba(16,24,40,.02);
    --bs-table-hover-bg:     var(--fv-surface-3);
}

/* ==========================================================================
   BASE
   ========================================================================== */
body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
/* Neutralise the legacy `bg-light` on <body> so the theme owns the ground. */
body.bg-light { background-color: var(--bs-body-bg) !important; }

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

::selection { background: rgba(var(--fv-brand-rgb), .35); }

a { transition: color var(--fv-transition); }

/* Consistent, on-brand focus ring across all interactive elements */
.form-control:focus,
.form-select:focus,
.btn:focus-visible,
.form-check-input:focus,
.page-link:focus,
.dropdown-item:focus-visible,
.nav-link:focus-visible {
    border-color: var(--fv-brand);
    box-shadow: 0 0 0 .2rem rgba(var(--fv-brand-rgb), .3);
    outline: none;
}

/* Theme toggle button */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: var(--fv-radius-sm);
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.04);
    color: #c3cde0;
    cursor: pointer;
    transition: background-color var(--fv-transition), color var(--fv-transition);
}
.theme-toggle:hover { background: rgba(255,255,255,.1); color: #fff; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline; }
[data-bs-theme="light"] .theme-toggle .icon-sun { display: inline; }
[data-bs-theme="light"] .theme-toggle .icon-moon { display: none; }

/* ==========================================================================
   APP SHELL  (fixed sidebar + sticky topbar; content in a centered container)
   --------------------------------------------------------------------------
   The tenant app runs on a left-sidebar shell. The sidebar is kept visually
   DARK in both colour modes for a stable brand identity (same decision the old
   top navbar made); the topbar and content flip with the theme. On <lg the
   sidebar becomes an off-canvas drawer; a desktop rail-collapse is remembered
   in localStorage and expands on hover.
   ========================================================================== */
:root {
    --fv-sidebar-w:    262px;
    --fv-sidebar-rail: 74px;
    --fv-topbar-h:     60px;
    --fv-sidebar-bg:   linear-gradient(180deg, #141c2b 0%, #0f151f 100%);
    --fv-sidebar-text: #c3cde0;
}

.app-shell { min-height: 100vh; }

/* ---- Sidebar ------------------------------------------------------------- */
.app-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--fv-sidebar-w);
    display: flex;
    flex-direction: column;
    background: var(--fv-sidebar-bg);
    border-right: 1px solid var(--fv-border);
    z-index: 1040;
    transition: transform .22s ease, width .18s ease, box-shadow .18s ease;
}
.sidebar-head {
    flex: none;
    height: var(--fv-topbar-h);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 1rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.sidebar-brand {
    display: flex; align-items: center; gap: .6rem;
    color: #fff; font-weight: 700; letter-spacing: .2px;
    text-decoration: none; white-space: nowrap; overflow: hidden;
}
.sidebar-brand-mark {
    width: .7rem; height: .7rem; flex: none;
    border-radius: 50%;
    background: var(--fv-brand);
    box-shadow: 0 0 0 3px rgba(var(--fv-brand-rgb), .25);
}
.sidebar-close {
    background: none; border: none; color: var(--fv-sidebar-text);
    font-size: 1.5rem; line-height: 1; padding: 0 .25rem; cursor: pointer;
}
.sidebar-close:hover { color: #fff; }

.sidebar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .6rem .55rem 1.25rem;
}

/* Top-level items (Dashboard, POS) + group toggles share the row look. */
.nav-solo,
.nav-group-toggle {
    display: flex; align-items: center; gap: .7rem;
    width: 100%;
    padding: .55rem .7rem;
    margin: .12rem 0;
    border: none; background: transparent; text-align: left;
    border-radius: var(--fv-radius-sm);
    color: var(--fv-sidebar-text);
    font-size: .905rem; font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--fv-transition), color var(--fv-transition);
}
.nav-solo:hover,
.nav-group-toggle:hover {
    background: rgba(255,255,255,.06);
    color: #fff;
}
.nav-solo.active {
    background: rgba(var(--fv-brand-rgb), .18);
    color: #fff;
    box-shadow: inset 2px 0 0 var(--fv-brand);
}
.nav-solo.active .nav-ico { color: var(--fv-brand-300); }
.nav-ico { flex: none; opacity: .92; }
.nav-txt { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-chevron { flex: none; opacity: .55; transition: transform .18s ease; }
.nav-group-toggle[aria-expanded="true"] .nav-chevron { transform: rotate(90deg); }

/* POS — the primary daily action, gold accent. */
.nav-solo--pos { color: #ffd27a; }
.nav-solo--pos .nav-ico { color: var(--fv-warning); }
.nav-solo--pos:hover { background: rgba(var(--fv-warning-rgb), .14); color: #ffdd94; }
.nav-solo--pos.active {
    background: rgba(var(--fv-warning-rgb), .18);
    color: #ffdd94;
    box-shadow: inset 2px 0 0 var(--fv-warning);
}
.nav-solo--pos.active .nav-ico { color: var(--fv-warning); }

/* Sub-items under a group. */
.nav-group-items {
    margin: .1rem 0 .3rem 1.55rem;
    padding-left: .55rem;
    border-left: 1px solid rgba(255,255,255,.09);
}
.nav-sub {
    display: block;
    padding: .4rem .6rem;
    margin: .06rem 0;
    border-radius: var(--fv-radius-sm);
    color: color-mix(in srgb, var(--fv-sidebar-text) 78%, transparent);
    font-size: .86rem; text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background-color var(--fv-transition), color var(--fv-transition);
}
.nav-sub:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav-sub.active {
    background: rgba(var(--fv-brand-rgb), .16);
    color: #fff; font-weight: 500;
}
.nav-subhead {
    font-size: .66rem; text-transform: uppercase; letter-spacing: .06em;
    color: color-mix(in srgb, var(--fv-sidebar-text) 55%, transparent);
    padding: .55rem .6rem .2rem;
}

/* ---- Main column --------------------------------------------------------- */
.app-main {
    margin-left: var(--fv-sidebar-w);
    min-height: 100vh;
    display: flex; flex-direction: column;
    transition: margin-left .18s ease;
}
.app-topbar {
    position: sticky; top: 0;
    z-index: 1030;
    height: var(--fv-topbar-h);
    display: flex; align-items: center; gap: .75rem;
    padding: 0 1.25rem;
    background: color-mix(in srgb, var(--fv-surface) 88%, transparent);
    -webkit-backdrop-filter: saturate(150%) blur(8px);
    backdrop-filter: saturate(150%) blur(8px);
    border-bottom: 1px solid var(--fv-border);
}
.topbar-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: none;
    border-radius: var(--fv-radius-sm);
    border: 1px solid var(--fv-border);
    background: var(--fv-surface-2);
    color: var(--fv-text-muted);
    cursor: pointer;
    transition: background-color var(--fv-transition), color var(--fv-transition);
}
.topbar-btn:hover { background: var(--fv-surface-3); color: var(--fv-text); }
.topbar-context { min-width: 0; display: flex; align-items: center; }
.topbar-store {
    font-weight: 600; color: var(--fv-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .55rem; }

/* Re-skin the theme toggle for the themed topbar (its default is dark-navbar). */
.app-topbar .theme-toggle {
    border-color: var(--fv-border);
    background: var(--fv-surface-2);
    color: var(--fv-text-muted);
}
.app-topbar .theme-toggle:hover { background: var(--fv-surface-3); color: var(--fv-text); }

.user-menu {
    display: flex; align-items: center; gap: .5rem;
    padding: .22rem .7rem .22rem .28rem;
    border: 1px solid var(--fv-border);
    background: var(--fv-surface-2);
    border-radius: 999px;
    color: var(--fv-text);
    cursor: pointer;
    transition: background-color var(--fv-transition), border-color var(--fv-transition);
}
.user-menu:hover { background: var(--fv-surface-3); border-color: var(--fv-border-strong); }
.user-avatar {
    width: 28px; height: 28px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--fv-brand); color: #fff;
    font-size: .8rem; font-weight: 700;
}
.user-name { font-size: .88rem; font-weight: 500; }

/* ---- Navigation-link filter (sidebar) ------------------------------------ */
.nav-search {
    flex: none;
    position: relative;
    margin: .6rem .55rem .1rem;
}
.nav-search-ico {
    position: absolute; top: 50%; left: .6rem;
    transform: translateY(-50%);
    color: color-mix(in srgb, var(--fv-sidebar-text) 60%, transparent);
    pointer-events: none;
}
.nav-search-input {
    width: 100%;
    padding: .42rem .6rem .42rem 1.9rem;
    border-radius: var(--fv-radius-sm);
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.05);
    color: var(--fv-sidebar-text);
    font-size: .85rem;
    outline: none;
    transition: background-color var(--fv-transition), border-color var(--fv-transition);
}
.nav-search-input::placeholder { color: color-mix(in srgb, var(--fv-sidebar-text) 55%, transparent); }
.nav-search-input:focus {
    background: rgba(255,255,255,.08);
    border-color: var(--fv-brand);
}

/* ---- Global record search (topbar) --------------------------------------- */
.global-search-root { flex: 1 1 auto; min-width: 0; display: flex; }
.global-search {
    position: relative;
    width: 100%;
    max-width: 30rem;
    margin: 0 auto 0 .5rem;
}
.global-search-box { position: relative; display: flex; align-items: center; }
.global-search-ico {
    position: absolute; left: .7rem;
    color: var(--fv-text-muted); pointer-events: none;
}
.global-search-input {
    width: 100%;
    padding: .45rem .7rem .45rem 2.1rem;
    border-radius: 999px;
    border: 1px solid var(--fv-border);
    background: var(--fv-surface-2);
    color: var(--fv-text);
    font-size: .88rem;
    outline: none;
    transition: background-color var(--fv-transition), border-color var(--fv-transition);
}
.global-search-input::placeholder { color: var(--fv-text-muted); }
.global-search-input:focus { border-color: var(--fv-brand); background: var(--fv-surface-3); }
.global-search-spinner {
    position: absolute; right: .8rem;
    width: 14px; height: 14px;
    border: 2px solid var(--fv-border-strong);
    border-top-color: var(--fv-brand);
    border-radius: 50%;
    animation: fv-spin .6s linear infinite;
}
@keyframes fv-spin { to { transform: rotate(360deg); } }

.global-search-panel {
    position: absolute; top: calc(100% + .4rem); left: 0; right: 0;
    z-index: 1040;
    max-height: 70vh; overflow-y: auto;
    padding: .35rem;
    border-radius: var(--fv-radius);
    border: 1px solid var(--fv-border);
    background: var(--fv-surface);
    box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
.gs-group-head {
    font-size: .66rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--fv-text-muted);
    padding: .5rem .6rem .2rem;
}
.gs-item {
    display: flex; flex-direction: column; gap: .05rem;
    padding: .4rem .6rem;
    border-radius: var(--fv-radius-sm);
    text-decoration: none;
    color: var(--fv-text);
    transition: background-color var(--fv-transition);
}
.gs-item:hover { background: var(--fv-surface-3); }
.gs-item-label { font-size: .88rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-item-sub { font-size: .76rem; color: var(--fv-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-empty { padding: .7rem .6rem; font-size: .84rem; color: var(--fv-text-muted); }

/* Shared list-screen search box width. */
.fv-list-search { max-width: 24rem; }

@media (max-width: 767.98px) {
    .global-search { max-width: none; }
    .fv-list-search { max-width: none; }
}

.app-content { flex: 1 1 auto; padding: 1.5rem 1.5rem 3rem; }
.app-container { width: 100%; max-width: 1480px; margin: 0 auto; }

/* Mobile drawer backdrop. */
.app-backdrop {
    position: fixed; inset: 0;
    background: rgba(4, 8, 14, .55);
    opacity: 0; visibility: hidden;
    z-index: 1035;
    transition: opacity .2s ease;
}
html.sidebar-open .app-backdrop { opacity: 1; visibility: visible; }

/* ---- Desktop rail collapse (icons only; hover to peek the full sidebar) --- */
@media (min-width: 992px) {
    html.sidebar-collapsed .app-sidebar { width: var(--fv-sidebar-rail); }
    html.sidebar-collapsed .app-main { margin-left: var(--fv-sidebar-rail); }
    html.sidebar-collapsed .app-sidebar:not(:hover) .nav-txt,
    html.sidebar-collapsed .app-sidebar:not(:hover) .nav-chevron,
    html.sidebar-collapsed .app-sidebar:not(:hover) .nav-subhead,
    html.sidebar-collapsed .app-sidebar:not(:hover) .sidebar-brand-text {
        display: none;
    }
    html.sidebar-collapsed .app-sidebar:not(:hover) .nav-group .collapse { display: none !important; }
    html.sidebar-collapsed .app-sidebar:not(:hover) .nav-solo,
    html.sidebar-collapsed .app-sidebar:not(:hover) .nav-group-toggle { justify-content: center; }
    html.sidebar-collapsed .app-sidebar:not(:hover) .sidebar-head { justify-content: center; }
    html.sidebar-collapsed .app-sidebar:hover {
        width: var(--fv-sidebar-w);
        box-shadow: 12px 0 40px -12px rgba(0,0,0,.55);
        z-index: 1055;
    }
}

/* ---- Super-admin identity: same shell, red accent ------------------------ */
.app-sidebar--admin {
    background: linear-gradient(180deg, #2a1315 0%, #170b0d 100%);
    border-right-color: #4a1f24;
}
.app-sidebar--admin .sidebar-brand-mark {
    background: var(--fv-danger);
    box-shadow: 0 0 0 3px rgba(var(--fv-danger-rgb), .25);
}
.app-sidebar--admin .nav-solo.active {
    background: rgba(var(--fv-danger-rgb), .2);
    box-shadow: inset 2px 0 0 var(--fv-danger);
}
.app-sidebar--admin .nav-solo.active .nav-ico { color: #ff9aa3; }
.topbar-badge {
    display: inline-flex; align-items: center;
    padding: .18rem .55rem;
    font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    border-radius: 999px;
    color: #ff9aa3;
    background: rgba(var(--fv-danger-rgb), .14);
    border: 1px solid rgba(var(--fv-danger-rgb), .35);
}
.app-topbar--admin .user-avatar { background: var(--fv-danger); }

/* ==========================================================================
   AUTH SCREEN  (login / super-admin login / forced password change)
   --------------------------------------------------------------------------
   Shared guest chrome: a centered branded panel over the auth gradient. All
   colour is token-driven, so it themes both modes.
   ========================================================================== */
.auth-wrap {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 2rem 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
}
.auth-brand {
    display: flex; align-items: center; gap: .8rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.auth-logo {
    width: 46px; height: 46px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 13px;
    background: linear-gradient(145deg, var(--fv-brand-300), var(--fv-brand-700));
    color: #fff; font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em;
    box-shadow: 0 8px 20px -8px rgba(var(--fv-brand-rgb), .8), inset 0 1px 0 rgba(255,255,255,.25);
}
.auth-brand--admin .auth-logo {
    background: linear-gradient(145deg, #ff8f98, #b02330);
    box-shadow: 0 8px 20px -8px rgba(var(--fv-danger-rgb), .8), inset 0 1px 0 rgba(255,255,255,.25);
}
.auth-wordmark { font-size: 1.35rem; font-weight: 700; color: var(--bs-heading-color); line-height: 1.1; }
.auth-tag { font-size: .8rem; color: var(--fv-text-muted); margin-top: .1rem; }
.auth-card {
    border: 1px solid var(--fv-border);
    box-shadow: 0 24px 64px -20px rgba(0,0,0,.55);
    overflow: hidden;
}
.auth-card .card-body { padding: 1.75rem 1.6rem; }
.auth-card::before {
    content: "";
    display: block;
    height: 3px;
    margin: -1px -1px 0;
    background: linear-gradient(90deg, var(--fv-brand), var(--fv-info));
}
.auth-card--admin::before { background: linear-gradient(90deg, var(--fv-danger), #ff9aa3); }
.auth-title { font-size: 1.1rem; font-weight: 600; color: var(--bs-heading-color); }
.auth-sub { font-size: .85rem; color: var(--fv-text-muted); }
.auth-foot { text-align: center; font-size: .76rem; color: var(--fv-text-muted); margin: 1.25rem 0 0; }

/* ==========================================================================
   CARDS
   ========================================================================== */
.card {
    border: 1px solid var(--bs-card-border-color);
    border-radius: var(--fv-radius);
    box-shadow: var(--fv-shadow);
    transition: border-color var(--fv-transition), transform var(--fv-transition), box-shadow var(--fv-transition);
}
.card-header {
    background-color: var(--bs-card-cap-bg);
    border-bottom: 1px solid var(--bs-card-border-color);
    font-weight: 600;
}
/* Dashboard stat tiles: subtle lift + brand top accent */
.row.g-3 > [class*="col-"] > .card {
    position: relative;
    overflow: hidden;
}
.card .display-6 { color: var(--bs-heading-color); font-weight: 600; }
.card .h4 { color: var(--bs-heading-color); }
.card:hover { border-color: var(--fv-border-strong); }

/* Accent bar on the top KPI row of the dashboard */
.row.g-3.mb-2 > [class*="col-"] > .card::before {
    content: "";
    position: absolute; inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--fv-brand), var(--fv-info));
    opacity: .9;
}

/* ==========================================================================
   BUTTONS  (Bootstrap compiles literal colors, so re-declare our variants)
   ========================================================================== */
.btn { border-radius: var(--fv-radius-sm); font-weight: 500; transition: all var(--fv-transition); }

.btn-primary {
    --bs-btn-bg: var(--fv-brand);
    --bs-btn-border-color: var(--fv-brand);
    --bs-btn-hover-bg: var(--fv-brand-600);
    --bs-btn-hover-border-color: var(--fv-brand-600);
    --bs-btn-active-bg: var(--fv-brand-700);
    --bs-btn-active-border-color: var(--fv-brand-700);
    --bs-btn-disabled-bg: var(--fv-brand);
    --bs-btn-disabled-border-color: var(--fv-brand);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
}
.btn-outline-primary {
    --bs-btn-color: var(--fv-brand-300);
    --bs-btn-border-color: rgba(var(--fv-brand-rgb), .6);
    --bs-btn-hover-bg: var(--fv-brand);
    --bs-btn-hover-border-color: var(--fv-brand);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--fv-brand-600);
    --bs-btn-active-border-color: var(--fv-brand-600);
}
.btn-success {
    --bs-btn-bg: var(--fv-success); --bs-btn-border-color: var(--fv-success);
    --bs-btn-hover-bg: #28a862; --bs-btn-hover-border-color: #28a862;
    --bs-btn-active-bg: #23985a; --bs-btn-active-border-color: #23985a;
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}
.btn-danger {
    --bs-btn-bg: var(--fv-danger); --bs-btn-border-color: var(--fv-danger);
    --bs-btn-hover-bg: #e13947; --bs-btn-hover-border-color: #e13947;
    --bs-btn-active-bg: #cf313e; --bs-btn-active-border-color: #cf313e;
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}
.btn-warning {
    --bs-btn-bg: var(--fv-warning); --bs-btn-border-color: var(--fv-warning);
    --bs-btn-hover-bg: #e0a51e; --bs-btn-hover-border-color: #e0a51e;
    --bs-btn-color: #241c00; --bs-btn-hover-color: #241c00; --bs-btn-active-color: #241c00;
}
/* Neutral / secondary buttons read as themed surfaces, not muddy grey */
.btn-secondary {
    --bs-btn-bg: var(--fv-surface-3); --bs-btn-border-color: var(--fv-border-strong);
    --bs-btn-hover-bg: var(--fv-border-strong); --bs-btn-hover-border-color: var(--fv-border-strong);
    --bs-btn-color: var(--fv-text); --bs-btn-hover-color: var(--fv-text); --bs-btn-active-color: var(--fv-text);
    --bs-btn-active-bg: var(--fv-border-strong);
}
.btn-outline-secondary {
    --bs-btn-color: var(--fv-text-muted);
    --bs-btn-border-color: var(--fv-border-strong);
    --bs-btn-hover-bg: var(--fv-surface-3);
    --bs-btn-hover-border-color: var(--fv-border-strong);
    --bs-btn-hover-color: var(--fv-text);
}
.btn-light {
    --bs-btn-bg: var(--fv-surface-2); --bs-btn-border-color: var(--fv-border);
    --bs-btn-hover-bg: var(--fv-surface-3); --bs-btn-hover-border-color: var(--fv-border-strong);
    --bs-btn-color: var(--fv-text); --bs-btn-hover-color: var(--fv-text);
}
.btn-outline-light {
    --bs-btn-color: #d6deec; --bs-btn-border-color: rgba(255,255,255,.35);
    --bs-btn-hover-bg: rgba(255,255,255,.1); --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: rgba(255,255,255,.5);
}

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-control, .form-select {
    background-color: var(--fv-surface-2);
    border-color: var(--fv-border);
    color: var(--fv-text);
    border-radius: var(--fv-radius-sm);
    transition: border-color var(--fv-transition), box-shadow var(--fv-transition), background-color var(--fv-transition);
}
.form-control::placeholder { color: color-mix(in srgb, var(--fv-text-muted) 80%, transparent); }
.form-control:focus, .form-select:focus {
    background-color: var(--fv-surface-2);
    color: var(--fv-text);
}
.form-control:disabled, .form-select:disabled {
    background-color: var(--fv-surface);
    opacity: .65;
}
.form-label { font-weight: 500; color: var(--fv-text); margin-bottom: .35rem; }
.input-group-text {
    background-color: var(--fv-surface-3);
    border-color: var(--fv-border);
    color: var(--fv-text-muted);
}
.form-check-input { background-color: var(--fv-surface-2); border-color: var(--fv-border-strong); }
.form-check-input:checked { background-color: var(--fv-brand); border-color: var(--fv-brand); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--fv-danger); }
.invalid-feedback { color: var(--fv-danger); }

/* ==========================================================================
   SELECT2  (searchable account/entity pickers)
   --------------------------------------------------------------------------
   First third-party JS widget in the app. Select2 renders its OWN DOM which
   never inherits Bootstrap's `--bs-*` tokens, so it must be skinned explicitly.
   Everything below is expressed in `--fv-*` tokens, which already remap per
   `data-bs-theme`, so this single block themes BOTH colour modes (CLAUDE.md
   theming rule). The dropdown is appended to <body>, still under html[data-bs-
   theme], so the same tokens apply there.
   ========================================================================== */
.select2-container { width: 100% !important; }

/* Closed control — mirrors .form-select-sm */
.select2-container--default .select2-selection--single {
    background-color: var(--fv-surface-2);
    border: 1px solid var(--fv-border);
    border-radius: var(--fv-radius-sm);
    height: calc(1.5em + .5rem + 2px);
    display: flex;
    align-items: center;
    transition: border-color var(--fv-transition), box-shadow var(--fv-transition);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--fv-text);
    line-height: normal;
    padding-left: .5rem;
    padding-right: 2rem;
    font-size: .875rem;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: color-mix(in srgb, var(--fv-text-muted) 85%, transparent);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: .3rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--fv-text-muted) transparent transparent transparent;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--fv-text-muted) transparent;
}
.select2-container--default .select2-selection__clear {
    color: var(--fv-text-muted);
    margin-right: 1.1rem;
    font-weight: 700;
}
.select2-container--default .select2-selection__clear:hover { color: var(--fv-danger); }

/* Focus / open — same brand ring as native controls */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--fv-brand);
    box-shadow: 0 0 0 .2rem rgba(var(--fv-brand-rgb), .3);
}

/* Invalid line: Select2 hides the native <select>, so carry .is-invalid over to
   the visible control (Select2 renders its container as the select's sibling). */
select.js-select2.is-invalid + .select2-container .select2-selection--single {
    border-color: var(--fv-danger);
}

/* Dropdown panel */
.select2-container--default .select2-dropdown,
.select2-dropdown {
    background-color: var(--fv-surface-2);
    border: 1px solid var(--fv-border-strong);
    border-radius: var(--fv-radius-sm);
    box-shadow: var(--fv-shadow);
    color: var(--fv-text);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--fv-surface);
    border: 1px solid var(--fv-border);
    border-radius: var(--fv-radius-sm);
    color: var(--fv-text);
    outline: none;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--fv-brand);
    box-shadow: 0 0 0 .2rem rgba(var(--fv-brand-rgb), .3);
}

/* Result rows */
.select2-container--default .select2-results__option {
    color: var(--fv-text);
    font-size: .875rem;
    padding: .35rem .6rem;
}
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--fv-brand);
    color: #fff;
}
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option--selected {
    background-color: var(--fv-surface-3);
    color: var(--fv-text);
}
.select2-container--default .select2-results__message { color: var(--fv-text-muted); }

/* Multiple-select variant (reserved for later pickers) */
.select2-container--default .select2-selection--multiple {
    background-color: var(--fv-surface-2);
    border: 1px solid var(--fv-border);
    border-radius: var(--fv-radius-sm);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--fv-surface-3);
    border: 1px solid var(--fv-border-strong);
    color: var(--fv-text);
}

/* ==========================================================================
   TABLES
   ========================================================================== */
.table {
    --bs-table-bg: transparent;
    color: var(--fv-text);
    margin-bottom: 0;
}
.table > thead {
    color: var(--fv-text-muted);
    text-transform: uppercase;
    font-size: .74rem;
    letter-spacing: .04em;
}
.table > thead th {
    background-color: var(--fv-surface-2);
    border-bottom: 1px solid var(--fv-border-strong);
    font-weight: 600;
    white-space: nowrap;
    padding-top: .7rem; padding-bottom: .7rem;
}
.table > tbody > tr { border-color: var(--fv-border); }
.table > tbody > tr:hover > * { background-color: var(--fv-table-hover-bg, var(--fv-surface-3)); }
.table-hover > tbody > tr:hover > * { color: var(--fv-text); }
/* Tables inside cards: seamless, no double border, rounded clip */
.card > .table-responsive { border-radius: 0 0 var(--fv-radius) var(--fv-radius); }
.card > .table-responsive .table > thead th { background-color: var(--fv-surface-2); }

/* ==========================================================================
   DROPDOWNS · MODALS · ALERTS · BADGES · MISC
   ========================================================================== */
.dropdown-menu {
    border-radius: var(--fv-radius-sm);
    box-shadow: var(--fv-shadow);
    padding: .35rem;
}
.dropdown-item { border-radius: var(--fv-radius-sm); padding: .45rem .7rem; }
.dropdown-divider { border-color: var(--fv-border); }

.modal-content {
    border: 1px solid var(--fv-border);
    border-radius: var(--fv-radius);
    box-shadow: 0 24px 64px -16px rgba(0,0,0,.6);
}
.modal-header, .modal-footer { border-color: var(--fv-border); }

.alert { border-radius: var(--fv-radius-sm); border: 1px solid transparent; }
.alert-success { background-color: rgba(var(--fv-success-rgb), .12); border-color: rgba(var(--fv-success-rgb), .3); color: #7ee2ac; }
.alert-danger  { background-color: rgba(var(--fv-danger-rgb), .12);  border-color: rgba(var(--fv-danger-rgb), .3);  color: #ff9aa3; }
.alert-warning { background-color: rgba(var(--fv-warning-rgb), .12); border-color: rgba(var(--fv-warning-rgb), .3); color: #f4cd6e; }
.alert-info    { background-color: rgba(var(--fv-info-rgb), .12);    border-color: rgba(var(--fv-info-rgb), .3);    color: #7fd6ec; }
[data-bs-theme="light"] .alert-success { color: #1a7f4b; }
[data-bs-theme="light"] .alert-danger  { color: #c02a36; }
[data-bs-theme="light"] .alert-warning { color: #9a7415; }
[data-bs-theme="light"] .alert-info    { color: #1a7f9a; }

.badge { font-weight: 600; letter-spacing: .01em; }

/* --------------------------------------------------------------------------
   Status badges — soft/tinted, accessible in BOTH color modes.
   Bootstrap's default solid fills + white text fail WCAG AA (green 2.4:1,
   info 2.4:1, danger 3.6:1) in light mode too — not just dark. Opaque tints
   are used (not rgba) so contrast is deterministic regardless of the row/card
   backdrop the badge sits on. Measured ratios in comments (AA = 4.5:1).
   `.bg-*` and `.text-dark` are !important utilities, so these are too;
   the extra `.badge` class gives us the specificity to win.

   ALL semantic states are tinted (warning included) so visual weight is
   uniform and SEVERITY IS CARRIED BY HUE, not by fill. Otherwise a solid gold
   warning would read louder than a tinted red danger on the aging / review
   screens — inverting the real severity order by accident.
   -------------------------------------------------------------------------- */
.badge.bg-success   { background-color: #10281d !important; color: #6ee7a8 !important; } /* 10.2:1 */
.badge.bg-danger    { background-color: #3a1417 !important; color: #ff9aa3 !important; } /*  8.1:1 */
.badge.bg-warning   { background-color: #332608 !important; color: #f4cd6e !important; } /*  9.7:1 */
.badge.bg-info      { background-color: #0e2f3a !important; color: #7fd6ec !important; } /*  8.5:1 */
.badge.bg-secondary { background-color: var(--fv-surface-3) !important; color: var(--fv-text-muted) !important; } /* 5.4:1 */

[data-bs-theme="light"] .badge.bg-success   { background-color: #d9f4e5 !important; color: #0f6b3a !important; } /* 5.7:1 */
[data-bs-theme="light"] .badge.bg-danger    { background-color: #fcdde0 !important; color: #b02330 !important; } /* 5.3:1 */
[data-bs-theme="light"] .badge.bg-warning   { background-color: #fbeecb !important; color: #7a5600 !important; } /* 5.8:1 */
[data-bs-theme="light"] .badge.bg-info      { background-color: #d5eff7 !important; color: #1c6a80 !important; } /* 5.1:1 */
[data-bs-theme="light"] .badge.bg-secondary { background-color: #eef2f9 !important; color: #475569 !important; } /* 6.9:1 */

/* Legacy `.bg-light` status chips would flash bright-white in dark mode. */
[data-bs-theme="dark"] .badge.bg-light {
    background-color: var(--fv-surface-3) !important;
    color: var(--fv-text) !important;
}

/* Contextual "total" rows (`.table-light` on tfoot) would render as a bright
   white block with black text inside a dark table. Remap to an elevated
   themed surface — the correct semantic for an emphasized footer. */
[data-bs-theme="dark"] .table-light {
    --bs-table-color: var(--fv-text);
    --bs-table-bg: var(--fv-surface-2);
    --bs-table-border-color: var(--fv-border-strong);
    --bs-table-color-state: var(--fv-text);
}

.page-link {
    background-color: var(--fv-surface-2);
    border-color: var(--fv-border);
    color: var(--fv-text);
}
.page-link:hover { background-color: var(--fv-surface-3); color: var(--fv-text); }
.page-item.active .page-link { background-color: var(--fv-brand); border-color: var(--fv-brand); color: #fff; }
.page-item.disabled .page-link { background-color: var(--fv-surface); color: var(--fv-text-muted); }

.list-group-item { background-color: var(--fv-surface); border-color: var(--fv-border); color: var(--fv-text); }
.nav-tabs { border-bottom-color: var(--fv-border); }
.nav-tabs .nav-link { color: var(--fv-text-muted); border: none; }
.nav-tabs .nav-link:hover { color: var(--fv-text); border: none; }
.nav-tabs .nav-link.active {
    color: var(--fv-brand-300); background: transparent;
    border-bottom: 2px solid var(--fv-brand);
}

hr { border-color: var(--fv-border); opacity: 1; }
code { color: #ff9aa3; }

/* Custom scrollbars (WebKit) */
* { scrollbar-color: var(--fv-border-strong) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--fv-border-strong); border-radius: 8px; border: 2px solid var(--bs-body-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--fv-text-muted); }

/* ==========================================================================
   AUTH / LOGIN
   ========================================================================== */
.auth-body {
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(var(--fv-brand-rgb), .16), transparent 60%),
        var(--bs-body-bg);
    min-height: 100vh;
}
.auth-body .card { box-shadow: 0 24px 64px -20px rgba(0,0,0,.55); }

/* ==========================================================================
   DASHBOARD  (tenant landing — live KPI tiles, sparkline, top movers)
   --------------------------------------------------------------------------
   All colour comes from --fv-* tokens, so this block themes BOTH modes at once
   (CLAUDE.md theming rule). Inline SVGs use currentColor / the tokens directly.
   ========================================================================== */

/* Small layout helpers Bootstrap doesn't ship (needed for truncation in flex). */
.min-w-0 { min-width: 0; }
.flex-none { flex: none; }

/* Live-status strip */
.dash-live { display: inline-flex; align-items: center; gap: .4rem; }
.dash-live-dot {
    width: .5rem; height: .5rem; border-radius: 50%;
    background: var(--fv-success);
    animation: dash-pulse 2.2s ease-in-out infinite;
}
@keyframes dash-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--fv-success-rgb), .5); }
    70%  { box-shadow: 0 0 0 6px rgba(var(--fv-success-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--fv-success-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) { .dash-live-dot { animation: none; } }

/* KPI stat tiles */
.stat-tile { display: flex; align-items: flex-start; gap: .85rem; }
.stat-icon {
    width: 2.75rem; height: 2.75rem; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--fv-radius-sm);
}
.stat-icon-brand   { color: var(--fv-brand);   background: rgba(var(--fv-brand-rgb), .14); }
.stat-icon-success { color: var(--fv-success); background: rgba(var(--fv-success-rgb), .14); }
.stat-icon-info    { color: var(--fv-info);    background: rgba(var(--fv-info-rgb), .14); }
.stat-icon-warning { color: var(--fv-warning); background: rgba(var(--fv-warning-rgb), .14); }
.stat-icon-danger  { color: var(--fv-danger);  background: rgba(var(--fv-danger-rgb), .14); }
.stat-label { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--fv-text-muted); }
.stat-value { font-size: 1.55rem; font-weight: 600; line-height: 1.15; color: var(--bs-heading-color); margin-top: .1rem; }
.stat-cur   { font-size: .8rem; font-weight: 500; color: var(--fv-text-muted); }
.stat-sub   { font-size: .78rem; margin-top: .15rem; }
.trend      { font-size: .78rem; font-weight: 600; display: inline-flex; align-items: center; gap: .15rem; margin-top: .15rem; }
.trend-up   { color: var(--fv-success); }
.trend-down { color: var(--fv-danger); }
.trend-flat { color: var(--fv-text-muted); }

/* Sparkline */
.spark svg { width: 100%; height: 90px; display: block; }
.spark-axis { gap: .25rem; }
.spark-tick { flex: 1 1 0; min-width: 0; }
.spark-day  { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--fv-text-muted); }
.spark-val  { font-size: .74rem; color: var(--fv-text-muted); font-variant-numeric: tabular-nums; }
.spark-tick.is-peak .spark-day,
.spark-tick.is-peak .spark-val { color: var(--fv-brand); font-weight: 600; }

/* Top movers */
.mover-row  { display: flex; align-items: center; gap: .6rem; }
.mover-rank {
    width: 1.6rem; height: 1.6rem; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .74rem; font-weight: 700;
    border-radius: var(--fv-radius-sm);
    background: var(--fv-surface-3); color: var(--fv-text-muted);
}
.mover-track { height: .4rem; border-radius: 999px; background: var(--fv-surface-3); overflow: hidden; }
.mover-bar   { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--fv-brand), var(--fv-info)); }

/* Donut chart (status mix) + legend */
.donut-wrap { width: 168px; height: 168px; flex: none; position: relative; }
.donut-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut-track { stroke: var(--fv-surface-3); }
.donut-center {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
}
.donut-center .donut-total { font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--bs-heading-color); }
.donut-center .donut-cap { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fv-text-muted); }
.legend { display: flex; flex-direction: column; gap: .55rem; }
.legend-row { display: flex; align-items: center; gap: .55rem; font-size: .88rem; }
.legend-dot { width: .7rem; height: .7rem; border-radius: 3px; flex: none; }
.legend-dot-success { background: var(--fv-success); }
.legend-dot-warning { background: var(--fv-warning); }
.legend-dot-danger  { background: var(--fv-danger); }
.legend-dot-brand   { background: var(--fv-brand); }
.legend-dot-info    { background: var(--fv-info); }
.legend-val { margin-left: auto; font-weight: 600; color: var(--bs-heading-color); font-variant-numeric: tabular-nums; }
.legend-pct { color: var(--fv-text-muted); font-size: .8rem; min-width: 3ch; text-align: right; }

/* Configuration tiles */
.config-tile { display: flex; align-items: center; gap: .7rem; }
.config-icon {
    width: 2.25rem; height: 2.25rem; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--fv-radius-sm);
    background: var(--fv-surface-3); color: var(--fv-text-muted);
}
.config-count { font-size: 1.35rem; font-weight: 600; line-height: 1.1; color: var(--bs-heading-color); }

/* ==========================================================================
   POINT OF SALE  (cashier checkout — Pos.php / livewire/tenant/pos)
   --------------------------------------------------------------------------
   Cashier-facing screen: bigger tap targets, a scannable cart, and a payment
   panel that stays in view. All colour is expressed in --fv-* tokens, so this
   one block themes BOTH colour modes (CLAUDE.md theming rule).
   ========================================================================== */
[x-cloak] { display: none !important; }

.pos-open-card { max-width: 940px; }

/* Live dot inside the "Shift open" badge */
.pos-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; vertical-align: middle; }
.pos-dot-live { background: var(--fv-success); box-shadow: 0 0 0 3px rgba(var(--fv-success-rgb), .18); }

/* Tabular figures so prices/amounts line up on the decimal */
.pos-num { font-variant-numeric: tabular-nums; }

/* Payment panel follows the cashier down long carts */
@media (min-width: 992px) {
    .pos-pay-card { position: sticky; top: 1rem; }
}

/* Scan field — the primary input, kept prominent */
.pos-scan .input-group-text { background: var(--fv-surface-3); font-size: 1rem; }
.pos-scan .form-control { font-size: 1.05rem; }

/* Cart table rows breathe a little more than the dense admin grids */
.pos-cart-table > tbody > tr > td { padding-top: .6rem; padding-bottom: .6rem; }
.pos-cart-table .pos-qty { width: 132px; margin-inline: auto; }
.pos-cart-table .pos-qty .form-control { padding-inline: .25rem; }
.pos-cart-table .pos-qty .btn { min-width: 2rem; font-weight: 700; }
.pos-empty-icon { font-size: 2rem; opacity: .5; }

/* Totals block */
.pos-totals { padding: .25rem 0; }
.pos-grand { font-size: 1.5rem; font-weight: 700; color: var(--bs-heading-color); }
.pos-grand .stat-cur { font-size: .85rem; font-weight: 500; color: var(--fv-text-muted); }

/* Payment-method chips */
.pos-methods { display: flex; flex-wrap: wrap; gap: .5rem; }
.pos-method {
    flex: 1 1 auto; min-width: 6rem;
    padding: .55rem .75rem;
    border-radius: var(--fv-radius-sm);
    border: 1px solid var(--fv-border-strong);
    background: var(--fv-surface-2);
    color: var(--fv-text);
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--fv-transition), background-color var(--fv-transition), color var(--fv-transition);
}
.pos-method:hover { border-color: var(--fv-brand); background: var(--fv-surface-3); }
.pos-method.is-active {
    border-color: var(--fv-brand);
    background: rgba(var(--fv-brand-rgb), .16);
    color: var(--bs-heading-color);
    box-shadow: inset 0 0 0 1px var(--fv-brand);
}

/* Quick-cash keys */
.pos-quick-cash { display: flex; flex-wrap: wrap; gap: .4rem; }

/* Live change estimate */
.pos-change {
    display: flex; justify-content: space-between; align-items: center;
    padding: .5rem .75rem;
    border-radius: var(--fv-radius-sm);
    background: rgba(var(--fv-success-rgb), .12);
    border: 1px solid rgba(var(--fv-success-rgb), .3);
    color: var(--fv-success);
}
[data-bs-theme="light"] .pos-change { color: #1a7f4b; }

.pos-complete { font-size: 1.05rem; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 991.98px) {
    /* Sidebar becomes an off-canvas drawer; content spans full width. */
    .app-sidebar {
        transform: translateX(-100%);
        width: var(--fv-sidebar-w) !important;
        box-shadow: none;
    }
    html.sidebar-open .app-sidebar {
        transform: none;
        box-shadow: 0 0 48px rgba(0,0,0,.55);
    }
    .app-main { margin-left: 0 !important; }
    .app-topbar { padding-left: 1rem; padding-right: 1rem; }
    .app-content { padding: 1.15rem 1rem 2.5rem; }
}

/* ==========================================================================
   PRINT — defensive.
   The real print paths (thermal receipt, DomPDF export) are standalone
   templates that never load this file. But if an operator hits Ctrl+P on a
   dark admin screen, force a light, ink-frugal render: no dark backgrounds,
   black text, hide the chrome. Receipts/PDFs are unaffected either way.
   ========================================================================== */
@media print {
    :root { color-scheme: light; }
    body { background: #fff !important; color: #000 !important; }
    /* Shell chrome (sidebar, topbar + its theme toggle, backdrop): drop it so
       only the page content prints. */
    .app-sidebar, .app-topbar, .app-backdrop { display: none !important; }
    .app-main { margin-left: 0 !important; }
    .app-content { padding: 0 !important; }
    .card, .table, .modal-content, .dropdown-menu {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
        border-color: #ccc !important;
    }
    .card { break-inside: avoid; }
    .table, .table th, .table td { color: #000 !important; border-color: #ccc !important; }
    .table > thead th { background: #f0f0f0 !important; }
    a { color: #000 !important; text-decoration: underline; }
}