/* ============================================================
   MOTOSHOP POS - THEME STYLESHEET
   Theme: Professional Dark Slate & Racing Accent
   ------------------------------------------------------------
   Every colour in the app comes from the :root token block below.
   No hex value is written outside that block - use var(--color-*)
   so the whole palette stays in one place.
   ============================================================ */

:root {
    /* ---------- Surfaces ---------- */
    --color-sidebar:        #1E293B;   /* Dark Slate Blue/Gray */
    --color-sidebar-deep:   #172033;
    --color-background:     #F8FAFC;   /* Cool Light Gray      */
    --color-card:           #FFFFFF;   /* Pure White           */
    --color-table-header:   #F1F5F9;
    --color-neutral:        #F1F5F9;

    /* ---------- Accents ---------- */
    --color-primary:        #EA580C;   /* Racing Orange        */
    --color-primary-hover:  #C2410C;
    --color-primary-active: #9A3412;
    --color-primary-soft:   #FFF7ED;
    --color-primary-ring:   rgba(234, 88, 12, .15);
    --color-primary-rgb:    234, 88, 12;

    --color-secondary:      #2563EB;   /* Performance Blue     */
    --color-secondary-hover:#1D4ED8;
    --color-secondary-soft: #EFF6FF;
    --color-secondary-rgb:  37, 99, 235;

    /* ---------- Text ---------- */
    --color-text:           #0F172A;   /* Dark Slate           */
    --color-text-muted:     #64748B;   /* Slate Gray           */
    --color-text-faint:     #94A3B8;
    --color-text-invert:    #FFFFFF;

    /* ---------- Borders ---------- */
    --color-border:         #E2E8F0;   /* Light Slate          */
    --color-border-strong:  #CBD5E1;

    /* ---------- Status ---------- */
    --color-success:        #10B981;   /* Emerald  - Sales     */
    --color-success-text:   #047857;
    --color-success-soft:   #D1FAE5;

    --color-warning:        #F59E0B;   /* Amber    - Low Stock */
    --color-warning-text:   #B45309;
    --color-warning-soft:   #FEF3C7;

    --color-danger:         #EF4444;   /* Rose Red - No Stock  */
    --color-danger-text:    #B91C1C;
    --color-danger-soft:    #FEE2E2;

    /* ---------- Layout / shape ---------- */
    --sidebar-width: 250px;
    --radius-card:    12px;
    --radius-control: 8px;
    --shadow-card:    0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-raised:  0 6px 18px rgba(15, 23, 42, .10);

    /* ---------- Login background photo ----------
       background.jpg is a very dark shot (median luma ~22/255), so it
       needs a real lift or it reads as a flat black rectangle. These
       tokens keep the photo and its scrim tunable from one place
       instead of hunting through the LOGIN section. */
    --login-photo-brightness: 1.65;
    --login-photo-saturate:   1.15;
    --login-photo-contrast:   1.05;
    /* Scrim runs core -> edge so the card sits on the darkest part of
       the page while the photo stays readable around it. */
    --login-scrim-core: rgba(15, 23, 42, .70);
    --login-scrim-mid:  rgba(15, 23, 42, .45);
    --login-scrim-edge: rgba(15, 23, 42, .25);

    /* ---------- Backwards-compatible aliases ----------
       The previous theme shipped --brand-green* / --brand-blue* and
       the chart script mirrored those hexes. They are mapped onto the
       new palette here so old references keep resolving, while every
       NEW rule in this file uses the semantic --color-* names. */
    --brand-green:       var(--color-primary);
    --brand-green-dark:  var(--color-primary-hover);
    --brand-green-light: var(--color-primary-soft);
    --brand-white:       var(--color-card);
    --brand-gray:        var(--color-text-muted);
    --brand-gray-light:  var(--color-background);
    --brand-blue:        var(--color-secondary);
    --brand-blue-dark:   var(--color-secondary-hover);
    --brand-blue-light:  var(--color-secondary-soft);
    --brand-blue-rgb:    37, 99, 235;
}

/* ---------- Base & typography ---------- */
body {
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: 'Inter', 'Roboto', 'Segoe UI', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -.01em; color: var(--color-text); }
a { color: var(--color-secondary); }
a:hover { color: var(--color-secondary-hover); }

/* ============================================================
   SIDEBAR  -  Dark Slate with Racing Orange active indicator
   ============================================================ */
.app-sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    background-color: var(--color-sidebar);
    color: var(--color-text-invert);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
}

.app-sidebar .sidebar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1.1rem 1.15rem;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -.01em;
    color: var(--color-text-invert);
    background-color: var(--color-sidebar-deep);
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    white-space: nowrap;
}
.app-sidebar .sidebar-brand i {
    color: var(--color-primary);
    font-size: 1.45rem;
    line-height: 1;
}

/* Scrollable link area, with a little breathing room. */
.app-sidebar .flex-grow-1 { padding: .35rem 0 1rem; }

/* ---------- Nav links ---------- */
.app-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .62rem 1.15rem;
    font-size: .93rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .78);
    background-color: transparent;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 0;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.app-sidebar .nav-link i {
    font-size: 1.05rem;
    line-height: 1;
    flex: 0 0 auto;
    opacity: .85;
}
.app-sidebar .nav-link:hover {
    background-color: rgba(255, 255, 255, .07);
    color: var(--color-text-invert);
}
.app-sidebar .nav-link:hover i { opacity: 1; }

/* Active item: solid Racing Orange with a white inner rail. */
.app-sidebar .nav-link.active {
    background-color: var(--color-primary);
    color: var(--color-text-invert);
    font-weight: 600;
    border-left-color: var(--color-text-invert);
}
.app-sidebar .nav-link.active i { opacity: 1; }

.app-sidebar .nav-section-title {
    padding: 1.1rem 1.15rem .35rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: rgba(255, 255, 255, .42);
}

/* The logout button is a .nav-link inside a form, so it gets a
   danger-tinted hover rather than the neutral one. */
.app-sidebar form .nav-link:hover {
    background-color: rgba(239, 68, 68, .22);
    color: var(--color-text-invert);
}

/* ============================================================
   MAIN AREA + TOPBAR
   ============================================================ */
.app-main {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    background-color: var(--color-background);
}

.app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem 1.25rem;
    background-color: var(--color-card);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.app-topbar .page-heading {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--color-text);
}

/* Hamburger + user chip on the right. */
.app-topbar .btn-outline-secondary { color: var(--color-text); }

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .35rem .8rem .35rem .4rem;
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: .85rem;
    color: var(--color-text);
}
.user-chip .user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-text-invert);
    font-weight: 700;
    font-size: .85rem;
}
.user-chip .user-name { font-weight: 600; }
.user-chip .user-role {
    padding: .1rem .45rem;
    border-radius: 999px;
    background-color: var(--color-primary-soft);
    color: var(--color-primary-hover);
    font-size: .72rem;
    font-weight: 600;
    text-transform: capitalize;
}

/* Notification bell. */
.topbar-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 1.05rem;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.topbar-icon-btn:hover {
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
}
.topbar-icon-btn .dot {
    position: absolute;
    top: 6px;
    right: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-danger);
    border: 2px solid var(--color-card);
}

/* ============================================================
   CARDS / PANELS
   ============================================================ */
.card {
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.card-header {
    background-color: var(--color-card);
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius-card) var(--radius-card) 0 0 !important;
    font-weight: 600;
    color: var(--color-text);
    padding: .85rem 1.15rem;
}
.card-footer {
    background-color: var(--color-background);
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius-card) var(--radius-card) !important;
}

.list-group-item {
    background-color: var(--color-card);
    border-color: var(--color-border);
    color: var(--color-text);
    padding: .7rem 1.15rem;
}
.list-group-item:hover { background-color: var(--color-background); }
.list-group-flush { border-color: var(--color-border); }

/* ---------- Stat / dashboard cards ---------- */
.stat-card {
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    transition: box-shadow .15s ease, transform .15s ease;
}
.stat-card:hover {
    box-shadow: var(--shadow-raised);
    transform: translateY(-2px);
}

.stat-card .stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.stat-card .stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 10px;
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 1.3rem;
}

/* Status variants. The markup only needs the extra class, e.g.
   <div class="card stat-card stat-warning p-3">. */
.stat-success { border-left-color: var(--color-success); }
.stat-success .stat-value { color: var(--color-success-text); }
.stat-success .stat-icon  { background-color: var(--color-success-soft); color: var(--color-success-text); }

.stat-warning { border-left-color: var(--color-warning); }
.stat-warning .stat-value { color: var(--color-warning-text); }
.stat-warning .stat-icon  { background-color: var(--color-warning-soft); color: var(--color-warning-text); }

.stat-danger  { border-left-color: var(--color-danger); }
.stat-danger .stat-value  { color: var(--color-danger-text); }
.stat-danger .stat-icon   { background-color: var(--color-danger-soft); color: var(--color-danger-text); }

.stat-info    { border-left-color: var(--color-secondary); }
.stat-info .stat-value    { color: var(--color-secondary-hover); }
.stat-info .stat-icon     { background-color: var(--color-secondary-soft); color: var(--color-secondary-hover); }

/* ============================================================
   BUTTONS
   Primary (orange) / Secondary (blue) / Neutral / Danger
   ============================================================ */
.btn {
    border-radius: var(--radius-control);
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease,
                color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-primary-ring);
    border-color: var(--color-primary);
}

/* ---- Primary: Racing Orange ---- */
.btn-brand {
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: var(--color-text-invert);
}
.btn-brand:hover,
.btn-brand:focus {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-text-invert);
}
.btn-brand:active { background-color: var(--color-primary-active); border-color: var(--color-primary-active); }
.btn-brand:disabled { background-color: var(--color-primary); border-color: var(--color-primary); opacity: .65; }

.btn-outline-brand {
    background-color: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}
.btn-outline-brand:hover,
.btn-outline-brand:focus {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-invert);
}

/* ---- Secondary: Performance Blue ---- */
.btn-brand-blue {
    background-color: var(--color-secondary);
    border: 1px solid var(--color-secondary);
    color: var(--color-text-invert);
}
.btn-brand-blue:hover,
.btn-brand-blue:focus {
    background-color: var(--color-secondary-hover);
    border-color: var(--color-secondary-hover);
    color: var(--color-text-invert);
}

/* Bootstrap's own primary is re-pointed at the racing accent so any
   stock <button class="btn btn-primary"> matches the system. */
.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-invert);
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-text-invert);
}

/* ---- Neutral ---- */
.btn-neutral {
    background-color: var(--color-neutral);
    border: 1px solid var(--color-neutral);
    color: var(--color-text);
}
.btn-neutral:hover {
    background-color: var(--color-border);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}
.btn-outline-secondary {
    background-color: var(--color-neutral);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--color-border);
    border-color: var(--color-text-faint);
    color: var(--color-text);
}

/* ---- Danger ---- */
.btn-danger-brand,
.btn-danger {
    background-color: var(--color-danger);
    border: 1px solid var(--color-danger);
    color: var(--color-text-invert);
}
.btn-danger-brand:hover,
.btn-danger:hover,
.btn-danger:focus {
    background-color: var(--color-danger-text);
    border-color: var(--color-danger-text);
    color: var(--color-text-invert);
}
.btn-outline-danger {
    background-color: transparent;
    color: var(--color-danger);
    border: 1px solid var(--color-danger);
}
.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--color-text-invert);
}

/* ---- Success ---- */
.btn-success-brand {
    background-color: var(--color-success);
    border: 1px solid var(--color-success);
    color: var(--color-text-invert);
}
.btn-success-brand:hover {
    background-color: var(--color-success-text);
    border-color: var(--color-success-text);
    color: var(--color-text-invert);
}

/* ---- Shared sizing for touch targets ---- */
.btn-sm { border-radius: 6px; }
.btn-lg { font-size: 1.05rem; padding: .65rem 1.1rem; }
.btn i { vertical-align: -.05em; }

/* ============================================================
   TABLES
   ============================================================ */
.table {
    --bs-table-bg: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}

.table > thead th {
    background-color: var(--color-table-header);
    color: var(--color-text);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    border-bottom: 1px solid var(--color-border);
    padding: .7rem .85rem;
}

.table > tbody td {
    background-color: var(--color-card);
    border-color: var(--color-border);
    padding: .65rem .85rem;
    vertical-align: middle;
}

.table > tbody tr:last-child > td { border-bottom: 0; }

/* Subtle row hover. */
.table-hover > tbody > tr:hover > *,
.table > tbody > tr:hover > * {
    background-color: var(--color-background);
    color: var(--color-text);
}

.table-sm > thead th { font-size: .74rem; padding: .55rem .7rem; }
.table-sm > tbody td { padding: .5rem .7rem; }

/* Long values wrap instead of blowing out a column. */
.table td,
.table th { overflow-wrap: anywhere; }

/* ============================================================
   STATUS BADGES  (In Stock / Low Stock / Out of Stock)
   ============================================================ */
.badge-in-stock,
.badge-low-stock,
.badge-out-stock {
    display: inline-block;
    padding: .3em .65em;
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.badge-in-stock {
    background-color: var(--color-success-soft);
    color: var(--color-success-text);
    border-color: rgba(16, 185, 129, .30);
}
.badge-low-stock {
    background-color: var(--color-warning-soft);
    color: var(--color-warning-text);
    border-color: rgba(245, 158, 11, .35);
}
.badge-out-stock {
    background-color: var(--color-danger-soft);
    color: var(--color-danger-text);
    border-color: rgba(239, 68, 68, .28);
}

/* Generic soft pill for roles / statuses elsewhere in the app. */
.soft-badge {
    display: inline-block;
    padding: .3em .65em;
    font-size: .74rem;
    font-weight: 600;
    border-radius: 999px;
    background-color: var(--color-neutral);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
.soft-badge-primary   { background-color: var(--color-primary-soft);   color: var(--color-primary-hover);     border-color: rgba(234, 88, 12, .25); }
.soft-badge-secondary { background-color: var(--color-secondary-soft); color: var(--color-secondary-hover); border-color: rgba(37, 99, 235, .22); }
.soft-badge-success   { background-color: var(--color-success-soft);   color: var(--color-success-text);     border-color: rgba(16, 185, 129, .30); }
.soft-badge-warning   { background-color: var(--color-warning-soft);   color: var(--color-warning-text);     border-color: rgba(245, 158, 11, .35); }
.soft-badge-danger    { background-color: var(--color-danger-soft);    color: var(--color-danger-text);      border-color: rgba(239, 68, 68, .28); }

/* Text helpers matching the status palette. */
.text-success-brand { color: var(--color-success-text) !important; }
.text-warning-brand { color: var(--color-warning-text) !important; }
.text-danger-brand  { color: var(--color-danger) !important; }
.text-primary-brand { color: var(--color-primary) !important; }

/* ============================================================
   FORMS
   ============================================================ */
.form-label {
    margin-bottom: .35rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--color-text);
}

.form-control,
.form-select {
    background-color: var(--color-card);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-control);
    color: var(--color-text);
    font-size: .94rem;
    padding: .45rem .75rem;
}
.form-control::placeholder { color: var(--color-text-faint); }
.form-control:hover:not(:disabled),
.form-select:hover:not(:disabled) { border-color: var(--color-text-faint); }

/* Focus: Racing Orange border + soft orange ring. */
.form-control:focus,
.form-select:focus {
    background-color: var(--color-card);
    border-color: var(--color-primary);
    color: var(--color-text);
    box-shadow: 0 0 0 3px var(--color-primary-ring);
}
.form-control:disabled,
.form-select:disabled {
    background-color: var(--color-neutral);
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

.input-group-text {
    background-color: var(--color-neutral);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-muted);
}
.input-group:focus-within .input-group-text {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.input-group .form-control:focus { position: relative; z-index: 3; }

.form-check-input { border-color: var(--color-border-strong); }
.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.form-check-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-ring);
}

/* Validation messaging. */
.invalid-feedback { font-size: .82rem; }
.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--color-danger); }
.form-control.is-invalid:focus,
.form-select.is-invalid:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, .15); }
.form-control.is-valid,
.form-select.is-valid { border-color: var(--color-success); }

/* Alerts follow the same flat status palette. */
.alert {
    border-radius: var(--radius-control);
    border: 1px solid transparent;
    font-size: .92rem;
}
.alert-success { background-color: var(--color-success-soft);   border-color: rgba(16, 185, 129, .30); color: var(--color-success-text); }
.alert-warning { background-color: var(--color-warning-soft);   border-color: rgba(245, 158, 11, .35); color: var(--color-warning-text); }
.alert-danger  { background-color: var(--color-danger-soft);    border-color: rgba(239, 68, 68, .28);  color: var(--color-danger-text); }
.alert-info    { background-color: var(--color-secondary-soft); border-color: rgba(37, 99, 235, .22);  color: var(--color-secondary-hover); }

/* ============================================================
   POS / CASHIER SCREEN
   Optimised for fast transactions: big targets, scannable prices.
   ============================================================ */
.pos-product-card {
    cursor: pointer;
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    transition: box-shadow .15s ease, transform .1s ease, border-color .15s ease;
}
.pos-product-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-raised);
    transform: translateY(-2px);
}
.pos-product-card .stock-badge { font-size: .7rem; }

/* Product name wraps instead of overflowing its tile. */
.pos-product-card .product-name {
    font-weight: 600;
    font-size: .88rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Prices are the fastest thing to read on this screen. */
.pos-product-card .product-price {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--color-text);
    white-space: nowrap;
}

/* ---------- Cart panel ---------- */
.pos-cart-panel {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 130px);
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.pos-cart-panel .cart-head {
    background-color: var(--color-card);
    border-bottom: 1px solid var(--color-border);
    padding: .85rem 1rem;
    flex: 0 0 auto;
}
.pos-cart-panel .cart-head h6 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}
.pos-cart-panel .cart-head h6 i { color: var(--color-primary); }

.pos-cart-items {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: .5rem;
}
.pos-cart-items .cart-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .55rem .5rem;
    border-bottom: 1px solid var(--color-border);
}
.pos-cart-items .cart-line:last-child { border-bottom: 0; }
.pos-cart-items .cart-line-name {
    font-weight: 600;
    font-size: .88rem;
    color: var(--color-text);
}
/* Qty stepper buttons stay comfortably tappable. */
.pos-cart-items .btn-qty {
    min-width: 32px;
    height: 32px;
    padding: 0 .45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-neutral);
    border: 1px solid var(--color-border-strong);
    border-radius: 6px;
    color: var(--color-text);
    font-weight: 700;
}
.pos-cart-items .btn-qty:hover {
    background-color: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.pos-totals {
    flex: 0 0 auto;
    background-color: var(--color-background);
    border-top: 1px solid var(--color-border);
    padding: .9rem 1rem;
}
.pos-totals .row-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .35rem;
    font-size: .88rem;
    color: var(--color-text-muted);
}
.pos-totals .row-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .5rem;
    padding-top: .55rem;
    border-top: 1px solid var(--color-border);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--color-text);
}
.pos-totals .row-total .amount { color: var(--color-success-text); }

#completeSaleBtn {
    min-height: 48px;
    padding: .7rem 1rem;
    border-radius: var(--radius-control);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .02em;
}

#posSearch { min-height: 44px; }

/* ============================================================
   LOGIN / AUTH PORTALS
   Dark slate page + a solid white card. The background photo is
   brightened and sits behind a radial vignette -- dark under the
   card for contrast, open at the edges so the photo still reads.
   Photo and scrim are separate layers; see the notes below.
   ============================================================ */
.login-wrapper {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem .75rem;
    background-color: var(--color-sidebar);
    background-image: url("../../background.jpg?v=20260925");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* ---------- Layer 1: the photo itself ----------
   The wrapper's own background-image is set inline by each portal page
   (login.php, admin.php, cashier_login.php, ...). That is deliberately
   left alone: this pseudo-element is an opaque cover-sized JPEG filling
   inset:0, so it fully occludes that inline layer, and the inline value
   stays as a harmless fallback if this CSS never loads.

   The filter lives HERE rather than on .login-wrapper on purpose -- a
   filter on the wrapper would also brighten the white card and wash out
   its text. Isolating it to a photo-only layer avoids that. */
.login-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--color-sidebar);
    background-image: url("../../background.jpg?v=20260925");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* The source photo is very dark (median luma ~22/255), so it is
       lifted here. Scrim values are NOT applied on this layer -- doing
       so would let the brightness filter lighten the scrim too and
       quietly undo the darkening behind the card. */
    filter: brightness(var(--login-photo-brightness))
            saturate(var(--login-photo-saturate))
            contrast(var(--login-photo-contrast));
}

/* ---------- Layer 2: the scrim ----------
   A radial vignette instead of one flat 82% wall: darkest under the
   card, easing off toward the edges so the photo actually reads. */
.login-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        ellipse at center,
        var(--login-scrim-core) 0%,
        var(--login-scrim-mid) 45%,
        var(--login-scrim-edge) 100%
    );
}
.login-wrapper > * {
    position: relative;
    z-index: 1;
}

/* ---------- The card: solid white, no glass ---------- */
.card.login-card {
    /* Tints are kept because the portal buttons still read them, but
       the surface itself is now a plain, opaque white card. */
    --card-tint:     var(--color-primary);
    --card-tint-rgb: var(--color-primary-rgb);
    --header-tint:     var(--color-sidebar);
    --header-tint-rgb: 30, 41, 59;

    width: 100%;
    max-width: 420px;
    overflow: hidden;
    color: var(--color-text);
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--color-primary);
    border-radius: var(--radius-card);
    box-shadow: 0 20px 50px rgba(15, 23, 42, .45);
}

.login-card .card-body {
    background-color: var(--color-card);
    padding: 1.5rem;
}

/* ---------- Card header band ----------
   header.jpg is OPT-IN: it only appears on login.php via
   `.login-header-photo`. Every other portal gets the solid dark
   slate band with a racing-orange underline. */
.login-card .login-header {
    position: relative;
    padding: 1.9rem 1.5rem 1.4rem;
    text-align: center;
    color: var(--color-text-invert);
    background-color: var(--color-sidebar);
    border-bottom: 3px solid var(--color-primary);
}
.login-card .login-header h4 { color: var(--color-text-invert); font-weight: 700; }
.login-card .login-header i  { color: var(--color-primary); }
.login-card .login-header small { color: rgba(255, 255, 255, .70); }

/* Opt-in logo banner: text-free, keeps header.jpg's native 2:1 ratio. */
.card.login-card .login-header-photo {
    padding: 0;
    aspect-ratio: 2 / 1;
    background-color: var(--color-sidebar);
    background-image: url("../../header.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-bottom: 3px solid var(--color-primary);
}
.login-card .login-header > * {
    position: relative;
    z-index: 1;
}

/* ---------- Form controls on the white card ---------- */
.login-card .form-label {
    color: var(--color-text);
    font-weight: 600;
}
.login-card .form-control,
.login-card .form-select,
.login-card .input-group-text {
    background-color: var(--color-card);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}
.login-card .input-group-text { background-color: var(--color-neutral); }
.login-card .form-control::placeholder { color: var(--color-text-faint); }
.login-card .form-control:focus,
.login-card .form-select:focus {
    background-color: var(--color-card);
    border-color: var(--color-primary);
    color: var(--color-text);
    box-shadow: 0 0 0 3px var(--color-primary-ring);
}
.login-card .form-control:focus ~ .input-group-text,
.login-card .input-group:focus-within .input-group-text {
    background-color: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Password show/hide toggle. */
.login-card .btn-outline-secondary {
    background-color: var(--color-neutral);
    border-color: var(--color-border-strong);
    color: var(--color-text-muted);
}
.login-card .btn-outline-secondary:hover,
.login-card .btn-outline-secondary:focus {
    background-color: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.login-card .text-muted { color: var(--color-text-muted) !important; }
.login-card a,
.login-card .btn-link {
    color: var(--color-secondary);
    font-weight: 500;
}
.login-card a:hover,
.login-card .btn-link:hover { color: var(--color-secondary-hover); }

/* ---------- Portal buttons ----------
   Every auth FORM submits with the Racing Orange .btn-brand
   (admin.php, cashier_login.php, forgot-password, OTP, reset).
   .btn-brand-blue is the SECONDARY choice and stays Performance
   Blue so the two portals on login.php remain distinguishable. */
.login-card .btn-brand {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-invert);
    font-weight: 600;
    padding: .6rem 1rem;
}
.login-card .btn-brand:hover,
.login-card .btn-brand:focus {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-text-invert);
}
.login-card .btn-brand:active {
    background-color: var(--color-primary-active);
    border-color: var(--color-primary-active);
}
.login-card .btn-brand:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}
.login-card .btn-brand-blue {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-text-invert);
    font-weight: 600;
    padding: .6rem 1rem;
}
.login-card .btn-brand-blue:hover,
.login-card .btn-brand-blue:focus {
    background-color: var(--color-secondary-hover);
    border-color: var(--color-secondary-hover);
    color: var(--color-text-invert);
}

/* ============================================================
   RECEIPT
   ============================================================ */
.receipt-box {
    max-width: 320px;
    margin: 0 auto;
    font-family: 'Courier New', monospace;
    font-size: .85rem;
    color: var(--color-text);
}
.receipt-box hr { border-top: 1px dashed var(--color-text-faint); }

/* ============================================================
   EMPTY STATES / MODALS
   ============================================================ */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-text-muted);
}
.empty-state i { font-size: 2.5rem; color: var(--color-border-strong); }

.modal-content {
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
}
.modal-header, .modal-footer { border-color: var(--color-border); }
.modal-header .btn-close:focus { box-shadow: 0 0 0 3px var(--color-primary-ring); }
.toast { border-radius: var(--radius-control); }

/* ============================================================
   RESPONSIVE
   Desktop / Laptop / Tablet / Mobile
   ============================================================ */
@media (max-width: 991.98px) {
    /* Slide the sidebar off-canvas. The offset is derived from the
       width variable so the two can never drift apart again. */
    .app-sidebar {
        left: calc(-1 * (var(--sidebar-width) + 24px));
        transition: left .2s ease;
    }
    .app-sidebar.show {
        left: 0;
        box-shadow: 0 10px 40px rgba(15, 23, 42, .45);
    }
    .app-main { margin-left: 0; }

    /* Stack the POS columns so the cart sits under the products. */
    .pos-cart-panel { height: auto; max-height: 70vh; }
    .app-topbar { padding: .65rem 1rem; }
}

/* Touch-friendly controls on small screens. */
@media (max-width: 767.98px) {
    .container-fluid { padding: .85rem !important; }

    /* Dashboard cards stay compact but legible. */
    .stat-card { padding: .8rem !important; }
    .stat-card .stat-value { font-size: 1.35rem; }
    .stat-card .stat-icon { width: 38px; height: 38px; font-size: 1.1rem; }

    /* Tables scroll horizontally rather than overflowing the page. */
    .table-responsive { -webkit-overflow-scrolling: touch; }

    /* Bigger hit areas for the cart steppers. */
    .pos-cart-items .btn-qty { min-width: 38px; height: 38px; }
    #completeSaleBtn { min-height: 52px; }

    .login-card .card-body { padding: 1.25rem; }
    .login-card .login-header { padding: 1.6rem 1.15rem 1.15rem; }

    /* Toasts should not cover a whole phone screen. */
    .toast-container { left: .5rem; right: .5rem; }
}

@media (max-width: 575.98px) {
    .stat-card .stat-value { font-size: 1.2rem; }
    .user-chip .user-role { display: none; }
    .pos-product-card .product-price { font-size: 1.05rem; }
    .pos-totals .row-total { font-size: 1.3rem; }
}

/* ---------- Print (receipts) ---------- */
@media print {
    .no-print,
    .app-sidebar,
    .app-topbar { display: none !important; }
    .app-main { margin-left: 0; }
    body { background-color: var(--color-card); }
    .receipt-box { max-width: 100%; color: #000; }
    .card { box-shadow: none; border-color: #ccc; }
    /* ---------- Print (receipt) ----------
       Scoped to body.receipt-open (set by the POS page while the receipt
       modal is up) so report printing, which shares this same media
       query, keeps its normal behaviour. Only the receipt reaches the
       paper: no card, no background, no POS screen - text on white. */
    body.receipt-open {
        background: #fff;
        /* Bootstrap locks body scrolling while a modal is open, which
           would clip a long receipt to a single page. */
        overflow: visible !important;
        padding-right: 0 !important;
    }

    /* Everything except the receipt stays off the paper. */
    body.receipt-open .app-main,
    body.receipt-open .app-sidebar,
    body.receipt-open .app-topbar,
    body.receipt-open .toast-container,
    body.receipt-open .modal-backdrop,
    body.receipt-open .receipt-modal .modal-footer { display: none !important; }

    /* Lift the modal out of its fixed overlay and let it fill the page. */
    body.receipt-open .receipt-modal {
        position: static;
        display: block;
        width: auto;
        height: auto;
        overflow: visible;
        background: none;
    }
    body.receipt-open .receipt-modal .modal-dialog {
        max-width: none;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    body.receipt-open .receipt-modal .modal-content {
        background: none;
        border: 0;
        box-shadow: none;
        border-radius: 0;
    }
    body.receipt-open .receipt-modal .modal-body { padding: 0; }

    /* Full size, with every background and border the theme adds gone. */
    body.receipt-open .receipt-box,
    body.receipt-open .receipt-box * {
        background: transparent !important;
        color: #000 !important;
    }
    body.receipt-open .receipt-box {
        max-width: 100%;
        width: 100%;
        margin: 0;
        font-size: 12pt;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    body.receipt-open .receipt-box hr { border-top: 1px dashed #000; }

}