html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: #f5f6f8; touch-action: manipulation; }
.navbar-brand { letter-spacing: .02em; }
/* App shell: the page itself never scrolls -- it's pinned to exactly the
visible viewport height, and the sidebar + main content each get their
OWN independent scrollbar inside that. This replaces an earlier
`position: sticky` + `100vh` sidebar, which looked fine on desktop but
left a big blank strip at the bottom on iPad/iPhone Safari once you
scrolled: 100vh there is calculated against the browser's LARGEST
possible viewport (before its address bar collapses), not what's
actually visible, so the page kept "growing" as you scrolled. 100dvh
(dynamic viewport height) is supposed to fix that on its own, but
several iOS Safari versions (including some that otherwise claim dvh
support) still get it wrong, especially inside an "Add to Home Screen"
shell -- so this doesn't rely on dvh alone. base.html's global script
measures the ACTUAL visible height with plain JS (window.innerHeight,
which is always correct) and writes it into the --app-height variable
below, redone on every resize/orientation change/address-bar show-hide.
100vh, then 100dvh, then --app-height are listed in that order on
purpose: each later line only takes effect in a browser that
understands it, and whichever one the browser understands LAST wins --
so --app-height (backed by real JS, most reliable) overrides 100dvh
(CSS-only, usually fine) overrides 100vh (the old broken baseline, kept
only for a browser that's missing everything else). */
.app-shell {
/* Pinned to the visible area (see base.html: --app-height follows window.visualViewport, so it
also shrinks above the on-screen keyboard). position:fixed means the document itself can never
scroll or rubber-band, so there is no blank strip under the sidebar or the content. */
position: fixed;
left: 0; right: 0;
top: var(--app-top, 0px);
height: 100vh;
height: 100dvh;
height: var(--app-height, 100dvh);
overflow: hidden;
}
/* Left sidebar nav (desktop/tablet). Fills the app shell's full height and
scrolls on its own ONLY if its own link list is ever taller than the
screen -- it no longer moves at all when the main content scrolls. */
.sidebar {
width: 230px;
min-width: 230px;
height: 100%;
overflow-y: auto;
overscroll-behavior: contain;
padding-top: calc(1rem + env(safe-area-inset-top)) !important;
padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
padding-left: calc(1rem + env(safe-area-inset-left)) !important;
}
/* The main content pane (navbar + banners + page content together) --
the one thing that actually scrolls when there's a long product list,
a long table, etc. -webkit-overflow-scrolling keeps that scrolling
smooth/momentum-based on iOS instead of the choppy default. */
.main-pane {
height: 100%;
overflow: hidden; /* the top bar (phones / portrait) stays put; only .main-scroll scrolls */
padding-right: env(safe-area-inset-right);
}
.main-scroll {
flex: 1 1 0;
min-height: 0;
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden; /* never a sideways scroll; wide tables scroll inside .table-responsive */
overscroll-behavior: contain; /* a drag at the end of the list doesn't drag the whole page */
-webkit-overflow-scrolling: touch;
padding-bottom: env(safe-area-inset-bottom);
}
.main-pane > .navbar { height: var(--topbar-h); padding: env(safe-area-inset-top) 0 0 env(safe-area-inset-left); flex: 0 0 auto; }
:root { --topbar-h: 0px; }
@media (max-width: 991.98px) { :root { --topbar-h: calc(56px + env(safe-area-inset-top)); } }
.sidebar .nav-link,
.offcanvas .nav-link {
color: rgba(255, 255, 255, .85);
border-radius: .375rem;
padding: .5rem .75rem;
}
.sidebar .nav-link:hover,
.offcanvas .nav-link:hover {
background-color: rgba(255, 255, 255, .1);
color: #fff;
}
.sidebar .nav-link.active,
.offcanvas .nav-link.active {
background-color: #0d6efd;
color: #fff;
}
.table-flag { background-color: #fff3cd !important; }
.risk-high { color: #b02a37; font-weight: 600; }
.risk-med { color: #b06a00; font-weight: 600; }
/* Register screen: sized for a finger on a tablet, not just a mouse pointer. */
.product-tile {
cursor: pointer;
transition: transform .05s ease;
min-height: 108px;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
.product-tile:active { transform: scale(0.97); background-color: #f1f3f9; }
.product-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.08); }
/* Buttons and form controls throughout the app get a bit more breathing
room so they're comfortable to tap, not just click. */
.btn { min-height: 2.5rem; }
.btn-lg { min-height: 3.25rem; }
.form-control, .form-select { min-height: 2.75rem; }
.form-control-lg, .form-select-lg { min-height: 3.25rem; font-size: 1.15rem; }
/* ---- Register: touch-friendly sizing (M1) ---- */
.btn-touch { min-height: 56px; min-width: 56px; font-size: 1.1rem; font-weight: 600; }
.btn-touch-sm { min-height: 48px; min-width: 56px; font-size: 1rem; font-weight: 600; }
.btn-icon-touch { width: 3rem; height: 3rem; padding: 0; }
.register-layout .product-tile { min-height: 7.5rem; cursor: pointer; }
.product-name { font-size: 1.2rem; font-weight: 700; line-height: 1.2; }
.product-price { font-size: 1.35rem; font-weight: 700; color: #1b6ec2; }
.qty-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.pay-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.pay-options .btn { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; padding: .5rem .25rem; }
.demo-badge { font-size: .6rem; letter-spacing: .03em; margin-top: .15rem; }
.pct-quick, .cash-quick { display: flex; flex-wrap: wrap; gap: .5rem; }
.checkout-body .totals-lines { font-size: 1.05rem; }
.checkout-body .totals-lines > div { padding: .15rem 0; }
.total-row { font-size: 1.35rem; font-weight: 700; border-top: 2px solid #212529; margin-top: .5rem; padding-top: .5rem; }
.total-amount { font-size: 2.1rem; color: #198754; }
.btn-complete { min-height: 68px; font-size: 1.35rem; font-weight: 700; }
/* ---- Tablet usability pass (landscape tablets, 992-1279px wide) ----
1) The sidebar becomes a slim icon rail (labels stay, small, under each icon) so the register gets
the width back. Wider screens keep the full sidebar; phones keep the slide-out menu.
2) On the register the cart/payment panel stays on screen (sticky) and never grows taller than the
screen: the cart LINES scroll inside it, while the totals, payment buttons and Complete sale stay put.
Pure layout -- no calculation or business rule is touched. */
@media (min-width: 992px) and (max-width: 1279.98px) {
.sidebar { width: 88px; min-width: 88px; padding-left: calc(.5rem + env(safe-area-inset-left)) !important; padding-right: .5rem !important;
padding-top: calc(.5rem + env(safe-area-inset-top)) !important; padding-bottom: calc(.5rem + env(safe-area-inset-bottom)) !important; }
.sidebar .nav-link { display: flex; flex-direction: column; align-items: center; gap: .1rem; text-align: center;
padding: .45rem .15rem; font-size: .68rem; line-height: 1.15; min-height: 52px; justify-content: center; }
.sidebar .nav-link > i { font-size: 1.3rem; }
.sidebar .nav-link .badge { font-size: .55rem; }
.sidebar .nav-brand-text, .sidebar .nav-user { display: none; }
.sidebar > a { justify-content: center; font-size: 1.6rem !important; margin-bottom: .5rem !important; }
.sidebar .btn { font-size: .68rem; padding: .3rem .1rem; display: flex; flex-direction: column; align-items: center; }
.sidebar .text-white-50.small { font-size: .62rem; }
}
/* Keep the clock-out / count action reachable without scrolling a long page (all screen sizes). */
.sticky-actions { position: sticky; bottom: 0; background: #f5f6f8; padding: .75rem 0 .25rem; z-index: 5; }
/* ---- iPad-first responsive layer ---------------------------------------------------------------
Register: one flexible layout for every size.
>= 768px (iPad landscape AND portrait): products on the left, the cart/payment panel on the
right, side by side, the panel pinned (see the tablet block above).
< 768px (phones): stacked, with a "View cart & pay" bar pinned to the bottom of the screen.
The product grid fills whatever width is left with as many 150px+ tiles as fit. */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.product-grid > .empty-state { grid-column: 1 / -1; padding: 3rem 1rem; }
.product-grid .product-tile { height: 100%; }
.product-name { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cart-item-main { min-width: 0; flex: 1 1 auto; padding-right: .5rem; }
.cart-item-name { overflow-wrap: anywhere; }
/* Finger-friendly everywhere on touch screens (iPad / phones). */
@media (pointer: coarse), (max-width: 1180px) {
/* 16px+ in every field stops iOS Safari zooming the page when a field is tapped. */
input, select, textarea, .form-control, .form-select, .form-control-sm, .form-select-sm { font-size: 1rem !important; }
.btn { min-height: 44px; }
.btn-sm { min-height: 44px; padding-left: .75rem; padding-right: .75rem; }
.sidebar .nav-link, .offcanvas .nav-link { min-height: 48px; display: flex; align-items: center; }
.form-control, .form-select { min-height: 3rem; }
.form-check-input { width: 1.5rem; height: 1.5rem; }
.product-tile, .btn, .nav-link, summary { -webkit-touch-callout: none; }
.product-tile { user-select: none; -webkit-user-select: none; }
}
/* ---- Manager approval PIN pad (M4): big keys, works in iPad portrait + landscape ---- */
.approval-dialog { max-width: 400px; }
.approval-summary { font-weight: 600; overflow-wrap: anywhere; }
.pin-display { display: flex; justify-content: center; gap: .75rem; margin: .5rem 0 .75rem; min-height: 1.5rem; }
.pin-dot { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid #6c757d; background: transparent; }
.pin-dot.on { background: #212529; border-color: #212529; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.pin-key { min-height: 64px; font-size: 1.6rem; font-weight: 600; touch-action: manipulation; }
@media (max-height: 640px) { .pin-key { min-height: 52px; font-size: 1.35rem; } .pin-display { margin: .25rem 0 .5rem; } }
.approval-row .btn { white-space: normal; }
/* --- Cash Management in the sidebar: easy to spot without shouting --------------------------------------------------- */
.sidebar .nav-link.nav-cash, .offcanvas .nav-link.nav-cash {
background: rgba(46, 204, 113, .10);
box-shadow: inset 3px 0 0 #2ecc71;
}
.sidebar .nav-link.nav-cash > i, .offcanvas .nav-link.nav-cash > i { color: #7ee0a8; }
.sidebar .nav-link.nav-cash:hover, .offcanvas .nav-link.nav-cash:hover { background: rgba(46, 204, 113, .18); }
.sidebar .nav-link.nav-cash.active, .offcanvas .nav-link.nav-cash.active { background: #0d6efd; box-shadow: inset 3px 0 0 #7ee0a8; }
.nav-chip {
display: inline-block; margin-left: auto; padding: .1rem .5rem; border-radius: 999px;
font-size: .68rem; font-weight: 700; letter-spacing: .02em; line-height: 1.35; white-space: nowrap;
}
.nav-chip-open { background: #198754; color: #fff; }
.nav-chip-closed { background: #6c757d; color: #fff; }
.nav-chip-needs { background: #ffc107; color: #3b2f00; }
@media (min-width: 992px) and (max-width: 1279.98px) { /* the slim iPad rail: chip tucks under the label */
.sidebar .nav-link.nav-cash { box-shadow: inset 0 3px 0 #2ecc71; }
.sidebar .nav-link.nav-cash .nav-chip { margin: .15rem 0 0; font-size: .58rem; padding: .05rem .35rem; }
}
/* iPad keyboard: while a field has focus, leave room under the content so the field AND the button below it can
always be scrolled above the on-screen keyboard (the shell also shrinks to the visible area; this covers the
moments when Safari reports the keyboard late). Nothing is added when no field is focused. */
.field-focused .main-scroll { padding-bottom: max(env(safe-area-inset-bottom), 38vh); }
.main-scroll { scroll-padding: 1rem 0 5rem; }
/* =====================================================================================================================
Register (P1): a fixed-height iPad register, not a scrolling web page.
- The status strip + product search stay put; the product grid scrolls on its own.
- The cart is always on screen: its lines scroll on their own, and the total, payment choice and Complete sale are
pinned at the bottom of the panel.
- Narrower screens (portrait iPad, phones) get a persistent cart bar that opens a checkout sheet.
Pure layout. The checkout form, its fields and its script are unchanged.
===================================================================================================================== */
.main-fixed { overflow: hidden !important; }
.main-fixed > .container-fluid, .main-fixed > .container { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; padding-top: .6rem !important; padding-bottom: .6rem !important; }
.main-fixed > .container-fluid > .alert { flex: 0 0 auto; }
/* While typing, don't add the scroll room the normal pages get: this screen resizes to the space above the keyboard. */
.field-focused .main-fixed { padding-bottom: env(safe-area-inset-bottom); }
.register-layout { flex: 1 1 auto; min-height: 0; display: flex; gap: .75rem; position: relative; overflow: hidden; overflow: clip; }
.reg-products { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.reg-top { flex: 0 0 auto; }
.reg-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .75rem; margin-bottom: .5rem; }
.reg-status-info { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; min-width: 0; }
.reg-title { font-size: 1.15rem; font-weight: 700; }
.reg-status .btn-touch { min-height: 44px; min-width: 44px; font-size: .95rem; padding: .35rem .7rem; }
.reg-alert { margin-bottom: .5rem; padding: .5rem .75rem; }
.reg-search { position: relative; margin-bottom: .5rem; }
.reg-search > .bi-search { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: #6c757d; pointer-events: none; }
.reg-search > .form-control { padding-left: 2.4rem; min-height: 3rem; }
.product-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: .2rem .2rem .75rem; }
.product-cell[hidden] { display: none !important; }
.reg-cart { flex: 0 0 clamp(340px, 36vw, 450px); min-width: 0; min-height: 0; display: flex; outline: none; }
.cart-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.cart-panel > .card-header { flex: 0 0 auto; }
.cart-lines { flex: 1 1 0; min-height: 4.5rem; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; margin-bottom: 0; }
.checkout-body { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; padding: .6rem 1rem .75rem; border-top: 1px solid rgba(0, 0, 0, .125); }
.checkout-body > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.checkout-summary { flex: 0 0 auto; }
.checkout-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.checkout-footer { flex: 0 0 auto; padding-top: .6rem; }
.discount-details > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: .4rem; list-style: none; }
.discount-details > summary::-webkit-details-marker { display: none; }
.discount-details > summary::after { content: "\F282"; font-family: "bootstrap-icons"; margin-left: auto; transition: transform .15s ease; }
.discount-details[open] > summary::after { transform: rotate(180deg); }
.cart-panel .total-row { margin-top: .25rem; padding-top: .35rem; }
.cart-panel .total-amount { font-size: 2.3rem; line-height: 1.1; }
/* Landscape (and any wide screen): products left, cart right, always visible. */
.cart-bar, .cart-backdrop, .sheet-close, .sheet-grip { display: none; }
/* Shorter screens: tighten the cart so the total and payment area never need to scroll on a 768px-tall iPad. */
@media (min-width: 992px) and (max-height: 860px) {
.cart-panel .list-group-item { padding-top: .4rem !important; padding-bottom: .4rem !important; }
.cart-panel .btn-icon-touch { width: 2.5rem; height: 2.5rem; }
.cart-panel > .card-header { padding-top: .4rem; padding-bottom: .4rem; }
.checkout-body .totals-lines { font-size: .95rem; }
.checkout-body .totals-lines > div { padding: .05rem 0; }
.cart-panel .total-row { font-size: 1.1rem; }
.cart-panel .total-amount { font-size: 1.8rem; }
.cart-panel .pay-options { margin-top: .5rem !important; }
.cart-panel .pay-options .btn-touch { min-height: 50px; }
.cart-panel #cashBox { margin-top: .5rem !important; }
.cart-panel .cash-quick { display: grid; grid-template-columns: repeat(6, 1fr); gap: .25rem; margin-bottom: .35rem !important; }
.cart-panel .cash-quick .btn-touch-sm { min-height: 44px; min-width: 0; padding: 0; font-size: .85rem; }
.cart-panel #cashBox > label { display: none; }
.cart-panel #cardNote { margin-top: .5rem !important; font-size: .85rem; }
.cart-panel #cashBox .form-control-lg { min-height: 2.9rem; }
.cart-panel .btn-complete { min-height: 58px; }
.cart-panel .discount-box { display: grid; grid-template-columns: 1fr 1fr; column-gap: .4rem; }
.cart-panel .discount-box > .d-flex, .cart-panel .discount-box > .pct-quick { grid-column: 1 / -1; }
.cart-panel .discount-box .pct-quick { flex-wrap: nowrap; gap: .25rem; margin-bottom: .35rem !important; }
.cart-panel .discount-box .pct-quick .btn-touch-sm { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 0; font-size: .85rem; }
.cart-panel .discount-box .input-group { margin-bottom: 0 !important; }
.cart-panel .discount-box .form-control-lg { min-height: 2.6rem; font-size: 1rem; }
.cart-panel .discount-box > input.form-control { min-height: 2.6rem; font-size: .9rem; }
}
/* Portrait iPad and phones: a persistent cart bar; tapping it opens the checkout sheet (the very same cart panel). */
@media (max-width: 991.98px) {
.register-layout { flex-direction: column; gap: .5rem; }
.cart-bar {
display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: .75rem;
min-height: 64px; padding: .5rem 1rem; border: 0; border-radius: .75rem; color: #fff; background: #198754;
font-size: 1.1rem; font-weight: 600; box-shadow: 0 -2px 12px rgba(0, 0, 0, .15); -webkit-tap-highlight-color: transparent;
}
.cart-bar:disabled { background: #6c757d; opacity: .85; }
.cart-bar-total { font-size: 1.6rem; font-weight: 700; margin-left: auto; }
.cart-bar-go { white-space: nowrap; opacity: .95; }
.cart-backdrop { display: block; position: absolute; inset: 0; z-index: 1039; background: rgba(0, 0, 0, .45); }
.cart-backdrop[hidden] { display: none; }
.reg-cart {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 1040; flex: none; height: min(92%, 100%);
transform: translateY(105%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s;
}
.register-layout.cart-open .reg-cart { transform: none; visibility: visible; transition: transform .25s ease; }
.reg-cart .cart-panel { border-radius: 1rem 1rem 0 0; box-shadow: 0 -6px 24px rgba(0, 0, 0, .3); }
.sheet-grip { display: block; flex: 0 0 auto; padding: .45rem 0 .1rem; text-align: center; background: #fff; touch-action: none; }
.sheet-grip > span { display: inline-block; width: 44px; height: 5px; border-radius: 3px; background: #ced4da; }
.sheet-close { display: inline-block; width: 1.5rem; height: 1.5rem; padding: .5rem; }
.product-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
.reg-cart, .register-layout.cart-open .reg-cart { transition: none; }
.discount-details > summary::after { transition: none; }
}
/* Dashboard calendar: the Month grid uses the same day cells as the Week view; the Year view is a grid of month cards. */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; }
.cal-day { min-height: 5.6rem; padding: .3rem .15rem; }
.cal-day .small, .cal-month .small { line-height: 1.25; }
.cal-out { opacity: .45; background: transparent; }
.cal-today { background: var(--bs-primary-bg-subtle); }
.cal-month { min-height: 7rem; }
.cal-month:hover { background: var(--bs-secondary-bg); }
@media (max-width: 767.98px) {
/* phones: keep every day readable by showing just the net; the full made/spent breakdown is in the week and year views */
.cal-day { min-height: 3.6rem; }
.cal-day .cal-made, .cal-day .cal-spent { display: none; }
}
/* =====================================================================================================================
Dark appearance (premium charcoal / navy). Everything below applies ONLY when ; the Light
rules above are untouched. Bootstrap 5.3's own dark theme does most of the work (forms, tables, modals, dropdowns,
alerts, badges); this block sets the VENDROS palette and fixes the few places that hard-code a light colour.
Palette: page #0e1422 | cards #161f33 | raised (modals, menus, sheet) #1d2840 | border #2b3856 | text #e8edf7 |
muted #a3afc6 | link/primary #7db3ff | success #3ecf8e | warning #ffca2c | danger #ff7b88. Never pure black.
===================================================================================================================== */
[data-bs-theme="dark"] {
color-scheme: dark;
--vx-page: #0e1422; --vx-surface: #161f33; --vx-surface-2: #121a2c; --vx-raised: #1d2840; --vx-border: #2b3856; --vx-control-border: #6577a2;
--vx-text: #e8edf7; --vx-muted: #a3afc6; --vx-link: #7db3ff; --vx-success: #3ecf8e; --vx-warning: #ffca2c; --vx-danger: #ff7b88;
--bs-body-bg: #0e1422; --bs-body-bg-rgb: 14, 20, 34;
--bs-body-color: #e8edf7; --bs-body-color-rgb: 232, 237, 247;
--bs-emphasis-color: #ffffff; --bs-emphasis-color-rgb: 255, 255, 255;
--bs-secondary-color: #a3afc6; --bs-secondary-color-rgb: 163, 175, 198;
--bs-tertiary-color: #8794ad; --bs-tertiary-color-rgb: 135, 148, 173;
--bs-secondary-bg: #161f33; --bs-secondary-bg-rgb: 22, 31, 51;
--bs-tertiary-bg: #121a2c; --bs-tertiary-bg-rgb: 18, 26, 44;
--bs-border-color: #2b3856; --bs-border-color-translucent: rgba(163, 175, 198, .16);
--bs-link-color: #7db3ff; --bs-link-color-rgb: 125, 179, 255; --bs-link-hover-color: #a8cbff; --bs-link-hover-color-rgb: 168, 203, 255;
}
/* an explicit Light stays Light even on a device that is set to dark: native widgets (checkboxes, scrollbars) follow this too */
[data-bs-theme="light"] { color-scheme: light; }
[data-bs-theme="dark"] body { background: var(--vx-page); }
/* the sidebar, top bar and phone menu are dark in both appearances; in Dark they take the same navy family as the page */
[data-bs-theme="dark"] .sidebar.bg-dark, [data-bs-theme="dark"] .navbar.bg-dark, [data-bs-theme="dark"] .offcanvas.bg-dark { background-color: #0a101e !important; }
[data-bs-theme="dark"] .sidebar.bg-dark { box-shadow: inset -1px 0 0 var(--vx-border); }
[data-bs-theme="dark"] .sticky-actions { background: var(--vx-page); }
/* surfaces: cards slightly lighter than the page; raised layers lighter again; subtle borders and shadows */
[data-bs-theme="dark"] .card { --bs-card-bg: var(--vx-surface); --bs-card-cap-bg: rgba(255, 255, 255, .035); --bs-card-border-color: var(--vx-border); --bs-card-color: var(--vx-text); }
[data-bs-theme="dark"] .shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .28) !important; }
[data-bs-theme="dark"] .modal { --bs-modal-bg: var(--vx-raised); --bs-modal-border-color: var(--vx-border); --bs-modal-header-border-color: var(--vx-border); --bs-modal-footer-border-color: var(--vx-border); }
[data-bs-theme="dark"] .dropdown-menu { --bs-dropdown-bg: var(--vx-raised); --bs-dropdown-border-color: var(--vx-border); --bs-dropdown-link-hover-bg: rgba(255, 255, 255, .08); --bs-dropdown-divider-bg: var(--vx-border); }
[data-bs-theme="dark"] .list-group { --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--vx-border); --bs-list-group-action-hover-bg: rgba(255, 255, 255, .05); --bs-list-group-action-active-bg: rgba(255, 255, 255, .09); --bs-list-group-color: var(--vx-text); }
[data-bs-theme="dark"] .bg-white { background-color: var(--vx-surface) !important; }
[data-bs-theme="dark"] .bg-light { background-color: var(--vx-surface-2) !important; color: var(--vx-text); }
[data-bs-theme="dark"] .badge.bg-light { background-color: #c9d3e8 !important; color: #121a2c !important; } /* a small light chip with dark text, readable on dark */
[data-bs-theme="dark"] .table { --bs-table-color: var(--vx-text); --bs-table-border-color: var(--vx-border); --bs-table-striped-bg: rgba(255, 255, 255, .03); --bs-table-hover-bg: rgba(255, 255, 255, .05); }
[data-bs-theme="dark"] .table-light, [data-bs-theme="dark"] thead.table-light th, [data-bs-theme="dark"] .table > thead.table-light > tr > * { --bs-table-bg: var(--vx-raised); --bs-table-color: var(--vx-text); --bs-table-border-color: var(--vx-border); background-color: var(--vx-raised); color: var(--vx-text); }
[data-bs-theme="dark"] .table-flag { background-color: rgba(255, 202, 44, .14) !important; }
/* row highlights (inventory: low stock / out of stock; stock-count results: more / fewer than expected). Bootstrap's table-warning,
table-danger ... are fixed pale colours, so in Dark they become subtle tints with the normal light text. Amber = low / more than
expected; red = out of stock / fewer than expected; a 4px edge in the same colour keeps them distinct at a glance. The row text also
says "Low" / "Out of stock" (badges), so colour is never the only signal. */
[data-bs-theme="dark"] .table-warning { --bs-table-bg: rgba(255, 202, 44, .13); --bs-table-color: var(--vx-text); --bs-table-border-color: rgba(255, 202, 44, .28);
--bs-table-striped-bg: rgba(255, 202, 44, .15); --bs-table-hover-bg: rgba(255, 202, 44, .16); --bs-table-active-bg: rgba(255, 202, 44, .19); }
[data-bs-theme="dark"] .table-danger { --bs-table-bg: rgba(255, 123, 136, .15); --bs-table-color: var(--vx-text); --bs-table-border-color: rgba(255, 123, 136, .30);
--bs-table-striped-bg: rgba(255, 123, 136, .17); --bs-table-hover-bg: rgba(255, 123, 136, .19); --bs-table-active-bg: rgba(255, 123, 136, .22); }
[data-bs-theme="dark"] .table-success { --bs-table-bg: rgba(62, 207, 142, .12); --bs-table-color: var(--vx-text); --bs-table-border-color: rgba(62, 207, 142, .26); --bs-table-hover-bg: rgba(62, 207, 142, .19); }
[data-bs-theme="dark"] .table-info, [data-bs-theme="dark"] .table-primary { --bs-table-bg: rgba(125, 179, 255, .12); --bs-table-color: var(--vx-text); --bs-table-border-color: rgba(125, 179, 255, .26); --bs-table-hover-bg: rgba(125, 179, 255, .19); }
[data-bs-theme="dark"] .table-secondary { --bs-table-bg: rgba(163, 175, 198, .10); --bs-table-color: var(--vx-text); --bs-table-border-color: rgba(163, 175, 198, .24); --bs-table-hover-bg: rgba(163, 175, 198, .16); }
[data-bs-theme="dark"] tr.table-warning > :first-child { box-shadow: inset 4px 0 0 #ffca2c; }
[data-bs-theme="dark"] tr.table-danger > :first-child { box-shadow: inset 4px 0 0 #ff7b88; }
[data-bs-theme="dark"] .border, [data-bs-theme="dark"] .border-top, [data-bs-theme="dark"] .border-bottom { border-color: var(--vx-border) !important; }
[data-bs-theme="dark"] hr { border-color: var(--vx-border); opacity: 1; }
/* form controls: darker than the card they sit on, with an edge that is clearly visible (>= 3:1) */
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: var(--vx-page); border-color: var(--vx-control-border); color: var(--vx-text); }
[data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { background-color: var(--vx-page); border-color: #7db3ff; box-shadow: 0 0 0 .25rem rgba(125, 179, 255, .25); color: var(--vx-text); }
[data-bs-theme="dark"] .form-control::placeholder { color: #8794ad; opacity: 1; }
[data-bs-theme="dark"] .form-control:disabled, [data-bs-theme="dark"] .form-select:disabled, [data-bs-theme="dark"] .form-control[readonly] { background-color: var(--vx-surface-2); color: var(--vx-muted); }
[data-bs-theme="dark"] .input-group-text { background-color: var(--vx-raised); border-color: var(--vx-control-border); color: var(--vx-text); }
[data-bs-theme="dark"] .form-check-input { background-color: var(--vx-page); border-color: var(--vx-control-border); }
[data-bs-theme="dark"] .form-check-input:checked { background-color: #0d6efd; border-color: #0d6efd; }
[data-bs-theme="dark"] .form-text { color: var(--vx-muted); }
/* buttons: outline styles are re-coloured so they stay legible on dark; solid buttons keep their colour and white text */
[data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: #c4cee2; --bs-btn-border-color: #6577a2; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #2b3856; --bs-btn-hover-border-color: #7080a8;
--bs-btn-active-color: #fff; --bs-btn-active-bg: #34456b; --bs-btn-active-border-color: #7080a8; --bs-btn-disabled-color: #7f8ba5; --bs-btn-disabled-border-color: #3a4a70; }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #7db3ff; --bs-btn-border-color: #5b95ee; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #0d6efd; --bs-btn-hover-border-color: #0d6efd;
--bs-btn-active-color: #fff; --bs-btn-active-bg: #0d6efd; --bs-btn-active-border-color: #0d6efd; }
[data-bs-theme="dark"] .btn-check:checked + .btn-outline-primary { color: #fff; background-color: #0d6efd; border-color: #0d6efd; }
[data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: #ff8e9a; --bs-btn-border-color: #e0606d; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #c93a49; --bs-btn-hover-border-color: #c93a49; --bs-btn-active-bg: #c93a49; --bs-btn-active-border-color: #c93a49; }
[data-bs-theme="dark"] .btn-outline-success { --bs-btn-color: #5fdba5; --bs-btn-border-color: #3aa877; --bs-btn-hover-color: #06210f; --bs-btn-hover-bg: #3ecf8e; --bs-btn-hover-border-color: #3ecf8e; }
[data-bs-theme="dark"] .btn-outline-warning { --bs-btn-color: #ffca2c; --bs-btn-border-color: #c9a21f; --bs-btn-hover-color: #2b2100; --bs-btn-hover-bg: #ffca2c; --bs-btn-hover-border-color: #ffca2c; }
[data-bs-theme="dark"] .btn-link { color: var(--vx-link); }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
/* text colours that Bootstrap keeps constant across themes */
[data-bs-theme="dark"] .text-danger { color: var(--vx-danger) !important; }
[data-bs-theme="dark"] .text-success { color: var(--vx-success) !important; }
[data-bs-theme="dark"] .text-primary { color: var(--vx-link) !important; }
[data-bs-theme="dark"] .text-warning { color: var(--vx-warning) !important; }
[data-bs-theme="dark"] .text-muted, [data-bs-theme="dark"] .text-secondary { color: var(--vx-muted) !important; }
[data-bs-theme="dark"] .risk-high { color: var(--vx-danger); }
[data-bs-theme="dark"] .risk-med { color: #ffb454; }
[data-bs-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.list-group-item):not(.person-btn):not(.navbar-brand) { color: var(--vx-link); }
[data-bs-theme="dark"] .alert-link { color: inherit; }
/* register: product tiles, totals, payment actions, cart bar and sheet */
[data-bs-theme="dark"] .product-tile { background: var(--vx-surface); }
[data-bs-theme="dark"] .product-tile:active { background-color: var(--vx-raised); }
[data-bs-theme="dark"] .product-tile:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, .45); border-color: #3a4a70; }
[data-bs-theme="dark"] .product-price { color: var(--vx-link); }
[data-bs-theme="dark"] .total-row { border-top-color: var(--vx-text); }
[data-bs-theme="dark"] .total-amount { color: var(--vx-success); }
[data-bs-theme="dark"] .checkout-body { border-top-color: var(--vx-border); }
[data-bs-theme="dark"] .reg-search > .bi-search { color: var(--vx-muted); }
[data-bs-theme="dark"] .cart-panel { background: var(--vx-surface); }
[data-bs-theme="dark"] .sheet-grip { background: var(--vx-surface); }
[data-bs-theme="dark"] .sheet-grip > span { background: #4a5a82; }
[data-bs-theme="dark"] .reg-cart .cart-panel { box-shadow: 0 -8px 28px rgba(0, 0, 0, .6); }
[data-bs-theme="dark"] .cart-backdrop { background: rgba(4, 8, 18, .62); }
[data-bs-theme="dark"] .cart-bar { box-shadow: 0 -2px 14px rgba(0, 0, 0, .5); }
[data-bs-theme="dark"] .pin-dot { border-color: #8794ad; }
[data-bs-theme="dark"] .pin-dot.on { background: var(--vx-text); border-color: var(--vx-text); }
[data-bs-theme="dark"] .discount-details > summary { color: var(--vx-text); }
/* sign-in, kiosk and device-setup screens (their own page styles hard-code a light backdrop and white keys) */
[data-bs-theme="dark"] .kiosk-wrap { background: radial-gradient(circle at top, #1b2a4a 0%, #0e1422 68%); }
[data-bs-theme="dark"] .kiosk-card { background: var(--vx-surface); box-shadow: 0 18px 50px rgba(0, 0, 0, .55) !important; }
[data-bs-theme="dark"] .kiosk-biz-name { color: var(--vx-text); }
[data-bs-theme="dark"] .kiosk-wordmark { color: #cfd9f0; }
[data-bs-theme="dark"] .kiosk-greeting { color: var(--vx-muted); }
[data-bs-theme="dark"] .kiosk-sub, [data-bs-theme="dark"] .kiosk-hint, [data-bs-theme="dark"] .kiosk-link { color: var(--vx-muted); }
[data-bs-theme="dark"] .kiosk-register { color: var(--vx-text); }
[data-bs-theme="dark"] .kiosk-logo { box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 6px 18px rgba(0, 0, 0, .5); }
[data-bs-theme="dark"] .person-btn { background: var(--vx-raised); border-color: #3a4a70; color: var(--vx-text); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
[data-bs-theme="dark"] .person-btn:active { background: #2b3856; }
[data-bs-theme="dark"] .keypad-btn { background: var(--vx-raised); border-color: #3a4a70; color: var(--vx-text); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
[data-bs-theme="dark"] .keypad-btn:active { background: #2b3856; }
[data-bs-theme="dark"] .keypad-btn-muted { color: var(--vx-muted); }
[data-bs-theme="dark"] .kiosk-card .pin-dot { border-color: #7f8ba5; }
[data-bs-theme="dark"] .kiosk-card .pin-dot.filled { background: var(--vx-success); border-color: var(--vx-success); }
/* the appearance menu in the sidebar footer (the sidebar itself is already dark in both appearances) */
.appearance-menu { min-width: 12rem; }
.appearance-menu .dropdown-item { display: flex; align-items: center; gap: .5rem; min-height: 44px; }
.appearance-check { visibility: hidden; width: 1rem; }
.appearance-segment .btn.active { background: #0d6efd; border-color: #0d6efd; color: #fff; }