:root {
    --color-primary: #E8001E;
    --color-primary-dark: #B4001A;
    --color-bg: #F4F5F7;
    --color-surface: #FFFFFF;
    --color-text: #1A1D23;
    --color-text-muted: #6B7280;
    --color-border: #E5E7EB;
    --color-danger-bg: #FEF2F2;
    --color-danger-text: #B91C1C;
    --radius-lg: 16px;
    --radius-md: 12px;
    --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.06);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden; /* safety net: no page should ever scroll sideways on mobile */
}

html { overflow-x: hidden; }

.app-main {
    min-height: 100vh;
    padding-bottom: 76px; /* space for bottom nav */
}
/* Compensates for .topbar switching to position: fixed below — fixed
   elements are pulled out of normal document flow entirely, so without
   this the page content would start at the very top of the screen and
   slide in underneath the header instead of below it. Scoped to only
   apply right after a real .topbar (i.e. when logged in) so the
   unauthenticated .login-screen — which has no topbar at all — is
   completely unaffected. 72px matches the topbar's actual rendered
   height (16px padding top/bottom + its 40px avatar/text row). */
.topbar + .app-main {
    padding-top: 72px;
}

/* ---- Top bar: full-width "welcome card" header with business name,
   page title, and a circular user-initial avatar (doubles as logout).
   Flush against the screen edges (no floating margin/gap) so it sits
   exactly like a normal fixed app header, with just a shadow to
   separate it from the content below. ---- */
.topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px;
    background: var(--color-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    /* position: sticky was unreliable here — this app forces
       overflow-x: hidden on both html and body (to stop mobile
       horizontal scroll elsewhere), and once an ancestor's overflow is
       anything but the default "visible", browsers can end up treating
       that ancestor as the sticky-positioning's scroll container instead
       of the actual viewport, which is exactly the kind of edge case
       that made the topbar drift/scroll away instead of staying put.
       position: fixed sidesteps all of that — same technique this
       codebase already uses for .bottom-nav below. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* Must beat every in-page positioned element (pos-search-wrap and
       bottom-nav both sit at z-index: 20) — otherwise this whole header,
       including the user-menu dropdown nested inside it, paints underneath
       them. A child's z-index only wins fights within its own parent's
       stacking context, so the dropdown's z-index: 20 alone can't escape
       a topbar stuck at z-index: 10. */
    z-index: 30;
}
.topbar__back {
    background: none;
    border: none;
    color: var(--color-text);
    font-size: 16px;
    padding: 6px;
    margin: -6px 0;
    flex-shrink: 0;
}
.topbar__text { flex: 1; min-width: 0; }
.topbar__subtitle {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar__title { font-weight: 700; font-size: 20px; color: var(--color-primary); margin-top: 2px; }
.topbar__user { flex-shrink: 0; }
.user-menu { position: relative; }
.topbar__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    border: none;
    cursor: pointer;
}
.user-menu__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 170px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 6px;
    z-index: 20;
}
.user-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}
.user-menu__item i { width: 16px; text-align: center; color: var(--color-text-muted); }
.user-menu__item:active { background: var(--color-bg); }
.user-menu__item--danger { color: var(--color-danger-text); }
.user-menu__item--danger i { color: var(--color-danger-text); }

/* ---- Bottom navigation ---- */
.bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    display: flex;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    z-index: 20;
}
.bottom-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 0;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 11px;
}
.bottom-nav__item i { font-size: 18px; }
.bottom-nav__item--primary {
    color: var(--color-primary);
    font-weight: 600;
}

/* ---- Login screen ---- */
.login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.login-card {
    width: 100%;
    max-width: 380px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 32px 24px;
    text-align: center;
}
.login-card__logo {
    width: 64px; height: 64px;
    margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-primary);
    color: #fff;
    border-radius: 50%;
    font-size: 26px;
}
.login-card__title { margin: 0; font-size: 22px; }
.login-card__logo--image {
    background: #fff;
    object-fit: cover;
    border: 1px solid var(--color-border);
}
.login-card__version {
    margin: 2px 0 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--color-primary);
    text-transform: uppercase;
}
.login-forgot {
    margin-top: 18px;
    font-size: 13px;
    color: var(--color-text-muted);
}
.login-forgot summary {
    cursor: pointer;
    text-align: center;
    color: var(--color-primary);
    font-weight: 500;
    list-style: none;
}
.login-forgot summary::-webkit-details-marker { display: none; }
.login-forgot p {
    margin: 10px 0 0;
    padding: 10px 12px;
    background: var(--color-bg);
    border-radius: var(--radius-md);
    line-height: 1.5;
}
.login-card__subtitle { color: var(--color-text-muted); margin: 4px 0 24px; font-size: 14px; }

.login-form { display: flex; flex-direction: column; gap: 16px; text-align: left; }

.form-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--color-text-muted); }
/* Same trap as .sheet-overlay / .pos-search-results / .payment-detail-card above:
   author display:flex beats the browser's built-in [hidden]{display:none} rule,
   so any .form-field toggled via JS's `.hidden = true` (Products' Current Stock
   field, Purchasing's Cheque Number field, Inventory's "Other reason" field)
   would stay visible forever without this explicit override. */
.form-field[hidden] { display: none; }
.form-field input {
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 16px;
    color: var(--color-text);
}
.form-field input:focus { outline: none; border-color: var(--color-primary); }

.checkbox-field { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-muted); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.btn--primary { background: var(--color-primary); color: #fff; height: 40px;}
.btn--primary:active { background: var(--color-primary-dark); }
.btn--block { width: 100%; }
.btn--lg { padding: 14px 0; }

.alert { padding: 12px 14px; border-radius: var(--radius-md); font-size: 14px; margin-bottom: 4px; }

/* ---- My Profile ---- */
.profile-screen { padding: 16px; }
.profile-card {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 24px 16px; background: var(--color-surface);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-card); margin-bottom: 16px;
}
.profile-card__avatar {
    width: 64px; height: 64px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-primary); color: #fff; font-size: 26px; font-weight: 700;
    margin-bottom: 4px;
}
.profile-card__name { font-size: 17px; font-weight: 700; }
.profile-card__role { font-size: 12px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.profile-info {
    background: var(--color-surface); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card); padding: 4px 16px; margin-bottom: 8px;
}
.profile-info__row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 0; border-bottom: 1px solid var(--color-border); font-size: 14px;
}
.profile-info__row:last-child { border-bottom: none; }
.profile-info__label { color: var(--color-text-muted); }
.profile-info__value { font-weight: 600; }
.alert--error { background: var(--color-danger-bg); color: var(--color-danger-text); }

.page-placeholder { padding: 24px 16px; text-align: center; color: var(--color-text-muted); }

/* ---- More menu ---- */
.more-menu {
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 8px;
}
.more-menu__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    color: var(--color-text);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
}
.more-menu__item i:first-child { width: 22px; text-align: center; color: var(--color-primary); font-size: 18px; }
.more-menu__chevron { margin-left: auto; color: var(--color-text-muted); font-size: 13px; }
.more-menu__item--danger { color: var(--color-danger-text); }
.more-menu__item--danger i:first-child { color: var(--color-danger-text); }

/* ---- More screen v2: icon-tile card grid ---- */
.more-screen { padding: 4px 16px 20px; }
.more-screen__section-title {
    font-size: 13px; font-weight: 700; color: var(--color-text-muted);
    text-transform: uppercase; letter-spacing: 0.04em; margin: 18px 4px 10px;
}
.more-screen__section-title:first-child { margin-top: 4px; }
.more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.more-grid__card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; text-align: center; text-decoration: none; color: var(--color-text);
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); padding: 18px 8px; box-shadow: var(--shadow-card);
}
.more-grid__card:active { background: var(--color-bg); }
.more-grid__icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-danger-bg); color: var(--color-primary); font-size: 18px;
}
.more-grid__label { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.more-screen__logout {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin-top: 22px; padding: 14px; border-radius: var(--radius-md);
    background: var(--color-danger-bg); color: var(--color-danger-text);
    text-decoration: none; font-weight: 600; font-size: 14px;
}

/* ---- Dashboard ---- */
.dashboard { padding: 16px; }
.dashboard__greeting { margin: 0 0 16px; font-size: 15px; color: var(--color-text-muted); }

.stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}
.stat-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 16px;
    text-decoration: none;
    color: var(--color-text);
    display: block;
}
.stat-card__icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    color: #fff;
    margin-bottom: 10px;
}
.stat-card__icon--sales        { background: #16A34A; }
.stat-card__icon--transactions { background: #2563EB; }
.stat-card__icon--profit       { background: #0D9488; }
.stat-card__icon--purchasing   { background: #D97706; }
.stat-card__icon--stock        { background: #7C3AED; }
.stat-card__icon--warning      { background: #DC2626; }

.stat-card__value { font-size: 18px; font-weight: 700; line-height: 1.2; }
.stat-card__label { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }

.stat-card--alert { border: 1.5px solid #FCA5A5; background: #FEF2F2; }

.shortcut-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.shortcut {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 16px 8px;
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
    font-size: 12px;
    font-weight: 500;
}
.shortcut i { display: block; font-size: 20px; color: var(--color-primary); margin-bottom: 8px; }

/* ==================== POS SCREEN ==================== */

.pos-search {
    position: sticky;
    top: 57px; /* below topbar */
    z-index: 5;
    background: var(--color-bg);
    padding: 12px 16px;
    display: flex;
    align-items: center;
}
.pos-search__icon { position: absolute; left: 30px; color: var(--color-text-muted); font-size: 14px; }
.pos-search input {
    width: 100%;
    padding: 12px 46px 12px 38px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 16px;
    background: var(--color-surface);
}
.pos-search input:focus { outline: none; border-color: var(--color-primary); }
.pos-search__scan-btn {
    position: absolute;
    right: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: var(--color-primary);
    color: #fff;
    font-size: 14px;
}

/* ---- Barcode scanner sheet ---- */
.scanner-reader {
    width: 100%;
    min-height: 260px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #000;
}
.scanner-hint { text-align: center; color: var(--color-text-muted); font-size: 13px; margin: 14px 0 0; }

/* ---- Barcode field with inline scan button (Products form) ---- */
.barcode-input-row { display: flex; gap: 8px; }
.barcode-input-row input { flex: 1; }
.barcode-scan-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: #fff;
    font-size: 16px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 16px 90px;
}
.pos-loading, .pos-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--color-text-muted);
    padding: 32px 0;
    font-size: 14px;
}

.product-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 14px;
    text-align: left;
    cursor: pointer;
    min-height: 108px;
}
.product-card:active { transform: scale(0.98); }
.product-card.is-out-of-stock { opacity: 0.55; }
.product-card__name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-card__code {
    font-size: 10.5px;
    color: var(--color-text-muted);
    margin-top: 4px;
    font-family: 'SFMono-Regular', Consolas, monospace;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.product-card__code i { margin-right: 3px; }
.product-card__footer {
    margin-top: auto;
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.product-card__price { font-size: 15px; font-weight: 700; color: var(--color-primary); white-space: nowrap; }
.product-card__stock-badge { font-size: 9.5px; padding: 3px 7px; white-space: nowrap; }

/* ---- Floating cart bar ---- */
.cart-bar {
    position: fixed;
    left: 16px; right: 16px;
    bottom: 84px; /* above bottom nav */
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
    z-index: 15;
}
.cart-bar__count i { margin-right: 6px; }
.cart-bar__action { text-decoration: underline; font-size: 13px; }

/* ---- Bottom sheet overlay (cart / receipt) ---- */
.sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: flex-end;
    z-index: 50;
}
/* Our own display:flex above overrides the browser's built-in
   [hidden]{display:none} rule (author styles always beat the UA
   stylesheet, regardless of specificity), so it must be restated
   explicitly here or the sheet stays visible even with hidden set. */
.sheet-overlay[hidden] {
    display: none;
}
.sheet {
    background: var(--color-surface);
    width: 100%;
    max-height: 88vh;
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}
.sheet__header h3 { margin: 0; font-size: 17px; }
.sheet__close { background: none; border: none; font-size: 18px; color: var(--color-text-muted); }
.sheet__body { padding: 16px 20px; overflow-y: auto; flex: 1; }
.sheet__footer { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-border); }
.sheet__footer--split { display: flex; gap: 10px; }

/* ---- Cart lines ---- */
.cart-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}
.cart-line__info { min-width: 0; }
.cart-line__name { font-size: 14px; font-weight: 600; }
.cart-line__code {
    font-size: 10.5px;
    color: var(--color-text-muted);
    font-family: 'SFMono-Regular', Consolas, monospace;
    margin: 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cart-line__code i { margin-right: 3px; }
.cart-line__price { font-size: 12px; color: var(--color-text-muted); }
.cart-line__qty { display: flex; align-items: center; gap: 8px; }
.qty-btn {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    font-size: 16px;
    line-height: 1;
    color: var(--color-text);
}
.qty-value { font-size: 13px; min-width: 54px; text-align: center; }
.cart-line__total { font-size: 14px; font-weight: 600; min-width: 70px; text-align: right; }
.cart-line__remove { background: none; border: none; color: var(--color-danger-text); font-size: 14px; }

/* ---- Totals & discount / payment ---- */
.cart-totals { margin-top: 12px; }
.cart-totals__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
}
.cart-totals__row--grand { font-size: 17px; font-weight: 700; border-top: 1px solid var(--color-border); margin-top: 4px; padding-top: 12px; }
.cart-totals__row input {
    width: 110px;
    text-align: right;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 14px;
}

.payment-methods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
}
.payment-method-btn {
    padding: 10px 0;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
}
.payment-method-btn.is-active { border-color: var(--color-primary); color: var(--color-primary); background: #FFF1F2; }

.btn--secondary { background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border); padding: 14px 0; }

/* ---- Receipt ---- */
.receipt { font-size: 13px; color: #000; }
.receipt__center { text-align: center; margin-bottom: 8px; }
.receipt__logo {
    width: 48px; height: 48px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 6px;
    display: block;
}
.receipt__business-name { font-size: 16px; font-weight: 700; }
.receipt__business-line { font-size: 12px; color: #000; }
.receipt__invoice { font-size: 16px; font-weight: 700; }
.receipt__date { color: #000; font-size: 12px; }
.receipt__meta { font-size: 12px; line-height: 1.6; }
.receipt__meta strong { font-weight: 600; }
.receipt__divider { border-top: 1px dashed var(--color-border); margin: 10px 0; }
.receipt__line { display: flex; justify-content: space-between; padding: 4px 0; font-weight: 500; }
.receipt__line--total { font-weight: 700; font-size: 16px; }
.receipt__footer-text { font-size: 12px; color: #000; font-weight: 500; }
.receipt__brand-footer { font-size: 10px; color: #000; line-height: 1.5; font-weight: 500; }

.receipt-table__row {
    display: grid;
    grid-template-columns: 1fr 0.8fr 1fr 1fr;
    gap: 4px;
    padding: 3px 0;
    font-size: 12px;
    font-weight: 500;
}
.receipt-table__row--header {
    font-weight: 700;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 5px;
    margin-bottom: 3px;
}
.receipt-table__col-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.receipt-table__col-qty, .receipt-table__col-price, .receipt-table__col-total {
    text-align: right;
}

/* ---- 80mm thermal receipt printing ----
   Standard trick: hide the entire page, then make only the receipt
   visible again and pin it to the top-left. @page sets the actual
   paper size for browsers/print drivers that respect it (most desktop
   browsers; mobile print-to-thermal apps typically read the printer's
   own paper size instead, but this doesn't hurt them). */
@media print {
    @page {
        size: 80mm auto;
        margin: 0;
    }
    html, body {
        width: 80mm;
        margin: 0;
        padding: 0;
        background: #fff;
    }
    body * {
        visibility: hidden;
    }
    #receiptContent, #receiptContent * {
        visibility: visible;
    }

    /* The receipt sits inside the Cart/Receipt modal chrome
       (.sheet-overlay > .sheet > .sheet__body), which normally has a
       fixed position, a dark overlay background, and a scroll container
       with a max-height — all of that must be neutralized here, or the
       printed receipt can end up clipped to the on-screen modal height
       or show a dark background behind it. */
    #receiptSheet,
    #receiptSheet .sheet,
    #receiptSheet .sheet__body {
        position: static !important;
        inset: auto !important;
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
        width: auto !important;
        background: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #receiptContent {
        position: absolute;
        top: 0;
        left: 0;
        width: 80mm;
        padding: 3mm;
        font-family: 'Courier New', Courier, monospace;
        font-size: 11px;
        line-height: 1.4;
        color: #000;
        background: #fff;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    /* Thermal printers can't render light gray legibly (mostly binary
       black/white output) — the on-screen "muted" gray used for address,
       date, footer text, and the branding footer would print very faint
       or invisible. Force everything to solid black for print. */
    #receiptContent, #receiptContent * {
        color: #000 !important;
    }
    .receipt__business-name { font-size: 14px; }
    .receipt__invoice { font-size: 13px; }
    .receipt__line--total { font-size: 13px; }
    .receipt__divider { border-top: 1px dashed #000; }
    .receipt-table__row--header { border-bottom: 1px solid #000; }
    .receipt-table__col-qty, .receipt-table__col-price, .receipt-table__col-total {
        white-space: nowrap;
    }
    .receipt__logo { filter: grayscale(1); }

    /* A little extra feed space at the end, like a real thermal printer
       leaves before the auto-cutter. */
    .receipt__brand-footer { margin-bottom: 12mm; }
}

/* ---- Toast ---- */
.pos-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: #1A1D23;
    color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 60;
    max-width: 85%;
    text-align: center;
}
.pos-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- Inventory screen ---- */
.inventory-screen { padding: 16px; padding-bottom: 8px; }

.filter-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 12px;
}
.filter-chip {
    flex: 0 0 auto;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.filter-chip.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.category-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--color-text);
    background: var(--color-surface);
    margin-bottom: 12px;
}

.inventory-summary {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 14px 16px;
    margin-bottom: 12px;
}
.inventory-summary__item { display: flex; justify-content: space-between; align-items: center; }
.inventory-summary__label { font-size: 13px; color: var(--color-text-muted); }
.inventory-summary__value { font-size: 17px; font-weight: 700; color: var(--color-primary); }

.inventory-list { display: flex; flex-direction: column; gap: 10px; }

.inventory-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 14px 16px;
}
.inventory-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}
.inventory-card__name { font-size: 15px; font-weight: 600; }
.inventory-card__meta { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.inventory-card__row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--color-text-muted);
    padding-top: 4px;
}

.status-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.status-badge--ok    { background: #DCFCE7; color: #166534; }
.status-badge--warn  { background: #FEF3C7; color: #92400E; }
.status-badge--danger{ background: #FEE2E2; color: #991B1B; }

/* ---- Stock adjustment ---- */
.inventory-card__adjust-btn {
    margin-top: 10px;
    width: 100%;
    padding: 9px 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 13px;
    font-weight: 600;
}
.inventory-card__adjust-btn i { margin-right: 6px; color: var(--color-primary); }

.adjust-product-info { margin-bottom: 16px; }
.adjust-product-info__name { font-size: 16px; font-weight: 700; }
.adjust-product-info__stock { font-size: 13px; color: var(--color-text-muted); margin-top: 2px; }

#adjustSheet .form-field { margin-top: 14px; }
#adjustSheet select {
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 15px;
    color: var(--color-text);
    background: var(--color-surface);
}

/* ---- Generic master-data list (Categories/Brands/Units/Suppliers) ---- */
.master-data-screen,
/* Products, Sales History and Users follow the exact same
   pos-search + list(+ fab-add) layout as the master-data pages above,
   but their wrapper classes were never given this padding rule — so
   their lists/toolbars/FAB were sitting flush against the screen edges
   with no side margin, unlike every other list-style page. */
.products-screen,
.sales-history-screen,
.users-screen { padding: 16px; padding-bottom: 90px; }
.master-data-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    padding: 12px;
}

.master-data-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.master-data-card__info { flex: 1; min-width: 0; }
.master-data-card__title { font-size: 15px; font-weight: 600; }
.master-data-card__subtitle { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.master-data-card__actions { display: flex; gap: 6px; flex-shrink: 0; }
.master-data-card__btn {
    width: 34px; height: 34px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-size: 14px;
}

.fab-add {
    position: fixed;
    right: 20px;
    bottom: 90px;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    border: none;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(232, 0, 30, 0.4);
    z-index: 40;
}

#masterDataForm textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 15px;
    color: var(--color-text);
    font-family: inherit;
    resize: vertical;
}

/* ---- Purchasing screen ---- */
.purchasing-screen { padding: 16px; }
.purchasing-toolbar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
}
.purchasing-toolbar__link {
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}
.purchasing-toolbar__link i { margin-right: 5px; color: var(--color-primary); }

.purchasing-section-title { font-size: 15px; margin: 20px 0 10px; }

.purchase-product-results {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.purchase-product-result {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 14px;
    text-align: left;
}
.purchase-product-result__meta { color: var(--color-text-muted); font-size: 12px; }

.purchase-line { grid-template-columns: 1fr auto auto; }
.purchase-line__inputs { display: flex; gap: 8px; }
.purchase-line__inputs label {
    display: flex;
    flex-direction: column;
    font-size: 10px;
    color: var(--color-text-muted);
}
.purchase-line__inputs input {
    width: 70px;
    padding: 6px 8px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 13px;
    margin-top: 2px;
}

/* ---- Finance Overview ---- */
.finance-screen { padding: 16px; }
.finance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 8px;
}
/* Today/This Month always render exactly 3 cards (Sales Revenue, Purchase
   Cost, Gross Profit) into this 2-column grid, so the 3rd card is left
   orphaned alone on its own row with an empty, near-invisible gap next to
   it (Custom Range's grid gets a 4th "Number of Sales" card, so it fills
   evenly and never hits this). Span the lone trailing odd card across
   both columns so it reads as a clean full-width summary card instead. */
.finance-grid .finance-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}
.finance-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 14px;
}
.finance-card__label { font-size: 12px; color: var(--color-text-muted); margin-bottom: 4px; }
.finance-card__value { font-size: 17px; font-weight: 700; }
.finance-card--profit .finance-card__value { color: #16A34A; }

.finance-range-picker {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 14px;
    margin-top: 8px;
    margin-bottom: 15px;
}
.finance-range-picker input[type="date"] {
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 14px;
    width: 100%;
}

.finance-chart-wrap {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 14px;
    margin-top: 12px;
    height: 260px;
}

/* ---- Business Settings ---- */
.settings-screen { padding: 16px; padding-bottom: 40px; }
.settings-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.settings-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 15px;
    font-family: inherit;
    color: var(--color-text);
    resize: vertical;
}
.settings-logo-preview {
    width: 100%;
    max-width: 160px;
    height: 100px;
    object-fit: contain;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    margin-bottom: 8px;
}
.settings-logo-preview--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 12px;
}

/* ---- Password visibility toggle ---- */
.password-input-wrap {
    position: relative;
    display: flex;
}
.password-input-wrap input {
    flex: 1;
    padding-right: 42px;
}
.password-toggle-btn {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 42px;
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Dashboard hero (shop name + version) ---- */
.dashboard-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: var(--radius-lg);
    background: #2563eb;
    color: #fff;
    margin-bottom: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.dashboard-hero__logo {
    width: 52px; height: 52px;
    border-radius: 14px;
    object-fit: cover;
    background: #fff;
    flex-shrink: 0;
}
.dashboard-hero__logo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 22px;
}
.dashboard-hero__text { min-width: 0; }
.dashboard-hero__shop-name {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dashboard-hero__version {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #c5c5c5;
    margin-top: 3px;
    text-transform: uppercase;
}

/* ---- Dashboard mini chart ---- */
.dashboard-chart-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 16px;
    margin-top: 4px;
    margin-bottom: 20px;
}
.dashboard-chart-card__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 10px;
}
.dashboard-chart-card__canvas-wrap {
    position: relative;
    height: 160px;
}

/* ---- Sales History ---- */
.sales-history-filters {
    display: flex;
    gap: 8px;
    margin: 12px 0;
    padding: 0 16px;
}
.sales-history-filters input[type="date"],
.sales-history-filters select {
    flex: 1;
    padding: 9px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 13px;
    background: var(--color-surface);
    color: var(--color-text);
}
.sales-history-card { cursor: pointer; }
.purchase-history-card { cursor: pointer; }

/* ---- Dashboard: tablet layout (e.g. 1280x800 landscape tablets) ----
   Scoped entirely under .dashboard so mobile view and every other page
   are completely unaffected — only the dashboard's own KPI cards and
   shortcuts get a wider, 3-column layout on tablet-sized screens. */
@media (min-width: 1024px) {
    .dashboard {
        max-width: 980px;
        margin: 0 auto;
        padding: 28px;
    }
    .dashboard-hero {
        padding: 26px 28px;
    }
    .dashboard-hero__logo {
        width: 64px;
        height: 64px;
    }
    .dashboard-hero__shop-name {
        font-size: 22px;
    }
    .dashboard-hero__version {
        font-size: 12px;
    }
    .dashboard .stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }
    .dashboard .stat-card {
        padding: 20px;
    }
    .dashboard .stat-card__icon {
        width: 42px;
        height: 42px;
        font-size: 17px;
    }
    .dashboard .stat-card__value {
        font-size: 21px;
    }
    .dashboard-chart-card {
        padding: 22px;
    }
    .dashboard-chart-card__canvas-wrap {
        height: 220px;
    }
    .dashboard .shortcut-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 16px;
    }
    .dashboard .shortcut {
        padding: 22px 10px;
    }
}

/* ==================== POS CART-FIRST UPDATE ==================== */
.pos-screen--cart-first {
    padding: 14px 16px 96px;
    max-width: 900px;
    margin: 0 auto;
}
.pos-search-wrap { position: relative; z-index: 20; margin-bottom: 14px; }
.pos-search--inline {
    position: relative;
    top: auto;
    padding: 0;
    background: transparent;
}
.pos-search--inline .pos-search__icon { left: 14px; }
.pos-search--inline input { padding-left: 40px; min-height: 48px; }
.pos-search--inline .pos-search__scan-btn { right: 8px; }
.pos-search-results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 30px rgba(0,0,0,.14);
    overflow: hidden;
    max-height: 360px;
    overflow-y: auto;
}
.pos-search-results[hidden] { display: none; }
.pos-search-result {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    text-align: left;
    color: var(--color-text);
}
.pos-search-result:last-child { border-bottom: 0; }
.pos-search-result:active { background: var(--color-bg); }
.pos-search-result:disabled { opacity: .45; }
.pos-search-result__main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pos-search-result__main strong { font-size: 14px; }
.pos-search-result__main small { color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-search-result__price { font-weight: 800; color: var(--color-primary); white-space: nowrap; }
.pos-search-result-empty { padding: 18px; text-align: center; color: var(--color-text-muted); font-size: 13px; }

.pos-cart-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.pos-cart-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid var(--color-border);
}
.pos-cart-panel__header h2 { margin: 0 0 3px; font-size: 18px; }
.pos-cart-panel__header p { margin: 0; font-size: 12px; color: var(--color-text-muted); }
.pos-cart-panel__total { font-size: 19px; font-weight: 800; color: var(--color-primary); }
.pos-cart-table-wrap { width: 100%; }
.pos-cart-table {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(110px, .85fr) minmax(110px, .8fr) 34px;
    gap: 10px;
    align-items: center;
}
.pos-cart-table--head {
    padding: 11px 16px;
    background: var(--color-bg);
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.pos-cart-table--row { padding: 13px 16px; border-top: 1px solid var(--color-border); }
.pos-cart-table--row:first-child { border-top: 0; }
.pos-cart-product { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pos-cart-product strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-cart-product small { color: var(--color-text-muted); font-size: 10.5px; }
.pos-cart-price { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.pos-cart-price strong { font-size: 13px; }
.pos-cart-price small { font-size: 10px; color: var(--color-text-muted); }
.pos-cart-table .cart-line__qty { justify-content: center; }
.pos-cart-table .qty-btn { border-radius: 8px; }
.pos-cart-empty { min-height: 260px; padding: 44px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 7px; color: var(--color-text-muted); }
.pos-cart-empty i { font-size: 30px; opacity: .35; margin-bottom: 4px; }
.pos-cart-empty strong { color: var(--color-text); font-size: 14px; }
.pos-cart-empty span { font-size: 12px; }
.pos-process-sale { margin: 14px 16px 16px; width: calc(100% - 32px); }
.pos-process-sale:disabled { opacity: .45; cursor: not-allowed; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.sheet-overlay--center { align-items: center; padding: 14px; }
.checkout-modal { max-width: 620px; max-height: 92vh; margin: 0 auto; border-radius: 18px; }
.checkout-modal .sheet__header small { display: block; margin-top: 3px; color: var(--color-text-muted); font-size: 11px; }
.checkout-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.checkout-summary-card, .payment-detail-card {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg);
}
.payment-detail-card[hidden] { display: none; }
.checkout-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 14px; }
.checkout-summary-row--input input { width: 130px; text-align: right; padding: 9px 10px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); }
.checkout-summary-row--grand { margin-top: 5px; padding-top: 12px; border-top: 1px dashed var(--color-border); font-size: 18px; }
.checkout-summary-row--grand strong { color: var(--color-primary); }
.checkout-section-title { margin-top: 17px; margin-bottom: 8px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.payment-methods--two { grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: 0; }
.payment-methods--two .payment-method-btn { padding: 12px 10px; }
.payment-methods--two .payment-method-btn i { margin-right: 6px; }
.change-display { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--color-border); display: flex; align-items: center; justify-content: space-between; }
.change-display strong { font-size: 18px; color: var(--color-primary); }
.card-link-note { margin-top: 12px; color: var(--color-text-muted); font-size: 11px; display: flex; gap: 7px; align-items: center; }

@media (max-width: 640px) {
    .pos-screen--cart-first { padding: 10px 10px 92px; }
    .pos-cart-table { grid-template-columns: minmax(0, 1.6fr) minmax(96px, .85fr) minmax(90px, .75fr) 28px; gap: 6px; }
    .pos-cart-table--head, .pos-cart-table--row { padding-left: 10px; padding-right: 10px; }
    .pos-cart-table--head { font-size: 9px; }
    .pos-cart-table .qty-btn { width: 26px; height: 26px; }
    .pos-cart-table .qty-value { min-width: 30px; font-size: 12px; }
    .pos-cart-price small { display: none; }
    .checkout-grid { grid-template-columns: 1fr; }
    .sheet-overlay--center { align-items: flex-end; padding: 0; }
    .checkout-modal { max-width: none; width: 100%; border-radius: 20px 20px 0 0; }
}